/* =====================================================================
   style.css — warm transfer submission form
   ===================================================================== */

:root{
  --bg:        #f1f3f7;
  --surface:   #ffffff;
  --line:      #e2e6ee;
  --line-soft: #eef1f6;
  --ink:       #16202e;
  --ink-2:     #55637a;
  --ink-3:     #8593a8;
  --accent:    #4f46e5;
  --good:      #0f7a4a;
  --good-bg:   #eefaf3;
  --good-line: #b7e2cb;
  --warn:      #92600a;
  --warn-bg:   #fffaeb;
  --warn-line: #f0d79a;
  --bad:       #b42318;
  --bad-bg:    #fef3f2;
  --bad-line:  #f5c2bd;
  --radius:    12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }

/* ---------- top bar ---------- */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:18px 0; margin-bottom:28px;
}
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand{ font-size:19px; font-weight:700; letter-spacing:-.2px; }
.brand-sub{ font-size:13px; color:var(--ink-3); margin-top:2px; }
.today{ text-align:right; }
.today-label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-3); }
.today-date{ font-size:13px; font-weight:600; color:var(--ink-2); }

/* ---------- steps ---------- */
.step{ margin-bottom:34px; }
.step-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.step-num{
  flex:0 0 30px; height:30px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.step-head h2{ margin:2px 0 2px; font-size:17px; font-weight:700; letter-spacing:-.2px; }
.step-head p{ margin:0; font-size:13.5px; color:var(--ink-2); }

/* ---------- DID cards ---------- */
.did-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;
}
.didcard{
  position:relative; text-align:left;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:14px 15px 13px;
  cursor:pointer; font-family:inherit;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.didcard:hover{ border-color:var(--accent); transform:translateY(-1px); }
.didcard.active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.16);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.didcard.active::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent);
}
.didcard.is-full{ opacity:.5; }

.didcard-top{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.chip{
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.6px;
  padding:3px 9px; border-radius:5px;
}
.cap{
  margin-left:auto; font-size:10.5px; font-weight:600;
  color:var(--ink-3); background:var(--line-soft);
  padding:2px 7px; border-radius:20px; white-space:nowrap;
}
.cap-full{ background:var(--bad-bg); color:var(--bad); }
.cap-open{ color:#9aa6b8; }

.didcard-region{ font-size:15px; font-weight:700; line-height:1.25; }
.didcard-vert{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.didcard-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:11px; padding-top:9px; border-top:1px solid var(--line-soft);
}
.tel{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.payout{ font-size:14px; font-weight:700; color:var(--accent); }

/* ---------- rules panel ---------- */
.rules{
  margin-top:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  padding:14px 18px 15px;
}
.rules-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:8px;
  padding-bottom:9px; margin-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.rules-head strong{ font-size:14px; }
.rules-head span{ font-size:12px; color:var(--ink-3); }
.rules ul{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:5px 22px;
}
.rules li{ font-size:13px; color:var(--ink-2); padding-left:17px; position:relative; }
.rules li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:12px;
}

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px 20px;
  margin-bottom:14px;
}
.card h3{
  margin:0 0 3px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.8px; color:var(--ink-2);
}
.card-note{ margin:0 0 14px; font-size:12.5px; color:var(--ink-3); }
.card h3 + .grid{ margin-top:14px; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:14px 16px;
}
.f.wide{ grid-column:1 / -1; }
.f{ min-width:0; }
.f[hidden]{ display:none; }

label{ display:block; font-size:12.5px; font-weight:650; color:var(--ink); margin-bottom:5px; }
.hint{ font-weight:400; color:var(--ink-3); font-size:11.5px; }

input, select, textarea{
  width:100%; padding:9px 11px;
  border:1px solid #cfd6e2; border-radius:8px; background:#fff;
  font-family:inherit; font-size:14px; color:var(--ink);
  transition:border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.14);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
input::placeholder, textarea::placeholder{ color:#b3bccb; }
textarea{ min-height:74px; resize:vertical; }
.upper{ text-transform:uppercase; }

select.yn.set-yes{ border-color:#a9d8bf; background:#f6fcf9; }
select.yn.set-no{  border-color:#e6bcb8; background:#fdf7f6; }

.age-note{ font-size:11.5px; margin-top:5px; color:var(--ink-3); min-height:15px; }
.age-note.warn{ color:var(--bad); font-weight:600; }

/* ---------- submit ---------- */
.submit-bar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.submit-empty{ text-align:center; padding:12px; font-size:13.5px; color:var(--ink-3); }
.send{
  display:block; width:100%;
  padding:15px 18px; border:0; border-radius:10px;
  background:var(--accent); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; text-align:center;
  transition:filter .13s, transform .13s;
}
.send:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.send:active{ transform:translateY(0); }
.send small{ display:block; margin-top:3px; font-size:12px; font-weight:500; opacity:.85; }

/* ---------- result panels ---------- */
.panel{ border-radius:var(--radius); padding:16px 18px 18px; margin-bottom:26px; border:1px solid; }
.panel-good{ background:var(--good-bg); border-color:var(--good-line); }
.panel-warn{ background:var(--warn-bg); border-color:var(--warn-line); }
.panel-bad{  background:var(--bad-bg);  border-color:var(--bad-line); }

.panel-head{ display:flex; gap:12px; align-items:flex-start; }
.panel-icon{
  flex:0 0 26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}
.panel-good .panel-icon{ background:var(--good); }
.panel-warn .panel-icon{ background:var(--warn); }
.panel-bad  .panel-icon{ background:var(--bad); }
.panel-head strong{ display:block; font-size:15px; }
.panel-good .panel-head strong{ color:var(--good); }
.panel-warn .panel-head strong{ color:var(--warn); }
.panel-bad  .panel-head strong{ color:var(--bad); }
.panel-head span{ font-size:12.5px; color:var(--ink-2); }

.issues{
  margin:13px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:7px 20px;
}
.issues li{
  font-size:13.5px; color:var(--bad); background:#fff;
  border:1px solid var(--bad-line); border-radius:7px;
  padding:8px 11px 8px 28px; position:relative;
}
.issues li::before{
  content:"\2715"; position:absolute; left:11px; top:8px;
  font-size:11px; font-weight:700;
}

.note{
  margin-top:12px; padding:10px 12px;
  background:#fff; border:1px solid var(--line); border-radius:7px;
  font-size:13px; color:var(--ink-2);
}

.io{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.io-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.7px; color:var(--ink-2); margin-bottom:5px;
}
pre{
  margin:0; background:#101827; color:#cbd6e6;
  padding:12px 13px; border-radius:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
  max-height:330px; overflow:auto;
}

.foot{ text-align:center; font-size:12.5px; color:var(--ink-3); padding:8px 0 40px; }

@media (max-width:760px){
  .wrap{ padding:0 14px; }
  .io{ grid-template-columns:1fr; }
  .topbar-inner{ flex-direction:column; align-items:flex-start; }
  .today{ text-align:left; }
  .grid{ grid-template-columns:1fr; }
}

/* ---------- next-step callout (after a successful store) ---------- */
.next{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:13px; padding:13px 15px;
  background:#fff; border:1px solid var(--good-line);
  border-left:3px solid var(--good); border-radius:8px;
}
.next-num{
  flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--good); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.next strong{ display:block; font-size:14px; color:var(--good); }
.next span{ font-size:12.5px; color:var(--ink-2); }

/* ---------- warning variant of .note ---------- */
.note-warn{ border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn); }

/* ---------- test mode row ---------- */
.testrow{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:14px; padding:11px 13px;
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:8px; cursor:pointer;
  font-size:12.5px; color:var(--ink-2); font-weight:400;
}
.testrow input{ width:auto; margin:2px 0 0; flex:0 0 auto; cursor:pointer; }
.testrow strong{ color:var(--warn); }