/* ฤกษ์รัก · order page (/order). Builds on the tokens in ruekrak.css. */

.op{--gold-soft:#E2C994; --ivory-soft:#C9CFD8}
.lp-kick{display:inline-block; font:500 .74rem/1 var(--f-body); letter-spacing:.26em; text-transform:uppercase; color:var(--gold-ink)}

/* top bar + hero (navy in both themes) */
.op-top{position:sticky; top:0; z-index:40; background:rgba(15,26,40,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(199,164,106,.18)}
.op-top .wrap{display:flex; align-items:center; gap:10px; min-height:64px}
.op-top .grow{flex:1}
.op-top .brand .logo{height:40px}
.op-top .theme-toggle{color:var(--rk-ivory); border-color:rgba(247,242,235,.22)}
.op-top .btn.ghost{color:var(--rk-ivory); border-color:rgba(247,242,235,.3)}
.op-top .btn.ghost:hover{background:rgba(247,242,235,.08); border-color:var(--rk-gold); color:var(--rk-ivory)}

.op-hero{position:relative; isolation:isolate; overflow:hidden; padding:44px 0 92px; background:var(--rk-navy); color:var(--rk-ivory); text-align:center}
.op-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(45% 80% at 85% 0%,rgba(199,164,106,.25),transparent 70%), radial-gradient(40% 70% at 5% 100%,rgba(216,183,176,.14),transparent 70%)}
.op-hero .lp-kick{color:var(--rk-gold)}
.op-hero h1{margin-top:14px; color:var(--rk-ivory); font:600 clamp(1.9rem,4.4vw,2.8rem)/1.3 var(--f-body)}
.op-hero > .wrap > p{max-width:560px; margin:12px auto 0; color:var(--ivory-soft)}
.op-steps{display:flex; justify-content:center; gap:8px; margin:28px auto 0; padding:0; list-style:none; flex-wrap:wrap}
.op-steps li{display:flex; align-items:center; gap:8px; white-space:nowrap; padding:6px 14px 6px 6px; border-radius:var(--r-pill); border:1px solid rgba(247,242,235,.18); color:var(--ivory-soft); font-size:.88rem; transition:background .3s, border-color .3s, color .3s}
.op-steps li > span:first-child{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(247,242,235,.1); font-size:.8rem; font-weight:600}
.op-steps li.on{border-color:var(--rk-gold); color:var(--rk-ivory)}
.op-steps li.on span{background:var(--rk-gold); color:var(--rk-navy)}
.op-steps li.done span{background:rgba(199,164,106,.3); color:var(--rk-gold)}
.op-trust{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; padding:0; list-style:none; color:var(--ivory-soft); font-size:.86rem}
.op-trust li{display:flex; align-items:center; gap:8px}
.op-trust .ico{width:16px; height:16px; color:var(--rk-gold)}

/* layout: form + sticky summary */
.op-main{position:relative; margin-top:-56px; padding-bottom:72px}
.op-grid{display:grid; gap:24px; align-items:start}
@media (min-width:980px){.op-grid{grid-template-columns:minmax(0,1fr) 340px}}

.op-form{display:grid; gap:18px; min-width:0}
.op-card{padding:clamp(20px,3vw,32px); border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-2)}
.op-card > header{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px}
.op-card h2{font:600 1.2rem/1.35 var(--f-body)}
.op-card > header p{margin-top:2px; color:var(--soft); font-size:.9rem}
.op-n{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--rk-navy); color:var(--rk-gold); font-weight:600; border:1px solid color-mix(in srgb,var(--rk-gold) 55%,transparent)}
.op-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.op-promo{display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; margin:-4px 0 16px; padding:8px 14px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:var(--ink); font-size:.86rem}
.op-promo .ico{width:16px; height:16px; color:var(--gold-ink)} .op-promo b{color:var(--gold-ink)}

/* package cards */
.op-plans{display:grid; gap:14px}
@media (min-width:640px){.op-plans{grid-template-columns:1fr 1fr}}
.op-plan{position:relative; display:grid; gap:6px; align-content:start; padding:22px 20px 20px; border:1.5px solid var(--line-strong); border-radius:var(--r); cursor:pointer; background:var(--surface); transition:border-color .25s, box-shadow .25s, transform .25s var(--ease)}
.op-plan:hover{border-color:var(--gold-ink); transform:translateY(-2px)}
.op-plan input{position:absolute; opacity:0; pointer-events:none}
.op-plan:has(input:checked){border-color:var(--gold-ink); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); box-shadow:0 0 0 1px var(--gold-ink), var(--sh-1)}
.op-plan:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:3px}
.op-tick{position:absolute; top:16px; right:16px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); color:transparent; transition:all .25s}
.op-tick .ico{width:15px; height:15px}
.op-plan:has(input:checked) .op-tick{background:var(--gold-ink); border-color:var(--gold-ink); color:var(--surface)}
.op-badge{position:absolute; top:-11px; left:18px; padding:3px 12px; border-radius:var(--r-pill); background:linear-gradient(100deg,#C7A46A,#E6CD9A); color:#162334; font-size:.72rem; font-weight:600}
.op-en{font:italic 500 .9rem/1 var(--f-display); color:var(--gold-ink)}
.op-name{font-size:1.3rem; font-weight:600}
.op-price{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.op-price del{color:var(--soft); font-size:.9rem}
.op-price strong{font-size:1.8rem; font-weight:600; letter-spacing:-.01em}
.op-price small{color:var(--soft)}
.op-for{color:var(--soft); font-size:.86rem; line-height:1.6}
.op-ready{display:flex; align-items:center; gap:6px; margin-top:4px; font-size:.84rem; font-weight:500}
.op-ready .ico{width:15px; height:15px; color:var(--gold-ink)}

/* fields */
.op-fields{display:grid; gap:16px}
@media (min-width:640px){.op-fields{grid-template-columns:1fr 1fr} .op-wide{grid-column:1/-1}}
.op-f{display:grid; gap:7px; align-content:start}
.op-f > span{font-size:.9rem; font-weight:500; color:var(--ink)}
.op-f > span i{font-style:normal; color:var(--bad)}
.op-f small,.op-themes legend small{font-weight:400; color:var(--soft); font-size:.8rem; margin-left:4px}
.op-f input,.op-f textarea{min-height:50px; padding:12px 16px; font-size:1rem; background:var(--surface)}
.op-help{color:var(--gold-ink); font-size:.84rem; min-height:1.2em}
.op-help.warn{color:var(--warn)}
.op-msg{display:none; font-style:normal; font-size:.82rem; color:var(--bad)}
.op-f.invalid input,.op-f.invalid textarea{border-color:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}
.op-f.invalid .op-msg,.op-accept.invalid .op-msg{display:block}

/* theme swatches */
.op-themes{margin:28px 0 0; padding:0; border:0; min-width:0}
.op-themes legend{padding:0; margin-bottom:10px; font-size:.9rem; font-weight:500; color:var(--ink)}
.op-theme-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.op-theme{position:relative; display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:.84rem; line-height:1.35; transition:border-color .2s, background .2s}
.op-theme small{color:var(--soft); font-size:.74rem}
.op-theme input{position:absolute; opacity:0; pointer-events:none}
.op-theme:hover{border-color:var(--gold-ink)}
.op-theme:has(input:checked){border-color:var(--gold-ink); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); box-shadow:0 0 0 1px var(--gold-ink); font-weight:500}
.op-theme:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.op-sw{display:flex; flex:none}
.op-sw i{width:16px; height:16px; margin-right:-5px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line)}
.op-sw-q{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--gold-ink); font-weight:600}
.op-link{display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--gold-ink); font-size:.88rem; font-weight:500}
.op-link .ico{width:17px; height:17px}

/* channel segmented control */
.op-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.op-seg label{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:8px; border:1.5px solid var(--line-strong); border-radius:var(--r); cursor:pointer; font-size:.9rem; color:var(--ink); transition:border-color .2s, background .2s}
.op-seg input{position:absolute; opacity:0; pointer-events:none}
.op-seg .ico{width:18px; height:18px; color:var(--gold-ink)}
.op-seg label:has(input:checked){border-color:var(--gold-ink); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); box-shadow:0 0 0 1px var(--gold-ink); font-weight:500}
.op-seg label:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}

/* accept + submit */
.op-accept{padding:18px 20px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.op-accept.invalid{border-color:var(--bad)}
.op-check{display:flex; gap:12px; align-items:flex-start; color:var(--ink); line-height:1.7; cursor:pointer; font-size:.92rem}
.op-check input{flex:none; width:20px; height:20px; margin-top:4px}
.op-submit{min-height:58px; font-size:1.05rem; box-shadow:0 18px 34px -16px rgba(199,164,106,.8)}
.op-submit .ico{width:18px; height:18px}
.op-ask{text-align:center; color:var(--soft); font-size:.9rem}
.doc .err ul,.op-form .err ul{margin:6px 0 0; padding-left:20px; color:inherit}

/* summary */
.op-sum{position:sticky; top:84px}
.op-sum-card{position:relative; overflow:hidden; padding:26px 24px; border-radius:var(--r); background:linear-gradient(165deg,#1C2E45,var(--rk-navy) 60%); color:var(--rk-ivory); border:1px solid rgba(199,164,106,.45); box-shadow:var(--sh-2)}
.op-sum-card::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--rk-gold),transparent)}
.op-sum-card .lp-kick{color:var(--rk-gold)}
.op-sum-card h3{margin-top:8px; color:var(--rk-ivory); font:600 1.2rem/1.4 var(--f-body)}
.op-sum-card dl{margin:16px 0 0}
.op-sum-card dl div{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(247,242,235,.1); font-size:.9rem}
.op-sum-card dt{color:var(--ivory-soft)} .op-sum-card dd{margin:0; text-align:right; font-weight:500}
.op-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:16px}
.op-total > span{color:var(--ivory-soft)}
.op-total del{margin-right:6px; color:var(--ivory-soft); font-size:.9rem}
.op-total b{font-size:1.8rem; color:var(--rk-ivory)}
.op-save{margin-top:6px; text-align:right; color:var(--gold-soft); font-size:.84rem}
.op-sum-trust{margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(247,242,235,.12); list-style:none; display:grid; gap:8px; font-size:.84rem; color:var(--ivory-soft)}
.op-sum-trust li{display:flex; gap:8px; align-items:center}
.op-sum-trust .ico{width:15px; height:15px; color:var(--rk-gold)}

/* phones: summary becomes a compact bar at the bottom */
.op-bar{display:none}
@media (max-width:979px){
  .op-sum{position:static}
  .op-main{padding-bottom:110px}
  .op-bar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:45; display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border-radius:var(--r); background:rgba(15,26,40,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(199,164,106,.35); box-shadow:0 18px 40px -16px rgba(0,0,0,.6); color:var(--rk-ivory)}
  .op-bar > div{display:grid; flex:1; min-width:0; line-height:1.3}
  .op-bar small{color:var(--gold-soft); font-size:.74rem}
  .op-bar b{font-size:1.1rem}
  .op-bar .btn{background:var(--rk-gold); border-color:var(--rk-gold); color:var(--rk-navy); min-height:44px}
}
@media (max-width:420px){
  .op-seg label span{font-size:.82rem}
  .op-theme-grid{grid-template-columns:1fr 1fr}
}