/* RedCup design tokens, shared by the customer (cx), mover (mx) and merchant (kx)
   apps: fonts, colour roles for light and dark, type, space, radius, motion. */

@font-face{font-family:"Clash Display";src:url("../fonts/ClashDisplay-Semibold.3ac748889874.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../fonts/ClashDisplay-Bold.ea80c2358066.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-latin-var.65850a373e25.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* brand red scale (600 = RedCup #C42E21) */
  --red-50:#FDF3F2;--red-100:#FBE3E0;--red-200:#F6C4BF;--red-300:#EE9A92;--red-400:#E3665B;
  --red-500:#D43F33;--red-600:#C42E21;--red-700:#A3251A;--red-800:#821F17;--red-900:#5E1712;
  --lime:#C6F432;--lime-ink:#1B2400;
  --amber-bg:#FFF2D6;--amber-ink:#7A4E00;

  /* light theme roles */
  --bg:#FAF7F2;          /* warm off-white ground */
  --sheet:#FFFFFF;       /* receipt sheets */
  --sheet-2:#F3EEE6;     /* recessed fields, chips */
  --ink:#111111;         /* text */
  --ink-2:#4A443D;       /* secondary text */
  --muted:#6E665D;       /* tertiary text, >=4.5:1 on bg and sheet */
  --line:#E6DED2;        /* receipt rules */
  --line-strong:#111111;
  --brand:var(--red-600);   /* colour blocks + primary actions */
  --brand-ink:#FFFFFF;
  --brand-text:var(--red-600); /* red used as text on the ground */
  --brand-soft:var(--red-50);
  --ok-bg:var(--lime);--ok-ink:var(--lime-ink);
  --focus:var(--red-600);
  --scrim:rgba(17,17,17,.42);
  --sh-1:0 1px 2px rgba(17,17,17,.05),0 4px 12px -6px rgba(17,17,17,.12);
  --sh-2:0 18px 40px -18px rgba(17,17,17,.38),0 2px 6px rgba(17,17,17,.06);
  --grain-op:.10;
  --strip-bg:#111111;--strip-fg:#F5F0E9;--float-bg:#FFFFFF;--float-edge:rgba(17,17,17,.06);

  /* type */
  --display:"Clash Display","Inter",system-ui,sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-d1:2.25rem;--fs-d2:1.75rem;--fs-d3:1.375rem;--fs-d4:1.125rem;
  --fs-body:1rem;--fs-sm:.875rem;--fs-xs:.78rem;

  /* space, radius, motion */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:56px;
  --r-chip:12px;--r-card:18px;--r-sheet:24px;--r-pill:999px;
  --hair:1px;
  --d-1:120ms;--d-2:220ms;--d-3:380ms;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --tab-h:64px;--safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (min-resolution:2dppx){:root{--hair:.5px}}

/* dark: true ink ground, sheets lift one step; red text brightens for contrast */
:root[data-theme="dark"]{
  --bg:#0E0E0E;--sheet:#191715;--sheet-2:#24211E;--ink:#F5F0E9;--ink-2:#CBC3B8;--muted:#A39A8F;
  --line:#2F2B27;--line-strong:#F5F0E9;--brand-text:var(--red-400);--brand-soft:#2A1513;
  --focus:var(--red-400);--scrim:rgba(0,0,0,.6);
  --sh-1:0 1px 0 rgba(255,255,255,.03),0 6px 16px -8px rgba(0,0,0,.7);
  --sh-2:0 24px 48px -16px rgba(0,0,0,.85);
  --amber-bg:#33270F;--amber-ink:#FFD58A;--grain-op:.14;--strip-bg:#24211E;--strip-fg:#F5F0E9;--float-bg:#2A2622;--float-edge:rgba(255,255,255,.09);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E0E;--sheet:#191715;--sheet-2:#24211E;--ink:#F5F0E9;--ink-2:#CBC3B8;--muted:#A39A8F;
    --line:#2F2B27;--line-strong:#F5F0E9;--brand-text:var(--red-400);--brand-soft:#2A1513;
    --focus:var(--red-400);--scrim:rgba(0,0,0,.6);
    --sh-1:0 1px 0 rgba(255,255,255,.03),0 6px 16px -8px rgba(0,0,0,.7);
    --sh-2:0 24px 48px -16px rgba(0,0,0,.85);
    --amber-bg:#33270F;--amber-ink:#FFD58A;--grain-op:.14;--strip-bg:#24211E;--strip-fg:#F5F0E9;--float-bg:#2A2622;--float-edge:rgba(255,255,255,.09);
    color-scheme:dark;
  }
}

/* green: the emerald night from the merchant waitlist art. Deep green ground,
   sheets lift in greener steps, mint for text accents, emerald for actions
   (#158A50 keeps white button text above 4.5:1). Red stays as the dot accent. */
:root[data-theme="green"]{
  --bg:#06110B;--sheet:#0C1D14;--sheet-2:#13301F;--ink:#EAFBF2;--ink-2:#B9DCCB;--muted:#8AB39F;
  --line:#1F3E2E;--line-strong:#EAFBF2;
  --brand:#158A50;--brand-ink:#FFFFFF;--brand-text:#6FF0B4;--brand-soft:#0F3323;
  --focus:#6FF0B4;--scrim:rgba(0,10,5,.65);
  --sh-1:0 1px 0 rgba(111,240,180,.04),0 6px 16px -8px rgba(0,0,0,.75);
  --sh-2:0 24px 48px -16px rgba(0,0,0,.85),0 0 40px -18px rgba(47,191,122,.35);
  --amber-bg:#2E2A0E;--amber-ink:#FFD58A;--grain-op:.14;
  --strip-bg:#0A1E14;--strip-fg:#EAFBF2;--float-bg:#11281C;--float-edge:rgba(111,240,180,.14);
  color-scheme:dark;
}

/* amber: the mover ad's night. Near-black with an amber undertone, gold for
   text accents and active tabs, red kept for actions and the dot (as in the ad). */
:root[data-theme="amber"]{
  --bg:#070503;--sheet:#130D06;--sheet-2:#1F1509;--ink:#FFF8EC;--ink-2:#E6D6BC;--muted:#B39C7B;
  --line:#33250F;--line-strong:#FFF8EC;
  --brand:var(--red-600);--brand-ink:#FFFFFF;--brand-text:#FFC24B;--brand-soft:#2E1C07;
  --focus:#FFC24B;--scrim:rgba(5,3,1,.66);
  --sh-1:0 1px 0 rgba(255,194,75,.04),0 6px 16px -8px rgba(0,0,0,.75);
  --sh-2:0 24px 48px -16px rgba(0,0,0,.85),0 0 40px -18px rgba(242,169,59,.35);
  --amber-bg:#3A2A0C;--amber-ink:#FFD58A;--grain-op:.14;
  --strip-bg:#1A1006;--strip-fg:#FFF8EC;--float-bg:#20160A;--float-edge:rgba(255,194,75,.16);
  color-scheme:dark;
}

/* velvet: deep wine velvet. Plum-black ground, sheets in warmer wine steps,
   rose for text accents, a raspberry red for actions (white text stays >4.5:1). */
:root[data-theme="velvet"]{
  --bg:#13050B;--sheet:#220A16;--sheet-2:#321021;--ink:#FFF1F5;--ink-2:#EBCBD6;--muted:#BE8FA0;
  --line:#46182C;--line-strong:#FFF1F5;
  --brand:#B3123F;--brand-ink:#FFFFFF;--brand-text:#FF8FB0;--brand-soft:#3A0F22;
  --focus:#FF8FB0;--scrim:rgba(10,2,6,.68);
  --sh-1:0 1px 0 rgba(255,143,176,.04),0 6px 16px -8px rgba(0,0,0,.75);
  --sh-2:0 24px 48px -16px rgba(0,0,0,.85),0 0 40px -18px rgba(179,18,63,.45);
  --amber-bg:#3A2410;--amber-ink:#FFD58A;--grain-op:.14;
  --strip-bg:#1C0712;--strip-fg:#FFF1F5;--float-bg:#2A0C1B;--float-edge:rgba(255,143,176,.16);
  color-scheme:dark;
}

/* ---- Date range picker (partials/range_picker.html), shared by all apps ---- */
.rp{display:flex;align-items:center;gap:8px;position:relative;max-width:100%}
.rp svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rp-step{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
.rp-step:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.rp-step.off{opacity:.35;pointer-events:none}
.rp-pop{position:static;min-width:0}
.rp-btn{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 12px;border-radius:14px;cursor:pointer;
  background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);user-select:none;min-width:0}
.rp-btn::-webkit-details-marker{display:none}
.rp-btn:hover,.rp-pop[open] .rp-btn{box-shadow:inset 0 0 0 1.5px var(--ink)}
.rp-btn>svg:first-child{color:var(--brand-text,var(--red))}
.rp-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.rp-txt b{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-txt small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-caret{width:16px!important;height:16px!important;opacity:.6;transition:transform .15s}
.rp-pop[open] .rp-caret{transform:rotate(180deg)}
.rp-panel{position:absolute;z-index:60;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 32px));max-width:calc(100vw - 32px);
  background:var(--sheet);color:var(--ink);border-radius:18px;padding:16px;box-shadow:0 24px 48px -16px rgba(0,0,0,.35),inset 0 0 0 1px var(--line)}
.rp.rp-start .rp-panel{left:0;transform:none}
.rp.rp-end .rp-panel{left:auto;right:0;transform:none}
.rp-h{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rp-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.rp .rp-presets a{padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);background:var(--sheet-2,rgba(0,0,0,.05))}
.rp .rp-presets a.on{background:var(--ink);color:var(--sheet)}
.rp a.rp-step{color:var(--ink)}
.rp-dates{display:flex;align-items:flex-end;gap:8px}
.rp-dates label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.rp-dates input{width:100%;min-height:44px;padding:8px 10px;border-radius:12px;border:0;font:600 14px/1.2 inherit;font-family:inherit;
  color:var(--ink);background:var(--sheet-2,rgba(0,0,0,.05));box-shadow:inset 0 0 0 1px var(--line);color-scheme:light dark}
.rp-arrow{padding-bottom:12px;color:var(--muted)}
.rp-go{margin-top:12px;width:100%;min-height:46px;border:0;border-radius:999px;font:700 15px/1 inherit;font-family:inherit;cursor:pointer;
  background:var(--brand,var(--red));color:var(--brand-ink,#fff)}
@media print{.rp{display:none!important}}
@media (max-width:640px){
  .rp-pop[open]::before{content:"";position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.45)}
  .rp .rp-panel,.rp.rp-start .rp-panel,.rp.rp-end .rp-panel{position:fixed;z-index:1000;left:0;right:0;top:auto;bottom:0;transform:none;
    width:auto;max-width:none;border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
  .rp-panel::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line);margin:-6px auto 14px}
}

/* ---- Chat replies (static/js/chat-reply.js), customer + merchant ---- */
[data-mid]{position:relative;touch-action:pan-y}
.rq{display:flex;flex-direction:column;gap:2px;width:100%;min-width:140px;margin:0 0 6px;padding:6px 10px;border:0;border-left:3px solid var(--brand-text,var(--red));
  border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer}
.rq b{font-size:12px;font-weight:700;color:var(--brand-text,var(--red))}
.bubble.me .rq b,.msg.mine .rq b{color:inherit;opacity:.9}
.rq span{font-size:13px;line-height:1.3;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.bubble.has-ph .rq{margin:0 0 6px}
.rply-btn{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;border:0;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--sheet);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;opacity:0;transition:opacity .15s;pointer-events:none}
.bubble.me>.rply-btn,.msg.mine>.rply-btn{left:-42px}
.bubble.them>.rply-btn,.msg.theirs>.rply-btn{right:-42px}
@media (hover:hover){[data-mid]:hover>.rply-btn,.rply-btn:focus-visible{opacity:1;pointer-events:auto}}
.rply-btn:focus-visible{opacity:1;pointer-events:auto}
@media (hover:none){
  .rply-btn{opacity:0;pointer-events:none}
  .rq-armed>.rply-btn{opacity:1}
  .bubble.me>.rply-btn,.msg.mine>.rply-btn,.bubble.them>.rply-btn,.msg.theirs>.rply-btn{left:-42px;right:auto}
}
.rq-flash{animation:rqflash 1.2s ease}
@keyframes rqflash{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-text,var(--red)) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.rq-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 6px 6px 0;border-radius:14px;background:var(--sheet);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.rq-bar[hidden]{display:none}
.rq-bar .rq{flex:1;min-width:0;margin:0;cursor:default;background:transparent;color:var(--ink)}
.rq-bar .rq span{-webkit-line-clamp:1}
.rq-x{flex:none;width:36px;height:36px;border:0;border-radius:999px;background:var(--sheet-2,rgba(0,0,0,.06));color:var(--ink);font-size:14px;cursor:pointer}
.bubble:has(>.rq){display:block!important;min-width:200px}
.bubble:has(>.rq)>span{display:block}
.rply-btn svg{width:18px!important;height:18px!important;flex:none}