/* Asia Miles Reverse Calculator — calculator.css */

.amr-widget {
    max-width: 1080px;
    margin: 32px auto;
    padding: 0 16px;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1a2e;
    box-sizing: border-box;
}

.amr-widget *, .amr-widget *::before, .amr-widget *::after { box-sizing: border-box; }

/* ── Hero ────────────────────────────────────────── */
.amr-hero {
    text-align: center;
    padding: 22px 12px 18px;
    margin-bottom: 8px;
}

.amr-hero-kicker {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #b38850;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.amr-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    letter-spacing: -.02em;
}

.amr-hero-sub {
    font-size: .92rem;
    color: #777;
    margin: 0 0 22px;
    line-height: 1.6;
}

/* Reference mode (show_search=no): no h2/kicker, just this one
   description paragraph between the map and the results — left-aligned
   like ordinary body copy, since there's no search form to center it
   around. */
.amr-ref-description {
    text-align: left;
    font-size: .92rem;
    color: #777;
    line-height: 1.6;
    margin: 0 0 20px;
}

.amr-ref-description strong { color: #b38850; }

/* Unified search bar — input and button visually fused into one pill so
   the hero reads as a single control, not scattered label/input/label/
   button pieces. Host WordPress themes (e.g. Flatsome) apply broad global
   rules to bare `input`/`button` elements, so every layout-critical
   property here is scoped with the widget's own class prefix and pinned
   with !important to survive that. */
.amr-widget .amr-search-group {
    display: flex !important;
    justify-content: center;
    align-items: stretch !important;
    gap: 0 !important;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

.amr-widget .amr-search-input-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    background: #fff !important;
    border: 2px solid #e0d4bc !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    padding: 0 6px 0 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s;
}

.amr-widget .amr-search-input-wrap:focus-within {
    border-color: #b38850 !important;
    box-shadow: 0 0 0 4px rgba(179,136,80,.12) !important;
}

.amr-widget input.amr-miles-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    padding: 12px 4px !important;
    margin: 0 !important;
    font-size: 1.4rem;
    font-weight: 700;
    color: #b38850;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    text-align: right !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield;
    height: auto !important;
    line-height: normal;
}

.amr-widget input.amr-miles-input::-webkit-inner-spin-button,
.amr-widget input.amr-miles-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.amr-widget input.amr-miles-input::placeholder { color: #d8c9ab; font-weight: 400; }

.amr-search-unit {
    flex: 0 0 auto;
    font-size: .85rem;
    color: #b8a888;
    padding-left: 6px;
    white-space: nowrap;
}

/* Origin badge — sits between the miles input and the search button.
   [asiamiles_idea]/[virgin_idea]: a free-text input, fuzzy-matched against
   the full data/airports.json set (IATA code / city name / country name —
   see assets/js/airport-autocomplete.js) rather than a fixed <select> list,
   so ANY airport works, not just AMR_Calculator's old hand-curated subset
   (retired 2026-09-23 alongside this change — see that constant's own
   removal commit for why).
   [avios_idea]: still plain "@HKG" text, no input at all — see that
   shortcode's own docblock for why (avios-charts.json's zone data is
   HKG-only). */
.amr-widget .amr-origin-badge {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px;
    background: #fff !important;
    border: 2px solid #e0d4bc !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 8px 0 12px !important;
    margin: 0 !important;
    font-size: .85rem;
    font-weight: 600;
    color: #b38850;
    white-space: nowrap;
}

.amr-origin-at { cursor: default; }

.amr-widget input.amr-origin-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    width: 92px;
    max-width: 92px;
    padding: 0 2px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: #b38850;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
}
.amr-widget input.amr-origin-input:focus { outline: none; }
.amr-widget input.amr-origin-input::placeholder { color: #ddd; font-weight: 400; }

/* Suggestion dropdown for the origin input above — shared markup/behavior
   with mix-calculator.js/oneworld-calculator.js's per-leg airport pickers
   (assets/js/airport-autocomplete.js), duplicated here (not shared via a
   common CSS file) since [asiamiles_idea]/[virgin_idea] pages don't load
   mix-calculator.css/oneworld-calculator.css and vice versa — same
   per-file-duplication tradeoff already accepted for COUNTRY_NAMES etc.
   .amx-tl-suggestion-country only ever renders when the origin picker's
   own countryNames-aware match (a country-name hit, e.g. "日本") applies —
   see filterAirports()'s own docblock; the shared per-leg pickers never
   populate it. Positioned `fixed` at runtime by positionSuggestions()
   (JS), not by this `absolute` — see that function's own docblock. */
.amx-tl-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0d4bc;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    z-index: 60;
    text-align: left;
}

.amx-tl-suggestions.amx-tl-suggestions-open { display: block; }

.amx-tl-suggestions:has(.amx-tl-native-select) {
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
}
/* See mix-calculator.css's own copy of this rule for the two-attempts-
   failed root-cause writeup (iOS native <select> chrome ignoring color/
   background alone without `appearance: none`, plus off-screen
   positioning as a second, independent guard). */
.amx-tl-native-select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    position: absolute;
    left: -9999px;
    top: 0;
    width: 100%;
    min-width: 220px;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 600;
    color: transparent;
    background: transparent;
    border: none;
    border-radius: 10px;
    box-shadow: none;
}

.amx-tl-suggestion {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    white-space: nowrap;
}

.amx-tl-suggestion:hover,
.amx-tl-suggestion.amx-tl-suggestion-active { background: #faf3e6; }

.amx-tl-suggestion-code { font-weight: 700; color: #1a1a2e; font-size: .92rem; }
.amx-tl-suggestion-name { color: #888; font-size: .82rem; }
.amx-tl-suggestion-country { color: #b38850; font-size: .78rem; margin-left: auto; padding-left: 8px; }

.amr-widget button.amr-btn-search {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 22px !important;
    margin: 0 !important;
    font-size: .95rem;
    font-weight: 700;
    color: #fff !important;
    background: #b38850 !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.amr-widget button.amr-btn-search:hover  { background: #9a7340 !important; }
.amr-widget button.amr-btn-search:active { transform: scale(.98); }

/* ── Hero internal divider ────────────────────────────────────────── */
.amr-hero-divider {
    border: none;
    border-top: 1px solid #ede5d4;
    margin: 22px 0 14px;
}

/* ── Filter bar (nested inside hero, no own box) ─────────────────── */
.amr-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.amr-filter-label {
    font-size: .8rem;
    color: #999;
    white-space: nowrap;
}

.amr-filter-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.amr-chip {
    padding: 3px 11px;
    border: 1px solid #ddd8ce;
    border-radius: 20px;
    background: #fff;
    font-size: .8rem;
    cursor: pointer;
    color: #666;
    line-height: 1.6;
    transition: background .12s, color .12s, border-color .12s;
}

.amr-chip:hover { border-color: #b38850; color: #b38850; }

.amr-chip.active {
    background: #b38850;
    border-color: #b38850;
    color: #fff;
    font-weight: 600;
}

/* ── Summary (plain text, blends into hero) ──────────────────────── */
.amr-summary {
    font-size: .86rem;
    color: #666;
    line-height: 1.6;
}

.amr-summary strong { color: #b38850; }

/* ── Map ────────────────────────────────────────── */
.amr-map {
    height: 80vh;
    min-height: 480px;
    max-height: 820px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e4ddd0;
    margin-bottom: 20px;
}

.amr-map-pin {
    position: relative;
    background: #b38850;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    line-height: 1.4;
}

.amr-pin-arr {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #b38850;
}

/* Leaflet popup "jump to card" link */
.amr-popup-jump {
    display: inline-block;
    margin-top: 4px;
    font-size: .82rem;
    font-weight: 700;
    color: #b38850;
    text-decoration: none;
}

.amr-popup-jump:hover { text-decoration: underline; }

/* Brief highlight when a map popup jumps to its card */
.amr-row-flash {
    animation: amr-row-flash-anim 1.6s ease-out;
}

@keyframes amr-row-flash-anim {
    0%   { box-shadow: 0 0 0 3px rgba(179,136,80,.55); }
    100% { box-shadow: 0 1px 4px rgba(0,0,0,.04); }
}

/* ── Ebook ad banner ────────────────────────────── */
.amr-ad-ebook {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #b38850, #8a6a3c);
    color: #fff;
    border-radius: 12px;
    padding: 20px 26px;
    margin-bottom: 20px;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}

.amr-ad-ebook:hover {
    box-shadow: 0 6px 20px rgba(138,106,60,.35);
    transform: translateY(-1px);
}

.amr-ad-text { min-width: 0; }

.amr-ad-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 4px;
}

.amr-ad-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.amr-ad-desc {
    font-size: .82rem;
    opacity: .92;
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

.amr-ad-btn {
    flex: 0 0 auto;
    background: #fff;
    color: #8a6a3c;
    font-weight: 700;
    font-size: .9rem;
    padding: 10px 22px;
    border-radius: 24px;
    white-space: nowrap;
}

/* ── Destination rows ───────────────────────────── */
.amr-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scoped + !important for the same reason as .amr-btn-search above —
   Flatsome (and similar themes) apply broad global resets to bare
   `button` elements (removing border/background/border-radius), which
   otherwise leaves this looking like plain unstyled text instead of a
   pill button. `display` is deliberately NOT !important here (unlike the
   other properties): this button's visibility is toggled by JS
   (updateShowMoreButton() in calculator.js/avios-calculator.js/
   virgin-calculator.js, all sharing this class) via its inline
   style.display, which — with no competing !important — always wins on
   specificity over this class+element selector regardless of source
   order. An earlier version had `!important` on `display` too, which
   permanently forced the button visible even when there was nothing to
   expand, since it silently defeated the JS toggle. */
.amr-widget button.amr-cards-more-btn {
    display: block;
    margin: 16px auto 4px !important;
    padding: 10px 26px !important;
    border: 1px solid #b38850 !important;
    border-radius: 24px !important;
    background: #fff !important;
    color: #b38850 !important;
    font-size: .88rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.amr-widget button.amr-cards-more-btn:hover { background: #b38850 !important; color: #fff !important; }

.amr-row {
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .15s;
}

.amr-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }

.amr-row-main {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Left: country heading + destination pills */
.amr-row-meta {
    flex: 0 0 260px;
    min-width: 0;
}

.amr-row-country {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.amr-flag { font-style: normal; }

.amr-row-from {
    font-size: .75rem;
    font-weight: 400;
    color: #b38850;
    white-space: nowrap;
}

.amr-row-dest-summary {
    font-size: .75rem;
    font-weight: 400;
    color: #6b6b7a;
}

.amr-row-dests {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Destination pill: code (bold) + name (small) stacked, uniform width */
.amr-dp {
    display: inline-flex;
    flex: 0 0 auto;
    width: 80px;
    flex-direction: column;
    align-items: center;
    background: #f5f3ef;
    border-radius: 7px;
    padding: 5px 6px;
    font-size: .94rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.amr-dp-name {
    font-size: .74rem;
    font-weight: 400;
    color: #999;
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amr-dp-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 80px;
    background: #eef0ff;
    color: #4040b0;
    border-radius: 7px;
    padding: 5px 6px;
    font-size: .86rem;
    font-weight: 600;
}

/* Right: mini cabin table */
.amr-row-table-wrap {
    flex: 1;
    overflow-x: auto;
    min-width: 0;
    background: #fefaf3;
    border-radius: 8px;
    padding: 6px 10px;
}

.amr-cabin-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    /* table-layout:fixed sizes columns off min-width, not actual content —
       too small here means cell content (e.g. "23,000 ×2 程") overflows
       into the next column instead of the table simply growing wider and
       letting .amr-row-table-wrap's overflow-x:auto scroll it. Column
       count now varies per destination (one per airline that serves it),
       so the min-width is set inline per-table (render_rows_html()) rather
       than as one constant tuned for a fixed number of columns. */
}

.amr-cabin-table thead th {
    text-align: center;
    color: #a89b80;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 12px 8px;
    white-space: nowrap;
}

/* Fixed cabin-label column width so the airline columns always share the
   remaining space equally — table-layout:fixed then keeps columns aligned
   across every row's independent <table>, regardless of that row's own
   content width. */
.amr-th-al,
.amr-cabin-table td:first-child { width: 108px; text-align: left !important; }

.amr-cabin-table tbody td {
    text-align: center;
    padding: 7px 12px;
    vertical-align: middle;
    font-size: .95rem;
    white-space: nowrap;
    border-top: 1px solid #f0e6d2;
}

.amr-cabin-table tbody tr:first-child td { border-top: none; }

.amr-cabin-table tbody td:first-child { text-align: left; padding-left: 0; }

/* Cell states */
.amr-tc-lit {
    color: #9a6f2e;
    font-weight: 800;
    font-size: 1rem;
}

.amr-tc-lit small {
    font-size: .72rem;
    font-weight: 500;
    color: #c9a060;
    margin-left: 2px;
}

.amr-tc-dim {
    color: #ccc;
    font-size: .8rem;
}

.amr-tc-na {
    color: #e8e4de;
    font-size: .8rem;
}

/* Airline badges. background is a fallback for a carrier with no
   .amr-airline-{code} rule below — mainly [routemap]/[airline_routemap],
   which (unlike the redemption calculators) can render any of the ~600
   carriers in the underlying route dataset, most of which have no brand
   color mapped by hand. Without this, an unmapped badge inherited no
   background at all and rendered as invisible white-on-white text. */
.amr-airline-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: #6b7280;
}

.amr-airline-cx  { background: #006564; }
.amr-airline-uo  { background: #e63327; }
.amr-airline-uob { background: #e63327; } /* HK Express 隨心飛 — same carrier as .amr-airline-uo (經濟飛) */
.amr-airline-jl  { background: #c0392b; }
.amr-airline-qf  { background: #d4161a; }
.amr-airline-ba  { background: #0b3b8c; }
.amr-airline-qr  { background: #5c0025; }
.amr-airline-mh  { background: #003087; }
.amr-airline-ay  { background: #003580; }
.amr-airline-fj  { background: #009b77; }
.amr-airline-ca  { background: #c8161d; }
.amr-airline-nz  { background: #111111; }
.amr-airline-pg  { background: #5c2d91; }
.amr-airline-lh  { background: #0a1a3c; }
.amr-airline-lx  { background: #dc0018; }

/* Full oneworld/oneworld-connect roster — see the matching AIRLINE_LABELS
   comment in class-calculator.php. Colors chosen for >=7:1 contrast with
   the badge's white text (well above the >=4:1 floor used elsewhere in
   this file) and kept visually distinct from the set above. */
.amr-airline-aa  { background: #00164d; }
.amr-airline-as  { background: #003c64; }
.amr-airline-ha  { background: #8e1550; }
.amr-airline-ib  { background: #a3004c; }
.amr-airline-rj  { background: #0d5c3f; }
.amr-airline-ul  { background: #7a1330; }
.amr-airline-wy  { background: #5c3a12; }
.amr-airline-at  { background: #8a2b1f; }

/* China Southern — not a oneworld member, but has a confirmed direct BA
   Avios partnership (see AMR_Avios_Calculator::BA_NON_ONEWORLD_PARTNERS). */
.amr-airline-cz  { background: #8a1f10; }

/* [virgin_idea]'s 17 confirmed Virgin Points redemption partners (see
   AMR_Virgin_Calculator::CONFIRMED_PARTNERS) — same contrast-checked
   approach as the oneworld roster above, Virgin Atlantic itself (VS) is
   deliberately absent since it's never priced (see that class's docblock). */
.amr-airline-dl  { background: #8a0e28; }
.amr-airline-af  { background: #002157; }
.amr-airline-kl  { background: #00205b; }
.amr-airline-ci  { background: #7a1020; }
.amr-airline-mu  { background: #002d5c; }
.amr-airline-ke  { background: #00256c; }
.amr-airline-vn  { background: #002d78; }
.amr-airline-ga  { background: #00563f; }
.amr-airline-sk  { background: #00223d; }
.amr-airline-kq  { background: #7a1122; }
.amr-airline-sv  { background: #00543c; }
.amr-airline-me  { background: #6b2c91; }
.amr-airline-am  { background: #7a0c2e; }
.amr-airline-ux  { background: #4a2d7a; }
.amr-airline-ar  { background: #005b9e; }
.amr-airline-ro  { background: #7a5c00; }
.amr-airline-mf  { background: #004b87; }

/* [etihad_idea]: Etihad itself plus the Etihad Guest partners not already
   colored above (see AMR_Etihad_Calculator::AIRLINE_LABELS). Same >=7:1
   white-text contrast approach as the rosters above. */
.amr-airline-ey  { background: #6b5534; }
.amr-airline-jx  { background: #5a4a2b; }
.amr-airline-hx  { background: #8a1422; }
.amr-airline-nh  { background: #0f2c6b; }
.amr-airline-oz  { background: #5b2333; }
.amr-airline-hu  { background: #8a1c1c; }
.amr-airline-b6  { background: #002b6b; }
.amr-airline-ac  { background: #8f1116; }
.amr-airline-ad  { background: #003a70; }
.amr-airline-sn  { background: #8a0f2c; }
.amr-airline-de  { background: #5c4400; }
.amr-airline-tp  { background: #8a1014; }
.amr-airline-ju  { background: #1c2f66; }
.amr-airline-ly  { background: #003b6f; }
.amr-airline-et  { background: #1f5c2a; }
.amr-airline-gf  { background: #5a3e15; }

/* Not an Avios/oneworld/Virgin partner — only reachable via [routemap]'s
   unfiltered dataset (see the matching AIRLINE_LABELS comment in
   class-calculator.php). EVA Air's real brand green. */
.amr-airline-br  { background: #009a42; }

/* ba_own/qatar_own peak-price annotation (e.g. "（旺季 44,000）") shown
   alongside the off-peak figure a cell is otherwise sorted/dimmed by.
   display:block puts it on its own line — table-layout:fixed's narrow,
   nowrap columns (tuned for a single flat number) would otherwise force
   this second figure to overflow into the next column instead of just
   making its own cell taller. */
.amr-tc-peak {
    display: block;
    color: #b8a888;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Hotel carousel (Agoda) ──────────────────────── */
.amr-hotel-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0ebe2;
}

.amr-hotel-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #b3aa99;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.amr-hotel-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.amr-hotel-card {
    flex: 0 0 128px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ece6db;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}

.amr-hotel-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform: translateY(-1px);
}

.amr-hotel-img {
    height: 68px;
    background-size: cover;
    background-position: center;
    background-color: #f0ebe2;
}

.amr-hotel-body { padding: 7px 9px 9px; }

.amr-hotel-city {
    font-size: .66rem;
    font-weight: 700;
    color: #b38850;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 2px;
}

.amr-hotel-name {
    font-size: .76rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.amr-hotel-stars {
    font-size: .68rem;
    color: #e0a721;
    margin: 3px 0;
    letter-spacing: 1px;
}

.amr-hotel-price {
    font-size: .8rem;
    font-weight: 700;
    color: #1a1a2e;
}

.amr-hotel-price small { font-size: .65rem; font-weight: 400; color: #999; }

.amr-hotel-avg {
    font-size: .68rem;
    color: #999;
    margin-top: 1px;
}

.amr-hotel-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 148px;
    background: linear-gradient(160deg, #fff 0%, #fdf8f0 100%);
    border: 1px dashed #d9c49b;
    padding: 10px;
}

.amr-hotel-more:hover { background: #fdf3e2; }

.amr-hotel-more-icon {
    font-size: 1.3rem;
    color: #b38850;
    line-height: 1;
}

.amr-hotel-more-text {
    font-size: .74rem;
    font-weight: 600;
    color: #b38850;
    line-height: 1.4;
}

/* ── No results ─────────────────────────────────── */
.amr-no-results {
    text-align: center;
    padding: 44px 20px;
    color: #aaa;
    font-size: .95rem;
    background: #faf9f7;
    border-radius: 12px;
    border: 1px dashed #ddd8ce;
}

/* ── [eva_idea]: clickable destination pills + routing panel ───── */
button.amr-dp.amr-eva-dp {
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
}
button.amr-dp.amr-eva-dp:hover { border-color: #d8cbb3; }
button.amr-dp.amr-eva-dp.active { border-color: #b38850; background: #fbf6ee; }
button.amr-dp.amr-eva-dp:focus-visible { outline: 2px solid #b38850; outline-offset: 1px; }

.amr-eva-badge-eva { background: #009a42; }
.amr-eva-badge-sa  { background: #1a1a1a; }

.amr-eva-routes {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: .88rem;
    line-height: 1.6;
}
.amr-eva-rp-title { font-weight: 700; color: #333; margin-bottom: 6px; }
.amr-eva-route-list { list-style: none; margin: 0 0 4px; padding: 0; }
.amr-eva-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 3px 0; margin: 0; }
.amr-eva-chip {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
}
.amr-eva-chip-eva { background: #009a42; }
.amr-eva-chip-sa  { background: #1a1a1a; }
.amr-eva-path { color: #333; }
.amr-eva-carriers { color: #6b6b6b; }
.amr-eva-stop { margin: 6px 0 0; color: #555; font-size: .84rem; }
.amr-eva-stop b { color: #8a6a3a; }
.amr-eva-origins { margin-top: 12px; }
.amr-eva-map-hint {
    background: rgba(255,255,255,.92);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: .78rem;
    color: #555;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
a.amr-chip { text-decoration: none; }

/* ── Disclaimer ─────────────────────────────────── */
.amr-disclaimer {
    font-size: .76rem;
    color: #c0bcb5;
    text-align: center;
    margin-top: 24px;
    line-height: 1.7;
}

.amr-disclaimer a { color: #5099b3; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 700px) {
    .amr-widget { padding: 0 12px; }
    .amr-hero { padding: 18px 12px 16px; }
    .amr-row { padding: 14px; }
    .amr-row-main { flex-direction: column; gap: 12px; align-items: stretch; }
    .amr-row-meta { flex: none; width: 100%; }
    .amr-row-table-wrap { width: 100%; }
    .amr-title { font-size: 1.25rem; }
    .amr-search-group { max-width: none; }
    .amr-miles-input { font-size: 1.2rem; }
    .amr-map { height: 62vh; min-height: 380px; max-height: 560px; }
    .amr-ad-ebook { flex-direction: column; text-align: center; padding: 18px; }
    .amr-ad-desc { max-width: none; }
    .amr-ad-btn { width: 100%; text-align: center; }
}