/* Acepeak KYC — single-form onboarding, matching Meratalk's straight-through
   flow. Colors are UNCHANGED from the previous implementation (verified
   against acepeak.com): red #dc2626 used sparingly as the accent,
   black/neutral for everything else, serif headings. */
:root{
  --ap-red:#dc2626; --ap-red-2:#ef4444; --ap-red-dark:#b91c1c; --ap-red-light:#fef2f2;
  --navy:#171717; --ink:#262626; --muted:#71717a; --line:#e4e4e7; --card:#ffffff;
  --bg:#ffffff; --input:#fafafa; --danger:#dc2626; --radius:12px;
  --shadow:0 1px 2px rgba(23,23,23,.03),0 8px 20px -10px rgba(23,23,23,.08);
  --ring:rgba(220,38,38,.14);
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', ui-serif, serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased}

/* ==================================================== HEADER (unchanged) ==== */
.ap-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.ap-header-top{max-width:1240px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;gap:28px}
.ap-logo-lockup{display:flex;align-items:center;gap:9px;flex:none}
.ap-logo-icon{height:30px;width:auto;display:block}
.ap-logo-word{height:22px;width:auto;display:block}
/* Fallback when the brand supplies one combined lockup instead of the split
   icon + wordmark pair. The uploaded Acepeak mark is stacked (symbol above
   the word), so it needs more height than either half to stay legible. */
.ap-logo-single{height:46px;width:auto;display:block}
.ap-heading{flex:1;min-width:0}
.ap-page-title{margin:0;font-family:var(--font-serif);font-size:26px;font-weight:400;letter-spacing:-.2px;
  color:var(--navy);line-height:1.2}
.ap-page-title .ap-accent{font-style:italic;color:var(--ap-red)}
.ap-page-sub{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.ap-security{flex:none;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ap-security-icon{font-size:13px}

/* ==================================================== MAIN / FORM ==== */
.ap-main{background:#fafafa}
.ap-main-inner{max-width:1000px;width:92%;margin:0 auto;padding:32px 0 8px}
.ap-card{background:transparent}

/* ---- server-side validation banner ---- */
.ap-alert{max-width:1000px;width:92%;margin:20px auto 0;background:var(--ap-red-light);
  border:1px solid #fecaca;color:var(--ap-red-dark);border-radius:8px;padding:12px 16px;
  font-size:13.5px;font-weight:600}

/* ---- stepper + progress bar (joined into one rounded card) ---- */
.kyc-stepper{display:flex;overflow-x:auto;padding:26px 32px 8px;gap:0;scrollbar-width:none;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0}
.kyc-stepper[hidden]{display:none}
.kyc-stepper::-webkit-scrollbar{display:none}
.kyc-step{flex:1 0 auto;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;font-family:inherit;position:relative;padding:0 0 12px;outline:none}
.kyc-step:not(:first-child)::before{content:'';position:absolute;top:23px;left:-50%;width:100%;height:1px;background:var(--line);z-index:0}
.kyc-step.is-done:not(:first-child)::before,.kyc-step.is-active:not(:first-child)::before{background:var(--ap-red)}
.kyc-step-dot{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:#fff;
  border:1.5px solid var(--line);display:grid;place-items:center;color:#a3a3a8;transition:.15s}
.kyc-step.is-done .kyc-step-dot{background:var(--ap-red);border-color:var(--ap-red);color:#fff}
.kyc-step.is-active .kyc-step-dot{background:var(--ap-red);border-color:var(--ap-red);color:#fff;
  box-shadow:0 0 0 5px var(--ring)}
.kyc-step-icon{width:18px;height:18px}
.kyc-step-icon svg{width:100%;height:100%}
.kyc-step-num{display:none}
.kyc-step-label{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.kyc-step.is-active .kyc-step-label{color:var(--ap-red-dark);font-weight:700}
.kyc-step.is-done .kyc-step-label{color:var(--ink)}

.kyc-progress{display:flex;align-items:center;gap:16px;padding:6px 32px 26px;
  background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;
  box-shadow:var(--shadow);margin-bottom:24px}
.kyc-progress[hidden]{display:none}
.kyc-progress-track{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.kyc-progress-fill{height:100%;background:var(--ap-red);transition:width .3s;border-radius:99px}
.kyc-progress small{color:var(--muted);font-size:13px;white-space:nowrap;font-weight:600}

@media (max-width:640px){ .kyc-step-label{display:none} }

.kyc-form{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden}
.kyc-form[hidden]{display:none}
.kyc-panel{display:none;padding:28px 30px 30px}
.kyc-panel.is-active{display:block}
.kyc-panel-head{padding:0 0 20px}
.kyc-kicker{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ap-red-dark);
  background:var(--ap-red-light);border:1px solid #fecaca;padding:5px 12px;border-radius:999px;margin-bottom:16px}
.kyc-title-row{display:flex;align-items:center;gap:12px}
.kyc-title-icon{width:38px;height:38px;border-radius:9px;background:var(--ap-red-light);color:var(--ap-red);
  display:grid;place-items:center;padding:9px;flex:none}
.kyc-title-icon svg{width:100%;height:100%}
.kyc-panel-head h2{margin:0;font-family:var(--font-serif);font-size:23px;font-weight:400;color:var(--navy);line-height:1.25}
.kyc-panel-head p{margin:6px 0 0 50px;color:var(--muted);font-size:14px}

.kyc-group{margin-bottom:6px}
.kyc-subhead{grid-column:1/-1;font-family:var(--font-serif);font-size:15px;font-weight:400;
  color:var(--navy);margin:20px 0 14px;padding-top:16px;border-top:1px solid var(--line)}
.kyc-group:first-child .kyc-subhead{border-top:0;padding-top:0;margin-top:0}
.kyc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.kyc-checkbox-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}
@media (max-width:640px){.kyc-grid,.kyc-checkbox-grid{grid-template-columns:1fr}}

.kyc-field{display:flex;flex-direction:column}
.kyc-field-full{grid-column:1/-1}
.kyc-lbl{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:7px}
.kyc-req{color:var(--danger);font-style:normal}
.kyc-control{height:44px;padding:0 13px;border-radius:8px;border:1px solid var(--line);font-size:14.5px;
  color:var(--navy);background:var(--input);font-family:inherit;transition:border-color .15s,box-shadow .15s}
.kyc-control:focus{outline:none;border-color:var(--ap-red);background:#fff;box-shadow:0 0 0 3px var(--ring)}
textarea.kyc-control{height:auto;padding:11px 13px;resize:vertical;min-height:60px;line-height:1.5}
.kyc-help{margin:7px 0 0;font-size:12.5px;color:var(--muted)}
.kyc-err{margin:6px 0 0;font-size:12px;color:var(--danger);font-weight:600;min-height:0}
.kyc-field.has-error .kyc-control{border-color:var(--danger)}

.kyc-check-line{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;cursor:pointer;padding-top:6px;color:var(--ink)}
.kyc-check-line input{width:16px;height:16px;accent-color:var(--navy)}
.kyc-radio-row{display:flex;gap:8px}
.kyc-pill{display:flex;align-items:center;gap:6px;padding:8px 15px;border-radius:7px;border:1px solid var(--line);
  font-size:13px;font-weight:600;cursor:pointer;background:var(--input)}
.kyc-pill input{accent-color:var(--ap-red)}
.kyc-pill:has(input:checked){border-color:var(--navy);background:var(--navy);color:#fff}

.kyc-upload-input{display:none}
.kyc-upload{border:1.5px dashed var(--line);border-radius:9px;padding:14px;display:flex;align-items:center;gap:12px;
  cursor:pointer;background:var(--input);transition:border-color .15s,background .15s}
.kyc-upload[hidden]{display:none}
.kyc-upload:hover,.kyc-upload.is-drag{border-color:var(--ap-red);background:var(--ap-red-light)}
.kyc-upload-icon{width:32px;height:32px;border-radius:8px;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.kyc-upload-text{display:flex;flex-direction:column;gap:2px}
.kyc-upload-text strong{font-size:13px;font-weight:600}
.kyc-upload-text span{font-size:11.5px;color:var(--muted)}
.kyc-upload-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;background:#fff}
.kyc-upload-chip[hidden]{display:none}
.kyc-upload-chip-icon{width:22px;height:22px;border-radius:6px;background:var(--ap-red);color:#fff;
  display:grid;place-items:center;font-size:11px;flex:none}
.kyc-upload-chip-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kyc-upload-chip-size{font-size:11.5px;color:var(--muted)}
.kyc-upload-chip-remove{border:0;background:#f4f4f5;color:#6a7180;width:22px;height:22px;border-radius:6px;
  cursor:pointer;font-size:11px}

.kyc-cert-card{background:var(--navy);border:0;border-radius:9px;padding:20px 22px;margin-bottom:0}
.kyc-cert-intro{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--ap-red-2)}
.kyc-cert-list{display:flex;flex-direction:column;gap:9px}
.kyc-cert-list .kyc-check-line{padding:11px 13px;background:#262626;border:1px solid #333;border-radius:8px;color:#f4f4f5}
.kyc-cert-list .kyc-check-line input{accent-color:var(--ap-red)}

.kyc-sigwrap{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
.kyc-sigpad{width:100%;height:150px;border:1.5px dashed var(--line);border-radius:9px;background:var(--input);touch-action:none;cursor:crosshair}
.kyc-sigbar{display:flex;align-items:center;justify-content:space-between}
.kyc-btn-ghost{border:0;background:none;color:var(--ap-red-dark);font-weight:600;font-size:12px;cursor:pointer}

.kyc-dl-note{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ap-red-light);border:1px solid #fecaca;border-radius:8px;padding:12px 15px;font-size:12.5px;margin-bottom:4px}
.kyc-dl-link{color:var(--ap-red-dark);font-weight:600;text-decoration:none;white-space:nowrap}
.kyc-dl-link:hover{text-decoration:underline}

/* ---- single final action footer (only one; never inside the carousel) ---- */
.kyc-actionbar{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  width:100%;margin:24px auto 0}
.kyc-actionbar-inner{padding:0 32px;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kyc-trust{display:flex;align-items:center;gap:12px}
.kyc-trust-icon{width:32px;height:32px;border-radius:50%;background:var(--input);color:var(--navy);
  display:grid;place-items:center;font-size:13px;flex:none}
.kyc-trust-text{display:flex;flex-direction:column;line-height:1.3}
.kyc-trust-text strong{font-size:13.5px;font-weight:600;color:var(--navy)}
.kyc-trust-text span{font-size:12px;color:var(--muted)}
.kyc-actionbar-buttons{display:flex;align-items:center;gap:12px;position:relative}
.kyc-saved{position:absolute;top:-22px;right:0;opacity:0;color:var(--ap-red-dark);font-weight:600;font-size:12px;transition:opacity .3s;white-space:nowrap}
.kyc-saved.is-visible{opacity:1}
.kyc-btn{min-width:180px;height:44px;padding:0 20px;border-radius:8px;border:0;background:var(--ap-red);
  color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s}
.kyc-btn:hover{background:var(--ap-red-dark)}
.kyc-btn-secondary{min-width:120px;background:#fff;color:var(--navy);border:1px solid var(--line)}
.kyc-btn-secondary:hover{background:var(--input)}

.kyc-success{padding:56px 30px;text-align:center;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px}
.kyc-success-icon{width:56px;height:56px;border-radius:50%;background:var(--ap-red);
  color:#fff;font-size:24px;display:grid;place-items:center;margin:0 auto 18px}
.kyc-success h2{margin:0 0 8px;font-family:var(--font-serif);font-size:22px;font-weight:400;color:var(--navy)}
.kyc-success p{margin:0;color:var(--muted);font-size:14.5px}
.kyc-success-note{margin-top:10px !important;font-size:12px;opacity:.7}

/* ==================================================== RESPONSIVE ==== */
@media (max-width:760px){
  .ap-header-top{padding:16px 18px;flex-wrap:wrap;gap:12px}
  .ap-security{display:none}
  .ap-main-inner{padding:20px 18px 8px}
  .ap-page-title{font-size:21px}
  .kyc-panel{padding:20px 18px 22px}
  .kyc-panel-head p{margin-left:0}
  .kyc-actionbar{max-width:none}
  .kyc-btn,.kyc-btn-secondary{min-width:0;flex:1}
}