/* Start custom CSS for latepoint_book_form, class: .elementor-element-30fbff0 *//* =====================================================================
   Tokoro booking form (LatePoint). Colours, font and corner radius come
   from the site's Elementor global variables, so palette changes follow.
   ===================================================================== */

/* 1. FONT: Newsreader everywhere except LatePoint's icon glyphs.
   (Newsreader is already loaded by Elementor; no @import needed.) */
body .latepoint-w,
body .latepoint-w :where(div, span, p, a, button, label, input, select, textarea, h1, h2, h3, h4, h5):not([class*="latepoint-icon"]):not([class*="os-icon"]) {
    font-family: var(--font-serif), Georgia, serif !important;
}
body .latepoint-w {
    color: var(--c-text) !important;
}

/* 2. FULL WIDTH, NO CARD CHROME */
body .latepoint-w,
body .latepoint-w .latepoint-booking-form-element,
body .latepoint-w .latepoint-form-w,
body .latepoint-w .latepoint-step-content-w {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* The form and its footer sit on the section's cream background, not a white box */
body .latepoint-w .latepoint-form,
body .latepoint-w .latepoint-footer {
    background-color: transparent !important;
}
body .latepoint-w .latepoint-footer {
    border-top-color: var(--c-line) !important;
}

/* 3. HIDE THE STEP HEADING (the section title above already says it) */
body .latepoint-w .latepoint-step-heading-w,
body .latepoint-w .latepoint-step-heading,
body .latepoint-w .latepoint-heading-w {
    display: none !important;
}

/* 4. BUTTONS: match the site (gold primary, navy outline secondary) */
body .latepoint-w .latepoint-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: var(--radius) !important;
    letter-spacing: var(--ls-mid) !important;
    min-height: var(--touch) !important;
}
body .latepoint-w .latepoint-btn span,
body .latepoint-w .latepoint-btn i {
    line-height: 1 !important;
    margin: 0 !important;
}
body .latepoint-w .latepoint-btn.latepoint-btn-primary {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: var(--c-primary) !important;
}
body .latepoint-w .latepoint-btn.latepoint-btn-primary:hover {
    background-color: var(--c-accent-hover) !important;
    border-color: var(--c-accent-hover) !important;
}
body .latepoint-w .latepoint-btn.latepoint-btn-white {
    background-color: transparent !important;
    border: var(--bw) solid var(--c-primary) !important;
    color: var(--c-primary) !important;
}

/* Guest count: the serif digits sit high in their box, so nudge them onto the centre line */
/* (Elementor swaps the word "s-e-l-e-c-t-o-r" in custom CSS for the widget, so target the field by name) */
body .latepoint-w .latepoint-booking-form-element .latepoint-form-w .select-total-attendees-w input[name="booking[total_attendees]"][type="text"][tabindex] {
    box-sizing: border-box !important;
    height: 46px !important;
    line-height: 1 !important;
    padding: 10px 0 3px !important;
}

/* Next while nothing is chosen yet: muted gold with readable navy text */
body .latepoint-w .latepoint-btn.latepoint-btn-primary.disabled,
body .latepoint-w .latepoint-btn.latepoint-btn-primary:disabled {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: var(--c-primary) !important;
    opacity: 0.5 !important;
    outline: none !important;
    box-shadow: none !important;
}
body .latepoint-w .latepoint-btn.latepoint-btn-primary.disabled *,
body .latepoint-w .latepoint-btn.latepoint-btn-primary:disabled * {
    color: var(--c-primary) !important;
}

/* 5. CALENDAR: square day cells, number centred, availability bar at the bottom */
body .latepoint-w .os-monthly-calendar-days .os-day {
    min-height: 80px !important;
}
body .latepoint-w .os-monthly-calendar-days .os-day .os-day-box {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: var(--radius) !important;
}
body .latepoint-w .os-monthly-calendar-days .os-day .os-day-number {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    z-index: 2 !important;
}
body .latepoint-w .os-monthly-calendar-days .os-day .os-day-status {
    position: absolute !important;
    bottom: 5px !important;
    left: 0 !important;
    width: 100% !important;
}
body .latepoint-w .os-monthly-calendar-days .os-day .os-day-box .os-day-status .day-available {
    background-color: var(--c-accent) !important;
}

/* Weekday row: quiet caption labels, no grey band */
/* A line between the weekday names and the dates */
body .latepoint-w .os-weekdays {
    border-bottom: var(--bw) solid var(--c-line) !important;
    padding-bottom: var(--sp-2) !important;
    margin-bottom: var(--sp-2) !important;
}
body .latepoint-w .os-weekdays .weekday {
    background-color: transparent !important;
    color: var(--c-secondary) !important;
    font-size: var(--fs-caption) !important;
    letter-spacing: var(--ls-wide) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border: none !important;
}

/* Today (not selected): no block, the number in deep gold */
body .latepoint-w .os-monthly-calendar-days .os-day.os-today:not(.selected) .os-day-box {
    background-color: transparent !important;
}
body .latepoint-w .os-monthly-calendar-days .os-day.os-today:not(.selected) .os-day-box .os-day-number {
    background-color: transparent !important;
    color: var(--c-accent-deep) !important;
    box-shadow: none !important;
}

/* Hover on an available date: soft cream */
body .latepoint-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.selected):hover .os-day-box {
    background-color: var(--c-paper) !important;
}

/* Selected date: framed in navy on cream, not a solid block */
body .latepoint-w .os-monthly-calendar-days .os-day.selected .os-day-box {
    background-color: var(--c-paper) !important;
    box-shadow: inset 0 0 0 var(--bw-thick) var(--c-primary) !important;
}
body .latepoint-w .os-monthly-calendar-days .os-day.selected .os-day-number {
    background-color: transparent !important;
    color: var(--c-primary) !important;
    font-weight: 600 !important;
}

/* "Pick a slot for ..." label: navy, no underline */
body .latepoint-w .times-header .times-header-label,
body .latepoint-w .times-header .times-header-label span {
    color: var(--c-primary) !important;
    border: none !important;
    text-decoration: none !important;
}
body .latepoint-w .times-header .th-line {
    background-color: var(--c-line) !important;
    border-color: var(--c-line) !important;
}

/* 6. TIME SLOTS: gold with navy text, navy with white text when chosen */
body .latepoint-w .timeslots .dp-timebox {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 !important;
    border-radius: var(--radius) !important;
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
}
body .latepoint-w .timeslots .dp-timebox * {
    color: var(--c-primary) !important;
}
body .latepoint-w .timeslots .dp-timebox:hover {
    background-color: var(--c-accent-hover) !important;
    border-color: var(--c-accent-hover) !important;
}
body .latepoint-w .timeslots .dp-timebox.selected {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}
body .latepoint-w .timeslots .dp-timebox.selected * {
    color: var(--c-on-dark) !important;
}
body .latepoint-w .timeslots .dp-timebox .dp-label,
body .latepoint-w .timeslots .dp-timebox .dp-label-time {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    transform: none !important;
    text-align: center !important;
}
/* Hidden helper elements that pushed the time off-centre */
body .latepoint-w .timeslots .dp-timebox .dp-tick,
body .latepoint-w .timeslots .dp-timebox .dp-success-label {
    display: none !important;
}
/* Check mark on the chosen slot: navy circle, white tick, white ring */
body .latepoint-w .timeslots .dp-timebox.selected::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    padding: 0 !important;
    background-color: var(--c-primary) !important;
    color: var(--c-on-dark) !important;
    border: 2px solid var(--c-on-dark) !important;
}
/* No "spaces available" pop-up on hover */
body .latepoint-w .timeslots .dp-timebox .dp-capacity,
body .latepoint-w .timeslots .dp-timebox:hover .dp-capacity,
body .latepoint-w .timeslots .dp-timebox .dp-label-capacity {
    display: none !important;
}
/* Booked / unavailable slots are not shown */
body .latepoint-w .timeslots .dp-timebox.is-off {
    display: none !important;
}

/* 7. VALIDATION MESSAGES: kept visible (so guests know why they can't
   continue) but restyled quietly in the site palette instead of red. */
body .latepoint-w .latepoint-message-error,
body .latepoint-w .latepoint-message.latepoint-message-error,
body .latepoint-w .os-form-errors-w {
    background-color: var(--c-paper) !important;
    border: var(--bw) solid var(--c-line) !important;
    border-left: var(--bw-thick) solid var(--c-accent) !important;
    color: var(--c-text) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

/* 8. PHONE FIELD: country flags and dial code */
/* The CDN shrinks images wider than 1600px. The flag sprites are now served with no-transform (see .htaccess);
   the ?v=3 skips copies the CDN already cached. LatePoint keeps the sprites in a versioned folder (v29 in LatePoint 5.7):
   after a LatePoint update, check the folder name still matches or the flags will be offset. */
body .lp_iti__flag {
    background-image: url("/wp-content/plugins/latepoint/public/images/intl-tel-input/v29/flags.png?v=3") !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body .lp_iti__flag {
        background-image: url("/wp-content/plugins/latepoint/public/images/intl-tel-input/v29/flags@2x.png?v=3") !important;
    }
}
/* Country code area: white like the number field, so the whole field reads as one box */
body .latepoint-w .lp_iti__flag-container,
body .latepoint-w .lp_iti__selected-flag,
body .latepoint-w .lp_iti--separate-dial-code .lp_iti__selected-flag,
body .latepoint-w .lp_iti--allow-dropdown .lp_iti__flag-container:hover .lp_iti__selected-flag {
    background-color: var(--c-bg) !important;
}

/* 9. CHOICE LISTS (stadiums, seats, distances, routes): quiet cards in the site palette */
body .latepoint-w .os-item-i {
    background-color: var(--c-bg) !important;
    border: var(--bw) solid var(--c-line) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    padding: var(--sp-4) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
body .latepoint-w .os-item-i:hover {
    border-color: var(--c-accent) !important;
}
body .latepoint-w .os-item.selected .os-item-i,
body .latepoint-w .os-item-i.selected {
    border-color: var(--c-primary) !important;
    box-shadow: inset 0 0 0 var(--bw) var(--c-primary) !important;
}
body .latepoint-w .os-item-img-w {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: var(--radius) !important;
    background-size: cover !important;
}
body .latepoint-w .os-item-name {
    color: var(--c-text) !important;
    font-size: var(--fs-body) !important;
    font-weight: 500 !important;
    line-height: var(--lh-heading) !important;
}
body .latepoint-w .os-item-desc {
    color: var(--c-secondary) !important;
    font-size: var(--fs-small) !important;
    line-height: var(--lh-body) !important;
}
/* price on the right: small "From" caption above the amount */
body .latepoint-w .os-item-price-w {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
    gap: 2px !important;
}
body .latepoint-w .os-item-price {
    color: var(--c-primary) !important;
    font-size: var(--fs-lead-m) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
}
body .latepoint-w .os-item-price-label {
    color: var(--c-secondary) !important;
    font-size: var(--fs-caption) !important;
    letter-spacing: var(--ls-wide) !important;
    text-transform: uppercase !important;
}
/* pick-one options (seat types): no checkbox, the chosen card is outlined instead */
body .latepoint-w .os-allow-multiselect .os-item-i::before,
body .latepoint-w .os-allow-multiselect .os-item-i::after {
    display: none !important;
    content: none !important;
}/* End custom CSS */