/* ═══════════════════════════════════════════════════════════════════════════
   FPE — Glassmorphism réteg
   Breznai András · breznaiandras.com

   Ezt a fájlt MINDEN oldal a saját <style> blokkjai UTÁN linkeli be, közvetlenül
   a </head> előtt — így azonos specificitásnál ez nyer.

   Alapelv: egyetlen szín sincs bedrótozva. Minden felület az adott oldal saját
   CSS változóiból (--card, --accent, --text-primary) származik color-mix()-szel,
   ezért a sötét és a világos téma is megtartja az arculatát, és a kék
   kalkulátorok sem lesznek aranyszínűek.

   Visszavonás: töröld a <link ... glass.css> sorokat, vagy nevezd át ezt a fájlt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --glass-blur: 18px;
  --glass-saturate: 1.45;

  /* Felületek az oldal saját kártyaszínéből.
     FONTOS: előbb fehérrel világosítunk, csak utána tesszük áttetszővé. Üveg csak
     akkor olvasható üvegként, ha a lap VILÁGOSABB a mögötte lévő háttérnél — ha
     egyszerűen a sötét kártyaszínt tennénk áttetszővé, lapos sötét dobozt kapnánk.
     Világos témán a --card már eleve fehér közeli, ezért ott ez nem változtat semmin. */
  --glass-lift:           color-mix(in srgb, var(--card, var(--bg-card, #1a1d2e)) 78%, #ffffff);
  --glass-lift-strong:    color-mix(in srgb, var(--card, var(--bg-card, #1a1d2e)) 86%, #ffffff);

  --glass-surface:        color-mix(in srgb, var(--glass-lift) 58%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--glass-lift-strong) 82%, transparent);
  --glass-surface-input:  color-mix(in srgb, var(--glass-lift) 40%, transparent);

  /* Hajszálvékony szegély és felső fénykiemelés a szöveg színéből */
  --glass-hairline:  color-mix(in srgb, var(--text-primary, #ffffff) 13%, transparent);
  --glass-highlight: color-mix(in srgb, var(--text-primary, #ffffff) 26%, transparent);

  --glass-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 14px 34px -10px rgba(0, 0, 0, 0.34);
  --glass-shadow-lifted:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 22px 48px -12px rgba(0, 0, 0, 0.42);

  --glass-radius: 16px;
}

/* ── HÁTTÉR: lágy aurora, hogy legyen mit megtörnie az üvegnek ──────────────
   Üveg csak akkor olvasható üvegként, ha van mögötte valami. A folt az oldal
   saját akcentusszínét használja, ezért oldalanként más — de mindig halvány. */
body::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 8% 0%,
      color-mix(in srgb, var(--accent, #3498db) 40%, transparent), transparent 66%),
    radial-gradient(38vw 38vw at 92% 8%,
      color-mix(in srgb, var(--accent-gold, var(--accent, #3498db)) 28%, transparent), transparent 64%),
    radial-gradient(50vw 50vw at 66% 100%,
      color-mix(in srgb, var(--accent, #3498db) 26%, transparent), transparent 68%),
    radial-gradient(30vw 30vw at 30% 58%,
      color-mix(in srgb, var(--accent-green, var(--accent, #3498db)) 12%, transparent), transparent 70%);
  /* Szándékosan NINCS filter: blur() itt. Egy teljes képernyős, fix elem elmosása
     minden görgetésnél újrarajzolást kényszerít, és megakasztja a rendert — mérve.
     A radiális gradiensek eleve lágyak, a blur vizuálisan alig adott hozzá. */
}

/* ── FELÜLETEK, 1. szint: semleges kártyák ─────────────────────────────────
   Ezeknek nincs jelentéshordozó színük, így teljes üveg-kezelést kapnak. */
.card,
.section-card,
.gf-form-card,
.gf-hook-card,
.gf-stack-card,
.gf-scarcity-card,
.method-card,
.expand-card,
.strat-card,
.scenario-card,
.compare-card,
.hvco-card,
.article-card,
.calendar-card,
.step-mini,
.form-card,
.result-box,
.big-result {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-hairline);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  position: relative;
}

/* Felső fényvonal — ettől néz ki üvegnek, nem szürke dobozzénak */
.card::after,
.section-card::after,
.gf-form-card::after,
.hvco-card::after,
.article-card::after,
.big-result::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  background: linear-gradient(90deg,
    transparent, var(--glass-highlight) 22%, var(--glass-highlight) 78%, transparent);
  pointer-events: none;
}

/* ── FELÜLETEK, 2. szint: jelentéshordozó dobozok ──────────────────────────
   Zöld = siker, piros = veszély, sárga = figyelem. A színüket NEM írjuk felül,
   csak üvegesítjük — különben elveszne a jelentésük. */
.success-box,
.warn-box,
.danger-box,
.info-box,
.insight-box,
.highlight-box,
.cta-box,
.stat-box,
.szja-box,
#fpe-form-error,
.error-box {
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
}

/* ── NAVIGÁCIÓ ─────────────────────────────────────────────────────────────
   Erősebb homály, mert szöveg fut alatta görgetéskor.
   A .top-nav szándékosan NINCS itt: a köszönő oldalakon az nem sáv, csak egy
   központozott szövegsor, és háttérrel egy odanemvaló doboznak látszana. */
.nav-wrap,
.nav-bar {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--glass-hairline);
}
.nav-bar { border-bottom: none; border-top: 1px solid var(--glass-hairline); }

/* ── ŰRLAPMEZŐK ────────────────────────────────────────────────────────────*/
.form-input,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
  background: var(--glass-surface-input) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-hairline) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent, #3498db) 62%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3498db) 18%, transparent);
  outline: none;
}

/* Rádió- és checkbox-sorok */
.radio-option,
.checkbox-option {
  background: var(--glass-surface-input) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-hairline);
}
.radio-option.selected {
  border-color: color-mix(in srgb, var(--accent, #3498db) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #3498db) 10%, transparent) !important;
}

/* ── GOMBOK ────────────────────────────────────────────────────────────────
   A kitöltőszín marad (márkaszín + kontraszt), csak üveg-fényt kap. */
.btn-submit,
.gf-submit-btn,
.bonus-submit,
.fpe-next-btn,
.btn-calendar {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 10px 24px -8px color-mix(in srgb, var(--accent, #3498db) 55%, transparent);
}
.btn-submit::after,
.gf-submit-btn::after,
.bonus-submit::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent);
  pointer-events: none;
}

/* Badge-ek */
.badge,
.hero-badge,
.counter-badge,
.trust-badge {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* ── EMELKEDÉS hoverre ─────────────────────────────────────────────────────*/
@media (hover: hover) {
  .hvco-card:hover,
  .article-card:hover,
  .compare-card:hover,
  .method-card:hover {
    box-shadow: var(--glass-shadow-lifted);
    border-color: color-mix(in srgb, var(--accent, #3498db) 38%, transparent);
    transform: translateY(-2px);
  }
  .hvco-card, .article-card, .compare-card, .method-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease, border-color 0.25s ease;
  }
}

/* ── HOZZÁFÉRHETŐSÉG ÉS TARTALÉK ───────────────────────────────────────────*/

/* Ha a böngésző nem tud backdrop-filtert, tömörebb felület kell,
   különben a szöveg olvashatatlanná válik az aurora fölött. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-surface:        color-mix(in srgb, var(--card, var(--bg-card, #1a1d2e)) 94%, transparent);
    --glass-surface-strong: color-mix(in srgb, var(--card, var(--bg-card, #1a1d2e)) 98%, transparent);
    --glass-surface-input:  color-mix(in srgb, var(--card, var(--bg-card, #1a1d2e)) 92%, transparent);
  }
  body::before { opacity: 0.5; }
}

/* Régi böngésző color-mix nélkül: marad az oldal eredeti kinézete. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  body::before { display: none; }
}

/* Aki kevesebb áttetszőséget kért a rendszerében, az kapjon tömör felületet. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-surface:        var(--card, var(--bg-card, #1a1d2e));
    --glass-surface-strong: var(--card, var(--bg-card, #1a1d2e));
    --glass-surface-input:  var(--card, var(--bg-card, #1a1d2e));
  }
  .card, .section-card, .gf-form-card, .nav-wrap, .nav-bar, .top-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hvco-card, .article-card, .compare-card, .method-card { transition: none; }
  .hvco-card:hover, .article-card:hover,
  .compare-card:hover, .method-card:hover { transform: none; }
}

/* Nyomtatás: az üveg és az aurora csak tintát pazarolna. */
@media print {
  body::before { display: none; }
  .card, .section-card, .gf-form-card, .result-box {
    background: #fff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}