/* ============================================================
   v2 checkout tunnel — the shared stylesheet of the purchase funnel in the v2 look.

   No maquette has a checkout screen: the look is deduced from the v2 components (tokens.css
   CTA, the contact modal form in contact.css, the locale-form controls in menu.css, the
   offer card and struck price of css/v2/booking.css).

   Scope: every rule hangs off `.bf-checkout`, a class the HOST page prints on <body> (on
   base_v2 through `page_class`). It is not page-specific on purpose: the same sheet is meant
   for every surface that renders the tunnel — checkout_classic (club_checkout/index) today,
   then booking_checkout, the full order_confirmation page, the embed and gift. A host only
   has to set the class and load this file (after tokens.css).

   What it dresses:
     - checkout/checkout_process.html.twig and everything it includes: the two-column frame,
       _stepper, steps/* (pre_reservation, reservation, info, club_select), the personal
       form (general/form/personal), the payment step (Adyen drop-in), the in-tunnel
       confirmation (general/confirmation_body);
     - the #modal-section T&C dialog (.conditions-modal, class added by general_checkout.js)
       and the #running-process spinner (components/v2/checkout/modals.html.twig);
     - the recap band above the tunnel, through the neutral `bf-checkout-recap*` classes
       (club_checkout/section/checkout_recap.html.twig carries them; booking's twin recap
       can carry the same ones).

   Shared partials still load two legacy sheets on their own, inline: css/reservation.css
   (steps/*reservation, the booking-recovery block) and css/confirmation.css
   (checkout_process, the confirmation step). They are REUSED, not replaced: they also
   serve the legacy surfaces (reservation/booking.html.twig, the legacy embed and booking
   pages) and hold the structural rules (date rail scroll, time-list layout, the
   confirmation carousel geometry, the loading overlay). This file only overrides their
   colours, fonts and radii. Every override here carries one more class (.bf-checkout)
   than the rule it beats, so source order — those sheets load inside <body>, after this
   one — never decides.

   JS contract: ids, input names, data-role and the hook classes (.club-form, .go-to-step,
   .step-next, .submit-personal, .open-modal-checkout, .date-card, .time-row, .is-selected,
   .disabled, .uk-hidden …) are only ever SELECTED here, never renamed or hidden.

   Breakpoints = UIkit's: @s 640px · @m 960px · @l 1200px.
   ============================================================ */

/* ---- Page frame ---- */

.bf-checkout .section.checkout {
  background: var(--bf-c-white);
  color: var(--bf-c-black);
}

.bf-checkout .checkout-section {
  padding: 24px 0 48px;
}

/* The legacy blue dot decorations are not part of the v2 look. Hidden, not removed: the
   markup is shared with the legacy surfaces. */
.bf-checkout .blue-dots-main-right,
.bf-checkout .blue-dots-main-left {
  display: none;
}

/* Left column (from 640px): the "Compra ahora tu / CLASE DE PRUEBA" banner and its photo. */
.bf-checkout .club-banner-text {
  margin: 0;
  font: 400 18px/1.3 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .club-banner-heading {
  margin: 4px 0 24px;
  font: 400 56px/.95 var(--bf-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .club-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bf-radius-btn);
}

.bf-checkout .vertical-divider {
  width: 1px;
  height: 100%;
  background: var(--bf-c-line-light);
}

/* The steps column: one centred column, never wider than a comfortable form. */
.bf-checkout .club-form {
  max-width: 480px;
  margin: 0 auto;
}

/* Keeps a target clear of the sticky v2 header when the browser scrolls it into view
   (scrollIntoView, anchors, focus of an invalid field by FormValidation's AutoFocus).
   It does not move general_checkout.js's own scrolls, which compute raw offsets. A host
   without a sticky header (the embed) zeroes --bf-header-h. */
.bf-checkout .club-form,
.bf-checkout .club-form input,
.bf-checkout .club-form select {
  scroll-margin-top: calc(var(--bf-header-h) + 16px);
}

/* ---- Recap band (above the tunnel) ---- */

.bf-checkout .bf-checkout-recap-band {
  background: var(--bf-c-sand);
}

.bf-checkout .bf-checkout-recap-band > .uk-container {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* White card on the sand band: the v2 offer card (css/v2/booking.css .bf-booking-offer__card). With
   a promo the price side carries two figures: at 320px it may drop under the text. */
.bf-checkout .bf-checkout-recap {
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px;
  background: var(--bf-c-white);
  border-radius: var(--bf-radius-field);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* The text side takes the room and wraps; the price keeps the right edge, as the legacy card.
   Under ~340px of card the two no longer fit side by side and the price drops below. */
.bf-checkout .bf-checkout-recap__info {
  flex: 1 1 180px;
  min-width: 0;
}

.bf-checkout .bf-checkout-recap__title {
  margin: 0;
  font: 600 16px/1.3 var(--bf-font-body);
  text-transform: none;
  color: var(--bf-c-black);
}

.bf-checkout .bf-checkout-recap__club {
  display: block;
  font-weight: 400;
}

.bf-checkout .bf-checkout-recap__meta {
  margin-top: 4px;
  font: 400 13px/1.4 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
}

/* Mobile: the meta line stays on one line. Beside the price the text side can be as narrow as its
   180px basis (181px at 360), narrower than the es copy (202px at 13px; 12px would still need 186).
   So the line no longer wraps, and the text side's min-width falls back to its content: when the
   meta does not fit beside the price, the price drops below (the 320px layout) instead of the
   line breaking. Every locale's copy fits the 320px card (de, the longest, 238 of 258px); the
   max-width and the ellipsis only guard narrower screens against a horizontal overflow. */
@media (max-width: 959px) {
  .bf-checkout .bf-checkout-recap__info {
    min-width: auto;
    max-width: 100%;
  }

  .bf-checkout .bf-checkout-recap__meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.bf-checkout .bf-checkout-recap__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  font: 600 14px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .bf-checkout-recap__address {
  margin-top: 6px;
  font: 400 14px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .bf-checkout-recap__change,
.bf-checkout .bf-checkout-recap__change:visited {
  font-weight: 400;
  color: var(--bf-c-black);
  text-decoration: underline;
}

.bf-checkout .bf-checkout-recap__change:hover {
  color: var(--bf-c-gold);
}

/* Prices as on the v2 booking offer card: the figure in DIN, the full price struck before the
   discounted one. One unit: the text side is what gives way. */
.bf-checkout .bf-checkout-recap__price {
  flex: 0 0 auto;
  margin: 0;
  font: 400 28px/1 var(--bf-font-display);
  white-space: nowrap;
  color: var(--bf-c-black);
}

.bf-checkout .bf-checkout-recap__price .no-offer-price {
  margin-right: .2em;
  font-size: .7em;
  color: var(--bf-c-ink-idle);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ---- Stepper (checkout/_stepper.html.twig) ---- */

.bf-checkout .step-indicator {
  gap: 8px;
  max-width: 280px;
  margin: 0 auto 24px;
}

/* Circle-to-label space. The label carries .uk-margin-remove (margin: 0 !important), so the
   space is the item's gap; same 10px as the gift stepper's .step-text (.uk-margin-small-top). */
.bf-checkout .step-indicator > .uk-flex-column {
  gap: 10px;
}

.bf-checkout .step-indicator p {
  margin: 0;
  font: 400 13px/1 var(--bf-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bf-c-black);
  border-radius: 50%;
  background: var(--bf-c-white);
  font: 400 17px/1 var(--bf-font-display);
  color: var(--bf-c-black);
}

.bf-checkout .step-selected,
.bf-checkout .step-done {
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
}

/* Done: a yellow tick in place of the number. */
.bf-checkout .step-done::before {
  content: "";
  display: block;
  width: 5px;
  height: 11px;
  margin-top: -3px;
  border: solid var(--bf-c-yellow);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bf-checkout .step-line {
  flex: 1 1 auto;
  align-self: flex-start;
  min-width: 16px;
  height: 1px;
  margin-top: 16px; /* the circles' centre line */
  background: var(--bf-c-grey-200);
}

.bf-checkout .go-to-step {
  cursor: pointer;
}

@media (hover: hover) {
  .bf-checkout .go-to-step:hover .step-circle {
    background: var(--bf-c-gold);
    border-color: var(--bf-c-gold);
  }
}

/* ---- Step titles ---- */

/* `.text-select` heads the personal and payment steps, `.checkout-step__title` the others:
   the same title. */
.bf-checkout .text-select,
.bf-checkout .checkout-step__title {
  margin: 0 0 6px;
  font: 400 30px/1 var(--bf-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .tiny-claim {
  margin: 0 0 20px;
  font: 400 15px/1.45 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
}

.bf-checkout .checkout-step__content {
  margin: 0;
  font: 400 15px/1.45 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
}

/* ---- Personal form (general/form/personal.html.twig) ---- */

/* The fields as the v2 contact modal form (contact.css) and the locale-form selects (menu.css):
   48px, 16px text (no iOS zoom on focus), grey border, black on focus. */
.bf-checkout #order-form .form-field {
  position: relative;
  margin-top: 16px;
}

.bf-checkout #order-form .form-field label {
  display: block;
  margin-bottom: 6px;
  font: 500 14px/1.3 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout #order-form .uk-input {
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--bf-c-grey-200);
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-white);
  font: 400 16px/1.2 var(--bf-font-body);
  color: var(--bf-c-black);
  transition: border-color var(--bf-dur) var(--bf-ease), box-shadow var(--bf-dur) var(--bf-ease);
}

.bf-checkout #order-form .uk-input::placeholder {
  color: #8a8a8a;
}

.bf-checkout #order-form .uk-input:hover {
  border-color: var(--bf-c-black);
}

.bf-checkout #order-form .uk-input:focus {
  border-color: var(--bf-c-black);
  box-shadow: 0 0 0 1px var(--bf-c-black);
  outline: none;
}

/* FormValidation (Uikit plugin) flags the .form-field wrapper (uk-form-danger /
   uk-form-success), not the input, and appends its .fv-plugins-message-container at the end
   of that wrapper. */
.bf-checkout #order-form .form-field.uk-form-danger .uk-input {
  border-color: #c00;
}

.bf-checkout #order-form .form-field.uk-form-danger .uk-input:focus {
  box-shadow: 0 0 0 1px #c00;
}

/* The phone field: intl-tel-input wraps the input in .iti (inline-block by default) and makes
   room for its flag dropdown with a left padding that the field padding above would cancel. */
.bf-checkout #order-form .iti {
  display: block;
  width: 100%;
}

.bf-checkout #order-form .iti .uk-input {
  width: 100%;
}

.bf-checkout #order-form .iti--allow-dropdown .uk-input {
  padding-left: 52px;
}

/* A valid field: a small tick inside the input's right edge. The span sits after the field's
   form_row, before the message container, which is empty once the field is valid: the
   wrapper's bottom is the input's bottom. */
.bf-checkout #order-form .success-check {
  display: none;
}

.bf-checkout #order-form .form-field.uk-form-success .success-check {
  display: block;
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 6px;
  height: 12px;
  border: solid var(--bf-c-black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

/* Messages: FormValidation's, the server-side form_errors and the AJAX errors. They carry
   UIkit's .uk-text-danger, whose colour is !important (#f0506e): only !important beats it. */
.bf-checkout #order-form .fv-plugins-message-container > *,
.bf-checkout .checkout-form-errors .uk-text-danger,
.bf-checkout .checkout-form-errors ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font: 400 13px/1.35 var(--bf-font-body);
  color: #c00 !important;
}

.bf-checkout .checkout-form-errors .uk-text-danger:empty {
  margin: 0;
}

/* Checkboxes (pay at the club, legal): the native uk-checkbox in the v2 colours, the legacy
   custom .checkmark (drawn by the legacy CSS only) is not used. */
.bf-checkout #order-form .checkboxes {
  margin-top: 20px;
}

.bf-checkout #order-form .checkbox-field + .checkbox-field {
  margin-top: 12px;
}

.bf-checkout #order-form .checkbox-field label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font: 400 14px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
  cursor: pointer;
}

.bf-checkout #order-form .checkmark {
  display: none;
}

.bf-checkout #order-form .uk-checkbox {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--bf-c-grey-200);
  border-radius: 2px;
  background-color: var(--bf-c-white);
}

.bf-checkout #order-form .uk-checkbox:focus {
  border-color: var(--bf-c-black);
  outline: none;
}

.bf-checkout #order-form .uk-checkbox:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

.bf-checkout #order-form .uk-checkbox:checked {
  border-color: var(--bf-c-black);
  background-color: var(--bf-c-black);
}

/* The T&C link (.open-modal-checkout): black, underlined, gold on hover — as the contact
   modal's #view-terms. */
.bf-checkout #order-form .checkbox-field .text a,
.bf-checkout #order-form .checkbox-field .text a:visited {
  color: var(--bf-c-black);
  text-decoration: underline;
}

.bf-checkout #order-form .checkbox-field .text a:hover {
  color: var(--bf-c-gold);
}

/* The checkbox messages: under the text, not under the 18px box. */
.bf-checkout #order-form .checkbox-field .fv-plugins-message-container {
  padding-left: 28px;
}

/* ---- Buttons ----
   The tunnel's buttons in the v2 primary CTA (tokens.css .bf-btn--primary), on the classes
   the markup and the JS already carry: the personal submit (.submit-personal), Continue
   (.step-next), Book (.reservation-book), and the confirmation's error CTA (.button.yellow). */

.bf-checkout .submit-personal,
.bf-checkout .step-next,
.bf-checkout .reservation-book,
.bf-checkout .confirmation .button.yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  min-height: 52px;
  margin: 24px auto 0;
  padding: 14px 20px;
  border: none;
  border-radius: var(--bf-radius-btn);
  background: var(--bf-c-yellow);
  font: 400 18px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  color: var(--bf-c-black);
  cursor: pointer;
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease);
}

/* :hover keeps the idle look by default (touch screens keep :hover after a tap); UIkit's
   .uk-button-secondary / -primary hover colours are overridden here. */
.bf-checkout .submit-personal:hover,
.bf-checkout .submit-personal:visited,
.bf-checkout .step-next:hover,
.bf-checkout .reservation-book:hover,
.bf-checkout .confirmation .button.yellow:hover {
  background: var(--bf-c-yellow);
  color: var(--bf-c-black);
  text-decoration: none;
}

.bf-checkout .submit-personal:focus-visible,
.bf-checkout .step-next:focus-visible,
.bf-checkout .reservation-book:focus-visible,
.bf-checkout .confirmation .button.yellow:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
}

@media (hover: hover) {
  .bf-checkout .submit-personal:hover,
  .bf-checkout .step-next:hover,
  .bf-checkout .reservation-book:hover,
  .bf-checkout .confirmation .button.yellow:hover {
    background: var(--bf-c-black);
    color: var(--bf-c-yellow);
  }
}

/* The personal submit animates in (uk-animation-slide-bottom-small); its row is a flex row. */
.bf-checkout #order-form .submit-personal {
  margin-bottom: 8px;
}

/* A blocked button (reservation.css / reservation.js contract: `.disabled`). */
.bf-checkout .step-next.disabled,
.bf-checkout .reservation-book.disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---- Reservation steps (pre_reservation before payment, reservation after it) ----
   The slot picker's structure is reservation.css; only the look is overridden. */

.bf-checkout .checkout-step--reservation,
.bf-checkout .checkout-step--pre-reservation {
  text-align: left;
}

.bf-checkout .checkout-step--reservation .checkout-step__title,
.bf-checkout .checkout-step--pre-reservation .checkout-step__title {
  margin-bottom: 20px;
}

.bf-checkout .reservation-datepicker__title,
.bf-checkout .reservation-times__title {
  font: 600 15px/1.3 var(--bf-font-body);
  text-transform: none;
  color: var(--bf-c-black);
}

.bf-checkout .reservation-datepicker__arrow {
  width: 36px;
  height: 36px;
  border: 1px solid var(--bf-c-grey-200);
  background: var(--bf-c-white);
  color: var(--bf-c-black);
}

.bf-checkout .reservation-datepicker__arrow:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .bf-checkout .reservation-datepicker__arrow:not([disabled]):hover {
    border-color: var(--bf-c-black);
    background: var(--bf-c-white);
  }
}

.bf-checkout .date-card {
  border: 1px solid var(--bf-c-grey-200);
  border-radius: var(--bf-radius-field);
  font-family: var(--bf-font-body);
}

.bf-checkout .date-card__weekday,
.bf-checkout .date-card__month {
  font: 400 12px/1.3 var(--bf-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bf-c-ink-idle);
}

.bf-checkout .date-card__day {
  margin-top: 4px;
  font: 400 24px/1 var(--bf-font-display);
  color: var(--bf-c-black);
}

.bf-checkout .date-card.is-selected {
  border-color: var(--bf-c-black);
  background: var(--bf-c-black);
  box-shadow: none;
}

.bf-checkout .date-card.is-selected .date-card__weekday,
.bf-checkout .date-card.is-selected .date-card__month,
.bf-checkout .date-card.is-selected .date-card__day {
  color: var(--bf-c-yellow);
}

.bf-checkout .date-card.is-disabled .date-card__day,
.bf-checkout .date-card.is-disabled .date-card__weekday,
.bf-checkout .date-card.is-disabled .date-card__month {
  color: #cfcfcf;
}

.bf-checkout .time-row {
  padding: 15px 16px;
  border: 1px solid var(--bf-c-grey-200);
  border-radius: var(--bf-radius-field);
  font: 500 16px/1.2 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .time-row.is-selected,
.bf-checkout .rsv-radio:checked + .time-row {
  border-color: var(--bf-c-black);
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
}

@media (hover: hover) {
  .bf-checkout .date-card:not(.is-selected):not(.is-disabled):hover,
  .bf-checkout .time-row:not(.is-selected):not(.is-full):hover {
    border-color: var(--bf-c-black);
  }
}

.bf-checkout .date-card:focus-visible,
.bf-checkout .time-row:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

.bf-checkout .reservation-feedback {
  margin-top: 12px;
  font: 400 14px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .reservation-feedback.reservation-feedback--empty {
  padding: 16px 18px;
  background: var(--bf-c-sand);
  border-radius: var(--bf-radius-field);
  font-weight: 500;
  text-align: center;
}

.bf-checkout .reservation-required-hint {
  margin-top: 10px;
  font: 400 13px/1.4 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
  text-align: center;
}

.bf-checkout .reservation-skip,
.bf-checkout .reservation-skip:visited {
  display: inline-block;
  margin-top: 14px;
  font: 400 14px/1.4 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
  text-decoration: underline;
  cursor: pointer;
}

.bf-checkout .reservation-skip:hover {
  color: var(--bf-c-black);
}

.bf-checkout .slot-picker-spinner {
  border-color: var(--bf-c-sand);
  border-top-color: var(--bf-c-black);
}

/* ---- Payment step (Adyen drop-in) ----
   #dropin-container (.dropin-brooklyn) is mounted by main_checkout.js. Adyen 6 reads its
   colours, borders and radii from --adyen-sdk-* custom properties (with fallbacks in
   adyen.css): set on the container, they reach every component without fighting Adyen's
   selectors. Text inherits the body font. The card number / expiry / CVC fields are Adyen
   iframes: their font and colours come from main_checkout.js's `style` object, not CSS. */

.bf-checkout .dropin-brooklyn {
  --adyen-sdk-color-label-primary: var(--bf-c-black);
  --adyen-sdk-color-label-secondary: var(--bf-c-ink-idle);
  --adyen-sdk-color-label-tertiary: var(--bf-c-ink-idle);
  --adyen-sdk-color-outline-primary: var(--bf-c-line-light);   /* method boxes */
  --adyen-sdk-color-outline-secondary: var(--bf-c-line-light); /* selected method */
  --adyen-sdk-color-outline-tertiary: var(--bf-c-grey-200);    /* fields */
  --adyen-sdk-color-outline-primary-hover: var(--bf-c-black);
  --adyen-sdk-color-outline-primary-active: var(--bf-c-black); /* focus, checked radio */
  --adyen-sdk-color-background-secondary: var(--bf-c-white);
  --adyen-sdk-color-label-critical: #c00;
  --adyen-sdk-color-outline-critical: #c00;
  --adyen-sdk-border-radius-s: var(--bf-radius-btn);
  --adyen-sdk-border-radius-m: var(--bf-radius-field);
  --adyen-sdk-border-radius-l: var(--bf-radius-field);
}

/* A single card method shows its own "Tarjeta" header for nothing. */
.bf-checkout .dropin-brooklyn .adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header__title {
  display: none;
}

.bf-checkout .dropin-brooklyn .adyen-checkout__payment-method .adyen-checkout__payment-method__brands {
  width: fit-content;
}

.bf-checkout .dropin-brooklyn .adyen-checkout__payment-method__name {
  font-weight: 500;
}

.bf-checkout .dropin-brooklyn .adyen-checkout__error-text {
  margin-top: 6px;
  font: 400 13px/1.35 var(--bf-font-body);
  color: #c00;
}

/* The pay button: the v2 primary CTA, with the padlock in black (Adyen's own icon is white). */
.bf-checkout .dropin-brooklyn .adyen-checkout__button--pay {
  height: 52px;
  border-radius: var(--bf-radius-btn);
  background: var(--bf-c-yellow);
  box-shadow: none;
  font: 400 18px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bf-c-black);
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease);
}

.bf-checkout .dropin-brooklyn .adyen-checkout__button--pay .adyen-checkout__button__icon {
  display: none;
}

.bf-checkout .dropin-brooklyn .adyen-checkout__button--pay .adyen-checkout__button__text::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 17px;
  margin-right: 10px;
  vertical-align: -2px;
  background: url('../../images/icons/lock.svg') no-repeat center / contain;
}

.bf-checkout .dropin-brooklyn .adyen-checkout__button--pay:focus,
.bf-checkout .dropin-brooklyn .adyen-checkout__button--pay:active {
  background: var(--bf-c-yellow);
  box-shadow: none;
  color: var(--bf-c-black);
}

.bf-checkout .dropin-brooklyn .adyen-checkout__button--pay:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .bf-checkout .dropin-brooklyn .adyen-checkout__button--pay:hover {
    background: var(--bf-c-black);
    box-shadow: none;
    color: var(--bf-c-yellow);
  }

  /* The padlock follows the label: inverted to yellow-ish on black. */
  .bf-checkout .dropin-brooklyn .adyen-checkout__button--pay:hover .adyen-checkout__button__text::before {
    filter: invert(1) sepia(1) saturate(20) hue-rotate(5deg);
  }
}

/* ---- In-tunnel confirmation (general/confirmation_body.html.twig) ----
   Structure from css/confirmation.css; titles in DIN, the slot chip in the v2 colours. */

.bf-checkout .confirmation {
  font-family: var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .confirmation .title-purchase {
  font: 400 34px/1 var(--bf-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bf-c-black);
}

.bf-checkout .confirmation p {
  font: 400 15px/1.45 var(--bf-font-body);
}

/* UIkit's .uk-text-danger colour is !important (#f0506e). */
.bf-checkout .confirmation .uk-text-danger {
  color: #c00 !important;
}

.bf-checkout .confirmation .title-2x1 {
  width: auto;
  font: 400 32px/1 var(--bf-font-display);
}

/* The steps' intro ("Sigue estos sencillos pasos.", payment_approved.subtitle): a sub-title under
   the 34/44px title-purchase: 24px (the v2 card/sub-section heading size) then 30px at @m (the
   checkout step title, .checkout-step__title). The <p> has no class of its own: matched as the
   paragraph right after the success title, minus the booking-recovery message of that branch. */
.bf-checkout .confirmation .title-purchase.success + p.uk-text-center:not(.booking-recovery__message) {
  margin: 16px 0 0;
  font: 400 24px/1.05 var(--bf-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .confirmation .reserved-confirmation__desc {
  font: 500 17px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* The booked day + time: the selected time-row's colours (black, yellow DIN). */
.bf-checkout .confirmation .booked-slot {
  padding: 12px 20px;
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
  font-family: var(--bf-font-display);
}

.bf-checkout .confirmation .booked-slot__date,
.bf-checkout .confirmation .booked-slot__time {
  font: 400 22px/1 var(--bf-font-display);
  text-transform: uppercase;
}

.bf-checkout .confirmation .booked-slot__sep {
  color: var(--bf-c-yellow);
}

/* The app-download band: a sand panel, as the v2 light sections. */
.bf-checkout .confirmation .approved-yellow {
  padding: 20px;
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-sand);
}

.bf-checkout .confirmation .approved-yellow p,
.bf-checkout .confirmation .reserved-band__text {
  font: 500 15px/1.45 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* The "what's next" steps (components/v2/checkout/payment-approved.html.twig): white v2 cards
   (phone shot on sand, "01" in DIN, title, text) in a uk-slider laid out like the legacy one
   (css/confirmation.css `.payment-approved-slider`): at every width and on every surface, one
   card at a time, centred in a slide of at most 360px with 12px each side (card 336px max), no
   peeking; then the shared round dots, centred (css/v2/slider-dots.css). */
.bf-checkout .bf-approved-steps {
  max-width: 360px;
  margin: 24px auto 0;
  text-align: left;
}

/* uk-slider-container clips: it bleeds 12px past each side of the slider (and the vertical
   padding, cancelled by the margins, past the top and bottom) to leave room for the shadow. */
.bf-checkout .bf-approved-steps__track {
  margin: -8px -12px -20px;
  padding: 8px 0 28px;
}

.bf-checkout .bf-approved-steps .bf-approved-steps__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One slide per view, as wide as the clip: the card sits 24px in from each side, i.e. 12px in
   from the slider's edges (legacy), and the 24px gutters hide the neighbours and their shadow. */
.bf-checkout .bf-approved-steps .bf-approved-steps__item {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 24px;
}

.bf-approved-step {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* The phone shots are transparent PNGs (about square, the phone in their lower three quarters,
   cropped at the bottom edge): anchored to the bottom of a 6:5 sand band, which crops only the
   empty top and keeps the whole phone in view at any card width. */
.bf-approved-step__media {
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background: var(--bf-c-sand);
}

.bf-checkout .bf-approved-step .bf-approved-step__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.bf-approved-step__body {
  padding: 18px 20px 22px;
  container: bf-approved-step / inline-size;
}

.bf-approved-step__num {
  display: block;
  font: 400 28px/1 var(--bf-font-display);
  letter-spacing: .02em;
  color: var(--bf-c-gold);
}

.bf-checkout .bf-approved-step .bf-approved-step__title {
  margin: 8px 0 0;
  padding: 0;
  font: 400 26px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .bf-approved-step .bf-approved-step__text {
  width: auto;
  margin: 8px 0 0;
  font: 400 14px/1.5 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
}

.bf-approved-step__text strong {
  font-weight: 600;
  color: var(--bf-c-black);
}

/* Store badges (step 2): side by side, same height, 36px tall while they fit. Below that both
   shrink together: the height follows the card's inner width (container `bf-approved-step`, on
   the body) so that two es-es badges (568x169, the widest of every locale) plus the 8px gap fill
   it (6.75 rather than 2 x 568 / 169 = 6.722, a pixel of headroom so they never wrap); every
   other locale is narrower at the same height. Under 208px (a badge would drop below ~100px wide)
   they stack, centred, back at 36px. Without container queries the height stays 36px (the second
   declaration is dropped) and they wrap as before. */
.bf-approved-step__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.bf-approved-step__apps a {
  display: block;
  flex: 0 0 auto;
}

.bf-checkout .bf-approved-step .download-icon {
  display: block;
  width: auto;
  max-width: none;
  height: 36px;
  height: min(36px, calc((100cqw - 8px) / 6.75));
}

@container bf-approved-step (width < 208px) {
  .bf-approved-step__apps {
    flex-direction: column;
    align-items: center;
  }

  .bf-checkout .bf-approved-step .download-icon {
    height: 36px;
  }
}

.bf-approved-step__apps a:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

/* Full-page thank-you (checkout/confirmation.html.twig, route order_confirmation): the same body
   in a page of its own, inside `.bf-checkout-confirmation > .uk-container > .confirmation`. */
.bf-checkout .bf-checkout-confirmation {
  padding: 32px 0 56px;
}

/* ---- Free-trial gift share card (components/free_trial/share_gift.html.twig) ----
   Rendered by the thank-you's 2x1 block (confirmation_body: full page, in-tunnel fragment,
   embed) and by the free-trial gift-to-friend pages (already_gifted, gift_generated), which load
   this file too; every rule hangs off the component's `.bf-share-gift` wrapper. Up to three sand
   panels: the code + its two actions (share = outline button, customize = primary CTA), how to
   share (DIN title, numbered steps, the eligibility note), the T&C accordion. The UIkit card /
   alert / button colours are overridden; .copy-text and .content-copy are only selected. */

.bf-checkout .bf-share-gift {
  margin-top: 16px;
  text-align: left;
  font-family: var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__card {
  margin: 0 !important; /* UIkit's .uk-margin / .uk-margin-medium-bottom are !important */
  padding: 20px;
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-sand);
  box-shadow: none;
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__card + .bf-share-gift__card {
  margin-top: 12px !important; /* UIkit's .uk-margin is !important */
}

.bf-checkout .bf-share-gift .bf-share-gift__lead {
  margin: 0;
  font: 500 15px/1.45 var(--bf-font-body);
  text-align: center;
  color: var(--bf-c-black);
}

/* The code: a white "ticket" in DIN, as the coupon's code. */
.bf-checkout .bf-share-gift .bf-share-gift__code {
  margin: 16px 0 0 !important;
  padding: 14px 16px;
  border: 1px dashed var(--bf-c-black);
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-white);
  text-align: center;
}

.bf-checkout .bf-share-gift .bf-share-gift__code p {
  margin: 0;
  font: 400 32px/1 var(--bf-font-display);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__actions {
  margin-top: 16px !important; /* UIkit's .uk-margin-top is !important */
}

.bf-checkout .bf-share-gift .bf-share-gift__share,
.bf-checkout .bf-share-gift .bf-share-gift__customize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--bf-c-black);
  border-radius: var(--bf-radius-btn);
  box-shadow: none;
  font: 400 17px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease), border-color var(--bf-dur) var(--bf-ease);
}

/* Idle looks, also on :hover / :focus / :active (touch screens keep :hover after a tap; UIkit
   turns -secondary / -primary darker or blue there). Mouse hover is below. */
.bf-checkout .bf-share-gift .bf-share-gift__share,
.bf-checkout .bf-share-gift .bf-share-gift__share:hover,
.bf-checkout .bf-share-gift .bf-share-gift__share:focus,
.bf-checkout .bf-share-gift .bf-share-gift__share:active {
  background: transparent;
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__customize,
.bf-checkout .bf-share-gift .bf-share-gift__customize:visited,
.bf-checkout .bf-share-gift .bf-share-gift__customize:hover,
.bf-checkout .bf-share-gift .bf-share-gift__customize:focus,
.bf-checkout .bf-share-gift .bf-share-gift__customize:active {
  border-color: var(--bf-c-yellow);
  background: var(--bf-c-yellow);
  color: var(--bf-c-black);
  text-decoration: none;
}

.bf-checkout .bf-share-gift .bf-share-gift__share:focus-visible,
.bf-checkout .bf-share-gift .bf-share-gift__customize:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
  border-color: var(--bf-c-black);
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
}

@media (hover: hover) {
  .bf-checkout .bf-share-gift .bf-share-gift__share:hover,
  .bf-checkout .bf-share-gift .bf-share-gift__customize:hover {
    border-color: var(--bf-c-black);
    background: var(--bf-c-black);
    color: var(--bf-c-yellow);
  }
}

.bf-checkout .bf-share-gift .bf-share-gift__title {
  margin: 0 0 12px;
  font: 400 26px/1.05 var(--bf-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__steps {
  margin: 0;
  padding: 0;
}

.bf-checkout .bf-share-gift .bf-share-gift__steps > li {
  font: 400 15px/1.45 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__steps > li + li {
  margin-top: 8px;
}

/* UIkit's .uk-list-decimal draws the numbers (li 30px padding + ::before counter). */
.bf-checkout .bf-share-gift .bf-share-gift__steps > li::before {
  font-weight: 600;
  color: var(--bf-c-black);
}

/* The eligibility / club note: UIkit's .uk-text-small / -muted / -italic, in the v2 grey. */
.bf-checkout .bf-share-gift .bf-share-gift__note {
  margin: 14px 0 0 !important; /* UIkit's .uk-margin-small-top is !important */
  font: italic 400 13px/1.45 var(--bf-font-body);
  color: var(--bf-c-ink-idle) !important; /* UIkit's .uk-text-muted is !important */
}

/* T&C accordion: the title as a 15px Inter line (UIkit's +/- icon kept), the articles in 13px. */
.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-title {
  font: 600 15px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-title:hover,
.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-title:focus {
  color: var(--bf-c-black);
  text-decoration: none;
}

.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-content {
  margin-top: 12px;
}

.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-content h4 {
  margin: 14px 0 4px;
  font: 600 14px/1.35 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-content h4:first-child {
  margin-top: 0;
}

.bf-checkout .bf-share-gift .bf-share-gift__terms .uk-accordion-content p {
  margin: 0;
  font: 400 13px/1.5 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
}

@media (min-width: 640px) {
  .bf-checkout .bf-share-gift .bf-share-gift__card {
    padding: 24px 28px;
  }
}

/* ---- Club select step (clubless embed entry only) ----
   Light touch: the finder markup is shared with the legacy finder. */

.bf-checkout .bf-club-select .right-heading {
  font: 400 24px/1.05 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-checkout .bf-club-select .search-input {
  height: 48px;
  border: 1px solid var(--bf-c-grey-200);
  border-radius: var(--bf-radius-field);
  font: 400 16px/1.2 var(--bf-font-body);
}

.bf-checkout .bf-club-select .current-location.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--bf-radius-btn);
  background: var(--bf-c-yellow);
  font: 400 17px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

/* ---- T&C dialog (#modal-section.conditions-modal) ----
   general_checkout.js adds `conditions-modal` on #modal-section and fills its header, body
   and footer from the purchase-conditions fragment. Outside .main, but under <body>. */

.bf-checkout .conditions-modal .uk-modal-dialog {
  width: 700px;
  border-radius: var(--bf-radius-btn);
  font-family: var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-checkout .conditions-modal .uk-modal-header {
  padding: 0;
  border: 0;
}

.bf-checkout .conditions-modal .uk-modal-body {
  padding: 48px 20px 8px; /* top: clear of the close button */
  font: 400 15px/1.5 var(--bf-font-body);
}

.bf-checkout .conditions-modal .uk-modal-close-default {
  color: var(--bf-c-black);
}

/* Tabs "Condiciones: Oferta …" / "Condiciones generales": the first label is long — it wraps
   on its own line instead of scrolling sideways (uk-overflow-auto + UIkit's nowrap). */
.bf-checkout .conditions-modal .tab-conditions {
  flex-wrap: wrap;
  overflow: visible;
  margin: 0 0 16px;
  gap: 4px 24px;
}

.bf-checkout .conditions-modal .tab-conditions::before {
  left: 0;
}

.bf-checkout .conditions-modal .tab-conditions > * {
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 0;
}

.bf-checkout .conditions-modal .tab-conditions > * > a {
  padding: 8px 0;
  border-bottom-width: 2px;
  font: 400 18px/1.1 var(--bf-font-display);
  letter-spacing: .03em;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
  color: var(--bf-c-ink-idle);
}

.bf-checkout .conditions-modal .tab-conditions > .uk-active > a {
  border-color: var(--bf-c-gold);
  color: var(--bf-c-black);
}

.bf-checkout .conditions-modal .conditions-container > li {
  max-height: 55vh;
  overflow: auto;
}

.bf-checkout .conditions-modal .panel {
  margin: 0 0 12px;
  padding: 16px 20px;
  border-radius: var(--bf-radius-field);
  background: var(--bf-c-sand);
  color: var(--bf-c-black);
}

.bf-checkout .conditions-modal .panel:last-child {
  margin-bottom: 0;
}

.bf-checkout .conditions-modal h3,
.bf-checkout .conditions-modal .panel h2,
.bf-checkout .conditions-modal .panel h4 {
  margin: 0 0 10px;
  font: 600 17px/1.3 var(--bf-font-body);
  text-transform: none;
  color: var(--bf-c-black);
}

/* The general conditions repeat the dialog's title in their own <h2>. */
.bf-checkout .conditions-modal .general-conditions .content > h2 {
  display: none;
}

.bf-checkout .conditions-modal .general-conditions p {
  margin: 10px 0 0;
}

.bf-checkout .conditions-modal .bullet-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.bf-checkout .conditions-modal .bullet-list li {
  position: relative;
  padding-left: 16px;
}

.bf-checkout .conditions-modal .bullet-list li + li {
  margin-top: 4px;
}

.bf-checkout .conditions-modal .bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bf-c-black);
}

.bf-checkout .conditions-modal .uk-container {
  padding: 0;
}

/* "Cerrar": the v2 secondary button (menu.css .bf-locale-form__submit). */
.bf-checkout .conditions-modal .uk-modal-footer {
  padding: 16px 20px 24px;
  border: 0;
  text-align: center;
}

.bf-checkout .conditions-modal .uk-modal-footer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 200px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--bf-c-black);
  border-radius: var(--bf-radius-btn);
  background: transparent;
  font: 400 17px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bf-c-black);
  cursor: pointer;
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease);
}

.bf-checkout .conditions-modal .uk-modal-footer .close-icon svg {
  width: 18px;
  height: 18px;
}

.bf-checkout .conditions-modal .uk-modal-footer .button:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .bf-checkout .conditions-modal .uk-modal-footer .button:hover {
    background: var(--bf-c-black);
    color: var(--bf-c-yellow);
  }
}

/* ---- Running-process spinner (#running-process) ----
   No dialog box: a yellow spinner on UIkit's dark overlay. */

.bf-checkout #running-process .uk-modal-dialog {
  width: auto;
  background: transparent;
  box-shadow: none;
}

.bf-checkout #running-process [uk-spinner] {
  color: var(--bf-c-yellow);
}

/* ---- From 640px (UIkit @s): the left banner column appears ---- */

@media (min-width: 640px) {
  .bf-checkout .checkout-section {
    padding: 48px 0 72px;
  }

  .bf-checkout .conditions-modal .uk-modal-body {
    padding: 48px 32px 8px;
  }
}

/* ---- Desktop (UIkit @m) ---- */

@media (min-width: 960px) {
  .bf-checkout .club-form,
  .bf-checkout .club-form input,
  .bf-checkout .club-form select {
    scroll-margin-top: calc(var(--bf-header-h-desktop) + 16px);
  }

  .bf-checkout .bf-checkout-recap-band > .uk-container {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .bf-checkout .bf-checkout-recap {
    padding: 20px 24px;
  }

  .bf-checkout .bf-checkout-recap__title {
    font-size: 18px;
  }

  .bf-checkout .bf-checkout-recap__price {
    font-size: 34px;
  }

  .bf-checkout .checkout-section {
    padding: 64px 0 96px;
  }

  .bf-checkout .club-banner-heading {
    font-size: 72px;
  }

  .bf-checkout .text-select,
  .bf-checkout .checkout-step__title {
    font-size: 34px;
  }

  .bf-checkout .confirmation .title-purchase {
    font-size: 44px;
  }

  .bf-checkout .confirmation .title-purchase.success + p.uk-text-center:not(.booking-recovery__message) {
    font-size: 30px;
  }

  .bf-checkout .bf-checkout-confirmation {
    padding: 56px 0 88px;
  }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .bf-checkout #order-form .uk-input,
  .bf-checkout .submit-personal,
  .bf-checkout .step-next,
  .bf-checkout .reservation-book,
  .bf-checkout .dropin-brooklyn .adyen-checkout__button--pay,
  .bf-checkout .conditions-modal .uk-modal-footer .button,
  .bf-checkout .bf-share-gift .bf-share-gift__share,
  .bf-checkout .bf-share-gift .bf-share-gift__customize {
    transition: none;
  }
}