/**
 * Booking page — dynamic hero, flat form layout, CRM step tabs.
 */

/* Shared content width: hero, form, and FAQ stay aligned. */
.mk-booking-hero,
.mk-booking {
  --mk-booking-content-max: 56rem;
}

/* ── Dynamic booking hero ─────────────────────────────────────────────── */

.mk-booking-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mk-primary) 88%, #000) 0%,
    color-mix(in srgb, var(--mk-accent) 42%, var(--mk-primary)) 100%
  );
  color: #fff;
}

.mk-booking-hero--has-image {
  min-height: clamp(200px, 28vh, 320px);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.mk-booking-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--mk-booking-hero-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.mk-booking-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--mk-primary) 72%, transparent) 0%,
    color-mix(in srgb, #000 55%, transparent) 100%
  );
}

.mk-booking-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--mk-booking-content-max, 56rem);
  margin-inline: auto;
  box-sizing: border-box;
}

.mk-booking-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 88%, transparent);
}

.mk-booking-hero__title {
  margin: 0;
  font-family: var(--mk-font-head);
  font-size: clamp(1.85rem, 2.2vw + 1.2rem, 3rem);
  font-weight: 600;
  line-height: 1.12;
  color: #fff;
}

.mk-booking-hero__tagline {
  margin: 0.25rem 0 0;
  max-width: 48ch;
  margin-inline: auto;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.05rem);
  line-height: 1.55;
  color: color-mix(in srgb, #fff 90%, transparent);
}

.mk-booking-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-top: 0.65rem;
}

.mk-booking-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: color-mix(in srgb, #fff 14%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.mk-booking-hero--plain .mk-booking-hero__meta-item {
  background: color-mix(in srgb, #fff 10%, transparent);
}

/* ── Page layout ──────────────────────────────────────────────────────── */

.mk-booking {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.mk-booking > .mk-container {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.mk-booking__form {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  overflow-x: clip;
}

/* ── Session-specific FAQ (dynamic per session type) ─────────────────────── */

.mk-booking-faq {
  width: 100%;
  max-width: var(--mk-booking-content-max, 56rem);
  margin-inline: auto;
  min-width: 0;
  box-sizing: border-box;
}

.mk-booking-faq__head {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.mk-booking-faq__title {
  margin: 0;
  font-family: var(--mk-font-head);
  font-size: clamp(1.65rem, 1.4vw + 1.2rem, 2.35rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--mk-text);
}

.mk-booking-faq__card {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mk-booking-faq__list {
  display: flex;
  flex-direction: column;
}

.mk-booking-faq__item {
  border-bottom: 1px solid var(--mk-border);
  transition: background-color var(--dur) var(--ease);
}

.mk-booking-faq__item:last-child {
  border-bottom: none;
}

.mk-booking-faq__item[open] {
  background: color-mix(in srgb, var(--mk-accent) 4%, var(--mk-surface));
}

.mk-booking-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4, 1rem);
  padding: 1.125rem clamp(1.15rem, 2.5vw, 1.5rem);
  font-family: var(--mk-font-body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--mk-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.mk-booking-faq__q::-webkit-details-marker {
  display: none;
}

.mk-booking-faq__q:hover {
  color: color-mix(in srgb, var(--mk-text) 82%, var(--mk-accent));
}

.mk-booking-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
}

.mk-booking-faq__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--mk-border);
  background: var(--mk-bg);
  color: var(--mk-muted);
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.mk-booking-faq__item[open] .mk-booking-faq__toggle {
  transform: rotate(180deg);
  border-color: color-mix(in srgb, var(--mk-accent) 45%, var(--mk-border));
  background: color-mix(in srgb, var(--mk-accent) 12%, var(--mk-bg));
  color: var(--mk-accent);
}

.mk-booking-faq__chevron {
  display: block;
}

.mk-booking-faq__a {
  padding: 0 clamp(1.15rem, 2.5vw, 1.5rem) 1.35rem;
  color: var(--mk-text-2);
  font-size: 0.95rem;
  line-height: 1.7;
}

.mk-booking-faq__a > *:first-child {
  margin-top: 0;
}

.mk-booking-faq__a > *:last-child {
  margin-bottom: 0;
}

.mk-booking-faq__a p {
  margin: 0 0 0.85rem;
  max-width: none;
}

.mk-booking__reassurance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s6);
  margin: 0;
  padding: 0;
  width: 100%;
}

.mk-booking__reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.88rem;
  color: var(--mk-muted);
  line-height: 1.4;
}

.mk-booking__reassurance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mk-accent) 10%, var(--mk-bg));
  color: var(--mk-link);
  flex-shrink: 0;
}

.mk-booking__reassurance-item a {
  color: var(--mk-link);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}

.mk-booking__reassurance-item a:hover {
  color: var(--mk-link-hover);
}

.mk-booking__fallback {
  margin: 0;
  padding: var(--s6);
  text-align: center;
  color: var(--mk-text-2);
  line-height: 1.6;
  background: color-mix(in srgb, var(--mk-accent) 6%, var(--mk-bg));
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
}

.mk-booking__fallback a {
  display: inline-block;
  margin-top: var(--s3);
  color: var(--mk-link);
  font-weight: 600;
  text-decoration: none;
}

.mk-booking__fallback a:hover {
  color: var(--mk-link-hover);
}

/* ── CRM booking form — width rules in main.css (.mk-booking__form) ───── */

.mk-booking .cp-bf,
.mk-booking .standalone-form-layout.cp-bf,
.mk-booking #cp-bf-root {
  --bf-accent: var(--mk-btn-bg);
  --bf-radius: var(--mk-radius-lg);
  padding: 0;
  font-family: var(--mk-font-body);
  color: var(--mk-text);
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
}

/* Hero replaces the in-form context card */
.mk-booking .cp-bf-context {
  display: none !important;
}

.mk-booking .cp-bf h2,
.mk-booking .cp-bf h3,
.mk-booking .cp-bf h4,
.mk-booking .cp-bf label,
.mk-booking .cp-bf p,
.mk-booking .cp-bf strong {
  color: inherit;
}

.mk-booking .cp-bf-step {
  width: 100%;
  box-sizing: border-box;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  text-align: left;
}

.mk-booking .cp-bf-step__title,
.mk-booking .cp-bf-done {
  width: 100%;
  max-width: none;
  text-align: center;
}

/* Theme global `p { max-width: 68ch }` caps width without centering the box */
.mk-booking .cp-bf-step > p.cp-bf-step__desc,
.mk-booking .cp-bf-step > p.cp-bf-signin-hint,
.mk-booking .cp-bf-step__desc,
.mk-booking .cp-bf-signin-hint {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

.mk-booking .cp-bf-fields,
.mk-booking .cp-bf-field {
  width: 100%;
  text-align: left;
}

.mk-booking .cp-bf-label {
  display: block;
  text-align: left !important;
}

.mk-booking .cp-bf-input,
.mk-booking .cp-bf-select,
.mk-booking .cp-bf-textarea {
  text-align: left;
}

.mk-booking .cp-bf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-color: var(--mk-border);
}

.mk-booking .cp-bf-nav .cp-bf-btn--primary {
  margin-left: auto;
}

.mk-booking .cp-bf-input,
.mk-booking .cp-bf-select,
.mk-booking .cp-bf-textarea {
  background: var(--mk-bg);
  border-color: var(--mk-border);
  color: var(--mk-text);
}

.mk-booking .cp-bf-input:focus,
.mk-booking .cp-bf-select:focus,
.mk-booking .cp-bf-textarea:focus {
  border-color: var(--mk-btn-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-btn-bg) 18%, transparent);
}

.mk-booking .cp-bf-btn--primary {
  background: var(--mk-btn-bg);
  border-color: var(--mk-btn-bg);
  color: var(--mk-btn-text) !important;
}

/* Booking calendar — tighter day cells, no dead space below dates */
.mk-booking .cp-bf-booking-calendar {
  margin-bottom: 0;
}

.mk-booking .cp-bf-cal-grid {
  align-content: start;
}

.mk-booking .cp-bf-cal-day {
  padding: 4px 2px;
}

.mk-booking .cp-bf-cal-day-inner {
  min-height: 0;
}

.mk-booking .cp-bf-cal-day-inner:has(.cp-bf-gh-sun) {
  min-height: 2.5rem;
}

.mk-booking .cp-bf-cal-day.empty {
  padding: 0;
  min-height: 0;
}

.mk-booking .cp-bf-booking-slots {
  margin-top: 12px;
  padding-top: 12px;
}

.mk-booking .cp-bf-slots-title {
  margin-bottom: 10px;
}

.mk-booking .cp-bf-error {
  text-align: center;
  background: color-mix(in srgb, var(--mk-accent) 8%, var(--mk-surface));
  border: 1px solid color-mix(in srgb, var(--mk-accent) 22%, var(--mk-border));
  border-radius: var(--mk-radius-lg);
  color: var(--mk-text-2);
  padding: var(--s6);
  line-height: 1.55;
}

/* Progress bar */
.mk-booking .cp-bf-progress {
  height: 4px;
  margin-bottom: 0.75rem;
  background: var(--mk-border);
  border-radius: 999px;
}

.mk-booking .cp-bf-progress__bar {
  background: var(--mk-btn-bg);
}

/* Step tabs — fix pill colors broken by theme inherit rules */
.mk-booking .cp-bf-step-indicators {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 0 0 1.25rem;
  margin: 0;
}

.mk-booking .cp-bf-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--mk-text-2) !important;
  background: var(--mk-bg);
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  cursor: default;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mk-booking .cp-bf-pill.active {
  color: var(--mk-btn-text) !important;
  background: var(--mk-btn-bg);
  border-color: var(--mk-btn-bg);
}

.mk-booking .cp-bf-pill.done {
  color: #16a34a !important;
  background: color-mix(in srgb, #16a34a 8%, var(--mk-bg));
  border-color: color-mix(in srgb, #16a34a 28%, var(--mk-border));
}

@media (max-width: 640px) {
  .mk-booking-hero__inner {
    align-items: center;
    text-align: center;
  }

  .mk-booking-hero__meta {
    justify-content: center;
  }

  .mk-booking__reassurance {
    flex-direction: column;
    align-items: center;
    gap: var(--s4);
  }

  .mk-booking .cp-bf-input,
  .mk-booking .cp-bf-select,
  .mk-booking .cp-bf-textarea {
    font-size: 16px;
  }
}

/* ── Dark mode — full CRM form skin (portal.css hardcodes light colors) ─── */

html[data-theme="dark"] .mk-booking__form {
  color-scheme: dark;
}

html[data-theme="dark"] .mk-booking__form .cp-bf,
html[data-theme="dark"] .mk-booking__form #cp-bf-root.cp-bf,
html[data-theme="dark"] .mk-booking__form .standalone-form-layout.cp-bf {
  --bf-accent: var(--mk-accent);
  --cp-border: var(--mk-border);
  background: var(--mk-surface) !important;
  color: var(--mk-text) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-radius-lg) !important;
  padding: clamp(1rem, 2.5vw, 1.5rem) !important;
  box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf h2,
html[data-theme="dark"] .mk-booking__form .cp-bf h3,
html[data-theme="dark"] .mk-booking__form .cp-bf h4,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-step__title,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-done,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-logged-in__text,
html[data-theme="dark"] .mk-booking__form .cp-bf strong {
  color: var(--mk-text) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf p,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-step__desc,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-signin-hint,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-label,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-help,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-logged-in__hint {
  color: var(--mk-text-2) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-signin-hint a {
  color: var(--mk-link) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-step {
  background: var(--mk-bg) !important;
  border-color: var(--mk-border) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-input,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-select,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-textarea {
  background: var(--mk-surface) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-text) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-input::placeholder,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-textarea::placeholder {
  color: var(--mk-muted) !important;
  opacity: 1;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-input:focus,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-select:focus,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-textarea:focus {
  border-color: var(--mk-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 25%, transparent) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c8c3bc' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-nav {
  border-top-color: var(--mk-border) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-btn--primary {
  background: var(--mk-accent) !important;
  border-color: var(--mk-accent) !important;
  color: var(--mk-on-accent) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-btn--primary:hover {
  filter: brightness(1.06);
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-btn--primary:disabled {
  background: var(--mk-surface-2) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-muted) !important;
  opacity: 1 !important;
  filter: none;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-btn--ghost {
  color: var(--mk-text-2) !important;
  background: transparent !important;
  border-color: var(--mk-border) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-btn--ghost:hover {
  background: var(--mk-surface-2) !important;
  color: var(--mk-text) !important;
  border-color: color-mix(in srgb, var(--mk-border) 60%, var(--mk-text)) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-choice label {
  background: var(--mk-surface) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-text) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-choice label:hover {
  background: var(--mk-surface-2) !important;
  border-color: color-mix(in srgb, var(--mk-border) 55%, var(--mk-text)) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-logged-in {
  background: color-mix(in srgb, #16a34a 12%, var(--mk-surface)) !important;
  border-color: color-mix(in srgb, #16a34a 30%, var(--mk-border)) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-progress {
  background: var(--mk-border) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-progress__bar {
  background: var(--mk-accent) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-pill {
  color: var(--mk-muted) !important;
  background: var(--mk-bg) !important;
  border-color: var(--mk-border) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-pill.active {
  color: var(--mk-on-accent) !important;
  background: var(--mk-accent) !important;
  border-color: var(--mk-accent) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-pill.done {
  color: #4ade80 !important;
  background: color-mix(in srgb, #16a34a 14%, var(--mk-bg)) !important;
  border-color: color-mix(in srgb, #16a34a 35%, var(--mk-border)) !important;
}

/* Calendar / slots / payment steps */
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-calendar,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-timeslots,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-slot,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-contract-body,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-contract-sign,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-payment-summary {
  background: var(--mk-surface) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-text) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-cal-head,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-timeslots__hint,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-calendar__month {
  color: var(--mk-text-2) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-cal-day {
  color: var(--mk-text) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-cal-day:hover:not(.disabled):not(.empty) {
  background: var(--mk-surface-2) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-cal-day.selected,
html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-slot.selected {
  background: var(--mk-accent) !important;
  border-color: var(--mk-accent) !important;
  color: var(--mk-on-accent) !important;
}

html[data-theme="dark"] .mk-booking__form .cp-bf .cp-bf-slot:hover {
  border-color: var(--mk-accent) !important;
  background: color-mix(in srgb, var(--mk-accent) 10%, var(--mk-surface)) !important;
}

html[data-theme="dark"] .mk-booking-hero__overlay {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--mk-bg) 30%, transparent) 0%,
    color-mix(in srgb, var(--mk-bg) 72%, transparent) 100%
  ) !important;
}

html[data-theme="dark"] .mk-booking-hero--plain {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mk-surface) 90%, #000) 0%,
    color-mix(in srgb, var(--mk-accent) 20%, var(--mk-bg)) 100%
  );
}

html[data-theme="dark"] .mk-booking__reassurance-item {
  color: var(--mk-muted);
}

html[data-theme="dark"] .mk-booking__reassurance-icon {
  background: color-mix(in srgb, var(--mk-accent) 16%, var(--mk-surface));
  color: var(--mk-link);
}

html[data-theme="dark"] .mk-booking-faq__card {
  background: var(--mk-surface);
  border-color: var(--mk-border);
  box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .mk-booking-faq__item {
  border-bottom-color: var(--mk-border);
}

html[data-theme="dark"] .mk-booking-faq__item[open] {
  background: color-mix(in srgb, var(--mk-accent) 8%, var(--mk-surface));
}

html[data-theme="dark"] .mk-booking-faq__toggle {
  background: var(--mk-bg);
  border-color: var(--mk-border);
  color: var(--mk-muted);
}

html[data-theme="dark"] .mk-booking-faq__item[open] .mk-booking-faq__toggle {
  background: color-mix(in srgb, var(--mk-accent) 18%, var(--mk-bg));
  border-color: color-mix(in srgb, var(--mk-accent) 40%, var(--mk-border));
  color: var(--mk-accent);
}