/*
 * Pagina de prezentare a platformei (pentrurestaurant.ro) si bara paginii demo.
 *
 * Paleta proprie, independenta de temele site-urilor: pagina de prezentare nu
 * trebuie sa semene cu niciunul dintre sabloanele vandute, ca sa nu para ca
 * exista un singur sablon.
 */

:root {
  color-scheme: light dark;

  --p-fundal: #ffffff;
  --p-alt: #f5f4f2;
  --p-card: #ffffff;
  --p-inchis: #171512;
  --p-inchis-alt: #221f1a;
  --p-text: #171512;
  --p-slab: #5a544c;
  --p-pe-inchis: #f7f5f1;
  --p-slab-pe-inchis: #b3aca1;
  --p-accent: #9a3412;
  --p-accent-intens: #7c2a0e;
  --p-pe-accent: #ffffff;
  --p-margine: #ddd8d1;
  --p-margine-tare: #8d8579;

  --p-raza: 12px;
  --p-latime: 70rem;
  --p-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --p-font-titlu: Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="clara"]) {
    --p-fundal: #14130f;
    --p-alt: #1c1a16;
    --p-card: #1f1d18;
    --p-inchis: #0d0c0a;
    --p-inchis-alt: #17150f;
    --p-text: #f5f2ec;
    --p-slab: #b0a89b;
    --p-pe-inchis: #f5f2ec;
    --p-slab-pe-inchis: #b0a89b;
    --p-accent: #e8845c;
    --p-accent-intens: #f19d7b;
    --p-pe-accent: #1a0d06;
    --p-margine: #35312a;
    --p-margine-tare: #6d665b;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--p-fundal);
  color: var(--p-text);
  font-family: var(--p-font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--p-accent); }
a:hover { color: var(--p-accent-intens); }

:where(a, button, select, summary):focus-visible {
  outline: 3px solid var(--p-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.p-invelis {
  width: 100%;
  max-width: var(--p-latime);
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (min-width: 48rem) { .p-invelis { padding-inline: 2rem; } }

/* ---------- Antet ---------- */

.p-antet {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--p-fundal);
  border-bottom: 1px solid var(--p-margine);
}

.p-antet__rand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .7rem;
  min-width: 0;
}

.p-marca {
  font-family: var(--p-font-titlu);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--p-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.p-marca span { color: var(--p-accent); }
.p-antet__spatiu { flex: 1 1 auto; }

/* ---------- Butoane ---------- */

.p-buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .55rem 1.15rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: var(--p-accent);
  color: var(--p-pe-accent);
  white-space: nowrap;
}

.p-buton:hover { background: var(--p-accent-intens); color: var(--p-pe-accent); }

.p-buton--contur {
  background: transparent;
  color: var(--p-text);
  border-color: var(--p-margine-tare);
}

.p-buton--contur:hover { background: transparent; border-color: var(--p-accent); color: var(--p-accent); }

.p-buton--mic { min-height: 38px; padding: .35rem .8rem; font-size: .9rem; }

.p-buton--pe-inchis { background: var(--p-pe-inchis); color: var(--p-inchis); }
.p-buton--pe-inchis:hover { background: #ffffff; color: var(--p-inchis); }

.p-buton--contur-pe-inchis {
  background: transparent;
  color: var(--p-pe-inchis);
  border-color: var(--p-slab-pe-inchis);
}
.p-buton--contur-pe-inchis:hover { background: transparent; color: #ffffff; border-color: #ffffff; }

/* ---------- Erou ---------- */

.p-erou {
  background: var(--p-inchis);
  color: var(--p-pe-inchis);
  padding-block: 3rem 3.25rem;
}

.p-erou__titlu {
  margin: 0 0 1rem;
  font-family: var(--p-font-titlu);
  font-size: clamp(2rem, 8.5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: 18ch;
}

.p-erou__descriere {
  margin: 0 0 1.5rem;
  max-width: 46ch;
  color: var(--p-slab-pe-inchis);
  font-size: 1.05rem;
}

.p-erou__actiuni { display: flex; flex-wrap: wrap; gap: .6rem; }

.p-erou__nota {
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: var(--p-slab-pe-inchis);
}

@media (min-width: 48rem) { .p-erou { padding-block: 5rem; } }

/* ---------- Sectiuni ---------- */

.p-sectiune { padding-block: 3rem; }
.p-sectiune--alt { background: var(--p-alt); }

.p-sectiune__titlu {
  margin: 0 0 .5rem;
  font-family: var(--p-font-titlu);
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  line-height: 1.15;
}

.p-sectiune__descriere {
  margin: 0 0 2rem;
  color: var(--p-slab);
  max-width: 54ch;
}

@media (min-width: 48rem) { .p-sectiune { padding-block: 4.5rem; } }

/* ---------- Grile ---------- */

.p-grila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
}

.p-grila > * { min-width: 0; }

.p-card {
  background: var(--p-card);
  border: 1px solid var(--p-margine);
  border-radius: var(--p-raza);
  padding: 1.25rem;
}

.p-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
}

.p-card p { margin: 0; color: var(--p-slab); font-size: .95rem; }

/* ---------- Carduri de tema ---------- */

.p-teme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.p-teme > * { min-width: 0; }

.p-tema {
  display: flex;
  flex-direction: column;
  background: var(--p-card);
  border: 1px solid var(--p-margine);
  border-radius: var(--p-raza);
  overflow: hidden;
}

.p-tema__mostre { display: flex; height: 4.5rem; }
.p-tema__mostra { flex: 1 1 0; min-width: 0; }

.p-tema__corp { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.p-tema__nume { margin: 0 0 .15rem; font-size: 1.1rem; font-family: var(--p-font-titlu); }
.p-tema__potrivit { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--p-accent); font-weight: 700; }
.p-tema__descriere { margin: 0 0 1rem; color: var(--p-slab); font-size: .92rem; flex: 1 1 auto; }

/* ---------- Pret ---------- */

.p-pret {
  max-width: 32rem;
  margin-inline: auto;
  background: var(--p-card);
  border: 2px solid var(--p-accent);
  border-radius: var(--p-raza);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.p-pret__valoare {
  font-family: var(--p-font-titlu);
  font-size: clamp(2.4rem, 12vw, 3.5rem);
  line-height: 1;
  font-weight: 700;
}

.p-pret__perioada { color: var(--p-slab); font-size: 1rem; }
.p-pret__nota { color: var(--p-slab); font-size: .85rem; margin-top: .35rem; }

.p-lista { list-style: none; margin: 1.5rem 0; padding: 0; text-align: left; }

.p-lista li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
}

.p-lista li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .55rem;
  width: .7rem;
  height: .4rem;
  border-left: 2px solid var(--p-accent);
  border-bottom: 2px solid var(--p-accent);
  transform: rotate(-45deg);
}

/* ---------- Avertisment de configurare ---------- */

.p-lipsa {
  background: #fdf3dd;
  color: #6b4900;
  border: 1px solid #b98a1a;
  border-radius: 8px;
  padding: .8rem 1rem;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.p-lipsa code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }

/* ---------- Subsol ---------- */

.p-subsol {
  background: var(--p-inchis);
  color: var(--p-slab-pe-inchis);
  padding-block: 2.5rem;
  font-size: .9rem;
}

.p-subsol a { color: var(--p-pe-inchis); }
.p-subsol__rand { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Bara paginii demo are propriul fisier, public/prezentare/bara.css:
   pagina demo nu trebuie sa incarce regulile globale de aici. */

/* ---------- Previzualizarea temelor ---------- */

/*
 * Cardul arata site-ul demonstrativ REAL, micsorat, nu o captura de ecran.
 *
 * O captura ar trebui refacuta manual la fiecare modificare de tema, si ar
 * ramane in urma exact cand conteaza — cand arati oferta cuiva. Asa,
 * previzualizarea nu poate minti: e aceeasi pagina pe care o deschide clientul.
 *
 * Trucul de scalare: cadrul primeste 400% din latimea cardului, apoi e micsorat
 * de patru ori. Rezultatul ocupa exact latimea cardului, la orice dimensiune,
 * iar pagina dinauntru se randeaza ca pe un ecran lat.
 */
.p-tema__previzualizare {
  position: relative;
  height: 12.5rem;
  overflow: hidden;
  background: var(--p-alt);
  border-bottom: 1px solid var(--p-margine);
}

/*
 * Doua dispozitive suprapuse: laptopul in spate-stanga, telefonul in fata-
 * dreapta. Grupul are latime fixa si e centrat, ca sa arate la fel in orice
 * card, indiferent cat de lat il face grila.
 *
 * Doua, nu trei. Dimensiunile de mai jos nu sunt alese estetic, ci calculate
 * inapoi din latimea logica: latimea INTERIOARA a ramei, inmultita cu patru, e
 * latimea la care se randeaza pagina dinauntru. Bordura nu conta la socoteala
 * asta — de aceea 5.5rem cu bordura de 4px da 320px logic, minimul pentru care
 * construim, iar 5rem ar da 288px, adica o asezare pe care n-o vede nimeni.
 * Laptopul, la fel: 12.125rem cu bordura de 5px da 736px.
 *
 * O tableta strecurata intre ele ar trebui sa coboare sub 5.5rem, deci sub
 * pragul asta. Tabletei ii ajunge secțiunea de mai sus, unde are loc.
 */
.p-scena {
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  width: 15.5rem;
  height: 10.2rem;
}

.p-mini {
  position: absolute;
  overflow: hidden;
  background: var(--p-alt);
  border: solid #2a2724;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.p-mini iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(.25);
  transform-origin: 0 0;
  /* Cadrul nu preia atingeri: apasarea pe card duce la demo, nu deruleaza
     pagina dinauntru. */
  pointer-events: none;
}

.p-mini--laptop {
  left: 0;
  top: 0;
  width: 12.125rem;
  height: 7.2rem;
  border-width: 5px 5px 9px;
  border-radius: 6px 6px 2px 2px;
}

/* Talpa iese in afara ramei, deci nu poate fi un ::after al ei: parintele taie
   ce depaseste, ca sa nu se vada pagina dincolo de ecran. */
.p-scena__talpa {
  position: absolute;
  left: -.9rem;
  top: 7.2rem;
  width: 14rem;
  height: .4rem;
  background: #2a2724;
  border-radius: 0 0 6px 6px;
}

.p-mini--telefon {
  right: 0;
  bottom: 0;
  width: 5.5rem;
  height: 10.2rem;
  border-width: 4px;
  border-radius: 11px;
  z-index: 2;
}

/* Reducerea, cand e activa. Trebuie sa se vada dintr-o privire, altfel nu e
   promotie, e doar un pret mai mic pe care nimeni nu il remarca. */
.p-pret__reducere {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--p-accent);
  color: var(--p-pe-accent);
  font-size: .82rem;
  font-weight: 700;
}

.p-pret__vechi {
  color: var(--p-slab);
  text-decoration: line-through;
  font-weight: 400;
  font-size: .55em;
}

.p-pret__nota .p-pret__vechi { font-size: 1em; }

/* ---------- Întrebări frecvente ---------- */

/*
 * <details> nativ, nu acordeon cu JavaScript: raspunsurile raman in HTML si
 * cand sunt inchise, deci Google le citeste, iar pagina merge fara scripturi.
 */
.p-intrebari { max-width: 48rem; }

.p-intrebare {
  border-bottom: 1px solid var(--p-margine);
  padding: .25rem 0;
}

.p-intrebare summary {
  cursor: pointer;
  padding: .85rem 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.p-intrebare summary::-webkit-details-marker { display: none; }

.p-intrebare summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1rem;
  color: var(--p-accent);
  font-weight: 700;
}

.p-intrebare[open] summary::before { content: "−"; }

.p-intrebare summary h3 {
  display: inline;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  font-family: var(--p-font);
}

.p-intrebare p {
  margin: 0 0 1rem 1.6rem;
  color: var(--p-slab);
  max-width: 60ch;
}

/* ---------- Antetul pe ecrane înguste ---------- */

/*
 * Numele se rupea pe trei rânduri: `overflow-wrap: anywhere` îl lăsa să se
 * taie oriunde, iar cele trei butoane din dreapta nu îi mai lăsau lățime.
 *
 * Nu îl ascundem: e singura cale înapoi la pagina principală dintr-o ancoră.
 * Îl ținem pe un rând și scoatem în schimb butoanele secundare, care duc la
 * secțiuni aflate oricum mai jos în aceeași pagină. „Vezi demo” rămâne — e
 * singurul care duce undeva unde derularea nu ajunge.
 */
@media (max-width: 30rem) {
  .p-marca {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: .95rem;
  }

  .p-antet__rand > .p-buton--contur { display: none; }
}

/* ---------- Rame de dispozitive cu paginile reale înăuntru ---------- */

/*
 * Lățimea ramei decide ce vede pagina dinăuntru. Cadrul primește 400% din
 * lățimea ramei, apoi e micșorat de patru ori: o ramă de 100px randează pagina
 * ca pe un ecran de 400px, adică în așezarea de telefon; una de 330px o
 * randează ca pe 1320px, în cea de laptop.
 *
 * Așa demonstrația e adevărată prin construcție — nu desenăm un telefon cu o
 * poză în el, ci lăsăm pagina să se aranjeze singură la lățimea aceea.
 */
.p-dispozitive {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem 2.5rem;
}

.p-dispozitiv { margin: 0; text-align: center; }

.p-dispozitiv figcaption {
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--p-slab);
}

/*
 * `margin-inline: auto` nu e cosmetica: figura se lateste pana la latimea
 * legendei, iar rama e mai ingusta decat ea — la telefon cu 32px. Fara asta,
 * rama sta lipita la stanga si legenda pare mutata la dreapta, cand de fapt
 * legenda e centrata si rama nu.
 */
.p-ecran {
  position: relative;
  margin-inline: auto;
  overflow: hidden;
  background: var(--p-alt);
  border: 2px solid #2a2724;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.p-ecran iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(.25);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Laptop: ramă lată, cu talpă. */
.p-dispozitiv--laptop .p-ecran {
  width: 20.5rem;
  height: 12.8rem;
  border-radius: 8px 8px 2px 2px;
  border-width: 8px 8px 14px;
}

.p-dispozitiv__talpa {
  width: 24rem;
  height: .55rem;
  margin: 0 auto;
  background: #2a2724;
  border-radius: 0 0 8px 8px;
  max-width: 100%;
}

/* Tabletă: mai îngustă, colțuri mai rotunde. */
.p-dispozitiv--tableta .p-ecran {
  width: 12.5rem;
  height: 16.5rem;
  border-radius: 14px;
  border-width: 10px;
}

/* Telefon: cea mai îngustă, deci pagina intră în așezarea de telefon. */
.p-dispozitiv--telefon .p-ecran {
  width: 6.5rem;
  height: 13.5rem;
  border-radius: 14px;
  border-width: 6px;
}

@media (max-width: 30rem) {
  .p-dispozitive { gap: 1.5rem; }
  .p-dispozitiv--laptop .p-ecran { width: 16rem; height: 10rem; }
  .p-dispozitiv__talpa { width: 18rem; }
}

/* ---------- Panoul, pe pagina de prezentare ---------- */

.p-panou {
  display: grid;
  /* minmax(0, …) si aici: fara el, textul lung din lista impinge coloana. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

/*
 * Telefonul cu panoul e mult mai mare decat cele din secțiunea de dispozitive,
 * si micsorat mult mai putin.
 *
 * Acolo ramele demonstreaza asezarea la trei latimi, deci pot fi mici. Aici
 * trebuie sa se CITEASCA ce scrie pe butoane, altfel sectiunea nu spune nimic.
 *
 * Socoteala, ca sa poata fi refacuta la orice schimbare: cadrul are 390px
 * latime logica — un telefon adevarat — si e aratat pe 250px, deci scara e
 * 250/390 = 0.641. Inaltimea urmeaza aceeasi scara: 780 × 0.641 = 500px.
 */
.p-panou__telefon { margin-inline: auto; }

.p-panou__telefon .p-ecran {
  width: 250px;
  height: 500px;
  border-width: 8px;
  border-radius: 22px;
}

.p-panou__telefon .p-ecran iframe {
  width: 390px;
  height: 780px;
  transform: scale(.641);
}

/* Fara micsorare pe telefon: 250px plus rama incap si la 320px, unde coloana
   de continut are 288px. Un prag pus „de siguranta" facea imaginea mai mica
   tocmai pe ecranul unde conteaza cel mai mult sa se citeasca. */

.p-panou__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  color: var(--p-slab-pe-inchis, var(--p-slab));
}

.p-panou__lista li {
  padding-left: 1.35rem;
  position: relative;
  line-height: 1.55;
}

.p-panou__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: .7rem;
  height: .4rem;
  border-left: 2px solid var(--p-accent);
  border-bottom: 2px solid var(--p-accent);
  transform: rotate(-45deg);
}

.p-panou__lista strong { color: var(--p-text); }

@media (min-width: 52rem) {
  .p-panou { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; }
}

/* ---------- Lucirea din titlu ---------- */

/*
 * Un degrade care traversează încet textul. Discret în mod deliberat: pe o
 * pagină de vânzare, o animație care sare în ochi mută atenția de la ce scrie
 * la faptul că se mișcă.
 */
.p-lucire {
  background-image: linear-gradient(
    100deg,
    var(--p-pe-inchis) 30%,
    var(--p-accent) 45%,
    #ffd9c7 52%,
    var(--p-accent) 59%,
    var(--p-pe-inchis) 74%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: p-lucire 7s ease-in-out infinite;
}

@keyframes p-lucire {
  0%, 12% { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}

/* Cine a cerut mai puțină mișcare primește textul simplu, nu unul transparent. */
@media (prefers-reduced-motion: reduce) {
  .p-lucire {
    animation: none;
    background-image: none;
    color: var(--p-pe-inchis);
  }
}