/* theme-light.css — light-mode overrides.
 *
 * Every rule in this file is scoped under :root[data-theme="light"], so
 * the rules only apply when the document element carries that attribute
 * (set by the toggle button or by the theme-bootstrap script reading
 * the user's saved preference / OS prefers-color-scheme).
 *
 * The base + dark-mode values live in theme-dark.css.  Anything not
 * overridden here keeps its dark-mode value, except for the page-bg /
 * card-bg / text variables which are re-declared at the top of this
 * file as a unit.
 *
 * When you want to change a LIGHT colour, look here.
 * When you want to change a DARK colour, look in theme-dark.css.
 */


:root[data-theme="light"] {
    /* Stripe-inspired palette.  Their dashboard reads as crisp and
     * trustworthy because:
     *   - the page bg is a cool very-light grey that feels precise
     *     (not blue, not cream, just neutral with a hint of cool);
     *   - white cards lift via a LAYERED shadow rather than a border,
     *     which gives a cleaner "card on paper" effect;
     *   - text uses a slate scale (#0a2540 → #425466 → #697386) that
     *     reads as professional and modern.
     * We keep our own brand identity in the navy header and the
     * green/blue action semantics; only the surface palette and
     * elevation pattern come from Stripe. */
    --bg:            #e8edf3;
    --panel:         #ffffff;
    --panel-border:  #d6dde8;
    --text:          #425466;
    --text-dim:      #697386;
    --text-bright:   #0a2540;
    --track:         #cbd5e1;
}
:root[data-theme="light"] .itin-disclaimer {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}
:root[data-theme="light"] .itin-disclaimer strong { color: #0f172a; }
:root[data-theme="light"] .itin-disclaimer a      { color: #2563eb; }
:root[data-theme="light"] .pro-lner-check {
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}
:root[data-theme="light"] .pro-lner-train { color: #0f172a; }
:root[data-theme="light"] .leg {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}
:root[data-theme="light"] .journey-header h2,
:root[data-theme="light"] .j-times .big,
:root[data-theme="light"] .j-meta .op,
:root[data-theme="light"] .j-price .pounds,
:root[data-theme="light"] .split-route,
:root[data-theme="light"] .split-leg .leg-times,
:root[data-theme="light"] .split-leg .leg-price,
:root[data-theme="light"] .split-total,
:root[data-theme="light"] .sum-card--stats,
:root[data-theme="light"] .sum-journey,
:root[data-theme="light"] .sum-row .value,
:root[data-theme="light"] .empty h3,
:root[data-theme="light"] .date-cell .dom,
:root[data-theme="light"] .date-cell .from,
:root[data-theme="light"] .date-nav:hover {
    color: #0f172a;
}
:root[data-theme="light"] .split-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}
:root[data-theme="light"] .j-badge--anchor {
    background: #e2e8f0;
    color: #1e293b;
}
:root[data-theme="light"] .results,
:root[data-theme="light"] .search-hero {
    background: #f5f5f7;
}
:root[data-theme="light"] .search-hero {
    background: linear-gradient(#f5f5f7 0%, #eaeef5 100%);
}
:root[data-theme="light"] .empty {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}
:root[data-theme="light"] .site-footer {
    /* Mid-tone slate-grey footer — sits roughly halfway between body bg          */
    /* (#e8edf3) and slate-400 (#94a3b8).  Visible as its own band without         */
    /* reading as a heavy dark strip.                                               */
    background: #c4cdd9;
    color: #334155;
    border-top: 1px solid #a8b3c0;
}
:root[data-theme="light"] .search-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}
:root[data-theme="light"] .j-card,
:root[data-theme="light"] .opt-card,
:root[data-theme="light"] .sum-card,
:root[data-theme="light"] .option-card,
:root[data-theme="light"] .deal-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .lane-card,
:root[data-theme="light"] .day-card,
:root[data-theme="light"] .form-row,
:root[data-theme="light"] .date-strip,
:root[data-theme="light"] .results-summary .sum-card,
:root[data-theme="light"] .legs-line,
:root[data-theme="light"] .cwt-modal-content,
:root[data-theme="light"] .pro-lner-check,
:root[data-theme="light"] .leg,
:root[data-theme="light"] .return-toggle,
:root[data-theme="light"] .class-tab,
:root[data-theme="light"] .suggestions,
:root[data-theme="light"] .faq-item {
    border: none;
    /* Strengthened from the original 5%/7%/4% — at our --bg vs white-card contrast */
    /* the lighter values left cards reading as flat panels.  Now the lift is       */
    /* visible without crossing into harsh-drop-shadow territory.  The 1px ring     */
    /* (first layer) gives each card a soft outline; raised from 10% to 18% so the  */
    /* edge reads cleanly against the page bg.                                       */
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.18),
                0 4px 12px 0 rgba(50, 50, 93, 0.12),
                0 1px 3px 0 rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .j-card:hover,
:root[data-theme="light"] .option-card:hover,
:root[data-theme="light"] .deal-card:hover,
:root[data-theme="light"] .offer-card:hover,
:root[data-theme="light"] .day-card:hover,
:root[data-theme="light"] .lane-card:hover {
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.06),
                0 7px 14px 0 rgba(50, 50, 93, 0.10),
                0 3px 6px 0 rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .j-card.j-selected,
:root[data-theme="light"] .j-card.j-anchor,
:root[data-theme="light"] .option-card.is-selected,
:root[data-theme="light"] .class-tab.is-selected {
    border-color: #2560e6;
    box-shadow: 0 0 0 1px #2560e6, 0 4px 12px rgba(37, 96, 230, 0.15);
}
:root[data-theme="light"] .search-hero {
    background: linear-gradient(180deg, #fdfcf8 0%, #f6f5f1 100%);
    border-bottom: 1px solid #e6e2d6;
}
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] h1 {
    color: #0f172a;
    letter-spacing: -0.025em;
}
:root[data-theme="light"] #go,
:root[data-theme="light"] .search-btn,
:root[data-theme="light"] .plan-btn,
:root[data-theme="light"] button.primary,
:root[data-theme="light"] .cta-primary,
:root[data-theme="light"] .sum-cta {
    background: linear-gradient(180deg, #1a73e8 0%, #155ab9 100%);
    box-shadow: 0 0 0 1px rgba(21, 90, 185, 0.18),
                0 1px 1px 0 rgba(0, 0, 0, 0.06),
                0 4px 10px 0 rgba(26, 115, 232, 0.30);
    border: none;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
:root[data-theme="light"] #go:hover,
:root[data-theme="light"] .search-btn:hover,
:root[data-theme="light"] .plan-btn:hover,
:root[data-theme="light"] button.primary:hover,
:root[data-theme="light"] .cta-primary:hover,
:root[data-theme="light"] .sum-cta:hover {
    background: linear-gradient(180deg, #3286ed 0%, #1865c4 100%);
    box-shadow: 0 0 0 1px rgba(21, 90, 185, 0.22),
                0 2px 5px 0 rgba(0, 0, 0, 0.10),
                0 7px 18px 0 rgba(26, 115, 232, 0.38);
    transform: translateY(-1px);
}
:root[data-theme="light"] .option-card-title,
:root[data-theme="light"] .opt-card-label,
:root[data-theme="light"] .lane-card-title,
:root[data-theme="light"] .deal-card-title,
:root[data-theme="light"] .day-card-title,
:root[data-theme="light"] .sum-card-label,
:root[data-theme="light"] .journey-header h2,
:root[data-theme="light"] .split-header h2 {
    color: #1a1a3b;
}
:root[data-theme="light"] .search-card,
:root[data-theme="light"] .form-row,
:root[data-theme="light"] .j-card,
:root[data-theme="light"] .opt-card,
:root[data-theme="light"] .sum-card,
:root[data-theme="light"] .option-card,
:root[data-theme="light"] .deal-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .lane-card,
:root[data-theme="light"] .day-card,
:root[data-theme="light"] .legs-line,
:root[data-theme="light"] .empty,
:root[data-theme="light"] .split-card,
:root[data-theme="light"] .pro-lner-check,
:root[data-theme="light"] .leg,
:root[data-theme="light"] .return-toggle,
:root[data-theme="light"] .cwt-modal-content,
:root[data-theme="light"] .date-strip {
    border-radius: 8px;
}
:root[data-theme="light"] .suggestions,
:root[data-theme="light"] .class-tab,
:root[data-theme="light"] .field {
    border-radius: 6px;
}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="time"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] select {
    border-radius: 6px;
    border: 1px solid #e3e8ee;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus {
    border-color: #635bff;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
    outline: none;
}
:root[data-theme="light"] #go,
:root[data-theme="light"] .search-btn,
:root[data-theme="light"] .sum-cta,
:root[data-theme="light"] .plan-btn,
:root[data-theme="light"] .continue-cta,
:root[data-theme="light"] button.primary,
:root[data-theme="light"] .cta-primary,
:root[data-theme="light"] .date-cell {
    border-radius: 6px;
}
:root[data-theme="light"] .j-badge,
:root[data-theme="light"] .pro-lner-chip,
:root[data-theme="light"] .pro-lner-refresh {
    border-radius: 999px;
}
:root[data-theme="light"] .savings,
:root[data-theme="light"] .split-save,
:root[data-theme="light"] .save-amount,
:root[data-theme="light"] .badge-save,
:root[data-theme="light"] .j-badge--save {
    color: #047857;
    font-weight: 700;
}
:root[data-theme="light"] .option-price,
:root[data-theme="light"] .opt-price,
:root[data-theme="light"] .j-price .pounds,
:root[data-theme="light"] .split-total,
:root[data-theme="light"] .sum-total,
:root[data-theme="light"] .day-card .price,
:root[data-theme="light"] .deal-card .price {
    color: #065f46;
}
:root[data-theme="light"] .option-price.savings,
:root[data-theme="light"] .savings.option-price {
    color: #047857;
    font-weight: 600;
    opacity: 1;
}
:root[data-theme="light"] .option-card.is-selected,
:root[data-theme="light"] .j-card.j-selected,
:root[data-theme="light"] .j-card.j-anchor {
    background: linear-gradient(90deg, #f0f5ff 0%, #ffffff 6%);
    border-left: 4px solid #2560e6;
}
:root[data-theme="light"] .field label,
:root[data-theme="light"] .opt-card-label,
:root[data-theme="light"] .sum-card-label,
:root[data-theme="light"] .tab-btn,
:root[data-theme="light"] .lanes-tab,
:root[data-theme="light"] .planner-tabs .tab-button {
    color: #1a1a3b;
}
:root[data-theme="light"] .tab-btn.is-active,
:root[data-theme="light"] .lanes-tab.is-active,
:root[data-theme="light"] .planner-tabs .tab-button.active {
    color: #0a2540;
    font-weight: 700;
}
:root[data-theme="light"] {
    --text:     #2d3849;
    --text-dim: #4a5568;
}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .search-field input,
:root[data-theme="light"] .search-field select,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="time"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] select {
    /* Heavier border than the card outline because input borders need to read at  */
    /* close-reading distance — the eye treats input edges as form-affordance      */
    /* signals, not decoration.  Solid #94a3b8 (Tailwind slate-400) is the same    */
    /* visual weight as the dark-mode input border (#334155 on dark slate panels). */
    border: 1.5px solid #94a3b8;
    background: #ffffff;
}
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus,
:root[data-theme="light"] .search-field input:focus,
:root[data-theme="light"] .search-field select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    outline: none;
}
:root[data-theme="light"] .field {
    background: #f8fafc;
}
:root[data-theme="light"] .field:hover {
    background: #f1f5f9;
}
:root[data-theme="light"] .sum-card--primary {
    background: #ffffff;
    color: #425466;
    border-top: 3px solid #2560e6;
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.08),
                0 4px 10px 0 rgba(50, 50, 93, 0.10),
                0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .sum-card--primary .sum-card-label,
:root[data-theme="light"] .sum-card--primary .sum-total-label,
:root[data-theme="light"] .sum-card--primary .sum-hint {
    color: #697386;
}
:root[data-theme="light"] .sum-card--primary .sum-total,
:root[data-theme="light"] .sum-card--primary .sum-card-title {
    color: #0a2540;
}
:root[data-theme="light"] .sum-cta-secondary {
    background: transparent;
    color: #425466;
    border: 1px solid #d6dde8;
}
:root[data-theme="light"] .sum-cta-secondary:hover {
    border-color: #2560e6;
    color: #2560e6;
}
:root[data-theme="light"] .offers-sort-tabs {
    background: #272754;
}
:root[data-theme="light"] .offers-sort-tabs .offers-sort-tab {
    color: rgba(255, 255, 255, 0.78);
}
:root[data-theme="light"] .offers-sort-tabs .offers-sort-tab:hover {
    color: #ffffff;
}
:root[data-theme="light"] .offers-sort-tabs .offers-sort-tab.is-selected {
    color: #ffffff;
}
:root[data-theme="light"] button.journeys-row-select-btn {
    background: linear-gradient(180deg, #353570 0%, #272754 100%);
}
:root[data-theme="light"] button.journeys-row-select-btn:hover {
    background: linear-gradient(180deg, #41418a 0%, #303068 100%);
}
:root[data-theme="light"] input[type="checkbox"] {
    border: 1.5px solid #94a3b8;
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.04);
    accent-color: #272754;
}
:root[data-theme="light"] #reset-btn,
:root[data-theme="light"] .reset-btn,
:root[data-theme="light"] button.secondary {
    background: #ffffff;
    border: 1.5px solid #94a3b8;
    color: #272754;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.04),
                0 1px 1px 0 rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] #reset-btn:hover,
:root[data-theme="light"] .reset-btn:hover,
:root[data-theme="light"] button.secondary:hover {
    border-color: #272754;
    background: #f8fafc;
}
:root[data-theme="light"] .field input::placeholder,
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #272754;
    opacity: 1;
}
:root[data-theme="light"] .jitter-toggle,
:root[data-theme="light"] .field-toggle,
:root[data-theme="light"] label.jitter-toggle span,
:root[data-theme="light"] label.field-toggle span {
    color: #272754;
    font-weight: 600;
}
:root[data-theme="light"] .stop-dot:not(.endpoint):not(.boundary) {
    background: #ffffff;
    border: 2px solid #1a1a3b;
}
:root[data-theme="light"] .pro-lner-chip-fastest {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}
:root[data-theme="light"] .pro-lner-chip-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
}
:root[data-theme="light"] .pro-lner-price-ok    { color: #047857; }
:root[data-theme="light"] .pro-lner-price-diff  { color: #92400e; }
:root[data-theme="light"] .cwt-modal-saving b {
    color: #047857;
}
:root[data-theme="light"] .sum-print-btn {
    background: linear-gradient(180deg, #353570 0%, #272754 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 0 0 1px rgba(15, 15, 35, 0.12),
                0 1px 1px 0 rgba(0, 0, 0, 0.06),
                0 4px 10px 0 rgba(26, 26, 59, 0.30);
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
:root[data-theme="light"] .sum-print-btn:hover {
    background: linear-gradient(180deg, #41418a 0%, #303068 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 0 0 1px rgba(15, 15, 35, 0.14),
                0 2px 5px 0 rgba(0, 0, 0, 0.10),
                0 7px 18px 0 rgba(26, 26, 59, 0.38);
    transform: translateY(-1px);
}
:root[data-theme="light"] .cell {
    border: 1px solid #c5cdd9;
    box-shadow: 0 1px 3px 0 rgba(50, 50, 93, 0.10),
                0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] a.cell:hover {
    background: #ffffff;
    border-color: #272754;
    box-shadow: 0 4px 12px 0 rgba(50, 50, 93, 0.14),
                0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .cell.empty {
    background: transparent;
    box-shadow: none;
    border: 1px dashed #cbd5e1;
}
:root[data-theme="light"] .cell.err {
    background: #fff1f2;
    box-shadow: 0 0 0 1px rgba(190, 18, 60, 0.25);
}
:root[data-theme="light"] .cell.scanning {
    background: #f6f9fc;
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.08);
}
:root[data-theme="light"] .t0 { color: #047857; background: rgba(16, 185, 129, 0.14); }
:root[data-theme="light"] .t1 { color: #0e7490; background: rgba(6, 182, 212, 0.14); }
:root[data-theme="light"] .t2 { color: #92400e; background: rgba(245, 158, 11, 0.16); }
:root[data-theme="light"] .t3 { color: #9d174d; background: rgba(236, 72, 153, 0.14); }
:root[data-theme="light"] .save-row .save,
:root[data-theme="light"] [style*="color:#34d399"],
:root[data-theme="light"] [style*="color: #34d399"] {
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.14) !important;
}
:root[data-theme="light"] [style*="color:#10b981"],
:root[data-theme="light"] [style*="color: #10b981"] {
    color: #047857 !important;
}
:root[data-theme="light"] [style*="color:#ef4444"],
:root[data-theme="light"] [style*="color: #ef4444"] {
    color: #b91c1c !important;
}
:root[data-theme="light"] [style*="color:#fecaca"],
:root[data-theme="light"] [style*="color: #fecaca"] {
    color: #b91c1c !important;
}