/* ═══════════════════════════════════════════════════════
   Fly & Drive planner — immersive map-first layout
   Light theme: white glass panels + navy ink, matching the site design.
   ═══════════════════════════════════════════════════════ */

:root {
    --pp-btn-bg: rgb(255 255 255 / .16);
    --pp-btn-bg-hover: rgb(255 255 255 / .34);
    --pp-btn-zone: rgb(255 255 255 / .05);
    --fd-accent: var(--brand-red);
    --fd-on-accent: #fff;
    --fd-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* ── Override critical.css body/main constraints for the full-bleed layout ──
   critical.css sets body { display:grid; max-width:1440px } and
   main { display:grid; padding:0 10px } which both clip the sidebar+map.
   :has(.fd-hero) scopes these overrides to the fly-drive page only.
   Normal document flow: catalog, map app and benefits are separate sections,
   the page itself scrolls — no inner scroll container. */
body:has(.fd-hero) {
    max-width: none;
    display: block;
}

body:has(.fd-hero) main {
    display: block;
    padding: 0;
    margin: 0;
    max-width: none;
}

body:has(.fd-hero) :is(.top-pages-carousel-section, .scroll-top-btn) { display: none; }

/* ── Hero wrapper — full-bleed map with a floating panel over it ── */
.fd-hero {
    position: relative;
    width: 100%;
    height: calc(100dvh - 110px);
    min-height: 540px;
    display: block;
    --fd-ink: var(--text-color, #191919);
    --fd-glass: rgb(15 30 60 / .05);
    --fd-glass-hover: rgb(15 30 60 / .09);
    --fd-border: rgb(15 30 60 / .12);
    --fd-save: #12805c;
    --fd-r: 8px;
}

/* Neutralise global button element overrides (_buttons.css sets color:black, padding, font-size) */
.fd-hero button {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    border-color: transparent;
}

/* ── Map fills the hero; the panel floats on top of it ── */
.fd-map {
    position: absolute;
    inset: 0;
    display: block;
}
.fd-map-slot { display: contents; }

/* ── Floating panel (gépen bal oldali kártya, mobilon alsó lap — l. a mobil blokk) ── */
.fd-overlay {
    --fd-pad: 1.15rem;
    --fd-lead: 44px;          /* bélyegkép mérete */
    --fd-lead-gap: .65rem;    /* bélyegkép ↔ szöveg — ebből jön a szakasz-sorok behúzása is */

    --fd-inset: 1.75rem;

    position: absolute;
    /* A kártya a tartalmához nő, de nem lóg ki a heroból: onnantól a lista görget */
    inset-block: var(--fd-inset) auto;
    inset-inline-start: 1.5rem;
    max-block-size: calc(100% - 2 * var(--fd-inset));
    z-index: 20;          /* above Google Maps UI layer */
    width: 400px;

    /* overflow: visible so Places autocomplete + template dropdown escape to the map side */
    overflow: visible;

    background: rgb(255 255 255 / .94);
    backdrop-filter: blur(14px);
    border: 1px solid var(--fd-border);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgb(15 30 60 / .18);
    padding: 0;
    display: flex;
    flex-direction: column;
    color: var(--fd-ink);

    /* BEM-nevek kiírva: a `&__név` összefűzést a böngésző nem illeszti (l. CLAUDE.md) */
    .fd-overlay__header { line-height: 1.2; }
}

/* Szűkebb gépen/tableten ne szorítsa ki a térképet a kártya */
@media (max-width: 1200px) {
    .fd-overlay {
        --fd-inset: 1.25rem;
        inset-inline-start: .75rem;
    }
}

/* ── Sheet szerkezet: nem görgő fej, görgő lista, nem görgő lábrész ──
   A fej és a lábrész magassága a tartalomé; a lista kapja a maradékot. */
.fd-sheet-head {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: var(--fd-pad) var(--fd-pad) .8rem;
}

.fd-sheet-foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .8rem var(--fd-pad) var(--fd-pad);
    border-block-start: 1px solid var(--fd-border);
}

/* Üres lábrész (még nincs megálló) ne hagyjon egy vonalas csíkot a panel alján */
.fd-sheet-foot:not(:has(.is-visible)) { display: none; }

/* Fogantyú — csak mobilon (a lap felhúzásához), gépen nincs értelme */
.fd-grip { display: none; }

/* ── Brand header (planner mode top bar) ── */
.fd-brand-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--fd-border);
}

.fd-brand-logo-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--fd-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    & .material-symbols-outlined { font-size: 1.3rem; }
}

.fd-brand-title {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.15;
    margin: 0; /* h1-ként is a régi div-megjelenés */
}

.fd-brand-sub {
    font-size: .62rem;
    opacity: .5;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .1rem;
}

/* ── Trip meta row (date + rooms) ── */
.fd-trip-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.fd-meta-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--fd-glass);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r);
    padding: .6rem .7rem;
    cursor: pointer;
}

.fd-meta-icon {
    font-size: 1.2rem;
    opacity: .55;
    flex-shrink: 0;
}

.fd-meta-hint {
    display: block;
    font-size: .68rem;
    opacity: .55;
    line-height: 1;
    margin-bottom: .2rem;
}

.fd-meta-input {
    display: block;
    background: transparent;
    border: none;
    color: var(--fd-ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    width: 100%;
    padding: 0;
    outline: none;
    color-scheme: light;

    &[type="date"] {
        min-block-size: 1.4em;
        text-align: start;
    }
}

/* ── Route head — „Chicago → Los Angeles" + tények + a „+" gomb ── */
.fd-route-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.fd-route-head__text { min-width: 0; }

.fd-route-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -.015em;
}

.fd-route-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .2rem;
    font-size: .74rem;
    font-weight: 600;
    opacity: .5;
}

.fd-fact:not(:first-child)::before {
    content: "·";
    margin-inline-end: .3rem;
    opacity: .6;
}

/* Km/idő gépen a lap alján van (fd-route-summary) — itt csak mobilon kell */
.fd-fact--drive { display: none; }

/* Kör alakú „+" — nyitva 45°-ot fordul, így „×"-et mutat */
.fd-add-btn {
    flex-shrink: 0;
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgb(183 57 71 / .3);
    background: rgb(183 57 71 / .1);
    color: var(--fd-accent);
    cursor: pointer;
    transition: background .15s, color .15s;

    & .material-symbols-outlined { font-size: 1.4rem; transition: rotate .2s ease; }
    &:hover { background: rgb(183 57 71 / .18); }

    &.is-open {
        background: var(--fd-accent);
        color: #fff;
        border-color: transparent;

        & .material-symbols-outlined { rotate: 45deg; }
    }
}

.fd-place-picker-wrap {
    width: 100%;
}

.fd-place-picker-wrap gmp-placeautocomplete {
    width: 100%;
    --gmp-input-background: rgb(15 30 60 / .05);
    --gmp-input-border: rgb(15 30 60 / .18);
    --gmp-input-color: #191919;
    --gmp-input-font-family: Geologica, sans-serif;
    --gmp-input-border-radius: 8px;
    --gmp-input-font-size: .9rem;
    --gmp-input-padding: .65rem .75rem;
}

.fd-add-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.fd-add-panel {
    display: flex;
    flex-direction: column;
    gap: .55rem;

    &[hidden] { display: none; }
}

/* Nights stepper */
.fd-nights-stepper {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: rgb(183 57 71 / .08);
    border: 1px solid rgb(183 57 71 / .35);
    border-radius: var(--fd-r);
    padding: .45rem .65rem;
    flex-shrink: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--fd-ink);
}

.fd-step-btn {
    background: none;
    border: none;
    color: var(--fd-ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .15rem;
    opacity: .7;
    transition: opacity .15s, color .15s;

    &:hover { opacity: 1; color: var(--fd-accent); }
}

/* ── Buttons ── */
.fd-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: none;
    border-radius: var(--fd-r);
    padding: .55rem .95rem;
    font-size: .88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
    white-space: nowrap;

    &:disabled { opacity: .4; cursor: not-allowed; }
    & .material-symbols-outlined { font-size: 1.05em; }
    &--large { padding: .75rem 1.5rem; font-size: 1rem; border-radius: 10px; }
}

/* Higher specificity (0,2,0) to beat the scoped button reset (0,1,1) */
.fd-hero .fd-btn--add {
    background: var(--fd-accent);
    color: white;
    flex: 1;
    justify-content: center;
    &:hover { filter: brightness(1.1); }
}
.fd-hero .fd-btn--primary {
    background: var(--fd-accent);
    color: white;
    &:hover:not(:disabled) { filter: brightness(1.1); }
}

/* ── Shared thin scrollbar ── */
.fd-stops-list,
/* A görgetés a törzsön van (a kártya fej-törzs-lábléc), a vékony sáv is oda kell. */
.fd-contact-body {
    scrollbar-width: thin;
    scrollbar-color: rgb(15 30 60 / .22) transparent;

    &::-webkit-scrollbar { width: 6px; }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb { background: rgb(15 30 60 / .18); border-radius: 999px; }
    &::-webkit-scrollbar-thumb:hover { background: rgb(15 30 60 / .3); }
}

/* ── Stops list — grows to fill the remaining panel height ── */
.fd-stops-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-inline: var(--fd-pad);
}

.fd-empty {
    font-size: .82rem;
    opacity: .5;
    text-align: center;
    padding: .5rem 0;
    margin: 0;

    & b { color: var(--fd-accent); }
}

/* ── Megálló-sor: bélyegkép + név/alcím + éjszakák ── */
.fd-stop {
    display: flex;
    align-items: flex-start;
    gap: var(--fd-lead-gap);
    padding: .45rem .35rem;
    margin-inline: -.35rem;
    border-radius: 10px;
    cursor: grab;
    transition: background .15s;

    /* a bélyegkép/szám mérete a sor mérték-forrásából jön (l. --fd-lead) */
    & .fd-stop-thumb,
    & .fd-stop-num {
        width: var(--fd-lead);
        height: var(--fd-lead);
    }
}

@media (hover: hover) {
    .fd-stop:hover { background: var(--fd-glass); }
}

/* Drag & drop reorder states — the source row stays readable, only marked as "left behind";
   the cursor ghost is a solid clone built in JS (setDragImage). */
.fd-stop--dragging {
    opacity: .85;
    cursor: grabbing;
    background: rgb(183 57 71 / .05);
    outline: 1px dashed rgb(183 57 71 / .5);
}

.fd-stop--drop-before { box-shadow: 0 -3px 0 0 var(--fd-accent); }
.fd-stop--drop-after  { box-shadow: 0 3px 0 0 var(--fd-accent); }

.fd-stop__body { flex: 1; min-width: 0; }

.fd-stop__head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.fd-stop__text { flex: 1; min-width: 0; }

.fd-stop__name {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-stop__sub {
    font-size: .74rem;
    opacity: .5;
    margin-top: .05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Éjszaka-pill — mobilon ez nyitja a sor vezérlőit (gépen a vezérlők eleve látszanak) */
.fd-stop__pill {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: .05rem;
    background: var(--fd-glass);
    border: 1px solid var(--fd-border);
    border-radius: 99px;
    padding: .28rem .3rem .28rem .6rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fd-ink);
    cursor: pointer;

    & .material-symbols-outlined { font-size: 1.05rem; opacity: .45; transition: rotate .2s ease; }
}

.fd-stop.is-open .fd-stop__pill .material-symbols-outlined { rotate: 180deg; }

.fd-stop__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .45rem;
}

/* ── Leg info rows (between stops) ──
   A bélyegkép sávjához behúzva, a pin alatt futó összekötő vonallal. */
.fd-leg-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: .3rem;
    min-height: 1.5rem;
    margin-inline-start: calc(var(--fd-lead) + var(--fd-lead-gap));
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    opacity: .45;

    &::before {
        content: "";
        position: absolute;
        inset-block: -.45rem;
        inset-inline-start: calc(-1 * (var(--fd-lead-gap) + var(--fd-lead) / 2) - 1px);
        inline-size: 2px;
        border-radius: 2px;
        background: rgb(183 57 71 / .22);
    }
}

.fd-leg-sep { opacity: .4; }

/* Ajánlat-nézet: a szakasz-sor középre kerül, összekötő vonal nélkül */
.fd-leg-row--offer {
    justify-content: center;
    margin-inline-start: 0;
    margin-block: -.15rem;

    &::before { content: none; }
}

/* ── CTA area (button + reassurance note) ── */
.fd-cta-area {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;

    &.is-visible { display: flex; }
}

.fd-iwant-note {
    font-size: .72rem;
    opacity: .5;
    text-align: center;
    margin: 0;
    line-height: 1.45;
}

.fd-cruise-offer {
    align-self: stretch;
    display: grid;
    gap: .35rem;
    padding: .7rem .85rem;
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r);
    background: var(--fd-glass);
    color: var(--fd-ink);

    &[hidden] { display: none; }

    .fd-cruise-offer-title {
        font-size: .85rem;
        font-weight: 700;
    }

    .fd-cruise-offer-text {
        font-size: .74rem;
        line-height: 1.4;
        opacity: .75;
    }

    .fd-cruise-offer-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .fd-cruise-offer-note {
        font-size: .68rem;
        line-height: 1.4;
        opacity: .6;
    }
}

.fd-realprice {
    align-self: stretch;
    display: grid;
    gap: .2rem;
    padding: .7rem .85rem;
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r);
    background: var(--fd-glass);
    color: var(--fd-ink);
    text-align: center;

    .fd-realprice-title {
        font-size: .72rem;
        letter-spacing: .04em;
        opacity: .7;
    }

    .fd-realprice-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--fd-accent);
    }

    .fd-realprice-note {
        font-size: .7rem;
        line-height: 1.4;
        opacity: .65;
    }
}

/* ── Shared numbered circle base ── */
.fd-stop-num,
.fd-map-pin {
    border-radius: 50%;
    background: var(--fd-accent);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fd-stop-num {
    width: 28px;
    height: 28px;
    font-size: .72rem;
}

/* ── Stop thumbnail (place photo) ── */
/* No photo: a red rounded square with the centred number (same role as .fd-stop-num).
   Photo loaded (.is-photo): the image fills the tile and the number shrinks to a corner pill. */
.fd-stop-thumb {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 9px;
    overflow: hidden;
    background: var(--fd-accent);

    & img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .25s ease;
    }

    &::after {
        content: attr(data-num);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 800;
        font-size: .8rem;
    }
}

.fd-stop-thumb.is-photo {
    background: var(--fd-glass);

    & img { opacity: 1; }

    &::after {
        inset: auto auto 2px 2px;
        width: 17px;
        height: 17px;
        border-radius: 5px;
        background: rgb(0 0 0 / .55);
        font-size: .66rem;
    }
}

.fd-offer-stop__thumb {
    width: 48px;
    height: 48px;
}

.fd-stop-nights {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
}

/* ── Shared base: night stepper btn + icon btn ── */
.fd-night-btn,
.fd-icon-btn {
    background: transparent;
    color: var(--fd-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.fd-night-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgb(15 30 60 / .18);
    font-size: .9rem;
    line-height: 1;

    &:hover { background: var(--fd-glass-hover); }
}

.fd-night-count {
    font-size: .78rem;
    font-weight: 600;
    min-width: 2.6rem;
    text-align: center;
}

.fd-stop-actions,
.fd-stop-reorder {
    display: flex;
    gap: .2rem;
    align-items: center;
    flex-shrink: 0;
}

.fd-icon-btn {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid rgb(15 30 60 / .14);
    font-size: .72rem;
    transition: background .15s;

    &:hover { background: var(--fd-glass-hover); }

    &--del {
        border-color: rgb(183 57 71 / .4);
        color: var(--fd-accent);

        &:hover { background: rgb(183 57 71 / .12); }
    }

    &--ph { visibility: hidden; pointer-events: none; }
}

/* ── Route summary (panel-alji összegző: össz-km, menetidő, éjszakák) ──
   A láthatóságot osztály vezérli (`is-visible`), nem inline stílus: így a mobil
   media query el tudja rejteni (ott a route-fejlécben van a km/idő). */
.fd-route-summary {
    display: none;
    align-items: baseline;
    gap: .45rem;

    &.is-visible { display: flex; }

    .fd-route-total__dist {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

    .fd-route-total__dur { font-size: .76rem; opacity: .5; }

    .fd-route-total__nights {
        margin-inline-start: auto;
        font-size: .76rem;
        font-weight: 700;
        opacity: .55;
    }
}

.fd-route-calculating {
    opacity: .6;
    animation: fd-pulse 1.2s ease-in-out infinite;
}

@keyframes fd-pulse {
    0%, 100% { opacity: .6; }
    50%       { opacity: 1; }
}

/* ── Map pins ── */
.fd-map-pin {
    width: 28px;
    height: 28px;
    font-size: .72rem;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgb(0 0 0 / .35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fd-map-pin--active {
    transform: scale(1.35);
    background: #16306b;
    box-shadow: 0 0 0 5px rgb(22 48 107 / .22), 0 4px 14px rgb(0 0 0 / .4);
}
.fd-map-pin {
    position: relative;

    .fd-map-pin__label {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: calc(100% + 8px);
        translate: 0 -50%;
        white-space: nowrap;
        font-size: .7rem;
        font-weight: 700;
        color: #16306b;
        background: rgb(255 255 255 / .96);
        padding: .15rem .45rem;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgb(0 0 0 / .2);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s;
    }
    &:hover .fd-map-pin__label,
    &.fd-map-pin--active .fd-map-pin__label { opacity: 1; }
    &.fd-map-pin--multi { width: auto; min-width: 28px; padding-inline: .4rem; border-radius: 999px; }
}
.fd-offer-stop--active { border-color: #16306b; box-shadow: 0 0 0 3px rgb(22 48 107 / .14); }

/* ── Rooms trigger ── */
.fd-rooms-trigger {
    cursor: pointer;
    user-select: none;
}

.fd-rooms-trigger > div {
    flex: 1;
    min-width: 0;
}

.fd-rooms-chevron {
    font-size: .85rem;
    opacity: .45;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .2s;
}

/* ── Rooms panel (expandable) ── */
.fd-rooms-panel {
    background: rgb(15 30 60 / .04);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r);
    padding: .45rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.fd-rooms-list {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.fd-room-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .35rem;
    padding: .15rem .1rem;
}

.fd-room-label {
    font-size: .75rem;
    font-weight: 600;
    opacity: .7;
}

.fd-room-adults {
    display: flex;
    align-items: center;
    gap: .2rem;
    background: var(--fd-glass);
    border: 1px solid var(--fd-border);
    border-radius: 6px;
    padding: .2rem .35rem;
}

.fd-room-adults-count {
    font-size: .78rem;
    font-weight: 600;
    min-width: 4.8rem;
    text-align: center;
}

.fd-rooms-add-btn {
    width: 100%;
    justify-content: center;
    background: rgb(15 30 60 / .04);
    color: rgb(25 25 25 / .65);
    border: 1px solid var(--fd-border);
    font-size: .75rem;
    padding: .3rem .6rem;
    margin-top: .05rem;

    &:hover { background: var(--fd-glass-hover); color: var(--fd-ink); filter: none; }
}

/* Gyerekek a szoba-sorban: kor-chipek (✕-szel) + a hozzáadó kor-választó */
.fd-room-children {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: 0 .1rem .2rem;
}

.fd-child-chip {
    border: 1px solid var(--fd-border);
    border-radius: 999px;
    background: rgb(15 30 60 / .05);
    color: var(--fd-ink);
    font-size: .72rem;
    font-weight: 600;
    padding: .18rem .55rem;
    cursor: pointer;
}
.fd-child-chip:hover { background: rgb(183 57 71 / .1); color: var(--fd-accent); }

.fd-child-add {
    border: 1px dashed var(--fd-border);
    border-radius: 999px;
    background: transparent;
    color: rgb(25 25 25 / .6);
    font-size: .72rem;
    padding: .16rem .4rem;
    max-width: 7.5rem;
    cursor: pointer;
}

/* Szobatípus-igény chipek a szoba-panel alján */
.fd-roompref {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .45rem;
    margin-top: .3rem;
    border-top: 1px solid var(--fd-border);
}

.fd-roompref__label { font-size: .72rem; font-weight: 600; opacity: .7; }
.fd-roompref__hint  { font-weight: 400; opacity: .75; }

.fd-roompref__chips { display: flex; flex-wrap: wrap; gap: .3rem; }

/* A chip választható voltát a bal oldali jelölő mondja el: üresen karika, kiválasztva pipa.
   Csak szín/keret nem volt elég — a chipek feliratnak látszottak (Dóra, 2026-09-16). */
.fd-pref-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    border: 1px solid rgb(15 30 60 / .22);
    border-radius: 999px;
    background: #fff;
    color: var(--fd-ink);
    font-size: .74rem;
    line-height: 1.3;
    padding: .32rem .75rem .32rem .5rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(15 30 60 / .07);
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.fd-pref-chip::before {
    content: "";
    inline-size: .95em;
    block-size: .95em;
    flex: none;
    border: 1.5px solid rgb(15 30 60 / .3);
    border-radius: 50%;
    background: #fff;
    transition: background .12s, border-color .12s;
}

.fd-pref-chip:hover {
    border-color: var(--fd-accent);
    background: rgb(183 57 71 / .07);
    box-shadow: 0 2px 6px rgb(183 57 71 / .16);
}
.fd-pref-chip:hover::before { border-color: var(--fd-accent); }

.fd-pref-chip:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 2px;
}

.fd-pref-chip.is-on {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgb(183 57 71 / .28);
}

.fd-pref-chip.is-on::before {
    border-color: transparent;
    background-color: #fff;
    -webkit-mask: var(--fd-icon-check) center / contain no-repeat;
    mask: var(--fd-icon-check) center / contain no-repeat;
}

.fd-ask {
    display: flex;
    flex-direction: column;
    gap: .35rem;

    .fd-ask__label {
        font-size: .78rem;
        font-weight: 600;
        color: var(--fd-ink);
        opacity: .85;
    }

    .fd-ask__hint { font-weight: 400; opacity: .6; }
    .fd-ask__req  { color: var(--fd-accent); font-weight: 700; }

    .fd-ask__chips {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
    }

    /* A display:flex erősebb a [hidden] UA-szabályánál — enélkül a telefonos idősáv-chipek
       akkor is ott álltak, ha az ügyfél nem kérte a hívást. */
    .fd-ask__chips[hidden] { display: none; }

    /* Szabad szöveges kiegészítés a chipek alatt (időablak-mondat, autómárka) */
    .fd-ask__text {
        inline-size: 100%;
        border: 1px solid rgb(15 30 60 / .18);
        border-radius: var(--fd-r);
        background: #fff;
        color: var(--fd-ink);
        font: inherit;
        font-size: .82rem;
        padding: .4rem .55rem;
    }
    .fd-ask__text:focus { outline: none; border-color: var(--fd-accent); }
    .fd-ask__textarea { resize: vertical; min-block-size: 2.6rem; }

    /* Irodai magyarázat (mit foglalunk, mikor drágább) — halkabb, de olvasható */
    .fd-ask__note {
        margin: 0;
        font-size: .72rem;
        line-height: 1.35;
        color: rgb(25 25 25 / .62);
    }
    .fd-ask__list { padding-inline-start: 1.1rem; }

    .fd-ask__chips--sub {
        border-inline-start: 2px solid var(--fd-border);
        margin-inline-start: .15rem;
        padding-inline: .55rem 0;
        padding-block: .1rem;
    }
}

/* ── "Ez tetszik!" CTA button ── */
.fd-cta-area .fd-iwant-btn,
.fd-hero .fd-iwant-btn,
.fd-iwant-btn {
    width: 100%;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, #b73947 0%, #c94455 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: filter .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgb(183 57 71 / .35);
    letter-spacing: .01em;

    &:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgb(183 57 71 / .45);
    }

    & .material-symbols-outlined { font-size: 1.15em; }
}

/* ═══════════════════════════════════════════════════════
   Contact form modal (overlays the map)
   ═══════════════════════════════════════════════════════ */
.fd-request {
    max-inline-size: 920px;
    margin: 2rem auto 3rem;
    padding-inline: 1rem;
    scroll-margin-block-start: 5rem;

    &[hidden] { display: none; }

    & button { font-family: inherit; }
}

@keyframes fd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fd-contact-card {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid var(--fd-border);
    border-radius: 20px;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--fd-ink);
    box-shadow: 0 12px 34px rgb(15 30 60 / .1);
    animation: fd-slide-up .25s ease;
}

@keyframes fd-slide-up {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.fd-request-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem .3rem .45rem;
    border: 1px solid var(--fd-border);
    border-radius: 999px;
    background: transparent;
    color: var(--fd-ink);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;

    & .material-symbols-outlined { font-size: 1.05rem; }
    &:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
}

.fd-contact-header { display: flex; flex-direction: column; gap: .25rem; }

.fd-contact-icon {
    font-size: 1.7rem;
    color: var(--fd-accent);
    margin-bottom: .1rem;
}

.fd-contact-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.01em;
}

.fd-contact-sub {
    font-size: .82rem;
    opacity: .6;
    margin: 0;
    line-height: 1.4;
}

.fd-contact-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-block-size: 0;
}

.fd-ask-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
    align-items: start;
}
.fd-ask-grid > #fd-ask-board,
.fd-ask-grid > #fd-ask-flex { grid-column: 1 / -1; }

.fd-request .fd-pref-chip {
    font-size: .8rem;
    justify-content: flex-start;
    text-align: start;
    max-inline-size: 100%;
}

.fd-contact-form > .fd-ask__note {
    margin: 0;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--fd-ink);
    opacity: .68;
}

.fd-contact-note {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
}

.fd-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.fd-contact-form label {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    font-size: .82rem;
    font-weight: 600;
}

.fd-contact-form .fd-label--wide { grid-column: 1 / -1; }

.fd-contact-form input,
.fd-contact-form textarea,
.fd-contact-note textarea {
    background: var(--fd-glass);
    border: 1px solid rgb(15 30 60 / .16);
    border-radius: var(--fd-r);
    color: var(--fd-ink);
    padding: .52rem .68rem;
    font-size: .88rem;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}

.fd-contact-form input:focus,
.fd-contact-form textarea:focus,
.fd-contact-note textarea:focus {
    outline: none;
    border-color: var(--fd-accent);
    background: white;
}

.fd-contact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-shrink: 0;
    padding-top: .7rem;
    border-top: 1px solid rgb(15 30 60 / .1);
}

.fd-contact-actions__msg {
    margin-inline-end: auto;
    font-size: .78rem;
    font-weight: 600;
    color: var(--fd-accent);
}

/* Megválaszolatlan kötelező kérdés: a blokk kap egy halk piros keretet, a kérdés-szöveg pirosat —
   a küldés ide görget. Outline, nem border: így a jelölés nem told el semmit és nem lóg ki
   vízszintesen a hasábokból. */
.fd-ask--missing {
    outline: 1px solid rgb(183 57 71 / .45);
    outline-offset: 6px;
    border-radius: 2px;
}
.fd-ask--missing .fd-ask__label { color: var(--fd-accent); }

@media (max-width: 760px) {
    .fd-ask-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Thank you state ── */
.fd-thankyou {
    text-align: center;
    padding: 1.5rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.fd-thankyou .material-symbols-outlined { font-size: 3.5rem; color: #10b981; }
.fd-thankyou h2 { font-size: 1.4rem; margin: 0; }
.fd-thankyou p  { opacity: .65; margin: 0; line-height: 1.55; }

/* ═══════════════════════════════════════════════════════
   Offer overlay — same light/glass design as the planner
   ═══════════════════════════════════════════════════════ */

/* A szakaszok élre ülnek; az `overflow: hidden` egyben a kártya lekerekítésére is vág
   (a tervezőnél ez `visible`, mert ott a Places-lista kilóg a térkép fölé). */
.fd-overlay--offer { overflow: hidden; width: 520px; }
@media (max-width: 1200px) {
    .fd-overlay--offer { width: 470px; }
}

@media (min-width: 901px) {
    .fd-hero--offer {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 520px minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
        padding-block: 1rem 1.5rem;

        .fd-map-slot {
            display: block;
            grid-column: 2;
            grid-row: 1;
            position: sticky;
            inset-block-start: 1rem;
            block-size: calc(100svh - 2rem);
            border-radius: 18px;
            overflow: hidden;
        }
        .fd-offer-stickytop { inset-block-start: 0; z-index: 101; }
    }
    .fd-hero--offer .fd-overlay--offer {
        grid-column: 1;
        grid-row: 1;
        position: static;
        width: auto;
        max-block-size: none;
        block-size: auto;
        overflow: visible;
    }
    .fd-hero--offer .fd-offer-stops { overflow: visible; flex: none; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .fd-hero--offer { grid-template-columns: 470px minmax(0, 1fr); }
}

.fd-offer-stickytop {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    background: rgb(255 255 255 / .97);
    backdrop-filter: blur(6px);
    border-block-end: 1px solid var(--fd-border);
}
.fd-offer-total--head { border-bottom: none; }

/* ── Header ── */
.fd-overlay__header--offer {
    padding: 1rem 1rem .85rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    border-bottom: 1px solid var(--fd-border);
}
.fd-offer-badge {
    display: flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; opacity: .55;
}
.fd-offer-badge .material-symbols-outlined { font-size: .95rem; }
.fd-offer-headline { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.fd-offer-meta     { font-size: .75rem; opacity: .5; }

/* Dátum-eltolás: az ajánlat nem a kért napra szól (a repjegy a horgony) — hangsúlyos jelzés */
.fd-offer-dateshift {
    margin-top: .5rem;
    padding: .5rem .6rem;
    border-left: 3px solid var(--fd-accent);
    border-radius: .35rem;
    background: rgb(183 57 71 / .07);

    .fd-offer-dateshift__head {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--fd-accent);
    }
    .fd-offer-dateshift__body {
        margin-top: .2rem;
        font-size: .78rem;
        line-height: 1.45;
        opacity: .8;
    }
}

.fd-offer-stop__transit {
    font-size: .78rem;
    font-style: italic;
    color: rgb(25 25 25 / .55);
    padding: .2rem 0;
}

/* Utas-elosztás a fejlécben: szobánkénti sorok + a kért szobatípus visszaigazolása */
.fd-offer-party {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-top: .3rem;
    font-size: .74rem;
}
.fd-offer-party__line { opacity: .65; }
.fd-offer-party__pref {
    margin-top: .15rem;
    color: var(--fd-accent);
    font-weight: 600;
}

/* ── Total price card ── */
.fd-offer-total {
    padding: .75rem 1rem;
    text-align: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgb(15 30 60 / .08);
    background: rgb(15 30 60 / .03);
}
.fd-offer-total__label { font-size: .67rem; opacity: .5; text-transform: uppercase; letter-spacing: .07em; }
.fd-offer-total__price { font-size: 1.55rem; font-weight: 800; color: var(--fd-accent); margin: .1rem 0; }
.fd-offer-total__note  { font-size: .72rem; opacity: .5; }
.fd-offer-total__pp    { font-size: .74rem; font-weight: 600; opacity: .75; margin-block-end: .15rem; }

/* Kézi tételek az ár alatt — a végösszeg részei */
.fd-offer-extras {
    text-align: start;
    margin-block-start: .55rem;
    padding-block-start: .45rem;
    border-block-start: 1px dashed var(--fd-border);
    display: flex;
    flex-direction: column;
    gap: .18rem;
}
.fd-offer-extras__head {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
}
.fd-offer-extras__row {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    font-size: .74rem;
}
.fd-offer-extras__name  { opacity: .85; }
.fd-offer-check { color: #15803d; font-weight: 700; margin-inline-end: .35rem; }

/* Fizetési bontás az ár alatt: foglaláskor fizetendő + hátralék */
.fd-offer-paysplit {
    text-align: start;
    margin-block-start: .55rem;
    padding-block-start: .45rem;
    border-block-start: 1px dashed var(--fd-border);
    display: flex;
    flex-direction: column;
    gap: .18rem;
}
.fd-offer-paysplit__row {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    font-size: .78rem;
    font-weight: 700;
}
.fd-offer-paysplit__row--rest { font-weight: 400; opacity: .75; }
.fd-offer-paysplit__hint {
    font-size: .68rem;
    line-height: 1.4;
    opacity: .55;
}

/* Visszajelzés az ügyfélnek szállás-váltás után — tudjuk, és ezzel számolunk tovább */
.fd-choice-toast {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 22px;
    margin-inline: auto;
    inline-size: fit-content;
    max-inline-size: min(92vw, 560px);
    z-index: 300;
    background: #1c2434;
    color: #fff;
    font-size: .82rem;
    line-height: 1.4;
    padding: .65rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgb(15 30 60 / .35);
    opacity: 0;
    translate: 0 12px;
    pointer-events: none;
    transition: opacity .25s, translate .25s;
}
.fd-choice-toast--show { opacity: 1; translate: 0 0; }
.fd-offer-extras__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Per-room price breakdown for the whole trip (e.g. "2 fős szoba · X Ft") */
.fd-offer-rooms {
    margin-block-start: .6rem;
    padding-block-start: .6rem;
    border-block-start: 1px solid rgb(15 30 60 / .08);
    display: flex;
    flex-direction: column;
    gap: .3rem;

    .fd-offer-room {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        font-size: .82rem;
    }
    .fd-offer-room__label { color: var(--fd-ink); opacity: .75; }
    .fd-offer-room__price { font-weight: 700; color: var(--fd-ink); font-variant-numeric: tabular-nums; }
}

/* ── Stop cards ── */
.fd-offer-stops {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgb(15 30 60 / .25) transparent;
}
.fd-offer-stops::-webkit-scrollbar { width: 4px; }
.fd-offer-stops::-webkit-scrollbar-thumb { background: rgb(15 30 60 / .25); border-radius: 2px; }

.fd-offer-stop {
    display: flex; gap: .55rem; align-items: flex-start;
    background: var(--fd-glass);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r);
    padding: .55rem .75rem;
}
/* min-width:0: a flex-gyerek alapból nem törik a tartalmánál keskenyebbre — hosszú hotelnév
   kinyomná a felár-oszlopot a kártyából (l. MOBILE_LAYOUT.md) */
.fd-offer-stop__body { min-width: 0; flex: 1; }
.fd-offer-stop--done {
    border-color: rgb(183 57 71 / .4);
    background: rgb(183 57 71 / .06);
}
.fd-offer-stop__num {
    width: 24px; height: 24px; flex-shrink: 0;
    background: var(--fd-accent); color: var(--fd-on-accent); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .75rem;
}
.fd-offer-stop__place   { font-weight: 700; font-size: .88rem; }
.fd-offer-stop__dates   { font-size: .72rem; opacity: .5; margin: .1rem 0; }
.fd-offer-stop__hotel   { font-size: .82rem; opacity: .9; }
.fd-offer-stop__pending { font-size: .72rem; opacity: .45; font-style: italic; }

.fd-offer-stop__rooms {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;

    .fd-offer-stop__room {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .35rem;
        font-size: .74rem;
        line-height: 1.25;
    }

    .fd-offer-stop__room-occ {
        flex-shrink: 0;
        font-weight: 700;
        font-size: .68rem;
        padding: .1rem .4rem;
        border-radius: 999px;
        background: rgb(183 57 71 / .1);
        color: var(--fd-accent);
    }

    .fd-offer-stop__room-name { opacity: .9; }

    .fd-offer-stop__room-board {
        opacity: .55;

        &::before { content: "·"; margin-inline-end: .35rem; opacity: .6; }
    }
}


/* ── Rental car card at the end of the offer itinerary ── */
.fd-offer-car {
    display: flex; gap: .55rem; align-items: flex-start;
    background: rgb(15 30 60 / .05);
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-r);
    padding: .55rem .75rem;

    .fd-offer-car__icon {
        width: 24px; height: 24px; flex-shrink: 0;
        background: rgb(15 30 60 / .85); color: #fff; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;

        & .material-symbols-outlined { font-size: .9rem; }
    }

    .fd-offer-car__title   { font-weight: 700; font-size: .88rem; }
    .fd-offer-car__vehicle { font-size: .82rem; opacity: .9; margin-block: .1rem; }

    .fd-offer-car__leg {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .35rem;
        font-size: .74rem;
        line-height: 1.25;
        opacity: .85;
    }

    .fd-offer-car__leg-label {
        flex-shrink: 0;
        font-weight: 700;
        font-size: .68rem;
        padding: .1rem .4rem;
        border-radius: 999px;
        background: rgb(15 30 60 / .08);
    }

    .fd-offer-car__note { font-size: .72rem; opacity: .6; margin-top: .25rem; }
}

.fd-offer-flight .fd-offer-car__icon { background: var(--fd-accent); }

/* Leg-by-leg flight schedule on the offer page */
.fd-legs--offer {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: .15rem 0 .3rem;
    padding-left: .55rem;
    border-left: 2px solid rgb(15 30 60 / .12);

    .fd-legs__leg {
        display: flex;
        flex-direction: column;
        gap: .05rem;
        font-size: .74rem;
        line-height: 1.35;
    }
    .fd-legs__flight { font-weight: 700; }
    .fd-legs__route  { opacity: .9; }
    .fd-legs__meta   { font-size: .68rem; opacity: .55; }
    .fd-legs__wait   { font-size: .68rem; color: var(--fd-accent); font-style: italic; }
}

.fd-offer-car__bags { font-size: .72rem; opacity: .75; margin-top: .2rem; }

/* Customer-switchable hotel variants on a stop card */
.fd-choice {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .4rem;

    .fd-choice__item {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .4rem .55rem;
        border: 1px solid var(--fd-border);
        border-radius: 12px;
        background: rgb(255 255 255 / .8);
        cursor: pointer;
        font-size: .76rem;
        transition: border-color .12s, background .12s, box-shadow .12s;
    }
    .fd-choice__item:hover  { border-color: rgb(183 57 71 / .5); box-shadow: 0 2px 8px rgb(15 30 60 / .08); }
    .fd-choice__item--on    { border-color: var(--fd-accent); background: rgb(183 57 71 / .07); }

    /* Luxus extra változat: elválasztva, visszafogott arany kerettel és szalaggal */
    .fd-choice__item--lux {
        position: relative;
        margin-top: .55rem;
        padding-top: .95rem;
        border-color: rgb(201 162 75 / .55);
        background: linear-gradient(180deg, rgb(201 162 75 / .07), rgb(255 255 255 / .85));
    }
    .fd-choice__item--lux:hover { border-color: rgb(201 162 75 / .9); box-shadow: 0 2px 10px rgb(201 162 75 / .18); }
    .fd-choice__item--lux.fd-choice__item--on { border-color: #c9a24b; background: rgb(201 162 75 / .1); }

    .fd-choice__lux-badge {
        position: absolute;
        top: -.55rem;
        left: .7rem;
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #8a6a24;
        background: linear-gradient(180deg, #f7ecd4, #efdfba);
        border: 1px solid rgb(201 162 75 / .5);
        border-radius: 999px;
        padding: .12rem .55rem;
        white-space: nowrap;
    }

    input[type="radio"] { accent-color: var(--fd-accent); flex-shrink: 0; margin: 0; }

    .fd-choice__photo {
        flex-shrink: 0;
        width: 96px;
        height: 70px;
        object-fit: cover;
        border-radius: 10px;
    }
    @media (max-width: 480px) {
        .fd-choice__photo { width: 76px; height: 58px; }
    }

    .fd-choice__photowrap {
        position: relative;
        flex-shrink: 0;
        display: inline-flex;
        border-radius: 8px;
        cursor: zoom-in;
    }
    .fd-choice__photomore {
        position: absolute;
        right: 2px;
        bottom: 2px;
        font-size: .58rem;
        line-height: 1;
        padding: .14rem;
        border-radius: 6px;
        background: rgb(8 12 20 / .55);
        pointer-events: none;
    }
    .fd-choice__photowrap:hover .fd-choice__photo { filter: brightness(1.08); }

    .fd-choice__body {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .1rem;
    }
    .fd-choice__hotel { font-weight: 600; }
    .fd-choice__stars { color: #f59e0b; font-size: .68rem; flex-shrink: 0; letter-spacing: .05em; }
    .fd-choice__meta  { display: flex; align-items: baseline; gap: .4rem; }
    .fd-choice__rating {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: .22rem;
        font-size: .68rem;
        font-weight: 700;
    }
    .fd-choice__g {
        inline-size: 1.15em;
        block-size: 1.15em;
        flex: 0 0 auto;
        background: url('https://mortons.hu/images/temp-static/google_g_icon.png?imageFormat=webp&w=64&format=webp') center/contain no-repeat;
    }
    .fd-choice__board { font-size: .68rem; opacity: .6; }
    .fd-choice__why   { font-size: .68rem; font-style: italic; opacity: .7; line-height: 1.35; }
    .fd-choice__bb {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        font-size: .68rem;
        font-weight: 600;
        color: var(--fd-accent);
        cursor: pointer;
        white-space: nowrap;
    }
    .fd-choice__bb input[type="checkbox"] { accent-color: var(--fd-accent); margin: 0; cursor: pointer; }
    .fd-choice__bb:hover span { text-decoration: underline; }
    .fd-choice__price { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .fd-choice__price--base { color: var(--fd-accent); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
    .fd-choice__price--less { color: var(--fd-save, #12805c); }
    .fd-choice__hint  { font-size: .66rem; opacity: .55; }
}

@media (max-width: 560px) {
    .fd-offer-stops { padding-inline: .5rem; }
    .fd-offer-stop  { padding-inline: .5rem; }

    .fd-choice {
        .fd-choice__item {
            display: grid;
            grid-template-columns: auto auto minmax(0, 1fr) auto;
            grid-template-areas:
                "pick photo name  price"
                "pick photo meta  meta";
            align-items: start;
            column-gap: .4rem;
            row-gap: .1rem;
            padding: .4rem .45rem;
        }
        .fd-choice__item > input[type="radio"] { grid-area: pick; align-self: center; }
        .fd-choice__photowrap { grid-area: photo; align-self: center; }
        .fd-choice__photo { width: 58px; height: 46px; }
        .fd-choice__body  { display: contents; }
        .fd-choice__hotel { grid-area: name; }
        .fd-choice__meta  { grid-area: meta; flex-wrap: wrap; }
        .fd-choice__bb    { grid-column: 3 / span 2; }
        .fd-choice__price { grid-area: price; font-size: .72rem; }
        .fd-choice__price--base { font-size: .64rem; }
    }
}

.fd-offer-total__base { font-size: .68rem; opacity: .6; margin-top: .2rem; }

/* ── Prominent "Módosítom" button at the top of the offer overlay ── */
.fd-modify-topbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .65rem 1rem;
    background: rgb(183 57 71 / .08);
    border: 1px solid rgb(183 57 71 / .45);
    border-radius: 0;
    color: var(--fd-accent);
    font-size: .85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;

    & .material-symbols-outlined { font-size: 1rem; }
    &:hover { background: rgb(183 57 71 / .16); border-color: rgb(183 57 71 / .7); }
}

/* ── Back-to-offer button shown at the top of the planner in modify mode ── */
.fd-back-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    color: var(--fd-ink);
    opacity: .6;
    font-size: .8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: opacity .15s;

    & .material-symbols-outlined { font-size: .95rem; }
    &:hover { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   Popular routes catalog — full-width section above the map
   ═══════════════════════════════════════════════════════ */
.fd-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Extra info ("További információk") — below the map, offer view
   ═══════════════════════════════════════════════════════════ */
.fd-extra {
    --fd-ink: var(--text-color, #191919);
    --fd-border: rgb(15 30 60 / .12);
    max-width: 1280px;
    margin-inline: auto;
    padding-block: 2rem 2.5rem;
    padding-inline: 1.25rem;

    .fd-extra__card {
        background: rgb(255 255 255 / .94);
        border: 1px solid var(--fd-border);
        border-radius: 18px;
        padding: 1.5rem 1.75rem;
        box-shadow: 0 1px 3px rgb(15 30 60 / .06);
        color: var(--fd-ink);
    }

    .fd-extra__title {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 1rem;
        font-size: 1.15rem;
        font-weight: 800;

        .material-symbols-outlined { color: var(--fd-accent); font-size: 1.4rem; }
    }

    .fd-extra__body {
        font-size: .95rem;
        line-height: 1.7;

        p { margin: 0 0 .75rem; }
        :is(ul, ol) { margin: .25rem 0 .9rem; padding-inline-start: 1.5rem; }
        li { margin-block: .15rem; }
        :is(h1, h2, h3, h4, h5, h6) { margin: 1.1rem 0 .5rem; line-height: 1.3; }
        a { color: var(--fd-accent); text-decoration: underline; }
        strong { font-weight: 700; }

        table {
            border-collapse: collapse;
            width: 100%;
            margin: .5rem 0 1rem;

            :is(td, th) { border: 1px solid var(--fd-border); padding: .4rem .6rem; text-align: start; }
            th { background: rgb(15 30 60 / .04); font-weight: 700; }
        }

        :is(img) { max-width: 100%; height: auto; border-radius: 8px; }
        > :last-child { margin-bottom: 0; }
    }
}

.fd-catalog {
    --fd-ink: var(--text-color, #191919);
    --fd-glass: rgb(15 30 60 / .05);
    --fd-border: rgb(15 30 60 / .12);
    min-inline-size: 0;        /* grid-elem a `main`-ben: szűkülhessen a nézethez (l. MOBILE_LAYOUT.md) */
    max-width: 1280px;
    margin-inline: auto;
    padding-block: 2.5rem 2.75rem;
    padding-inline: 1.25rem;

    .fd-catalog__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;
        margin-block-end: 1.75rem;

        @media (min-width: 780px) {
            flex-direction: row;
            gap: 2.5rem;
            text-align: start;
        }
    }

    .fd-catalog__intro {
        @media (min-width: 780px) {
            flex: 1 1 auto;
        }
    }

    .fd-catalog__media {
        flex-shrink: 0;
        width: 100%;
        max-width: 480px;

        & img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 16px;
            box-shadow: 0 12px 32px rgb(15 30 60 / .14);
        }

        @media (min-width: 780px) {
            width: 480px;
        }
        /* mobilon a kép a vizuális horog: ELŐRE kerül, kompakt 16:9 vágással,
           a hosszú lead nem tolja le a hajtás alá */
        @media (max-width: 779.98px) {
            order: -1;

            & img { aspect-ratio: 16 / 9; object-fit: cover; }
        }
    }

    .fd-catalog__title {
        margin: 0 0 .5rem;
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--fd-ink);
    }

    .fd-catalog__lead {
        margin: 0;
        font-size: .95rem;
        color: rgb(15 30 60 / .6);
    }

    /* Trustindex kis értékelés-widget a hero-szöveg alatt (a B-termékoldal mintája) */
    .fd-catalog__rating {
        display: flex;
        align-items: center;
        min-block-size: 32px;
        max-inline-size: 100%;
        overflow-x: clip;
        margin-block-start: 1rem;

        @media (max-width: 779.98px) {
            justify-content: center;   /* mobilon a fejléc középre rendezett */
        }
    }

    .fd-catalog__filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem;
        margin-block-end: 1.5rem;

        & select {
            appearance: none;
            padding: .5rem 2rem .5rem .9rem;
            border: 1px solid var(--fd-border);
            border-radius: 999px;
            background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230f1e3c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center / 10px;
            font: inherit;
            font-size: .85rem;
            font-weight: 600;
            color: var(--fd-ink);
            cursor: pointer;
            transition: border-color .15s, background-color .15s;

            &:hover { border-color: rgb(15 30 60 / .3); }
        }

        & select:has(option:checked:not([value=""])) {
            border-color: var(--fd-accent);
            background-color: rgb(183 57 71 / .06);
            color: var(--fd-accent);
        }
    }

    .fd-catalog__reset {
        display: none;
        padding: .5rem .9rem;
        border: none;
        border-radius: 999px;
        background: transparent;
        font: inherit;
        font-size: .82rem;
        font-weight: 600;
        color: var(--fd-accent);
        cursor: pointer;

        &:hover { background: rgb(183 57 71 / .07); }
    }

    .fd-catalog__filters--active .fd-catalog__reset { display: inline-flex; }

    /* ~2 card rows visible; anything beyond scrolls */
    .fd-catalog__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
        max-block-size: 590px;
        overflow-y: auto;
        padding-inline-end: .35rem;
        scrollbar-width: thin;
        scrollbar-color: rgb(15 30 60 / .25) transparent;

        &::-webkit-scrollbar { width: 5px; }
        &::-webkit-scrollbar-thumb { background: rgb(15 30 60 / .25); border-radius: 3px; }
    }

    .fd-catalog__empty {
        margin: 2rem 0 0;
        text-align: center;
        font-size: .92rem;
        color: rgb(15 30 60 / .55);
    }
}

/* Filtered out by JS via the hidden attribute — must beat the display:flex below,
   the UA's [hidden] rule alone loses to any author display declaration */
.fd-catalog .fd-tpl-card[hidden] { display: none; }

/* Card — (0,2,0) beats the global button element styles */
.fd-catalog .fd-tpl-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--fd-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: white;
    color: var(--fd-ink);
    padding: 0;
    font-family: inherit;
    text-align: start;
    transition: transform .2s ease, border-color .2s, box-shadow .2s;

    .fd-tpl-card__media {
        position: relative;
        display: block;
        overflow: hidden;
    }

    .fd-tpl-card__media img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }

    .fd-tpl-card__media-empty {
        display: grid;
        place-items: center;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: var(--fd-glass);
        color: rgb(15 30 60 / .35);
    }

    .fd-tpl-card__media-empty .material-symbols-outlined { font-size: 2.4rem; }

    .fd-tpl-card__cruise {
        position: absolute;
        inset-block-start: .5rem;
        inset-inline-start: .5rem;
        padding: .15rem .5rem;
        border-radius: 999px;
        font-size: .68rem;
        font-weight: 700;
        color: white;
        background: rgb(15 30 60 / .82);
        backdrop-filter: blur(4px);
    }

    .fd-tpl-card__body {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        padding: .55rem .65rem .65rem;
    }

    .fd-tpl-card__name {
        font-size: .9rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .fd-tpl-card__subtitle {
        font-size: .76rem;
        color: rgb(15 30 60 / .6);
        line-height: 1.3;
    }

    .fd-tpl-card__chips {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        margin-block-start: .1rem;
    }

    .fd-tpl-card__chip {
        padding: .1rem .45rem;
        border-radius: 6px;
        font-size: .68rem;
        font-weight: 600;
    }

    .fd-tpl-card__chip--region {
        background: var(--fd-glass);
        color: rgb(15 30 60 / .7);
    }

    .fd-tpl-card__chip--tier {
        background: rgb(183 57 71 / .1);
        color: var(--fd-accent);
        text-transform: capitalize;
    }

    .fd-tpl-card__facts {
        display: flex;
        flex-wrap: wrap;
        gap: .15rem .7rem;
        font-size: .72rem;
        color: rgb(15 30 60 / .65);
    }

    .fd-tpl-card__fact {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
    }

    .fd-tpl-card__fact .material-symbols-outlined {
        font-size: .95rem;
        color: var(--fd-accent);
        opacity: .85;
    }

    .fd-tpl-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        margin-block-start: .1rem;
    }

    .fd-tpl-card__tag {
        padding: .08rem .4rem;
        border-radius: 5px;
        font-size: .66rem;
        background: rgb(15 30 60 / .05);
        color: rgb(15 30 60 / .6);
    }

    &:hover {
        transform: translateY(-3px);
        border-color: rgb(183 57 71 / .55);
        box-shadow: 0 8px 24px rgb(15 30 60 / .2);
    }

    &:hover .fd-tpl-card__media img { transform: scale(1.05); }
}

.fd-catalog .fd-tpl-card--loading { pointer-events: none; opacity: .55; }
.fd-catalog .fd-tpl-card--loading .fd-tpl-card__media img,
.fd-catalog .fd-tpl-card--loading .fd-tpl-card__media-empty {
    animation: fd-pulse .85s ease-in-out infinite alternate;
}

@keyframes fd-pulse {
    from { opacity: 1; }
    to   { opacity: .6; }
}

/* ═══════════════════════════════════════════════════════
   Benefits — "Miért így vegyem?" below the map app
   ═══════════════════════════════════════════════════════ */
.fd-benefits {
    --fd-benefit-navy: #16306b;
    padding-block: 3rem 3.5rem;
    padding-inline: 1.25rem;
    background: rgb(15 30 60 / .04);

    .fd-benefits__title {
        margin: 0 0 2rem;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--fd-benefit-navy);
    }

    .fd-benefits__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 1.25rem;
        max-width: 1100px;
        margin-inline: auto;
    }

    .fd-benefits__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .65rem;
        padding: 1.75rem 1.25rem;
        background: white;
        border: 1px solid rgb(15 30 60 / .08);
        border-radius: 16px;
        box-shadow: 0 4px 18px rgb(15 30 60 / .06);
    }

    .fd-benefits__icon {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgb(22 48 107 / .08);
        color: var(--fd-benefit-navy);
    }

    .fd-benefits__icon .material-symbols-outlined { font-size: 1.6rem; }

    .fd-benefits__card-title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--fd-benefit-navy);
    }

    .fd-benefits__card-text {
        margin: 0;
        font-size: .85rem;
        line-height: 1.5;
        color: rgb(15 30 60 / .6);
    }
}

/* ═══════════════════════════════════════════════════════
   Mobil (≤900 px) — felhúzható alsó lap (bottom sheet)
   ═══════════════════════════════════════════════════════
   A tervező itt app-nézet: a hero EGY kijelző magas, a térkép kitölti, a panel
   pedig a hero aljához ragadó lap, amit a fogantyúval három állás közt húzhatsz
   (42 / 66 / 94 %). Így a térkép mindig látszik, és a panelnek DEFINITÍV magassága
   van — csak ezért lehet benne belső görgetés (`.fd-stops-list`).
   Amit itt tilos elrontani (l. MOBILE_LAYOUT.md 9/b):
   • a magasság `svh`, nem `dvh` — a `dvh` a virtuális billentyűzettel zsugorodna,
     és gépelés közben átméretezné a lapot;
   • fókuszt mobilon nem adunk magunktól (a keyboard elrántja a lapot). */
@media (max-width: 900px) {
    /* A tervező egy kijelző-magas app-nézet: felül a térkép, alul a felhúzható lap.
       `svh`, nem `dvh`: a virtuális billentyűzet ne méretezze át gépelés közben. */
    .fd-hero {
        height: 100svh;
        min-height: 0;
    }

    .fd-overlay {
        --fd-pad: 1rem;

        inset: auto 0 0;
        width: auto;
        block-size: var(--fd-sheet-h, 66%);
        max-block-size: 100%;
        border: none;
        border-block-start: 1px solid var(--fd-border);
        border-radius: 20px 20px 0 0;
        background: #fff;
        backdrop-filter: none;
        box-shadow: 0 -12px 34px rgb(15 30 60 / .16);
        transition: block-size .28s cubic-bezier(.32, .72, 0, 1);

        /* húzás közben a magasságot a JS írja képkockánként — átmenet itt akadás lenne */
        &.is-dragging { transition: none; }
    }

    /* Kereső-fókusz: a lap a NÉZETHEZ kötődik, nem a heróhoz. A tervező a dokumentum
       közepén ül, ezért a billentyűzet elől a böngésző a dokumentumot görgetné, a Places
       találati lista megjelenése pedig újra-horgonyzást kér — együtt ez rántja el az
       inputot. Fixen a `--fd-kb` (billentyűzet-takarás, JS írja) fölé ültetjük. */
    .fd-overlay.is-kb {
        position: fixed;
        inset: auto 0 var(--fd-kb, 0px);
        block-size: min(var(--fd-sheet-h, 94%), calc(100svh - var(--fd-kb, 0px)));
        transition: none;
    }

    /* Fogantyú: a lap felhúzása/leengedése. `touch-action: none`, hogy a húzás ne
       görgetés legyen; koppintásra teljes nézet ↔ legkisebb állás (l. wireSheetDrag). */
    .fd-grip {
        display: block;
        position: relative;
        inline-size: 100%;
        block-size: 26px;
        flex-shrink: 0;
        padding: 0;
        border: none;
        background: none;
        touch-action: none;
        cursor: grab;

        &::before {
            content: "";
            position: absolute;
            inset-block-start: 11px;
            inset-inline-start: 50%;
            translate: -50% 0;
            inline-size: 44px;
            block-size: 4px;
            border-radius: 99px;
            background: rgb(15 30 60 / .22);
        }
    }

    /* A brand-sor (benne a lap H1-e) helyét a route-cím veszi át — a H1 marad a
       dokumentumban, csak nem foglal helyet. NEM `display: none`. */
    .fd-brand-header {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .fd-sheet-head { padding-block-start: 0; gap: .6rem; }
    .fd-sheet-foot { padding-block-end: calc(var(--fd-pad) + env(safe-area-inset-bottom)); }

    /* Km/menetidő mobilon a route-fejlécbe kerül (a lap alján csak a CTA van).
       Az ajánlat-nézetben nincs route-fejléc, ott marad az összegző. */
    .fd-fact--drive { display: inline; }
    .fd-overlay:not(.fd-overlay--offer) .fd-route-summary.is-visible { display: none; }

    /* A sor vezérlői csak nyitva — alapból az éjszaka-pill látszik */
    .fd-stop__pill { display: inline-flex; }
    .fd-stop__tools { display: none; }
    .fd-stop.is-open .fd-stop__tools { display: flex; }

    /* Ujjal célozható vezérlők */
    .fd-night-btn { width: 30px; height: 30px; font-size: 1rem; }
    .fd-icon-btn  { width: 30px; height: 30px; font-size: .8rem; }
    .fd-night-count { min-width: 3rem; }

    .fd-contact-form { grid-template-columns: 1fr; }
    .fd-contact-form .fd-label--wide { grid-column: auto; }

    .fd-hero--offer {
        height: auto;
        min-height: 0;
        padding-block-start: 42svh;
        margin-inline: -1rem;
        width: auto;
    }
    .fd-hero--offer .fd-map {
        inset: 0 0 auto;
        block-size: 42svh;
    }
    .fd-hero--offer .fd-overlay--offer {
        position: static;
        block-size: auto;
        max-block-size: none;
        overflow: visible;
        margin-block-start: -22px;
        transition: none;
    }
    .fd-hero--offer .fd-overlay--offer .fd-grip { display: none; }
    .fd-hero--offer .fd-overlay__header--offer { padding-block-start: 1.6rem; }
    .fd-hero--offer .fd-offer-stops {
        overflow: visible;
        max-block-size: none;
    }
}

@media (max-width: 520px) {
    .fd-trip-meta { grid-template-columns: 1fr 1fr; }
    .fd-contact-card { padding: 1.5rem 1.1rem; border-radius: 16px; }
}

/* ── One-page útvonal-böngésző: vízszintesen görgethető, nagy kártyák ─────────
   Szűrő: régió-chipek + hajós checkbox; kártya-alap: megosztott .cat-card (_card.css) + kattintható
   kontinens-chipek. A kártya médiája swipe-galéria: térkép + úti képek. */

/* Kontinens-választó: kattintható chipek (kevés van, nem dropdown) */
.fd-region-tabs {
    display: flex;
    flex-wrap: wrap;       /* mobilon is az ÖSSZES chip látszik, sortörve */
    gap: .45rem;
    margin: .8rem 0 1rem;
}
.fd-region-tab {
    font: inherit; font-size: .9rem; font-weight: 700;
    padding: .5rem 1.05rem; border-radius: 99px;
    border: 1px solid var(--fd-border); background: #fff; color: #3a4456;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.fd-region-tab:hover { border-color: #952634; color: #952634; }
.fd-region-tab.is-active {
    background: #952634; color: #fff; border-color: #952634;
    box-shadow: 0 4px 16px rgb(149 38 52 / .45);
}
.fd-region-tab.is-disabled { opacity: .38; pointer-events: none; }
/* „kontinens összes" chipek: csoportkezdő, hangsúlyosabb */
.fd-region-tab--all { border-color: rgb(149 38 52 / .45); color: #952634; }
/* aktív szűrésnél a többi chip háttérbe lép — messziről látszik, mi van kiválasztva */
.fd-region-tabs.has-active .fd-region-tab:not(.is-active):not(:hover) { opacity: .55; }

/* Hajós checkbox + szűrő-törlés sor */
.fd-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    margin: 0 0 1.1rem;
}
.fd-cruise-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 600;
    color: #3a4456;
    cursor: pointer;
    user-select: none;
}
.fd-cruise-check input { position: absolute; opacity: 0; pointer-events: none; }
.fd-cruise-check__box {
    inline-size: 22px;
    block-size: 22px;
    border-radius: 7px;
    border: 2px solid rgb(15 30 60 / .28);
    background: #fff;
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}
.fd-cruise-check__box::after {
    content: "";
    inline-size: 10px;
    block-size: 5px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg) translate(0, -1px);
    opacity: 0;
    transition: opacity .12s;
}
.fd-cruise-check:hover .fd-cruise-check__box { border-color: #952634; }
.fd-cruise-check input:checked + .fd-cruise-check__box { background: #952634; border-color: #952634; }
.fd-cruise-check input:checked + .fd-cruise-check__box::after { opacity: 1; }
.fd-cruise-check input:focus-visible + .fd-cruise-check__box { outline: 2px solid #952634; outline-offset: 2px; }
.fd-cruise-check.is-disabled { opacity: .4; pointer-events: none; }

/* Találat-sáv: elkülönülő panel a kártyasor felett — szűréskor piros árnyalatra vált */
.fd-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 0 0 1.1rem;
    padding: .65rem 1.1rem;
    border-radius: 12px;
    background: rgb(15 30 60 / .04);
    border: 1px solid rgb(15 30 60 / .08);
    transition: background .2s, border-color .2s;
}
.fd-result.is-filtered {
    background: rgb(149 38 52 / .07);
    border-color: rgb(149 38 52 / .3);
}
.fd-result__text {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #3a4456;
}
.fd-result__text b {
    display: inline-block;
    color: #952634;
    font-size: 1.45em;
    font-weight: 800;
    line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .fd-result__text.is-bump b { animation: fd-count-pop .4s ease; }
}
@keyframes fd-count-pop { 40% { transform: scale(1.4); } }

/* Szűrő-törlés: feltűnő, piros keretes gomb a találat-sávban */
.fd-filter-reset[hidden] { display: none; }   /* az explicit display felülütné a hidden attribútumot */
.fd-filter-reset {
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    border: 2px solid #952634;
    border-radius: 99px;
    background: #fff;
    color: #952634;
    padding: .45rem 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .15s, color .15s;
}
.fd-filter-reset::before { content: "✕"; font-weight: 800; }
.fd-filter-reset:hover { background: #952634; color: #fff; }

/* A nyilak és a görgetés-jelző hivatkozási doboza. Szélesség-védelem nem kell rá: a polc
   `container-type`-ja miatt a tartalom nem tudja kinyitni (l. MOBILE_LAYOUT.md 7. pont). */
.fd-route-wrap { position: relative; }

/* Nagy lapozó nyilak — a teljes útvonal-sor görgetése (csak gépen, touch-on swipe van) */
.fd-route-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 8;
    inline-size: 58px; block-size: 58px; border-radius: 99px;
    border: 2px solid #952634; background: #fff; cursor: pointer;
    display: none; place-items: center;
    box-shadow: 0 8px 26px rgb(15 30 60 / .35);
    transition: transform .15s, background .15s, opacity .2s;
}
.fd-route-arrow:hover { transform: translateY(-50%) scale(1.06); background: #952634; }
.fd-route-arrow::before {
    content: ""; inline-size: 15px; block-size: 15px;
    border-right: 3px solid #952634; border-bottom: 3px solid #952634;
    transition: border-color .15s;
}
.fd-route-arrow:hover::before { border-color: #fff; }
.fd-route-arrow.is-end { opacity: 0; pointer-events: none; }   /* a lista végén eltűnik */
.fd-route-arrow--prev { left: -12px; }
.fd-route-arrow--prev::before { transform: rotate(135deg); margin-left: 4px; }
.fd-route-arrow--next { right: -12px; }
.fd-route-arrow--next::before { transform: rotate(-45deg); margin-right: 4px; }
@media (hover: hover) and (min-width: 780px) { .fd-route-arrow { display: grid; } }

/* A polc maga: vízszintesen görgethető sáv — tisztán CSS, a görgetést/pattanást a böngésző adja.
   A JS csak a nyilakat kötözi (scrollBy), méretet SOSE számol. */
.fd-route-row {
    /* Ez a mértékegység-forrás: innentől 100cqi = a polcban TÉNYLEGESEN elérhető szélesség
       (a lap paddingjai már le vannak vonva). Egyben meg is védi a lapot: a sáv szélessége
       a tartalmától független, tehát nem tudja szétfeszíteni a `main` grid-sávját. */
    container-type: inline-size;

    --fd-rail: .2rem;              /* a sor belső oldalpaddingja — EGY helyen definiálva */
    --fd-peek: 3rem;               /* ennyi kandikáljon ki a következő kártyából */

    position: relative;
    display: flex;
    align-items: stretch;          /* zárt polcon egyforma magas kártyák */
    gap: 1.1rem;
    padding: .4rem var(--fd-rail) 1.4rem;
    margin-inline: calc(-1 * var(--fd-rail));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--fd-rail);   /* a snap-pont a kártya éle, nem a sor pereme */
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
}
/* nyitott kártya mellett a szomszédok maradjanak a saját magasságukon */
.fd-route-row:has(.fd-rcard.is-open) { align-items: flex-start; }

/* A kártya a POLC tényleges szélességéhez méretezi magát, nem a nézethez: a lap paddingjait
   már a konténer levonta, tehát nincs mit kézzel összeadni, és a desktop görgetősávja sem
   torzít (amit a 100vw beleszámolna). Tableten/desktopon a nyíl-sávos 2-es osztás visz. */
.fd-rcard {
    flex: 0 0 min(100cqi - var(--fd-peek), 400px);
    scroll-snap-align: start;
    scroll-snap-stop: always;      /* gyors pöccintés ne ugorjon át kártyákat */
}
.fd-rcard.is-open { flex-basis: 100%; }   /* kinagyítva a teljes polc-szélesség */

@media (hover: hover) {
    /* zárt kártya egészében kattintható (nyitás) — a pointer jelezze is */
    .fd-rcard:not(.is-open) { cursor: pointer; }
}

/* ── Görgetés-jelző a polc alatt ──────────────────────────────────────────────
   Scroll-driven animáció, JS nélkül. A csúszka POZÍCIÓJA egzakt: 0-tól a szabad hely
   100%-áig fut. A `--fd-thumb` csak a HOSSZÁT adja — tisztán esztétika, nem mérés.
   Nincs túlnyúlás → a timeline inaktív → az animáció nem érvényesül → tele csík
   („nincs hova görgetni"). Nincs böngésző-támogatás → a jelző el van rejtve: tele csík
   ilyenkor azt hazudná, hogy nincs hova görgetni (l. MOBILE_LAYOUT.md 3. pont). */
.fd-route-progress { display: none; }

@supports (animation-timeline: scroll()) {
    .fd-route-wrap { timeline-scope: --fd-shelf; }
    .fd-route-row  { scroll-timeline: --fd-shelf x; }

    .fd-route-progress {
        --fd-thumb: .34;
        display: block;
        inline-size: min(220px, 55%);
        block-size: 4px;
        margin: -.5rem auto .6rem;
        border-radius: 99px;
        background: rgb(15 30 60 / .12);
        overflow: hidden;
    }
    .fd-route-progress i {
        display: block;
        inline-size: 100%;            /* ALAP: tele — nincs mit görgetni */
        block-size: 100%;
        border-radius: inherit;
        background: #952634;
        animation: fd-shelf-thumb linear;
        animation-timeline: --fd-shelf;
    }
    @keyframes fd-shelf-thumb {
        from { inline-size: calc(var(--fd-thumb) * 100%); translate: 0; }
        to   { inline-size: calc(var(--fd-thumb) * 100%);
               translate: calc((1 - var(--fd-thumb)) / var(--fd-thumb) * 100%); }
    }
}
/* nyitott kártyán a polc egyetlen kártyányi — a jelző ilyenkor félrevezető lenne */
.fd-route-wrap:has(.fd-rcard.is-open) .fd-route-progress { visibility: hidden; }
/* nyitott kártya mellett a sor-nyilak feleslegesek, és bele is lógnának;
   a felszabaduló nyíl-sávot pedig a kinagyított kártya kapja meg */
.fd-route-wrap:has(.fd-rcard.is-open) .fd-route-arrow { display: none; }
@media (min-width: 780px) {
    .fd-route-wrap:has(.fd-rcard.is-open) { padding-inline: 0; }
}

.fd-rcard {
    position: relative;
    contain: layout paint;   /* görgetésnél ne kelljen a szomszéd kártyákat újrafesteni */
    min-inline-size: 0;      /* a flex automatikus min-mérete (kép, hosszú szó) ne feszítse szét */

    /* Bezáró ✕ a jobb felső sarokban — csak kinagyítva látszik (oda is keresik) */
    .fd-rcard__close {
        position: absolute; top: .7rem; right: .7rem; z-index: 5;
        inline-size: 44px; block-size: 44px; border-radius: 99px;
        border: 2px solid #952634;
        background: #fff; cursor: pointer;
        display: none; place-items: center;
        box-shadow: 0 6px 20px rgb(15 30 60 / .3);
        transition: background .15s, transform .15s;
    }
    .fd-rcard__close:hover { background: #952634; transform: scale(1.06); }
    .fd-rcard__close::before, .fd-rcard__close::after {
        content: ""; position: absolute;
        inline-size: 18px; block-size: 2.5px; border-radius: 2px; background: #952634;
        transition: background .15s;
    }
    .fd-rcard__close:hover::before, .fd-rcard__close:hover::after { background: #fff; }
    .fd-rcard__close::before { transform: rotate(45deg); }
    .fd-rcard__close::after { transform: rotate(-45deg); }
    &.is-open .fd-rcard__close { display: grid; }

    /* ── média = swipe-galéria (térkép + úti képek) ── */
    .fd-rcard__media {
        position: relative;
        aspect-ratio: 1340 / 920;    /* PONTOSAN a fekvő térkép-PNG-k aránya — hézagmentes kitöltés */
        flex-shrink: 0;              /* a body szövege NE nyomhassa össze */
        min-block-size: 0;           /* flex min-height:auto NE nyújtsa a galéria legmagasabb fotójához —
                                        e nélkül kártyánként más-más a képmező magassága! */
        overflow: hidden;
        background: #eef1f5;
        border-bottom: 1px solid var(--fd-border);
    }
    .fd-rcard__track {
        display: flex;
        block-size: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }
    }
    .fd-rcard__slide {
        position: relative;
        flex: 0 0 100%;
        block-size: 100%;
        scroll-snap-align: center;
    }
    .fd-rcard__slide img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
    .fd-rcard__slide--map { background: #eef1f5; }   /* PONT a térkép-PNG-k háttérszíne — a contain-sávok így láthatatlanok */
    .fd-rcard__slide--map img { object-fit: cover; }   /* a doboz aránya = a PNG aránya, így crop nincs — de sáv sem maradhat */
    .fd-rcard__slide-cap {
        position: absolute; left: .5rem; bottom: .5rem;
        background: rgb(0 0 0 / .55); color: #fff;
        font-size: .72rem; font-weight: 600;
        padding: .18rem .5rem; border-radius: 7px;
    }

    .fd-rcard__cruise {
        position: absolute; left: .6rem; top: .6rem; z-index: 2;
        background: rgb(149 38 52 / .92); color: #fff;
        font-size: .72rem; font-weight: 700;
        padding: .22rem .55rem; border-radius: 99px;
        backdrop-filter: blur(2px);
    }
    .fd-rcard__dots {
        position: absolute; inset-inline: 0; bottom: .55rem; z-index: 2;
        display: flex; justify-content: center; gap: .3rem; pointer-events: none;
    }
    .fd-rcard__dot {
        inline-size: 6px; block-size: 6px; border-radius: 99px;
        background: rgb(255 255 255 / .6); box-shadow: 0 0 2px rgb(0 0 0 / .45);
        transition: inline-size .2s, background .2s;
    }
    .fd-rcard__dot.is-active { background: #fff; inline-size: 16px; }

    /* Lapozó nyilak (gépre — touch-on a swipe elég); CSS-chevron, nem SVG */
    .fd-rcard__nav {
        position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
        inline-size: 34px; block-size: 34px; border-radius: 99px;
        border: 1px solid rgb(15 30 60 / .12);
        background: rgb(255 255 255 / .92); cursor: pointer;
        display: grid; place-items: center;
        box-shadow: 0 2px 8px rgb(0 0 0 / .18);
        opacity: 0; transition: opacity .15s, background .15s;
    }
    .fd-rcard__nav::before {
        content: ""; inline-size: 8px; block-size: 8px;
        border-right: 2px solid #1f2733; border-bottom: 2px solid #1f2733;
    }
    .fd-rcard__nav--prev { left: .5rem; }
    .fd-rcard__nav--prev::before { transform: rotate(135deg); margin-left: 3px; }
    .fd-rcard__nav--next { right: .5rem; }
    .fd-rcard__nav--next::before { transform: rotate(-45deg); margin-right: 3px; }
    .fd-rcard__nav:hover { background: #fff; }

    .fd-rcard__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.05rem 1.1rem; flex: 1; }
    .fd-rcard__name { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
    .fd-rcard__meta { margin: 0; color: #5b6472; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
    .fd-rcard__sep { color: #c2cad6; }
    .fd-rcard__sub { margin: 0; color: #5b6472; font-size: .9rem; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .fd-rcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: auto; padding-top: .5rem; }
    .fd-rcard__btn {
        font: inherit; font-size: .92rem; font-weight: 700; text-align: center;
        border-radius: 11px; padding: .65rem .5rem; cursor: pointer;
        border: 1px solid transparent; transition: filter .15s, background .15s;
    }
    .fd-rcard__btn--ghost { background: #fff; color: #952634; border-color: var(--fd-border); }
    .fd-rcard__btn--ghost:hover { background: rgb(183 57 71 / .07); }
    .fd-rcard__btn--solid { background: #952634; color: #fff; }
    .fd-rcard__btn--solid:hover { filter: brightness(1.08); }
    .fd-rcard__btn--loading { opacity: .6; pointer-events: none; }

    .fd-rcard__detail {
        display: grid;
        grid-template-rows: 0fr;
    }
    @media (prefers-reduced-motion: no-preference) {
        .fd-rcard__detail { transition: grid-template-rows .3s ease; }
    }
    .fd-rcard__detail-inner { overflow: hidden; min-height: 0; }
    &.is-open .fd-rcard__detail { grid-template-rows: 1fr; margin-top: .3rem; }
    &.is-open .fd-rcard__detail-inner { border-top: 1px solid var(--fd-border); padding-top: .85rem; }
    .fd-rcard__descr { font-size: .9rem; line-height: 1.65; color: #36404e; margin: 0 0 .8rem; }
    .fd-rcard__stops { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
    .fd-rcard__stops li { display: flex; justify-content: space-between; font-size: .85rem; padding: .34rem .1rem; border-bottom: 1px dashed rgb(15 30 60 / .1); }
    .fd-rcard__stops b { color: #952634; font-weight: 700; }
}

.fd-rcard--form {
    &:hover, &:focus-within { transform: none; }

    .fd-rcard__actions--single { grid-template-columns: 1fr; }
    .fd-rcard__name { font-size: 1.4rem; }
    .fd-rcard__sub { -webkit-line-clamp: unset; overflow: visible; font-size: 1rem; line-height: 1.55; }

    .fd-rcard__media { background: #fff; }
    .fd-rcard__slide img { object-fit: contain; }

    &.is-open .fd-rcard__actions { display: none; }

    .fd-formcard__form { display: flex; flex-direction: column; gap: .55rem; }
    .fd-formcard__input {
        font: inherit; font-size: .9rem;
        inline-size: 100%; padding: .6rem .7rem;
        border: 1px solid var(--fd-border); border-radius: 11px;
        background: #fff; color: #1f2733;
        transition: border-color .15s, box-shadow .15s;
    }
    .fd-formcard__input::placeholder { color: #9aa3b0; }
    .fd-formcard__input:focus-visible {
        outline: none; border-color: #952634;
        box-shadow: 0 0 0 3px rgb(183 57 71 / .14);
    }
    .fd-formcard__note { resize: vertical; min-block-size: 2.6rem; }
    .fd-formcard__consent { margin: .1rem 0 0; font-size: .72rem; line-height: 1.45; color: #7a828f; }
    .fd-formcard__consent a { color: #952634; text-decoration: underline; }
    .fd-formcard__submit {
        font: inherit; font-size: .95rem; font-weight: 700;
        margin-top: .1rem; padding: .7rem .9rem;
        border: 1px solid transparent; border-radius: 11px;
        background: #952634; color: #fff; cursor: pointer;
        transition: filter .15s;
    }
    .fd-formcard__submit:hover { filter: brightness(1.08); }
    .fd-formcard__submit.is-loading { opacity: .6; pointer-events: none; }
    .cf-turnstile { min-block-size: 65px; }
}

.fd-formcard-top {
    margin: 0 0 1.1rem;

    .fd-rcard {
        block-size: auto;
        min-block-size: 0;
        border-inline-start: 4px solid var(--fd-accent);
    }
    .fd-rcard__media { display: none; }
    .fd-rcard__name { font-size: 1.2rem; }
    .fd-rcard__sub { font-size: .92rem; }

    @media (min-width: 780px) {
        max-inline-size: 760px;
        margin-inline: auto;

        .fd-rcard, .fd-rcard.is-open { block-size: auto; min-block-size: 0; flex-direction: column; }
    }
}

/* Tableten/desktopon FIX elosztás: mindig PONTOSAN 2 egész kártya, középre zárva.
   A wrap oldalt nyíl-sávot tart fenn, így a nyilak fizikailag sem érhetnek kártyához. */
@media (min-width: 780px) {
    .fd-route-row { --fd-cols: 2; }

    .fd-route-wrap {
        max-inline-size: 1240px;
        margin-inline: auto;
        padding-inline: 76px;     /* a nyilak sávja */
    }
    .fd-route-arrow--prev { left: 4px; }
    .fd-route-arrow--next { right: 4px; }
}

@media (min-width: 780px) {
    .fd-rcard {
        flex-basis: calc((100% - (var(--fd-cols) - 1) * 1.1rem) / var(--fd-cols));
        height: 620px;                      /* nagy, egységes — azonos a részletes nézettel */
    }

    /* Kinagyítás: teljes szélesség — térkép + képek balra, leírás jobbra.
       A magasság a tartalomhoz nő: minden elfér, NINCS belső görgetés. */
    .fd-rcard.is-open {
        flex-basis: 100%;
        height: auto;
        min-height: 620px;
        flex-direction: row;
        align-items: stretch;
    }
    .fd-rcard.is-open .fd-rcard__media {
        flex: 0 0 56%;
        aspect-ratio: auto;
        border-bottom: 0;
        border-right: 1px solid var(--fd-border);
    }
    .fd-route-row .fd-rcard--form.is-open .fd-rcard__media { flex: 0 0 34%; }
    /* nyitva a médiadoboz aránya tetszőleges — a cover itt csonkolná az útvonalat,
       contain + a PNG-vel egyező háttér: a teljes térkép látszik, sáv nem */
    .fd-rcard.is-open .fd-rcard__slide--map img { object-fit: contain; }
    .fd-rcard.is-open .fd-rcard__body { flex: 1; }
}

/* Nyilak: gépen láthatók (hoverre kiemelkednek), touch-eszközön nincsenek (swipe van) */
@media (hover: hover) {
    .fd-rcard__media:hover .fd-rcard__nav,
    .fd-rcard__nav:focus-visible { opacity: 1; }
    /* nyitott útvonalon a lapozó-nyilak mindig látszanak — hover nélkül is hívogatnak */
    .fd-rcard.is-open .fd-rcard__nav { opacity: .95; }
}
@media (hover: none) {
    .fd-rcard__nav { display: none; }
}

.dp-field.fd-meta-input {
    min-block-size: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: .9rem;

    & .dp-field__icon { display: none; }
}

/* ── Képnézegető — a /ajanlatok pp-gallery mechanizmusának portja ──────────── */
.pp-gallery { display: none; }

:root:has(#pp-gallery-toggle:checked) {
    overflow: hidden;

    .pp-gallery {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgb(8 12 20 / .93);

        .carousel-container {
            block-size: 100%;
            inline-size: 100%;
            padding: 0;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;
            scroll-behavior: smooth;
            scrollbar-width: none;
        }
        .carousel-container::-webkit-scrollbar { display: none; }

        .carousel {
            display: flex;
            inline-size: max-content;
            block-size: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .slide {
            flex: 0 0 100vw;
            inline-size: 100vw;
            scroll-snap-align: center;
            display: grid;
            place-items: center;
            block-size: 100%;
        }
        .slide img {
            max-inline-size: 92vw;
            max-block-size: 88vh;
            inline-size: auto;
            block-size: auto;
            object-fit: contain;
            border-radius: 8px;
            min-inline-size: 120px;
            min-block-size: 120px;
        }

        .carousel-btn { display: grid; }
    }
}

.carousel-btn {
    display: none;
    place-items: center;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 201;
    inline-size: max(72px, 9vw);
    padding: 0;
    border-radius: 0;
    isolation: isolate;
    font-size: 24px;
    color: white;
    user-select: none;
    cursor: pointer;
    transition: background-color .15s;

    &::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        z-index: -1;
        inline-size: 58px;
        block-size: 58px;
        border-radius: 50%;
        background: var(--pp-btn-bg);
        translate: -50% -50%;
        transition: background-color .15s, scale .15s;
    }

    &:hover { background: var(--pp-btn-zone); }
    &:hover::before { background: var(--pp-btn-bg-hover); scale: 1.1; }
}
.carousel-btn.previous { rotate: 180deg; }
.carousel-btn.next { inset-inline: auto 0; }

.pp-gallery__close {
    position: fixed;
    inset-block-start: 14px;
    inset-inline-end: 18px;
    z-index: 202;
    color: white;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 50%;
    background: rgb(255 255 255 / .12);
    cursor: pointer;
}
.pp-gallery__close:hover { background: rgb(255 255 255 / .25); }

.fd-how {
    --fd-how-navy: #16306b;
    --fd-how-red: #b73947;
    min-inline-size: 0;
    padding-block: 3rem 3.25rem;
    padding-inline: 1.25rem;
    background: rgb(15 30 60 / .04);

    .fd-how__head {
        max-width: 680px;
        margin-inline: auto;
        margin-block-end: 2.25rem;
        text-align: center;
    }

    .fd-how__eyebrow {
        display: block;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--fd-how-red);
    }

    .fd-how__title {
        margin: .4rem 0 .55rem;
        font-size: clamp(1.5rem, 3.2vw, 2rem);
        font-weight: 800;
        line-height: 1.2;
        color: var(--fd-how-navy);
    }

    .fd-how__lead {
        margin: 0;
        font-size: .95rem;
        line-height: 1.6;
        color: rgb(15 30 60 / .62);
    }

    .fd-how__steps {
        list-style: none;
        margin: 0;
        padding: 0;
        max-width: 1240px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem 1.25rem;
    }

    .fd-how__step {
        position: relative;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
        column-gap: .9rem;
    }

    .fd-how__step:not(:last-child)::before {
        content: "";
        position: absolute;
        inset-inline-start: 20px;
        inset-block: 48px -1.6rem;
        width: 2px;
        background: rgb(15 30 60 / .13);
    }

    .fd-how__marker {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid rgb(22 48 107 / .18);
        color: var(--fd-how-navy);
        font-weight: 800;
        font-size: 1.05rem;
        line-height: 1;
    }

    .fd-how__card {
        position: relative;
        background: #fff;
        border: 1px solid rgb(15 30 60 / .09);
        border-radius: 16px;
        padding: .9rem 1rem 1.05rem;
        box-shadow: 0 4px 18px rgb(15 30 60 / .06);
    }

    .fd-how__badge {
        display: none;
        position: absolute;
        inset-block-start: -.6rem;
        inset-inline-end: .9rem;
        padding: .12rem .6rem;
        border-radius: 999px;
        background: var(--fd-how-red);
        color: #fff;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        box-shadow: 0 4px 12px rgb(183 57 71 / .3);
    }

    .fd-how__step-title {
        margin: 0 0 .3rem;
        font-size: 1rem;
        font-weight: 800;
        color: var(--fd-how-navy);
    }

    .fd-how__step-text {
        margin: 0;
        font-size: .84rem;
        line-height: 1.55;
        color: rgb(15 30 60 / .62);
    }

    .fd-how__art {
        position: relative;
        height: 60px;
        margin-block-end: .8rem;
        border-radius: 11px;
        background: rgb(15 30 60 / .05);
        overflow: hidden;
    }

    .fd-how__route {
        position: absolute;
        inset-inline: 18px;
        inset-block-start: 50%;
        border-block-start: 2px dashed rgb(22 48 107 / .3);
    }

    .fd-how__pin {
        position: absolute;
        inset-block-start: 50%;
        width: 8px;
        height: 8px;
        margin-block-start: -6px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--fd-how-navy);
    }

    .fd-how__pin--a { inset-inline-start: 14px; }
    .fd-how__pin--b { inset-inline-start: calc(50% - 6px); border-color: var(--fd-how-red); }
    .fd-how__pin--c { inset-inline-end: 14px; }

    .fd-how__art--road .fd-how__route {
        border-block-start-style: solid;
        border-block-start-color: var(--fd-how-red);
    }

    .fd-how__art--road .fd-how__pin {
        border-color: var(--fd-how-red);
        background: var(--fd-how-red);
    }

    .fd-how__art--kit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .fd-how__chip {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid rgb(22 48 107 / .14);
        color: var(--fd-how-navy);
    }

    .fd-how__chip .material-symbols-outlined { font-size: 1rem; }

    .fd-how__art--offer {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-content: center;
        gap: 5px 10px;
        padding-inline: 14px;
    }

    .fd-how__thumb {
        grid-row: 1 / span 3;
        align-self: center;
        height: 34px;
        border-radius: 7px;
        background: linear-gradient(135deg, rgb(22 48 107 / .28), rgb(22 48 107 / .1));
    }

    .fd-how__line {
        height: 6px;
        border-radius: 4px;
        background: rgb(22 48 107 / .17);
    }

    .fd-how__line--short { width: 58%; }

    .fd-how__price {
        width: 46px;
        height: 8px;
        border-radius: 4px;
        background: var(--fd-how-red);
        opacity: .75;
    }

    .fd-how__art--pick {
        display: grid;
        align-content: center;
        gap: 9px;
        padding-inline: 14px;
    }

    .fd-how__row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .fd-how__row .fd-how__line { flex: 1 1 auto; }

    .fd-how__dot {
        flex: none;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid rgb(22 48 107 / .28);
    }

    .fd-how__row--on .fd-how__dot {
        border-color: var(--fd-how-red);
        background: radial-gradient(circle, var(--fd-how-red) 0 42%, #fff 43%);
    }

    .fd-how__row--on .fd-how__line { background: rgb(183 57 71 / .28); }

    .fd-how__addon {
        flex: none;
        padding: .05rem .45rem;
        border-radius: 999px;
        background: rgb(183 57 71 / .12);
        color: var(--fd-how-red);
        font-size: .56rem;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .fd-how__art--pay {
        display: grid;
        align-content: center;
        gap: 8px;
        padding-inline: 14px;
    }

    .fd-how__bar {
        display: block;
        height: 10px;
        border-radius: 999px;
        background: rgb(22 48 107 / .14);
        overflow: hidden;
    }

    .fd-how__bar-fill {
        display: block;
        height: 100%;
        width: 67%;
        border-radius: 999px;
        background: var(--fd-how-red);
    }

    .fd-how__paylabels {
        display: flex;
        justify-content: space-between;
        gap: .4rem;
        white-space: nowrap;
        font-size: .55rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgb(15 30 60 / .42);
    }

    .fd-how__step--now .fd-how__marker {
        background: var(--fd-how-red);
        border-color: var(--fd-how-red);
        color: #fff;
        box-shadow: 0 0 0 6px rgb(183 57 71 / .12);
    }

    .fd-how__step--now .fd-how__card {
        border-color: rgb(183 57 71 / .35);
        box-shadow: 0 10px 30px rgb(183 57 71 / .14);
    }

    .fd-how__step--now .fd-how__badge { display: block; }

    .fd-how__step--done .fd-how__marker {
        background: var(--fd-how-navy);
        border-color: var(--fd-how-navy);
        color: #fff;
    }

    .fd-how__step--done .fd-how__num { font-size: 0; }
    .fd-how__step--done .fd-how__num::after { content: "✓"; font-size: 1.05rem; }
    .fd-how__step--done .fd-how__card { opacity: .78; }
    .fd-how__step--done::before { background: rgb(22 48 107 / .3); }

    .fd-how__foot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        max-width: 1240px;
        margin: 1.9rem auto 0;
        font-size: .84rem;
        line-height: 1.5;
        color: rgb(15 30 60 / .55);
        text-align: center;
    }

    .fd-how__foot .material-symbols-outlined {
        font-size: 1.15rem;
        color: var(--fd-how-red);
    }

    @media (min-width: 720px) {
        .fd-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .fd-how__step:not(:last-child)::before { display: none; }
    }

    @media (min-width: 1000px) {
        .fd-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (min-width: 1280px) {
        .fd-how__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1360px; }

        .fd-how__step {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto 1fr;
            align-items: stretch;
            row-gap: .9rem;
        }

        .fd-how__step:not(:last-child)::before {
            display: block;
            inset-inline: 50px calc(-1.25rem - 2px);
            inset-block: 20px auto;
            width: auto;
            height: 2px;
        }
    }
}

/* Opcionális biztosítások az ár alatt — az utas maga pipálja */
.fd-offer-ins {
    text-align: start;
    margin-block-start: .55rem;
    padding-block-start: .45rem;
    border-block-start: 1px dashed var(--fd-border);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.fd-offer-ins__head {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
}
.fd-offer-ins__row {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .78rem;
    cursor: pointer;
}
.fd-offer-ins__row input[type="checkbox"] {
    margin: .15rem 0 0;
    accent-color: var(--fd-accent);
    flex: none;
}
.fd-offer-ins__name { display: flex; flex-direction: column; }
.fd-offer-ins__name small { font-size: .66rem; opacity: .55; }
.fd-offer-ins__price {
    margin-inline-start: auto;
    font-weight: 700;
    white-space: nowrap;
}

.pp-gallery .slide { position: relative; }

.pp-gallery .slide__caption {
    position: absolute;
    inset-block-end: 3vh;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: fit-content;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgb(8 12 20 / .7);
    color: white;
    font-size: .95rem;
    font-weight: 600;
}

:root:has(#pp-gallery-toggle:checked) .pp-gallery.is-single .carousel-btn { display: none; }