/**
 * Cricova Booking Widget — fully theme-owned styling for the custom
 * booking wizard (assets/js/cricova-booking-widget.js). Matches the
 * site's real convention (excursie-single.css): 1px solid white borders
 * on black, gold accents, serif display headings, big bold white CTAs —
 * not grey/dark panels.
 */

/* .excursie-booking-col is a grid sibling of .excursie-image-col — grid
   rows stretch equal-height by default, so making this column a flex
   container and the wizard flex:1 lets the wizard's own border run the
   full height of the tour image next to it, not just its own content. */
.excursie-booking-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bookflow-wizard {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #fff;
    border: 1px solid var(--color-white, #fff);
    border-top: none;
    padding: 32px;
}

/* Progress indicator: a slim caption ("Step 2 of 6") over a thin filled
   track with dots — not a boxed step table. The step's own name is
   already shown large by .bookflow-step-heading below, so this only
   needs to communicate progress, which a thin line does far more calmly
   than six bordered cells competing for attention above the fold. */
.bookflow-wizard-stepper {
    border-bottom: 1px solid var(--color-white, #fff);
    margin: -32px -32px 15px;
    width: calc(100% + 64px);
    padding: 24px 32px 28px;
}
.bookflow-stepper-caption {
    display: block;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 18px;
}
.bookflow-stepper-track {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 10px;
}
.bookflow-stepper-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-white, #fff);
    transition: width 0.3s ease;
}
.bookflow-stepper-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.bookflow-stepper-dot.is-done {
    background: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
    cursor: pointer;
}
/* The visible dot is only 10-14px — nowhere near a reliable click target.
   This invisible pseudo-element gives it a real ~32px hit area (closer to
   the ~44px touch-target guideline) without changing how it looks. */
.bookflow-stepper-dot.is-done::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
}
.bookflow-stepper-dot.is-active {
    background: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
    width: 14px;
    height: 14px;
}

/* Step panels — the active one grows to fill the wizard's full height
   (which now matches the tour image next to it) and centers its content
   both ways, instead of sitting stuck at the top with empty space below. */
.bookflow-step {
    display: none;
}
.bookflow-step-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    text-align: center;
    animation: bookflow-fade-in 0.2s ease;
}
.bookflow-step-active > * {
    width: 100%;
}
@keyframes bookflow-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.bookflow-step.bookflow-error {
    animation: bookflow-shake 0.3s ease;
}
@keyframes bookflow-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.bookflow-step-heading {
    font-family: var(--font-display, 'Cormorant', Georgia, serif);
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-white, #fff);
    text-align: center;
    padding-bottom: 20px;
    margin: 0 0 28px;
}

/* Language step: centered, bigger button list */
#bookflow-lang-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
}
.bookflow-lang-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: 1px solid var(--color-white, #fff);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bookflow-lang-option:hover { border-color: var(--color-gold, #917236); }
.bookflow-lang-option.bookflow-selected {
    border-color: var(--color-gold, #917236);
    background: var(--color-gold, #917236);
    color: #000;
}

/* Calendar step — bleeds past the wizard's own 32px padding entirely (not
   just the header row) so the whole calendar reads as one edge-to-edge
   block matching the reference design, instead of floating inset inside
   the wizard's normal step gutter like every other step. */
#bookflow-step-day {
    margin: 0 -32px;
    width: calc(100% + 64px);
}
.bookflow-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 20px;
    border-bottom: 1px solid var(--color-white, #fff);
}
.bookflow-calendar-days {
    padding: 0 16px 16px;
}
.bookflow-cal-month {
    font-family: 'Cormorant', Georgia, serif;
    font-size: 20px;
    letter-spacing: 0.05em;
}
.bookflow-cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--color-white, #fff);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bookflow-cal-nav-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.bookflow-cal-nav-btn:hover {
    border-color: #ccc;
    background: #ccc;
    color: #000;
}
/* Weekday header — a single pill-outline box spanning all 7 labels,
   matching the reference design instead of bare floating text. */
.bookflow-calendar-weekdays {
    display: grid;
    /* minmax(0, 1fr), not 1fr: grid tracks default to a content-based
       min-width, so a cell narrower than its label/circle at some widths
       forces the track to grow past its 1fr share instead of shrinking —
       pushing later columns off-screen. minmax(0, 1fr) removes that
       floor. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: -1px 0px 16px;
    padding: 25px 6px;
    border: 1px solid var(--color-white, #fff);
    /* border-radius: 999px; */
}
.bookflow-weekday {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white, #fff);
}
.bookflow-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
/* Every day — available or not — gets the same circular outline; only fill
   (selected) and dimness (unavailable) tell them apart, matching the
   reference where the whole grid reads as one field of outlined circles
   instead of solid days floating next to unbordered dim numbers. */
.bookflow-day {
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 50%;
    border: 1px solid var(--color-white, #fff);
    cursor: pointer;
    color: #fff;
    background: transparent;
}
.bookflow-day-empty { visibility: hidden; border-color: transparent; }
.bookflow-day-unavailable {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.25);
    cursor: not-allowed;
}
.bookflow-day:not(.bookflow-day-unavailable):not(.bookflow-day-empty):hover {
    background: rgba(255, 255, 255, 0.1);
}
.bookflow-day-selected {
    background: var(--color-white, #fff) !important;
    border-color: var(--color-white, #fff) !important;
    color: #000 !important;
    font-weight: 700;
}
.bookflow-day-skeleton {
    background: #1a1a1a;
    animation: bookflow-pulse 1.5s ease-in-out infinite;
}
@keyframes bookflow-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
.bookflow-cal-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px 0;
    color: #888;
    font-size: 13px;
}

/* Resources (staff/guide) */
.bookflow-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.bookflow-resource {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--color-white, #fff);
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.bookflow-resource:hover { border-color: var(--color-gold, #917236); }
.bookflow-resource-selected { border-color: var(--color-gold, #917236); background: rgba(145, 114, 54, 0.15); }
.bookflow-resource-photo { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 6px; }
.bookflow-resource-name { font-weight: 700; }
.bookflow-resource-description, .bookflow-resource-detail, .bookflow-resource-rating {
    font-size: 12px;
    color: #999;
}

/* Time slots — vertical list, bigger */
.bookflow-slots-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}
.bookflow-slot-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: 1px solid var(--color-white, #fff);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bookflow-slot-option:hover:not(.bookflow-slot-full) { border-color: var(--color-gold, #917236); }
.bookflow-slot-selected {
    border-color: var(--color-gold, #917236);
    background: var(--color-gold, #917236);
    color: #000;
}
.bookflow-slot-selected .bookflow-slot-caption { color: rgba(0,0,0,0.6); }
.bookflow-slot-time-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bookflow-slot-clock { flex-shrink: 0; opacity: 0.6; }
.bookflow-slot-selected .bookflow-slot-clock { opacity: 0.7; }
.bookflow-slot-time { font-family: 'Cormorant', Georgia, serif; font-size: 20px; font-weight: 600; }
.bookflow-slot-caption { font-size: 12px; color: #999; }
/* Scarcity tiers — a plain "12 of 20 available" in the same grey as
   everything else gives no signal; colour communicates urgency the way
   real booking/travel UIs do, instead of every slot looking identical
   until you've read the numbers. */
.bookflow-slot-medium .bookflow-slot-caption { color: #d4a853; }
.bookflow-slot-low .bookflow-slot-caption { color: #e0785f; font-weight: 600; }
.bookflow-slot-selected.bookflow-slot-medium .bookflow-slot-caption,
.bookflow-slot-selected.bookflow-slot-low .bookflow-slot-caption { color: rgba(0,0,0,0.6); }
.bookflow-slot-full {
    opacity: 0.35;
    cursor: not-allowed;
}
.bookflow-no-slots { color: #888; padding: 20px 0; text-align: center; }

/* Persons stepper — the pill counter itself is .excursie-persons-stepper,
   already designed in excursie-single.css; this just stacks it above its
   own caption instead of the two floating side by side with no relationship
   between them. */
#bookflow-persons-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.bookflow-spots-caption {
    display: block;
    font-size: 14px;
    color: #888;
    transition: opacity 0.2s ease;
}
/* The wizard's own persons step gets a bigger stepper than the base
   .excursie-persons-stepper component (used elsewhere at its normal 44px
   size) — this step has nothing else competing for attention, so the
   control can carry more visual weight instead of looking small and
   cramped inside the wizard's wide card. */
#bookflow-persons-section .excursie-persons-stepper {
    height: 60px;
    min-width: 190px;
    border-width: 1.5px;
}
#bookflow-persons-section .excursie-stepper-btn {
    width: 60px;
    height: 60px;
}
#bookflow-persons-section .excursie-stepper-btn svg {
    width: 18px;
    height: 18px;
}
#bookflow-persons-section .excursie-persons-stepper input[type="number"] {
    height: 60px;
    width: 70px;
    min-width: 70px;
    font-size: 1.75rem;
}

/* Souvenir add-on — a distinct bordered card, not a bare row floating
   under the persons stepper with only a hairline for structure. Wider
   than the default 420px cap so it reads as a full-width companion to the
   larger stepper above it, not a narrower afterthought. */
.excursie-souvenir {
    border: 1px solid rgba(255, 255, 255, 0.25);
    max-width: 560px;
    width: 100%;
    margin: 40px auto 0;
    padding: 20px 25px;
}

/* Contact fields */
.bookflow-field {
    margin-bottom: 18px;
}
.bookflow-field input, .bookflow-field textarea {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid var(--color-white, #fff);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
}
.bookflow-field input:focus, .bookflow-field textarea:focus {
    outline: none;
    border-color: var(--color-gold, #917236);
}
.bookflow-field.field-invalid input { border-color: #c0392b; }
.bookflow-field-error {
    display: block;
    font-size: 12px;
    color: #e07b6b;
    margin-top: 4px;
}

/* Recap / confirm */
#bookflow-recap-list {
    margin-bottom: 24px;
}
.bookflow-recap-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 14px;
}
.bookflow-recap-label { color: #888; }

.bookflow-price-summary {
    border: 1px solid var(--color-white, #fff);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.bookflow-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}
.bookflow-summary-total {
    border-top: 1px solid var(--color-white, #fff);
    margin-top: 8px;
    padding-top: 14px;
    font-weight: 700;
    color: var(--color-gold, #917236);
    font-size: 16px;
}
.bookflow-hidden { display: none; }

/* Payment method — restyled as a bordered card matching
   .bookflow-price-summary right above it (same border/padding/margin),
   so the final decision reads as part of the same recap block instead of
   two floating radio labels with no visual relationship to the summary
   they belong to. Overrides excursie-single.css's legacy centered-pill
   version of these classes (this file loads after it). */
.excursie-payment {
    text-align: left;
    border: 1px solid var(--color-white, #fff);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.excursie-payment-title {
    font-family: 'Cormorant', Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 4px;
}
.excursie-radio-label {
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    color: #fff;
}
.excursie-radio-label + .excursie-radio-label {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.excursie-radio-mark {
    order: 2;
    border-color: rgba(255, 255, 255, 0.4);
}
.excursie-radio-label input:checked + .excursie-radio-mark {
    border-color: var(--color-gold, #917236);
}
.excursie-radio-label input:checked + .excursie-radio-mark::after {
    background: var(--color-gold, #917236);
}

/* Terms checkbox */
.bookflow-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #ccc;
}

/* Wizard nav (back / next / final submit) — matches .excursie-submit-btn:
   the site's real big white/black CTA style, bottom-right, bold serif. */
.bookflow-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}
/* Back shares the exact same box (padding/font/size) as Next/Continue —
   only the fill inverts (outline vs solid white) — instead of a smaller
   Manrope pill sitting next to a much larger Cormorant button, which read
   as two different components rather than one back/forward pair. */
#bookflow-wizard-back,
#bookflow-wizard-next, #bookflow-submit {
    padding: 20px 48px;
    font-family: 'Cormorant', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-white, #fff);
    transition: all 0.3s;
}
/* Same shrink breakpoint as .bookflow-wizard's own padding above — the
   desktop sizing (20px/48px padding, 3px letter-spacing) leaves these two
   buttons visually oversized against the rest of the compacted mobile
   layout. */
@media (max-width: 640px) {
    #bookflow-wizard-back,
    #bookflow-wizard-next, #bookflow-submit {
        padding: 14px 24px;
        font-size: 1rem;
        letter-spacing: 1.5px;
    }
}
#bookflow-wizard-back {
    background: transparent;
    color: #fff;
    /* Matches updateWizardNav()'s own logic for step 1 (idx===0 → hidden).
       Without a matching CSS default, the button renders visible-by-default
       for the brief window between first paint and the JS running its own
       init() — a "buttons flash on refresh, then vanish" bug on the very
       first step, which never has a back target. JS still fully controls
       visibility for every other step via the same inline style property,
       so this only affects that initial render. */
    visibility: hidden;
}
/* Mirrors AUTO_ADVANCE_STEPS in cricova-booking-widget.js — step 1
   ("language") is an auto-advance step with nothing answered yet on a
   fresh load, so Continue starts hidden for the same reason as above. */
#bookflow-wizard-next {
    display: none;
}
#bookflow-wizard-back:hover {
    border-color: var(--color-gold, #917236);
    background: var(--color-gold, #917236);
    color: #000;
}
#bookflow-wizard-next, #bookflow-submit {
    background: var(--color-white, #fff);
    color: #000;
}
#bookflow-wizard-next:hover:not(:disabled), #bookflow-submit:hover:not(:disabled) {
    background: var(--color-gold, #917236);
    color: #fff;
    border-color: var(--color-gold, #917236);
}
#bookflow-wizard-next:disabled, #bookflow-submit:disabled {
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    border-color: var(--color-white, #fff);
    cursor: not-allowed;
}
#bookflow-submit.is-loading { opacity: 0.85; cursor: wait; }
#bookflow-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* Same spinner used for the slots/resources loading states, scaled down to
   sit inline in a button — kept hidden until the button is actually
   submitting, so the widget has one consistent "in progress" visual
   instead of a bare opacity dim here and a full spinner everywhere else. */
#bookflow-submit .bookflow-spinner--small {
    display: none;
    width: 16px;
    height: 16px;
    border-width: 2px;
}
#bookflow-submit.is-loading .bookflow-spinner--small { display: inline-block; }

.bookflow-final-nav { justify-content: flex-end; }

/* Loading / toast */
.bookflow-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: #888;
}
.bookflow-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #333;
    border-top-color: var(--color-white, #fff);
    border-radius: 50%;
    animation: bookflow-spin 0.8s linear infinite;
}
@keyframes bookflow-spin { to { transform: rotate(360deg); } }

.bookflow-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0d0d0d;
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-left: 3px solid var(--color-gold, #917236);
    padding: 14px 20px;
    color: #fff;
    font-size: 13px;
    z-index: 100001;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.bookflow-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
    .bookflow-wizard { padding: 20px; }
    .bookflow-wizard-stepper { margin: -20px -20px 24px; width: calc(100% + 40px); }
    /* #bookflow-step-day's base rule bleeds -32px/+64px to cancel
       .bookflow-wizard's 32px padding above — must match the 20px padding
       set here, or it overshoots the wizard's own border by 12px a side. */
    #bookflow-step-day { margin: 0 -20px; width: calc(100% + 40px); }
}