/* ==========================================================================
   CosmetiQ Pro Solutions — Kezelésfoglalás

   Két komponens, mindkettő a meglévő tokenekre épül:
     .booking  — főoldali blokk a gépkínálat után (teljes szélességű sötét szekció)
     .trybox   — technológia- és gépoldali „próbálja ki kezelésként" doboz

   A hangsúly szándékosan másodlagos: a vásárlás/bérlés marad az elsődleges
   útvonal, ez a bizalomépítő lépés vezet hozzá.
   ========================================================================== */

/* ============ FŐOLDALI BLOKK ============ */

/* A sötét felület maga a szekció, a képernyő teljes szélességében — mint a
   „Rólunk" blokk —, nem egy világos háttéren ülő kártya. Az alja ugyanabba a
   charcoal-950-be fut, mint a következő (sötét) Technológia-szekció, így a
   kettő egy folytonos felület. A fényfoltok a szekcióhoz igazodnak. */
.booking {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--charcoal-800) 0%, var(--charcoal-950) 62%);
  color: var(--color-text-on-dark);
}

.booking__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* Finom fényfoltok — ugyanaz a nyelv, mint a hero és az about szekcióé. */
.booking__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.booking__glow--emerald {
  width: 34rem; height: 34rem;
  top: -6rem; right: -10rem;
  background: rgba(44, 134, 89, 0.22);
}
.booking__glow--gold {
  width: 26rem; height: 26rem;
  bottom: -5rem; left: -8rem;
  background: rgba(196, 165, 118, 0.14);
}
/* Az alsó sáv a következő szekció színébe (charcoal-950) simul, különben a
   levágott fényfolt éles vízszintes vonalat húz a két sötét szekció közé.
   A fényfoltok után áll a DOM-ban, ezért azok fölé fest, a tartalom alá. */
.booking::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 14rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(7, 10, 8, 0), var(--charcoal-950));
  pointer-events: none;
}

.booking__copy { min-width: 0; }

.booking__copy .eyebrow { color: var(--gold-400); }

.booking__title {
  margin-top: var(--space-2);
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.booking__lede {
  margin-top: var(--space-3);
  max-width: 34rem;
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-on-dark-muted);
}

.booking__actions {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.booking__where {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}
.booking__where svg { flex-shrink: 0; opacity: 0.75; }

/* ---- ügyfélút: kipróbálás → bérlés → vásárlás ---- */
.booking__journey {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border-dark);
  counter-reset: cqstep;
}
.booking__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.9rem;
  align-items: baseline;
}
.booking__step::before {
  counter-increment: cqstep;
  content: counter(cqstep);
  grid-row: span 2;
  align-self: start;
  width: 1.85rem; height: 1.85rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(196, 165, 118, 0.45);
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-300);
}
.booking__step-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-text-on-dark);
}
.booking__step-note {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-on-dark-muted);
}
/* Az aktuális lépés — ez az, amit a blokk kínál. */
.booking__step--now::before {
  border-color: var(--gold-400);
  background: rgba(196, 165, 118, 0.14);
  color: var(--gold-200);
}

@media (max-width: 980px) {
  .booking__panel { grid-template-columns: minmax(0, 1fr); }
  .booking__journey {
    padding-left: 0;
    padding-top: var(--space-5);
    border-left: 0;
    border-top: 1px solid var(--color-border-dark);
  }
}
@media (max-width: 560px) {
  .booking__actions .btn { width: 100%; }
}

/* ============ TECHNOLÓGIA- ÉS GÉPOLDALI DOBOZ ============ */

.trybox {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-5);
  padding: clamp(1.15rem, 2.6vw, 1.6rem) clamp(1.25rem, 2.8vw, 1.75rem);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(26, 92, 61, 0.05) 0%, rgba(26, 92, 61, 0.02) 100%);
  border: 1px solid rgba(26, 92, 61, 0.18);
}

.trybox__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--emerald-700);
}
.trybox__label svg { flex-shrink: 0; }

.trybox__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.trybox__text {
  max-width: 38rem;
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.trybox__cta {
  justify-self: start;
  margin-top: 0.35rem;
  /* A gépnév és a nyelvenként eltérő hosszú felirat ne lógjon ki szűk
     kijelzőn — a .btn alapból nowrap. */
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

@media (max-width: 560px) {
  .trybox__cta { justify-self: stretch; width: 100%; }
}

/* A gépoldalon az ajánlatkérés az elsődleges — a kezelésdoboz alatta,
   vékony elválasztóval, hogy látszódjon: másik útvonal. */
.showcase__cta .trybox {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

/* ============ NAVIGÁCIÓS ELEM ============ */

/* Az aranyszín a márka másodlagos akcentusa (ugyanaz, mint a logó alatti
   felirat és a sötét szekciók eyebrow-ja) — ettől kiemelkedik a menüsorból
   anélkül, hogy második gomb kerülne a fejlécbe. */
.nav__links a.nav__book {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--gold-200);
  /* Keretes „pill”, hogy a menüsorból kiemelkedjen, de ne versenyezzen a
     zöld fő gombbal (a felhasználó választása, 2026-09-20). A fejlécben
     1341 px-től is elfér: a teljes tartalom 1234–1245 px. */
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(196, 165, 118, 0.55);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav__links a.nav__book::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
  flex-shrink: 0;
}
.nav__links a.nav__book::after { background: var(--gold-400); }
.nav__links a.nav__book:hover {
  color: var(--gold-200);
  background: rgba(196, 165, 118, 0.12);
  border-color: rgba(196, 165, 118, 0.8);
}

/* A hatodik menüpont miatt a fejléc teljes tartalma 1332 px-et kívánna.
   Ez alatt két lépésben húzzuk össze a sort; 1341 px fölött minden marad
   a régiben.
     901–1340 px : szűkebb köz, kisebb betű, tördelés tiltva
                   (enélkül a „Miért a CosmetiQ?" két sorba tört)
     901–1210 px : a „Termékek megtekintése" gomb sem fér már el — kimarad.
                   A „Termékek" menüpont ugyanoda visz, a hero-ban pedig
                   ott a fő CTA, úgyhogy nem veszik el útvonal. */
@media (min-width: 901px) and (max-width: 1340px) {
  .nav__links { gap: var(--space-3); }
  .nav__links a { font-size: 0.855rem; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1210px) {
  .nav__cta { display: none; }
}

.mobile-menu__links a.is-book {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold-300);
}
.mobile-menu__links a.is-book svg { flex-shrink: 0; opacity: 0.85; }

/* A hatodik menüponttal és a második gombbal a menü magasabb lett, mint
   egy átlagos telefon képernyője — ezért görgethető, és a lábrész alatti
   holt teret visszavesszük. Alacsony kijelzőn a lista is összébb húzódik. */
.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu__lang { margin-top: var(--space-4); }

.mobile-menu__foot {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
}

@media (max-height: 760px) {
  .mobile-menu__links { margin-top: var(--space-4); }
  .mobile-menu__links a { font-size: 1.65rem; }
  .mobile-menu__lang { margin-top: var(--space-3); }
}

/* ============ LÁBLÉC ============ */
.footer__col a.is-book { color: var(--gold-300); }