/* AutoQuote Widget — scoped stylesheet
 * All rules are scoped under .aq to prevent leaking into the WP theme.
 * CSS custom properties live on .aq (never :root).
 * Sections:
 *   1. Variables & Reset
 *   2. Widget Shell
 *   3. Steps (shared + step1 + step2)
 *   4. Trip Summary Row
 *   5. Form Fields
 *   6. Room Counters
 *   7. Personal Details Fieldset
 *   8. Consent & Account / Login Panel
 *   9. Advisor Card
 *  10. CTA Buttons
 *  11. Step 2 — Greeting & Edit Row
 *  12. Date Option Pills
 *  13. Price Block
 *  14. Per-Person Toggle & Box
 *  15. Services / Itinerary Tabs
 *  16. Tab Panels & Itinerary (scrollable)
 *  17. Availability Banner & Colors
 *  18. Responsive
 */

/* ============================================================
   1. Variables & Reset
   ============================================================ */
.aq {
    --aq-yellow:       #f3c65a;
    --aq-yellow-light: rgba(243, 198, 90, 0.15);
    --aq-blue:         #2b75f4;
    --aq-blue-soft:    #dee1e9;
    --aq-blue-light:   #f4f6f9;
    --aq-white:        #ffffff;
    --aq-black:        #1c1d20;
    --aq-grey:         #666666;
    --aq-grey-light:   #bbbbbb;
    --aq-grey-bg:      #f7f8fa;
    --aq-green-bg:     #eaf8e9;
    --aq-green-text:   #2e7d32;
    --aq-amber-bg:     #fff8e1;
    --aq-amber-text:   #e65100;
    --aq-no-bg:        #f2f2f2;
    --aq-no-text:      #888888;
    --aq-red-bg:       #fdecea;
    --aq-red-text:     #c62828;
    --aq-red-border:   #e53935;
    --aq-radius:       16px;
    --aq-radius-sm:    8px;
    --aq-radius-pill:  24px;
    --aq-gap:          14px;
    --aq-font:         inherit;
    --aq-green-border: #66bb6a;
    --aq-error-bg:     #fff5f5;
    --aq-error-text:   #c62828;
    --aq-error-border: #e57373;

    box-sizing: border-box;
    font-family: var(--aq-font);
    color: var(--aq-black);
    line-height: 1.5;
}

/* Box-sizing inheritance for all .aq descendants */
.aq *,
.aq *::before,
.aq *::after {
    box-sizing: inherit;
}

/* Defend against host themes that override the [hidden] attribute */
.aq [hidden] { display: none !important; }

/* ============================================================
   2. Widget Shell
   ============================================================ */
.aq {
    /* The card grows to fit its content and the page scrolls, not the widget.
       An inner scroller was hiding the price block and the CTAs behind a second
       scrollbar; the customer must be able to read the whole step by scrolling
       the page as usual. */
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--aq-white);
    border-radius: var(--aq-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    /* clip, not hidden: rounds the corners without creating a scroll container */
    overflow: clip;
}

/* Optional float placement beside page content — shortcode [autoquote align="right|left"].
   The card keeps its 480px max-width and lets surrounding text wrap alongside it.
   Below 768px it reverts to a centered standalone block. */
.aq.aq--align-right { float: right; margin: 0 0 24px 32px; }
.aq.aq--align-left  { float: left;  margin: 0 32px 24px 0; }
@media (max-width: 768px) {
    .aq.aq--align-right,
    .aq.aq--align-left { float: none; margin: 0 auto; }
}

/* ============================================================
   3. Steps — shared (sticky header / scrollable body / sticky footer)
   ============================================================ */
.aq .aq-step {
    /* The visible step fills the bounded card; the other is display:none
       (via the `.aq [hidden]` rule, which the JS toggles per step). */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.aq .aq-step__header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    background: var(--aq-white);
    border-bottom: 1px solid var(--aq-blue-soft);
    text-align: center;
}

.aq .aq-step__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--aq-gap);
    padding: 18px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--aq-blue-soft) transparent;
}

.aq .aq-step__footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 20px 16px;
    background: var(--aq-white);
    border-top: 1px solid var(--aq-blue-soft);
}

/* Step progress dots */
.aq .aq-steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 300px;
}

.aq .aq-step-dot {
    flex: 1 1 0;
    height: 5px;
    border-radius: 3px;
    background: var(--aq-blue-light);
}

.aq .aq-step-dot--active {
    background: var(--aq-blue);
}

/* SVG icons (from_to / calendar / single / double / twin / support) */
.aq .aq-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

/* Step 1 / Step 2 header titles */
.aq .aq-step1__title,
.aq .aq-step2__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--aq-black);
    line-height: 1.3;
}

.aq .aq-step1__subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--aq-grey);
}

/* ============================================================
   4. Trip Summary Row
   ============================================================ */
.aq .aq-trip-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    background: var(--aq-blue-light);
    border-radius: var(--aq-radius-sm);
    padding: 10px 14px;
    font-size: 0.95rem;
}

.aq .aq-trip-summary__from,
.aq .aq-trip-summary__to {
    font-weight: 600;
    color: var(--aq-black);
}

.aq .aq-trip-summary__arrow {
    color: var(--aq-blue);
    font-size: 1.1rem;
}

.aq .aq-trip-summary__distance,
.aq .aq-trip-summary__days {
    font-size: 0.82rem;
    color: var(--aq-grey);
    margin-left: auto;
}

/* Step 1 trip summary — From / To columns (small label above each place),
   the label+place block sized to roughly match the arrow icon height. */
.aq .aq-trip-summary--fromto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.aq .aq-trip-summary__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aq .aq-trip-summary__place { font-weight: 600; color: var(--aq-black); font-size: 1.05rem; }

/* Step 2 trip summary — From/To on one 50/50 row (arrow centered), the edit
   button on its own row below. */
.aq .aq-trip-summary--step2 {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 16px; border-radius: var(--aq-radius);
    background: var(--aq-blue-light);
}
/* From | arrow | To — two equal halves (minus the arrow) that never wrap. */
.aq .aq-trip-summary__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.aq .aq-trip-summary--step2 .aq-trip-summary__col {
    display: flex; flex-direction: column; min-width: 0;
}
/* Destination must not push to a new line — truncate with an ellipsis instead. */
.aq .aq-trip-summary--step2 .aq-trip-summary__place {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.aq .aq-trip-summary--step2 .aq-trip-summary__icon { width: 32px; height: 32px; }
.aq .aq-trip-summary__label { font-size: 0.75rem; color: var(--aq-grey); }
.aq .aq-trip-summary__date { font-weight: 600; color: var(--aq-blue); }
/* Smaller user glyph inside the Edit button (the base .aq-icon 42px is too big) */
.aq .aq-trip-summary__edit-icon { width: 20px; height: 20px; }
.aq .aq-trip-summary--available { background: var(--aq-green-bg); }
.aq .aq-trip-summary--low { background: var(--aq-amber-bg); }
.aq .aq-trip-summary--no { background: var(--aq-red-bg); }
.aq .aq-trip-summary__edit {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    background: var(--aq-white); border: 1px solid rgba(15,23,42,0.12);
    border-radius: 999px; padding: 8px 16px; cursor: pointer;
}

/* ============================================================
   5. Form Fields
   ============================================================ */
.aq .aq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aq .aq-field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--aq-grey);
}

.aq .aq-field__input,
.aq .aq-field__textarea {
    width: 100%;
    background: var(--aq-blue-light);
    border: 1.5px solid transparent;
    border-radius: var(--aq-radius-sm);
    padding: 10px 12px;
    font-size: 0.95rem;
    color: var(--aq-black);
    font-family: inherit;
    transition: border-color 0.15s ease;
    outline: none;
}

/* Compact single-line inputs. Host themes (Impreza here) style inputs
   site-wide and inflate their height/line-height; force a tidy fixed height so
   the widget looks the same everywhere. Textarea keeps its own min-height. */
.aq .aq-field__input {
    height: 42px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.aq .aq-field__input:focus,
.aq .aq-field__textarea:focus {
    border-color: var(--aq-blue);
    background: var(--aq-white);
}

/* Keyboard focus ring — visible affordance (WCAG 2.4.7) */
.aq .aq-field__input:focus-visible,
.aq .aq-field__textarea:focus-visible {
    outline: 2px solid var(--aq-blue);
    outline-offset: 2px;
}

.aq .aq-btn:focus-visible,
.aq .aq-room-dec:focus-visible,
.aq .aq-room-inc:focus-visible,
.aq .aq-tabs__tab:focus-visible,
.aq .aq-date-option:focus-visible {
    outline: 2px solid var(--aq-blue);
    outline-offset: 2px;
}

.aq .aq-field__textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

/* Checkbox fields — horizontal layout */
.aq .aq-field--flexible,
.aq .aq-field--consent {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.aq .aq-field__checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--aq-blue);
    cursor: pointer;
}

/* Flexible / disabled date input — dimmed to signal it is inactive */
.aq .aq-date--flexible,
.aq .aq-field__input:disabled { opacity: .55; cursor: not-allowed; }

/* Date row: calendar icon | compact date | toggle | "not sure" label, one line.
   The date input is NOT full-width — it takes its own column, leaving room for
   the toggle and its caption to the right (mirrors the designer's cfDate). */
.aq .aq-cfdate {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.aq .aq-cfdate__icon { width: 38px; height: 38px; }
.aq .aq-cfdate__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aq .aq-cfdate__input { width: 150px; max-width: 100%; }
.aq .aq-cfdate__flexlabel { font-size: 0.9rem; color: var(--aq-grey); line-height: 1.25; }

/* Toggle switch (replaces the plain checkbox for "I'm not sure about the dates").
   Styled-checkbox pattern: appearance:none track + an ::after knob that slides. */
.aq .aq-switch {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    align-self: center;
    width: 48px;
    height: 28px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background-color: var(--aq-blue-soft);
    position: relative;
    cursor: pointer;
    transition: background-color 0.12s ease-out;
}
.aq .aq-switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--aq-white);
    transition: left 0.12s ease-out;
}
.aq .aq-switch:checked { background-color: var(--aq-blue); }
.aq .aq-switch:checked::after { left: 24px; }
.aq .aq-switch:focus-visible { outline: 2px solid var(--aq-blue); outline-offset: 2px; }

/* Phone group — area code + number side by side */
.aq .aq-field__phone-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.aq .aq-field__input--area-code {
    width: 72px;
    flex-shrink: 0;
}

.aq .aq-field__input--phone {
    flex: 1;
}

/* ============================================================
   6. Room Counters
   ============================================================ */
.aq .aq-rooms {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aq .aq-rooms__heading {
    margin: 0 0 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--aq-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aq .aq-room-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--aq-radius-sm);
    background: var(--aq-blue-light);
}

.aq .aq-room-row__label {
    font-size: 0.95rem;
    color: var(--aq-black);
}

.aq .aq-room-row__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Round +/- buttons */
.aq .aq-room-dec,
.aq .aq-room-inc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--aq-blue-soft);
    color: var(--aq-black);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.aq .aq-room-dec:hover,
.aq .aq-room-inc:hover {
    background: var(--aq-blue);
    color: var(--aq-white);
}

.aq .aq-room-count {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--aq-blue);
}

/* ============================================================
   7. Personal Details Fieldset
   ============================================================ */
.aq .aq-personal {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--aq-gap);
}

.aq .aq-personal__legend {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--aq-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    padding: 0;
}

/* ============================================================
   8. Consent, Account link & Login Panel
   ============================================================ */
.aq .aq-link {
    color: var(--aq-blue);
    text-decoration: none;
    font-size: 0.9rem;
}

.aq .aq-link:hover {
    text-decoration: underline;
}

/* "View price per person" — pill button (white, soft border), right-aligned,
   matching the designer's editButton style rather than a bare blue link. */
.aq .aq-link-button {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--aq-white);
    border: 1px solid var(--aq-blue-soft);
    /* 999px to match the Edit pill — all small pills share one fully-round radius */
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--aq-grey);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aq .aq-link-button:hover {
    background: var(--aq-yellow-light);
    border-color: var(--aq-yellow);
    color: var(--aq-black);
}

.aq .aq-account {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aq .aq-login-panel {
    display: flex;
    flex-direction: column;
    gap: var(--aq-gap);
    background: var(--aq-blue-light);
    border-radius: var(--aq-radius-sm);
    padding: 16px;
    margin-top: 4px;
}

/* Hidden attribute support — login panel hidden by default */
.aq .aq-login-panel[hidden] {
    display: none;
}

/* The panel shares the inputs' light-blue fill, so a default field is
   invisible against it until focused. Give fields inside the panel a white
   fill + a subtle border so they read as inputs at rest. */
.aq .aq-login-panel .aq-field__input {
    background: var(--aq-white);
    border-color: rgba(15, 23, 42, 0.12);
}

.aq .aq-login-greeting {
    margin: 0;
    font-weight: 600;
    color: var(--aq-blue);
}

.aq .aq-login-error {
    margin: 0;
    color: var(--aq-error, #c0392b);
    font-size: 0.9em;
}

.aq .aq-login-submit {
    align-self: flex-start;
}

.aq .aq-login-forgot {
    font-size: 0.85em;
}

/* ============================================================
   9. Advisor Card
   ============================================================ */
.aq .aq-advisor {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    background: var(--aq-yellow-light);
    border-radius: var(--aq-radius-sm);
    padding: 14px;
}

.aq .aq-advisor__avatar {
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--aq-yellow) center center / cover no-repeat;
    /* Decorative circle placeholder - actual photo wired via JS inline style */
}

.aq .aq-advisor__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.aq .aq-advisor__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--aq-black);
}

.aq .aq-advisor__role {
    margin: 0;
    font-size: 0.82rem;
    color: var(--aq-grey);
}

.aq .aq-advisor__note {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--aq-grey);
    line-height: 1.45;
}

/* A <button> (it expands the numbers) that has to read as the link it replaced. */
.aq .aq-advisor__phone {
    display: inline-block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--aq-blue);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.aq .aq-advisor__phone::after {
    content: ' ▾';
    font-size: 0.75em;
}

.aq .aq-advisor__phone[aria-expanded="true"]::after {
    content: ' ▴';
}

.aq .aq-advisor__phone:hover {
    text-decoration: underline;
}

/* ============================================================
   10. CTA Buttons
   ============================================================ */
.aq .aq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--aq-radius-pill);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
    line-height: 1;
}

/* Step 1 CTA wrapper */
.aq .aq-step1__cta {
    margin-top: 6px;
}

/* Primary button — yellow (used for Step 1 CTA #aq-see-pricing) */
.aq .aq-btn--primary {
    background: var(--aq-yellow);
    color: var(--aq-black);
}

.aq .aq-btn--primary:hover:not(:disabled) {
    opacity: 0.85;
}

/* Disabled state for #aq-see-pricing */
.aq .aq-btn--primary:disabled,
.aq #aq-see-pricing:disabled {
    background: var(--aq-grey-light);
    color: var(--aq-white);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Secondary button base — blue */
.aq .aq-btn--secondary {
    background: var(--aq-blue);
    color: var(--aq-white);
}

.aq .aq-btn--secondary:hover {
    opacity: 0.85;
}

/* Generic disabled — covers secondary buttons (Save/Book) during /save request */
.aq .aq-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Step 2 footer buttons override per visual spec:
   #aq-save-plans must be YELLOW, #aq-book-now must be BLUE.
   The template assigns --primary to book-now and --secondary to save-plans,
   which is the reverse of the PDF spec. !important overrides are justified
   here because they correct a semantic mismatch between class names and spec. */
.aq #aq-save-plans {
    background: var(--aq-yellow) !important;
    color: var(--aq-black) !important;
}

.aq #aq-book-now {
    background: var(--aq-blue) !important;
    color: var(--aq-white) !important;
}

.aq .aq-step2__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* "Save plans" composite: yellow button + two explanatory lines, wrapped in a
   yellow-bordered card. Save group and Book Now both span the full footer width. */
.aq .aq-save-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--aq-yellow);
    border-radius: var(--aq-radius);
    padding: 8px 10px 10px;
}
.aq .aq-save-group__btn { margin-bottom: 2px; }
.aq .aq-save-group__line {
    font-size: 0.85rem;
    color: var(--aq-grey);
    text-align: center;
    line-height: 1.3;
}

/* ============================================================
   11. Step 2 — Greeting & Edit Row
   ============================================================ */
.aq .aq-greeting {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--aq-black);
    line-height: 1.4;
}

/* Bold blue lead ("Great news 'Name'!") inside the greeting */
.aq .aq-greeting__lead {
    color: var(--aq-blue);
    font-weight: 700;
}
/* No-availability greeting lead — red, to match the warning banner tone */
.aq .aq-greeting__lead--no {
    color: var(--aq-red-text);
}

/* ============================================================
   11b. Segmented Step Bar
   ============================================================ */
/* The header is a centered flex column; without an explicit width the bar
   shrinks to its (zero-width) segments and disappears. Stretch it full-width
   with a sensible cap so the two segments are actually visible. */
.aq .aq-stepbar {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 320px;
    align-self: center;
    margin: 6px auto 2px;
}
.aq .aq-stepbar__seg { flex: 1; height: 5px; border-radius: 3px; background: var(--aq-blue-soft); }
.aq .aq-stepbar__seg--active { background: var(--aq-blue); }

/* ============================================================
   12. Date Option Cards
   ============================================================ */
.aq .aq-date-options { display: flex; gap: 12px; }
.aq .aq-date-option { flex: 1; background: var(--aq-grey-bg); border: 0; border-radius: var(--aq-radius-sm); padding: 12px; cursor: pointer; text-align: center; }
.aq .aq-date-option__date { display: block; font-size: 0.8rem; color: var(--aq-grey); }
.aq .aq-date-option__price { display: block; font-size: 1.4rem; font-weight: 700; color: var(--aq-blue); }
.aq .aq-date-option__base { display: block; text-decoration: line-through; color: var(--aq-grey); font-size: 0.85rem; }
.aq .aq-date-option--selected { box-shadow: inset 0 -3px 0 0 var(--aq-green-border); }
.aq .aq-date-option--selected .aq-date-option__price { color: var(--aq-blue); }
.aq .aq-date-options[hidden] { display: none; }

/* ============================================================
   13. Price Block
   ============================================================ */
.aq .aq-price-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--aq-blue-light);
    border-radius: var(--aq-radius-sm);
    padding: 16px;
}

.aq .aq-price-block__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
}

.aq .aq-price-block__label {
    color: var(--aq-grey);
}

.aq .aq-price-block__value {
    font-weight: 600;
    color: var(--aq-black);
}

/* Struck-through base price when a discount applies */
.aq .aq-price-block__value--struck {
    text-decoration: line-through;
    color: var(--aq-grey-light);
    font-weight: 400;
}

/* Discount rows container (JS-rendered) */
.aq .aq-price-block__discounts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Final price row — highlighted with blue figure */
.aq .aq-price-block__row--final {
    border-top: 1px solid var(--aq-grey-light);
    padding-top: 10px;
    margin-top: 4px;
}

.aq .aq-price-block__value--final {
    font-size: 1.25rem;
    color: var(--aq-blue);
    font-weight: 800;
}

/* ============================================================
   14. Per-Person Toggle & Box
   ============================================================ */
.aq .aq-perperson {
    background: var(--aq-white);
    border-radius: var(--aq-radius-sm);
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--aq-grey);
    margin-top: 4px;
}

.aq .aq-perperson[hidden] {
    display: none;
}

/* ============================================================
   14b. Error Box (JS-rendered, lazy-created by showError)
   ============================================================ */
.aq .aq-error {
    background: var(--aq-error-bg);
    color: var(--aq-error-text);
    border: 1.5px solid var(--aq-error-border);
    border-radius: var(--aq-radius-sm);
    padding: 12px 16px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

/* ============================================================
   14c. Discount Rows (JS-rendered into #aq-discounts)
   ============================================================ */
.aq .aq-discount-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.88rem;
    padding: 2px 0;
}

.aq .aq-discount-row__label {
    color: var(--aq-grey);
    flex: 1;
}

.aq .aq-discount-row__value {
    font-weight: 600;
    color: var(--aq-green-text);
    white-space: nowrap;
}

/* Both early_bird and promo_7days share the base style above;
   add modifiers only if visual differentiation is needed */
.aq .aq-discount-row--early_bird .aq-discount-row__label,
.aq .aq-discount-row--promo_7days .aq-discount-row__label {
    font-style: italic;
}

/* ============================================================
   14d. Per-Person Rows (JS-rendered into #aq-perperson)
   ============================================================ */
.aq .aq-perperson-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.aq .aq-perperson-row__label {
    color: var(--aq-grey);
    font-size: 0.88rem;
    flex: 1;
}

.aq .aq-perperson-row__value {
    font-weight: 600;
    color: var(--aq-black);
    font-size: 0.88rem;
    white-space: nowrap;
}

/* ============================================================
   15. Services / Itinerary Tabs
   ============================================================ */
.aq .aq-tabs {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid var(--aq-blue-soft);
    gap: 0;
}

.aq .aq-tabs__tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--aq-grey-light);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.aq .aq-tabs__tab:hover {
    color: var(--aq-grey);
}

/* Active tab — blue underline + dark text */
.aq .aq-tabs__tab--active,
.aq #aq-tab-services[aria-selected="true"],
.aq #aq-tab-itinerary[aria-selected="true"] {
    color: var(--aq-black);
    border-bottom-color: var(--aq-blue);
}

/* ============================================================
   16. Tab Panels & Itinerary (scrollable)
   ============================================================ */
.aq .aq-tab-panel {
    padding: 12px 0;
}

.aq .aq-tab-panel[hidden] {
    display: none;
}

/* Services panel — two facing columns (Included | Optional) */
.aq .aq-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.aq .aq-services__heading {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--aq-grey);
}
.aq .aq-services__heading--included { color: var(--aq-blue); }

.aq .aq-services-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Small text rows with a coloured round bullet (blue = included, amber = optional) */
.aq .aq-services-list__item {
    position: relative;
    padding-left: 16px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--aq-grey);
}
.aq .aq-services-list__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.aq .aq-services-list--included .aq-services-list__item::before { background: var(--aq-blue); }
.aq .aq-services-list--optional .aq-services-list__item::before { background: var(--aq-yellow); }

/* Itinerary — full list; each day is clamped instead of capping the list */
.aq .aq-itinerary {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aq .aq-itinerary__day {
    display: grid;
    grid-template-columns: 32px auto 16px auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--aq-blue-soft);
    font-size: 0.88rem;
}

.aq .aq-itinerary__day:last-child {
    border-bottom: none;
}

.aq .aq-itinerary__day-num {
    font-weight: 700;
    color: var(--aq-blue);
    text-align: right;
}

.aq .aq-itinerary__from,
.aq .aq-itinerary__to {
    font-weight: 600;
    color: var(--aq-black);
}

.aq .aq-itinerary__arrow {
    color: var(--aq-blue);
    text-align: center;
}

.aq .aq-itinerary__km {
    font-size: 0.80rem;
    color: var(--aq-grey);
    justify-self: end;
}

.aq .aq-itinerary__content {
    margin: 0;
    grid-column: 2 / -1;
    font-size: 0.82rem;
    color: var(--aq-grey);
    line-height: 1.4;
}

/* ============================================================
   17. Availability Banner & Traffic-Light Colors
   ============================================================ */
.aq .aq-avail-banner {
    border-radius: 0;
    padding: 4px 0 4px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    /* The step body is a flex column; without this the banner would be shrunk to
       its padding and the (multi-line) warning text would be clipped. */
    flex-shrink: 0;
    margin-bottom: var(--aq-gap);
}

/* Hidden when there is no availability message (avoids an empty coloured bar). */
.aq .aq-avail-banner[hidden] { display: none; }

/* The banner carries no fill: a solid colour block read as an ad and shouted
   over the price. The state is signalled by the left rule and the text colour,
   which is softened so the message informs without alarming. */
.aq .aq-avail-banner.aq-avail--available {
    color: var(--aq-green-text);
    border-left: 3px solid var(--aq-green-border);
    opacity: 0.75;
}

.aq .aq-avail-banner.aq-avail--low {
    color: var(--aq-amber-text);
    border-left: 3px solid var(--aq-yellow);
    opacity: 0.75;
}

.aq .aq-avail-banner.aq-avail--no {
    /* The one state worth full contrast: it changes what the customer can book. */
    color: var(--aq-red-text);
    border-left: 3px solid var(--aq-red-border);
    opacity: 0.9;
}

/* Legacy/fallback aliases kept so any other element that receives
   .aq-avail--{state} still renders sensibly (e.g. future widgets).
   These are intentionally less specific than the banner compound rules above. */
.aq .aq-avail--available {
    background: var(--aq-green-bg);
    color: var(--aq-green-text);
    border-left: 4px solid var(--aq-green-border);
}

.aq .aq-avail--low {
    background: var(--aq-amber-bg);
    color: var(--aq-amber-text);
    border-left: 4px solid var(--aq-yellow);
}

.aq .aq-avail--no {
    background: var(--aq-red-bg);
    color: var(--aq-red-text);
    border-left: 4px solid var(--aq-red-border);
}

/* ============================================================
   17b. Icon & layout refinements (mockup fidelity)
   ============================================================ */
/* Compact arrow icon inside the trip-summary row */
.aq .aq-trip-summary__icon {
    width: 26px;
    height: 26px;
}

/* Room rows: icon + label on the left, counter controls pinned right.
   Overrides the base space-between layout (must follow it in source order). */
.aq .aq-room-row {
    justify-content: flex-start;
    gap: 12px;
}

.aq .aq-room-row__icon {
    width: 34px;
    height: 34px;
}

.aq .aq-room-row__label {
    flex: 1;
    min-width: 0;
}

.aq .aq-room-row__controls {
    margin-left: auto;
}

/* Advisor support icon sizing (replaces the placeholder avatar circle) */
.aq .aq-advisor__icon {
    width: 44px;
    height: 44px;
    align-self: center;
}

/* ============================================================
   18. Responsive
   ============================================================ */
@media (max-width: 520px) {
    .aq {
        border-radius: 0;
        max-width: 100%;
        box-shadow: none;
    }

    .aq .aq-step__body {
        padding: 16px;
    }

    .aq .aq-step__header {
        padding: 14px 16px 12px;
    }

    .aq .aq-step__footer {
        padding: 12px 16px 14px;
    }

    .aq .aq-step1__title,
    .aq .aq-step2__title {
        font-size: 1.05rem;
    }

    .aq .aq-btn {
        font-size: 0.95rem;
        padding: 13px 16px;
    }

    .aq .aq-tabs__tab {
        font-size: 0.9rem;
    }

    .aq .aq-price-block__value--final {
        font-size: 1.1rem;
    }

    /* The date row does not fit on one line on a phone. Two columns, and the
       four children (icon, date field, switch, its label) flow into two rows:
       icon + field, then the switch + label underneath. */
    .aq .aq-cfdate {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: center;
    }
}



/* ============================================================
   19. Inline validation — pressing the CTA points at what is missing
   ============================================================ */
.aq .aq-invalid .aq-field__input,
.aq .aq-invalid .aq-field__checkbox {
    border-color: var(--aq-red-border);
    outline: none;
}

.aq .aq-invalid .aq-room-row__controls {
    border-radius: var(--aq-radius-sm);
    box-shadow: 0 0 0 1px var(--aq-red-border);
}

.aq .aq-field__error {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--aq-red-text);
}

/* ============================================================
   20. Itinerary day — clamped preview + read-more toggle
   ============================================================ */
.aq .aq-itinerary__body {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Two lines by default; JS drops the modifier to expand. The fallback keeps a
   hard cap in browsers without line-clamp so a long day can never take over. */
.aq .aq-itinerary__content--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.8em;
}

.aq .aq-itinerary__more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aq-blue);
    cursor: pointer;
}

.aq .aq-itinerary__more::before {
    content: '+ ';
}

.aq .aq-itinerary__more[aria-expanded="true"]::before {
    content: '\2212\00a0'; /* minus + nbsp */
}

.aq .aq-itinerary__more:hover {
    text-decoration: underline;
}

/* ============================================================
   21. Call us — local numbers
   ============================================================ */
.aq .aq-phones {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aq .aq-phones[hidden] { display: none; }

.aq .aq-phones__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
}

.aq .aq-phones__flag {
    grid-row: 1 / span 2;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
}

.aq .aq-phones__country {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--aq-black);
}

.aq .aq-phones__number {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--aq-blue);
    text-decoration: none;
}

.aq .aq-phones__number:hover {
    text-decoration: underline;
}