/* ══════════════════════════════════════════════════════════════════
   LEMCRAFT · PERSONALIZARE — panoul de pe pagina de produs + ferestrele.
   Pe telefon fereastra urcă de jos (ca o foaie), pe desktop e centrată.
   ══════════════════════════════════════════════════════════════════ */
.pers{border:1px solid var(--linie);border-radius:22px;background:var(--alb);overflow:hidden}
.pers-cap-panou{display:flex;justify-content:space-between;align-items:baseline;padding:18px 20px 0}
.pers-cap-panou b{font:400 22px/1.2 var(--serif);letter-spacing:-.01em}
.pers-cap-panou span{font-size:13px;color:var(--text-2)}
.pers-schita-panou{padding:14px 20px 4px}
.pers-schita-panou:has(.placheta:empty),.pers-schita-panou:not(:has(.placheta)){display:none}
.pers-schita-panou small{display:block;text-align:center;font-size:11.5px;color:var(--text-2);margin-top:8px}
.pers-randuri{padding:10px 10px 12px}
.pers-rand{width:100%;display:flex;align-items:center;gap:14px;padding:12px 10px;border:0;background:none;border-radius:14px;cursor:pointer;text-align:left;transition:background .15s}
.pers-rand+.pers-rand{border-top:1px solid var(--linie);border-radius:0}
.pers-grup{font:600 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--salvie);padding:14px 10px 4px}
.pers-grup:first-child{padding-top:4px}
.pers-grup+.pers-rand{border-top:0}
.pers-rand:hover{background:var(--hartie)}
.pr-icon{width:42px;height:42px;border-radius:12px;background:var(--hartie-2);display:grid;place-items:center;flex-shrink:0;color:var(--padure)}
.pr-icon svg{width:20px;height:20px}
.pr-icon .mostra{width:42px;height:42px;border-radius:12px}
.pr-text{flex:1;min-width:0;display:flex;flex-direction:column}
.pr-text small{font-size:12.5px;color:var(--text-2)}
.pr-text b{font-weight:500;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pers-rand:not(.completat) .pr-text b{color:var(--cupru)}
.pr-stare svg{width:20px;height:20px;color:var(--text-2)}
.pers-rand.completat .pr-stare svg{color:#fff;background:var(--padure);border-radius:50%;padding:3px}

/* Mostrele de culoare */
.mostra{display:block;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative;overflow:hidden}
.mostra.oglinda::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%)}
.mostra.lemn::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(95deg,rgba(0,0,0,.12) 0 1px,transparent 1px 5px),repeating-linear-gradient(88deg,rgba(255,255,255,.12) 0 2px,transparent 2px 11px)}
.mostra.satinat::after{content:"";position:absolute;inset:0;backdrop-filter:blur(2px);background:rgba(255,255,255,.35)}
.mostra.transparent{background:repeating-conic-gradient(#e7e3dc 0 25%,#fff 0 50%) 0 0/12px 12px!important}
.mostra.transparent::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(200,230,230,.25))}

/* Schiţa plăcuţei */
.placheta{position:relative;border-radius:14px;min-height:170px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;overflow:hidden;
  background:var(--fundal);box-shadow:0 18px 30px -20px rgba(35,48,42,.55),inset 0 0 0 1px rgba(0,0,0,.08)}
.placheta.mica{min-height:140px}
.placheta.lemn::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(94deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px),repeating-linear-gradient(88deg,rgba(255,255,255,.1) 0 2px,transparent 2px 13px)}
.placheta.oglinda::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 42%,transparent 55%)}
.placheta.transparent{background:repeating-conic-gradient(#ece8e1 0 25%,#f8f6f2 0 50%) 0 0/18px 18px}
.placheta.satinat::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35)}
.pl-nume{position:relative;font-family:var(--serif);font-weight:350;font-variation-settings:"opsz" 120;letter-spacing:-.02em;font-size:clamp(30px,4.4vw,42px);line-height:1.05;word-break:break-word;
  background:var(--litere);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.25))}
.placheta.mica .pl-nume{font-size:clamp(26px,3vw,34px)}
.pl-data{position:relative;font:400 14px/1 var(--serif);letter-spacing:.2em;color:var(--litere-f)}
.pl-mesaj{position:relative;font-size:13px;line-height:1.4;color:var(--litere-f);max-width:90%;white-space:pre-line}

/* Fereastra */
body.pers-deschis{overflow:hidden}
/* Stratul urmăreşte ZONA VIZIBILĂ a ecranului, nu pagina: pe telefon tastatura
   (Safari pe iPhone şi Chrome pe Android, din 2022) se aşază PESTE pagină fără s-o
   micşoreze, iar o foaie lipită de jos ar rămâne sub ea — cu câmpul şi butoanele.
   --vv-top / --vv-h vin din visualViewport (personalizare.js). */
.pers-strat{position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-h,100dvh);z-index:120;background:rgba(19,22,20,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .22s}
.pers-strat.vizibil{opacity:1}
.pers-strat[hidden]{display:none}
.pers-foaie{width:min(560px,100%);max-height:min(calc(var(--vv-h,100dvh) - 40px),820px);display:flex;flex-direction:column;background:var(--alb);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.6);transform:translateY(16px);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pers-strat.vizibil .pers-foaie{transform:none}
.pers-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 20px 6px}
.pers-cap small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--salvie)}
.pers-cap h3{margin:4px 0 0;font:400 26px/1.15 var(--serif);letter-spacing:-.01em}
.pers-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--hartie);font-size:22px;cursor:pointer;color:var(--padure);flex-shrink:0}
.pers-previz{padding:8px 20px 0}
.pers-previz:empty{display:none}
.pers-corp{padding:16px 20px 20px;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.pers-cap,.pers-previz,.pers-jos{flex-shrink:0}
.pers-jos{display:flex;gap:10px;justify-content:space-between;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:var(--alb)}
.pers-jos .buton{flex:1;justify-content:center}
.pers-grup{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:14px 0 10px}
.pers-grup:first-child{margin-top:0}
.mostre{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px}
.mostra-btn{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;cursor:pointer;padding:8px 4px;border-radius:14px;font-size:12.5px;line-height:1.25;text-align:center;color:var(--cerneala)}
.mostra-btn .mostra{width:52px;height:52px;transition:transform .15s}
.mostra-btn:hover .mostra{transform:scale(1.06)}
.mostra-btn[aria-pressed="true"]{background:var(--hartie)}
.mostra-btn[aria-pressed="true"] .mostra{box-shadow:0 0 0 3px var(--alb),0 0 0 5px var(--padure)}
.lista-opt{display:flex;flex-wrap:wrap;gap:8px}
.opt-btn{border:1.5px solid var(--linie);background:var(--alb);border-radius:14px;padding:12px 16px;font-size:15px;cursor:pointer;text-align:left}
.opt-btn[aria-pressed="true"]{border-color:var(--padure);background:var(--padure);color:var(--hartie)}
.pers-input{width:100%;border:1.5px solid var(--linie);border-radius:16px;padding:14px 16px;font-size:17px;background:var(--hartie);color:var(--cerneala);font-family:inherit;resize:vertical}
.pers-input:focus{outline:none;border-color:var(--padure);background:var(--alb)}
.pers-input.mare{font-size:22px;padding:16px 18px}
.pers-eticheta{display:block;font-size:13px;font-weight:500;color:var(--padure-2);margin-bottom:8px}
.pers-nota{font-size:13px;color:var(--text-2);margin:12px 0 0}
@media(max-width:640px){
  .pers-strat{padding:0;place-items:end stretch}
  .pers-foaie{width:100%;max-height:calc(var(--vv-h,100dvh) - 12px);border-radius:24px 24px 0 0;transform:translateY(40px)}
  .placheta{min-height:130px}
  .mostre{grid-template-columns:repeat(4,1fr)}
}

/* Cu tastatura deschisă rămâne puţin loc: schiţa se face mică (numele se vede
   în continuare cum îl scrii), notele şi „Pasul x din y" dispar. */
.pers-strat.tastatura .pers-cap{padding-top:12px}
.pers-strat.tastatura .pers-cap small{display:none}
.pers-strat.tastatura .pers-cap h3{font-size:19px;margin:0}
.pers-strat.tastatura .pers-x{width:34px;height:34px;font-size:19px}
.pers-strat.tastatura .placheta{min-height:0;padding:10px 14px;gap:2px;border-radius:10px}
.pers-strat.tastatura .pl-nume{font-size:26px}
.pers-strat.tastatura .pl-data{font-size:11px}
.pers-strat.tastatura .pl-mesaj{display:none}
.pers-strat.tastatura .pers-corp{padding-top:10px;padding-bottom:10px}
.pers-strat.tastatura .pers-nota{display:none}
.pers-strat.tastatura .pers-jos{padding-top:8px;padding-bottom:8px}
.pers-strat.tastatura .pers-jos .buton{padding-top:11px;padding-bottom:11px}

/* ── Pasul „Fontul" ── */
.font-cauta{position:sticky;top:-2px;z-index:2;background:var(--alb);padding-bottom:10px;display:grid;gap:10px}
.font-filtre{display:flex;gap:6px}
.font-filtre button{border:1px solid var(--linie);background:var(--alb);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:500;cursor:pointer}
.font-filtre button[aria-pressed="true"]{background:var(--padure);color:var(--hartie);border-color:var(--padure)}
.fonturi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.font-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:88px;padding:10px 8px;border:1.5px solid var(--linie);background:var(--alb);border-radius:14px;cursor:pointer;min-width:0}
.font-btn[hidden]{display:none}
.font-btn .f-prev{font-size:26px;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cerneala);opacity:.25;transition:opacity .2s}
.font-btn.gata .f-prev,.font-btn.implicit .f-prev{opacity:1}
.font-btn.implicit .f-prev{font:500 16px/1.3 var(--sans,inherit)}
.font-btn small{font-size:12px;color:var(--text-2);text-align:center}
.font-btn small em{display:block;font-style:normal;color:var(--cupru,#b9642a)}
.font-btn[aria-pressed="true"]{border-color:var(--padure);box-shadow:inset 0 0 0 1.5px var(--padure);background:var(--salvie-deschis,#dfe5dc)}
@media(min-width:620px){.fonturi{grid-template-columns:repeat(3,minmax(0,1fr))}}