/* Little Bangkok Reservations — shared styles (brand taken from the littlebangkok.com template) */
:root{
  --brown:#3F1E18; --brown-lt:#6B4038; --body:#4C4C4C; --mute:#857B75;
  --amber:#F08419; --amber-dk:#B9620F; --amber-soft:#FDF0E0;
  --white:#FFFFFF; --cream:#FFF8F0; --sand:#FBF3E9; --line:#F0E6D9; --line-2:#E3D5C3;
  --red:#C2362B; --red-soft:#FBE3E0; --green:#2F7A4F; --green-soft:#E1F1E7; --grey:#6E6762; --grey-soft:#F1EEEC;
  --shadow:0 2px 4px rgba(63,30,24,.03), 0 16px 34px -24px rgba(63,30,24,.25);
  --f-head:"Archivo", system-ui, sans-serif;
  --f-ui:"Outfit", system-ui, sans-serif;
  --f-body:"Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--white);color:var(--body);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);color:var(--brown);margin:0;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.lab{font-family:var(--f-head);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dk)}
.muted{color:var(--mute)}

/* header */
.site{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:10px;flex-wrap:wrap}
.site .logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.site .logo img{height:58px;width:auto}
.site .logo span{font-family:var(--f-ui);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brown-lt);border-left:1px solid var(--line-2);padding-left:14px}
.site .right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-head);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:13px 24px;border-radius:999px;border:1.5px solid var(--amber);background:var(--amber);color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--amber-dk);border-color:var(--amber-dk)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.out{background:transparent;color:var(--brown);border-color:var(--line-2)}
.btn.out:hover{background:var(--brown);border-color:var(--brown);color:#fff}
.btn.sm{padding:9px 16px;font-size:.72rem}
.btn.green{background:var(--green);border-color:var(--green)}
.btn.green:hover{background:#246140;border-color:#246140}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.soft{background:var(--amber-soft);border-color:var(--amber-soft);color:var(--amber-dk)}
.btn.soft:hover{background:var(--line);border-color:var(--line)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brown-lt)}
.btn.ghost:hover{background:var(--sand)}

/* form controls */
.field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--brown)}
.field em{font-style:normal;font-weight:400;color:var(--mute)}
.inp{width:100%;border:1px solid var(--line-2);background:var(--white);border-radius:10px;padding:12px 14px;font-size:1rem;font-weight:400;color:var(--brown)}
.inp:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brown) 50%),linear-gradient(135deg,var(--brown) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}
textarea.inp{min-height:90px;resize:vertical}
.err{color:var(--red);font-size:.9rem;min-height:1.2em}

/* status pills */
.pill{display:inline-block;font-family:var(--f-ui);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px;white-space:nowrap}
.p-new{background:var(--red);color:#fff}
.p-calling{background:var(--amber-soft);color:var(--amber-dk)}
.p-confirmed{background:var(--green-soft);color:var(--green)}
.p-no_answer{background:var(--grey-soft);color:var(--grey)}
.p-visited{background:var(--brown);color:#fff}
.p-no_show{background:var(--grey-soft);color:var(--red)}
.p-cancelled{background:var(--grey-soft);color:var(--grey);text-decoration:line-through}

/* code login */
.gate{min-height:calc(100vh - 80px);display:grid;place-items:center;padding-block:40px;background:var(--cream)}
.gate .box{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:32px 28px;width:min(360px,100%);display:grid;gap:18px;justify-items:center;text-align:center}
.gate h1{font-size:1.6rem}
.dots{display:flex;gap:12px;min-height:18px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--brown-lt)}
.dots i.on{background:var(--brown);border-color:var(--brown)}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:10px}
.pad button{height:64px;border-radius:14px;border:1px solid var(--line-2);background:var(--white);font-family:var(--f-head);font-size:1.5rem;font-weight:600;color:var(--brown);cursor:pointer}
.pad button:active{background:var(--sand)}
.pad .fn{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--brown);color:#fff;padding:11px 18px;border-radius:10px;font-size:.92rem;z-index:100;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.notice{background:var(--amber-soft);border:1px solid var(--line-2);border-radius:12px;padding:12px 16px;color:var(--brown);font-size:.92rem}

/* ---- Brand-driven colours (set from Admin → Brands & design) ---- */
body{background:var(--page-bg,var(--white))}
.site{background:var(--header-bg,var(--white))}
.site .logo span{color:var(--header-text,var(--brown-lt))}
[data-dark-header] .site{border-bottom-color:rgba(0,0,0,.6)}
[data-dark-header] .site .logo span{border-left-color:rgba(255,255,255,.18)}
[data-dark-header] .site .muted,[data-dark-header] .site .who{color:rgba(255,255,255,.78)}
[data-dark-header] .site .btn.out{color:#fff;border-color:rgba(255,255,255,.3)}
[data-dark-header] .site .btn.out:hover{background:var(--amber);border-color:var(--amber)}
.hero{background:var(--hero-bg,var(--cream))}
.hero h1{color:var(--hero-text,var(--brown))}
.hero h1 em{color:var(--accent,var(--amber-dk))}
.hero p{color:var(--hero-text,var(--brown-lt));opacity:.86}
.hero .lab{color:var(--accent,var(--amber-dk))}
[data-dark-hero] .hero .chips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:var(--hero-text,#fff)}
[data-dark-hero] footer{background:var(--hero-bg);color:rgba(255,255,255,.7);border-top-color:transparent}
.logos{display:flex;align-items:center;gap:14px}
.logos img{height:46px;width:auto;max-width:120px;object-fit:contain}