/* ============================================================
   cs-mobile.css — app-feel mobile layer for cRyPtO sMaRt
   cRyPi bottom-right + menu fixes + iOS hint. MOBILE ONLY (<=768px).
   Scoped under #cs-* ids; desktop is completely untouched.
   ============================================================ */
@media (max-width: 768px){

  /* cRyPi sits bottom-right (BMW style) on mobile — keep its launcher visible.
     No bottom tab bar. */
  #crypi-launch{ right:18px !important; bottom:18px !important; }
  #crypi-panel{ z-index:100001 !important; }

  /* iOS "add to home screen" hint */
  #cs-ios-hint{
    position:fixed; left:12px; right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:100002;
    background:#0d2659; color:#fff; border-radius:16px; padding:14px 16px;
    font-family:'Inter Tight',sans-serif; font-size:13.5px; line-height:1.45;
    box-shadow:0 20px 50px -18px rgba(0,0,0,.6); display:none;
    align-items:center; gap:12px;
  }
  #cs-ios-hint.cs-show{ display:flex; animation:cs-up .4s ease both; }
  #cs-ios-hint b{ color:#7fb6ff; }
  #cs-ios-hint .cs-x{ margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:50%;
    border:none; background:rgba(255,255,255,.14); color:#fff; font-size:15px; cursor:pointer; }
  @keyframes cs-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
}

/* never show the mobile layer on desktop */
@media (min-width: 769px){
  #cs-ios-hint{ display:none !important; }
}

/* ============================================================
   FIXES (live site bugs)
   ============================================================ */
@media (max-width: 980px){
  /* BUG: on over-hero pages the mobile menu links inherit white text
     on the white panel -> invisible/blank menu. The panel always has a
     white background, so force its links (and the Get Premium row) dark. */
  .nav .nav-mobile-panel .nav-link,
  .nav.over-hero .nav-mobile-panel .nav-link,
  .nav.over-hero:not(.scrolled) .nav-mobile-panel .nav-link{
    color:#1a1d23 !important;
  }
  .nav .nav-mobile-panel .nav-link:active{ color:#1c69d4 !important; }
  /* ROOT FIX: the theme panel uses top:64px;bottom:0 but its height was
     collapsing to the nav height (64px), clipping all links below it.
     Force a real full-viewport panel so every link has room and shows. */
  .nav .nav-mobile-panel{
    position:fixed !important;
    top:64px !important; left:0 !important; right:0 !important;
    height:calc(100dvh - 64px) !important; max-height:none !important;
    bottom:auto !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    padding-bottom:120px !important;   /* clears the bottom tab bar */
    background:#fff !important;
  }
  .nav.menu-open .nav-mobile-panel{
    opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important;
    z-index:99990 !important; visibility:visible !important;
  }
  .nav:not(.menu-open) .nav-mobile-panel{
    opacity:0 !important; pointer-events:none !important;
  }
}

/* ---- Store/product pages: working dropdown for the .snav burger
   (the original burger had no menu). ---- */
#cs-snav-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(82vw,340px); z-index:100005;
  background:#fff; box-shadow:-20px 0 60px -20px rgba(11,23,48,.5);
  transform:translateX(100%); transition:transform .36s cubic-bezier(.34,1.2,.64,1);
  display:flex; flex-direction:column; padding:max(16px,env(safe-area-inset-top)) 20px 20px;
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-y:auto; visibility:hidden;
}
#cs-snav-menu.cs-open{ transform:translateX(0); visibility:visible; }
#cs-snav-menu .cs-snav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#cs-snav-menu .cs-snav-head span{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9aa6b6; }
#cs-snav-menu .cs-snav-x{ width:34px; height:34px; border-radius:50%; border:none; background:#eef2f7; color:#0d2659; font-size:20px; cursor:pointer; }
#cs-snav-menu a{ display:block; padding:15px 0; font-size:17px; font-weight:500; color:#1a1d23 !important;
  text-decoration:none; border-bottom:1px solid #eef2f7; }
#cs-snav-menu a:active{ color:#1c69d4 !important; }
#cs-snav-menu .cs-snav-cta{ margin-top:18px; text-align:center; font-weight:700; color:#fff !important;
  background:linear-gradient(140deg,#1c69d4,#1659bd); border-radius:14px; border-bottom:none;
  box-shadow:0 12px 26px -12px rgba(28,105,212,.7); }

@media (min-width: 769px){
  #cs-snav-menu{ display:none !important; }
}