/* ── Terms & Policies popup ──────────────────────────────────────────────── */

.gdb-terms-row {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 8px;
    font-size: 14px; line-height: 1.4;
    cursor: pointer;
    user-select: none;
}
.gdb-terms-row .gdb-terms-check {
    width: 18px; height: 18px; flex: 0 0 18px;
    cursor: pointer;
}
.gdb-terms-row .gdb-terms-open {
    color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.gdb-terms-row .gdb-terms-open:hover { opacity: 0.85; }
.gdb-terms-row--error {
    animation: gdbTermsShake 0.4s ease;
    color: #f87171;
}
@keyframes gdbTermsShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.gdb-terms-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    padding: 20px;
}
.gdb-terms-dialog {
    background: #0f2240;
    color: rgba(255,255,255,0.85);
    max-width: 560px; width: 100%;
    max-height: 85vh; overflow-y: auto;
    padding: 28px 28px 22px;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; line-height: 1.55;
}
.gdb-terms-dialog .gdb-terms-close {
    position: absolute; top: 10px; right: 14px;
    width: 32px; height: 32px;
    border: none; background: none; cursor: pointer;
    font-size: 24px; line-height: 1; color: rgba(255,255,255,0.6);
}
.gdb-terms-dialog .gdb-terms-close:hover { color: #fff; }
.gdb-terms-dialog .gdb-terms-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: #fff; }
.gdb-terms-dialog .gdb-terms-subtitle { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: #fff; }
.gdb-terms-dialog .gdb-terms-section { margin-bottom: 4px; }
.gdb-terms-dialog .gdb-terms-section a { color: #38bdf8; text-decoration: underline; }
.gdb-terms-dialog .gdb-terms-close-btn {
    display: block;
    margin: 18px auto 0;
    padding: 10px 28px;
    background: #FF8600; color: #fff;
    border: none; border-radius: 8px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.gdb-terms-dialog .gdb-terms-close-btn:hover { background: #E67700; }

/* ── Booking Widget ──────────────────────────────────────────────────────── */

.gdb-widget {
    margin-bottom: 10px;
    padding: 20px;
    color: #fff;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    /* Default-center the widget contents. Host pages used to apply a
       Flatsome `text-align: center` on the wrapping column, but the
       shortcode is now responsible for its own alignment. Form rows,
       summary rows, and any other inherently-left-aligned blocks pull
       themselves back to `text-align: left` further down in this file. */
    text-align: center;
}

.gdb-pricing-widget,
.gdb-pricing-widget .gdb-pricing-display,
.gdb-pricing-widget .gdb-pricing-from,
.gdb-pricing-widget .gdb-pricing-amount,
.gdb-pricing-widget .gdb-pricing-summary,
.gdb-pricing-widget .gdb-pricing-select-wrap label,
.gdb-widget .gdb-step-title,
.gdb-widget .gdb-page-title {
    text-align: center;
}

/* Pull data-bearing blocks back to text-align:left so the global center on
   .gdb-widget doesn't knock summary rows, trip rows, and input values into
   weird visual states. Field labels themselves stay centered (set above);
   only the input/value sides revert. */
.gdb-widget .gdb-summary-card,
.gdb-widget .gdb-summary-row,
.gdb-widget .gdb-addons-list,
.gdb-widget .gdb-trip-row {
    text-align: left;
}
.gdb-widget input,
.gdb-widget select,
.gdb-widget textarea {
    text-align: left;
}

.gdb-widget *,
.gdb-widget *::before,
.gdb-widget *::after {
    box-sizing: border-box;
}

/* ── People selector ─────────────────────────────────────────────────────── */

.gdb-selector-wrap {
    margin-bottom: 22px;
}

.gdb-select-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: #fff;
    opacity: 0.95;
}

/* Labels sit ABOVE their field (people / starting location / date) at every
   width — the base stacked layout above handles it; no inline-left override. */

.gdb-select {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    cursor: pointer;
    box-shadow: none !important;
}

.gdb-select option {
    background: #1a2744;
    color: #fff;
}

.gdb-select optgroup {
    background: #1a2744;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* ── Date picker ─────────────────────────────────────────────────────────── */

.gdb-datepicker-wrap {
    margin-bottom: 22px;
}

.gdb-datepicker-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: #fff;
    opacity: 0.95;
}

.gdb-datepicker,
.gdb-datepicker.flatpickr-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

.gdb-datepicker:focus,
.gdb-datepicker.flatpickr-input:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.15) !important;
}

/* ── Flatpickr overrides ─────────────────────────────────────────────────── */

.flatpickr-calendar {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

.flatpickr-day:hover {
    background: #e0f2fe !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

/* Flatsome's global stylesheet sets `select { display: block }` (its custom
   styled dropdown). That cascades into flatpickr's month <select> and pushes
   the year input wrapper onto a second line — where it sits behind the
   weekday header row. Force the flatpickr month dropdown back to inline so
   month + year share one line. Background image override prevents Flatsome's
   chevron from overlaying flatpickr's own caret. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block !important;
    background-image: none !important;
    box-shadow: none !important;
    padding-right: 0 !important;
}

/* ── Slot tiles ──────────────────────────────────────────────────────────── */

.gdb-slots-wrap {
    margin-bottom: 18px;
    text-align: center;
}

.gdb-slots-heading {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0 0 14px;
    color: #fff;
    text-align: center;
}

.gdb-slots-subheading {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
    margin: 0 0 10px;
    color: #fff;
}

.gdb-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.gdb-slot-tile {
    position: relative;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    transition: all 0.15s;
    user-select: none;
    background: transparent;
    min-width: 90px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.gdb-slot-time {
    font-size: 14px;
    font-weight: 600;
}

.gdb-slot-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
}

.gdb-slot-badge--available   { color: #4ade80; }
.gdb-slot-badge--last-minute { color: #FF8600; }
.gdb-slot-badge--last-spots  { color: #f59e0b; }
.gdb-slot-badge--sold-out    { color: #ef4444; }

.gdb-slot-tile:hover:not(.gdb-slot-tile--sold-out) {
    border-color: #fff;
    background: rgba(255,255,255,0.12);
}

/* Bridge-mode trip rows (DTV-style list, replaces time tiles).
   Desktop layout — 2-column grid:
     [ Date - Trip Name ]  [ Availability notice ]
     [ Details          ]  [ Price               ]
   Mobile — collapses to a centered single-column stack (overrides at the
   bottom of this file). */
.gdb-slots:has(.gdb-trip-row),
.gdb-slots:has(.gdb-trip-nav) { flex-direction: column; align-items: stretch; gap: 8px; }
.gdb-trip-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: start;
    padding: 12px 14px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.15s;
}
.gdb-trip-row:hover:not(.gdb-trip-row--sold-out):not(.gdb-trip-row--selected):not(.gdb-trip-row--empty) {
    border-color: #fff;
    background: rgba(255,255,255,0.10);
}
.gdb-trip-row--selected,
.gdb-trip-row--selected:hover { border-color: #FF8600; background: rgba(255,134,0,0.12); }
.gdb-trip-row--sold-out     { opacity: 0.5; cursor: not-allowed; }
.gdb-trip-row--sold-out .gdb-trip-row__title { text-decoration: line-through; }
.gdb-trip-row--empty        { opacity: 0.7; cursor: default; text-align: center; }

.gdb-trip-row__title        { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 16px; line-height: 1.35; }
.gdb-trip-row__date         { opacity: 0.9; }
.gdb-trip-row__name         { font-weight: 600; }
.gdb-trip-row__meta         { grid-column: 1; grid-row: 2; margin-top: 4px; font-size: 14px; opacity: 0.75; line-height: 1.35; }

.gdb-trip-row__status-line  { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.gdb-trip-row__price        { font-weight: 600; font-size: 14px; white-space: nowrap; }
.gdb-trip-row__pp           { font-weight: 400; opacity: 0.7; font-size: 11px; margin-left: 1px; }
.gdb-trip-row__por          { font-style: italic; opacity: 0.8; font-size: 12px; }

.gdb-trip-row__badge        { font-size: 14px; font-weight: 700; white-space: nowrap; }
.gdb-trip-row__badge--available   { color: #4ade80; }
.gdb-trip-row__badge--last-minute { color: #FF8600; }
.gdb-trip-row__badge--last-spots  { color: #f59e0b; }
.gdb-trip-row__badge--sold-out    { color: #ef4444; }

.gdb-trip-nav {
    display: block; width: 100%;
    background: rgba(255,255,255,0.08); color: #fff;
    border: 1px solid rgba(255,255,255,0.25); border-radius: 6px;
    padding: 8px 0; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
    transition: background 0.15s;
}
.gdb-trip-nav:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.gdb-trip-nav:disabled { opacity: 0.35; cursor: not-allowed; }
/* Desktop — the Previous/Next 3-day buttons are half-width and centred (the
   trip rows stay full width). Mobile keeps the full-width base rule. */
@media (min-width: 481px) {
    .gdb-trip-nav {
        width: 50%;
        align-self: center;
        padding: 5px 0;
        font-size: 13px;
    }
}

.gdb-trip-row__schedule-tail {
    margin-top: 4px; font-size: 12px; opacity: 0.6; text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px;
}

/* Mobile — drop the desktop grid; everything stacks vertically, the
   availability notice + price both centered at the bottom. Font sizes
   match desktop so the mobile experience feels readable, not shrunken. */
@media (max-width: 480px) {
    .gdb-trip-row { display: block; padding: 12px; }
    .gdb-trip-row__title,
    .gdb-trip-row__meta,
    .gdb-trip-row__status-line { grid-column: auto; grid-row: auto; }
    .gdb-trip-row__status-line {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 10px;
    }
}

/* Inside the dark liveaboard flow, force the dark variant regardless of
   any .gdb-theme-light class applied by the host page — the flow page has
   its own dark background and the white card looks wrong on it. */
.gdb-lb-flow .gdb-trip-row,
.gdb-lb-flow.gdb-theme-light .gdb-trip-row {
    color: #fff;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.3);
}
.gdb-lb-flow .gdb-trip-row:hover:not(.gdb-trip-row--sold-out):not(.gdb-trip-row--selected):not(.gdb-trip-row--empty),
.gdb-lb-flow.gdb-theme-light .gdb-trip-row:hover:not(.gdb-trip-row--sold-out):not(.gdb-trip-row--selected):not(.gdb-trip-row--empty) {
    border-color: #fff;
    background: rgba(255,255,255,0.10);
}

/* Light theme */
.gdb-theme-light .gdb-trip-row { color: #1d2327; background: #fff; border-color: rgba(0,0,0,0.15); }
.gdb-theme-light .gdb-trip-row:hover:not(.gdb-trip-row--sold-out):not(.gdb-trip-row--selected):not(.gdb-trip-row--empty) {
    border-color: #1d2327; background: #f6f7f7;
}
.gdb-theme-light .gdb-trip-row--selected,
.gdb-theme-light .gdb-trip-row--selected:hover { border-color: #c2410c; background: #fff7ed; }
.gdb-theme-light .gdb-trip-nav { background: #f0f0f1; color: #1d2327; border-color: rgba(0,0,0,0.15); }
.gdb-theme-light .gdb-trip-nav:hover:not(:disabled) { background: #e5e5e5; }

.gdb-slot-tile--selected {
    border-color: #fff;
    background: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

.gdb-slot-tile--sold-out {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.gdb-slot-loading {
    font-size: 14px;
    opacity: 0.6;
    padding: 6px 0;
}

.gdb-slot-loading.gdb-slot-prompt {
    display: block;
    font-size: 18px;
    font-weight: 600;
    opacity: 0.95;
    padding: 14px 0;
    text-align: center;
}

.gdb-retry-link {
    color: #38bdf8 !important;
    text-decoration: underline !important;
    font-weight: 600;
    cursor: pointer;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.gdb-cta {
    margin-top: 4px;
}

.gdb-cta-summary {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.4;
}

.gdb-cta-price {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: 0.2px;
    line-height: 1.6;
}

/* Stack regular + discounted vertically so the discount sits below the
   crossed-out original price. Cleaner on mobile, easier to scan. */
.gdb-price-regular {
    display: block;
    white-space: nowrap;
    text-decoration: line-through;
    opacity: 0.55;
}

.gdb-price-disc {
    display: block;
    white-space: nowrap;
    color: #25b791;
    font-weight: 700;
    margin-top: 2px;
}

/* Add-ons picker — its own step, box hugs the content rather than stretching
   to the full widget width. Centered horizontally. */
.gdb-addons-view { margin: 0 auto; max-width: 100%; }
.gdb-addons-picker {
    margin: 16px auto;
    padding: 16px 22px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    display: inline-block;
    width: auto;
    min-width: 320px;
    max-width: 100%;
}
.gdb-addons-view { text-align: center; }
.gdb-addons-view > .gdb-form-actions { text-align: left; max-width: 480px; margin-left: auto; margin-right: auto; }
.gdb-addons-picker-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.gdb-addons-list { text-align: left; }
.gdb-addons-list .gdb-addon-row {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 0; font-size: 16px; cursor: pointer;
}
.gdb-addons-list .gdb-addon-qty-wrap {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    min-width: 44px;
}
.gdb-addons-list .gdb-addon-check {
    width: 18px; height: 18px;
    margin: 0; cursor: pointer; vertical-align: middle;
}
.gdb-addons-list .gdb-addon-qty {
    width: 56px; height: 32px;
    padding: 0 8px; font-size: 14px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    appearance: auto;
}
.gdb-addons-list .gdb-addon-info {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
/* Desktop: title and price on the same line, description below the title. */
.gdb-addons-list .gdb-addon-head {
    display: flex; align-items: baseline; gap: 12px;
    width: 100%;
}
.gdb-addons-list .gdb-addon-label {
    flex: 1 1 auto; min-width: 0;
    font-size: 16px; line-height: 1.25; font-weight: 700;
}
.gdb-addons-list .gdb-addon-desc  { font-size: 14px; line-height: 1.3; opacity: 0.75; font-weight: 400; margin-top: 2px; }
.gdb-addons-list .gdb-addon-price {
    flex: 0 0 auto;
    font-size: 14px; line-height: 1.2; opacity: 0.85; font-weight: 600;
    white-space: nowrap;
}

/* Mobile: stack title, description, price vertically (the .gdb-addon-head
   flex row collapses to column). */
@media (max-width: 480px) {
    .gdb-addons-list .gdb-addon-head {
        flex-direction: column; align-items: flex-start; gap: 2px;
    }
    .gdb-addons-list .gdb-addon-price { margin-top: 2px; }
}
.gdb-addon-refresher-note {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: rgba(255,134,0,0.10);
    border-left: 3px solid #FF8600;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.45;
    color: #fff;
}
.gdb-addons-list .gdb-addon-row--refresher {
    background: rgba(255,134,0,0.08);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0 -10px;
}
.gdb-theme-light .gdb-addons-picker { border-color: rgba(0,0,0,0.12); background: #fff; }
.gdb-theme-light .gdb-addon-refresher-note { color: #1f2937; background: rgba(255,134,0,0.10); }

.gdb-price-mpf-note {
    display: block;
    font-size: 11px;
    opacity: 0.65;
    margin-top: 4px;
    font-weight: 400;
}

/* Price breakdown block — sits under the Total row, smaller font, native
   <details> so it expands on click. The breakdown rows are children of
   the summary and reveal when open. */
.gdb-summary-breakdown {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.15);
}
.gdb-summary-breakdown-label {
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.75;
    margin: 0 0 6px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.gdb-summary-breakdown-label::-webkit-details-marker { display: none; }
.gdb-summary-breakdown-label::after {
    content: "▾";
    font-size: 11px;
    transition: transform 0.15s;
    opacity: 0.75;
}
.gdb-summary-breakdown[open] .gdb-summary-breakdown-label::after { transform: rotate(180deg); }
.gdb-summary-breakdown:hover .gdb-summary-breakdown-label { opacity: 0.85; }
/* Liveaboard summary: drop the breakdown label down to 12px so it sits at
   the same visual weight as the rest of the lb summary text. The std
   widget keeps the 14px / 0.4 letter-spacing reference. */
.gdb-lb-summary .gdb-summary-breakdown-label {
    font-size: 12px;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.gdb-summary-breakdown-row {
    font-size: 14px;
    opacity: 0.8;
    padding: 2px 0;
}
.gdb-summary-breakdown-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; }
.gdb-summary-breakdown-row .gdb-summary-label { font-weight: 500; flex: 1; min-width: 0; }
.gdb-summary-breakdown-row .gdb-summary-value { white-space: nowrap; text-align: right; }
.gdb-summary-note { font-style: italic; opacity: 0.7; font-weight: 400; font-size: 11px; display: inline-block; }
@media (max-width: 480px) {
    /* Note wraps to its own line under the label so the row stays cleanly
       split (label + value on top, italic note below). */
    .gdb-summary-note { display: block; margin-top: 2px; }
}
.gdb-theme-light .gdb-summary-breakdown { border-top-color: rgba(0,0,0,0.12); }

.gdb-btn {
    display: block;
    width: 100%;
    background: #FF8600;
    color: #fff !important;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none !important;
    padding: 14px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: 0.3px;
}

.gdb-btn:hover {
    opacity: 0.88;
}

.gdb-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gdb-btn--request {
    background: #FF8600;
    color: #fff !important;
}

/* Free-cancellation blurb under the Book Now button.
   JS toggles display; hidden when booking is already within 24h. */
.gdb-cta-cancel {
    display: block;
    text-align: center;
    margin: 12px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: #fff;
}

.gdb-cta-cancel-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
}

/* Step 1 Book Now / continue button — tighter than generic .gdb-btn. */
.gdb-btn-continue {
    padding: 5px 16px;
    font-size: 16px;
}

/* ── Book via WhatsApp button (Step 1 CTA + details pages) ────────────────── */
.gdb-wa-btn {
    background: #1faf54 !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.gdb-wa-btn:hover { opacity: 0.9; }
.gdb-wa-icon { flex-shrink: 0; vertical-align: middle; }

/* ── Pricing-summary note at the bottom of the running summary card ───────── */
.gdb-sb-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255,255,255,0.7);
}
.gdb-theme-light .gdb-sb-note { border-top-color: #e5e7eb; color: #6b7280; }

/* ── Time tiles: keep their natural size, but never more than 4 per row ────
   (constrain the row width to ~4 tiles + gaps and centre it; flex-wrap then
   pushes the 5th onto a new centred row). */
.gdb-slots--cap4 {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Payment type selector ───────────────────────────────────────────────── */

.gdb-payment-type-wrap {
    margin-bottom: 18px;
}

.gdb-payment-type-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
}

.gdb-payment-options {
    display: flex;
    gap: 8px;
}

.gdb-payment-opt {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.gdb-payment-opt:hover {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.gdb-payment-opt--selected {
    background: rgba(74, 222, 128, 0.15);
    border-color: #4ade80;
    color: #4ade80;
}

.gdb-deposit-note {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    border-left: 3px solid #4ade80;
}

/* ── Step 2: Customer Details Form ───────────────────────────────────────── */

.gdb-back-link {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    padding: 8px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    display: inline-block;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gdb-back-link:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}

.gdb-step-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
    text-align: center;
}

/* Page title + persistent summary box. Renders above all steps; the same
   markup is emitted once at the widget root so the customer always sees
   what they're booking through Step 1 → 2 → 3. */
.gdb-page-title {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    /* Centered — host pages used to apply a Flatsome `text-align: center`
       on the wrapping section but now the alignment must come from the
       shortcode so the widget stays consistent regardless of host CSS. */
    text-align: center;
}
/* Numbered step indicator — same visual language as the liveaboard
   flow's stepper (.gdb-lb-stepper). Three pills representing Step 1
   (Select) → Step 2 (Your Details) → Step 3 (Pay). Updated live by a
   MutationObserver in class-widget.php (no widget.js changes). */
.gdb-step-indicator {
    display: flex;
    gap: 6px;
    margin: 0 0 50px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap;
}
.gdb-step-indicator > li::before,
.gdb-step-indicator > li::marker { content: none !important; }
.gdb-step-indicator-step {
    flex: 1 1 0;
    padding: 11px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin: 0 !important;
    transition: background .15s, border-color .15s, color .15s;
}
.gdb-step-indicator-step.is-current {
    background: rgba(255,134,0,0.18);
    border-color: #FF8600;
    color: #fff;
}
.gdb-step-indicator-step.is-done {
    background: rgba(74,222,128,0.10);
    border-color: rgba(74,222,128,0.35);
    color: #4ade80;
}
.gdb-step-indicator-num {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #fff;
    line-height: 20px;
    font-size: 14px;
    margin-right: 6px;
    text-align: center;
}
.gdb-step-indicator-label { display: inline; }
.gdb-step-indicator-step.is-current .gdb-step-indicator-num { background: #FF8600; }
.gdb-step-indicator-step.is-done .gdb-step-indicator-num { background: #4ade80; color: #0f172a; }
.gdb-theme-light .gdb-step-indicator-step { background: #f8fafc; border-color: #e5e7eb; color: #94a3b8; }
.gdb-theme-light .gdb-step-indicator-step.is-current { background: #fff7ed; border-color: #FF8600; color: #0f172a; }
.gdb-theme-light .gdb-step-indicator-step.is-done { background: #f0fdf4; border-color: #bbf7d0; color: #047857; }
@media (max-width: 600px) {
    /* Mobile: stack number above label so each pill stays compact. */
    .gdb-step-indicator-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        padding: 8px 4px;
    }
    .gdb-step-indicator-num { margin-right: 0; }
    .gdb-step-indicator-label { display: block; line-height: 1.1; }
}
/* Top summary card — same visual style as the Step 3 payment summary. 50% wide
   on desktop, centered; full width on mobile. */
.gdb-top-summary {
    max-width: 65%;
    margin: 0 auto 22px;
}
.gdb-picker-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    text-decoration: none !important;
    color: inherit;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}
.gdb-picker-card:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.35);
}
.gdb-theme-light .gdb-picker-card {
    background: #fff;
    border-color: #e5e7eb;
}
.gdb-theme-light .gdb-picker-card:hover {
    background: #f9fafb;
    border-color: #0284c7;
}
.gdb-top-summary-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
}
.gdb-theme-light .gdb-top-summary-title { color: #1f2937; }
@media (max-width: 640px) {
    .gdb-top-summary { max-width: 100%; }
}
.gdb-theme-light .gdb-page-title { color: #1f2937; }
.gdb-theme-light .gdb-summary-box {
    border-color: #e5e7eb;
    background: #fff;
}
.gdb-theme-light .gdb-summary-box-activity { color: #1f2937; }
.gdb-theme-light .gdb-summary-box-location { color: #6b7280; opacity: 1; }
.gdb-step-subtitle {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 20px;
    opacity: 0.65;
    text-align: center;
}
.gdb-step-title + .gdb-form-fields,
.gdb-step-title + .gdb-form-fields-1,
.gdb-step-title + .gdb-form-fields-2 {
    margin-top: 14px;
}
/* Side-by-side Back + Continue action bar at the bottom of each details page.
   Buttons are forced to the same height via explicit `height` so the borders
   / display differences (border-box on Back vs borderless block on Continue)
   can't produce a mismatch. Vertical centering inside both buttons is
   handled by flex-center; padding is horizontal-only. */
.gdb-form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 22px 0 0;
    width: 100%;
}
.gdb-form-actions .gdb-btn {
    /* Override .gdb-btn base on both children so their dimensions are
       literally identical pixel-for-pixel. */
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
}
.gdb-form-actions .gdb-btn--back {
    flex: 0 0 auto;
    width: auto;
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.35);
    padding-left: 14px;
    padding-right: 14px;
}
.gdb-form-actions .gdb-btn--back:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.08);
    opacity: 1;
}
.gdb-form-actions .gdb-btn-details-next,
.gdb-form-actions .gdb-btn-submit-details {
    flex: 1 1 auto;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
}
.gdb-theme-light .gdb-form-actions .gdb-btn--back {
    color: #1f2937 !important;
    border-color: rgba(0,0,0,0.2);
}
.gdb-theme-light .gdb-form-actions .gdb-btn--back:hover {
    border-color: #1f2937;
    background: #f3f4f6;
}
.gdb-theme-light .gdb-step-subtitle { color: #6b7280; opacity: 1; }

.gdb-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gdb-form-row--half {
    display: flex;
    gap: 10px;
}

.gdb-form-row--half > .gdb-field {
    flex: 1;
}

.gdb-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gdb-field label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.8);
    text-align: center;
}

.gdb-req {
    color: #f87171;
}

.gdb-input,
.gdb-widget input[type="text"].gdb-input,
.gdb-widget input[type="email"].gdb-input,
.gdb-widget input[type="tel"].gdb-input,
.gdb-widget select.gdb-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: border-color 0.2s, background 0.2s;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}

.gdb-input:focus,
.gdb-widget input.gdb-input:focus,
.gdb-widget select.gdb-input:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
}

.gdb-input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

select.gdb-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: rgba(255,255,255,0.1);
    cursor: pointer;
}

select.gdb-input option {
    background: #1a2744;
    color: #fff;
}

/* Birthday dropdowns — 3 inline selects (Day / Month / Year). Layout must
   keep them on a single line even when the parent field is in a half-column
   on desktop OR full-width on mobile. We use flex with min-width:0 to let
   selects shrink below their content-determined width, plus small gap and
   trimmed padding so the year select still shows 4 digits on narrow screens. */

.gdb-birthday-selects {
    display: flex;
    gap: 6px;
    width: 100%;
}

.gdb-birthday-selects select {
    flex: 1 1 0;
    min-width: 0;
    /* Slimmer side padding than the default .gdb-input so each select can
       breathe even when the parent is squeezed into a half column on a
       narrow phone. The right-side padding keeps clear of the dropdown
       caret most browsers render. */
    padding-left: 6px;
    padding-right: 18px;
    text-overflow: ellipsis;
    background-position: right 4px center;
}

.gdb-birthday-selects .gdb-bday-year {
    /* Year needs a touch more room to fit 4 digits comfortably with the caret. */
    flex: 1.25 1 0;
}

@media (max-width: 480px) {
    .gdb-birthday-selects { gap: 4px; }
    .gdb-birthday-selects select {
        padding-left: 4px;
        padding-right: 14px;
        font-size: 14px;
    }
}

.gdb-form-error {
    color: #f87171;
    font-size: 14px;
    padding: 8px 12px;
    background: rgba(248,113,113,0.1);
    border-radius: 6px;
}

/* Dive template: group members */

.gdb-group-title {
    font-size: 14px;
    font-weight: 700;
    margin: 8px 0 4px;
    color: rgba(255,255,255,0.9);
}

.gdb-group-member {
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
}

.gdb-member-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 8px;
}

/* ── Step 3: Payment ─────────────────────────────────────────────────────── */

.gdb-summary-card {
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.1);
}

.gdb-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0;
    font-size: 14px;
}

.gdb-summary-label {
    color: rgba(255,255,255,0.6);
    flex: 0 0 auto;
    min-width: 0;
}

.gdb-summary-value {
    font-weight: 600;
    color: #fff;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

.gdb-sum-total-row {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 15px;
}

.gdb-sum-charge-row {
    font-size: 15px;
}

.gdb-sum-charge {
    color: #4ade80 !important;
    font-weight: 700 !important;
}

/* Coupon */

.gdb-coupon-section {
    margin-bottom: 16px;
}

.gdb-coupon-toggle {
    background: none;
    border: none;
    color: #2dd4bf;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.gdb-coupon-row {
    margin-top: 10px;
    gap: 8px;
    align-items: center;
}

.gdb-coupon-input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.gdb-coupon-input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.6);
}

.gdb-coupon-apply {
    height: 40px;
    padding: 0 18px;
    background: #2dd4bf;
    color: #0a1628;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.gdb-coupon-apply:disabled {
    opacity: 0.5;
}

.gdb-coupon-msg {
    font-size: 14px;
    margin-top: 6px;
}

.gdb-coupon-msg--success { color: #4ade80; }
.gdb-coupon-msg--error   { color: #f87171; }

/* Stripe element */

.gdb-express-checkout {
    margin-bottom: 12px;
}

.gdb-express-divider {
    /* JS flips display:flex when a wallet is confirmed available */
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.45);
}

.gdb-express-divider::before,
.gdb-express-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.18);
}

.gdb-theme-light .gdb-express-divider {
    color: #94a3b8 !important;
}

.gdb-theme-light .gdb-express-divider::before,
.gdb-theme-light .gdb-express-divider::after {
    background: #cbd5e1 !important;
}

.gdb-stripe-element-wrap {
    margin: 16px 0;
    padding: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    min-height: 60px;
}

.gdb-stripe-loading {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.gdb-stripe-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
}

/* Pay button */

.gdb-btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #2dd4bf, #4ade80);
    color: #0a1628 !important;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
}

.gdb-btn-pay:hover {
    opacity: 0.9;
}

.gdb-btn-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gdb-payment-error {
    color: #f87171;
    font-size: 14px;
    padding: 10px 12px;
    background: rgba(248,113,113,0.1);
    border-radius: 8px;
    margin-bottom: 10px;
}

/* ── Confirmation ────────────────────────────────────────────────────────── */

.gdb-confirmation {
    text-align: center;
    padding: 32px 20px;
}

.gdb-confirmation-icon {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}

.gdb-confirmation-title {
    font-size: 22px;
    font-weight: 700;
    color: #4ade80;
    margin: 0 0 10px;
}

.gdb-confirmation-body {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0;
}

.gdb-booking-ref {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-top: 16px;
}

/* ── Trust bar ───────────────────────────────────────────────────────────── */

.gdb-trust-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.gdb-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
}

.gdb-trust-item svg {
    flex-shrink: 0;
}

.gdb-trust-item:nth-child(1) svg { stroke: #38bdf8; }
.gdb-trust-item:nth-child(1) { color: #38bdf8; }

.gdb-trust-item:nth-child(2) svg { stroke: #a78bfa; }
.gdb-trust-item:nth-child(2) { color: #a78bfa; }

.gdb-trust-cancel {
    color: #4ade80;
}

.gdb-trust-cancel svg {
    stroke: #4ade80;
}

.gdb-card-brands {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.gdb-card-logo {
    height: 24px;
    width: auto;
    border-radius: 3px;
}

.gdb-powered-stripe {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    margin-left: 4px;
}

.gdb-powered-stripe svg {
    stroke: #635bff;
}

.gdb-powered-stripe strong {
    color: #635bff;
    font-weight: 700;
}

/* ── Pricing Widget ──────────────────────────────────────────────────────── */

.gdb-pricing-widget {
    color: #fff;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.gdb-pricing-widget *,
.gdb-pricing-widget *::before,
.gdb-pricing-widget *::after {
    box-sizing: border-box;
}

.gdb-pricing-from {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin: 0 0 16px;
}

.gdb-pricing-from-amount {
    color: #4ade80;
    font-weight: 700;
    font-size: 18px;
}

.gdb-pricing-select-wrap {
    margin-bottom: 16px;
}

.gdb-pricing-select-wrap label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: #fff;
    opacity: 0.95;
}

.gdb-pricing-display {
    padding: 14px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    margin-bottom: 16px;
}

.gdb-pricing-amount {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

.gdb-pricing-summary {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    margin: 10px 0 0;
    font-style: italic;
    line-height: 1.4;
}

.gdb-pricing-cta {
    display: block;
    width: 100%;
    text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .gdb-slot-tile {
        padding: 9px 14px;
        font-size: 14px;
    }
    .gdb-form-row--half {
        flex-direction: column;
    }
    .gdb-summary-row {
        font-size: 14px;
    }
    .gdb-sum-total-row,
    .gdb-sum-charge-row {
        font-size: 15px;
    }
    .gdb-trust-bar {
        gap: 10px;
    }
    .gdb-trust-item {
        font-size: 18px;
    }
    .gdb-card-brands {
        gap: 8px;
    }
    .gdb-pricing-widget {
        padding: 0 4px;
    }
    .gdb-pricing-from {
        font-size: 14px;
    }
    .gdb-pricing-from-amount {
        font-size: 16px;
    }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
/* Overrides the default dark styling for embedding on white/light pages.
   Applied by adding .gdb-theme-light alongside .gdb-widget / .gdb-pricing-widget.
   Brand accents (orange CTA, green success, red errors, stripe gradient)
   keep their colors — only neutrals flip.
   NOTE: All colors use !important because Flatsome (and many themes) apply
   column-level color via descendant rules like `.dark *` that tie or beat
   a single-class selector on specificity.                                    */

.gdb-widget.gdb-theme-light,
.gdb-pricing-widget.gdb-theme-light { color: #1f2937 !important; }

/* Primary labels / headings */
.gdb-theme-light .gdb-select-group label,
.gdb-theme-light .gdb-datepicker-label,
.gdb-theme-light .gdb-slots-heading,
.gdb-theme-light .gdb-cta-summary,
.gdb-theme-light .gdb-cta-price,
.gdb-theme-light .gdb-payment-type-label,
.gdb-theme-light .gdb-step-title,
.gdb-theme-light .gdb-summary-value,
.gdb-theme-light .gdb-pricing-select-wrap label,
.gdb-theme-light .gdb-pricing-amount,
.gdb-theme-light .gdb-group-title { color: #1f2937 !important; }

/* Muted text */
.gdb-theme-light .gdb-slots-subheading,
.gdb-theme-light .gdb-field label,
.gdb-theme-light .gdb-member-label,
.gdb-theme-light .gdb-summary-label,
.gdb-theme-light .gdb-stripe-label,
.gdb-theme-light .gdb-confirmation-body,
.gdb-theme-light .gdb-pricing-from,
.gdb-theme-light .gdb-pricing-summary { color: #6b7280 !important; opacity: 1; }

.gdb-theme-light .gdb-back-link {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.gdb-theme-light .gdb-back-link:hover {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
}
.gdb-theme-light .gdb-booking-ref,
.gdb-theme-light .gdb-stripe-loading { color: #9ca3af !important; }

/* Inputs — select, datepicker, generic .gdb-input. */
.gdb-theme-light .gdb-select,
.gdb-theme-light .gdb-input,
.gdb-theme-light .gdb-datepicker,
.gdb-theme-light .gdb-datepicker.flatpickr-input,
.gdb-theme-light input[type="text"].gdb-input,
.gdb-theme-light input[type="email"].gdb-input,
.gdb-theme-light input[type="tel"].gdb-input,
.gdb-theme-light select.gdb-input {
    border-color: #d1d5db !important;
    background-color: #fff !important;
    color: #1f2937 !important;
}

.gdb-theme-light .gdb-input::placeholder,
.gdb-theme-light .gdb-datepicker::placeholder { color: #9ca3af !important; }

.gdb-theme-light .gdb-input:focus,
.gdb-theme-light .gdb-datepicker:focus,
.gdb-theme-light .gdb-datepicker.flatpickr-input:focus,
.gdb-theme-light input.gdb-input:focus,
.gdb-theme-light select.gdb-input:focus {
    border-color: #0ea5e9 !important;
    background-color: #fff !important;
}

/* Drop the chevron/calendar SVG affordances — on white with a visible border,
   the field's purpose is clear and users get native UI on click. */
.gdb-theme-light .gdb-select,
.gdb-theme-light select.gdb-input,
.gdb-theme-light .gdb-datepicker,
.gdb-theme-light .gdb-datepicker.flatpickr-input {
    background-image: none !important;
}
.gdb-theme-light .gdb-select option,
.gdb-theme-light select.gdb-input option { background: #fff; color: #1f2937; }

/* Slot tiles */
.gdb-theme-light .gdb-slot-tile {
    border-color: #d1d5db;
    color: #1f2937;
    background: #fff;
}
.gdb-theme-light .gdb-slot-tile:hover:not(.gdb-slot-tile--sold-out) {
    border-color: #0ea5e9;
    background: #f0f9ff;
}
.gdb-theme-light .gdb-slot-tile--selected {
    border-color: #0ea5e9;
    background: #e0f2fe;
    box-shadow: 0 0 0 2px rgba(14,165,233,0.3);
    color: #1f2937;
}

/* Card-style surfaces (group member, summary card, stripe wrap, pricing display) */
.gdb-theme-light .gdb-group-member,
.gdb-theme-light .gdb-summary-card,
.gdb-theme-light .gdb-stripe-element-wrap,
.gdb-theme-light .gdb-pricing-display {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.gdb-theme-light .gdb-sum-total-row { border-top-color: #e5e7eb; }
.gdb-theme-light .gdb-sum-charge { color: #16a34a !important; }

/* Payment type options */
.gdb-theme-light .gdb-payment-opt {
    border-color: #d1d5db;
    background: #fff;
    color: #6b7280;
}
.gdb-theme-light .gdb-payment-opt:hover {
    border-color: #9ca3af;
    color: #1f2937;
}
.gdb-theme-light .gdb-payment-opt--selected {
    background: rgba(74,222,128,0.15);
    border-color: #4ade80;
    color: #16a34a;
}
.gdb-theme-light .gdb-deposit-note {
    color: #475569;
    background: #f0fdf4;
    border-left-color: #4ade80;
}

/* Coupon */
.gdb-theme-light .gdb-coupon-input {
    border-color: #d1d5db;
    background: #fff;
    color: #1f2937;
}
.gdb-theme-light .gdb-coupon-input:focus { border-color: #2dd4bf; }
.gdb-theme-light .gdb-coupon-apply { color: #fff; }

/* Trust bar */
.gdb-theme-light .gdb-trust-bar { border-top-color: #e5e7eb; }
.gdb-theme-light .gdb-trust-item { color: #6b7280; }
.gdb-theme-light .gdb-trust-item:nth-child(1),
.gdb-theme-light .gdb-trust-item:nth-child(1) svg { color: #0284c7; stroke: #0284c7; }
.gdb-theme-light .gdb-trust-item:nth-child(2),
.gdb-theme-light .gdb-trust-item:nth-child(2) svg { color: #7c3aed; stroke: #7c3aed; }
.gdb-theme-light .gdb-trust-cancel,
.gdb-theme-light .gdb-trust-cancel svg { color: #16a34a; stroke: #16a34a; }
.gdb-theme-light .gdb-powered-stripe { color: #6b7280; }

/* Slot badges — darker greens on white */
.gdb-theme-light .gdb-slot-badge--available { color: #16a34a; }

/* Confirmation */
.gdb-theme-light .gdb-confirmation-title { color: #16a34a; }
.gdb-theme-light .gdb-confirmation-body  { color: #4b5563; }

/* Free-cancellation blurb — readable on white */
.gdb-theme-light .gdb-cta-cancel { color: #4b5563 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Step 2 v1.2.0 — Page 1 / Page 2 split + accordion guests + group warning
   ═══════════════════════════════════════════════════════════════════════════ */

.gdb-details-page { display: block; }

/* Half/full grid: container is grid, full fields span both columns. */
.gdb-form-fields-1,
.gdb-form-fields-2 .gdb-form-section,
.gdb-form-fields-2 .gdb-guest-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 14px;
}
.gdb-form-fields-1 > .gdb-field,
.gdb-form-fields-2 .gdb-form-section > .gdb-field,
.gdb-form-fields-2 .gdb-guest-body > .gdb-field { margin-bottom: 0; }
.gdb-form-fields-1 > .gdb-field[data-width="full"],
.gdb-form-fields-1 > .gdb-wa-fields,
.gdb-form-fields-2 .gdb-form-section > .gdb-field[data-width="full"],
.gdb-form-fields-2 .gdb-guest-body > .gdb-field[data-width="full"],
.gdb-form-fields-2 .gdb-guest-body > .gdb-guest-actions {
    grid-column: 1 / -1;
}
/* WhatsApp fields container — inherit grid from parent. */
.gdb-form-fields-1 > .gdb-wa-fields {
    display: contents;
}
/* Mobile: every field full-width. */
@media (max-width: 640px) {
    .gdb-form-fields-1,
    .gdb-form-fields-2 .gdb-form-section,
    .gdb-form-fields-2 .gdb-guest-body { grid-template-columns: 1fr; }
}

/* Textarea support (special_requests, accommodation). */
textarea.gdb-input {
    width: 100% !important;
    min-height: 76px !important;
    height: auto !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif;
    resize: vertical;
    line-height: 1.45;
}
textarea.gdb-input:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.15) !important;
}
.gdb-theme-light textarea.gdb-input {
    background: #fff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}
.gdb-theme-light textarea.gdb-input:focus {
    border-color: #0284c7 !important;
    background: #fff !important;
}

/* Guest accordion. */
.gdb-guests { margin-top: 4px; }
.gdb-guest {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.gdb-guest-toggle {
    width: 100%;
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 0;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.15s;
}
.gdb-guest-toggle:hover { background: rgba(255,255,255,0.1); }
/* Header layout: label on the left, hint pushed to the right just before
   the chevron via margin-left:auto. Hint disappears when open. */
.gdb-guest-toggle-label {
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gdb-guest-toggle-hint  {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #FF8600;
    text-transform: uppercase;
    white-space: nowrap;
}
.gdb-guest-toggle--open .gdb-guest-toggle-hint { display: none; }
.gdb-guest-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,134,0,0.18);
    color: #FF8600;
    transition: transform 0.2s, background 0.15s;
    flex-shrink: 0;
}
.gdb-guest-toggle-icon svg { stroke: #FF8600; }
.gdb-guest-toggle:hover .gdb-guest-toggle-icon { background: rgba(255,134,0,0.28); }
.gdb-guest-toggle--open .gdb-guest-toggle-icon { transform: rotate(180deg); }
.gdb-guest-body { padding: 16px 18px; }
.gdb-guest-body .gdb-field:last-child { margin-bottom: 0; }
.gdb-guest-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}
.gdb-btn-next-guest {
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.35);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gdb-btn-next-guest:hover {
    background: rgba(74,222,128,0.25);
    border-color: rgba(74,222,128,0.55);
}
.gdb-theme-light .gdb-guest {
    border-color: #e5e7eb;
}
.gdb-theme-light .gdb-guest-toggle {
    background: #f3f4f6;
    color: #1f2937;
}
.gdb-theme-light .gdb-guest-toggle:hover {
    background: #e5e7eb;
}

/* Form sections (visual divider between prelude and template booker block). */
.gdb-form-section { margin-bottom: 8px; }
.gdb-form-section + .gdb-form-section { margin-top: 4px; }

/* Group-too-large takeover on Step 1. */
.gdb-too-many {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.25);
}
.gdb-too-many-msg {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}
.gdb-too-many-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gdb-btn-contact {
    display: inline-block;
    padding: 10px 16px;
    background: #4ade80;
    color: #052e1c !important;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.gdb-btn-contact:hover { background: #22c55e; }
.gdb-btn-contact--alt {
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3);
}
.gdb-btn-contact--alt:hover {
    background: rgba(255,255,255,0.08);
}
.gdb-theme-light .gdb-too-many {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.3);
}
.gdb-theme-light .gdb-too-many-msg { color: #1f2937; }
.gdb-theme-light .gdb-btn-contact--alt {
    color: #1f2937 !important;
    border-color: #d1d5db;
}
.gdb-theme-light .gdb-btn-contact--alt:hover { background: #f3f4f6; }

/* WhatsApp-conditional fields. */
.gdb-wa-fields { transition: opacity 0.15s; }

/* Trust bar sits at the bottom of the widget — visually under whichever
   step's action button is active. No payment icons (Step 3 has its own). */
.gdb-form-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.gdb-form-trust .gdb-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.gdb-form-trust .gdb-trust-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #4ade80;
    stroke: #4ade80;
}
.gdb-theme-light .gdb-form-trust { border-top-color: #e5e7eb; }
.gdb-theme-light .gdb-form-trust .gdb-trust-item { color: #4b5563; }

/* Page-2 bottom block (special requests + accommodation). */
.gdb-form-bottom { margin-top: 8px; }

/* Refresher add-on note shown when a guest triggers it on Page 2. */
.gdb-refresher-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255,134,0,0.12);
    border: 1px solid rgba(255,134,0,0.35);
    font-size: 14px;
    line-height: 1.5;
}
.gdb-refresher-note strong { color: #ff8600; }
.gdb-refresher-amount { font-weight: 600; opacity: 0.85; }
.gdb-theme-light .gdb-refresher-note {
    background: #fff7ed;
    border-color: #fdba74;
    color: #7c2d12;
}
.gdb-theme-light .gdb-refresher-note strong { color: #c2410c; }


/* ── Liveaboards list shortcode ([gdb_liveaboards]) ─────────────────────── */

.gdb-lb {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: #0f172a;
    max-width: 720px;
    margin: 0 auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 22px 24px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}
.gdb-lb *, .gdb-lb *::before, .gdb-lb *::after { box-sizing: border-box; }
/* When the row list is embedded INSIDE the liveaboard flow (booking page),
   drop the light card chrome so the dark page bg shows through. Rows keep
   their white card surface for legibility on the dark canvas. The flow
   provides its own page padding / max-width, so we widen the list too. */
.gdb-lb-flow .gdb-lb {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    color: #fff;
}
.gdb-lb-flow .gdb-lb-empty { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.7); }

.gdb-lb--notice {
    padding: 18px 22px;
    background: #fff7ed;
    border-color: #fdba74;
    color: #7c2d12;
    font-size: 14px;
    box-shadow: none;
}

/* Force title color over any theme heading defaults — the shortcode often
   sits on dark-themed sections where global h3 selectors inherit white. */
.gdb-lb h3.gdb-lb-title,
.gdb-lb .gdb-lb-title {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    padding: 0;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-shadow: none;
    text-align: center;
}

/* Filter toolbar — stacked vertically so each axis gets its own row.
   Month dropdown on row 1, then one row per pill bar (boats / trips / length /
   etc.) below. Pills within a row still wrap if the viewport is too narrow.
   Each row centres itself; the column shrink-wraps so a short pill bar
   doesn't span the full width and look weirdly disconnected. */
.gdb-lb-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
/* Month filter label — slate text on the widget's white card. The
   `!important` defends against page-builder themes that style the host
   page with `color: #fff` (or use a darker .has-* utility class on inline
   text) and cascade onto our label, making it invisible against the white
   card. Same defence on the inner span. */
.gdb-lb-month {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569 !important;
}
.gdb-lb-month .gdb-lb-month-label { color: #475569 !important; }
/* When the trip list is embedded inside the dark liveaboard flow, the
   widget container goes transparent (.gdb-lb-flow .gdb-lb above) and the
   page's dark bg shows through — flip the label to light so it reads on
   the dark canvas instead. */
.gdb-lb-flow .gdb-lb-month,
.gdb-lb-flow .gdb-lb-month .gdb-lb-month-label { color: rgba(255,255,255,0.85) !important; }
/* Selector overrides: many WP themes (Flatsome included) apply their own
   chevron wrapper / padding to <select>. Resetting with high specificity
   so the dropdown renders cleanly inside the widget. */
.gdb-lb select.gdb-lb-month-select,
.gdb-lb-month-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: auto;
    width: auto;
    min-width: 140px;
    max-width: 220px;
    padding: 9px 38px 9px 14px !important;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 7px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.2;
}
.gdb-lb-month-select:hover { border-color: #94a3b8; }
.gdb-lb-month-select:focus {
    outline: none;
    border-color: #FF8600;
    box-shadow: 0 0 0 3px rgba(255, 134, 0, 0.18);
}

/* Pill group container — pills inside touch (gap: 0) per design ask.
   The group still uses flex so the bar can wrap if a viewport gets very
   narrow; gap controls only the inter-bar spacing via .gdb-lb-controls. */
.gdb-lb-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}
/* Per-pill — zero outer padding on the <button> itself per design ask;
   inner space is created by the label span instead so the X badge sits
   flush against the pill edge when present. `!important` defends against
   page-builder themes (Flatsome) that inject a baseline padding on <button>. */
.gdb-lb-pill,
.gdb-lb .gdb-lb-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.25;
    min-height: 0 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gdb-lb-pill .gdb-lb-pill-label {
    display: inline-block;
    padding: 5px 8px;
}
/* When a label-less pill (legacy ones without the wrapping span) renders,
   restore minimum tap-target padding so the button stays clickable. */
.gdb-lb-pill:not(:has(.gdb-lb-pill-label)) { padding: 5px 11px !important; }
.gdb-lb-pill:hover { border-color: #94a3b8; color: #0f172a; }
.gdb-lb-pill.is-active {
    background: #FF8600;
    border-color: #FF8600;
    color: #fff;
    box-shadow: 0 1px 4px rgba(255, 134, 0, 0.35);
}
/* × badge — visible only on active, non-"All" pills. Click on the badge
   wipes the filter via the JS handler. Inactive pills hide it entirely so
   the bar looks clean by default. `!important` defends against page-builder
   themes that set `display: inline` on bare spans. */
.gdb-lb-pill-x {
    display: none !important;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    font-weight: 700;
    margin-left: 2px;
    margin-right: 5px;
    transition: background 0.15s;
}
.gdb-lb-pill.is-active .gdb-lb-pill-x { display: inline-block !important; }
.gdb-lb-pill.is-active .gdb-lb-pill-x:hover { background: rgba(255, 255, 255, 0.45); }
/* Hide the badge on the "All …" pill — clicking it has no deselect effect. */
.gdb-lb-pill[data-gdb-lb-boat=""].is-active .gdb-lb-pill-x,
.gdb-lb-pill[data-gdb-lb-trip=""].is-active .gdb-lb-pill-x,
.gdb-lb-pill[data-gdb-lb-length=""].is-active .gdb-lb-pill-x,
.gdb-lb-pill[data-gdb-lb-roomtype=""].is-active .gdb-lb-pill-x { display: none !important; }

/* List container — themes (Flatsome's WooCommerce overrides in particular)
   set padding-left: 1.4em on `<ul>` and margins on every `<li>` inside
   editor content. `!important` clamps both back to zero so each row
   touches the controls toolbar's left edge. */
.gdb-lb-rows {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.gdb-lb-rows > li::before,
.gdb-lb-rows > li::marker { content: none !important; }
/* align-items: flex-start so the 4-line left content aligns to the top of
   the card rather than centering vertically against the right column's
   spots/price/button stack (which was creating empty space below the Trip
   Details link). */
.gdb-lb-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    /* Force LTR text alignment on the row + its descendants. Several
       page-builder themes (Flatsome's `.product-categories ul`, content-
       block lists) set `text-align: center` on `<ul>/<li>`, which centered
       the date/sub/loc/boat lines in the screenshot. Override here. */
    text-align: left;
    /* Zero out theme-injected `<li>` margins. WooCommerce / Flatsome
       commonly leave `margin: 0 0 1em 1.4em` on bullet lists; without these
       defenses each row indented ~22px from the toolbar above. */
    margin: 0 !important;
}
.gdb-lb-row,
.gdb-lb-row * { text-align: left; }
.gdb-lb-row .gdb-lb-row-meta,
.gdb-lb-row .gdb-lb-row-meta * { text-align: right; }
.gdb-lb-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}
.gdb-lb-row--sold {
    opacity: 0.65;
    box-shadow: none;
}
.gdb-lb-row--sold:hover {
    transform: none;
    box-shadow: none;
    border-color: #e2e8f0;
}

.gdb-lb-row-info { min-width: 0; flex: 1 1 auto; }
.gdb-lb-row-date {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.gdb-lb-row-trip { font-weight: 600; color: #0f172a; }
.gdb-lb-row-sub {
    margin-top: 2px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.45;
    font-weight: 500;
}
.gdb-lb-row-sub .gdb-lb-icon {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 4px;
    color: #94a3b8;
    flex-shrink: 0;
}
.gdb-lb-row-sep { color: #cbd5e1; margin: 0 2px; }
/* Anchor + start-location forced onto its own line (display:flex breaks the
   parent's inline run). The wrapper-div approach loses inline behaviour and
   guarantees a row break even when the line above is short. */
.gdb-lb-row-loc {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 0;
    color: #64748b;
}
/* Boat name — own line below the start location, same slate body color so
   it visually belongs to the metadata stack rather than competing with it. */
.gdb-lb-row-boat {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 0;
    color: #64748b;
}

/* Right column layout is defined further down (with the Trip Details
   section) — the spots/price/button are now three separate stacked rows. */

.gdb-lb-spots {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.gdb-lb-spots--ok   { background: #ecfdf5; color: #047857; }
.gdb-lb-spots--low  { background: #fffbeb; color: #b45309; }
.gdb-lb-spots--sold { background: #f1f5f9; color: #94a3b8; }

.gdb-lb-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.gdb-lb-price-from {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* "Choose Room" CTA — primary brand orange (#FF8600), filled, white text,
   matches the site's primary button look. */
.gdb-lb-cta,
.gdb-lb a.gdb-lb-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8px;
    background: #FF8600;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #FF8600;
    box-shadow: 0 1px 2px rgba(255, 134, 0, 0.2), 0 4px 10px rgba(255, 134, 0, 0.15);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    letter-spacing: 0.01em;
}
.gdb-lb-cta:hover,
.gdb-lb a.gdb-lb-cta:hover {
    background: #E67700;
    border-color: #E67700;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(230, 119, 0, 0.28), 0 8px 18px rgba(230, 119, 0, 0.2);
}
.gdb-lb-cta:active { transform: translateY(1px); }
.gdb-lb-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 134, 0, 0.35);
}
.gdb-lb-cta--disabled,
.gdb-lb a.gdb-lb-cta--disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    pointer-events: none;
}

.gdb-lb-empty {
    padding: 18px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    margin-top: 10px;
}

/* Trip Details link — sits at the bottom of the LEFT info column (under
   the start-location anchor row). !important overrides for margin /
   line-height / appearance because (a) Flatsome's theme cascade adds
   bottom+right margins to bare <div>s inside content areas, and (b)
   Chrome/Safari give <button> a min-height from the user-agent stylesheet
   that ignores padding:0 unless `appearance: none` is set. */
.gdb-lb-row-details {
    display: flex !important;
    justify-content: flex-start;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    min-height: 0 !important;
}
.gdb-lb-details-link,
.gdb-lb-row-details .gdb-lb-details-link {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    background: none;
    border: 0;
    color: #475569;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #cbd5e1;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.gdb-lb-details-link .gdb-lb-icon {
    margin-right: 4px;
    color: #94a3b8;
}
.gdb-lb-details-link:hover,
.gdb-lb-details-link:focus-visible {
    color: #c2410c;
    text-decoration-color: #fdba74;
    outline: none;
}
.gdb-lb-details-link:hover .gdb-lb-icon,
.gdb-lb-details-link:focus-visible .gdb-lb-icon { color: #c2410c; }

/* Right column — three stacked items: Trip Details link, price, CTA.
   gap: 0 + explicit per-element margins so we control the exact spacing
   and don't accumulate gap+margin together. */
.gdb-lb-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    flex: 0 0 auto;
}
/* Right-column items spacing — spots is now the TOP item (no margin-top);
   price sits below it, CTA below price. */
.gdb-lb-row-meta-spots,
.gdb-lb-row-meta-price,
.gdb-lb-row-meta-cta { display: flex; align-items: center; }
.gdb-lb-row-meta-price { margin-top: 3px; }
.gdb-lb-row-meta-cta { margin-top: 3px; }

/* ── Trip Details modal ──────────────────────────────────────────────── */

.gdb-lb-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gdb-lb-modal[hidden] { display: none; }
.gdb-lb-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.gdb-lb-modal-dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.35);
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: #0f172a;
    /* Custom scrollbar so the rounded right edge isn't broken by the
       browser's default grey track. Firefox uses scrollbar-* shorthand;
       WebKit needs the ::-webkit-scrollbar pseudos below. */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.gdb-lb-modal-dialog::-webkit-scrollbar { width: 8px; }
.gdb-lb-modal-dialog::-webkit-scrollbar-track {
    background: transparent;
    margin: 14px 0;
}
.gdb-lb-modal-dialog::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #fff;
    background-clip: padding-box;
}
.gdb-lb-modal-dialog::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid #fff; }
/* X close button — !important + appearance: none so Flatsome's button
   cascade and browser user-agent styles can't override sizing or colors. */
.gdb-lb-modal-close,
.gdb-lb-modal-dialog .gdb-lb-modal-close {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #475569 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    z-index: 2;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gdb-lb-modal-close:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
.gdb-lb-modal-close svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
}
.gdb-lb-modal-body { padding: 28px 28px 24px; }

.gdb-lb-modal-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.gdb-lb-modal-meta {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 18px;
}
.gdb-lb-modal-section {
    margin: 14px 0;
}
.gdb-lb-modal-section[hidden] { display: none; }
.gdb-lb-modal-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}
.gdb-lb-modal-label .gdb-lb-icon {
    color: #94a3b8;
    flex-shrink: 0;
}
.gdb-lb-modal-value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.gdb-lb-modal-meeting {
    margin-top: 4px;
    font-weight: 500;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

/* Start / End trip metadata — two-up grid on desktop, stacks on mobile. */
.gdb-lb-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 14px 0;
}
.gdb-lb-modal-grid[hidden] { display: none; }
.gdb-lb-modal-grid .gdb-lb-modal-section { margin: 0; }
.gdb-lb-modal-time {
    margin-top: 2px;
    font-weight: 600;
    color: #c2410c;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
    .gdb-lb-modal-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Two-up CTA row — Select Cabin (brand orange) + Let's Chat (WhatsApp green).
   Each button is flex: 1 so they split 50/50; when Select Cabin is hidden on
   sold-out trips, the WhatsApp button takes the full width naturally. */
.gdb-lb-modal-cta-row {
    margin: 16px 0 18px;
    display: flex;
    gap: 10px;
}
.gdb-lb-modal-select-cabin,
.gdb-lb-modal-whatsapp {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.gdb-lb-modal-select-cabin {
    background: #FF8600;
    box-shadow: 0 2px 4px rgba(255, 134, 0, 0.22), 0 6px 14px rgba(255, 134, 0, 0.16);
}
.gdb-lb-modal-select-cabin:hover {
    background: #E67700;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(230, 119, 0, 0.3), 0 10px 22px rgba(230, 119, 0, 0.22);
}
.gdb-lb-modal-select-cabin[hidden] { display: none; }
.gdb-lb-modal-whatsapp {
    background: #25D366;
    box-shadow: 0 2px 4px rgba(37, 211, 102, 0.22), 0 6px 14px rgba(37, 211, 102, 0.16);
}
.gdb-lb-modal-whatsapp:hover {
    background: #1ebd5b;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(30, 189, 91, 0.3), 0 10px 22px rgba(30, 189, 91, 0.22);
}
.gdb-lb-modal-whatsapp svg { flex-shrink: 0; }
.gdb-lb-modal-select-cabin:active,
.gdb-lb-modal-whatsapp:active { transform: translateY(1px); }

.gdb-lb-modal-callout {
    margin: 14px 0 4px;
    padding: 8px 12px;
    background: #fff7ed;
    border-left: 4px solid #fdba74;
    border-radius: 8px;
}
/* Inline variant: label + value on a single line at 12px each. */
.gdb-lb-modal-callout--inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
}
.gdb-lb-modal-callout--inline .gdb-lb-modal-callout-label {
    margin-bottom: 0;
    font-size: 12px;
}
.gdb-lb-modal-callout--inline .gdb-lb-modal-callout-value {
    font-size: 12px;
    font-weight: 600;
}
.gdb-lb-modal-callout-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #c2410c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.gdb-lb-modal-callout-label .gdb-lb-icon { color: #c2410c; }
.gdb-lb-modal-callout-value {
    font-size: 15px;
    font-weight: 600;
    color: #7c2d12;
}
/* "Message us if you're unsure…" notice — sits outside the callout box in
   normal body type so it reads as a sibling hint, not part of the orange
   panel. Link in brand orange so it remains scannable. */
.gdb-lb-modal-help-note {
    margin: 10px 0 18px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.5;
}
.gdb-lb-modal-help-note[hidden] { display: none; }
.gdb-lb-modal-help-note a {
    color: #FF8600;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gdb-lb-modal-help-note a:hover { color: #c2410c; }
/* Inclusions block — visually bordered to differentiate from the
   surrounding flat sections. Tabs sit flush with the box's top edge. */
.gdb-lb-modal-box {
    margin: 18px 0;
    padding: 4px 16px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}
.gdb-lb-modal-box[hidden] { display: none; }

.gdb-lb-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 -16px 12px;
    padding: 0 16px;
}
.gdb-lb-modal-tab {
    flex: 1;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #64748b;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.gdb-lb-modal-tab:hover { color: #0f172a; }
.gdb-lb-modal-tab.is-active {
    color: #c2410c;
    border-bottom-color: #FF8600;
}
.gdb-lb-modal-tabpanel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #1f2937;
}
.gdb-lb-modal-tabpanel[hidden] { display: none; }
.gdb-lb-modal-tabpanel li {
    padding-left: 20px;
    position: relative;
    line-height: 1.45;
}
.gdb-lb-modal-tabpanel li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #16a34a;
    font-weight: 700;
}
.gdb-lb-modal-tabpanel[data-gdb-lb-tabpanel="not_included"] li::before {
    content: "✕";
    color: #b91c1c;
}
.gdb-lb-modal-tabpanel li.gdb-lb-modal-empty {
    padding-left: 0;
    color: #94a3b8;
    font-style: italic;
}
.gdb-lb-modal-tabpanel li.gdb-lb-modal-empty::before { content: ""; }

/* Daily Itinerary — native <details>/<summary> accordion. Each day is its
   own collapsible card; first day open by default (set via JS). Chevron
   rotates 180° when open via the [open] attribute selector. */
.gdb-lb-modal-itinerary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gdb-lb-modal-itinerary-day {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.gdb-lb-modal-itinerary-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #f8fafc;
    transition: background 0.15s;
}
.gdb-lb-modal-itinerary-summary::-webkit-details-marker { display: none; }
.gdb-lb-modal-itinerary-summary:hover { background: #f1f5f9; }
.gdb-lb-modal-itinerary-daynum {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
}
.gdb-lb-modal-itinerary-chevron {
    color: #94a3b8;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.gdb-lb-modal-itinerary-day[open] .gdb-lb-modal-itinerary-chevron {
    transform: rotate(180deg);
}
.gdb-lb-modal-itinerary-day[open] .gdb-lb-modal-itinerary-summary {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.gdb-lb-modal-itinerary-items {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gdb-lb-modal-itinerary-items li {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}
.gdb-lb-modal-itinerary-time {
    font-weight: 700;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    flex-shrink: 0;
}
.gdb-lb-modal-itinerary-desc {
    flex: 1;
    /* Bridge sends each day as one free-text block with embedded newlines.
       pre-line preserves the \n line breaks while still collapsing other
       whitespace runs — no nl2br pass needed on the payload. */
    white-space: pre-line;
}

/* Add-ons list — flush stacked rows separated by 1px slate hairline
   instead of gaps + heavy borders. Lighter font weights so the section
   reads as a tidy table, not a series of cards. */
.gdb-lb-modal-addons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.gdb-lb-modal-addon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    font-size: 14px;
    border-top: 1px solid #f1f5f9;
}
.gdb-lb-modal-addon:first-child { border-top: 0; }
.gdb-lb-modal-addon-name {
    color: #334155;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.gdb-lb-modal-addon-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gdb-lb-modal-addon-badge--req {
    background: #ffedd5;
    color: #c2410c;
}
.gdb-lb-modal-addon-price {
    color: #334155;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.gdb-lb-modal-addon-per {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 2px;
}

.gdb-lb-modal-rooms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gdb-lb-modal-room {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.gdb-lb-modal-room-head { margin-bottom: 4px; }
.gdb-lb-modal-room-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.gdb-lb-modal-room-sub {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
    text-transform: capitalize;
}
.gdb-lb-modal-room-desc {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #334155;
    line-height: 1.5;
}
.gdb-lb-modal-room-desc p { margin: 0 0 6px; }
.gdb-lb-modal-room-desc p:last-child { margin-bottom: 0; }
.gdb-lb-modal-room-desc a {
    color: #FF8600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Photo slider — used both for room cards and for the boat specs gallery.
   Native scroll-snap track for swipe on touch devices; prev/next arrows +
   dot indicators for pointer devices. Single-photo galleries skip arrows
   and dots automatically (JS only attaches them when photos.length > 1). */
.gdb-lb-modal-slider {
    position: relative;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}
.gdb-lb-modal-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.gdb-lb-modal-slider-track::-webkit-scrollbar { display: none; }
.gdb-lb-modal-slider-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 16 / 10;
    background: #e2e8f0;
    line-height: 0;
}
.gdb-lb-modal-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Slider arrows — !important + appearance: none defenses (same reason as
   the Trip Details link and X close button: Flatsome's button cascade +
   browser user-agent style otherwise stretch the element and ignore the
   fixed width/height). Brand-orange accent fill. */
.gdb-lb-modal-slider-arrow,
.gdb-lb-modal-slider .gdb-lb-modal-slider-arrow {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(15,23,42,0.55) !important;
    border: 0 !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: none;
    box-sizing: border-box;
    transition: background 0.15s, transform 0.1s;
    z-index: 2;
}
.gdb-lb-modal-slider-arrow:hover {
    background: rgba(15,23,42,0.75) !important;
    color: #fff !important;
}
.gdb-lb-modal-slider-arrow:active { transform: translateY(-50%) scale(0.94); }
.gdb-lb-modal-slider-arrow svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
}
.gdb-lb-modal-slider-arrow--prev { left: 8px !important; right: auto !important; }
.gdb-lb-modal-slider-arrow--next { right: 8px !important; left: auto !important; }

/* Trip map image — full-width, max-height capped so a tall map doesn't
   dominate the modal scroll. Click opens full-res in a new tab. */
.gdb-lb-modal-map-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    line-height: 0;
}
.gdb-lb-modal-map-img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.gdb-lb-modal-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.gdb-lb-modal-more {
    display: inline-block;
    padding: 9px 20px;
    background: #FF8600;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s;
}
.gdb-lb-modal-more:hover {
    background: #E67700;
    color: #fff !important;
    text-decoration: none;
}
.gdb-lb-modal-footer-close {
    display: inline-block;
    padding: 9px 20px;
    background: #0f2240;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #0f2240;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gdb-lb-modal-footer-close:hover {
    background: #1c3666;
    border-color: #1c3666;
    color: #fff;
}

@media (max-width: 640px) {
    /* Padding around the dialog so the dark overlay shows on every side
       (gives the user a tap-target to dismiss) and the dialog never sits
       under the mobile browser's URL bar at the top. align-items: flex-start
       + top padding keeps the dialog anchored near the top instead of
       centering off-screen on short viewports. */
    .gdb-lb-modal {
        padding: 36px 12px 24px;
        align-items: flex-start;
    }
    .gdb-lb-modal-dialog {
        max-width: 100%;
        max-height: calc(100vh - 60px);
        border-radius: 14px;
        height: auto;
    }
    .gdb-lb-modal-body { padding: 22px 16px 18px; }
    .gdb-lb-modal-close {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
    }
    .gdb-lb-modal-slider-arrow { width: 28px !important; height: 28px !important; }
}

/* Pagination — shown only when filtered rows > PAGE_SIZE (8). Word-label
   buttons ("Previous" / "Next") with a centered "Page N of M" between. The
   nav is forced full-width so justify-content: center positions the cluster
   over the widget's full horizontal axis (default <nav> sizing was shrinking
   to content). */
.gdb-lb-pagination {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.gdb-lb-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gdb-lb-pg-btn:hover:not(:disabled) {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}
.gdb-lb-pg-btn:focus-visible {
    outline: none;
    border-color: #FF8600;
    box-shadow: 0 0 0 3px rgba(255, 134, 0, 0.2);
}
.gdb-lb-pg-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.gdb-lb-pg-info {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    min-width: 90px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Loading skeleton shown while admin-ajax.php fetches the rows.
   The shell renders this; the loader script replaces it with real content
   inside ~200ms on a normal connection. */
.gdb-lb-loading-state {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.gdb-lb-skeleton-row {
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: gdbLbShimmer 1.4s ease-in-out infinite;
}
@keyframes gdbLbShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 640px) {
    .gdb-lb {
        padding: 18px 16px 20px;
        border-radius: 12px;
    }
    /* Stacked card: date+title → sublines → spots+price row → CTA full width.
       Each section is its own block so tap targets get full row width. */
    .gdb-lb-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }
    .gdb-lb-row-meta {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .gdb-lb-row-meta-top {
        justify-content: flex-start;
        gap: 12px;
    }
    .gdb-lb-row-meta-bottom { width: 100%; }
    /* Full-width CTA on mobile so it's a comfortable thumb target. */
    .gdb-lb-cta,
    .gdb-lb a.gdb-lb-cta {
        width: 100%;
        padding: 12px 18px;
        font-size: 14px;
    }
}