/* ==========================================================================
   Süti-hozzájárulás — sáv + beállítás-panel (süti-hozzájárulás F2, 2026-09-13)
   Terv: 1_new/tervek/suti-hozzajarulas.md

   MIÉRT ÖNÁLLÓ FÁJL (és nem a custom.css vége)?
   A penzugyilab_hu layout SZÁNDÉKOSAN Bootstrap- és custom.css-mentes („a dizájn
   teljes CSS-e — Bootstrap nélkül"), ezért a régi, Bootstrap-osztályokra épülő
   spatie-sávot ott egy 9 szabályos INLINE pótstílussal kellett kijavítani. Ez a
   fájl teljesen önhordó (egyetlen Bootstrap-osztályt sem használ), így mind a
   három látogatói layout ugyanazt tölti be — a pótstílus-hack kivezethető.

   SZÍNEK: nincs beégetett márka-szín. A készlet semleges (sötét felület / világos
   szöveg), és minden színt egy `--ns-consent-*` változó ad, amit a weboldal saját
   stíluslapja felülírhat:
       .ns-consent { --ns-consent-surface: var(--petrol); }

   🔴 JOGI KÖVETELMÉNY: az „Elfogadom" és az „Elutasítom" gomb VIZUÁLISAN AZONOS
   (.ns-consent__btn--main) — azonos méret, szín, súly, egy kattintás. Ezt a két
   gombot soha ne különböztesd meg (kiemelés, szürkítés, méret) — az elutasítás
   nehezítése érvénytelenné teszi a hozzájárulást.
   ========================================================================== */

.ns-consent {
    /* Semleges alapkészlet — a weboldal felülírhatja */
    --ns-consent-surface: #1c2024;
    --ns-consent-surface-2: rgba(255, 255, 255, .06);
    --ns-consent-ink: #f2f4f5;
    --ns-consent-muted: rgba(242, 244, 245, .72);
    --ns-consent-line: rgba(242, 244, 245, .18);
    --ns-consent-btn-bg: #f2f4f5;
    --ns-consent-btn-ink: #15181b;
    --ns-consent-radius: 12px;
    --ns-consent-shadow: 0 -6px 28px rgba(0, 0, 0, .28);
    --ns-consent-z: 2147483000; /* a chat-widgetek és a lebegő gombok fölé */

    font-family: inherit;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   0) A sáv helyigénye — hogy a lap alja elérhető maradjon

   A sáv `position: fixed`, tehát kivan a folyamból: ELTAKARJA a tartalom alját,
   és amíg nincs döntés, a látogató nem tud a lap végére görgetni (mérve
   2026-09-14 a süti-tájékoztatón). A tényleges magasságot az ns-consent.js írja
   a `--ns-consent-bar-h` változóba; JS nélkül a tartalék 0px, tehát ez a szabály
   sosem ront el semmit.
   -------------------------------------------------------------------------- */
body {
    padding-bottom: var(--ns-consent-bar-h, 0px);
}

/* --------------------------------------------------------------------------
   1) A belépő sáv
   -------------------------------------------------------------------------- */
.ns-consent__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ns-consent-z);
    box-sizing: border-box;
    padding: 16px clamp(12px, 4vw, 32px);
    background: var(--ns-consent-surface);
    color: var(--ns-consent-ink);
    box-shadow: var(--ns-consent-shadow);
    border-top: 1px solid var(--ns-consent-line);
}

.ns-consent__bar-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.ns-consent__text {
    flex: 1 1 420px;
    min-width: 0;
}

.ns-consent__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ns-consent-ink);
}

.ns-consent__message {
    margin: 0;
    font-size: .85rem;
    color: var(--ns-consent-muted);
}

.ns-consent__message a,
.ns-consent__link {
    color: var(--ns-consent-ink);
    text-decoration: underline;
}

.ns-consent__actions {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   2) Gombok — a két döntés-gomb KÖTELEZŐEN azonos megjelenésű
   -------------------------------------------------------------------------- */
.ns-consent__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 44px; /* tapintható méret mobilon */
    padding: .6rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* A felirat EGY sorban marad: a „Mindet elfogadom" kétsoros törése magasabbra
       nyomta a gombot, mint a párját, és a sáv is nőtt vele (mérve 2026-09-14). */
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}

.ns-consent__btn:hover { opacity: .88; }

.ns-consent__btn:focus-visible {
    outline: 2px solid var(--ns-consent-btn-bg);
    outline-offset: 2px;
}

/* Mindet elfogadom + Elutasítom: SOHA ne váljanak szét vizuálisan (l. a fájl fejlécét) */
.ns-consent__btn--main {
    background: var(--ns-consent-btn-bg);
    color: var(--ns-consent-btn-ink);
}

/*
   🔴 A két döntés-gomb AZONOS SZÉLESSÉGŰ, a felirat hosszától függetlenül.
   A `flex: 1 1 0` nulla alapméretről indul, így a maradék helyen egyenlően
   osztoznak. Enélkül a hosszabb felirat (2026-09-14: „Mindet elfogadom" az
   „Elfogadom" helyett) szélesebb gombot adna, ami az elutasítást vizuálisan
   hátrébb sorolná: pontosan az, amit a jogi követelmény tilt.
*/
.ns-consent__actions .ns-consent__btn--main { flex: 1 1 0; }

/* Beállítások / Bezárás — szegélyes, de azonos méretű */
.ns-consent__btn--ghost {
    background: transparent;
    color: var(--ns-consent-ink);
    border-color: var(--ns-consent-line);
}

.ns-consent__btn--ghost:hover { background: var(--ns-consent-surface-2); }

.ns-consent__btn--quiet {
    min-width: 0;
    padding: .45rem .9rem;
    font-size: .8rem;
    font-weight: 500;
    background: transparent;
    color: var(--ns-consent-muted);
    border-color: var(--ns-consent-line);
}

/* --------------------------------------------------------------------------
   3) A beállítás-panel (modális)
   Alapból rejtett. Kétféleképpen nyílik:
     · JS-sel:  .ns-consent__panel.is-open
     · JS NÉLKÜL: a lábléc-link `#ns-consent-panel` horgonya → :target
   -------------------------------------------------------------------------- */
.ns-consent__panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--ns-consent-z) + 1);
    box-sizing: border-box;
    padding: clamp(12px, 4vw, 40px);
    background: rgba(0, 0, 0, .55);
    overflow-y: auto;
}

.ns-consent__panel:target,
.ns-consent__panel.is-open { display: flex; }

.ns-consent__dialog {
    margin: auto;
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    background: var(--ns-consent-surface);
    color: var(--ns-consent-ink);
    border-radius: var(--ns-consent-radius);
    border: 1px solid var(--ns-consent-line);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    padding: clamp(18px, 3vw, 28px);
}

.ns-consent__dialog-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    /* KÖTELEZŐ kimondani: a panel háttere fix sötét, a weboldal saját h1–h6 színe
       (pl. egy sötét cím-szín) itt olvashatatlan lenne. A betűtípust SZÁNDÉKOSAN
       örökli — az igazodik a weboldal sémájához, a kontraszt nem kockáztatható. */
    color: var(--ns-consent-ink);
}

.ns-consent__intro {
    margin: 0 0 18px;
    font-size: .85rem;
    color: var(--ns-consent-muted);
}

/* --------------------------------------------------------------------------
   4) Kategória-sorok + kapcsoló
   A „szükséges" kapcsoló LETILTOTT, de LÁTSZIK és bekapcsolt állapotot mutat —
   a látogató lássa, hogy van ilyen kategória, és hogy nem kikapcsolható.
   -------------------------------------------------------------------------- */
.ns-consent__group {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--ns-consent-line);
}

.ns-consent__group:last-of-type { border-bottom: 1px solid var(--ns-consent-line); }

.ns-consent__group-text { flex: 1 1 auto; min-width: 0; }

.ns-consent__group-label {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.ns-consent__group-desc {
    margin: 0;
    font-size: .8rem;
    color: var(--ns-consent-muted);
}

.ns-consent__locked {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--ns-consent-line);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ns-consent-muted);
    vertical-align: middle;
}

/* Kapcsoló — natív checkbox, saját megjelenéssel (nincs könyvtár-függés) */
.ns-consent__switch {
    flex: 0 0 auto;
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    margin-top: 2px;
}

.ns-consent__switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ns-consent__switch-ui {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--ns-consent-surface-2);
    border: 1px solid var(--ns-consent-line);
    transition: background-color .15s ease;
    pointer-events: none;
}

.ns-consent__switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ns-consent-ink);
    transition: transform .15s ease;
}

.ns-consent__switch input:checked + .ns-consent__switch-ui {
    background: var(--ns-consent-btn-bg);
}

.ns-consent__switch input:checked + .ns-consent__switch-ui::after {
    background: var(--ns-consent-btn-ink);
    transform: translateX(20px);
}

.ns-consent__switch input:focus-visible + .ns-consent__switch-ui {
    outline: 2px solid var(--ns-consent-btn-bg);
    outline-offset: 2px;
}

.ns-consent__switch input:disabled { cursor: not-allowed; }

.ns-consent__switch input:disabled + .ns-consent__switch-ui { opacity: .55; }

/* --------------------------------------------------------------------------
   5) A panel lábrésze
   -------------------------------------------------------------------------- */
.ns-consent__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ns-consent__revoke {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ns-consent-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* A `hidden` attribútumot a fenti display:flex felülírná — ezért kimondva */
.ns-consent__revoke[hidden] { display: none; }

.ns-consent__revoke-hint {
    margin: 0;
    font-size: .78rem;
    color: var(--ns-consent-muted);
}

.ns-consent__status {
    margin: 12px 0 0;
    font-size: .82rem;
    color: var(--ns-consent-ink);
}

/* --------------------------------------------------------------------------
   6) Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .ns-consent__actions { width: 100%; }

    .ns-consent__actions .ns-consent__btn,
    .ns-consent__panel-actions .ns-consent__btn {
        flex: 1 1 100%;
    }

    .ns-consent__group { flex-direction: row-reverse; }
}

@media (prefers-reduced-motion: reduce) {
    .ns-consent__btn,
    .ns-consent__switch-ui,
    .ns-consent__switch-ui::after { transition: none; }
}

/* --------------------------------------------------------------------------
   7) Mentés-visszajelzés buborék (a panel bezárása után, magától eltűnik)
      user-kérés 2026-09-14 — a mentés zárja a panelt, a megerősítés ide kerül.
   -------------------------------------------------------------------------- */
.ns-consent__toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: calc(var(--ns-consent-z) + 2);
    max-width: min(92vw, 520px);
    box-sizing: border-box;
    padding: 12px 18px;
    border-radius: var(--ns-consent-radius);
    background: var(--ns-consent-surface);
    color: var(--ns-consent-ink);
    border: 1px solid var(--ns-consent-line);
    box-shadow: var(--ns-consent-shadow);
    font-size: .95em;
    text-align: center;
    animation: ns-consent-toast-in .18s ease-out;
}

@keyframes ns-consent-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ns-consent__toast { animation: none; }
}

/* --------------------------------------------------------------------------
   8) JOGI FELUGRÓ (2026-09-14) — a jogi szöveg a lap elhagyása nélkül

   Önhordó, VILÁGOS színkészlet: a jogi szöveg hosszú olvasnivaló, a sáv sötét
   felülete erre alkalmatlan. A `.ns-consent` változói ide szándékosan nem érnek el.
   -------------------------------------------------------------------------- */
.ns-legal-modal {
    position: fixed;
    inset: 0;
    z-index: calc(2147483000 + 3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 3vw, 32px);
    background: rgba(15, 18, 20, .55);
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.55;
}

/* A `hidden` attribútumot a flex felülírná, ezért kimondjuk */
.ns-legal-modal[hidden] { display: none !important; }

.ns-legal-modal__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    box-sizing: border-box;
    background: #ffffff;
    color: #1c2024;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.ns-legal-modal__fejlec {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px clamp(16px, 3vw, 28px);
    border-bottom: 1px solid #e4e7ea;
    background: #f7f8f9;
}

.ns-legal-modal__cim {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    min-width: 0;
}

.ns-legal-modal__x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #5b6369;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ns-legal-modal__x:hover,
.ns-legal-modal__x:focus-visible { background: #e9ecef; color: #1c2024; }

.ns-legal-modal__torzs {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(16px, 3vw, 28px);
    -webkit-overflow-scrolling: touch;
}

/* A markdownból jövő tartalom olvasható alapbeállításai (a felugró önhordó) */
.ns-legal-modal__torzs h1 { font-size: 1.4rem; margin: 0 0 .8em; }
.ns-legal-modal__torzs h2 { font-size: 1.15rem; margin: 1.6em 0 .6em; }
.ns-legal-modal__torzs h3 { font-size: 1.02rem; margin: 1.3em 0 .5em; }
.ns-legal-modal__torzs p,
.ns-legal-modal__torzs li { font-size: .95rem; }
.ns-legal-modal__torzs table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .88rem; }
.ns-legal-modal__torzs th,
.ns-legal-modal__torzs td { border: 1px solid #dee2e6; padding: 6px 8px; text-align: left; vertical-align: top; }
.ns-legal-modal__torzs th { background: #f1f3f5; }
.ns-legal-modal__torzs code { font-size: .86em; background: #f1f3f5; padding: 1px 4px; border-radius: 4px; }
.ns-legal-modal__torzs a { color: #0b6bcb; }

.ns-legal-modal__lablec {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px clamp(16px, 3vw, 28px);
    border-top: 1px solid #e4e7ea;
    background: #f7f8f9;
}

/* A Bezárás gomb a sáv gomb-stílusát használja, de VILÁGOS alapon */
.ns-legal-modal__lablec .ns-consent__btn--ghost {
    color: #1c2024;
    border-color: #c9ced3;
}

.ns-legal-modal__teljes {
    font-size: .88rem;
    color: #5b6369;
}

@media (max-width: 640px) {
    .ns-legal-modal { padding: 0; }
    .ns-legal-modal__dialog { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
    .ns-legal-modal__lablec { justify-content: center; }
}

/* Nyomtatásban nincs helye */
@media print {
    .ns-consent__bar,
    .ns-consent__toast,
    .ns-legal-modal,
    .ns-consent__panel { display: none !important; }
}

/* --------------------------------------------------------------------------
   4) Beágyazás-kapu — harmadik-fél videó (YouTube) felhívása a poszter fölött
      (D13, 2026-09-14 · komponens: components/ns-consent-gate.blade.php ·
      viselkedés: public/js/custom.js → window.nsConsentGate)
      A konténer (.youtube-video-container) position: relative — a felhívás azt
      teljesen lefedi, így a play-overlay hozzájárulás nélkül nem kattintható.
      Önhordó (a .ns-consent változói itt nem érnek el): saját alap-színek.
   -------------------------------------------------------------------------- */
.ns-consent-gate {
    position: absolute;
    inset: 0;
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    overflow: hidden;
    text-align: center;
    background: rgba(28, 32, 36, .84);
    color: #f2f4f5;
    font-family: inherit;
    line-height: 1.4;
    cursor: default;
}

/* A `hidden` attribútum a display:flex-et nem győzné le — itt igen */
.ns-consent-gate[hidden] { display: none !important; }

.ns-consent-gate__text {
    margin: 0;
    font-size: clamp(.68rem, 1.6vw, .85rem);
    color: rgba(242, 244, 245, .9);
}

.ns-consent-gate__link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f2f4f5;
    color: #15181b;
    font-size: clamp(.7rem, 1.6vw, .85rem);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ns-consent-gate__link:hover,
.ns-consent-gate__link:focus-visible {
    opacity: .88;
    color: #15181b;
    text-decoration: none;
}

/* Termék-galéria: a fő kép területe kapja a szunnyadó felhívást (position-őr, ha a
   galéria saját stílusa nem pozicionálná) */
.product-image-1-main:has(> .ns-consent-gate) { position: relative; }