/*!
 * Daves Taxis Cruise Planner — public stylesheet
 * v1.0.0
 *
 * All selectors prefixed .dtcp-. CSS custom properties default to theme
 * tokens (--dt-*) where present, so the planner picks up brand colour
 * automatically on Daves Taxis. White-label installs override --dtcp-*.
 */

:root {
    --dtcp-accent:   var(--dt-red, #CC0000);
    --dtcp-accent-h: var(--dt-red-h, #A50000);
    --dtcp-accent-fade: var(--dt-red-fade, rgba(204,0,0,0.10));
    --dtcp-bg:       var(--dt-bg, #121212);
    --dtcp-surface:  var(--dt-surface, #1A1A1A);
    --dtcp-surface-2: var(--dt-surface-2, #222222);
    --dtcp-text:     var(--dt-text, #F0F0F0);
    --dtcp-muted:    var(--dt-muted, #9A9A9A);
    --dtcp-border:   var(--dt-border, rgba(255,255,255,0.10));
    --dtcp-radius:   12px;
    --dtcp-radius-sm: 8px;
    --dtcp-good:     #2EA043;
}

/* ── Container ─────────────────────────────────────────────────── */
.dtcp-planner {
    background: var(--dtcp-surface);
    color: var(--dtcp-text);
    border: 1px solid var(--dtcp-border);
    border-radius: var(--dtcp-radius);
    padding: clamp(20px, 4vw, 40px);
    max-width: 760px;
    margin: 24px auto;
    font-family: inherit;
}

/* v1.1.5 — Result mode collapses the title, subheading and stepper
 * once a result (match OR fallback) is on screen. Sean's screenshot
 * showed the issue: the stepper persisted at the top with "Style"
 * still styled as the active step, while the panel below was the
 * fallback message — visually the two had nothing to do with each
 * other and the orphaned stepper made the whole card read as broken.
 * Hiding the navigation furniture once the planner has done its job
 * lets the result panel own the full card width. The reset() path
 * removes the class, so Start Over restores the planner cleanly. */
.dtcp-planner.is-result-mode .dtcp-planner__header,
.dtcp-planner.is-result-mode .dtcp-steps {
    display: none;
}

.dtcp-planner__header {
    text-align: center;
    margin-bottom: 28px;
}
.dtcp-planner__title {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    line-height: 1.15;
    color: var(--dtcp-text);
}
.dtcp-planner__sub {
    margin: 0;
    color: var(--dtcp-muted);
    font-size: 0.95rem;
}

/* ── Step indicator ────────────────────────────────────────────── */
.dtcp-steps {
    margin: 0 0 24px;
}
.dtcp-steps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.dtcp-step {
    flex: 1;
    text-align: center;
    color: var(--dtcp-muted);
    font-size: 0.78rem;
    line-height: 1.3;
    position: relative;
    padding-top: 32px;
}
/* v1.1.5 — Connecting line between step circles. Draws from the previous
 * circle's right edge to this step's left edge, sitting at the vertical
 * centre of the 26px circle (top: 13px). The line is grey by default;
 * when the previous step is done, the line linking to the current step
 * fills with the accent colour, giving an at-a-glance read of progress
 * even before users notice the tick marks. */
.dtcp-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    height: 1px;
    background: var(--dtcp-border);
    transition: background 0.25s ease;
}
.dtcp-step.is-done + .dtcp-step::before {
    background: var(--dtcp-accent);
}
.dtcp-step__num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dtcp-surface-2);
    border: 1px solid var(--dtcp-border);
    color: var(--dtcp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dtcp-step.is-active .dtcp-step__num,
.dtcp-step.is-done   .dtcp-step__num {
    background: var(--dtcp-accent);
    color: #fff;
    border-color: var(--dtcp-accent);
}
/* v1.1.5 — Done state shows a checkmark in place of the number. Active
 * keeps the digit so the user can still parse "I'm on step 2 of 3" at
 * a glance. font-size:0 hides the original digit; ::before renders the
 * tick using the existing flex centring on .dtcp-step__num so we don't
 * need additional positioning. */
.dtcp-step.is-done .dtcp-step__num {
    font-size: 0;
}
.dtcp-step.is-done .dtcp-step__num::before {
    content: "✓";
    font-size: 0.85rem;
    line-height: 1;
    color: #fff;
}
.dtcp-step.is-active .dtcp-step__lbl {
    color: var(--dtcp-text);
    font-weight: 600;
}
.dtcp-step.is-done .dtcp-step__lbl {
    color: var(--dtcp-text);
}

/* ── Panels ────────────────────────────────────────────────────── */
.dtcp-panel {
    border: 0;
    margin: 0;
    padding: 0;
    display: none;
}
.dtcp-panel.is-visible {
    display: block;
    animation: dtcp-fade 0.25s ease;
}
@keyframes dtcp-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dtcp-panel__q {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 16px;
    padding: 0;
    color: var(--dtcp-text);
}

/* ── Options ───────────────────────────────────────────────────── */
.dtcp-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
@media (min-width: 540px) {
    .dtcp-options { grid-template-columns: 1fr 1fr; }
}

.dtcp-option {
    display: block;
    cursor: pointer;
    position: relative;
}
.dtcp-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.dtcp-option__inner {
    display: block;
    padding: 16px 18px; /* v1.2.0 — was 14px 16px; bumped for WCAG 2.5.5 */
    min-height: 44px;
    background: var(--dtcp-surface-2);
    border: 1px solid var(--dtcp-border);
    border-radius: var(--dtcp-radius-sm);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.dtcp-option:hover .dtcp-option__inner {
    border-color: var(--dtcp-accent);
}
.dtcp-option input[type="radio"]:focus-visible + .dtcp-option__inner {
    outline: 2px solid var(--dtcp-accent);
    outline-offset: 2px;
}
.dtcp-option input[type="radio"]:checked + .dtcp-option__inner {
    background: var(--dtcp-accent-fade);
    border-color: var(--dtcp-accent);
}
.dtcp-option__label {
    display: block;
    font-weight: 600;
    color: var(--dtcp-text);
    line-height: 1.2;
}
.dtcp-option__hint {
    display: block;
    font-size: 0.85rem;
    color: var(--dtcp-muted);
    margin-top: 4px;
    line-height: 1.35;
}

/* ── Actions / buttons ─────────────────────────────────────────── */
.dtcp-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.dtcp-actions > *:only-child { margin-left: auto; }

.dtcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    min-height: 44px; /* v1.2.0 — WCAG 2.5.5 / cruise demographic */
    border-radius: var(--dtcp-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.05s ease;
}
.dtcp-btn:disabled,
.dtcp-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Primary button — solid accent fill with white text.
 *
 * v1.1.4 — !important added on color/background. Without it, the
 * davestaxis theme's critical.css rules for <a> tags (which use
 * !important per SiteGround StackCache requirements) were winning
 * the specificity battle on .dtcp-btn--primary specifically, leaving
 * the button as a solid red rectangle with no visible "Book this
 * itinerary" text. The .dtcp-btn--ghost variant wasn't affected
 * because its text colour comes from the .dtcp-btn base + matching
 * theme link color, so the override was harmless there. Hardcoded
 * #fff rather than var(--dtcp-accent-text) to mirror Sean's theme
 * pattern of hardcoding values in !important rules so they survive
 * SiteGround's page-level CSS caching. */
.dtcp-btn--primary {
    background: var(--dtcp-accent) !important;
    color: #fff !important;
    border-color: var(--dtcp-accent) !important;
}
.dtcp-btn--primary:hover:not(:disabled) {
    background: var(--dtcp-accent-h) !important;
    border-color: var(--dtcp-accent-h) !important;
    color: #fff !important;
}
.dtcp-btn--ghost {
    background: transparent;
    color: var(--dtcp-text);
    border-color: var(--dtcp-border);
}
.dtcp-btn--ghost:hover:not(:disabled) {
    border-color: var(--dtcp-accent);
    color: var(--dtcp-text);
}

/* ── Loading ───────────────────────────────────────────────────── */
/* v1.1.2 — Scoped to :not([hidden]) so the HTML hidden attribute on
 * <div data-dtcp-loading hidden> is respected. Was unconditional
 * `display: flex` which has the same specificity (0,1,0) as the UA
 * stylesheet's [hidden] { display: none } rule, but loaded later in
 * the cascade and won. Result: the spinner was visible from page
 * load whether or not a fetch was in progress, looking like a
 * perpetual loading state to the user. */
.dtcp-loading {
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 0;
    color: var(--dtcp-muted);
}
.dtcp-loading:not([hidden]) {
    display: flex;
}
.dtcp-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--dtcp-border);
    border-top-color: var(--dtcp-accent);
    animation: dtcp-spin 0.8s linear infinite;
}
@keyframes dtcp-spin { to { transform: rotate(360deg); } }

/* ── Result region & cards ─────────────────────────────────────── */
.dtcp-result-region {
    margin-top: 24px;
}
.dtcp-result-region--alts {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--dtcp-border);
}
.dtcp-result-region__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dtcp-muted);
    margin: 0 0 12px;
}

.dtcp-card {
    background: var(--dtcp-surface);
    border: 1px solid var(--dtcp-border);
    border-radius: var(--dtcp-radius);
    padding: clamp(20px, 3.5vw, 32px);
    margin: 0 0 16px;
}
.dtcp-card--alt {
    padding: 20px;
}
.dtcp-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(46,160,67,0.12);
    color: var(--dtcp-good);
    border: 1px solid rgba(46,160,67,0.4);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 16px;
}
.dtcp-card__badge-icon { font-weight: 800; }

.dtcp-card__title {
    margin: 0 0 12px;
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    line-height: 1.2;
    color: var(--dtcp-text);
}
.dtcp-card__title a {
    color: inherit;
    text-decoration: none;
}
.dtcp-card__title a:hover { color: var(--dtcp-accent); }

.dtcp-card__summary {
    margin: 0 0 16px;
    color: var(--dtcp-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.dtcp-card__meta {
    list-style: none;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--dtcp-surface-2);
    border-radius: var(--dtcp-radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}
.dtcp-card__meta li { margin: 0; }
.dtcp-card__meta li + li { margin-top: 4px; }
.dtcp-card__meta strong { color: var(--dtcp-muted); font-weight: 600; }

.dtcp-card__timeline {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-left: 2px solid var(--dtcp-border);
    padding-left: 16px;
}
.dtcp-card__timeline-step {
    position: relative;
    padding: 6px 0;
    font-size: 0.9rem;
}
.dtcp-card__timeline-step::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dtcp-muted);
}
.dtcp-card__timeline-step--start::before,
.dtcp-card__timeline-step--end::before {
    background: var(--dtcp-accent);
}
.dtcp-card__timeline-time {
    display: inline-block;
    font-weight: 600;
    color: var(--dtcp-muted);
    width: 80px;
}
.dtcp-card__timeline-place {
    color: var(--dtcp-text);
}
.dtcp-card__timeline-place a {
    color: var(--dtcp-text);
    text-decoration: underline;
    text-decoration-color: var(--dtcp-accent);
}
.dtcp-card__timeline-dwell,
.dtcp-card__timeline-note {
    display: inline-block;
    color: var(--dtcp-muted);
    font-size: 0.83rem;
    margin-left: 4px;
}

.dtcp-card__insight {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 3px solid var(--dtcp-accent);
    background: var(--dtcp-accent-fade);
    border-radius: 0 var(--dtcp-radius-sm) var(--dtcp-radius-sm) 0;
}
.dtcp-card__insight p {
    margin: 0 0 6px;
    font-style: italic;
    line-height: 1.5;
}
.dtcp-card__insight cite {
    color: var(--dtcp-muted);
    font-size: 0.85rem;
    font-style: normal;
}

.dtcp-card__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dtcp-card__ctas .dtcp-btn { flex: 1 1 200px; }

.dtcp-card__more {
    margin: 16px 0 0;
    font-size: 0.9rem;
}
.dtcp-card__more a {
    color: var(--dtcp-accent);
    text-decoration: none;
}
.dtcp-card__more a:hover { text-decoration: underline; }

/* ── Match reasons (v1.1) ──────────────────────────────────────── */
.dtcp-card__reasons {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dtcp-card__reason {
    display: inline-block;
    padding: 4px 10px;
    background: var(--dtcp-accent-fade);
    border: 1px solid var(--dtcp-accent);
    color: var(--dtcp-text);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 500;
}

/* ── Timeline thumbnails (v1.1, Rule 18) ───────────────────────── */
.dtcp-card__timeline-step.has-thumb {
    display: grid;
    grid-template-columns: 80px 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}
.dtcp-card__timeline-thumb-wrap {
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--dtcp-surface-2);
    flex-shrink: 0;
}
.dtcp-card__timeline-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
}
@media (max-width: 480px) {
    .dtcp-card__timeline-step.has-thumb {
        grid-template-columns: 60px 44px 1fr;
        gap: 8px;
    }
    .dtcp-card__timeline-thumb-wrap,
    .dtcp-card__timeline-thumb { width: 44px; height: 44px; }
}

/* ── Browse all itineraries (v1.1, SEO/AI fallback) ────────────── */
/* v1.2.2 — Reduced visual weight. Previously rendered as a separate
 * card with full background + border + radius, identical to the
 * planner wizard above — read as "another widget" rather than a
 * continuation of the same planning experience. Now: no background,
 * no border, no radius. Top border + 'Or' framing in the heading
 * signals continuation. Width stays at 760px so it aligns with the
 * wizard. */
.dtcp-browse {
    max-width: 760px;
    margin: 24px auto 0;
    /* v2.0.1 — Horizontal padding matched to .dtcp-planner's
     * clamp(20px, 4vw, 40px) so the "Or browse all itineraries"
     * heading lands at the same x as the planner's question above.
     * v1.2.2's note that width preserved alignment was only half true
     * — width matched, but the inner padding offset didn't, putting
     * the heading 12-24px further left than the planner's content. */
    padding: 24px clamp(20px, 4vw, 40px) 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--dtcp-border);
    border-radius: 0;
    color: var(--dtcp-text);
}
.dtcp-browse__heading {
    margin: 0 0 8px;
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    line-height: 1.3;
    color: var(--dtcp-muted);
    font-weight: 600;
}
.dtcp-browse__intro {
    margin: 0 0 20px;
    color: var(--dtcp-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.dtcp-browse__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 14px;
}
.dtcp-browse__item {
    padding: 14px 16px;
    background: var(--dtcp-surface-2);
    border: 1px solid var(--dtcp-border);
    border-radius: var(--dtcp-radius-sm);
}
.dtcp-browse__item-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    line-height: 1.25;
}
.dtcp-browse__item-title a {
    color: var(--dtcp-text);
    text-decoration: none;
}
.dtcp-browse__item-title a:hover { color: var(--dtcp-accent); }
.dtcp-browse__item-meta {
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dtcp-browse__pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--dtcp-bg);
    color: var(--dtcp-muted);
    border: 1px solid var(--dtcp-border);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
}
.dtcp-browse__pill--safe {
    color: var(--dtcp-good);
    border-color: rgba(46,160,67,0.4);
}
.dtcp-browse__item-summary {
    margin: 0;
    color: var(--dtcp-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}
.dtcp-browse__footnote {
    margin: 12px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--dtcp-border);
    color: var(--dtcp-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ── Fallback (no match) ───────────────────────────────────────── */
/* v1.1.5 — Significant restructure following Sean's "looks broken" feedback.
 *
 * Changes from v1.1.3 → v1.1.5:
 *   - Dashed border removed. Dashed reads as system-error / disabled in
 *     this codebase's visual vocabulary (see admin notice patterns) and
 *     was setting the wrong tone for what is now framed as a positive
 *     hand-off ("Dave will build it").
 *   - Three-region layout: SUMMARY (the user's selections as chips),
 *     MESSAGE + CTAS (centred), FOOTER (small secondary actions).
 *     Each region has its own internal spacing and a soft divider so
 *     the panel reads as a deliberate three-act response, not a single
 *     wall of text + buttons.
 *   - Padding lifted to clamp(24px, 4vw, 36px) so the panel breathes
 *     inside the planner card and matches the result-card padding scale.
 *
 * The same panel is still re-used by renderError so network failures
 * present the same shape, minus the summary chips (no selections to
 * show on a transport error). */
.dtcp-fallback {
    background: var(--dtcp-surface-2);
    border: 1px solid var(--dtcp-border);
    border-radius: var(--dtcp-radius);
    padding: clamp(24px, 4vw, 36px);
}
.dtcp-fallback__summary {
    margin: 0 0 22px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--dtcp-border);
}
.dtcp-fallback__summary-label {
    margin: 0 0 10px;
    color: var(--dtcp-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.dtcp-fallback__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dtcp-fallback__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--dtcp-bg);
    border: 1px solid var(--dtcp-border);
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--dtcp-text);
    line-height: 1.3;
}
.dtcp-fallback__chip-icon {
    font-size: 1rem;
    line-height: 1;
}
.dtcp-fallback__chip-label {
    color: var(--dtcp-muted);
    font-size: 0.78rem;
    margin-right: 2px;
}
.dtcp-fallback__msg {
    margin: 0 auto 22px;
    color: var(--dtcp-text);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 540px;
    text-align: center;
}
.dtcp-fallback__ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.dtcp-fallback__cta-btn {
    /* additional fallback-specific layout lives here; base styles on .dtcp-btn */
    min-width: 200px;
    padding-left: 26px;
    padding-right: 26px;
}
/* v1.1.5 — Footer row replaces the standalone .dtcp-restart block.
 * Three secondary actions sit in one tidy row at the bottom of the
 * panel: Adjust your answers (preserves selections, returns to step 1),
 * Email through contact form (existing alt link), Start over (full
 * reset). All three are visually equivalent links — none are styled
 * as primary buttons because the primary actions are Call and WhatsApp
 * above. The footer is separated from the CTAs by a soft divider. */
.dtcp-fallback__footer {
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--dtcp-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
    align-items: center;
    font-size: 0.86rem;
}
.dtcp-fallback__footer a,
.dtcp-fallback__footer button {
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--dtcp-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font: inherit;
    line-height: 1.3;
}
.dtcp-fallback__footer a:hover,
.dtcp-fallback__footer button:hover {
    color: var(--dtcp-text);
}
.dtcp-fallback__footer-sep {
    color: var(--dtcp-border);
    user-select: none;
}
@media (max-width: 480px) {
    .dtcp-fallback__footer { flex-direction: column; gap: 10px; }
    .dtcp-fallback__footer-sep { display: none; }
    .dtcp-fallback__cta-btn { width: 100%; min-width: 0; }
}

/* Legacy v1.1.3 .dtcp-fallback__alt selector retained for backward
 * compatibility — renderError still uses the simpler shape (no chips,
 * no footer row) so that path still renders the inline contact link
 * the same way it did before. New no-match fallback uses the footer
 * structure above. */
.dtcp-fallback__alt {
    margin: 18px 0 0;
    font-size: 0.88rem;
    color: var(--dtcp-muted);
    text-align: center;
}
.dtcp-fallback__alt a {
    color: var(--dtcp-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dtcp-fallback__alt a:hover {
    color: var(--dtcp-text);
}

/* WhatsApp button — green, distinct from primary red for clarity.
 * v1.1.4 — same !important defence as .dtcp-btn--primary. Theme
 * <a> rules in critical.css would otherwise repaint the text colour
 * and make the button text invisible against the green fill. */
.dtcp-btn--whatsapp {
    background: #25D366 !important;
    color: #fff !important;
    border-color: #25D366 !important;
}
.dtcp-btn--whatsapp:hover:not(:disabled) {
    background: #1FB955 !important;
    border-color: #1FB955 !important;
    color: #fff !important;
}

/* ── Restart ───────────────────────────────────────────────────── */
.dtcp-restart {
    text-align: center;
    margin-top: 16px;
}
.dtcp-restart button {
    background: transparent;
    color: var(--dtcp-muted);
    border: 0;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 8px 12px;
}
.dtcp-restart button:hover { color: var(--dtcp-text); }

/* ── Single CPT page (when no theme override) ──────────────────── */
.dtcp-single { max-width: 920px; margin: 0 auto; padding: 24px; }
.dtcp-single__hero { margin: 0 0 24px; }
.dtcp-single__hero-img { width: 100%; height: auto; border-radius: var(--dtcp-radius); }
.dtcp-single__article { font-size: 1rem; line-height: 1.6; }
.dtcp-single__body { margin-top: 28px; }
.dtcp-single__planner-link { margin-top: 32px; text-align: center; }
.dtcp-single__planner-link a {
    color: var(--dtcp-accent);
    text-decoration: none;
    font-weight: 600;
}

/* ── Trip-feature chips (v1.2.0) ───────────────────────────────────
 * Universal "what this itinerary IS" chips. Visually distinct from
 * .dtcp-card__reasons — chips use a subtle surface fill with the
 * border in --dtcp-good (green) for the cruise-safe family of
 * reassurance signals; reasons use the accent fade with the accent
 * border because they describe a personalised match. Keeping the
 * two visually different so users can tell at a glance that one
 * row is "facts about the trip" and the other is "why we picked
 * this one for you". */
.dtcp-card__chips {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dtcp-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--dtcp-surface-2);
    border: 1px solid var(--dtcp-border);
    color: var(--dtcp-text);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 500;
}
.dtcp-card__chip-icon {
    font-size: 0.95rem;
    line-height: 1;
    /* Emoji glyphs render larger than text x-height; compensate so the
     * chip's vertical centre stays on the text baseline. */
    transform: translateY(-1px);
}
.dtcp-card__chip-label {
    white-space: nowrap;
}
/* Soft accent shade per kind. Wheelchair = the brand's accessibility
 * green (cruise-safe semantic); walking = neutral; weather = blue tint;
 * family = warm tint. Subtle — the chip's job is at-a-glance
 * recognition, not flag-waving. */
.dtcp-card__chip--wheelchair {
    border-color: var(--dtcp-good);
}
.dtcp-card__chip--weather {
    border-color: rgba(110, 168, 254, 0.55); /* soft blue */
}
.dtcp-card__chip--family {
    border-color: rgba(255, 184, 108, 0.55); /* soft warm */
}

/* ── Skeleton loading state (v1.2.0) ───────────────────────────────
 * Replaces the spinner-only loading panel with a shape-affording
 * skeleton card that previews the result layout. Reduces perceived
 * latency on Sean's site (cruise-ship Wi-Fi can take 1–3s to round
 * trip the /match REST call) and confirms to the user that the
 * planner is doing something rather than stuck. The spinner is kept
 * above the skeleton as the literal "in progress" affordance for
 * users who scan the spinner first; the skeleton is decorative
 * (aria-hidden in the markup) so screen readers announce only the
 * "Finding the best fit…" status text. */
.dtcp-skeleton {
    margin-top: 16px;
    background: var(--dtcp-surface);
    border: 1px solid var(--dtcp-border);
    border-radius: var(--dtcp-radius);
    padding: 24px clamp(20px, 3vw, 32px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.dtcp-skeleton__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.dtcp-skeleton__row:last-child { margin-bottom: 0; }
.dtcp-skeleton__bar {
    background: linear-gradient(
        90deg,
        var(--dtcp-surface-2) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        var(--dtcp-surface-2) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    height: 14px;
    animation: dtcp-shimmer 1.4s ease-in-out infinite;
}
.dtcp-skeleton__bar--badge   { height: 22px; width: 60%; max-width: 280px; border-radius: 999px; }
.dtcp-skeleton__bar--title   { height: 24px; width: 70%; }
.dtcp-skeleton__bar--chip    { height: 22px; width: 110px; border-radius: 999px; }
.dtcp-skeleton__bar--reason  { height: 22px; width: 140px; border-radius: 999px; }
.dtcp-skeleton__bar--line    { height: 12px; width: 100%; }
.dtcp-skeleton__bar--line-short { height: 12px; width: 60%; }
.dtcp-skeleton__bar--button  { height: 44px; width: 180px; border-radius: var(--dtcp-radius-sm); }
@keyframes dtcp-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
/* Respect prefers-reduced-motion — replace shimmer with a static
 * grey block so the skeleton still communicates loading without
 * animation. */
@media (prefers-reduced-motion: reduce) {
    .dtcp-skeleton__bar { animation: none; background: var(--dtcp-surface-2); }
}

/* v1.2.0 — Fallback footer buttons (Adjust / Restart) and the inline
 * footer in renderResult use plain <button> elements. Bump them to
 * 44px min-height to match the rest of the planner's tap targets. */
.dtcp-fallback__footer button,
.dtcp-fallback__footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────────────────────────
 * v2.0.0 — AIRPORT-MODE COMPONENTS
 *
 * Step 1 now contains sub-panels. The default is the destination
 * decision; user choice unfolds either the time-band or the airport-
 * details sub-panel. JS toggles .is-visible on the .dtcp-subpanel
 * elements.
 *
 * Result card gets a viability tier banner replacing the cruise-safe
 * badge in airport mode, an airport-specific timeline, and a
 * "Latest safe check-in" callout. Colours mirror the theme-side
 * cruise-tour styles so the planner and the spoke pages read as the
 * same product.
 * ───────────────────────────────────────────────────────────── */

/* Sub-panel visibility within Step 1. The sub-panels stack inside the
 * fieldset and only the active one is shown. Display: none → block
 * rather than visibility: hidden so collapsed sub-panels don't take
 * vertical space in the fieldset and don't tab-focus accidentally. */
.dtcp-subpanel { display: none; }
.dtcp-subpanel.is-visible { display: block; }

/* Airport sub-panel form fields. Stacked rows with label-on-top,
 * input-below. The browser-native time picker handles input on all
 * supported browsers (Chrome, Firefox, Safari 14.1+, mobile Safari).
 * Older Safari versions fall back to a text input — value still
 * validates server-side regardless. */
.dtcp-airport-field {
    margin: 0 0 18px;
}
.dtcp-airport-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dtcp-text, #2c2c2c);
    margin-bottom: 6px;
}
.dtcp-airport-select,
.dtcp-flight-time-input {
    width: 100%;
    max-width: 360px;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid var(--dtcp-border, #d3d6db);
    border-radius: 8px;
    background: #fff;
    min-height: 44px;
    box-sizing: border-box;
}
.dtcp-airport-select:focus,
.dtcp-flight-time-input:focus {
    outline: 2px solid var(--dtcp-accent, #3a86c4);
    outline-offset: 2px;
}
.dtcp-airport-hint {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--dtcp-muted, #5e6470);
    line-height: 1.5;
}
.dtcp-airport-locked-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(58, 134, 196, 0.08);
    border-left: 3px solid #3a86c4;
    border-radius: 4px;
    font-size: 0.88rem;
    color: var(--dtcp-text, #2c2c2c);
    line-height: 1.5;
}
.dtcp-airport-flighttype {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.dtcp-airport-flighttype__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    cursor: pointer;
}

/* Viability tier banner on the result card. Replaces .dtcp-card__badge
 * in airport mode. Three variants, mapped from the matcher's margin
 * computation. Same colour palette as the theme-side cruise-tour
 * viability card so visual continuity is preserved when the user
 * crosses between spoke page and planner widget. */
.dtcp-card__viability {
    display: block;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #999;
    background: rgba(0, 0, 0, 0.03);
    line-height: 1.5;
}
.dtcp-card__viability-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.dtcp-card__viability-detail {
    display: block;
    font-size: 0.88rem;
    color: var(--dtcp-text, #2c2c2c);
}
.dtcp-card__viability--conservative {
    border-left-color: #2da06c;
    background: rgba(45, 160, 108, 0.08);
}
.dtcp-card__viability--conservative .dtcp-card__viability-label { color: #1e7d52; }
.dtcp-card__viability--comfortable {
    border-left-color: #3a86c4;
    background: rgba(58, 134, 196, 0.08);
}
.dtcp-card__viability--comfortable .dtcp-card__viability-label { color: #2563a6; }
.dtcp-card__viability--tight {
    border-left-color: #d49526;
    background: rgba(212, 149, 38, 0.08);
}
.dtcp-card__viability--tight .dtcp-card__viability-label { color: #a06b15; }

/* Latest-safe-check-in callout above the timeline. The headline number
 * the passenger is buying. Sits on its own row so it doesn't compete
 * with the timeline's visual flow. */
.dtcp-card__check-in-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 18px 0 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    font-size: 0.92rem;
}
.dtcp-card__check-in-label {
    font-weight: 600;
    color: var(--dtcp-muted, #5e6470);
}
.dtcp-card__check-in-time {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--dtcp-text, #2c2c2c);
    font-variant-numeric: tabular-nums;
}
.dtcp-card__check-in-airport {
    color: var(--dtcp-muted, #5e6470);
    font-size: 0.88rem;
}

/* Airport-mode timeline steps. The depart-for-airport and drop-off-at-
 * airport rows get a distinct marker colour (green) to visually
 * separate them from the regular tour stops. */
.dtcp-card__timeline-step--airport .dtcp-card__timeline-time,
.dtcp-card__timeline-step--end .dtcp-card__timeline-time {
    color: #2da06c;
    font-weight: 700;
}
.dtcp-card--airport .dtcp-card__timeline-step--end .dtcp-card__timeline-time {
    color: #1e7d52;
}