/* ============================================================
   Snapkey SMMS — Enquiry Flow
   Shared stylesheet for index.html, step1.html, step2.html, step3.html
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-2:#F7F8FA;
  --text:#111111;
  --text-2:#6B7280;
  --border:#E5E7EB;
  --yellow:#FFD400;
  --yellow-hover:#F0C700;
  --yellow-soft:#FFFBE6;
  --success:#22C55E;
  --success-soft:#ECFDF5;
  --danger:#EF4444;
  --btn:#111111;
  --btn-hover:#262626;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow-sm:0 2px 6px rgba(17,17,17,.05);
  --shadow-md:0 8px 24px rgba(17,17,17,.07);
  --shadow-lg:0 24px 60px rgba(17,17,17,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg-2);
  color:var(--text);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--text);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ===== Page shell — the fix for the sticky CTA =====
   Every page is a single flex column the height of the viewport.
   The footer is a normal flex child pinned with `sticky`, so it
   never overlaps content, never needs bottom-padding hacks, and
   behaves identically on mobile and desktop. */
.page{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
}
@media(min-width:560px){
  body{padding:32px 16px;}
  .page{
    min-height:calc(100vh - 64px);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
  }
}

/* ===== Splash / Loader (welcome page only) ===== */
#splash{
  position:fixed;inset:0;background:#fff;z-index:200;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:opacity .5s ease;
}
#splash.hide{opacity:0;pointer-events:none;}
.splash-logo{width:84px;height:84px;border-radius:20px;box-shadow:0 12px 30px rgba(255,212,0,.35);animation:pop .6s cubic-bezier(.2,.9,.3,1.2) both;}
.splash-name{font-weight:800;font-size:26px;letter-spacing:-.5px;opacity:0;animation:fadeUp .5s ease .3s forwards;}
.splash-name sup{font-size:12px;color:var(--text-2);font-weight:600;}
.splash-dots{display:flex;gap:6px;opacity:0;animation:fadeUp .4s ease .5s forwards;}
.splash-dots span{width:7px;height:7px;border-radius:50%;background:var(--yellow);animation:bounce 1s infinite ease-in-out;}
.splash-dots span:nth-child(2){animation-delay:.15s;}
.splash-dots span:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-7px);opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ===== Top header ===== */
/* ===== Top header ===== */
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 8px;
  /* -- NEW: Sticky Header -- */
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 50;
}
.topbar .menu,.topbar .call{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:18px;}
.topbar .menu{color:var(--text);}
.topbar .call{background:var(--yellow);color:var(--text);box-shadow:0 6px 16px rgba(255,212,0,.4);transition:transform .2s,background .2s;}
.topbar .call:hover{background:var(--yellow-hover);transform:scale(1.05);}
.brand{display:flex;flex-direction:column;align-items:center;line-height:1;}
.brand .name{font-weight:800;font-size:21px;letter-spacing:-.4px;}
.brand .name sup{font-size:10px;color:var(--text-2);font-weight:600;}
.brand .sub{font-size:11px;font-weight:600;color:#C9A300;letter-spacing:2px;margin-top:2px;}

/* ===== Progress bar ===== */
.progress-wrap {
  flex: 0 0 auto;
  padding: 14px 22px 14px; /* Added bottom padding for spacing */
  /* -- NEW: Sticky Status Bar -- */
  position: sticky;
  top: 66px; /* Matches the exact height of the topbar */
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}
.progress{display:flex;gap:6px;}
.progress .seg{flex:1;height:4px;border-radius:99px;background:var(--border);overflow:hidden;}
.progress .seg.done,.progress .seg.active{background:var(--yellow);}
.step-label{font-size:12px;color:var(--text-2);margin-top:10px;font-weight:500;}


/* ===== Scrollable content area ===== */
.page-content{
  flex:1 1 auto;
  padding:18px 22px 28px;
  animation:slideIn .4s cubic-bezier(.2,.7,.2,1) both;
}
h1.title{font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.5px;margin:14px 0 8px;}
h1.title .hl{color:#B89200;}
.subtitle{color:var(--text-2);font-size:14.5px;margin:0 0 22px;}

/* ===== Inputs ===== */
.field{margin-bottom:18px;}
.field label.lbl{display:block;font-weight:600;font-size:13.5px;margin-bottom:8px;color:var(--text);}
.field label.lbl .req{color:var(--danger);margin-left:2px;}
.field label.lbl .opt{color:var(--text-2);font-weight:500;}
.input-wrap{
  position:relative;display:flex;align-items:center;
  border:1.5px solid var(--border);background:#fff;
  border-radius:14px;height:56px;padding:0 16px;
  transition:border-color .2s, box-shadow .2s;
}
.input-wrap input,.input-wrap select,.input-wrap textarea{flex:1;border:none;outline:none;background:transparent;height:100%;padding:0;font-size:15px;color:var(--text);}
.input-wrap input::placeholder,.input-wrap textarea::placeholder{color:#9CA3AF;}
.input-wrap .ic{color:#9CA3AF;font-size:18px;margin-left:10px;transition:color .2s;}
.input-wrap:focus-within{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,212,0,.2);}
.input-wrap:focus-within .ic{color:var(--text);}
.input-wrap.error{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.12);}
.err-msg{display:none;color:var(--danger);font-size:12.5px;margin-top:6px;font-weight:500;}
.err-msg.show{display:flex;align-items:center;gap:6px;animation:fadeUp .25s ease;}

.input-wrap.textarea{height:auto;padding:14px 16px;align-items:flex-start;}
.input-wrap.textarea textarea{min-height:110px;resize:vertical;line-height:1.5;}
.input-wrap.textarea .ic{margin-top:2px;}

.select-wrap{position:relative;}
.select-wrap select{appearance:none;-webkit-appearance:none;background:transparent;width:100%;}
.select-wrap::after{
  content:"\F282";font-family:"bootstrap-icons";
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:#9CA3AF;pointer-events:none;font-size:14px;
}

/* ===== Selection cards (Step 2 — I am a) ===== */
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px;}
@media(min-width:420px){.cards-grid{grid-template-columns:repeat(3,1fr);}}
.sel-card{
  position:relative;border:1.5px solid var(--border);background:#fff;
  border-radius:var(--radius-md);padding:16px 12px 14px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  min-height:118px;transition:transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.sel-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.sel-card .radio{position:absolute;top:10px;left:10px;width:18px;height:18px;border:1.5px solid var(--border);border-radius:50%;display:grid;place-items:center;transition:all .2s;}
.sel-card .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--yellow);transform:scale(0);transition:transform .2s;}
.sel-card .ic{font-size:23px;color:var(--text);transition:color .2s;margin-top:6px;}
.sel-card .lab{font-weight:600;font-size:12.5px;line-height:1.25;color:var(--text);}
.sel-card.selected{border-color:var(--yellow);background:var(--yellow-soft);box-shadow:0 6px 18px rgba(255,212,0,.2);}
.sel-card.selected .ic{color:#8A6D00;}
.sel-card.selected .radio{border-color:var(--yellow);}
.sel-card.selected .radio::after{transform:scale(1);}

/* ===== Pills (Step 2 — number of sites) ===== */
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.pill{border:1.5px solid var(--border);background:#fff;border-radius:var(--radius-sm);height:52px;font-weight:600;font-size:14px;color:var(--text);transition:all .2s;}
.pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.pill.selected{background:var(--yellow-soft);border-color:var(--yellow);}

/* ===== Solution rows (Step 3) ===== */
.solutions{display:flex;flex-direction:column;gap:12px;}
.sol{
  display:flex;align-items:center;gap:14px;
  border:1.5px solid var(--border);background:#fff;border-radius:var(--radius-md);
  padding:14px 16px;text-align:left;width:100%;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;
}
.sol:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.sol .check{width:22px;height:22px;border:1.5px solid var(--border);border-radius:6px;display:grid;place-items:center;color:#fff;font-size:13px;transition:all .2s;flex-shrink:0;}
.sol .ic{font-size:20px;color:var(--text);width:28px;text-align:center;flex-shrink:0;}
.sol .lab{font-weight:600;font-size:14px;color:var(--text);flex:1;line-height:1.3;}
.sol.selected{border-color:var(--yellow);background:var(--yellow-soft);}
.sol.selected .check{background:var(--yellow);border-color:var(--yellow);color:var(--text);}

/* ===== Sticky footer / actions =====
   Plain flex child + `position:sticky; bottom:0`. No fixed/absolute
   hybrid, no manual bottom-padding spacers needed on .page-content. */
.page-footer{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
  padding:14px 22px calc(16px + env(safe-area-inset-bottom));
}
.actions-row{display:flex;gap:10px;align-items:center;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;border-radius:14px;font-weight:600;font-size:15px;
  transition:all .2s;position:relative;overflow:hidden;
}
.btn-primary{background:var(--btn);color:#fff;flex:1;}
.btn-primary:hover:not(:disabled){background:var(--btn-hover);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.18);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;}
.btn-ghost{background:#F3F4F6;color:var(--text);padding:0 22px;}
.btn-ghost:hover{background:#E9EAEC;}
.foot-note{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text-2);font-size:12px;margin-top:10px;}

.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:ripple .6s linear;pointer-events:none;}
.btn-ghost .ripple{background:rgba(17,17,17,.08);}
@keyframes ripple{to{transform:scale(4);opacity:0;}}

/* ===== Welcome screen ===== */
.hero{position:relative;height:42vh;min-height:280px;max-height:400px;overflow:hidden;background:#111;flex:0 0 auto;}
.hero img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.4) 100%);}
.hero-badge{
  position:absolute;top:18px;left:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-radius:99px;padding:6px 12px 6px 8px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px;
  box-shadow:var(--shadow-md);z-index:2;
}
.hero-badge img{width:22px;height:22px;border-radius:6px;}
.hero-badge sup{font-size:9px;color:var(--text-2);}
.welcome-body{flex:1 1 auto;padding:26px 22px 0;display:flex;flex-direction:column;}
.welcome h1{font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1.22;margin:0 0 12px;animation:fadeUp .6s ease both;}
.welcome h1 .hl{color:#B89200;}
.welcome p.lead{color:var(--text-2);font-size:14.5px;margin:0 0 22px;animation:fadeUp .6s ease .1s both;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;animation:fadeUp .6s ease .2s both;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:500;box-shadow:var(--shadow-sm);color:var(--text);}
.chip i{color:#B89200;font-size:13px;}
.welcome-foot{display:flex;align-items:flex-start;gap:8px;color:var(--text-2);font-size:12px;line-height:1.45;margin-top:14px;}
.welcome-foot i{color:var(--text);margin-top:2px;}

/* ===== Success screen (shown inline on step3) ===== */
.success{padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;}
.check-wrap{width:108px;height:108px;border-radius:50%;background:var(--success-soft);display:grid;place-items:center;margin-bottom:22px;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both;}
.check-circle{width:76px;height:76px;border-radius:50%;background:var(--success);display:grid;place-items:center;color:#fff;font-size:34px;box-shadow:0 12px 28px rgba(34,197,94,.35);animation:pop .5s cubic-bezier(.2,.9,.3,1.4) .15s both;}
.success h2{font-size:26px;font-weight:700;margin:0 0 10px;letter-spacing:-.4px;}
.success p{color:var(--text-2);font-size:14.5px;margin:0 0 26px;max-width:340px;}
.success-actions{display:flex;gap:10px;width:100%;max-width:340px;}

/* ===== Submit error banner (Step 3) ===== */
.submit-error{
  display:none;align-items:flex-start;gap:8px;
  background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;
  border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:16px;
}
.submit-error.show{display:flex;animation:fadeUp .25s ease;}
.submit-error i{margin-top:1px;}

.hidden{display:none !important;}