/* ==================================================================
   PAT WELLNESS RECHARGE DAY — Ice Bath Workshop
   Theme: โทนฟ้าน้ำแข็ง ตัดกับ ชมพู / เหลือง / มิ้นต์ (ตามโปสเตอร์)
   ================================================================== */

:root{
  --navy:      #0A2E62;
  --navy-2:    #123E86;
  --blue:      #1565C0;
  --cyan:      #00A9E0;
  --cyan-lt:   #4FC7F0;
  --ice:       #E9F6FE;
  --ice-2:     #D3ECFB;
  --mint:      #17C3B2;
  --yellow:    #FFD400;
  --pink:      #FF2E6C;
  --pink-dk:   #E01055;

  --ink:       #0E2440;
  --ink-soft:  #4A6484;
  --line:      #CFE4F4;
  --white:     #fff;

  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 10px 30px -12px rgba(10,46,98,.28);
  --shadow-lg: 0 24px 60px -22px rgba(10,46,98,.45);
  --wrap:      1120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Kanit','Noto Sans Thai','Sukhumvit Set',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, #CFEBFB 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 20%, #E4F4FF 0%, transparent 55%),
    linear-gradient(180deg,#F4FBFF 0%, #EAF5FD 45%, #F7FCFF 100%);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}

.wrap{ width:min(var(--wrap),calc(100% - 2.5rem)); margin-inline:auto; }

/* --------------------- ฟองอากาศพื้นหลัง --------------------- */
.ice-bg{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bubble{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(120,205,245,.28) 60%, rgba(120,205,245,0));
  animation:float 18s ease-in-out infinite;
}
.b1{ width:180px;height:180px; left:4%;  top:16%; }
.b2{ width:90px; height:90px;  left:82%; top:8%;  animation-delay:-4s; }
.b3{ width:130px;height:130px; left:72%; top:58%; animation-delay:-8s; }
.b4{ width:60px; height:60px;  left:22%; top:72%; animation-delay:-2s; }
.b5{ width:110px;height:110px; left:48%; top:35%; animation-delay:-11s; }
.b6{ width:70px; height:70px;  left:92%; top:78%; animation-delay:-6s; }
@keyframes float{
  0%,100%{ transform:translateY(0) scale(1);   opacity:.55; }
  50%    { transform:translateY(-38px) scale(1.08); opacity:.85; }
}
@media (prefers-reduced-motion:reduce){ .bubble{ animation:none; } }

/* --------------------- HEADER --------------------- */
.site-head{
  position:relative; z-index:2;
  background:var(--white);
  border-bottom:3px solid var(--cyan);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 0; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand-mark{ width:54px; height:54px; flex:none; object-fit:contain; display:block; }
/* ใช้เมื่อยังไม่ได้วางไฟล์โลโก้ img/pat-logo.png */
.brand-mark-fallback{
  border-radius:50%; border:2.5px solid var(--navy); position:relative;
}
.brand-mark-fallback::after{
  content:'PAT'; position:absolute; inset:0;
  display:grid; place-content:center;
  font-size:.72rem; font-weight:700; color:var(--navy); letter-spacing:.04em;
}
.brand-text strong{ display:block; font-weight:600; font-size:1.02rem; color:var(--navy); line-height:1.25; }
.brand-text span{ display:block; font-size:.68rem; letter-spacing:.09em; color:var(--ink-soft); font-weight:400; }
.brand-org{
  display:flex; align-items:center; gap:.65rem;
  font-size:.82rem; color:var(--ink-soft); line-height:1.5;
  padding-left:1rem; border-left:2px solid var(--line);
}
.brand-org b{ color:var(--navy); font-weight:600; }
.org-mark{ flex:none; width:60px; height:45px; object-fit:contain; border-radius:6px; }

/* --------------------- HERO --------------------- */
.hero{
  position:relative; z-index:1;
  padding:3rem 0 3.5rem;
  background:
    radial-gradient(700px 380px at 78% 30%, rgba(0,169,224,.22), transparent 65%),
    linear-gradient(135deg,#0A2E62 0%, #10457F 42%, #1273B8 78%, #17A0DA 100%);
  color:var(--white);
  overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:auto 0 -1px 0; height:60px;
  background:linear-gradient(180deg,transparent, rgba(244,251,255,.9));
  pointer-events:none;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('img/frost-pattern.svg') repeat;
  opacity:.13; pointer-events:none;
  animation:drift 60s linear infinite;
}
@keyframes drift{ from{ background-position:0 0; } to{ background-position:180px 360px; } }
@media (prefers-reduced-motion:reduce){ .hero::before{ animation:none; } }

.hero-grid{
  display:grid; grid-template-columns:1.35fr .85fr; gap:2.5rem; align-items:center;
  position:relative; z-index:1;
}

/* ภาพประกอบมุมขวาบนของ hero */
.hero-art{
  position:absolute; right:-150px; top:-150px; width:460px; height:auto;
  opacity:.22; pointer-events:none;
  transform:rotate(8deg);
  mask-image:radial-gradient(ellipse at 42% 62%, #000 30%, transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse at 42% 62%, #000 30%, transparent 68%);
}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 .9rem; padding:.3rem .95rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  border-radius:999px; font-size:.85rem; font-weight:500; letter-spacing:.04em;
  backdrop-filter:blur(6px);
}
.kicker .dot{ width:8px;height:8px;border-radius:50%;background:var(--yellow); }

.hero-title{
  margin:0; font-weight:800; line-height:.95; letter-spacing:-.01em;
  font-size:clamp(2.3rem,6.2vw,4.4rem);
  text-shadow:0 8px 24px rgba(0,0,0,.25);
}
.hero-title .l1{ color:var(--white); }
.hero-title .l2{ color:var(--cyan-lt); font-style:italic; }
.hero-title .l3{
  background:linear-gradient(100deg,var(--yellow),#FFB300);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-tag{
  margin:1rem 0 .2rem; font-size:clamp(1.05rem,2.4vw,1.5rem);
  font-weight:500; color:var(--yellow);
}
.hero-sub{ margin:0 0 1.4rem; font-weight:300; opacity:.9; letter-spacing:.02em; }

.pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.pills li{
  padding:.45rem 1rem; border-radius:999px; font-size:.85rem; font-weight:300;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
}
.pills b{ font-weight:600; color:var(--yellow); margin-right:.3rem; letter-spacing:.05em; }

/* การ์ดที่นั่ง */
.hero-card{
  position:relative;
  background:rgba(255,255,255,.97);
  border-radius:var(--radius); padding:2.4rem 1.5rem 1.5rem;
  box-shadow:var(--shadow-lg); color:var(--ink);
}
.limit-badge{
  position:absolute; top:-42px; right:-26px;
  width:112px; height:112px; border-radius:50%;
  background:linear-gradient(140deg,var(--pink),var(--pink-dk));
  color:#fff; display:grid; place-content:center; text-align:center;
  box-shadow:0 12px 26px -8px rgba(224,16,85,.6);
  border:4px solid #fff; transform:rotate(-8deg);
}
.limit-top{ display:block; font-size:.72rem; font-weight:400; }
.limit-num{ display:block; font-size:2.5rem; font-weight:800; line-height:.95; color:var(--yellow); }
.limit-bot{ display:block; font-size:.68rem; font-weight:400; }

.seat-meter{ margin-top:.4rem; }
.seat-line{ display:flex; flex-direction:column; align-items:flex-start; font-size:.9rem; color:var(--ink-soft); }
.seat-line b{ font-size:2rem; font-weight:700; color:var(--navy); line-height:1.1; }
.seat-bar{ height:10px; border-radius:99px; background:var(--ice-2); overflow:hidden; margin:.45rem 0 .5rem; }
.seat-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--mint));
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}
.seat-bar i.hot{ background:linear-gradient(90deg,var(--pink),#FF8A3D); }
.seat-note{ margin:0 0 1.1rem; font-size:.82rem; color:var(--ink-soft); }

/* แจ้งเตือนเมื่อที่นั่งเต็ม 20 ที่แล้ว */
.seat-full-alert{
  display:flex; gap:.7rem; align-items:flex-start;
  background:#FFF7ED; border:1.8px solid #FFB300; border-radius:var(--radius-sm);
  padding:.8rem .9rem; margin:-.4rem 0 1.1rem;
  animation:rise .4s cubic-bezier(.2,.8,.3,1) both;
}
.seat-full-alert[hidden]{ display:none; }
.sfa-ico{ font-size:1.25rem; line-height:1.2; flex:none; }
.seat-full-alert p{ margin:0; font-size:.83rem; line-height:1.55; color:#7A4A00; }
.seat-full-alert b{ font-weight:600; color:#B26A00; }
.seat-full-alert b:last-of-type{ color:var(--pink-dk); }

/* --------------------- STEPPER --------------------- */
.stepper-wrap{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 16px -10px rgba(10,46,98,.4);
}
.stepper{
  list-style:none; display:flex; gap:.4rem; margin:0; padding:.7rem 0;
  overflow-x:auto; scrollbar-width:none;
}
.stepper::-webkit-scrollbar{ display:none; }
.stepper li{
  display:flex; align-items:center; gap:.55rem; flex:1 1 0; min-width:max-content;
  padding:.45rem .9rem; border-radius:99px;
  font-size:.9rem; color:var(--ink-soft); font-weight:400;
  border:1.5px solid transparent; transition:.25s;
}
.stepper .n{
  width:26px;height:26px;border-radius:50%; flex:none;
  background:var(--ice-2); color:var(--navy);
  display:grid;place-content:center; font-size:.85rem; font-weight:600;
}
.stepper li.is-active{
  background:linear-gradient(120deg,var(--navy),var(--blue));
  color:#fff; border-color:transparent;
  box-shadow:0 6px 16px -8px rgba(10,46,98,.7);
}
.stepper li.is-active .n{ background:var(--yellow); color:var(--navy); }
.stepper li.is-done{ color:var(--mint); border-color:var(--mint); }
.stepper li.is-done .n{ background:var(--mint); color:#fff; }

/* --------------------- LAYOUT --------------------- */
.main{ position:relative; z-index:1; padding:2.5rem 0 4rem; }
.step[hidden]{ display:none; }
.step{ animation:rise .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.step-title{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  font-size:clamp(1.25rem,3vw,1.75rem); font-weight:600; color:var(--navy);
  margin:0 0 1.6rem;
}
.step-title .tag{
  background:linear-gradient(120deg,var(--pink),var(--pink-dk));
  color:#fff; font-size:.78rem; font-weight:500;
  padding:.3rem .9rem; border-radius:99px; letter-spacing:.03em;
}

/* --------------------- แกลเลอรีภาพประกอบ --------------------- */
.gallery{
  display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:1rem; margin-bottom:1.6rem;
}
.shot{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow);
  aspect-ratio:4/3; background:var(--navy);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.shot-lg{ grid-row:span 1; }
.shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.shot:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.shot:hover img{ transform:scale(1.06); }
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 42%, rgba(6,26,54,.82) 100%);
}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:1rem 1.1rem; color:#fff;
}
.shot figcaption b{
  display:block; font-weight:700; font-size:1.05rem; letter-spacing:.08em;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.shot figcaption span{
  display:block; font-size:.84rem; font-weight:300; opacity:.92; margin-top:.1rem;
}
.shot-lg figcaption b{ font-size:1.35rem; color:var(--yellow); }

/* --------------------- STEP 1 --------------------- */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-bottom:1.6rem; }
.info-card{
  background:var(--white); border-radius:var(--radius); padding:1.4rem 1.3rem;
  box-shadow:var(--shadow); border-top:4px solid var(--cyan);
  transition:transform .25s, box-shadow .25s;
}
.info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.info-card:nth-child(2){ border-top-color:var(--mint); }
.info-card:nth-child(3){ border-top-color:var(--yellow); }
.ico{ width:42px;height:42px; border-radius:12px; display:grid;place-content:center; margin-bottom:.7rem; color:#fff; }
.ico svg{ width:22px;height:22px; }
.ico-date{ background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.ico-time{ background:linear-gradient(135deg,var(--mint),#3FD9C8); }
.ico-place{ background:linear-gradient(135deg,#FFB300,var(--yellow)); color:var(--navy); }
.info-label{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.info-value{ margin:.15rem 0 0; font-size:1.22rem; font-weight:600; color:var(--navy); line-height:1.35; }
.info-value span{ display:block; font-size:.85rem; font-weight:300; color:var(--ink-soft); margin-top:.2rem; }

.split{ display:grid; grid-template-columns:1fr 1.15fr; gap:1.1rem; margin-bottom:1.6rem; }
.panel{
  background:var(--white); border-radius:var(--radius); padding:1.5rem;
  box-shadow:var(--shadow);
}
.panel-title{
  margin:0 0 1rem; font-size:1.1rem; font-weight:600; color:var(--navy);
  padding-bottom:.55rem; border-bottom:2px dashed var(--line);
}
.check-list{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.6rem; }
.check-list li{ position:relative; padding-left:2rem; font-size:.95rem; }
.check-list li::before{
  content:'✓'; position:absolute; left:0; top:.05rem;
  width:1.35rem;height:1.35rem; border-radius:50%;
  background:var(--mint); color:#fff; font-size:.8rem;
  display:grid; place-content:center; font-weight:600;
}
.gift-box{
  display:flex; align-items:flex-start; gap:.8rem;
  background:linear-gradient(120deg,#FFF9DB,#FFFDF2);
  border:1.5px dashed var(--yellow); border-radius:var(--radius-sm);
  padding:.9rem 1rem; font-size:.9rem;
}
.gift-badge{
  flex:none; background:var(--pink); color:#fff; font-size:.75rem; font-weight:600;
  padding:.25rem .7rem; border-radius:99px;
}
.gift-box p{ margin:0; }
.gift-box small{ color:var(--ink-soft); }

.panel-prepare{ border-left:5px solid var(--cyan); }
.prep-list{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.prep-list li{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--ice); border-radius:var(--radius-sm); padding:.9rem 1rem;
}
.prep-ico{ font-size:1.5rem; line-height:1; flex:none; }
.prep-list b{ font-weight:600; color:var(--navy); }
.prep-list p{ margin:.25rem 0 0; font-size:.88rem; color:var(--ink-soft); }
.prep-list p b{ color:var(--pink); }
.req,.opt{
  font-style:normal; font-size:.7rem; font-weight:500;
  padding:.12rem .55rem; border-radius:99px; margin-left:.4rem; vertical-align:middle;
}
.req{ background:var(--pink); color:#fff; }
.opt{ background:var(--ice-2); color:var(--navy-2); }

/* กล่องยินยอม */
.consent-box{
  background:var(--white); border-radius:var(--radius); padding:1.6rem;
  box-shadow:var(--shadow); border-top:5px solid var(--pink);
}
.consent{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.95rem 1.1rem; margin-bottom:.7rem;
  border:2px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; transition:.2s; background:#FBFDFF;
}
.consent:hover{ border-color:var(--cyan); background:var(--ice); }
.consent input{ position:absolute; opacity:0; width:0;height:0; }
.consent .box{
  flex:none; width:24px;height:24px; border-radius:7px; margin-top:.1rem;
  border:2.5px solid var(--cyan); background:#fff; position:relative; transition:.2s;
}
.consent .box::after{
  content:''; position:absolute; left:7px; top:2px; width:6px;height:12px;
  border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg) scale(0);
  transition:transform .18s cubic-bezier(.2,1.5,.4,1);
}
.consent input:checked ~ .box{ background:var(--mint); border-color:var(--mint); }
.consent input:checked ~ .box::after{ transform:rotate(45deg) scale(1); }
.consent input:focus-visible ~ .box{ outline:3px solid rgba(0,169,224,.4); outline-offset:2px; }
.consent:has(input:checked){ border-color:var(--mint); background:#F1FCFA; }
.consent .txt{ font-size:.94rem; }
.consent .txt b{ font-weight:600; color:var(--navy); }
.consent-warn{
  margin:.2rem 0 1rem; font-size:.88rem; color:var(--pink-dk); font-weight:400;
  background:#FFF1F5; border-left:3px solid var(--pink); padding:.55rem .85rem; border-radius:8px;
}

/* --------------------- ปุ่ม --------------------- */
.btn{
  font-family:inherit; font-size:1rem; font-weight:500; cursor:pointer;
  border:none; border-radius:99px; padding:.8rem 1.9rem;
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.btn:active{ transform:translateY(1px); }
.btn-cta{
  background:linear-gradient(120deg,var(--cyan),var(--blue));
  color:#fff; box-shadow:0 10px 24px -10px rgba(21,101,192,.8);
}
.btn-cta:hover:not(:disabled){ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(21,101,192,.85); }
.btn-cta:disabled{ background:#C3D6E6; color:#7E97AE; box-shadow:none; cursor:not-allowed; }
.btn-ghost{
  background:#fff; color:var(--navy); border:2px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--blue); }
.btn-lg{ padding:.95rem 2.4rem; font-size:1.05rem; }
.btn-block{ display:block; width:100%; text-align:center; text-decoration:none; }

/* --------------------- STEP 2 : ฟอร์ม --------------------- */
.sec{
  border:none; margin:0 0 1.4rem; padding:0;
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.sec-head{
  display:block; width:100%; float:left;
  background:linear-gradient(115deg,var(--navy),var(--blue) 70%,var(--cyan));
  color:#fff; font-size:1rem; font-weight:500;
  padding:.85rem 1.5rem; margin:0;
}
.sec-body{ clear:both; padding:1.5rem; }

.row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem; }
.row:last-child{ margin-bottom:0; }
.fld{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.fld.span2{ grid-column:span 2; }
.fld.span3{ grid-column:1 / -1; }
.fld.sm{ max-width:150px; }
.fld label,.field-label{
  font-size:.88rem; font-weight:400; color:var(--navy-2);
}
.field-label{ display:block; margin:.2rem 0 .5rem; }
.req-star{ color:var(--pink); font-style:normal; font-weight:600; }

input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],textarea{
  font-family:inherit; font-size:.98rem; font-weight:300; color:var(--ink);
  padding:.65rem .9rem; border:1.8px solid var(--line); border-radius:10px;
  background:#FBFDFF; transition:.18s; width:100%;
}
input:focus,textarea:focus{
  outline:none; border-color:var(--cyan); background:#fff;
  box-shadow:0 0 0 4px rgba(0,169,224,.14);
}
input[readonly]{ background:var(--ice); color:var(--ink-soft); }
input.invalid,textarea.invalid{ border-color:var(--pink); background:#FFF6F9; }
textarea{ resize:vertical; }
::placeholder{ color:#9DB4CA; font-weight:300; }

.fixed-line{
  margin:0 0 1.1rem; padding:.6rem 1rem; border-radius:10px;
  background:var(--ice); font-size:.94rem; color:var(--navy-2);
}
.fixed-line b{ font-weight:600; color:var(--navy); }
.sub-head{
  margin:1.5rem 0 .9rem; font-size:.95rem; font-weight:500; color:var(--navy);
  padding-left:.7rem; border-left:4px solid var(--yellow);
}
.note-star{ margin:0 0 1.1rem; font-size:.88rem; color:var(--pink-dk); }

/* ชิป (checkbox / radio แบบปุ่ม) */
.chip-group{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.1rem; }
.chip-group.tight{ margin-bottom:0; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0;height:0; }
.chip span{
  display:inline-block; padding:.5rem 1.15rem; border-radius:99px;
  border:1.8px solid var(--line); background:#FBFDFF;
  font-size:.9rem; transition:.18s; user-select:none;
}
.chip:hover span{ border-color:var(--cyan-lt); }
.chip input:checked + span{
  background:linear-gradient(120deg,var(--cyan),var(--blue));
  border-color:transparent; color:#fff; font-weight:400;
  box-shadow:0 6px 14px -8px rgba(21,101,192,.9);
}
.chip input:focus-visible + span{ outline:3px solid rgba(0,169,224,.4); outline-offset:2px; }

/* ตารางสุขภาพ */
.health-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-bottom:1.3rem; }
.q-table{ border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.q-head{
  display:grid; grid-template-columns:1fr 62px 62px; align-items:center;
  background:linear-gradient(115deg,var(--navy),var(--blue));
  color:#fff; font-size:.86rem; font-weight:500; padding:.6rem .9rem; gap:.4rem;
}
.q-head b{ text-align:center; font-weight:500; font-size:.8rem; }
.q-head.alt{ grid-template-columns:1fr; }
.q-head.alt2{
  grid-template-columns:1fr; background:linear-gradient(115deg,var(--mint),#0FA89A);
  font-size:.82rem;
}
.q-row{
  display:grid; grid-template-columns:1fr 62px 62px; align-items:center; gap:.4rem;
  padding:.62rem .9rem; font-size:.88rem; border-top:1px solid var(--line);
}
.q-row:nth-child(even){ background:#F8FCFF; }
.yn{ display:grid; place-items:center; cursor:pointer; }
.yn input{ position:absolute; opacity:0; width:0;height:0; }
.yn i{
  width:21px;height:21px; border-radius:6px; border:2px solid var(--cyan);
  background:#fff; display:block; position:relative; transition:.16s;
}
.yn i::after{
  content:''; position:absolute; left:6px; top:1.5px; width:5px;height:10px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); transition:transform .16s;
}
.yn input:checked + i{ background:var(--cyan); }
.yn input:checked + i::after{ transform:rotate(45deg) scale(1); }
.yn input:focus-visible + i{ outline:3px solid rgba(0,169,224,.4); outline-offset:2px; }

.c-row{
  display:flex; align-items:flex-start; gap:.65rem; cursor:pointer;
  padding:.55rem .9rem; font-size:.88rem; border-top:1px solid var(--line);
  transition:background .15s;
}
.c-row:hover{ background:var(--ice); }
.c-row input{ position:absolute; opacity:0; width:0;height:0; }
.c-row i{
  flex:none; margin-top:.2rem;
  width:19px;height:19px; border-radius:6px; border:2px solid var(--cyan);
  background:#fff; position:relative; transition:.16s;
}
.c-row i::after{
  content:''; position:absolute; left:5px; top:1px; width:5px;height:10px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); transition:transform .16s;
}
.c-row input:checked + i{ background:var(--pink); border-color:var(--pink); }
.c-row input:checked + i::after{ transform:rotate(45deg) scale(1); }
.c-row input:focus-visible + i{ outline:3px solid rgba(255,46,108,.35); outline-offset:2px; }
.c-row em{ font-style:normal; color:var(--ink-soft); font-size:.8rem; }

/* ส่วนที่ 4 */
.waiver{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.waiver li{
  position:relative; padding:.85rem 1rem .85rem 1.15rem; font-size:.92rem;
  background:var(--ice); border-left:4px solid var(--cyan); border-radius:0 10px 10px 0;
  color:var(--ink-soft);
}
.waiver li b{ color:var(--navy); font-weight:600; }

.form-error{
  margin:0 0 1rem; padding:.85rem 1.1rem; border-radius:10px;
  background:#FFF1F5; border-left:4px solid var(--pink);
  color:var(--pink-dk); font-size:.92rem;
}
.form-actions{ display:flex; gap:.8rem; justify-content:flex-end; flex-wrap:wrap; }

/* --------------------- STEP 3 : ผลลัพธ์ --------------------- */
.result-card{
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.result-top{
  position:relative; overflow:hidden;
  text-align:center; padding:2.2rem 1.5rem 1.6rem; color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--blue) 55%,var(--cyan));
}
.result-art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.28; pointer-events:none;
}
.result-top > *:not(.result-art){ position:relative; z-index:1; }
.result-check{
  display:grid; place-content:center; width:64px;height:64px; margin:0 auto .9rem;
  border-radius:50%; background:var(--mint); color:#fff; font-size:2rem; font-weight:700;
  box-shadow:0 10px 26px -8px rgba(23,195,178,.9);
  animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
.result-hi{ margin:0; font-size:1.35rem; font-weight:600; }
.result-name{ margin:.3rem 0 0; font-size:1rem; opacity:.9; font-weight:300; }

.seat-display{ text-align:center; padding:2rem 1.5rem 1.5rem; background:var(--ice); }
.seat-cap{ margin:0; font-size:.95rem; color:var(--ink-soft); }
.seat-big{
  margin:.2rem 0; font-size:clamp(3.5rem,13vw,5.5rem); font-weight:800; line-height:1;
  background:linear-gradient(120deg,var(--navy),var(--cyan) 60%,var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.seat-code{ margin:.3rem 0 0; font-size:.92rem; color:var(--ink-soft); }
.seat-code b{ font-weight:600; color:var(--navy); letter-spacing:.06em; }

/* --------------------- QR Code เข้างาน --------------------- */
.qr-block{
  text-align:center; padding:1.8rem 1.6rem 1.6rem;
  background:linear-gradient(180deg,#FFFFFF,#F4FBFF);
  border-bottom:2px dashed var(--line);
}
.qr-title{
  margin:0 0 1.1rem; font-size:1.05rem; font-weight:600; color:var(--navy);
}
.qr-frame{
  display:inline-block; padding:1rem 1rem .7rem;
  background:#fff; border:3px solid var(--navy); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.qr-canvas{
  width:clamp(180px,52vw,220px); height:clamp(180px,52vw,220px);
  display:grid; place-items:center; margin-inline:auto;
}
.qr-canvas canvas{ display:block; image-rendering:pixelated; border-radius:4px; }
.qr-code-text{
  margin:.55rem 0 0; font-size:1rem; font-weight:600; letter-spacing:.1em;
  color:var(--navy); font-variant-numeric:tabular-nums;
}
.qr-note{
  display:flex; gap:.75rem; align-items:flex-start; text-align:left;
  max-width:460px; margin:1.2rem auto .9rem;
  background:#FFF9DB; border:1.8px dashed var(--yellow); border-radius:var(--radius-sm);
  padding:.85rem 1rem;
}
.qr-note-ico{ font-size:1.35rem; line-height:1.2; flex:none; }
.qr-note p{ margin:0; font-size:.9rem; line-height:1.65; }
.qr-note b{ font-weight:600; color:var(--navy); }
.btn-sm{ padding:.6rem 1.4rem; font-size:.9rem; }

.result-status{ padding:1.4rem 1.6rem; }
.status-box{ border-radius:var(--radius-sm); padding:1.15rem 1.3rem; display:flex; gap:.9rem; align-items:flex-start; }
.status-box .si{ font-size:1.6rem; line-height:1.2; flex:none; }
.status-box h4{ margin:0 0 .35rem; font-size:1.05rem; font-weight:600; }
.status-box p{ margin:0; font-size:.93rem; line-height:1.65; }
.status-ok{ background:#F1FCFA; border:1.5px solid var(--mint); }
.status-ok h4{ color:#0C8377; }
.status-wait{ background:#FFF7ED; border:1.5px solid #FFB300; }
.status-wait h4{ color:#B26A00; }
.status-wait b{ color:var(--pink-dk); }

.result-recap{ padding:0 1.6rem 1.4rem; }
.result-recap h3{
  margin:0 0 .8rem; font-size:1rem; font-weight:600; color:var(--navy);
  padding-bottom:.5rem; border-bottom:2px dashed var(--line);
}
.result-recap dl{ margin:0; display:grid; gap:.55rem; }
.result-recap dl > div{ display:grid; grid-template-columns:140px 1fr; gap:.8rem; font-size:.92rem; }
.result-recap dt{ color:var(--ink-soft); }
.result-recap dd{ margin:0; color:var(--navy); font-weight:400; }

.result-actions{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
  padding:0 1.6rem 1.8rem;
}

/* --------------------- FOOTER --------------------- */
.site-foot{
  position:relative; z-index:1; margin-top:2rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#C9DEF2; padding:2.5rem 0 1.4rem; font-size:.9rem;
}
.foot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.foot-h{ margin:0 0 .5rem; color:#fff; font-weight:500; font-size:.98rem; }
.site-foot p{ margin:.18rem 0; font-weight:300; }
.site-foot a{ color:var(--cyan-lt); text-decoration:none; }
.site-foot a:hover{ text-decoration:underline; }
.site-foot b{ color:#fff; font-weight:500; }
.foot-slogan{
  margin:2rem 0 0; text-align:center; letter-spacing:.22em; font-size:.82rem;
  color:#6E97C4; border-top:1px solid rgba(255,255,255,.12); padding-top:1.2rem;
}

/* --------------------- RESPONSIVE --------------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:3rem; }
  .hero-card{ max-width:420px; }
  .hero-art{ display:none; }
  .info-grid,.split,.health-grid,.foot-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .shot-lg{ grid-column:1 / -1; aspect-ratio:16/9; }
  .row{ grid-template-columns:1fr 1fr; }
  .fld.span2,.fld.span3{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .wrap{ width:calc(100% - 1.6rem); }
  .head-inner{ justify-content:center; text-align:center; }
  .brand-org{ border-left:none; padding-left:0; }
  .hero{ padding:2.2rem 0 2.6rem; }
  .limit-badge{ width:92px;height:92px; top:-28px; right:-4px; }
  .limit-num{ font-size:2rem; }
  .row{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .shot-lg{ aspect-ratio:4/3; }
  .fld.sm{ max-width:none; }
  .sec-body{ padding:1.1rem; }
  .result-recap dl > div{ grid-template-columns:1fr; gap:.1rem; }
  .form-actions,.result-actions{ flex-direction:column-reverse; }
  .form-actions .btn,.result-actions .btn{ width:100%; }
  .stepper li .t{ display:none; }
  .stepper li.is-active .t{ display:inline; }
}

/* --------------------- พิมพ์ --------------------- */
@media print{
  .ice-bg,.hero,.stepper-wrap,.site-head,.result-actions,.site-foot{ display:none !important; }
  body{ background:#fff; }
  .result-card{ box-shadow:none; border:2px solid var(--navy); }
  .qr-block{ background:#fff; page-break-inside:avoid; }
  #saveQrBtn{ display:none; }
}