/* ============================================================
   MOBILE.CSS — Apple iOS & Android compliant
   ============================================================ */

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

/* ============================================================
   ≤ 768px — all mobile phones
   ============================================================ */
@media (max-width: 768px) {

  /* ── iOS: kill fixed background attachment ─────────────── */
  .page2-bg {
    background-attachment: scroll !important;
    padding: 1.5rem 0 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }

  /* ── Collapse all layout wrappers to zero ──────────────── */
  main,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* ── two-col: stack as a flex column, centred ──────────── */
  .two-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ── THE FOUR CONTAINERS — identical size & spacing ────── */
  /*
     left-col  = How it works
     right-col = Help needed  (form-card lives inside)
     .lozenge  = FAQ + Recent Feedback
     
     All get:
       • same width  : calc(100% - 2rem)  — 1rem breathing room each side
       • same max    : 480px
       • same margin : 1.25rem auto top & bottom → equal gap between blocks
       • same padding: 1.25rem inside
  */
  .left-col,
  .right-col,
  .lozenge {
    width: calc(100% - 2rem) !important;
    max-width: 480px !important;
    margin: 1.25rem auto !important;
    padding: 1.25rem !important;
    border-radius: 20px !important;
    float: none !important;
    display: block !important;
  }

  /* ── HELP NEEDED — green tint ─────────────────────────── */
  .right-col {
    background: rgba(8, 117, 32, 0.65) !important;
    border-color: rgba(9, 247, 69, 0.55) !important;
    box-shadow:
      0 0 18px rgba(8, 117, 32, 0.75),
      0 0 32px rgba(9, 247, 69, 0.45) !important;
  }

  /* right-col already has the frosted style from .frosted-box;
     form-card inside it must not add a second layer of box */
  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* ── HOW IT WORKS — single column ─────────────────────── */
  .steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  .how-card {
    width: 100% !important;
    padding: 1rem !important;
  }

  /* ── FAQ — single column ───────────────────────────────── */
  .faq-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  /* ── FEEDBACK — single column ──────────────────────────── */
  .feedback-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    padding: 0 !important;
  }

  .feedback-wrapper,
  .feedback-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── FORM: iOS zoom prevention (needs 16px minimum) ────── */
  input,
  select,
  textarea,
  input[type="file"] {
    font-size: 16px !important;
    width: 100% !important;
  }

  /* ── TAP: remove iOS grey flash + Android 300ms delay ──── */
  .how-card,
  .faq-box,
  .feedback-item,
  .btn-primary,
  .hero-btn,
  #floatingHelp {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* ── MOBILE SEND BUTTON — professional green style ─────── */
  .right-col {
    border: 1px solid rgba(15, 138, 61, 0.8) !important;
    box-shadow: 0 18px 38px rgba(8, 117, 32, 0.18) !important;
  }

  .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    background: #1fab3d !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 24px rgba(31, 171, 61, 0.25) !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }

  .btn-primary:hover,
  .btn-primary:focus {
    background: #17a03b !important;
  }

  .btn-primary:active {
    transform: translateY(1px) scale(0.992);
    box-shadow: 0 10px 18px rgba(15, 138, 61, 0.22) !important;
  }

  /* ── PRESS STATES ───────────────────────────────────────── */
  .how-card:active,
  .faq-box:active,
  .feedback-item:active {
    transform: scale(0.97);
    box-shadow: 0 0 14px rgba(0,0,0,0.2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  /* ── HERO ───────────────────────────────────────────────── */
  .hero-btn {
    font-size: 1.1rem !important;
    padding: 16px 32px !important;
  }

  /* ── FLOATING HELP ──────────────────────────────────────── */
  #floatingHelp {
    bottom: 16px !important;
    right: 16px !important;
    font-size: 0.9rem !important;
    padding: 10px 16px !important;
  }

  /* ── FOOTER ─────────────────────────────────────────────── */
  .site-footer {
    margin-top: 1.5rem !important;
  }
}