/* ============================================================
   MENU DRAWER — BS EXACT MATCH (agent-menu-owned)
   File: menu-drawer-fixes.css
   Owner: agent-menu (Rule §30 file ownership)
   Purpose: Lock BS-exact values for the mobile MENU drawer
   triggered by header/bottom-tab MENU button click.

   BS reference: m.bahissende302.com .m-navigation-container-bc
   - Container: full content area below header, bg:#000
   - Title row: 44px, "MENÜ" Roboto 16px/500 #fff, padding 0 7px
   - Close X: 28x44, BetConstruct-Icons \e5cd, 14x14 rgba(.9)
   - Body: padding 7px 7px 49px (effective inner 7px to grid)
   - Grid (m-block-nav-items-bc): grid 1fr, gap 10px, padding 7px
       → effective first-item-left = 7 (body) + 7 (grid) = 14px
   - Item (a.app-nav-link → .m-nav-items-list-item-bc):
       100% wide, 48px tall, 0 10px padding, radius 4px,
       bg rgba(255,255,255,0.1), no border
   - Icon: 28x29, radius 4px, bg per-category, 18px font/lh28
   - Label: Roboto 14px/400, rgba(255,255,255,0.6), text-transform:none

   This file ONLY locks values; it does not introduce new visual
   features. Do not add hover gold accents, gradients, or shadows
   that BS does not have.
   ============================================================ */

/* ─────────── DRAWER CONTAINER ─────────── */
/* MR positions drawer below combined header (announcement+nav) ≈ 117px,
   BS positions below header bar ≈ 117px. Lock matching value with
   header height inheritance respected. */
html.mobile-root body.mobile-site aside#mobileMenu.mobileMenu,
html.mobile-root body.mobile-site .mobileMenu {
    background: rgb(0, 0, 0) !important;
    box-sizing: border-box !important;
}

/* ITER 97 — BS-paralel: menu drawer header + bottom-tab arasına yerleştir.
 * Theme `top:0` override yapıyordu (menü tepeden başlıyordu, header+bottom-tab gizli).
 * Fix: top: var(--mobile-menu-top, 117px) → header altı,
 *      bottom: 49px → bottom-tab üstü.
 * MR aside#mobileMenu.mobileMenu (1, 4, 3) > theme rule (0, 3, 2). */
html.mobile-root body.mobile-site aside#mobileMenu.mobileMenu.mobileMenu,
html.mobile-root body.mobile-site aside#mobileMenu,
html[lang] body aside#mobileMenu.mobileMenu {
    top: var(--mobile-menu-top, 117px) !important;
    bottom: 49px !important; /* bottom-tab height */
    height: auto !important;
    box-sizing: border-box !important;
}

html.mobile-root body.mobile-site #mobileMenu-overlay.mobileMenu-overlay {
    top: var(--mobile-menu-top, 117px) !important;
    bottom: 49px !important;
}

/* ITER 543 (2026-05-20) — SLOT OYNA badge menu açıkken EN ÜSTTE kalacak.
 * Theme line 11351 sets position:absolute + top:-34 + left:-9 + right:-9 +
 * bottom:-4.8 + width:auto — bu absolute positioning sayesinde 90x87 boyut
 * hesaplanır. position:relative BOZAR (width:0). KEEP absolute.
 * Theme line 16646/17064 sets z-index:1107 with (0,6,2) specificity.
 * Mine (0,7,2) ile z:1300 — drawer (z:1100) üstünde kalır.
 * Why: kullanıcı "slot oyna butonu en üstte kalacak" — menu açıkken
 *      badge görünmeye devam, drawer'ın üstünde durur.
 * How: same nth-child(3) chain as theme + .bc-i-slots ek class; sadece
 *      z-index'i yükselt, position dahil diğer property'lere dokunma. */
html.mobile-root body.mobile-site .tab-navigation-w-bc.mobFooter .tab-nav-item-bc:nth-child(3) .tab-nav-icon-bc.bc-i-slots,
html.mobile-root body.mobile-site .tab-navigation-w-bc.tab-navigation-w-bc.mobFooter .tab-nav-item-bc:nth-child(3) .tab-nav-icon-bc.bc-i-slots {
    z-index: 1300 !important;
}

/* ITER 544 (2026-05-20) — bottom-bar HER ZAMAN drawer üstünde (user override).
 * User: "canlı bahis kuponu slot oyna destek ve menü butonu gibi alttaki butonlar
 *  onun herzaman üstünde olacak. açılırkende açıkkende"
 * Drawer z:1100 + overlay z:1100. Bar z:1200 → drawer/overlay slide-up animation
 * sırasında bar görünür kalır (drawer bar'ın altından geçer). SLOT OYNA badge
 * z:1300 → bar'ın da üstünde, en üstte kalır.
 * Previous ITER 504 BS-exact 950 → user override prevails. */
html.mobile-root body.mobile-site .tab-navigation-w-bc.tab-navigation-w-bc.mobFooter.mobFooter,
html.mobile-root body.mobile-site .mobFooter.mobFooter.mobFooter,
html[lang] body .tab-navigation-w-bc.mobFooter.mobFooter,
html[lang] body .mobFooter.mobFooter.mobFooter {
    z-index: 1200 !important;
}

/* Menu drawer z-index (parent context için <bottom-tab) */
html.mobile-root body.mobile-site aside#mobileMenu[id].mobileMenu.mobileMenu,
html.mobile-root body.mobile-site #mobileMenu-overlay.mobileMenu-overlay.mobileMenu-overlay {
    z-index: 1100 !important;
}

/* Menu body — bottom padding son item'in bottom-tab altında kalmasını engeller */
html.mobile-root body.mobile-site aside#mobileMenu .mobileMenu-body {
    padding-bottom: 16px !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ITER 103 — Body scroll lock pekiştir (menu açıkken anasayfa kaymasın).
 * Theme rules genel `body { overflow:hidden }` sınıfı override edebiliyor.
 * mobileMenu-locked iken HTML+BODY scroll tamamen kilitle. */
html.mobile-root body.mobile-site.mobileMenu-locked,
html.mobile-root body.mobileMenu-locked,
html.mobile-root.mobile-root body.mobileMenu-locked,
html[lang] body.mobileMenu-locked {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

html.mobile-root.mobileMenu-locked,
html.mobile-root:has(body.mobileMenu-locked) {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

/* Menu drawer kendi içinde scroll — ama dışarı taşma yok */
html.mobile-root body.mobile-site aside#mobileMenu.mobileMenu {
    overscroll-behavior: contain !important;
}

/* ITER 100 — Menu padding-top:115 (theme leftover) → 0.
 * top:117 + bottom:49 already positioned correctly — old padding was for full-screen menu. */
html.mobile-root body.mobile-site aside#mobileMenu[id].mobileMenu.mobileMenu,
html.mobile-root body.mobile-site aside#mobileMenu[id="mobileMenu"].mobileMenu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ITER 99 — is-open transform MAX spec (1 ID + 5 classes + 3 elements + attribute).
 * Theme has aside#mobileMenu spec (1,3,3) winning. Mine bump to (1,6,3) with [id] attr trick. */
html.mobile-root body.mobile-site aside#mobileMenu[id].mobileMenu.mobileMenu.is-open,
html.mobile-root body.mobile-site aside#mobileMenu[id].mobileMenu.mobileMenu.active,
html.mobile-root body.mobile-site aside#mobileMenu[id="mobileMenu"].mobileMenu.is-open,
html.mobile-root body.mobile-site aside#mobileMenu[id="mobileMenu"].mobileMenu.active,
html[lang] body aside#mobileMenu[id].mobileMenu.is-open,
html[lang] body aside#mobileMenu[id].mobileMenu.active {
    transform: translateY(0) !important;
}

html.mobile-root body.mobile-site aside#mobileMenu[id].mobileMenu.mobileMenu:not(.is-open):not(.active) {
    transform: translateY(100%) !important;
}

/* Overlay is-open — show */
html.mobile-root body.mobile-site #mobileMenu-overlay.mobileMenu-overlay.is-open,
html.mobile-root body.mobile-site #mobileMenu-overlay.mobileMenu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ─────────── TITLE ROW (mobileMenu-header) ─────────── */
/* BS: 44px tall, padding 0 (title H3 has 0 7px), bg transparent */
html.mobile-root body.mobile-site .mobileMenu-header {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 7px !important;
    background: rgba(0, 0, 0, 0) !important;
    border-bottom: none !important;
    box-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px 0px inset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 44px !important;
}

/* "MENÜ" title — BS: H3.m-nav-title-content-bc, 16px/500, padding 0 7px */
html.mobile-root body.mobile-site .mobileMenu-title {
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgb(255, 255, 255) !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    padding: 0 7px !important;
    margin: 0 !important;
    line-height: 44px !important;
    display: block !important;
}

/* Close X button — BS: 28x44, padding 0 7px, transparent bg, no border */
html.mobile-root body.mobile-site .mobileMenu-close {
    width: 28px !important;
    height: 44px !important;
    min-width: 28px !important;
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 7px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Close X icon — BS uses BetConstruct-Icons \e5cd (already set in
   theme v13.1 at line 16832). Reinforce stable size + visibility. */
html.mobile-root body.mobile-site .mobileMenu-close svg {
    display: none !important;
}
html.mobile-root body.mobile-site .mobileMenu-close::before {
    content: "\e5cd" !important;
    font-family: "BetConstruct-Icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
    display: inline-block !important;
}

/* ─────────── BODY (scroll container) ─────────── */
/* BS: padding 7px 7px 49px (we use 7px hor + bottom safe).
   This is the OUTER layer; the grid adds another 7px → first item
   left = 14px (matches BS). */
html.mobile-root body.mobile-site .mobileMenu-body {
    padding: 0 7px 16px !important;
    background: rgb(0, 0, 0) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* ─────────── GRID (item list) ─────────── */
/* BS: display:grid, grid-template-columns:1fr, gap:10px, padding:7px */
html.mobile-root body.mobile-site .mobileMenu-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 7px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Section wrapper neutral pass-through */
html.mobile-root body.mobile-site .mobileMenu-section {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ─────────── MENU ITEM ROW (mobileMenu-card) ─────────── */
/* BS inner: 372x48, radius 4px, bg rgba(255,255,255,0.1), pad 0 10px */
html.mobile-root body.mobile-site .mobileMenu-card {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-decoration: none !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    box-sizing: border-box !important;
    transition: background-color 0.24s, color 0.24s !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Hover/active — BS-paralel subtle highlight (same family) */
html.mobile-root body.mobile-site .mobileMenu-card:hover,
html.mobile-root body.mobile-site .mobileMenu-card:active,
html.mobile-root body.mobile-site .mobileMenu-card:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    text-decoration: none !important;
}

/* ─────────── ICON WRAPPER (mobileMenu-card-icon) ─────────── */
/* BS: nav-ico-w-row-bc 28x48 flex, transparent bg */
html.mobile-root body.mobile-site .mobileMenu-card-icon {
    width: 28px !important;
    height: 48px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: rgb(255, 255, 255) !important;
}

/* ─────────── ICON GLYPH (i.bc-i-*) ─────────── */
/* BS: 28x29, font 18/28, color #fff, text-align center, radius 4px.
   bg color is set INLINE via style attribute on the <i> element
   (e.g. rgb(255,0,135) for live, rgb(101,133,161) default). Do not
   force a uniform bg here — preserve inline color. */
html.mobile-root body.mobile-site .mobileMenu-card-icon i {
    width: 28px !important;
    height: 29px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: "BetConstruct-Icons" !important;
    font-size: 18px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 28px !important;
    color: rgb(255, 255, 255) !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
}
html.mobile-root body.mobile-site .mobileMenu-card-icon i::before {
    font-family: "BetConstruct-Icons" !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: rgb(255, 255, 255) !important;
}

/* SVG icons (rare fallback) match same box */
html.mobile-root body.mobile-site .mobileMenu-card-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: rgb(255, 255, 255) !important;
}

/* ─────────── LABEL (mobileMenu-card-label) ─────────── */
/* BS: m-nav-list-item-title-bc — flex 1, 14px Roboto/400,
       rgba(255,255,255,0.6), text-transform:none, padding 0 10px (left). */
html.mobile-root body.mobile-site .mobileMenu-card-label {
    flex: 1 1 auto !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    transition: color 0.24s !important;
}
html.mobile-root body.mobile-site .mobileMenu-card:hover .mobileMenu-card-label,
html.mobile-root body.mobile-site .mobileMenu-card:active .mobileMenu-card-label,
html.mobile-root body.mobile-site .mobileMenu-card:focus .mobileMenu-card-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ─────────── USER LIST ITEMS (logged-in section) ─────────── */
/* BS does not show this section in unauthed view; we keep the same
   visual family as the main grid items so logged-in state stays
   uniform with the rest of the drawer. */
html.mobile-root body.mobile-site .mobileMenu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 7px !important;
    margin: 0 !important;
    overflow: visible !important;
}
html.mobile-root body.mobile-site .mobileMenu-list-item {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.24s, color 0.24s !important;
}
html.mobile-root body.mobile-site .mobileMenu-list-item:hover,
html.mobile-root body.mobile-site .mobileMenu-list-item:active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
html.mobile-root body.mobile-site .mobileMenu-list-icon {
    width: 28px !important;
    height: 29px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    background: rgb(101, 133, 161) !important;
    color: rgb(255, 255, 255) !important;
    border: none !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html.mobile-root body.mobile-site .mobileMenu-list-icon i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: rgb(255, 255, 255) !important;
}
html.mobile-root body.mobile-site .mobileMenu-list-item--danger {
    color: rgba(255, 255, 255, 0.6) !important;
}
html.mobile-root body.mobile-site .mobileMenu-list-item--danger .mobileMenu-list-icon {
    background: rgb(239, 83, 80) !important;
}

/* ─────────── OVERLAY (mobileMenu-overlay) ─────────── */
/* BS does not show a backdrop overlay — it replaces content fully.
   MR keeps overlay for the slide-up phase; render it transparent
   so it does not leak a visible darken layer above the drawer
   content. */
html.mobile-root body.mobile-site .mobileMenu-overlay {
    background: rgba(0, 0, 0, 0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* End of menu-drawer-fixes.css */