/* ============================================================
   pro.css — Design system Homestay Benting Lintang
   CSS3 moden: custom properties, clamp(), grid, backdrop-filter,
   prefers-color-scheme, prefers-reduced-motion.
   Ditulis sendiri (tiada CDN) supaya laman laju & kekal stabil.
   ============================================================ */

/* ---------- 1. Token reka bentuk ---------- */
:root {
    /* Jenama — diambil dari poster: hijau limau + teal gelap */
    --brand-900:#0A2E2F;
    --brand-800:#0F3D3E;
    --brand-700:#155F5C;
    --brand-600:#1B7A71;
    --brand-100:#E4F1EE;
    --accent-500:#C6DB2E;   /* limau */
    --accent-600:#AFC526;
    --accent-ink:#2A3300;
    --sun-500:#F0A93B;      /* amber */
    --sun-100:#FDF1DE;
    --red-600:#C9453F;
    --red-100:#FBEAE8;

    /* Neutral */
    --paper:#F7F6F2;
    --card:#FFFFFF;
    --card-2:#FCFBF8;
    --line:#E7E3DA;
    --line-2:#D8D3C7;
    --ink:#14201F;
    --ink-soft:#41615D;
    --ink-mute:#7B8C88;

    /* Bentuk */
    --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

    /* Ruang & saiz */
    --pad:clamp(16px,2.2vw,26px);
    --gap:clamp(12px,1.6vw,20px);
    --shell:1180px;

    /* Bayang berlapis (nampak "pro", bukan kotak rata) */
    --sh-1:0 1px 2px rgba(16,32,30,.06), 0 1px 3px rgba(16,32,30,.04);
    --sh-2:0 4px 10px rgba(16,32,30,.06), 0 12px 28px -12px rgba(16,32,30,.18);
    --sh-3:0 18px 50px -18px rgba(16,32,30,.32), 0 6px 16px rgba(16,32,30,.06);

    /* Taip */
    --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:#0C1616; --card:#122020; --card-2:#162828;
        --line:#22403D; --line-2:#2C4F4B;
        --ink:#EAF2F0; --ink-soft:#A8C0BC; --ink-mute:#7E9793;
        --brand-100:#143030; --accent-ink:#E8F5A8;
        --red-100:#3A2120; --sun-100:#33280F;
        --sh-1:0 1px 3px rgba(0,0,0,.5);
        --sh-2:0 10px 30px -12px rgba(0,0,0,.7);
        --sh-3:0 24px 60px -20px rgba(0,0,0,.85);
    }
}

/* ---------- 2. Reset ringkas & asas ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body {
    font-family:var(--font);
    background:var(--paper);
    color:var(--ink);
    line-height:1.55;
    font-size:clamp(15px,1.05vw,16.5px);
    -webkit-font-smoothing:antialiased;
    min-height:100dvh;
    display:flex; flex-direction:column;
}

img,svg,video { display:block; max-width:100%; height:auto; }
a { color:var(--brand-700); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--brand-600); }
button,input,select,textarea { font:inherit; color:inherit; }

:focus-visible { outline:3px solid var(--accent-500); outline-offset:2px; border-radius:6px; }

h1,h2,h3,h4 { line-height:1.15; letter-spacing:-.02em; font-weight:800; }
h1 { font-size:clamp(1.85rem,4.4vw,3.1rem); }
h2 { font-size:clamp(1.25rem,2.4vw,1.7rem); }
h3 { font-size:clamp(1.02rem,1.5vw,1.18rem); }
p  { text-wrap:pretty; }

.shell { width:min(100% - 2*var(--pad), var(--shell)); margin-inline:auto; }
.stack > * + * { margin-top:var(--gap); }
.muted { color:var(--ink-mute); }
.small { font-size:.86rem; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.center { text-align:center; }
.hide { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 3. Header ---------- */
.topbar {
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--line);
}
.topbar-in {
    width:min(100% - 2*var(--pad), var(--shell)); margin-inline:auto;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding-block:11px;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand-logo {
    width:42px; height:42px; flex:0 0 42px; border-radius:13px;
    background:linear-gradient(150deg,var(--brand-700),var(--brand-900));
    display:grid; place-items:center; color:var(--accent-500);
    font-weight:800; font-size:1.18rem; box-shadow:var(--sh-1);
}
.brand-txt strong { display:block; font-size:.97rem; letter-spacing:-.01em; }
.brand-txt small  { display:block; font-size:.74rem; color:var(--ink-mute); letter-spacing:.04em; text-transform:uppercase; }

.nav { display:flex; align-items:center; gap:6px; }
.nav a {
    padding:8px 14px; border-radius:var(--r-pill); font-size:.9rem; font-weight:600;
    text-decoration:none; color:var(--ink-soft); transition:background .18s var(--ease),color .18s var(--ease);
}
.nav a:hover { background:var(--card-2); color:var(--ink); }
.nav a.on { background:var(--brand-800); color:#fff; }
.nav a.cta { background:var(--accent-500); color:var(--accent-ink); }
.nav a.cta:hover { background:var(--accent-600); }

/* ---------- 4. Butang ---------- */
.btn {
    --btn-bg:var(--brand-800); --btn-fg:#fff;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 20px; border:1px solid transparent; border-radius:var(--r-pill);
    background:var(--btn-bg); color:var(--btn-fg) !important;
    font-weight:700; font-size:.94rem; text-decoration:none; cursor:pointer;
    transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
    box-shadow:var(--sh-1); white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn:active { transform:translateY(0); }
.btn-accent { --btn-bg:var(--accent-500); --btn-fg:var(--accent-ink); }
.btn-accent:hover { --btn-bg:var(--accent-600); }
.btn-ghost { --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line-2); box-shadow:none; }
.btn-ghost:hover { --btn-bg:var(--card-2); }
.btn-danger { --btn-bg:var(--red-600); --btn-fg:#fff; }
.btn-wa { --btn-bg:#25D366; --btn-fg:#04310F; }
.btn-sm { padding:8px 14px; font-size:.85rem; }
.btn-block { width:100%; }
.btn[disabled],.btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }

/* ---------- 5. Kad & permukaan ---------- */
.card {
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:var(--pad); box-shadow:var(--sh-1);
}
.card-lift { box-shadow:var(--sh-2); }
.card-quiet { background:var(--card-2); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.card-head h2,.card-head h3 { margin:0; }
.eyebrow { font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-600); font-weight:800; }

/* ---------- 6. Pill / chip / nota ---------- */
.pill {
    display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
    font-size:.76rem; font-weight:700; letter-spacing:.01em; white-space:nowrap;
    background:var(--brand-100); color:var(--brand-800);
}
.pill-hijau { background:#E3F3E6; color:#1C6B33; }
.pill-amber { background:var(--sun-100); color:#8A5A0B; }
.pill-merah { background:var(--red-100); color:var(--red-600); }
.pill-kelabu{ background:#ECEBE6; color:#5C6663; }
.pill-dark  { background:var(--brand-800); color:#fff; }
@media (prefers-color-scheme: dark) {
    .pill-hijau{background:#173A22;color:#8FE0A6}
    .pill-amber{background:#3A2C10;color:#F2C879}
    .pill-kelabu{background:#243230;color:#A9BCB8}
}

.chip {
    display:inline-flex; align-items:center; gap:8px; padding:9px 14px;
    background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-pill);
    font-size:.88rem; font-weight:600; color:var(--ink-soft);
}
.chip svg { width:17px; height:17px; stroke:var(--brand-600); }

.note {
    border-left:4px solid var(--brand-600); background:var(--brand-100);
    padding:13px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.9rem;
}
.note-merah { border-color:var(--red-600); background:var(--red-100); }
.note-amber { border-color:var(--sun-500); background:var(--sun-100); }
.note-hijau { border-color:#2E9E52; background:#E7F6EC; }
@media (prefers-color-scheme: dark) {
    .note-hijau{background:#14301E;border-color:#3FAF63}
}

/* ---------- 7. Grid susun atur ---------- */
.split { display:grid; gap:var(--gap); grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
.split-2 { display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); }
.tiles { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
@media (max-width:960px) { .split { grid-template-columns:1fr; } }
@media (max-width:640px) { .split-2 { grid-template-columns:1fr; } }

/* ---------- 8. Borang ---------- */
.field { display:block; margin-bottom:14px; }
.field > label,.field > .lbl { display:block; font-weight:700; font-size:.86rem; margin-bottom:6px; }
.hint { font-weight:500; color:var(--ink-mute); font-size:.79rem; }
.input,textarea.input,select.input {
    width:100%; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
    background:var(--card); transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.input:hover { border-color:var(--ink-mute); }
.input:focus { outline:none; border-color:var(--brand-600); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-600) 18%,transparent); }
.input.bad { border-color:var(--red-600); box-shadow:0 0 0 4px color-mix(in srgb,var(--red-600) 14%,transparent); }
textarea.input { resize:vertical; min-height:74px; }
.field .err { display:none; color:var(--red-600); font-size:.82rem; margin-top:6px; font-weight:600; }
.field.invalid .err { display:block; }
.field.invalid .input { border-color:var(--red-600); }

.check { display:flex; gap:11px; align-items:flex-start; font-size:.9rem; }
.check input { margin-top:3px; width:19px; height:19px; accent-color:var(--brand-700); flex:0 0 19px; }

/* Petak muat naik */
.drop {
    display:block; text-align:center; padding:24px 18px; cursor:pointer;
    border:2px dashed var(--line-2); border-radius:var(--r-md); background:var(--card-2);
    transition:border-color .18s var(--ease),background .18s var(--ease);
}
.drop:hover { border-color:var(--brand-600); background:var(--brand-100); }
.drop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.drop strong { display:block; font-size:.95rem; }
.drop small { display:block; color:var(--ink-mute); margin-top:4px; }
.preview { display:none; gap:14px; align-items:center; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card-2); }
.preview.show { display:flex; }
.preview img { width:104px; height:70px; object-fit:cover; border-radius:var(--r-xs); border:1px solid var(--line); }

/* ---------- 9. Langkah (stepper) ---------- */
.steps { display:flex; gap:8px; margin-bottom:var(--gap); overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.steps::-webkit-scrollbar { display:none; }
.step {
    display:flex; align-items:center; gap:9px; padding:9px 15px; border-radius:var(--r-pill);
    background:var(--card); border:1px solid var(--line); color:var(--ink-mute);
    font-size:.85rem; font-weight:700; white-space:nowrap;
}
.step b { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--line); color:var(--ink-soft); font-size:.78rem; }
.step.on { background:var(--brand-800); border-color:var(--brand-800); color:#fff; }
.step.on b { background:var(--accent-500); color:var(--accent-ink); }
.step.done { color:var(--brand-700); border-color:var(--brand-100); background:var(--brand-100); }
.step.done b { background:var(--brand-700); color:#fff; }

/* ---------- 10. Ringkasan tempahan ---------- */
.sticky { position:sticky; top:82px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:.9rem; }
.kv dt { color:var(--ink-mute); }
.kv dd { font-weight:600; text-align:right; }
.kv dd strong { font-weight:800; }
.line-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
.line-row.total { border-bottom:0; font-weight:800; font-size:1.12rem; padding-top:12px; }
.price-hero { font-size:clamp(2rem,5vw,2.7rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.price-hero small { font-size:.9rem; font-weight:600; color:var(--ink-mute); letter-spacing:0; }

/* ---------- 11. Hero ---------- */
.hero { display:grid; gap:var(--gap); grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:stretch; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; } }
.hero-media { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); background:var(--brand-900); }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-body { display:flex; flex-direction:column; justify-content:center; gap:16px; }
.facility-row { display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- 12. Kalendar admin ---------- */
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.cal .wd { text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); padding:6px 0; }
.cal .wd.weekend { color:var(--sun-500); }
.cell {
    min-height:104px; padding:7px 8px; border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--card); display:flex; flex-direction:column; gap:5px; transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.cell.empty { background:transparent; border-color:transparent; }
.cell.weekend { background:var(--card-2); }
.cell.today { border-color:var(--brand-600); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 16%,transparent); }
.cell .num { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.cell .num .masuk { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-600); font-weight:800; }
.who {
    font-size:.76rem; font-weight:700; padding:5px 8px; border-radius:var(--r-xs);
    color:#fff; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition:transform .14s var(--ease),filter .14s var(--ease);
}
.who:hover { transform:translateX(2px); filter:brightness(1.06); }
.who-confirmed { background:linear-gradient(135deg,#1E7A46,#155C36); }
.who-pending   { background:linear-gradient(135deg,#E8A93A,#C68213); color:#3A2703; }
.who-blocked   { background:linear-gradient(135deg,#8C9694,#6C7775); }
.who-clash     { background:linear-gradient(135deg,#D4534C,#AF342E); }
.cell .out { font-size:.68rem; color:var(--ink-mute); margin-top:auto; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
@media (max-width:820px) {
    .cal-wrap { overflow-x:auto; }
    .cal { min-width:720px; gap:5px; }
    .cell { min-height:88px; padding:5px; }
}

/* ---------- 13. Garis masa ---------- */
.tl-wrap { overflow-x:auto; }
.tl { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; min-width:760px; }
.tl-head-row, .tl-row { display:grid; grid-template-columns:190px minmax(0,1fr); }
.tl-row { border-top:1px solid var(--line); }
.tl-days { display:flex; background:var(--card-2); border-bottom:1px solid var(--line); }
.tl-days .d {
    flex:1 1 0; min-width:0; text-align:center; padding:7px 0;
    font-size:.66rem; color:var(--ink-mute); border-right:1px solid var(--line);
}
.tl-days .d:last-child { border-right:0; }
.tl-days .d b { display:block; font-size:.78rem; color:var(--ink); }
.tl-days .d.weekend { background:var(--sun-100); }
.tl-days .d.today { background:var(--brand-800); color:#fff; }
.tl-days .d.today b { color:#fff; }
.tl-unit { padding:12px 14px; border-right:1px solid var(--line); background:var(--card-2); }
.tl-unit strong { display:block; font-size:.9rem; }
.tl-unit small { color:var(--ink-mute); font-size:.78rem; }
.tl-lane { position:relative; display:flex; align-items:stretch; min-height:48px; }
.tl-lane .dc { flex:1 1 0; min-width:0; border-right:1px solid var(--line); }
.tl-lane .dc:last-child { border-right:0; }
.tl-lane .dc.weekend { background:color-mix(in srgb,var(--sun-100) 60%,transparent); }
.bar {
    position:absolute; top:8px; bottom:8px; padding:6px 9px; border-radius:var(--r-xs); color:#fff;
    font-size:.76rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:6px;
    cursor:pointer; z-index:2; overflow:hidden; white-space:nowrap;
    transition:filter .16s var(--ease);
}
.bar:hover { filter:brightness(1.08); }
.bar-confirmed { background:linear-gradient(135deg,#1E7A46,#155C36); }
.bar-pending   { background:linear-gradient(135deg,#E8A93A,#C68213); color:#3A2703; }
.bar-blocked   { background:linear-gradient(135deg,#8C9694,#6C7775); }
.bar-clash     { background:linear-gradient(135deg,#D4534C,#AF342E); }
.bar-tag { opacity:.85; font-variant-numeric:tabular-nums; }
.today-line { position:absolute; top:0; bottom:0; width:2px; background:var(--brand-600); z-index:3; }

/* ---------- 14. Senarai tempahan ---------- */
.list { display:flex; flex-direction:column; gap:8px; max-height:520px; overflow-y:auto; padding-right:4px; }
.item {
    display:flex; align-items:center; gap:12px; padding:11px 13px; cursor:pointer;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
    transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.item:hover { border-color:var(--line-2); box-shadow:var(--sh-1); transform:translateX(2px); }
.item.on { border-color:var(--brand-600); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 14%,transparent); }
.avatar {
    width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:grid; place-items:center;
    background:var(--brand-100); color:var(--brand-800); font-weight:800;
}
.item-main { flex:1; min-width:0; }
.item-main strong { display:block; font-size:.93rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-main small { color:var(--ink-mute); font-size:.79rem; }
.item-side { text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }

/* ---------- 15. Mesej WhatsApp ---------- */
.msgbox {
    white-space:pre-wrap; font-family:var(--mono); font-size:.83rem; line-height:1.6;
    background:var(--card-2); border:1px solid var(--line); border-left:4px solid #25D366;
    border-radius:var(--r-sm); padding:14px; max-height:290px; overflow:auto;
}

/* ---------- 16. Footer ---------- */
.footer { margin-top:auto; border-top:1px solid var(--line); background:var(--card); }
.footer-in {
    width:min(100% - 2*var(--pad), var(--shell)); margin-inline:auto;
    padding:26px 0; display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
    font-size:.85rem; color:var(--ink-mute);
}
.footer a { color:var(--ink-soft); }

/* ---------- 17. Bar tindakan mudah alih ---------- */
.mobile-bar {
    display:none; position:sticky; bottom:0; z-index:40;
    background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:11px var(--pad);
    align-items:center; justify-content:space-between; gap:12px;
}
@media (max-width:960px) { .mobile-bar { display:flex; } .sticky { position:static; } }

/* ---------- 18. Jadual ---------- */
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th,.table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.table th { font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute); }
.table tbody tr:hover { background:var(--card-2); }

/* ---------- 19. Animasi masuk ringan ---------- */
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.rise { animation:rise .45s var(--ease) both; }
.rise-2 { animation-delay:.06s; } .rise-3 { animation-delay:.12s; }

/* ---------- 20. Header mudah alih ---------- */
.brand-txt .b-short { display:none; }
@media (max-width:660px) {
    .brand-logo { width:38px; height:38px; flex-basis:38px; border-radius:11px; font-size:1.02rem; }
    .brand-txt strong { font-size:.86rem; }
    .brand-txt .b-long { display:none; }
    .brand-txt .b-short { display:block; }
    .brand-txt small { display:none; }
    .nav a { padding:7px 11px; font-size:.8rem; }
    .nav a.cta { padding:7px 13px; }
    .instr { display:none; }
}
@media (max-width:420px) {
    .nav a.mid { display:none; }
}

/* ---- soalan lazim (FAQ) ---- */
.faq { display:grid; gap:9px; margin-top:6px; }
.faq-item {
  border:1px solid var(--line); border-radius:14px; background:var(--card-2, #F7F5F0);
  padding:0 16px; transition:border-color .18s ease;
}
.faq-item[open] { border-color:var(--brand, #15715F); }
.faq-item summary {
  cursor:pointer; list-style:none; padding:14px 0; font-weight:600; font-size:.96rem;
  display:flex; align-items:center; gap:10px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:"+"; margin-left:auto; font-weight:800; font-size:1.15rem; color:var(--brand, #15715F);
}
.faq-item[open] summary::after { content:"–"; }
.faq-item p { margin:0 0 15px; font-size:.92rem; line-height:1.65; color:var(--ink-soft, #3C514D); }