/* Editorul de placute. Doua coloane: scena (piesa) si panoul de comenzi.
   Pe telefon devin una peste alta, cu scena lipita sus la derulare - altfel
   omul trage de cursoare fara sa vada ce se schimba. */

/* Fontul gravurii, incarcat de la noi, nu din stiva sistemului.
   Motivul e de productie, nu de stil: ACELASI fisier .ttf il foloseste si
   masina, prin `geometrie/productie.py`. Georgia (implicitul de dinainte) nu
   exista pe serverul de gravura, deci clientul ar fi vazut alte litere decat
   cele gravate. Gelasio are metricile lui Georgia si licenta OFL. */
@font-face {
  font-family: "Gelasio";
  src: url("../fonts/Gelasio.ttf") format("truetype-variations"),
       url("../fonts/Gelasio.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fundal: #f4f6f8;
  /* Studio alb: piesa e oglinda, deci fundalul E lumina care se reflecta in ea.
     Un fundal inchis facea argintul sa arate murdar - imaginea asta vinde. */
  --fundal-scena: radial-gradient(110% 85% at 50% 0%, #ffffff 0%, #f7f9fb 45%, #eaeef3 100%);
  --text: #1c2128;
  --slab: #6b7280;
  --linie: #d8dce2;
  --accent: #14795c;
  --rosu: #c0392b;
}

* { box-sizing: border-box; }

/* `hidden` trebuie sa bata orice `display` din regulile de mai jos: panoul de
   unealta ascunde randuri intregi (`.camp`, `.comutator`), iar fara `!important`
   campul de text al unui obiect ramanea vizibil cand era selectata o poza. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundal);
  color: var(--text);
  font: 15px/1.45 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

/* O SINGURA coloana, in ordinea in care se ia decizia: forma -> grosime ->
   gauri -> desenul piesei -> cotele -> personalizare. Scena sta intre gauri si
   cote fiindca acolo e nevoie de ea: cand tragi de lungime vrei sa vezi piesa
   chiar deasupra cursorului, nu intr-o coloana alaturata. */
.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  max-width: 720px;
  margin: 0 auto;
  align-items: start;
}

/* ------------------------------------------------------------------- scena */

.scena {
  background: var(--fundal-scena);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 18px;
  margin: 0 0 18px;
}

/* Cadru cu INALTIME FIXA: piesa se incadreaza singura in el (zoom automat din
   viewBox), deci pagina nu mai creste in jos cand se trage de cursoare. */
.panza-cadru {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(320px, 52vh, 540px);
  overflow: auto;
  touch-action: none;          /* mutarea obiectelor pe telefon, nu derularea */
}

.panza { width: 100%; height: 100%; display: block; }
.panza .maner { touch-action: none; }
.panza image { image-rendering: auto; }

.scena-bara {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .07);
  font-size: 13px;
  color: var(--slab);
}

.comutator { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.comutator.mic { font-size: 12px; color: var(--slab); margin-top: 6px; }
.soapta { margin-left: auto; }

/* ------------------------------------------------------------------- panou */

.panou {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 18px 18px 22px;
}

.panou h1 { font-size: 19px; margin: 0 0 14px; }
.grup { margin-bottom: 18px; }
.grup h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--slab); margin: 0 0 8px; font-weight: 600;
}

.forme { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

.forme button {
  aspect-ratio: 1; border: 1px solid var(--linie); background: #fff;
  border-radius: 9px; cursor: pointer; padding: 5px; transition: .12s;
}
.forme button:hover { border-color: #9aa3ad; }
.forme button[aria-pressed="true"] { border-color: var(--accent); background: #eaf5f1; }
.forme svg { width: 100%; height: 100%; display: block; }

.cursor {
  display: grid; grid-template-columns: 66px 1fr 66px 26px;
  align-items: center; gap: 8px; margin-bottom: 8px;
}
.cursor label { font-size: 13px; color: var(--slab); }
.cursor input[type=range] { width: 100%; accent-color: var(--accent); }
.cursor input[type=number] {
  width: 100%; padding: 5px 6px; border: 1px solid var(--linie);
  border-radius: 7px; font: inherit; font-size: 13px;
}
.um { font-size: 12px; color: var(--slab); }

.butoane { display: flex; flex-wrap: wrap; gap: 6px; }
.butoane button {
  border: 1px solid var(--linie); background: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.butoane button[aria-pressed="true"] {
  border-color: var(--accent); background: #eaf5f1; color: var(--accent); font-weight: 600;
}

.unelte { border: 1px solid var(--linie); border-radius: 10px; padding: 12px; background: #fafbfc; }
.unelte h2 { margin-bottom: 10px; }
.pozitie { margin-left: auto; align-self: center; font-size: 12px; color: var(--slab); }
#u_sterge { color: var(--rosu); border-color: #f0cdc8; }

.camp { display: block; margin-bottom: 10px; font-size: 13px; color: var(--slab); }
.camp span { display: block; margin-bottom: 4px; }
.camp input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--linie);
  border-radius: 8px; font: inherit; font-size: 14px; color: var(--text);
}
.nota { font-size: 12px; color: var(--slab); margin: 4px 0 0; min-height: 16px; }

/* -------------------------------------------------------------------- pret */

.deviz {
  border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 4px;
}
.deviz .rand { display: flex; justify-content: space-between; font-size: 13px; color: var(--slab); }
.deviz .rand + .rand { margin-top: 4px; }
.deviz .total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; font-size: 15px;
}
.deviz .total b { font-size: 26px; letter-spacing: -.02em; }
.deviz .fara-tva { font-size: 12px; color: var(--slab); text-align: right; margin-top: 2px; }

.erori { list-style: none; margin: 12px 0 0; padding: 0; }
.erori li {
  background: #fdf1f0; border: 1px solid #f3ccc7; color: #8e2f24;
  border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px;
}

.comanda {
  width: 100%; margin-top: 14px; padding: 13px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  font-size: 15px; cursor: pointer;
}
.comanda:disabled { background: #b8bfc7; cursor: not-allowed; }

@media (max-width: 900px) {
  .forme { grid-template-columns: repeat(5, 1fr); }
}

/* ------------------------------------------------------- fete si obiecte */

.fete { display: flex; gap: 6px; margin-bottom: 12px; }
.fete button {
  border: 1px solid var(--linie); background: rgba(255, 255, 255, .8);
  border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.fete button[aria-pressed="true"] {
  border-color: var(--accent); background: #fff; color: var(--accent); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 121, 92, .18);
}
.pastila {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 11px; line-height: 1; padding: 3px 6px; font-weight: 600;
}

.obiecte { list-style: none; margin: 10px 0 0; padding: 0; }
.obiecte li {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border: 1px solid var(--linie); border-radius: 9px; margin-bottom: 6px;
  cursor: pointer; background: #fff; font-size: 13px;
}
.obiecte li.ales { border-color: var(--accent); background: #eaf5f1; }
.obiecte li.gol {
  border-style: dashed; color: var(--slab); cursor: default; justify-content: center;
}
.obiecte .pict {
  width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto;
  background: #eef1f4; border-radius: 6px; font-size: 12px; color: var(--slab);
}
.obiecte .nume { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obiecte .x {
  border: 0; background: none; color: var(--slab); font-size: 17px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.obiecte .x:hover { color: var(--rosu); }

/* ---------------------------------------------- editorul in pagina produsului */

/* Coloana din dreapta a temei e ingusta, iar media query-urile se uita la
   fereastra, nu la container: fara regula asta, editorul ar incerca doua coloane
   intr-un spatiu de 700 px si ar da pe dinafara. */
.simoplacute--in-produs .editor {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 14px;
}
.simoplacute--in-produs .scena { position: static; }
.simoplacute--in-produs .panza-cadru { height: clamp(280px, 40vh, 420px); }
.spl-dela { font-size: .8em; color: #6b7280; margin-right: 2px; }