/* ============================================================
   AI Boost – Visszahívás-kérő SZEKCIÓ  (.cbs)
   ------------------------------------------------------------
   Az oldal RÉSZE, nem modális: a két AI Szakértői Képzés sales oldalon
   közvetlenül a Csomagok (#csomagok) UTÁN áll. A markup statikus HTML-ben él
   (SEO + no-JS + nulla layout-shift), a beküldést az
   /assets/js/callback-section.js intézi.

   NEM tévesztendő össze a `.cbp` (callback-popup) blokkal: az a magától
   felugró modális, ez az oldalba ágyazott szekció. A két komponens
   egymás mellett fut ugyanazon az oldalon, ezért külön névtér.

   Tokenek: main.css :root — ez a fájl NEM definiál új tokent.
   ============================================================ */

/* ---------- Szekció-keret ---------- */

/* A `section.section` alap 120px-es padding-ját (mobilon 64px) NEM írjuk felül:
   a szekció a lap ritmusában marad. Csak a felső elválasztó jön ide, hogy az
   árszekció után látszódjon a váltás. */
.cbs {
  border-top: 1px solid var(--glass-border);
}

/* Halk lila derengés a szekció mögött — a figyelmet ide húzza, anélkül hogy
   az árkártyákkal versenyző, tömör panelt kellene tenni alá. */
.cbs::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(124,58,237,0.10), transparent 70%);
  z-index: -1;
}

/* ---------- Rács ----------
   Három grid-gyerek (bevezető / részletek / űrlap) NEVESÍTETT területeken, nem
   két hasábba csomagolva — mert mobilon a három blokk SORRENDJE más, mint
   desktopon (ld. a ≤960px-es szabályt lentebb), és ezt egyetlen markupból csak
   így lehet megadni. Ugyanaz a minta, mint a /visszahivas/ oldalon. */
.cbs__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "intro form"
    "detail form";
  /* A második sor viszi el a maradékot. Enélkül a magas űrlapkártya (ami
     mindkét sort átfogja) a SORMAGASSÁGOKAT osztja el egyenletesen, és a
     bevezető alá kerülne egy több száz pixeles lyuk a lista előtt. Így a
     fölösleg a lista ALÁ kerül, ahol nem látszik. */
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
}

.cbs__intro  { grid-area: intro; }
.cbs__detail { grid-area: detail; margin-top: var(--space-4); }
.cbs__form   { grid-area: form; }

/* ---------- Bal hasáb: szöveg ---------- */

.cbs__title { margin-top: 12px; }

.cbs__sub {
  margin-top: 18px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
  color: var(--white-dim);
  max-width: 560px;
}

.cbs__detail-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 15px;
}

.cbs__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 560px;
}

.cbs__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--white-dim);
}

/* A szöveg egy <span>-ben van: flex konténerben minden gyerek-ELEM külön
   flex-elem lenne, így a <strong> saját oszlopba szakadna a mondat többi
   részétől. */
.cbs__list li > span { min-width: 0; }
.cbs__list li strong { color: var(--white); font-weight: 600; }

.cbs__list li::before {
  content: '\2713';
  color: var(--cyan);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Jobb hasáb: űrlapkártya ----------
   SZÁNDÉKOSAN NINCS rajta `.reveal`. A .reveal opacity:0-ról indul, és a
   `visible` osztályt a main.js teszi rá — ha a JS bármiért nem fut le (hiba,
   blokkolt fájl, cache), az oldal egyetlen lead-gyűjtő űrlapja láthatatlan
   maradna. A bal hasáb szövege kaphat reveal-t, az űrlap nem. */
.cbs__form {
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid rgba(124,58,237,0.28);
  box-shadow: 0 24px 70px rgba(4,7,26,.45), 0 0 60px rgba(124,58,237,0.10);
  /* Rövid ablaknál nem pányvázzuk ki (nincs sticky): a szekció nem a hajtás
     felett van, és egy görgetés közben „megálló" kártya itt zavaró lenne. */
}

.cbs__form-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

.cbs__form-sub {
  font-size: 14px;
  color: var(--white-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ---------- Mezők ---------- */

.cbs__field { display: flex; flex-direction: column; gap: 6px; }

.cbs__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--white-dim);
}

.cbs__field input {
  background: rgba(14,21,56,0.8);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  /* 13px padding + 15px szöveg → ~48px magas mező (mobil tap target ≥44px) */
  padding: 13px 16px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--white);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease);
}

.cbs__field input::placeholder { color: var(--white-muted); }
.cbs__field input:focus { border-color: rgba(124,58,237,0.5); }
.cbs__field input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.cbs__hint {
  font-size: 12px;
  color: var(--white-muted);
  line-height: 1.45;
}

/* Mező-szintű hibajelzés: a hibaüzenet közvetlenül a hibás mező ALÁ kerül (és a
   magyarázó hint FÖLÉ), mert a gomb alatti egyetlen státuszsor nem mutatja meg,
   MELYIK mezőről van szó. A JS teszi be / veszi ki. */
.cbs__field--error input { border-color: var(--magenta); }
.cbs__error {
  font-size: 12.5px;
  color: var(--magenta);
  line-height: 1.45;
}

/* ---------- Gomb + státusz ---------- */

.cbs__form .btn { width: 100%; justify-content: center; margin-top: 2px; }
.cbs__form .btn[disabled] { opacity: .6; cursor: wait; }

.cbs__status {
  font-size: 14px;
  color: var(--white-muted);
  min-height: 20px;
  text-align: center;
}

/* Üresen ne üssön lyukat a kártyába — de `display:none` NEM használható: az
   aria-live régiót kivenné az akadálymentességi fából, és a képernyőolvasó nem
   mondaná be a hibaüzenetet, amikor az megjelenik. Ezért összecsukjuk, de a
   fában hagyjuk; a negatív margó a 15px-es flex gap-et ejti ki. */
.cbs__status:empty { min-height: 0; margin-bottom: -15px; }
.cbs__status--error { color: var(--magenta); }
.cbs__status a { color: var(--purple-glow); }

/* ---------- Bizalmi sorok + GDPR ---------- */

.cbs__trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}

.cbs__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--white-muted);
  line-height: 1.4;
}

.cbs__trust-item::before {
  content: '\2713';
  color: var(--cyan);
  font-weight: 700;
  flex-shrink: 0;
}

.cbs__gdpr {
  font-size: 12px;
  color: var(--white-muted);
  line-height: 1.5;
}
.cbs__gdpr a { color: var(--purple-glow); }

/* ---------- Sikerállapot ----------
   A JS az űrlapot cseréli le erre. NINCS köszönőoldal-redirect: a látogató épp
   a sales oldalt olvassa, kivinni onnan a legrosszabb kimenet lenne. */

.cbs__done {
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.cbs__done-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(6,214,224,0.12);
  border: 1px solid rgba(6,214,224,0.35);
  margin-bottom: 4px;
}
.cbs__done-icon svg { width: 30px; height: 30px; fill: var(--cyan); }

.cbs__done-title { font-size: 22px; font-weight: 700; color: var(--white); }
.cbs__done-copy  { font-size: 15px; color: var(--white-dim); line-height: 1.6; max-width: 340px; }

/* ---------- Visszalink a szekcióra (GYIK vége) ---------- */

.cbs-backlink {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 15px;
  color: var(--white-muted);
}
.cbs-backlink a { color: var(--purple-glow); font-weight: 600; }
.cbs-backlink a:hover { color: var(--cyan); }

/* ---------- Reszponzív ---------- */

@media (max-width: 960px) {
  /* Egy hasáb, és a három blokk sorrendje: BEVEZETŐ → ŰRLAP → RÉSZLETEK.
     Miért nem a desktop-sorrend (minden szöveg, aztán az űrlap): a látogató épp
     az árat hagyta el, tehát a döntéshez elég a cím + két mondat. A teljes
     „miről lesz szó a hívásban" listát az űrlap elé tolva további ~600px
     görgetés lenne a mezőkig, pont a legmagasabb szándékú olvasónál. A
     részletes megnyugtatás annak jön, aki még olvasni akar. */
  .cbs__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "form"
      "detail";
    row-gap: 34px;
  }
  /* Az űrlapkártya nem nyúlik szét: egy 700–960px széles nézetben a teljes
     szélességű szövegmező bizonytalan, „félkész űrlap" hatást ad. Bal széllel a
     szöveghez igazítva marad, hogy ne szakadjon el az olvasási vonaltól. */
  .cbs__form { max-width: 560px; }
  .cbs__detail { margin-top: 0; }
}

@media (max-width: 600px) {
  .cbs__form { padding: var(--space-4) var(--space-3); max-width: none; }
  .cbs__done { padding: var(--space-5) var(--space-3); }
}