/* CASCO v8 eredmeny oldal stilusai + form-oldal layout-fix-ek
 * Hivatkozas: common_includes/casco_v8/templates/casco_results.tpl
 * #95898
 *
 * Design tokens: Figma "Netrisk - Casco" (TuueROoVgk59KH5saE2jWx)
 *
 * Mobilra: max-width:768px breakpoint, addons sidebar full-width-re vált.
 */

/* === Form-oldal layout-fix-ek (urlapkezeles_v8 widget-DOM-ra cimezve) === */
.info-block {
    align-items: baseline;
}

.section-block__body.collapse:not(.show) {
    display: none !important;
}

/* (1) Felhasznalas jellege csuszas: a select2 JS-ben kapott inline width
 * (width: 'element' opcio) 0-ra all be, ha a select rejtett section-ben
 * inicializalodik (Gepjarmu hasznalat section d-none amig nincs GJ_Gyartmany).
 * 100%-os szelesseggel felulirjuk - igy a tartalmara skalazodik. */
.section-block .select2.select2-container {
    width: 100% !important;
}

/* (2) Hosszu select-ertek (pl. "Alfa Vienna Insurance Group Biztosito Zrt.")
 * ne nyomja meg a flex cellat a content-size-aval, kulonben flex-wrap-pel
 * a parhuzamos `flex-basis-2` cella a kovetkezo sorba.
 * Az ellipsis a select2 megjelenitett ertekere is kell. */
.section-block__body > .input-container {
    min-width: 0;
}
.input-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* (3) has-tooltip eseten (`?` ikon a select mellett) a floating-label
 * szelessegebol is le kell vonni a tooltip 24px + gap 8px hely-et,
 * kulonben a hosszu label szoveg ratolakodik a select chevronra
 * (pl. "Igazolt CASCO karmentes eveinek szama?"). */
.input-container.has-tooltip .floating-label {
    width: calc(100% - 92px);
}

/* (4) "Szériában" badge — EUROTAX szeria-felszereltseg jeloles a felszereltseg
 * checkboxok mellett. A casco_v8_eurotax_szeria.js helyezi el a labelbe, amikor
 * az adott EUROTAX_SZERIA__* parameter erteke 1. Szurke (neutral), mert a
 * szeria nem informacio-statusz, csak megjegyzes. */
.cv8-szeria-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #ECECEC;
    color: #555;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
/* (#97080 / PDF11 7.) A szeria-badge-es felszereltseg checkboxok 2-oszlopos
 * nezetben (>=768px, flex-basis-2 ~50%) osszecsusztak: a label `display:flex;
 * flex-wrap:nowrap` miatt a cimke + badge egy sorban maradt es a szomszed
 * oszlopba lologott. A szeria-cellakra (EUROTAX_SZERIA*) engedjuk a tordelest
 * es a flex-zsugorodast (min-width:0), igy a badge szukseg eseten uj sorba kerul.
 * Csak casco (EUROTAX_SZERIA*) — a kozos check-container layout-ot nem bantja.
 *
 * KIEG (#97080 teszt-NOK, Kemendi K.): amikor a badge mar valoban uj sorba
 * tordel, a checkbox `::before` doboz az 1. sorban marad, de a pipa `::after`
 * (`position:absolute; top:auto`) statikus pozicioja a tordelt (2 soros) cimke
 * ALA esett -> a pipa kilogott a dobozbol. Javitas: a cimke `position:relative`,
 * a doboz + cimke felulre igazitva (align-items:flex-start), es a pipa a
 * cimkehez kotve, a doboz fole pozicionalva (top/left). Igy a doboz es a pipa
 * tobb soros cimkenel is egyutt marad. */
.input-container.check-container[class*="EUROTAX_SZERIA"] .input-container__item {
    min-width: 0;
    align-items: flex-start;
}
.input-container.check-container[class*="EUROTAX_SZERIA"] .input-container__item label {
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: 0;
    position: relative;
}
.input-container.check-container[class*="EUROTAX_SZERIA"] .input-container__item input[type='checkbox']:checked + label:after {
    top: -1px;
    left: 5px;
}

/* (5) Sub-szekcio cim-label felett vekony elvalaszto csik.
 * Hasznalat: adatbevitel_label stilus='separator' (mint Kgfb_2008 'elvalaszto1' minta).
 * A v8-ban nincs default separator stilus — itt definialjuk pl. a
 * Kulcsnyilatkozat sub-szekcio cimehez a Gepjarmu adatai szekcioban (#97080). */
.input-container.label-container.separator {
    border-top: 1px solid #EBEBEB;
    padding-top: 24px;
    margin-top: 8px;
}

/* === Eredmenyoldal stilusai === */

/* Figma design tokenek — :root scope, hogy minden cv8-* komponens hasznalja
   (a stepper/progress-bar a folyamat oldalakon is renderelodik, nem csak a
   results-wrapper-en belul). */
:root {
    --cv8-c-orange: #FF7900;       /* primary/Netrisk orange */
    --cv8-c-blood-orange: #E84700; /* primary/Blood orange (gomb bg) */
    --cv8-c-orange-soft: #FFB048;  /* primary/Orange (chip bg-base) */
    --cv8-c-blue: #6E6EE5;         /* primary/Crimson blue (Nagyon jó + 8.4) */
    --cv8-c-text: #2A282D;         /* grays/dark grey */
    --cv8-c-gray1: #B7B7B7;        /* grays/Gray 1 (muted) */
    --cv8-c-gray2: #DFDFDF;        /* grays/Gray 2 (logo border) */
    --cv8-c-gray3: #EEEEEE;        /* grays/Gray 3 (önrész bg) */
    --cv8-c-gray4: #F5F5F5;        /* grays/Gray 4 (inactive progress bg) */
    --cv8-c-green: #4CA853;        /* primary/Green (completed lépés) */
}

/* (#97080) A szulo `.wrapper` kontener (netrisk_hu_v4 design) a tartalmahoz
 * zsugoritja a gyereket (shrink-to-fit, align-items:center), ezert a
 * results-wrapper csukott kartyaknal keskenyebb volt, kinyitott reszleteknel
 * (szelesebb belso tartalom) pedig szelesebb — emiatt "ugralt" a kartya
 * szelessege a reszletek nyitasakor/zarasakor. Merve: csukva main=818px,
 * nyitva main=944px ugyanazon az ablakon. A width:100% definit szelesseget
 * ad (a max-width:1440 + margin:auto tovabbra is korlatoz es kozepre igazit),
 * igy a kartya-szelesseg a tartalomtol fuggetlenul allando. */
.cv8-results-wrapper {
    width: 100%;
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 16px 96px;
}

/* === Progress bar — Anima jsvE3 (1:5172) ===
 * 9 lepes: 1-3 completed (zöld + check chip), 4 active (Ajánlatok narancs hatter),
 * 5-9 inactive (számokkal, gray-4 bg).
 */
.cv8-progress-bar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 24px;
}
/* (#97080) Mobilon a "Casco biztosítás kalkulátor" h1 2 sorra tordel, es a
 * default h1 line-height-tal raloghat a stepperre. A h1-nek explicit
 * line-height + bottom margin. A stepper top-paddingjat lentebb a fo
 * mobile-stepper blockban allitjuk be (padding: 16px 16px 0). */
@media (max-width: 768px) {
    .container-fluid.text-center > h1 {
        margin-bottom: 16px;
        line-height: 1.15;
    }
}
.cv8-progress-list {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cv8-progress-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.cv8-progress-icon-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 76px;
}
/* Lines between steps */
.cv8-progress-line {
    flex: 1 1 0;
    height: 2px;
    background: var(--cv8-c-gray2);
    align-self: center;
}
.cv8-progress-step.is-completed .cv8-progress-line,
.cv8-progress-step.is-active .cv8-progress-line-left {
    background: var(--cv8-c-green);
}
.cv8-progress-step:first-child .cv8-progress-line-left,
.cv8-progress-step:last-child .cv8-progress-line-right {
    visibility: hidden;
}
/* Icon container */
.cv8-progress-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 12px;
    flex: 0 0 auto;
    position: relative;
    background: var(--cv8-c-gray4);
    border: 2px solid var(--cv8-c-gray2);
    box-sizing: border-box;
    min-width: 56px;
    min-height: 56px;
}
.cv8-progress-step.is-completed .cv8-progress-icon {
    background: rgba(76, 168, 83, 0.2);
    border: 0;
    padding: 10px;
}
.cv8-progress-step.is-active .cv8-progress-icon {
    background: rgba(255, 176, 72, 0.3);
    border: 0;
    padding: 10px;
}
.cv8-progress-icon img {
    width: 56px;
    height: 56px;
    display: block;
}
.cv8-progress-step.is-inactive .cv8-progress-icon {
    padding: 10px 18px;
    min-width: 0;
}
.cv8-progress-num {
    font-family: "Figtree", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--cv8-c-text);
    text-align: center;
    display: inline-block;
}
/* Chip (check badge) on completed steps */
.cv8-progress-chip {
    position: absolute;
    top: -14px;
    left: calc(50% + 21px);
    background: var(--cv8-c-green);
    border-radius: 24px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.cv8-progress-chip img {
    width: 16px;
    height: 16px;
    display: block;
}
/* Labels */
.cv8-progress-label {
    font-family: "Figtree", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 24px;
    height: 48px;
    padding: 12px 0;
    text-align: center;
    color: var(--cv8-c-text);
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cv8-progress-step.is-completed .cv8-progress-label {
    color: var(--cv8-c-green);
    font-weight: 700;
}
.cv8-progress-step.is-active .cv8-progress-label {
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-progress-step.is-inactive .cv8-progress-label {
    font-weight: 400;
    color: var(--cv8-c-text);
}

/* Klikkelheto (mar mogottunk levo) lepesek: pointer cursor + hover halvany feedback. */
.cv8-progress-step.is-clickable {
    cursor: pointer;
}
.cv8-progress-step.is-clickable:hover .cv8-progress-icon {
    filter: brightness(0.95);
    transform: translateY(-1px);
    transition: transform 0.12s ease, filter 0.12s ease;
}
.cv8-progress-step.is-clickable:hover .cv8-progress-label {
    text-decoration: underline;
}
.cv8-progress-step.is-clickable:focus-visible {
    outline: 2px solid var(--cv8-c-orange);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Mobil: vízszintesen scrollozható progress-bar; az aktív step középre auto-centerel JS-sel.
 * Lépések nem zsugorodnak — fix szélesség, hogy minden szöveg férjen. */
@media (max-width: 768px) {
    .cv8-progress-bar {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        /* 16px top padding: a fenti H1 ("Casco biztositas kalkulator") nem
         * lóg rá a stepper ikonokra, mert a wrapped 2-soros cim descender-jei
         * tul kozel jonnek. */
        padding: 16px 16px 0;
        /* iOS rugalmas görgetés + scrollbar elrejtése a tisztább megjelenéshez */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cv8-progress-bar::-webkit-scrollbar { display: none; }
    .cv8-progress-list {
        min-width: max-content;
        flex-wrap: nowrap;
    }
    .cv8-progress-step {
        flex: 0 0 110px;
        min-width: 110px;
        max-width: 110px;
    }
    .cv8-progress-label {
        white-space: normal;
        line-height: 18px;
        height: auto;
        min-height: 36px;
        padding: 8px 0;
        font-size: 13px;
    }
}

/* === Topbar (Filters) — Anima FVLVp/jsvE3 spec === */
/* Container: bg-white, padding-32, rounded-12, gap-16 */
.cv8-results-topbar {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    box-shadow: 0 12px 24px rgba(42, 40, 45, 0.08);
}

.cv8-topbar-meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

/* Anima: "Díjszámítási azonosító:" 14 regular + "K-..." 14 BOLD, line-height 24 */
.cv8-results-topbar .cv8-id {
    font-size: 14px;
    color: var(--cv8-c-text);
    font-weight: 400;
    line-height: 24px;
}
.cv8-results-topbar .cv8-id strong { color: var(--cv8-c-text); font-weight: 700; }

/* Anima: "Mentsd el ✈" 14px / 600 orange + 24px send-email icon AFTER */
.cv8-results-topbar .cv8-save-link {
    color: var(--cv8-c-orange);
    text-decoration: none;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    display: inline-flex; align-items: center; gap: 8px;
    /* (#97080) Mindig jobbra rogzitjuk, hogy a `cv8-id` hidden->visible
     * valtas ne ugrasson at balrol jobbra. */
    margin-left: auto;
}
.cv8-results-topbar .cv8-save-link::after {
    content: "";
    width: 24px; height: 24px;
    background: url("/common/images/casco/icons/icon-square-16x16-send-email.svg") no-repeat center / contain;
}
.cv8-results-topbar .cv8-save-link:hover { text-decoration: underline; }

/* Anima: buttons row — flex justify-between items-end */
.cv8-topbar-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* Anima: FIZETÉSI BEÁLLÍTÁSOK = bg-white, border 2px #E84700 (Blood orange), text 15/24 bold #E84700, p-8/24 rounded-8, gap-8.
 * Properties icon (24x24) BEFORE the text. */
.cv8-results-topbar .cv8-payment-btn {
    background: #fff;
    border: 2px solid var(--cv8-c-blood-orange);
    color: var(--cv8-c-blood-orange);
    padding: 8px 24px;
    border-radius: 8px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.02em;
    display: inline-flex; align-items: center; gap: 8px;
}
.cv8-results-topbar .cv8-payment-btn::before {
    content: "";
    width: 24px; height: 24px;
    background: url("/common/images/casco/icons/icon-soft-24x24-properties.svg") no-repeat center / contain;
    flex: 0 0 auto;
}

/* Anima: gap-32 between radio buttons, items-start. */
.cv8-casco-tipus {
    display: inline-flex;
    align-items: flex-start;
    gap: 32px;
}
.cv8-casco-tipus label {
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 16px;
    margin: 0;
    line-height: 24px;
    color: var(--cv8-c-text);
    position: relative;
    padding-left: 40px;
    font-weight: 400;
    font-size: 14px;
}
.cv8-casco-tipus input[type=radio] {
    position: absolute !important;
    opacity: 0 !important;
    width: 24px !important; height: 24px !important;
    margin: 0 !important;
    pointer-events: auto;
}
.cv8-casco-tipus label::before {
    content: "";
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    border: 2px solid var(--cv8-c-text);
    border-radius: 100px;
    background: #fff;
    box-sizing: border-box;
}
.cv8-casco-tipus label:has(input:checked) {
    font-weight: 700;
}
.cv8-casco-tipus label:has(input:checked)::before {
    border-color: var(--cv8-c-orange);
}
.cv8-casco-tipus label:has(input:checked)::after {
    content: "";
    position: absolute;
    left: 6px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px;
    background: var(--cv8-c-orange);
    border-radius: 6px;
}

.cv8-results-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 24px;
}

@media (max-width: 992px) {
    .cv8-results-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cv8-results-layout { padding-top: 16px; }
}

/* === Bal oldal: ajanlat-lista === */
.cv8-results-main { min-width: 0; }

.cv8-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
/* Anima jsvE3: "5 ajánlat" 18px bold + " a díjszámítás alapján" 18px regular, both #2A282D */
.cv8-results-header .cv8-count {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--cv8-c-text);
}
.cv8-results-header .cv8-count b {
    color: var(--cv8-c-text);
    font-weight: 700;
}
/* Anima jsvE3 button-5: bg-white, border-2 #E84700, padding 8/24, rounded-8, gap-8, button-smal 15 bold #E84700 */
.cv8-results-header .cv8-sort-btn {
    background: #fff;
    border: 2px solid var(--cv8-c-blood-orange);
    color: var(--cv8-c-blood-orange);
    padding: 8px 24px;
    border-radius: 8px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cv8-results-header .cv8-sort-btn::before {
    content: "";
    width: 24px; height: 24px;
    background: url("/common/images/casco/icons/icon-soft-24x24-switcher-up-down.svg") no-repeat center / contain;
    flex: 0 0 auto;
}

/* === Ajanlat kartya — Anima jsvE3 (.card + .offer + separator + .link-wrapper footer) ===
 * .card: külső burok 1px solid #B7B7B7 rounded-12 overflow-hidden
 * .cv8-offer-inner (=.offer): bg-white, top-rounded only, padding 24/24/12, gap-16
 * .cv8-card-separator: 1px line #DFDFDF
 * .cv8-card-footer (=.link-wrapper): bg-white, bottom-rounded, p-12/24/16, justify-end items-end "Részletek"
 */
.cv8-offer-card {
    background: transparent;
    border: 1px solid var(--cv8-c-gray2);
    border-radius: 12px;
    /* overflow: visible — hogy a chip tooltip-je ki tudjon lógni a kártyából.
     * A border-radius-t az alkomponensek (cv8-offer-inner top, footer bottom) hordozzák. */
    overflow: visible;
    margin-bottom: 16px;
    transition: box-shadow .2s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 24px rgba(42, 40, 45, 0.08);
}
.cv8-offer-card:hover { box-shadow: 0 16px 32px rgba(42, 40, 45, 0.12); }
.cv8-offer-inner {
    background: #fff;
    padding: 24px 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 12px 12px 0 0;
    min-height: 360px;
}
.cv8-card-separator {
    height: 1px;
    background: var(--cv8-c-gray2);
    width: 100%;
}
.cv8-card-footer {
    background: #fff;
    padding: 12px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 0 0 12px 12px;
}
/* Expanded: footer már nem a kártya alja → bottom radius átkerül a details panelra */
.cv8-offer-card.is-expanded .cv8-card-footer {
    border-radius: 0;
}
.cv8-offer-card.is-expanded .cv8-card-details {
    border-radius: 0 0 12px 12px;
}
.cv8-card-footer .cv8-details-toggle {
    color: var(--cv8-c-orange);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: right;
    text-decoration: none;
}
.cv8-card-footer .cv8-details-toggle::after {
    content: "";
    width: 24px; height: 24px;
    background: url("/common/images/casco/icons/icon-rounded-24x24-arrow-down-4.svg") no-repeat center / contain;
    transition: transform .2s;
}
.cv8-offer-card.is-expanded .cv8-details-toggle::after {
    background-image: url("/common/images/casco/icons/icon-rounded-24x24-arrow-up.svg");
}
.cv8-card-footer .cv8-details-toggle:hover { color: #cc6000; }

/* === Részletek expanded panel — Anima lk77D (Figma 39:16858) ===
 * Bg gray-4 (#F5F5F5), padding 24, gap 24 közte. Kibontáskor jelenik meg
 * a card-footer alatt (a card overflow:hidden + border-radius:12 a külső keret).
 */
.cv8-card-details[hidden] { display: none; }
.cv8-card-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--cv8-c-gray4);
    padding: 24px;
}
/* (#97080) Reszletek panel — cv8 Figma design (Anima lk77D / Figma 39:16858)
 * Az adat az n_szolgaltatas.termek_osszehasonlitas_modozat_leiras-bol jon
 * (csoport_nev = szekcio, info_sor = field-label, info_ertek = field-value).
 * A JS renderDetailsFromJson(data) epiti a markup-ot:
 *   .cv8-details-title          h4 termek-cim
 *   .cv8-details-sep            vekony szeparator szekciok kozott
 *   .cv8-details-section        egy csoport (pl. Teruleti hataly)
 *   .cv8-details-section-heading h5 szekcio-cim
 *   .cv8-details-rows           sor-konteneer (#97080 Figma redesign)
 *   .cv8-details-field          egy sor: label balra | ertek jobbra, valtakozo bg
 */
.cv8-card-details {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    color: var(--cv8-c-text);
}

.cv8-details-title {
    margin: 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--cv8-c-gray2);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--cv8-c-text);
    text-transform: capitalize;
    letter-spacing: -0.005em;
}
.cv8-details-sep {
    height: 1px;
    background: var(--cv8-c-gray2);
    width: 100%;
    margin: 0;
}
.cv8-details-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}
.cv8-details-section-heading {
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
/* (#97080) Figma "Product rating 2026" reszletek-tablazat: keretes (#EEE),
 * rounded-16, 2 EGYENLO oszlop (label 50% / ertek 50%, mindketto balra zarva),
 * zebra (paros sorok #F5F5F5), #EEE racsvonalak. Mobilon is 2 oszlop marad. */
.cv8-details-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cv8-c-gray3);
    border-radius: 16px;
    overflow: hidden;
}
.cv8-details-field {
    display: flex;
    align-items: stretch;
    min-width: 0;
    /* (#97080) Paratlan sor explicit FEHER (nem atlatszo!) — kulonben a szurkes
       panel-hatter atut, es a zebra (feher/szurke) nem latszik. */
    background: #fff;
}
.cv8-details-field + .cv8-details-field {
    border-top: 1px solid var(--cv8-c-gray3);
}
.cv8-details-field:nth-child(even) {
    background: var(--cv8-c-gray4);
}
.cv8-details-label,
.cv8-details-value {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: var(--cv8-c-text);
    word-break: break-word;
}
.cv8-details-label {
    font-weight: 400;
    border-right: 1px solid var(--cv8-c-gray3);
}
.cv8-details-value {
    font-weight: 700;
}
.cv8-details-value .cv8-details-yes {
    color: #2E7D32;
    font-weight: 700;
    font-size: 16px;
}
.cv8-details-value .cv8-details-no {
    color: #C62828;
    font-weight: 700;
    font-size: 16px;
}
.cv8-details-loading,
.cv8-details-error,
.cv8-details-empty {
    padding: 24px;
    text-align: center;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    color: var(--cv8-c-text);
    font-size: 14px;
}

/* Mobile: a Figma szerint MARAD a 2 oszlop (label | ertek), csak szukebb padding */
@media (max-width: 768px) {
    .cv8-card-details { padding: 24px 16px; gap: 16px; }
    .cv8-details-label,
    .cv8-details-value { padding: 12px; }
    .cv8-details-title { font-size: 16px; }
}

/* Figma: head — h-80, gap-12 items-start. Title-rész flex-1 gap-16 items-center, rating-rész auto. */
.cv8-offer-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 80px;
}
.cv8-offer-head-title {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 16px;
    align-items: center;
}
@media (max-width: 992px) {
    .cv8-offer-head { flex-wrap: wrap; }
    .cv8-offer-rating { width: 100%; }
}
/* A KGFB eredmenyoldal kor alaku logojaval egyseges (lasd logo_v8.css
 * .nr-insurer-medium-logo): kor, content-box, 38px (mobil) / 48px (>=1200px),
 * 8px padding, 1px szurke keret. */
.cv8-offer-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cv8-c-gray2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    padding: 8px;
    box-sizing: content-box;
    overflow: hidden;
}
@media screen and (min-width: 1200px) {
    .cv8-offer-logo {
        width: 48px;
        height: 48px;
    }
}
.cv8-offer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cv8-offer-name {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    color: var(--cv8-c-text);
    letter-spacing: -0.01em;
    min-width: 0;
    flex: 1 1 0;
}
/* Figma rating-blokk: gap-12 items-start. 2 alblokk: customer rating + product rating */
.cv8-offer-rating {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
/* Customer rating: csillagok + 4,4 / 1775 ert., items-end pt-8 */
.cv8-rating-stars {
    display: flex; flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    padding-top: 8px;
}
/* Az ugyfel-ertekeles `cr` blokkot a regi gyors_casco mintajara hasznaljuk
 * (cr-stars-wrapper / default + filled / cr-rating + cr-count). A globalis
 * _customer_rating.css adja a base-szabalyokat (fontsize, csillag-svg, layout).
 * Itt csak a casco-eredmeny-kartyahoz illeszkedo finomitasok. */
.cv8-rating-stars .cr.casco {
    align-items: flex-end;
}
.cv8-rating-stars .cr.casco .cr-title {
    font-size: 11px;
    color: var(--cv8-c-gray1);
    margin-bottom: 4px;
}
.cv8-rating-stars .cr.casco .cr-rating {
    font-size: 18px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-rating-stars .cr.casco .cr-count {
    font-size: 12px;
    color: var(--cv8-c-gray1);
    padding-left: 4px;
    align-self: end;
    padding-bottom: 2px;
}
/* (#97080 teszt-NOK, Kemendi K.) A csillagok eredetileg a globalis
 * _customer_rating.css-bol jottek (main.css @import), de a casco v8
 * eredmenyoldalon (magnolia teszt) nem renderelodtek: a "2,8/" + "5 ertekeles"
 * szoveg latszott (azt itt stilusozzuk), de a csillagok nem (a globalis fajl
 * star-szabalyai nem ervenyesultek). Hogy a kartya ne fuggjon a globalis CSS
 * betoltesi/verzio-allapotatol, a csillag-szabalyokat ide is beemeljuk,
 * casco-scope-ban (magasabb specificitas -> ez nyer). Forras + data-URI SVG-k:
 * _customer_rating.css:26-72. */
.cv8-rating-stars .cr .cr-stars-wrapper {
    position: relative;
    width: 75px;
    height: 15px;
    display: flex;
}
.cv8-rating-stars .cr .cr-stars-wrapper .default,
.cv8-rating-stars .cr .cr-stars-wrapper .default-empty,
.cv8-rating-stars .cr .cr-stars-wrapper .filled {
    position: absolute;
    display: inline-flex;
}
.cv8-rating-stars .cr .cr-stars-wrapper .filled {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.cv8-rating-stars .cr .cr-stars-wrapper .default .star:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" fill="none"><path d="M5.87143 12.7071L8.57143 11.0786L11.2714 12.7286L10.5643 9.64286L12.9429 7.58572L9.81429 7.30714L8.57143 4.39286L7.32857 7.28572L4.2 7.56429L6.57857 9.64286L5.87143 12.7071ZM3.27857 16.2857L4.67143 10.2643L0 6.21429L6.17143 5.67857L8.57143 0L10.9714 5.67857L17.1429 6.21429L12.4714 10.2643L13.8643 16.2857L8.57143 13.0929L3.27857 16.2857Z" fill="%23FFB048"/></svg>');
    width: 15px;
    height: 15px;
    display: inline-block;
}
.cv8-rating-stars .cr .cr-stars-wrapper .default-empty .star:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" fill="none"><path d="M3.27857 16.2857L4.67143 10.2643L0 6.21429L6.17143 5.67857L8.57143 0L10.9714 5.67857L17.1429 6.21429L12.4714 10.2643L13.8643 16.2857L8.57143 13.0929L3.27857 16.2857Z" fill="%23dfdfdf"/></svg>');
    width: 15px;
    height: 15px;
    display: inline-block;
}
.cv8-rating-stars .cr .cr-stars-wrapper .filled .star:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" fill="none"><path d="M3.27857 16.2857L4.67143 10.2643L0 6.21429L6.17143 5.67857L8.57143 0L10.9714 5.67857L17.1429 6.21429L12.4714 10.2643L13.8643 16.2857L8.57143 13.0929L3.27857 16.2857Z" fill="%23FFB048"/></svg>');
    width: 15px;
    height: 15px;
    display: inline-block;
}
.cv8-rating-stars .cr .cr-stars-wrapper .star {
    line-height: 15px;
}
/* Anima: stars sora, gap-8, items-center justify-center */
.cv8-offer-rating .stars {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Anima icon: width 17.14px, height 16.29px (csillag SVG default méret) */
.cv8-offer-rating .stars .star {
    display: inline-block;
    width: 17.14px;
    height: 16.29px;
    background: url("/common/images/casco/icons/icon-3.svg") no-repeat center / contain;
    flex: 0 0 auto;
    color: transparent;
    overflow: hidden;
    text-indent: -999em;
}
.cv8-offer-rating .stars .star.empty {
    background-image: url("/common/images/casco/icons/icon-4.svg");
}
.cv8-offer-rating .rating-detail {
    display: flex; align-items: center; gap: 2px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cv8-c-text);
}
.cv8-offer-rating .rating-detail b { color: var(--cv8-c-text); font-weight: 700; font-size: 18px; }
.cv8-offer-rating .rating-detail .muted { color: var(--cv8-c-gray1); font-weight: 400; font-size: 12px; }

.cv8-rating-expert {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    position: relative;
}
/* Figma "Product rating 2026": vizszintes sor [txt-oszlop][badge], gap-8. */
.cv8-rating-expert .expert-score-row {
    display: inline-flex; align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
/* txt-oszlop: cimke felul, "Szakertoi ertekeles (i)" alul, jobbra zarva, gap-2 */
.cv8-rating-expert .expert-txt {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.cv8-rating-expert .expert-label {
    color: var(--cv8-c-blue);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    white-space: nowrap;
}
.cv8-rating-expert .expert-sub {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--cv8-c-text);
    font-weight: 400;
}
.cv8-rating-expert .expert-sub:hover .info-icon { opacity: 0.7; }
.cv8-rating-expert .expert-sub .info-icon {
    display: inline-block;
    width: 12px; height: 12px;
    background: url("/common/images/casco/icons/icon-rounded-16x16-info.svg") no-repeat center / contain;
    color: transparent;
    overflow: hidden;
    text-indent: -999em;
    cursor: help;
    flex: 0 0 auto;
    /* A globális `_components.css`-ben van `.info-icon { margin: 0 .5rem }` —
     * itt felülírjuk, mert mi a 4px gap-et a flex-en oldjuk meg. */
    margin: 0 !important;
}
.cv8-rating-expert .expert-score {
    background: var(--cv8-c-blue);
    color: #fff;
    border-radius: 360px;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px; line-height: 28px;
}

.cv8-rating-expert .expert-score-row:hover .expert-score {
    box-shadow: 0 0 0 3px rgba(110, 110, 229, 0.18);
}
.cv8-rating-expert .expert-score-row:focus-visible {
    outline: 2px solid var(--cv8-c-orange);
    outline-offset: 4px;
    border-radius: 8px;
}
/* Figma "Product rating 2026" tooltip: 620px feher panel, felso pointer,
   fejlec (18px cim + 14px leiras), #EEE elvalaszto, 2 oszlopos al-ertekeles racs. */
.cv8-rt-tooltip {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    z-index: 200;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    width: 620px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 12px 24px rgba(42, 40, 45, 0.12);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}
.cv8-rt-tooltip[hidden] { display: none; }
/* Felso pointer-haromszog (a badge fele mutat) */
.cv8-rt-pointer {
    position: absolute;
    top: -7px; right: 24px;
    width: 16px; height: 8px;
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cv8-rt-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.cv8-rt-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cv8-c-text);
}
.cv8-rt-close {
    background: none;
    border: 0;
    padding: 0;
    width: 24px; height: 24px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--cv8-c-gray1);
    flex-shrink: 0;
}
.cv8-rt-close:hover { color: var(--cv8-c-text); }
.cv8-rt-desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--cv8-c-text);
    margin: 0 0 16px;
}
.cv8-rt-divider {
    height: 1px;
    background: var(--cv8-c-gray3);
    margin: 0 0 16px;
}
.cv8-rt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.cv8-rt-cat {
    display: flex; flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.cv8-rt-cat-header {
    display: flex; align-items: flex-start;
    gap: 8px;
}
.cv8-rt-cat-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cv8-c-text);
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.cv8-rt-cat-arrow {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--cv8-c-text);
}
.cv8-rt-cat-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--cv8-c-text);
    margin: 0;
}
.cv8-rt-cat-bar-row {
    display: flex; align-items: center;
    gap: 8px;
}
.cv8-rt-cat-bar {
    flex: 1 1 auto;
    min-width: 0;
    height: 8px;
    background: var(--cv8-c-gray4);
    border-radius: 8px;
    overflow: hidden;
}
.cv8-rt-cat-bar-inner {
    height: 100%;
    background: var(--cv8-c-orange);
    border-radius: 8px;
    transition: width 0.3s ease;
}
.cv8-rt-cat-score {
    font-size: 12px;
    font-weight: 700;
    color: var(--cv8-c-text);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Mobil: modal-kent kozepen (egy oszlop), a Figma "modal mobile" mintajara */
@media (max-width: 768px) {
    .cv8-rt-tooltip {
        position: fixed;
        top: 50%; left: 50%; right: auto; bottom: auto;
        transform: translate(-50%, -50%);
        width: calc(100vw - 32px);
        max-width: 420px;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 12px;
    }
    .cv8-rt-pointer { display: none; }
    .cv8-rt-grid { grid-template-columns: 1fr; }
}

/* Figma 14:15259 main: items-start justify-between, left section + right (price+button) */
.cv8-offer-body {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    flex: 1 1 auto;
}
.cv8-offer-body > .cv8-offer-section {
    display: flex; flex-direction: column;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}
@media (max-width: 768px) {
    .cv8-offer-body { flex-direction: column; align-items: stretch; }
    .cv8-offer-rating { align-items: flex-start; }
}

/* Figma 14:15263: "Bázis Casco" 18px bold leading-28 #2A282D */
.cv8-product-name {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    margin: 0;
    color: var(--cv8-c-text);
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    letter-spacing: -0.005em;
}
/* Reszleges casco modozat-megjeloles: (Toreskar) / (Totalkar) / (Lopaskar) */
.cv8-product-modozat {
    font-weight: 500;
    color: var(--cv8-c-orange);
    font-size: 16px;
}
/* Figma 14:15266 chip "Szemleköteles": bg rgba(255,176,72,0.4), text #E84700, 12px bold */
.cv8-chip-wrap {
    position: relative;
    display: inline-block;
}
.cv8-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 176, 72, 0.4);
    color: var(--cv8-c-blood-orange);
    padding: 8px 16px 8px 8px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    margin-left: 0;
}
.cv8-badge-clickable {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.cv8-badge-clickable:hover { background: rgba(255, 176, 72, 0.55); }
.cv8-badge .cv8-badge-icon {
    display: inline-block;
    width: 16px; height: 16px;
    flex: 0 0 auto;
    background: url("/common/images/casco/icons/icon-rounded-16x16-info-1.svg") no-repeat center / contain;
    color: transparent;
    overflow: hidden;
    text-indent: -999em;
}
/* Figma 14:15264 doc-link: gap-8, 16x16 download icon + 14px / 600 #FF7900 */
.cv8-doc-link {
    display: flex; align-items: center; gap: 8px;
    color: var(--cv8-c-orange);
    text-decoration: none;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    width: fit-content;
}
.cv8-doc-link::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background: url("/common/images/casco/icons/icon-rounded-16x16-download-1.svg") no-repeat center / contain;
}
.cv8-doc-link + .cv8-doc-link { margin-top: 0; }

/* Anima im2te (Figma 34:13550) "Plusz fedezetek:" blokk a card alján — heading + list */
.cv8-coverage-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    align-self: stretch;
    width: 100%;
}
/* (#97080) "Plusz fedezetek:" cim a design-ban nem szerepel — a fedezetek
 * cim nelkul, kozvetlenul listazva jelenjenek meg a kartya aljan.
 * Kepernyo-olvasoknak elerheto marad (visually-hidden technika). */
.cv8-coverage-heading {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Figma 14:15267 plus fedezetk: 3-col grid, gap-x-20, line-height 24, h-74 */
.cv8-coverage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
    margin: 0;
    padding: 0;
}
.cv8-coverage li {
    list-style: none;
    font-size: 14px;
    color: var(--cv8-c-text);
    padding: 0;
    display: flex; align-items: center; gap: 16px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}
.cv8-coverage li::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background: url("/common/images/casco/icons/icon-rounded-24x24-check-7.svg") no-repeat center / contain;
}

/* Figma 14:15293 price + add to basket: items-end gap-8 */
.cv8-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    gap: 8px;
    text-align: right;
    min-width: 0;
}
/* Figma 14:15295 year row: gap-10 items-end */
.cv8-price-yearly {
    display: flex; align-items: flex-end; gap: 6px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--cv8-c-text);
    line-height: 36px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.cv8-price-yearly .unit {
    font-size: 14px; font-weight: 400; color: var(--cv8-c-text);
    line-height: 1.4;
    letter-spacing: 0;
}
.cv8-price-monthly {
    font-size: 12px; color: var(--cv8-c-text);
    line-height: 18px;
    margin: 0;
}
/* Figma 14:15300 önrész label: bg #EEE, px-8 py-4, rounded-8 (NEM pill!) */
.cv8-onresz {
    background: var(--cv8-c-gray3);
    color: var(--cv8-c-text);
    font-size: 12px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 18px;
}
.cv8-onresz b { color: var(--cv8-c-text); font-weight: 700; }
.cv8-onresz .sep { color: var(--cv8-c-gray1); }
.cv8-onresz-icon {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    background: url("/common/images/casco/icons/icon-square-16x16-warning.svg") no-repeat center / contain;
}

/* (#97080) A kartyan szereplo onresz eltér a felhasznalo altal valasztottol —
 * pirossal jelezzuk, hogy a biztosito nem tudta a kert ertekkel kalkulalni. */
.cv8-onresz--mismatch {
    background: #FDECEA;
    color: #C62828;
}
.cv8-onresz--mismatch b,
.cv8-onresz--mismatch .sep { color: #C62828; }
.cv8-onresz--mismatch .cv8-onresz-icon {
    background: #C62828;
    -webkit-mask: url("/common/images/casco/icons/icon-square-16x16-warning.svg") no-repeat center / contain;
            mask: url("/common/images/casco/icons/icon-square-16x16-warning.svg") no-repeat center / contain;
}

/* (#97080) Kizaras-kartya: a felhasznalo altal valasztott egy vagy tobb
 * kiegeszitot a termek nem tartalmazza — ar es KIVALASZTOM helyett a
 * hianyzo kiegeszitok listaja jelenik meg. */
.cv8-price-block--excluded {
    align-items: flex-end;
    text-align: right;
    gap: 6px;
}
.cv8-excluded-headline {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #C62828;
    line-height: 20px;
}
.cv8-excluded-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #C62828;
    font-size: 13px;
    line-height: 18px;
}
.cv8-excluded-list li {
    margin: 0;
    padding: 2px 0;
}
.cv8-excluded-list li::before {
    content: "× ";
    font-weight: 700;
    margin-right: 4px;
}

/* (#97080) Ajanlat nelkuli biztosito kartya: a biztosito megjelenik (logo +
 * nev), de ar/KIVALASZTOM helyett a "miert nincs ajanlat" indok latszik. A
 * kartya visszafogott (halvanyitott), hogy elkulonuljon a valos ajanlatoktol. */
/* (#97080) Figma "Product rating 2026": a no-offer kartya feher, teljes szinu
   fejleccel (nincs szurkites) — csak az ar/gomb helyett van a "Nincs ajánlat" blokk. */
.cv8-price-block--no-offer {
    align-items: flex-end;
    text-align: right;
    gap: 4px;
    max-width: 320px;
}
.cv8-no-offer-headline {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--cv8-c-text);
    line-height: 28px;
}
.cv8-no-offer-reason {
    display: flex; align-items: flex-start;
    gap: 4px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #F81E00;
    line-height: 18px;
    text-align: left;
}
.cv8-no-offer-icon {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    background: #F81E00;
    -webkit-mask: url("/common/images/casco/icons/icon-soft-24x24-warning.svg") no-repeat center / contain;
    mask: url("/common/images/casco/icons/icon-soft-24x24-warning.svg") no-repeat center / contain;
}
.cv8-no-offer-reason-text { flex: 1 1 auto; min-width: 0; }

/* Figma 14:15307 KIVALASZTOM: bg #E84700 (Blood orange), px-24 py-8, rounded-8, w-183, gap-8, button/small 15/24 medium */
.cv8-select-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--cv8-c-blood-orange); color: #fff;
    border: 0; border-radius: 8px;
    padding: 8px 24px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px; font-weight: 500;
    line-height: 24px;
    cursor: pointer; text-transform: uppercase;
    width: 183px;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: 0.02em;
}
.cv8-select-btn:focus { outline: 2px solid var(--cv8-c-orange); outline-offset: 2px; }
.cv8-select-btn:hover { background: #cc3d00; color: #fff; text-decoration: none; }
.cv8-select-btn .cv8-cart-icon {
    width: 24px; height: 24px;
    flex: 0 0 auto;
    stroke: currentColor; fill: none;
}

/* Figma 14:15308 / 14:15336 compare row: gap-128 items-end justify-end, kettos w-183 belso konyteln.
 * Belül checkbox 24×24 border-2 #FF7900 rounded-4, "Összehasonlít" 18 regular underline #FF7900,
 * külön 16px chevron-right ikon. */
.cv8-compare-row {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 8px;
    color: var(--cv8-c-blood-orange);
    padding: 32px 0 0;
    width: 183px;
    margin: auto 0 0;
    position: relative;
}
.cv8-compare-row .cv8-compare-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: auto;
    width: 24px; height: 24px;
    margin: 0;
    left: 0;
    top: 50%; transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}
.cv8-compare-row label {
    cursor: pointer;
    text-decoration: underline;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: var(--cv8-c-blood-orange);
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    display: inline-flex; align-items: center; gap: 16px;
    position: relative;
}
/* mock-doboz a natív input rejtett, label::before rajzolja */
.cv8-compare-row .cv8-compare-checkbox + label::before {
    content: "";
    width: 24px !important;
    height: 24px !important;
    border: 2px solid var(--cv8-c-blood-orange) !important;
    border-radius: 4px !important;
    background: #fff !important;
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0 !important;
}
.cv8-compare-row .cv8-compare-checkbox:checked + label::after {
    content: "";
    position: absolute;
    left: 4px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url("/common/images/casco/icons/icon-5.svg") no-repeat center / contain;
    pointer-events: none;
}
/* Külön arrow-right ikon a "Összehasonlít" mellett (Figma 14:15338).
 * Mask-alapu szinezes hogy a chevron a label currentColor-jat orokolje
 * (cv8-c-blood-orange, mint a KIVALASZTOM gomb). Az SVG-ben hardcoded
 * #FF7900-tol fuggetlenedunk igy. */
.cv8-compare-arrow {
    display: inline-block;
    width: 16px; height: 16px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("/common/images/casco/icons/icon-soft-24x24-arrow-right.svg") no-repeat center / contain;
    mask: url("/common/images/casco/icons/icon-soft-24x24-arrow-right.svg") no-repeat center / contain;
}

/* (Régi .cv8-details-toggle a kártyán belül törölve — most .cv8-card-footer-ben van.) */

/* === Jobb sidebar: addons (Anima ELb0C "modal" 1:5176) === */
/* Container: bg-white, padding 24/32 (24 top/bottom, 32 horiz), rounded-12, gap-24 */
.cv8-results-sidebar {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 32px;
    height: fit-content;
    position: sticky;
    top: 16px;
    box-sizing: border-box;
    box-shadow: 0 12px 24px rgba(42, 40, 45, 0.08);
}
@media (max-width: 992px) {
    .cv8-results-sidebar { position: static; margin-top: 16px; }
}
/* Desktop: a backdrop / close gomb / dialog wrapper "atlathato" — a sidebar
   tartalma a megszokott modon jelenik meg. */
.cv8-sidebar-backdrop { display: none; }
.cv8-sidebar-close    { display: none; }
.cv8-sidebar-header   { display: contents; }
.cv8-sidebar-dialog   { display: contents; }

/* Anima ELb0C: title h7-bold = 20 bold / 28 #2A282D */
.cv8-sidebar-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: var(--cv8-c-text);
    margin-bottom: 12px;
}
/* Anima ELb0C: help text body-4-normal-regular = 14 regular + 24×24 question-circle icon, gap-12 */
.cv8-sidebar-help {
    color: var(--cv8-c-text);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cv8-sidebar-help-text { flex: 1 1 auto; }
.cv8-sidebar-help-wrap { position: relative; flex: 0 0 auto; }
.cv8-sidebar-help .help-icon,
.cv8-addon-list .help-icon {
    display: inline-block;
    width: 18px; height: 18px;
    background: url("/common/images/casco/icons/icon-rounded-24x24-question-circle.svg") no-repeat center / contain;
    color: transparent;
    overflow: hidden;
    text-indent: -999em;
    cursor: help;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    vertical-align: middle;
}
.cv8-sidebar-help .help-icon { width: 24px; height: 24px; cursor: pointer; }
.cv8-addon-list .help-icon { margin-left: 6px; }

.cv8-addon-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: help;
}
.cv8-addon-help .help-icon { margin-left: 0; }
.cv8-addon-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -8px;
    z-index: 1050;
    width: max-content;
    min-width: 320px;
    max-width: 480px;
    padding: 12px 16px;
    background: #ffffff;
    color: var(--cv8-c-text);
    border: 1px solid var(--cv8-c-gray2, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
    text-align: left;
    text-indent: 0;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    pointer-events: none;
}
.cv8-addon-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 12px;
    border: 6px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
}
.cv8-addon-help:hover .cv8-addon-tooltip,
.cv8-addon-help:focus-visible .cv8-addon-tooltip,
.cv8-addon-help:focus-within .cv8-addon-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .12s ease, transform .12s ease;
}
.cv8-addon-help:focus-visible {
    outline: 2px solid var(--cv8-c-orange);
    outline-offset: 2px;
    border-radius: 50%;
}

.cv8-sidebar-help .help-icon:focus-visible,
.cv8-addon-list .help-icon:focus-visible {
    outline: 2px solid var(--cv8-c-orange);
    outline-offset: 2px;
    border-radius: 50%;
}
.cv8-sidebar-help-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--cv8-c-gray2);
    border-radius: 12px;
    padding: 16px 32px 16px 16px;
    width: 320px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cv8-c-text);
    font-weight: 400;
    text-align: left;
}
.cv8-sidebar-help-popup[hidden] { display: none; }
.cv8-sidebar-help-popup p { margin: 0 0 8px; }
.cv8-sidebar-help-popup p:last-child { margin-bottom: 0; }
.cv8-sidebar-help-popup-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--cv8-c-gray1);
}
.cv8-sidebar-help-popup-close:hover { color: var(--cv8-c-text); }

/* Anima ELb0C: sidebar checkbox spec.
 * Container: gap-8 (between checkboxes), each padding 12px 0, gap-16 belso (box+text).
 * Box: 24×24, bg-white, border-2 #2A282D (DARK GREY!), rounded-4.
 * Label: body-2-big-regular = 18px regular #2A282D. */
.cv8-addon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv8-addon-list li { padding: 0; }
.cv8-addon-list label {
    cursor: pointer;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--cv8-c-text);
    font-weight: 400;
    margin: 0;
    position: relative;
}
.cv8-addon-list input[type=checkbox] {
    position: absolute !important;
    opacity: 0 !important;
    width: 24px !important; height: 24px !important;
    margin: 0 !important;
    pointer-events: auto;
    cursor: pointer;
}
.cv8-addon-list label::before {
    content: "";
    width: 24px; height: 24px;
    flex: 0 0 auto;
    border: 2px solid var(--cv8-c-text);
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    display: inline-block;
}
/* Checked: orange border + check icon (icon-5.svg) */
.cv8-addon-list label:has(input:checked)::before {
    border-color: var(--cv8-c-orange);
}
.cv8-addon-list label:has(input:checked)::after {
    content: "";
    position: absolute;
    left: 4px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    background: url("/common/images/casco/icons/icon-5.svg") no-repeat center / contain;
    pointer-events: none;
}

/* Anima ELb0C: update button — bg #DFDFDF (gray2), text #B7B7B7 (gray1),
 * padding 16/32, rounded-12, button-big 18 bold. Aktiv: bg blood-orange, text white */
.cv8-update-btn {
    background: var(--cv8-c-gray2);
    color: var(--cv8-c-gray1);
    border: 0;
    border-radius: 12px;
    padding: 16px 32px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    cursor: not-allowed;
    text-transform: uppercase;
    width: 100%;
    margin-top: 16px;
    transition: all .2s;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.02em;
}
.cv8-update-btn.active {
    background: var(--cv8-c-blood-orange);
    color: #fff;
    cursor: pointer;
}
.cv8-update-btn.active:hover { background: #cc3d00; }

/* === Also nav-sav (VISSZA / TOVABB) — Anima jsvE3 group-2 spec ===
 * VISSZA: bg-white, border 3px #E84700 (Blood orange), padding 16/32, rounded-12, button-big 18 bold
 * TOVÁBB: bg #E84700, padding 16/32, rounded-12, button-big 18 bold white
 */
.cv8-results-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 8px;
}
.cv8-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.cv8-nav-back {
    background: #fff;
    color: var(--cv8-c-blood-orange);
    border: 3px solid var(--cv8-c-blood-orange);
}
.cv8-nav-back:hover { background: #fff5f0; color: var(--cv8-c-blood-orange); text-decoration: none; }
.cv8-nav-next {
    background: var(--cv8-c-blood-orange);
    color: #fff;
    border: 3px solid var(--cv8-c-blood-orange);
}
.cv8-nav-next:hover { background: #cc3d00; color: #fff; text-decoration: none; border-color: #cc3d00; }

@media (max-width: 768px) {
    .cv8-results-nav .cv8-nav-btn { flex: 1 1 0; min-width: 0; padding: 16px 12px; font-size: 16px; }
}

/* === Fizetési beállítások modal — Anima yfYfN (Figma 10:10473) === */
.cv8-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cv8-payment-modal[hidden] { display: none; }
.cv8-payment-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 40, 45, 0.5);
}
.cv8-payment-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 16px;
    box-sizing: border-box;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
/* Header: title + close */
.cv8-payment-modal-header {
    display: flex;
    align-items: center;
    gap: 32px;
}
.cv8-payment-modal-title {
    flex: 1;
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-payment-modal-close {
    background: none;
    border: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex: 0 0 auto;
}
.cv8-payment-modal-close span {
    display: block;
    width: 24px;
    height: 24px;
    background: url("/common/images/casco/icons/icon-square-24x24-close.svg") no-repeat center / contain;
}

/* Section block */
.cv8-payment-modal-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cv8-payment-modal-label {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: var(--cv8-c-text);
}
.cv8-payment-modal-heading {
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--cv8-c-text);
}

/* Radio rows: wrap, gap-32 */
.cv8-payment-modal-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}
.cv8-payment-modal-radios--inline {
    flex-wrap: nowrap;
    gap: 32px;
}
.cv8-payment-modal-radios--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

/* Radio input: 24×24 mock circle, 12×12 dot when selected.
 * Selected text: 18 bold; unselected: 18 regular. */
.cv8-payment-radio {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    margin: 0;
    position: relative;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: var(--cv8-c-text);
    font-weight: 400;
}
.cv8-payment-radio input[type=radio] {
    position: absolute !important;
    opacity: 0 !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    pointer-events: auto;
}
.cv8-payment-radio .cv8-payment-radio-text {
    position: relative;
    padding-left: 40px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}
.cv8-payment-radio .cv8-payment-radio-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--cv8-c-text);
    border-radius: 100px;
    background: #fff;
    box-sizing: border-box;
}
.cv8-payment-radio:has(input:checked) .cv8-payment-radio-text {
    font-weight: 700;
}
.cv8-payment-radio:has(input:checked) .cv8-payment-radio-text::before {
    border-color: var(--cv8-c-orange);
}
.cv8-payment-radio:has(input:checked) .cv8-payment-radio-text::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--cv8-c-orange);
    border-radius: 6px;
}

/* Önrész rows: ket sor (Százalékban / Forintban) FUGGOLEGESEN STACKELVE
 * desktopon es mobilon is — radio bal oldalon fix szelessegben, dropdown
 * teljes szelessegben jobbra (gap 32px desktop, 8px mobile). */
.cv8-payment-modal-onresz {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cv8-payment-onresz-row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
    min-width: 0;
}
.cv8-payment-onresz-row .cv8-payment-radio {
    flex: 0 0 240px;
    min-width: 0;
}
/* (#97080) Onresz radio kiveve, helyere statikus label kerult. */
.cv8-payment-onresz-row .cv8-payment-onresz-label {
    flex: 0 0 240px;
    min-width: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: var(--cv8-c-text);
    font-weight: 500;
}
.cv8-payment-onresz-row .cv8-payment-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.cv8-payment-select {
    flex: 1 1 412px;
    max-width: 412px;
    position: relative;
}
.cv8-payment-select select {
    width: 100%;
    height: 64px;
    padding: 12px 48px 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid var(--cv8-c-gray2);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: var(--cv8-c-text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}
.cv8-payment-select::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url("/common/images/casco/icons/icon-rounded-24x24-arrow-down-1.svg") no-repeat center / contain;
    pointer-events: none;
}

/* Footer buttons: VISSZA + TOVÁBB */
.cv8-payment-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cv8-payment-btn-secondary,
.cv8-payment-btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    flex: 0 0 auto;
}
.cv8-payment-btn-secondary {
    background: #fff;
    color: var(--cv8-c-blood-orange);
    border: 3px solid var(--cv8-c-blood-orange);
}
.cv8-payment-btn-primary {
    background: var(--cv8-c-blood-orange);
    color: #fff;
}
.cv8-payment-btn-primary:hover { background: #cc3d00; }

/* Mobile: full-screen modal, stacked layout, full-width buttons */
@media (max-width: 768px) {
    .cv8-payment-modal-dialog {
        max-width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        margin: 0;
        padding: 24px 16px;
        gap: 24px;
    }
    .cv8-payment-modal-title { font-size: 24px; line-height: 32px; }
    .cv8-payment-modal-heading { font-size: 24px; line-height: 32px; }
    .cv8-payment-modal-radios,
    .cv8-payment-modal-radios--inline {
        flex-direction: column;
        gap: 16px;
        flex-wrap: nowrap;
    }
    .cv8-payment-modal-radios--grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    /* Mobilon az onresz-modal-onresz egy oszlopra (sorok stackelve),
       a soron beluli radio+dropdown is column-strech. */
    .cv8-payment-modal-onresz {
        grid-template-columns: 1fr;
    }
    .cv8-payment-onresz-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .cv8-payment-onresz-row .cv8-payment-radio,
    .cv8-payment-onresz-row .cv8-payment-onresz-label {
        min-width: 0;
        flex: 0 0 auto;
    }
    .cv8-payment-select {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
    .cv8-payment-modal-actions {
        flex-direction: row;
        gap: 8px;
    }
    .cv8-payment-btn-secondary,
    .cv8-payment-btn-primary {
        flex: 1 1 0;
        padding: 16px 12px;
        font-size: 16px;
    }
}

/* Body scroll lock when modal open */
body.cv8-modal-open {
    overflow: hidden;
}

/* (#97080) windowPreloader teljes stilus a casco v8 eredmenyoldalon.
 * A preloader overlay-szabalyai a netrisk_hu_v4 _resultpage.css-ben elnek,
 * amit a main.css @import-tal hoz be — ez a casco eredmenyoldalon NEM
 * ervenyesult (a preloader stilus nelkul, sima szovegkent az oldal aljara
 * csuszott le), ezert a kanonikus szabalyokat itt, a kozvetlenul betoltott
 * (es legutoljara sorra kerulo) casco_v8_results.css-ben rogzitjuk. */
.nr-window-preloader-modal::before,
.nr-window-preloader-modal::after {
    content: ' ';
    position: absolute;
    z-index: -1;
    bottom: 14px;
    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.15);
    height: 50px;
    left: 1px;
    max-width: 50%;
    width: 50%;
    border-radius: 2px;
    -webkit-transform: skew(-3deg, -2deg);
    transform: skew(-3deg, -2deg);
}
.nr-window-preloader-modal::after {
    left: auto;
    right: 1px;
    -webkit-transform: skew(3deg, 2deg);
    transform: skew(3deg, 2deg);
}
.nr-window-preloader-effect > * {
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
}
.nr-window-preloader.show .nr-window-preloader-effect > * {
    opacity: 1;
}
.nr-window-preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    background-color: rgba(255, 255, 255, 0);
    visibility: hidden;
    -webkit-transition: background-color 200ms ease;
    transition: background-color 200ms ease;
}
.nr-window-preloader.show {
    background-color: rgba(0, 0, 0, 0.75);
    visibility: visible;
}
.nr-window-preloader,
.nr-window-preloader * {
    box-sizing: border-box;
}
.nr-window-preloader > * {
    display: table;
}
.nr-window-preloader > * > * {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 15px;
}
.nr-window-preloader,
.nr-window-preloader > *,
.nr-window-preloader > * > * {
    width: 100%;
    height: 100%;
}
.nr-window-preloader > * > * > * {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
}
.nr-window-preloader-modal {
    padding: 16px;
    background-color: #fff;
    box-shadow: 0px 12px 24px rgba(42, 40, 45, 0.12);
    border-radius: 12px;
    display: block;
}
@media screen and (min-width: 768px) {
    .nr-window-preloader-modal {
        padding: 32px;
    }
}
.nr-window-preloader-text,
.nr-window-preloader-percent-text {
    text-align: center;
    color: #666;
    font-weight: 700;
}
.nr-window-preloader-text {
    margin-bottom: 30px;
}
.nr-window-preloader-percent-text {
    display: none;
    margin-top: 15px;
}
.nr-window-preloader-text,
.nr-window-preloader-text * {
    font-size: 15px;
    line-height: 130%;
}
.nr-window-preloader-text .points {
    min-width: 15px;
    display: inline-block;
    text-align: left;
}
.nr-window-preloader-rectangle {
    width: 100%;
    height: 24px;
    border-radius: 32px;
    background-color: var(--secondary-bg-color, #f5f5f5);
}
.nr-window-preloader-rectangle-percent {
    width: 0;
    height: 100%;
    border-radius: 32px;
    background-color: var(--main-bg-color, #E84700);
}


/* (#97080) cv8-info-modal — egyszerű OK-modal a natív `alert()` helyett
 * (pl. compare-max-3 figyelmeztetes). Kicsi, kozepre igazitott dialog,
 * cv8 design tokenekkel. */
.cv8-info-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cv8-info-modal[hidden] { display: none; }
.cv8-info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.cv8-info-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    color: var(--cv8-c-text);
    overflow: hidden;
}
.cv8-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.cv8-info-modal-title {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-info-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    position: relative;
}
.cv8-info-modal-close span {
    position: absolute;
    inset: 0;
    background: url("/common/images/casco/icons/icon-square-24x24-close.svg") no-repeat center / contain;
}
.cv8-info-modal-body {
    padding: 12px 24px 24px;
    font-size: 14px;
    line-height: 20px;
    color: var(--cv8-c-text);
}
.cv8-info-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 24px 20px;
}
.cv8-info-modal-ok {
    background: var(--cv8-c-blood-orange, #E84700);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-width: 96px;
}
.cv8-info-modal-ok:hover { background: #cc3d00; }
.cv8-info-modal-ok:focus { outline: 2px solid var(--cv8-c-orange); outline-offset: 2px; }

/* === Tooltip a chip-en (Anima TjupG / Figma 1:7706) ===
 * Kattintásra a chip felett megjelenik egy fehér box leíró szöveggel.
 * pointer-shape.svg: lefelé mutató háromszög/teardrop alak (a tooltip alján).
 */
.cv8-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    max-width: min(90vw, 420px);
    z-index: 100;
    pointer-events: auto;
}
.cv8-tooltip[hidden] { display: none; }
.cv8-tooltip-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.cv8-tooltip-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background: url("/common/images/casco/icons/icon-soft-24x24-warning.svg") no-repeat center / contain;
}
.cv8-tooltip-text {
    flex: 1;
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--cv8-c-text);
    text-align: left;
    white-space: normal;
}
.cv8-tooltip-text strong {
    font-weight: 700;
    display: inline;
}
.cv8-tooltip-close {
    background: none;
    border: 0;
    padding: 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex: 0 0 auto;
}
.cv8-tooltip-close span {
    display: block;
    width: 17px;
    height: 17px;
    background: url("/common/images/casco/icons/icon-x-thin.svg") no-repeat center / contain;
}
.cv8-tooltip-pointer {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 12px;
    background: url("/common/images/casco/icons/pointer-shape.svg") no-repeat center / contain;
    /* Pointer shadow utánzata: shadow on the box megoldja, de a pointer árnyékára is kell */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
}

@media (max-width: 768px) {
    .cv8-tooltip {
        width: 280px;
        max-width: 90vw;
    }
}

/* === "Mentsd el és küldd el" email modal — Anima 8kt3i (Figma 23:10716) === */
.cv8-email-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cv8-email-modal[hidden] { display: none; }
.cv8-email-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 40, 45, 0.5);
}
.cv8-email-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 16px;
    box-sizing: border-box;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
/* Header: title + thin X close */
.cv8-email-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.cv8-email-modal-title {
    flex: 1;
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-email-modal-close {
    background: none;
    border: 0;
    padding: 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex: 0 0 auto;
    margin-top: 12px;
}
.cv8-email-modal-close span {
    display: block;
    width: 17px;
    height: 17px;
    background: url("/common/images/casco/icons/icon-x-thin.svg") no-repeat center / contain;
}

/* Form section */
.cv8-email-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.cv8-email-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}
.cv8-email-input {
    display: block;
    width: 100%;
    cursor: text;
}
.cv8-email-input input {
    display: block;
    width: 100%;
    height: 64px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid var(--cv8-c-gray2);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: var(--cv8-c-text);
    box-sizing: border-box;
    outline: none;
}
.cv8-email-input input::placeholder {
    color: var(--cv8-c-text);
    opacity: 0.85;
}
.cv8-email-input input:focus {
    border-color: var(--cv8-c-orange);
}
/* Help row under input: ⓘ + small text */
.cv8-email-help {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cv8-email-help-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background: url("/common/images/casco/icons/icon-rounded-16x16-info-help.svg") no-repeat center / contain;
}
.cv8-email-help-text {
    flex: 1;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: var(--cv8-c-text);
}

/* Consent checkbox row */
.cv8-email-consent {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    cursor: pointer;
    margin: 0;
    position: relative;
}
.cv8-email-consent input[type=checkbox] {
    position: absolute !important;
    opacity: 0 !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    pointer-events: auto;
    cursor: pointer;
}
.cv8-email-consent-text {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: var(--cv8-c-text);
    font-weight: 400;
    /* inline-block (NEM inline-flex) — a flex-container az 'Elfogadom a' es
       a `<a>Hozzajarulasi nyilatkozat</a>` kozti whitespace-t collapselne. */
    display: inline-block;
    padding-left: 40px;
    position: relative;
    min-height: 28px;
}
.cv8-email-consent-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid var(--cv8-c-text);
    border-radius: 4px;
    box-sizing: border-box;
}
.cv8-email-consent:has(input:checked) .cv8-email-consent-text::before {
    border-color: var(--cv8-c-orange);
}
.cv8-email-consent:has(input:checked) .cv8-email-consent-text::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url("/common/images/casco/icons/icon-5.svg") no-repeat center / contain;
    pointer-events: none;
}
.cv8-email-consent-link {
    color: var(--cv8-c-orange);
    text-decoration: none;
    font-weight: 400;
}
.cv8-email-consent-link:hover { text-decoration: underline; }

/* Action buttons */
.cv8-email-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.cv8-email-btn-secondary,
.cv8-email-btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    flex: 1 1 0;
}
.cv8-email-btn-secondary {
    background: #fff;
    color: var(--cv8-c-blood-orange);
    border: 3px solid var(--cv8-c-blood-orange);
}
.cv8-email-btn-primary {
    background: var(--cv8-c-blood-orange);
    color: #fff;
}
.cv8-email-btn-primary:hover { background: #cc3d00; }

/* Mobile: kompakt kozepre-zart doboz (NEM full-screen) — design szerint */
@media (max-width: 768px) {
    .cv8-email-modal-dialog {
        max-width: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        margin: 16px;
        padding: 24px;
        gap: 20px;
        border-radius: 12px;
    }
    .cv8-email-modal-title { font-size: 22px; line-height: 30px; }
    .cv8-email-modal-actions {
        flex-direction: row;
        gap: 12px;
    }
    .cv8-email-btn-secondary,
    .cv8-email-btn-primary {
        padding: 16px 12px;
        font-size: 16px;
    }
    .cv8-email-consent-text { font-size: 16px; line-height: 24px; }
}

/* === Loader/state === */
.cv8-results-loading {
    text-align: center; padding: 40px;
    color: #666;
}
.cv8-spinner {
    display: block;
    width: 56px; height: 56px;
    margin: 0 auto 20px;
    border: 5px solid #ffe4cc;
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: cv8-spin 0.9s linear infinite;
}
@keyframes cv8-spin {
    to { transform: rotate(360deg); }
}
.cv8-points::after {
    display: inline-block;
    content: "";
    animation: cv8-dots 1.4s steps(4) infinite;
}
@keyframes cv8-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}
.cv8-results-error {
    background: #fdecea; color: #c0392b;
    border: 1px solid #f5c6cb; border-radius: 6px;
    padding: 16px; margin: 16px 0;
}
.cv8-results-error.cv8-validation-error {
    line-height: 1.5;
}
.cv8-results-error.cv8-validation-error strong { display: inline-block; margin-bottom: 4px; }
.cv8-results-error.cv8-validation-error em { color: #6b3f3f; font-style: italic; }

/* === Empty state — "Sajnaljuk, de a megadott adatok alapjan..." === */
.cv8-empty-state {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #fdeae0;
    border-left: 4px solid var(--cv8-c-blood-orange);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0;
    box-sizing: border-box;
}
.cv8-empty-state-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    background: #fbd2bd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/common/images/casco/icons/icon-square-16x16-warning-2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}
.cv8-empty-state-body {
    flex: 1 1 auto;
    min-width: 0;
}
.cv8-empty-state-title {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-empty-state-subtitle {
    margin-top: 4px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--cv8-c-gray1);
    font-weight: 400;
}
@media (max-width: 768px) {
    .cv8-empty-state {
        padding: 16px;
        gap: 16px;
    }
    .cv8-empty-state-icon {
        width: 44px;
        height: 44px;
        background-size: 22px 22px;
    }
    .cv8-empty-state-title { font-size: 18px; line-height: 24px; }
    .cv8-empty-state-subtitle { font-size: 14px; line-height: 20px; }
}

/* === Helpline sav (mindig latszik az ajanlatok alatt) === */
.cv8-helpline {
    background: #fff;
    border: 1px solid var(--cv8-c-gray2);
    border-radius: 12px;
    padding: 16px 24px;
    margin-top: 16px;
}
.cv8-helpline-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cv8-helpline-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(110, 110, 229, 0.12);
    background-image: url("/common/images/casco/icons/icon-soft-24x24-warning.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}
.cv8-helpline-title {
    flex: 1 1 auto;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-helpline-btn {
    all: unset;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--cv8-c-orange);
    color: var(--cv8-c-orange);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
}
.cv8-helpline-btn:hover { background: rgba(255, 121, 0, 0.06); }
.cv8-helpline-btn-icon {
    width: 20px;
    height: 20px;
    background: url("/common/images/casco/icons/icon-rounded-24x24-phone-actions-call-1.svg") no-repeat center / contain;
    flex: 0 0 auto;
}
@media (max-width: 768px) {
    .cv8-helpline { padding: 16px; }
    .cv8-helpline-inner { flex-wrap: wrap; gap: 12px; }
    .cv8-helpline-icon { width: 40px; height: 40px; background-size: 20px 20px; }
    .cv8-helpline-title { font-size: 16px; line-height: 22px; flex: 1 1 60%; }
    .cv8-helpline-btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 16px;
    }
}

/* === Visszahivast kerek modal === */
.cv8-callback-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cv8-callback-modal[hidden] { display: none; }
.cv8-callback-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 40, 45, 0.5);
}
.cv8-callback-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 16px;
    box-sizing: border-box;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.cv8-callback-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.cv8-callback-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(110, 110, 229, 0.12);
    background-image: url("/common/images/casco/icons/icon-soft-24x24-warning.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    flex: 0 0 auto;
}
.cv8-callback-modal-close {
    background: none;
    border: 0;
    padding: 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex: 0 0 auto;
    margin-top: 12px;
}
.cv8-callback-modal-close span {
    display: block;
    width: 17px;
    height: 17px;
    background: url("/common/images/casco/icons/icon-x-thin.svg") no-repeat center / contain;
}
.cv8-callback-modal-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cv8-callback-modal-title {
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-callback-modal-subtitle {
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--cv8-c-text);
    font-weight: 400;
}
/* Form: Nev + Telefonszam */
.cv8-callback-modal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cv8-callback-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.cv8-callback-field-label {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-callback-input {
    display: block;
    width: 100%;
    height: 56px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid var(--cv8-c-gray2);
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--cv8-c-text);
    box-sizing: border-box;
    outline: none;
}
.cv8-callback-input::placeholder {
    color: var(--cv8-c-gray1);
}
.cv8-callback-input:focus {
    border-color: var(--cv8-c-orange);
}

/* "Mikor hivhatjuk vissza?" szekcio */
.cv8-callback-modal-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cv8-callback-modal-heading {
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--cv8-c-text);
}
.cv8-callback-radios {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cv8-callback-radio {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    position: relative;
    min-height: 24px;
}
.cv8-callback-radio input[type=radio] {
    position: absolute !important;
    opacity: 0 !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    pointer-events: auto;
    cursor: pointer;
}
.cv8-callback-radio-text {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--cv8-c-text);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    padding-left: 36px;
    position: relative;
    min-height: 24px;
}
.cv8-callback-radio-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid var(--cv8-c-gray2);
    border-radius: 50%;
    box-sizing: border-box;
}
.cv8-callback-radio:has(input:checked) .cv8-callback-radio-text::before {
    border-color: var(--cv8-c-orange);
}
.cv8-callback-radio:has(input:checked) .cv8-callback-radio-text::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--cv8-c-orange);
    border-radius: 50%;
}

/* Lila info banner */
.cv8-callback-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(110, 110, 229, 0.12);
    border-radius: 8px;
    padding: 14px 16px;
}
.cv8-callback-info-icon {
    width: 24px;
    height: 24px;
    background: url("/common/images/casco/icons/icon-soft-24x24-warning.svg") no-repeat center / contain;
    flex: 0 0 auto;
}
.cv8-callback-info-text {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--cv8-c-text);
}

/* Disclaimer + linkje */
.cv8-callback-disclaimer {
    margin: 0;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--cv8-c-text);
}
.cv8-callback-disclaimer-link {
    color: var(--cv8-c-orange);
    text-decoration: none;
}
.cv8-callback-disclaimer-link:hover { text-decoration: underline; }

/* Submit gomb */
.cv8-callback-modal-actions {
    display: flex;
    justify-content: flex-end;
}
.cv8-callback-btn-primary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    background: var(--cv8-c-blood-orange);
    color: #fff;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.cv8-callback-btn-primary:hover { background: #cc3d00; }

/* Mobile: full-screen */
@media (max-width: 768px) {
    .cv8-callback-modal-dialog {
        max-width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        margin: 0;
        padding: 24px 16px;
        gap: 20px;
    }
    .cv8-callback-modal-title { font-size: 20px; line-height: 28px; }
    .cv8-callback-modal-fields { grid-template-columns: 1fr; }
    .cv8-callback-modal-actions { justify-content: stretch; }
    .cv8-callback-btn-primary {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px;
    }
}

/* === Mobil specifikus === */
.cv8-mobile-filters { display: none; }
.cv8-mobile-icons { display: none; }
.cv8-mobile-addons-summary { display: none; }

/* Anima im2te .icon-button: 40×40, 2px border #E84700, rounded-8 */
.cv8-icon-btn {
    background: #fff;
    border: 2px solid var(--cv8-c-blood-orange);
    color: var(--cv8-c-blood-orange);
    width: 40px; height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}
.cv8-icon-btn::before {
    content: "";
    width: 24px; height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.cv8-icon-btn[data-action="open-filter"]::before {
    background-image: url("/common/images/casco/icons/icon-soft-24x24-properties.svg");
}
.cv8-icon-btn[data-action="open-sort"]::before {
    background-image: url("/common/images/casco/icons/icon-soft-24x24-switcher-up-down.svg");
}
.cv8-icon-btn[data-action="open-menu"]::before {
    background-image: url("/common/images/casco/icons/icon-rounded-24x24-more-actions.svg");
}

@media (max-width: 768px) {
    /* Desktop topbar elrejtve mobilon — helyette cv8-mobile-filters */
    .cv8-results-topbar { display: none; }

    /* Anima im2te .filters: gap-16, p-16 0, no bg/border — design szerint kozepre rendezve */
    .cv8-mobile-filters {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px 0;
    }
    .cv8-mobile-filters-id {
        font-family: "Figtree", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        color: var(--cv8-c-text);
        text-align: center;
    }
    .cv8-mobile-filters-id strong { font-weight: 700; }

    /* PDF letöltés / Email küldése linkek (Anima .link-underline + .link-simple) */
    .cv8-mobile-filters-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .cv8-mobile-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--cv8-c-orange);
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }
    .cv8-mobile-link-icon {
        display: inline-block;
        width: 16px; height: 16px;
        flex: 0 0 auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .cv8-mobile-link--email .cv8-mobile-link-icon {
        background-image: url("/common/images/casco/icons/icon-square-16x16-send-email.svg");
    }

    /* Anima im2te .radio-buttons: row, design szerint kozepre rendezve */
    .cv8-mobile-filters-radios {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
    }
    .cv8-mobile-radio {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        margin: 0;
    }
    .cv8-mobile-radio input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    /* Anima .radio: 24×24, white bg, 2px solid orange, padding-6 */
    .cv8-mobile-radio-dot {
        width: 24px;
        height: 24px;
        border-radius: 100px;
        border: 2px solid var(--cv8-c-orange);
        background: #fff;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .cv8-mobile-radio input[type="radio"]:checked + .cv8-mobile-radio-dot::after {
        content: "";
        width: 12px; height: 12px;
        background: var(--cv8-c-orange);
        border-radius: 6px;
    }
    /* Unselected: gray border (Anima .radio-2: border #2a282d) */
    .cv8-mobile-radio input[type="radio"]:not(:checked) + .cv8-mobile-radio-dot {
        border-color: var(--cv8-c-text);
    }
    .cv8-mobile-radio-label {
        font-family: "Figtree", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 24px;
        font-weight: 700;
        color: var(--cv8-c-text);
    }
    /* Anima im2te .head-3: column + items-center, gap-16 — logo, név, rating egymás alatt */
    .cv8-offer-head { flex-direction: column; align-items: center; gap: 16px; min-height: 0; }
    .cv8-offer-head-title { flex-direction: column; align-items: center; gap: 16px; width: 100%; }
    /* Anima im2te .rating: column, gap-12 — customer-rating felul, product-rating alul */
    .cv8-offer-rating { flex-direction: column; justify-content: center; align-items: center; min-width: 0; width: 100%; gap: 12px; }
    .cv8-rating-stars { align-items: center; padding-top: 0; }
    .cv8-offer-rating .rating-detail { flex-direction: row; }
    /* .cv8-rating-expert sajat default styling-jat hasznalja (column, items-center) */
    .cv8-price-block { text-align: center; align-items: stretch; }
    .cv8-offer-name { text-align: center; font-size: 20px; line-height: 28px; }
    .cv8-offer-logo { margin: 0; }

    /* Anima vU8HP .head: column gap-8, "X ajánlat" felül, .buttons row alul */
    .cv8-results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    /* Anima vU8HP .buttons: row, justify-between (filter balra alone, sort+more grouped jobbra) */
    .cv8-mobile-icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    /* Anima vU8HP .div: inner group sort+more, gap-8 */
    .cv8-mobile-icons-right {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }
    .cv8-desktop-only { display: none !important; }
    .dropdown.sort-wrapper { display: none !important; }
    /* Sort ikon megnyomasakor a JS .cv8-mobile-open osztalyt rak ra,
       igy a dropdown menu egy egyszerubb mobil popup-kent latszik. */
    .dropdown.sort-wrapper.cv8-mobile-open {
        display: block !important;
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
        padding: 16px;
        min-width: 280px;
    }
    .dropdown.sort-wrapper.cv8-mobile-open .nr-radio-group-label { display: none; }
    .dropdown.sort-wrapper.cv8-mobile-open .nr-radio-group-groups,
    .dropdown.sort-wrapper.cv8-mobile-open .sorrendezes-wapper,
    .dropdown.sort-wrapper.cv8-mobile-open .dropdown-menu {
        display: block !important;
        position: static !important;
        transform: none !important;
        box-shadow: none;
        border: 0;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    /* Onresz mobilon: pasztel narancs doboz, design szerint */
    .cv8-onresz {
        background: #fff4e6;
        color: #ff6600;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 12px;
        justify-content: center;
    }
    /* Mismatch override (felulirja a fenti narancs-pasztel-t). */
    .cv8-onresz--mismatch,
    .cv8-onresz--mismatch b,
    .cv8-onresz--mismatch .sep { color: #C62828 !important; }
    .cv8-onresz--mismatch { background: #FDECEA !important; }
    .cv8-onresz--mismatch .cv8-onresz-icon { background-color: #C62828 !important; }

    /* Compare-row mobilon: narancs koerneoeles doboz, design szerint */
    .cv8-compare-row {
        display: flex; justify-content: center; align-items: center;
        margin-top: 14px; gap: 6px;
        color: #ff6600; font-size: 14px;
        padding: 8px 0;
        border-radius: 6px;
    }
    .cv8-compare-row label { font-weight: bold; text-decoration: underline; cursor: pointer; }

    /* Mobil sidebar osszegzo: a teljes sidebar elrejtve, helyette modal box.
       Anima im2te .modal: bg-white, p-16, rounded-12, box-shadow */
    .cv8-results-sidebar { display: none; }
    .cv8-mobile-addons-summary {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        margin: 0;
        box-shadow: 0 12px 24px rgba(42, 40, 45, 0.12);
        gap: 16px;
    }
    .cv8-mobile-addons-summary-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* Anima .text-wrapper-7: 20px bold (h7 bold) */
    .cv8-mobile-addons-summary-text strong {
        display: block;
        font-family: "Figtree", Helvetica, Arial, sans-serif;
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        color: var(--cv8-c-text);
        margin: 0;
    }
    /* Anima .text-wrapper-8: 14px regular orange */
    .cv8-mobile-addons-summary-text small {
        font-family: "Figtree", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        color: var(--cv8-c-orange);
    }
    /* Anima .icon-button: 40×40, 2px border #E84700, rounded-8 */
    .cv8-mobile-addons-edit {
        background: #fff;
        border: 2px solid var(--cv8-c-blood-orange);
        width: 40px; height: 40px;
        border-radius: 8px;
        cursor: pointer;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .cv8-mobile-addons-edit-icon {
        display: inline-block;
        width: 24px; height: 24px;
        background: url("/common/images/casco/icons/icon-rounded-24x24-edit.svg") no-repeat center / contain;
    }

    /* Mobil sidebar modal allapot — Anima fizetési modal mintajara
       (cv8-payment-modal struktura: fixed overlay + backdrop + centered dialog
       + header (title + close X) + tartalom + apply gomb). */
    .cv8-results-sidebar.is-open {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: transparent;
        padding: 0;
        border: 0;
        border-radius: 0;
        margin: 0;
    }
    .cv8-results-sidebar.is-open .cv8-sidebar-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(42, 40, 45, 0.5);
    }
    /* Mobilon (≤768px) full-screen sheet — nem centrált dialog */
    .cv8-results-sidebar.is-open .cv8-sidebar-dialog {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
        background: #fff;
        border-radius: 0;
        padding: 24px;
        margin: 0;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
        box-sizing: border-box;
    }
    .cv8-results-sidebar.is-open .cv8-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .cv8-results-sidebar.is-open .cv8-sidebar-title {
        margin: 0;
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        color: var(--cv8-c-text);
    }
    /* Anima close X (Figma: 24×24 stroke) */
    .cv8-results-sidebar.is-open .cv8-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .cv8-results-sidebar.is-open .cv8-sidebar-close span {
        display: inline-block;
        width: 24px; height: 24px;
        background: url("/common/images/casco/icons/icon-square-24x24-close.svg") no-repeat center / contain;
    }
}

/* ============================================================
 * Tarifa debug panel — utas v8 (uv8-debug-wrap) mintajara
 * Csak source=session_mock + teszt szerveren jelenik meg
 * ============================================================ */
/* === Az oldal-fo H1 ("Casco biztositas kalkulator") VEDELME ===
 * A debug-blokkban biztositonkent <h1> tag-ek vannak (pl. <h1>ALLIANZ MYCAR
 * TELJES</h1> a rawDebugHtml-bol). A bongeszo CSS-szabalyok cascade alapjan
 * ezek a kesobbi szabalyokkal felulirhatjak a fo h1-et. Az alabbi szabaly a
 * fo flow-h1-et expliciten visszaallitja a main.css ertekeire (#79).
 * !important csak a flow-tarifaoldalon lévő .container-fluid h1-re vonatkozik. */
/* Mobilon (<576px) a main.css 40px-es h1 ervenyes; 576px folott 56px. A
 * !important csak azert kell, hogy a debug-blokkban szereplo biztositonkenti
 * <h1> tag-ek ne tudjak felulirni a fo "Casco biztositas kalkulator" cimet. */
main > .container-fluid > h1,
main > .container-fluid.text-center > h1 {
    font-size: 40px !important;
    font-weight: 700 !important;
    color: var(--main-text-color, #2A282D) !important;
}
@media screen and (min-width: 576px) {
    main > .container-fluid > h1,
    main > .container-fluid.text-center > h1 {
        font-size: 56px !important;
        line-height: 1.285 !important;
        margin-bottom: 48px !important;
    }
}

/* A debug-blokkon BELULI h1-eket lebutitjuk, hogy ne nezzenek ki olyan
 * dominans-nak mint a fo H1, es ne is felulirjak a globalis cascade-en. */
.cv8-debug-wrap h1,
.cv8-debug-html-wrap h1 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    margin: 12px 0 8px;
    color: var(--cv8-c-blood-orange);
}
.cv8-debug-wrap h2,
.cv8-debug-html-wrap h2 {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    margin: 10px 0 6px;
    color: var(--cv8-c-text);
}

.cv8-debug-wrap {
    margin: 32px 0;
    padding: 24px;
    background: #fafafa;
    border: 1px dashed #b7b7b7;
    border-radius: 12px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}
.cv8-debug-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--cv8-c-text);
    border-bottom: 2px solid var(--cv8-c-blood-orange);
    padding-bottom: 8px;
}
.cv8-debug-box {
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 8px;
    overflow: hidden;
}
.cv8-debug-content {
    padding: 16px;
}
.cv8-debug-h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cv8-c-blood-orange);
}
.cv8-debug-h3 small {
    font-size: 12px;
    font-weight: 400;
    color: var(--cv8-c-gray1);
}
.cv8-debug-meta {
    font-size: 13px;
    color: var(--cv8-c-text);
    margin: 4px 0;
}
.cv8-debug-meta strong {
    font-weight: 700;
}
.cv8-debug-details {
    margin-top: 8px;
}
.cv8-debug-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--cv8-c-orange);
    padding: 6px 0;
    user-select: none;
}
.cv8-debug-summary:hover {
    text-decoration: underline;
}
.cv8-debug-pre {
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px;
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 11px;
    line-height: 1.4;
    max-height: 400px;
    overflow: auto;
    margin: 8px 0 0;
    color: var(--cv8-c-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.cv8-debug-error {
    background: #fdecea;
    border-left: 3px solid var(--cv8-c-blood-orange);
    padding: 8px 12px;
    margin: 8px 0;
    color: #b00;
    font-size: 13px;
    border-radius: 4px;
}
.cv8-debug-no-offer {
    padding: 8px 12px;
    color: var(--cv8-c-gray1);
    font-style: italic;
    font-size: 13px;
}
.cv8-debug-offer {
    padding: 8px 0;
}
.cv8-debug-offer-border {
    border-bottom: 1px solid #eee;
}
.cv8-debug-offer-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.cv8-debug-offer-name {
    font-weight: 700;
    color: var(--cv8-c-text);
    font-size: 14px;
    flex: 1 1 auto;
}
.cv8-debug-offer-tier {
    font-weight: 400;
    color: var(--cv8-c-gray1);
    font-size: 12px;
}
.cv8-debug-offer-price {
    font-weight: 700;
    color: var(--cv8-c-blood-orange);
    font-size: 15px;
    white-space: nowrap;
}
.cv8-debug-offer-price-zero {
    font-weight: 400;
    color: var(--cv8-c-gray1);
    font-size: 13px;
    white-space: nowrap;
}

/* CascoTarifa belso debugcache HTML wrappere — kompakt megjelenites */
.cv8-debug-html-wrap {
    max-height: 600px;
    overflow: auto;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 8px;
    color: var(--cv8-c-text);
}
.cv8-debug-html-wrap pre,
.cv8-debug-html-wrap code,
.cv8-debug-html-wrap textarea {
    font-family: ui-monospace, "Menlo", "Consolas", monospace;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 4px 0;
}
.cv8-debug-html-wrap textarea {
    width: 100%;
    min-height: 200px;
    resize: vertical;
}

/* === Tarifa debug — biztosító-szinű függőleges csík (utas v8 minta) === */
.cv8-debug-box-row {
    display: table;
    width: 100%;
    border-collapse: separate;
}
.cv8-debug-box .cv8-debug-content {
    display: table-cell;
    vertical-align: top;
}
.cv8-debug-sav {
    display: table-cell;
    width: 25px;
    padding: 0;
    text-align: center;
    vertical-align: top;
    height: 120px;
    position: relative;
    border-radius: 8px 0 0 8px;
}
.cv8-debug-sav-pos { position: absolute; }
.cv8-debug-sav-rot {
    float: left;
    transform: rotate(90deg);
    transform-origin: left top 0;
    margin-left: 22px;
    margin-top: 14px;
}
.cv8-debug-sav-flip { transform: scale(-1, -1); }
.cv8-debug-sav h2 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    font-size: 12px;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Biztosító-szinű csíkok (utas v8 paletta + cascoegyedi szinek) */
.cv8-debug-sav-default   { background: #777; }
.cv8-debug-sav-aegon     { background: #0071BD; }
.cv8-debug-sav-allianz   { background: #154787; }
.cv8-debug-sav-allianz_mycar { background: #154787; }
.cv8-debug-sav-kh        { background: #0098CC; }
.cv8-debug-sav-uniqa     { background: #0E75BA; }
.cv8-debug-sav-generali  { background: #B41202; }
.cv8-debug-sav-kobe      { background: #448E39; }
.cv8-debug-sav-union     { background: #034D9E; }
.cv8-debug-sav-posta     { background: #0E5421; }
.cv8-debug-sav-signal    { background: #0252A4; }
.cv8-debug-sav-genertel  { background: #A72024; }
.cv8-debug-sav-wabard    { background: #3A3B59; }
.cv8-debug-sav-tir       { background: #5A8C2F; }
.cv8-debug-sav-mkb       { background: #006C3F; }
.cv8-debug-sav-groupgar  { background: #00965E; }
.cv8-debug-sav-ominimo   { background: #FF5A1F; }

/* === Compare bar (also fix sav 2+ ajanlat eseten) + modal === */
.cv8-compare-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    padding: 16px 24px;
}
.cv8-compare-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cv8-compare-bar-text {
    font-size: 16px;
    color: var(--main-text-color, #2A282D);
}
.cv8-compare-bar-text strong {
    color: var(--cv8-c-blood-orange, #E84700);
    font-weight: 700;
}
.cv8-compare-bar-btn {
    background: var(--cv8-c-blood-orange, #E84700);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.cv8-compare-bar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cv8-compare-bar-btn:not(:disabled):hover {
    background: #cc3d00;
}

.cv8-compare-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cv8-compare-modal[hidden] { display: none; }
.cv8-compare-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.cv8-compare-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 1400px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
.cv8-compare-loading {
    padding: 48px 24px;
    text-align: center;
    color: #777;
    font-size: 16px;
}
/* (#97080) cv8-compare-iframe es a tab-switch (selected/all) CSS eltavolitva —
 * a statikus iframe-alapu osszehasonlito megszunt, csak a DB-alapu marad. */
.cv8-compare-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid #e7e7e7;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.cv8-compare-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--cv8-c-text);
}
.cv8-compare-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    position: relative;
}
.cv8-compare-modal-close span {
    position: absolute;
    inset: 0;
    background: url("/common/images/casco/icons/icon-square-24x24-close.svg") no-repeat center / contain;
}
.cv8-compare-modal-body { padding: 24px 32px 32px; }

/* (#97080) A modal-body tartalmat a casco_v8_compare_ajax.php tolti be a
 * JarmuFolyamatOsszehasonlitas v8 template (osszehasonlitas_v8.php) alapjan,
 * sajat <style> blokk + .compare-table class-szel. A korabbi cv8-compare-table
 * (es a hozza tartozo cv8-compare-rowlabel / cv8-compare-logo / cv8-compare-
 * insurer-name / cv8-compare-muted / cv8-compare-coverage / cv8-compare-select)
 * CSS kihasznalatlan volt, eltavolitva. */

/* (#97080) A KGFB v8 template <section class="section-block"> + belso h2
 * "Termékek összehasonlítása" + "Vissza az eredmény oldalra" submit dupla
 * cimet/keretet okozott a modalban. A modal sajat fejlece mar tartalmazza
 * a cimet es a bezar X-et, ezert a beagyazott valtozatot elrejtjuk, es a
 * section-block doboz-megjelenest semlegesitjuk. */
.cv8-compare-modal-body .section-block {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}
.cv8-compare-modal-body .section-block__header,
.cv8-compare-modal-body .section-block__body > hr,
.cv8-compare-modal-body #vissza {
    display: none !important;
}
.cv8-compare-modal-body .section-block__body {
    padding: 0;
    margin: 0;
}

/* (#97080) A KGFB v8 template az elso (label) oszlopon $mezoCimSzelesseg-et
 * allit be (jellemzoen 400-520px), ami casco-modalban tul szeles. Kompaktra
 * korlatozzuk, hogy a biztosito-oszlopok kapjanak helyet. */
.cv8-compare-modal-body .compare-table th.oszlop:first-child,
.cv8-compare-modal-body .compare-table td.oszlop:first-child {
    width: 160px !important;
    max-width: 180px !important;
    min-width: 140px;
    text-align: center;
    vertical-align: middle;
}
/* A KGFB v8 template a labelt `.fw-bold` div-be teszi — annak az inline
 * left-aligned default-jat is kozepre allitjuk. */
.cv8-compare-modal-body .compare-table th.oszlop:first-child .fw-bold,
.cv8-compare-modal-body .compare-table td.oszlop:first-child .fw-bold {
    text-align: center;
}

/* Biztosito-fejlec logo + nev fuggoleges stack, kozepre igazitva. A KGFB v8
 * template left-aligned-on rendereli, casco-design szerint center-aligned. */
.cv8-compare-modal-body .compare-table thead tr:first-child th:not(:first-child) {
    vertical-align: middle;
    text-align: center;
}
.cv8-compare-modal-body .compare-table thead tr:first-child th:not(:first-child) .fw-bold {
    text-align: center;
}
.cv8-compare-th-logo {
    display: block;
    max-width: 120px;
    max-height: 36px;
    width: auto;
    height: auto;
    margin: 0 auto 8px;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .cv8-compare-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .cv8-compare-bar-btn { width: 100%; }
    .cv8-compare-modal-header { padding: 16px; }
    .cv8-compare-modal-body { padding: 16px; }
}

@media (max-width: 768px) {
    .cv8-offer-rating {
        flex-direction: column;
        align-items: center;
        align-self: center;
        width: 100%;
        gap: 8px;
    }
    .cv8-rating-expert {
        align-items: center;
        gap: 4px;
    }
    .cv8-rating-expert .expert-score-row {
        flex-direction: column-reverse;
        align-items: center;
        gap: 8px;
    }
    .cv8-rating-expert .expert-sub { order: 1; }
    .cv8-rating-expert .expert-score-row { order: 2; }

    .cv8-offer-body > .cv8-offer-section { display: contents; }
    .cv8-product-name { order: 1; }
    .cv8-doc-link { order: 1; }
    .cv8-marka-casco-meta { order: 1; }
    .cv8-price-block {
        align-items: stretch;
        align-self: auto;
        order: 2;
        text-align: left;
    }
    .cv8-price-yearly { justify-content: flex-end; }
    .cv8-onresz {
        align-self: stretch;
        justify-content: center;
    }
    .cv8-onresz b { color: var(--cv8-c-orange); }
    .cv8-onresz-icon {
        background: none;
        background-color: var(--cv8-c-orange);
        -webkit-mask: url("/common/images/casco/icons/icon-square-16x16-warning.svg") no-repeat center / contain;
                mask: url("/common/images/casco/icons/icon-square-16x16-warning.svg") no-repeat center / contain;
    }
    /* Mismatch overrides for mobile — a fenti narancs b/icon-szabaly felulirja
     * a desktop --mismatch piros-jat, ezert mobilon is kulon kell mondanunk. */
    .cv8-onresz--mismatch,
    .cv8-onresz--mismatch b,
    .cv8-onresz--mismatch .sep { color: #C62828; }
    .cv8-onresz--mismatch { background: #FDECEA; }
    .cv8-onresz--mismatch .cv8-onresz-icon { background-color: #C62828; }
    .cv8-coverage-block { order: 3; margin-top: 16px; }
    .cv8-coverage-heading {
        position: static;
        width: auto; height: auto;
        clip: auto;
        margin: 0;
        white-space: normal;
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;
    }
    .cv8-coverage { grid-template-columns: 1fr; }
    .cv8-coverage li { white-space: normal; }
    .cv8-select-btn { width: 100%; }
    .cv8-compare-row {
        width: auto;
        align-self: flex-end;
    }
}