@font-face {
  font-family: Manrope;
  src: url("manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("dmsans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("playfairdisplay-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: Manrope, sans-serif;
  --canvas: #f8f7f3;
  --white: #fff;
  --ink: #24242d;
  --soft-ink: #575664;
  --rule: #e1dfe8;
  --indigo: #4a43b6;
  --indigo-hover: #382f9d;
  --lavender: #efedf9;
  --error: #a3233d;
  --green-ink: #23644f;
  --green-pale: #e9f4ee;
  --radius: 14px;
  --control-height: 48px;
  --action-gap: 8px;
  --action-radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: 1rem; line-height: 1.55; min-width: 0; }
a { color: var(--indigo); text-underline-offset: .2em; }
a:hover { color: var(--indigo-hover); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
::selection { background: #d8d4ff; color: var(--ink); }
h1, h2, p { margin: 0; }
h1, h2 { line-height: 1.22; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.85rem, 5vw, 2.8rem); }
h2 { font-size: 1.32rem; }
p { overflow-wrap: anywhere; }
small { font-size: .82rem; line-height: 1.45; }
fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.frame { width: min(100% - 40px, 1060px); margin-inline: auto; }
.topbar { background: #fff; border-bottom: 1px solid var(--rule); }
.topbar-inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Match the BookVaya website mark; decorative beside the readable name. */
.wordmark { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--ink); text-decoration: none; font-size: 1.37rem; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
a.wordmark { min-height: 44px; }
.wordmark-name { color: var(--ink); }
.wordmark-name>span { color: var(--indigo); }
.wordmark-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--indigo); border: 1.8px solid currentColor; border-radius: 8px; }
.wordmark-icon::after { content: ""; width: 13px; height: 13px; background: currentColor; border-radius: 3px; }
.wordmark-footer { gap: 8px; font-size: 1rem; }
.wordmark-footer .wordmark-icon { width: 23px; height: 23px; border-radius: 6px; }
.wordmark-footer .wordmark-icon::after { width: 10px; height: 10px; }
.topnav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: .86rem; font-weight: 750; }
.topnav a, .quiet { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.quiet { background: none; border: 0; padding: 0; color: var(--indigo); font-weight: inherit; }
main { min-height: calc(100dvh - 153px); }
main:focus { outline: none; }
.footer { padding: 30px 0; font-size: .83rem; color: var(--soft-ink); }
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus { position: fixed; z-index: 5; top: 12px; left: 12px; background: white; padding: 12px; }
.home, .narrow, .booking-page, .workspace-page { padding-top: clamp(28px, 5vw, 64px); padding-bottom: 12px; }
.narrow { max-width: 620px; }
.home { max-width: 820px; }
.home-lead { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
.home-lead p { max-width: 52ch; margin: 14px 0 24px; color: var(--soft-ink); }
.business-list { margin-top: 24px; }
.business-list h2 { margin-bottom: 10px; }
.business-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--rule); min-height: 68px; padding: 12px 4px; color: var(--ink); text-decoration: none; font-weight: 750; }
.business-row:has(> :first-child:not(.avatar)) { grid-template-columns: minmax(0, 1fr) auto; }
.business-row:hover { color: var(--indigo); }
.business-row small { display: block; color: var(--soft-ink); font-weight: 550; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--indigo); background: var(--lavender); }
.screen-title p, .workspace-heading p { margin-top: 5px; color: var(--soft-ink); }
.steps { list-style: none; margin: 24px 0 22px; padding: 0; display: flex; gap: 8px; color: var(--soft-ink); }
.steps li { padding: 6px 14px; border-radius: 7px; font-size: .87rem; font-weight: 700; }
.steps [aria-current] { background: var(--lavender); color: var(--indigo); }
.work-surface, .summary { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); padding: clamp(19px, 3.4vw, 32px); min-width: 0; }
.work-surface h1 + p, .work-surface h2 + p { margin-top: 7px; }
.work-surface > .button { margin-top: 20px; }
.single { max-width: 700px; }
.booking-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .51fr); gap: 20px; align-items: start; }
.time-layout .work-surface { grid-column: 1; grid-row: 1; }
.time-layout .summary { grid-column: 2; grid-row: 1; }
.summary { background: #fdfcfe; }
.summary h2 { font-size: 1.12rem; }
.summary-lines { margin: 17px 0 0; padding: 0; list-style: none; }
.summary-lines li, .summary-total { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.summary-lines li { padding: 9px 0; font-weight: 650; font-size: .92rem; }
.summary-lines small { display: block; color: var(--soft-ink); font-weight: 500; }
.summary-lines li > :last-child, .summary-total > :last-child { white-space: nowrap; }
.summary-total { border-top: 1px solid var(--rule); padding-top: 13px; margin-top: 8px; font-size: .93rem; }
.muted { color: var(--soft-ink); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; font-size: .89rem; font-weight: 750; overflow-wrap: anywhere; }
.back { margin: -8px 0 6px; }
.actions { margin-top: 22px; }
.button, .control {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--action-gap);
  min-width: 0; max-width: 100%; min-height: var(--control-height);
  padding: 8px 12px; border: 1px solid transparent; border-radius: var(--action-radius);
  font-size: .92rem; font-weight: 800; text-align: center; line-height: 1.25;
  text-decoration: none; overflow-wrap: anywhere; touch-action: manipulation;
}
.button { color: var(--white); background: var(--indigo); }
.button:has(> .chevron)::before { content: ""; flex: 0 0 8px; }
.button:hover { background: var(--indigo-hover); color: var(--white); }
.button.secondary, .control { color: var(--indigo); background: var(--white); border-color: var(--rule); }
.button.secondary:hover, .control:hover { color: var(--indigo-hover); background: var(--lavender); }
.button.danger { background: var(--error); }
.button:disabled, .control:disabled { opacity: .65; cursor: default; }
.button[hidden], .control[hidden] { display: none; }
.button-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr; gap: var(--action-gap); min-width: 0;
}
.workspace-heading > .button-grid { flex: 0 1 auto; }
.dashboard-shortcuts {
  grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.calendar-shortcuts { display: grid; gap: var(--action-gap); max-width: 100%; }
.calendar-shortcuts .row-links { justify-content: flex-end; }
.calendar-shortcuts .text-link { text-wrap: balance; }
.icon { width: 44px; flex: 0 0 44px; padding: 0; }
.chevron { width: 8px; height: 8px; flex: 0 0 8px; display: inline-block; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.chevron.left { transform: rotate(225deg); }
.service-list { margin-top: 12px; }
.service-list + .service-list { margin-top: 19px; }
.service-list legend { font-size: .94rem; font-weight: 800; }
.booking-theme .service-categories a[aria-current] { background: var(--indigo); color: var(--button-text); }
.service-content { display: flex; align-items: center; gap: 10px; }
.service-content img { display: block; width: clamp(42px, 10vw, 58px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.service-content img[hidden] { display: none; }
.service-extras { padding: 4px 10px 6px 42px; border-bottom: 1px solid var(--rule); }
.service-extras legend { font-size: .82rem; font-weight: 800; padding-top: 4px; }
.service-extras label { display: flex; align-items: center; min-height: 44px; gap: 9px; font-size: .88rem; cursor: pointer; }
.service-extras input { accent-color: var(--indigo); }
.service-extras small { display: block; }
.catalog-photo-preview { display: block; width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-top: 13px; }
.service-option { cursor: pointer; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 10px; border-bottom: 1px solid var(--rule); min-height: 69px; }
.service-option:has(input:checked) { background: var(--lavender); }
.service-option input { width: 19px; height: 19px; margin: 0; accent-color: var(--indigo); }
.service-text, .service-price { min-width: 0; overflow-wrap: anywhere; }
.service-text small, .service-price small { display: block; color: var(--soft-ink); margin-top: 3px; }
.service-price { text-align: right; font-variant-numeric: tabular-nums; }
.practitioner-form { margin-top: 20px; }
.practitioner-form > label { font-size: .88rem; font-weight: 800; }
.form-inline { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.form-inline select { flex: 1 1 auto; min-width: 0; }
.date-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; text-align: center; margin-top: 19px; }
.day-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.day-strip a { min-height: 62px; display: grid; align-content: center; justify-items: center; border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; background: var(--white); color: var(--ink); }
.day-strip a span { font-size: .76rem; color: var(--soft-ink); }
.day-strip a:hover { background: var(--lavender); }
.day-strip a[aria-current] { border-color: var(--indigo); background: var(--indigo); color: var(--white); }
.day-strip a[aria-current] span { color: #f1efff; }
.date-jump summary { padding-block: 11px; color: var(--theme-link, var(--indigo)); cursor: pointer; font-size: .87rem; font-weight: 800; min-height: 44px; }
.date-jump input[type="date"] { min-width: 0; flex: 1; min-height: var(--control-height); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 9px; color: var(--ink); background: var(--white); }
.time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.time-grid legend { padding-bottom: 11px; font-weight: 800; }
.time-grid label { position: relative; min-width: 0; }
.time-grid input { opacity: 0; position: absolute; width: 100%; height: 100%; margin: 0; cursor: pointer; inset: 0; }
.time-grid span { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--rule); border-radius: 7px; padding: 2px 3px; font-size: .86rem; font-weight: 800; white-space: nowrap; }
.time-grid :hover + span { background: var(--lavender); }
.time-grid input:checked + span { background: var(--lavender); border-color: var(--indigo); color: var(--indigo); }
.time-grid input:focus-visible + span { outline: 3px solid var(--indigo); outline-offset: 2px; }
.fields { display: grid; gap: 14px; margin-top: 22px; }
.field { display: grid; gap: 5px; }
.field label { font-size: .91rem; font-weight: 800; }
.field small { color: var(--soft-ink); }
.field input:not([type=checkbox]), .field select, .field textarea, .form-inline select { width: 100%; min-width: 0; min-height: var(--control-height); background: var(--white); color: var(--ink); border: 1px solid #aaa8b6; border-radius: var(--action-radius); padding: 9px 12px; }
.field input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--indigo); }
.field fieldset label { display: flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 650; }
.field legend { font-size: .91rem; font-weight: 800; }
.field textarea { resize: vertical; }
.field input[aria-invalid] { border-color: var(--error); }
.fields .actions { margin-top: 4px; }
.field-errors, .error { margin: 8px 0 0; color: var(--error); font-weight: 700; font-size: .91rem; }
.field-errors { padding-left: 1.25em; }
#email-template-form [hidden] { display: none; }
.error { background: #fff2f4; padding: 11px 13px; border-radius: 8px; }
.selected-time { display: grid; gap: 3px; padding: 13px 0; margin-top: 8px; border-bottom: 1px solid var(--rule); }
.selected-time span { font-size: .87rem; color: var(--soft-ink); }
.booking-zone { margin-block: 12px; color: var(--soft-ink); }
.booking-zone small:not([hidden]), time [data-local-clock]:not([hidden]) { display: block; font-size: .79rem; font-weight: 550; }
.time-grid time { text-align: center; }
.time-grid time [data-local-clock] { white-space: normal; }
.receipt-details { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 7px 18px; margin: 17px 0 0; font-size: .9rem; }
.receipt-details dt { color: var(--soft-ink); }
.receipt-details dd { margin: 0; overflow-wrap: anywhere; }
.calendar-actions { margin-top: 20px; padding-block: 12px; border-top: 1px solid var(--rule); }
.calendar-actions h3 { margin: 0 0 9px; font-size: .94rem; }
.calendar-actions small { display: block; margin-top: 9px; }
.status { display: inline-block; border-radius: 5px; color: var(--green-ink); background: var(--green-pale); font-size: .79rem; font-weight: 800; padding: 4px 8px; max-width: 100%; overflow-wrap: anywhere; }
.status.cancelled { background: #eeeef2; color: var(--soft-ink); }
.status + h2 { margin-top: 14px; }
.empty { margin-top: 20px; padding: 19px 0 6px; border-top: 1px solid var(--rule); }
.empty p { margin-top: 4px; color: var(--soft-ink); font-size: .94rem; }
.workspace-heading, .agenda-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.workspace-heading { margin-bottom: 24px; }
.workspace-heading.dashboard-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.agenda-nav { display: flex; gap: var(--action-gap); align-items: stretch; }
.agenda-modes { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--action-gap); margin-top: 16px; max-width: 100%; }
.work-surface > .agenda-modes:first-child { margin-top: 0; }
.agenda-modes.service-categories {
  display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
}
.agenda-modes a[aria-current] { background: var(--indigo); color: #fff; }
.agenda-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 20px; }
.work-surface > .agenda-filters:first-child { margin-top: 0; }
.agenda-filters .field { flex: 1 1 180px; min-width: 0; }
.agenda-filters > .button-grid { flex: 0 1 auto; }
.agenda-detail { font-weight: 800; }
.dashboard-overview .button-grid [aria-current] { background: var(--indigo); color: white; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 21px 0 0; }
.dashboard-metrics div {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px;
  border-top: 1px solid var(--rule); padding-top: 12px; min-width: 0;
}
.dashboard-metrics dt { font-size: .86rem; font-weight: 800; }
.dashboard-metrics dd { font-size: clamp(1.25rem, 3vw, 1.85rem); font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-metrics div > small { display: block; color: var(--soft-ink); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .8fr); gap: 18px; margin-top: 18px; align-items: start; }
.dashboard-side { display: grid; gap: 18px; }
.booking-share { width: 100%; min-height: 44px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; margin-top: 14px; color: var(--ink); font-size: .83rem; }
.settings-list.team-invites li { display: grid; gap: 8px; padding-block: 14px; }
.team-invites .booking-share { margin: 0; }
.staff-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.staff-times legend { font-weight: 800; padding-block: 8px; }
.staff-times label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 6px; border: 1px solid var(--rule); border-radius: 6px; }
.staff-times input { accent-color: var(--indigo); }
.agenda-list { list-style: none; padding: 0; margin: 15px 0 0; }
.agenda-entry { display: grid; grid-template-columns: minmax(92px,.39fr) minmax(0,1fr) auto; gap: 20px; border-top: 1px solid var(--rule); padding: 14px 0; align-items: start; }
.agenda-entry small, .agenda-client span { display: block; color: var(--soft-ink); }
.agenda-client { min-width: 0; overflow-wrap: anywhere; }
.agenda-status { text-align: right; }
.cancel-action summary { color: var(--error); cursor: pointer; margin-top: 7px; padding: 9px 0; font-size: .81rem; min-height: 44px; }
.cancel-action p { text-align: right; max-width: 23ch; margin: 0 0 8px auto; font-size: .82rem; }
.move-link { display: flex; justify-content: end; }
.row-links { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; align-items: center; min-width: 0; }
.settings-list .row-links { justify-content: flex-end; }
.settings-list li > * { min-width: 0; }
.settings-list li > .text-link:last-child { flex: 0 0 auto; max-width: 45%; text-align: end; }
.settings-list.activity-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); align-items: start; padding-block: 14px; }
.activity-list .status { justify-self: end; text-align: center; }
.activity-list .activity-details { grid-row: span 2; }
.settings-list.activity-list li > .text-link:last-child { grid-column: 2; justify-self: end; max-width: 100%; text-align: end; }
.settings-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.settings-list { list-style: none; margin: 12px 0 0; padding: 0; }
.settings-list li { border-top: 1px solid var(--rule); min-height: 58px; display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 7px 0; overflow-wrap: anywhere; }
.settings-list small { display: block; color: var(--soft-ink); }
.text-list li { align-items: flex-start; padding-block: 14px; }
.text-list li > div { flex: 1 1 auto; }
.text-list .status { flex: 0 0 auto; max-width: 42%; text-align: center; }
.text-list p { margin-top: 5px; font-size: .91rem; }

.booking-theme {
  --font-inter: Inter, sans-serif;
  --font-dm-sans: "DM Sans", sans-serif;
  --font-playfair: "Playfair Display", Georgia, serif;
  --soft-ink: var(--ink);
  --rule: color-mix(in srgb, var(--ink) 22%, var(--white));
  --lavender: color-mix(in srgb, var(--indigo) 7%, var(--white));
  --indigo-hover: var(--theme-link);
  font-family: var(--booking-body, Manrope, sans-serif);
  background: var(--canvas);
  color: var(--ink);
}
.booking-theme[data-heading-font="inter"] { --booking-heading: var(--font-inter); }
.booking-theme[data-heading-font="dm-sans"] { --booking-heading: var(--font-dm-sans); }
.booking-theme[data-heading-font="playfair"] { --booking-heading: var(--font-playfair); }
.booking-theme[data-body-font="inter"] { --booking-body: var(--font-inter); }
.booking-theme[data-body-font="dm-sans"] { --booking-body: var(--font-dm-sans); }
.booking-theme[data-body-font="playfair"] { --booking-body: var(--font-playfair); }
.booking-theme :is(h1, h2, h3) { font-family: var(--booking-heading, Manrope, sans-serif); }
.booking-theme .topbar, .booking-theme .summary { background: var(--white); }
.booking-theme :is(a, .quiet, .wordmark-icon, .wordmark-name>span, .button.secondary, .control, .steps [aria-current]) { color: var(--theme-link); }
.booking-theme :is(.button:not(.secondary), .day-strip a[aria-current]) {
  background: var(--indigo); color: var(--button-text);
}
.booking-theme :is(.button, .day-strip a[aria-current]) { border-color: color-mix(in srgb, var(--ink) 45%, var(--indigo)); }
.booking-theme .button:not(.secondary):hover { box-shadow: inset 0 0 0 2px var(--button-text); }
.booking-theme .button.danger { background: var(--error); color: #fff; border-color: var(--error); }
.booking-theme .button.danger:hover { box-shadow: inset 0 0 0 2px #fff; }
.guest-cancel summary { color: var(--theme-link); }
.booking-theme .day-strip a[aria-current] span { color: inherit; }
.booking-theme .time-grid input:checked + span { color: var(--theme-link); border-color: var(--ink); }
.booking-theme .status.cancelled { color: #44404d; }
.booking-theme .field-errors { color: #a3233d; background: #fff2f4; border-radius: 6px; padding-block: 5px; }
.booking-theme :focus-visible, .booking-theme .time-grid input:focus-visible + span { outline-color: var(--theme-link); }
.booking-theme .skip-link:focus { background: var(--white); }
.booking-theme ::selection { background: var(--indigo); color: var(--button-text); }
.booking-identity { display: flex; gap: 14px; align-items: center; }
.booking-instructions { margin-top: 12px; max-width: 65ch; }
.booking-logo { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--white); }
.booking-cover { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; }
.booking-cover[hidden] { display: none; }
.appearance-entry { grid-column: 1 / -1; }
.appearance-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.appearance-form { min-width: 0; }
.appearance-group + .appearance-group { border-top: 1px solid var(--rule); margin-top: 22px; }
.appearance-group legend { font-weight: 800; font-size: 1.06rem; padding: 0 8px 9px 0; }
.appearance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.image-fields { display: grid; gap: 8px; margin-top: 13px; }
.image-fields input[type="file"] { font-size: .85rem; }
.image-fields input::file-selector-button { border: 0; border-radius: 4px; background: var(--lavender); color: var(--indigo); padding: 5px 8px; margin-right: 7px; font: inherit; cursor: pointer; }
.remove-image { display: flex; align-items: center; min-height: 44px; gap: var(--action-gap); font-size: .86rem; }
.remove-image input { flex: 0 0 auto; width: 19px; height: 19px; margin: 0; accent-color: var(--indigo); }
.colour-input { display: flex; gap: 6px; align-items: center; }
.colour-input input[type="color"] { cursor: pointer; width: 44px; flex: 0 0 44px; padding: 6px; }
.appearance-actions { margin-top: 23px; }
.appearance-actions [hidden] { display: none; }
.appearance-example > h2 { font-size: 1rem; margin-bottom: 9px; }
#appearance-preview { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(14px, 3vw, 24px); }
#appearance-preview .booking-cover { margin-bottom: 14px; }
#appearance-preview .booking-identity { margin-bottom: 18px; }
#appearance-preview .booking-logo { width: 48px; height: 48px; }
#appearance-preview h3 { margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
#appearance-preview .screen-title h3 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
#appearance-preview .work-surface { padding: 16px; }
.preview-service { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; border-block: 1px solid var(--rule); padding: 10px 0; overflow-wrap: anywhere; }
.preview-service small { display: block; }
.preview-service > strong { white-space: nowrap; }
.booking-clock-example { margin-top: 12px; font-size: .86rem; }
.branding-saved { background: var(--green-pale); color: var(--green-ink); border-radius: 8px; margin-bottom: 15px; padding: 10px 14px; }
.section-rule { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
.fields > .section-rule { width: 100%; margin-block: 4px; }
.intake-questions { display: grid; gap: 16px; }
.intake-question { display: grid; gap: 9px; border: 1px solid var(--rule); border-radius: 8px; padding: 14px; }
.intake-question legend { font-weight: 800; font-size: .88rem; padding-inline: 6px; }
.intake-question [hidden] { display: none; }
.intake-preview { margin-top: 20px; }
.intake-answers { margin-block: 14px; }
.intake-answers dt { font-weight: 800; }
.intake-answers dd { margin: 3px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-intake { padding-top: 14px; border-top: 1px solid var(--rule); margin: 10px 0 7px; }
.public-intake > legend { font-size: 1rem; font-weight: 800; padding-right: 7px; }
.public-intake .field + .field { margin-top: 12px; }

@media (max-width: 740px) {
  .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .settings-layout { grid-template-columns: minmax(0,1fr); }
  .appearance-layout { grid-template-columns: minmax(0, 1fr); }
  .frame { width: min(100% - 32px, 650px); }
  .booking-columns { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .time-layout .summary { grid-column: 1; grid-row: 1; }
  .time-layout .work-surface { grid-column: 1; grid-row: 2; }
  .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-heading { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  .dashboard-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-shortcuts .row-links { justify-content: flex-start; }
  .agenda-top { align-items: stretch; flex-direction: column; gap: 12px; }
  .agenda-nav > .control:not(.icon) { flex: 1; }
  .agenda-modes { display: grid; }
  .dashboard-overview .button-grid { width: 100%; }
  .agenda-filters > .button-grid { flex: 1 0 100%; }
}

@media (max-width: 440px) {
  .import-column-guide { display: block; }
  .import-column-guide dt { margin-top: 12px; }
  .import-column-guide dd { margin-top: 3px; }
  .topbar-inner { min-height: 58px; gap: 12px; }
  .topbar .wordmark { font-size: 1.25rem; gap: 8px; }
  :is(.topbar,.cal-header) .wordmark-icon { width: 26px; height: 26px; border-radius: 7px; }
  :is(.topbar,.cal-header) .wordmark-icon::after { width: 11px; height: 11px; }
  .topnav { gap: 10px; font-size: .8rem; }
  .work-surface, .summary { padding: 18px 15px; }
  .actions > .button, .work-surface > .button,
  .calendar-actions > .button, .calendar-actions form > .button,
  .home-lead > .button { width: 100%; }
  .agenda-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .form-actions { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); }
  .settings-list.activity-list li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
  .activity-list .activity-details { grid-column: 1 / -1; grid-row: auto; }
  .activity-list .status { grid-column: 1; justify-self: start; }

  .workspace-heading > .button { width: 100%; }
  .dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-shortcuts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .settings-list .row-links { flex: 0 1 auto; }
  .settings-list li > .text-link:last-child { justify-content: flex-end; }
  .dashboard-metrics { gap: 8px; }
  .dashboard-metrics dt { line-height: 1.3; }
  .agenda-entry { grid-template-columns: minmax(70px, .38fr) minmax(0,1fr); gap: 8px 13px; }
  .agenda-status { grid-column: 2; text-align: left; }
  .move-link { justify-content: start; }
  .cancel-action p { text-align: left; margin-inline: 0 auto; }
  .booking-cover { aspect-ratio: 2.65 / 1; }
  .booking-identity { gap: 10px; }
  .booking-logo { width: 50px; height: 50px; }
  .calendar-shortcuts .row-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-grid span { white-space: normal; text-align: center; }
  .time-grid:has([data-local-clock]:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.field-pair { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359px) {
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .dashboard-metrics { display: block; }
  .dashboard-metrics div { display: grid; grid-template-rows: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; padding-block: 8px; }
  .dashboard-metrics div > small { grid-column: 1 / -1; }
}
@media (max-width: 440px) { .waitlist-dates { grid-template-columns: minmax(0, 1fr); } }


.month-dates { border-collapse: separate; border-spacing: 0 3px; margin: 8px 0 12px; table-layout: fixed; width: 100%; }
.month-dates th, .month-dates td { padding: 0; text-align: center; }
.month-dates th { font-size: 12px; font-weight: 700; }
.month-dates a, .month-dates td span { border-radius: 8px; display: grid; min-height: 44px; place-items: center; }
.month-dates a { color: var(--theme-link, var(--indigo)); font-weight: 750; text-decoration: none; }
.month-dates a:hover { text-decoration: underline; }
.booking-theme .month-dates a[aria-current="date"] { background: var(--indigo); color: var(--button-text, #fff); }
.month-dates td span { color: var(--soft-ink); }