/*
 * vita-form — structural CSS only.
 *
 * Visual styling (colors, typography, spacing, focus rings) is the host
 * theme's responsibility per spec §11.5 + CLAUDE.md. This file only handles
 * layout, show/hide, off-screen positioning, and the bits a theme can't
 * reasonably know about (signature canvas size, rating star inline-flex,
 * step active/inactive).
 */

/* Base layout ----------------------------------------------------------- */

.vita-form {
  display: block;
  position: relative;
}

.vita-form *,
.vita-form *::before,
.vita-form *::after {
  box-sizing: border-box;
}

/* Progress strip (multi-step only) -------------------------------------- */

.vita-form__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.vita-form__progress-step {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  opacity: 0.55;
}

.vita-form__progress-step.is-active {
  opacity: 1;
  font-weight: 600;
}

/* Steps ----------------------------------------------------------------- */

.vita-form__step {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vita-form-spacing, 1rem);
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.vita-form__step.is-active {
  display: grid;
}

.vita-form__step legend.screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fields ---------------------------------------------------------------- */

.vita-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  grid-column: span 2; /* default = full width */
}

.vita-form__field--full {
  grid-column: span 2;
}

.vita-form__field--half {
  grid-column: span 1;
}

.vita-form__field--third {
  grid-column: span 1;
}

.vita-form__field.is-hidden {
  display: none !important;
}

.vita-form__label {
  display: block;
  font-weight: 600;
}

.vita-form__required {
  color: currentColor;
  opacity: 0.7;
}

.vita-form__input,
.vita-form__field textarea,
.vita-form__field select {
  width: 100%;
  display: block;
}

.vita-form__help {
  font-size: 0.875em;
  opacity: 0.75;
  margin: 0;
}

.vita-form__error {
  font-size: 0.875em;
  margin: 0;
  min-height: 0;
}

.vita-form__error:empty {
  display: none;
}

.vita-form__field.is-error .vita-form__error {
  display: block;
}

/* Single checkbox / checkbox group / radio ------------------------------ */

.vita-form__field--checkbox label,
.vita-form__field--checkbox_group label,
.vita-form__field--radio label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal;
}

.vita-form__options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vita-form__options--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Signature ------------------------------------------------------------- */

.vita-form__field--signature canvas {
  display: block;
  border: 1px solid currentColor;
  width: 100%;
  height: 200px;
  touch-action: none;
  border-radius: 2px;
}

.vita-form__signature-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Rating ---------------------------------------------------------------- */

.vita-form__field--rating .vita-form__rating {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.vita-form__rating-star {
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.4;
}

.vita-form__rating-star.is-filled,
.vita-form__rating-star:hover,
.vita-form__rating-star:focus-within {
  opacity: 1;
}

/* File ------------------------------------------------------------------ */

.vita-form__field--file .vita-form__file-label {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.875em;
  opacity: 0.85;
}

/* Calculation ----------------------------------------------------------- */

.vita-form__field--calculation .vita-form__calc-display {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  border: 1px dashed currentColor;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

/* Navigation ------------------------------------------------------------ */

.vita-form__nav {
  display: flex;
  gap: var(--vita-form-spacing, 0.5rem);
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.vita-form__prev,
.vita-form__next,
.vita-form__submit {
  cursor: pointer;
}

.vita-form__prev:disabled,
.vita-form__next:disabled,
.vita-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* Honeypot -------------------------------------------------------------- */

.vita-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Success / error summary ---------------------------------------------- */

.vita-form__success,
.vita-form__error-summary {
  margin: 1rem 0;
}

.vita-form__success[hidden],
.vita-form__error-summary[hidden] {
  display: none;
}

/* Mobile collapse ------------------------------------------------------- */

@media (max-width: 640px) {
  .vita-form__step {
    grid-template-columns: 1fr;
  }
  .vita-form__field--half,
  .vita-form__field--third {
    grid-column: span 1;
  }
}

/* =========================================================================
   Step animations — shared keyframes used by stepper, tabs, and carousel.
   Carousel has its own vita-carousel-* keyframes (see below) and overrides
   the animation on its own mode-scoped selectors.
   Accordion uses no slide; it expands/collapses via CSS only.
   ========================================================================= */

@keyframes fm-slide-out-left {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes fm-slide-out-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes fm-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes fm-slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes fm-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Stepper: simultaneous in/out slide.
 * The steps container is a grid so both steps occupy the same cell during
 * the brief overlap; overflow:hidden clips the off-screen slide. */
.vita-form.vita-form--mode-stepper .vita-form__steps {
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;
}

.vita-form.vita-form--mode-stepper .vita-form__step {
  grid-area: stack;
}

/* Stepper: default slide animation */
.vita-form.vita-form--mode-stepper .vita-form__step.is-entering-forward {
  animation: fm-slide-in-right var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form.vita-form--mode-stepper .vita-form__step.is-entering-backward {
  animation: fm-slide-in-left var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form.vita-form--mode-stepper .vita-form__step.is-exiting-forward {
  animation: fm-slide-out-left var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}
.vita-form.vita-form--mode-stepper .vita-form__step.is-exiting-backward {
  animation: fm-slide-out-right var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}

/* Tabs: simultaneous in/out fade (default for tabs mode).
 * Same grid-area stacking keeps both steps in the same cell during overlap. */
.vita-form.vita-form--mode-tabs .vita-form__steps {
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;
}

.vita-form.vita-form--mode-tabs .vita-form__step {
  grid-area: stack;
}

/* Tabs: default fade animation */
.vita-form.vita-form--mode-tabs .vita-form__step.is-entering-forward,
.vita-form.vita-form--mode-tabs .vita-form__step.is-entering-backward {
  animation: fm-fade-in var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form.vita-form--mode-tabs .vita-form__step.is-exiting-forward,
.vita-form.vita-form--mode-tabs .vita-form__step.is-exiting-backward {
  animation: fm-fade-out var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}

/* Explicit "slide" override for stepper/tabs when user picks slide in settings */
.vita-form[data-step-animation="slide"].vita-form--mode-tabs .vita-form__step.is-entering-forward {
  animation: fm-slide-in-right var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form[data-step-animation="slide"].vita-form--mode-tabs .vita-form__step.is-entering-backward {
  animation: fm-slide-in-left var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form[data-step-animation="slide"].vita-form--mode-tabs .vita-form__step.is-exiting-forward {
  animation: fm-slide-out-left var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}
.vita-form[data-step-animation="slide"].vita-form--mode-tabs .vita-form__step.is-exiting-backward {
  animation: fm-slide-out-right var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}

/* Explicit "fade" override for stepper when user picks fade */
.vita-form[data-step-animation="fade"].vita-form--mode-stepper .vita-form__step.is-entering-forward,
.vita-form[data-step-animation="fade"].vita-form--mode-stepper .vita-form__step.is-entering-backward {
  animation: fm-fade-in var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form[data-step-animation="fade"].vita-form--mode-stepper .vita-form__step.is-exiting-forward,
.vita-form[data-step-animation="fade"].vita-form--mode-stepper .vita-form__step.is-exiting-backward {
  animation: fm-fade-out var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}

/* Explicit "fade" override for carousel when user picks fade */
.vita-form[data-step-animation="fade"].vita-form--mode-carousel .vita-form__step.is-entering-forward,
.vita-form[data-step-animation="fade"].vita-form--mode-carousel .vita-form__step.is-entering-backward {
  animation: fm-fade-in var(--vita-form-animation-ms, 300ms) ease both;
}
.vita-form[data-step-animation="fade"].vita-form--mode-carousel .vita-form__step.is-exiting-forward,
.vita-form[data-step-animation="fade"].vita-form--mode-carousel .vita-form__step.is-exiting-backward {
  animation: fm-fade-out var(--vita-form-animation-ms, 300ms) ease both;
  pointer-events: none;
}

/* No animation at all when explicitly set to none */
.vita-form[data-step-animation="none"] .vita-form__step.is-entering-forward,
.vita-form[data-step-animation="none"] .vita-form__step.is-entering-backward,
.vita-form[data-step-animation="none"] .vita-form__step.is-exiting-forward,
.vita-form[data-step-animation="none"] .vita-form__step.is-exiting-backward {
  animation: none;
}

/* Reduced motion: kill all step animations regardless of setting */
@media (prefers-reduced-motion: reduce) {
  .vita-form .vita-form__step.is-entering-forward,
  .vita-form .vita-form__step.is-entering-backward,
  .vita-form .vita-form__step.is-exiting-forward,
  .vita-form .vita-form__step.is-exiting-backward {
    animation: none;
  }
}

/* =========================================================================
   Step display modes
   Plugin baseline — works on any theme. Themes may layer on top via the same
   double-class selectors (.vita-form.vita-form--mode-X) for higher specificity.
   No !important used anywhere in this file.
   ========================================================================= */

/* --- Stepper (default) ------------------------------------------------- */
/*
 * Plugin baseline: numbered circles + connecting line so stepper is
 * visually meaningful even when the host theme provides no vita-form CSS.
 *
 * Counter approach: CSS counters increment on each .vita-form__progress-step.
 * The connecting line is a pseudo-element on the container.
 */

.vita-form.vita-form--mode-stepper .vita-form__progress {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: 0;
  align-items: center;
  counter-reset: fm-step;
}

.vita-form.vita-form--mode-stepper .vita-form__progress::-webkit-scrollbar {
  display: none;
}

.vita-form.vita-form--mode-stepper .vita-form__progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  opacity: 0.5;
  white-space: nowrap;
  counter-increment: fm-step;
  padding: 0.25rem 0;
}

/* Numbered circle */
.vita-form.vita-form--mode-stepper .vita-form__progress-step::before {
  content: counter(fm-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.8125em;
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}

/* Connecting line between circles — appears on all but the last item */
.vita-form.vita-form--mode-stepper .vita-form__progress-step:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  margin: 0 0.4rem;
  flex-shrink: 0;
}

.vita-form.vita-form--mode-stepper .vita-form__progress-step.is-active {
  opacity: 1;
  font-weight: 600;
}

/* Active circle: filled with the theme ink, numeral knocked out in the page
   colour. Explicit colours, NOT currentColor: on a pseudo-element currentColor
   resolves to the element's own `color`, so `background:currentColor` beside
   `color:#fff` paints the circle white — white numeral on a white fill. */
.vita-form.vita-form--mode-stepper .vita-form__progress-step.is-active::before {
  background: var(--wp--preset--color--foreground, #1a1a1a);
  border-color: var(--wp--preset--color--foreground, #1a1a1a);
  color: var(--wp--preset--color--background, #fff);
}

/* --- Tabs -------------------------------------------------------------- */
/*
 * Plugin baseline: 44 px min-height (touch target), active underline via
 * currentColor (inherits theme colour automatically), horizontal scroll on
 * narrow viewports.
 */

.vita-form.vita-form--mode-tabs .vita-form__tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid currentColor;
}

.vita-form.vita-form--mode-tabs .vita-form__tabs::-webkit-scrollbar {
  display: none;
}

.vita-form.vita-form--mode-tabs .vita-form__tab {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.55;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 1em;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}

.vita-form.vita-form--mode-tabs .vita-form__tab.is-active,
.vita-form.vita-form--mode-tabs .vita-form__tab[aria-selected="true"] {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: currentColor;
}

.vita-form.vita-form--mode-tabs .vita-form__tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Tab steps: only the active step is visible. */
.vita-form.vita-form--mode-tabs .vita-form__step {
  display: none;
}

.vita-form.vita-form--mode-tabs .vita-form__step.is-active {
  display: grid;
}

/* Exiting tabs steps must remain in the layout flow during the animation —
 * override the display:none above so the fade-out is visible. */
.vita-form.vita-form--mode-tabs .vita-form__step.is-exiting-forward,
.vita-form.vita-form--mode-tabs .vita-form__step.is-exiting-backward {
  display: grid;
}

/* --- Accordion --------------------------------------------------------- */
/*
 * Plugin baseline: chevron ::after that rotates on active, background tint
 * on the active header.
 */

.vita-form.vita-form--mode-accordion .vita-form__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Accordion fieldsets are always in the layout flow. */
.vita-form.vita-form--mode-accordion .vita-form__step {
  display: block;
  margin-bottom: 0;
  border: 1px solid currentColor;
  border-bottom: none;
}

.vita-form.vita-form--mode-accordion .vita-form__step:last-child {
  border-bottom: 1px solid currentColor;
}

/* Accordion header button. */
.vita-form.vita-form--mode-accordion .vita-form__step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1em;
  gap: 0.75rem;
}

/* Chevron via ::after */
.vita-form.vita-form--mode-accordion .vita-form__step-header::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  margin-top: -0.2em;
}

/* Rotate chevron when open */
.vita-form.vita-form--mode-accordion .vita-form__step.is-active .vita-form__step-header::after {
  transform: rotate(-135deg);
  margin-top: 0.2em;
}

/* Background tint on active header */
.vita-form.vita-form--mode-accordion .vita-form__step.is-active .vita-form__step-header {
  background: rgba(0, 0, 0, 0.04);
}

.vita-form.vita-form--mode-accordion .vita-form__step:not(.is-active) .vita-form__step-header {
  opacity: 0.65;
}

.vita-form.vita-form--mode-accordion .vita-form__step-header:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Accordion body: hidden by default, shown when step is active.
 * Use display:block (not grid) so fields fill 100% of the available width
 * and are not subject to column-count confusion from the host theme's
 * .vita-form__step grid rule (e.g. repeat(12, 1fr) → items auto-placed into
 * 1 column = ~5 chars wide). Each .vita-form__field is already display:flex,
 * so it sizes itself correctly inside a block container. */
.vita-form.vita-form--mode-accordion .vita-form__step__body {
  display: none;
  padding: 1rem;
}

.vita-form.vita-form--mode-accordion .vita-form__step.is-active .vita-form__step__body {
  display: block;
  width: 100%;
}

/* --- Carousel ---------------------------------------------------------- */
/*
 * Plugin baseline: card chrome (white bg, shadow, rounded corners, padding,
 * horizontal margins for overlay arrows), counter centered below.
 * Simultaneous slide: exiting step slides out while entering step slides in.
 */

.vita-form.vita-form--mode-carousel .vita-form__steps {
  overflow: hidden;
  position: relative;
}

/* Card chrome */
.vita-form.vita-form--mode-carousel .vita-form__step {
  display: none;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 2rem 2.5rem;
  margin: 0 3rem;
}

.vita-form.vita-form--mode-carousel .vita-form__step.is-active {
  display: grid;
}

/* Entering animations */
.vita-form.vita-form--mode-carousel .vita-form__step.is-entering-forward {
  animation: vita-carousel-enter-forward 0.28s ease both;
}

.vita-form.vita-form--mode-carousel .vita-form__step.is-entering-backward {
  animation: vita-carousel-enter-backward 0.28s ease both;
}

/* Exiting animations (applied by JS before hiding) */
.vita-form.vita-form--mode-carousel .vita-form__step.is-exiting-forward {
  animation: vita-carousel-exit-forward 0.28s ease both;
  pointer-events: none;
}

.vita-form.vita-form--mode-carousel .vita-form__step.is-exiting-backward {
  animation: vita-carousel-exit-backward 0.28s ease both;
  pointer-events: none;
}

@keyframes vita-carousel-enter-forward {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes vita-carousel-enter-backward {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes vita-carousel-exit-forward {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

@keyframes vita-carousel-exit-backward {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Counter element — centered below the card */
.vita-carousel__counter {
  text-align: center;
  font-size: 0.875em;
  opacity: 0.65;
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

/* Overlay arrow nav buttons — placed absolutely by the theme or left to
   the default nav row. In plugin baseline we widen the nav row to reach
   past the card margins so Prev/Next appear beside the card. */
.vita-form.vita-form--mode-carousel .vita-form__nav {
  padding: 0 3rem;
}

/* Accordion / carousel mobile ------------------------------------------ */

@media (max-width: 640px) {
  /* Accordion body is display:block so no grid-template-columns override needed. */
  .vita-form.vita-form--mode-carousel .vita-form__step {
    margin: 0 1rem;
    padding: 1.25rem 1.25rem;
  }
  .vita-form.vita-form--mode-carousel .vita-form__nav {
    padding: 0 1rem;
  }
}

/* Carousel respects the global reduced-motion rule above. */
/* No animation when explicitly disabled */
.vita-form[data-step-animation="none"].vita-form--mode-carousel .vita-form__step.is-entering-forward,
.vita-form[data-step-animation="none"].vita-form--mode-carousel .vita-form__step.is-entering-backward,
.vita-form[data-step-animation="none"].vita-form--mode-carousel .vita-form__step.is-exiting-forward,
.vita-form[data-step-animation="none"].vita-form--mode-carousel .vita-form__step.is-exiting-backward {
  animation: none;
}

/* =========================================================================
   Booker mount — baseline layout
   Applies in every step-display mode (stepper, tabs, accordion, carousel).
   The mount is a direct grid-item child of .vita-form__step, so without an
   explicit grid-column it collapses to 1 column (~5 chars) inside the
   theme's 12-column step grid. Span 1/-1 fills all columns regardless of
   how many the parent grid defines.
   ========================================================================= */

.vita-booker-mount {
  display: block;
  width: 100%;
  grid-column: 1 / -1; /* span all columns in any parent grid */
  min-width: 0;
}

/* =========================================================================
   Booking slot display modes
   ========================================================================= */

/* Shared slot pills ---------------------------------------------------- */

.vita-booker__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.vita-booker__slots--stacked {
  flex-direction: column;
}

.vita-booker__slot {
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  font-size: 0.875em;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.vita-booker__slot:hover,
.vita-booker__slot:focus-visible {
  opacity: 0.75;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vita-booker__slot.is-selected {
  font-weight: 600;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Conflict + empty + loading ------------------------------------------ */

.vita-booker__conflict {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid currentColor;
  font-size: 0.9em;
}

.vita-booker__empty,
.vita-booker__loading {
  font-size: 0.875em;
  opacity: 0.65;
  margin: 0.5rem 0 0;
}

.vita-booker__scarcity {
  font-size: 0.8125em;
  font-style: italic;
  margin: 0.5rem 0 0;
  color: var(--wp--preset--color--accent, currentColor);
  opacity: 0.85;
}

/* ---- MODE: dropdown -------------------------------------------------- */

.vita-booker__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

/* ---- MODE: inline_calendar ------------------------------------------- */

.vita-booker__cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.vita-booker__cal-title {
  font-weight: 600;
  font-size: 1em;
}

.vita-booker__cal-nav {
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  font-size: 1em;
  line-height: 1;
}

.vita-booker__cal-nav:hover,
.vita-booker__cal-nav:focus-visible {
  opacity: 0.65;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vita-booker__cal-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.vita-booker__cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.vita-booker__cal-cell {
  text-align: center;
  padding: 0.4rem 0.2rem;
}

.vita-booker__cal-cell--head {
  font-weight: 600;
  font-size: 0.75em;
  opacity: 0.7;
}

.vita-booker__cal-cell--day {
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.875em;
  transition: opacity 0.15s;
}

.vita-booker__cal-cell--day:hover:not(:disabled),
.vita-booker__cal-cell--day:focus-visible {
  border-color: currentColor;
  outline: none;
}

.vita-booker__cal-cell--day.is-past,
.vita-booker__cal-cell--day:disabled {
  opacity: 0.3;
  cursor: default;
}

.vita-booker__cal-cell--day.is-selected {
  font-weight: 700;
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.vita-booker__cal-cell--empty {
  pointer-events: none;
}

.vita-booker__cal-slots {
  margin-top: 0.75rem;
}

/* ---- MODE: vertical_list --------------------------------------------- */

.vita-booker__vlist {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vita-booker__vlist-card {
  border: 1px solid currentColor;
  border-radius: 4px;
  overflow: hidden;
}

.vita-booker__vlist-card-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vita-booker__vlist-card-btn:hover,
.vita-booker__vlist-card-btn:focus-visible {
  opacity: 0.75;
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.vita-booker__vlist-card.is-expanded .vita-booker__vlist-card-btn {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.vita-booker__vlist-card-body {
  padding: 0.6rem 0.85rem 0.75rem;
}

/* ---- MODE: week_view -------------------------------------------------- */

.vita-booker__week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.vita-booker__week-title {
  font-weight: 600;
  font-size: 0.9em;
}

.vita-booker__week-nav {
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  font-size: 1em;
  line-height: 1;
}

.vita-booker__week-nav:hover,
.vita-booker__week-nav:focus-visible {
  opacity: 0.65;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vita-booker__week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.vita-booker__week-col {
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0.25rem;
}

.vita-booker__week-col.is-selected {
  border-color: currentColor;
}

.vita-booker__week-day-head {
  text-align: center;
  margin-bottom: 0.35rem;
}

.vita-booker__week-day-head.is-past {
  opacity: 0.35;
}

.vita-booker__week-day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 0.25rem;
  border-radius: 3px;
  gap: 0.1rem;
}

.vita-booker__week-day-btn:hover,
.vita-booker__week-day-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  opacity: 0.75;
}

.vita-booker__week-day-name {
  font-size: 0.7em;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vita-booker__week-day-num {
  font-weight: 600;
  font-size: 0.95em;
}

.vita-booker__week-slots {
  margin-top: 0.25rem;
}

/* Week view mobile: collapse to 2-column scrollable list */
@media (max-width: 540px) {
  .vita-booker__week-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}