/* ════════════════════════════════════════════════════════════════════════════
   BS-exact 3-dot smart panel dropdown (mobile header)
   Source: m.bahissende301.com computed styles + getKeyframes() (2026-04-26 audit)
            + 2026-05-18 ITER 519 glyph-port re-extract (rule #160 EXACT KLONLA).

   ITER 519 (2026-05-18) — Full BC-icons port:
     - Markup migrated from inline SVG to `<i class="sp-button-icon-bc bc-i-*"></i>`
     - 5 button glyphs (notification/favorite/settings/live-chat/betslip) now
       resolve to BetConstruct-Icons.woff2 codepoints captured from BS mirror
       CSS (release-20260506-184604/.../assets/index.7tkrlqxF.css decoded as
       raw UTF-8 bytes → U+E94E / U+E93B / U+E96A / U+EA1B / U+E936).
     - Removed: triangle `::before` pointer (BS has no triangle, just a flat
       black rounded rectangle at top:114, right:5).
     - Removed: FontAwesome `.fa-bell/.fa-star/.fa-gear/.fa-headset/.fa-receipt`
       workarounds — superseded by font-glyph approach. Cascade is now
       single-source: BetConstruct-Icons font handles every panel glyph.
     - The theme-robinbet-mobile.css `content: ""` placeholders at lines 15135
       (live-chat), 15566 (favorite), 15744 (betslip), 15835 (notification),
       15839 (settings) are overridden here with the real codepoints.

   Panel mechanics (unchanged from prior ITERs):
     - panel: position:fixed, 50x280, opacity 0→1 + translateY(-4%)→0, 0.24s
     - inner: black bg, border-radius 4px, 5 buttons of 50x56
     - button: white@4% bg, white@85% icons, hover → gold (#d3af37)

   This file MUST load AFTER theme-robinbet-mobile.css to override its
   `display:none !important` on .hdr-smart-panel-holder-arrow-bc AND override
   its `content: ""` empty-glyph rules. Source order in BaseLayout.astro is
   already correct (theme first, then three-dot-menu, then animation-fix).
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. Override the hide-rule from theme-robinbet-mobile.css line 4446 ---------- */
body.mobile-site .hdr-smart-panel-holder-arrow-bc {
  display: block !important;
}

/* 2. Outer wrapper – pass-through container ---------------------------------
   ITER 519 augmentation (2026-05-18):
     - Bumped specificity to include `html.mobile-root` AND #mobSmartPanel ID
       so this rule outranks any future ID-level hide-rules in other files
       (audit-fixes.css ITER 275 + header-init-fix.css ITER 94 had ID-level
       `display:none / visibility:hidden` that blocked the panel render — both
       now superseded, but defense-in-depth specificity prevents recurrence).
     - Added `visibility: visible !important` so descendant panel can show
       (visibility inherits; a parent's hidden state shadows descendants even
       if they declare visible — must be explicit at the wrapper level).
     - The wrapper has zero visual footprint (width:0, height:0, static pos,
       pointer-events:none) so display:block is BS-paralel and safe. */
html.mobile-root body.mobile-site #mobSmartPanel,
html.mobile-root body.mobile-site .smartPanel-bc.mobileHeader-smartPanel,
html.mobile-root body.mobile-site .mobileHeader-smartPanel,
body.mobile-site .smartPanel-bc.mobileHeader-smartPanel {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* 2b. mobileHeader stacking — must sit above .mainMenu nav strip
   so the dropdown holder (descendant) wins over sticky nav.
   Header strip y:68-117, mainMenu strip y:117-157 — no visual overlap so
   bumping mobileHeader z to 1085 is safe (descendants get same root).
   Specificity raised to (0,3,3) to override existing
   `html.mobile-root body.mobile-site header.mobileHeader` rule (z:1050). */
html.mobile-root body.mobile-site header.mobileHeader,
html.mobile-root body.mobile-site .mobileHeader-inner {
  z-index: 1085 !important;
}

/* 3. The animated dropdown holder (BS .hdr-smart-panel-holder-arrow-bc) --------
   POSITION (BS-paralel 2026-04-27 fix):
   MR header stack (LIVE-MEASURED 2026-05-19, ITER 524 audit):
     - announcement-bar (fixed, z:1200): y=0..68
     - mobileHeader     (fixed, z:950 actual / 1085 declared): y=68..117
     - mainMenu strip   (NAV.bs-deposit-tabs.site-nav-tabs,
                         fixed, z:1100, transform+will-change → stacking ctx):
                         y=117..157
   BS sits dropdown at top:114px (3px above mainMenu top 117) and z-orders it
   ABOVE the mainMenu. Panel button #1 (bell, y:114..170) overlaps mainMenu's
   y:117..157 band — z MUST exceed 1100 or the bell vanishes behind the nav
   strip.

   ITER 524 FIX (2026-05-19): z-index 1090 → 1200.
     Previous comment claimed mainMenu z:1080 (wrong — likely outdated from a
     different release). Live elementsFromPoint(350,130) at panel-open state:
       1. SPAN.nav-menu-title (text "SLOT")
       2. A.bs-deposit-tab
       3. NAV.bs-deposit-tabs.site-nav-tabs (pos:fixed, z:1100, transform:m3d)
       4. BUTTON.sp-button-bc (PANEL button — STACKED BELOW IT)
     User reported (visual screenshot): "panel canlı bahisler / spor bahisleri
     / slot butonlarının altında kalıyor". Bumping to 1200 puts panel level
     with announcement-bar (no overlap, y-ranges disjoint) and clearly above
     mainMenu. Lower values (1101..1199) would also work but 1200 keeps the
     header-overlay tier (announcement + dropdowns) on the same z-plane.
*/
/* 2026-05-23 FIX: .mobileHeader-smartPanel ancestor requirement REMOVED.
 * Sebep: header.js line 428 `document.body.appendChild(holder)` ile holder
 * <body> direct child'ı oluyor (panel açılırken). Bu durumda
 * `.mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc` selector match
 * etmiyor → pointer-events:none defaults aktif kalıyor → tıklamalar arkaya
 * geçiyor. Selectors artık parent-agnostic. */
body.mobile-site .hdr-smart-panel-holder-arrow-bc {
  position: fixed !important;
  top: 114px !important;           /* BS-paralel: just below announcement+header chain */
  right: 5px !important;
  left: auto !important;
  width: 50px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 1200 !important;        /* above mainMenu NAV.bs-deposit-tabs (z:1100) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-11px);
  transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}

/* 4. Open state — toggled by .smart-panel-is-visible on body OR .is-open on holder
 * 2026-05-23: parent-agnostic selectors (holder may be in body or .mobileHeader-smartPanel). */
body.mobile-site.smart-panel-is-visible .hdr-smart-panel-holder-arrow-bc,
body.mobile-site .hdr-smart-panel-holder-arrow-bc.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* 5. Arrow tip pointer — BS-exact (ITER 522, 2026-05-18 corrected) -------------
   CORRECTION of ITER 519: previous comment claimed "BS has no triangle". Live
   BS measurement (m.bahissende303.com, mobile 392x650, panel open, transition
   complete) showed otherwise:
     ::before {
       content:""; position:absolute; top:-7px; right:12.2px;
       width:0; height:0;
       border-width: 0 6.4px 6.4px;
       border-style: solid;
       border-color: transparent transparent rgb(0,0,0);  // bottom = black
     }
     ::after  (overlay, same geometry, lighter):
       border-color: transparent transparent rgba(255,255,255,0.2);
   That's a classic CSS-arrow trick: 0-w/h box, 6.4px transparent left/right
   borders + 6.4px solid bottom border → black upward-pointing triangle at the
   top edge of the panel, with a 20%-white ::after overlay softening it.
   MR theme-robinbet-mobile.css emits a default mauve (rgb(59,21,104)) ::before;
   we override here. Specificity (0,3,2) [body.mobile-site + panel + arrow +
   pseudo] wins over (0,2,1) theme rule. */
body.mobile-site .mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc::before {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  right: 12.2px !important;
  left: auto !important;
  bottom: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 0 6.4px 6.4px !important;
  border-style: solid !important;
  border-color: transparent transparent rgb(0, 0, 0) !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
body.mobile-site .mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc::after {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  right: 12.2px !important;
  left: auto !important;
  bottom: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 0 6.4px 6.4px !important;
  border-style: solid !important;
  border-color: transparent transparent rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* 6. Inner column (BS: 50x280, black bg, 4px radius) --------------------------
   ITER 522 (2026-05-18): display flex→block. Live BS shows holder display:block
   (block-flow buttons stack naturally, no flex gap). MR was using flex column
   gap:2px which inserted hairline gaps between buttons — BS shows zero gaps
   with a faint divider (border-bottom on each button rgba(255,255,255,0.04)).
   gap:normal in BS computed style indicates no gap declaration (browser default
   for block formatting context). */
body.mobile-site .mobileHeader-smartPanel .hdr-smart-panel-holder-bc {
  display: block !important;
  width: 50px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15) !important;
  overflow: hidden auto !important;
}

/* 7. Each button (BS: 50x56, transparent-on-black, 18px icon) -----------------
   ITER 519c (2026-05-18): box-sizing:border-box required because BS smart-panel
   mixes element types — notification is <button> (default border-box) but
   favorite/settings/live-chat/betslip are <a href> (default content-box).
   Without explicit box-sizing the <a> variants compute to:
     50 (width) + 6+6 (h-padding) = 62px rendered (instead of 50px BS-paralel)
     56 (height) + 1+1 (v-padding) + 0.8 (border-bottom) = 58.8px rendered
   Forcing border-box makes width:50/height:56 == final rendered box, which
   matches BS's render across all 5 buttons uniformly (BS uses the same
   markup mix but its theme.css applies box-sizing:border-box at the
   panel-button level — verified via live extract 2026-05-18). */
body.mobile-site .mobileHeader-smartPanel .sp-button-bc {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 56px !important;
  min-width: 0 !important;
  padding: 1px 6px !important;
  margin: 0 !important;
  /* ITER 522 (2026-05-18) — BS-exact bg opacity bump 0.04→0.2.
     Live BS measurement: rgba(255,255,255,0.2). Previous 0.04 rendered buttons
     as near-invisible faint tint on black; user reported "buttons not visible".
     0.2 gives the actual BS panel feel — buttons read clearly while keeping
     the dark panel base. */
  background: rgba(255,255,255,0.2) !important;
  /* ITER 523 (2026-05-18) — BS-exact: zero out hairline divider.
     Live BS measurement of all 5 buttons: border-bottom-width = 0px (color
     rgba(255,255,255,0.85) declared but inert because width=0). MR was
     showing a faint 0.8px line at 0.04 alpha between every button —
     barely visible but technically non-BS. BS uses block flow with
     NO dividers between buttons; the panel's visual rhythm comes purely
     from button spacing (50x56 boxes) and the rgba(255,255,255,0.2)
     background tint on the buttons against the rgb(0,0,0) holder. */
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative;
  transition: color 0.18s ease, background 0.18s ease;
}

body.mobile-site .mobileHeader-smartPanel .sp-button-bc:last-child {
  border-bottom: 0 !important;
}

body.mobile-site .mobileHeader-smartPanel .sp-button-bc:hover,
body.mobile-site .mobileHeader-smartPanel .sp-button-bc:focus,
body.mobile-site .mobileHeader-smartPanel .sp-button-bc:active {
  color: rgb(211, 175, 55) !important;   /* MR gold (operator branding override) */
  background: rgba(211, 175, 55, 0.08) !important;
  outline: none !important;
}

/* 8. Icon wrappers — force BetConstruct-Icons font + correct sizing ----------
   ITER 519: sp-button-icon-bc was previously sized to fit inline SVG (18×18).
   With <i> + font glyph approach we need explicit font-family override because
   theme-robinbet-mobile.css applies `font-family: "BetConstruct-Icons"` only
   via `[class*="bc-i-"]::before { font-family: ... }` — the wrapper element
   itself can inherit conflicting font from parent (Roboto). Specificity:
   (0,4,1) [html.mobile-root + body.mobile-site + .mobileHeader-smartPanel
   + .sp-button-icon-bc] wins over the (0,3,1) theme rule. */
html.mobile-root body.mobile-site .mobileHeader-smartPanel .sp-button-icon-bc {
  font-family: "BetConstruct-Icons" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: never !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}

/* 8a. BS-exact glyph codepoint overrides — theme-robinbet-mobile.css lines
   15135 / 15566 / 15744 / 15835 / 15839 currently emit `content: ""`
   (empty string). Without overriding these, our <i class="sp-button-icon-bc
   bc-i-notification"> renders empty space. We override here at higher
   specificity (0,4,1) to inject the correct BS codepoint into `content`.

   Codepoint origins — decoded from bs-mirror CSS at
     frontend-astro/releases/release-20260506-184604/client/bs-mirror/
       assets/index.7tkrlqxF.css
   via raw-byte UTF-8 parse (Latin-1 misinterpretation otherwise gives U+00EE
   leading byte only). Verified 2026-05-18.

   Style: same font-family stack as bc-i-vertical-toggle (line 20279 of
   theme-robinbet-mobile.css). speak:never + line-height:1 prevent screen
   readers from speaking the glyph code AND prevent vertical-align drift. */
html.mobile-root body.mobile-site .mobileHeader-smartPanel .sp-button-icon-bc.bc-i-notification::before {
  content: "\e94e" !important;     /* U+E94E — bell glyph */
  font-family: "BetConstruct-Icons" !important;
}
html.mobile-root body.mobile-site .mobileHeader-smartPanel .sp-button-icon-bc.bc-i-favorite::before {
  content: "\e93b" !important;     /* U+E93B — star glyph */
  font-family: "BetConstruct-Icons" !important;
}
html.mobile-root body.mobile-site .mobileHeader-smartPanel .sp-button-icon-bc.bc-i-settings::before {
  content: "\e96a" !important;     /* U+E96A — gear glyph */
  font-family: "BetConstruct-Icons" !important;
}
html.mobile-root body.mobile-site .mobileHeader-smartPanel .sp-button-icon-bc.bc-i-live-chat::before {
  content: "\ea1b" !important;     /* U+EA1B — headset glyph */
  font-family: "BetConstruct-Icons" !important;
}
html.mobile-root body.mobile-site .mobileHeader-smartPanel .sp-button-icon-bc.bc-i-betslip::before {
  content: "\e936" !important;     /* U+E936 — receipt glyph */
  font-family: "BetConstruct-Icons" !important;
}

/* 9. Hidden text spans (BS keeps them empty) ---------------------------------- */
body.mobile-site .mobileHeader-smartPanel .sp-button-content-text-bc {
  display: none !important;
}

/* 10. Notification badge (BS data-badge dot) ---------------------------------- */
body.mobile-site .mobileHeader-smartPanel .sp-badge {
  display: none;
}
body.mobile-site .mobileHeader-smartPanel .sp-badge[data-badge]:not([data-badge=""]) {
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #d2b038;
  color: #000;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-radius: 10px;
}

/* 11. Toggle button rotation when open (subtle feedback) ---------------------- */
body.mobile-site .hdr-toggle-button-bc.is-open {
  color: rgb(211, 175, 55) !important;
}

/* 12. Override generic theme rule that hides whole panel when no .is-open ------ */
body.mobile-site .smartPanel-bc:not(.is-open) {
  /* the wrapper itself is just a container; arrow inside is the visible pane */
  display: block !important;
}