/* ==============================================
   RETURN Africa — Journey Builder Widget
   ============================================== */

.ra-nbw-journey {
    font-family: inherit;
    max-width: 100%;
}

/* ---- Mode toggle ---- */
.ra-nbw-journey-mode-wrap {
    margin-bottom: 20px;
}
.ra-nbw-journey-mode-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #302A26;
    margin: 0 0 10px;
}
.ra-nbw-journey-mode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ra-nbw-journey-mode-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1.5px solid #e8ded5;
    border-radius: 8px;
    background: #faf7f4;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.ra-nbw-journey-mode-btn:hover { border-color: #C7B3A4; background: #e8ded5; }
.ra-nbw-journey-mode-btn--active { border-color: #302A26; background: #302A26; }
.ra-nbw-journey-mode-btn--active strong { color: #e8ded5; }
.ra-nbw-journey-mode-btn--active span { color: #C7B3A4; }
.ra-nbw-journey-mode-btn strong { font-size: 0.9rem; color: #302A26; display: block; }
.ra-nbw-journey-mode-btn span { font-size: 0.78rem; color: #888; line-height: 1.4; }

/* ---- Confirmation overlay ---- */
.ra-nbw-journey-confirm {
    background: #faf7f4;
    border: 1px solid #e8ded5;
    border-radius: 6px;
    padding: 20px 24px;
    margin: 16px 0;
    max-width: 520px;
}
.ra-nbw-journey-confirm-step {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #C7B3A4;
    margin-bottom: 6px;
}
.ra-nbw-journey-confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: #302A26;
    margin: 0 0 10px;
}
.ra-nbw-journey-confirm-summary {
    background: #e8ded5;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #302A26;
    margin-bottom: 10px;
    line-height: 1.5;
}
.ra-nbw-journey-confirm-summary strong { display: block; font-weight: 700; }
.ra-nbw-journey-confirm-summary span { font-size: 0.78rem; color: #666; }
.ra-nbw-journey-confirm-note { font-size: 0.82rem; color: #555; margin: 0 0 14px; line-height: 1.5; }
.ra-nbw-journey-confirm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* .ra-nbw-journey-confirm-no now uses the shared .ra-nbw-btn-outline style. */

/* ---- Guest detail fields (enquire mode) ---- */
.ra-nbw-journey-section-heading {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #302A26;
    margin: 16px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8ded5;
}
.ra-nbw-journey-guest-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 12px;
}
.ra-nbw-journey-guest-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #302A26;
}
.ra-nbw-journey-guest-row input {
    padding: 8px 10px;
    border: 1px solid #e8ded5;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #302A26;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}

/* ---- Print + Share buttons — one row, not stacked ---- */
.ra-nbw-journey-print-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
/* .ra-nbw-journey-print-btn now uses the shared .ra-nbw-btn-outline style
   (matching Share Itinerary exactly) — this used to have its own padding/
   border-radius/font-size that silently won out over .ra-nbw-btn-outline
   due to CSS source order, making the two buttons different sizes. */

/* ---- Printable view ---- */
.ra-nbw-journey-print-view {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #fff;
    z-index: 9999998;
    overflow-y: auto;
    padding: 40px;
    box-sizing: border-box;
}
.ra-nbw-journey-print-inner { max-width: 600px; margin: 0 auto; font-family: Georgia, serif; }
.ra-nbw-journey-print-logo { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.ra-nbw-journey-print-title { font-size: 1.4rem; font-weight: 700; color: #302A26; margin: 0 0 20px; }
.ra-nbw-print-leg { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e8ded5; }
.ra-nbw-print-leg-num { width: 26px; height: 26px; border-radius: 50%; background: #302A26; color: #e8ded5; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-family: sans-serif; }
.ra-nbw-print-leg-detail { font-size: 0.9rem; color: #302A26; line-height: 1.5; }
.ra-nbw-print-leg-detail strong { display: block; font-weight: 700; }
.ra-nbw-print-leg-detail span { font-size: 0.8rem; color: #555; display: block; }
.ra-nbw-journey-print-disclaimer { margin-top: 20px; padding: 12px 14px; background: #fff8ee; border: 1px solid #e8b86d; border-radius: 4px; font-size: 0.78rem; color: #63380f; line-height: 1.6; font-family: sans-serif; }
.ra-nbw-journey-print-close { margin-top: 16px; background: transparent; border: 1px solid #c3c4c7; padding: 7px 16px; border-radius: 4px; cursor: pointer; font-family: sans-serif; font-size: 0.85rem; }
@media print { .ra-nbw-journey-print-close { display: none; } }

/* ---- Leg cards ---- */
.ra-nbw-journey-legs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ra-nbw-journey-leg {
    border: 1px solid #e8ded5;
    border-radius: 6px;
    background: #faf7f4;
    overflow: hidden;
}

.ra-nbw-journey-leg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8ded5;
    padding: 8px 14px;
}

.ra-nbw-journey-leg-num {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #302A26;
}

.ra-nbw-journey-remove-leg {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #302A26;
    line-height: 1;
    padding: 0 2px;
}
.ra-nbw-journey-remove-leg:hover { color: #a94442; }

.ra-nbw-journey-leg-body {
    display: grid;
    /* Row 1: Accommodation | Unit Type — the dependent pair, same grouping
       as the booking widget. Row 2: Check-in | Check-out. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    padding: 14px 14px 12px;
}

.ra-nbw-journey-field--prop     { grid-column: 1 / span 2; grid-row: 1; }
.ra-nbw-journey-field--unit     { grid-column: 3 / span 2; grid-row: 1; }
.ra-nbw-journey-field--checkin  { grid-column: 1 / span 2; grid-row: 2; }
.ra-nbw-journey-field--checkout { grid-column: 3 / span 2; grid-row: 2; }

.ra-nbw-journey-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ra-nbw-journey-field label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #302A26;
}

.ra-nbw-journey-field select,
.ra-nbw-journey-field input {
    width: 100%;
    box-sizing: border-box;
}
.ra-nbw-journey-field .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nights sits on its own full-width row right below the main fields; Rate
   Code gets its own full-width row below that — both used to be squeezed
   into narrow columns next to the date fields. */
.ra-nbw-journey-nights {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: center;
    margin: 2px 0;
}
.ra-nbw-journey-field--ratecode {
    grid-column: 1 / -1;
}

/* ---- Partner property booking message ---- */
.ra-nbw-journey-partner-msg {
    margin: 0 14px 12px;
    padding: 10px 14px;
    background: #fff8ee;
    border: 1px solid #e8b86d;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #63380f;
    line-height: 1.5;
}
.ra-nbw-journey-partner-msg a {
    color: #302A26;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Leg availability accordion ---- */
.ra-nbw-journey-avail {
    padding: 0 14px 12px;
}
.ra-nbw-journey-avail .ra-nbw-ical-conflict-msg {
    margin-top: 8px;
}
.ra-nbw-journey-avail .ra-nbw-avail-toggle {
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 4px;
}
.ra-nbw-journey-avail .ra-nbw-avail-content {
    margin-top: 8px;
    padding: 12px;
}

/* ---- Add leg button ---- */
.ra-nbw-journey-actions {
    margin-bottom: 20px;
}

.ra-nbw-journey-add-leg {
    background: transparent;
    border: 1px dashed #C7B3A4;
    color: #302A26;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    text-align: center;
}
.ra-nbw-journey-add-leg:hover {
    background: #e8ded5;
    border-color: #302A26;
    border-style: solid;
}

/* ---- Summary ---- */
.ra-nbw-journey-summary {
    background: #faf7f4;
    border: 1px solid #e8ded5;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.ra-nbw-journey-terms-panel { margin-top: 4px; }

.ra-nbw-journey-summary-title {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #302A26;
    margin: 0 0 14px;
}

.ra-nbw-journey-summary-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.ra-nbw-journey-summary-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #302A26;
    color: #e8ded5;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.ra-nbw-journey-summary-detail {
    font-size: 0.88rem;
    color: #302A26;
    line-height: 1.4;
}

.ra-nbw-journey-summary-detail strong {
    font-weight: 700;
}

.ra-nbw-journey-summary-dates {
    display: block;
    font-size: 0.78rem;
    color: #666;
    margin-top: 2px;
}

.ra-nbw-journey-summary-arrow {
    text-align: center;
    font-size: 1.1rem;
    color: #C7B3A4;
    padding: 2px 0 2px 36px;
    line-height: 1;
}

.ra-nbw-journey-begin {
    margin-top: 16px;
    width: 100%;
}

/* ---- Booking modal ---- */
.ra-nbw-journey-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

.ra-nbw-journey-modal-inner {
    width: 95vw;
    max-width: 1860px;
    height: 88vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 50px rgba(0,0,0,0.4);
}

.ra-nbw-journey-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #302A26;
    color: #e8ded5;
    flex-shrink: 0;
}

.ra-nbw-journey-modal-label {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ra-nbw-journey-modal-close {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: #e8ded5;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.ra-nbw-journey-modal-close:hover { color: #fff; }

.ra-nbw-journey-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

/* ---- Completion message ---- */
.ra-nbw-journey-complete {
    background: #dff0d8;
    border: 1px solid #3c763d;
    border-radius: 6px;
    padding: 20px 24px;
    font-size: 0.92rem;
    color: #3c763d;
    line-height: 1.6;
}
.ra-nbw-journey-complete p { margin: 0 0 8px; }
.ra-nbw-journey-complete p:last-child { margin: 0; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .ra-nbw-journey-leg-body {
        grid-template-columns: 1fr;
    }
    .ra-nbw-journey-field--prop,
    .ra-nbw-journey-field--unit,
    .ra-nbw-journey-field--checkin,
    .ra-nbw-journey-field--checkout {
        grid-column: 1;
        grid-row: auto;
    }
    .ra-nbw-journey-nights { grid-column: 1; text-align: left; }
}

/* ============================================================
   Phase 3e — journey builder redesign (tokens + accent + icons)
   ============================================================ */
.ra-nbw-icon { display: inline-block; vertical-align: -0.16em; flex-shrink: 0; }

/* Proceed cards — equal weight, icon + title + subtitle, accent-border select */
.ra-nbw-journey-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border: 2px solid var(--ra-line, #E8DED5);
    background: #fff;
    border-radius: var(--ra-radius, 8px);
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
}
.ra-nbw-journey-mode-ico { color: var(--ra-accent, #6E380F); margin-bottom: 2px; display: inline-flex; }
.ra-nbw-journey-mode-btn strong { font-size: 0.95rem; color: var(--ra-ink, #302A25); display: block; }
.ra-nbw-journey-mode-btn .ra-nbw-journey-mode-sub { font-size: 0.8rem; color: var(--ra-muted, #8a7d70); line-height: 1.4; }
.ra-nbw-journey-mode-btn:hover { border-color: var(--ra-rodeo-dust, #C7B3A3); background: var(--ra-surface, #faf7f4); }
.ra-nbw-journey-mode-btn--active { border-color: var(--ra-accent, #6E380F); background: var(--ra-accent-tint, #f2efe6); }
.ra-nbw-journey-mode-btn--active strong { color: var(--ra-ink, #302A25); }
.ra-nbw-journey-mode-btn--active .ra-nbw-journey-mode-sub { color: var(--ra-ink-soft, #5b5148); }

/* Leg header — Pearl Blush bar + numbered accent badge */
.ra-nbw-journey-leg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ra-pearl-blush, #E8DED5);
    padding: 9px 14px;
}
.ra-nbw-journey-leg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ra-accent, #6E380F);
    color: var(--ra-accent-contrast, #fff);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ra-nbw-journey-leg-num { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ra-ink, #302A25); }
.ra-nbw-journey-remove-leg { margin-left: auto; }

/* Click the header bar to minimize a filled-in leg down to a one-line summary
   (accommodation · unit type · dates) — handy once you've got several legs and
   don't need to keep looking at ones you've already set up. */
.ra-nbw-journey-leg-header {
    cursor: pointer;
    transition: background 0.15s ease;
}
.ra-nbw-journey-leg-header:hover { background: #ddd0c2; }
.ra-nbw-journey-leg-summary {
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ra-ink-soft, #5b5148);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.ra-nbw-journey-leg--minimized .ra-nbw-journey-leg-summary { display: block; }
/* !important is required here: .ra-nbw-journey-avail's visibility is driven by
   an inline style (element.style.display) from JS, which always beats a plain
   class selector — without !important this rule loses to whatever inline
   state the calendar happened to be left in. */
.ra-nbw-journey-leg--minimized .ra-nbw-journey-leg-body,
.ra-nbw-journey-leg--minimized .ra-nbw-journey-partner-msg,
.ra-nbw-journey-leg--minimized .ra-nbw-journey-avail,
.ra-nbw-journey-leg--minimized .ra-nbw-detail-cols {
    display: none !important;
}

/* Field labels — icon + text (mirror the widget) */
.ra-nbw-journey-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ra-ink-soft, #5b5148);
}
.ra-nbw-journey-field label .ra-nbw-icon { color: var(--ra-accent, #6E380F); }

/* Summary — numbered accent circle + calendar icon on dates */
.ra-nbw-journey-summary-num {
    background: var(--ra-accent, #6E380F) !important;
    color: var(--ra-accent-contrast, #fff) !important;
}
.ra-nbw-journey-summary-dates { display: inline-flex; align-items: center; gap: 5px; }
.ra-nbw-journey-summary-dates .ra-nbw-icon { color: var(--ra-muted, #8a7d70); }

/* Partner leg — "booked directly" status (Phase 5c) */
.ra-nbw-journey-summary-partner {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a6d3b;
    background: #f6efe3;
    border: 1px solid #e3d4bd;
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
}
.ra-nbw-journey-summary-row.is-partner .ra-nbw-journey-summary-num {
    background: var(--ra-rodeo-dust, #C7B3A3) !important;
    color: #fff !important;
}
/* Partner message box under a leg */
.ra-nbw-journey-partner-msg {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f6efe3;
    border: 1px solid #e3d4bd;
    border-radius: var(--ra-radius-sm, 4px);
    font-size: 0.85rem;
    color: var(--ra-ink, #302A25);
    line-height: 1.5;
}
.ra-nbw-journey-partner-msg a { color: var(--ra-accent, #6E380F); font-weight: 600; }

/* ---- Mobile: stack proceed cards ---- */
@media (max-width: 600px) {
    .ra-nbw-journey-mode-options { grid-template-columns: 1fr; }
}

/* Consistent vertical rhythm between journey sections */
.ra-nbw-journey-nationality-wrap { margin-bottom: 20px; }