/* ============================================================================
 * SKINNOVATE — snv-core · REGISZTRÁCIÓS POP-UP MODAL STÍLUS
 * Fájl: assets/snv-reg.css
 * ----------------------------------------------------------------------------
 * A 09_MOCKUP_REG_FLOW.html lezárt modal-anatómiája alapján, éles snv-core
 * komponensre tisztázva. NEM tartalmazza a mockup léptető-sávját (proto-bar),
 * sem a mockup-only oldal-scaffoldingot (header/cards/footer/reward-banner) —
 * csak a reg-modal (overlay + rail + form + step + spam-honeypot) stílusa.
 *
 * FONTOS ELVEK (spec):
 *   · Desktop: kétoszlopos 780px modal (280px benefit-rail + form-oszlop).
 *   · Mobil (≤700px): teljes képernyős bottom-sheet, benefit 1 sorra tömörítve
 *     + „részletek" toggle, sticky submit ≥48px, progress „1/2".
 *   · Minden <input> ≥16px (iOS zoom ellen).
 *   · Fókusz-outline MINDIG látható (a11y — focus-trap a JS-ben).
 *   · prefers-reduced-motion: nincs nyitó/záró/hiba-animáció.
 *   · ÁR-GATE CSS-rejtés TILOS — ide semmilyen ár-elrejtő szabály NEM kerül;
 *     a gate szerveroldali (is_user_logged_in + snv-core render_block).
 *
 * SNV-MU-PATCH (mu-port, eltérések az eredetitől — minden más betűhű):
 *   1. overlay z-index: 100000 → 2147480000 (CookieYes consent-banner ~999999+
 *      és az Elementor sticky header fölé).
 *   2. mobil bottom-sheet: height:100vh fallback-sor a 100dvh elé (régi Safari).
 * ============================================================================ */

/* ═══════════ DESIGN TOKENS — Skinnovate Brand Guidelines v1.0 ═══════════ */
:root{
  --snv-ink:#333333;          /* sötét szürke — headings, CTA, submit */
  --snv-body:#5F5F5F;         /* közepes szürke — body text, hint */
  --snv-cream:#F7F5ED;        /* törtfehér — rail/trust háttér */
  --snv-warm:#D8D1C6;         /* meleg szürke — borderek */
  --snv-silver:#C0BFBA;       /* ezüstös szürke — muted */
  --snv-white:#FFFFFF;
  --snv-err:#A63A2E;          /* funkcionális hibaszín — CSAK hibaállapotra */
  /* Betűk: élesben @font-face-szel töltve (Florentia / PT Sans); addig
     system-font fallback. A @font-face definíciók külön töltődnek. */
  --snv-font-display:'Florentia','Playfair Display',Georgia,'Times New Roman',serif;
  --snv-font-body:'PT Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* Térköz-skála */
  --snv-s1:4px; --snv-s2:8px; --snv-s3:16px; --snv-s4:24px; --snv-s5:32px; --snv-s6:48px;
  --snv-radius:6px;
}

/* ═══════════ REG-MODAL — OVERLAY ═══════════
   Desktop: középre igazítva. Mobil: bottom-sheet (l. lenti töréspont).
   Nyitás/zárás a JS-ből (.open osztály); Esc/háttér zár, fókusz vissza a
   kiváltó CTA-ra. */
.snv-modal-overlay{
  /* SNV-MU-PATCH: z-index 100000 → 2147480000 — a CookieYes consent-banner
     (tipikusan 999999+) és az Elementor sticky header FÖLÉ; az inline változat
     lenti z-index:auto szabálya változatlan. */
  display:none; position:fixed; inset:0; z-index:2147480000;
  background:rgba(26,26,26,.55);
  align-items:center; justify-content:center; padding:20px;
}
.snv-modal-overlay.is-open{display:flex}
/* Ha a body-n nyitva a modal, a lap ne görögjön alatta (JS a snv-modal-open osztályt teszi rá) */
html.snv-modal-open,
body.snv-modal-open{overflow:hidden}
/* Inline (/regisztracio/) változat: nincs overlay, a szekció a lap-folyamban ül. */
.snv-modal-overlay.snv-modal-inline{display:block; position:static; inset:auto; z-index:auto; background:none; padding:0}

.snv-modal{
  background:var(--snv-white); border-radius:8px; max-width:780px; width:100%;
  max-height:calc(100vh - 40px); overflow:hidden; position:relative;
  display:grid; grid-template-columns:280px 1fr;
  font-family:var(--snv-font-body);
  font-size:16px; line-height:1.6; color:var(--snv-body);
}
.snv-modal *{box-sizing:border-box}

.snv-modal-close{
  position:absolute; top:12px; right:12px; z-index:5;
  background:none; border:none;
  font-size:22px; color:var(--snv-body); cursor:pointer; line-height:1; padding:6px;
}
.snv-modal-close:hover{color:var(--snv-ink)}
.snv-modal-close:focus-visible{outline:2px solid var(--snv-ink); outline-offset:2px; border-radius:4px}

/* ═══════════ BENEFIT-EMLÉKEZTETŐ OLDALSÁV (synced: snv/reg-benefit-lista) ═══
   4 KANONIKUS elem — a szöveget a markup adja, itt CSAK a stílus. */
.snv-m-rail{
  background:var(--snv-cream); border-right:1px solid var(--snv-warm);
  padding:var(--snv-s5) var(--snv-s4);
  display:flex; flex-direction:column;
}
.snv-m-rail .snv-rail-logo{
  font-family:var(--snv-font-display); font-size:17px; font-weight:700;
  letter-spacing:.14em; color:var(--snv-ink); margin-bottom:18px;
}
.snv-m-rail .snv-rail-head{
  font-family:var(--snv-font-display); font-size:18px; font-weight:700;
  color:var(--snv-ink); line-height:1.35; margin-bottom:12px;
}
.snv-m-rail ul{list-style:none; margin:0; padding:0}
.snv-m-rail li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:14px; color:var(--snv-ink); padding:5px 0; line-height:1.45;
}
.snv-m-rail .snv-check{font-weight:700; flex:none; color:var(--snv-ink)}
.snv-m-rail .snv-rail-micro{
  font-size:12.5px; color:var(--snv-body); margin-top:auto; padding-top:16px;
}
/* Az összegző (mobil-toggle) sor desktopon rejtve */
.snv-rail-summary{display:none}

/* ═══════════ FORM-OLDAL ═══════════ */
.snv-m-main{padding:var(--snv-s5) var(--snv-s5) var(--snv-s4); overflow-y:auto}

/* — fülek: Regisztráció | Belépés (ARIA tablist a markupban) — */
.snv-modal-tabs{display:flex; border-bottom:1px solid var(--snv-warm); margin-bottom:16px}
.snv-modal-tabs button{
  flex:1; background:none; border:none; border-bottom:3px solid transparent;
  font-family:var(--snv-font-body); font-size:15px; font-weight:700;
  color:var(--snv-body); padding:10px 0; cursor:pointer;
}
.snv-modal-tabs button:hover{color:var(--snv-ink)}
.snv-modal-tabs button.is-active{color:var(--snv-ink); border-bottom-color:var(--snv-ink)}
.snv-modal-tabs button:focus-visible{outline:2px solid var(--snv-ink); outline-offset:-2px}

/* — lépés-progress „1/2" — */
.snv-m-progress{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.snv-m-progress .snv-p-label{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--snv-body); white-space:nowrap;
}
.snv-m-progress .snv-p-track{flex:1; display:flex; gap:5px}
.snv-m-progress .snv-p-seg{height:5px; flex:1; border-radius:999px; background:#E5E2DA}
.snv-m-progress .snv-p-seg.is-done{background:var(--snv-ink)}

/* — panel-címek — */
.snv-modal h3{
  font-family:var(--snv-font-display); font-size:21px; margin:0 0 4px;
  color:var(--snv-ink); font-weight:700; line-height:1.25;
}
.snv-modal .snv-m-sub{font-size:14px; margin:0 0 16px; color:var(--snv-body)}

/* — lépés-panelek: a JS mutatja/rejti (data-snv-step + is-active + hidden) — */
.snv-m-step{display:none}
.snv-m-step.is-active{display:block}
.snv-m-step[hidden]{display:none}

/* ═══════════ MEZŐK ═══════════ */
.snv-field{margin-bottom:13px}
.snv-field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.snv-field label{
  display:block; font-size:13.5px; font-weight:700; color:var(--snv-ink); margin-bottom:5px;
}
.snv-field label .snv-req{color:var(--snv-body); font-weight:400; font-size:12px}

.snv-field input[type=text],
.snv-field input[type=email],
.snv-field input[type=tel],
.snv-field input[type=password],
.snv-field select{
  width:100%; padding:12px 14px;
  font-size:16px;                 /* ≥16px — iOS zoom ellen */
  font-family:var(--snv-font-body); color:var(--snv-ink);
  border:1px solid var(--snv-warm); border-radius:4px; background:var(--snv-white);
  line-height:1.4;
}
/* Fókusz — MINDIG látható (a11y) */
.snv-field input:focus,
.snv-field select:focus{outline:2px solid var(--snv-ink); outline-offset:-1px}
.snv-field input:focus-visible,
.snv-field select:focus-visible{outline:2px solid var(--snv-ink); outline-offset:-1px}

.snv-field .snv-hint{font-size:12px; color:var(--snv-body); margin-top:4px; line-height:1.45}

/* — jelszó-mező „megjelenítés" toggle-gombbal (EGY mező, min8, NINCS confirm) — */
.snv-pw-wrap{position:relative}
.snv-pw-wrap input{padding-right:52px}
.snv-pw-toggle{
  position:absolute; top:0; right:0; height:100%; width:46px;
  background:none; border:none; border-left:1px solid var(--snv-warm);
  cursor:pointer; color:var(--snv-body);
  display:flex; align-items:center; justify-content:center;
}
.snv-pw-toggle:hover{color:var(--snv-ink)}
.snv-pw-toggle:focus-visible{outline:2px solid var(--snv-ink); outline-offset:-2px}

/* — hibaállapot: inline, ADAT-MEGŐRZÉSSEL (a mezők nem ürülnek) —
   A JS a hiba-slot [hidden] attribútumát veszi le + a wrap-re .has-error-t tesz. */
.snv-field.has-error input,
.snv-field.has-error select{border-color:var(--snv-err); outline:1px solid var(--snv-err)}
.snv-field .snv-field-error{
  font-size:13px; color:var(--snv-err); margin-top:5px; line-height:1.45;
}
/* A [hidden] attribútum eleve elrejt; ha a JS leveszi, láthatóvá válik. */
.snv-field-error[hidden]{display:none}
/* Duplikált email → automatikus váltó-link a Belépés fülre (a JS tölti a linket) */
.snv-field .snv-field-error a{color:var(--snv-err); font-weight:700}

/* — szakmai státusz: KÖTELEZŐ select, 10 opció, üres disabled „Válassz…"
     placeholder = akaratlan default nélkül — */
.snv-status-block select{cursor:pointer}
.snv-status-block select:invalid{color:var(--snv-body)}  /* placeholder muted színnel */
.snv-status-block.has-error select{border-color:var(--snv-err); outline:1px solid var(--snv-err)}
.snv-status-block .snv-field-error{font-size:13px; color:var(--snv-err); margin-top:5px}

/* — jogi checkboxok (ÁSZF kötelező · marketing KÜLÖN, üres) — mind opt-in — */
.snv-check-field{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px}
.snv-check-field input{
  width:18px; height:18px; margin-top:3px; flex:none; accent-color:var(--snv-ink);
}
.snv-check-field input:focus-visible{outline:2px solid var(--snv-ink); outline-offset:2px}
.snv-check-field label{
  font-size:13.5px; color:var(--snv-ink); line-height:1.5; font-weight:400; margin:0;
}
.snv-check-field label a{font-weight:700}
.snv-check-block.has-error .snv-check-field label{color:var(--snv-err)}
.snv-check-block .snv-field-error{
  font-size:13px; color:var(--snv-err); margin:2px 0 8px 28px;
}

/* ═══════════ TRUST-SOR (a fiók azonnal aktív — utólagos ellenőrzés) ═══════ */
.snv-m-trust{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--snv-cream); border:1px solid var(--snv-warm); border-radius:var(--snv-radius);
  padding:11px 14px; margin:14px 0;
  font-size:13.5px; color:var(--snv-ink); line-height:1.5;
}
.snv-m-trust svg{flex:none; margin-top:2px}

/* — lépés-vissza sor / belépés-váltó sor — */
.snv-m-backrow{margin-top:12px; font-size:13.5px}
.snv-m-backrow a{font-weight:700; text-decoration:none; color:var(--snv-ink)}
.snv-m-backrow a:hover{text-decoration:underline}
.snv-m-login-row{font-size:13.5px; margin-top:12px; color:var(--snv-body)}
.snv-m-login-row a{font-weight:700; color:var(--snv-ink)}
.snv-m-exit{font-size:12.5px; color:var(--snv-body); text-align:center; margin-top:12px}

/* ═══════════ GOMBOK ═══════════ */
.snv-btn{
  display:inline-block; font-family:var(--snv-font-body); font-weight:700;
  font-size:14px; text-transform:uppercase; letter-spacing:.05em;
  padding:13px 28px; border-radius:4px; border:none; cursor:pointer;
  text-decoration:none; text-align:center; line-height:1.2;
}
.snv-btn-primary{background:var(--snv-ink); color:var(--snv-white)}
.snv-btn-primary:hover{background:#000}
.snv-btn:focus-visible{outline:2px solid var(--snv-ink); outline-offset:2px}
.snv-btn-primary:focus-visible{outline-color:var(--snv-ink); outline-offset:2px; box-shadow:0 0 0 4px rgba(51,51,51,.25)}
.snv-w100{width:100%}
.snv-btn-submit{min-height:48px}   /* submit ≥48px */

/* ═══════════ ÁLTALÁNOS FORM-HIBA ([data-snv-form-error] / .snv-form-error) ═══
   Nem mező-specifikus hiba (hálózat, nonce, spam). A JS a [hidden]-t veszi le. */
.snv-form-error{
  font-size:13.5px; color:var(--snv-err); line-height:1.45;
  margin:10px 0 0; padding:10px 12px;
  background:rgba(166,58,46,.07); border:1px solid var(--snv-err); border-radius:var(--snv-radius);
}
.snv-form-error[hidden]{display:none}
.snv-form-error a{color:var(--snv-err); font-weight:700}

/* ═══════════ HONEYPOT — spam-védelem (honeypot + időzítés) ═══════════
   Látogatónak láthatatlan; a bot kitölti → szerver eldobja. Látható
   reCAPTCHA TILOS. */
.snv-hp-field,
[data-snv-honeypot]{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden}

/* ═══════════ SIKER / JUTALOM-PILLANAT („Mostantól minden árat látsz") ═══════
   Auto-login után a JS showReward()-dal mutatja; szerveroldali gate frissíti az árakat.
   A markupban [data-snv-reward] (kezdetben [hidden]); a szöveg [data-snv-reward-text]. */
.snv-m-reward{text-align:center; padding:var(--snv-s5) var(--snv-s3)}
.snv-m-reward[hidden]{display:none}
.snv-m-reward.is-active{display:block}
.snv-reward-icon{color:var(--snv-ink); margin-bottom:12px; line-height:0}
.snv-reward-icon svg{display:inline-block}
.snv-m-reward h3{margin-bottom:8px}
.snv-m-reward p{font-size:15px; color:var(--snv-body); margin:0 auto; max-width:360px}

/* ============================================================================
 * RESZPONZÍV — ≤700px: TELJES KÉPERNYŐS BOTTOM-SHEET
 * benefit 1 sorra tömörítve + „részletek" toggle · sticky submit ≥48px
 * ============================================================================ */
@media (max-width:700px){
  .snv-modal-overlay{padding:0; align-items:stretch}
  .snv-modal{
    grid-template-columns:1fr; grid-template-rows:auto 1fr;
    max-width:none; border-radius:0;
    max-height:none;
    height:100vh;   /* SNV-MU-PATCH: fallback — a régi Safari (<15.4) nem ismeri a dvh-t,
                       enélkül a bottom-sheet magasság nélkül maradna */
    height:100dvh;
    overflow-y:auto;
  }

  /* benefit-oldalsáv → 1 sor + „részletek" toggle */
  .snv-m-rail{padding:14px 18px; border-right:none; border-bottom:1px solid var(--snv-warm)}
  .snv-m-rail .snv-rail-logo{display:none}
  .snv-m-rail .snv-rail-head{display:none}
  .snv-m-rail ul{display:none}
  .snv-m-rail .snv-rail-micro{display:none}
  .snv-m-rail.is-rail-open ul{display:block; margin-top:10px}

  .snv-rail-summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; background:none; border:none; cursor:pointer; text-align:left;
    font-family:var(--snv-font-body); font-size:13px; font-weight:700; color:var(--snv-ink);
    line-height:1.4; padding:0;
  }
  .snv-rail-summary:focus-visible{outline:2px solid var(--snv-ink); outline-offset:2px}
  .snv-rail-summary .snv-rs-arrow{transition:transform .15s; flex:none}
  .snv-m-rail.is-rail-open .snv-rs-arrow{transform:rotate(180deg)}

  /* form-oldal + hely a sticky submitnek */
  .snv-m-main{padding:20px 18px 90px}
  .snv-field-grid{grid-template-columns:1fr}

  /* sticky submit-sáv az alján (submit ≥48px marad) */
  .snv-m-sticky{
    position:sticky; bottom:0; background:var(--snv-white);
    padding:12px 0 4px; margin-top:6px;
    box-shadow:0 -8px 12px -8px rgba(51,51,51,.18);
  }
}

/* ============================================================================
 * PREFERS-REDUCED-MOTION — nincs nyitó/záró/hiba/toggle-animáció
 * ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .snv-modal,
  .snv-modal-overlay,
  .snv-m-step,
  .snv-m-reward,
  .snv-rail-summary .snv-rs-arrow,
  .snv-m-rail.is-rail-open .snv-rs-arrow{
    animation:none !important;
    transition:none !important;
  }
}