/**
 * Classic checkout — /{_country}/{_locale}/club/checkout/{alias}
 *
 * Extracted from public/css/booking.css so this page owns its styling outright: it was
 * loading that whole sheet, which meant any rule written for the booking landing or its
 * purchase page could repaint this one, and vice versa.
 *
 * What was taken, and how it was chosen — measured, not eyeballed. booking.css declares
 * 285 rules; each one is scoped `.booking-landing` (the landing), `.booking-checkout`
 * (the purchase page) or plain `.booking` (both). Classifying all of them showed a clean
 * split: the 109 rules this page can match are exactly booking.css:1433-2271 and
 * :2361-2378 — the purchase-page header tweak, the recap card, the checkout tunnel, the
 * modal shell and the thank-you title. Everything else — hero, content sections, offer
 * card, FAQ, directions, reviews, nearby clubs, buy bar, purchase modal, section
 * alternation — is `.booking-landing` and could never apply here. Nothing was dropped
 * that this page was using.
 *
 * Scoping: one class, `.club-checkout`, printed on the <body> by
 * club_checkout/index.html.twig. booking.css needed two (`.booking` + `.booking-checkout`)
 * because it dressed a landing AND a purchase page; this sheet dresses one page, so the
 * split had no job left. Specificity is unchanged — every selector keeps its class count,
 * which matters for the thank-you rule at the end of this file, whose three classes have
 * to outrank confirmation.css.
 *
 * Own classes are prefixed `club-checkout-`. Two of them, `.club-checkout-section` and
 * `.club-checkout-cover`, carry no rule here and carried none there either (their
 * booking.css definitions were `.booking-landing`-scoped): they are markup hooks kept for
 * symmetry with the booking templates, not dead rules.
 *
 * The comments below are the originals. Where they name a `.booking-*` rule they mean the
 * one in booking.css, which is where it still lives — not a rule of this file.
 *
 * Duplication accepted: the tunnel and modal blocks were already a copy of club.css (see
 * their own headers for the measurement that settled that), so this is a copy of a copy.
 * The alternative was leaving the two pages welded together, which is what we were asked
 * to undo.
 */

/* ------------------------------------------------------------------ *
 * Purchase page: the header drops the club block
 *
 * `.club-head` holds both halves of it — the yellow rule and the club
 * name (header.html.twig:51-58) — so one rule removes both.
 *
 * Hidden rather than not rendered: the shared header prints the block
 * on `{% if club is defined %}` with no flag to suppress it, and
 * passing `club: null` would not help — `defined` stays true for null,
 * and line 17 would then read `club.alias` off it. Editing that file is
 * out: /club/, /gimnasios/, the home and the directory all include it.
 *
 * booking.css scoped this `.booking-checkout`, not `.booking`: its
 * landing keeps the club name in the header, where nothing else names
 * the club. Here the recap card does, so the header repeat is what it
 * is — a repeat. One scope in this file, so `.club-checkout`.
 * ------------------------------------------------------------------ */

.club-checkout .header-menu .club-head {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Purchase page recap card
 *
 * One card above the tunnel, not one per step: the step containers
 * come from checkout/checkout_process.html.twig, shared with /club/,
 * /gimnasios/ and /embed/checkout/, so a card inside them would mean
 * editing that partial for a need only this page has.
 *
 * White card on the #f6f5f4 band, the pairing the offer section of
 * lot 5 already uses, and the same 5px radius. Its border is the
 * #e6e4e1 of the section rules rather than the #d5cdba of
 * .booking-offer-card: this card only has to separate itself from the
 * band, not delimit a box on white.
 * ------------------------------------------------------------------ */

/* The band carries no section padding of its own, so the card ends up flush against the sticky
   header above it and against the tunnel below — at every width, the two-column frame from 960px
   up included. A touch more room on desktop, where the card is a single wide row and the band
   around it reads as empty unless it is deliberately sized. */
.club-checkout .club-checkout-recap-band > .uk-container {
    padding-top: 16px;
    padding-bottom: 16px;
}

.club-checkout .club-checkout-recap-card,
.club-checkout .club-checkout-recap {
    box-sizing: border-box;
}

/* `gap` and `flex-wrap` rather than a strict two-column row, exactly what .booking-offer-footer
   and .booking-modal-footer do: with a promo the price side carries two figures, and at 320px it
   has to be allowed to drop below the text. */
.club-checkout .club-checkout-recap {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 16px;
    background-color: #fff;
    border: 1px solid #e6e4e1;
    border-radius: 5px;
}

/* Same `min-width: 0` as the directions footer and the sticky bar, and for the same reason: a flex
   item will not shrink below its longest unbreakable run unless told to, so without it the title
   would push the price off the card instead of wrapping its own text. */
.club-checkout .club-checkout-recap-info {
    min-width: 0;
}

/* Card type, not the 44px Knockout of .booking-section-title: this is a summary line, and h1 would
   otherwise pick up Knockout 27 from style.css:47 plus the `margin-top: 40px` custom.css:1904 gives
   every h1 from 640px up. All four inherited properties are restated, as .booking-offer-name does
   for the same reason. */
.club-checkout .club-checkout-recap-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    color: #000;
    text-transform: none;
}

/* Second line of the same heading: the club, under what is being bought. `block` is what breaks
   the line — a <br> would be markup carrying layout, and the two parts have to stay inside one h1
   so the accessible heading still reads "Sesión de prueba Brooklyn Fitboxing Demo".
   Body weight against the bold above: the offer is the heading, the club identifies it. */
.club-checkout .club-checkout-recap-club {
    display: block;
    font-weight: normal;
}

/* The same grey as .booking-offer-meta and the sticky bar's meta line — #767676 is as light as
   12px text can go and still clear 4.5:1 on white. */
.club-checkout .club-checkout-recap-meta {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: #767676;
}

/* The chosen slot, revealed by the page script once it exists. Black and a notch larger than the
   meta line above: it is the visitor's own choice being read back to them, not fine print. */
.club-checkout .club-checkout-recap-slot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.35;
    color: #000;
}

/* The address, on the thank-you step only. Same treatment as the meta line above — it is reference
   information, not a heading — but black rather than #767676: at that point it is what the visitor
   has to read and act on. */
.club-checkout .club-checkout-recap-address {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: #000;
}

/* Underlined and in the body weight, so it reads as the link it is next to the bold slot. */
.club-checkout .club-checkout-recap-change {
    font-weight: normal;
    color: #5f5e62;
    text-decoration: underline;
}

.club-checkout .club-checkout-recap-change:hover {
    color: #000;
}

/* `nowrap` for the same measured reason as the sticky bar's price: with two figures in a long
   currency (1 490 ₽ 745 ₽) the line breaks at 320px and the card grows a row. The price is one
   unit; the text side is what gives way. */
.club-checkout .club-checkout-recap-price {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;
    color: #000;
    white-space: nowrap;
}

.club-checkout .club-checkout-recap-price .no-offer-price {
    margin-right: 6px;
    font-size: 14px;
    color: #000;
}

@media (min-width: 960px) {
    .club-checkout .club-checkout-recap-band > .uk-container {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .club-checkout .club-checkout-recap {
        align-items: center;
        padding: 18px 22px;
    }

    .club-checkout .club-checkout-recap-title {
        font-size: 17px;
    }

    .club-checkout .club-checkout-recap-price {
        font-size: 20px;
    }
}

/* ------------------------------------------------------------------ *
 * Checkout tunnel (lot 13)
 *
 * The purchase page includes checkout/checkout_process.html.twig
 * verbatim, and that partial is dressed by club.css — not by
 * checkout.css, which only the confirmation pages load. So these rules
 * are copied here, exactly as lots 8 and 10 copied the accordion and
 * the nearby-clubs cards.
 *
 * Measured before choosing, rather than assumed:
 *  - what the tunnel needs: on /club/QA, 48 of club.css's 392 rules
 *    match an element inside #checkout, and 44 of them are already
 *    scoped `.section.checkout` or `.dropin-brooklyn`, so the copy is
 *    mechanical — prepend the page scope, change nothing else;
 *  - what loading club.css would cost: 40 of its rules match this
 *    page's own DOM (html, body, a, img, a.button, .social-networks*,
 *    #footer*, and 5 .uk-modal* rules), and `body` flips from
 *    #f9f6f1/#666 to #000/#fff with a 21px -> 17px line-height while
 *    #footer turns white. booking.css loading after cannot win on
 *    rules it does not declare, so it would need one counter-rule per
 *    leak, and the purchase page would carry a different footer from
 *    the landing.
 *
 * Copied from club.css: 985-1302 (.section.checkout + the fr next-step),
 * 1305-1371 (.conditions-modal), 829-896 (the Adyen drop-in), 1447-1455
 * (the ru-ru sizes), plus the .section.checkout subsets of the 640 /
 * 960 / 1200 media blocks (:1936-1970, :2102, :2308-2340), and the two
 * Adyen custom properties of club.css:1-8.
 *
 * NOT copied, and why: `.hero-left*` / `.hero-img` (the hero is never
 * rendered inside #checkout — those rules are already dead on /club/),
 * `.nmbr-*` (markup lives in payment-approved.html.twig, which the
 * in-tunnel thank-you does not include), and the bare `a` / `.uk-input`
 * rules (base.css and custom.css already declare `a`; the dark
 * `.uk-input` variant is overridden by the scoped #contact-data-form
 * rule below anyway). `img { border-radius: 2px }` IS kept, scoped, for
 * pixel parity on the banner image.
 *
 * Nothing to copy for the thank-you: checkout_process.html.twig:95
 * loads confirmation.css itself, the reservation step loads
 * reservation.css, and personal_form.html.twig loads the Adyen CSS.
 *
 * The trade accepted: a duplication to re-sync if club.css moves.
 * Extracting these rules into a file shared with /club/ and the embed
 * is the better end state, and a lot of its own — it needs a regression
 * diff on three surfaces.
 * ------------------------------------------------------------------ */

.club-checkout .section.checkout {
    background-color: #fff;
    color: #000;
}

.club-checkout .section.checkout img {
    border-radius: 2px;
}

.club-checkout .section.checkout .blue-dots-main-right {
    top: 0;
    right: 0;
    transform: rotateY(180deg);
    z-index: 0;
    width: 120px;
    pointer-events: none; /* decorative only — must never intercept taps (e.g. the reservation date arrows) */
}

.club-checkout .section.checkout .blue-dots-main-left {
    left: 0;
    top: 0;
    z-index: 0;
    width: 120px;
    pointer-events: none;
}

.club-checkout .section.checkout .checkout-section {
    padding: 18px 0;
}

.club-checkout .section.checkout .vertical-divider {
    width: 1px;
    height: 95%;
    background: #000;
    opacity: 1;
}

.club-checkout .section.checkout .club-banner {
    width: 268px;
    margin: auto;
}

.club-checkout .section.checkout .club-banner-text {
    font-size: 18px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0px;
    margin-bottom: -7px;
}

.club-checkout .section.checkout .club-banner-heading {
    font-size: 50px;
    font-family: 'HCo Knockout 28', 'Trebuchet MS', 'Arial Narrow', Arial, sans-serif;
    color: #000;
    letter-spacing: 0.7%;
    margin: 7px 0px 10px 0px;
    text-transform: uppercase;
}

.club-checkout .section.checkout .club-form {
    width: 95%;
    margin: auto;
}

.club-checkout .section.checkout .step-indicator {
    gap: 20px;
    width: 215px;
    margin: auto;
}

.club-checkout .section.checkout .step-indicator p {
    font-size: 10px !important;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: #000;
    margin-top: 3px !important;
}

.club-checkout .section.checkout .step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

.club-checkout .section.checkout .step-selected {
    background-color: #000;
    color: #FFCC00;
}

.club-checkout .section.checkout .step-done {
    border: 1px solid #000;
    background-color: #000;
    color: #fc0;
}

.club-checkout .section.checkout .step-done:before {
    content: "";
    display: block;
    height: 11px;
    width: 4px;
    border: solid #fc0;
    border-width: 0 2px 2px 0;
    margin-top: -4px;
    margin-left: 2px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.club-checkout .section.checkout .step-line {
    width: 41px !important;
    height: 2px;
    background: #000;
    margin: 0 10px;
    align-self: center;
    margin-top: -20px !important;
}

/* On the critical path here, not decorative: the `booking` flow adds a pre-reservation before-step,
   so this page's stepper always has 3 pills and the fixed 41px above would leave the circles
   unevenly spaced. */
.club-checkout .section.checkout .step-indicator--flow .step-line {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 16px;
}

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

/* Reservation "after" step widget (post-payment). Kept even though the `booking` flow has no
   after-step: a club targeted by a `clubs:` flow would reach it through this same page. */
.club-checkout .section.checkout .checkout-step--reservation {
    text-align: center;
    padding: 10px 0 20px;
}

/* Reservation / pre-reservation step title: match the personal-data step title
   (.text-select) — same font, size, weight and colour. The pre-reservation half is
   what this page's own flow uses. */
.club-checkout .section.checkout .checkout-step--reservation .checkout-step__title,
.club-checkout .section.checkout .checkout-step--pre-reservation .checkout-step__title {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* Slot chips (.reservation-slots / .reservation-day* / .reservation-slot) are the
   shared reservation component — see public/css/reservation.css, loaded by the
   step partial itself. Only the checkout-specific widget chrome stays here. */

.club-checkout .section.checkout .reservation-book.disabled {
    opacity: .4;
    pointer-events: none;
}

.club-checkout .section.checkout .reservation-skip {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    color: #9a9a9a;
    text-decoration: underline;
    cursor: pointer;
}

.club-checkout .section.checkout .reservation-feedback {
    margin-top: 10px;
    font-size: 14px;
    color: #000;
}

.club-checkout .section.checkout .text-select {
    font-size: 16px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0px;
    text-transform: uppercase;
    font-weight: 400;
}

.club-checkout .section.checkout .tiny-claim {
    font-size: 14px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: #000 !important;
    margin: 0px;
    margin-bottom: 20px;
    margin-top: 0px !important;
}

/* `.step-2` is the payment step on the club page's two-step flow. On this page the
   pre-reservation before-step shifts payment to position 3, so the same inset is
   declared for both — the original targets a position, not a step type. */
.club-checkout .section.checkout .step-2 .text-select,
.club-checkout .section.checkout .step-3 .text-select {
    padding: 0 18px;
}

.club-checkout .section.checkout .step-2 .tiny-claim,
.club-checkout .section.checkout .step-3 .tiny-claim {
    padding: 0 18px;
}

.club-checkout .section.checkout #contact-data-form label {
    color: #000;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.club-checkout .section.checkout #contact-data-form .form-field {
    margin-top: 20px;
}

.club-checkout .section.checkout #contact-data-form .uk-input {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 16px;
    border-radius: 4px;
    height: 43px;
    color: #000000 !important;
    border: 1px solid #878787b0;
}

.club-checkout .section.checkout #contact-data-form .checkbox-field {
    margin-bottom: 8px;
}

.club-checkout .section.checkout #contact-data-form .uk-input:focus {
    border: 1px solid #000 !important;
}

.club-checkout .section.checkout #contact-data-form .uk-checkbox {
    border: 1px solid #878787b0;
}

.club-checkout .section.checkout #contact-data-form .uk-form-danger input.uk-input {
    border-color: #dc3545;
}

.club-checkout .section.checkout #contact-data-form .uk-text-danger {
    color: #dc3545;
    font-size: 12px;
    margin-top: 6px;
    font-weight: 400;
}

.club-checkout .section.checkout #contact-data-form .uk-form-success .success-check {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    top: 32px;
    right: -10px;
    text-align: center;
}

.club-checkout .section.checkout #contact-data-form .uk-form-success .success-check:after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 11px;
    border: solid #000;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.club-checkout .section.checkout #contact-data-form .text a {
    text-decoration: underline !important;
}

.club-checkout .section.checkout #contact-data-form .text a:hover {
    color: black;
}

.club-checkout .section.checkout #contact-data-form .next-step {
    width: 265px;
    margin-top: 20px;
    margin: auto;
}

/* Both classes sit on the same <body> (base.html.twig:170), so these are compound selectors.
   The descendant form of club.css:1301 and :1447-1455 would never match here — same trap as
   the accordion of lot 8. */
.language-fr-fr.club-checkout .section.checkout #contact-data-form .next-step {
    width: 295px;
}

.language-ru-ru.club-checkout .section.checkout .club-banner-heading {
    font-size: 40px;
}

/* The Adyen drop-in, copied from club.css:829-896. Left unscoped by `.section.checkout` on
   purpose, as in the original: #dropin-container is mounted by main_checkout.js and the class
   is what the SDK's own markup hangs off. */
.club-checkout .dropin-brooklyn {
    /* club.css declares these two on `html`; they only feed the drop-in, and custom properties
       inherit, so the container is a close enough owner — carrying an `html` rule over would be
       a page-wide side effect for two Adyen tokens. */
    --adyen-sdk-color-background-secondary: #fff;
    --adyen-sdk-color-outline-secondary: #fff;
}

.club-checkout .dropin-brooklyn .adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header__title {
    display: none;
}

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

.club-checkout .dropin-brooklyn .adyen-checkout__error-text {
    color: #ff6161;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 17px;
    margin-top: 10px;
}

.club-checkout .dropin-brooklyn .adyen-checkout__card__cardNumber__brandIcon,
.club-checkout .dropin-brooklyn .adyen-checkout__card__cvc__hint,
.club-checkout .dropin-brooklyn .adyen-checkout__button__icon {
    display: none;
}

.club-checkout .dropin-brooklyn .adyen-checkout__input-wrapper {
    position: relative;
}

.club-checkout .dropin-brooklyn .adyen-checkout-input__inline-validation--valid {
    position: absolute;
    right: -8px;
    top: 20px;
}

.club-checkout .dropin-brooklyn .adyen-checkout-input__inline-validation--valid .adyen-checkout__icon {
    display: none;
}

.club-checkout .dropin-brooklyn .adyen-checkout__input,
.club-checkout .dropin-brooklyn .input-field {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.club-checkout .dropin-brooklyn .adyen-checkout__button--pay {
    background-color: #fc0;
    color: #000;
    font-weight: 600;
    font-size: 16px;
}

.club-checkout .dropin-brooklyn .adyen-checkout__button__text:before {
    content: "";
    background-image: url('../images/icons/lock.svg');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 20px;
    margin-right: 12px;
    vertical-align: bottom;
    width: 15px;
}

.club-checkout .dropin-brooklyn .adyen-checkout__button:active,
.club-checkout .dropin-brooklyn .adyen-checkout__button:focus,
.club-checkout .dropin-brooklyn .adyen-checkout__button:hover {
    background: #ff8736;
    border: 0;
    box-shadow: none;
}

/* The T&C overlay, copied from club.css:1305-1371. It is AJAX-loaded into #modal-section by
   general_checkout.js:116, so it lands inside <body class="booking …">. These rules exist
   nowhere else this page loads — checkout.css has them too, but that file is only pulled in by
   the confirmation pages. */
.club-checkout .conditions-modal .uk-modal-header {
    padding: 0;
}

.club-checkout .conditions-modal .uk-tab {
    margin-bottom: 10px;
    flex-wrap: nowrap;
}

/* ------------------------------------------------------------------ *
 * The modal shell, second half of the copy
 *
 * Only the `.conditions-modal` block of club.css was copied at first
 * (lot 13, club.css:1305-1371). The shell it sits in was not, and that
 * is what made this modal read as a different component: the tab
 * labels fell back to UIkit's own 14px sans with the #1e87f0 accent
 * underline instead of the 24px Knockout 30 the club page uses, the
 * dialog kept UIkit's width instead of 700px, and — with no padding on
 * the dialog — the tab bar started level with the close button and ran
 * underneath it (measured at 1440: close at y60-84, tabs at y66-98
 * reaching x=1005 against the button at 986).
 *
 * Copied from club.css:1397-1444 plus the 640px override at :1949,
 * with `.club-checkout .conditions-modal` prepended. The prefix is not
 * the club page's `.uk-modal`: the booking build this came from carries
 * its own purchase modal whose type and width are already set, and the
 * unscoped form would repaint it. Scoping to the class the JS puts on
 * #modal-section keeps the change to the one modal at issue.
 * ------------------------------------------------------------------ */

/* Split from the footer, unlike club.css, which groups the two at `padding: 15px` and lets the
   more specific `.conditions-modal .uk-modal-header { padding: 0 }` above win on the header.
   Here both selectors carry the same three classes, so grouping them would hand the header 15px
   on source order — the club page shows a zero-height header, this has to as well. */
.club-checkout .conditions-modal .uk-modal-header {
    border: 0;
}

.club-checkout .conditions-modal .uk-modal-footer {
    border: 0;
    padding: 15px;
}

.club-checkout .conditions-modal .uk-modal-body {
    padding: 30px 15px;
}

/* The grey card each conditions block sits in — club.css:1377-1391. Without it the text ran
   straight on the white of the dialog. */
.club-checkout .conditions-modal .panel {
    background-color: #f6f5f4;
    border-radius: 5px;
    color: #000;
    margin: 7px 0 18px;
    padding: 15px 25px 10px;
}

.club-checkout .conditions-modal li > .panel {
    margin-top: 0;
}

.club-checkout .conditions-modal li > .panel:last-of-type {
    margin-bottom: 0;
}

.club-checkout .conditions-modal .uk-modal-dialog,
.club-checkout .conditions-modal .uk-modal-header,
.club-checkout .conditions-modal .uk-modal-body,
.club-checkout .conditions-modal .uk-modal-footer {
    background-color: #fff;
    border-radius: 5px;
    color: #000;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* The dialog's own padding is what lifts the close button clear of the tab bar. */
.club-checkout .conditions-modal .uk-modal-dialog {
    min-height: 100%;
    padding: 30px 0;
    width: 100%;
}

.club-checkout .conditions-modal .tab-conditions {
    margin-left: -10px;
}

.club-checkout .conditions-modal .tab-conditions a {
    font-family: 'HCo Knockout 30', 'Trebuchet MS', 'Arial Narrow', Arial, sans-serif;
    font-size: 24px;
}

.club-checkout .conditions-modal .tab-conditions .uk-active > a {
    font-family: 'HCo Knockout 30', 'Trebuchet MS', 'Arial Narrow', Arial, sans-serif;
    font-size: 24px;
    border-color: #000;
}

/* Both classes sit on the same <body>, so this is a compound selector — same form as the
   accordion title rule above, and not the descendant one club.css uses. */
.language-ru-ru.club-checkout .conditions-modal .tab-conditions a {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    line-height: 23px;
}

@media (min-width: 640px) {
    .club-checkout .conditions-modal .uk-modal-dialog {
        min-height: 0;
        padding: 30px 10px;
        width: 700px;
    }
}

/* The "Cerrar" button of the fragment's own footer, now that the shell has a footer to receive
   it — see the `{% block modal %}` override in booking/checkout.html.twig. */
.club-checkout .conditions-modal .transparent.button {
    background-color: transparent;
    border: 1px solid transparent;
    color: #000;
    display: block;
    font-size: 16px;
    padding: 14px 15px 10px;
    text-align: center;
    transition: all .5s ease;
}

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

.club-checkout .conditions-modal .general-conditions .content > h2 {
    display: none;
}

.club-checkout .conditions-modal .uk-modal-body {
    font-size: 16px;
    padding-bottom: 15px;
}

.club-checkout .conditions-modal h3 {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 10px 0;
    text-transform: none;
}

.club-checkout .conditions-modal .general-conditions p {
    margin-top: 10px;
}

.club-checkout .conditions-modal .bullet-list {
    list-style: none;
    padding-left: 10px;
    vertical-align: text-bottom;
}

.club-checkout .conditions-modal .bullet-list li::before {
    content: "";

    height: 5px;
    width: 5px;

    background: #000;
    border-radius: 100%;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 3px;
}

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

/* The breakpoints are club.css's own (640 / 960 / 1200), not this file's 960: the point is to
   match the block being copied, not to align it on the page's scale. Same choice as lot 8. */
@media (min-width: 640px) {
    .club-checkout .section.checkout .checkout-section {
        padding: 50px 0px 40px;
    }

    .club-checkout .section.checkout .club-banner {
        width: 100%;
        margin: 0;
    }

    .club-checkout .section.checkout .blue-dots-main-right {
        top: 0;
    }

    .club-checkout .section.checkout .blue-dots-main-left {
        top: 30%;
    }
}

@media (min-width: 960px) {
    .club-checkout .section.checkout .club-banner-heading {
        margin: 7px 0px 20px 0px;
    }
}

@media (min-width: 1200px) {
    .club-checkout .section.checkout .club-banner-text {
        margin: 0px;
        margin-bottom: -8px !important;
    }

    .club-checkout .section.checkout .club-form {
        width: 80%;
        margin: auto;
    }

    .club-checkout .section.checkout .blue-dots-main-right {
        top: -80px;
        width: 250px;
    }

    .club-checkout .section.checkout .blue-dots-main-left {
        top: 30%;
        width: 250px;
    }

    .club-checkout .section.checkout .club-banner-heading {
        font-size: 60px;
        line-height: 60px;
    }

    .language-ru-ru.club-checkout .section.checkout .club-banner-heading {
        font-size: 60px;
    }
}

/* ------------------------------------------------------------------ *
 * In-tunnel thank-you: centre the success title
 *
 * `confirmation.css` (loaded by the SPA confirmation container itself,
 * checkout_process.html.twig:95) already stacks the checkmark above the
 * text with `flex-direction: column; align-items: center` — that centres
 * the flex ITEM, not the text inside it, so a title that wraps to two
 * lines reads ragged-right against a centred checkmark.
 *
 * Scoped on the page rather than fixed in confirmation.css: that file
 * also dresses the thank-you of /club/, /gimnasios/ and the embed, and
 * the three-class selector outranks its two-class one regardless of
 * load order. Keep it at three classes if you ever rewrite it.
 * ------------------------------------------------------------------ */

.club-checkout .confirmation .title-purchase {
    text-align: center;
}