/* Dark mode (ported from the RCS Enquiry Form). html.dark is set by theme.js: each business picks Light,
   Dark or Auto as the default and visitors can flip it with the sun/moon button.
   The colour tokens flip: --white becomes the page (near-black) and --black the strong colour (near-white),
   so solid buttons and selected states invert the way iOS does. Panels that are dark in both modes
   (hero, footer, toasts) put the original tokens back for everything inside them. */
html.dark {
  color-scheme: dark;
  --black: #f5f5f7;
  --white: #000;
  --ink: #f5f5f7;
  --steel: #a1a1a6;
  --line: #38383a;
  --mist: #1c1c1e;
  --surface: #1c1c1e;
  --danger: #ff6961;
  --ok: #4cd964;
  --glass: rgba(28, 28, 30, .78);
  --glass-strong: rgba(44, 44, 46, .9);
  --glass-edge: rgba(255, 255, 255, .08);
  --glass-line: rgba(255, 255, 255, .08);
  --shine: inset 0 1px 0 rgba(255, 255, 255, .06);
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -10px rgba(0, 0, 0, .7);
  --lift-hi: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 44px -14px rgba(0, 0, 0, .8);
}
html.dark, html.dark body { background: #000; }

/* Always-dark panels keep their original colours inside */
html.dark .hero, html.dark .site-foot, html.dark .toast, html.dark .brand-preview .dark {
  --black: #000; --white: #fff; --ink: #fff; --steel: #c7c7cc; --mist: #2c2c2e; --line: #3a3a3c;
}
html.dark .hero-inner { border: 1px solid rgba(255, 255, 255, .08); }
html.dark .site-foot { border-top: 1px solid #1c1c1e; }

/* Black-branded businesses: solid buttons and selected states become light, with dark text (as Rightway) */
html.dark.brand-mono .btn-primary, html.dark.brand-mono .btn-wa, html.dark.brand-mono .quick .primary, html.dark.brand-mono .svc-pick.on, html.dark.brand-mono .day.selected,
html.dark.brand-mono .sent .big-tick, html.dark.brand-mono .choice:has(input:checked), html.dark.brand-mono .next-go {
  background: linear-gradient(180deg, #fff, #dcdce1) !important;
  color: #000 !important; border-color: transparent;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8);
}
html.dark.brand-mono .btn-primary:hover { background: linear-gradient(180deg, #fff, #e8e8ed) !important; }
html.dark.brand-mono .btn-primary svg, html.dark.brand-mono .btn-wa svg, html.dark.brand-mono .quick .primary svg { color: #000; stroke: currentColor; }
html.dark.brand-mono .svc-pick.on .svc-text span, html.dark.brand-mono .choice:has(input:checked) .sub, html.dark.brand-mono .choice:has(input:checked) .status-tag { color: rgba(0, 0, 0, .62); }
html.dark.brand-mono .svc-pick.on .svc-check, html.dark.brand-mono .choice:has(input:checked) .tick { background: #000; border-color: #000; color: #fff; }
html.dark.brand-mono .hero .btn-primary { background: linear-gradient(180deg, #fff, #dcdce1) !important; color: #000 !important; }
html.dark.brand-mono .hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .35); }

/* Surfaces that were plain white */
html.dark .site-head, html.dark .flow-top, html.dark .flow-foot, html.dark .top, html.dark .tabs,
html.dark body.on-home:not(.scrolled) .site-head { background: rgba(18, 18, 20, .86); border-color: rgba(255, 255, 255, .08); color: var(--ink); }
html.dark .tabs { border-top-color: rgba(255, 255, 255, .1); }
html.dark .tabs a { color: #8e8e93; }
html.dark .tabs a[aria-current="page"] { background: #2c2c2e; color: #fff; box-shadow: none; }
html.dark .tabs .badge { box-shadow: 0 0 0 2px #000; }
html.dark .next, html.dark .svc-card, html.dark .cal-admin .day.has-open,
html.dark .presets button, html.dark .filter button { background: #1c1c1e; border-color: rgba(255, 255, 255, .08); box-shadow: none; }
html.dark .day.available { background: #2c2c2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html.dark .day.available:hover { background: #3a3a3c; }
html.dark .presets button[aria-pressed="true"], html.dark .filter button[aria-pressed="true"] { background: #f5f5f7; color: #000; border-color: #f5f5f7; }
html.dark .sticky-cta { background: rgba(18, 18, 20, .9); border-color: rgba(255, 255, 255, .08); }
html.dark .next-list a:hover, html.dark .daylist button:hover, html.dark .rows a:hover { background: rgba(255, 255, 255, .05); }

/* Form fields */
html.dark .input, html.dark .textarea, html.dark .select {
  background: #111113; border-color: #3a3a3c; color: var(--ink); box-shadow: none;
}
html.dark .input:focus, html.dark .textarea:focus, html.dark .select:focus { background: #2c2c2e; border-color: #8e8e93; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
html.dark .input::placeholder, html.dark .textarea::placeholder { color: #6e6e73; }
html.dark input[type="date"], html.dark input[type="time"] { color-scheme: dark; }
html.dark .segmented, html.dark .seg { background: rgba(118, 118, 128, .24); box-shadow: none; }
html.dark .segmented input:checked + span, html.dark .seg input:checked + span { background: #636366; color: #fff; border-color: transparent; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
html.dark .seg span { border-color: #3a3a3c; }
html.dark .chips input:checked + span { background: #f5f5f7; color: #000; border-color: #f5f5f7; }
html.dark .choice .tick { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); }
html.dark .switch span { background: #39393d; }
html.dark .switch input:checked + span { background: #34c759; }
html.dark .switch span::after { background: #fff; }
html.dark .check-line input, html.dark .consent input, html.dark .warn input { accent-color: #f5f5f7; }
html.dark .btn-quiet { background: #1c1c1e; border-color: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: none; }
html.dark .btn-danger { background: rgba(255, 105, 97, .08); border-color: rgba(255, 105, 97, .35); color: #ff6961; }
html.dark .icon-btn { background: #1c1c1e; border-color: rgba(255, 255, 255, .08); box-shadow: none; }

/* Sheets, notices, states */
html.dark .sheet { background: rgba(28, 28, 30, .96); box-shadow: 0 -10px 60px rgba(0, 0, 0, .7); }
html.dark .sheet .grab { background: #48484a; }
html.dark .sheet-back { background: rgba(0, 0, 0, .55); }
html.dark .warn, html.dark .gcal-status.bad { background: rgba(255, 159, 10, .14); color: #ffd60a; }
html.dark .gcal-status.good { background: rgba(48, 209, 88, .12); color: #a7f3bf; }
html.dark .err-banner { background: rgba(255, 69, 58, .14); border-color: rgba(255, 69, 58, .3); color: #ff9f9a; }
html.dark .toast.error { background: rgba(255, 69, 58, .92); }
html.dark .skeleton { background: linear-gradient(90deg, #1c1c1e, #2c2c2e, #1c1c1e); background-size: 200% 100%; }
html.dark .set-group .svc, html.dark .detail .section .notes, html.dark .detail .section .rows { background: rgba(255, 255, 255, .03); }
html.dark .msg-preview, html.dark .copy-row code, html.dark details.msg pre, html.dark .notice-box { background: #1c1c1e; color: var(--ink); }
html.dark .progress i { background: rgba(255, 255, 255, .12); }
html.dark .service-cols h3 { border-bottom-color: rgba(255, 255, 255, .5); }
html.dark .daylist .dl-head { border-bottom-color: rgba(255, 255, 255, .12); }
html.dark .legal-list li, html.dark .prose p { color: #d1d1d6; }
html.dark .legal-table th, html.dark .legal-table td { border-bottom-color: rgba(255, 255, 255, .1); }
html.dark .lede { color: #c7c7cc; }
html.dark .expect svg { background: #f5f5f7; stroke: #000; }

/* Calendars */
html.dark .day { color: #636366; }
html.dark .day.available { color: #fff; }
html.dark .day.blocked { color: #8e8e93; background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .08) 5px 6px); }
html.dark .legend .lg-off { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, .16) 4px 5px); }
html.dark .cal-admin .day { color: var(--ink); }
html.dark .cal-admin .day.past { color: #48484a; }
html.dark .cal-admin .day.has-block { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 105, 97, .14) 5px 6px); }
html.dark .cal-admin .day.selected { background: #f5f5f7 !important; color: #000; }
html.dark .cal-admin .day.selected .mk, html.dark .cal-admin .day.selected .ev { background: #000; box-shadow: none; }
html.dark .cal-admin .day.focus { box-shadow: inset 0 0 0 2px #f5f5f7; }
html.dark .slot.closed, html.dark .status.prepared { color: #8e8e93; }
html.dark .slot.closed::before, html.dark .cal-admin .day .mk.closed, html.dark .cal-legend .closed { box-shadow: inset 0 0 0 1.5px #48484a; }
html.dark .ev.google, html.dark .ev.gfree { background: #4a9eff; }
html.dark .ag.google { border-left-color: #4a9eff; }
html.dark .ag.google.free { border-left-color: #2b5797; }
html.dark .ev.reminder, html.dark .ev.followup { background: #ff9f0a; }
html.dark .ag.reminder, html.dark .ag.followup { border-left-color: #ff9f0a; }
html.dark .ev.lead { background: #bf5af2; }
html.dark .ag.lead { border-left-color: #bf5af2; }
html.dark .ag { border-left-color: #48484a; }
html.dark .ticks li::before { border-color: #30d158; }
html.dark .tick span { box-shadow: inset 0 0 0 1.5px #636366; }
html.dark .tick input:checked + span { background-color: #f5f5f7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }


/* Glass light effects are tuned for white; soften them */
html.dark .fx::after { background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 62%); }
html.dark .ripple { background: rgba(255, 255, 255, .18); }
html.dark :focus-visible { outline-color: #4a9eff; }

/* Sun / moon toggle inside the header bubble */
.head-actions { display: flex; align-items: center; gap: 8px; }
.theme-btn {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); background: rgba(0, 0, 0, .05);
  -webkit-tap-highlight-color: transparent;
}
.theme-btn:hover { background: rgba(0, 0, 0, .09); }
.theme-btn svg { width: 19px; height: 19px; grid-area: 1 / 1; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.theme-btn .i-moon { fill: currentColor; stroke: none; }
.theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
html.dark .theme-btn { background: rgba(255, 255, 255, .1); color: #f5f5f7; }
html.dark .theme-btn:hover { background: rgba(255, 255, 255, .16); }
html.dark .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
html.dark .theme-btn .i-sun { opacity: 1; transform: none; }
.top-inner .theme-btn { margin-right: -8px; }
@media (prefers-reduced-motion: reduce) { .theme-btn svg { transition: none; } }

/* Appearance picker in Settings */
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (hover: hover) and (pointer: fine) {
  html.dark .svc-card:hover { background: #2c2c2e; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
}
html.dark .steps { --flow-line: rgba(255, 255, 255, .14); --flow-dot: #fff; --flow-glow: rgba(255, 255, 255, .55); }
@media (hover: hover) and (pointer: fine) {
  html.dark .next:hover { box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .12); }
  html.dark .next-list a:hover { background: #2c2c2e; box-shadow: 0 20px 36px -16px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
}
@media (hover: hover) and (pointer: fine) {
  html.dark .svc-pick:not(.on):hover, html.dark .choice:not(.disabled):not(:has(input:checked)):hover, html.dark .daylist button:hover { background: #2c2c2e; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
  html.dark .svc-pick.on:hover, html.dark .choice:has(input:checked):hover { box-shadow: 0 0 26px rgba(255, 255, 255, .14), 0 22px 40px -18px rgba(0, 0, 0, .9); }
  html.dark .day.available:hover { box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); }
  html.dark .review dl:hover { box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); }
}
/* Wide screens: the admin tabs float in the header bubble, so the toggle sits at its far right and the tabs shift left to make room */
@media (min-width: 820px) {
  .top-inner { position: relative; padding-right: 0; }
  .top-inner h1 { padding-right: 640px; }
  .top-inner .theme-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; z-index: 30; }
  .tabs { right: calc(max(16px, calc((100vw - 980px) / 2 + 8px)) + 52px); }
}
@media (hover: hover) and (pointer: fine) {
  html.dark .quick > :not(.primary):hover { background: #2c2c2e; box-shadow: 0 24px 42px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
  html.dark .quick > .primary:hover { box-shadow: 0 0 28px rgba(255, 255, 255, .14), 0 24px 42px -18px rgba(0, 0, 0, .9); }
}

/* Admin calendar: days with a free slot stand out in green so Jordan can see what's bookable at a glance */
.cal-admin .day.has-open:not(.past):not(.selected) {
  background: #e3f7e8; color: #0b3d1a;
  box-shadow: inset 0 0 0 1.5px #34c759, 0 6px 14px -8px rgba(52, 199, 89, .55);
}
.cal-admin .day.has-open:not(.past):not(.selected) .mk.open { background: #1f9d45; }
.cal-admin .day.has-open:not(.past):not(.selected).focus { box-shadow: inset 0 0 0 2.5px #0b3d1a; }
.cal-admin .day.has-open.past { background: transparent; box-shadow: none; }
html.dark .cal-admin .day.has-open:not(.past):not(.selected) {
  background: rgba(48, 209, 88, .18); color: #eafff0;
  box-shadow: inset 0 0 0 1.5px rgba(48, 209, 88, .75), 0 0 18px -6px rgba(48, 209, 88, .55);
}
html.dark .cal-admin .day.has-open:not(.past):not(.selected) .mk.open { background: #30d158; }
html.dark .cal-admin .day.has-open:not(.past):not(.selected).focus { box-shadow: inset 0 0 0 2.5px #eafff0; }
.cal-legend .mk.open { width: 14px; height: 14px; border-radius: 4px; background: #e3f7e8; box-shadow: inset 0 0 0 1.5px #34c759; }
html.dark .cal-legend .mk.open { background: rgba(48, 209, 88, .18); box-shadow: inset 0 0 0 1.5px rgba(48, 209, 88, .75); }