/* =====================================================================
   checkout.css — gaya dikongsi oleh SEMUA halaman checkout
   (/checkout/travel/, /checkout/biasa/ dan /checkout/cuba/).

   Mekanik susun atur diwarisi daripada projek adik-beradik, tetapi SETIAP
   nilai visual diambil daripada laman sumber pemilik
   tapak sumber pemilik — lihat assets/brand.css untuk pengukuran.
   Checkout mesti terasa sebahagian daripada laman jualan GASS OFF.
   ===================================================================== */
:root{
  --bg:#ffffff;
  --forest:#154125;
  --forest-deep:#0F3019;
  --mint:#B2FAB7;
  --mint-soft:#EAF2EC;
  --leaf:#17AE16;
  --amber:#FFB400;
  --yellow:#FFD400;
  --cta:#FF0000;
  --cta-deep:#D60000;
  --night:#11100E;
  --card:#F4F8F5;
  --field:#ffffff;
  --line:rgba(21,65,37,.20);
  --ink:#334155;
  --ink-strong:#11100E;
  --muted:#5A6572;
  --white:#ffffff;
  --col:1140px;
  --pad:20px;
  --r-25:25px;
  --r-20:20px;
  --r-15:15px;
  --ff:'Poppins','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-alt:'Montserrat','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff);font-weight:400;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;line-height:1.3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 var(--pad)}
.band--forest{background:var(--forest)}
.center{text-align:center}
.h-lg{font-size:clamp(28px,6vw,35px);font-weight:700}
.h-md{font-size:clamp(22px,4.6vw,30px);font-weight:600}
.lead{font-size:clamp(16px,3.5vw,20px);color:var(--muted)}
.t-leaf{color:var(--leaf)}
.t-cta{color:var(--cta)}
.t-forest{color:var(--forest)}
.upper{text-transform:uppercase}

/* ---------- logo ---------- */
.logo{font-family:var(--ff);font-weight:900;font-size:clamp(26px,5.6vw,34px);
  letter-spacing:-1px;line-height:1;display:inline-block;color:var(--white)}
.logo .gass{color:var(--mint)}
.logo .off{color:var(--yellow)}


.logo-sub{display:block;font-family:var(--ff);font-size:.32em;letter-spacing:1px;font-weight:500;color:var(--mint);margin-top:6px}

/* ---------- butang ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:500;text-align:center;border-radius:var(--r-25);
  padding:14px 30px;line-height:1.25;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(.94)}
.btn:active{filter:brightness(.88)}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.btn--cta{background:var(--cta);color:#fff}
.btn--cta:hover{background:var(--cta-deep)}
.btn--lg{font-size:clamp(20px,4.4vw,28px);padding:16px 34px}
.btn--block{display:flex;width:100%}
.btn .ico{font-size:1.1em;line-height:1}

/* ---------- topbar + pautan balik ---------- */
.top{border-bottom:1px solid rgba(255,255,255,.18)}
.top .wrap{display:flex;align-items:center;justify-content:center;
  padding-top:14px;padding-bottom:14px;text-align:center}
.top .wrap>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.back{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;
  font-size:15px;font-weight:600;color:var(--forest);
  padding:8px 2px;min-height:44px;border-radius:8px;transition:color .16s ease}
.back:hover{color:var(--leaf)}
.back:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.back .ar{font-size:16px;line-height:1}

.main{flex:1 0 auto;padding:8px 0 46px}
.steps-note{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:600;text-align:center;margin:22px 0 8px}

/* =====================================================================
   RINGKASAN PAKEJ (dikunci — tiada pemilih pakej)
   ===================================================================== */
.pkg{
  background:var(--mint);border:1px solid rgba(21,65,37,.14);
  border-radius:var(--r-20);padding:20px;margin:14px 0 24px;
}
.pkg__top{display:flex;gap:16px;align-items:flex-start}
.pkg__img{flex:0 0 96px;width:96px;border-radius:var(--r-15);overflow:hidden;background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.5)}
.pkg__img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pkg__head{min-width:0;flex:1 1 auto}
.pkg__name{font-size:clamp(22px,4.8vw,30px);font-weight:600;color:#000;line-height:1.3}
.pkg__for{font-size:13px;font-weight:600;color:#2C4433;letter-spacing:.4px;
  text-transform:uppercase;margin-top:6px}
.pkg__price{font-weight:900;color:var(--forest);letter-spacing:-1px;
  font-size:clamp(32px,7.4vw,42px);line-height:1;margin-top:12px}
.pkg__price .cur{font-size:.46em;font-weight:700;vertical-align:super;margin-right:3px;letter-spacing:0}
.pkg__list{margin-top:18px;padding-top:16px;border-top:1px solid rgba(21,65,37,.18);
  display:grid;grid-template-columns:1fr;gap:9px}
.pkg__list li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:#000;line-height:1.5}
.tick{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--leaf);
  display:grid;place-items:center;margin-top:3px}
.tick svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:440px){.pkg__list{grid-template-columns:1fr 1fr;gap:9px 16px}}

/* =====================================================================
   BORANG
   ===================================================================== */
.ofm{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-20);padding:24px 20px 26px;
}
.ofm__head{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.ofm__head .step{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--forest);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.ofm__head h2{font-size:clamp(19px,4.2vw,24px);font-weight:600;color:var(--forest)}

.fld{margin-bottom:18px;min-width:0}
.fld>label,.fs__legend{display:block;font-weight:600;font-size:15px;letter-spacing:.2px;
  margin-bottom:8px;color:var(--ink-strong);padding:0}
.fld .hint{display:block;font-weight:400;font-size:13px;color:var(--muted);margin:-4px 0 8px}
.inp{
  width:100%;max-width:100%;min-width:0;background:var(--field);color:var(--ink-strong);font:inherit;font-size:16px;
  border:1.5px solid var(--line);border-radius:var(--r-15);padding:13px 14px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.inp::placeholder{color:#9AA3AE}
.inp:hover{border-color:rgba(21,65,37,.38)}
.inp:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(21,65,37,.18)}
.inp[aria-invalid="true"]{border-color:var(--cta);box-shadow:0 0 0 3px rgba(255,0,0,.16)}
textarea.inp{min-height:86px;resize:vertical;line-height:1.5}
select.inp{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23154125' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
select.inp option{background:#fff;color:#11100E}
.err{display:none;color:#C10000;font-size:14px;font-weight:600;margin:6px 0 0}
.err.on{display:block}
.row2{display:grid;grid-template-columns:1fr;gap:0 16px}
.row2>*{min-width:0}
@media(min-width:460px){.row2{grid-template-columns:110px 1fr}}

/* pilihan radio (hanya untuk kaedah bayaran, bila FPX dihidupkan) */
.fs{border:0;padding:0;margin:0 0 18px;min-width:0}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  position:relative;display:flex;align-items:center;gap:12px;min-width:0;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-15);
  padding:14px 15px;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.opt:hover{border-color:rgba(21,65,37,.4)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #9AA3AE;
  display:grid;place-items:center;transition:border-color .18s ease,box-shadow .18s ease}
.opt .dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--forest);
  transform:scale(0);transition:transform .18s ease}
.opt input:checked~.dot{border-color:var(--forest)}
.opt input:checked~.dot::after{transform:scale(1)}
.opt input:focus-visible~.dot{box-shadow:0 0 0 3px rgba(255,180,0,.6)}
.opt.is-sel{border-color:var(--forest);background:var(--mint-soft)}
.opt:has(input:checked){border-color:var(--forest);background:var(--mint-soft)}
.opt .txt{min-width:0;flex:1 1 auto}
.opt .lbl-t{display:block;font-weight:600;font-size:16px;color:var(--ink-strong);line-height:1.25}
.opt .lbl-s{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4}

/* baris COD-sahaja (bila FPX belum dibuka) */
.paycod{display:flex;align-items:center;gap:13px;background:var(--mint-soft);
  border:1.5px solid var(--line);border-radius:var(--r-15);padding:14px 15px;margin-bottom:18px}
.paycod__ico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;font-size:16px;line-height:1}
.paycod__txt{min-width:0}
.paycod__txt b{display:block;font-weight:600;font-size:16px;color:var(--ink-strong);line-height:1.25}
.paycod__txt span{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.4}

/* ringkasan pesanan */
.osum{background:#fff;border:1px dashed rgba(21,65,37,.35);border-radius:var(--r-15);
  padding:15px 16px;margin:0 0 18px}
.osum .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:15.5px;padding:5px 0;color:var(--ink)}
.osum .r em{font-style:normal;color:var(--muted);font-size:13px}
.osum .r b{font-weight:600;color:var(--ink-strong)}
.osum .r.tot{margin-top:9px;padding-top:11px;border-top:1px solid rgba(21,65,37,.22);
  font-weight:700;font-size:20px;color:var(--ink-strong)}
.osum .r.tot>span:first-child{white-space:nowrap}
@media(max-width:379px){
  .osum .r.tot{font-size:16.5px}
  .osum .r{font-size:13.5px}
}
.osum .r.tot .amt{color:var(--forest)}
.osum .free{color:var(--leaf);font-weight:700}

/* honeypot + status */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.go-turnstile{margin:0 0 16px;min-height:70px;display:grid;justify-items:center;gap:7px}
.go-turnstile>div{width:100%;max-width:300px}
/* Turnstile always paints a 300px-wide widget and injects its own stylesheet,
   so the container width we ask for is not reliable. The form's content box is
   viewport - 87px (wrap padding + card padding + border), which means 300px no
   longer fits below 387px — at 320px that used to give the WHOLE page a
   horizontal scrollbar. Pin the box to Turnstile's real 300px so the maths is
   deterministic, scale it down to fit, and collapse the layout space the scale
   no longer paints so the widget stays centred over its status line. */
@media(max-width:386px){
  .go-turnstile>div{width:300px;max-width:none;transform-origin:top left;
    transform:scale(.9);margin-right:-30px;margin-bottom:-6px}
}
@media(max-width:356px){
  .go-turnstile>div{transform:scale(.76);margin-right:-72px;margin-bottom:-14px}
}
.go-turnstile p{margin:0;color:var(--muted);font-size:13px;text-align:center;line-height:1.4}
.go-turnstile p.is-error{color:#C10000}
.ofm .btn[disabled],.ofm .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.ofm__err{display:none;margin:14px 0 0;padding:12px 14px;border-radius:12px;
  background:#FFECEC;border:1px solid rgba(255,0,0,.4);
  color:#A80000;font-size:14.5px;font-weight:600}
.ofm__err.on{display:block}
.ofm__note{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.55}
.ofm__note a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}

/* ---------- jalur kepercayaan ---------- */
.trust{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 20px}
.trust li{display:flex;align-items:center;gap:11px;background:var(--mint-soft);
  border:1px solid var(--line);border-radius:var(--r-15);padding:11px 13px;
  font-size:14.5px;font-weight:500;color:var(--ink-strong);line-height:1.4}
.trust .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--leaf);
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900}
@media(min-width:520px){.trust{grid-template-columns:1fr 1fr}.trust li:first-child{grid-column:1/-1}}

/* ---------- footer ---------- */
.foot{background:var(--night);color:#C9C9C9;font-family:var(--ff-alt);font-size:14px;line-height:1.7;
  padding:28px 0 36px;flex:0 0 auto}
.foot .wrap{max-width:900px;text-align:center}
.foot a{color:var(--mint);text-decoration:underline}
.foot__links{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 16px;margin:0 0 12px}
.foot__merchant{font-family:var(--ff);font-weight:900;letter-spacing:-1px;font-size:22px;overflow-wrap:anywhere}
.foot__merchant .gass{color:var(--mint)}
.foot__merchant .off{color:var(--yellow)}
/* Policy links are standalone navigation, not prose links, so give them a real
   44px touch target on phones and tablets. */
@media(max-width:900px){
  .foot__links a{display:inline-flex;align-items:center;min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{filter:none}
  html{scroll-behavior:auto}
}