/* ==========================================================================
   Niwa Lead Form — Card Mode + Completion styles
   ---------------------------------------------------------------------------
   The card is mounted as the LAST CHILD of the chat panel
   (.niwa-morph__chat / .niwa-center__chat). It appears below the message
   stream but above the pill (which sits outside the chat panel). Because
   the chat panel fades with the flyout, the card hides automatically when
   the morph collapses — no artifacts above the pill.

   VISUAL LANGUAGE: mirrors the in-chat product experience
   (assets/css/niwa-products.css — .niwa-product-focus). The card is a
   floating glass panel built from the same theme tokens:
     --niwa-product-panel-bg          panel glass
     --niwa-product-control-bg        control pills / composer field
     --niwa-product-text / -muted     typography
     --niwa-product-selected-border   selected outline + progress fill
   Choice pills mirror `.niwa-product-option`, the Continue CTA mirrors
   `.niwa-product-focus__action--primary` (white pill, dark text).

   Scoping:
     .niwa-morph__chat.niwa-lf-host-active   → flyout chat panel
     .niwa-center__chat.niwa-lf-host-active  → centerstage chat panel
     .niwa-lf-card                           → card itself
     .niwa-lf-completion-bubble              → chat-mode completion
   ========================================================================== */

/* -- Card: core frame --------------------------------------------------- */
/* Floating glass panel with the product-focus footprint (side margins,
   21px radius, translucent panel background, white text). `flex: 1 1 auto`
   lets the card share the chat panel's vertical space with
   `.niwa-morph__body`, so the question is presented large and centered
   while the composer stays docked at the card's bottom edge. */
.niwa-lf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 8px var(--niwa-space-md, 16px) 10px;
  padding: 0;
  background: var(--niwa-product-panel-bg, rgba(66, 68, 65, 0.28));
  color: var(--niwa-product-text, #fff);
  border: 0;
  border-radius: 21px;
  overflow: hidden;
  animation: niwa-lf-card-rise 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
  flex: 1 1 auto;
  min-height: 0;
}

.niwa-lf-card[hidden] {
  display: none !important;
}

.niwa-widget .niwa-lf-card__close,
.niwa-lf-card__close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 0 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--niwa-product-close-bg, rgba(255, 255, 255, 0.14)) !important;
  color: var(--niwa-product-text, #fff) !important;
  font: 300 22px/1 var(--niwa-font-family, inherit) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.niwa-widget .niwa-lf-card__close:hover,
.niwa-lf-card__close:hover {
  background: var(--niwa-product-control-active, rgba(255, 255, 255, 0.24)) !important;
}
/* While the card is mounted, hide the native pill composer so the card
   *replaces* the input bar instead of sitting above it. The card provides
   its own composer (native-style textarea + send) inside its body. */
body.niwa-lf-card-active .niwa-widget .niwa-morph__pill,
body.niwa-lf-card-active .niwa-widget .niwa-center__pill {
  display: none !important;
}

@keyframes niwa-lf-card-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Progress bar (2px line, pinned to the top of the glass panel) ------ */
.niwa-lf-card__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  z-index: 3;
}

.niwa-lf-card__progress-fill {
  height: 100%;
  background: var(--niwa-product-selected-border, #fff);
  width: 0%;
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* -- Body + transitions ------------------------------------------------- */
/* Body fills the card so the question pins to the center and the composer
   sits naturally below it with flex gap breathing room. */
.niwa-lf-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--niwa-space-lg, 24px) var(--niwa-space-md, 16px) var(--niwa-space-md, 16px);
  gap: var(--niwa-space-md, 16px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.niwa-lf-card__body--enter {
  animation: niwa-lf-body-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.niwa-lf-card__body--leaving {
  opacity: 0;
  transform: translateY(-6px);
}

@keyframes niwa-lf-body-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Question header --------------------------------------------------- */
/* Centered both vertically and horizontally within the card body.
   `margin-block: auto` lets the question absorb the free space above AND
   below itself, so it lands at the vertical center while the composer
   stays docked at the bottom edge. Stacked layout: uppercase eyebrow
   counter ("1 / 5") above the question label — the same micro-label +
   title pairing the product panels use. */
.niwa-lf-card__question {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-block: auto;
  text-align: center;
  max-width: 100%;
}

/* Eyebrow counter — mirrors the product panel/chip micro-typography
   (650 10.5px uppercase). */
.niwa-lf-card__number {
  flex: 0 0 auto;
  color: var(--niwa-product-muted, rgba(255, 255, 255, 0.82));
  font: 650 10.5px/1 var(--niwa-font-family);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Question label — mirrors `.niwa-product-focus__title` (500 15px, tight
   letter-spacing), but allowed to wrap. */
.niwa-lf-card__label {
  color: var(--niwa-product-text, #fff);
  font: 500 15px/1.35 var(--niwa-font-family);
  letter-spacing: -0.025em;
  max-width: 34ch;
}

/* -- Input host -------------------------------------------------------- */
/* Sits at the bottom by virtue of document order — the question above
   carries `margin-block: auto`, which absorbs all free space and pushes
   the input-host flush against the body's bottom padding. */
.niwa-lf-card__input-host {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.niwa-lf-card__hint {
  font-size: 12px;
  color: var(--niwa-product-muted, rgba(255, 255, 255, 0.82));
  padding-bottom: 2px;
  font-style: italic;
}

/* -- Native-style composer inside the card ---------------------------- */
/* Wrapper mirrors `.niwa-morph__input` flex layout: the textarea flexes,
   the round 32px send button is pinned on the right. The wrapper itself
   is skinned as a product control pill (`--niwa-product-control-bg`) so
   the composer reads as part of the glass panel, like the product-focus
   action row. Send-button skin still comes from the frontend shield. */
.niwa-lf-card__native-input {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 5px 5px 10px;
  border-radius: 999px;
  background: var(--niwa-product-control-bg, rgba(255, 255, 255, 0.22));
}

.niwa-lf-card__native-input--multiline {
  align-items: flex-end;
  border-radius: 18px;
}

/* The textarea inside the card should flex to fill the row; the shield CSS
   gives it its fixed typography / sizing (22px line-height, 96px max).
   Colors are overridden to the product palette so the text stays legible
   on the dark glass panel (higher specificity than the shield's `:where`
   selector, so these !important declarations win). */
.niwa-lf-card__native-input .niwa-morph__textarea {
  flex: 1 1 auto;
  min-width: 0;
}

.niwa-widget .niwa-lf-card .niwa-morph__textarea {
  color: var(--niwa-product-text, #fff) !important;
  -webkit-text-fill-color: var(--niwa-product-text, #fff) !important;
  caret-color: var(--niwa-product-text, #fff) !important;
}

.niwa-widget .niwa-lf-card .niwa-morph__textarea::placeholder {
  color: var(--niwa-product-muted, rgba(255, 255, 255, 0.82)) !important;
  opacity: 0.75;
}

/* Multiline (textarea) variant — let it grow up to ~120px. Still inherits
   the shield's font + color tokens. */
.niwa-lf-card__native-input--multiline .niwa-morph__textarea {
  resize: vertical;
  min-height: 56px;
  max-height: 120px;
}

/* Submit button's shape (32px dark circle, arrow SVG, hover opacity) is
   fully handled by `.niwa-morph__send` shield rules — no overrides here. */
.niwa-lf-card__native-input .niwa-morph__send {
  flex: 0 0 32px;
}

/* -- Choice pills (mirror .niwa-product-option) ------------------------ */
/* Outline pills centered like the product options panel: transparent
   background, hairline border, muted text; the selected state inverts to
   the 2px selected outline + control background, exactly like
   `.niwa-product-option[aria-pressed="true"]`. */
.niwa-lf-card__choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.niwa-widget .niwa-lf-card__choice,
.niwa-lf-card__choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--niwa-product-muted, rgba(255, 255, 255, 0.82));
  font: 500 12px/1.2 var(--niwa-font-family) !important;
  letter-spacing: -0.015em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.niwa-widget .niwa-lf-card__choice:hover,
.niwa-lf-card__choice:hover {
  color: var(--niwa-product-text, #fff);
  transform: translateY(-1px);
}

.niwa-widget .niwa-lf-card__choice:active,
.niwa-lf-card__choice:active {
  transform: scale(0.97);
}

.niwa-widget .niwa-lf-card__choice[aria-pressed="true"],
.niwa-widget .niwa-lf-card__choice--active,
.niwa-lf-card__choice--active {
  border: 2px solid var(--niwa-product-selected-border, #fff);
  background: var(--niwa-product-control-bg, rgba(255, 255, 255, 0.22));
  color: var(--niwa-product-text, #fff);
  /* Compensate the 1px→2px border so the pill doesn't grow. */
  padding: 7px 13px;
}

/* -- Multi-choice Continue button -------------------------------------- */
/* Mirrors `.niwa-product-focus__action--primary`: solid white pill with
   dark text — the affirmative primary action of the product surface. */
.niwa-widget .niwa-lf-card__continue,
.niwa-lf-card__continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 42px;
  margin: 0;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: #3c3d3a;
  font: 500 11.5px/1 var(--niwa-font-family) !important;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.niwa-widget .niwa-lf-card__continue:hover,
.niwa-lf-card__continue:hover {
  background: #fff;
  color: #3c3d3a;
  transform: translateY(-1px);
}

.niwa-widget .niwa-lf-card__continue:active,
.niwa-lf-card__continue:active {
  transform: scale(0.97);
}

/* -- Focus visible (match product surface) ----------------------------- */
.niwa-lf-card :is(button, [role="button"]):focus-visible {
  outline: 2px solid var(--niwa-product-selected-border, #fff);
  outline-offset: 2px;
}

/* -- Error + shake ----------------------------------------------------- */
.niwa-lf-card__error {
  font-size: 12.5px;
  color: #ffb4a8;
  text-align: center;
  padding-top: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 220ms ease, padding-top 220ms ease;
}

.niwa-lf-card__error--visible {
  padding-top: 8px;
  max-height: 60px;
  opacity: 1;
}

.niwa-lf-card--shake {
  animation: niwa-lf-shake 420ms cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes niwa-lf-shake {
  10%, 90%      { transform: translateX(-1px); }
  20%, 80%      { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60%      { transform: translateX(5px); }
}

/* -- Completion (chat bubble) ----------------------------------------- */
/* Both chat-mode and card-mode now hand off completion to a regular bot
   bubble in the chat body (card mode unmounts itself after rendering).
   The media sits above the text inside the bubble. */
.niwa-lf-completion-bubble .niwa-lf-completion-media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* -- Scheduler ---------------------------------------------------------- */
/* Segment-by-segment appointment picker that mirrors the in-chat product
   experience (assets/css/niwa-products.css). One segment is visible at a
   time — date → time → contact → success — and segment swaps animate the
   `.niwa-scheduler__content` block-size exactly like the product-focus
   panels. Round back buttons mirror `.niwa-product-panel__back`, day cells
   and time slots mirror `.niwa-product-option` pills.

   HARDENING: like niwa-products.css, every interactive skin is scoped to
   `.niwa-widget` and uses !important so aggressive theme button/input
   styles (green submit buttons, bordered inputs) cannot leak in.

   PLACEMENT: without an explicit host the scheduler docks into the shell
   inside `.niwa-scheduler-dock`, inserted before the composer pill — the
   same slot the product focus uses. `is-scheduler-open` on the shell hides
   the pill so the scheduler REPLACES the input instead of scrolling away
   in the chat stream. */

/* Pill is replaced while the scheduler is docked (same rule pattern as
   `is-product-open`). */
.niwa-widget :is(.niwa-morph, .niwa-center).is-scheduler-open > :is(.niwa-morph__pill, .niwa-center__pill) {
  display: none;
}

.niwa-widget .niwa-scheduler-dock {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-block-size: 0;
  max-block-size: calc(100% - 66px);
  margin: 8px var(--niwa-space-md, 16px) 10px;
}

/* Fallback host when no shell exists (inline shortcode page). */
.niwa-scheduler-message {
  width: calc(100% - 24px);
  margin: 8px 12px 14px;
}

.niwa-scheduler {
  --niwa-scheduler-bg: var(--niwa-product-panel-bg, rgba(66, 68, 65, 0.92));
  --niwa-scheduler-control: var(--niwa-product-control-bg, rgba(255, 255, 255, 0.12));
  --niwa-scheduler-text: var(--niwa-product-text, #fff);
  --niwa-scheduler-muted: var(--niwa-product-muted, rgba(255, 255, 255, 0.62));
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
  border: 0;
  border-radius: 21px;
  background: var(--niwa-scheduler-bg);
  color: var(--niwa-scheduler-text);
  font-family: var(--niwa-font-family, inherit);
  box-shadow: none;
  transition: background 180ms ease-out, border-color 180ms ease-out, box-shadow 220ms ease-out;
}

/* Standalone booking entry point: shortcode output can be a Niwa pill or a
   plain link, while any existing site button may target #niwa-booking. */
.niwa-booking-trigger--button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 11px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #3f413e !important;
  color: #fff !important;
  font: 600 14px/1.2 var(--niwa-font-family, inherit) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.niwa-booking-trigger--link { cursor: pointer; }

body.niwa-booking-overlay-open { overflow: hidden !important; }

body.niwa-booking-overlay-open > .niwa-widget:not(.niwa-booking-overlay),
body.niwa-booking-overlay-open .niwa-attention-bubble {
  opacity: 0 !important;
  pointer-events: none !important;
}

.niwa-booking-overlay {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: clamp(18px, 4vw, 52px) !important;
  overflow: auto !important;
  scrollbar-width: none;
  background: rgba(40, 40, 40, 0.42) !important;
  backdrop-filter: blur(28px) saturate(0.78) !important;
  -webkit-backdrop-filter: blur(28px) saturate(0.78) !important;
  isolation: isolate !important;
  animation: niwa-booking-overlay-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.niwa-booking-overlay .niwa-scheduler--overlay {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - clamp(36px, 8vw, 104px));
  padding: clamp(24px, 4vw, 42px);
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(0.86);
  -webkit-backdrop-filter: blur(28px) saturate(0.86);
}

.niwa-booking-overlay::-webkit-scrollbar,
.niwa-booking-overlay .niwa-scheduler--overlay::-webkit-scrollbar { display: none; }

.niwa-scheduler--initializing,
.niwa-booking-overlay .niwa-scheduler--initializing {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.niwa-scheduler--initializing .niwa-scheduler__header,
.niwa-scheduler--initializing .niwa-scheduler__content {
  opacity: 0;
  visibility: hidden;
}

.niwa-booking-overlay .niwa-scheduler__title { font-size: 18px; }
.niwa-booking-overlay .niwa-scheduler__step-title { font-size: 17px; }
.niwa-booking-overlay .niwa-scheduler__month { font-size: 17px; }
.niwa-booking-overlay .niwa-scheduler__calendar { gap: 10px; }
.niwa-booking-overlay .niwa-scheduler__day { max-width: 56px !important; font-size: 14px !important; }
.niwa-booking-overlay .niwa-scheduler__slot { min-height: 50px !important; padding-inline: 18px !important; font-size: 14px !important; }
.niwa-booking-overlay .niwa-scheduler__input,
.niwa-booking-overlay .niwa-scheduler__select { min-height: 52px !important; font-size: 14px !important; }

@keyframes niwa-booking-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Docked variant: short, calm rise with no scale bounce. */
.niwa-widget .niwa-scheduler--dock {
  max-width: none;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(8px);
  transform-origin: 50% 100%;
  transition:
    opacity 180ms ease-out,
    transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.niwa-widget .niwa-scheduler--dock::-webkit-scrollbar { display: none; }

.niwa-widget .niwa-scheduler--dock.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.niwa-widget .niwa-scheduler--dock.is-closing {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* Inside the lead-form card the card is already the glass panel. */
.niwa-lf-card__input-host > .niwa-scheduler {
  max-width: none;
  max-height: min(58vh, 520px);
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: transparent;
  padding: 4px 2px;
  box-shadow: none;
}

.niwa-scheduler *,
.niwa-scheduler *::before,
.niwa-scheduler *::after {
  box-sizing: border-box;
}

/* -- Standalone header (dialog / docked mode) ---------------------------- */
.niwa-scheduler__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.niwa-scheduler__title {
  color: var(--niwa-scheduler-text);
  font: 500 15px/1.3 var(--niwa-font-family, inherit);
  letter-spacing: -0.025em;
}

.niwa-widget .niwa-scheduler__close,
.niwa-widget .niwa-scheduler__nav,
.niwa-widget .niwa-scheduler__back,
.niwa-scheduler__close,
.niwa-scheduler__nav,
.niwa-scheduler__back {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--niwa-scheduler-control) !important;
  box-shadow: none !important;
  color: var(--niwa-scheduler-text) !important;
  font: 300 22px/1 var(--niwa-font-family, inherit) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease !important;
}

/* Optical centering: ‹ and › glyphs sit slightly high-right in the circle. */
.niwa-widget .niwa-scheduler__back,
.niwa-widget .niwa-scheduler__nav {
  padding: 0 2px 2px 0 !important;
}

.niwa-widget .niwa-scheduler__nav:disabled,
.niwa-scheduler__nav:disabled {
  opacity: 0.25 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.niwa-scheduler__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.niwa-scheduler__live.is-error:not(:empty) {
  top: 50%;
  left: 50%;
  z-index: 8;
  width: auto;
  height: auto;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 12px;
  overflow: visible;
  overflow-wrap: anywhere;
  clip: auto;
  clip-path: none;
  border: 1px solid rgba(255, 180, 168, 0.28);
  border-radius: 10px;
  background: rgba(90, 34, 30, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: #ffb4a8;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: normal;
  pointer-events: none;
}

.niwa-scheduler__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  border-right-color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: rotate(0deg);
  transition: opacity 120ms ease-out, visibility 0s linear 120ms;
  pointer-events: none;
}

.niwa-scheduler--busy .niwa-scheduler__spinner {
  opacity: 1;
  visibility: visible;
  animation: niwa-scheduler-spin 760ms linear infinite;
  transition-delay: 0s;
}

@keyframes niwa-scheduler-spin {
  to { transform: rotate(360deg); }
}

.niwa-scheduler--busy .niwa-scheduler__content { opacity: 0.55; pointer-events: none; }

/* -- Segment container: JS morphs only height + opacity ------------------ */
.niwa-scheduler__content {
  overflow: hidden;
  transition: opacity 160ms ease-out;
}

/* -- Segment header: round back button + centered eyebrow/title --------- */
.niwa-scheduler__step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.niwa-scheduler__step-spacer { flex: 0 0 38px; }

.niwa-scheduler__step-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

/* Eyebrow mirrors the product panel micro-title (650 10.5px uppercase). */
.niwa-scheduler__eyebrow {
  color: var(--niwa-scheduler-muted);
  font: 650 10.5px/1 var(--niwa-font-family, inherit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Title mirrors `.niwa-product-focus__title` (500 15px, tight tracking). */
.niwa-scheduler__step-title {
  overflow: hidden;
  color: var(--niwa-scheduler-text);
  font: 500 15px/1.2 var(--niwa-font-family, inherit);
  letter-spacing: -0.025em;
  text-transform: capitalize;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* -- Segment 1: service/team controls + calendar ------------------------ */
.niwa-scheduler__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.niwa-scheduler__controls--single { grid-template-columns: 1fr; }

.niwa-scheduler__field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--niwa-scheduler-muted);
  font: 650 10.5px/1 var(--niwa-font-family, inherit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.niwa-scheduler__field--select { position: relative; }

.niwa-scheduler__field--select::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--niwa-scheduler-muted);
  border-bottom: 1.5px solid var(--niwa-scheduler-muted);
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  pointer-events: none;
}

/* Inputs/selects skinned like the card composer pill: control background,
   no border, white text — hardened against theme form styles. */
.niwa-widget .niwa-scheduler__select,
.niwa-widget .niwa-scheduler__input,
.niwa-scheduler__select,
.niwa-scheduler__input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 0;
  background: var(--niwa-scheduler-control) !important;
  color: var(--niwa-scheduler-text) !important;
  caret-color: var(--niwa-scheduler-text) !important;
  box-shadow: none !important;
  font: 500 13px/1.2 var(--niwa-font-family, inherit) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color-scheme: dark;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background 160ms ease;
}

.niwa-widget .niwa-scheduler__input {
  -webkit-text-fill-color: var(--niwa-scheduler-text) !important;
}

.niwa-widget .niwa-scheduler__select,
.niwa-scheduler__select { padding-right: 42px !important; }

.niwa-widget .niwa-scheduler__select option,
.niwa-scheduler__select option {
  background: #3f413e !important;
  color: #fff !important;
}

.niwa-widget .niwa-scheduler__select option:checked,
.niwa-scheduler__select option:checked {
  background: #5a5c58 !important;
  color: #fff !important;
}

.niwa-widget .niwa-scheduler__input::placeholder,
.niwa-scheduler__input::placeholder {
  color: var(--niwa-scheduler-muted) !important;
  opacity: 0.75;
}

/* Text inputs match :focus-visible even on mouse click, so the thick
   outline ring is reserved for buttons (keyboard navigation). Fields get
   the composer treatment instead: no ring, just a subtle inset hairline. */
.niwa-widget .niwa-scheduler__select:focus,
.niwa-widget .niwa-scheduler__input:focus,
.niwa-scheduler__select:focus,
.niwa-scheduler__input:focus {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32) !important;
}

.niwa-scheduler button:focus-visible {
  outline: 2px solid var(--niwa-product-selected-border, #fff) !important;
  outline-offset: 2px !important;
}

.niwa-scheduler__month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
}

.niwa-scheduler__month {
  flex: 1;
  text-align: center;
  color: var(--niwa-scheduler-text);
  font: 500 14px/1.2 var(--niwa-font-family, inherit);
  letter-spacing: -0.025em;
  text-transform: capitalize;
}

.niwa-scheduler__calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  justify-items: center;
}

.niwa-scheduler__weekday {
  width: 100%;
  padding: 4px 0 6px;
  color: var(--niwa-scheduler-muted);
  font: 650 10px/1 var(--niwa-font-family, inherit);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* Round day numbers — same pill language as `.niwa-product-option`:
   transparent + hairline border when available, 2px selected outline +
   control background when chosen. */
.niwa-widget .niwa-scheduler__day,
.niwa-scheduler__day {
  width: 100% !important;
  max-width: 44px !important;
  aspect-ratio: 1;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--niwa-scheduler-muted) !important;
  font: 500 12px/1 var(--niwa-font-family, inherit) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.niwa-widget .niwa-scheduler__day--available,
.niwa-scheduler__day--available {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--niwa-scheduler-text) !important;
  cursor: pointer !important;
}

/* Hover keeps the background transparent (a translucent fill washes out
   the white digits on light pages) — the circle border brightens instead,
   and the number stays explicitly in the panel text color so theme
   button:hover rules can't darken it. */
.niwa-widget .niwa-scheduler__day--available:not(.niwa-scheduler__day--selected):hover,
.niwa-scheduler__day--available:not(.niwa-scheduler__day--selected):hover {
  border-color: var(--niwa-product-selected-border, #fff) !important;
  background: transparent !important;
  color: var(--niwa-scheduler-text) !important;
  transform: translateY(-1px);
}

.niwa-widget .niwa-scheduler__day--available:active,
.niwa-scheduler__day--available:active { transform: scale(0.97); }

.niwa-widget .niwa-scheduler__day--selected,
.niwa-scheduler__day--selected {
  border: 2px solid var(--niwa-product-selected-border, #fff) !important;
  background: var(--niwa-scheduler-control) !important;
  color: var(--niwa-scheduler-text) !important;
}

.niwa-widget .niwa-scheduler__day--muted,
.niwa-scheduler__day--muted { opacity: 0.24 !important; cursor: default !important; }
.niwa-scheduler__day--blank { visibility: hidden; }

/* -- Segment 2: time slots ---------------------------------------------- */
.niwa-scheduler__slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.niwa-widget .niwa-scheduler__slot,
.niwa-scheduler__slot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--niwa-scheduler-muted) !important;
  font: 500 12px/1 var(--niwa-font-family, inherit) !important;
  letter-spacing: -0.015em !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.niwa-widget .niwa-scheduler__slot:hover,
.niwa-scheduler__slot:hover {
  color: var(--niwa-scheduler-text) !important;
  transform: translateY(-1px);
}

.niwa-widget .niwa-scheduler__slot:active,
.niwa-scheduler__slot:active { transform: scale(0.97); }

.niwa-widget .niwa-scheduler__slot[aria-pressed="true"],
.niwa-scheduler__slot[aria-pressed="true"] {
  border: 2px solid var(--niwa-product-selected-border, #fff) !important;
  background: var(--niwa-scheduler-control) !important;
  color: var(--niwa-scheduler-text) !important;
  padding: 7px 13px !important;
}

/* -- Segment 3: contact details ------------------------------------------ */
.niwa-scheduler__step--contact .niwa-scheduler__step-title {
  font-size: 20px;
  letter-spacing: -0.03em;
  text-transform: none;
}

.niwa-widget .niwa-scheduler__appointment-context,
.niwa-scheduler__appointment-context {
  width: 100%;
  margin: -4px 0 18px !important;
  overflow: hidden;
  color: var(--niwa-scheduler-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.niwa-scheduler__contact { display: grid; gap: 12px; }

.niwa-scheduler__empty,
.niwa-scheduler__form-error {
  margin: 0;
  color: var(--niwa-scheduler-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.niwa-scheduler__form-error { color: #ffb4a8; }
.niwa-scheduler__form-error {
  display: grid;
  place-items: center;
  height: 36px;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 160ms ease-out;
  scrollbar-width: none;
}
.niwa-scheduler__form-error::-webkit-scrollbar { display: none; }
.niwa-scheduler__form-error:empty { visibility: hidden; opacity: 0; }

/* Confirm CTA mirrors `.niwa-product-focus__action--primary`: solid white
   pill with dark text — hardened so theme submit-button styles (green
   backgrounds, gradients, borders) cannot restyle it. */
.niwa-widget .niwa-scheduler__primary,
.niwa-scheduler__primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #3c3d3a !important;
  font: 500 12px/1 var(--niwa-font-family, inherit) !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease !important;
}

.niwa-widget .niwa-scheduler__primary:hover,
.niwa-scheduler__primary:hover {
  background: #fff !important;
  color: #3c3d3a !important;
  transform: translateY(-1px);
}

.niwa-widget .niwa-scheduler__primary:active,
.niwa-scheduler__primary:active { transform: scale(0.97); }

.niwa-widget .niwa-scheduler__primary:disabled,
.niwa-scheduler__primary:disabled {
  opacity: 0.5 !important;
  cursor: wait !important;
  transform: none !important;
}

/* -- Segment 4: success -------------------------------------------------- */
.niwa-scheduler__step--success {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 22px 12px 18px;
}

.niwa-scheduler__success-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--niwa-product-selected-border, #fff);
  border-radius: 50%;
  background: var(--niwa-scheduler-control);
  animation: niwa-scheduler-success-pop 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.niwa-scheduler__success-badge svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--niwa-scheduler-text);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: niwa-scheduler-success-draw 420ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

.niwa-scheduler__success-text {
  margin: 0;
  color: var(--niwa-scheduler-text);
  font: 500 14px/1.35 var(--niwa-font-family, inherit);
  letter-spacing: -0.015em;
  text-align: center;
}

@keyframes niwa-scheduler-success-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes niwa-scheduler-success-draw {
  to { stroke-dashoffset: 0; }
}

/* -- Hover/active parity with the product surface ----------------------- */
.niwa-widget .niwa-scheduler :is(.niwa-scheduler__back, .niwa-scheduler__nav, .niwa-scheduler__close):hover { transform: translateY(-1px); }
.niwa-widget .niwa-scheduler :is(.niwa-scheduler__back, .niwa-scheduler__nav, .niwa-scheduler__close):active { transform: scale(0.97); }

@media (max-width: 480px) {
	.niwa-booking-overlay { padding: 12px !important; }
	.niwa-booking-overlay .niwa-scheduler--overlay {
		max-height: calc(100dvh - 24px);
		padding: 12px;
		border-radius: 17px;
	}
	.niwa-booking-overlay .niwa-scheduler__title { font-size: 15px; }
	.niwa-booking-overlay .niwa-scheduler__step-title { font-size: 15px; }
	.niwa-booking-overlay .niwa-scheduler__step--contact .niwa-scheduler__step-title { font-size: 18px; }
	.niwa-booking-overlay .niwa-scheduler__month { font-size: 14px; }
	.niwa-booking-overlay .niwa-scheduler__calendar { gap: 4px; }
	.niwa-booking-overlay .niwa-scheduler__day { max-width: 40px !important; font-size: 11px !important; }
	.niwa-booking-overlay .niwa-scheduler__slot { min-height: 44px !important; padding: 8px 14px !important; font-size: 12px !important; }
	.niwa-booking-overlay .niwa-scheduler__input,
	.niwa-booking-overlay .niwa-scheduler__select { min-height: 46px !important; font-size: 13px !important; }
  .niwa-scheduler-message { width: calc(100% - 16px); margin-inline: 8px; }
  .niwa-scheduler { padding: 12px; border-radius: 17px; }
  .niwa-scheduler__controls { grid-template-columns: 1fr; }
  .niwa-scheduler__calendar { gap: 4px; }
  .niwa-widget .niwa-scheduler__day,
  .niwa-scheduler__day { max-width: 40px !important; font-size: 11px !important; }
  .niwa-scheduler__slots { gap: 8px; }
}

/* -- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .niwa-lf-card,
  .niwa-lf-card__body,
  .niwa-lf-card__body--enter,
  .niwa-lf-card--shake {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .niwa-scheduler *,
  .niwa-scheduler,
  .niwa-widget .niwa-scheduler--dock,
  .niwa-scheduler__step,
  .niwa-scheduler__success-badge,
  .niwa-scheduler__success-badge svg {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .niwa-scheduler__spinner { animation: none !important; }
}
