/* ===== PROVIDER DRAWER BS-EXACT ====================================
 *
 * Created: 2026-04-27 — Agent (provider drawer parity).
 *
 * SCOPE: Slot/Casino mobile provider drawer (`#providersSidebar`).
 * GOAL : Match BS (m.bahissende302.com /tr/casino/slots provider sheet)
 *        markup, geometry, color, font, behavior pixel-by-pixel.
 *
 * KEY DIFFERENCES (rule §28 9-layer match):
 *   1. BS drawer covers entire viewport (top:0 -> bottom).
 *      MR drawer is at top:49 with `mobileHeader` (z:1085) sticking out above.
 *      FIX: when `.providers-sidebar.mobile-open`, hide mobileHeader + bottomTab.
 *      Drawer takes full viewport.
 *
 *   2. BS drawer has NO "Tüm Sağlayıcılar" reset header (`.bs-reset-row`).
 *      MR shows it. FIX: display:none.
 *
 *   3. BS drawer has NO "TÜMÜ" first card (`.bs-prov-all`).
 *      MR shows it. FIX: display:none.
 *
 *   4. BS has 3-dot view-toggle btn (`.provider-sheet-grid-btn`).
 *      MR has it but display:none. FIX: display:flex.
 *
 *   5. BS GERİ button visible with chevron + "GERİ" text @ y=49-95.
 *      MR has it with font-size:0px. FIX: font-size 14px, visible.
 *
 *   6. BS UYGULA: `<button class="button whiteBg big fullWidth">` w/ font 16px,
 *      bg white, color black. MR has 12px. FIX: bump font-size + bg/color.
 *
 *   7. BS provider grid 4-cols, no first TÜMÜ pad. MR: 4-cols + TÜMÜ.
 *      FIX: keep grid same; first card now PRAGMATIC (after TÜMÜ hidden).
 *
 * ALL specificity uses `html.mobile-root body.mobile-site` to override
 * theme-robinbet-mobile.css cascading rules. No `!important` unless
 * cascade conflict on existing `!important` rules.
 *
 * RULE REFS: #28, #30, #111, #122, #130, K.9 (this commit's chain).
 * =================================================================== */

/* --- (1) Hide mobileHeader + bottomTab + announcement + nav when open --
 *
 * Multi-strategy: prefer body.drawer-open class (set by JS), fallback to
 * :has(.mobile-open) for browsers that support it. Also hide all fixed/
 * sticky page chrome that would overlap the full-screen drawer.
 * ------------------------------------------------------------------ */
html.mobile-root body.mobile-site.drawer-open header.mobileHeader,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) header.mobileHeader,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) header.mobileHeader {
    display: none !important;
}

/* Bottom tab / mobile footer */
html.mobile-root body.mobile-site.drawer-open .bottom-tab,
html.mobile-root body.mobile-site.drawer-open .mobileFooter,
html.mobile-root body.mobile-site.drawer-open .mobFooter,
html.mobile-root body.mobile-site.drawer-open .tab-navigation-w-bc,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .bottom-tab,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .bottom-tab,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .mobileFooter,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .mobileFooter,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .tab-navigation-w-bc,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .tab-navigation-w-bc,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .mobFooter,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .mobFooter {
    display: none !important;
}

/* Announcement bar */
html.mobile-root body.mobile-site.drawer-open #mobAnnouncementBar,
html.mobile-root body.mobile-site.drawer-open .mob-announcement-bar,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) #mobAnnouncementBar,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) #mobAnnouncementBar,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .mob-announcement-bar,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .mob-announcement-bar {
    display: none !important;
}

/* Sticky main nav (SLOT/CANLI CASINO + ANA SAYFA/TURNUVALAR) */
html.mobile-root body.mobile-site.drawer-open nav.mainMenu,
html.mobile-root body.mobile-site.drawer-open .hdr-navigation-scrollable,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) nav.mainMenu,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) nav.mainMenu,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .hdr-navigation-scrollable,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .hdr-navigation-scrollable {
    display: none !important;
}

/* Some announcement bars / informative widget — hide too */
html.mobile-root body.mobile-site.drawer-open .informative-widget-container,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .informative-widget-container,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .informative-widget-container {
    display: none !important;
}

/* Lock body scroll when drawer open */
html.mobile-root body.mobile-site.drawer-open,
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open),
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) {
    overflow: hidden !important;
}

/* --- (2) Drawer fills full viewport ---------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar.mobile-open,
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 10000 !important;
    background: #000 !important;
    transform: none !important;
}

html.mobile-root body.mobile-site .slot-page-root #providersSidebar.providers-sidebar.mobile-open .provider-sheet,
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open .provider-sheet {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    /* ITER 536 — was 100dvh which OVERFLOWED parent ASIDE (svh-49).
     * UYGULA (position:absolute bottom:0 relative to .provider-sheet) ended up
     * at SHEET.bottom = top(49) + 100dvh = below visible viewport bottom.
     * Fix: inherit ASIDE height via 100% so UYGULA stays at viewport bottom. */
    height: 100% !important;
    max-height: 100% !important;
    background: #000 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- (3) Provider sheet HEADER (GERİ button) ------------------------- */
html.mobile-root body.mobile-site .provider-sheet > .provider-sheet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex: 0 0 auto !important;
}

html.mobile-root body.mobile-site .provider-sheet-back#providerSheetBackBtn,
html.mobile-root body.mobile-site .provider-sheet-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    height: 40px !important;
    min-width: 0 !important;
    width: auto !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

html.mobile-root body.mobile-site .provider-sheet-back i.fas,
html.mobile-root body.mobile-site .provider-sheet-back i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: #fff !important;
    margin-right: 4px !important;
}

/* --- (4) Provider sheet TOOLS row (search + 3-dot) ------------------- */
html.mobile-root body.mobile-site .provider-sheet > .provider-sheet-tools {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    background: #000 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    height: 56px !important;
    min-height: 56px !important;
}

/* ITER 275 — BS-paralel search box appearance (lighter bg, brighter icon) */
html.mobile-root body.mobile-site .provider-sheet-tools .sidebar-search,
html.mobile-root body.mobile-site .provider-sheet-tools .provider-search-bar,
html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-search {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    /* ITER 458 — BS-exact (measured live): bg pure black, border 0.8px white-0.2,
     * radius 8px. ITER 456 used near-invisible 0.06 alpha border + 4px radius
     * which made search outline disappear vs BS's clearly visible edge. */
    background: #000000 !important;
    border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0 0 0 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-search-input,
html.mobile-root body.mobile-site .provider-sheet-tools input[type="text"]#providerSearchInput {
    flex: 1 1 auto !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    height: 38px !important;
    outline: none !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-search-input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-search-btn,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSearchClearBtn {
    background: transparent !important;
    border: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-search-btn i,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSearchClearBtn i {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* 3-dot view toggle (BS shows this btn at right of search) */
html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-grid-btn,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSheetGridBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    /* ITER 456 — BS-paralel: bare icon, no frame/bg */
    border: 0 none transparent !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-grid-btn i,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSheetGridBtn i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-grid-btn.active,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSheetGridBtn.active {
    background: #c1a04a !important;
    border-color: #c1a04a !important;
    color: #000 !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-grid-btn.active i,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSheetGridBtn.active i {
    color: #000 !important;
}

/* ITER 455 — inline SVG fallback for fa-th. FontAwesome Solid font race on
 * /slot rendered fa-odnoklassniki ОК glyph in place of 3x3 grid; SVG removes
 * the font-load dependency entirely. */
html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-grid-btn .provider-sheet-grid-icon,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSheetGridBtn .provider-sheet-grid-icon {
    width: 14px !important;
    height: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: block !important;
}

html.mobile-root body.mobile-site .provider-sheet-tools .provider-sheet-grid-btn.active .provider-sheet-grid-icon,
html.mobile-root body.mobile-site .provider-sheet-tools #providerSheetGridBtn.active .provider-sheet-grid-icon {
    color: #000 !important;
}

/* --- (5) MR staged-selection counter row (BS-paralel) — ITER 237 -----
 * Previously hidden because no staging existed. Now visible when user
 * selects providers; JS toggles inline display:flex/none in updateStagedUI().
 * --------------------------------------------------------------------- */

/* --- (6) Hide MR-only "TÜMÜ" first card ------------------------------ */
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-all,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-all,
html.mobile-root body.mobile-site .sidebar-providers-list button.bs-prov-card.bs-prov-all,
html.mobile-root body.mobile-site .sidebar-providers-list button.bs-prov-all {
    display: none !important;
}

/* --- (7) Provider grid container (scrollable area) ------------------- */
html.mobile-root body.mobile-site .provider-sheet > .sidebar-providers-list,
html.mobile-root body.mobile-site .provider-sheet > .bs-providers-grid {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 12px 80px 12px !important;
    margin: 0 !important;
    background: #000 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    align-content: start !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
}

html.mobile-root body.mobile-site .provider-sheet > .sidebar-providers-list::-webkit-scrollbar {
    display: none !important;
}

/* Provider card — match BS 1:1 ratio, dark bg, badge, padding */
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* ITER 457 — BS-exact card measurements (measured live BS drawer):
     * card 85.5x72 (ratio 1.1875), bg transparent, border 0.8px rgba(255,255,255,0.1),
     * border-radius 8px, padding 0px. ITER 456 set 1:1 + #000000 + 4px br + 6px pad
     * which gave squared/dark cards — BS cards are wider-than-tall and bg-less. */
    aspect-ratio: 85.5 / 72 !important;
    width: 100% !important;
    background: transparent !important;
    border: 0.8px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: background 150ms ease, border-color 150ms ease !important;
    contain: layout style paint !important;
}

/* ITER 448 — instant click: skip SVG hit-testing so click target is the button itself */
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo,
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo svg,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo svg,
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo svg *,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo svg * {
    pointer-events: none !important;
}

html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    fill: #fff !important;
}

html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo svg,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo svg {
    max-width: 80% !important;
    max-height: 70% !important;
    width: auto !important;
    height: auto !important;
    fill: currentColor !important;
}

/* ITER 438: force fill propagation to all SVG children (paths, groups, uses).
 * BS SVGs use fill="currentColor" on root <svg>, but some browsers don't
 * inherit the presentation attribute to children. Force it via CSS. */
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo svg *,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo svg * {
    fill: currentColor !important;
}

/* Logo TEXT fallback (5 BS providers without SVG + MR-only providers) */
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card .bs-logo.bs-logo-text,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card .bs-logo.bs-logo-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #fff !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    padding: 4px !important;
}

/* ITER 237d: BS-paralel selected — white gradient bg, NO border, inner shadow. */
html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card.active:not(.bs-prov-all),
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card.active:not(.bs-prov-all) {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) !important;
    background-color: transparent !important;
    border: 0 none transparent !important;
    border-width: 0 !important;
    box-shadow: rgba(255, 255, 255, 0.9) 1px 1px 0px 0px inset !important;
}

html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card.active:not(.bs-prov-all) .bs-logo,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card.active:not(.bs-prov-all) .bs-logo {
    color: #000000 !important;
}

html.mobile-root body.mobile-site .sidebar-providers-list .bs-prov-card.active:not(.bs-prov-all) .bs-logo svg,
html.mobile-root body.mobile-site .bs-providers-grid .bs-prov-card.active:not(.bs-prov-all) .bs-logo svg {
    color: #000000 !important;
    fill: currentColor !important;
}

/* ITER 452 (2026-05-17) — Legacy badge + UYGULA button rules NEUTRALIZED
 * REASON: Conflicted with BS-EXACT canonical rules in provider-drawer-bs-top-exact.css.
 *
 * Legacy badge issues (.bs-badge chain):
 *   • top:0 left:0  ➜ BS: top:0 right:-5px
 *   • h:16 lh:16    ➜ BS: h:14.4 lh:normal
 *   • fs:9 fw:700   ➜ BS: fs:8 fw:400
 *   • letter-spacing:0.4px  ➜ BS: normal
 *   • Colors wildly off: hot=#d52d2d (213,45,45) vs BS rgb(227,32,32);
 *                        best=#6f42c1 (111,66,193) vs BS rgb(110,58,133);
 *                        new=#2d8cd5 (45,140,213) vs BS rgb(127,25,79) ← was BLUE, BS is PURPLE
 *   • border-radius (asymmetric)  ➜ BS: 0 (square)
 *   • z-index:2     ➜ BS: 10
 *
 * Legacy UYGULA button issues (.provider-sheet-apply chain):
 *   • h:40 lh:40    ➜ BS: h:32 lh:16
 *   • fw:700 letter-spacing:0.4px  ➜ BS: fw:400 letter-spacing:normal
 *   • padding:0     ➜ BS: 1px 15px
 *
 * Legacy footer wrapper issues (.provider-sheet > .provider-sheet-footer):
 *   • position:absolute  ➜ BS .saveFilterButtonBc: position:sticky bottom:0
 *   • padding:12px 16px  ➜ BS: padding:16px (uniform)
 *   • border-top:1px  ➜ BS: 0 (no border)
 *
 * Markup keeps dual classes (.bs-badge + .providerBadgeBlock, .provider-sheet-apply
 * + .button.whiteBg.big.fullWidth, .provider-sheet-footer + .saveFilterButtonBc)
 * for migration safety; CSS canonical source is BS-EXACT now.
 *
 * Audit ref: bs-extract-providers-drawer-listview-2026-05-17.md sections B.8-B.13.
 * Rule ref: #160 EXACT KLONLA, K.9 self-correction loop (CSSOM cascade fix).
 */

/* --- (9) Hide support FAB during BS-exact view (BS doesn't have it) --- */
html.mobile-root body.mobile-site .provider-sheet > .provider-sheet-support-fab {
    display: none !important;
}

/* --- (10) Make grid scroll-area leave room for bottom UYGULA --------- */
html.mobile-root body.mobile-site .provider-sheet > .sidebar-providers-list {
    padding-bottom: 80px !important;
}

/* --- (11) Disable overlay opacity dim — BS drawer opaque ------------- */
html.mobile-root body.mobile-site:has(#providersSidebar.mobile-open) .sidebar-overlay,
html.mobile-root body.mobile-site:has(.providers-sidebar.mobile-open) .sidebar-overlay {
    display: none !important;
}

/* --- END PROVIDER DRAWER BS-EXACT ------------------------------------ */