/*
 * Casino Quill — Mobile Redesign Layer
 * -----------------------------------
 * Purpose: build a clean, conversion-first mobile experience (<768px)
 * WITHOUT changing desktop styling at all.
 *
 * Everything is scoped to a "mobile" media query (phones portrait + phones landscape).
 */

/*
 * Apply the mobile layer on:
 *  - phones in portrait (<=767px)
 *  - phones in landscape (phones can exceed 767px width in landscape)
 *
 * IMPORTANT: We also match coarse-pointer (touch) devices up to 980px so
 * landscape phones don't fall back to the desktop header/layout.
 * Desktop remains unchanged.
 */
/*
 * Apply the mobile layer on small screens AND on touch devices up to 1200px.
 * Using (hover:none) is more reliable than (pointer:coarse) on Android browsers
 * which sometimes misreport pointer capabilities in landscape.
 */
@media (max-width: 767px), (hover: none) and (max-width: 1200px) {
  /* ------------------------------------------------------------
   * 1) Safety rails (fix common mobile breakages)
   * ---------------------------------------------------------- */
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /*
   * Responsive helpers must win on mobile.
   * In the base CSS, many components (e.g. .bm-nav, .bm-topbar-right) set `display`
   * AFTER .bm-hide-mobile / .bm-show-mobile, which can override them.
   * Force the intended behavior here without touching desktop.
   */
  .bm-hide-mobile{ display:none !important; }
  .bm-show-mobile{ display:block !important; }

  /*
   * Fix: In the base stylesheet, `.bm-show-mobile{display:block}` can override
   * the browser default `[hidden]{display:none}` (same specificity, later wins).
   * That makes the drawer appear immediately on mobile and prevents closing.
   */
  .bm-drawer[hidden]{
    display: none !important;
  }

  /* Make sure fixed mobile bars never cover content. */
  .bm-main { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

  /* Prevent long strings from blowing layouts. */
  .bm-body, .bm-body * { overflow-wrap: anywhere; word-break: break-word; }

  /* Any content tables inside posts should scroll instead of breaking the viewport. */
  .bm-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------------------------
   * 2) Mobile sizing + typography
   * ---------------------------------------------------------- */
  :root{
    --bm-radius: 18px;
    --bm-radius-sm: 14px;
  }

  .bm-container { padding: 0 14px; max-width: 100% !important; width: 100% !important; }
  .bm-section { padding: 18px 0; }
  .bm-grid { gap: 12px; }

  .bm-section-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .bm-h1{ font-size: 30px; line-height: 1.12; }
  .bm-h2{ font-size: 22px; line-height: 1.18; }
  .bm-h3{ font-size: 18px; line-height: 1.25; }
  .bm-lead{ font-size: 15px; line-height: 1.45; }

  /* Cards: calmer spacing and better tap targets. */
  .bm-card { padding: 14px; }
  .bm-btn { min-height: 44px; }

  /* ------------------------------------------------------------
   * 3) Header / topbar: compact, no horizontal overflow
   * ---------------------------------------------------------- */
  .bm-topbar-inner{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }
  .bm-topbar-note{
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
  }

  .bm-header-inner{ padding: 10px 0; }
  .bm-brand{ min-width: 0; gap: 10px; }
  .bm-brand-tag{ display:none; }
  .bm-brand-name{ font-size: 15px; }
  .bm-header-actions{ gap: 8px; }

  /* Hamburger: easier to hit. */
  .bm-icon-btn{ min-width: 44px; min-height: 44px; }

  /* ------------------------------------------------------------
   * 3b) Mobile drawer: force true full-screen overlay + scroll
   *      (fixes iOS/Safari bugs with position:fixed inside
   *       backdrop-filter headers)
   * ---------------------------------------------------------- */
  .bm-drawer{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999 !important;
  }
  .bm-drawer-backdrop{
    position: fixed !important;
    inset: 0 !important;
  }
  .bm-drawer-panel{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .bm-drawer-head{
    position: sticky;
    top: 0;
    background: inherit;
    padding-top: max(6px, env(safe-area-inset-top));
    z-index: 1;
  }
  .bm-drawer-panel *{ max-width: 100%; }

  /* ------------------------------------------------------------
   * 4) Front page hero: app-like stacking
   * ---------------------------------------------------------- */
  .bm-hero{ padding: 20px 0 8px; }
  .bm-hero-copy{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }
  /* Show the visual first on mobile. */
  .bm-hero-art{ order: -1; margin-top: 0; }
  .bm-hero-ctas{ margin-top: 0; }
  .bm-hero-ctas .bm-btn{ width: 100%; justify-content: center; }
  .bm-hero-ctas .bm-btn--ghost{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }

  /* Trust badges: keep it short, prevent overflow. */
  .bm-trust{ gap: 8px; margin-top: 4px; }
  .bm-trust .bm-badge{
    padding: 6px 8px;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }
  .bm-trust .bm-badge:nth-child(n+4){ display:none; }

  /* Quick picks: remove hard widths that can break small screens. */
  .bm-pick{ gap: 10px; }
  .bm-pick-rating{ min-width: 0; }
  .bm-pick-rating .bm-stars-num{ display:none; }
  .bm-pick-name{ font-size: 14px; }
  .bm-pick-sub{ line-height: 1.25; }

  /* ------------------------------------------------------------
   * 5) Listing/search controls: stack inputs, make pills scrollable
   * ---------------------------------------------------------- */
  .bm-archive-search{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bm-archive-search .bm-input{ flex: 0 0 auto; width: 100%; }
  .bm-archive-search .bm-btn{ width: 100%; justify-content: center; }

  .bm-sort{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 8px;
  }
  .bm-sort .bm-pill{ flex: 0 0 auto; }

  /* ------------------------------------------------------------
   * 6) Mobile compare cards: clearer hierarchy + spacing
   * ---------------------------------------------------------- */
  .bm-mobile-card{ padding: 14px; }
  .bm-mobile-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .bm-mobile-rating{ width: 100%; justify-content: flex-start; }
  .bm-mobile-cta .bm-btn{ width: 100%; justify-content: center; }

  /* Make feature bullets tighter so cards stay scannable. */
  .bm-features--compact li{ margin: 6px 0; }

  /* ------------------------------------------------------------
   * 7) Single review: reduce sticky clutter, improve reading flow
   * ---------------------------------------------------------- */
  /* The bottom sticky CTA is enough; hide the extra sticky bar. */
  .bm-review-stickybar{ display:none !important; }

  /* Put content first on mobile (sidebar after). */
  /* Put the rating/score box (sidebar) first on mobile. */
  .bm-review-layout{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .bm-review-sidebar{ order: -1 !important; position: static !important; top: auto !important; }
  .bm-review-content{ order: 0; padding-bottom: calc(140px + env(safe-area-inset-bottom)); }

  /* Ensure review blocks span full width on touch devices (prevents half-width columns in landscape). */
  .bm-review-hero,
  .bm-review-hero-main,
  .bm-review-layout,
  .bm-review-content,
  .bm-review-sidebar,
  .bm-review-actions,
  .bm-review-actions-top,
  .bm-review-actions-left,
  .bm-review-cta-box,
  .bm-terms-section,
  .bm-related,
  .bm-aside-card{
    width: 100% !important;
    max-width: none !important;
  }

  .bm-review-hero-main{ gap: 12px; }
  .bm-review-stats{ grid-template-columns: 1fr 1fr; gap: 10px; }

  /*
   * In landscape, the action box can appear "half width" because the parent
   * uses flex + align-items:flex-start in the base CSS. Ensure it stretches.
   */
  .bm-review-actions-top,
  .bm-review-actions-left{ align-items: stretch !important; }
  .bm-review-actions .bm-review-hero-ctas{ width: 100% !important; }

  /* CTAs: primary action full width, utility actions 2-up where possible. */
  .bm-review-hero-ctas{
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bm-review-hero-ctas > a,
  .bm-review-hero-ctas > details{ width: 100%; }
  .bm-review-hero-ctas .bm-btn{ width: 100%; justify-content: center; }
  .bm-review-hero-ctas > a.bm-btn--primary{ grid-column: 1 / -1; }
  .bm-review-hero-ctas > a.bm-btn--ghost{ grid-column: 1 / -1; }
  .bm-toc-dropdown, .bm-pay-dropdown{ grid-column: span 1; }

  /*
   * Quick actions should NOT stick on mobile: sticky overlays the prose and
   * makes the first lines unreadable while scrolling.
   * The bottom mobile footer CTA already keeps the main action visible.
   */
  .bm-review-actions,
  .bm-review-actions-top,
  .bm-review-actions-left,
  .bm-review-hero-ctas{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    transform: none !important;
  }
  .bm-review-actions{ margin-bottom: 12px; }
  .bm-review-actions .bm-review-hero-ctas{
    background: rgba(5,10,18,.62);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--bm-radius);
    padding: 10px;
    backdrop-filter: blur(14px);
  }

  /* Keep the first paragraph from tucking under the CTA row in some mobile browsers. */
  .single-casino_review .bm-prose{ padding-top: 6px; }
  html[data-bm-theme="light"] .bm-review-actions .bm-review-hero-ctas{
    background: rgba(246,248,253,.92);
    border-color: rgba(10,20,40,.10);
  }

  /* Dropdown popovers: keep IN FLOW on mobile (stable; no jumping). */
  .bm-toc-dropdown[open] .bm-toc-popover,
  .bm-pay-dropdown[open] .bm-pay-popover{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: min(62vh, 520px) !important;
    overflow: auto !important;
    margin-top: 10px !important;
  }

  /* When closed, avoid any lingering inline sizing. */
  .bm-toc-popover, .bm-pay-popover{
    max-height: none;
    width: 100%;
  }

  /* Make "On This Page" and "Payment Methods" triggers equal height on mobile. */
  .bm-review-hero-ctas .bm-toc-trigger,
  .bm-review-hero-ctas .bm-pay-trigger{
    height: 64px;
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
  }

  /* Sidebar card: reduce visual weight on mobile. */
  .bm-review-sidebar .bm-card{ padding: 14px; }

  /*
   * Keep the score breakdown near the top on mobile.
   * In the default markup it's below the CTA; on phones it's more useful above.
   */
  .bm-review-sidebar .bm-aside-card{ display:flex !important; flex-direction:column !important; gap:12px; }
  .bm-review-sidebar .bm-aside-top{ order: 0 !important; }
  .bm-review-sidebar .bm-aside-breakdown{ order: 1 !important; }
  .bm-review-sidebar .bm-aside-kvs{ order: 2 !important; }
  .bm-review-sidebar .bm-aside-card > a.bm-btn{ order: 3 !important; }
  .bm-review-sidebar .bm-aff-row--sidebar{ order: 4 !important; }

  /* ------------------------------------------------------------
   * 8) Mobile footer CTA: safe area + slightly larger bar
   * ---------------------------------------------------------- */
  .bm-mobile-footer{
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .bm-mobile-footer-inner{ padding-left: 2px; padding-right: 2px; max-width: 100% !important; width: 100% !important; margin: 0 !important; }
  .bm-mobile-footer-bonus{ max-width: 52vw; }

  /* ------------------------------------------------------------
   * 9) Footer: tighter spacing
   * ---------------------------------------------------------- */
  .bm-footer{ margin-top: 10px; }
  .bm-footer-grid{ gap: 16px; }
}

/* Landscape phones: reduce wasted space and keep containers full-width.
   (Don't rely on pointer media features: some Android browsers misreport them.) */
@media (max-height: 520px) and (orientation: landscape) {
  .bm-container{ max-width: 100% !important; width: 100% !important; padding: 0 12px; }
  .bm-section{ padding: 14px 0; }
  .bm-hero{ padding: 14px 0 6px; }
  .bm-h1{ font-size: 26px; }
  .bm-topbar-note{ font-size: 12px; }

  /* Review pages: force single-column so we don't get an empty sidebar gap. */
  .bm-review-layout{ grid-template-columns: 1fr !important; }
  .bm-review-sidebar{ width: 100% !important; max-width: 100% !important; }
  .bm-review-content{ width: 100% !important; max-width: 100% !important; }
  .bm-review-actions{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Some Android browsers report a relatively tall CSS height even in
   landscape, so the max-height:520px query above doesn't always match.
   Ensure review pages stay full-width and single-column on any
   landscape phone-sized viewport. */
@media (hover: none) and (max-width: 1200px) and (orientation: landscape) {
  .single-casino_review .bm-container,
  .single-post .bm-container{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .single-casino_review .bm-review-layout{
    grid-template-columns: 1fr !important;
  }

  .single-casino_review .bm-review-content,
  .single-casino_review .bm-review-sidebar,
  .single-casino_review .bm-review-actions,
  .single-casino_review .bm-review-hero,
  .single-casino_review .bm-review-hero-main{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove any left offset that can leave an empty right-hand gutter. */
  .single-casino_review .bm-review-actions{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ------------------------------------------------------------
 * Mobile full-screen sheets (On this page / Payment methods)
 * ---------------------------------------------------------- */
@media (hover: none) and (max-width: 1200px) {
  html.bm-modal-open,
  html.bm-modal-open body{
    overflow: hidden !important;
  }

  dialog.bm-mobile-sheet{
    /* Ensure the sheet behaves consistently even in browsers/WebViews
       that don't fully implement <dialog> UA styles. */
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(6, 10, 20, 0.96);
    color: inherit;
    overscroll-behavior: contain;
  }
  dialog.bm-mobile-sheet[open]{
    display: block;
  }
  dialog.bm-mobile-sheet::backdrop{
    background: rgba(0,0,0,0.55);
  }

  .bm-mobile-sheet__inner{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .bm-mobile-sheet__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .bm-mobile-sheet__title{
    font-size: 18px;
    font-weight: 700;
  }
  .bm-mobile-sheet__close{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: inherit;
    font-size: 26px;
    line-height: 1;
  }
  .bm-mobile-sheet__body{
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Make the dropdown content feel native inside the sheet */
  .bm-mobile-sheet__body .bm-toc--dropdown a,
  .bm-mobile-sheet__body .bm-pay-row{
    display: block;
  }
  .bm-mobile-sheet__body .bm-toc--dropdown{
    gap: 10px;
  }
}

/* Review layout: keep single-column up to tablet widths (fixes landscape gaps). */
@media (hover: none) and (max-width: 1200px) {
  .bm-review-layout{ grid-template-columns: 1fr !important; }
  .bm-review-sidebar{ width: 100% !important; max-width: 100% !important; }
  .bm-review-content{ width: 100% !important; max-width: 100% !important; }
  .bm-review-actions{ width: 100% !important; max-width: 100% !important; }
}

/* In-page anchors: keep sections from hiding under the sticky header on touch layouts.
   (Include landscape phones that can exceed 980px width.) */
@media (max-width: 1200px), (max-height: 520px) and (orientation: landscape) {
  #how-we-review,
  #faq{
    scroll-margin-top: calc(var(--bm-sticky-top, 72px) + 14px);
  }
}

/* Extra-tight phones */
@media (max-width: 380px) {
  .bm-review-stats{ grid-template-columns: 1fr; }
}