/* MR search input CSS — ITER 296 (BS-paralel)
   ─────────────────────────────────────────────────────────────────
   Reusable search field with leading icon, clear button, loading
   spinner, debounce-aware. Mirrors BS pattern (search input across
   provider drawer, game search, notification list, profile filters).

   Markup:
     <div class="bs-search">
       <span class="bs-search-icon"></span>
       <input class="bs-search-input" type="search" inputmode="search"
              placeholder="Ara..." autocomplete="off">
       <button class="bs-search-clear" type="button" hidden aria-label="Temizle"></button>
     </div>

   States:
     :focus-within → border highlights gold, bg lift
     [data-loading="true"] → spinner replaces clear button
     input.has-value → show clear button

   Variants:
     .bs-search--lg     larger height (44px touch target)
     .bs-search--sm     smaller (32px)
     .bs-search--block  full-width (100%)
     .bs-search--rounded pill shape (radius 999px)

   Tokens:
     --bs-search-h:        38px
     --bs-search-radius:   8px
     --bs-search-bg:       rgba(255,255,255,0.04)
     --bs-search-bg-focus: rgba(212,175,55,0.06)
     --bs-search-border:   rgba(255,255,255,0.10)
*/

:root {
  --bs-search-h: 38px;
  --bs-search-radius: 8px;
  --bs-search-bg: rgba(255, 255, 255, 0.04);
  --bs-search-bg-focus: rgba(212, 175, 55, 0.06);
  --bs-search-border: rgba(255, 255, 255, 0.10);
  --bs-search-border-focus: rgba(212, 175, 55, 0.5);
  --bs-search-text: #fff;
  --bs-search-placeholder: rgba(255, 255, 255, 0.45);
  --bs-search-icon: #d4af37;
  --bs-search-padding-x: 12px;
}

.bs-search {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--bs-search-h);
  background: var(--bs-search-bg);
  border: 1px solid var(--bs-search-border);
  border-radius: var(--bs-search-radius);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.bs-search:focus-within {
  background: var(--bs-search-bg-focus);
  border-color: var(--bs-search-border-focus);
}

.bs-search--lg { --bs-search-h: 44px; }
.bs-search--sm { --bs-search-h: 32px; }
.bs-search--block { width: 100%; }
.bs-search--rounded { --bs-search-radius: 999px; }

.bs-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: var(--bs-search-padding-x);
  flex: 0 0 auto;
  background-color: var(--bs-search-icon);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.bs-search-input {
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  min-width: 0;
  padding: 0 8px 0 10px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--bs-search-text);
  font-size: 14px;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
}
.bs-search-input::placeholder {
  color: var(--bs-search-placeholder);
}
.bs-search-input::-webkit-search-cancel-button,
.bs-search-input::-webkit-search-decoration,
.bs-search-input::-webkit-search-results-button,
.bs-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* Clear button (visible when input has value) */
.bs-search-clear {
  width: 28px;
  height: 28px;
  margin-right: 6px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.bs-search-clear:hover {
  background: rgba(255, 255, 255, 0.08);
}
.bs-search-clear[hidden] {
  display: none;
}
.bs-search-clear::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Loading spinner replaces clear button */
.bs-search[data-loading="true"] .bs-search-clear {
  display: inline-flex !important;
}
.bs-search[data-loading="true"] .bs-search-clear::before {
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(212, 175, 55, 0.7);
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  animation: bsSearchSpin 800ms linear infinite;
}
@keyframes bsSearchSpin {
  to { transform: rotate(360deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bs-search,
  .bs-search-clear {
    transition: none !important;
  }
  .bs-search[data-loading="true"] .bs-search-clear::before {
    animation: none;
  }
}