/* ============================================================
   FINISAJE — mișcare + detalii comune pentru paginile publice (nu admin).
   Se încarcă ULTIMUL în <head>, după stilurile paginii.

   Reguli: doar transform/scale/translate + opacity; ease-out pe
   intrări, sub 300ms în interfață; ieșirile sunt instant (sistemul
   răspunde repede). `:root` în fața selectorilor = câștigă în fața
   stilurilor duplicate din fiecare pagină, fără !important.
   `scale` / `translate` (proprietăți separate) se compun cu
   `transform`-ul de poziționare existent, nu îl suprascriu.
============================================================ */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Feedback la apăsare ---------- */
:root .btn-nav,
:root .btn-confirma,
:root .btn-trimite,
:root .btn-primar,
:root .btn-rezerva-nou,
:root .btn-vezi-rezervari,
:root .btn-detalii,
:root .btn-anuleaza,
:root .btn-reset,
:root .rzm-trimite,
:root .rzm-voucher-btn,
:root .rzm-nav-inapoi,
:root .whatsapp-float,
:root .call-float,
:root .btn-theme-toggle,
:root .nav-burger,
:root .modal-inchide,
:root .cc-btn,
:root .footer-social a {
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    opacity 200ms ease,
    filter 200ms ease,
    transform 200ms var(--ease-out),
    scale 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

:root .btn-nav:active,
:root .btn-confirma:active:not(:disabled),
:root .btn-trimite:active:not(:disabled),
:root .btn-primar:active,
:root .btn-rezerva-nou:active,
:root .btn-vezi-rezervari:active,
:root .btn-detalii:active,
:root .btn-anuleaza:active,
:root .btn-reset:active:not(:disabled),
:root .rzm-trimite:active:not(:disabled),
:root .rzm-voucher-btn:active,
:root .rzm-nav-inapoi:active,
:root .whatsapp-float:active,
:root .call-float:active,
:root .cc-btn:active,
:root .footer-social a:active {
  scale: 0.97;
}

/* butoane mici, rotunde — puțin mai mult, altfel nu se simte */
:root .btn-theme-toggle:active,
:root .nav-burger:active,
:root .modal-inchide:active {
  scale: 0.92;
}

/* ---------- Hover care mișcă = doar pe mouse ----------
   Pe touch, :hover rămâne „lipit" după tap și butonul stă ridicat. */
@media (hover: none), (pointer: coarse) {
  :root .btn-nav:hover,
  :root .btn-trimite:hover,
  :root .btn-confirma:hover,
  :root .btn-vezi-rezervari:hover,
  :root .btn-rezerva-nou:hover,
  :root .btn-reset:hover,
  :root .rzm-trimite:hover,
  :root .whatsapp-float:hover,
  :root .footer-social a:hover,
  :root .landing-card:hover {
    transform: none;
  }
}

/* ---------- Popover-e: apar din trigger ---------- */
/* meniurile din colțul dreapta-sus (burger, cont) */
:root .nav-burger-menu,
:root .nav-dropdown {
  transform-origin: top right;
  transition: opacity 150ms var(--ease-out), scale 150ms var(--ease-out), translate 150ms var(--ease-out);
}
/* listele / calendarele care cad sub câmpul lor */
:root .rzm-dd-panel,
:root .rzm-cal-pop,
:root .calendar-popover {
  transform-origin: top center;
  transition: opacity 150ms var(--ease-out), scale 150ms var(--ease-out), translate 150ms var(--ease-out);
}
@starting-style {
  :root .nav-burger-menu,
  :root .nav-dropdown,
  :root .rzm-dd-panel,
  :root .rzm-cal-pop.deschis,
  :root .calendar-popover.deschis {
    opacity: 0;
    scale: 0.97;
    translate: 0 -4px;
  }
}
/* liniile burgerului se rotesc în X: mișcare pe ecran, deci ease-in-out, și se termină odată cu
   meniul (160ms față de 150ms), nu la 100ms după el; linia din mijloc doar se stinge */
:root .nav-burger span {
  transition: transform 160ms var(--ease-in-out), opacity 150ms ease;
}

/* ---------- Modale: fundalul se estompează, fereastra crește din centru ---------- */
:root .modal-overlay.deschis,
:root .cc-overlay.cc-vizibil {
  transition: opacity 200ms var(--ease-out);
}
:root .modal-overlay.deschis .modal,
:root .cc-overlay.cc-vizibil .cc-modal {
  transition: opacity 200ms var(--ease-out), scale 240ms var(--ease-out);
}
@starting-style {
  :root .modal-overlay.deschis,
  :root .cc-overlay.cc-vizibil { opacity: 0; }
  :root .modal-overlay.deschis .modal,
  :root .cc-overlay.cc-vizibil .cc-modal { opacity: 0; scale: 0.96; }
}

/* ---------- Mesajele de confirmare apar lin, nu sar în pagină ---------- */
:root .mesaj-succes.vizibil,
:root .modal-auth-banner.vizibil {
  transition: opacity 250ms var(--ease-out), translate 250ms var(--ease-out);
}
@starting-style {
  :root .mesaj-succes.vizibil,
  :root .modal-auth-banner.vizibil { opacity: 0; translate: 0 -4px; }
}

/* ---------- Bannerul de cookies urcă de jos (o singură dată, la prima vizită) ---------- */
:root .cc-banner.cc-vizibil {
  transition: translate 400ms var(--ease-out), opacity 400ms var(--ease-out);
}
@starting-style {
  :root .cc-banner.cc-vizibil { translate: 0 100%; opacity: 0; }
}

/* ---------- Rezervare reușită: bifa „sare" — moment rar, merită bucuria ---------- */
:root .modal-overlay.deschis .modal-succes-check {
  transition: scale 500ms var(--ease-pop) 120ms, opacity 200ms ease 120ms;
}
@starting-style {
  :root .modal-overlay.deschis .modal-succes-check { scale: 0.5; opacity: 0; }
}

/* ---------- Ancore (cuprinsul din Termeni / Politică) ----------
   Meniul e fix sus (~80px): fără margine, titlul ajunge sub el. */
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Mișcare redusă: păstrăm fade-urile, scoatem deplasările ---------- */
@media (prefers-reduced-motion: reduce) {
  @starting-style {
    :root .nav-burger-menu,
    :root .nav-dropdown,
    :root .rzm-dd-panel,
    :root .rzm-cal-pop.deschis,
    :root .calendar-popover.deschis,
    :root .modal-overlay.deschis .modal,
    :root .cc-overlay.cc-vizibil .cc-modal,
    :root .modal-overlay.deschis .modal-succes-check,
    :root .mesaj-succes.vizibil,
    :root .modal-auth-banner.vizibil { scale: 1; translate: none; }
    :root .cc-banner.cc-vizibil { translate: none; }
  }
  /* burgerul devine X direct; linia din mijloc păstrează fade-ul */
  :root .nav-burger span { transition: opacity 150ms ease; }
}

/* ---------- Tipografie ----------
   Titlurile se rup echilibrat (fără un cuvânt singur pe ultimul rând),
   paragrafele evită rândurile-orfane. Browserele vechi ignoră. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* focus vizibil doar la tastatură: contur opac de 2px, portocaliu ars pe tema
   deschisă (4,7:1 pe alb), portocaliu lumină pe cea întunecată (6:1).
   Cel vechi, portocaliu la 60% opacitate, ieșea 1,9:1 — sub pragul de 3:1.
   Câmpurile de formular primesc același inel, ca să nu rămână doar cu
   schimbarea de contur din paginile care pun outline: none pe :focus. */
:root :is(a, button, summary, [role="button"], [role="option"], [role="radio"], [tabindex]):focus-visible {
  outline: 2px solid var(--inel-focus);
  outline-offset: 2px;
}
:root :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--inel-focus);
  outline-offset: 1px;
}

/* ---------- Accesibilitate: „Sari la conținut” + zona <main> ----------
   Linkul e primul element din pagină. Stă decupat (invizibil) până primește
   focus de la tastatură; atunci apare ca o pastilă peste bara de sus.
   Nu ocupă loc în pagină, deci nu schimbă nimic din aspect. */
.sari-la-continut {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--portocaliu-buton);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  clip-path: inset(50%);
  overflow: hidden;
}
.sari-la-continut:focus {
  clip-path: none;
  overflow: visible;
}
:root .sari-la-continut:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #B85A08, 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* <main> cu tabindex="-1" ca linkul să-i poată da focus; fără contur pe el,
   ca să nu apară un chenar în jurul întregii pagini. */
#continut:focus,
#continut:focus-visible { outline: none; }

/* Pe paginile unde <body> e coloană flex, <main> preia același rol de
   coloană flex, ca secțiunile din el să se așeze exact ca înainte
   (fără margini care să se unească). */
.continut-coloana {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

/* Text doar pentru cititoarele de ecran (ex. un titlu de secțiune care
   vizual nu e nevoie să apară). Rămâne în arborele de accesibilitate. */
.doar-cititor-ecran {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Stări de informare comune: eroare / gol / indiciu ----------
   O singură componentă pe paginile publice (lista de mașini, „Rezervările mele”,
   pagina de rezervare), generată de stare-info.js: titlu, explicație, acțiuni.
   Fără pictograme — textul spune tot. Butonul plin, portocaliu, e acțiunea
   principală („Încearcă din nou”); linkurile de contact sunt conturate. */
.stare-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  margin: 0;
  text-align: center;
  color: var(--text-secundar);
  font-size: 15px;
  line-height: 1.5;
}
.stare-info p { margin: 0; max-width: 56ch; }
.stare-info-nowrap { white-space: nowrap; }
.stare-info-titlu {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-principal);
}
body.dark .stare-info-titlu { color: #f0f0f0; }
.stare-info a:not(.stare-info-btn) {
  color: var(--portocaliu-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stare-info-actiuni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.stare-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--portocaliu-buton);
  border-radius: 999px;
  background: var(--portocaliu-buton);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, scale 160ms var(--ease-out);
}
.stare-info-btn:hover {
  background: var(--portocaliu-buton-hover);
  border-color: var(--portocaliu-buton-hover);
  color: #fff;
}
.stare-info-btn:active { scale: 0.97; }
.stare-info-btn--secundar { background: transparent; color: var(--portocaliu-text); }
.stare-info-btn--secundar:hover {
  background: rgba(232, 114, 12, 0.08);
  border-color: var(--portocaliu-buton-hover);
  color: var(--portocaliu-text);
}

/* ---------- Schelet de încărcare (luciu), comun paginilor ---------- */
.schelet-bloc {
  display: block;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.05) 70%);
  background-size: 300% 100%;
  animation: schelet-luciu-comun 1.4s linear infinite;
}
body.dark .schelet-bloc {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 70%);
}
/* „durează mai mult decât de obicei”: apare deasupra scheletului după 6s */
.schelet-indiciu {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secundar);
}
@keyframes schelet-luciu-comun {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* ---------- Pastila WhatsApp (desktop): doar iconița; textul iese la hover / focus ----------
   Pastila cu text permanent acoperea prețul și butonul „Rezervă” ale ultimei mașini
   din rând. Textul se deschide spre stânga, iconița rămâne pe loc. */
:root .whatsapp-float {
  flex-direction: row-reverse;
  gap: 0;
  padding: 0;
  min-width: 56px;
  min-height: 56px;
}
:root .whatsapp-float__icon {
  width: 56px;
  height: 56px;
  background: transparent;
}
:root .whatsapp-float__icon svg { width: 30px; height: 30px; }
:root .whatsapp-float__label {
  max-width: 0;
  padding-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 220ms var(--ease-out), padding 220ms var(--ease-out), opacity 160ms ease;
}
:root .whatsapp-float:hover .whatsapp-float__label,
:root .whatsapp-float:focus-visible .whatsapp-float__label {
  max-width: 260px;
  padding-left: 20px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .schelet-bloc { animation: none; }
  :root .whatsapp-float__label { transition: none; }
}