/* ============================================================
   Tour checkout /book-tour/ -- 2026-11 redesign (presentation only).
   Template: woocommerce/checkout/form-checkout-steps.php (Alpine component
   kisstourCheckout). Loaded after kisstour-checkout.css on the checkout page
   only (kisstour_enqueue_checkout_assets in functions.php), so the rules
   below override the older two-column layout there.

   Nothing here hides a form field the server reads: controls replaced by chips
   (#departure-time, the private_tour checkbox, the radios) are kept in the DOM
   with .kt-sr (visually hidden, still submitted).
   ============================================================ */

/* ---- Minimal checkout chrome: hide the site header on this page only ----
   DOM contract (.claude/rules/dom-selector-contract.md): #brx-header is the
   stable Bricks header id the contract and site-header.css already target. It
   holds the orange promo bar and the main nav and nothing a booking needs; the
   template renders its own logo + WhatsApp help link in its place. Scoped to
   body.kt-tour-checkout, which functions.php adds on the checkout page itself
   and NOT on order-received / order-pay endpoints. Worst case if the id ever
   changes: the site header simply shows again. */
body.kt-tour-checkout #brx-header {
    display: none !important;
}

/* The /book-tour/ page section reserves 110px at the top for that fixed header
   (Bricks padding on the section that holds the form). With the header hidden
   that is an empty band, so drop it. #brxe-egssfz is the Bricks auto-id of that
   section on page 3032 -- the fallback hook the DOM contract allows when no
   kt-custom-* class exists; please add `kt-custom-book-tour-section` to it in
   Bricks so this can target the class instead. Fail-safe: if the id changes,
   the band simply comes back. Only padding is touched, nothing is hidden. */
/* #brx-content added: the site-wide `#brx-content section:first-child { padding-top: 110px }`
   has the same specificity as the old selector and loads later, so it won. */
body.kt-tour-checkout #brx-content #brxe-egssfz {
    padding-top: 0;
}

/* The site's floating WhatsApp button (Bricks icon #brxe-bohbfd, position:fixed
   bottom-right) sits over the right edge of the form on phones -- on top of the
   private-tour switch and the field ends. This page already carries a WhatsApp
   help link in its own header, so the floating copy is hidden here only. Leaf
   element (an icon), auto-id fallback per the DOM contract; please add
   `kt-custom-whatsapp-fab` to it in Bricks. Fail-safe: if the id changes the
   button simply shows again. */
body.kt-tour-checkout #brxe-bohbfd {
    display: none;
}

body.kt-tour-checkout #kt-ck {
    --kt-pink: #E4367E;
    --kt-pink-soft: #FDEBF3;
    --kt-pink-tint: #FFF7FA;
    --kt-ink: #0D0D0D;
    --kt-muted: #777777;
    --kt-line: #E6E6E6;
    --kt-teal: #0D6E66;
    --kt-wa: #1FA855;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--kt-ink);
}

body.kt-tour-checkout #kt-ck.kt-ck {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 190px;
}

body.kt-tour-checkout #kt-ck *,
body.kt-tour-checkout #kt-ck *::before,
body.kt-tour-checkout #kt-ck *::after {
    box-sizing: border-box;
}

/* Visually hidden but still in the form (and still read by screen readers). */
body.kt-tour-checkout #kt-ck .kt-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Header + progress ---- */
body.kt-tour-checkout #kt-ck .kt-ck-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #F2F2F2;
}

body.kt-tour-checkout #kt-ck .kt-ck-logo img {
    display: block;
    height: 30px;
    width: auto;
}

body.kt-tour-checkout #kt-ck .kt-ck-help {
    padding: 6px 0;
    margin: -6px 0;
    font-size: 13px;
    color: #666 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

body.kt-tour-checkout #kt-ck .kt-ck-help b {
    color: var(--kt-wa);
}

body.kt-tour-checkout #kt-ck .kt-ck-prog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #F2F2F2;
}

body.kt-tour-checkout #kt-ck .kt-ck-prog-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    margin: -6px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-ck-prog-step i {
    font-style: normal;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EEE;
    color: #888;
    display: grid;
    place-items: center;
    font-size: 11px;
}

body.kt-tour-checkout #kt-ck .kt-ck-prog-step.on {
    color: var(--kt-ink);
}

body.kt-tour-checkout #kt-ck .kt-ck-prog-step.on i {
    background: var(--kt-pink);
    color: #fff;
}

body.kt-tour-checkout #kt-ck .kt-ck-prog-line {
    flex: 1;
    height: 2px;
    background: #EEE;
    border-radius: 2px;
}

/* ---- Layout: one column; the old 350px summary sidebar is now the bottom bar ---- */
body.kt-tour-checkout #kt-ck .kisstour-checkout-content {
    display: block;
}

body.kt-tour-checkout #kt-ck .kisstour-step-content {
    padding: 14px 16px 18px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

body.kt-tour-checkout #kt-ck .kisstour-step-content.active {
    display: grid;
    gap: 18px;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group {
    margin-bottom: 0;
}

body.kt-tour-checkout #kt-ck .kt-sec {
    display: grid;
    gap: 8px;
}

body.kt-tour-checkout #kt-ck .kt-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
}

body.kt-tour-checkout #kt-ck .kt-opt {
    font-size: 12px;
    font-weight: 500;
    color: #999;
}

body.kt-tour-checkout #kt-ck .kt-lb {
    display: block;
    margin: 4px 0 -2px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

body.kt-tour-checkout #kt-ck .kt-hint {
    margin: 0;
    font-size: 12.5px;
    color: #888;
}

body.kt-tour-checkout #kt-ck .kt-err {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #C62828;
}

body.kt-tour-checkout #kt-ck .kt-lnk {
    display: inline-block;
    min-width: 24px;
    padding: 4px 0;
    margin: -4px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--kt-pink);
    text-decoration: underline;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-in,
body.kt-tour-checkout #kt-ck .kisstour-select,
body.kt-tour-checkout #kt-ck .country-code-select select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: #fff;
    color: var(--kt-ink);
    font: inherit;
    font-size: 16px; /* 16px stops iOS zooming into the field */
}

body.kt-tour-checkout #kt-ck .kt-in:focus,
body.kt-tour-checkout #kt-ck .kisstour-select:focus {
    outline: 2px solid var(--kt-pink);
    border-color: transparent;
}

body.kt-tour-checkout #kt-ck textarea.kt-in {
    min-height: 84px;
    resize: vertical;
    font-size: 15px;
}

/* ---- Tour card ---- */
body.kt-tour-checkout #kt-ck .kisstour-tour-card.kt-tour {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #EEE;
    border-radius: 12px;
    overflow: visible;
}

body.kt-tour-checkout #kt-ck .kt-tour .tour-card-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #F3E3EA;
}

body.kt-tour-checkout #kt-ck .kt-tour .tour-card-image img,
body.kt-tour-checkout #kt-ck .kt-ck-logo img {
    /* a missing image shows an empty tile, not its alt text spilling out */
    color: transparent;
    font-size: 0;
}

body.kt-tour-checkout #kt-ck .kt-tour .tour-card-info {
    padding: 0;
    min-width: 0;
}

body.kt-tour-checkout #kt-ck .kt-tour .tour-card-info h3 {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--kt-ink);
}

body.kt-tour-checkout #kt-ck .kt-tour-meta,
body.kt-tour-checkout #kt-ck .kt-tour-price {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--kt-muted);
}

body.kt-tour-checkout #kt-ck .kt-tour-price .price,
body.kt-tour-checkout #kt-ck .kt-tour-price .price * {
    color: var(--kt-pink);
    font-weight: 700;
}

body.kt-tour-checkout #kt-ck .tour-private-badge {
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #9D174D;
}

body.kt-tour-checkout #kt-ck .kt-tour-picker {
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #EEE;
    border-radius: 12px;
    background: #FAFAFA;
}

body.kt-tour-checkout #kt-ck .kt-tour-picker label {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

/* ---- Chips (date, time, notes, referral) ---- */
body.kt-tour-checkout #kt-ck .kt-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.kt-tour-checkout #kt-ck .kt-chips::-webkit-scrollbar {
    display: none;
}

body.kt-tour-checkout #kt-ck .kt-chips.kt-wrap {
    flex-wrap: wrap;
    overflow: visible;
}

body.kt-tour-checkout #kt-ck .kt-chip {
    flex: none;
    position: relative;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #DDD;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-chip small {
    display: block;
    font-size: 11px;
    color: #888;
}

body.kt-tour-checkout #kt-ck .kt-chip-big {
    min-width: 60px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
}

body.kt-tour-checkout #kt-ck .kt-chip.on {
    border-color: var(--kt-pink);
    background: var(--kt-pink-soft);
    color: var(--kt-pink);
    font-weight: 600;
}

body.kt-tour-checkout #kt-ck .kt-chip.on small {
    color: var(--kt-pink);
}

body.kt-tour-checkout #kt-ck .kt-chip[disabled] {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* "More dates": the real #departure-day field (or the native input flatpickr
   swaps in on phones, .flatpickr-mobile) lies transparent over the chip, so a
   tap opens the calendar without any extra JS. */
body.kt-tour-checkout #kt-ck .kt-more-dates {
    overflow: hidden;
}

body.kt-tour-checkout #kt-ck .kt-more-dates input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}

body.kt-tour-checkout #kt-ck .kt-cutoff-note {
    margin: 0;
    font-size: 12px;
    color: #E95A95;
}

/* ---- Guests ---- */
body.kt-tour-checkout #kt-ck .kt-gsum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: #fff;
    color: var(--kt-ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-gbox.summary-participants {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 2px 12px;
    border: 1px solid #EEE;
    border-radius: 10px;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F3F3F3;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-row:last-child {
    border-bottom: 0;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-label {
    font-size: 14px;
    font-weight: 600;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity {
    margin: 0;
    gap: 8px;
}

body.kt-tour-checkout #kt-ck .kt-gbox .quantity-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid #DDD;
    background: #fff;
    color: var(--kt-pink);
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity input {
    width: 32px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    -moz-appearance: textfield;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity input::-webkit-outer-spin-button,
body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- Private tour ---- */
body.kt-tour-checkout #kt-ck .kt-private-included {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #FBCFE8;
    border-radius: 8px;
    background: #FDF2F8;
    color: #9D174D;
    font-size: 13.5px;
    font-weight: 600;
}

body.kt-tour-checkout #kt-ck .kt-priv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding-top: 6px;
    font-weight: 400;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-priv-row b {
    display: block;
    font-size: 14px;
}

body.kt-tour-checkout #kt-ck .kt-priv-row small {
    display: block;
    font-size: 12.5px;
    color: #888;
}

body.kt-tour-checkout #kt-ck .kt-sw {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #DDD;
    transition: background .15s;
}

body.kt-tour-checkout #kt-ck .kt-sw i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s;
}

body.kt-tour-checkout #kt-ck .kt-sw.on {
    background: var(--kt-pink);
}

body.kt-tour-checkout #kt-ck .kt-sw.on i {
    left: 21px;
}

body.kt-tour-checkout #kt-ck .kt-priv input:focus-visible + .kt-priv-row .kt-sw {
    outline: 2px solid var(--kt-pink);
    outline-offset: 2px;
}

body.kt-tour-checkout #kt-ck .private-tour-text {
    margin-top: 6px;
    font-size: 12.5px;
    color: #666;
}

body.kt-tour-checkout #kt-ck .kt-more-info {
    font-size: 12.5px;
    color: #666;
}

body.kt-tour-checkout #kt-ck .kt-more-info summary {
    cursor: pointer;
    color: var(--kt-pink);
    font-weight: 600;
}

body.kt-tour-checkout #kt-ck .kt-more-info p,
body.kt-tour-checkout #kt-ck .kt-more-info div {
    margin: 6px 0 0;
}

/* ---- Step 2: phone, segmented controls ---- */
body.kt-tour-checkout #kt-ck .kisstour-phone-wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
}

body.kt-tour-checkout #kt-ck .customer-phone .kisstour-phone-wrapper .country-code-select {
    width: auto;
    min-width: 0;
    max-width: 150px;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group.customer-name,
body.kt-tour-checkout #kt-ck .kisstour-form-group.customer-email,
body.kt-tour-checkout #kt-ck .kisstour-form-group.customer-phone,
body.kt-tour-checkout #kt-ck .kisstour-form-group.contact-preference {
    display: grid;
    gap: 6px;
}

body.kt-tour-checkout #kt-ck .kt-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: #F2F2F2;
}

body.kt-tour-checkout #kt-ck .kt-seg.kt-seg-3 {
    grid-template-columns: repeat(3, 1fr);
}

body.kt-tour-checkout #kt-ck .kt-seg-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 4px;
    border-radius: 8px;
    background: transparent;
    color: #777;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-seg-btn.on {
    background: #fff;
    color: var(--kt-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

body.kt-tour-checkout #kt-ck .kt-seg-btn:focus-within {
    outline: 2px solid var(--kt-pink);
    outline-offset: 1px;
}

/* ---- Payment: restyle whatever WooCommerce renders as radio cards ---- */
body.kt-tour-checkout #kt-ck .kt-pay #payment,
body.kt-tour-checkout #kt-ck .kt-pay .woocommerce-checkout-payment {
    background: none;
    border-radius: 0;
    padding: 0;
}

body.kt-tour-checkout #kt-ck .kt-pay ul.wc_payment_methods {
    display: grid;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    border: 0;
}

body.kt-tour-checkout #kt-ck .kt-pay li.wc_payment_method {
    margin: 0;
    padding: 10px 12px;
    border: 1.5px solid #E6E6E6;
    border-radius: 12px;
    background: #fff;
    list-style: none;
}

body.kt-tour-checkout #kt-ck .kt-pay li.wc_payment_method.pm-active {
    border-color: var(--kt-pink);
    background: var(--kt-pink-tint);
}

body.kt-tour-checkout #kt-ck .kt-pay li.wc_payment_method input.input-radio {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--kt-pink);
    flex: none;
}

body.kt-tour-checkout #kt-ck .kt-pay li.wc_payment_method label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-ink);
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-pay li.wc_payment_method.pm-active label {
    color: var(--kt-ink);
}

body.kt-tour-checkout #kt-ck .kt-pay .payment-method-icon {
    color: #888;
    display: inline-flex;
}

body.kt-tour-checkout #kt-ck .kt-pay .payment_box {
    margin: 6px 0 0 28px;
    padding: 0;
    background: none;
    font-size: 12.5px;
    color: #777;
}

body.kt-tour-checkout #kt-ck .kt-pay .payment_box p {
    margin: 0;
}

body.kt-tour-checkout #kt-ck .kt-pay .place-order {
    margin: 0;
    padding: 0;
}

/* ---- Bottom bar (was the Booking Summary sidebar) ---- */
body.kt-tour-checkout #kt-ck .kisstour-checkout-summary.kt-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 0;
    border-top: 1px solid #EEE;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .25);
}

body.kt-tour-checkout #kt-ck .kt-foot-inner {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px calc(10px + env(safe-area-inset-bottom, 0px));
}

body.kt-tour-checkout #kt-ck .kt-foot .notice {
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 13px;
}

body.kt-tour-checkout #kt-ck .kt-sheet {
    max-height: 40vh;
    overflow: auto;
    padding: 6px 0;
    border-bottom: 1px solid #EEE;
}

body.kt-tour-checkout #kt-ck .kt-sl {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #F3F3F3;
    font-size: 13.5px;
}

body.kt-tour-checkout #kt-ck .kt-sl:last-child {
    border-bottom: 0;
}

body.kt-tour-checkout #kt-ck .kt-sl b {
    display: block;
}

body.kt-tour-checkout #kt-ck .kt-sl div > span {
    font-size: 12.5px;
    color: #777;
}

body.kt-tour-checkout #kt-ck .kt-sl > span {
    white-space: nowrap;
}

body.kt-tour-checkout #kt-ck .kt-sl.kt-sl-total {
    font-weight: 700;
}

body.kt-tour-checkout #kt-ck .kt-foot-trust {
    margin: 0;
    padding: 8px 0 0;
    font-size: 12px;
    color: var(--kt-teal);
    text-align: center;
}

body.kt-tour-checkout #kt-ck .kt-foot-bar.kisstour-continue-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding-top: 6px;
}

body.kt-tour-checkout #kt-ck .kt-tot {
    padding: 0;
    border: 0;
    background: none;
    color: var(--kt-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-tot span {
    display: block;
    font-size: 12px;
    color: #888;
}

body.kt-tour-checkout #kt-ck .kt-tot u {
    color: var(--kt-pink);
}

body.kt-tour-checkout #kt-ck .kt-tot b {
    font-size: 19px;
}

/* All booking CTAs: brand pink. */
body.kt-tour-checkout #kt-ck .kt-cta,
body.kt-tour-checkout #kt-ck .kisstour-continue-btn.kt-cta,
body.kt-tour-checkout #kt-ck .kisstour-submit-btn.kt-cta {
    width: auto;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--kt-pink);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

body.kt-tour-checkout #kt-ck .kt-cta:hover,
body.kt-tour-checkout #kt-ck .kisstour-continue-btn.kt-cta:hover,
body.kt-tour-checkout #kt-ck .kisstour-submit-btn.kt-cta:hover {
    background: #C92D68;
}

body.kt-tour-checkout #kt-ck .kt-cta[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- Neutralise the /book-tour/ page's own Bricks CSS ----
   The Bricks shortcode element that hosts this form (#brxe-axfobw) carries
   custom CSS written for the OLD two-column layout (pink tour card, grey
   summary box, pink pill on every button in .kisstour-continue-buttons plus an
   ::after arrow, 18px labels, a one-box phone field...). That CSS lives in the
   database and is printed AFTER this file with an id selector, so every rule
   above is scoped to `body.kt-tour-checkout #kt-ck` (our own id on the form
   wrapper): one id + one class + one element beats `#brxe-axfobw .x` without
   !important. The rules below reset the properties that CSS sets and the rules
   above do not. Measured on staging 2026-11-07 (iPhone 13 + 1280px). */
body.kt-tour-checkout #kt-ck .kisstour-checkout-form-container,
body.kt-tour-checkout #kt-ck .kisstour-checkout-content .kisstour-checkout-form-container {
    width: 100%;
}

body.kt-tour-checkout #kt-ck .kisstour-checkout-content .kisstour-checkout-form-container .kisstour-step-content {
    padding: 14px 16px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.kt-tour-checkout #kt-ck .kisstour-checkout-content .kisstour-checkout-form-container .kisstour-step-content.active {
    display: grid;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group label {
    font-size: inherit;
    line-height: 1.35;
}

/* Tour card: thumbnail row, not the old full-width photo */
body.kt-tour-checkout #kt-ck .kisstour-tour-card.kt-tour .tour-card-image {
    width: 56px;
    max-width: 56px;
    height: 56px;
    margin: 0;
}

body.kt-tour-checkout #kt-ck .kisstour-tour-card.kt-tour .tour-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.kt-tour-checkout #kt-ck .kisstour-tour-card.kt-tour .tour-card-info {
    width: auto;
    padding: 0;
}

body.kt-tour-checkout #kt-ck .kisstour-tour-card.kt-tour .tour-card-info .tour-name {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--kt-ink);
}

/* Bottom bar: no grey box, no fixed 34% width */
body.kt-tour-checkout #kt-ck .kisstour-checkout-content .kisstour-checkout-summary.kt-foot {
    width: auto;
    padding: 0;
    border-radius: 0;
    background: #fff;
}

/* Every button in .kisstour-continue-buttons got a pink pill + an ::after arrow */
body.kt-tour-checkout #kt-ck .kisstour-continue-buttons button::after {
    content: none;
    display: none;
}

body.kt-tour-checkout #kt-ck .kisstour-continue-buttons button.kt-tot {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--kt-ink);
    font-size: inherit;
    font-weight: 400;
    line-height: 1.3;
}

body.kt-tour-checkout #kt-ck .kisstour-continue-buttons button.kt-cta {
    padding: 12px 22px;
    border-radius: 999px;
    background-color: var(--kt-pink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

body.kt-tour-checkout #kt-ck .kisstour-continue-buttons button.kt-cta:hover {
    background-color: #C92D68;
}

/* Guests box: the old summary-participants grid (137px / 61px columns) */
body.kt-tour-checkout #kt-ck .summary-participants .participant-row .participant-info {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 0;
}

body.kt-tour-checkout #kt-ck .summary-participants .participant-label,
body.kt-tour-checkout #kt-ck .summary-participants .participant-age {
    width: auto;
}

body.kt-tour-checkout #kt-ck .summary-participants .participant-quantity {
    width: auto;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity .quantity-btn,
body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity .quantity-btn.minus,
body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity .quantity-btn.plus {
    width: 32px;
    height: 32px;
    border: 1.5px solid #DDD;
    background-color: #fff;
    color: var(--kt-pink);
    line-height: 1;
}

body.kt-tour-checkout #kt-ck .kt-gbox .participant-quantity input {
    width: 32px;
    font-size: 15px;
}

/* Private row: the old checkbox layout padded the group and the label */
body.kt-tour-checkout #kt-ck .kisstour-form-group.private-tour {
    padding: 0;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group.private-tour label.kt-priv-row {
    display: grid;
    padding: 0;
    padding-top: 6px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--kt-ink);
}

body.kt-tour-checkout #kt-ck .kisstour-form-group.private-tour .private-tour-text {
    display: block; /* x-show hides it inline; the page CSS hid it unless .visible */
    font-style: normal;
}

/* Contact fields: the page CSS made the phone one bordered box with icon
   pseudo-elements and fixed widths; email/phone were half width on desktop. */
body.kt-tour-checkout #kt-ck .kisstour-form-group.customer-email,
body.kt-tour-checkout #kt-ck .kisstour-form-group.customer-phone {
    width: 100%;
}

body.kt-tour-checkout #kt-ck .customer-phone .kisstour-phone-wrapper {
    border: 0;
    border-radius: 0;
    gap: 6px;
}

body.kt-tour-checkout #kt-ck .customer-phone .kisstour-phone-wrapper .country-code-select {
    width: auto;
    padding: 0;
}

body.kt-tour-checkout #kt-ck .customer-phone .kisstour-phone-wrapper .country-code-select::before,
body.kt-tour-checkout #kt-ck .customer-phone .kisstour-phone-wrapper .country-code-select::after {
    content: none;
    display: none;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group.customer-phone .kisstour-phone-wrapper input#customer-phone {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group input.kt-in:not([type="checkbox"]):not([type="radio"]),
body.kt-tour-checkout #kt-ck .kisstour-form-group textarea.kt-in {
    padding: 11px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: normal;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group input.kt-in::placeholder,
body.kt-tour-checkout #kt-ck .kisstour-form-group textarea.kt-in::placeholder {
    color: #9A9A9A;
}

/* Pickup: .radio-group was a column flex and every label inline-flex with padding */
body.kt-tour-checkout #kt-ck .pickup-point .kt-seg.radio-group {
    display: grid;
    flex-direction: initial;
    gap: 4px;
}

body.kt-tour-checkout #kt-ck .pickup-point label.kt-seg-btn,
body.kt-tour-checkout #kt-ck .kisstour-form-group label.kt-seg-btn {
    display: flex;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #777;
}

body.kt-tour-checkout #kt-ck .kisstour-form-group label.kt-seg-btn.on {
    color: var(--kt-ink);
}

/* Old summary-total rule (border/padding) inside the Details sheet */
body.kt-tour-checkout #kt-ck .kt-sheet .summary-total {
    margin: 0;
    padding: 6px 0;
    border-top: 0;
}

body.kt-tour-checkout #kt-ck .kt-sheet .summary-total .total-label,
body.kt-tour-checkout #kt-ck .kt-sheet .summary-total .total-price {
    font-size: 14px;
    line-height: 1.4;
}

/* WooCommerce privacy-policy line under the payment methods: small print, not body copy */
body.kt-tour-checkout #kt-ck .kt-pay .woocommerce-privacy-policy-text,
body.kt-tour-checkout #kt-ck .kt-pay .woocommerce-privacy-policy-text p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #888;
}

body.kt-tour-checkout #kt-ck .kt-pay .woocommerce-privacy-policy-text a {
    padding: 5px 0;
}

/* Desktop: keep the one centred column (the page CSS split it 66/34). */
@media (min-width: 992px) {
    body.kt-tour-checkout #kt-ck .kisstour-checkout-content .kisstour-checkout-summary.kt-foot {
        width: auto;
    }
}

/* ---- Moved verbatim from the inline <style> that closed the template ---- */
.kt-phone-preview {
    margin: 6px 0 0;
    font-size: 12px;
    color: #555;
}

.kt-phone-warn {
    margin: 6px 0 0;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: #fff6e0;
    color: #7a5200;
}

.kt-phone-warn.is-hard {
    background: #f8d7da;
    color: #721c24;
}

.error-field {
    border-color: #f44336 !important;
    box-shadow: 0 0 0 1px #f44336 !important;
    animation: pulse-error 1.5s;
}

@keyframes pulse-error {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

.woocommerce-error {
    padding: 12px 15px;
    margin-bottom: 20px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-weight: 500;
}

.notice {
    padding: 10px 15px;
    margin: 10px 0;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    display: none;
}

/* One-tap add-on booking (inc/booking-prefill.php): "Details from your
   booking #N · Not you? Clear" under the progress bar, and the small
   "Suggested" / "Same pickup" lines. Printed only with a valid ?kt_ref=. */
body.kt-tour-checkout #kt-ck .kt-prefill-note {
  margin: 10px 16px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #e2f1ee;
  color: #0d6e66;
  font-size: 13px;
  line-height: 1.45;
}
body.kt-tour-checkout #kt-ck .kt-prefill-note a {
  color: #0d6e66;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
body.kt-tour-checkout #kt-ck .kt-prefill-hint {
  color: #0d6e66;
}

/* WooCommerce's "<tour> is ready for booking!" success notice is injected by
   update_order_review into a notice group outside the form, so on desktop it
   floats as red text at the top-left of the page (found 2026-11-08). The form
   already shows the tour; hide only that success message -- errors use
   .woocommerce-error and stay visible. */
body.kt-tour-checkout .woocommerce-NoticeGroup-updateOrderReview .woocommerce-message {
  display: none;
}

/* WhatsApp button inside the sticky bar, between the total and the CTA (owner
   2026-11-08): always on screen, never over the form. */
body.kt-tour-checkout #kt-ck .kt-foot-wa {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: 50%;
    background: #25D366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
body.kt-tour-checkout #kt-ck .kt-foot-wa:hover { background: #1fb457; }

/* Desktop (owner report 2026-11-08): the fixed full-width bar sat at the bottom
   of a tall window, far below a short form, so guests did not see the Continue
   button. From 992px the bar is sticky inside the form column instead: right
   under the form when the form is short, pinned to the bottom while a long step
   scrolls -- the same behaviour as the Fast Track form (#ktf-bar). Mobile keeps
   the fixed bar, and the 190px reserve it needs. */
@media (min-width: 992px) {
    body.kt-tour-checkout #kt-ck.kt-ck { padding-bottom: 48px; }
    body.kt-tour-checkout #kt-ck .kisstour-checkout-content .kisstour-checkout-summary.kt-foot {
        position: sticky;
        left: auto;
        right: auto;
        bottom: 0;
        margin-top: 20px;
        border: 1px solid #EEE;
        border-radius: 14px;
    }
}

html:has(body.kt-tour-checkout) {
    scroll-padding-bottom: calc(87px + 16px + env(safe-area-inset-bottom, 0px));
}

/* DECISION: #brxe-nqawqe is hidden by its Bricks auto-id, not a kt-custom-* class, because the element has no kt-custom-* class yet (the DOM contract fallback; the same as #brxe-bohbfd above). */
body.kt-tour-checkout #brxe-nqawqe {
    display: none;
}

body.kt-tour-checkout #kt-ck textarea {
    scroll-margin-bottom: 56px;
}

/* "More dates" calendar on phones (2026-11-08): flatpickr anchors the
   calendar to the More-dates chip at the right end of the row, so on a
   390px screen the Saturday column was cut off and the page grew wider.
   Centre it in the viewport instead (308px calendar). */
@media (max-width: 600px) {
  body.kt-tour-checkout .flatpickr-calendar.open { left: calc(50% - 154px) !important; right: auto !important; }
  body.kt-tour-checkout .flatpickr-calendar.open:before,
  body.kt-tour-checkout .flatpickr-calendar.open:after { display: none; }
}

/* Tour dropdown: the page's Bricks CSS draws a 24px motorbike icon at left:16px
   inside .tour-selection .kisstour-select-wrapper; keep the tour name clear of it. */
body.kt-tour-checkout #kt-ck .tour-selection .kisstour-select { padding-left: 50px; }

/* Narrow phones (iPhone SE, 320-374px; owner 2026-11-08): "Reserve — pay later"
   squeezed the total until "US $118" broke over two lines. Keep the total on
   one line and give the bar a little less padding and a smaller WhatsApp dot. */
@media (max-width: 374px) {
    body.kt-tour-checkout #kt-ck .kt-foot-bar.kisstour-continue-buttons { gap: 8px; }
    body.kt-tour-checkout #kt-ck .kt-tot { flex: 0 0 auto; }
    body.kt-tour-checkout #kt-ck .kt-tot b { font-size: 17px; white-space: nowrap; }
    body.kt-tour-checkout #kt-ck .kt-foot-wa { flex-basis: 40px; width: 40px; height: 40px; }
    body.kt-tour-checkout #kt-ck .kt-cta,
    body.kt-tour-checkout #kt-ck .kisstour-continue-buttons button.kt-cta { padding: 11px 14px; font-size: 14px; }
}
/* 320px (iPhone SE 1st gen / SE in zoomed mode): total + WhatsApp dot +
   "Reserve — pay later" need ~300px of a 288px bar, so the CTA ran to the edge.
   Drop the dot there: the header's "Need help? WhatsApp" link stays on screen. */
@media (max-width: 359px) {
    body.kt-tour-checkout #kt-ck .kt-foot-wa { display: none; }
    body.kt-tour-checkout #kt-ck .kt-foot-bar .kisstour-submit-btn.kt-cta,
    body.kt-tour-checkout #kt-ck .kt-foot-bar .kisstour-continue-btn.kt-cta { margin-left: auto; }
}

/* Inline calendar replaces the day-chip row (owner + Nia 2026-11-08). The input
   stays in the form (name departure_day) but is hidden; flatpickr draws the
   month right after it. */
body.kt-tour-checkout #kt-ck .kt-cal { margin-top: 4px; }
body.kt-tour-checkout #kt-ck .kt-cal > input#departure-day {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none;
}
body.kt-tour-checkout .kt-cal .flatpickr-calendar.inline,
body.kt-tour-checkout .kt-cal .flatpickr-calendar.inline.open {
    position: relative !important; left: auto !important; right: auto !important; top: 0 !important;
    margin: 0 auto; box-shadow: none; border: 1px solid #EEE; border-radius: 14px;
}
body.kt-tour-checkout .kt-cal .flatpickr-calendar.inline:before,
body.kt-tour-checkout .kt-cal .flatpickr-calendar.inline:after { display: none; }
body.kt-tour-checkout .kt-cal .flatpickr-day.selected,
body.kt-tour-checkout .kt-cal .flatpickr-day.selected:hover {
    background: #E4367E; border-color: #E4367E; color: #fff;
}
body.kt-tour-checkout .kt-cal .flatpickr-day.today:not(.selected) { border-color: #F3B6CF; }
body.kt-tour-checkout .kt-cal .flatpickr-day.flatpickr-disabled { color: #CFCFCF; }
/* The inline calendar is 308px wide by default; on a 320px phone with the page
   gutter that ran 4px past the screen. Let it fill its column instead. */
body.kt-tour-checkout .kt-cal .flatpickr-calendar.inline { width: 100% !important; max-width: 380px; }
body.kt-tour-checkout .kt-cal .flatpickr-rContainer,
body.kt-tour-checkout .kt-cal .flatpickr-days,
body.kt-tour-checkout .kt-cal .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
body.kt-tour-checkout .kt-cal .flatpickr-day { max-width: none !important; flex-basis: 14.2857% !important; }
/* Month + year header of the inline calendar: the checkout's generic input/field
   styles (white box, border, 100% width) hid "November 2026" behind an empty
   box (owner screenshot 2026-11-09). Give it plain text styling back. */
body.kt-tour-checkout .kt-cal .flatpickr-months { position: relative; height: 40px; }
body.kt-tour-checkout .kt-cal .flatpickr-current-month {
    left: 0 !important; width: 100% !important; padding-top: 8px; font-size: 16px; font-weight: 700;
    color: var(--kt-ink, #222); display: flex; justify-content: center; align-items: center; gap: 6px;
}
body.kt-tour-checkout .kt-cal .flatpickr-current-month .cur-month { color: inherit; font-weight: 700; margin: 0; }
body.kt-tour-checkout .kt-cal .flatpickr-current-month .numInputWrapper { width: 4.2ch !important; display: inline-block; }
body.kt-tour-checkout .kt-cal .flatpickr-current-month input.cur-year {
    width: 100% !important; height: auto !important; padding: 0 !important; border: 0 !important;
    background: transparent !important; color: inherit !important; font: inherit !important; box-shadow: none !important;
    pointer-events: none;
}
body.kt-tour-checkout .kt-cal .flatpickr-current-month .numInputWrapper span { display: none; }
body.kt-tour-checkout .kt-cal .flatpickr-prev-month,
body.kt-tour-checkout .kt-cal .flatpickr-next-month { top: 4px; }
/* Folded calendar: one line with the picked day and "Change". */
body.kt-tour-checkout #kt-ck .kt-date-sum {
    display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 12px 14px;
    border: 1px solid #E4367E; border-radius: 12px; background: #FDF2F7; color: var(--kt-ink, #222);
    font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
body.kt-tour-checkout #kt-ck .kt-date-sum .kt-lnk { margin-left: auto; color: #E4367E; text-decoration: underline; font-weight: 600; }

/* Phones/tablets: hide the fixed bottom bar while a text field has focus
   (keyboard open). iOS mishandles position:fixed with the keyboard up and the
   page would not scroll until the keyboard was closed (owner 2026-11-09). */
@media (max-width: 991px) {
    body.kt-tour-checkout #kt-ck.kt-typing .kisstour-checkout-summary.kt-foot { display: none; }
}