/* ===================================================================
 * livecasino-page-fixes.css — AGENT-LIVECASINO-OWNED
 * BS-EXACT CLONE per rule #160 EXACT KLONLA (2026-05-19, ITER 525)
 *
 * Scope: ONLY /livecasino route. Selector relies on the unique
 *        cat-tab href that exists ONLY on the livecasino page:
 *        a[href="/livecasino?sort=blackjack"]
 *        Combined with :has() this isolates the file to /livecasino
 *        without any PHP/route detection plumbing. The cat-tab is
 *        hidden via display:none (rule 2.2) but still in DOM so
 *        :has() match still resolves.
 *
 * BS reference (m.bahissende303.com /tr/live-casino/home, mobile UA 392×):
 *   • Body bg:                 rgb(0,0,0)
 *   • Font family:             Roboto, Arial, Helvetica, sans-serif
 *   • Top: header (49) + sub-nav (40)
 *   • Banner slider:           210px (kept from existing rules)
 *   • Provider filter row:     40px h, padding 0 16px
 *     - "Sağlayıcı seç" pill:  126.65×40, border 0.8px rgba(255,255,255,0.2),
 *                              br 8, padding 0 8, bg transparent,
 *                              color rgba(255,255,255,0.8),
 *                              Roboto 14px/400
 *     - Search icon button:    41.6×40, br 8, border 0.8px,
 *                              icon 18px rgb(255,255,255)
 *   • Game grid:               grid 2 cols × 167.4px, gap 10px,
 *                              container w=345px with 16px left padding
 *                              (inside layout-bc full-width)
 *   • Card outer (.casinoGameItemWrp): transparent overflow:visible
 *   • Card inner (.casinoGameItem):    167.5×118, bg rgba(255,255,255,0.1)
 *                                       br 8, overflow:hidden
 *   • Card image:                       100%×100% object-fit:fill
 *
 * Pollution removed (MR extras absent in BS, hidden via display:none):
 *   • .slot-below-hero + .slot-hero-tabs (JACKPOT/KAZANANLAR pair)
 *   • .slots-category-filters (9 cat tabs: Tüm Oyunlar/Popüler/Yeni/...)
 *   • .slots-providers-games-line (SAĞLAYICILAR | OYUNLAR toggle)
 *   • .recent-games-section (Son Oynadıkların header + grid)
 *   • .slot-games-scrollbar-rail (custom MR scrollbar)
 *   • #allGamesBtn, #viewModuleBtn, #randomGameBtn, #sortToggleWrap
 *   • .mobile-sidebar-toggle__menu-icon (extra hamburger inside pill)
 *
 * Mapped (MR markup retained, BS styling applied):
 *   • .mobile-sidebar-toggle      →  BS "Sağlayıcı seç" button
 *   • .games-search-expand        →  BS search icon box (input hidden)
 *
 * Source of truth (BS) measured: 2026-05-19 (Agent Livecasino, ITER 525)
 * Replaces prior 2026-04-28 ITER 1 measurements (171.4×120.75, 353w)
 * with BS-exact 2026-05-19 measurements (167.4×118, 345w).
 * =================================================================== */

/* -----------------------------------------------------------------
 * 0. BASE — body/theme parity
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) {
  background-color: rgb(0, 0, 0) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* -----------------------------------------------------------------
 * 1. SLIDER HEIGHT — BS=214px live audit 2026-05-23 (ITER 684 update)
 *    BS .hm-row-bc.has-slider live rect: 214px (önceden 210 yazılmıştı, yanlış)
 *    Targets .slot-top-section (slider wrap on /livecasino)
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-top-section {
  height: 214px !important;
  min-height: 214px !important;
  max-height: 214px !important;
}
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-top-section .swiper,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-top-section .swiper-container,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-top-section .home-hero-slider {
  height: 214px !important;
  max-height: 214px !important;
}
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-top-section .swiper-slide img,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-top-section img {
  height: 214px !important;
  max-height: 214px !important;
  object-fit: cover !important;
}

/* -----------------------------------------------------------------
 * 2. HIDE MR EXTRAS (POLLUTION — absent in BS canlı casino)
 * ----------------------------------------------------------------- */

/* 2.1 .slot-below-hero (jackpot/winners tabs) — BS has none */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-below-hero,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-hero-tabs {
  display: none !important;
}

/* 2.2 9-tab category filter row — BS has none on canlı casino
 *     NOTE: cat-tab href anchor stays in DOM (just hidden) so the
 *     :has() scoping above still matches. */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slots-category-filters {
  display: none !important;
}

/* 2.3 SAĞLAYICILAR | OYUNLAR toggle line — BS has none */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slots-providers-games-line {
  display: none !important;
}

/* 2.4 Recent games section — BS does not show on canlı casino */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .recent-games-section {
  display: none !important;
}

/* 2.5 Custom scrollbar rail — BS uses native scrollbar */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-games-scrollbar-rail {
  display: none !important;
}

/* 2.6 Toolbar buttons absent in BS:
 *     all-games, view-module, random-game, menu-icon
 *
 *     USER OVERRIDE (2026-05-19, ITER 530): #sortToggleWrap UNHIDDEN per
 *     user instruction "direktmen dosyalardan meritroyal slot sayfasındaki
 *     sağlayıcı seç butonunu (basınca açılan sekme dahil) arama butonunu
 *     ve yanındaki butonu alamazmısın?" — the "button next to search"
 *     is the sort toggle button on /slot. Logged in AI_USER_OVERRIDES.md.
 */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #allGamesBtn,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #viewModuleBtn,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #randomGameBtn,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .mobile-sidebar-toggle__menu-icon {
  display: none !important;
}

/* 2.6.1 ITER 696 (2026-05-25) — #sortToggleWrap GİZLE on /livecasino (BS-exact).
 *
 * ITER 530/531 (2026-05-19) USER OVERRIDE bu sort butonunu /livecasino'da görünür
 * yapmıştı (force-visible). Kullanıcı 2026-05-25'te kararını TERSİNE çevirdi:
 * BS livecasino'da sort butonu YOK (canlı ölçüm: BS /tr/live-casino/home
 * anyVisibleSortIcon=0). random-game-btn gibi (yukarıda 2.6 "BS-absent" listesinde)
 * sort da BS'de yok → /livecasino-only :has() scope + yüksek specificity ile GİZLE.
 * Slot/casino ETKİLENMEZ (onlar bu :has() scope'una girmez). ITER 530 override geri
 * alındı (AI_USER_OVERRIDES.md güncellenir). Eski force-visible rule display:none oldu.
 */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slots-game-search-bar #sortToggleWrap,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slots-game-search-bar .sort-toggle-wrap,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #sortToggleWrap.sort-toggle-wrap {
  display: none !important;
}

/* 2.7 ITER 698 (2026-05-25) — casino-container GRİ GRADIENT KALDIR (BS-exact).
 * Kullanıcı 2026-05-25: filter bar ("Sağlayıcı seç") arkasındaki ŞERİT gri, siyah
 *   arka plandan farklı (pill/search rengi değil, arkalarındaki band).
 * KÖK SEBEP: casino-page-fixes.css .casino-container'a gri gradient koyuyor:
 *   linear-gradient(rgba(255,255,255,0.05) 1%, rgba(30,38,57,0.05) 46%, transparent 100%)
 *   → wrapper'ın ÜSTÜ (filter bar tam orada) en gri yer. BS'de YOK — canlı ölçüm:
 *   BS /tr/live-casino/home content wrapper'ları (casinoProviderBlockMob,
 *   casinoGenericPageTemplate, liveCasinoWrapper) hepsi bgImage:none, siyah.
 * FIX: livecasino'da gradient'i none yap → content siyah (BS-paralel). Canlı test:
 *   none → band rgb(0,0,0). livecasino-page-fixes.css casino-page-fixes.css'ten SONRA
 *   yüklenir (BaseLayout sırası) + aynı specificity + !important → kazanır.
 * NOT: aynı gradient /casino'da da var (casino-page-fixes shared); kullanıcı livecasino
 *   sordu, /casino'ya DOKUNULMADI (istenirse ayrıca eklenir). */
html.mobile-root body.mobile-site .slot-page-root .casino-container {
  background-image: none !important;
}

/* 2.8 ITER 699 (2026-05-25) — banner ile filter bar arası nefes payı (BS-paralel).
 * Kullanıcı 2026-05-25: "sağlayıcı seç ve arama butonunu biraz aşağı al, bannerle
 *   arasında nefes payı bırak". BS livecasino'da banner ile filter arası ~46px boşluk
 *   var (canlı ölçüm: BS gap=46). Banner (.slot-top-section) ile içerik (.casino-container)
 *   KARDEŞ; içerik tarafına margin/padding mevcut padding:0 kurallarınca yutuluyor
 *   (canlı test: casino margin/padding → gap 0). ÇALIŞAN yol: banner'a margin-bottom
 *   (canlı test: gap 46). livecasino-only dosya → slot/casino ETKİLENMEZ. */
html.mobile-root body.mobile-site .slot-page-root .slot-top-section {
  /* ITER 699.1 (2026-05-25): 46px (BS değeri) çok fazla geldi (kullanıcı) → 20px.
   * USER OVERRIDE: BS'te 46px ama kullanıcı daha az nefes payı istedi. */
  margin-bottom: 20px !important;
}

/* -----------------------------------------------------------------
 * 3. CASINO CONTAINER WIDTH — full width, no inner padding
 *    BS layout-bc spans viewport; grid is the centered/offset child.
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .casino-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slots-layout {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-main {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slots-filter-and-games {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -----------------------------------------------------------------
 * 4. FILTER ROW — BS .casinoProviderBlockMob (h=40)
 *    Map MR .games-header (.slots-game-search-bar) → this row.
 *    Single row: [Sağlayıcı seç pill] + [optional chips] + [search icon]
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-main .games-header,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-main .slots-game-search-bar {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: static !important;
  overflow: visible !important;
}

/* -----------------------------------------------------------------
 * 4.1 "Sağlayıcı seç" BUTTON (mapped from .mobile-sidebar-toggle)
 *     BS spec: 126.65×40, border 0.8px solid rgba(255,255,255,0.2),
 *              br 8, padding 0 8px, bg transparent,
 *              color rgba(255,255,255,0.8),
 *              Roboto 14px/400
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .mobile-sidebar-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

/* ITER 525 fix6 — specificity bump: add #mobileSidebarToggle ID to win over
 * slot-deep-fixes.css `html.mobile-root body.mobile-site .slot-page-root
 * #mobileSidebarToggle .mobile-sidebar-toggle__pill { gap: 4px !important }`
 * which has (1,4,2). With ID added here we reach (1,5,3) + :has() argument
 * specificity, beating slot-deep-fixes. Without this MR pill gap stays 4px
 * (130.65 width) instead of BS-exact 0 gap (126.65 width). */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #mobileSidebarToggle .mobile-sidebar-toggle__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important; /* ITER 525 BS-exact: BS uses 0 flex gap; text marginLeft:12px alone provides icon→text spacing (live measurement 2026-05-19) */
  column-gap: 0 !important; /* belt-and-braces — explicit column-gap to override slot-deep-fixes */
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #mobileSidebarToggle .mobile-sidebar-toggle__pill-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #mobileSidebarToggle .mobile-sidebar-toggle__pill-text {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* -----------------------------------------------------------------
 * 4.2 SEARCH ICON BUTTON — BS 41.6×40 br 8 (input hidden)
 *     Map MR .games-search-expand → square icon box on right edge.
 *     BS opens search overlay/drawer on click; for MR we keep
 *     existing click handler (toggle .is-expanded → input visible)
 *     but visually present only the icon at rest state.
 *
 * ITER 686 v5 (2026-05-23): :not(.always-expanded) guard eklendi.
 * User raporu: SPA nav (anasayfa/slot → livecasino tab) sonra search button
 * açılmıyor. Bu rule expanded state'i bile 41.6px'e zorluyordu. Direct URL
 * load'da `:has()` selector belki gecikme yüzünden evaluate olmuyor, SPA
 * nav'da DOM hazır olduğu için rule applied → wrap collapsed kalıyor.
 *
 * FIX: always-expanded class set olduğunda (slot.astro + livecasino.astro
 * SSR'da sabit, JS dokunmaz) bu force-collapse rule devre dışı.
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 41.6px !important;
  min-width: 41.6px !important;
  max-width: 41.6px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 0 0 auto !important;  /* push to right edge */
  padding: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  order: 99 !important;
}

/* Even if user has search active (is-expanded), keep icon-only visual
   to match BS — the actual search input is in the overlay (rule #160).
   ITER 686 v5: :not(.always-expanded) guard. */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand.is-expanded:not(.always-expanded) {
  width: 41.6px !important;
  min-width: 41.6px !important;
  max-width: 41.6px !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) .games-search-bar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  gap: 0 !important;
}

/* Hide the input visually but keep clickable button-only state */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) .games-search-input {
  display: none !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) .games-search-btn,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) .games-search-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  cursor: pointer !important;
  color: rgb(255, 255, 255) !important;
  box-shadow: none !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) .games-search-btn i,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .games-search-expand:not(.always-expanded) .games-search-icon-btn i {
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgb(255, 255, 255) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Active filter chips: between pill and search */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #active-filters-box {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  flex: 0 1 auto !important;
  order: 5 !important;
  max-width: calc(100% - 200px) !important;
  overflow: hidden !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #active-filters-row {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* -----------------------------------------------------------------
 * 5. GAME GRID — BS-exact (LIVE 2026-05-19 measurement)
 *    cols: 175px × 175px, gap 10px → 360 total
 *    container width: 360px, margin 0 0 0 16px (16px left gutter)
 *    (replaces earlier 167.4×118/345 extract values)
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #slotsGamesContainer,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .slot-oyun-listesi {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #game-grid,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .game-grid {
  width: 360px !important;
  max-width: 360px !important;
  margin: 0 0 0 16px !important;
  padding: 3px 0 0 !important;
  display: grid !important;
  grid-template-columns: 175px 175px !important;
  gap: 10px !important;
  box-sizing: content-box !important;
  justify-content: start !important;
  position: relative !important;
  list-style: none !important;
}

/* -----------------------------------------------------------------
 * 6. GAME CARD — BS .casinoGameItemWrp + .casinoGameItem (inner)
 *    Outer (.casinoGameItemWrp): transparent overflow:visible
 *    Inner (.casinoGameItem):    bg rgba(255,255,255,0.1) br 8 overflow:hidden
 *    Image:                       100%×100% object-fit:fill
 *
 *    MR has flat .game-item (anchor + img); apply BS-look directly:
 *    bg + br + overflow on .game-item, dims 175×123.29 (LIVE BS 2026-05-19).
 *    Image inside gets object-fit:fill + 100%×100%.
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #game-grid .game-item,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .game-grid .game-item {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: 175px !important;
  height: 123.29px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start !important;
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #game-grid .game-item img,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .game-grid .game-item img,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #game-grid .game-item picture img,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .game-grid .game-item picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Card hover/tap overlay (game-ux.min.js .game-overlay) — keep radius */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #game-grid .game-item .game-overlay,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .game-grid .game-item .game-overlay {
  border-radius: 8px !important;
}

/* -----------------------------------------------------------------
 * 7. EMPTY STATE — center in available width
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #game-grid .empty-state,
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) .game-grid .empty-state {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 24px 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* -----------------------------------------------------------------
 * 8. LOAD-MORE SENTINEL — keep zero-height
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root:has(a[href="/livecasino?sort=blackjack"]) #load-more-sentinel {
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -----------------------------------------------------------------
 * 9. DRAWER-OPEN STATE — hide hero banner + lock body scroll (ITER 533 v3)
 * -----------------------------------------------------------------
 * When the provider drawer is open (body.provider-sheet-open OR
 * body.drawer-open), the BS-branded "EN POPÜLER CANLI SAĞLAYICILAR
 * BAHISSEN'DE" hero banner under .slot-top-section > .home-hero-slider
 * was bleeding through above the drawer's provider grid. User reports
 * this happens on ALL mobile browsers (Chrome Android, iOS Safari,
 * Samsung Internet) — NOT iOS-specific. The drawer's `position: fixed`
 * is getting containing-block-trapped by some ancestor (one of the
 * #slotsLayout > #slotsFilterAndGames > casino-container chain has a
 * transform / will-change / contain / sticky property that demotes
 * the drawer to that ancestor's coordinate space). Hide the entire
 * hero section + slot-top-section while drawer is open so the banner
 * cannot leak regardless of drawer rendering edge cases. Also lock
 * body scroll so the page beneath doesn't scroll under the drawer
 * (mobile elastic-scroll behavior).
 * ----------------------------------------------------------------- */
html.mobile-root body.mobile-site.provider-sheet-open .slot-top-section,
html.mobile-root body.mobile-site.drawer-open .slot-top-section,
html.mobile-root body.mobile-site.provider-sheet-open .home-hero-slider,
html.mobile-root body.mobile-site.drawer-open .home-hero-slider,
html.mobile-root body.mobile-site.provider-sheet-open .home-hero-slider-inner,
html.mobile-root body.mobile-site.drawer-open .home-hero-slider-inner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Lock body + html scroll while drawer is open (ITER 533 v4).
 * User reported: swiping over the dark areas inside the drawer scrolls
 * the page beneath on both /slot and /livecasino. Root cause: while
 * body had `overflow:hidden + touch-action:none`, the html element
 * remained scrollable (touch-action:auto) and the drawer itself had
 * `overflow-y:auto` without `overscroll-behavior:contain`, so touchmove
 * over non-scrollable drawer areas (search bar, gaps between tiles,
 * GERİ button row) bubbled up and the document scrolled.
 *
 * Universal fix combines four layers:
 *   1. body { position:fixed; width:100%; top:-<scrollY>px } — pins the
 *      document at current scroll position; even if html scrolls, body
 *      stays put. Scroll position restored on close via window.scrollTo.
 *   2. html + body { overflow:hidden; touch-action:none;
 *      overscroll-behavior:none } — disables every scroll mechanism.
 *   3. Drawer + sheet + grid { overscroll-behavior:contain;
 *      touch-action:pan-y } — drawer can scroll vertically internally,
 *      but reaching scroll bounds doesn't chain to body.
 *   4. JS touchmove handler (in provider-drawer-early-bind.js) blocks
 *      touchmove outside drawer with passive:false.
 */
html.mobile-root:has(body.provider-sheet-open),
html.mobile-root:has(body.drawer-open) {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

html.mobile-root body.mobile-site.provider-sheet-open,
html.mobile-root body.mobile-site.drawer-open {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  /* `top` is set inline by JS to `-<scrollY>px` to preserve scroll position */
}

/* Drawer container, sheet, and provider grid — vertical scroll allowed
 * INSIDE drawer (pan-y) but scroll chain to body is blocked (contain). */
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open,
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open .provider-sheet,
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open #sidebarProvidersList {
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

/* Sidebar overlay backdrop — touch-action:none so user can't accidentally
 * scroll the page by dragging on the dimmed area outside the drawer. */
html.mobile-root body.mobile-site.provider-sheet-open .sidebar-overlay,
html.mobile-root body.mobile-site.drawer-open .sidebar-overlay {
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* Solid opaque background on drawer when open — defense vs any browser
 * rendering edge case where drawer might not fully cover.
 * Specificity-stacked to win over theme rules. */
html.mobile-root body.mobile-site #providersSidebar.providers-sidebar.mobile-open {
  background: #0a0a0c !important;
}

/* End of livecasino-page-fixes.css */
/* ITER 533 v4 DRAWER SCROLL-LOCK HARDENING — cache-bust 2026-05-19 */