:root { --navy:#0b1730; --navy-2:#142445; --gold:#d3ad43; --paper:#f5f6f9; --ink:#14203a; --muted:#65708a; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { max-width:720px; min-height:100vh; margin:auto; padding:26px 20px 110px; }
.topbar { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.company-logo { width:88px; height:54px; object-fit:cover; object-position:center; border-radius:12px; box-shadow:0 4px 12px #0b173022; }
.brand-copy { min-width:0; }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:1.05rem; } h2 { font-size:1.18rem; }
.icon-button { display:grid; flex:0 0 42px; width:42px; height:42px; place-content:center; gap:5px; border:1px solid #e1e5ed; border-radius:12px; background:#fff; color:var(--navy); box-shadow:0 4px 12px #16213b0c; }
.menu-button span { display:block; width:20px; height:2px; border-radius:2px; background:currentColor; }
.menu-list { display:grid; gap:9px; margin-top:20px; }
.menu-list button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:15px 16px; border:1px solid #e4e7ee; border-radius:14px; background:#fff; color:var(--navy); font-weight:800; text-align:left; }
.menu-list button::after { content:'→'; color:var(--gold); font-size:1.2rem; }
.welcome-card { padding:25px; border-radius:24px; color:#fff; background:linear-gradient(135deg,var(--navy),var(--navy-2)); box-shadow:0 14px 35px #0b173022; }
.welcome-card h2 { margin-bottom:10px; font-size:1.65rem; } .welcome-card p:last-child { margin-bottom:0; line-height:1.5; color:#dce4f5; } .gold { color:#f0cf72; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin:30px 0 14px; }.section-heading h2 { margin:0; }
.text-button { border:0; background:transparent; color:#9b7410; font-weight:800; }
.service-grid { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
.service-card { position:relative; min-height:185px; padding:18px; text-align:left; border:1px solid #e5e7ed; border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 5px 18px #16213b0c; }.service-card strong,.service-card small { display:block; }.service-card strong { margin:14px 0 7px; font-size:1rem; }.service-card small { color:var(--muted); line-height:1.35; }.service-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#a57b0c; background:#fff4d1; font-size:1.3rem; }.arrow { position:absolute; right:16px; bottom:16px; color:var(--gold); font-size:1.4rem; }
.quick-actions { margin-top:28px; }.quick-actions h2 { margin-bottom:13px; }.action-row { display:grid; gap:10px; grid-template-columns:1fr 1fr; }.action-row button { padding:14px 8px; border:0; border-radius:14px; background:#fff; color:var(--navy); box-shadow:0 4px 12px #16213b0c; font-size:.8rem; font-weight:700; }.action-row span { display:block; margin-bottom:4px; color:var(--gold); font-size:1.2rem; }
.request-summary { margin-top:28px; }.request-preview { display:flex; width:100%; align-items:center; gap:12px; padding:16px; text-align:left; border:1px solid #e4e7ee; border-radius:16px; background:#fff; color:var(--ink); }.request-preview strong,.request-preview small { display:block; }.request-preview strong { font-size:.9rem; }.request-preview small { margin-top:4px; color:var(--muted); font-size:.78rem; }.request-preview-icon { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:10px; color:#9b7410; background:#fff4d1; }.request-preview .arrow { position:static; margin-left:auto; }
.status-card { display:flex; gap:12px; align-items:flex-start; margin-top:28px; padding:16px; border-radius:16px; background:#eef2fa; }.status-card strong { font-size:.9rem; }.status-card p { margin:4px 0 0; color:var(--muted); font-size:.8rem; line-height:1.4; }.status-dot { width:9px; height:9px; margin-top:5px; border-radius:50%; background:#44ae70; }
.bottom-nav { position:fixed; z-index:2; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:min(3vw,26px); padding:11px 15px 17px; border-top:1px solid #e9eaf0; background:#fff; }.bottom-nav button { display:grid; gap:3px; border:0; background:transparent; color:#8a93a7; font-size:.68rem; }.bottom-nav span { font-size:1.25rem; }.bottom-nav .active { color:#9c740b; font-weight:800; }
dialog { width:min(92vw,520px); padding:28px; border:0; border-radius:22px; color:var(--ink); box-shadow:0 20px 65px #07102066; } dialog::backdrop { background:#07102088; }.close-dialog { float:right; border:0; background:transparent; font-size:1.5rem; }.dialog-title { color:var(--navy); }.dialog-content { color:var(--muted); line-height:1.5; }.enquiry-form { display:grid; gap:12px; }.enquiry-form input,.enquiry-form select,.enquiry-form textarea { width:100%; padding:12px; border:1px solid #d7dbe5; border-radius:10px; font:inherit; }.submit { padding:13px; border:0; border-radius:10px; background:var(--navy); color:#fff; font-weight:800; }.success { padding:14px; border-radius:12px; color:#135c38; background:#e4f7eb; }.request-list { display:grid; gap:10px; }.request-item { display:flex; width:100%; align-items:center; gap:10px; padding:13px; text-align:left; border:1px solid #e6e8ef; border-radius:12px; background:#fff; color:var(--ink); }.request-item strong,.request-item small { display:block; }.request-item small { margin-top:3px; color:var(--muted); }.request-type { display:grid; width:34px; height:34px; place-items:center; border-radius:9px; color:#9b7410; background:#fff4d1; }.request-status { margin-left:auto; padding:5px 8px; border-radius:20px; color:#20603b; background:#e4f7eb; font-size:.7rem; font-weight:800; }.empty-state { padding:18px; border-radius:12px; color:var(--muted); background:#f3f5f9; text-align:center; }.detail-card { display:grid; gap:10px; padding:15px; border-radius:12px; background:#f3f5f9; }.detail-card p { margin:0; color:var(--muted); font-size:.82rem; }.detail-card strong { color:var(--ink); }
.form-error { padding:12px; border-radius:10px; color:#8a2431; background:#fdecee; font-size:.82rem; line-height:1.45; }
.estimate-box { padding:14px; border-radius:12px; background:#eef2fa; }.estimate-box p { margin:0; color:var(--muted); font-size:.78rem; }.estimate-box strong { display:block; margin-top:5px; color:var(--navy); font-size:1.25rem; }.estimate-box small { display:block; margin-top:4px; color:var(--muted); font-size:.7rem; }
.cost-breakdown { display:grid; gap:7px; margin:12px 0; }.cost-breakdown:empty { display:none; }.cost-breakdown div { display:flex; justify-content:space-between; gap:12px; padding-top:7px; border-top:1px solid #d8deea; color:var(--muted); font-size:.72rem; line-height:1.4; }.cost-breakdown div strong { flex:0 0 auto; margin:0; color:var(--ink); font-size:.76rem; }
.secondary-button { width:100%; margin-top:0.7rem; padding:13px; border:1px solid var(--gold); border-radius:10px; color:var(--navy); background:transparent; font:inherit; font-weight:800; }
.auth-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:14px; }.auth-links button,.staff-portal-link { padding:0; border:0; background:transparent; color:#8a680c; font:inherit; font-size:.78rem; font-weight:800; text-decoration:none; }.staff-portal-link { display:inline-block; margin-top:18px; }.account-summary { padding:12px 14px; border-radius:12px; background:#eef2fa; }.account-summary strong,.account-summary small { display:block; }.account-summary strong { color:var(--navy); font-size:.82rem; }.account-summary small { margin-top:4px; color:var(--muted); font-size:.7rem; }.auth-form input[readonly] { background:#f3f5f9; color:var(--muted); }
.account-number-card { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 16px; padding:14px; border:1px solid #f0df9d; border-radius:12px; background:#fffaf0; }.account-number-card span { color:#716b5a; font-size:.75rem; font-weight:700; }.account-number-card strong { color:#725500; font-size:1rem; letter-spacing:.04em; }
.date-label { display:grid; gap:5px; color:var(--muted); font-size:.76rem; font-weight:700; }.date-label input { color:var(--ink); }
.travel-options { display:grid; gap:9px; margin:0; padding:14px; border:1px solid #d7dbe5; border-radius:12px; }.travel-options legend { padding:0 5px; color:var(--navy); font-size:.82rem; font-weight:800; }.travel-options label { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:.82rem; }.travel-options input { width:auto; margin:0; accent-color:var(--navy); }.travel-options-error { margin:2px 0 0; color:#9a2534; font-size:.76rem; }
.destination-planner { display:grid; gap:10px; margin:0; padding:14px; border:1px solid #d7dbe5; border-radius:12px; }.destination-planner legend { padding:0 5px; color:var(--navy); font-size:.82rem; font-weight:800; }.destination-list { display:grid; gap:9px; }.destination-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(125px,.75fr) auto; gap:8px; align-items:center; }.destination-row input,.destination-row select { min-width:0; }.add-destination { justify-self:start; padding:8px 10px; border:1px solid #d7dbe5; border-radius:9px; background:#fff; color:var(--navy); font-weight:800; }.add-destination:disabled { opacity:.5; cursor:not-allowed; }.remove-destination { width:34px; height:34px; border:0; border-radius:8px; background:#fdecee; color:#9a2534; font-size:1.15rem; }.destination-planner small { color:var(--muted); font-size:.72rem; }
.traveller-count { display:grid; gap:12px; margin:0; padding:14px; border:1px solid #d7dbe5; border-radius:12px; }.traveller-count legend { padding:0 5px; color:var(--navy); font-size:.82rem; font-weight:800; }.traveller-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.traveller-count label { display:grid; gap:5px; color:var(--ink); font-size:.78rem; font-weight:800; }.traveller-count label small { min-height:2em; color:var(--muted); font-size:.68rem; font-weight:400; }.traveller-total { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:9px; background:#eef2fa; color:var(--navy); }.traveller-total span { font-size:.78rem; font-weight:800; }.traveller-total strong { font-size:1.15rem; }
.meal-plan { display:grid; gap:9px; margin:0; padding:14px; border:1px solid #d7dbe5; border-radius:12px; }.meal-plan legend { padding:0 5px; color:var(--navy); font-size:.82rem; font-weight:800; }.meal-plan small { color:var(--muted); font-size:.72rem; }
.preference-section { display:grid; gap:9px; margin:0; padding:14px; border:1px solid #d7dbe5; border-radius:12px; background:#fafbfc; }.preference-section[hidden] { display:none; }.preference-section legend { padding:0 5px; color:var(--navy); font-size:.82rem; font-weight:800; }
.conditional-hint { margin:0; padding:10px 12px; border-radius:9px; color:#5e687d; background:#f3f5f9; font-size:.74rem; line-height:1.4; }
.rate-card { margin:2px 0 5px; padding:14px; border:1px solid #f0df9d; border-radius:12px; background:#fffaf0; }.rate-card h3 { margin:0 0 9px; color:#6f5100; font-size:.88rem; }.rate-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; font-size:.8rem; }.rate-list li { display:flex; justify-content:space-between; gap:10px; }.rate-list strong { white-space:nowrap; color:#725500; }.rate-note { margin:10px 0 0; color:#716b5a; font-size:.72rem; line-height:1.45; }
.workforce-schedule,.staffing-selector { display:grid; gap:12px; margin:0; padding:14px; border:1px solid #d7dbe5; border-radius:12px; }.workforce-schedule legend,.staffing-selector legend { padding:0 5px; color:var(--navy); font-size:.82rem; font-weight:800; }.workforce-schedule > small,.waiter-note { color:var(--muted); font-size:.72rem; line-height:1.45; }.workforce-dates { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.workforce-dates label { display:grid; gap:5px; color:var(--muted); font-size:.75rem; font-weight:800; }
.staffing-selector { gap:9px; }.staffing-row { display:grid; grid-template-columns:minmax(165px,1.25fr) minmax(68px,.5fr) minmax(105px,.7fr); gap:8px; align-items:end; padding:10px; border:1px solid #e5e7ed; border-radius:11px; background:#fff; }.staffing-row > label:not(.staffing-choice) { display:grid; gap:4px; color:var(--muted); font-size:.68rem; font-weight:800; }.staffing-row input[type="number"] { min-width:0; padding:9px 8px; }.staffing-choice { display:flex; align-items:center; gap:9px; min-height:42px; }.staffing-choice input { width:auto; margin:0; accent-color:var(--navy); }.staffing-choice strong,.staffing-choice small { display:block; }.staffing-choice strong { color:var(--ink); font-size:.8rem; }.staffing-choice small { margin-top:3px; color:#8a680c; font-size:.68rem; }.staffing-row:has(.staffing-choice input:checked) { border-color:#d6b84d; background:#fffaf0; }.staffing-row input:disabled { opacity:.55; cursor:not-allowed; }.staffing-error,.workforce-date-error { margin:0; color:#9a2534; font-size:.76rem; }.waiter-note { padding:9px 10px; border-radius:8px; color:#725500; background:#fff4d1; font-weight:700; }
@media (max-width:520px) { .destination-row { grid-template-columns:1fr auto; }.destination-row select { grid-column:1 / -1; grid-row:2; } }
@media (max-width:520px) { .staffing-row { grid-template-columns:1fr 1fr; }.staffing-choice { grid-column:1 / -1; }.workforce-dates { grid-template-columns:1fr; } }
@media (max-width:440px) { .traveller-grid { grid-template-columns:1fr; }.traveller-count label small { min-height:0; } }
@media (max-width:390px) { .service-grid { grid-template-columns:1fr; }.service-card { min-height:145px; } }