/* =============================================
   FEDÉSKALKULÁTOR
   ============================================= */

:root {
    --fk-error: #C0392B;
    --fk-border: #E3DFD6;
    --fk-card-bg: #FFFFFF;
}

/* ── Lépésjelző ─────────────────────────────── */
.fk-lepesjelzo {
    background: var(--color-cream);
    padding: 32px 0 40px;
}

.fk-lepesjelzo__track {
    height: 14px;
    background: #F8F7F4;
    border-radius: 7px;
    position: relative;
    margin-bottom: 20px;
}

.fk-lepesjelzo__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    height: 100%;
    background: #8C8880;
    border-radius: 7px;
    transition: width 0.5s ease;
}

.fk-lepesjelzo__pontok {
    display: flex;
    justify-content: space-between;
}

.fk-lepesjelzo__pont {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    border: 1px solid #8C8880;
    background: none;
    color: #8C8880;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition), color var(--transition);
}

.fk-lepesjelzo__pont.fk-aktiv {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
    font-weight: var(--fw-bold);
}

/* ── Screen / form váz ──────────────────────── */
.fk-form {
    display: block;
}

.fk-screen[hidden] {
    display: none;
}

/* Biztonsági háló: ez a szekció sosem tolhatja ki az oldalt oldalra
   (a táblázat saját, szándékos oldalra-görgetését a .fk-tabla-wrap
   overflow-x:auto-ja külön, önállóan kezeli) */
.fk-screen {
    overflow-x: hidden;
}

.fk-screen__inner {
    padding-top: 64px;
    padding-bottom: 80px;
    max-width: 1950px;
}

.fk-cim {
    font-size: 40px;
    text-align: left;
    margin: 0 0 12px;
}

.fk-lead {
    font-size: var(--fs-md);
    line-height: 1.5;
    margin: 0 0 48px;
    max-width: 720px;
}

/* ── Kérdés blokk ───────────────────────────── */
.fk-kerdes {
    padding: 40px 0;
    border-bottom: 1px solid var(--fk-border);
}

.fk-kerdes:first-of-type {
    padding-top: 0;
}

.fk-kerdes--info {
    border-bottom: none;
}

.fk-kerdes__fejlec {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.fk-kerdes__szam {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: var(--fw-bold);
    color: var(--color-mid-gray);
    border-right: 1px solid var(--fk-border);
    padding: 6px 12px;
}

.fk-kerdes__fejlec h3 {
    margin: 0;
    font-size: 24px;
}

.fk-kerdes__leiras {
    margin: 0 0 24px;
    color: var(--color-text);
}

.fk-kerdes__alkerdes {
    font-weight: var(--fw-semibold);
    margin: 24px 0 12px;
}

/* ── Kép-kártyák (radio) ────────────────────── */
.fk-kartya-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}

.fk-kartya-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Q8/Q9/Q10 – a kis kártyák fix méretűek (438x124px), ezért ezt a 3
   konkrét rácsot flex-wrap-re váltjuk a megosztott .fk-kartya-grid
   (1fr oszlopos) helyett – így a kártyák a saját méretükben jelennek
   meg, és a képernyő szűkülésével természetesen egymás alá tördelődnek,
   nem a rácsoszlopok arányában zsugorodnak. */
[data-fk-radio="leszorito-tipus"],
[data-fk-radio="oldalzaro"],
[data-fk-checkbox="fali-nyereg"] {
    display: flex;
    flex-wrap: wrap;
}

.fk-kep-kartya {
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-md);
    padding: 20px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-body);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* A .fk-kep-kartya__kep egy FIX MÉRETŰ, szorosan a képre illeszkedő
   overflow:hidden "maszk". Hoverre a KÉP nagyítódik a maszkon belül
   (mintha bezoomolnánk), a maszk mérete – így a kártya szélétől mért
   térköz is – sosem változik. (Az overflow:hidden szándékosan nincs a
   külső .fk-kep-kartya-n, mert az levágná a kártya saját hover
   box-shadow-ját is.) */
.fk-kep-kartya__kep {
    display: block;
    overflow: hidden;
}

.fk-kep-kartya__kep img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.fk-kep-kartya:hover .fk-kep-kartya__kep img {
    transform: scale(1.04);
}

/* Nagy kártyák (Q1, Q7): a maszk 4:3 arányú, teljes szélességű – a kártya
   és a kép így mindig egyszerre, arányosan skálázódik együtt. A sarka
   ugyanazzal a sugárral van lekerekítve, mint a kártya kerete. */
.fk-kep-kartya:not(.fk-kep-kartya--kicsi) .fk-kep-kartya__kep {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
}

/* Kis kártyák (Q8/Q9/Q10): fix 438x124px, kép balra (a maszk mindig
   100x100, akkor is, ha a benne lévő kép kisebb, pl. a "Nem kérek" ikon –
   az középre igazítva jelenik meg a maszkon belül), felirat+alcím jobbra,
   függőlegesen középre igazítva. */
.fk-kep-kartya--kicsi {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 438px;
    max-width: 100%;
    height: 124px;
    padding: 12px 20px;
}

.fk-kep-kartya--kicsi .fk-kep-kartya__kep {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fk-kep-kartya--kicsi .fk-kep-kartya__kep img {
    object-fit: contain;
    background: none;
}

.fk-kep-kartya__ikon {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
}

.fk-kep-kartya__szoveg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.fk-kep-kartya__label {
    font-size: 16px;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

/* Nagy kártyák (Q1, Q7): mindig rövid, csak a szöveg szélességéig érő
   aláhúzás a felirat alatt – inline-block, hogy a border-bottom a
   szöveghez igazodjon, ne a teljes kártya szélességéhez. */
.fk-kep-kartya:not(.fk-kep-kartya--kicsi) .fk-kep-kartya__label {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1px solid #C8C3B8;
}

.fk-kep-kartya--kicsi .fk-kep-kartya__label {
    font-size: 18px;
}

/* Kis kártyák: az alsó vonal csak akkor jelenjen meg, ha van alatta
   alcím is – a "Nem kérek..." kártyáknál (nincs alcím, a label az
   egyetlen gyerek a szöveg-wrapperben) nem kell. Itt is inline-block,
   hogy a vonal csak a szöveg szélességéig érjen. */
.fk-kep-kartya--kicsi .fk-kep-kartya__szoveg > .fk-kep-kartya__label:not(:only-child) {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1px solid #C8C3B8;
}

.fk-kep-kartya__alcim {
    font-size: var(--fs-sm);
    color: var(--color-mid-gray);
    margin-top: -8px;
}

.fk-kep-kartya--kicsi .fk-kep-kartya__alcim {
    color: #4E4A45;
    margin-top: 0;
}

.fk-kep-kartya:hover {
    border-color: var(--color-terracotta);
}

.fk-kep-kartya[aria-checked="true"],
.fk-kep-kartya[aria-pressed="true"] {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 1px var(--color-terracotta);
}

/* ── Pill gombok (Q3 vastagság) ─────────────── */
.fk-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fk-pill {
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-full);
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.fk-pill:hover {
    border-color: var(--color-terracotta);
}

.fk-pill[aria-checked="true"] {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-text-inv);
}

/* ── Méret mezők (Q2) ───────────────────────── */
.fk-meret-mezok {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.fk-meret-mezo {
    flex: 1 1 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.fk-meret-mezo__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--fw-semibold);
}

.fk-meret-ikon {
    display: inline-flex;
    width: 72px;
    flex-shrink: 0;
}

.fk-meret-ikon svg {
    width: 100%;
    height: auto;
    display: block;
}

.fk-meret-mezo__input-wrap {
    display: flex;
    align-items: center;
    max-width: 200px;
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-sm);
    background: var(--fk-card-bg);
    padding: 4px 16px;
}

.fk-meret-mezo__input-wrap input {
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    padding: 10px 0;
    width: 100%;
    background: transparent;
    color: var(--color-text);
}

.fk-meret-mezo__input-wrap:focus-within {
    border-color: var(--color-terracotta);
}

.fk-meret-mezo__egyseg {
    color: var(--color-mid-gray);
    font-size: var(--fs-sm);
}

/* ── Hibaüzenet ─────────────────────────────── */
.fk-hiba {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fk-error);
    font-size: var(--fs-sm);
    margin: 12px 0 0;
}

.fk-hiba::before {
    content: '!';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--fk-error);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-bold);
}

.fk-hiba[hidden] {
    display: none;
}

/* ── Info doboz (túllógás) ──────────────────── */
.fk-info-doboz {
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-top: 20px;
}

.fk-info-doboz__cim {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: var(--fw-bold);
    margin: 0 0 12px;
}

.fk-info-doboz__cim img {
    width: 47px;
    height: 47px;
}

.fk-info-doboz p {
    margin: 0 0 12px;
}

.fk-info-doboz__tablak {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 16px 0;
}

.fk-info-doboz table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.fk-info-doboz th,
.fk-info-doboz td {
    border: 1px solid var(--fk-border);
    padding: 8px 12px;
    text-align: left;
}

/* ── Termékkártyák (Q4, JS-ből töltve) ──────── */
.fk-termek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.fk-termek-kartya {
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* .fk-termek-kartya__kep: fix méretű, szorosan a képre illeszkedő
   overflow:hidden "maszk" – ua. minta, mint a .fk-kep-kartya__kep-nél,
   hogy a hover-nagyítás a maszkon belül maradjon, a kártya szélétől mért
   térköz sosem változzon. (Az overflow:hidden szándékosan nincs a külső
   .fk-termek-kartya-n, mert az levágná a saját hover box-shadow-ját.) */
.fk-termek-kartya__kep {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    background: var(--color-cream-light);
}

.fk-termek-kartya__kep img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.fk-termek-kartya:hover .fk-termek-kartya__kep img {
    transform: scale(1.04);
}

.fk-termek-kartya__nev {
    font-weight: var(--fw-semibold);
    display: block;
    margin-bottom: 4px;
}

.fk-termek-kartya__alcim {
    font-size: var(--fs-sm);
    color: var(--color-mid-gray);
    display: block;
    margin-bottom: 8px;
}

.fk-termek-kartya__ar {
    font-weight: var(--fw-bold);
    color: var(--color-terracotta);
}

.fk-termek-kartya[aria-checked="true"] {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 1px var(--color-terracotta);
}

/* ── Szín pill-ek (Q5, Q8.2, Q9.0) ──────────── */
.fk-szin-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fk-szin-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-full);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition);
}

.fk-szin-pill__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fk-szin, var(--color-mid-gray));
    flex-shrink: 0;
}

.fk-szin-pill:hover {
    border-color: var(--color-terracotta);
}

.fk-szin-pill[aria-checked="true"] {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 1px var(--color-terracotta);
    font-weight: var(--fw-semibold);
}

/* ── Üres állapot (adat lekérdezés előtt) ────── */
.fk-ures-allapot {
    color: var(--color-mid-gray);
    font-style: italic;
    margin: 0;
}

/* ── Mi alapján számolunk (Q6) ──────────────── */
.fk-mialapjan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-md);
    padding: 28px;
}

.fk-mialapjan__szoveg p {
    margin: 0 0 12px;
}

.fk-mialapjan__szoveg p:last-child {
    margin-bottom: 0;
}

.fk-mialapjan__kep {
    border-radius: var(--radius-sm);
    width: 100%;
}

/* ── Stepper (Q10.1) ────────────────────────── */
.fk-stepper-sor {
    margin-top: 24px;
}

.fk-stepper-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.fk-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    background: var(--fk-card-bg);
}

.fk-stepper__label {
    font-size: var(--fs-sm);
}

.fk-stepper__ctrl {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.fk-stepper__ctrl button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--fk-border);
    background: var(--color-cream-light);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--fs-md);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fk-stepper__ctrl output {
    min-width: 48px;
    text-align: center;
    font-weight: var(--fw-semibold);
}

/* ── Navigációs gombok ──────────────────────── */
.fk-nav-gombok {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 48px;
}

.fk-nav-gombok--vegen {
    justify-content: flex-end;
}

.fk-nav-gombok--03-felso {
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
}

/* A weboldal globális gomb-stílusát követi (ld. style.css button{} és
   termekek-oldal.css .shop-kategoria__btn): Syne 18px 700, teli lekerekítés,
   14px/32px padding, és a jellegzetes "nyíl jobbra csúszik hoverre" hatás
   (gap 16px → 28px, 0.35s). A színek Fedéskalkulátor-specifikusak
   maradnak (--sotet/--terrakotta/--vazlat/--fekete módosítók). */
.fk-btn {
    border-radius: var(--radius-full);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 32px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: gap 0.35s ease, opacity var(--transition), background var(--transition);
}

.fk-btn:hover {
    gap: 28px;
}

.fk-btn__nyil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

/* "Előző" gombok – ugyanaz az ikon, csak vízszintesen tükrözve, hogy
   balra mutasson. */
.fk-btn__nyil--vissza {
    transform: scaleX(-1);
}

.fk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fk-btn--sotet {
    background: var(--color-text);
    color: var(--color-text-inv);
}

.fk-btn--sotet:disabled {
    background: var(--color-mid-gray);
}

.fk-btn--terrakotta {
    background: var(--color-terracotta);
    color: var(--color-text-inv);
}

.fk-btn--vazlat {
    background: transparent;
    border: 1px solid var(--color-text);
    color: var(--color-text);
}

.fk-btn--fekete {
    background: #000000;
    color: #FAF8F4;
}

/* ── Hover-árnyék – KIZÁRÓLAG a kártyákon (.fk-kep-kartya, .fk-termek-
   kartya), nem az általános gombokon (fk-btn, bezáró X, fk-link-btn stb.) ── */
.fk-kep-kartya:hover,
.fk-termek-kartya:hover {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
}

/* ── 03. screen táblázat ────────────────────── */
.fk-cim--bal,
.fk-lead--bal {
    text-align: left;
}

/* ── Táblázat-lapozó sáv (≤780px) ────────────
   Alapból rejtett – csak akkor jelenik meg, amikor a táblázat már
   ténylegesen oldalra görgethető (ld. média-lekérdezés lentebb). A
   .kateg-arrow--prev/--next osztályokat szándékosan a főoldali
   Termékeink-szekció lapozójával közösen használjuk (ugyanaz a CSS,
   már be van töltve minden oldalon). */
.fk-tabla-nav {
    display: none;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.fk-tabla-scrollbar {
    flex: 1;
    height: 6px;
    background: var(--fk-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.fk-tabla-scrollbar__thumb {
    height: 100%;
    width: 100%;
    background: var(--color-terracotta);
    border-radius: var(--radius-full);
}

@media only screen and (max-width: 780px) {
    .fk-tabla-nav {
        display: flex;
    }

    .fk-nav-gombok--03-felso {
        margin-top: 4rem;
    }
}

.fk-tabla-wrap {
    overflow-x: auto;
    /* flex/grid szülőben is zsugorodhasson a tartalma alá, ne az feszítse
       ki az oldalt – enélkül egy flex/grid item alapból nem megy a saját
       tartalma minimális szélessége alá */
    min-width: 0;
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-md);
}

.fk-tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--fk-card-bg);
    min-width: 640px;
}

.fk-tabla th,
.fk-tabla td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--fk-border);
    font-size: var(--fs-sm);
}

.fk-tabla thead th {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.fk-tabla tfoot th {
    text-align: right;
    font-weight: var(--fw-semibold);
}

.fk-tabla td[data-fk-osszeg] {
    white-space: nowrap;
}

.fk-tabla tfoot tr:last-child th,
.fk-tabla tfoot tr:last-child td {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    border-bottom: none;
}

.fk-tabla__ures {
    color: var(--color-mid-gray);
    font-style: italic;
    text-align: center !important;
    padding: 32px 20px !important;
}

/* ── Szállítási megjegyzés (ár táblázat alatt) ──────────────────────── */
.fk-szallitas-megjegyzes {
    display: flex;
    gap: 16px;
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-top: 20px;
}

.fk-szallitas-megjegyzes__ikon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
}

.fk-szallitas-megjegyzes p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text);
}

/* ── Figyelmeztetések (hiányzó termék-hozzárendelés a számításban) ─── */
.fk-figyelmeztetesek {
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-error);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-top: 20px;
}

.fk-figyelmeztetesek p {
    color: var(--fk-error);
    font-size: var(--fs-sm);
    margin: 0;
}

.fk-figyelmeztetesek p + p {
    margin-top: 8px;
}

.fk-figyelmeztetesek[hidden] {
    display: none;
}

/* ── Hiba-összegzés a Következő gomb felett (03. screen elé lépéskor,
   ha valamelyik kötelező kérdés hiányzik – így akkor is látszik, ha a
   hiányzó mező inline hibaüzenete feljebb, a látható területen kívül
   van) ─────────────────────────────────────── */
.fk-hiba-osszegzes {
    background: var(--fk-card-bg);
    border: 1px solid var(--fk-error);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-top: 24px;
}

.fk-hiba-osszegzes p {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fk-error);
    font-size: var(--fs-sm);
    margin: 0;
}

.fk-hiba-osszegzes p::before {
    content: '!';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--fk-error);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-bold);
}

.fk-hiba-osszegzes p + p {
    margin-top: 8px;
}

.fk-hiba-osszegzes[hidden] {
    display: none;
}

/* ── Modalok ────────────────────────────────── */
.fk-modal[hidden] {
    display: none;
}

.fk-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.fk-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(35, 43, 38, 0.6);
}

.fk-modal__doboz {
    position: relative;
    background: var(--fk-card-bg);
    border-radius: var(--radius-md);
    padding: 40px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
}

.fk-modal__x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.fk-modal__ikon {
    width: 81px;
    height: 81px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.fk-modal__ikon img {
    width: 81px;
    height: 81px;
}

.fk-modal__cim {
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    margin: 0 0 2.5rem;
}

#fk-modal-ajanlatkeres-cim {
    font-family: var(--font-body);
    font-size: 18px;
}

.fk-modal__apro {
    font-size: 14px;
}

.fk-modal__mezo {
    display: block;
    margin-bottom: 12px;
    text-align: left;
    position: relative;
}

/* Kötelező mező jelölése – natív placeholder szövegen belül nem lehet
   csak egy karaktert (a csillagot) külön formázni/pirosra színezni,
   ezért egy külön, a mező jobb szélén lebegő, kis méretű ("index"-szerű)
   csillag jelzi a kötelezőséget. */
.fk-modal__csillag {
    position: absolute;
    top: 10px;
    right: 22px;
    font-size: 12px;
    line-height: 1;
    color: var(--fk-error);
    pointer-events: none;
}

/* A Kapcsolat oldal űrlap-mezőinek stílusát követi (ld. kapcsolat-urlap.css) –
   nincs keret, csak fókuszban jelenik meg egy finom, terrakotta színű
   fényudvar (a böngésző alapértelmezett, sötét fókusz-körvonala helyett). */
.fk-modal__mezo input,
.fk-modal__mezo textarea {
    width: 100%;
    background: var(--color-cream-light);
    border: none;
    border-radius: var(--radius-full);
    padding: 14px 26px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
    outline: none;
    display: block;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow var(--transition);
    max-height: 52px;
}

.fk-modal__mezo input:focus,
.fk-modal__mezo textarea:focus {
    box-shadow: 0 0 0 2px rgba(217, 126, 74, 0.45);
}

/* A Megjegyzés mező alaphelyzetben ugyanakkora, mint a fölötte lévő
   mezők (52px) – a plusz Település mező miatt mobilon így az űrlap
   alapból kiférjen a kijelző magasságába, görgetés nélkül. A JS
   (autoNoveloTextarea) minden sortöréskor/begépeléskor magasítja, ekkor
   már megengedett, hogy az űrlap (és szükség esetén a modal doboz)
   lejjebb nőjön/görgessen – ld. .fk-modal__doboz max-height/overflow. */
.fk-modal__mezo textarea {
    border-radius: var(--radius-md);
    resize: none;
    height: 52px;
    min-height: 52px;
    max-height: none;
    overflow-y: hidden;
    line-height: 1.6;
    transition: height 0.15s ease;
}

.fk-modal__mezo input::placeholder,
.fk-modal__mezo textarea::placeholder {
    color: var(--color-text);
    opacity: 0.55;
    font-family: var(--font-body);
}

/* Bot-csali mező – vizuálisan rejtve, de a képernyőolvasók és a valós
   felhasználók számára sosem kitölthető (ld. inc/fedeskalkulator-ajanlat.php). */
.fk-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fk-modal__jogi {
    font-size: 12px;
    margin: 8px 0 20px;
    text-align: left;
}

.fk-modal__gombsor {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 8px;
}

.fk-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-terracotta);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

/* ── Reszponzív ─────────────────────────────── */
@media only screen and (max-width: 910px) {
    .fk-pill {
        padding: 10px 28px;
    }
}

@media only screen and (max-width: 900px) {
    .fk-mialapjan {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 799px) {
    .fk-kartya-grid,
    .fk-kartya-grid--3,
    .fk-info-doboz__tablak,
    .fk-stepper-grid {
        grid-template-columns: 1fr;
    }

    .fk-kep-kartya {
        padding: 20px 20px 30px 20px;
    }

    /* A 2 méret-mező (Szélesség/Hosszúság) egymás alá kerül */
    .fk-meret-mezok {
        flex-direction: column;
        margin-bottom: 3rem;
    }

    .fk-meret-mezo {
        flex: none;
    }

    .fk-kep-kartya--kicsi {
        padding: 10px 16px;
    }

    .fk-lepesjelzo__pont {
        width: 32px;
        height: 32px;
    }

    .fk-cim {
        font-size: 32px;
    }

    .fk-nav-gombok--03-felso,
    .fk-nav-gombok {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Hover-nyíl animáció letiltása mobilon (tap = "beragadt" hover,
       ami tördelte a feliratot) – a padding mindenhol egységesen 10px 32px */
    .fk-btn:hover {
        gap: 16px;
    }
}

/* ≤ 540px – finomhangolt szövegméretek */
@media only screen and (max-width: 540px) {
    .fk-lead {
        font-size: 16px;
    }

    .fk-kerdes__fejlec h3 {
        line-height: 1.1;
    }

    .fk-termek-kartya__nev {
        font-size: 18px;
    }

    .fk-kerdes__alkerdes {
        line-height: 1.3;
        margin: 24px 0;
    }
}

/* ≤ 630px – 03. screen alsó sora (Előző / Tovább a Főoldalra): már nem
   gomb, hanem egyszerű, nyilas link – a szülő .fk-nav-gombok
   justify-content: space-between-je miatt marad a bal/jobb széli igazítás */
@media only screen and (max-width: 630px) {
    [data-fk-prev="2"],
    [data-fk-kilepes-link] {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        width: auto;
        color: var(--color-text);
        font-family: var(--font-body);
        font-weight: var(--fw-bold);
        font-size: 16px;
        gap: 8px;
    }

    [data-fk-prev="2"]:hover,
    [data-fk-kilepes-link]:hover {
        gap: 8px;
    }

    /* Kör eltüntetése a nyíl körül (az SVG-ben lévő <circle> elrejtése)
       + kisebb, a szöveghez illő méretű ikon */
    [data-fk-prev="2"] .fk-btn__nyil svg,
    [data-fk-kilepes-link] .fk-btn__nyil svg {
        width: 18px;
        height: 18px;
    }

    [data-fk-prev="2"] .fk-btn__nyil circle,
    [data-fk-kilepes-link] .fk-btn__nyil circle {
        stroke: none;
    }
}

/* ≤ 550px – 03. screen felső sora (Letöltés / Ajánlatkérés): teljes
   szélesség, egymás alá tördelve */
@media only screen and (max-width: 550px) {
    .fk-nav-gombok--03-felso .fk-btn--vazlat,
    .fk-nav-gombok--03-felso .fk-btn--terrakotta {
        width: 100%;
    }
}

/* ≤ 499px – 01. és 02. screen gombjai teljes szélességűek + modal
   finomítások */
@media only screen and (max-width: 499px) {
    [data-fk-screen="1"] .fk-btn--sotet,
    [data-fk-screen="2"] .fk-btn--vazlat,
    [data-fk-screen="2"] .fk-btn--sotet {
        width: 100%;
    }

    /* Csak a 03. screen alsó paddingja csökken */
    [data-fk-screen="3"] .fk-screen__inner {
        padding-bottom: 1rem;
    }

    /* Modal: ne legyen belső görgetés – az ikon és a cím kisebb, hogy a
       teljes doboz kiférjen a mobil kijelző magasságába */
    .fk-modal__doboz {
        max-height: none;
        overflow-y: visible;
    }

    .fk-modal__ikon,
    .fk-modal__ikon img {
        width: 48px;
        height: 48px;
    }

    .fk-modal__cim {
        font-size: 24px;
        margin-bottom: 1.5rem;
    }

    .fk-modal__doboz .fk-btn--terrakotta {
        width: 100%;
    }
}