/* Colour themes beyond the first four, light/dark mode, and the logo. Loaded after every other stylesheet.
   A theme sets the brand colours; the mode (data-mode="light|dark") sets the neutrals. They combine freely. */

:root { --on-primary: #fff; --border: #e5e7eb; --surface-hover: rgba(15, 23, 42, .04); }

/* ---- extra colour themes (white text on the primary stays above 4.5:1) ---- */
:root[data-theme="green"] {
  --primary: #15803d; --primary-light: #22c55e; --primary-dark: #166534;
  --secondary: #0d9488; --secondary-light: #ccfbf1; --secondary-dark: #0f766e;
  --accent: #f59e0b; --accent-light: #fde68a;
  --shadow-glow: 0 0 40px rgba(13, 148, 136, .18);
}
:root[data-theme="orange"] {
  --primary: #c2410c; --primary-light: #ea580c; --primary-dark: #9a3412;
  --secondary: #d97706; --secondary-light: #fef3c7; --secondary-dark: #b45309;
  --accent: #0d9488; --accent-light: #99f6e4;
  --shadow-glow: 0 0 40px rgba(217, 119, 6, .2);
}
:root[data-theme="gold"] {
  --primary: #a16207; --primary-light: #ca8a04; --primary-dark: #854d0e;
  --secondary: #b45309; --secondary-light: #fef9c3; --secondary-dark: #92400e;
  --accent: #7c3aed; --accent-light: #ddd6fe;
  --shadow-glow: 0 0 40px rgba(202, 138, 4, .22);
}
[data-theme="green"], [data-theme="orange"], [data-theme="gold"] { color-scheme: light; }
[data-theme="green"] { --p: 142 72% 29%; --pc: 0 0% 100%; --s: 173 80% 36%; --sc: 0 0% 100%; --a: 142 64% 24%; --ac: 0 0% 100%; --n: 150 30% 12%; --nc: 140 20% 97%; --b1: 0 0% 100%; --b2: 140 30% 97%; --b3: 140 20% 90%; --bc: 150 30% 12%; }
[data-theme="orange"] { --p: 17 88% 40%; --pc: 0 0% 100%; --s: 32 95% 44%; --sc: 0 0% 100%; --a: 15 86% 30%; --ac: 0 0% 100%; --n: 20 30% 12%; --nc: 30 30% 97%; --b1: 0 0% 100%; --b2: 30 40% 97%; --b3: 30 25% 90%; --bc: 20 30% 12%; }
[data-theme="gold"] { --p: 41 94% 33%; --pc: 0 0% 100%; --s: 26 90% 37%; --sc: 0 0% 100%; --a: 35 86% 27%; --ac: 0 0% 100%; --n: 35 30% 12%; --nc: 45 40% 97%; --b1: 0 0% 100%; --b2: 45 50% 97%; --b3: 45 30% 90%; --bc: 35 30% 12%; }
[data-swatch="green"] { --sw: #15803d; } [data-swatch="orange"] { --sw: #c2410c; } [data-swatch="gold"] { --sw: #a16207; }

/* ---- dark mode: neutrals, and a lighter brand colour so text and outlines keep contrast on dark ---- */
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg-cream: #0f1117; --bg-white: #181b24; --bg-light: #20242f;
  --text-primary: #e8eaf0; --text-secondary: #b9bfcc; --text-muted: #8f97a8; --text-light: #6b7386;
  --border: #2b303d; --surface-hover: rgba(255, 255, 255, .06);
  --on-primary: #0f1117;
  --success: #4ade80; --warning: #fbbf24;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .35); --shadow-md: 0 8px 32px rgba(0, 0, 0, .4);
  --shadow-lg: 0 16px 56px rgba(0, 0, 0, .45); --shadow-xl: 0 24px 80px rgba(0, 0, 0, .5);
  --b1: 225 18% 11%; --b2: 225 18% 8%; --b3: 225 14% 18%; --bc: 225 20% 92%; --n: 225 14% 18%; --nc: 225 20% 92%;
}
:root[data-mode="dark"][data-theme="indigo"] { --primary: #818cf8; --primary-light: #a5b4fc; --secondary: #a78bfa; --secondary-light: #2e1065; }
:root[data-mode="dark"][data-theme="teal"] { --primary: #2dd4bf; --primary-light: #5eead4; --secondary: #22d3ee; --secondary-light: #083344; }
:root[data-mode="dark"][data-theme="red"] { --primary: #f87171; --primary-light: #fca5a5; --secondary: #fb7185; --secondary-light: #4c0519; }
:root[data-mode="dark"][data-theme="cyan"] { --primary: #22d3ee; --primary-light: #67e8f9; --secondary: #38bdf8; --secondary-light: #082f49; }
:root[data-mode="dark"][data-theme="green"] { --primary: #4ade80; --primary-light: #86efac; --secondary: #2dd4bf; --secondary-light: #042f2e; }
:root[data-mode="dark"][data-theme="orange"] { --primary: #fb923c; --primary-light: #fdba74; --secondary: #fbbf24; --secondary-light: #451a03; }
:root[data-mode="dark"][data-theme="gold"] { --primary: #facc15; --primary-light: #fde047; --secondary: #fb923c; --secondary-light: #422006; }

:root[data-mode="dark"] body { background: var(--bg-cream); color: var(--text-primary); }
:root[data-mode="dark"] .navbar { background: color-mix(in srgb, var(--bg-cream) 88%, transparent); }
:root[data-mode="dark"] input, :root[data-mode="dark"] select, :root[data-mode="dark"] textarea {
  background: var(--bg-white); color: var(--text-primary); border-color: var(--border);
}
:root[data-mode="dark"] ::placeholder { color: var(--text-light); }
:root[data-mode="dark"] .appt-table th, :root[data-mode="dark"] .appt-table td { border-color: var(--border); }
:root[data-mode="dark"] .appt-table tr:hover td { background: var(--surface-hover); }
:root[data-mode="dark"] .btn-primary { color: var(--on-primary); }
:root[data-mode="dark"] .btn-outline { color: var(--primary); }
:root[data-mode="dark"] .btn-outline:hover { color: var(--on-primary); }
:root[data-mode="dark"] .muted, :root[data-mode="dark"] .at-sub, :root[data-mode="dark"] .help { color: var(--text-muted); }
/* the printed documents stay white, whatever the mode */
:root[data-mode="dark"] .paper, :root[data-mode="dark"] .paper * { color: #111; }
:root[data-mode="dark"] .paper { background: #fff; }

/* ---- theme menu: light/dark switch, and tokens for its popup ---- */
.tm-btn, .tm-list { background: var(--bg-white); color: var(--text-primary); border-color: var(--border); }
.tm-list button { color: var(--text-primary); }
.tm-mode { display: flex; gap: 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tm-mode button { flex: 1; justify-content: center; padding: 6px 4px; border: 1px solid var(--border); border-radius: 10px; font: 600 .78rem var(--font-primary); display: inline-flex; gap: 6px; align-items: center; background: transparent; cursor: pointer; }
.tm-mode button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ---- logo: one SVG that takes the brand colour (it follows the theme and the mode) ---- */
.appointly-logo { height: 46px; width: auto; color: var(--primary); display: inline-block; vertical-align: middle; transition: color .3s ease; }
.footer .appointly-logo { color: color-mix(in srgb, var(--primary-light) 55%, #fff); }

/* dark: text that used the deep shades of the brand colour uses the light shade instead */
:root[data-mode="dark"] { --secondary-dark: var(--secondary); }
:root[data-mode="dark"] .nav-links a.active, :root[data-mode="dark"] .nav-links a:hover { color: var(--primary); }
:root[data-mode="dark"] .has-active, :root[data-mode="dark"] .nav-gh.has-active { color: var(--primary); }

/* ---- depth ("3D") for every hero / finder search bar and the featured professional cards ---- */
.hm-search, .fd-search { perspective: 1100px; position: relative; z-index: 60; } .hm-near { position: relative; z-index: 1; }
.hm-bar, .fd-search {
  position: relative; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 100%, #fff) 0%, color-mix(in srgb, var(--bg-white) 94%, var(--primary)) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,                              /* top light edge */
    0 -3px 0 color-mix(in srgb, var(--primary) 10%, transparent) inset, /* bottom bevel */
    0 2px 4px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 12px 24px -6px color-mix(in srgb, var(--primary) 22%, transparent),
    0 34px 60px -18px color-mix(in srgb, var(--primary) 30%, transparent);
}
.hm-bar:focus-within, .fd-search:focus-within {
  transform: translateY(-3px) rotateX(2deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 0 color-mix(in srgb, var(--primary) 14%, transparent) inset,
    0 4px 8px color-mix(in srgb, var(--text-primary) 10%, transparent), 0 22px 36px -8px color-mix(in srgb, var(--primary) 30%, transparent),
    0 50px 80px -20px color-mix(in srgb, var(--primary) 38%, transparent);
}
/* the Search button is a real key: gradient, lit top edge, a solid lower edge that presses down */
.hm-bar > button, .fd-go {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 140%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -4px 0 rgba(0,0,0,.18) inset, 0 6px 14px color-mix(in srgb, var(--primary) 45%, transparent);
  text-shadow: 0 1px 1px rgba(0,0,0,.18); transition: transform .12s, box-shadow .12s, filter .2s;
}
.hm-bar > button:hover, .fd-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hm-bar > button:active, .fd-go:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 2px 6px color-mix(in srgb, var(--primary) 40%, transparent); }
.hm-modes { box-shadow: inset 0 2px 4px color-mix(in srgb, var(--text-primary) 14%, transparent), 0 1px 0 rgba(255,255,255,.6); }
.hm-modes button.on { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -2px 0 color-mix(in srgb, var(--primary) 14%, transparent) inset, 0 6px 12px color-mix(in srgb, var(--text-primary) 16%, transparent); }
/* the dropdown of suggestions floats above */
.sg { box-shadow: 0 30px 60px -12px color-mix(in srgb, var(--text-primary) 35%, transparent), 0 8px 16px color-mix(in srgb, var(--text-primary) 12%, transparent) !important; }
/* featured professionals: stacked cards that tilt toward the pointer (depth.js sets --rx/--ry) */
.hm-stack { perspective: 1000px; }
.hm-pro { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 0 color-mix(in srgb, var(--primary) 8%, transparent) inset,
    0 3px 6px color-mix(in srgb, var(--text-primary) 8%, transparent), 0 18px 34px -10px color-mix(in srgb, var(--primary) 26%, transparent); }
.hm-pro:nth-of-type(1) { animation: hm-float 7s ease-in-out infinite; } .hm-pro:nth-of-type(2) { animation: hm-float 8s ease-in-out -2s infinite; } .hm-pro:nth-of-type(3) { animation: hm-float 9s ease-in-out -4s infinite; }
@keyframes hm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.hm-pro-av { box-shadow: 0 3px 0 color-mix(in srgb, var(--primary-dark) 55%, transparent), 0 8px 14px rgba(0,0,0,.18); }
:root[data-mode="dark"] .hm-bar, :root[data-mode="dark"] .fd-search { background: linear-gradient(180deg, #1d212c 0%, #161a23 100%); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -3px 0 rgba(0,0,0,.35) inset, 0 14px 30px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); }
@media (prefers-reduced-motion: reduce) { .hm-pro { animation: none !important; } .hm-bar:focus-within, .fd-search:focus-within { transform: none; } }
@media (max-width: 900px) { .hm-bar:focus-within, .fd-search:focus-within { transform: none; } }

/* ---- dark: footer, time slots and links that read well on dark ---- */
:root[data-mode="dark"] { --footer-bg: #0a0c11; --slot-bg: #232937; --slot-line: #323a4d; }
:root[data-mode="dark"] .footer { border-top: 1px solid var(--border); }
:root[data-mode="dark"] .footer-col ul li a, :root[data-mode="dark"] .footer-brand p { color: rgba(232,234,240,.72); }
:root[data-mode="dark"] .footer-col ul li a:hover, :root[data-mode="dark"] .footer-bottom a:hover { color: var(--primary); }
:root[data-mode="dark"] .footer-bottom, :root[data-mode="dark"] .footer-bottom a { color: rgba(232,234,240,.5); }
:root[data-mode="dark"] .wk-slot, :root[data-mode="dark"] .ai-slots a {
  background: var(--slot-bg); color: #eef0f6; border: 1px solid var(--slot-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.25) inset;
}
:root[data-mode="dark"] .wk-slot:hover, :root[data-mode="dark"] .ai-slots a:hover {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary); transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent);
}
:root[data-mode="dark"] .wk-h b { color: var(--text-primary); } :root[data-mode="dark"] .wk-h span { color: var(--text-muted); }
:root[data-mode="dark"] .wk-col.today .wk-h b, :root[data-mode="dark"] .wk-col.today .wk-h span { color: var(--primary); }
:root[data-mode="dark"] .wk-nav { color: var(--text-secondary); } :root[data-mode="dark"] .wk-nav:not(:disabled):hover { color: var(--primary); }
:root[data-mode="dark"] .wk-more, :root[data-mode="dark"] .fd-link, :root[data-mode="dark"] .fd-meta h3 a, :root[data-mode="dark"] .ai-pi b a,
:root[data-mode="dark"] .fd-org b, :root[data-mode="dark"] .pd-tabs a.on { color: var(--primary); }
:root[data-mode="dark"] .fd-rating, :root[data-mode="dark"] .fd-rating small { color: #fbbf24; }
:root[data-mode="dark"] .dir-pager .pg, :root[data-mode="dark"] .dir-pager button { background: var(--bg-white); color: var(--text-primary); border-color: var(--border); }
:root[data-mode="dark"] .dir-pager .pg.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
:root[data-mode="dark"] .dir-pager button:disabled { opacity: .4; }
:root[data-mode="dark"] .fd-near-bar { background: color-mix(in srgb, var(--primary) 9%, var(--bg-white)); color: var(--text-secondary); }
:root[data-mode="dark"] .fd-row, :root[data-mode="dark"] .fd-card { background: var(--bg-white); border-color: var(--border); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
:root[data-mode="dark"] .fd-chip > button, :root[data-mode="dark"] .fd-toggle, :root[data-mode="dark"] .fd-city-chips a, :root[data-mode="dark"] .fd-chip-near { background: var(--bg-white); color: var(--primary); border-color: var(--border); }
:root[data-mode="dark"] .fd-city-chips a { color: var(--text-primary); }
:root[data-mode="dark"] .fd-badges a, :root[data-mode="dark"] .fd-badges li { color: var(--text-secondary); } :root[data-mode="dark"] .fd-badges a { color: var(--primary); }

/* ---- a time somebody else is booking right now: shown, not clickable, with a chat-style "typing" animation ---- */
.wk-slot.held, .bk2-slot.held { cursor: not-allowed; pointer-events: none; position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: color-mix(in srgb, #f59e0b 14%, var(--bg-white)) !important; color: color-mix(in srgb, #92400e 70%, var(--text-muted)) !important;
  border: 1px dashed color-mix(in srgb, #f59e0b 55%, transparent) !important; box-shadow: none !important; }
.wk-slot.held .wk-t, .bk2-slot.held .wk-t { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 700; }
.typing { display: inline-flex; gap: 3px; align-items: center; height: 8px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #d97706; display: block; animation: typing-bounce 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.bk2-slot.held { padding: 10px 14px; border-radius: 10px; min-width: 84px; }
:root[data-mode="dark"] .wk-slot.held, :root[data-mode="dark"] .bk2-slot.held { background: color-mix(in srgb, #f59e0b 12%, var(--bg-white)) !important; color: #fbbf24 !important; }
:root[data-mode="dark"] .typing i { background: #fbbf24; }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .8; } }

/* ---- the whole-week grid: free, being booked, booked and not-working times each look different ---- */
.mx-wrap { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; } .mx-wrap > summary { cursor: pointer; font: 700 .86rem var(--font-primary); color: var(--primary); list-style: none; display: flex; gap: 8px; align-items: center; }
.mx-wrap > summary::-webkit-details-marker { display: none; } .mx-wrap[open] > summary { margin-bottom: 10px; }
.mx-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .mx-bar b { flex: 1; text-align: center; font-size: .92rem; } .mx-free { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.mx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0 0 10px; padding: 0; font-size: .74rem; color: var(--text-secondary); } .mx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mx-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mx-scroll { overflow: auto; max-height: 520px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-white); }
.mx-t { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 560px; }
.mx-t thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-white); padding: 8px 2px; text-align: center; font-size: .78rem; line-height: 1.2; } .mx-t thead th b { display: block; } .mx-t thead th span { font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.mx-t thead th.today b, .mx-t thead th.today span { color: var(--primary); }
.mx-time, .mx-corner { position: sticky; left: 0; z-index: 2; background: var(--bg-white); font: 700 .72rem var(--font-primary); color: var(--text-muted); text-align: right; padding-right: 6px; white-space: nowrap; } .mx-corner { z-index: 4; top: 0; }
.mx-t td { padding: 0; width: 13%; }
.mx-c { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; border-radius: 9px; font: 700 .76rem var(--font-primary); text-decoration: none; font-variant-numeric: tabular-nums; }
.mx-c.av, .mx-sw.av { background: color-mix(in srgb, var(--primary) 14%, var(--bg-white)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.mx-c.av { transition: transform .12s, box-shadow .12s, background .12s; } .mx-c.av:hover { background: var(--primary); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 38%, transparent); }
.mx-c.held, .mx-sw.held { background: color-mix(in srgb, #f59e0b 14%, var(--bg-white)); border: 1px dashed color-mix(in srgb, #f59e0b 60%, transparent); cursor: not-allowed; }
.mx-c.bk, .mx-sw.bk { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-primary) 7%, var(--bg-white)) 0 6px, color-mix(in srgb, var(--text-primary) 13%, var(--bg-white)) 6px 12px); color: var(--text-muted); border: 1px solid var(--border); font-weight: 600; font-size: .68rem; }
.mx-c.off, .mx-sw.off { background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-white)); color: var(--text-light); border: 1px solid transparent; font-weight: 500; }
.mx-c.cl { background: transparent; border: 1px dashed color-mix(in srgb, var(--text-primary) 10%, transparent); opacity: .5; }
.mx-note { font-size: .78rem; color: var(--text-muted); margin: 8px 2px 0; }
@media (max-width: 560px) { .mx-c { min-height: 38px; font-size: .72rem; } .mx-t { border-spacing: 3px; } }
.mx-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 6%, var(--bg-white)); color: var(--primary); font: 700 .88rem var(--font-primary); cursor: pointer; transition: all .15s; }
.mx-open:hover { background: var(--primary); color: var(--on-primary); border-style: solid; }
.mx-dialog { border: 0; padding: 0; border-radius: 20px; width: min(980px, 96vw); max-height: 92vh; background: var(--bg-white); color: var(--text-primary); box-shadow: 0 40px 100px rgba(0,0,0,.45); }
.mx-dialog::backdrop { background: rgba(10, 12, 20, .55); backdrop-filter: blur(3px); }
.mx-dlg { padding: 18px 20px 20px; } .mx-dlg header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .mx-dlg h3 { margin: 0; font: 700 1.15rem var(--font-display); }
.mx-x { border: 0; background: color-mix(in srgb, var(--text-primary) 8%, transparent); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--text-primary); }
.mx-dialog .mx-legend { flex-direction: row !important; } .mx-legend { flex-direction: row !important; }
.mx-dialog .mx-scroll { max-height: calc(92vh - 190px); }
.mx-legend { display: grid !important; grid-auto-flow: column; justify-content: start; gap: 6px 18px; } .mx-legend li { display: inline-flex !important; width: auto !important; }
@media (max-width: 560px) { .mx-legend { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }