/* =====================================================================
   TEKA LOYALTY — style.css
   Empat preset tema. Kedai pilih satu masa daftar, boleh tukar kemudian.
   Sengaja preset dan bukan color picker penuh — kalau kedai pilih warna
   sendiri, sistem akan nampak buruk dan itu memburukkan nama kita.
   ===================================================================== */

:root{
  color-scheme: light only;
  --line:rgba(0,0,0,.13);
  --amber:#B8862F;
  --merah:#B43C3C;
  --arch:44px 44px 6px 6px;
}

/* ---------- preset tema ---------- */
body[data-tema="navy"]{
  --gelap:#232B49; --gelap-deep:#161C32; --gelap-soft:#3A4469;
  --terang:#F8F3EA; --terang-dim:#E2DACB;
  --aksen:#C6A074; --aksen-light:#E7D2B7;
}
body[data-tema="hutan"]{
  --gelap:#1F3A2E; --gelap-deep:#142619; --gelap-soft:#35594A;
  --terang:#F4F1E4; --terang-dim:#DED9C4;
  --aksen:#B08D57; --aksen-light:#DCC79C;
}
body[data-tema="arang"]{
  --gelap:#1E1E20; --gelap-deep:#121213; --gelap-soft:#3A3A3E;
  --terang:#F5F2EC; --terang-dim:#DCD8CF;
  --aksen:#D6A93C; --aksen-light:#EBD08A;
}
body[data-tema="bata"]{
  --gelap:#43221C; --gelap-deep:#2C1512; --gelap-soft:#6A3B31;
  --terang:#FAF2E9; --terang-dim:#E8DACA;
  --aksen:#C87F4A; --aksen-light:#E6BC93;
}


body[data-tema="laut"]{
  --gelap:#123A40; --gelap-deep:#0B2429; --gelap-soft:#2A5C63;
  --terang:#F1F5F2; --terang-dim:#D6E0DA;
  --aksen:#7FB2A8; --aksen-light:#B6D6CE;
}
body[data-tema="plum"]{
  --gelap:#2E1B33; --gelap-deep:#1D1021; --gelap-soft:#4E3355;
  --terang:#F7F1F5; --terang-dim:#E2D5DE;
  --aksen:#B98BA8; --aksen-light:#DCC0D2;
}
body[data-tema="kopi"]{
  --gelap:#33261C; --gelap-deep:#211710; --gelap-soft:#57422F;
  --terang:#FAF4EB; --terang-dim:#E7DBC9;
  --aksen:#C79A5F; --aksen-light:#E3C79A;
}
body[data-tema="zaitun"]{
  --gelap:#2C3320; --gelap-deep:#1B2114; --gelap-soft:#4C5638;
  --terang:#F6F5E9; --terang-dim:#E1DFC9;
  --aksen:#A9B36B; --aksen-light:#CBD29B;
}

/* muka gelap (kad customer) vs muka terang (admin) */
body.muka-gelap { --page:var(--gelap);  --ink:var(--terang); }
body.muka-terang{ --page:var(--terang); --ink:var(--gelap);  }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Atribut hidden mesti menang walaupun ada peraturan display lain */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;color-scheme:light only;background:#232B49}
html.h-terang{background:#F8F3EA}

body.rk{
  background:var(--page); color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:300;
  min-height:100dvh; padding-bottom:env(safe-area-inset-bottom);
}
.bg-lock{position:fixed;inset:-2px;background:var(--page);z-index:-2;pointer-events:none}
.wrap{background:var(--page);position:relative;z-index:1}

/* ---------- wordmark ---------- */
.brand{text-align:center;padding-top:8px}
.brand h1{font-family:'Playfair Display',serif;font-weight:600;
  letter-spacing:.19em;text-indent:.19em}
.brand .sub{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:9px;
  color:var(--aksen);font-size:.58rem;font-weight:500;letter-spacing:.32em;text-indent:.32em}
.brand .sub::before,.brand .sub::after{content:'';height:1px;width:30px;
  background:var(--aksen);opacity:.75}

h2{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:.05em}
.eyebrow{font-size:.6rem;font-weight:500;letter-spacing:.3em;text-indent:.3em;opacity:.75}
.script{font-family:'Sacramento',cursive;line-height:1}
.lead{font-size:.84rem;line-height:1.6;opacity:.85;margin-top:8px}

/* ---------- butang ---------- */
.btn{display:block;width:100%;border:none;border-radius:40px;padding:16px 20px;margin-top:14px;
  min-height:52px;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:500;font-size:.79rem;
  letter-spacing:.13em;text-indent:.13em;text-transform:uppercase;
  transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn:focus-visible,.pilih:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}
.btn-solid{background:var(--aksen);color:var(--gelap)}
.btn-gelap{background:var(--gelap);color:var(--terang)}
.btn-ghost{background:transparent;border:1px solid var(--aksen);color:var(--aksen-light)}
.btn-quiet{background:none;border:none;width:100%;margin-top:18px;padding:10px;cursor:pointer;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;color:inherit}
.btn.busy{position:relative;color:transparent!important}
.btn.busy::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid var(--gelap);border-top-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite}
.btn-gelap.busy::after{border-color:var(--terang);border-top-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- borang ---------- */
.field{margin-top:16px}
.field label{display:block;font-size:.58rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;opacity:.7;margin-bottom:7px}
.field input,.field select{width:100%;border:1px solid var(--line);background:#fff;
  border-radius:16px;padding:15px 16px;min-height:52px;
  font-family:'Poppins',sans-serif;font-size:1.05rem;color:#1a1a1a}
.field input:focus,.field select:focus{outline:2px solid var(--aksen);outline-offset:1px}
/* Contoh dalam kotak kena JELAS sebagai contoh, bukan nampak macam
   jawapan yang sudah ditaip. */
.field input::placeholder{color:#9a9a9a;opacity:.42;font-weight:300}
.field input:focus::placeholder{opacity:.22}
.bantu{font-size:.7rem;opacity:.6;margin-top:7px;line-height:1.55}
.err{margin-top:13px;background:rgba(180,60,60,.14);border-left:3px solid var(--merah);
  padding:11px 13px;border-radius:0 10px 10px 0;font-size:.8rem;display:none}
.err.show{display:block}
.ok-box{margin-top:13px;background:rgba(60,140,90,.14);border-left:3px solid #3C8C5A;
  padding:12px 14px;border-radius:0 10px 10px 0;font-size:.82rem;line-height:1.6;display:none}
.ok-box.show{display:block}

/* ---------- pemilih tema ---------- */
.tema-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}
.pilih{border:2px solid rgba(255,255,255,.14);border-radius:15px;padding:7px 4px;cursor:pointer;
  background:rgba(255,255,255,.05);font-family:'Poppins',sans-serif;font-size:.58rem;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:inherit}
.pilih .swatch{display:block;height:30px;border-radius:9px;margin-bottom:6px;position:relative}
.pilih .swatch i{position:absolute;right:6px;bottom:6px;width:11px;height:11px;border-radius:50%}
.pilih[aria-pressed="true"]{border-color:var(--aksen);background:rgba(255,255,255,.12)}

/* ---------- kad pratonton ---------- */
.pv{margin-top:14px;border:1px solid var(--aksen);border-radius:var(--arch);
  padding:22px 18px 18px;text-align:center;background:rgba(255,255,255,.05)}
.pv .mono{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--aksen);color:var(--gelap);
  font-family:'Playfair Display',serif;font-weight:600;font-size:1.15rem;letter-spacing:.02em}
.pv .nm{font-family:'Playfair Display',serif;font-weight:600;font-size:1.02rem;
  letter-spacing:.15em;line-height:1.35}
.pv .kd{font-size:.53rem;letter-spacing:.26em;margin-top:6px;color:var(--aksen)}
.pv .kotak{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px 4px 0}
.pv .kotak i{aspect-ratio:3/4;border-radius:12px 12px 3px 3px;
  border:1px solid var(--terang-dim);opacity:.4}
.pv .kotak i:first-child{background:var(--terang);border-color:var(--terang);opacity:1}
.pv .alamat{margin-top:15px;padding-top:12px;border-top:1px solid var(--gelap-soft);
  font-size:.66rem;letter-spacing:.02em;opacity:.6;word-break:break-all}

/* ---------- kad ---------- */
.kad{margin-top:24px;background:rgba(255,255,255,.06);
  border:1px solid var(--aksen);border-radius:var(--arch);padding:28px 22px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:60;
  max-width:88vw;background:var(--terang);color:var(--gelap);border-radius:40px;padding:13px 22px;
  font-size:.8rem;font-weight:500;opacity:0;transition:all .28s;pointer-events:none;
  box-shadow:0 12px 32px rgba(0,0,0,.3);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   Kunci palet — WebView yang paksa dark mode akan inject
   body{background:#0B0B0D!important} SELEPAS stylesheet ini.
   Selector `html body.rk` (0,1,2) mengalahkan `body` (0,0,1).
   ===================================================================== */
@media (prefers-color-scheme:dark){
  html, html body.rk, html body.rk .bg-lock, html body.rk .wrap{
    background:var(--page)!important; color:var(--ink)!important;
  }
  html body.rk input, html body.rk select, html body.rk textarea{
    background:#fff!important; color:#1a1a1a!important;
    -webkit-text-fill-color:#1a1a1a!important; color-scheme:light only;
  }
  html body.rk input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 100px #fff inset!important;
    -webkit-text-fill-color:#1a1a1a!important;
  }
}
@media (forced-colors:active){ *{forced-color-adjust:none} }