/* ===== Lagtuz Local Support — Registration form page ===== */

body.reg-body{background:var(--cream);}

/* ---------- top bar ---------- */
.reg-top{position:sticky;top:0;z-index:60;background:rgba(251,245,233,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.reg-top-inner{display:flex;align-items:center;justify-content:space-between;height:74px;}
.reg-brand{display:flex;align-items:center;gap:12px;}
.reg-brand img{height:30px;width:auto;}
.reg-brand .tag{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.05em;color:#fff;background:var(--teal);padding:.22em .6em;border-radius:7px;text-transform:uppercase;white-space:nowrap;}
.back-link{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;color:var(--teal-deep);padding:.5em .9em;border-radius:999px;transition:background .2s;white-space:nowrap;}
.back-link:hover{background:var(--teal-tint);}
.back-link svg{width:1.05em;height:1.05em;}

/* ---------- form hero ---------- */
.reg-hero{padding:60px 0 24px;text-align:center;}
.reg-hero .kicker{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-tint);padding:.5em 1.1em;border-radius:999px;white-space:nowrap;}
.reg-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);margin-top:20px;}
.reg-hero .sub{max-width:700px;margin:18px auto 0;color:var(--muted);font-size:1.08rem;}
.req-note{margin-top:22px;display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;color:var(--muted);white-space:nowrap;}
.req-note .star{color:var(--red);font-weight:700;}

/* ---------- form shell ---------- */
.reg-main{max-width:780px;margin:0 auto;padding:30px 28px 90px;}
.reg-form{display:flex;flex-direction:column;gap:26px;}

/* section card */
.fsec{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;}
.fsec-head{padding:32px 38px 24px;background:linear-gradient(180deg,var(--teal-tint),#fff);border-bottom:1px solid var(--line);}
.fsec-tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--teal);padding:.42em .95em;border-radius:999px;white-space:nowrap;}
.fsec-head h2{font-size:1.5rem;margin-top:15px;}
.fsec-head .desc{color:var(--muted);font-size:.98rem;margin-top:11px;line-height:1.6;}
.fsec-head .desc ul{margin:8px 0 0;padding-left:20px;}
.fsec-head .desc li{margin:2px 0;}
.fsec-body{padding:10px 38px 30px;}

/* question */
.q{padding:25px 0;border-top:1px solid var(--line);}
.q:first-child{border-top:0;}
.q-label{display:block;font-weight:600;font-size:1.06rem;color:var(--ink);line-height:1.5;}
.q-label .num{color:var(--teal-deep);font-family:var(--font-display);font-weight:700;margin-right:.35em;}
.q-label .req{color:var(--red);margin-left:.2em;}
.q-help{color:var(--muted);font-size:.9rem;margin-top:6px;line-height:1.5;}
.q .control{margin-top:16px;}
.q .control > input,.q .control > textarea{margin-top:0;}

/* option lists (radio / checkbox) */
.opts{display:flex;flex-direction:column;gap:10px;}
.opt{display:flex;align-items:center;gap:13px;padding:13px 16px;border:1.5px solid var(--line);border-radius:13px;background:var(--cream);cursor:pointer;transition:border-color .15s,background .15s;font-size:1rem;color:var(--ink);}
.opt:hover{border-color:var(--teal);background:#fff;}
.opt:has(input:checked){border-color:var(--teal);background:var(--teal-tint);}
.opt input[type=radio],.opt input[type=checkbox]{width:21px;height:21px;flex:none;accent-color:var(--teal);margin:0;cursor:pointer;}
.opt.other{gap:13px;}
.opt.other input[type=text]{flex:1;width:auto;background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:.35em .2em;}
.opt.other input[type=text]:focus{box-shadow:none;border-bottom-color:var(--teal);background:transparent;}

/* rating grid */
.rate-wrap{overflow-x:auto;margin-top:6px;}
table.rate{width:100%;min-width:480px;border-collapse:collapse;}
table.rate th{font-weight:600;font-size:.82rem;color:var(--muted);padding:9px 6px;text-align:center;white-space:nowrap;}
table.rate th:first-child{text-align:left;}
table.rate td{padding:12px 6px;border-top:1px solid var(--line);text-align:center;}
table.rate td:first-child{text-align:left;font-weight:600;color:var(--ink);font-size:.96rem;}
table.rate input[type=radio]{width:20px;height:20px;accent-color:var(--teal);margin:0;cursor:pointer;}
.rate-key{font-size:.85rem;color:var(--muted);margin-top:10px;}

/* attach box */
.attach-box{margin-top:14px;border:1.6px dashed var(--teal);border-radius:var(--radius-sm);background:var(--teal-tint);padding:22px 22px;}
.attach-box .ab-h{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--teal-ink);}
.attach-box .ab-h svg{width:22px;height:22px;color:var(--teal-deep);}
.attach-box ul{margin:12px 0 16px;padding-left:20px;color:var(--muted);font-size:.94rem;}
.attach-box ul li{margin:3px 0;}

/* submit */
.reg-submit{margin-top:6px;}
.reg-submit .btn-primary{width:100%;justify-content:center;font-size:1.12rem;padding:1em;}
.reg-foot-note{margin-top:16px;font-size:.88rem;color:var(--muted);text-align:center;}

/* invalid */
.q.invalid .q-label{color:var(--red);}
.q.invalid .opts .opt,.q.invalid input,.q.invalid textarea{border-color:var(--red);}

/* success */
.reg-success{display:none;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:64px 40px;}
.reg-success.show{display:block;}
.reg-success .big{width:84px;height:84px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 26px;color:#fff;}
.reg-success .big svg{width:44px;height:44px;}
.reg-success h2{font-size:1.9rem;}
.reg-success p{color:var(--muted);max-width:480px;margin:14px auto 0;font-size:1.05rem;}
.reg-success .btn{margin-top:28px;}

@media (max-width:640px){
  .fsec-head{padding:26px 22px 20px;}
  .fsec-body{padding:6px 22px 24px;}
  .reg-hero{padding:42px 0 18px;}
}