/* =====================================================================
   SocietyConnect — Mobile Form Enhancement (drop-in)
   Scope: applies ONLY on mobile widths, ONLY inside the master form
   (the JS adds .scm-on to <body> and .scm-form to the form root).
   Desktop is completely untouched.
   ===================================================================== */

@media (max-width: 760px){

  /* ---- 1. Safe field polish (applies even if the wizard can't init) ---- */
  body.scm-on .scm-form input:not([type=checkbox]):not([type=radio]),
  body.scm-on .scm-form select,
  body.scm-on .scm-form textarea{
    font-size: 16px !important;          /* prevents iOS auto-zoom on focus */
    width: 100%;
    padding: 12px 12px;
    border-radius: 11px;
    box-sizing: border-box;
    appearance: none; -webkit-appearance: none;
  }
  body.scm-on .scm-form input:focus,
  body.scm-on .scm-form select:focus,
  body.scm-on .scm-form textarea:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(224,102,43,.18);
  }
  body.scm-on .scm-form label{ font-size: 13px; }
  /* stack any 2/3-column rows the form may use */
  body.scm-on .scm-form .row > [class*="col"]{ width:100% !important; flex:0 0 100% !important; max-width:100% !important; }

  /* ---- 2. Wizard chrome (added by the JS) ---- */
  :root{
    --scm-navy:#0b2545; --scm-orange:#e0662b; --scm-orange-d:#c4551f;
    --scm-line:#e2e7ef; --scm-muted:#6b7688; --scm-ok:#1f9d55;
  }

  .scm-progress{position:sticky;top:0;z-index:1000;background:var(--scm-navy);
    padding:10px 14px 9px;display:flex;flex-direction:column;gap:8px;}
  .scm-segs{display:flex;gap:5px;}
  .scm-seg{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.20);overflow:hidden;}
  .scm-seg > i{display:block;height:100%;width:0;background:var(--scm-orange);transition:width .35s;}
  .scm-seg.done > i{width:100%;} .scm-seg.active > i{width:50%;}
  .scm-meta{display:flex;justify-content:space-between;align-items:baseline;color:#fff;}
  .scm-meta .t{font-size:13px;font-weight:700;}
  .scm-meta .c{font-size:11px;opacity:.75;}

  /* each detected section becomes a step */
  .scm-step{display:none !important;}
  .scm-step.scm-active{display:block !important;animation:scmSlide .3s ease;}
  @keyframes scmSlide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

  /* bottom sticky nav */
  .scm-nav{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#fff;
    border-top:1px solid var(--scm-line);display:flex;gap:10px;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(11,37,69,.08);}
  .scm-btn{flex:1;border:0;border-radius:12px;padding:15px;font-size:15px;font-weight:700;font-family:inherit;}
  .scm-btn:active{transform:scale(.98);}
  .scm-back{background:#eef1f6;color:var(--scm-navy);flex:0 0 36%;}
  .scm-next{background:var(--scm-orange);color:#fff;box-shadow:0 4px 14px rgba(224,102,43,.35);}
  .scm-next.scm-generate{background:var(--scm-ok);box-shadow:none;}
  /* keep content clear of the fixed nav */
  body.scm-wizard{padding-bottom:92px !important;}

  /* ---- 3. Member pager (section B) ---- */
  .scm-mbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px;}
  .scm-mcount{font-size:12px;font-weight:700;color:var(--scm-orange-d);
    background:rgba(224,102,43,.12);padding:4px 11px;border-radius:999px;}
  .scm-mdots{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;}
  .scm-mdot{width:26px;height:26px;border-radius:8px;border:1px solid var(--scm-line);
    background:#f7f9fc;color:var(--scm-muted);font-size:11px;font-weight:700;padding:0;font-family:inherit;}
  .scm-mdot.on{background:var(--scm-navy);color:#fff;border-color:var(--scm-navy);}
  .scm-mdot.filled{border-color:var(--scm-ok);color:var(--scm-ok);}
  .scm-mdot.on.filled{background:var(--scm-ok);border-color:var(--scm-ok);color:#fff;}
  .scm-mhide{display:none !important;}
  .scm-mblock.scm-mshow{animation:scmSlide .28s ease;}
  .scm-addnext{width:100%;margin-top:10px;border:1.5px dashed var(--scm-orange);
    color:var(--scm-orange-d);background:rgba(224,102,43,.05);
    padding:13px;border-radius:12px;font-size:14px;font-weight:700;font-family:inherit;}

  /* ---- 4. Neutralise the form's own sticky footer so it doesn't overlap the nav ---- */
  body.scm-wizard .scm-destickied{ position: static !important; box-shadow: none !important; }

  /* ---- 5. Small, two-line page heading on mobile ---- */
  body.scm-wizard .scm-h1{ font-size: 16px !important; line-height: 1.3 !important; font-weight: 800 !important; color: #0b2545 !important; background: rgba(224,102,43,0.15) !important; text-align: center !important; text-wrap: balance; display: inline-block !important; padding: 6px 14px !important; border-radius: 10px !important; margin: 6px 0 !important; }
  body.scm-wizard .masthead{ flex-direction: column !important; align-items: center !important; }
  body.scm-wizard .masthead p{ align-self: stretch !important; text-align: justify !important; }

  /* ---- 6. Stack member address fields one per line ---- */
  body.scm-wizard .member .addr-grid{ grid-template-columns: 1fr !important; }
  body.scm-wizard .sc-office-addr{ grid-template-columns: 1fr !important; }
}

/* Desktop / tablet: make sure nothing leaks */
@media (min-width: 761px){
  .scm-progress,.scm-nav,.scm-mbar,.scm-mdots,.scm-addnext{display:none !important;}
  .scm-step{display:block !important;}
}