/* ════════════════════════════════════════════════════════════════════════════
   smart-panel-downstream.css — ITER 525 (2026-05-19)
   BS-exact downstream UIs for the 5 smart-panel buttons.

   Live-extracted from m.bahissende303.com mobile (rule #160 EXACT KLONLA);
   reference doc: .claude/extracts/bs-extract-smart-panel-downstream-2026-05-19.md

   Covers:
     1. overlay-sliding-* keyframes (left/right/top — BS verbatim)
     2. .overlay-sliding-wrapper-bc.smart-downstream-* drawer container rules
        (Notifications / FavoriteGames / Settings share the same shell)
     3. .back-nav-bc gold header (h:38, bg:#d2b038, round-arrow-left icon)
     4. Settings drawer body (.settings-selectors-bc with 3 selects)
     5. live-chat inline iframe overlay (.live-chat-overlay-bc)
     6. Body class orchestration (.overlay-sliding-is-visible hides header content)

   This file loads after theme-robinbet-mobile.css + profile-drawer-root.css
   so it can extend (NOT override) the existing overlay-sliding pattern.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Keyframes (BS-verbatim) ──────────────────────────────────────────── */
@keyframes mr-overlay-sliding-left {
  0%   { transform: translate3d(100%, 0, 0); }
  100% { transform: translateZ(0); }
}
@keyframes mr-overlay-sliding-right {
  0%   { transform: translate3d(-100%, 0, 0); }
  100% { transform: translateZ(0); }
}
@keyframes mr-overlay-sliding-top {
  0%   { transform: translate3d(0, -100%, 0); }
  100% { transform: translateZ(0); }
}

/* ─── 2. Drawer shell (shared by Notifications/FavoriteGames/Settings) ─────
   ITER 527 (2026-05-19) — animation removed.
   BS verbatim live observation: BS shows transform: matrix(1,0,0,1,0,0) with
   transition: all 0s ease — NO active animation at runtime. The @keyframes
   above (mr-overlay-sliding-*) exist as fallback for fresh-insert cases, but
   when the drawer toggles via `display:none ↔ display:flex` on an element that
   was already in the DOM, Chrome registers the animation in `running` state but
   freezes `currentTime: 0`. With `animation-fill-mode: both`, the element gets
   stuck at the 0% keyframe (translateX(100%)) → drawer permanently off-screen.
   Fix: remove the broken `animation:` from the shell; toggle visibility via
   `display-none` class only (matches BS computed behavior exactly).
   ─────────────────────────────────────────────────────────────────────────── */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream {
  /* ITER 723m (2026-05-26) — scope touch-action:none to drawer wrapper ONLY.
     ITER 723l body+html touch-action overkill -> scroll shake (FIXED kaldirildi).
     User feedback: "sari yerdeki yazilara basinca hala sallaniyor" -> back-nav
     uzerine dokununca shake.
     ROOT CAUSE: drawer scope dahilinde (back-nav, dim area, empty spots)
     touch-action default (auto). Browser drag-to-scroll-attempt yorumluyor ->
     URL bar collapse animasyonu -> SHAKE.
     COZUM: drawer wrapper'a touch-action:none. Inner pane'e pan-y. Tap
     calismaya devam eder (click event), sadece drag-scroll yorumlamasi blocked. */
  position: fixed !important;
  top: 49px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 971 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  touch-action: none !important;          /* ITER 723m: scope to drawer */
  overscroll-behavior: none !important;   /* ITER 723m: kill rubber-band */
}
/* ITER 723m: pane allows vertical pan (scroll inside) */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream .mr-fav-pane,
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .smart-downstream-body {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}
/* ITER 723n (2026-05-26) — back-nav + dim area explicit touch-action:none.
   User: "sari yerdeki yazilara basinca hala sallaniyor". touch-action wrapper
   uzerinde olsa bile baska scripts/inline styles override edebilir veya
   bazi browser versiyonlari hierarchical inheritance'i farkli yorumluyor.
   Belt-and-suspenders: back-nav + non-scrollable cocuk elementlere explicit
   touch-action:none. Pane'in pan-y'si bunlardan daha specific oldugu icin
   o korunur. */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .back-nav-bc,
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .back-nav-bc *,
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream .mr-fav-tabs,
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream .mr-fav-tabs *,
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream .mr-fav-toolbar,
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream .mr-fav-toolbar * {
  touch-action: none !important;
  overscroll-behavior: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* ITER 723n: Drawer'a tap-and-close icin drawer wrapper'in transition'i kill.
   Kapatma instant olmali, visual jump yok. */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream {
  transition: none !important;
  animation: none !important;
}

/* Hidden state — toggled via .display-none class */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream.display-none {
  display: none !important;
}

/* Body-class orchestration (BS-paralel) — when any downstream drawer is open,
   dim/hide the dynamic header content (matches BS .hdr-dynamic-content opacity:0) */
body.smart-downstream-open .hdr-dynamic-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

/* ─── 3. Back-nav header (gold, 38px) ────────────────────────────────────── */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .back-nav-bc {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  background: #d2b038 !important;     /* BS gold rgb(210,176,56) */
  color: #fff !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .back-nav-bc > .back-nav-icon-bc {
  font-size: 18px !important;
  line-height: 1 !important;
  margin-right: 10px !important;
  color: #fff !important;
  display: inline-block !important;
}
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .back-nav-bc > .back-nav-title-bc {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 38px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
}

/* ─── 4. Drawer body shell ───────────────────────────────────────────────── */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream > .smart-downstream-body {
  /* ITER 723l (2026-05-26) — BS-PARALEL: BS uses native iOS momentum scroll
     (-webkit-overflow-scrolling:touch). overscroll-behavior NORMAL.
     Eski overscroll-behavior:contain elastic bounce'u kapatiyordu ama
     browser-native URL bar logic ile catismaya neden olabilir. BS doesn't
     do this and works fine. */
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;  /* BS-paralel: native momentum */
  background: #1a1a1a !important;     /* dark body under the dim overlay */
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 12px !important;
  font-size: 13px !important;
}

/* Empty-state / login-prompt block (Notifications + FavoriteGames guests) */
.smart-downstream-empty-bc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.75);
}
.smart-downstream-empty-bc > .smart-downstream-empty-icon-bc {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 12px;
}
.smart-downstream-empty-bc > .smart-downstream-empty-text-bc {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.smart-downstream-empty-bc > .smart-downstream-login-cta-bc {
  display: inline-block;
  padding: 10px 24px;
  background: #d2b038;
  color: #000;
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.smart-downstream-empty-bc > .smart-downstream-login-cta-bc:hover,
.smart-downstream-empty-bc > .smart-downstream-login-cta-bc:active {
  background: #c19f30;
}

/* ─── 5. Settings drawer (3 selects) ─────────────────────────────────────── */
.smart-downstream.smart-downstream--settings .settings-selectors-bc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.smart-downstream.smart-downstream--settings .settings-selectors-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.smart-downstream.smart-downstream--settings .form-control-bc.select {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.smart-downstream.smart-downstream--settings .form-control-bc.select.filled {
  background: rgba(255, 255, 255, 0.07);
}
.smart-downstream.smart-downstream--settings .form-control-label-bc {
  display: block;
  position: relative;
  padding: 6px 12px 10px;
  cursor: pointer;
}
.smart-downstream.smart-downstream--settings .form-control-label-bc::before {
  /* BS-paralel: label case follows data-label source (mixed case allowed;
     BS itself only uppercases "SAAT FORMATI" because the source is uppercase). */
  content: attr(data-label);
  display: block;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.smart-downstream.smart-downstream--settings .form-control-select-bc {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 13px;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.smart-downstream.smart-downstream--settings .form-control-select-bc option {
  background: #1a1a1a;
  color: #fff;
}
.smart-downstream.smart-downstream--settings .form-control-bc.select::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  pointer-events: none;
}

/* ─── 6. live-chat inline overlay ──────────────────────────────────────────
   ITER 527 (2026-05-19) — animation removed (same display-toggle freeze
   pattern as the smart-downstream drawer above).
   ─────────────────────────────────────────────────────────────────────────── */
.live-chat-overlay-bc {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}
.live-chat-overlay-bc.display-none {
  display: none;
}
.live-chat-overlay-bc > .live-chat-overlay-header-bc {
  flex: 0 0 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #d2b038;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.live-chat-overlay-bc > .live-chat-overlay-header-bc > .live-chat-overlay-title-bc {
  flex: 1 1 auto;
  text-align: center;
}
.live-chat-overlay-bc > .live-chat-overlay-header-bc > .live-chat-overlay-close-bc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}
.live-chat-overlay-bc > .live-chat-overlay-body-bc {
  flex: 1 1 auto;
  background: #fff;
  position: relative;
}
.live-chat-overlay-bc > .live-chat-overlay-body-bc > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ─── 7. ITER 723l (2026-05-26) — BS-PARALEL MINIMAL body-lock ──────────────
   Eski ITER 723k touch-action:none + overscroll-behavior:none + html lock
   ASIRI korumaciydi -> browser URL bar logic ile catisma -> SHAKE.
   BS live audit: body{overflow:hidden}, html{overflow:visible},
   touch-action:auto, overscroll-behavior:auto. Hicbir overkill yok.
   BS-paralel: sadece body overflow:hidden + specificity bumped (theme'i yener). */
html.mobile-root body.mobile-site.smart-downstream-open,
html.mobile-root body.mobile-site.live-chat-overlay-open {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* ─── 8. Defensive specificity bumps for theme conflicts ─────────────────── */
html.mobile-root body.mobile-site .overlay-sliding-wrapper-bc.smart-downstream * {
  box-sizing: border-box;
}
html.mobile-root body.mobile-site .live-chat-overlay-bc * {
  box-sizing: border-box;
}

/* ─── 9. Rule #158 — header pollution chain (BS-paralel) ──────────────────
   When ANY downstream drawer / live-chat overlay is open, hide all viewport
   chrome above and around the drawer. BS keeps a clean look: only the gold
   drawer header is visible. MR has extra chrome (announcement bar, category
   nav with z:1100, bottom-tab) that polluted the drawer area pre-ITER 525.

   Targets (MR-specific, verified live 2026-05-19 via elementsFromPoint):
   - #mobAnnouncementBar           y=0-68    z:953   (yellow update notice)
   - .mobileHeader                 y=68-117  z:950   (logo + 3-dot — KEPT visible)
   - .bs-deposit-tabs/.site-nav-tabs  y=117-157  z:1100 ← above drawer z:971
   - .tab-navigation-w-bc.mobFooter   y=601-650  z:950   (bottom-tab)
   - #mobileMenu aside                y=601-650  z:1100  (alt bottom menu)

   SPECIFICITY NOTE: theme-robinbet-mobile.css has
   `html.mobile-root body.mobile-site.past-hdr-threshold header.mobileHeader
   { top: 68px !important }` at (0,4,3). We must MATCH OR EXCEED that
   specificity to win, so we use the full `html.mobile-root` + `body.mobile-site`
   + state-class + element + class chain. */

html.mobile-root body.mobile-site.smart-downstream-open #mobAnnouncementBar,
html.mobile-root body.mobile-site.smart-downstream-open .mob-announcement-bar,
html.mobile-root body.mobile-site.smart-downstream-open .bs-deposit-tabs,
html.mobile-root body.mobile-site.smart-downstream-open .site-nav-tabs,
html.mobile-root body.mobile-site.smart-downstream-open .hdr-navigation-scrollable-bc-holder,
html.mobile-root body.mobile-site.smart-downstream-open .mobile-bottom-nav,
html.mobile-root body.mobile-site.smart-downstream-open .tab-navigation-w-bc.mobFooter,
html.mobile-root body.mobile-site.smart-downstream-open .mobFooter,
html.mobile-root body.mobile-site.smart-downstream-open .mob-bottom-tab,
html.mobile-root body.mobile-site.smart-downstream-open aside#mobileMenu.mobileMenu,
html.mobile-root body.mobile-site.smart-downstream-open aside#mobileMenu,
html.mobile-root body.mobile-site.smart-downstream-open #mobileMenu,
html.mobile-root body.mobile-site.smart-downstream-open .mobileMenu-overlay,
html.mobile-root body.mobile-site.smart-downstream-open #mob-bet-kupon-bar,
html.mobile-root body.mobile-site.smart-downstream-open #mob-bet-kupon,
html.mobile-root body.mobile-site.live-chat-overlay-open #mobAnnouncementBar,
html.mobile-root body.mobile-site.live-chat-overlay-open .mob-announcement-bar,
html.mobile-root body.mobile-site.live-chat-overlay-open .bs-deposit-tabs,
html.mobile-root body.mobile-site.live-chat-overlay-open .site-nav-tabs,
html.mobile-root body.mobile-site.live-chat-overlay-open .hdr-navigation-scrollable-bc-holder,
html.mobile-root body.mobile-site.live-chat-overlay-open .mobile-bottom-nav,
html.mobile-root body.mobile-site.live-chat-overlay-open .tab-navigation-w-bc.mobFooter,
html.mobile-root body.mobile-site.live-chat-overlay-open .mobFooter,
html.mobile-root body.mobile-site.live-chat-overlay-open .mob-bottom-tab,
html.mobile-root body.mobile-site.live-chat-overlay-open aside#mobileMenu.mobileMenu,
html.mobile-root body.mobile-site.live-chat-overlay-open aside#mobileMenu,
html.mobile-root body.mobile-site.live-chat-overlay-open #mobileMenu,
html.mobile-root body.mobile-site.live-chat-overlay-open .mobileMenu-overlay,
html.mobile-root body.mobile-site.live-chat-overlay-open header.mobileHeader,
html.mobile-root body.mobile-site.live-chat-overlay-open .mobileHeader,
html.mobile-root body.mobile-site.live-chat-overlay-open #mob-bet-kupon-bar,
html.mobile-root body.mobile-site.live-chat-overlay-open #mob-bet-kupon {
  display: none !important;
}

/* When drawer is open, pull the mobile header to top:0 since the
   announcement bar above it is now hidden — otherwise it floats at y=68
   leaving an empty 68px gap. Both with and without past-hdr-threshold
   variant must yield top:0. live-chat-overlay hides mobileHeader entirely
   (above rule). Selector specificity (0,5,3) > theme rule (0,4,3). */
html.mobile-root body.mobile-site.smart-downstream-open header.mobileHeader,
html.mobile-root body.mobile-site.smart-downstream-open.past-hdr-threshold header.mobileHeader {
  top: 0 !important;
}

/* ─── 10. ITER 723j (2026-05-26) — SHAKE ROOT-CAUSE KILL ──────────────────
   ROOT CAUSE FOUND:
   - frontend/assets/js/header-scroll-hide.js window.scroll listener'i
     body'ye `header-hidden` class ekliyor/kaldiriyor (scroll yonune gore).
   - theme-robinbet-mobile.css v36.0 (lines 19306-19334):
       body.header-hidden header.mobileHeader { margin-top:-50; transition:280ms }
       body.header-hidden .mainMenu { top:68; transition:280ms }
   - Plus nav.bs-deposit-tabs.site-nav-tabs (header-scroll-hide.js line 31-36):
       body.header-hidden nav { transform: translate3d(0,-40px,0); transition:240ms }
   - User drawer'a dokununca: visualViewport.scroll (URL bar toggle) +
     internal drawer scroll -> window.scroll firing -> header-scroll-hide.js
     class toggle -> 3 transitions firing simultaneously -> PAGE SHAKE.

   COZUM: drawer acikken header-hidden class neutralize.
     - body.smart-downstream-open header.* -> margin-top:0, transform:none
     - body.smart-downstream-open .mainMenu/nav -> transform:none, top normal
     - Tum transition + animation kill (defensive — class toggle olsa bile
       hicbir visual transition gerceklesmez).
   Header-hidden class scroll listener tarafindan toggle olsa bile, visual
   etki SIFIR — drawer acikken header her zaman normal pozisyonda kalir.

   Specificity: (0,5,2) html.mobile-root + body.mobile-site +
   .smart-downstream-open + .header-hidden + element = (0,5,2) > theme rule
   (0,4,2). */
html.mobile-root body.mobile-site.smart-downstream-open header.mobileHeader,
html.mobile-root body.mobile-site.smart-downstream-open.header-hidden header.mobileHeader,
html.mobile-root body.mobile-site.smart-downstream-open .mobileHeader,
html.mobile-root body.mobile-site.smart-downstream-open.header-hidden .mobileHeader {
  margin-top: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}
html.mobile-root body.mobile-site.smart-downstream-open .mainMenu,
html.mobile-root body.mobile-site.smart-downstream-open nav.mainMenu,
html.mobile-root body.mobile-site.smart-downstream-open.header-hidden .mainMenu,
html.mobile-root body.mobile-site.smart-downstream-open.header-hidden nav.mainMenu,
html.mobile-root body.mobile-site.smart-downstream-open nav.bs-deposit-tabs,
html.mobile-root body.mobile-site.smart-downstream-open nav.site-nav-tabs,
html.mobile-root body.mobile-site.smart-downstream-open .bs-deposit-tabs,
html.mobile-root body.mobile-site.smart-downstream-open .site-nav-tabs,
html.mobile-root body.mobile-site.smart-downstream-open.header-hidden nav.bs-deposit-tabs,
html.mobile-root body.mobile-site.smart-downstream-open.header-hidden nav.site-nav-tabs {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}