/* ==========================================================================
   VNails – Prémium dizájn-réteg (premium.css)
   --------------------------------------------------------------------------
   Kézzel írt CSS réteg, NEM Tailwind-fordítás (nincs build-lépés).
   Betöltés az output.css UTÁN, minden szabály a `body.premium-ui` alá scope-olva,
   így az egész redesign egyetlen body-osztály eltávolításával kikapcsolható.
   Nincs külső betű/CDN → GDPR-tiszta, illeszkedik a "helyben fut" üzenethez.
   ========================================================================== */

body.premium-ui {
  /* Meleg, szalon-hangulatú tokenek a meglévő brand-palettához igazítva */
  --p-ink: #2a211c;          /* meleg, majdnem-fekete címsor-szín (nem nyers fekete) */
  --p-ink-soft: #5b4f47;     /* törzsszöveg meleg szürkésbarna */
  --p-brand: #8e5843;        /* fő márkaszín (brand-900) */
  --p-brand-600: #a36d56;    /* brand-800 */
  --p-brand-line: #e8ddd2;   /* hajszál-keret */
  --p-cream: #faf6f2;        /* brand-100 */
  --p-shadow-sm: 0 1px 2px rgba(42,33,28,.06), 0 2px 6px rgba(42,33,28,.05);
  --p-shadow-md: 0 6px 18px -6px rgba(42,33,28,.16), 0 2px 6px rgba(42,33,28,.06);
  --p-shadow-lg: 0 24px 48px -18px rgba(42,33,28,.30), 0 8px 20px -12px rgba(42,33,28,.18);
  --p-serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
}

/* --- Tipográfia: szerif display-címsorok, finomított tracking/leading ------ */
/* FONTOS: itt NEM allitunk szoveg-szint, hogy a megvevo Tailwind text-* osztalyok
   (pl. text-white a sotet CTA-savon) ervenyben maradjanak – kontraszt-vedelem. */
body.premium-ui h1,
body.premium-ui h2,
body.premium-ui .p-display {
  font-family: var(--p-serif);
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-weight: 700;
}
body.premium-ui h3 { letter-spacing: -0.01em; }

/* Hero címsor nagyobb, levegősebb */
body.premium-ui #hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  margin-bottom: 1.1rem;
}
body.premium-ui #hero p {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--p-ink-soft);
  line-height: 1.6;
}

/* Szekció-címsorok mérete/ritmusa */
body.premium-ui section h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

/* --- Eyebrow felcímke (uppercase, tracked) – klasszikus ügynökségi elem ---- */
body.premium-ui .p-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-brand);
  margin-bottom: .9rem;
}
body.premium-ui .p-eyebrow::before,
body.premium-ui .p-eyebrow.center::after {
  content: "";
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--p-brand), transparent);
  display: inline-block;
}
body.premium-ui .p-eyebrow.center { justify-content: center; }
body.premium-ui .p-eyebrow.center::after {
  background: linear-gradient(90deg, transparent, var(--p-brand));
}

/* --- Gombrendszer: egységes, meleg márka, lágy emelkedés ------------------- */
body.premium-ui .p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: .95rem 2rem;
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
body.premium-ui .p-btn-primary {
  background: var(--p-brand);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(142,88,67,.55);
}
body.premium-ui .p-btn-primary:hover {
  background: var(--p-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(42,33,28,.5);
}
body.premium-ui .p-btn-ghost {
  background: transparent;
  color: var(--p-ink);
  border: 1px solid var(--p-brand);
}
body.premium-ui .p-btn-ghost:hover {
  background: var(--p-cream);
  transform: translateY(-2px);
}
body.premium-ui .p-btn-light {
  background: #fff;
  color: var(--p-brand);
  box-shadow: var(--p-shadow-md);
}
body.premium-ui .p-btn-light:hover { transform: translateY(-2px); box-shadow: var(--p-shadow-lg); }

/* A régi kevert .cta-btn gradient egységesítése ugyanerre a meleg márkára */
body.premium-ui .cta-btn {
  background: var(--p-brand) !important;
  box-shadow: 0 8px 20px -8px rgba(142,88,67,.55) !important;
  border-radius: 999px !important;
}
body.premium-ui .cta-btn:hover,
body.premium-ui .cta-btn:focus {
  background: var(--p-ink) !important;
  transform: translateY(-2px);
}

/* --- Kártyák: lágy rétegzett árnyék, hajszál-keret, nagyobb rádiusz -------- */
body.premium-ui .rounded-2xl.shadow-lg,
body.premium-ui .p-card {
  border: 1px solid rgba(142,88,67,.10);
  box-shadow: var(--p-shadow-md);
  border-radius: 1.25rem;
  transition: transform .22s ease, box-shadow .3s ease;
}
body.premium-ui .p-card-hover:hover,
body.premium-ui .rounded-2xl.shadow-lg.hover\:shadow-xl:hover {
  transform: translateY(-4px);
  box-shadow: var(--p-shadow-lg);
}

/* --- USP kártyák finomítása ------------------------------------------------ */
body.premium-ui .p-usp {
  background: #fff;
  border: 1px solid rgba(142,88,67,.10);
  border-radius: 1.1rem;
  padding: 1.6rem 1.4rem;
  box-shadow: var(--p-shadow-sm);
  transition: transform .2s ease, box-shadow .28s ease;
}
body.premium-ui .p-usp:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-md); }
body.premium-ui .p-usp .p-usp-ico {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--p-cream);
  color: var(--p-brand);
  margin-bottom: .9rem;
}
body.premium-ui .p-usp-ico svg { width: 22px; height: 22px; }

/* --- Bizalmi sáv ----------------------------------------------------------- */
body.premium-ui .p-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(142,88,67,.12);
  border: 1px solid rgba(142,88,67,.12);
  border-radius: 1.25rem;
  overflow: hidden;
}
body.premium-ui .p-trust-item {
  background: #fff;
  padding: 1.6rem 1.3rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
body.premium-ui .p-trust-item svg { width: 24px; height: 24px; color: var(--p-brand); flex: none; margin-top: 2px; }
/* Explicit szinek: a kartya mindig feher, ezert sotet modban is sotet szoveg kell */
body.premium-ui .p-trust-item h4 { font-size: .98rem; font-weight: 700; margin: 0 0 .2rem; font-family: system-ui, sans-serif; letter-spacing: 0; color: var(--p-ink); }
body.premium-ui .p-trust-item p { font-size: .86rem; margin: 0; line-height: 1.45; color: var(--p-ink-soft); }

/* --- Hero háttér: finom, meleg, textúrás gradiens -------------------------- */
body.premium-ui #hero {
  background:
    radial-gradient(1200px 380px at 80% -8%, rgba(163,109,86,.16), transparent 60%),
    linear-gradient(180deg, #faf6f2 0%, #f5efe8 100%);
}

/* --- Navigáció: nyugodtabb, tracked linkek -------------------------------- */
body.premium-ui header nav ul.hidden.md\:flex a { letter-spacing: .01em; }
body.premium-ui header nav a[href*="foglalas"],
body.premium-ui header nav a[href*="booking"] { letter-spacing: .01em; }

/* --- Link aláhúzás-reveal (finom) ----------------------------------------- */
body.premium-ui .p-link {
  position: relative;
  text-decoration: none;
  color: var(--p-brand);
}
body.premium-ui .p-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
body.premium-ui .p-link:hover::after { transform: scaleX(1); }

/* --- Prémium lábléc -------------------------------------------------------- */
body.premium-ui footer.p-footer {
  background: #201a16;
  color: #d8ccc2;
}
body.premium-ui .p-footer a { color: #cbb9ac; transition: color .2s ease; }
body.premium-ui .p-footer a:hover { color: #fff; }
body.premium-ui .p-footer h4 {
  color: #fff; font-family: system-ui, sans-serif;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1rem; font-weight: 700;
}

/* --- Görgetésre fade-up (progresszív, JS nélkül is látszik) ---------------- */
body.premium-ui .p-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
body.premium-ui .p-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.premium-ui .p-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Fókusz-állapotok (akadálymentesség = prémium) ------------------------- */
body.premium-ui a:focus-visible,
body.premium-ui button:focus-visible,
body.premium-ui .p-btn:focus-visible {
  outline: 2px solid var(--p-brand);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Finomítás: szekció-elválasztó díszvonal ------------------------------ */
body.premium-ui .p-rule {
  width: 56px; height: 2px; border: 0;
  background: linear-gradient(90deg, var(--p-brand), var(--p-brand-600));
  margin: 1rem auto 0;
  border-radius: 2px;
}