/* =====================================================================
   E-LAPOZÓ — 2026-OS MEGÚJÍTÁS (design-terv alapján)
   =====================================================================
   Minden komponens-osztály "elx-" előtagot kap, hogy ne ütközzön a régi
   style_comp.css generikus neveivel (.btn, .icon-*, stb.), amit még sok
   más oldal (Blog, cikkoldalak) használ. A tokenek (--ink, --brand stb.)
   CSS egyéni tulajdonságok, ezek nem ütköznek semmivel — de emiatt is
   csak elx- osztályokban hivatkozunk rájuk, nem globális elemekre
   (body, *), hogy a régi oldalakat ne érintsék.
   ===================================================================== */

:root{
  --elx-ink:#101b26;
  --elx-ink-soft:#51616c;
  --elx-paper:#f2f5f4;
  --elx-surface:#ffffff;
  --elx-line:#dbe2e0;
  --elx-brand:#1c7fbf;
  --elx-brand-deep:#0a3350;
  --elx-brand-soft:#e3f1fa;
  --elx-accent:#ff6a45;
  --elx-accent-on:#2a1208;
  --elx-accent-soft:#ffe3d8;
  --elx-good:#1f8a5f;
  --elx-price-on-deep:#eaf6ff;
  --elx-shadow:0 1px 2px rgba(10,25,38,.06), 0 12px 32px rgba(10,25,38,.08);
  --elx-shadow-lg:0 20px 60px rgba(10,25,38,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --elx-ink:#eef3f2; --elx-ink-soft:#a6b6bd; --elx-paper:#0c151e; --elx-surface:#131f2b;
    --elx-line:#25333f; --elx-brand:#5cb6ea; --elx-brand-deep:#0a3350; --elx-brand-soft:#12314a;
    --elx-accent:#ff8562; --elx-accent-on:#2a1208; --elx-accent-soft:#3a2620; --elx-good:#5cd6a0;
    --elx-price-on-deep:#eaf6ff;
    --elx-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
    --elx-shadow-lg:0 20px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --elx-ink:#eef3f2; --elx-ink-soft:#a6b6bd; --elx-paper:#0c151e; --elx-surface:#131f2b;
  --elx-line:#25333f; --elx-brand:#5cb6ea; --elx-brand-deep:#0a3350; --elx-brand-soft:#12314a;
  --elx-accent:#ff8562; --elx-accent-on:#2a1208; --elx-accent-soft:#3a2620; --elx-good:#5cd6a0;
  --elx-price-on-deep:#eaf6ff;
  --elx-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
  --elx-shadow-lg:0 20px 60px rgba(0,0,0,.55);
}

/* A <body>-t csak a főoldalon kapja meg ez az osztály (index.php:
   isset($page) ellenőrzéssel) — enélkül a body fehér maradt volna
   sötét módban is (a régi style_comp.css fehér body-t ad), ez látszott
   volna ki minden résnél / túlgörgetésnél (rubber-band) a sötét
   szekciók között/körül. A régi oldalakon a body szándékosan
   érintetlen marad. */
.elx-body{ background:var(--elx-paper); }

.elx-scope{ font-family:'Manrope',system-ui,-apple-system,sans-serif; line-height:1.55; color:var(--elx-ink); -webkit-font-smoothing:antialiased; }
.elx-scope h1,.elx-scope h2,.elx-scope h3,.elx-scope h4{ font-family:'Bricolage Grotesque',system-ui,sans-serif; text-wrap:balance; line-height:1.12; margin:0; color:var(--elx-ink); font-weight:700; }
.elx-scope p{ margin:0; }
.elx-scope a{ color:inherit; }
.elx-scope *{ box-sizing:border-box; }
/* Rendszerszintű védelem vízszintes túlcsordulás ellen: flex/grid elemek
   alapból nem zsugorodnának a saját tartalmuk min-content szélessége alá
   (ez okozott több hibát is keskeny képernyőn — kártyák, rácsok). Az
   "elx-" osztályos elemekre általánosan nullázzuk, konkrét helyeken a
   szükséges min-width újra beállítható, ha valahol mégis kellene. */
.elx-scope [class*="elx-"]{ min-width:0; }

.elx-wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .elx-wrap{ padding:0 20px; } }
.elx-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--elx-brand); }
.elx-eyebrow::before{ content:""; width:18px; height:2px; background:var(--elx-accent); border-radius:2px; }

.elx-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:10px; font-weight:700; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:transform .15s ease, box-shadow .15s ease; }
.elx-btn:hover{ transform:translateY(-1px); }
.elx-btn:focus-visible{ outline:3px solid var(--elx-brand); outline-offset:2px; }
.elx-btn-accent{ background:var(--elx-accent); color:var(--elx-accent-on); box-shadow:0 10px 24px -8px rgba(255,106,69,.55); }
.elx-btn-ghost{ background:var(--elx-surface); color:var(--elx-ink); border-color:var(--elx-line); }
.elx-btn-ghost:hover{ border-color:var(--elx-brand); }

/* ---- fejléc ---- */
/* min-height/height:auto explicit módon: a régi style_comp.css a puszta
   "header" HTML-elemre ad meg 170px-es min-height-ot (a régi, nagyobb
   fejléchez), ez osztálynév-előtaggal nem védhető ki, csak konkrét
   felülírással. */
.elx-header{ position:sticky; top:0; z-index:20; background:var(--elx-surface); border-bottom:1px solid var(--elx-line); min-height:0; height:auto; }
/* Fontos: a .elx-topbar/.elx-navrow padding-ját szándékosan csak
   top/bottom irányban adjuk meg (nem a "padding" rövidítéssel), mert az
   ugyanezen az elemen lévő .elx-wrap bal/jobb paddingjét nullázná —
   pontosan ez okozta, hogy a tartalom a szélekre tapadt. */
.elx-topbar{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px; font-size:13.5px; color:var(--elx-ink-soft); border-bottom:1px solid var(--elx-line); min-height:0; }
.elx-topbar a{ text-decoration:none; color:var(--elx-ink-soft); display:inline-flex; align-items:center; gap:7px; }
.elx-topbar .elx-contact{ display:flex; gap:18px; }
.elx-navrow{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; min-height:0; }
.elx-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.elx-logo svg{ height:30px; width:auto; flex:none; }
.elx-logo .elx-wordmark{ font-family:'Manrope',sans-serif; font-weight:300; font-size:23px; letter-spacing:.01em; color:var(--elx-ink); }
.elx-logo .elx-wordmark b{ color:var(--elx-brand); font-weight:500; }
/* A régi style_comp.css a puszta "nav" HTML-elemre "position:absolute;
   right:0; height:2.9375rem; margin-top:1.6875rem" szabályt ad (a régi
   fejléc navigációjához) — ez a mi <nav class="elx-nav">-unkra is
   érvényes maradna elő nélkül, kiszakítva a flex-sorból, a jobb szélre
   tapasztva. Explicit felülírás kell, osztály-előtag ez ellen nem véd. */
.elx-nav{ position:static; display:flex; align-items:center; gap:26px; height:auto; margin-top:0; font-family:inherit; }
/* A régi style_comp.css a puszta "nav a" kombinációra ad
   display:inline-block; height:2.9375rem; padding-top:0.75rem;
   border-right:1px solid #c2e2c1 szabályt (a régi menüpont-elválasztók)
   — emiatt nem voltak függőlegesen középre igazítva a menüpontok a saját
   (más célra szánt) elválasztó vonalukhoz képest. Itt explicit
   nullázzuk, és a flex align-items:center-re bízzuk a középre igazítást. */
.elx-nav a:not(.elx-btn){ text-decoration:none; font-weight:600; font-size:14.5px; color:var(--elx-ink-soft); display:inline-flex; align-items:center; height:auto; padding:0; border-right:0; }
.elx-nav a:not(.elx-btn):hover{ color:var(--elx-brand); }
.elx-nav a.current{ color:var(--elx-brand); }
.elx-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--elx-line); background:var(--elx-surface); color:var(--elx-ink); cursor:pointer; }
.elx-theme-toggle:hover{ border-color:var(--elx-brand); }
.elx-theme-toggle:focus-visible{ outline:3px solid var(--elx-brand); outline-offset:2px; }
.elx-theme-toggle svg{ width:18px; height:18px; }
.elx-hide-desktop{ display:none; }
@media (max-width:820px){
  .elx-nav a.elx-hide-mobile{ display:none; }
  .elx-topbar{ display:none; }
  .elx-nav .elx-btn-accent{ display:none; }
  /* A sötét/világos váltó mobilon a szűk fejlécből a teljes képernyős
     menübe (overlay) költözik — lásd lejjebb — így csak a logó + a
     hamburger-gomb marad a fejlécben, ami minden reális telefonszélességen
     kényelmesen elfér. */
  .elx-theme-toggle{ display:none; }
  .elx-hide-desktop{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--elx-line); cursor:pointer; color:var(--elx-ink); text-decoration:none; flex:none; }
}
@media (min-width:821px){
  .elx-theme-toggle-overlay{ display:none; }
}

/* ---- ikonok ---- */
.elx-icon{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.elx-icon-fill{ fill:currentColor; stroke:none; flex:none; }

/* ---- hero ---- */
.elx-hero{ padding:56px 0 40px; position:relative; overflow:hidden; background:var(--elx-paper); }
.elx-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:920px){ .elx-hero-grid{ grid-template-columns:1fr; } }
.elx-hero h1{ font-size:clamp(30px,4.6vw,50px); max-width:15ch; }
.elx-hero h1 em{ font-style:normal; color:var(--elx-brand); }
.elx-hero .elx-lede{ margin-top:18px; font-size:18px; color:var(--elx-ink-soft); max-width:48ch; }
.elx-hero-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.elx-trustline{ margin-top:28px; display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; color:var(--elx-ink-soft); }
.elx-trustline strong{ color:var(--elx-ink); font-family:'Bricolage Grotesque',sans-serif; }

/* Az eredeti, "egymás mögötti lapok" vizuál — ezt kedvelte a leginkább a
   visszajelzés, ehhez nyúlunk csak finoman hozzá: a két lap és a jelvény
   immár lassan, egymástól eltérő ütemben lebeg (mintha kézben tartanánk
   a katalógust), a jelvény ikonja pislog, a kurzor pedig időnként
   "kattint" egyet — így a korábbi statikus kompozíció életre kel anélkül,
   hogy a kedvelt kinézet megváltozna. */
.elx-book-art{ position:relative; aspect-ratio:1/.82; }
.elx-book-page{ position:absolute; inset:0; border-radius:16px; background:var(--elx-surface); border:1px solid var(--elx-line); box-shadow:var(--elx-shadow-lg); }
.elx-book-page.elx-p2{ background:var(--elx-brand-soft); z-index:1; animation:elxPageFloatBack 7s ease-in-out infinite; }
.elx-book-page.elx-p3{ z-index:2; overflow:hidden; animation:elxPageFloatFront 7s ease-in-out infinite; animation-delay:-2.3s; }
@keyframes elxPageFloatBack{
  0%,100%{ transform:rotate(-4deg) translate(-14px,10px); }
  50%{ transform:rotate(-6deg) translate(-16px,2px); }
}
@keyframes elxPageFloatFront{
  0%,100%{ transform:rotate(3deg) translate(10px,-6px); }
  50%{ transform:rotate(1.5deg) translate(13px,-13px); }
}

/* A p3 lap tartalma két, időzítve keresztbe-áttűnő réteg: a betöltő
   skeleton (10s ciklus 0-45%-ában látszik), majd ez egy kész, kerettel,
   lapozó-nyilakkal és eszköztár-gombokkal ellátott katalógus-oldallá
   "töltődik be" (45-85%), majd újra elhalványul — tisztán CSS, JS
   nélkül, végtelenül ismétlődve. */
.elx-p3-skeleton, .elx-p3-page{ position:absolute; inset:0; padding:22px 24px; display:flex; flex-direction:column; }
.elx-p3-skeleton{ animation:elxP3Skeleton 10s ease-in-out infinite; }
.elx-p3-skel-title{ height:16px; width:55%; background:var(--elx-brand); opacity:.35; border-radius:4px; margin-bottom:18px; flex:none; }
.elx-p3-skeleton .elx-ln{ height:9px; border-radius:5px; background:var(--elx-line); margin-bottom:12px; position:relative; overflow:hidden; flex:none; }
.elx-p3-skeleton .elx-ln.elx-short{ width:40%; }
.elx-p3-skeleton .elx-ln::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:elxLnShimmer 3.4s ease-in-out infinite;
}
.elx-p3-skeleton .elx-ln:nth-child(2)::after{ animation-delay:.4s; }
.elx-p3-skeleton .elx-ln:nth-child(3)::after{ animation-delay:.8s; }
@keyframes elxLnShimmer{
  0%{ transform:translateX(-100%); }
  55%,100%{ transform:translateX(100%); }
}
@keyframes elxP3Skeleton{
  0%,35%{ opacity:1; }
  45%,85%{ opacity:0; }
  95%,100%{ opacity:1; }
}

.elx-p3-page{ animation:elxP3Page 10s ease-in-out infinite; }
@keyframes elxP3Page{
  0%,35%{ opacity:0; transform:scale(1.03); }
  45%,85%{ opacity:1; transform:scale(1); }
  95%,100%{ opacity:0; transform:scale(1.03); }
}
.elx-p3-cover{
  position:relative; flex:1; min-height:0; border-radius:10px; border:1px solid var(--elx-line);
  overflow:hidden; margin-bottom:14px;
}
/* A borító tartalma külön rétegben "lapoz": a perspective és az
   overflow:hidden szándékosan KÉT KÜLÖN elemen van (.elx-p3-cover
   kapja az overflow:hidden-et a kerekített saroklevágáshoz, a belső
   .elx-p3-cover-inner a perspective-et) — ha ugyanazon az elemen volna
   mindkettő, Chromium/WebKit hibásan levágja a 3D-ben forgó lapot. */
.elx-p3-cover-inner{ position:absolute; inset:0; perspective:600px; }
.elx-p3-flip{ position:absolute; inset:0; transform-style:preserve-3d; animation:elxCoverFlip 6s cubic-bezier(.45,.05,.55,.95) infinite; }
.elx-p3-flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:11%;
}
.elx-p3-flip-a{ background:linear-gradient(135deg, var(--elx-brand-soft), var(--elx-accent-soft)); }
.elx-p3-flip-b{ transform:rotateY(180deg); background:linear-gradient(135deg, var(--elx-accent-soft), var(--elx-brand-soft)); }
@keyframes elxCoverFlip{
  0%,40%{ transform:rotateY(0deg); filter:brightness(1); }
  48%{ filter:brightness(.75); }
  50%,88%{ transform:rotateY(180deg); filter:brightness(.7); }
  58%{ filter:brightness(.75); }
  98%{ filter:brightness(.75); }
  100%{ transform:rotateY(360deg); filter:brightness(1); }
}
/* A oldal: termék-rács (mint egy katalógus kategória-oldala) */
.elx-p3-cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:10%; width:100%; height:100%; }
.elx-p3-cat-card{ display:flex; flex-direction:column; gap:4px; min-height:0; }
.elx-p3-cat-card-img{ flex:1; min-height:0; border-radius:5px; }
.elx-p3-c1{ background:var(--elx-brand); opacity:.5; }
.elx-p3-c2{ background:var(--elx-accent); opacity:.5; }
.elx-p3-c3{ background:var(--elx-accent); opacity:.3; }
.elx-p3-c4{ background:var(--elx-brand); opacity:.3; }
.elx-p3-cat-card-line{ height:4px; border-radius:2px; background:var(--elx-surface); opacity:.75; flex:none; }
.elx-p3-cat-card-line.elx-p3-short{ width:55%; }
/* B oldal: kiemelt-termék oldal (nagy kép + cím/leírás/ár) */
.elx-p3-cat-feature{ display:flex; align-items:center; gap:9%; width:100%; height:100%; }
.elx-p3-cat-feature-img{ flex:0 0 46%; align-self:stretch; border-radius:8px; background:var(--elx-brand); opacity:.45; }
.elx-p3-cat-feature-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.elx-p3-cat-feature-line{ height:5px; border-radius:3px; background:var(--elx-surface); opacity:.75; }
.elx-p3-cat-feature-line.elx-p3-cat-feature-title{ height:9px; opacity:1; width:85%; }
.elx-p3-cat-feature-line.elx-p3-short{ width:50%; }
.elx-p3-cat-feature-price{ margin-top:auto; width:52%; height:16px; border-radius:999px; background:var(--elx-accent); opacity:.6; }
.elx-p3-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:15px; color:var(--elx-ink); margin-bottom:8px; flex:none; }
.elx-p3-text{ height:7px; border-radius:4px; background:var(--elx-line); margin-bottom:6px; flex:none; }
.elx-p3-text.elx-p3-text-short{ width:55%; }
.elx-p3-toolbar{
  flex:none; display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:12px;
  border-top:1px solid var(--elx-line); color:var(--elx-ink-soft);
}
.elx-p3-toolbar svg{ flex:none; }
.elx-p3-arrow{
  position:absolute; top:38%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%;
  background:rgba(10,20,20,.4); color:#fff; backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; z-index:1;
}
.elx-p3-arrow-left{ left:8px; }
.elx-p3-arrow-right{ right:8px; }
.elx-book-badge{ position:absolute; top:-14px; left:24px; background:var(--elx-accent); color:var(--elx-accent-on); font-weight:800; font-size:13px; padding:8px 14px; border-radius:999px; box-shadow:0 8px 20px -6px rgba(255,106,69,.6); z-index:3; display:inline-flex; align-items:center; gap:6px; animation:elxBadgeFloat 7s ease-in-out infinite; }
.elx-book-badge svg{ animation:elxBadgeSpark 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes elxBadgeFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@keyframes elxBadgeSpark{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:1; }
  50%{ transform:scale(1.18) rotate(14deg); opacity:.85; }
}
.elx-book-cursor{ position:absolute; bottom:14%; right:8%; width:46px; height:46px; border-radius:50%; background:var(--elx-brand); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--elx-shadow); z-index:3; animation:elxCursorTap 4.5s ease-in-out infinite; }
.elx-book-cursor::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--elx-brand);
  animation:elxCursorRing 4.5s ease-out infinite;
}
@keyframes elxCursorTap{
  0%,78%,100%{ transform:scale(1); }
  85%{ transform:scale(.86); }
  92%{ transform:scale(1.05); }
}
@keyframes elxCursorRing{
  0%,78%{ transform:scale(1); opacity:0; }
  85%{ opacity:.6; }
  100%{ transform:scale(1.7); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .elx-book-page.elx-p2, .elx-book-page.elx-p3,
  .elx-book-badge, .elx-book-badge svg, .elx-book-cursor, .elx-book-cursor::after,
  .elx-p3-skeleton, .elx-p3-page, .elx-p3-skeleton .elx-ln::after, .elx-p3-flip{
    animation:none;
  }
  .elx-p3-flip{ transform:rotateY(0deg); }
  .elx-p3-skeleton{ opacity:0; }
  .elx-p3-page{ opacity:1; transform:none; }
}

/* ---- általános szekció ---- */
.elx-section{ padding:64px 0; background:var(--elx-paper); }
.elx-section-alt{ background:var(--elx-surface); border-top:1px solid var(--elx-line); border-bottom:1px solid var(--elx-line); }
.elx-section-head{ max-width:640px; margin:0 0 36px; }
.elx-section-head h2{ font-size:clamp(24px,3.4vw,34px); margin-top:10px; }
.elx-section-head p{ margin-top:14px; color:var(--elx-ink-soft); font-size:16.5px; }
.elx-center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---- statisztika-sáv ---- */
.elx-stats{ background:var(--elx-brand-deep); color:#eef6fb; }
.elx-stats .elx-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); border-radius:16px; overflow:hidden; }
.elx-stat{ background:var(--elx-brand-deep); padding:28px 20px; text-align:center; }
.elx-stat .elx-n{ font-family:'Bricolage Grotesque',sans-serif; font-size:32px; font-weight:800; }
.elx-stat .elx-l{ font-size:13.5px; color:#bcdcef; margin-top:6px; }
@media (max-width:700px){ .elx-stats .elx-wrap{ grid-template-columns:repeat(2,1fr); } }

/* ---- élő bemutató ---- */
.elx-demo-frame{ background:var(--elx-brand-deep); border-radius:20px; padding:20px; box-shadow:var(--elx-shadow-lg); }
.elx-demo-frame iframe{ width:100%; border:0; border-radius:12px; background:var(--elx-paper); display:block; }

/* ---- előnyök (boxok) ---- */
.elx-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .elx-benefits{ grid-template-columns:1fr; } }
.elx-benefit{ background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:16px; padding:28px; box-shadow:var(--elx-shadow); }
.elx-benefit .elx-ico{ width:44px; height:44px; border-radius:11px; background:var(--elx-brand-soft); color:var(--elx-brand); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; }
.elx-benefit h3{ font-size:19px; margin-bottom:8px; font-family:'Bricolage Grotesque',sans-serif; }
.elx-benefit p, .elx-benefit div{ color:var(--elx-ink-soft); font-size:15px; }
.elx-benefit a{ color:var(--elx-brand); font-weight:700; font-size:14px; text-decoration:none; display:inline-block; margin-top:10px; }

/* ---- kalkulátor ---- */
/* min-width:0 a közvetlen gyerekeken: grid/flex elemek alapból nem
   zsugorodnának a tartalmuk min-content szélessége alá, ez okozott
   vízszintes túlcsordulást keskeny képernyőn. */
.elx-calc-card{ background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:20px; box-shadow:var(--elx-shadow); padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.elx-calc-card > *{ min-width:0; }
@media (max-width:760px){ .elx-calc-card{ grid-template-columns:1fr; padding:24px; } }
.elx-calc-input label{ display:block; font-weight:700; font-size:14px; margin-bottom:8px; }
.elx-calc-input .elx-row{ display:flex; gap:10px; flex-wrap:wrap; }
.elx-calc-input .elx-row input{ min-width:0; }
@media (max-width:400px){ .elx-calc-input .elx-row{ flex-direction:column; } .elx-calc-input .elx-row .elx-btn{ justify-content:center; } }
.elx-calc-input input{ flex:1; font-size:20px; font-family:'Bricolage Grotesque',sans-serif; padding:14px 16px; border-radius:10px; border:1.5px solid var(--elx-line); background:var(--elx-paper); color:var(--elx-ink); min-width:0; }
.elx-calc-input input:focus{ outline:none; border-color:var(--elx-brand); }
.elx-calc-result{ margin-top:20px; padding:20px; background:var(--elx-brand-deep); border-radius:14px; }
/* A #kalkulator-result tartalmát a meglévő utils/calculate.php AJAX-válasza
   tölti ki (nem ez a sablon írja) — az a válasz egy ".big" span-ben adja
   vissza a végösszeget, ezt emeljük ki nagyban, a körülötte lévő leíró
   szöveg (pl. "32 oldalas online lapozható...") marad kisebb, halványabb. */
.elx-calc-result-text{ font-size:14.5px; color:#bcdcef; line-height:1.5; }
.elx-calc-result-text .big{ display:inline-block; margin-top:4px; font-family:'Bricolage Grotesque',sans-serif; font-size:32px; font-weight:800; color:var(--elx-price-on-deep); font-variant-numeric:tabular-nums; }
.elx-calc-result .elx-note{ font-size:13px; color:#bcdcef; margin-top:8px; opacity:.85; }
/* A "Beállítások és rendelés" gomb (#calculate-order, index.php és
   index/kalkulator.php) a kártya TÉNYLEGES call-to-action-je — az ár
   megmutatása után ez viszi tovább a vásárlót a rendeléshez. Az általános
   .elx-btn-ghost stílus (sötét módban var(--elx-surface) háttér egy
   majdnem ugyanolyan sötét lapon) itt szinte eltűnt, csak a felirat
   látszott, gomb-kontúr nélkül — pedig a .elx-btn-ghost máshol (pl. a
   főoldali "Nézd meg élőben" vagy a Karbantartás-csomag "Hozzáadom a
   rendeléshez" linkje) szándékosan másodlagos marad, ezért nem az
   általános szabályt módosítjuk, csak ezt az egy, ID-vel azonosított
   gombot emeljük ki ugyanazzal a hangsúlyos kezeléssel, mint a
   "Számolás" gombot. */
#calculate-order.elx-btn-ghost{
  background:var(--elx-accent); color:var(--elx-accent-on); border-color:transparent;
  box-shadow:0 10px 24px -8px rgba(255,106,69,.55);
}
#calculate-order.elx-btn-ghost:hover{ border-color:transparent; }
.elx-calc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.elx-calc-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--elx-ink-soft); }
.elx-calc-list li::before{ content:"✓"; color:var(--elx-good); font-weight:800; flex:none; }

.elx-addon-card{ margin-top:20px; background:var(--elx-brand-soft); border:1px solid var(--elx-line); border-radius:16px; padding:26px 30px; display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.elx-addon-info{ flex:1; min-width:260px; }
.elx-addon-badge{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--elx-brand); background:var(--elx-surface); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.elx-addon-info h3{ font-size:18px; margin-bottom:10px; font-family:'Bricolage Grotesque',sans-serif; }
.elx-addon-info ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.elx-addon-info li{ font-size:14px; color:var(--elx-ink-soft); display:flex; gap:8px; }
.elx-addon-info li::before{ content:"+"; color:var(--elx-brand); font-weight:800; }
.elx-addon-price{ text-align:center; flex:none; }
.elx-addon-price .elx-amount{ font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; color:var(--elx-ink); }
.elx-addon-price .elx-per{ font-size:13px; color:var(--elx-ink-soft); margin-bottom:12px; }
.elx-visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
/* "Kosárhoz adom" — kiemelt (accent) gomb, mint a Számolás/Beállítások
   gombok; hozzáadott állapotban a kártya is jelzi a választást. */
.elx-addon-toggle{ cursor:pointer; font-family:inherit; }
.elx-addon-toggle:focus-visible{ outline:3px solid var(--elx-brand); outline-offset:2px; }
.elx-addon-card{ transition:border-color .2s ease, box-shadow .2s ease; }
.elx-addon-card.is-added{ border-color:var(--elx-good); box-shadow:0 0 0 2px var(--elx-good); }
.elx-addon-card.is-added .elx-addon-toggle{ background:var(--elx-good); color:#fff; box-shadow:none; }
@media (max-width:560px){ .elx-addon-card{ flex-direction:column; align-items:stretch; text-align:center; } .elx-addon-info{ min-width:0; } }

/* ---- ajánlások / esettanulmányok ---- */
.elx-testi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%),1fr)); gap:22px; }
.elx-testi{ background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:16px; padding:26px; box-shadow:var(--elx-shadow); display:flex; flex-direction:column; gap:14px; }
.elx-testi q{ font-size:15.5px; line-height:1.6; quotes:none; }
.elx-testi .elx-who{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px; border-top:1px solid var(--elx-line); }
.elx-testi .elx-avatar{ width:36px; height:36px; border-radius:50%; background:var(--elx-brand-soft); color:var(--elx-brand); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none; overflow:hidden; }
.elx-testi .elx-avatar img{ width:100%; height:100%; object-fit:cover; }
.elx-testi .elx-who .elx-name{ font-weight:700; font-size:13.5px; }
.elx-testi .elx-who .elx-co{ font-size:12.5px; color:var(--elx-ink-soft); }

/* ---- GYIK ---- */
.elx-faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:1px; background:var(--elx-line); border:1px solid var(--elx-line); border-radius:16px; overflow:hidden; }
.elx-faq-item{ background:var(--elx-surface); }
.elx-faq-item summary{ padding:18px 22px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.elx-faq-item summary::-webkit-details-marker{ display:none; }
.elx-faq-item summary::after{ content:"+"; font-size:22px; color:var(--elx-brand); flex:none; font-weight:400; }
.elx-faq-item[open] summary::after{ content:"–"; }
.elx-faq-item p{ padding:0 22px 18px; color:var(--elx-ink-soft); font-size:15px; max-width:64ch; }

/* ---- záró CTA ---- */
.elx-cta-band{ background:var(--elx-brand-deep); color:#eef6fb; border-radius:24px; padding:48px 32px; text-align:center; }
.elx-cta-band h2{ color:#fff; font-size:clamp(22px,3.4vw,32px); }
.elx-cta-band p{ color:#bcdcef; margin-top:12px; font-size:16px; }
.elx-cta-band .elx-hero-ctas{ justify-content:center; margin-top:26px; }

/* ---- lábléc ---- */
.elx-footer{ background:var(--elx-surface); border-top:1px solid var(--elx-line); padding:48px 0 28px; }
.elx-foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media (max-width:700px){ .elx-foot-grid{ grid-template-columns:1fr; gap:28px; } }
.elx-foot-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--elx-ink-soft); margin-bottom:14px; }
.elx-foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.elx-foot-grid a{ text-decoration:none; color:var(--elx-ink-soft); font-size:14.5px; }
.elx-foot-grid a:hover{ color:var(--elx-brand); }
.elx-foot-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--elx-line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--elx-ink-soft); }

.elx-note-banner{ background:var(--elx-accent-soft); border-bottom:1px solid var(--elx-line); padding:10px 0; text-align:center; font-size:13.5px; color:var(--elx-ink); }
.elx-note-banner strong{ color:var(--elx-accent); }

/* ---- jQuery UI tooltip — modernizálva ---- */
/* Ez a szabály szándékosan NEM elx- előtagos, mert a régi jQuery UI
   tooltip-widget ($('[title]').tooltip(...), lásd index/head.php) az
   EGÉSZ oldalon fut, minden title-attribútumos elemen — a régi
   sárga/zöld buborék helyett mindenhol ezt a letisztultabb, sötét
   "chip" stílust adja, a design témától függetlenül (a tooltipek a
   legtöbb modern felületen is fixen sötétek, világos oldalon is). */
.ui-tooltip{
  padding:7px 12px;
  max-width:260px;
  background:#1c2430;
  color:#f4f6f5;
  border:none;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
}
body .ui-tooltip{ border-width:0; }
.ui-tooltip .arrow{ display:none; }

/* ---- mobil teljes képernyős menü (overlay) ---- */
/* A .overlay/.overlay-contentscale/.overlay-close osztályokat és a JS
   nyitó-záró logikáját (admin/js/mobile_menu.js) változatlanul hagytuk —
   csak a MEGJELENÉSÉT modernizáljuk. A régi szabályok (élénkzöld háttér,
   54px-es linkek, cross.png ikon) elem/osztály-kombinációi miatt itt is
   legalább ugyanolyan vagy magasabb specificitás kell a felülíráshoz. */
.overlay.elx-overlay{ background:var(--elx-brand-deep); display:flex; align-items:center; justify-content:center; }
.overlay.elx-overlay .elx-overlay-close{
  width:44px; height:44px; position:absolute; right:20px; top:20px;
  background:rgba(255,255,255,.12); border-radius:10px; border:none;
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
}
.elx-overlay .elx-overlay-nav{ position:static; transform:none; height:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 24px; }
.elx-overlay .elx-overlay-nav ul{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; align-items:center; gap:4px; height:auto; width:auto; }
.elx-overlay .elx-overlay-nav ul li{ display:block; height:auto; min-height:0; }
.elx-overlay .elx-overlay-nav ul li a{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(26px,7vw,36px); font-weight:700;
  color:#fff; display:block; padding:8px 0; transition:color .15s ease;
}
.elx-overlay .elx-overlay-nav ul li a:hover,
.elx-overlay .elx-overlay-nav ul li a:focus{ color:var(--elx-accent); }
.elx-overlay .elx-overlay-cta{ margin-top:10px; }
.elx-overlay .elx-theme-toggle-overlay{
  margin-top:18px; width:auto; height:auto; background:transparent;
  border:1px solid rgba(255,255,255,.3); color:#fff; display:inline-flex;
  align-items:center; gap:8px; padding:10px 18px; border-radius:10px;
}
.elx-overlay .elx-theme-toggle-overlay span{ font-size:14px; font-weight:600; }
@media (min-width:821px){ .elx-overlay{ display:none !important; } }

/* ---- oldal-cím banner (index/topCim.php) ---- */
/* Fix (nem téma-változó) sötét háttér + világos szöveg, szándékosan —
   ez a banner MINDEN aloldalon fut, azokon is, amik még nincsenek
   áttervezve, ezért önmagában kell konzisztensnek lennie, nem szabad a
   mögötte lévő (esetleg régi, világos) oldalháttértől függenie. */
.elx-page-title{ padding:44px 0 40px; background:var(--elx-brand-deep); }
.elx-page-title h1, .elx-page-title .elx-h1{ font-family:'Bricolage Grotesque',sans-serif; color:#fff; font-size:clamp(26px,4vw,40px); font-weight:700; line-height:1.12; margin:0; text-wrap:balance; }
.elx-page-title p{ color:#bcdcef; margin-top:10px; font-size:15.5px; max-width:64ch; font-family:'Manrope',sans-serif; }

/* ---- általános tartalom-tipográfia (cikkek/GYIK az .elx-scope alatt) ---- */
/* Csak azokon az oldalakon aktív, amiket az index.php $elx_page_ready
   már bekapcsolt (lásd ott a megjegyzést) — enélkül a régi oldalakon a
   sötét módra reagáló szövegszín a régi, világos háttéren olvashatatlanná
   válna. */
.elx-scope article{ max-width:760px; margin:0 auto 48px; padding:0 28px; }
.elx-scope article h1, .elx-scope article h2.elx-article-title{ font-size:clamp(24px,3.4vw,32px); margin-bottom:20px; padding-left:0; line-height:1.12; }
.elx-scope article .content h2{ font-size:22px; margin:32px 0 12px; }
.elx-scope article .content h3{ font-size:17px; margin:22px 0 8px; }
.elx-scope article .content p{ margin:0 0 14px; color:var(--elx-ink-soft); line-height:1.65; }
.elx-scope article .content a{ color:var(--elx-brand); }
.elx-scope article .content table.elx-ar-tabla{ width:100%; border-collapse:collapse; margin:10px 0 22px; font-size:15px; }
.elx-scope article .content table.elx-ar-tabla th, .elx-scope article .content table.elx-ar-tabla td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--elx-line); }
.elx-scope article .content table.elx-ar-tabla th{ font-family:'Bricolage Grotesque',sans-serif; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--elx-ink-soft); background:var(--elx-brand-soft); }
.elx-scope article .content table.elx-ar-tabla td:last-child, .elx-scope article .content table.elx-ar-tabla th:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.elx-scope article .content table.elx-ar-tabla td:last-child{ font-weight:700; color:var(--elx-ink); }
.elx-scope article .content ul,
.elx-scope article .content ol{ margin:0 0 14px; padding-left:22px; color:var(--elx-ink-soft); }
.elx-scope article .content li{ margin-bottom:6px; }
.elx-scope article .lead-container h3{ font-size:16px; color:var(--elx-ink-soft); font-weight:500; margin:0 0 24px; }

/* Régi cikk-lista tördelése (Blog, GYIK) — az article elemek egymás
   alatt sorolódnak fel, a "border-bottom: 1px dotted" pontvonalat egy
   modern, tokenes elválasztóra cseréljük. A "br" elemek a régi
   sablonban pusztán térközpótlók voltak (a régi CSS nem margóval/
   gap-pel dolgozott) — itt már felesleges látható törésvonalak
   lennének, ezért elrejtjük őket. */
.elx-scope article{ border-bottom:1px solid var(--elx-line); padding-bottom:40px; }
.elx-scope article:last-child{ border-bottom:0; padding-bottom:0; }
.elx-scope article > br{ display:none; }

/* Kép + bevezető szöveg sor (index.php a lead_kep_position mezőtől
   függően hol a kép elé, hol a bevezető szöveg utáni sorba teszi a
   képet — ezért nem íráshoz kötött CSS-sorrenddel, hanem egy közös
   flex-wrapperrel (.elx-media-row) igazítjuk egymás mellé őket). */
.elx-scope .elx-media-row{ display:flex; gap:24px; align-items:flex-start; margin-bottom:20px; }
.elx-scope .elx-media-row .img-container{ display:block; flex:0 0 220px; width:220px; text-align:left; }
.elx-scope .elx-media-row .img-container img{ display:block; width:100%; height:auto; border-radius:14px; }
.elx-scope .elx-media-row .lead-container{ display:block; flex:1; min-width:0; width:auto; }
@media (max-width:560px){
  .elx-scope .elx-media-row{ flex-direction:column; }
  .elx-scope .elx-media-row .img-container{ width:100%; flex:none; }
}

/* "Tovább olvasom / részletek" és "« vissza" gombok — a régi sima
   szöveglink helyett az elx-btn-ghost mintáját követő pill-gomb. */
.elx-scope article .moreLink{
  display:inline-flex; align-items:center; gap:6px; margin:0; margin-top:4px;
  padding:10px 18px; border-radius:999px; border:1px solid var(--elx-line);
  background:var(--elx-surface); color:var(--elx-brand); font-weight:700;
  font-size:14.5px; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.elx-scope article .moreLink:hover{ background:var(--elx-brand); border-color:var(--elx-brand); color:#fff; }

/* Galéria-bélyegképek (jelenleg egy blogbejegyzés sem használja, de a
   sablon több oldaltípuson is megjelenhet) — a régi zöld keret helyett
   letisztult, lekerekített rács. */
.elx-scope article .gallery{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 20px; }
.elx-scope article .gallery a{ display:block; width:110px; height:110px; border:0; border-radius:10px; overflow:hidden; }
.elx-scope article .gallery a img{ width:100%; height:100%; object-fit:cover; display:block; }

.elx-scope article #shareme{ margin-top:8px; }
.elx-scope article #disqus_thread{ margin-top:28px; }

/* ---- Elérhetőségek — kapcsolati kártyák (cikkek.tartalom, cikk_id 15) ---- */
.elx-scope .elx-contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:4px 0 8px; }
.elx-scope .elx-contact-block{ background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:16px; padding:28px; }
.elx-scope .elx-contact-icon{ width:38px; height:38px; border-radius:10px; background:var(--elx-brand-soft); color:var(--elx-brand); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.elx-scope .elx-contact-block h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--elx-ink-soft); font-family:'Manrope',sans-serif; font-weight:700; margin-bottom:14px; }
.elx-scope .elx-contact-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:17px; color:var(--elx-ink); margin:0 0 10px; }
.elx-scope .elx-contact-link{ display:block; color:var(--elx-brand); font-weight:600; text-decoration:none; margin-bottom:8px; }
.elx-scope .elx-contact-link:hover{ text-decoration:underline; }
.elx-scope .elx-contact-link-lg{ font-size:18px; margin-bottom:18px; }
.elx-scope article .content .elx-contact-block p{ font-size:14.5px; color:var(--elx-ink-soft); margin:0 0 10px; line-height:1.5; padding:0; }
.elx-scope .elx-contact-block p strong{ color:var(--elx-ink); }
.elx-scope .elx-contact-block .elx-btn{ width:100%; justify-content:center; text-align:center; font-size:14px; padding:12px 16px; margin-top:2px; }
@media (max-width:760px){ .elx-scope .elx-contact-grid{ grid-template-columns:1fr; } }

/* ---- E-lapozó — funkciórács (cikkek.tartalom, cikk_id 8) ---- */
/* A régi tartalom kézzel float-olt/inline-block dobozokból állt, fix
   pasztell háttérszínekkel (rgb(212,250,180) / rgb(202,251,249)) —
   ezek sötét módban olvashatatlanok lettek volna, ezért egységes,
   tokenes kártyarácsra cseréltük (lásd content-updates/ SQL). */
.elx-scope article .content .elx-feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:20px; margin:28px 0 8px; }
.elx-scope article .content .elx-feature{ background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:16px; padding:26px; min-width:0; }
.elx-scope article .content .elx-feature-icon{ width:52px; height:52px; margin-bottom:16px; display:block; object-fit:contain; }
.elx-scope article .content .elx-feature-icon-generic{ background:var(--elx-brand-soft); color:var(--elx-brand); border-radius:14px; display:flex; align-items:center; justify-content:center; }
.elx-scope article .content .elx-feature h3{ font-size:16.5px; margin:0 0 8px; }
.elx-scope article .content .elx-feature p{ font-size:14.5px; color:var(--elx-ink-soft); line-height:1.55; margin:0; padding:0; }

/* =====================================================================
   Megrendelés — rendelési űrlap (index/modules/rendeles.php)
   =====================================================================
   Ez a legérzékenyebb oldal: valódi űrlap-logika (jQuery validáció,
   calculation() AJAX, kupon-ellenőrzés, fájlfeltöltés, végül POST az
   utils/rendeles.php-ra). Itt KIZÁRÓLAG a vizuális réteget alakítjuk át
   — minden eredeti class/id/name attribútum megmarad, semmilyen JS nem
   változik. A két oszlopot (form + beállítások) a régi
   "display:inline-block; width:43%/50.2%" trükk helyett flexbox tartja
   össze, ami sokkal megbízhatóbb tördelést ad keskenyebb nézetben is. */
/* Az általános ".elx-scope article{max-width:760px}" (lásd fentebb) a
   szűk, olvasható szövegoszlophoz készült cikkoldalakra — a rendelési
   űrlapnak viszont a két, egymás mellett futó oszlophoz (form ~420px +
   beállítások ~380px + 28px gap = 828px) ennél szélesebb helyre van
   szüksége. Enélkül a flex sor mindig egy oszlopba tördelt volna. A
   saját, szélesebb article-osztály visszaadja az eredetileg szánt
   két-oszlopos elrendezést. */
.elx-scope .elx-order-article{ max-width:920px; }
.elx-scope #order-form{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; margin-top:28px; }
.elx-scope #order-form > *{ min-width:0; }

.elx-scope .rendeles-form-container{
  display:block; width:auto; max-width:none; flex:1 1 420px; margin:0;
  padding:30px; vertical-align:top; position:relative;
  background:var(--elx-surface); border:1px solid var(--elx-line);
  border-radius:18px; box-shadow:var(--elx-shadow);
}
.elx-scope .rendeles-form-options{ display:block; width:auto; flex:1 1 380px; margin:0; background:none; position:static; }
/* Az ár + "Megrendelem" gomb korábban a form-oszlop ALJÁRA fixált,
   abszolút pozícionált elem volt — ez azt jelentette, hogy szűkebb
   nézetben (ahol a form és a beállítások oszlopa egy oszlopba tördelt)
   a gomb rögtön a form mezői UTÁN, de a beállítások ELŐTT jelent meg:
   bárki leadhatta a rendelést anélkül, hogy egyáltalán meglátta volna a
   beállítási lehetőségeket (SOS, Branding, Karbantartás stb.). Ezért ezt
   a blokkot kiemeltük a form-oszlopból egy önálló, mindkét oszlop ALÁ
   kerülő, teljes szélességű sávba (ld. rendeles.php) — ez garantálja,
   hogy a gomb mindig a beállítások UTÁN következzen, tördelt nézetben
   is. */
.elx-scope .rendeles-form-submit{
  flex-basis:100%; width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin-top:4px; background:var(--elx-surface); border:1px solid var(--elx-line);
  border-radius:18px; box-shadow:var(--elx-shadow); padding:22px 26px;
}
.elx-scope .rendeles-form-submit .rendeles-form-ar{ flex:1 1 260px; margin:0; }

.elx-scope .form-line{ padding:0; margin-bottom:16px; position:relative; }
.elx-scope .form-line div.title{ display:block; width:auto; margin:0; padding:0 0 6px; vertical-align:top; }
.elx-scope .form-line div.title h3{
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:var(--elx-ink-soft);
  text-transform:uppercase; letter-spacing:.04em; padding:0;
}
.elx-scope .form-line div.title h3 span{ color:var(--elx-accent); }
.elx-scope .form-line div.input-container{
  display:flex; align-items:center; gap:8px; width:auto; text-align:left; vertical-align:top;
}
.elx-scope .form-line div.input-container input,
.elx-scope .form-line div.input-container textarea{
  flex:1; min-width:0; width:auto; height:auto; margin-top:0; padding:11px 14px;
  font-size:14.5px; font-family:inherit; color:var(--elx-ink); background:var(--elx-paper);
  border:1.5px solid var(--elx-line); border-radius:10px; transition:border-color .15s ease;
}
.elx-scope .form-line div.input-container input.first{ width:auto; }
.elx-scope .form-line div.input-container input:focus,
.elx-scope .form-line div.input-container textarea:focus{ outline:none; border-color:var(--elx-brand); }
.elx-scope .form-line div.input-container textarea{ resize:vertical; width:100%; }
.elx-scope .form-line div input[type="file"]{ max-width:none; flex:1; font-size:13.5px; color:var(--elx-ink-soft); }
/* A .form-line-hez képest korábban abszolút pozícionált infó-ikonokat
   (telefonszám, számlázási név, katalógus-feltöltés) most az
   input-container flex-sorába helyeztük (ld. rendeles.php) — itt már
   csak a színüket/méretüket kell igazítani, pozícionálás nem kell. */
.elx-scope .form-line i, .elx-scope .form-line a{
  position:static; flex:none; font-size:1.15rem; color:var(--elx-ink-soft); top:auto; right:auto;
}
.elx-scope .form-line i:hover, .elx-scope .form-line a:hover{ color:var(--elx-brand); }
.elx-scope #rotator.form-rotator{ position:static; flex:none; top:auto; margin-left:0; color:var(--elx-brand); }

/* Darabolt katalógus-feltöltés állapotjelzője (ld. rendeles.php JS-e +
   utils/chunk_upload.php). */
.elx-scope .elx-upload-status{ font-size:13px; color:var(--elx-ink-soft); margin-top:6px; min-height:0; }
.elx-scope .elx-upload-status.elx-upload-done{ color:#1a9c5c; font-weight:600; }
.elx-scope .elx-upload-status.elx-upload-error{ color:#e0453f; font-weight:600; }
.elx-scope .elx-upload-status.elx-upload-retry{ color:#c9852b; font-weight:600; }
.elx-scope .elx-upload-bar-track{
  width:100%; height:6px; margin-top:8px; background:var(--elx-paper);
  border:1px solid var(--elx-line); border-radius:6px; overflow:hidden;
}
.elx-scope .elx-upload-bar-fill{ height:100%; width:0; background:var(--elx-brand); transition:width .2s ease; }

.elx-scope .rendeles-form-ar{
  width:auto; margin:0 0 20px; padding:18px 20px; background:var(--elx-paper);
  border:1px solid var(--elx-line); border-radius:14px; font-size:14.5px; color:var(--elx-ink-soft);
  min-height:20px;
}
.elx-scope .rendeles-form-submit .order-btn{
  position:static; flex:0 0 auto; margin-left:auto; width:auto; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--elx-accent); color:var(--elx-accent-on); border:0; border-radius:12px;
  box-shadow:0 10px 24px -8px rgba(255,106,69,.55); font-weight:700; font-size:15.5px;
  padding:15px 28px; text-decoration:none; transition:transform .15s ease;
}
.elx-scope .rendeles-form-submit .order-btn:hover{ transform:translateY(-1px); }
@media (max-width:560px){
  .elx-scope .rendeles-form-submit{ flex-direction:column; align-items:stretch; }
  .elx-scope .rendeles-form-submit .order-btn{ margin-left:0; }
}

.elx-scope .rendeles-form-options .option-group-container{
  background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:16px;
  padding:20px 22px; margin-bottom:20px;
}
.elx-scope .rendeles-form-options .option-group-container h2.header{
  font-family:'Bricolage Grotesque',sans-serif; font-size:17px; margin:0 0 16px;
}
.elx-scope .rendeles-form-options .option-group-container h2.header span,
.elx-scope .rendeles-form-options .option-group-container h2.header a{ color:var(--elx-ink-soft); }
/* A "Beállítások"/"Haladó beállítások" fejlécre kattintva a JS saját
   kódja slideUp()/slideDown()-t hív a .option-cont-ra, ami inline
   "display:block"/"none"-t ír be rá. Emiatt NEM magára a .option-cont-ra
   tesszük a grid-elrendezést (azt a JS mozgatja block/none között),
   hanem egy belső, sosem toggle-ölt .elx-option-grid wrapperre
   (rendeles.php-ban vettük fel) — így a grid-oszlopok mindig
   megmaradnak, függetlenül attól, hogy a szülő épp nyitva/zárva van. */
.elx-scope .option-cont{ background:var(--elx-paper); border-radius:12px; padding:16px; margin-bottom:0; }
.elx-scope .elx-option-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:4px 16px; }
/* A ".tartLabel" checkboxok kattintásra JS-ből (nem CSS-ből) kapnak
   inline "background: #d2e7b1"-et a szülő .one-option divre (ld.
   rendeles.php <script> blokkja) — ezt a JS-t nem bántjuk, csak a
   pasztellzöld inline hátteret semlegesítjük !important-tel, hogy
   sötét módban ne üssön el mindent. */
.elx-scope .option-cont .one-option{ display:block; width:auto; padding:8px 26px 8px 0; margin-bottom:0; position:relative; background:transparent !important; }
.elx-scope .option-cont .one-option label.checkbox{
  position:relative; display:inline-flex; align-items:center; min-height:22px; padding-left:30px;
  cursor:pointer; font-size:14px; font-weight:600; color:var(--elx-ink);
}
.elx-scope .option-cont .one-option label.checkbox .icon,
.elx-scope .option-cont .one-option label.checkbox .icon-to-fade{
  background:var(--elx-surface); border:1.5px solid var(--elx-line); border-radius:6px;
  width:20px; height:20px; left:0; top:50%; transform:translateY(-50%);
}
.elx-scope .option-cont .one-option label.checkbox.checked .icon{
  background-color:var(--elx-brand); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px 12px; border-color:var(--elx-brand);
}
.elx-scope .option-cont .one-option a{ position:absolute; top:9px; right:0; margin:0; color:var(--elx-ink-soft); }
.elx-scope .option-cont .one-option a:hover{ color:var(--elx-brand); }
/* A .kiegeszito-sor label-jét a jquery.superLabels.min.js plugin
   kezeli (inline position:absolute; left/top, lásd admin/js/head.php
   inicializálás): ez egy valódi "lebegő címke" komponens, ami az üres
   mező fölött jelenik meg, majd fókuszra/gépelésre elhalványul. Nem
   írjuk felül a pozícióját (az inline stílus úgyis felülírná), csak a
   .kiegeszito-sor-nak hagyunk fölötte helyet paddinggel, és a címke
   betűstílusát igazítjuk a design-tokenekhez. */
.elx-scope .option-cont .one-option div.kiegeszito-sor{ position:relative; padding:26px 0 8px; }
.elx-scope .option-cont .one-option div.kiegeszito-sor label{ font-size:12px; font-weight:600; color:var(--elx-ink-soft); text-transform:uppercase; letter-spacing:.03em; pointer-events:none; }
.elx-scope .option-cont .one-option div.kiegeszito-sor input{
  display:block; width:100%; max-width:220px; margin:0; padding:8px 10px; font-size:13.5px;
  color:var(--elx-ink); background:var(--elx-surface); border:1.5px solid var(--elx-line); border-radius:8px;
}

/* Foundation reveal-modal (info-buborékok) — a régi #eee háttér + gloss
   PNG helyett a design-tokenekhez igazított kártya. Csak az elx-scope
   alatt fut, nem érinti a még nem áttervezett oldalakon futó modalokat. */
.elx-scope .reveal-modal{
  background:var(--elx-surface); border:1px solid var(--elx-line); border-radius:16px;
  box-shadow:var(--elx-shadow-lg); color:var(--elx-ink); padding:32px 36px 36px;
}
.elx-scope .reveal-modal h1{ font-family:'Bricolage Grotesque',sans-serif; font-size:22px; margin-bottom:14px; }
.elx-scope .reveal-modal p{ font-size:14.5px; color:var(--elx-ink-soft); line-height:1.6; margin-bottom:10px; }
.elx-scope .reveal-modal ul{ color:var(--elx-ink-soft); font-size:14.5px; padding-left:20px; margin-bottom:10px; }
.elx-scope .reveal-modal .close-reveal-modal{ color:var(--elx-ink-soft); }
.elx-scope .reveal-modal .close-reveal-modal:hover{ color:var(--elx-ink); }

@media (max-width:900px){
  .elx-scope #order-form{ flex-direction:column; }
}
@media (max-width:480px){
  .elx-scope .rendeles-form-container{ padding:24px 20px; }
  .elx-scope .rendeles-form-submit{ padding:20px; }
}