/* ============================================================
   FutureMarket weboldal (profigooglehirdetes.hu)
   Kézzel írt stíluslap, keretrendszer és külső függőség nélkül.
   A színek a lenti változókban cserélhetők.
   ============================================================ */

/* ---------- Betűtípus ----------
   IBM Plex Sans, változó (variable) verzió, SIL Open Font License.
   SAJÁT TÁRHELYRŐL szolgáljuk ki, NEM a Google Fonts CDN-jéről. Ennek oka nem
   a sebesség, hanem az adatvédelem: a Google Fonts CDN-je a látogató IP-címét
   megkapná, ami hozzájárulás nélkül kifogásolható (több EU-s döntés is
   foglalkozott vele), és az adatkezelési tájékoztatót is bonyolítaná.

   Két fájl kell, és MINDKETTŐ kötelező a magyarhoz:
     - latin:     a, á, e, é, i, í, o, ó, ö, u, ú, ü ...
     - latin-ext: ő (U+0151) és ű (U+0171), a két kettős ékezetes betű.
   Ha csak a latin készlet töltődne be, a böngésző az ő és ű helyén másik
   betűtípusra váltana. Ez a leggyakoribb magyar tipográfiai hiba.

   A wght tengely 100-tól 700-ig megy, 700 fölé ne állítsuk a font-weight-et. */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 100 700;
    src: url('/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 100 700;
    src: url('/assets/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --szoveg:   #0B1220;
    --halvany:  #5B6472;
    --lap:      #F0EEE9;  /* Pantone 11-4201 Cloud Dancer: az oldal alap hattere */
    --hatter:   #FFFFFF;  /* kártyák, űrlapok: kiemelkednek a törtfehér lapról */
    --felulet:  #E7E3DB;  /* mélyebb meleg sáv a váltakozó szakaszokhoz */
    --kiemeles: #23545B;  /* WGSN + Coloro Transformative Teal (Coloro 092-37-14) */
    --kiemeles-sotet: #1A4046;
    --kiemeles-halvany: #E3ECEE;  /* halvány teal derítés ikonokhoz */
    --lablec-hatter: #122E33;     /* mély teal, a fejléc párja */
    --keret:    #DCD7CE;
    --siker:    #166534;
    --siker-hatter: #F0FDF4;
    --hiba:     #991B1B;
    --hiba-hatter: #FEF2F2;
    /* A rendszer-betűk tartalék szerepben maradnak, amíg a woff2 betöltődik,
       és akkor is, ha valamiért nem érhető el. */
    --betuk: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Alapok ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    font-family: var(--betuk);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--szoveg);
    background: var(--lap);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; }

p { margin: 0 0 1rem; }

a { color: var(--kiemeles); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kiemeles-sotet); }

:focus-visible {
    outline: 3px solid var(--kiemeles);
    outline-offset: 2px;
    border-radius: 4px;
}

.tarto {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Ugrás a tartalomhoz (akadálymentesség) */
.ugras {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--kiemeles);
    color: #fff;
    padding: 0.6rem 1rem;
    z-index: 100;
}
.ugras:focus {
    left: 0.5rem;
    top: 0.5rem;
}

/* ---------- Fejléc ---------- */

.fejlec {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kiemeles);
    border-bottom: 1px solid var(--kiemeles-sotet);
}

/* A fejléc sötét felület, ezért a benne lévő elemek világos változatot kapnak. */
.fejlec :focus-visible { outline-color: #fff; }

.fejlec-belso {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.25rem;
}

.szovedjegy {
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.szovedjegy strong { font-weight: 700; }
.szovedjegy:hover { color: #fff; opacity: 0.85; }

.fomenu {
    display: none;
    gap: 1.4rem;
    margin-left: auto;
}
.fomenu a {
    color: #D6E2E4;
    text-decoration: none;
    font-size: 0.97rem;
}
.fomenu a:hover { color: #fff; }

.fejlec-elerhetoseg {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fejlec-telefon {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fejlec-telefon:hover { color: #fff; opacity: 0.85; }

/* A fejléc gombja megfordul: fehér alap, teal felirat, hogy a teal sávon is lássék. */
.fejlec .gomb {
    background: #fff;
    color: var(--kiemeles);
    border-color: #fff;
}
.fejlec .gomb:hover {
    background: var(--kiemeles-halvany);
    border-color: var(--kiemeles-halvany);
    color: var(--kiemeles-sotet);
}

@media (min-width: 900px) {
    .fomenu { display: flex; }
    .fejlec-elerhetoseg { margin-left: 0; }
}

@media (max-width: 480px) {
    .fejlec-telefon { display: none; }
}

/* ---------- Gombok ---------- */

.gomb {
    display: inline-block;
    background: var(--kiemeles);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--kiemeles);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--betuk);
    transition: background-color 0.15s ease;
}
.gomb:hover { background: var(--kiemeles-sotet); color: #fff; }

.gomb-kicsi { padding: 0.5rem 1.05rem; font-size: 0.95rem; }

.gomb-masodlagos {
    background: transparent;
    color: var(--kiemeles);
}
.gomb-masodlagos:hover { background: var(--felulet); color: var(--kiemeles-sotet); }

/* ---------- Szakaszok ---------- */

.szakasz { padding: 4.5rem 0; }
.szakasz-szurke { background: var(--felulet); }

/* ---------- Audit szakasz (sötét teal sáv) ----------
   Az oldal egyetlen sötét tartalmi blokkja. Azért kapott kiemelést, mert ez
   az egyetlen konkrét ajánlat az oldalon. A benne lévő elemek világos
   változatot használnak, a kártyák a tealnél mélyebb tónuson ülnek. */

.szakasz-audit {
    background: var(--kiemeles);
    color: #EAF1F2;
}
.szakasz-audit h2 { color: #fff; }
.szakasz-audit .felcim { color: #B0CDD2; }
.szakasz-audit .szakasz-bevezeto { color: #D6E2E4; }

/* A kártya alaptónusa csak alig sötétebb a sávnál, ezért a keret választja el.
   A #7AA2A7 pont a 3:1 arány fölött van a teal sávon, így a kártya éle látszik. */
.szakasz-audit .kartya {
    background: var(--kiemeles-sotet);
    border-color: #7AA2A7;
}
.szakasz-audit .kartya h3 { color: #fff; }
.szakasz-audit .kartya p { color: #C5D6D9; }

.szakasz-audit .gomb {
    background: #fff;
    color: var(--kiemeles);
    border-color: #fff;
    margin-top: 2.5rem;
}
.szakasz-audit .gomb:hover {
    background: var(--kiemeles-halvany);
    border-color: var(--kiemeles-halvany);
    color: var(--kiemeles-sotet);
}

.szakasz-audit :focus-visible { outline-color: #fff; }

.felcim {
    display: block;
    color: var(--kiemeles);
    font-weight: 650;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.szakasz-bevezeto {
    max-width: 42rem;
    color: var(--halvany);
    font-size: 1.1rem;
}

/* ---------- Hero ---------- */

.hero { padding: 5rem 0 4.5rem; }

.hero h1 { max-width: 46rem; }

.hero-szoveg {
    max-width: 40rem;
    font-size: 1.2rem;
    color: var(--halvany);
    margin-bottom: 2rem;
}

.hero-gombok {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1.2rem;
}

.hero-telefon {
    color: var(--halvany);
    font-size: 0.98rem;
}
.hero-telefon a {
    color: var(--szoveg);
    font-weight: 600;
    text-decoration: none;
}
.hero-telefon a:hover { color: var(--kiemeles); }

/* ---------- Kártyák ---------- */

.racs {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .racs-2, .racs-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .racs-3 { grid-template-columns: repeat(3, 1fr); }
}

.kartya {
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    padding: 1.6rem 1.5rem;
}

.kartya h3 { margin-bottom: 0.5rem; }
.kartya p { margin: 0; color: var(--halvany); font-size: 0.99rem; }

.kartya-ikon {
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiemeles-halvany);
    border-radius: 10px;
    margin-bottom: 1rem;
    color: var(--kiemeles);
}
.kartya-ikon svg { width: 1.4rem; height: 1.4rem; }

/* ---------- Lépések ---------- */

.lepesek {
    counter-reset: lepes;
    display: grid;
    gap: 1.25rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) { .lepesek { grid-template-columns: repeat(2, 1fr); } }

.lepes {
    counter-increment: lepes;
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    padding: 1.6rem 1.5rem;
}
.lepes::before {
    content: counter(lepes, decimal-leading-zero);
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--kiemeles);
    letter-spacing: 0.06em;
    margin-bottom: 0.7rem;
}
.lepes h3 { margin-bottom: 0.5rem; }
.lepes p { margin: 0; color: var(--halvany); font-size: 0.99rem; }

/* ---------- Árazás ---------- */

.arazas-racs {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
@media (min-width: 720px) { .arazas-racs { grid-template-columns: repeat(2, 1fr); } }

.arazas-kartya {
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    padding: 1.8rem 1.6rem;
}
.arazas-kartya h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.arazas-kartya p { color: var(--halvany); margin-bottom: 0; }

.arazas-lezaras {
    margin: 2rem 0 0;
    max-width: 44rem;
    color: var(--halvany);
}

/* ---------- Rólunk ---------- */

.rolunk-racs {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 820px) { .rolunk-racs { grid-template-columns: 3fr 2fr; } }

.cegadat-kartya {
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    padding: 1.6rem 1.5rem;
    font-size: 0.99rem;
}
.cegadat-kartya h3 { margin-bottom: 0.8rem; }
.cegadat-kartya dl { margin: 0; }
.cegadat-kartya-szukebb { max-width: 34rem; margin-top: 1rem; }
.cegadat-kartya dt {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--halvany);
    margin-top: 0.9rem;
}
.cegadat-kartya dt:first-child { margin-top: 0; }
.cegadat-kartya dd { margin: 0.15rem 0 0; }

/* ---------- GYIK ---------- */

.gyik-lista {
    margin-top: 2.5rem;
    max-width: 50rem;
}

.gyik-elem {
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    margin-bottom: 0.9rem;
}
.gyik-elem summary {
    cursor: pointer;
    font-weight: 650;
    padding: 1.1rem 1.4rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.gyik-elem summary::-webkit-details-marker { display: none; }
.gyik-elem summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--kiemeles);
    flex-shrink: 0;
    line-height: 1;
}
.gyik-elem[open] summary::after { content: "\2212"; }
.gyik-elem p {
    padding: 0 1.4rem 1.2rem;
    margin: 0;
    color: var(--halvany);
}
.gyik-elem p + p { padding-top: 0; margin-top: -0.4rem; }

/* ---------- Kapcsolat ---------- */

.kapcsolat-racs {
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
    align-items: start;
}
@media (min-width: 820px) { .kapcsolat-racs { grid-template-columns: 3fr 2fr; } }

.urlap {
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    padding: 1.8rem 1.6rem;
}

.urlap-sor { margin-bottom: 1.1rem; }

.urlap-racs {
    display: grid;
    gap: 0 1.1rem;
}
@media (min-width: 560px) { .urlap-racs { grid-template-columns: 1fr 1fr; } }

.urlap label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.urlap .opcionalis {
    font-weight: 400;
    color: var(--halvany);
}

.urlap input[type="text"],
.urlap input[type="email"],
.urlap input[type="tel"],
.urlap input[type="url"],
.urlap textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--betuk);
    font-size: 1rem;
    color: var(--szoveg);
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 8px;
}
.urlap input:focus,
.urlap textarea:focus {
    outline: 2px solid var(--kiemeles);
    outline-offset: 0;
    border-color: var(--kiemeles);
}

.urlap textarea { resize: vertical; min-height: 8.5rem; }

.jelolo-sor {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 1.3rem;
}
.jelolo-sor input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.22rem;
    accent-color: var(--kiemeles);
    flex-shrink: 0;
}
.jelolo-sor label { font-weight: 400; font-size: 0.95rem; margin: 0; }

/* Honeypot mező: emberi látogató nem látja, robot kitöltheti */
.hp-mezo {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.elerhetoseg-kartya {
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    padding: 1.8rem 1.6rem;
}
.elerhetoseg-kartya h3 { margin-bottom: 1rem; }
.elerhetoseg-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.elerhetoseg-lista li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 0.9rem;
    font-size: 1rem;
}
.elerhetoseg-lista svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--kiemeles);
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.elerhetoseg-lista a {
    color: var(--szoveg);
    font-weight: 600;
    text-decoration: none;
}
.elerhetoseg-lista a:hover { color: var(--kiemeles); }
.elerhetoseg-megjegyzes {
    margin: 1.2rem 0 0;
    font-size: 0.93rem;
    color: var(--halvany);
}

/* ---------- Visszajelzések (siker, hiba) ---------- */

.uzenet-doboz {
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin: 0 0 1.5rem;
    border: 1px solid;
}
.uzenet-siker {
    background: var(--siker-hatter);
    border-color: var(--siker);
    color: var(--siker);
}
.uzenet-hiba {
    background: var(--hiba-hatter);
    border-color: var(--hiba);
    color: var(--hiba);
}
.uzenet-doboz p { margin: 0; }
.uzenet-doboz ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

.visszajelzo-szakasz { padding: 5rem 0; max-width: 46rem; }

/* ---------- Aloldalak (impresszum, adatkezelés) ---------- */

.aloldal { padding: 4rem 0 4.5rem; max-width: 50rem; }

.aloldal h2 { font-size: 1.35rem; margin-top: 2.4rem; }
.aloldal ul { padding-left: 1.3rem; }
.aloldal li { margin-bottom: 0.4rem; }

.figyelmezteto {
    background: var(--felulet);
    border: 1px solid var(--keret);
    border-left: 4px solid var(--kiemeles);
    border-radius: 8px;
    padding: 1rem 1.3rem;
    font-size: 0.97rem;
    color: var(--halvany);
    margin: 1.5rem 0 2rem;
}
.figyelmezteto p { margin: 0; }

.adat-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97rem;
    margin: 1rem 0 1.5rem;
}
.adat-tabla th,
.adat-tabla td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--keret);
}
.adat-tabla th { background: var(--felulet); font-weight: 650; }

/* ---------- Lábléc ---------- */

.lablec {
    background: var(--lablec-hatter);
    color: #C7CDD6;
    padding: 3.5rem 0 0;
    font-size: 0.97rem;
}

.lablec-racs {
    display: grid;
    gap: 2.2rem;
    padding-bottom: 2.5rem;
}
@media (min-width: 720px) { .lablec-racs { grid-template-columns: 2fr 1.5fr 1fr; } }

.szovedjegy-lablec {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
}

.lablec-szoveg { margin: 0; }

.lablec-cim {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8B93A1;
    margin: 0 0 0.9rem;
    font-weight: 650;
}

.lablec-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lablec-lista li { margin-bottom: 0.5rem; }
.lablec-lista a { color: #C7CDD6; text-decoration: none; }
.lablec-lista a:hover { color: #fff; text-decoration: underline; }

.lablec-also {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}
.lablec-also p { margin: 0; font-size: 0.9rem; color: #8B93A1; }

/* ---------- Mozgásérzékenység ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ---------- Süti sáv és beállítások panel ----------
   Csak akkor kerül a DOM-ba, ha MERES_AKTIV igaz (lásd includes/footer.php).
   Az "Elfogadom" és "Elutasítom" gomb szándékosan azonos méretű és azonos
   hangsúlyú (kitöltött, illetve keretes .gomb), egyik sem halvány link. */

.lablec-link-gomb {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-family: var(--betuk);
    color: #C7CDD6;
    text-decoration: none;
    cursor: pointer;
}
.lablec-link-gomb:hover { color: #fff; text-decoration: underline; }

.suti-sav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--hatter);
    border-top: 1px solid var(--keret);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
    padding: 1.1rem 1.25rem;
}
.suti-sav[hidden] { display: none; }

.suti-sav-belso {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.suti-szoveg { flex: 1 1 320px; }
.suti-cim { font-size: 1.05rem; margin: 0 0 0.35rem; }
.suti-szoveg p { margin: 0; font-size: 0.93rem; color: var(--halvany); }

.suti-gombok {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 0 0 auto;
}
.suti-gombok .gomb { padding: 0.7rem 1.25rem; font-size: 0.93rem; }

/* Az Elfogadom és az Elutasítom SZÁNDÉKOSAN teljesen azonos kinézetű.
   Ha az elutasítás halványabb vagy körvonalas lenne, az a döntést az
   elfogadás felé terelné. Az EDPB ezt sötét mintaként nevesíti, és
   ellentmondana az oldal hangjának is. A két döntés egyenrangú, a
   Beállítások pedig nem hozzájárulási döntés, ezért az marad másodlagos. */
.suti-gombok .suti-dontes {
    background: var(--kiemeles);
    color: #fff;
    border-color: var(--kiemeles);
    min-width: 8.5rem;
    text-align: center;
}
.suti-gombok .suti-dontes:hover { background: var(--kiemeles-sotet); border-color: var(--kiemeles-sotet); }

@media (max-width: 480px) {
    .suti-gombok { width: 100%; }
    .suti-gombok .gomb { flex: 1 1 auto; text-align: center; }
    .suti-gombok .suti-dontes { min-width: 0; }
}

.suti-panel {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}
.suti-panel[hidden] { display: none; }

.suti-panel-belso {
    pointer-events: auto;
    background: var(--hatter);
    border: 1px solid var(--keret);
    border-radius: 12px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.16);
    max-width: 30rem;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.6rem 1.6rem 1.4rem;
}
.suti-panel-belso h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.suti-panel-belso > p { color: var(--halvany); font-size: 0.95rem; }

.suti-kategoria {
    border-top: 1px solid var(--keret);
    padding: 0.9rem 0;
}
.suti-kategoria:first-of-type { border-top: none; padding-top: 0.2rem; }

.suti-kategoria-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.suti-kategoria-fejlec label { font-weight: 600; margin: 0; }
.suti-kategoria input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--kiemeles);
    flex-shrink: 0;
}
.suti-kategoria p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--halvany); }

.suti-panel-gombok {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.3rem;
    flex-wrap: wrap;
}

@media (max-width: 400px) {
    .suti-panel-gombok { flex-direction: column-reverse; }
    .suti-panel-gombok .gomb { width: 100%; text-align: center; }
}