/***************************************************************************************/
/**** special-offers.css — Today's deals page styling.  Reuses the site palette      ****/
/**** (navy + cream) and borrows the green "Save £X" accent from the split cards.    ****/
/***************************************************************************************/

.offers-hero {
    padding: 44px 0 32px 0;
    background: linear-gradient(var(--bg) 0%, var(--panel) 100%);
}

.offers-title {
    font-size: 30px;
    color: var(--text-bright);
    margin-bottom: 8px;
}

.offers-subtitle {
    font-size: 16px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
}

.offers-section {
    padding: 28px 0 80px 0;
    background: var(--bg);
    min-height: 40vh;
}

/***************************************************************************************/
/**** Controls row — sort tabs + departure-station filter.                           ****/
/***************************************************************************************/

.offers-controls {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--panel);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--panel);
    box-shadow: 0 1px 3px rgba(30, 30, 60, 0.04);
}

.offers-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.offers-control-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.offers-sort-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg);
    border-radius: 999px;
    padding: 3px;
}

.offers-sort-tab {
    background: transparent;
    border: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.offers-sort-tab:hover {
    background: rgba(26, 26, 59, 0.08);
}

.offers-sort-tabs .offers-sort-tab.is-selected,
.offers-sort-tab.is-selected {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.offers-from-select {
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    min-width: 240px;
    cursor: pointer;
    outline: none;
}

.offers-from-select option { background: var(--bg); color: var(--text); }

.offers-from-select:focus {
    border-color: #3b82f6;
    background: var(--bg);
    outline: none;
}

/**** Autocomplete dropdown — same shape as the planner's From/To suggestion list. ****/
.offers-from-wrap { position: relative; }

.offers-from-wrap .suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.offers-from-wrap .suggestions[hidden] { display: none; }
.offers-from-wrap .suggestions li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
}
.offers-from-wrap .suggestions li:hover,
.offers-from-wrap .suggestions li.selected { background: rgba(59, 130, 246, 0.15); color: var(--text-bright); }
.offers-from-wrap .suggestions li .crs {
    font-family: "Liberation Mono", "SF Mono", "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Courier New", monospace;
    font-size: 11px;
    color: var(--text-dim);
}

.offers-from-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    display: none;
}
.offers-from-wrap.has-value .offers-from-clear { display: block; }

/***************************************************************************************/
/**** Load deals — sits inside the .offers-controls grid alongside SORT/SPLIT/STATION  ****/
/**** so the user sees the trigger right where the filters are, not floating below.    ****/
/***************************************************************************************/

.offers-control-group--load { justify-content: flex-end; }

.offers-load-btn {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 0 24px;
    height: 38px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    min-width: 140px;
    transition: background 0.12s;
}
.offers-load-btn:hover { background: #2563eb; }
.offers-load-btn:disabled { background: #475569; cursor: wait; }
.offers-load-btn:not(:disabled):active { transform: scale(0.97); }

.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

/***************************************************************************************/
/**** One offer tile.                                                                ****/
/***************************************************************************************/

.offer-card {
    background: var(--panel);
    border-radius: 14px;
    padding: 18px 20px 16px 20px;
    border: 1px solid var(--panel);
    box-shadow: 0 1px 3px rgba(30, 30, 60, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
    text-decoration: none;
    color: inherit;
}

.offer-card:hover {
    border-color: #1a1a3b;
    box-shadow: 0 2px 12px rgba(30, 30, 60, 0.12);
}

.offer-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.offer-save {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: #0c8155;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.offer-route {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.3;
}

.offer-route-from, .offer-route-to {
    color: var(--text-bright);
}

.offer-route-arrow {
    color: #8a8aa0;
    margin: 0 6px;
}

.offer-via {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.offer-prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 2px;
}

.offer-split-total {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-bright);
    line-height: 1.1;
}

.offer-direct {
    font-size: 14px;
    color: #8a8aa0;
    text-decoration: line-through;
}

.offer-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 2px;
}

.offer-tag {
    background: var(--bg);
    padding: 3px 8px;
    border-radius: 4px;
}

/**** Theme-agnostic chip colours.  Each variant uses a semi-transparent       */
/**** accent overlay on top of the card's panel bg so the same RGB values     */
/**** read as a soft pastel on light cards and a saturated gem on dark cards. */
/**** Foreground colour is the matching saturated accent — high contrast      */
/**** against both bg variants without needing per-theme overrides.            */

.offer-tag--same {
    background: rgba(16, 185, 129, 0.18);
    color:      #10b981;
}

.offer-tag--diff {
    background: rgba(245, 158, 11, 0.18);
    color:      #f59e0b;
}

/**** Split-tier chip — highlights the winning tier (same train / 1-3 changes / direct). */
.offer-tag--tier {
    background: rgba(99, 102, 241, 0.18);
    color:      #818cf8;
}

/**** Saving pill — grey variant when the deal didn't actually beat the direct fare. ****/
.offer-save--none {
    background: rgba(148, 163, 184, 0.20);
    color:      var(--text-dim);
}

/**** Percentage suffix inside the main saving pill (e.g. "-£65.40 57%"). ****/
.offer-save .pct {
    font-weight: 600;
    opacity:     0.85;
    margin-left: 4px;
}

/**** Extra per-leg rows (leg_path, leg_price) the new shape renders alongside time. ****/
.offer-legs .leg-path {
    flex: 1;
    color: var(--text-bright);
}

.offer-legs .leg-price {
    font-weight: 700;
    color:       var(--text-bright);
    white-space: nowrap;
}

.offer-legs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text);
    border-top: 1px solid #f0e7da;
    padding-top: 8px;
    margin-top: 2px;
}

.offer-legs .leg-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.offer-legs .leg-label {
    font-weight: 700;
    color: var(--text-dim);
    min-width: 40px;
}

.offer-legs .leg-time {
    font-weight: 600;
    color: var(--text-bright);
}

/***************************************************************************************/
/**** Mini leg-track on deal cards — coloured pills that mirror the planner's track.  ****/
/***************************************************************************************/

/**** Light-theme leg colours — same hues as the planner, tuned for a cream-card BG.   */
/**** border + price use the leg's saturated colour; pill bg stays near-white so the    */
/**** card doesn't look like a christmas ornament when a 3-change deal renders.          */
:root {
    --deal-leg-1: #0c8155;
    --deal-leg-2: #c07a0a;
    --deal-leg-3: #c4372e;
    --deal-leg-4: #0891b2;
    --deal-leg-5: #7c3aed;
}

.deal-mini-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.deal-mini-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #dcdce6;
    background: var(--panel);
    font-size: 12px;
    color: var(--text);
}
.deal-mini-leg .stations { color: var(--text-bright); font-weight: 600; }
.deal-mini-leg .price    {
    font-weight: 700;
    font-family: "Liberation Mono", "SF Mono", "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Courier New", monospace;
    color: var(--text-bright);
}

.deal-mini-leg.leg-1 { border-color: var(--deal-leg-1); }
.deal-mini-leg.leg-1 .price { color: var(--deal-leg-1); }
.deal-mini-leg.leg-2 { border-color: var(--deal-leg-2); }
.deal-mini-leg.leg-2 .price { color: var(--deal-leg-2); }
.deal-mini-leg.leg-3 { border-color: var(--deal-leg-3); }
.deal-mini-leg.leg-3 .price { color: var(--deal-leg-3); }
.deal-mini-leg.leg-4 { border-color: var(--deal-leg-4); }
.deal-mini-leg.leg-4 .price { color: var(--deal-leg-4); }
.deal-mini-leg.leg-5 { border-color: var(--deal-leg-5); }
.deal-mini-leg.leg-5 .price { color: var(--deal-leg-5); }

.deal-mini-change {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a8aa0;
    padding: 0 2px;
}

/***************************************************************************************/
/**** Empty state when the offers JSON isn't available yet.                          ****/
/***************************************************************************************/

.offers-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    background: var(--panel);
    border-radius: 14px;
    border: 1px dashed #c9c0b0;
}

.offers-empty h3 {
    color: var(--text-bright);
    margin-bottom: 8px;
}

.offers-empty p {
    color: var(--text);
    font-size: 14px;
}

/***************************************************************************************/
/**** Cabin / class chip — used by verticals that surface cabin or class info        ****/
/**** (planes: Economy/Premium/Business; ferries: standard/club; coaches: standard).   ****/
/***************************************************************************************/
.offer-tag--cabin {
    background: rgba(245, 158, 11, 0.18);
    color:      #f59e0b;
    border:     1px solid rgba(245, 158, 11, 0.35);
}

/***************************************************************************************/
/**** Carrier chip — for verticals that label the operating carrier on a single-     ****/
/**** carrier deal (planes/coaches/ferries; rail uses TOC names already in legs).     ****/
/***************************************************************************************/
.offer-tag--carrier {
    background: rgba(59, 130, 246, 0.18);
    color:      #60a5fa;
    border:     1px solid rgba(59, 130, 246, 0.30);
    text-transform: lowercase;
    letter-spacing: 0;
}

/***************************************************************************************/
/**** Mobile breakpoint — let the departure-station select fill the same width as     ****/
/**** the SORT BY and SPLIT TYPE rows above it, so the three rows form a clean grid.  ****/
/***************************************************************************************/

@media (max-width: 720px) {

    /**** Tighten vertical rhythm on mobile — desktop has generous padding around the   ****/
    /**** hero and the section that doesn't translate to phones.                         ****/
    .offers-hero    { padding: 16px 0 12px 0; }
    .offers-section { padding: 12px 0 40px 0; }

    .offers-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .offers-control-group {
        width: 100%;
    }

    /**** Pill bar fills the full row and chips stretch to share the width evenly so   ****/
    /**** there's no empty space on the right.  flex-wrap: nowrap keeps each chip on   ****/
    /**** a single line; overflow-x: auto kicks in only if total content exceeds row.   ****/
    .offers-sort-tabs {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
    }

    /**** Each chip flex-grows so the row of chips spans the full bar width. ****/
    .offers-sort-tab {
        flex: 1 1 auto;
        white-space: nowrap;
        padding: 7px 8px;
        text-align: center;
    }

    .offers-from-select {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

}