/*
 * MarSea Booking Experience v1.8.0
 * Visual layer only. Gravity Forms and its add-ons remain the source of truth.
 */

.mst-booking-experience-page {
    --mst-ink: #112337;
    --mst-text: #111820;
    --mst-muted: #4f6072;
    --mst-line: #cadbe6;
    --mst-soft: #f4f8fb;
    --mst-soft-2: #eaf2f7;
    --mst-accent: #245f82;
    --mst-accent-dark: #112337;
    --mst-white: #ffffff;
    --mst-radius: 18px;
    --mst-shadow: 0 18px 55px rgba(17, 35, 55, 0.08);
}

.mst-booking-experience-page #gform_wrapper_10 {
    max-width: 1320px;
    margin-inline: auto;
}

.mst-booking-experience-page #gform_10.mst-booking-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    column-gap: 32px;
    align-items: start;
}

.mst-booking-experience-page #gform_10 > .gform-body {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}

.mst-booking-experience-page #gform_10 > .gform-footer {
    grid-column: 1;
    grid-row: 2;
    margin-top: 28px;
}

.mst-booking-experience-page #gform_10 .gform_fields {
    row-gap: 26px;
}

/* Section headings */
.mst-booking-experience-page .mst-section-heading {
    grid-column: 1 / -1 !important;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border-top: 1px solid var(--mst-line);
    padding-top: 34px;
    margin-top: 12px;
}

.mst-booking-experience-page .mst-section-heading:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.mst-booking-experience-page .mst-section-number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    background: var(--mst-ink);
    color: var(--mst-white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.mst-booking-experience-page .mst-section-heading h2 {
    margin: -2px 0 4px;
    color: var(--mst-ink);
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: 1.12;
}

.mst-booking-experience-page .mst-section-heading p {
    margin: 0;
    color: var(--mst-muted);
    font-size: 15px;
    line-height: 1.55;
}

/* Labels and descriptions */
.mst-booking-experience-page #gform_wrapper_10 .gfield_label,
.mst-booking-experience-page #gform_wrapper_10 .gsection_title {
    color: var(--mst-ink);
    font-weight: 750;
}

.mst-booking-experience-page #gform_wrapper_10 .gfield_description {
    color: var(--mst-muted);
    line-height: 1.5;
}

/* Generic controls */
.mst-booking-experience-page #gform_wrapper_10 input[type="text"],
.mst-booking-experience-page #gform_wrapper_10 input[type="email"],
.mst-booking-experience-page #gform_wrapper_10 input[type="tel"],
.mst-booking-experience-page #gform_wrapper_10 input[type="number"],
.mst-booking-experience-page #gform_wrapper_10 textarea,
.mst-booking-experience-page #gform_wrapper_10 select {
    border: 1px solid #cbd8df;
    border-radius: 12px;
    min-height: 52px;
    background: var(--mst-white);
    color: var(--mst-ink);
    box-shadow: none;
}

.mst-booking-experience-page #gform_wrapper_10 textarea {
    min-height: 120px;
}

.mst-booking-experience-page #gform_wrapper_10 input:focus,
.mst-booking-experience-page #gform_wrapper_10 textarea:focus,
.mst-booking-experience-page #gform_wrapper_10 select:focus {
    border-color: var(--mst-accent);
    outline: 3px solid rgba(36, 95, 130, 0.14);
}

/* Choice cards */
.mst-booking-experience-page .mst-card-field .gfield_radio,
.mst-booking-experience-page .mst-card-field .gfield_checkbox {
    display: grid !important;
    gap: 12px;
}

.mst-booking-experience-page .mst-card-columns-2 .gfield_radio,
.mst-booking-experience-page .mst-card-columns-2 .gfield_checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mst-booking-experience-page .mst-card-columns-3 .gfield_radio,
.mst-booking-experience-page .mst-card-columns-3 .gfield_checkbox {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The primary tour and time decisions use one consistent vertical rhythm on
 * desktop and mobile. Other option groups keep their compact grids. */
.mst-booking-experience-page .mst-card-vertical .gfield_radio,
.mst-booking-experience-page .mst-card-vertical .gfield_checkbox {
    grid-template-columns: minmax(0, 1fr) !important;
}

.mst-booking-experience-page .mst-choice-card {
    position: relative;
    min-width: 0;
}

.mst-booking-experience-page .mst-choice-card > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

.mst-booking-experience-page .mst-choice-card > label {
    width: 100%;
    min-height: 86px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 18px 18px !important;
    border: 1px solid var(--mst-line);
    border-radius: 15px;
    background: var(--mst-white);
    color: var(--mst-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.mst-booking-experience-page .mst-choice-card > label:hover {
    border-color: #9db7c4;
    box-shadow: 0 10px 30px rgba(17, 35, 55, 0.08);
    transform: translateY(-1px);
}

.mst-booking-experience-page .mst-choice-card.is-selected > label {
    border-color: var(--mst-accent);
    background: #eef5f9;
    box-shadow: inset 0 0 0 1px var(--mst-accent);
}

.mst-booking-experience-page .mst-choice-card.is-selected > label::before {
    content: "✓";
    position: absolute;
    top: 11px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mst-accent);
    color: var(--mst-white);
    font-size: 12px;
    font-weight: 900;
}

.mst-booking-experience-page .mst-choice-card.is-disabled > label {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* Full-day-only experiences remove half-day services from the visual flow.
 * The companion server-side validation enforces the same rule on submit. */
.mst-booking-experience-page .mst-choice-card.mst-choice-unavailable {
    display: none !important;
}

.mst-booking-experience-page #field_10_45 .mst-choice-card > label {
    height: 76px;
    min-height: 76px;
    padding: 16px 50px 16px 18px !important;
}

.mst-booking-experience-page .mst-choice-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.mst-booking-experience-page .mst-choice-title {
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
}

.mst-booking-experience-page .mst-choice-meta {
    color: var(--mst-muted);
    font-size: 13px;
    font-weight: 500;
}

.mst-booking-experience-page .mst-choice-price {
    margin-right: 22px;
    white-space: nowrap;
    color: var(--mst-accent-dark);
    font-size: 14px;
    font-weight: 800;
}

.mst-booking-experience-page .mst-choice-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #dff5fb;
    color: var(--mst-accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}

/* Tour time rows keep the period and hours visually separate and scannable. */
.mst-booking-experience-page .mst-card-field-9 .mst-choice-card > label {
    height: 76px;
    min-height: 76px;
    align-items: center;
    padding: 16px 50px 16px 18px !important;
}

.mst-booking-experience-page .mst-card-field-9 .mst-choice-copy {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mst-booking-experience-page .mst-card-field-9 .mst-choice-title {
    font-size: 17px;
}

.mst-booking-experience-page .mst-card-field-9 .mst-choice-meta {
    flex: 0 0 auto;
    color: var(--mst-accent-dark) !important;
    font-weight: 750;
    white-space: nowrap;
}

/* Pickup locations use the same full-width, one-row pattern as tours. */
.mst-booking-experience-page .mst-card-field-27 .mst-choice-card > label {
    height: 68px;
    min-height: 68px;
    padding: 14px 50px 14px 18px !important;
}

.mst-booking-experience-page .mst-card-field-27 .mst-choice-copy,
.mst-booking-experience-page .mst-card-field-27 .mst-choice-title,
.mst-booking-experience-page .mst-card-field-27 .mst-choice-price {
    white-space: nowrap;
}

.mst-booking-experience-page .mst-card-field-27 .mst-choice-price {
    margin-right: 0;
}

.mst-booking-experience-page .mst-pickup-instruction {
    margin: 8px 0 14px;
    color: var(--mst-muted);
    font-size: 15px;
    line-height: 1.5;
}

/* Guest stepper - native select remains available as a fallback. */
.mst-booking-experience-page .mst-guest-field .ginput_container_select {
    position: relative;
}

.mst-booking-experience-page .mst-booking-ready .mst-guest-field select:not(.mst-show-native) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

.mst-booking-experience-page .mst-guest-field select.mst-show-native {
    margin-bottom: 10px;
}

.mst-booking-experience-page .mst-guest-stepper {
    width: min(100%, 330px);
    display: grid;
    grid-template-columns: 58px 1fr 58px;
    align-items: stretch;
    border: 1px solid var(--mst-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mst-white);
}

.mst-booking-experience-page .mst-guest-stepper button {
    min-height: 56px;
    border: 0;
    border-radius: 0;
    background: var(--mst-white);
    color: var(--mst-ink);
    cursor: pointer;
}

.mst-booking-experience-page .mst-stepper-btn {
    font-size: 24px;
    font-weight: 500;
}

.mst-booking-experience-page .mst-stepper-btn:first-child {
    border-right: 1px solid var(--mst-line);
}

.mst-booking-experience-page .mst-stepper-btn:last-child {
    border-left: 1px solid var(--mst-line);
}

.mst-booking-experience-page .mst-stepper-value {
    font-size: 16px;
    font-weight: 750;
}

.mst-booking-experience-page .mst-guest-stepper button:hover:not(:disabled) {
    background: var(--mst-soft);
}

.mst-booking-experience-page .mst-guest-stepper button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Calendar container - GP Bookings keeps all availability logic. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker {
    padding: 18px;
    border: 1px solid var(--mst-line);
    border-radius: var(--mst-radius);
    background: var(--mst-white);
    box-shadow: 0 10px 35px rgba(17, 35, 55, 0.05);
}

/* Hide the old native Booking information section heading because the custom Step 03 heading replaces it. */
.mst-booking-experience-page .mst-native-section-title {
    display: none !important;
}

/* Native subtotal/tax/total stay visible as a reliable fallback and source of truth. */
.mst-booking-experience-page .mst-price-row {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--mst-soft);
}

.mst-booking-experience-page .mst-total-row {
    background: var(--mst-ink);
    color: var(--mst-white);
}

.mst-booking-experience-page .mst-total-row .gfield_label,
.mst-booking-experience-page .mst-total-row .ginput_total,
.mst-booking-experience-page .mst-total-row input {
    color: var(--mst-white) !important;
}

/* Sticky live summary */
.mst-booking-experience-page .mst-booking-summary {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: 28px;
}

.mst-booking-experience-page .mst-summary-inner {
    padding: 28px;
    border: 1px solid var(--mst-line);
    border-radius: 20px;
    background: var(--mst-white);
    box-shadow: var(--mst-shadow);
}

.mst-booking-experience-page .mst-summary-eyebrow {
    margin: 0 0 8px;
    color: var(--mst-accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
}

.mst-booking-experience-page .mst-booking-summary h2 {
    margin: 0 0 22px;
    color: var(--mst-ink);
    font-size: 25px;
    line-height: 1.15;
}

.mst-booking-experience-page .mst-summary-details {
    margin: 0;
}

.mst-booking-experience-page .mst-summary-details > div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f3;
}

.mst-booking-experience-page .mst-summary-details dt {
    color: var(--mst-muted);
    font-size: 13px;
}

.mst-booking-experience-page .mst-summary-details dd {
    margin: 0;
    color: var(--mst-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.mst-booking-experience-page .mst-summary-details dd[data-mst-summary="time"] {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 14px !important;
    letter-spacing: -.025em;
}

.mst-booking-experience-page .mst-summary-prices {
    margin-top: 18px;
}

.mst-booking-experience-page .mst-summary-prices > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    color: var(--mst-muted);
    font-size: 14px;
}

.mst-booking-experience-page .mst-summary-prices strong {
    color: var(--mst-ink);
}

.mst-booking-experience-page .mst-summary-prices .mst-summary-total {
    margin-top: 9px;
    padding-top: 16px;
    border-top: 2px solid var(--mst-ink);
    color: var(--mst-ink);
    font-size: 18px;
    font-weight: 800;
}

.mst-booking-experience-page .mst-summary-total strong {
    color: var(--mst-accent-dark);
    font-size: 22px;
}

.mst-booking-experience-page .mst-summary-note {
    margin: 18px 0 0;
    color: var(--mst-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* Submit */
.mst-booking-experience-page #gform_submit_button_10 {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 12px;
    background: var(--mst-accent);
    color: var(--mst-white);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.mst-booking-experience-page #gform_submit_button_10:hover {
    background: var(--mst-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(17, 35, 55, .18);
}

/* Validation should remain obvious. */
.mst-booking-experience-page #gform_wrapper_10 .gfield_error .gfield_label,
.mst-booking-experience-page #gform_wrapper_10 .gfield_validation_message,
.mst-booking-experience-page #gform_wrapper_10 .validation_message {
    color: #a61b1b;
}

.mst-booking-experience-page #gform_wrapper_10 .gfield_error input,
.mst-booking-experience-page #gform_wrapper_10 .gfield_error select,
.mst-booking-experience-page #gform_wrapper_10 .gfield_error textarea,
.mst-booking-experience-page #gform_wrapper_10 .gfield_error .mst-choice-card > label {
    border-color: #c93f3f;
}

@media (max-width: 1050px) {
    .mst-booking-experience-page #gform_10.mst-booking-form {
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 24px;
    }

    .mst-booking-experience-page .mst-card-columns-3 .gfield_radio,
    .mst-booking-experience-page .mst-card-columns-3 .gfield_checkbox {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .mst-booking-experience-page #gform_10.mst-booking-form {
        display: block;
    }

    .mst-booking-experience-page .mst-booking-summary {
        position: static;
        margin: 30px 0;
    }

    .mst-booking-experience-page .mst-summary-inner {
        padding: 22px;
    }
}

@media (max-width: 600px) {
    .mst-booking-experience-page .mst-card-columns-2 .gfield_radio,
    .mst-booking-experience-page .mst-card-columns-2 .gfield_checkbox,
    .mst-booking-experience-page .mst-card-columns-3 .gfield_radio,
    .mst-booking-experience-page .mst-card-columns-3 .gfield_checkbox {
        grid-template-columns: 1fr;
    }

    .mst-booking-experience-page .mst-section-heading {
        gap: 12px;
        padding-top: 28px;
    }

    .mst-booking-experience-page .mst-section-number {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .mst-booking-experience-page .mst-choice-card > label {
        min-height: 76px;
        padding: 16px !important;
    }

    .mst-booking-experience-page #field_10_45 .mst-choice-card > label,
    .mst-booking-experience-page .mst-card-field-9 .mst-choice-card > label {
        padding-right: 44px !important;
    }

    .mst-booking-experience-page .mst-card-field-9 .mst-choice-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mst-booking-experience-page .mst-choice-badge {
        margin-left: 0;
    }

    .mst-booking-experience-page .mst-card-field-27 .mst-choice-card > label {
        padding-right: 44px !important;
    }

    .mst-booking-experience-page .mst-card-field-27 .mst-choice-title,
    .mst-booking-experience-page .mst-card-field-27 .mst-choice-price {
        font-size: 15px !important;
    }

    .mst-booking-experience-page .mst-summary-details > div {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .mst-booking-experience-page .mst-summary-details dd[data-mst-summary="time"] {
        white-space: normal;
        letter-spacing: normal;
    }
}

/* ==========================================================
 * MarSea Booking Experience v1.2 refinements
 * Cleaner pricing + contact section based on live-site review.
 * ========================================================== */

/* Keep duplicate native summary rows visually hidden WITHOUT display:none.
 * GF's gformIsHidden checks the .gfield display property, and GP eCommerce
 * removes tax from the client total when that property is none. These rows must
 * remain in layout for calculation; genuine GF conditional hiding still wins. */
.mst-booking-experience-page .mst-subtotal-row,
.mst-booking-experience-page .mst-tax-row {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%);
    visibility: hidden;
    pointer-events: none;
}

/* Turn the native validated Total into a clean read-only price panel instead
 * of showing a white form input inside a dark box. */
.mst-booking-experience-page .mst-total-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 24px;
    padding: 22px 24px !important;
    border: 1px solid var(--mst-line);
    border-radius: 16px;
    background: #eef5f9 !important;
    color: var(--mst-ink) !important;
}

.mst-booking-experience-page .mst-total-row .gfield_label {
    margin: 0 !important;
    color: var(--mst-ink) !important;
    font-size: 17px;
    font-weight: 800;
}

.mst-booking-experience-page .mst-total-row .ginput_container_total {
    margin: 0 !important;
}

.mst-booking-experience-page .mst-total-row input.ginput_total,
.mst-booking-experience-page .mst-total-row .ginput_total {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--mst-accent-dark) !important;
    box-shadow: none !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: right;
}

.mst-booking-experience-page .mst-total-row::after {
    content: "Taxes and fees included";
    grid-column: 1 / -1;
    color: var(--mst-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Contact fields: force a deliberate full-width layout rather than inheriting
 * Gravity Forms' narrow advanced-field widths. */
.mst-booking-experience-page #gform_10 .mst-contact-field {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
}

.mst-booking-experience-page #field_10_1 .ginput_complex,
.mst-booking-experience-page #field_10_2 .ginput_complex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    width: 100% !important;
    max-width: none !important;
}

.mst-booking-experience-page #field_10_1 .ginput_complex > span,
.mst-booking-experience-page #field_10_2 .ginput_complex > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mst-booking-experience-page #field_10_1 input,
.mst-booking-experience-page #field_10_2 input,
.mst-booking-experience-page #field_10_24 input,
.mst-booking-experience-page #field_10_22 textarea {
    width: 100% !important;
    max-width: none !important;
    border: 1px solid var(--mst-line) !important;
    border-radius: 12px !important;
    background: var(--mst-white) !important;
    color: var(--mst-ink) !important;
    box-shadow: 0 1px 2px rgba(17, 35, 55, .03) !important;
}

.mst-booking-experience-page #field_10_1 input,
.mst-booking-experience-page #field_10_2 input {
    min-height: 56px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
}

.mst-booking-experience-page #field_10_1 .gform-field-label--type-sub,
.mst-booking-experience-page #field_10_2 .gform-field-label--type-sub {
    display: block;
    margin: 7px 2px 0 !important;
    color: var(--mst-muted);
    font-size: 12px;
    line-height: 1.3;
}

.mst-booking-experience-page #field_10_24 .ginput_container_phone {
    width: min(100%, 560px);
}

.mst-booking-experience-page #field_10_22 textarea {
    min-height: 135px !important;
    padding: 14px 16px !important;
    resize: vertical;
    line-height: 1.5;
}

/* Privacy acceptance reads as a final confirmation rather than another raw
 * Gravity Forms field. */
.mst-booking-experience-page .mst-contact-privacy {
    padding: 18px 20px !important;
    border: 1px solid var(--mst-line);
    border-radius: 14px;
    background: var(--mst-soft);
}

.mst-booking-experience-page .mst-contact-privacy .gfield_label {
    margin-bottom: 10px !important;
    font-size: 15px;
    line-height: 1.4;
}

.mst-booking-experience-page .mst-contact-privacy .gfield_description {
    margin-top: 8px !important;
    font-size: 13px;
}

.mst-booking-experience-page .mst-contact-privacy .gfield_description a {
    color: var(--mst-accent);
    font-weight: 700;
}

/* Slightly more refined section 03 spacing. */
.mst-booking-experience-page #mst-section-03 {
    margin-top: 22px;
    padding-top: 38px;
}

/* Summary should remain visually quiet and use MarSea blue tones only. */
.mst-booking-experience-page .mst-summary-prices > div:not(.mst-summary-total) strong {
    font-weight: 650;
}

@media (max-width: 600px) {
    .mst-booking-experience-page #field_10_1 .ginput_complex,
    .mst-booking-experience-page #field_10_2 .ginput_complex {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mst-booking-experience-page .mst-total-row {
        padding: 18px !important;
    }

    .mst-booking-experience-page .mst-total-row input.ginput_total,
    .mst-booking-experience-page .mst-total-row .ginput_total {
        font-size: 28px !important;
    }
}

/* ==========================================================
 * MarSea Booking Experience v1.2 refinements
 * Blue MarSea palette, larger type, tighter contact fields,
 * and a fully restyled GP Bookings calendar.
 * ========================================================== */

.mst-booking-experience-page {
    --mst-body-size: 17px;
    --mst-label-size: 18px;
    --mst-small-size: 15px;
    --mst-text: #111820;
    --mst-muted: #4f6072;
    --mst-line: #cadbe6;
    --mst-soft: #f4f8fb;
    --mst-soft-2: #eaf2f7;
    --mst-accent: #245f82;
    --mst-accent-dark: #112337;
    --mst-accent-light: #eef5f9;
}

/* Use the same readable scale as normal MarSea page copy. */
.mst-booking-experience-page #gform_wrapper_10 {
    color: var(--mst-text);
    font-size: var(--mst-body-size);
    line-height: 1.55;
}

.mst-booking-experience-page #gform_wrapper_10 .gfield_label,
.mst-booking-experience-page #gform_wrapper_10 .gsection_title {
    margin-bottom: 9px !important;
    color: var(--mst-text) !important;
    font-size: var(--mst-label-size) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

.mst-booking-experience-page #gform_wrapper_10 .gfield_description {
    color: var(--mst-muted) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

.mst-booking-experience-page #gform_wrapper_10 .gfield_required,
.mst-booking-experience-page #gform_wrapper_10 .gfield_required_text {
    font-size: 14px !important;
}

.mst-booking-experience-page #gform_wrapper_10 input[type="text"],
.mst-booking-experience-page #gform_wrapper_10 input[type="email"],
.mst-booking-experience-page #gform_wrapper_10 input[type="tel"],
.mst-booking-experience-page #gform_wrapper_10 input[type="number"],
.mst-booking-experience-page #gform_wrapper_10 textarea,
.mst-booking-experience-page #gform_wrapper_10 select {
    border-color: var(--mst-line) !important;
    background: #fff !important;
    color: var(--mst-text) !important;
    font-size: 17px !important;
}

.mst-booking-experience-page #gform_wrapper_10 input::placeholder,
.mst-booking-experience-page #gform_wrapper_10 textarea::placeholder {
    color: #6f7d8b !important;
    opacity: 1;
}

.mst-booking-experience-page #gform_wrapper_10 input:focus,
.mst-booking-experience-page #gform_wrapper_10 textarea:focus,
.mst-booking-experience-page #gform_wrapper_10 select:focus {
    border-color: var(--mst-accent) !important;
    outline: 3px solid rgba(36, 95, 130, .14) !important;
}

.mst-booking-experience-page #gform_wrapper_10 a {
    color: var(--mst-accent) !important;
}

/* Cards use blue selection states rather than the previous green. */
.mst-booking-experience-page .mst-choice-card > label {
    color: var(--mst-text) !important;
    border-color: var(--mst-line) !important;
}

.mst-booking-experience-page .mst-choice-card > label:hover {
    border-color: #7fa7bf !important;
    background: #f8fbfd !important;
}

.mst-booking-experience-page .mst-choice-card.is-selected > label {
    border-color: var(--mst-accent) !important;
    background: var(--mst-accent-light) !important;
    box-shadow: inset 0 0 0 1px var(--mst-accent) !important;
}

.mst-booking-experience-page .mst-choice-card.is-selected > label::before {
    background: var(--mst-accent) !important;
}

.mst-booking-experience-page .mst-choice-title {
    color: var(--mst-text) !important;
    font-size: 17px;
}

.mst-booking-experience-page .mst-choice-meta {
    color: var(--mst-muted) !important;
    font-size: 15px;
}

.mst-booking-experience-page .mst-choice-price {
    color: var(--mst-accent-dark) !important;
    font-size: 15px;
}

/* Guest selector matches the same font scale and blue hover/focus treatment. */
.mst-booking-experience-page .mst-guest-stepper {
    border-color: var(--mst-line);
    border-radius: 12px;
}

.mst-booking-experience-page .mst-guest-stepper button {
    color: var(--mst-text) !important;
    font-size: 17px;
}

.mst-booking-experience-page .mst-guest-stepper button:hover:not(:disabled) {
    background: var(--mst-accent-light) !important;
}

.mst-booking-experience-page .mst-stepper-btn {
    color: var(--mst-accent-dark) !important;
    font-size: 25px !important;
}

.mst-booking-experience-page .mst-stepper-value {
    font-size: 17px !important;
}

/* ----------------------------------------------------------
 * GP Bookings calendar
 * GP Bookings remains responsible for dates and availability;
 * these selectors only change presentation.
 * ---------------------------------------------------------- */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker {
    margin-top: 8px;
    padding: 22px !important;
    border: 1px solid var(--mst-line) !important;
    border-radius: 16px !important;
    background: var(--mst-soft) !important;
    color: var(--mst-text) !important;
    box-shadow: 0 12px 34px rgba(17, 35, 55, .06) !important;
    font-size: 16px !important;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker *,
.mst-booking-experience-page .mst-calendar-field .ui-datepicker *,
.mst-booking-experience-page .mst-calendar-field .flatpickr-calendar * {
    box-sizing: border-box;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker h2,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker h3,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker h4,
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-title,
.mst-booking-experience-page .mst-calendar-field .flatpickr-current-month {
    color: var(--mst-text) !important;
    font-size: 19px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
}

/* Keep the selected full date together without changing other calendar text. */
.mst-booking-experience-page .mst-calendar-field .mst-selected-calendar-date,
.mst-booking-experience-page .mst-calendar-field .mst-selected-calendar-date * {
    display: inline !important;
    white-space: nowrap !important;
}

@media (max-width: 380px) {
    .mst-booking-experience-page .mst-calendar-field .mst-selected-calendar-date,
    .mst-booking-experience-page .mst-calendar-field .mst-selected-calendar-date * {
        white-space: normal !important;
    }
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker table,
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 5px !important;
    table-layout: fixed;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker th,
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-calendar th,
.mst-booking-experience-page .mst-calendar-field .flatpickr-weekday {
    padding: 8px 2px !important;
    color: #263646 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    text-align: center;
}

/* Date cells and time-slot buttons. Broad selectors are deliberately scoped
 * inside the GP Bookings field so they cannot affect the rest of the site. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker td > button,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker td > a,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [role="gridcell"] > button,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [role="gridcell"] > a,
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-calendar .ui-state-default,
.mst-booking-experience-page .mst-calendar-field .flatpickr-day {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 42px;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--mst-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--mst-text) !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker td > button:hover:not(:disabled),
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker td > a:hover,
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-calendar .ui-state-default:hover,
.mst-booking-experience-page .mst-calendar-field .flatpickr-day:hover {
    border-color: var(--mst-accent) !important;
    background: var(--mst-accent-light) !important;
    color: var(--mst-text) !important;
}

/* Selected/current dates. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .is-selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [aria-selected="true"],
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [aria-current="date"],
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-current-day .ui-state-default,
.mst-booking-experience-page .mst-calendar-field .flatpickr-day.selected {
    border-color: var(--mst-accent-dark) !important;
    background: var(--mst-accent-dark) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(17, 35, 55, .16) !important;
}

/* Unavailable dates. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button:disabled,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .disabled,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .is-disabled,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [aria-disabled="true"],
.mst-booking-experience-page .mst-calendar-field .ui-datepicker-unselectable .ui-state-default,
.mst-booking-experience-page .mst-calendar-field .flatpickr-day.flatpickr-disabled {
    border-color: #e1e8ed !important;
    background: #f2f5f7 !important;
    color: #9aa5af !important;
    opacity: .9 !important;
    cursor: not-allowed !important;
}

/* Month navigation and time options, if GP Bookings exposes them as buttons. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker > button,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-booking-time,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-time-slot,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [data-time] {
    border-color: var(--mst-line) !important;
    border-radius: 10px !important;
    color: var(--mst-text) !important;
    font-size: 16px !important;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker select {
    min-height: 46px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
}

/* ----------------------------------------------------------
 * Contact / customer information
 * Put the small Gravity Forms sublabels immediately ABOVE their
 * inputs and keep each pair visually together.
 * ---------------------------------------------------------- */
.mst-booking-experience-page #mst-section-03 {
    margin-top: 24px;
    padding-top: 38px;
}

.mst-booking-experience-page #field_10_1 .ginput_complex,
.mst-booking-experience-page #field_10_2 .ginput_complex {
    gap: 12px !important;
}

.mst-booking-experience-page #field_10_1 .ginput_complex > span,
.mst-booking-experience-page #field_10_2 .ginput_complex > span {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.mst-booking-experience-page #field_10_1 .gform-field-label--type-sub,
.mst-booking-experience-page #field_10_2 .gform-field-label--type-sub {
    order: -1;
    margin: 0 2px !important;
    color: var(--mst-text) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
}

.mst-booking-experience-page #field_10_1 input,
.mst-booking-experience-page #field_10_2 input {
    min-height: 54px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
}

.mst-booking-experience-page #field_10_22 textarea {
    min-height: 130px !important;
    padding: 14px 15px !important;
    border-radius: 10px !important;
}

.mst-booking-experience-page .mst-contact-privacy {
    background: var(--mst-soft) !important;
    border-color: var(--mst-line) !important;
}

.mst-booking-experience-page .mst-contact-privacy .gfield_description,
.mst-booking-experience-page .mst-contact-privacy .gfield_description a {
    font-size: 15px !important;
}

/* Price panels and summary: all blue/navy, no green. */
.mst-booking-experience-page .mst-total-row {
    border-color: var(--mst-line) !important;
    background: var(--mst-accent-light) !important;
}

.mst-booking-experience-page .mst-total-row input.ginput_total,
.mst-booking-experience-page .mst-total-row .ginput_total,
.mst-booking-experience-page .mst-summary-total strong,
.mst-booking-experience-page .mst-summary-eyebrow {
    color: var(--mst-accent-dark) !important;
}

.mst-booking-experience-page .mst-summary-inner {
    border-color: var(--mst-line) !important;
}

.mst-booking-experience-page .mst-summary-details dt,
.mst-booking-experience-page .mst-summary-details dd {
    font-size: 15px !important;
}

.mst-booking-experience-page .mst-summary-prices > div {
    font-size: 15px !important;
}

.mst-booking-experience-page .mst-summary-note {
    font-size: 14px !important;
}

.mst-booking-experience-page #gform_submit_button_10 {
    background: var(--mst-accent-dark) !important;
    color: #fff !important;
    font-size: 17px !important;
}

.mst-booking-experience-page #gform_submit_button_10:hover,
.mst-booking-experience-page #gform_submit_button_10:focus {
    background: var(--mst-accent) !important;
    box-shadow: 0 10px 25px rgba(17, 35, 55, .18) !important;
}

@media (max-width: 600px) {
    .mst-booking-experience-page {
        --mst-body-size: 16px;
        --mst-label-size: 17px;
    }

    .mst-booking-experience-page #gform_wrapper_10 .gfield_description {
        font-size: 15px !important;
    }

    .mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker {
        padding: 14px !important;
    }

    .mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker table,
    .mst-booking-experience-page .mst-calendar-field .ui-datepicker-calendar {
        border-spacing: 3px !important;
    }

    .mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker td > button,
    .mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker td > a,
    .mst-booking-experience-page .mst-calendar-field .ui-datepicker-calendar .ui-state-default,
    .mst-booking-experience-page .mst-calendar-field .flatpickr-day {
        min-width: 36px;
        min-height: 40px;
        padding: 6px !important;
        font-size: 15px !important;
    }

    .mst-booking-experience-page #field_10_1 .ginput_complex,
    .mst-booking-experience-page #field_10_2 .ginput_complex {
        gap: 12px !important;
    }
}


/* ==========================================================
 * MarSea Booking Experience v1.3 refinements
 * Softer action colors and clearer GP Bookings time selection.
 * ========================================================== */

.mst-booking-experience-page {
    --mst-action: #dcebf3;
    --mst-action-hover: #c9e0eb;
    --mst-action-border: #245f82;
}

/* Keep the selected GP Bookings TIME readable. Do not fill it dark;
 * use a clear theme-blue border and a very soft blue background. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-booking-time.selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-booking-time.is-selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-booking-time[aria-selected="true"],
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-time-slot.selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-time-slot.is-selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-time-slot[aria-selected="true"],
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [data-time].selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [data-time].is-selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [data-time][aria-selected="true"],
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .selected .gpb-booking-time,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .selected .gpb-time-slot,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .selected [data-time] {
    border: 2px solid var(--mst-action-border) !important;
    background: #f5fafc !important;
    color: var(--mst-text) !important;
    box-shadow: 0 4px 12px rgba(36, 95, 130, .10) !important;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-booking-time.selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-booking-time.is-selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-time-slot.selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker .gpb-time-slot.is-selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [data-time].selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [data-time].is-selected * {
    color: var(--mst-text) !important;
}

/* Also cover GP Bookings builds that put the selected class directly on a
 * plain button inside the available-times view. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button.selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button.is-selected,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button[aria-pressed="true"] {
    border: 2px solid var(--mst-action-border) !important;
    background: #f5fafc !important;
    color: var(--mst-text) !important;
    box-shadow: 0 4px 12px rgba(36, 95, 130, .10) !important;
}

.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button.selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button.is-selected *,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button[aria-pressed="true"] * {
    color: var(--mst-text) !important;
}

/* Keep calendar navigation inside the MarSea palette instead of electric blue. */
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker a,
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker button[class*="back"],
.mst-booking-experience-page .mst-calendar-field .gpb-booking-time-picker [class*="back"] {
    color: var(--mst-accent) !important;
}

/* Softer guest selector. The native theme was painting these controls a very
 * saturated blue, so explicitly neutralize it here. */
.mst-booking-experience-page .mst-guest-stepper {
    border: 1px solid var(--mst-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.mst-booking-experience-page .mst-guest-stepper .mst-stepper-btn,
.mst-booking-experience-page .mst-guest-stepper .mst-stepper-value {
    border: 0 !important;
    background: var(--mst-action) !important;
    color: var(--mst-text) !important;
    box-shadow: none !important;
}

.mst-booking-experience-page .mst-guest-stepper .mst-stepper-value {
    background: #f8fbfd !important;
    border-left: 1px solid var(--mst-line) !important;
    border-right: 1px solid var(--mst-line) !important;
    font-weight: 700 !important;
}

.mst-booking-experience-page .mst-guest-stepper .mst-stepper-btn:hover:not(:disabled),
.mst-booking-experience-page .mst-guest-stepper .mst-stepper-btn:focus-visible,
.mst-booking-experience-page .mst-guest-stepper .mst-stepper-value:hover,
.mst-booking-experience-page .mst-guest-stepper .mst-stepper-value:focus-visible {
    background: var(--mst-action-hover) !important;
    color: var(--mst-text) !important;
}

.mst-booking-experience-page .mst-guest-stepper .mst-stepper-btn:disabled {
    background: #edf3f6 !important;
    color: #7a8791 !important;
}

/* Submit uses a softer MarSea blue treatment rather than black/navy. */
.mst-booking-experience-page #gform_submit_button_10 {
    border: 1px solid var(--mst-action-border) !important;
    background: var(--mst-action) !important;
    color: var(--mst-text) !important;
    box-shadow: none !important;
}

.mst-booking-experience-page #gform_submit_button_10:hover,
.mst-booking-experience-page #gform_submit_button_10:focus {
    border-color: var(--mst-action-border) !important;
    background: var(--mst-action-hover) !important;
    color: var(--mst-text) !important;
    box-shadow: 0 8px 20px rgba(36, 95, 130, .12) !important;
}


/* ==========================================================
 * MarSea Booking Experience v1.4 refinements
 * Booking-summary wording, privacy field layout, and more
 * readable placeholder text.
 * ========================================================== */

/* Placeholder copy should read like normal page copy, not tiny helper text. */
.mst-booking-experience-page #gform_wrapper_10 input::placeholder,
.mst-booking-experience-page #gform_wrapper_10 textarea::placeholder {
    color: #5b6976 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
}

.mst-booking-experience-page #field_10_22 textarea {
    font-size: 17px !important;
    line-height: 1.55 !important;
}

/* Privacy acceptance should look like a normal contained form panel. Gravity
 * Forms renders this field as a fieldset/legend; using an inset border avoids
 * the native fieldset line cutting through the legend text. */
.mst-booking-experience-page #field_10_23.mst-contact-privacy {
    display: block !important;
    width: 100% !important;
    padding: 22px 22px 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--mst-soft) !important;
    box-shadow: inset 0 0 0 1px var(--mst-line) !important;
}

.mst-booking-experience-page #field_10_23.mst-contact-privacy > legend.gfield_label {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mst-text) !important;
    line-height: 1.35 !important;
    transform: none !important;
}

.mst-booking-experience-page #field_10_23 .ginput_container_checkbox,
.mst-booking-experience-page #field_10_23 .gfield_checkbox,
.mst-booking-experience-page #field_10_23 .gchoice {
    margin: 0 !important;
}

.mst-booking-experience-page #field_10_23 .gchoice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.mst-booking-experience-page #field_10_23 input[type="checkbox"] {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    accent-color: var(--mst-accent) !important;
}

.mst-booking-experience-page #field_10_23 .gchoice label {
    margin: 0 !important;
    color: var(--mst-text) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

.mst-booking-experience-page #field_10_23 .gfield_description {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    color: var(--mst-muted) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

.mst-booking-experience-page #field_10_23 .gfield_description a {
    color: var(--mst-accent) !important;
    font-size: 16px !important;
    font-weight: 750 !important;
}

/* The summary eyebrow is now a functional label rather than repeated branding. */
.mst-booking-experience-page .mst-summary-eyebrow {
    color: var(--mst-accent) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: .10em !important;
}

@media (max-width: 600px) {
    .mst-booking-experience-page #gform_wrapper_10 input::placeholder,
    .mst-booking-experience-page #gform_wrapper_10 textarea::placeholder {
        font-size: 16px !important;
    }

    .mst-booking-experience-page #field_10_23.mst-contact-privacy {
        padding: 18px !important;
    }
}


/* ==========================================================
 * MarSea Booking Experience v1.5 refinements
 * Smaller booking-page headline and theme-aqua step numbers.
 * Uses the same MarSea Aqua (#18B9D7) as the site's Book Now
 * button background from the active theme.
 * ========================================================== */

.mst-booking-experience-page {
    --mst-book-now: #18B9D7;
    --mst-book-now-dark: #047E9B;
}

/* The reservation-page H1 should guide the user without competing with the form. */
.mst-booking-experience-page main h1.wp-block-heading.has-text-align-center,
.mst-booking-experience-page .entry-content > h1.wp-block-heading:first-child {
    color: var(--mst-text) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 12px !important;
}

/* Step numbers 1, 2 and 3 now use the same aqua background as Book Now. */
.mst-booking-experience-page .mst-section-number {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    background: var(--mst-book-now) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

@media (max-width: 600px) {
    .mst-booking-experience-page main h1.wp-block-heading.has-text-align-center,
    .mst-booking-experience-page .entry-content > h1.wp-block-heading:first-child {
        font-size: 28px !important;
        line-height: 1.18 !important;
    }

    .mst-booking-experience-page .mst-section-number {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
        font-size: 13px !important;
    }
}

/* 3.1.1: native choice labels fill the card; selected markers remain inside it. */
.mst-booking-experience-page #gform_wrapper_10 .mst-choice-card > label {
    width: 100% !important; max-width: none !important; flex: 1 1 auto;
    box-sizing: border-box;
}
/* Keep intl-tel-input's measured left/right padding and native hidden value. */
.mst-booking-experience-page #field_10_24 input[type="tel"] {
    min-height: 54px !important; padding-block: 0 !important;
    border-radius: 10px !important;
}
.mst-booking-experience-page #field_10_24 .iti { width: 100%; max-width: 100%; }
/* The legend sits ABOVE the box, while keeping native fieldset semantics. */
.mst-booking-experience-page #field_10_23.mst-contact-privacy {
    padding: 0 !important; border: 0 !important; background: transparent !important;
    box-shadow: none !important;
}
.mst-booking-experience-page #field_10_23.mst-contact-privacy > legend.gfield_label {
    margin: 0 0 14px !important; padding: 0 !important;
}
.mst-booking-experience-page #field_10_23 .mst-privacy-panel {
    padding: 22px; border: 1px solid var(--mst-line); border-radius: 14px;
    background: var(--mst-soft); width: 100%; box-sizing: border-box;
}
@media (max-width: 600px) {
    .mst-booking-experience-page #field_10_23 .mst-privacy-panel { padding: 18px; }
}
/* GF theme grids must not put the label in a separate narrow column. */
.mst-booking-experience-page #gform_wrapper_10 .mst-choice-card:not(.mst-choice-unavailable) { display: block !important; }

/* A sole native slot has already been selected: show a confirmation, not a second choice.
   Keep the date field, booking input and native availability handlers active. */
.mst-booking-experience-page .mst-single-departure-confirmed > h4,
.mst-booking-experience-page .mst-single-departure-confirmed > .gpb-booking-time-picker__grid { display: none; }
.mst-booking-experience-page .mst-departure-confirmation {
    margin: 0; padding: 16px; border: 1px solid var(--mst-line); border-radius: 10px;
    background: #fff; color: var(--mst-text); line-height: 1.5; overflow-wrap: anywhere;
}
.mst-booking-experience-page .mst-departure-confirmation:focus-visible { outline: 3px solid var(--mst-accent); outline-offset: 3px; }

/* Date-first browsing keeps native form fields active for Gravity Forms calculations. */
.mst-date-first-active .mst-df-native{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none!important}
.mst-df-panel{grid-column:1/-1!important;min-width:0}.mst-df-panel button{font:inherit;cursor:pointer;min-height:44px}.mst-df-panel button:disabled{opacity:.45;cursor:default}.mst-df-panel button:focus-visible{outline:3px solid #13b4ca;outline-offset:3px}.mst-df-calendar{max-width:510px;padding:18px;border:1px solid var(--mst-line,#cadbe6);border-radius:16px;background:var(--mst-soft,#f4f8fb)}.mst-df-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mst-df-calendar-head button,.mst-df-counter button{border:1px solid var(--mst-line,#cadbe6);border-radius:9px;background:white;color:var(--mst-ink,#112337);min-width:44px}.mst-df-week,.mst-df-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.mst-df-week span{text-align:center;font-size:12px;color:var(--mst-muted,#4f6072);padding:6px 0}.mst-df-day{background:white;border:1px solid transparent;border-radius:9px;aspect-ratio:1;color:var(--mst-ink,#112337);padding:3px!important}.mst-df-day[aria-pressed=true]{background:var(--mst-accent,#245f82);color:white}.mst-df-toggle{max-width:510px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:white;border:1px solid var(--mst-line,#cadbe6);border-radius:12px;margin-top:18px;text-align:left;color:var(--mst-ink,#112337)}.mst-df-toggle strong{display:block;font-size:20px}.mst-df-guests{max-width:510px;padding:18px;border:1px solid var(--mst-line,#cadbe6);border-radius:12px;margin-top:8px;background:white}.mst-df-guests[hidden]{display:none!important}.mst-df-counter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.mst-df-counter small{display:block;color:var(--mst-muted,#4f6072)}.mst-df-counter>div:last-child{display:flex;align-items:center;gap:16px}.mst-df-counter output{font-weight:700;min-width:20px;text-align:center}.mst-df-guests p{font-size:13px;color:var(--mst-muted,#4f6072)}.mst-df-done{border:0;border-radius:9px;background:var(--mst-accent,#245f82);color:white;width:100%;padding:10px}.mst-df-results-heading{margin:30px 0 12px!important;font-size:26px!important}.mst-df-status{color:var(--mst-muted,#4f6072);line-height:1.6}.mst-df-tour{padding:18px;border:1px solid var(--mst-line,#cadbe6);border-radius:14px;margin-top:16px}.mst-df-tour h3{font-size:20px!important;margin:0 0 14px!important}.mst-df-departures{display:flex;flex-wrap:wrap;gap:10px}.mst-df-departure{flex:1;min-width:160px;background:white;border:1px solid var(--mst-line,#cadbe6);border-radius:10px;padding:12px;text-align:left;color:var(--mst-ink,#112337)}.mst-df-departure strong,.mst-df-departure span{display:block}.mst-df-departure span{font-size:14px;color:var(--mst-muted,#4f6072)}.mst-df-departure[aria-pressed=true]{border:2px solid var(--mst-accent,#245f82);background:var(--mst-soft-2,#eaf2f7);padding:11px}.mst-df-departure[aria-pressed=true] strong:after{content:' ✓'}.mst-df-suggestion:empty{display:none}.mst-df-suggestion{background:var(--mst-soft,#f4f8fb);border-radius:12px;padding:16px;margin:16px 0}.mst-df-suggestion p{margin:0 0 12px}.mst-df-suggestion button{background:white;border:1px solid var(--mst-accent,#245f82);border-radius:8px;color:var(--mst-accent,#245f82);padding:10px 14px}.mst-df-fallback{padding:16px;background:#fff2cb;border-radius:10px}@media(max-width:430px){.mst-df-calendar{padding:12px}.mst-df-week,.mst-df-days{gap:3px}.mst-df-day{min-height:38px!important}.mst-df-departure{min-width:100%}.mst-df-counter>div:last-child{gap:12px}}
/* Isolate booking controls from Gravity Forms' global submit-button theme. */
.mst-booking-ready.mst-date-first-active .mst-df-panel button{background:#fff!important;color:var(--mst-ink,#112337)!important;border:1px solid var(--mst-line,#cadbe6)!important;border-radius:10px!important;padding:10px 12px!important;width:auto!important;height:auto!important;line-height:1.35!important;box-shadow:none!important;font-size:16px!important;text-transform:none!important;letter-spacing:normal!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-day{padding:3px!important;min-width:0!important;width:100%!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-day[aria-pressed=true],.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-done{background:var(--mst-accent,#245f82)!important;color:#fff!important;border-color:var(--mst-accent,#245f82)!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-toggle,.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-done{width:100%!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-departure[aria-pressed=true]{border:2px solid var(--mst-accent,#245f82)!important;background:var(--mst-soft-2,#eaf2f7)!important;padding:9px 11px!important}
/* 3.3: progressive experience selection, with guest controls always visible. */
.mst-df-group-heading{font-size:20px!important;font-weight:750!important;color:var(--mst-ink,var(--mst-text,#111820));margin:28px 0 16px!important}
.mst-df-guests{padding:22px 24px;background:var(--mst-soft,#f4f8fb);box-shadow:none;margin-top:0}
.mst-df-counter{padding-bottom:22px;margin-bottom:0}.mst-df-counter+.mst-df-counter{padding-top:20px;border-top:1px solid var(--mst-line,#cadbe6)}.mst-df-counter strong{font-size:18px;font-weight:750}.mst-df-guests p{font-size:14px;margin:0;line-height:1.6}
.mst-df-tour{padding:0;margin-top:16px;overflow:hidden}.mst-df-tour.mst-df-expanded{border:2px solid var(--mst-accent,#245f82);background:var(--mst-soft,#f4f8fb)}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-experience{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%!important;padding:24px!important;background:white!important;border:0!important;border-radius:0!important;text-align:left;min-height:108px!important;color:var(--mst-text,#111820)!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-expanded .mst-df-experience{background:transparent!important}
.mst-df-experience-copy{display:block;min-width:0}.mst-df-experience-copy>strong{display:block;font-size:20px;font-weight:750;line-height:1.45}.mst-df-description{display:block;font-size:15px;color:var(--mst-muted,#4f6072);margin-top:7px;line-height:1.6}
.mst-df-popular{display:inline-block;padding:4px 10px;margin-left:12px;border-radius:20px;background:#dff5fb;color:#152f46;font-size:12px;font-weight:750;white-space:nowrap;vertical-align:middle}
.mst-df-indicator{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid var(--mst-line,#cadbe6);border-radius:50%;font-size:20px;color:var(--mst-accent,#245f82)}.mst-df-expanded .mst-df-indicator{background:var(--mst-accent,#245f82);color:white;border-color:var(--mst-accent,#245f82);font-size:16px}
.mst-df-departures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 24px 24px}.mst-df-departures[hidden]{display:none!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-departure{display:block;min-width:0!important;width:100%!important;min-height:90px!important;padding:18px!important;text-align:left;white-space:normal}
.mst-df-departure strong{font-size:17px;font-weight:750;line-height:1.5}.mst-df-departure span{font-size:15px;line-height:1.5;margin-top:6px}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-departure[aria-pressed=true]{padding:17px!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-counter button{width:48px!important;height:48px!important;font-size:24px!important;color:var(--mst-accent,#245f82)!important;padding:8px!important}
@media(max-width:600px){.mst-df-departures{grid-template-columns:1fr;padding:0 18px 18px}.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-experience{padding:20px!important}.mst-df-experience-copy>strong{font-size:19px}.mst-df-guests{padding:20px}}
@media(max-width:430px){.mst-df-popular{display:table;margin:8px 0 0}}
.mst-df-counter small{margin-top:8px;line-height:1.5}

/* Spacing and typography requested for every experience's departure options. */
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-departures{padding-top:24px!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-experience{border-bottom:0!important;text-align:left!important;justify-content:space-between!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-experience-copy{text-align:left!important}
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-df-departure{text-align:left!important;display:block!important}
.mst-df-experience-copy>strong,.mst-df-description,.mst-df-counter strong,.mst-df-counter small,.mst-df-departure strong,.mst-df-departure span,.mst-df-status{font-size:20px!important}
.mst-df-departure strong,.mst-df-departure span{display:block!important;text-align:left!important;line-height:1.5!important}

/* Give the date instruction the same readable scale as the booking content. */
.mst-booking-ready.mst-date-first-active .mst-df-panel .mst-section-heading p {
    font-size: 20px !important;
    line-height: 1.6 !important;
    margin: 16px 0 24px !important;
}

/* Clear availability feedback; the spinner only runs during an active check. */
.mst-df-panel .mst-df-status-loading,
.mst-df-panel .mst-df-suggestion p {
    color: #174d70;
    font-weight: 700;
    font-size: 20px !important;
    line-height: 1.6;
}
.mst-df-panel .mst-df-status-loading {
    position: relative;
    padding-left: 36px;
    margin-top: 16px;
    margin-bottom: 20px;
}
/* The rotating SVG arc has its own animation timeline, independent of CSS. */
.mst-df-status-loading::before { content: none !important; display: none !important; }
.mst-df-panel .mst-df-spinner {
    position: absolute;
    left: 0;
    top: 4px;
    display: block;
    width: 24px;
    height: 24px;
    opacity: 1;
    animation: none;
    transition: none;
}