/* ============================================================================
   mycarwash.ae — design-system stylesheet
   Tokens + component styles, ported verbatim from the
   "mycarwash.ae Design System" (project 3abd2da8) that the marketing comp imports.
   Kept intact so colours, type, spacing and component classes match the source.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Tokens · colours (customer / light)
   --------------------------------------------------------------------------- */
:root{
  --teal:#0c8599;
  --teal-dark:#0a6f80;
  --teal-deep:#0c6f80;
  --teal-tint:#e3f4f6;
  --teal-soft:#eef3f5;
  --teal-soft-line:#dce5e9;
  --ink:#14191e;
  --sec:#5b6670;
  --mut:#8b949b;
  --line:#e1e7eb;
  --line-soft:#f1f5f7;
  --field:#fafbfc;
  --surface:#ffffff;
  --bg:#fafbfc;
  --frame-bg:#dde3e8;
  --green:#1e8e5a;
  --green-bg:#e6f5ec;
  --amber:#b7791f;
  --amber-bg:#fbf0dd;
  --danger:#c0392b;
  --danger-line:#ebcbc7;
  --whatsapp:#25d366;
  --dashed:#c7d0d6;
  --radio-off:#c7d0d6;
  --toggle-off:#cfd8de;
  --amber-line:#f0dfc0;
  --amber-icon-bg:#f5e3c4;
  --amber-text-soft:#8b7333;
  --star-off:#d5dce1;
  --chev-grey:#b4bec6;
  --scan-teal:#35d1b4;
  --disabled-label:#a6b0b8;
}

/* ---------------------------------------------------------------------------
   Tokens · colours (cleaner / dark)
   --------------------------------------------------------------------------- */
:root{
  --d-amber:#f0a83a;
  --d-ink:#f5f1e8;
  --d-sec:#a39d8f;
  --d-mut:#6e6960;
  --d-faint:#4a463f;
  --d-bg:#121110;
  --d-surface:#1c1a17;
  --d-elev:#242220;
  --d-elev-2:#161412;
  --d-line:#34312c;
  --d-line-soft:#26231f;
  --d-green:#7bc26a;
  --d-green-bg:#1b2e14;
  --d-green-line:#2f4a22;
  --d-red:#e8635f;
  --d-red-bg:#3a1512;
  --d-red-line:#5c2420;
  --d-amber-bg:#3a2a0f;
  --d-amber-bg-2:#241a09;
  --d-amber-line:#5c4318;
  --d-strip-offline:#241413;
  --d-on-amber:#5c4113;
  --d-on-green:#0c1a08;
}

/* ---------------------------------------------------------------------------
   Tokens · typography
   --------------------------------------------------------------------------- */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;

  --fs-bay:52px;          --lh-bay:1;        --ls-bay:-1.5px;
  --fs-money-hero:38px;   --ls-money-hero:-1px;
  --fs-money:30px;
  --fs-display:26px;      --ls-display:-0.5px;
  --fs-title:24px;        --ls-title:-0.5px;
  --fs-keypad:24px;

  --fs-lead:15px;         --lh-lead:1.5;
  --fs-body:16px;
  --fs-row-title:17px;
  --fs-card-title:18px;
  --fs-sub:14px;
  --fs-meta:13px;
  --fs-caption:12px;
  --fs-micro:11px;
  --fs-nano:10px;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;

  --ls-eyebrow:0.6px;
  --ls-bay-label:2px;
}

/* ---------------------------------------------------------------------------
   Tokens · radii
   --------------------------------------------------------------------------- */
:root{
  --r-chip:6px;
  --r-tc-check:6px;
  --r-tag:8px;
  --r-sync-btn:9px;
  --r-pay-btn:10px;
  --r-field-sm:11px;
  --r-field:12px;
  --r-toast:13px;
  --r-btn:15px;
  --r-panel:16px;
  --r-btn-lg:17px;
  --r-card:18px;
  --r-card-lg:20px;
  --r-viewport:24px;
  --r-screen:39px;
  --r-device:50px;
  --r-pill:99px;
  --r-round:50%;
}

/* ---------------------------------------------------------------------------
   Tokens · elevation
   --------------------------------------------------------------------------- */
:root{
  --sh-card:0 2px 12px rgba(20,30,40,.05);
  --sh-card-sm:0 2px 8px rgba(20,30,40,.03);
  --sh-card-list:0 2px 10px rgba(20,30,40,.04);
  --sh-segment:0 2px 6px rgba(20,30,40,.1);
  --sh-toast-light:0 12px 30px rgba(0,0,0,.25);
  --sh-toast-dark:0 12px 30px rgba(0,0,0,.5);
  --sh-lightbox:0 20px 50px rgba(0,0,0,.4);
  --sh-teal-cta:0 10px 24px rgba(12,133,153,.28);
  --sh-teal-logo:0 14px 30px rgba(12,133,153,.32);
  --sh-teal-card:0 12px 28px rgba(12,133,153,.28);
  --sh-amber-cta:0 8px 24px rgba(240,168,58,.28);
  --sh-device-light:0 40px 90px rgba(20,30,40,.28),0 0 0 2px #23272b;
  --sh-device-dark:0 40px 90px rgba(0,0,0,.6),0 0 0 2px #211f1c,inset 0 0 0 1px #2c2926;
  --sh-knob:0 1px 3px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------------------------
   Tokens · spacing
   --------------------------------------------------------------------------- */
:root{
  --sp-1:2px;  --sp-2:4px;  --sp-3:6px;  --sp-4:8px;  --sp-5:9px;
  --sp-6:11px; --sp-7:12px; --sp-8:14px; --sp-9:16px; --sp-10:18px;
  --sp-11:20px;--sp-12:22px;--sp-13:24px;--sp-14:26px;--sp-15:30px;

  --gutter-cleaner:20px;
  --gutter-customer:24px;
  --gutter-account:22px;
  --pad-card:18px;
  --pad-panel:16px;
  --gap-list:13px;
  --gap-chip:9px;

  --h-statusbar:46px;
  --h-tabbar-customer:74px;
  --h-tabbar-cleaner:70px;
  --h-syncstrip:42px;
  --h-key:56px;
  --h-input:52px;
  --device-w:390px;
  --device-h:844px;
}

/* ---------------------------------------------------------------------------
   Tokens · semantic role aliases
   --------------------------------------------------------------------------- */
.theme-customer{
  --surface-app:var(--bg);
  --surface-card:var(--surface);
  --surface-sunken:var(--line-soft);
  --border-hairline:var(--line);
  --border-soft:var(--line-soft);
  --text-primary:var(--ink);
  --text-body:var(--sec);
  --text-muted:var(--mut);
  --accent:var(--teal);
  --accent-tint:var(--teal-tint);
  --accent-on:#ffffff;
  --status-paid:var(--green);
  --status-paid-bg:var(--green-bg);
  --status-due:var(--amber);
  --status-due-bg:var(--amber-bg);
  --status-alert:var(--danger);
  --shadow-card:var(--sh-card);
  --shadow-cta:var(--sh-teal-cta);
}
.theme-cleaner{
  --surface-app:var(--d-bg);
  --surface-card:var(--d-surface);
  --surface-sunken:var(--d-elev-2);
  --surface-raised:var(--d-elev);
  --border-hairline:var(--d-line);
  --border-soft:var(--d-line-soft);
  --text-primary:var(--d-ink);
  --text-body:var(--d-sec);
  --text-muted:var(--d-mut);
  --accent:var(--d-amber);
  --accent-tint:var(--d-amber-bg);
  --accent-on:var(--d-bg);
  --status-paid:var(--d-green);
  --status-paid-bg:var(--d-green-bg);
  --status-due:var(--d-amber);
  --status-due-bg:var(--d-amber-bg);
  --status-alert:var(--d-red);
  --status-alert-bg:var(--d-red-bg);
  --shadow-card:none;
  --shadow-cta:var(--sh-amber-cta);
}

/* ---------------------------------------------------------------------------
   Tokens · motion
   --------------------------------------------------------------------------- */
:root{
  --dur-press:.09s; --dur-key:.08s; --dur-chip:.12s; --dur-btn:.15s;
  --dur-panel:.18s; --dur-toast:.22s; --dur-toggle:.2s; --dur-screen:.3s;
  --dur-progress:.4s; --ease-out:ease-out;
  --press-scale:.98; --press-scale-tight:.95;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes pnl{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ---------------------------------------------------------------------------
   Component · PrimaryButton
   --------------------------------------------------------------------------- */
.mcw-btn{width:100%;margin-top:24px;border:none;border-radius:15px;padding:17px;font-size:16px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .15s;cursor:pointer}
.mcw-btn:active{transform:scale(.98)}
.mcw-btn--teal{background:var(--teal);color:#fff}
.mcw-btn--dark{background:var(--ink);color:#fff}
.mcw-btn--amber{background:var(--d-amber);color:var(--d-bg);font-weight:800}
.mcw-btn--disabled{background:var(--line);color:var(--mut);cursor:default}
.mcw-btn--disabled:active{transform:none}
.mcw-btn--notop{margin-top:0}

/* Dark-surface disabled state (used on the cleaner-app form) */
.mcw-btn--disabled-dark{background:#2b2925;color:var(--d-mut);cursor:default}
.mcw-btn--disabled-dark:active{transform:none}

/* ---------------------------------------------------------------------------
   Component · StatusBadge (customer)
   --------------------------------------------------------------------------- */
.mcw-badge{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px}
.mcw-badge--paid{background:var(--green-bg);color:var(--green)}
.mcw-badge--due{background:var(--amber-bg);color:var(--amber)}
.mcw-badge__label{font-size:12px;font-weight:700}

/* ---------------------------------------------------------------------------
   Component · CleanerBadge
   --------------------------------------------------------------------------- */
.mcw-cbadge{flex:none;display:inline-flex;align-items:center;border-radius:999px}
.mcw-cbadge--sm{gap:6px;padding:6px 11px}
.mcw-cbadge--lg{gap:8px;padding:8px 15px}
.mcw-cbadge--washed,.mcw-cbadge--paid{background:var(--d-green-bg);color:var(--d-green)}
.mcw-cbadge--due{background:var(--d-amber-bg);color:var(--d-amber)}
.mcw-cbadge--notfound{background:var(--d-red-bg);color:var(--d-red)}
.mcw-cbadge__label{font-weight:800;font-size:12px}
.mcw-cbadge--lg .mcw-cbadge__label{font-size:15px}

/* ---------------------------------------------------------------------------
   Component · SyncStrip
   --------------------------------------------------------------------------- */
.mcw-sync{flex:none;height:42px;border-top:1px solid var(--d-line);display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 16px;background:var(--d-surface)}
.mcw-sync.is-offline{background:var(--d-strip-offline)}
.mcw-sync.is-shaking{animation:shk .4s}
.mcw-sync__conn{background:none;border:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;padding:4px 0}
.mcw-sync__conn:active{opacity:.6}
.mcw-sync__dot{width:8px;height:8px;border-radius:50%}
.mcw-sync__connLabel{font-size:12px;font-weight:700;color:var(--d-ink)}
.mcw-sync__right{display:flex;align-items:center;gap:10px}
.mcw-sync__pending{font-size:12px;font-weight:600}
.mcw-sync__btn{background:var(--d-elev);border:1px solid var(--d-line);border-radius:9px;padding:5px 11px;display:flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
.mcw-sync__btn:active{transform:scale(.95)}
.mcw-sync__icon{display:inline-flex;color:var(--d-amber)}
.mcw-sync__icon.is-spinning{animation:spin .8s linear infinite}
.mcw-sync__btnLabel{font-size:12px;font-weight:700;color:var(--d-amber)}

/* ---------------------------------------------------------------------------
   Component · StatusBar
   --------------------------------------------------------------------------- */
.mcw-statusbar{flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;font-size:14px;font-weight:600;z-index:20}
.mcw-statusbar--light{color:var(--ink)}
.mcw-statusbar--cleaner{color:var(--d-ink);letter-spacing:.3px}
.mcw-statusbar__icons{display:flex;align-items:center;gap:6px}
.mcw-statusbar--cleaner .mcw-statusbar__icons{gap:7px}