/* GENERATED by scripts/css-scope.mjs from resources/css/reset.css + resources/css/base.css -- do not edit; every selector is scoped (see that file). */
/*
 * ccpacks scoped reset -- host-theme isolation.
 *
 * AUTHORED UNSCOPED, like base.css: scripts/css-scope.mjs prefixes every
 * selector with `:is(ccpacks-wizard, #ccpacks-scope)` (one ID of specificity)
 * and emits this file FIRST in dist/ccpacks-base.css. The element lists are
 * wrapped in `:where()` so each reset rule is exactly (1,0,0): it beats any
 * theme/builder rule without an ID (`.elementor-kit-5 button`,
 * `.entry-content p`...), while every scoped vendor rule (>= (1,0,1)) and
 * every scoped base.css rule (>= (1,0,0), loaded after this) still wins.
 *
 * Target: the same rendering the island has in the dev harness (index.html),
 * i.e. browser defaults + our CSS, with no theme in between.
 */

/* Inherited properties a theme commonly sets on body/containers and that
 * base.css relies on being the browser default. base.css's own
 * `ccpacks-wizard` rule (font-family, weight, letter-spacing, color...) comes
 * later and wins at equal specificity. */
:is(ccpacks-wizard, #ccpacks-scope) {
  font-size: medium;
  font-style: normal;
  line-height: normal;
  text-align: start;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-spacing: normal;
}

/* Builders (e.g. Elementor's `.elementor *`) force border-box on everything;
 * our layout is authored against the browser default and sets border-box
 * explicitly where it wants it (those class rules outrank this one). */
:is(ccpacks-wizard, #ccpacks-scope), :is(ccpacks-wizard, #ccpacks-scope) :where(*), :is(ccpacks-wizard, #ccpacks-scope) :where(*)::before, :is(ccpacks-wizard, #ccpacks-scope) :where(*)::after {
  box-sizing: content-box;
}

/* Elements the views render (plus inline formatting from the sanitized API
 * HTML): drop every theme declaration back to the browser default.
 * Deliberately NOT here:
 *  - svg / path / rect: `all: revert` also reverts SVG presentation
 *    attributes (fill="currentColor", d...), which would break the icons.
 *  - img: it would revert the width/height attribute hints; handled below.
 *  - div / span: generic containers themes rarely target, and the hosts of
 *    most vendor widget internals. */
:is(ccpacks-wizard, #ccpacks-scope) :where(
    a, b, button, em, fieldset, h1, h2, h3, h4, h5, h6, header, hr, i, input,
    label, legend, li, nav, ol, option, p, section, select, small, strong,
    table, td, textarea, th, ul
  ) {
  all: revert;
}

/* Images: neutralize the decoration themes add, keep attribute sizing. */
:is(ccpacks-wizard, #ccpacks-scope) :where(img) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
  padding: 0;
}

/* intl-tel-input's fullscreen country popup (mobile) is appended to <body>,
 * outside the wizard: scoped at body level by the build (see
 * OUTSIDE_WIZARD), same treatment for the elements it renders. */
:is(body, #ccpacks-scope) :where(.iti--fullscreen-popup) :where(button, input, li, ul) {
  all: revert;
}

/*
 * ccpacks base styles — Step 1 "Nuestros Paquetes".
 *
 * Consumes ONLY design tokens (resources/css/tokens.css). No hard-coded colors,
 * fonts, or sizes here — re-skinning happens by overriding tokens, not editing
 * this file. Light-DOM selectors are namespaced with `ccpacks-` to avoid
 * colliding with host theme styles.
 */

:is(ccpacks-wizard, #ccpacks-scope) {
  display: block;
  background: var(--ccpacks-color-background);
  color: var(--ccpacks-color-text);
  font-family: var(--ccpacks-font-body);
  font-weight: var(--ccpacks-font-weight-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  /* Step changes scrollIntoView({ block: 'start' }) the wizard; this keeps a
   * theme's fixed header from covering the step heading. */
  scroll-margin-top: var(--ccpacks-scroll-offset, 0px);
}

/* Step headings get tabindex="-1" and programmatic focus on step change (screen
 * readers announce the new step); no visible ring for that non-interactive focus. */
:is(ccpacks-wizard, #ccpacks-scope) h1[tabindex="-1"]:focus {
  outline: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-packages {
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x) var(--ccpacks-section-pb);
  box-sizing: border-box;
}

/* --- Hero (Figma 95:2743): heading top-left, big image right (full height),
 *     small image bottom-left. Left column ~ 783 : right column ~ 553. --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: var(--ccpacks-gap-cards);
  min-height: 560px;
  margin-bottom: var(--ccpacks-section-pb);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ccpacks-section-pt);
  min-width: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-display-hero-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-display);
  color: var(--ccpacks-color-text);
}

/* Second (and any even) line pushed to the right, per the design. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__heading-line:nth-child(even) {
  align-self: flex-end;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__media {
  overflow: hidden;
  border-radius: 2px;
  background: var(--ccpacks-color-background-alt);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__media--big {
  height: 100%;
  min-height: 560px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__media--small {
  width: 80%;
  aspect-ratio: 436 / 283;
  align-self: flex-start;
  max-width: 436px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__img, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Pack section (one per pack; packs are infinite) --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pack {
  margin-bottom: var(--ccpacks-section-pb);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pack:last-child {
  margin-bottom: 0;
}

/* --- Pack title --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pack-title {
  margin: 0 0 var(--ccpacks-section-pt);
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-display-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

/* --- Pack description (between the pack title and its cards) ---
 * Pulls up into the title's bottom margin so title -> description -> grid
 * keep the same rhythm as title -> grid. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pack-description {
  max-width: 70ch;
  margin: calc(var(--ccpacks-section-pt) / -2) 0 var(--ccpacks-section-pt);
  font-family: var(--ccpacks-font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-primary);
}

/* --- Cards ---
 * Responsive wrap for ANY variant count (1, 2, 4, 5+): auto-fit tracks with a
 * sensible min width so cards fill the row and wrap, never a fixed 3 columns. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ccpacks-card-min-width), 1fr));
  gap: var(--ccpacks-gap-cards);
  align-items: stretch;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__media {
  height: var(--ccpacks-card-media-height);
  overflow: hidden;
  border-radius: 2px;
  background: var(--ccpacks-color-background-alt);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__title {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-lg-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__price {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-text-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-hairline);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__inclusions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-cards);
  flex: 1 0 auto;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-card__inclusion {
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  line-height: var(--ccpacks-line-height-body);
  text-transform: uppercase;
  color: var(--ccpacks-color-text);
}

/* --- Buttons --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-btn {
  font-family: var(--ccpacks-font-body);
  font-weight: var(--ccpacks-font-weight-body);
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  height: var(--ccpacks-button-height);
  padding: 16px 32px;
  border: 0;
  border-radius: var(--ccpacks-radius-pill);
  cursor: pointer;
  align-self: flex-start;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-btn--primary {
  background: var(--ccpacks-color-primary);
  color: var(--ccpacks-color-on-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-btn--primary:hover {
  background: var(--ccpacks-color-primary-strong);
}

/* --- Transient states --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-loading {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared inline loader (dom.js#renderLoader): spinner + short status text.
   Reuses the pago interstitial's `ccpacks-spin` keyframes at a smaller size. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px; /* same box as .ccpacks-rooms__hint: no jump on swap */
  color: var(--ccpacks-color-text-muted);
  font-size: 15px;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-loader__spinner {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(23, 35, 78, 0.15);
  border-top-color: var(--ccpacks-color-primary, #17234e);
  animation: ccpacks-spin 0.8s linear infinite;
}

/* Paso 1: sits right above the action row, aligned with the primary CTA. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-loader--actions {
  justify-content: flex-end;
  padding: 0;
  margin-top: var(--ccpacks-gap-stack);
}

/* Paso 2: a round whose day change is loading keeps its current tee grid
   visible but dimmed and inert until the new day's slots arrive. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course > .ccpacks-loader {
  padding: 0;
  justify-content: flex-start;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course.is-loading .ccpacks-course__slots {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-trigger[aria-disabled='true'] {
  cursor: default;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-loader__spinner, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__spinner {
    animation: none; /* static ring; the status text carries the meaning */
  }

  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course.is-loading .ccpacks-course__slots {
    transition: none;
  }
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-error {
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x);
  color: var(--ccpacks-color-primary-strong);
}

/* =========================================================================
 * Step 2 — Configure ("Configura tu experiencia", Figma 95:2165)
 * ========================================================================= */

/* Breadcrumb spans full width above the centered content. */
/* Full-width band, tight under the menu (Figma). It breaks out of the step
   container's max-width/padding (full-bleed) so the rules span edge-to-edge,
   while the inner text stays aligned with the centered content. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb {
  margin-top: calc(-1 * var(--ccpacks-section-pt));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-bottom: 0.5px solid var(--ccpacks-color-primary);
  padding: 10px 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__inner {
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: 0 var(--ccpacks-content-padding-x);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__seg, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__sep {
  white-space: pre;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__seg, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__sep {
  color: var(--ccpacks-color-text-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__sep {
  opacity: 0.5;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__seg--current {
  color: var(--ccpacks-color-primary-strong);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
 * Steps indicator (Settings -> Appearance -> Navigation style = Steps).
 * Neutral default meant to be restyled with the custom CSS: every selector
 * has single-class specificity (states go through :where()), and the look is
 * driven by optional custom properties, overridable on :root or .ccpacks-steps:
 *   --ccpacks-steps-accent   current/completed color (default: primary)
 *   --ccpacks-steps-muted    upcoming color          (default: text-muted)
 *   --ccpacks-steps-line     connector color         (default: hairline)
 *   --ccpacks-steps-size     number circle diameter  (default: 32px)
 *   --ccpacks-steps-gap      space around connectors (default: 12px)
 * Markup: nav.ccpacks-steps > ol.ccpacks-steps__list >
 *   li.ccpacks-steps__item.is-complete|is-current|is-upcoming[data-step]
 *   > span.ccpacks-steps__number + span.ccpacks-steps__label
 * ------------------------------------------------------------------------- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps {
  font-family: var(--ccpacks-font-body);
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-steps-muted, var(--ccpacks-color-text-muted));
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--ccpacks-steps-gap, 12px);
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Connector to the next step. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item::after {
  content: '';
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  margin-right: var(--ccpacks-steps-gap, 12px);
  background: var(--ccpacks-steps-line, var(--ccpacks-color-hairline));
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item:last-child {
  flex: 0 0 auto;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item:last-child::after {
  content: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ccpacks-steps-size, 32px);
  height: var(--ccpacks-steps-size, 32px);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 500;
  line-height: 1;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(ccpacks-wizard, #ccpacks-scope) :where(.ccpacks-steps__item.is-complete, .ccpacks-steps__item.is-current) {
  color: var(--ccpacks-steps-accent, var(--ccpacks-color-primary));
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item:where(.is-complete)::after {
  background: var(--ccpacks-steps-accent, var(--ccpacks-color-primary));
}

:is(ccpacks-wizard, #ccpacks-scope) :where(.ccpacks-steps__item.is-current) .ccpacks-steps__label {
  font-weight: 500;
}

:is(ccpacks-wizard, #ccpacks-scope) :where(.ccpacks-steps__item.is-current) .ccpacks-steps__number {
  border-color: var(--ccpacks-steps-accent, var(--ccpacks-color-primary));
  background: var(--ccpacks-steps-accent, var(--ccpacks-color-primary));
  color: var(--ccpacks-color-on-primary);
}

/* Phones: numbers only plus the current step's label (other labels stay
   available to screen readers), so four steps fit at 320px. */
@media (max-width: 600px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item {
    gap: 6px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item::after {
    min-width: 6px;
    margin-right: 6px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__number {
    width: var(--ccpacks-steps-size, 28px);
    height: var(--ccpacks-steps-size, 28px);
  }
  /* The connectors shrink first; the one visible label never truncates. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-steps__item:where(.is-current) {
    flex-shrink: 0;
  }
  :is(ccpacks-wizard, #ccpacks-scope) :where(.ccpacks-steps__item:not(.is-current)) .ccpacks-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x) var(--ccpacks-section-pb);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__intro-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-cards);
  align-items: center;
  text-align: center;
}

/* Full-width justified title (Figma): words spread edge-to-edge across the
   content width. `text-align-last: justify` justifies the single/last line too. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__heading {
  margin: 0;
  align-self: stretch;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-display-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

@media (max-width: 600px) {
  /* Too narrow to spread nicely — fall back to centered. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__heading {
    text-align: center;
    text-align-last: center;
  }
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__intro {
  margin: 0;
  max-width: 546px;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__error {
  margin: 0;
  color: var(--ccpacks-color-primary-strong);
  font-size: var(--ccpacks-font-size-body);
}

/* --- Summary card (accent-5) --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ccpacks-gap-cards);
  align-items: stretch;
  background: var(--ccpacks-color-accent-5);
  padding: var(--ccpacks-gap-stack);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  justify-content: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-lg-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Vertical divider between the two blocks of a card row (design grid). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__row > .ccpacks-summary__field + .ccpacks-summary__field {
  border-left: 0.5px solid var(--ccpacks-color-primary);
  padding-left: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__label {
  margin: 0;
  opacity: 0.56;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__value {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

/* --- Room carousel --- */
/* Fixed 3:2 box so every slide shows at the SAME proportion regardless of the
   source image's aspect (portrait / banner / square) — the image fills and is
   cropped via object-fit. `align-self: start` keeps the grid from stretching it
   away from its aspect ratio. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel {
  position: relative;
  align-self: start;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ccpacks-color-background-alt);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel__controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel__nav {
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ccpacks-color-primary);
  font-size: 16px;
  line-height: 1;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  gap: 6px;
  justify-content: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel__dot.is-active {
  background: #ffffff;
}

/* Loading placeholder: same box as .ccpacks-carousel (3:2, alternate background) with a
   soft pulse, so the card does not jump when the real slider replaces it. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel--skeleton {
  animation: ccpacks-carousel-pulse 1.4s ease-in-out infinite;
}

@keyframes ccpacks-carousel-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-carousel--skeleton {
    animation: none;
  }
}

/* --- Config bar --- */
/* Groups align to the top so every label sits on the same line, and every
   value row shares one min-height (the stepper's), so the values line up too. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar {
  display: flex;
  align-items: flex-start;
  gap: var(--ccpacks-gap-cards);
  flex-wrap: wrap;
  background: var(--ccpacks-color-surface);
  border-radius: 8px;
  padding: 16px var(--ccpacks-gap-stack);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__label {
  opacity: 0.56;
  text-transform: uppercase;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

/* The whole date field opens the calendar, not only the label: the trigger's
   ::after stretches over this group (a click on it is a click on the
   trigger). The static calendar comes later in the DOM, so it stays on top. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__group--date {
  position: relative;
  align-self: stretch;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-trigger[aria-disabled="true"]::after {
  cursor: default;
}

/* Label + chevron IS the date trigger (opens the flatpickr calendar), Figma. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-chevron {
  width: 12px;
  height: 8px;
  color: var(--ccpacks-color-primary);
  opacity: 0.56;
}

/* Real date input: hidden (flatpickr reads it and drops its calendar here). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

/* Fallback when flatpickr can't init: reveal the native input. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__date-input.is-fallback {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  background: transparent;
  font: inherit;
  color: var(--ccpacks-color-text);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__range {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__group .ccpacks-stepper {
  min-height: 28px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__sep {
  align-self: stretch;
  width: 0.5px;
  background: var(--ccpacks-color-primary-strong);
}

/* PACKINFO: "Compruebe la disponibilidad" outlined pill at the right end of
   the date | guests bar, after a divider. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__action {
  display: flex;
  justify-content: flex-end;
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-packinfo__check {
  align-self: center;
  white-space: nowrap;
}

/* Narrow viewports: the action drops under date + guests at full width. */
@media (max-width: 600px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__action {
    flex: 1 1 100%;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-packinfo__check {
    width: 100%;
  }
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-stepper {
  display: flex;
  align-items: center;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-stepper__btn {
  border: 1px solid rgba(23, 35, 78, 0.24);
  background: transparent;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-btn--outline {
  background: transparent;
  color: var(--ccpacks-color-primary);
  border: 1px solid rgba(23, 35, 78, 0.24);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Conditions note --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-conditions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-conditions__title {
  margin: 0;
  font-family: var(--ccpacks-font-body);
  font-weight: var(--ccpacks-font-weight-body);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-conditions__body {
  margin: 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-conditions__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 1.25em;
  list-style: disc outside;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  color: inherit;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-conditions__item {
  overflow-wrap: anywhere;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-conditions__item::marker {
  font-size: 0.8em;
}

/* =========================================================================
 * Step 3 — Rooms ("Seleccionar habitaciones", Figma 99:3325)
 * ========================================================================= */

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms-view {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x) var(--ccpacks-section-pb);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__heading {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-lg-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

/* Room cards stack one per row (Figma 99:3325); every other child of the
   region (loader, hint, alerts banner) sits in the same column. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Room card (Figma 99:3325) --- */
/* Row: photo area (429px, stretches to the content height) | content. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room {
  display: flex;
  gap: var(--ccpacks-gap-cards);
  min-width: 0;
  padding: var(--ccpacks-gap-stack);
  background: var(--ccpacks-color-background-alt);
  box-sizing: border-box;
}

/* The photo fills and is cropped via object-fit; the box follows the card's
   content height (min-height = the Figma image height for when the content
   is shorter, e.g. while the API has no size/bed rows). Also applied on top
   of .ccpacks-carousel for several photos, overriding its 3:2 box. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__media {
  position: relative;
  flex: 0 0 429px;
  width: 429px;
  min-height: 200px;
  align-self: stretch;
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--ccpacks-color-accent-5);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel over the photo: subtle nav, small white dots centered at the
   bottom (Figma asset: a 36x6 row of dots). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__controls {
  padding: 0 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__nav {
  width: 28px;
  height: 28px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.8;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__nav:hover, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__nav:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.85);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__dots {
  bottom: 12px;
  gap: 4px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__carousel .ccpacks-carousel__dot.is-active {
  background: var(--ccpacks-color-surface);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--ccpacks-gap-cards);
  min-width: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__label {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  line-height: 1.2;
  letter-spacing: var(--ccpacks-letter-spacing-header); /* -0.72px @ 24px */
  text-transform: uppercase;
  color: var(--ccpacks-color-primary);
  overflow-wrap: anywhere;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__description-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__description {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  line-height: var(--ccpacks-line-height-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  overflow-wrap: anywhere;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__description.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__description-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ccpacks-color-primary);
  font: inherit;
  font-size: var(--ccpacks-font-size-subheader);
  text-decoration: underline;
  cursor: pointer;
}

/* Attributes (left) | price (right). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccpacks-gap-cards);
}

/* Two stable columns (size/capacity | bed/rooms), ~385px as in Figma: the
   right column starts where the 148px stepper fits. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__attrs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  column-gap: var(--ccpacks-gap-cards);
  width: min(385px, 100%);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__col {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  min-width: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__label-muted {
  margin: 0;
  font-family: var(--ccpacks-font-body);
  font-weight: var(--ccpacks-font-weight-body);
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-text-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__value {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  line-height: 1.4;
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-primary);
  overflow-wrap: anywhere;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__price {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header);
  line-height: 1.2;
  letter-spacing: var(--ccpacks-letter-spacing-header);
  white-space: nowrap;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__price-label {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__not-available {
  margin: 0;
  max-width: 200px;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-text-muted);
}

/* Boxed stepper (white, radius 4px, 148px) used on the room cards — Figma
   99:3325: flat -/+ glyphs with 0.5px x 20px dividers framing the count. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-stepper--boxed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 148px;
  height: 28px;
  padding: 4px 17px;
  background: var(--ccpacks-color-surface);
  border-radius: 4px;
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-stepper--boxed .ccpacks-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--ccpacks-font-size-body);
  line-height: 1;
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-stepper--boxed .ccpacks-stepper__btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-stepper--boxed .ccpacks-stepper__value {
  flex: 0 0 auto;
  width: 52px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0.5px solid var(--ccpacks-color-primary-strong);
  border-right: 0.5px solid var(--ccpacks-color-primary-strong);
  font-size: var(--ccpacks-font-size-body);
  line-height: 1;
  box-sizing: border-box;
}

/* Tablet: photo on top at full width (fixed 16:10), content below. */
@media (max-width: 900px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room {
    flex-direction: column;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__media {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* Phone: price moves under the attributes, aligned left. */
@media (max-width: 600px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room {
    padding: var(--ccpacks-gap-cards) 16px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__grid {
    flex-direction: column;
    align-items: flex-start;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__attrs {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 148px;
    column-gap: 16px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-room__price-box {
    align-items: flex-start;
    text-align: left;
  }
}

/* --- Alerts banner (shared white box: >8 group notice + guests mismatch +
   hotel error all stack inside this one box) --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-group-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ccpacks-color-surface);
  border-radius: 0;
  padding: 16px var(--ccpacks-gap-stack);
  color: #b90000;
}

/* The >8 group notice keeps its own row: text left, contact link right. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-group-banner__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-group-banner__title {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: var(--ccpacks-font-size-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-group-banner__body {
  margin: 0;
  color: var(--ccpacks-color-neutral-strong);
  font-size: var(--ccpacks-font-size-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-group-banner__contact {
  white-space: nowrap;
  color: #b90000;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid #b90000;
  padding-bottom: 8px;
  font-size: var(--ccpacks-font-size-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__mismatch, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__error {
  margin: 0;
  color: #b90000;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__details-title {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

/* --- Additional details --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__group--time {
  max-width: 340px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__label {
  margin: 0;
  text-transform: uppercase;
  color: var(--ccpacks-color-primary-strong);
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__select, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__textarea {
  border: 1px solid rgba(35, 37, 78, 0.24);
  border-radius: 4px;
  padding: 16px;
  font: inherit;
  color: var(--ccpacks-color-primary-strong);
  background: var(--ccpacks-color-surface);
  box-sizing: border-box;
  width: 100%;
}

/* Custom thin chevron so the select matches Figma instead of the native arrow. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2323254e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__textarea {
  min-height: 169px;
  resize: vertical;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-details__note {
  margin: 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  color: var(--ccpacks-color-primary-strong);
}

/* --- Back / Paso 2 actions --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================
 * Step 4 — Data ("Tus datos", Figma 95:1865)
 * ========================================================================= */

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data-view {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x) var(--ccpacks-section-pb);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__heading {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-lg-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__form {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-section-pt);
  background: var(--ccpacks-color-background-alt);
  padding: var(--ccpacks-gap-stack);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__section {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__section-title {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__fields, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__groups, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__group, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__guest {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__groups {
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__group-title {
  margin: 0;
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__slot {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__input {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid rgba(35, 37, 78, 0.24);
  border-radius: 4px;
  padding: 16px;
  font: inherit;
  color: var(--ccpacks-color-primary-strong);
  background: transparent;
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__error {
  margin: 0;
  color: #b90000;
  font-size: var(--ccpacks-font-size-body);
}

/* One field = its control + the inline error right under it (so the error is
 * visible next to the field on a phone, not only in a banner). The field box
 * is also what the wizard scrolls into view on an invalid "Ir al pago". */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__field--wide {
  flex: 2 1 0;
}

/* Scroll targets (first invalid field, page-level alert) clear a theme's fixed
 * header, like the step-change scroll of the wizard itself. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__field, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__alert, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch {
  scroll-margin-top: calc(var(--ccpacks-scroll-offset, 0px) + 16px);
}

/* Inside a field box the control spans the full column width. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__field > .ccpacks-data__input, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__date, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__date .flatpickr-wrapper, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__date .ccpacks-data__input {
  flex: none;
  display: block;
  width: 100%;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__input[aria-invalid="true"] {
  border-color: #b90000;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__input[aria-invalid="true"] + .ccpacks-switch__track {
  outline: 2px solid #b90000;
  outline-offset: 2px;
}

/* Phone with country prefix (intl-tel-input, styles bundled in
 * dist/ccpacks.css and scoped under .iti). Match the other inputs: same
 * height, border, radius and font; the flag + dial-code button sits inside
 * the input's border (the widget sets the input's left padding inline). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone .iti {
  display: block;
  width: 100%;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone .iti {
  --iti-border-color: rgba(35, 37, 78, 0.24);
  --iti-icon-color: var(--ccpacks-color-primary-strong);
  --iti-hover-color: rgba(35, 37, 78, 0.06);
  font: inherit;
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone .iti input.iti__tel-input.ccpacks-data__input {
  width: 100%;
  margin: 0;
  font: inherit;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone .iti__selected-country {
  border-radius: 4px 0 0 4px;
  font: inherit;
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone .iti__selected-country-primary {
  padding: 0 8px 0 16px;
}

/* Dropdown / fullscreen popup (the latter is appended to <body>, outside the
 * wizard, so it keeps the widget's own light look -- only the font follows). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-phone .iti__dropdown-content, :is(body, #ccpacks-scope) .iti--fullscreen-popup .iti__dropdown-content {
  font-family: var(--ccpacks-font-body);
  color: var(--ccpacks-color-primary-strong);
}

/* --- One grid for the whole DATA form ----------------------------------------
 * The TITULAR block and every companion block use the SAME 3-column grid
 * (same gap), and every cell spans 1 or 2 columns or the whole row, so all
 * column edges line up across rows and blocks:
 *   TITULAR:   Tratamiento · Nombre · Apellidos / Nacionalidad · Fecha de
 *              nacimiento · Hándicap / address / CP · Ciudad · País /
 *              Teléfono · Email (2) / "Necesito factura" (+ NIF · Razón social (2))
 *   Companion: Nombre · Apellidos · Hándicap / Teléfono · Email (2) / "es adulto"
 * Tablets: 2 columns (a 2-column cell takes the row, except `--pair` cells,
 * which keep half of it); <= 600px: one full-width column. Labels sit above
 * the controls; every control shares one height/border/radius/font. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data-view {
  --ccpacks-data-control-height: 54px;
  --ccpacks-data-gap-x: 24px;
  --ccpacks-data-gap-y: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ccpacks-data-gap-y) var(--ccpacks-data-gap-x);
  align-items: start;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__span-1 { grid-column: span 1; }
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__span-2 { grid-column: span 2; }
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__span-row { grid-column: 1 / -1; }

/* Grid cells are not flex items: undo the row-flex sizing of the field box. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid > .ccpacks-data__field, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice > .ccpacks-data__field {
  flex: none;
  width: 100%;
}

/* Every control -- text, email, select, date (flatpickr altInput), phone
 * (intl-tel-input) -- the same box: height, padding, font size, line height. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid .ccpacks-data__input, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid .ccpacks-phone .iti input.iti__tel-input.ccpacks-data__input {
  height: var(--ccpacks-data-control-height);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--ccpacks-font-size-body);
  line-height: 1.25;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__input::placeholder {
  font-size: inherit;
  color: rgba(35, 37, 78, 0.48);
  opacity: 1;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__label {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__label-optional {
  opacity: 0.64;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__hint {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  color: var(--ccpacks-color-primary-strong);
  opacity: 0.72;
}

/* Selects (title, countries): same box as the text inputs, thin chevron like
 * the CONFIGURE selects instead of the native arrow. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 44px;
  text-overflow: ellipsis;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2323254e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__select:has(option[value='']:checked) {
  color: rgba(35, 37, 78, 0.56);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__select option {
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__input:focus-visible {
  outline: 2px solid var(--ccpacks-color-primary-strong);
  outline-offset: 1px;
}

/* "Necesito factura" and "Es mayor de edad": full-row grid cells with the same
 * left edge, height and label type, so both toggles line up with the fields. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__checkbox, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__toggle .ccpacks-switch {
  margin-top: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__toggle .ccpacks-switch__label {
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__checkbox-input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ccpacks-color-primary-strong);
  cursor: pointer;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__checkbox-input:focus-visible {
  outline: 2px solid var(--ccpacks-color-primary-strong);
  outline-offset: 2px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__checkbox-label {
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
  color: var(--ccpacks-color-primary-strong);
  cursor: pointer;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice.is-entering {
  animation: ccpacks-invoice-in 0.22s ease-out both;
}

@keyframes ccpacks-invoice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice.is-entering {
    animation: none;
  }
}

/* Cart validation_error banner: a white brand card with the error-red rule,
 * clearly visible on a phone (the wizard scrolls to it, or to the first
 * field the server rejected). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__alert {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  background: var(--ccpacks-color-surface);
  border-left: 4px solid #b90000;
  border-radius: 4px;
  color: var(--ccpacks-color-primary-strong);
  font-size: var(--ccpacks-font-size-body);
  line-height: 1.5;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__alert:focus {
  outline: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__alert-message {
  margin: 0;
  font-weight: 500;
  color: #b90000;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__alert-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Tablets: two columns; a 2-column cell takes the whole row unless it is a
 * pair (Razón social next to NIF). */
@media (max-width: 900px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__span-2 {
    grid-column: 1 / -1;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__span-2.ccpacks-data__span-pair {
    grid-column: span 1;
  }
}

/* Phones: one column, every control the same full width. */
@media (max-width: 600px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__grid > *, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__invoice > *, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__span-2.ccpacks-data__span-pair {
    grid-column: 1 / -1;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__alert {
    padding: 14px 16px;
  }
  /* More room for the controls at 320px: the form card keeps a 16px inset. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__form {
    padding: 16px;
  }
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================
 * Step 5 — Green fees ("Seleccionar green fees", Figma 95:710)
 * ========================================================================= */

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-greenfees {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x) var(--ccpacks-section-pb);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-greenfees__heading {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-lg-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-greenfees__subheading {
  margin: 8px 0 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  text-transform: uppercase;
  color: var(--ccpacks-color-text-muted);
}

/* --- Course blocks --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-greenfees__blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  background: var(--ccpacks-color-background-alt);
  padding: var(--ccpacks-gap-stack);
  box-sizing: border-box;
}

/* Header row: media (image slider, else the course logo) on the left,
   [title, divider, day tabs, players-remaining] on the right. The tee-time grid
   lives OUTSIDE this row, full card width. Without media the body spans the row. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__header {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__header > .ccpacks-course__body:only-child {
  grid-column: 1 / -1;
}

/* Media column pinned to the top: it must NOT stretch to the (tall) body
   height, or the photo turns portrait. The shared carousel keeps its own
   in-flow 3:2 box (~240x160); only the logo fallback sets the ratio here. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__media {
  position: relative;
  align-self: start;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ccpacks-color-accent-5);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__media .ccpacks-carousel {
  width: 100%;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__media .ccpacks-carousel__nav {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__media .ccpacks-carousel__controls {
  padding: 0 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__media .ccpacks-carousel__dots {
  bottom: 10px;
}

/* Logo fallback: centred, padded on a light background, never cropped. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__media--logo {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: var(--ccpacks-color-surface);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* One left-aligned column: title, divider, day tabs, the "N de M jugadores
   asignados" counter and its hints, all on the same left edge, 16px apart. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ccpacks-gap-cards);
  flex-wrap: wrap;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__name {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__remaining {
  margin: 0;
  text-align: left;
  font-size: var(--ccpacks-font-size-body);
  color: var(--ccpacks-color-text-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__days {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__day {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--ccpacks-color-hairline);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ccpacks-color-text-muted);
  padding: 10px 16px;
  border-radius: 4px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__day-weekday {
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__day-date {
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__day.is-active {
  color: var(--ccpacks-color-on-primary);
  background: var(--ccpacks-color-primary);
  border-color: transparent;
}

/* Pack with golf_date_change_enabled: false -- the non-active days are shown
   but cannot be picked. The active day is never .is-disabled. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__day.is-disabled, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__day.is-disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: var(--ccpacks-color-text-muted);
  border-color: var(--ccpacks-color-hairline);
}

/* Per-block color themes (Figma 95:710): each course block cycles through the
   accent palette — block background is the theme color at 25%, and the selected
   day-tab is the FULL theme color. Themed purely by position so no markup
   changes are needed. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 1) {
  background: color-mix(in srgb, var(--ccpacks-color-accent-1) 25%, transparent);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 1) .ccpacks-course__day.is-active {
  background: var(--ccpacks-color-primary);
  color: var(--ccpacks-color-on-primary);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 2) {
  background: color-mix(in srgb, var(--ccpacks-color-accent-2) 25%, transparent);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 2) .ccpacks-course__day.is-active {
  background: var(--ccpacks-color-accent-2);
  color: var(--ccpacks-color-primary);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 3) {
  background: color-mix(in srgb, var(--ccpacks-color-accent-3) 25%, transparent);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 3) .ccpacks-course__day.is-active {
  background: var(--ccpacks-color-accent-3);
  color: var(--ccpacks-color-on-primary);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 4) {
  background: color-mix(in srgb, var(--ccpacks-color-accent-4) 25%, transparent);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course:nth-of-type(4n + 4) .ccpacks-course__day.is-active {
  background: var(--ccpacks-color-accent-4);
  color: var(--ccpacks-color-primary);
}

/* --- Tee-time slot grid --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* Tee-time cards: white, visually NO border (Figma 95:710); selection is
   shown by the green seat icons and the badge. Every card reserves the same
   box regardless of state so a pick never changes the row height:
   - the 2px border is always present (transparent when idle), so the
     selected/start borders only recolor it;
   - idle cards draw an empty placeholder with the badge's exact height
     (see --ccpacks-slot-badge-height) where the badge would sit. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot {
  --ccpacks-slot-badge-height: 17px; /* 11px font * line-height 1 + 3px * 2 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px solid transparent;
  background: var(--ccpacks-color-surface);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot:not(.is-selected):not(.is-start)::after {
  content: '';
  display: block;
  height: var(--ccpacks-slot-badge-height);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__time {
  font-size: var(--ccpacks-font-size-body);
}

/* Capacity row: one person icon per effective seat. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__occupancy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* Start-slot model (contract rev 7): the buyer's pick is the START tee time
   (solid green border + tinted background); the tee times the fill-forward
   reached are AUTOMATIC (dashed navy border). A new pick redraws the whole
   round, so the seat icons fade in to make the new split visible. */
:is(ccpacks-wizard, #ccpacks-scope) button.ccpacks-slot.is-selected {
  border: 2px dashed var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) button.ccpacks-slot.is-start {
  border: 2px solid #409c5b;
  background: rgba(64, 156, 91, 0.08);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__badge {
  box-sizing: border-box;
  height: var(--ccpacks-slot-badge-height);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 999px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__badge.is-start {
  color: #fff;
  background: #409c5b;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__badge.is-filled {
  color: var(--ccpacks-color-primary);
  background: rgba(23, 35, 78, 0.08);
}

@keyframes ccpacks-seat-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__seat.is-selected {
  animation: ccpacks-seat-in 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__seat.is-selected {
    animation: none;
  }
}

/* Seat states: available = navy 55% (muted so the green picked seats stand
   out against idle tee times), unavailable/taken = navy 20% (kept clearly
   lighter than available so a partially booked tee still reads),
   selected (current party's seats) = green. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__icon.is-available {
  color: rgba(23, 35, 78, 0.55);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__icon.is-unavailable {
  color: rgba(23, 35, 78, 0.2);
}
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__icon.is-selected {
  color: #409c5b;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__players {
  display: flex;
  align-items: center;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__players-label {
  margin: 0;
  opacity: 0.56;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-greenfees__error {
  margin: 0;
  color: #b90000;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-greenfees__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================
 * Step 6 — Pago (order summary; payment stubbed, Figma 95:550)
 * ========================================================================= */

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  max-width: var(--ccpacks-content-max-width);
  margin: 0 auto;
  padding: var(--ccpacks-section-pt) var(--ccpacks-content-padding-x) var(--ccpacks-section-pb);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__heading, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__heading {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-lg-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

/* Two-column layout (Figma 95:550): summary card (left) + payment column
   (right) on one accent-5 block. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ccpacks-gap-stack);
  background: color-mix(in srgb, var(--ccpacks-color-accent-5) 32%, #ffffff);
  padding: var(--ccpacks-gap-stack);
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__summary {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-cards);
  background: var(--ccpacks-color-surface);
  border-radius: 8px;
  padding: var(--ccpacks-gap-cards);
  box-sizing: border-box;
}

/* --- Payment column (visual mockup) --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--ccpacks-gap-cards) 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__title {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__divider {
  width: 100%;
  height: 0;
  margin: 0 0 4px;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ccpacks-color-surface);
  border: 1px solid rgba(23, 35, 78, 0.16);
  border-radius: 8px;
  padding: 16px 20px;
  cursor: pointer;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__method.is-active {
  border-color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__radio {
  display: flex;
  align-items: center;
  gap: 12px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__radio-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__method-label {
  font-size: var(--ccpacks-font-size-body);
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__icon {
  width: 24px;
  height: 24px;
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__brand {
  font-size: var(--ccpacks-font-size-body);
  font-weight: 600;
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__fields[hidden] {
  display: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__input {
  border: 1px solid rgba(23, 35, 78, 0.24);
  border-radius: 4px;
  padding: 16px;
  font: inherit;
  color: var(--ccpacks-color-primary-strong);
  background: transparent;
  box-sizing: border-box;
  width: 100%;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__input::placeholder {
  color: var(--ccpacks-color-text-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--ccpacks-font-size-subheader);
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__terms-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-payment__link {
  color: var(--ccpacks-color-primary);
  text-decoration: underline;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__pack {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--ccpacks-color-primary-strong);
  opacity: 0.24;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__dates {
  display: flex;
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__date {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__label {
  margin: 0;
  opacity: 0.56;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__date-value {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__date-note {
  margin: 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__section {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__section-title {
  margin: 0;
  font-family: var(--ccpacks-font-body);
  font-weight: var(--ccpacks-font-weight-body);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__rooms, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__golf, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__prices {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__room, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__golf-round, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__golf-course-name {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__golf-course {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__golf-course-name {
  opacity: 0.56;
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__price-label {
  opacity: 0.56;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
}

/* Figma: the amounts sit smaller than the labels (14px, tracked). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__price-amount {
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Figma: "9 Jul 2026" -- capitalised short month. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__date-value {
  text-transform: capitalize;
}

/* Golf round: "{n} [person icon]  {date} · {time}" (Figma). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__golf-round {
  display: flex;
  align-items: center;
  gap: 12px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__players {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 2.25em;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__players-icon {
  flex: none;
  opacity: 0.56;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ccpacks-color-accent-4) 24%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__total-label {
  margin: 0;
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__total-note {
  margin: 0;
  opacity: 0.56;
  font-size: var(--ccpacks-font-size-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__total-amount {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-size: var(--ccpacks-font-size-header);
  letter-spacing: var(--ccpacks-letter-spacing-header);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__conditions-title, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__title {
  margin: 0 0 8px;
  /* Figma: Founders Grotesk Light 24px, wide tracking, left-aligned — NOT a
     bold heading (override the UA h2 bold). */
  font-family: var(--ccpacks-font-body);
  font-weight: var(--ccpacks-font-weight-body);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
  color: var(--ccpacks-color-primary-strong);
  text-align: left;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__conditions-body, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__conditions-body {
  margin: 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__error {
  margin: 0;
  color: #b90000;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__actions, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================
 * Step 7 — Gracias (confirmation voucher, Figma 95:319). One white card
 * (946px, full width with the 16px gutters on mobile), the PDF pill below
 * it, then the "Háganos una consulta" contact section.
 * ========================================================================= */

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias {
  --ccpacks-gracias-card-width: 946px;
  --ccpacks-gracias-muted: rgba(23, 35, 78, 0.56);
  --ccpacks-gracias-divider: color-mix(in srgb, var(--ccpacks-color-primary-strong) 24%, transparent);
  color: var(--ccpacks-color-primary);
}

/* Intro: two-line title (line 1 left, line 2 right) + centered paragraph. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(462px, 100%);
  margin: 0 auto;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__heading {
  font-size: var(--ccpacks-font-size-display-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  color: var(--ccpacks-color-primary);
  text-align: left;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__heading-line {
  display: block;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__heading-line:last-child {
  text-align: right;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__intro {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

/* White card holding the whole booking. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__voucher {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-stack);
  width: 100%;
  max-width: var(--ccpacks-gracias-card-width);
  margin: 0 auto;
  padding: var(--ccpacks-gap-cards);
  box-sizing: border-box;
  background: var(--ccpacks-color-surface);
  border-radius: 4px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ccpacks-gracias-divider);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__card-title {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-fluid);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__section--wide {
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias .ccpacks-gracias__title {
  margin: 0;
}

/* Booking info: pack line, booking date, localizador (centered). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__pack {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header-sm);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  color: var(--ccpacks-color-primary-strong);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__meta {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
}

/* Label muted (56%), value full navy. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__meta-label {
  color: var(--ccpacks-gracias-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__meta-value {
  color: var(--ccpacks-color-primary);
}

/* Person boxes: lead (accent-6 at 40%) and room guests (background-alt at 60%). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__person {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 4px;
  font-size: var(--ccpacks-font-size-body);
  background: color-mix(in srgb, var(--ccpacks-color-background-alt) 60%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__person.is-buyer {
  background: color-mix(in srgb, var(--ccpacks-color-accent-6) 40%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__person-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__person-name {
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__person-detail {
  overflow-wrap: anywhere;
}

/* "Datos de facturación": same light card as the person boxes. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__billing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 4px;
  font-size: var(--ccpacks-font-size-body);
  background: color-mix(in srgb, var(--ccpacks-color-background-alt) 60%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__billing-title {
  margin: 0;
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__billing-line {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Stay: ENTRADA (left) / SALIDA (right). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__dates {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__date {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(252px, 100%);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__date-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__date-label {
  text-transform: uppercase;
  color: var(--ccpacks-gracias-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__date-note {
  margin: 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

/* Rooms: header + one guest box per occupant. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__room {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__room-label {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
  color: var(--ccpacks-color-primary-strong);
}

/* Golf: product line, then one accent-2 block per round. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__golf, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__rounds {
  display: flex;
  flex-direction: column;
  gap: var(--ccpacks-gap-cards);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__golf-summary {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-head {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ccpacks-color-accent-2) 20%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-chiprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-time {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 8px;
  box-sizing: border-box;
  border-radius: 134px;
  font-size: var(--ccpacks-font-size-body);
  background: color-mix(in srgb, var(--ccpacks-color-accent-2) 60%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ccpacks-font-size-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-count-icon {
  width: 14px;
  height: 14px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
}

/* 1px #D9D9D9 separator between players (Figma). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-player + .ccpacks-gracias__round-player {
  padding-top: 16px;
  border-top: 1px solid #d9d9d9;
}

/* Price breakdown + green total. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__prices {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__price-label {
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
  color: var(--ccpacks-gracias-muted);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__price-amount {
  flex-shrink: 0;
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: var(--ccpacks-letter-spacing-subheader);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ccpacks-color-accent-4) 24%, transparent);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__total-label {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  text-transform: uppercase;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__total-note {
  margin: 0;
  font-size: var(--ccpacks-font-size-subheader);
  opacity: 0.56;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__total-amount {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-header);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  white-space: nowrap;
}

/* "Descargar PDF": primary-strong pill, right-aligned under the card. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__actions {
  justify-content: flex-end;
  width: 100%;
  max-width: var(--ccpacks-gracias-card-width);
  margin: 0 auto;
}

/* D22: "Volver a empezar" pill, centered under the failed-order heading. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__actions--center {
  justify-content: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__pdf {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none;
  background: var(--ccpacks-color-primary-strong);
  color: var(--ccpacks-color-background-alt);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__pdf:hover {
  background: var(--ccpacks-color-primary);
}

/* --- "Háganos una consulta": rule, two-line heading, then form | image. --- */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__consult {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: var(--ccpacks-section-pb) 0 var(--ccpacks-section-pt);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(598px, 100%);
  margin: 0 auto;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__title {
  margin: 0;
  font-family: var(--ccpacks-font-display);
  font-weight: var(--ccpacks-font-weight-display);
  font-size: var(--ccpacks-font-size-display-fluid);
  line-height: var(--ccpacks-line-height-tight);
  letter-spacing: var(--ccpacks-letter-spacing-header);
  color: var(--ccpacks-color-primary);
  text-align: left;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__title-line {
  display: block;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__title-line:last-child {
  text-align: right;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__intro {
  margin: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: var(--ccpacks-letter-spacing-body);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 702px;
  background: var(--ccpacks-color-background-alt);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__panel.is-single {
  grid-template-columns: minmax(0, 1fr);
}

/* The WordPress (WPForms) form, moved in as rendered by the shortcode. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__form {
  padding: 56px;
  box-sizing: border-box;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__media {
  min-height: 320px;
  overflow: hidden;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Server-rendered form source: hidden until the gracias view moves it in. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-contact-form-source[hidden] {
  display: none;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__media--big {
    min-height: 300px;
    order: -1; /* image first, then heading + small image */
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-hero__media--small {
    width: 100%;
  }
  /* Cards already wrap via auto-fit; on very narrow viewports collapse the
     min track to a single full-width column so nothing overflows. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-cards {
    grid-template-columns: 1fr;
  }
  /* Configure summary + inner rows stack on narrow viewports. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__row {
    grid-template-columns: 1fr;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-summary__row > .ccpacks-summary__field + .ccpacks-summary__field {
    border-left: 0;
    padding-left: 0;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar__sep {
    display: none;
  }
  /* Group notice stacks on narrow viewports. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-group-banner__group {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  /* Course header (media + info) stacks on narrow viewports. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__header {
    grid-template-columns: 1fr;
  }
  /* Pago summary + payment column stack; check-in/out columns stack. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__grid {
    grid-template-columns: 1fr;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__dates {
    flex-direction: column;
  }
  /* Gracias: card rows and the contact panel stack; card padding tightens. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__voucher {
    padding: 16px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__dates {
    flex-direction: column;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__round-head {
    font-size: var(--ccpacks-font-size-subheader);
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consult__form {
    padding: 24px 16px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__consult {
    padding-top: 64px;
    gap: 32px;
  }
}

/* Below desktop: safety net so a single long word in a heading (a long pack
   or course name, a wider licensed display font) breaks instead of pushing
   the page wider than the viewport. The fluid font-size tokens do the real
   work; this only kicks in when a word still cannot fit. */
@media (max-width: 1023px) {
  :is(ccpacks-wizard, #ccpacks-scope) :is(h1, h2, h3) {
    overflow-wrap: anywhere;
  }
}

/* Phones: rows that are single-line on desktop wrap instead of overflowing. */
@media (max-width: 600px) {
  /* Breadcrumb may wrap at the " / " separators. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__seg {
    white-space: nowrap;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-breadcrumb__sep {
    white-space: pre-wrap;
  }
  /* Config bar: tighter side padding; the full-width pill may wrap. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configbar {
    padding: 16px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-packinfo__check {
    white-space: normal;
  }
  /* flatpickr's calendar is a fixed 307.875px, anchored (static) to its
     field's left edge: on a narrow field it runs past the viewport. Capping it
     to the FIELD width squeezed it (~230px at 333px, inside the config bar's
     double padding), so cap it to the viewport minus the 16px gutters instead
     and center it on the field (the fields span their card symmetrically on
     phones), overhanging the field's padding. The day grid flexes into 7
     equal columns. `margin-left`, not `transform`: flatpickr's open animation
     (fpFadeInDown) animates `transform`. */
  :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static {
    width: min(307.875px, calc(100vw - 32px));
    max-width: none;
    left: 50%;
    margin-left: calc(min(307.875px, 100vw - 32px) / -2);
  }
  :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static .flatpickr-rContainer, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static .flatpickr-days, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  /* Month + year header: use the full width between the nav arrows so the
     year stays visible on the narrower calendar. */
  :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static .flatpickr-months .flatpickr-prev-month, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static .flatpickr-months .flatpickr-next-month {
    padding: 10px 7px;
  }
  :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar.static .flatpickr-current-month {
    left: 28px;
    width: calc(100% - 56px);
    font-size: 100%;
    white-space: nowrap;
  }
}

/* =========================================================================
 * flatpickr calendar — brand theming (navy accents). The base flatpickr.css
 * is bundled via the demo entry; these rules override its colors/shape.
 * ========================================================================= */
:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-calendar {
  font-family: var(--ccpacks-font-body);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(23, 35, 78, 0.18);
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-months .flatpickr-month, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-current-month, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-current-month input.cur-year, :is(ccpacks-wizard, #ccpacks-scope) span.flatpickr-weekday {
  color: var(--ccpacks-color-primary);
  fill: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-months .flatpickr-prev-month svg, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-months .flatpickr-next-month svg {
  fill: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day {
  color: var(--ccpacks-color-primary);
  border-radius: 6px;
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day:hover, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day:focus {
  background: color-mix(in srgb, var(--ccpacks-color-primary) 12%, transparent);
  border-color: transparent;
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.today {
  border-color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.selected, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.selected:hover, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.selected:focus {
  background: var(--ccpacks-color-primary);
  border-color: var(--ccpacks-color-primary);
  color: var(--ccpacks-color-on-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.flatpickr-disabled, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.prevMonthDay, :is(ccpacks-wizard, #ccpacks-scope) .flatpickr-day.nextMonthDay {
  color: rgba(23, 35, 78, 0.3);
}

/*
 * Print (browser print of the Gracias page; the "Descargar PDF" pill links to
 * the CoreChannel voucher PDF instead): scope the printed
 * output to the reservation voucher only. This block hides the plugin's own
 * non-voucher parts on the Gracias screen (heading, actions, consult form) and
 * flattens the wizard shell. Surrounding host/site chrome is hidden by the
 * embedding theme (the demo does this in chrome.css).
 */
@media print {
  :is(ccpacks-wizard, #ccpacks-scope) {
    background: #fff;
    padding: 0;
  }

  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__header, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__actions, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__consult {
    display: none !important;
  }

  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias {
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__voucher {
    box-shadow: none;
    border-radius: 0;
  }

  /* Keep the design fills (bands, totals, tee-time chips) in the PDF. */
  :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__voucher, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias__voucher * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =========================================================================
 * 2-step flow additions: Paso 1 actions, es_adulto switch, assigned-golf
 * summary (Paso 2), and the payment redirect interstitial.
 * ========================================================================= */

/* Paso 1 "Comprobar disponibilidad" action row. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ccpacks-gap-stack);
}

/* Split actions (Volver on the left, primary on the right). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-configure__actions--split {
  justify-content: space-between;
}

/* The whole tee time is the control: each click moves one player on or off it.
   The seat icons inside are decorative (green = party, navy = free, grey = taken). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot__seat {
  display: inline-block;
  line-height: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot[disabled] {
  cursor: default;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot:focus-visible {
  outline: 2px solid var(--ccpacks-color-primary);
  outline-offset: 2px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__remaining.is-incomplete {
  color: #b3261e;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__split-summary {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ccpacks-color-primary);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-slot.is-disabled {
  opacity: 0.45;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-course__seat-hint {
  margin: 0;
  text-align: left;
  font-size: 14px;
  color: rgba(23, 35, 78, 0.75);
}

/* Hint shown in the room area until an arrival date is chosen. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-rooms__hint {
  padding: 32px 24px;
  text-align: center;
  color: rgba(23, 35, 78, 0.6);
  font-size: 15px;
}

/* Mandatory es_adulto switch (one per guest). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  cursor: pointer;
  user-select: none;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(23, 35, 78, 0.24);
  transition: background 0.15s ease;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__input:checked + .ccpacks-switch__track {
  background: var(--ccpacks-color-primary, #17234e);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__input:checked + .ccpacks-switch__track .ccpacks-switch__thumb {
  transform: translateX(18px);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__input:focus-visible + .ccpacks-switch__track {
  outline: 2px solid var(--ccpacks-color-primary, #17234e);
  outline-offset: 2px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-switch__label {
  font-size: 14px;
  color: var(--ccpacks-color-primary-strong, #17234e);
}

/* Assigned-golf summary shown on Paso 2 (read-only). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__golf {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__golf-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__golf-course {
  font-weight: 500;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-data__golf-when {
  color: rgba(23, 35, 78, 0.6);
}

/* Payment redirect interstitial. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__redirecting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 80px 24px;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(23, 35, 78, 0.15);
  border-top-color: var(--ccpacks-color-primary, #17234e);
  animation: ccpacks-spin 0.8s linear infinite;
}

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

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__redirecting-text {
  font-size: 16px;
  color: var(--ccpacks-color-primary-strong, #17234e);
}

/* Pago: single-column order summary (payment is an external redirect, no form). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__single {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

/* Consent checkboxes (privacy required + marketing opt-in) above the pay CTA. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consent__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consent__check {
  margin-top: 2px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--ccpacks-color-primary, #17234e);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consent__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ccpacks-color-primary-strong, #17234e);
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-consent__link {
  color: var(--ccpacks-color-primary, #17234e);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The pay link/button sits directly below the centered summary. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__pay {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__pay .ccpacks-btn {
  min-width: 280px;
}

/* "Volver" is a secondary action at the foot of the page. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-pago__actions--back {
  justify-content: flex-start;
}

/* PACKINFO "Volver" (back to the packages list). */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-packinfo__actions {
  justify-content: flex-start;
}

/* Discreet notice above PACKAGES when a direct link no longer matches the catalog. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-deeplink-notice {
  margin: 0 0 var(--ccpacks-gap-stack);
  font-size: 0.9375rem;
  opacity: 0.8;
}

/* =========================================================================
 * Status panels — "checking your payment", the post-redirect outcome, the
 * packs-load error and the PACKAGES notices. One centered, quiet card in the
 * brand palette: white surface, navy text, display font for outcomes.
 * ========================================================================= */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-resuming, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-error, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias--resumed {
  box-sizing: border-box;
  width: min(560px, calc(100% - 2 * var(--ccpacks-content-padding-x, 16px)));
  margin: clamp(48px, 10vw, 112px) auto;
  padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--ccpacks-color-surface);
  border-radius: 4px;
  color: var(--ccpacks-color-primary);
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-resuming .ccpacks-loader__spinner {
  width: 32px;
  height: 32px;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-resuming__text, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-error {
  margin-top: 0;
  font-size: var(--ccpacks-font-size-body);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-resuming__text {
  margin: 0;
}

/* Packs-load error: a thin brand rule above the message marks it as a notice. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-error::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--ccpacks-color-primary);
}

/* Post-redirect outcome (released / cancelled / needs attention / pending):
   the copy is a sentence, so it reads as a header, not the 56px display title. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias--resumed .ccpacks-gracias__heading {
  margin: 0;
  font-size: var(--ccpacks-font-size-header-fluid);
  line-height: 1.3;
  text-align: center;
}

:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-gracias--resumed .ccpacks-gracias__meta {
  padding-top: 20px;
  border-top: 1px solid var(--ccpacks-gracias-divider);
  font-size: var(--ccpacks-font-size-subheader);
  letter-spacing: 0.1em;
  color: var(--ccpacks-gracias-muted);
}

/* PACKAGES notices (stale resume / stale deep link): a slim centered band. */
:is(ccpacks-wizard, #ccpacks-scope) .ccpacks-resume-notice, :is(ccpacks-wizard, #ccpacks-scope) .ccpacks-deeplink-notice {
  box-sizing: border-box;
  width: min(720px, calc(100% - 2 * var(--ccpacks-content-padding-x, 16px)));
  margin: 32px auto;
  padding: 16px 24px;
  background: var(--ccpacks-color-background-alt);
  border-left: 2px solid var(--ccpacks-color-primary);
  border-radius: 4px;
  color: var(--ccpacks-color-primary);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  opacity: 1;
}