/* mobi/mobile.css — safe overrides, loaded site-wide */

/* Global type scales */
html {
  font-size: 16px;
}
body {
  font-size: clamp(14px, 2.5vw, 16px);
  -webkit-tap-highlight-color: transparent;
}

/* Cards: 1 column under 768px (dashboard cards helper) */
@media (max-width: 768px) {
  .cards-grid,
  .cards,
  .grid-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sidebar {
    display: none !important;
  }
}

/* ========================================================== */
/* Main mobile overrides: phones & small tablets (<= 768px)   */
/* ========================================================== */
@media (max-width: 768px) {

  /* Kill the desktop logo nudge base value (we'll override explicitly) */
  :root {
    --logo-nudge: 0px !important;
  }

  /* Global: clamp width and remove horizontal scroll */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 🔥 Default: centre ALL headings on mobile */
  h1,
  h2,
  h3 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 👉 Legal pages (terms, privacy, risk) — left-align headings again */
  .top-actions + h1,
  .top-actions ~ .card h1,
  .top-actions ~ .card h2,
  .top-actions ~ .card h3 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 👉 Gate + main app use .title for their “local” headings:
        - Gate:  "Enter monthly access code"
        - Main:  "Price" / "Projection"
     Force those to be centred on mobile. */
  .title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------------- Logged-in app header (index.html) ---------------- */

  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 12px !important;
    margin: 0 auto !important;
    max-width: 640px !important;
    width: 100% !important;
  }

  .brand-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  .brand-logo svg {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 48px !important;
    width: auto !important;
    max-width: 80vw !important;
  }

  header .controls {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  header .controls > * {
    flex: 1 1 120px;
    max-width: 260px;
  }

  main {
    padding: 12px 10px 18px !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* ---------------- Gate page (gate.html) ---------------- */

  /* Gate uses body > .card as its main container */
  body > .card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 12px 20px !important;
    margin: 24px auto !important;
  }

  body > .card .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 18px !important;
  }

  body > .card .brand .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  body > .card .brand svg {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 56px !important;
    width: auto !important;
    max-width: 90vw !important;
  }

  /* ---------------- Public pages using .wrap ---------------- */
  /* register.html, checkout.html, terms, privacy, risk, success, cancel */

  body > .wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    padding: 0 10px !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  body > .wrap .card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 14px !important;
  }

  /* Ensure all content inside .wrap cannot overflow horizontally */
  body > .wrap *,
  body > .wrap .card * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* REGISTER & CHECKOUT: force single column for lists & grids */
  .wrap .plans,
  .wrap .benefits,
  .wrap .tg-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .cta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .secure {
    margin-top: 10px !important;
  }

  /* FINAL: hard-center + nudge gate & logged-in logos on mobile */

  /* Gate page logo (FX Forecast at top of gate) */
  body > .card .brand .logo {
    transform: translateX(30px) !important; /* nudge right – adjust if needed */
  }

  /* Logged-in header logo (FX Forecast at top after login) */
  header .brand-logo {
    transform: translateX(36px) !important; /* nudge right – adjust if needed */
  }
}

/* Extra-tight layout for narrower phones (<= 430px wide) */
@media (max-width: 430px) {

  body > .wrap {
    padding: 0 6px !important;
    margin: 12px auto !important;
  }

  body > .wrap .card {
    padding: 16px 10px !important;
  }

  body > .wrap h1 {
    font-size: 22px !important;
  }

  body > .wrap h2 {
    font-size: 18px !important;
  }

  /* Gate logo slightly smaller on very narrow screens */
  body > .card .brand svg {
    height: 50px !important;
  }
}

/* Very small screens: tweak chart height a bit more */
@media (max-width: 600px) {
  .chart-wrap,
  #chart,
  canvas.chart,
  .chartWrap,
  #priceChart,
  #projChart {
    height: calc(100svh - 180px) !important;
  }
}

/* Center the Telegram CTA + QR block (used on register) */
#register .cta-wrapper,
.cta-wrapper,
#qr-block,
.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}

#register .cta-wrapper button,
.cta-primary {
  width: min(320px, 90%);
}

#register .qr,
.qr-img {
  max-width: 260px;
  width: 80%;
  height: auto;
  margin-top: 12px;
}

#register .qr-caption {
  margin-top: 6px;
  opacity: 0.8;
}

/* Prevent layout jank on iOS address-bar collapse */
:root {
  height: 100%;
}
body {
  min-height: 100dvh;
}