/* ============================================================================
 * provider-drawer-bs-top-exact.css
 *
 * BS-EXACT drawer top components (2026-05-17 EXACT KLONLA, rule #160)
 *
 * Replaces MR's old top-section markup (provider-sheet-header + provider-sheet-tools
 * + provider-sheet-back + provider-search-bar + provider-sheet-grid-btn) with
 * BS-exact DOM classes captured live from m.bahissende303.com/tr/casino/slots
 * providers drawer.
 *
 * Source files (extract `.claude/extracts/bs-assets-2026-05-17/`):
 *   - BackNavigation.Bv3uLnDY.css  (486 bytes) — .backNavBlock + .backNavTitle
 *   - Casino.BjyJcCbk.css         (35 KB)    — .searchInput* + .provider*
 *
 * Token resolution (BS computed):
 *   --b:                              0,0,0           (black)
 *   --b-sc:                           255,255,255     (white)
 *   --hero:                           211,175,55      (gold)
 *   --border-radius-middle:           8px
 *   --default-transition-duration:    0.24s
 *
 * Tokens are inlined as direct RGB values to avoid MR theme leak (rule #117).
 *
 * Components:
 *   1. .backNavBlock + .backNavTitle              (GERİ row, replaces provider-sheet-header)
 *   2. .searchInputContent                        (search section wrapper, replaces provider-sheet-tools)
 *   3. .providerSearchAndReset                    (search + count + view-toggle group)
 *   4. .providerSearchRow                         (search row, height 40px when not empty)
 *   5. .searchInputWrp + .searchInput + .searchInputIcon  (search input + icon)
 *   6. .providerResetRow                          (count text + view-toggle, height 50px)
 *   7. .providerCountTxt                          (provider count text)
 *   8. .providerTypeIconWrp                       (grid/list toggle icon wrap)
 *
 * Cascade: load AFTER provider-drawer-correction.css so this file's rules win
 * for the new DOM classes (correction.css targets old classes which won't exist).
 *
 * Specificity strategy: triple-class selectors + html.mobile-root body.mobile-site
 * prefix to beat theme + cascade race conditions (rule #117).
 *
 * Tolerance budget (rule #160):
 *   - Sub-pixel rect: ≤ 0.5px
 *   - RGB diff: ≤ 1 unit
 *   - Alpha diff: ≤ 0.01
 *   - ΔE2000: ≤ 2.0
 *   - Font metric: ≤ 0.5px
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. .backNavBlock — Top row with GERİ chevron + "TÜM SAĞLAYICILAR" title
 *    BS rule (BackNavigation.Bv3uLnDY.css line 1):
 *      .backNavBlock{width:100%;display:flex;align-items:center;
 *        padding-left:16px;padding-right:16px;margin-bottom:20px;margin-top:18px}
 *      .backNavBlock>i{font-size:12px;color:rgba(var(--b-sc),1)}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .backNavBlock,
html.mobile-root body.mobile-site .providers-sidebar .backNavBlock,
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar .backNavBlock {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 18px !important;
  margin-bottom: 20px !important;
  /* BS computed height: 19.2px (line-box of 16px Roboto * 1.2). Override base.css
     `body.mobile-site [role=button] { min-height: 44px }` global touch-target
     rule. The parent .provider-sheet is `display: flex` (column), so flex-shrink:1
     (default) was collapsing backNavBlock to 10.24px below content size. BS uses
     `flex: none` / flex-shrink:0 implicitly, allowing the 19.2px line-box to win. */
  min-height: 0 !important;
  height: auto !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  box-sizing: border-box !important;
  /* BS shows GERİ row inside drawer's own coordinate system (sticky-headerless) */
  position: relative !important;
  z-index: 2 !important;
}

html.mobile-root body.mobile-site #providersSidebar .backNavBlock > i,
html.mobile-root body.mobile-site .providers-sidebar .backNavBlock > i {
  font-size: 12px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 1) !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

/* RTL flip (BS BackNavigation.Bv3uLnDY.css line 1: [dir=rtl] .backNavBlock>i{transform:rotate(180deg)}) */
html[dir="rtl"].mobile-root body.mobile-site #providersSidebar .backNavBlock > i,
html[dir="rtl"].mobile-root body.mobile-site .providers-sidebar .backNavBlock > i {
  transform: rotate(180deg) !important;
}

/* ---------------------------------------------------------------------------
 * 2. .backNavTitle — Title text next to GERİ chevron
 *    BS rule:
 *      .backNavTitle{flex:1;min-width:0;font-size:16px;padding-inline-start:14px;
 *        color:rgba(var(--b-sc),1);text-transform:uppercase;
 *        white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .backNavBlock .backNavTitle,
html.mobile-root body.mobile-site .providers-sidebar .backNavBlock .backNavTitle {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  /* BS uses line-height:normal → 16 * 1.2 = 19.2px line-box. Previous "1" forced
     16px line-box, dropping backNavBlock height to 8.575px and y-offset -3.71px
     vs BS (BS title y=67, MR title y=63.29). Restore BS-exact 19.2px line-box. */
  line-height: normal !important;
  padding-inline-start: 14px !important;
  color: rgba(255, 255, 255, 1) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

html.mobile-root body.mobile-site #providersSidebar .backNavBlock .backNavTitle:empty,
html.mobile-root body.mobile-site .providers-sidebar .backNavBlock .backNavTitle:empty {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 3. .searchInputContent — Outer padding wrapper for search section
 *    BS rule: .searchInputContent{padding-left:16px;padding-right:16px}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .searchInputContent,
html.mobile-root body.mobile-site .providers-sidebar .searchInputContent {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ---------------------------------------------------------------------------
 * 4. .providerSearchAndReset — Vertical stack of search row + reset row
 *    BS rule (Casino.BjyJcCbk.css):
 *      .providerSearchAndReset{width:100%;padding-inline-end:14px;
 *        flex:0 0 auto;padding-left:16px;padding-right:16px}
 *    NOTE: BS .providerSearchAndReset has its own 16px L/R padding nested inside
 *    .searchInputContent's 16px L/R padding (total 32px each side). We trust the
 *    BS computed result (inner element rect within drawer narrower than outer).
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .providerSearchAndReset,
html.mobile-root body.mobile-site .providers-sidebar .providerSearchAndReset {
  width: 100% !important;
  padding-inline-end: 14px !important;
  flex: 0 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---------------------------------------------------------------------------
 * 5. .providerSearchRow — Wrapper for searchInputWrp (height 40px when populated)
 *    BS rule:
 *      .providerSearchRow{width:100%;position:relative}
 *      .providerSearchRow:not(:empty){height:40px}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .providerSearchRow,
html.mobile-root body.mobile-site .providers-sidebar .providerSearchRow {
  width: 100% !important;
  position: relative !important;
}

html.mobile-root body.mobile-site #providersSidebar .providerSearchRow:not(:empty),
html.mobile-root body.mobile-site .providers-sidebar .providerSearchRow:not(:empty) {
  height: 40px !important;
}

/* ---------------------------------------------------------------------------
 * 6. .searchInputWrp — Search input border-frame (initially 40px wide → 100% when .active)
 *    BS rule:
 *      .searchInputWrp{width:100%;height:40px;border-radius:8px;overflow:hidden;
 *        padding-inline-end:40px;border:1px solid rgba(var(--b-sc),.2);
 *        position:relative;background-color:rgba(var(--b),1);max-width:40px;top:0;
 *        transition:background-color .24s,max-width .24s;right:0}
 *      .searchInputWrp.active{max-width:100%;background-color:rgba(var(--b),1)}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .searchInputWrp,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp {
  width: 100% !important;
  height: 40px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding-inline-end: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  background-color: rgba(0, 0, 0, 1) !important;
  max-width: 40px !important;
  top: 0 !important;
  right: 0 !important;
  transition: background-color 0.24s, max-width 0.24s !important;
  box-sizing: border-box !important;
}

html.mobile-root body.mobile-site #providersSidebar .searchInputWrp.active,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp.active {
  max-width: 100% !important;
  background-color: rgba(0, 0, 0, 1) !important;
}

/* ITER 728 (2026-05-27) — BS-paralel ::after overlay (rgba 255 alpha 0.1 + gradient).
 * BS live audit: `.searchInputWrp.active::after { content:""; position:absolute;
 * inset:0; background-color: rgba(255,255,255,0.1); background-image:
 * linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05)); pointer-events:none }`
 * Bu overlay search wrap'in saf siyah bg'sini ~rgb(26,26,26) acik griye donusturup
 * BS gibi belirgin pill goruntusu verir. Slot + livecasino + tv-oyunlari uc
 * provider drawer'da da etkin (shared CSS). */
html.mobile-root body.mobile-site #providersSidebar .searchInputWrp,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp {
  position: relative !important;
}
html.mobile-root body.mobile-site #providersSidebar .searchInputWrp::after,
html.mobile-root body.mobile-site #providersSidebar .searchInputWrp.active::after,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp::after,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp.active::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  border-radius: 8px !important;
  pointer-events: none !important;
}

/* ITER 729 (2026-05-27) — BS-paralel renk hizalama ITER 727b'den shared CSS'e
 * tasindi. Tum 3 sayfada (slot, livecasino, tv-oyunlari) ayni davranis.
 * tv-oyunlari.astro'daki ITER 727b inline kurallari kaldirilacak.
 * 6 fix kategori:
 *   1. Drawer wrapper drop-shadow KILL
 *   2. Search input vertical padding (1px 2px 1px 16px)
 *   3. Provider card text color 1.0 -> 0.8 alpha
 *   4. SVG path fill 0.8 -> 0.9 alpha
 *   5. Footer border-top KILL
 *   6. "Tumu" cardAll active subtle (BS pattern, NOT inverted)
 */

/* 1. Drawer wrapper drop-shadow KILL (BS: none, MR theme: 0 -8px 32px rgba(0,0,0,0.45)) */
html.mobile-root body.mobile-site aside#providersSidebar.providers-sidebar {
  box-shadow: none !important;
}

/* 2. Search input vertical padding (BS exact: 1px 2px 1px 16px) */
html.mobile-root body.mobile-site #providersSidebar input#providerSearchInput.searchInput,
html.mobile-root body.mobile-site .providers-sidebar input#providerSearchInput.searchInput {
  padding: 1px 2px 1px 16px !important;
}

/* 3. Provider card text color: 1.0 -> 0.8 alpha (BS rgba(255,255,255,0.8)) */
html.mobile-root body.mobile-site #providersSidebar #sidebarProvidersList .providerItemsInner.bs-prov-card:not(.bs-prov-all),
html.mobile-root body.mobile-site #providersSidebar #sidebarProvidersList .providerItemsInner.bs-prov-card:not(.bs-prov-all) .providerListRowName,
html.mobile-root body.mobile-site #providersSidebar #sidebarProvidersList .providerItemsInner.bs-prov-card:not(.bs-prov-all) .bs-logo,
html.mobile-root body.mobile-site .providers-sidebar #sidebarProvidersList .providerItemsInner.bs-prov-card:not(.bs-prov-all),
html.mobile-root body.mobile-site .providers-sidebar #sidebarProvidersList .providerItemsInner.bs-prov-card:not(.bs-prov-all) .providerListRowName,
html.mobile-root body.mobile-site .providers-sidebar #sidebarProvidersList .providerItemsInner.bs-prov-card:not(.bs-prov-all) .bs-logo {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 4. SVG path fill: 0.8 -> 0.9 alpha (BS pathFill rgba(255,255,255,0.9)) */
html.mobile-root body.mobile-site #providersSidebar #sidebarProvidersList.sidebar-providers-list .providerItemsInner.bs-prov-card .bs-logo svg,
html.mobile-root body.mobile-site #providersSidebar #sidebarProvidersList.sidebar-providers-list .providerItemsInner.bs-prov-card .bs-logo svg *,
html.mobile-root body.mobile-site #providersSidebar #sidebarProvidersList.sidebar-providers-list .providerItemsInner.bs-prov-card .bs-logo svg path,
html.mobile-root body.mobile-site .providers-sidebar #sidebarProvidersList.sidebar-providers-list .providerItemsInner.bs-prov-card .bs-logo svg,
html.mobile-root body.mobile-site .providers-sidebar #sidebarProvidersList.sidebar-providers-list .providerItemsInner.bs-prov-card .bs-logo svg *,
html.mobile-root body.mobile-site .providers-sidebar #sidebarProvidersList.sidebar-providers-list .providerItemsInner.bs-prov-card .bs-logo svg path {
  fill: rgba(255, 255, 255, 0.9) !important;
}

/* 5. Footer border-top KILL — parent-agnostic. Drawer acilinca
 * provider-drawer-early-bind.js footer'i body altina portalliyor,
 * #providersSidebar zinciri kiriliyor -> parent-bagimsiz selector zorunlu. */
html.mobile-root body.mobile-site .saveFilterButtonBc.provider-sheet-footer,
html.mobile-root body.mobile-site .saveFilterButtonBc,
html.mobile-root body.mobile-site .provider-sheet-footer {
  border-top: 0 !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
}

/* 6. "Tumu" cardAll active subtle (BS NOT-inverted pattern).
 * Theme rule: .providerItemsHolder.module .providerItemsInner.active uses
 * inverted bg (rgba(255,255,255,0.8) gradient + black text). BS keeps subtle
 * (rgba(255,255,255,0.1) gradient + white text). 3-ID stack ile specificity. */
html.mobile-root body.mobile-site #providersSidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-card.bs-prov-all,
html.mobile-root body.mobile-site #providersSidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-card.bs-prov-all.active,
html.mobile-root body.mobile-site .providers-sidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-card.bs-prov-all,
html.mobile-root body.mobile-site .providers-sidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-card.bs-prov-all.active {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  box-shadow: rgba(255, 255, 255, 0.4) 0.5px 0.5px 0 0 inset !important;
  border: 0.8px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
html.mobile-root body.mobile-site #providersSidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-all .providerListRowName,
html.mobile-root body.mobile-site #providersSidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-all .bs-logo,
html.mobile-root body.mobile-site #providersSidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-all .bs-logo-text,
html.mobile-root body.mobile-site .providers-sidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-all .providerListRowName,
html.mobile-root body.mobile-site .providers-sidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-all .bs-logo,
html.mobile-root body.mobile-site .providers-sidebar #providerItemsContainer #sidebarProvidersList .providerItemsInner.bs-prov-all .bs-logo-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------------------------------------------------------------------------
 * 7. .searchInput — Search input field
 *    BS rule:
 *      .searchInput{width:100%;height:100%;outline:none;padding-inline-start:16px;
 *        box-sizing:border-box;color:rgba(var(--b-sc),1);font-size:14px}
 *      .searchInput::placeholder{color:rgba(var(--b-sc),.4)}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .searchInputWrp .searchInput,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp .searchInput {
  width: 100% !important;
  height: 100% !important;
  outline: none !important;
  padding-inline-start: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline-end: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: rgba(255, 255, 255, 1) !important;
  font-size: 14px !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: normal !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

html.mobile-root body.mobile-site #providersSidebar .searchInputWrp .searchInput::placeholder,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp .searchInput::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
}

html.mobile-root body.mobile-site #providersSidebar .searchInputWrp .searchInput::-webkit-input-placeholder,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp .searchInput::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
 * 8. .searchInputIcon — Right-side search icon (40x40 absolute right)
 *    BS rule:
 *      .searchInputIcon{width:40px;height:100%;position:absolute;top:0;
 *        display:flex;align-items:center;justify-content:center;
 *        color:rgba(var(--b-sc),1);right:0;cursor:pointer}
 *      .searchInputIcon.bc-i-search{font-size:18px}
 *      .searchInputIcon:before{background:linear-gradient(135deg,
 *        rgba(var(--b-sc),1),rgba(var(--b-sc),.6));
 *        -webkit-background-clip:text;-webkit-text-fill-color:transparent}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .searchInputWrp .searchInputIcon,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp .searchInputIcon {
  width: 40px !important;
  height: 100% !important;
  max-height: 38.4px !important;
  box-sizing: content-box !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 1) !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-style: normal !important;
  outline: 0 !important;
}

html.mobile-root body.mobile-site #providersSidebar .searchInputWrp,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp {
  outline: rgb(0, 0, 0) none 0px !important;
}

html.mobile-root body.mobile-site #providersSidebar .searchInputWrp .searchInputIcon.bc-i-search,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp .searchInputIcon.bc-i-search {
  font-size: 18px !important;
  line-height: 1 !important;
}

html.mobile-root body.mobile-site #providersSidebar .searchInputWrp .searchInputIcon::before,
html.mobile-root body.mobile-site .providers-sidebar .searchInputWrp .searchInputIcon::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: rgb(255, 255, 255) !important;
}

/* ---------------------------------------------------------------------------
 * 9. .providerResetRow — Bottom row with provider count + view-toggle (50px height)
 *    BS rule:
 *      .providerResetRow{width:100%;height:50px;display:flex;align-items:center}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .providerResetRow,
html.mobile-root body.mobile-site .providers-sidebar .providerResetRow {
  width: 100% !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
 * 10. .providerCountTxt — Provider count text (left side of reset row)
 *     BS rule:
 *       .providerCountTxt{flex:auto;font-size:14px;line-height:16px;
 *         padding-inline-end:14px;color:rgba(var(--b-sc),.8);
 *         white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .providerCountTxt,
html.mobile-root body.mobile-site .providers-sidebar .providerCountTxt {
  flex: auto !important;
  font-size: 14px !important;
  line-height: 16px !important;
  padding-inline-end: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  min-width: 0 !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 11. .providerTypeIconWrp — View toggle icon wrap (right side of reset row)
 *     BS rule:
 *       .providerTypeIconWrp{display:flex;align-items:center}
 *       .providerTypeIconWrp i{font-size:18px;color:rgba(var(--b-sc),.6);
 *         transition:all var(--default-transition-duration) ease;
 *         background:linear-gradient(rgba(var(--b-sc),1),rgba(var(--b-sc),.5));
 *         -webkit-background-clip:text;-webkit-text-fill-color:transparent;
 *         margin-inline-end:2px;cursor:pointer}
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  /* ITER 538 (2026-05-20) — Override base.css [role=button] min-height:44 touch-target rule.
   * BS .providerTypeIconWrp has no explicit height; renders at icon i intrinsic height 18px.
   * Icon i still visually centered (flex align-items:center) — no layout change, BS-EXACT match. */
  min-height: 0 !important;
  height: auto !important;
}

html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i {
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.24s ease !important;
  margin-inline-end: 2px !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-style: normal !important;
}

html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i::before,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i::before {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---------------------------------------------------------------------------
 * 12. Sticky pinning for BS top components (BS keeps top section above scroll)
 *
 * BS layout pins .backNavBlock + .searchInputContent above the provider tile list
 * while tiles scroll behind. Use sticky positioning within drawer's own
 * coordinate system (drawer is already position:fixed with top:49).
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .provider-sheet > .backNavBlock,
html.mobile-root body.mobile-site .providers-sidebar .provider-sheet > .backNavBlock {
  position: sticky !important;
  top: 0 !important;
  background: rgba(0, 0, 0, 1) !important;
  z-index: 5 !important;
  /* ITER 8 (2026-05-17) — Flex-shrink: 0 protection. Without explicit flex
   *   declaration, the default `flex: 0 1 auto` allows .backNavBlock to shrink
   *   when .providerItemsContainer demands more space at tall viewports
   *   (≥783px on real mobile). Setting flex:0 0 auto locks the top section so
   *   it never collapses, which in turn keeps the scrollable middle bounded
   *   so .saveFilterButtonBc (sticky bottom) renders inside viewport. */
  flex: 0 0 auto !important;
}

html.mobile-root body.mobile-site #providersSidebar .provider-sheet > .searchInputContent,
html.mobile-root body.mobile-site .providers-sidebar .provider-sheet > .searchInputContent {
  position: sticky !important;
  /* Top offset = .backNavBlock total visual height = margin-top 18 + (i height 12, but flex centers — actually content height ≈ 16px line) + margin-bottom 20.
   * Computed via getBoundingClientRect on backNavBlock: line-height 16 with align-items:center → block height ≈ 16px. Total ≈ 18 + 16 + 20 = 54px. */
  top: 54px !important;
  background: rgba(0, 0, 0, 1) !important;
  z-index: 4 !important;
  /* ITER 538 (2026-05-20) — Remove 8px bottom padding to match BS items.top=196.2.
   * BS computed: searchInputContent ends flush with providerSearchAndReset bottom (196.2);
   * tile list grid starts immediately. MR was 204.2 (8px below BS). Fixes density drift. */
  padding-bottom: 0 !important;
  /* ITER 8 (2026-05-17) — Flex-shrink: 0 protection (see .backNavBlock above) */
  flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------------------
 * 13. Cleanup — neutralize legacy MR markup classes if any leak through
 *     (defense-in-depth: provider-sheet-header/tools/back/grid-btn/search-bar
 *     should NOT exist after slot.astro markup swap, but hide if they do)
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .provider-sheet-header:not(:has(.backNavBlock)),
html.mobile-root body.mobile-site #providersSidebar .provider-sheet-tools:not(:has(.searchInputContent)),
html.mobile-root body.mobile-site #providersSidebar > .provider-sheet > .provider-sheet-header:empty,
html.mobile-root body.mobile-site #providersSidebar > .provider-sheet > .provider-sheet-tools:empty {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 14. Reduced-motion override — disable searchInputWrp transitions for a11y
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site #providersSidebar .searchInputWrp,
  html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 15. BetConstruct-Icons glyph aliases — bc-icons.css is NOT loaded on slot
 *     page (verified via CSSOM document.styleSheets enumeration 2026-05-17),
 *     so we inline the critical glyph mappings here to ensure the BS-exact
 *     markup chevron renders.
 *
 *     Source: BS bc-icons.css (live extract)
 *       .bc-i-arrow-left1::before { content: "\E314" }
 *       .bc-i-ArrowLeft1::before  { content: "\E314" }  (camelCase variant)
 *
 *     BS BackNavigation chevron uses U+E314 from BetConstruct-Icons PUA.
 *     The font file itself is already loaded by host bc-icons stylesheet
 *     reference in the global head; we only need to ensure the rule that
 *     maps class → glyph exists on this page.
 *
 *     Defense-in-depth: also map view-module / view-list / search / close
 *     icons used inside drawer top section, in case host bc-icons.css fails
 *     to load (verified loaded today, but adding for robustness).
 * --------------------------------------------------------------------------- */
html.mobile-root body.mobile-site #providersSidebar .bc-i-arrow-left1::before,
html.mobile-root body.mobile-site .providers-sidebar .bc-i-arrow-left1::before,
html.mobile-root body.mobile-site #providersSidebar .bc-i-ArrowLeft1::before,
html.mobile-root body.mobile-site .providers-sidebar .bc-i-ArrowLeft1::before {
  content: "\E314" !important;
  font-family: 'BetConstruct-Icons', 'bc-icons', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none !important;
  display: inline-block !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  line-height: 1 !important;
}

/* Search icon defense-in-depth — BS uses U+E61D for magnifying glass */
html.mobile-root body.mobile-site #providersSidebar .searchInputIcon.bc-i-search::before,
html.mobile-root body.mobile-site .providers-sidebar .searchInputIcon.bc-i-search::before {
  font-family: 'BetConstruct-Icons', 'bc-icons', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  speak: none !important;
  display: inline-block !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  line-height: 1 !important;
}

/* View-module / view-list icons defense-in-depth */
html.mobile-root body.mobile-site #providersSidebar .bc-i-view-module::before,
html.mobile-root body.mobile-site .providers-sidebar .bc-i-view-module::before,
html.mobile-root body.mobile-site #providersSidebar .bc-i-view-list::before,
html.mobile-root body.mobile-site .providers-sidebar .bc-i-view-list::before {
  font-family: 'BetConstruct-Icons', 'bc-icons', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  speak: none !important;
  display: inline-block !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  line-height: 1 !important;
}

/* ============================================================================
 * BS-EXACT LIST-VIEW + BADGES + UYGULA (2026-05-17, rule #160 FAZ 3 CLONE)
 *
 * Source extract: .claude/extracts/bs-extract-providers-drawer-listview-2026-05-17.md
 * BS URL: m.bahissende303.com/tr/casino/slots
 *
 * Target hierarchy (markup in slot.astro 444-489):
 *   .providerItemsContainer
 *     └─ .providerItemsHolder.list (or .module)
 *         └─ .providerItemsInner (one per provider, holds badge + row + svg)
 *             ├─ .providerBadgeBlock.badge-{hot|new|top} (absolute pill, ::after pill)
 *             ├─ .providerListRow > p.providerListRowName  (LIST mode visible)
 *             └─ .CMSIconSVGWrapper.providerItemsBtn (MODULE mode visible)
 *   .saveFilterButtonBc
 *     └─ button.button.whiteBg.big.fullWidth > span ("UYGULA")
 *
 * Toggle behavior: provider-drawer-bs-exact.js swaps `.providerItemsHolder`
 * class between `list` and `module`, and icon class `bc-i-view-module` /
 * `bc-i-view-list`. Both child variants stay in DOM; CSS hide/show below.
 * ========================================================================== */

/* Container — scrollable middle section between drawer-top and UYGULA-sticky.
 * ITER 9 (2026-05-17) — padding-bottom:64px added to reserve scroll space
 * for absolutely-positioned UYGULA bar (height:64px). Otherwise the last
 * provider row gets hidden behind UYGULA at scroll-bottom. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsContainer,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsContainer {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 64px 0 !important;
  background: transparent !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Holder — base shared by .list and .module */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder {
  margin: 0 !important;
  padding: 3px 16px 10px !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* LIST mode — vertical stack with 6px gap */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  grid-template-columns: none !important;
}

/* MODULE mode — 4-column FLUID grid (was fixed 85.5px×4).
 * ITER 539 (2026-05-20) — Fixed columns made cards stick to left on viewports
 * wider than 392px (iPhone 15 Pro Max=430, Galaxy S Ultra=412, Pixel 7=412).
 * 4×85.5+3×6+2×16 = 392 → 38px right gap on 430px viewport.
 * 1fr distribution fills any viewport: (vw - 32pad - 18gap) / 4 = card width.
 * 392px viewport still yields exactly 85.5px (BS-EXACT preserved).
 * 430px viewport yields 95px cards (no right gap). Per rule #151. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  justify-content: stretch !important;
}

/* Inner — base shared, position:relative for badge absolute anchor */
html.mobile-root body.mobile-site #providersSidebar .providerItemsInner,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsInner {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  box-sizing: border-box !important;
  /* Remove any inherited button stylings */
  font-family: inherit !important;
  color: inherit !important;
  text-align: start !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Inner in LIST mode — full-width row 40px tall.
 * ITER 3 (2026-05-17) — BS-EXACT hairline border (0.8px solid rgba(255,255,255,0.1))
 * on every row creates the subtle separator BS uses to delineate provider entries.
 * Previously `border: 0` caused parent .providerListRow to be 360px wide instead of
 * 358.4px → cascaded into badge `left: 334.625px` vs BS `left: 333.025px` (Δ=1.6px).
 * With box-sizing:border-box and height:40px, content area shrinks to 38.4px matching
 * BS's `.providerListRow` rect.height = 38.4px exactly. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsInner,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsInner {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0.8px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Inner in MODULE mode — fluid card (was fixed 85.5×72).
 * ITER 539 (2026-05-20) — width:100% allows grid 1fr to size card, eliminating
 * right gap on >392px viewports (iPhone 15 Pro Max etc.). Height stays 72px. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .providerItemsInner,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .providerItemsInner {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  border: 0.8px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: rgba(255, 255, 255, 0.4) 0.5px 0.5px 0 0 inset !important;
}

/* Active state in MODULE mode — BS-EXACT (superseded by ITER 534 §A.1 below
 * but kept here with corrected values for cascade-order independence).
 * BS spec: linear-gradient(to bottom, rgba(--b-sc,.8), rgba(--b-sc,.5))
 *          + color rgba(--b,1) + 0 border + 1px inset shadow rgba(--b-sc,.9)
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .providerItemsInner.active,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .providerItemsInner.active {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) !important;
  border: 0 !important;
  color: rgba(0, 0, 0, 1) !important;
  box-shadow: rgba(255, 255, 255, 0.9) 1px 1px 0 0 inset !important;
}

/* Active state in LIST mode — BS-EXACT row+name (ITER 534 superseded values) */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsInner.active .providerListRowName,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsInner.active .providerListRowName {
  color: rgba(0, 0, 0, 1) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsInner.active .providerListRow,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsInner.active .providerListRow {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 1) !important;
  border-radius: 0 !important;
}

/* Row — the LIST-mode visible inner row */
html.mobile-root body.mobile-site #providersSidebar .providerListRow,
html.mobile-root body.mobile-site .providers-sidebar .providerListRow {
  display: flex !important;
  position: static !important;
  align-items: center !important;
  width: 100% !important;
  height: 38.4px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Row name — the actual provider title text in LIST mode */
html.mobile-root body.mobile-site #providersSidebar .providerListRowName,
html.mobile-root body.mobile-site .providers-sidebar .providerListRowName {
  display: block !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: 0 !important;
  max-width: 100% !important;
}

/* Hide the SVG logo wrapper when in LIST mode */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .CMSIconSVGWrapper,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .CMSIconSVGWrapper,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsBtn,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsBtn {
  display: none !important;
}

/* Hide the text row when in MODULE mode */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .providerListRow,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .providerListRow {
  display: none !important;
}

/* SVG logo wrapper in MODULE mode — center within the 85.5x72 cell.
 * ITER 4 (2026-05-17) — padding 12px → 4px to match BS extract:
 *   BS .providerItemsBtn padding: 4px → inner area 75.9×62.4
 *   Prior 12px shrunk SVG box to 59.9×46.4 → logo rendered 21% smaller
 *   than BS. Now SVG box fills 75.9×62.4 matching BS exactly. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .CMSIconSVGWrapper,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .CMSIconSVGWrapper,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .providerItemsBtn,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .providerItemsBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 4px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-sizing: border-box !important;
}
/* SVG element sizing — ITER 4 (2026-05-17): width/height 100% (was auto/auto).
 * BS extract showed SVG computed width=75.9px, height=62.4px (= wrapper inner
 * after 4px padding). preserveAspectRatio="xMidYMid meet" (default) keeps
 * logo aspect ratio while scaling to fit the box — wide logos like
 * Pragmatic Play (aspect 53:24) fill width 75.9 with vertical centering.
 * Prior `width: auto; height: auto` sized SVG to intrinsic viewBox px
 * (53×24 native) clamped only by max-* → logos appeared ~27% smaller. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .CMSIconSVGWrapper svg,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .CMSIconSVGWrapper svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  fill: currentColor !important;
  color: inherit !important;
}
/* Text fallback (no SVG provider) in MODULE mode
 * ITER 8b (2026-05-17) — removed `text-transform: uppercase`. BS renders SVG
 * logos with provider-native casing (e.g. "PG Soft" mixed-case, not "PG SOFT").
 * Forcing uppercase on MR text fallback distorts brand typography. Now {p.title}
 * renders as stored in DB ("PG Soft", "Pragmatic Play", ...), approximating
 * BS visual without re-hosting SVGs. */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .CMSIconSVGWrapper.bs-logo-text,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .CMSIconSVGWrapper.bs-logo-text {
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-align: center !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  word-break: break-word !important;
}

/* ─── BADGES ─── (data-badge="Sıcak"/"Yeni"/"En İyi" → ::after pill)
 * ITER 5 (2026-05-17) — pin to TOP-LEFT corner matching BS extract:
 *   BS: top:-3px, left:10px, right:auto (auto-computed 43.525px)
 *   Prior MR: top:0, right:-5px, left:auto → badge on RIGHT side
 *   Visual diff: badge flipped from right-aligned to left-aligned. */
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock {
  display: inline-block !important;
  position: absolute !important;
  top: -3px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;
  width: auto !important;
  max-width: max-content !important;
  height: 14.4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  /* ITER 452 (2026-05-17) — display:inline-block + max-width:max-content +
   * explicit right:auto/bottom:auto force shrink-to-content sizing on the
   * absolutely-positioned wrapper. Prior: legacy .bs-badge dual-class
   * inherited block layout from .providerListRow chain → 355px stretch.
   * BS measured: w≈22–30px (content-driven, matches BS extract B.8). */
}

html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock::after,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock::after {
  content: attr(data-badge);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  color: rgb(255, 255, 255) !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 0 !important;
  /* Background set per variant below */
}

html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-hot::after,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-hot::after {
  background: rgb(227, 32, 32) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-new::after,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-new::after {
  background: rgb(127, 25, 79) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-top::after,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-top::after {
  background: rgb(110, 58, 133) !important;
}

/* Legacy alias for migration: existing bs-badge.badge-best maps to badge-top */
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-best::after,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-best::after {
  background: rgb(110, 58, 133) !important;
}

/* ─── UYGULA (anchored bottom + white pill button) ─── */
html.mobile-root body.mobile-site #providersSidebar .saveFilterButtonBc,
html.mobile-root body.mobile-site .providers-sidebar .saveFilterButtonBc {
  /* ITER 9 (2026-05-17) — ITER 8 flex:0 0 64px relative-position rule
   *   actually NEUTRALIZED the safer `position:fixed bottom:0` from
   *   provider-drawer-correction.css (bs-top-exact.css loads LAST in
   *   BaseLayout.astro line 485, beats correction.css line 484 by cascade).
   *   At tall real-mobile viewports, the flex chain pushed UYGULA off-screen
   *   (visible only at simulated 594px viewport, missing at real 800px+).
   *
   *   Fix: position:absolute anchored to .provider-sheet (which has
   *   position:relative from provider-drawer-bs-exact.css line 119).
   *   Bypasses ALL flex distribution edge cases. UYGULA is always at the
   *   drawer's bottom, regardless of viewport height or flex behavior.
   *   .providerItemsContainer gets padding-bottom:64px so the last row
   *   isn't covered by UYGULA when scrolled to bottom. */
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  flex: 0 0 64px !important;
  padding: 16px !important;
  margin: 0 !important;
  background: rgb(0, 0, 0) !important;
  z-index: 1090 !important;
  box-sizing: border-box !important;
}

/* ITER 537 (2026-05-19) — POSITION:FIXED for drawer-open state.
 * ITER 539 (2026-05-20) — Selector switched because provider-drawer-bs-exact.js
 * PORTALS .saveFilterButtonBc to document.body. This escapes ASIDE's
 * overflow:hidden auto containing block that was making position:fixed behave
 * like absolute on iOS Safari (fixed children of scrollable containers bug).
 *
 * LAYOUT rule (applies whenever data-portaled=1 — node is now at body level): */
html.mobile-root body.mobile-site .saveFilterButtonBc[data-portaled="1"] {
  position: fixed !important;
  bottom: 0 !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 64px !important;
  padding: 16px !important;
  margin: 0 !important;
  background: rgb(0, 0, 0) !important;
  z-index: 10001 !important; /* above ASIDE z:10000 and overlay */
  box-sizing: border-box !important;
}

/* VISIBILITY rule — gated on body.drawer-open class (syncBodyClass adds/removes). */
html.mobile-root body.mobile-site.drawer-open .saveFilterButtonBc[data-portaled="1"] {
  display: block !important;
}
html.mobile-root body.mobile-site:not(.drawer-open) .saveFilterButtonBc[data-portaled="1"] {
  display: none !important;
}

html.mobile-root body.mobile-site #providersSidebar .saveFilterButtonBc #providerSheetApplyBtn.button.whiteBg.big.fullWidth,
html.mobile-root body.mobile-site #providersSidebar .saveFilterButtonBc .button.whiteBg.big.fullWidth,
html.mobile-root body.mobile-site .providers-sidebar .saveFilterButtonBc .button.whiteBg.big.fullWidth,
html.mobile-root body.mobile-site #providerSheetApplyBtn.button.whiteBg.big.fullWidth {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 1px 15px !important;
  margin: 0 !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  transition: opacity .15s ease !important;
  /* ITER 452 (2026-05-17) — Double-ID selector variant added (line 1) for
   * bulletproof specificity: (2, 7, 2) beats every legacy class chain. Also
   * added min-height:32px / max-height:32px to defeat any residual
   * min-height:40px clamps from theme-robinbet-mobile.css or correction.css.
   * BS extract B.12 measured h=32px (Roboto 14/16, padding 1px 15px). */
}

html.mobile-root body.mobile-site #providersSidebar .saveFilterButtonBc .button.whiteBg.big.fullWidth:active,
html.mobile-root body.mobile-site .providers-sidebar .saveFilterButtonBc .button.whiteBg.big.fullWidth:active,
html.mobile-root body.mobile-site #providerSheetApplyBtn.button.whiteBg.big.fullWidth:active {
  opacity: 0.85 !important;
}

html.mobile-root body.mobile-site #providersSidebar .saveFilterButtonBc .button.whiteBg.big.fullWidth > span,
html.mobile-root body.mobile-site .providers-sidebar .saveFilterButtonBc .button.whiteBg.big.fullWidth > span,
html.mobile-root body.mobile-site #providerSheetApplyBtn.button.whiteBg.big.fullWidth > span {
  display: block !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgb(0, 0, 0) !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  background: transparent !important;
}

/* ─── Overrides for stale .bs-prov-card legacy CSS ───
 * Prior CSS in slot-deep-fixes.css / provider-drawer-correction.css styled
 * .bs-prov-card as buttons with grid/card backgrounds. The BS-exact override
 * above strips those when the LIST `.providerItemsHolder.list` ancestor is
 * present. Force-reset button-derived rules that could leak through.
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsInner.bs-prov-card,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsInner.bs-prov-card {
  /* belt + braces — neutralize legacy bs-prov-card cell styling in LIST mode.
   * ITER 3b (2026-05-17) — `border: 0` removed, restored BS hairline 0.8px
   * matching upstream LIST .providerItemsInner rule. With (1,5,2) specificity
   * this rule beat the (1,4,2) generic LIST rule and zeroed the border, leaving
   * parent .providerListRow at 360px (vs BS 358.4px) → badge left offset +1.6px. */
  background: transparent !important;
  background-image: none !important;
  border: 0.8px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
}

/* Legacy bs-logo wrapper sits inside the .CMSIconSVGWrapper now; ensure it
   does NOT render in list mode (the rule above already display:none the
   wrapper, but defensive belt for any leaked .bs-logo direct child). */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .bs-logo,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .bs-logo {
  display: none !important;
}

/* Fix the drawer's vertical flow now that the holder is wrapped in a
   .providerItemsContainer. The drawer-top backNavBlock + searchInputContent
   are above; the saveFilterButtonBc is sticky at the bottom. The container
   needs to flex-grow so its scroll area fills available space.
 *
 * ITER 6 (2026-05-17) — selector specificity bump + height override:
 *   provider-drawer-bs-exact.css (@467) sets `.mobile-open .provider-sheet {
 *   height: 100dvh; max-height: 100dvh; }` (spec 1,5,2). That makes the
 *   sheet 594px while the drawer is 545px (drawer top:49 from layout) →
 *   sheet overflows drawer by 49px → UYGULA falls below viewport bottom.
 *
 * ITER 7 (2026-05-17) — bs-exact.css ALSO has a stronger sibling rule that
 *   ITER 6 missed: `html.mobile-root body.mobile-site .slot-page-root
 *   #providersSidebar.providers-sidebar.mobile-open .provider-sheet`
 *   (spec 1,6,2) with `height/max-height:100dvh !important`. Our ITER 6
 *   override was (1,5,2) → lost on specificity, sheet still 594.4px while
 *   drawer is 545.4px → UYGULA y=579→643 (below viewport 594). Bump every
 *   selector to (1,6,2) by adding `.slot-page-root` ancestor — same spec,
 *   bs-top-exact.css loads later (@485 vs @467) → cascade wins. */
html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar.mobile-open .provider-sheet,
html.mobile-root body.mobile-site .slot-page-root .providers-sidebar.mobile-open .provider-sheet,
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open .provider-sheet,
html.mobile-root body.mobile-site .providers-sidebar.mobile-open .provider-sheet,
html.mobile-root body.mobile-site .slot-page-root #providersSidebar .provider-sheet,
html.mobile-root body.mobile-site .slot-page-root .providers-sidebar .provider-sheet,
html.mobile-root body.mobile-site #providersSidebar .provider-sheet,
html.mobile-root body.mobile-site .providers-sidebar .provider-sheet {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  background: rgb(0, 0, 0) !important;
}

/* ============================================================================
 * ITER 534 — EXACT KLONLA COLOR + POSITION GAP FILL (2026-05-19, rule #160)
 *
 * Source: BS Casino.BjyJcCbk.css live extract (m.bahissende303.com).
 * BS canonical rules (verbatim from extract):
 *   .providerItemsInner:not(.active){color:rgba(var(--b-sc),.8);
 *     border:1px solid rgba(var(--b-sc),.1);
 *     box-shadow:inset .5px .5px rgba(var(--b-sc),.4);
 *     background:linear-gradient(to bottom,rgba(var(--b-sc),.1),rgba(var(--b-sc),.05))}
 *   .providerItemsInner.active{background:linear-gradient(to bottom,
 *     rgba(var(--b-sc),.8),rgba(var(--b-sc),.5));color:rgba(var(--b),1);
 *     box-shadow:inset 1px 1px rgba(var(--b-sc),.9)}
 *   .providerItemsInner.active svg polygon{fill:rgba(var(--b),.8)}
 *   .providerItemsInner:hover{ ... matches .active ... }
 *   .providerBadgeBlock:before{content:"";position:absolute;top:0;w:0;h:0;
 *     border-top:4px solid transparent}
 *   .providerItemsHolder.list .providerBadgeBlock:before{top:auto;
 *     border-top:none;border-bottom:4px solid transparent;bottom:-4px;right:0}
 *   .providerItemsHolder.list .providerBadgeBlock{top:0;right:-5px}
 *   .providerItemsBtn{font-size:10px;line-height:16px;font-weight:500;padding:4px}
 *   .providerItemsBtn svg polygon{fill:rgba(var(--b-sc),.9);transition:fill .24s}
 *   .providerTypeIconWrp i.active{background:linear-gradient(rgba(var(--hero),1),
 *     rgba(var(--hero),.6));-webkit-background-clip:text}
 *   .providerItemsHolder.list{padding-inline-end:4px}
 *
 * USER SCOPE (2026-05-19): "sağlayıcı adlarına felan dokunma. ve konumlara
 *   da dikkat et. exact klonla eksikleri. ve renklere de dikkat et renk
 *   taraması da yap o farkları ekle". Provider name TEXT untouched —
 *   visual styling (colors, positions, missing UI elements) only.
 *
 * Token resolution:
 *   --b-sc = 255,255,255 (white)
 *   --b    = 0,0,0       (black)
 *   --hero = 211,175,55  (gold)
 * ========================================================================== */

/* A.1 — ACTIVE STATE (LIST + MODULE both)
 * BS active = strong white gradient + BLACK text + 0 border + 1px inset shadow.
 * Previous MR weak-gradient `rgba(255,255,255,0.2/0.12)` made selected cards
 * nearly indistinguishable from inactive ones. BS makes selected cards
 * highly visible (near-solid white with black text).
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active,
html.mobile-root body.mobile-site .sidebar-providers-list .providerItemsInner.active,
html.mobile-root body.mobile-site .bs-providers-grid .providerItemsInner.active {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) !important;
  border: 0 !important;
  color: rgba(0, 0, 0, 1) !important;
  box-shadow: rgba(255, 255, 255, 0.9) 1px 1px 0 0 inset !important;
}

/* A.2 — Active inner row + name → BLACK text propagation */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsInner.active .providerListRow,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsInner.active .providerListRow,
html.mobile-root body.mobile-site .sidebar-providers-list .providerItemsInner.active .providerListRow {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 1) !important;
  border-radius: 0 !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerItemsInner.active .providerListRowName,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerItemsInner.active .providerListRowName,
html.mobile-root body.mobile-site .sidebar-providers-list .providerItemsInner.active .providerListRowName {
  color: rgba(0, 0, 0, 1) !important;
}

/* A.3 — Active SVG/logo → black 0.85 (BS polygon fill: rgba(var(--b),.8)) */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active .CMSIconSVGWrapper,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active .CMSIconSVGWrapper,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active .providerItemsBtn,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active .providerItemsBtn,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active .bs-logo,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active .bs-logo {
  color: rgba(0, 0, 0, 0.85) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active svg,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active svg,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active svg *,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active svg * {
  fill: rgba(0, 0, 0, 0.85) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner.active svg polygon,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner.active svg polygon {
  fill: rgba(0, 0, 0, 0.8) !important;
}

/* B — HOVER STATE (matches active per BS; hover-capable devices only)
 * Skipped on touch devices (most mobile) to avoid sticky-hover after tap.
 */
@media (hover: hover) and (pointer: fine) {
  html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active):hover,
  html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active):hover {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) !important;
    border: 0 !important;
    color: rgba(0, 0, 0, 1) !important;
    box-shadow: rgba(255, 255, 255, 0.9) 1px 1px 0 0 inset !important;
  }
  html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active):hover .providerListRowName,
  html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active):hover .providerListRowName {
    color: rgba(0, 0, 0, 1) !important;
  }
  html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active):hover svg,
  html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active):hover svg,
  html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active):hover svg *,
  html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active):hover svg * {
    fill: rgba(0, 0, 0, 0.85) !important;
    color: rgba(0, 0, 0, 0.85) !important;
  }
  html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active):hover svg polygon,
  html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active):hover svg polygon {
    fill: rgba(0, 0, 0, 0.8) !important;
  }
}

/* C.1 — BADGE ::before TRIANGLE TAIL (BS ribbon hanging effect)
 * MISSING entirely from MR — badges showed as plain rectangles instead of
 * BS's ribbon-with-tail visual.
 * Module mode: top:0 left:-8px (LTR), tail points down-left
 * List mode (C.2): bottom:-4px right:0 (LTR), tail points down-right
 */
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock::before,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  right: auto !important;
  bottom: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  pointer-events: none !important;
}

/* C.2 — LIST-mode tail flips to bottom-right corner */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerBadgeBlock::before,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerBadgeBlock::before {
  top: auto !important;
  bottom: -4px !important;
  left: auto !important;
  right: 0 !important;
  border-top: none !important;
  border-bottom: 4px solid transparent !important;
}

/* C.3 — Per-variant tail color (matches badge bg with 0.6 alpha for shadow effect) */
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-hot::before,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-hot::before {
  border-inline-end: 8px solid rgba(227, 32, 32, 0.6) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-new::before,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-new::before {
  border-inline-end: 8px solid rgba(127, 25, 79, 0.6) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-top::before,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-top::before,
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock.badge-best::before,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock.badge-best::before {
  border-inline-end: 8px solid rgba(110, 58, 133, 0.6) !important;
}

/* D — LIST-mode badge POSITION (BS: top:0 right:-5px)
 * Module mode (ITER 5) kept top:-3px left:10px. LIST overrides:
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list .providerBadgeBlock,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list .providerBadgeBlock {
  top: 0 !important;
  bottom: 0 !important;
  right: -5px !important;
  left: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* E — providerItemsBtn font correction (MODULE mode bs-logo-text fallback)
 * BS: font-size:10px; line-height:16px; font-weight:500; padding:4px
 * MR was: 11px/600/1.2 (too big, too bold, line collapsed)
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .CMSIconSVGWrapper.bs-logo-text,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .CMSIconSVGWrapper.bs-logo-text,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.module .providerItemsBtn.bs-logo-text,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.module .providerItemsBtn.bs-logo-text {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  padding: 4px !important;
  word-break: break-word !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* F — providerItemsBtn svg polygon — base fill (inactive state)
 * BS: fill rgba(255,255,255,0.9) with 0.24s transition
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active) .providerItemsBtn svg polygon,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active) .providerItemsBtn svg polygon,
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active) .CMSIconSVGWrapper svg polygon,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active) .CMSIconSVGWrapper svg polygon {
  fill: rgba(255, 255, 255, 0.9) !important;
  transition: fill 0.24s !important;
}

/* G — providerTypeIconWrp ACTIVE state → GOLD gradient (BS --hero token 211,175,55)
 * MR currently shows plain white icon. BS uses gold gradient via background-clip:text.
 */
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i.active,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i.active,
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp.active i,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp.active i {
  color: rgba(211, 175, 55, 1) !important;
}

html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i.active::before,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i.active::before,
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp.active i::before,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp.active i::before {
  background: linear-gradient(rgba(211, 175, 55, 1), rgba(211, 175, 55, 0.6)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
  html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i:hover,
  html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i:hover {
    color: rgba(211, 175, 55, 1) !important;
  }
  html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i:hover::before,
  html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i:hover::before {
    background: linear-gradient(rgba(211, 175, 55, 1), rgba(211, 175, 55, 0.6)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
}

/* H — providerItemsHolder.list extra padding-inline-end: 4px (BS spec)
 * Base padding 16px L/R + LIST adds 4px right = 20px total. BS aligns badge
 * tail (right:-5px) into the gap created by this padding.
 */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder.list,
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder.list {
  padding-inline-end: 20px !important;
}

/* I — Border 0.8px → 1px (BS spec) + inset shadow 0.5px (BS spec) on inactive */
html.mobile-root body.mobile-site #providersSidebar .providerItemsHolder .providerItemsInner:not(.active),
html.mobile-root body.mobile-site .providers-sidebar .providerItemsHolder .providerItemsInner:not(.active),
html.mobile-root body.mobile-site .sidebar-providers-list .providerItemsInner.bs-prov-card:not(.active),
html.mobile-root body.mobile-site .bs-providers-grid .providerItemsInner.bs-prov-card:not(.active) {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: rgba(255, 255, 255, 0.4) 0.5px 0.5px 0 0 inset !important;
}

/* J — View-toggle icon (ITER 535, BS-MEASURED 2026-05-19):
 *   BS live measurement: color rgba(255,255,255,0.6) SOLID — no gradient.
 *   Prior gold gradient was incorrect assumption. Replace with solid white 60%.
 */
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i:only-child,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i:only-child {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i:only-child::before,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i:only-child::before {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
/* When 2 icons present and one lacks .active → white gradient (BS spec) */
html.mobile-root body.mobile-site #providersSidebar .providerTypeIconWrp i:not(:only-child):not(.active)::before,
html.mobile-root body.mobile-site .providers-sidebar .providerTypeIconWrp i:not(:only-child):not(.active)::before {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* K — providerBadgeBlock z-index lift so ::before triangle sits BEHIND the
 * ::after pill (creates the BS "tail extending from ribbon" illusion).
 * Without negative z-index on ::before, the tail draws on top of the pill.
 */
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock {
  isolation: isolate !important;
}
html.mobile-root body.mobile-site #providersSidebar .providerBadgeBlock::after,
html.mobile-root body.mobile-site .providers-sidebar .providerBadgeBlock::after {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================================
 * END ITER 534 EXACT KLONLA GAP FILL (2026-05-19)
 * ========================================================================== */