/* =====================================================================
   intramind — หน้าสมัครทดลองใช้งาน (multi-step form)
   โหลดต่อจาก main.css ใช้ .field / .err / .btn-frame / .form-sent เดิม
   ที่นี่มีแค่ของที่ main.css ไม่มี: stepper, การ์ดตัวเลือก, select,
   กล่อง subdomain, การ์ดสรุป, การ์ด credential, overlay และ error block
   ===================================================================== */

/* ฉากหลังนิ่ง — หน้ากรอกฟอร์มไม่ควรแลกแบตกับ particle 70k ของหน้าแรก */
.reg-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(65% 45% at 50% 0%, rgba(177,97,253,0.20), rgba(81,39,182,0.06) 45%, transparent 72%),
    radial-gradient(45% 40% at 0% 100%, rgba(81,39,182,0.14), transparent 62%),
    #000;
}
.reg{position:relative;z-index:10;}

/* ---------------------------------------------------------------------
   เคอร์เซอร์: main.css สั่ง cursor:none ทั้งไซต์ หน้านี้ยังมี custom cursor
   เหมือนหน้าอื่น แต่ต้องคืน caret ให้ช่องกรอก — ฟอร์มที่มองไม่เห็นตำแหน่ง
   พิมพ์คือฟอร์มที่คนกรอกไม่จบ
   --------------------------------------------------------------------- */
.reg input,.reg textarea,.reg select{cursor:text;}
.reg select,.reg button,.reg label.opt-card,.reg a{cursor:pointer;}
.reg button:disabled{cursor:not-allowed;}

/* main.css ตั้ง outline:none ไว้ที่ input — คนใช้คีย์บอร์ดต้องเห็นว่าอยู่ไหน */
.reg :focus-visible{
  outline:2px solid var(--brand-light);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================= HERO + STEPPER ============================= */
.reg-hero{
  padding:8.5rem 1.5rem 2.5rem;
  max-width:64rem;
  margin:0 auto;
}
.reg-hero h1{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:500;
  line-height:1.3;
  color:#fff;
  margin-top:1.25rem;
}
.reg-hero .sub{
  margin-top:0.9rem;
  max-width:34rem;
  font-size:1rem;
  font-weight:300;
  line-height:1.7;
  color:var(--accent);
  opacity:0.7;
}

/* ---- มือถือ: บอกว่าอยู่ขั้นไหนจาก 3 + แถบความคืบหน้า ---- */
.step-mobile{margin-top:2.5rem;}
.step-mobile .of{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brand-light);
  opacity:0.7;
}
.step-mobile .now{
  margin-top:0.5rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:500;
  color:#fff;
}
.step-bar{
  margin-top:1rem;
  height:3px;
  border-radius:9999px;
  background:rgba(177,97,253,0.16);
  overflow:hidden;
}
.step-bar i{
  display:block;
  height:100%;
  border-radius:9999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-light));
  box-shadow:0 0 14px 1px rgba(177,97,253,0.6);
  transition:width .6s var(--ease-expo);
}

/* ---- เดสก์ท็อป: stepper แนวนอน ---- */
.stepper{display:none;}
.stepper ol{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.stepper li{position:relative;display:flex;align-items:flex-start;gap:0.9rem;padding-right:1.5rem;}
/* เส้นเชื่อมระหว่างขั้น วางจากกลางวงกลมไปหาขั้นถัดไป */
.stepper li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:2.6rem;right:0;top:1.05rem;
  height:1px;
  background:rgba(177,97,253,0.2);
}
.stepper li.done:not(:last-child)::after{background:rgba(177,97,253,0.55);}
.stepper .dot{
  position:relative;
  z-index:1;
  flex:none;
  width:2.1rem;height:2.1rem;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(177,97,253,0.35);
  background:#0A0414;
  font-family:var(--font-mono);
  font-size:11px;
  color:#fff;
  opacity:0.55;
  transition:border-color .4s ease, background .4s ease, opacity .4s ease, box-shadow .4s ease;
}
.stepper .dot svg{width:12px;height:12px;display:none;}
.stepper .tx{padding-top:0.3rem;}
/* สองบรรทัด: ป้าย STEP NN อยู่บน ชื่อขั้นอยู่ล่าง
   ทั้งคู่เป็น <span> จึงต้องสั่ง block เอง ไม่งั้นไหลต่อกันเป็น "step 01ข้อมูลผู้ติดต่อ" */
.stepper .tx .k{
  display:block;
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1.2;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brand-light);
  opacity:0.45;
}
.stepper .tx .n{
  display:block;
  margin-top:0.3rem;
  font-size:0.95rem;
  color:#fff;
  opacity:0.5;
  line-height:1.4;
  transition:opacity .4s ease;
}
.stepper li[aria-current="step"] .dot{
  opacity:1;
  border-color:var(--brand-light);
  background:rgba(81,39,182,0.35);
  box-shadow:0 0 22px -4px rgba(177,97,253,0.7);
}
.stepper li[aria-current="step"] .tx .n{opacity:1;}
.stepper li[aria-current="step"] .tx .k{opacity:0.8;}
.stepper li.done .dot{opacity:1;border-color:rgba(177,97,253,0.6);background:rgba(81,39,182,0.22);}
.stepper li.done .dot span{display:none;}
.stepper li.done .dot svg{display:block;color:var(--brand-light);}
.stepper li.done .tx .n{opacity:0.75;}

/* ============================= PANEL ============================= */
.reg-body{
  max-width:64rem;
  margin:0 auto;
  padding:0 1.5rem 4rem;
}
.reg-panel{
  border:1px solid rgba(177,97,253,0.16);
  border-radius:var(--r);
  background:rgba(10,4,24,0.55);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  padding:2rem 1.5rem;
}
.reg-step[hidden]{display:none;}
.reg-step h2{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:500;
  line-height:1.35;
  color:#fff;
}
.reg-step h2:focus{outline:none;}
.reg-step .lead{
  margin-top:0.7rem;
  font-size:1rem;
  font-weight:300;
  line-height:1.7;
  color:var(--accent);
  opacity:0.65;
  max-width:40rem;
}
.reg-fields{
  margin-top:2.5rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
}

/* helper text ใต้ field (ไม่ใช่ error) */
.field .hint{
  font-size:0.9rem;
  line-height:1.5;
  color:#fff;
  opacity:0.35;
}

/* select — main.css ไม่มีสไตล์ให้ ต้องล้าง appearance เองแล้วใส่ลูกศร */
.field select{
  width:100%;
  appearance:none;-webkit-appearance:none;
  background:transparent;
  border:none;border-bottom:1px solid rgba(177,97,253,0.25);
  padding:0.6rem 2rem 0.85rem 0;
  color:#fff;
  font-family:var(--font-sans);font-size:1.42rem;font-weight:300;
  outline:none;
  transition:border-color .4s ease, box-shadow .4s ease;
  background-image:linear-gradient(45deg,transparent 50%,rgba(177,97,253,0.8) 50%),
                   linear-gradient(135deg,rgba(177,97,253,0.8) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 2px), calc(100% - 6px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field select:focus{border-bottom-color:var(--brand-light);box-shadow:0 8px 22px -18px rgba(177,97,253,0.9);}
.field.invalid select{border-bottom-color:rgba(255,120,120,0.85);}
/* เมนูที่กางออกวาดด้วย OS — ต้องบังคับสีเองไม่ให้ขาวบนขาว */
.field select option{background:#0A0414;color:#fff;}
.field select:invalid,.field select .ph{color:rgba(255,255,255,0.25);}

/* ============================= CONSENT ============================= */
.consent{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid rgba(177,97,253,0.12);
  display:flex;flex-direction:column;gap:1.1rem;
}
.check{display:flex;align-items:flex-start;gap:0.85rem;cursor:pointer;}
.check input{
  appearance:none;-webkit-appearance:none;
  flex:none;
  width:1.35rem;height:1.35rem;
  margin-top:0.1rem;
  border:1px solid rgba(177,97,253,0.4);
  border-radius:5px;
  background:rgba(81,39,182,0.12);
  cursor:pointer;
  position:relative;
  transition:border-color .3s ease, background .3s ease;
}
.check input:checked{border-color:var(--brand-light);background:var(--brand-light);}
.check input:checked::after{
  content:"";
  position:absolute;
  left:0.42rem;top:0.16rem;
  width:0.35rem;height:0.68rem;
  border-right:2px solid #12042C;
  border-bottom:2px solid #12042C;
  transform:rotate(45deg);
}
.check span{
  font-size:0.98rem;
  font-weight:300;
  line-height:1.6;
  color:#fff;
  opacity:0.72;
}
.check a{
  color:var(--brand-light);
  border-bottom:1px solid rgba(177,97,253,0.4);
  transition:border-color .3s ease;
}
.check a:hover{border-bottom-color:var(--brand-light);}
.consent .err{
  font-size:1.08rem;
  color:rgba(255,140,140,0.9);
  height:0;opacity:0;overflow:hidden;
  transition:opacity .3s ease;
}
.consent.invalid .err{height:auto;opacity:1;}

/* ============================= การ์ดตัวเลือก ============================= */
/* input จริงซ่อนไว้แต่ยังโฟกัสได้ — keyboard nav กับ screen reader จึงทำงานเอง */
.opt-group{border:none;}
.opt-group legend{
  font-family:var(--font-sans);
  font-size:1.17rem;font-weight:400;letter-spacing:0.01em;
  color:#fff;opacity:0.45;
  margin-bottom:1.1rem;
}
.opt-group legend .ln{
  font-family:var(--font-mono);font-size:13px;letter-spacing:0.15em;
  color:var(--brand-light);opacity:0.85;margin-right:0.4rem;
}
.opt-group legend .cnt{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  color:var(--brand-light);opacity:0.7;margin-left:0.5rem;
}
.opt-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.7rem;
}
.opt-card{
  position:relative;
  display:flex;align-items:center;gap:0.8rem;
  padding:0.95rem 1.1rem;
  border:1px solid rgba(177,97,253,0.18);
  border-radius:12px;
  background:rgba(12,4,28,0.4);
  font-size:0.98rem;
  font-weight:300;
  line-height:1.45;
  color:#fff;
  opacity:0.75;
  transition:border-color .3s ease, background .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.opt-card input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  margin:0;
  pointer-events:none;
}
.opt-card .bx{
  flex:none;
  width:1.1rem;height:1.1rem;
  border:1px solid rgba(177,97,253,0.45);
  background:rgba(81,39,182,0.14);
  position:relative;
  transition:border-color .3s ease, background .3s ease;
}
.opt-card .bx.round{border-radius:9999px;}
.opt-card:hover{border-color:rgba(177,97,253,0.38);opacity:0.95;}
.opt-card:has(input:checked){
  border-color:rgba(177,97,253,0.6);
  background:rgba(81,39,182,0.22);
  opacity:1;
  box-shadow:0 0 34px -16px rgba(177,97,253,0.75);
}
.opt-card:has(input:checked) .bx{border-color:var(--brand-light);background:var(--brand-light);}
.opt-card:has(input:checked) .bx::after{
  content:"";
  position:absolute;
  left:0.3rem;top:0.08rem;
  width:0.3rem;height:0.58rem;
  border-right:2px solid #12042C;
  border-bottom:2px solid #12042C;
  transform:rotate(45deg);
}
.opt-card:has(input:focus-visible){outline:2px solid var(--brand-light);outline-offset:3px;}
/* เต็มโควตาแล้ว — ใบที่ยังไม่ถูกเลือกจะจางและกดไม่ได้ */
.opt-card.locked{opacity:0.3;pointer-events:none;}

/* ============================= SUBDOMAIN ============================= */
.sub-group{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  border:1px solid rgba(177,97,253,0.25);
  border-radius:12px;
  background:rgba(12,4,28,0.45);
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.sub-group:focus-within{border-color:var(--brand-light);box-shadow:0 0 30px -14px rgba(177,97,253,0.8);}
.sub-group .fix{
  display:flex;align-items:center;
  padding:0.85rem 0.9rem;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:#fff;
  opacity:0.4;
  background:rgba(255,255,255,0.03);
  white-space:nowrap;
}
.sub-group input{
  flex:1 1 8rem;
  min-width:0;
  background:transparent;
  border:none;
  border-bottom:none !important;   /* ทับ .field input ของ main.css */
  padding:0.7rem 0.6rem;
  color:#fff;
  font-family:var(--font-mono);
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:0.01em;
  outline:none;
  box-shadow:none !important;
}
.field.invalid .sub-group{border-color:rgba(255,120,120,0.85);}

.sub-status{
  margin-top:0.85rem;
  display:flex;align-items:center;gap:0.55rem;
  font-size:0.95rem;
  line-height:1.5;
  min-height:1.4rem;
}
.sub-status[data-state="checking"]{color:#fff;opacity:0.55;}
.sub-status[data-state="ok"]{color:#7FE3B0;}
.sub-status[data-state="taken"],.sub-status[data-state="bad"]{color:rgba(255,140,140,0.95);}
.sub-status .ic{flex:none;width:1rem;height:1rem;display:none;}
.sub-status[data-state="ok"] .ic-ok,
.sub-status[data-state="taken"] .ic-no,
.sub-status[data-state="bad"] .ic-no{display:block;}
.sub-status[data-state="checking"] .m-dot{display:block;}
.sub-status .m-dot{display:none;}

.sub-alts{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;}
.sub-alts .lb{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--brand-light);opacity:0.6;
}
.sub-alts button{
  padding:0.4rem 0.8rem;
  border:1px solid rgba(177,97,253,0.35);
  border-radius:9999px;
  background:rgba(81,39,182,0.16);
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:#fff;
  transition:border-color .3s ease, background .3s ease;
}
.sub-alts button:hover{border-color:var(--brand-light);background:rgba(81,39,182,0.35);}

/* ============================= การ์ดสรุป ============================= */
.summary{
  margin-top:2.5rem;
  border:1px solid rgba(177,97,253,0.2);
  border-radius:var(--r);
  background:rgba(81,39,182,0.09);
  padding:1.5rem;
}
.summary .hd{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--brand-light);opacity:0.7;
  margin-bottom:1.35rem;
}
.summary dl{display:flex;flex-direction:column;}
.summary .row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:0.5rem 1rem;
  padding:0.85rem 0;
  border-bottom:1px solid rgba(177,97,253,0.1);
}
.summary .row:last-child{border-bottom:none;}
.summary dt{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:#fff;opacity:0.4;
  margin-bottom:0.35rem;
}
.summary dd{
  font-size:1rem;
  font-weight:300;
  line-height:1.6;
  color:#fff;
  opacity:0.9;
  word-break:break-word;
}
.summary dd.url{font-family:var(--font-mono);font-size:0.95rem;color:var(--brand-light);opacity:1;}
.summary .edit{
  align-self:start;
  font-family:var(--font-sans);
  font-size:0.85rem;
  color:var(--brand-light);
  opacity:0.75;
  white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:opacity .3s ease, border-color .3s ease;
}
.summary .edit:hover{opacity:1;border-bottom-color:var(--brand-light);}

/* ============================= ปุ่มท้ายขั้น ============================= */
.reg-foot{
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(177,97,253,0.12);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.reg-foot .btn-frame{width:100%;text-align:center;}
.reg-foot .btn-text{align-self:center;}
.reg-foot .btn-frame:disabled{
  opacity:0.35;
  border-color:rgba(177,97,253,0.15);
  box-shadow:none;
  background:rgba(10,4,24,0.4);
}
.reg-foot .btn-frame:disabled .c-tr,.reg-foot .btn-frame:disabled .c-bl{opacity:0.3;}
.reg-hintbar{
  font-size:0.88rem;
  line-height:1.5;
  color:#fff;
  opacity:0.35;
  text-align:center;
}

/* ============================= LOADING OVERLAY ============================= */
.reg-loading{
  position:fixed;
  inset:0;
  z-index:250;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:2rem;
  text-align:center;
  background:rgba(4,1,12,0.9);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
.reg-loading.show{display:flex;}
.reg-loading .ring{
  width:3.5rem;height:3.5rem;
  border-radius:9999px;
  border:2px solid rgba(177,97,253,0.2);
  border-top-color:var(--brand-light);
  animation:regSpin 0.9s linear infinite;
}
@keyframes regSpin{to{transform:rotate(360deg);}}
.reg-loading h3{
  font-family:var(--font-display);
  font-size:1.3rem;font-weight:500;line-height:1.35;color:#fff;
}
.reg-loading p{
  max-width:26rem;
  font-size:0.98rem;font-weight:300;line-height:1.65;
  color:var(--accent);opacity:0.6;
}
@media (prefers-reduced-motion:reduce){
  .reg-loading .ring{animation-duration:2.4s;}
  .step-bar i{transition:none;}
}

/* ============================= SUCCESS ============================= */
.reg-done[hidden]{display:none;}
.done-icon{
  width:3.5rem;height:3.5rem;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(177,97,253,0.45);
  background:rgba(81,39,182,0.25);
  box-shadow:0 0 40px -12px rgba(177,97,253,0.8);
  margin-bottom:0.5rem;
}
.done-icon svg{width:1.4rem;height:1.4rem;color:var(--brand-light);}

.cred{
  width:100%;
  margin-top:0.5rem;
  border:1px solid rgba(177,97,253,0.22);
  border-radius:12px;
  background:rgba(4,1,12,0.5);
  overflow:hidden;
}
.cred .row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:0.75rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.cred .row:last-child{border-bottom:none;}
.cred dt{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--brand-light);opacity:0.65;
  margin-bottom:0.4rem;
}
.cred dd{
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:#fff;
  word-break:break-all;
  line-height:1.5;
}
.cred .cp{
  flex:none;
  display:flex;align-items:center;gap:0.4rem;
  padding:0.45rem 0.75rem;
  border:1px solid rgba(177,97,253,0.3);
  border-radius:8px;
  background:rgba(81,39,182,0.14);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.06em;
  color:#fff;
  white-space:nowrap;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.cred .cp:hover{border-color:var(--brand-light);background:rgba(81,39,182,0.32);}
.cred .cp.ok{border-color:#7FE3B0;color:#7FE3B0;}
.cred .cp svg{width:0.8rem;height:0.8rem;}

.warn{
  width:100%;
  display:flex;gap:0.75rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(255,190,120,0.3);
  border-radius:12px;
  background:rgba(255,170,80,0.08);
  font-size:0.92rem;
  font-weight:300;
  line-height:1.6;
  color:#FFD9A8;
}
.warn svg{flex:none;width:1.1rem;height:1.1rem;margin-top:0.15rem;}
.mailed{
  font-size:0.9rem;
  line-height:1.6;
  color:#fff;
  opacity:0.45;
}
.done-actions{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:0.5rem;
}
.done-actions .btn-frame{width:100%;text-align:center;}
.done-actions .btn-text{align-self:center;}
.done-actions .book{
  align-self:center;
  font-size:0.92rem;
  color:var(--brand-light);
  opacity:0.8;
  border-bottom:1px solid rgba(177,97,253,0.35);
  transition:opacity .3s ease, border-color .3s ease;
}
.done-actions .book:hover{opacity:1;border-bottom-color:var(--brand-light);}

/* ============================= ERROR STATE ============================= */
.reg-fail[hidden]{display:none;}
.reg-fail{
  display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
  border:1px solid rgba(255,120,120,0.3);
  border-radius:var(--r);
  background:rgba(255,90,90,0.07);
  padding:2rem 1.5rem;
}
.reg-fail .fk{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.35em;text-transform:uppercase;
  color:rgba(255,150,150,0.9);
}
.reg-fail h3{
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:500;line-height:1.4;color:#fff;
}
.reg-fail p{
  font-size:0.98rem;font-weight:300;line-height:1.7;
  color:var(--accent);opacity:0.7;max-width:34rem;
}
.reg-fail .acts{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}

/* ============================= RESPONSIVE ============================= */
@media (min-width:768px){
  .reg-hero{padding:10.5rem 2.5rem 3rem;}
  .reg-hero h1{font-size:2.6rem;}
  .reg-body{padding:0 2.5rem 5.5rem;}
  .reg-panel{padding:2.75rem 2.5rem;}
  .reg-step h2{font-size:1.7rem;}

  /* เดสก์ท็อปมีที่พอให้เห็นทั้ง 3 ขั้นพร้อมกัน */
  .step-mobile{display:none;}
  .stepper{display:block;margin-top:3rem;}

  .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .opt-grid.wide{grid-template-columns:repeat(3,minmax(0,1fr));}

  .summary{padding:2rem;}
  .summary .row{grid-template-columns:1fr auto;}

  /* จอกว้างพอ — เรียงปุ่มแนวนอน ปุ่มหลักไปขวา */
  .reg-foot{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .reg-foot .btn-frame{width:auto;}
  .reg-foot .btn-text{align-self:auto;}
  .reg-foot .spacer{flex:1;}

  /* สามปุ่มนี้เรียงบนลงล่างบนเดสก์ท็อปด้วย — เป็นลำดับสิ่งที่ควรทำต่อ
     ไม่ใช่ตัวเลือกที่เอามาเทียบกัน วางแนวตั้งชิดซ้ายจึงอ่านเป็นลำดับได้ชัดกว่า
     ปุ่มหลักไม่ยืดเต็มความกว้าง เพราะการ์ดกว้างเกินกว่าที่ปุ่มเดียวจะกินหมดแล้วยังดูดี */
  .done-actions{align-items:flex-start;}
  .done-actions .btn-frame{width:auto;text-align:left;}
  .done-actions .btn-text,.done-actions .book{align-self:flex-start;}
  .reg-fail{padding:2.5rem;}
}
@media (min-width:1024px){
  .reg-hero h1{font-size:3rem;}
}

/* มือถือ: ปุ่มดำเนินการเกาะขอบล่างให้กดถึงด้วยนิ้วโป้ง
   เรียงจากบนลงล่างเป็น คำอธิบาย → ปุ่มหลัก → ย้อนกลับ
   (DOM เรียงตามเดสก์ท็อป จึงต้องสั่ง order ที่นี่) */
@media (max-width:767px){
  .reg-foot .spacer{display:none;}
  .reg-foot .reg-hintbar{order:1;}
  .reg-foot .btn-frame{order:2;}
  .reg-foot .btn-text{order:3;}
  .reg-foot{
    position:sticky;
    bottom:0;
    margin-left:-1.5rem;
    margin-right:-1.5rem;
    padding:1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(10,4,24,0) 0%, rgba(10,4,24,0.92) 28%, rgba(10,4,24,0.98) 100%);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(177,97,253,0.14);
  }
}