/* MagicLotto Phase 2 — refined, private-preview mobile header.
   IMPORTANT: This CSS is linked only when the session preview flag is enabled.
   Regular customers and desktop design are not affected. 2026-10-12 */
.ml-pwa-mobile-only { display: none !important; }
@media (max-width: 767.98px) {
  /* A single compact phone app bar, not a two-story website masthead. */
  /* Phase 5E.2: FIXED app bar, not sticky. Sticky can fail when the website's
     existing scroll containers/overflow rules create a different scroll root.
     This applies only in the private-preview stylesheet on small screens. */
  .ml-site-header,
  .ml-site-header.header-close,
  .ml-site-header.menu-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    /* Above bottom tabs 950, below Bootstrap modal backdrop 1040. */
    z-index: 1000 !important;
    background: #fff !important;
  }
  /* A fixed header is outside document flow: reserve exactly one header's
     height so it doesn't cover the first content/heading. */
  body .main-light-version {
    padding-top: 67px !important;
  }
  html { scroll-padding-top: 88px; }
  body [id] { scroll-margin-top: 88px; }
  .ml-site-header .ml-header-main {
    background: #fff !important;
    border-bottom: 1px solid #e6ebf1 !important;
    box-shadow: 0 3px 13px rgba(22, 61, 93, .065) !important;
  }
  .ml-site-header .ml-header-main > .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .ml-site-header .ml-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-height: 66px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 50px 8px 0 !important; /* room for the More icon */
  }
  .ml-site-header .ml-header-brand {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
  .ml-site-header .ml-header-brand picture { display: block !important; }
  .ml-site-header .ml-header-brand img {
    display: block !important;
    height: auto !important;
    max-height: 46px !important;
    max-width: min(36vw, 145px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  .ml-site-header .ml-header-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 0 0 auto !important;
  }
  .ml-site-header .ml-wallet-summary,
  .ml-site-header .ml-user-summary { display: none !important; }
  .ml-site-header .ml-header-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  /* Signing up remains one tap away in More; leave a compact Login button. */
  .ml-site-header .ml-header-actions .ml-header-btn-secondary + .ml-header-btn-primary,
  .ml-site-header .ml-header-actions .ml-header-icon-btn { display: none !important; }
  .ml-site-header .ml-header-actions .ml-header-btn-secondary {
    background: #edf5fb !important;
    color: #075d98 !important;
    border: 1px solid #d8e7f2 !important;
  }
  .ml-site-header .ml-header-actions .ml-header-btn-secondary i { margin-right: 5px !important; }
  .ml-site-header .ml-header-actions .ml-header-btn-primary {
    background: #e7772d !important;
    color: #fff !important;
  }
  /* Reuse the current Bootstrap navigation and its existing links as a More popover. */
  .ml-site-header .ml-nav-shell {
    display: block !important;
    position: absolute !important;
    top: 11px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 1220 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .ml-site-header .ml-nav-shell > .container { padding: 0 !important; margin: 0 !important; }
  .ml-site-header .ml-main-nav {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ml-site-header .ml-navbar-label { display: none !important; }
  .ml-site-header .navbar-toggler {
    display: inline-flex !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dbe5ef !important;
    border-radius: 12px !important;
    background: #f6f9fc !important;
    color: #125f97 !important;
    box-shadow: none !important;
  }
  .ml-site-header .navbar-toggler .menu-toggle,
  .ml-site-header .navbar-toggler .menu-toggle::before,
  .ml-site-header .navbar-toggler .menu-toggle::after {
    background: #0d649e !important;
  }
  .ml-site-header .navbar-toggler[aria-expanded="true"] { background: #e8f3fb !important; }
  .ml-site-header .ml-main-nav .navbar-collapse {
    position: absolute !important;
    z-index: 1225 !important;
    top: 51px !important;
    right: 0 !important;
    left: auto !important;
    width: min(330px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 130px) !important;
    max-height: calc(100dvh - 130px) !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 1px solid #dee8ef !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 20px 50px rgba(18, 45, 65, .20) !important;
  }
  .ml-site-header .ml-main-nav .navbar-collapse.collapse:not(.show) { display: none !important; }
  .ml-site-header .ml-main-nav .navbar-collapse.show { display: block !important; }
  .ml-site-header .ml-main-nav .main-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
  }
  .ml-site-header .ml-main-nav .main-menu > li > a {
    min-height: 43px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    color: #293d50 !important;
  }
  .ml-site-header .ml-main-nav .main-menu .sub-menu li a {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  .ml-site-header .ml-main-nav .main-menu > li:hover > a,
  .ml-site-header .ml-main-nav .main-menu > li.active > a { background: #f2f7fc !important; }
  .ml-site-header .ml-main-nav .main-menu > li.ml-pwa-mobile-only { display: list-item !important; }
  .ml-site-header .ml-main-nav .main-menu > li.ml-pwa-join a {
    margin-top: 6px !important;
    background: #fff1e7 !important;
    color: #aa4b0c !important;
  }
  .ml-site-header .ml-main-nav .main-menu > li.ml-pwa-exit {
    margin-top: 8px !important;
    padding-top: 7px !important;
    border-top: 1px solid #e6ecf1 !important;
  }
  .ml-site-header .ml-main-nav .main-menu > li.ml-pwa-exit a {
    color: #697c8b !important;
    font-size: 12px !important;
  }
  /* Preview indicator is available in More; don't let a debug banner dominate the app. */
  .ml-pwa-preview-banner { display: none !important; }
}
@media (max-width: 360px) {
  .ml-site-header .ml-header-row { padding-right: 48px !important; }
  .ml-site-header .ml-header-brand img { max-width: min(34vw, 128px) !important; }
  .ml-site-header .ml-header-btn { padding: 0 8px !important; font-size: 11px !important; }
}
@media print {
  .ml-site-header .ml-nav-shell { position: static !important; }
}

/* Printing should never retain the fixed app chrome or its mobile spacer. */
@media print {
  .ml-site-header, .ml-site-header.header-close, .ml-site-header.menu-fixed { position: static !important; transform:none !important; }
  body .main-light-version { padding-top: 0 !important; }
}