/* ============================================================
   ANTARJYOTI / GLISSA — MOBILE HEADER, DRAWER, FOOTER & CTA QA
   Production additive layer. Desktop layout remains unchanged.
   ============================================================ */
.mobileTopCta,.mobileNavBurger,.mobileNavOverlay{display:none}

@media (max-width:1024px){
  html{overflow-x:hidden}
  body{overflow-x:hidden}
  body.mobileNavOpen{overflow:hidden!important;touch-action:none}

  /* Compact, stable top bar on phone/tablet. */
  .nav,.site-header .nav{z-index:5000!important}
  .nav__in,.navin{
    width:100%!important;
    max-width:100%!important;
    min-height:72px!important;
    height:72px!important;
    padding:7px 14px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
  }
  .nav__in>.brand,.navin>.brand{
    min-width:0!important;
    flex:1 1 auto!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .nav__in>.brand img,.navin>.brand img,
  .nav__in .approvedBrandSiteLogo,.navin .approvedBrandLogo{
    width:116px!important;
    max-width:116px!important;
    height:56px!important;
    max-height:56px!important;
    object-fit:contain!important;
    object-position:left center!important;
    display:block!important;
  }

  /* Desktop navigation is moved into the drawer on narrow screens. */
  .nav__links,.navlinks,.readout,.nav__cta,.authNav.sharedAuthNav{display:none!important}
  /* Hide the legacy decorative hamburger span so only the functional drawer button remains. */
  .mobileMenu{display:none!important}

  /* GLISSA/Plans remains one-tap visible outside the hamburger. */
  .mobileTopCta{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-width:68px!important;
    height:40px!important;
    padding:0 13px!important;
    border-radius:999px!important;
    border:1px solid rgba(247,158,32,.58)!important;
    background:linear-gradient(110deg,rgba(247,158,32,.16),rgba(242,103,38,.11))!important;
    color:#ffd58c!important;
    text-decoration:none!important;
    font:700 12px/1 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
    box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
    -webkit-text-fill-color:currentColor!important;
  }
  .mobileTopCta:active{transform:translateY(1px)}

  .nav__burger.mobileNavBurger,.mobileNavBurger{
    display:grid!important;
    place-items:center!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    background:rgba(255,255,255,.035)!important;
    color:#f7efe8!important;
    cursor:pointer!important;
  }
  .mobileNavBurger svg{width:22px!important;height:22px!important;display:block!important}

  /* Right-side mobile navigation drawer. */
  .mobileNavOverlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:8000!important;
    background:rgba(1,4,10,.68)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .24s ease,visibility .24s ease!important;
  }
  .mobileNavOverlay.isOpen{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .mobileNavSheet{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:min(88vw,370px)!important;
    height:100%!important;
    padding:max(18px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom))!important;
    overflow:auto!important;
    background:linear-gradient(165deg,rgba(10,14,23,.99),rgba(4,7,13,.995))!important;
    border-left:1px solid rgba(255,255,255,.1)!important;
    box-shadow:-24px 0 70px rgba(0,0,0,.48)!important;
    transform:translateX(102%)!important;
    transition:transform .3s cubic-bezier(.2,.9,.25,1)!important;
  }
  .mobileNavOverlay.isOpen .mobileNavSheet{transform:translateX(0)!important}
  .mobileNavHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:2px 2px 18px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
  .mobileNavHead strong{font:800 14px/1.2 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;color:#fff!important;letter-spacing:.02em!important}
  .mobileNavClose{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.04)!important;color:#fff!important;font-size:24px!important;line-height:1!important;cursor:pointer!important}
  .mobileNavLinks{display:grid!important;gap:4px!important;padding:15px 0!important}
  .mobileNavLinks a,.mobileNavLinks button{
    width:100%!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:11px 12px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#eee8df!important;
    -webkit-text-fill-color:currentColor!important;
    text-decoration:none!important;
    text-align:left!important;
    font:650 15px/1.25 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    cursor:pointer!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .mobileNavLinks a::after{content:'›';color:#d99025;font-size:20px;line-height:1}
  .mobileNavLinks a[hidden],.mobileNavLinks button[hidden]{display:none!important}
  .mobileNavLinks .mobileAuthPrimary{
    margin-top:8px!important;
    border:1px solid rgba(247,158,32,.5)!important;
    border-radius:12px!important;
    background:linear-gradient(110deg,#ffb52b,#ee9000)!important;
    color:#160d04!important;
    -webkit-text-fill-color:#160d04!important;
    justify-content:center!important;
    font-weight:800!important;
  }
  .mobileNavLinks .mobileAuthSecondary{
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:12px!important;
    justify-content:center!important;
  }
  .mobileNavLinks .mobileAuthDanger{color:#ffc8bd!important;-webkit-text-fill-color:#ffc8bd!important}
  .mobileNavDivider{height:1px!important;background:rgba(255,255,255,.08)!important;margin:7px 0 11px!important}
  .mobileNavAccountLabel{padding:7px 12px 5px!important;color:#8e99aa!important;font:700 11px/1.2 'Inter',sans-serif!important;text-transform:uppercase!important;letter-spacing:.12em!important}

  /* Phone footer restructuring: no off-screen columns or detached branding. */
  .footer{padding:46px 0 24px!important}
  .footer__grid,.footerGrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 20px!important;
    align-items:start!important;
  }
  .footer__grid>div,.footerGrid>div{min-width:0!important;width:100%!important;text-align:left!important}
  .footer__grid>div:first-child,.footerGrid>div:first-child{grid-column:1/-1!important}
  .footer__grid>div:last-child,.footerGrid>div:last-child{grid-column:1/-1!important}
  .footer .brand,.footer .brand--footer,.footer .approvedBrandSite,.footer .footerBrand{
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    margin:0 0 12px!important;
    width:max-content!important;
    max-width:100%!important;
  }
  .footer .brand__logo,.footer .approvedBrandSiteLogo,.footer .approvedFooterLogo{
    width:112px!important;
    height:auto!important;
    max-height:72px!important;
    flex:0 0 auto!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .footer .bizinfo,.footerGrid p{font-size:13px!important;line-height:1.65!important;overflow-wrap:anywhere!important}
  .footer h4{margin:0 0 12px!important;font-size:12px!important;letter-spacing:.08em!important}
  .footer ul{gap:9px!important}
  .footer li a{font-size:13px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
  .footer__bar,.legalStrip{margin-top:28px!important;line-height:1.6!important}
  .social-links{justify-content:flex-start!important}

  .simple-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:22px 16px calc(22px + env(safe-area-inset-bottom))!important;
    text-align:left!important;
    font-size:12px!important;
    line-height:1.55!important;
  }
  .simple-footer span{min-width:0!important;overflow-wrap:anywhere!important}

  /* Mobile buttons must never lose their text through inherited gradient rules. */
  a.btn,button.btn,.legal-actions .btn,.hero__actions .btn,.heroActions .primary,
  .authSubmit,.authBtn,.planButton,.storeBtn,.premiumRestoreButton,.opt,.acc__head,.mobileTopCta{
    opacity:1!important;
    visibility:visible!important;
    text-indent:0!important;
    -webkit-text-fill-color:currentColor!important;
  }
  .btn--primary,.btn.primary,.legal-actions .btn--primary,.authSubmit{
    color:#160d04!important;
    -webkit-text-fill-color:#160d04!important;
  }
  .btn--ghost,.legal-actions .btn--ghost{
    color:#f3eee8!important;
    -webkit-text-fill-color:#f3eee8!important;
  }
  .legal-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .legal-actions .btn{width:100%!important;min-height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:normal!important}

  /* Keep auth usable and readable on short/narrow phones. */
  .authOverlay{padding:12px!important;align-items:flex-start!important;padding-top:max(16px,env(safe-area-inset-top))!important}
  .authModal{width:100%!important;max-width:440px!important;max-height:calc(100dvh - 28px)!important;overflow-y:auto!important;padding:20px 15px!important;border-radius:16px!important}
  .authBrand strong{font-size:21px!important}
  .authTabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  .authTab{font-size:11px!important;padding:10px 5px!important}
  .googleSignInHost{min-height:44px!important;overflow:visible!important}

  /* Dashboard phone flow. */
  .accountHero{padding-top:32px!important}
  .accountHero .wrap{padding:20px 16px 22px!important;border-radius:18px!important}
  .accountGrid{grid-template-columns:1fr!important}
  .row{grid-template-columns:1fr!important;gap:6px!important}
  .actionPanel .actions{grid-template-columns:1fr!important}
}

@media (max-width:430px){
  .nav__in,.navin{padding-inline:11px!important;gap:7px!important}
  .nav__in>.brand img,.navin>.brand img,.nav__in .approvedBrandSiteLogo,.navin .approvedBrandLogo{width:102px!important;max-width:102px!important;height:52px!important}
  .mobileTopCta{min-width:62px!important;height:38px!important;padding-inline:11px!important;font-size:11px!important}
  .nav__burger.mobileNavBurger,.mobileNavBurger{width:40px!important;height:40px!important;flex-basis:40px!important}
  .footer__grid,.footerGrid{grid-template-columns:1fr 1fr!important;gap:26px 16px!important}
  .footer .brand__logo,.footer .approvedBrandSiteLogo,.footer .approvedFooterLogo{width:104px!important}
  .authTabs{grid-template-columns:1fr!important}
  .authTab{font-size:13px!important}
}

@media (max-width:350px){
  .nav__in>.brand img,.navin>.brand img,.nav__in .approvedBrandSiteLogo,.navin .approvedBrandLogo{width:90px!important;max-width:90px!important}
  .mobileTopCta{min-width:58px!important;padding-inline:9px!important}
}