/* HRG Skin and Hair Clinic — application form */
:root{
  --bg:#f3f5f8; --card:#ffffff; --text:#14213d; --text-2:#4b5563; --muted:#6b7280;
  --line:#d7dde5; --line-soft:#e8ecf1; --input:#ffffff;
  --primary:#0f6b68; --primary-dark:#0b504e; --primary-soft:#e8f4f3; --ring:rgba(15,107,104,.18);
  --danger:#c0392b; --ok:#1f8a4c; --radius:14px;
  color-scheme: light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.45}
a{color:var(--primary)}
.wrap{max-width:600px;margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.top{background:var(--card);border-bottom:1px solid var(--line-soft);padding:22px 0 18px;text-align:center}
.logo{display:block;margin:0 auto 12px;max-height:64px;max-width:200px;object-fit:contain}
.logo-text{width:56px;height:56px;border-radius:14px;margin:0 auto 12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;letter-spacing:.03em}
.company{font-size:14px;font-weight:600;color:var(--muted);margin:0}
.top h1{font-size:26px;line-height:1.2;margin:4px 0 10px;letter-spacing:-.02em;font-weight:700}
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:14px;color:var(--text-2)}
.meta span{display:inline-flex;align-items:center;gap:5px}

/* ---------- Intro strip ---------- */
.intro{display:flex;align-items:center;gap:12px;background:var(--primary-soft);border:1px solid #cfe5e3;border-radius:12px;padding:12px 14px;margin:16px 0 0;font-size:14.5px;color:var(--primary-dark)}
.intro b{font-weight:700}

/* ---------- Sections ---------- */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 16px 6px;margin:14px 0;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.num{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;flex:none}
.card-h h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}

.f{margin:0 0 16px}
.f > label,.f > .lab{display:block;font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:7px}
.req{color:var(--danger);margin-left:2px}
.opt{color:var(--muted);font-weight:400;font-size:13px}
.help{font-size:13px;color:var(--muted);margin-top:6px}

/* text inputs — clearly visible boxes */
.inp{display:block;width:100%;height:50px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--input);
  font:inherit;font-size:16px;color:var(--text);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.inp::placeholder{color:#9aa3af}
.inp:hover{border-color:#b9c3cf}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.has-err .inp{border-color:var(--danger);background:#fff8f7}
.prefix{position:relative}
.prefix > i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--text-2);font-weight:600;pointer-events:none}
.prefix .inp{padding-left:52px}
.prefix.rs .inp{padding-left:32px}

/* option buttons — look clearly tappable */
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.opts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.c1{grid-template-columns:1fr}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 11px;border:1.5px solid var(--line);border-radius:10px;background:var(--input);
  font-size:15px;font-weight:500;color:var(--text);transition:all .15s;user-select:none;line-height:1.25}
.opts span::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #b4bec9;flex:none;transition:all .15s;background:#fff}
.opts label:hover span{border-color:#b9c3cf}
.opts input:checked + span{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark);font-weight:600}
.opts input:checked + span::before{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px #fff}
.opts input:focus-visible + span{box-shadow:0 0 0 4px var(--ring)}
.has-err .opts span{border-color:#e9b3ad}

/* file picker */
.file{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px dashed #b9c3cf;border-radius:12px;background:#fafbfc;cursor:pointer;transition:all .15s}
.file:hover{border-color:var(--primary);background:var(--primary-soft)}
.file input{display:none}
.file .ic{width:44px;height:44px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.file b{display:block;font-size:15px;color:var(--text);word-break:break-all}
.file small{color:var(--muted);font-size:13px}
.file.picked{border-style:solid;border-color:var(--ok);background:#f1faf4}

/* submit */
.submit{margin:18px 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border:0;border-radius:12px;background:var(--primary);color:#fff;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;text-decoration:none}
.btn:hover{background:var(--primary-dark)}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.7}
.btn.ghost{background:#fff;color:var(--primary);border:1.5px solid var(--line);height:48px;font-size:15px}
.consent{font-size:12.5px;color:var(--muted);text-align:center;margin:10px 0 0}

/* alerts */
.alert{border-radius:12px;padding:12px 14px;margin:16px 0 0;font-size:14.5px;background:#fdf1ef;border:1px solid #f1c4c0;color:#8a2a1f}
.alert ul{margin:6px 0 0;padding-left:18px}
.hide{display:none!important}
.hp{position:absolute;left:-9999px}

/* success */
.done{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px 20px;margin:18px 0;text-align:center}
.tick{width:68px;height:68px;border-radius:50%;background:#e6f5ec;color:var(--ok);display:grid;place-items:center;margin:0 auto 14px;animation:pop .4s cubic-bezier(.2,1.3,.4,1)}
.done h2{margin:0 0 6px;font-size:23px;letter-spacing:-.02em}
.done p{margin:0;color:var(--text-2)}
.ref{display:inline-block;margin:14px 0 4px;padding:8px 14px;border-radius:999px;background:var(--bg);font-size:14px;color:var(--text-2)}
.ref b{color:var(--text);letter-spacing:.03em}
.steps{text-align:left;margin:22px 0 4px;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.steps li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.steps li i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none;margin-top:1px}
.steps small{display:block;color:var(--muted);font-size:13px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.contact .btn{height:48px;font-size:15px}
.wa{background:#1f8a4c}.wa:hover{background:#18703d}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

.foot{text-align:center;color:var(--muted);font-size:12.5px;padding:18px 0 28px}
@media (max-width:360px){.opts.c3{grid-template-columns:1fr}.top h1{font-size:23px}}