/* =========================================================================
Scena — sistem vizual
Un singur fisier: tokeni, componente, ecrane. Tema deschisa, brand violet,
accent amber. Fundalurile sunt albe sau aproape albe, suprafetele se despart
prin bordura subtire si umbra discreta — nu prin sticla si gradient.
Numele tokenilor au ramas cele vechi, ca toate componentele sa le urmeze
fara sa fie atinse una cu una.
========================================================================= */
:root {
/* suprafete. --bg este off-white-ul paginii, --surface albul cardurilor;
--surface-2 si --surface-3 sunt treptele de gri pentru zonele adancite
(capete de tabel, casete goale, pilule fara culoare). */
--bg: #FAFAF9;
--bg-2: #F4F4F5;
--surface: #FFFFFF;
--surface-2: #FAFAF9;
--surface-3: #F4F4F5;
--line: #E4E4E7;
--line-soft: #F1F1F3;
/* text. Toate trei trec AA pe fundal si pe card: 16,96:1, 4,63:1 si 4,83:1.
--faint nu mai e o a treia treapta de gri mai slaba decat pragul, ci
acelasi gri pe fundal mai deschis. */
--text: #18181B;
--muted: #71717A;
--faint: #71717A;
/* --muted da 4,63:1 pe fundal si 4,83:1 pe card, dar numai 4,41:1 pe suprafetele
colorate palid (violetul din --accent-soft) — sub prag. Acolo se scrie cu asta:
7,05:1 pe acelasi fundal. */
--muted-ink: #52525B;
/* brand. Violetul este culoarea Scena; amber-ul este accent, nu a doua
culoare dominanta. Alb pe violet = 7,10:1, alb pe violet inchis = 10,95:1.
Amber NU poate purta text alb (2,15:1), deci textul de pe el este --ink-on-accent
(8,25:1). */
--accent: #6D28D9;
--accent-2: #6D28D9;
--accent-strong: #6D28D9;
--accent-strong-2: #6D28D9;
--accent-strong-h: #4C1D95;
--accent-strong-h2: #4C1D95;
--accent-dark: #4C1D95;
--accent-soft: #F5F3FF; /* fundal violet foarte palid, pentru stari „activ” */
--accent-soft-2: #EDE9FE;
--accent-line: #DDD6FE;
--accent-text: #5B21B6; /* violet ca text pe fundal palid: 7,6:1 */
--amber: #F59E0B;
--amber-soft: #FFFBEB;
--amber-line: #FDE68A;
--amber-text: #92400E; /* amber ca text, pe fundal palid */
--ink-on-accent: #18181B; /* ce se scrie pe amber */
/* stari. --ok este verdele de umplutura si de iconita; ca TEXT cade (3,16:1),
deci textul verde foloseste --ok-text (4,80:1). */
--ok: #16A34A;
--ok-text: #15803D;
--ok-soft: #F0FDF4;
--ok-line: #BBF7D0;
--warn: #F59E0B;
--warn-text: #92400E;
--warn-soft: #FFFBEB;
--warn-line: #FDE68A;
--danger: #DC2626;
--danger-text: #DC2626;
--danger-soft: #FEF2F2;
--danger-line: #FECACA;
--info: #2563EB;
--info-soft: #EFF6FF;
--info-line: #BFDBFE;
/* tonul „fara culoare” al pilulelor */
--pill-neutral: #71717A;
/* Un cod QR se citeste doar intunecat pe fond deschis: culorile lui nu urmeaza tema. */
--qr-bg: #ffffff;
--qr-fg: #18181B;
/* tipografie: sapte trepte, nu 14 marimi. Titlurile au urcat o treapta fata de
tema inchisa: pe fundal deschis ierarhia se vede din marime si greutate,
nu din strălucire. */
--step--2: 12px; /* etichete, meta */
--step--1: 13px; /* text secundar */
--step-0: 15px; /* corp */
--step-1: 17px; /* titlu de card, subtitlu */
--step-2: 20px; /* h2 */
--step-3: clamp(24px, 3vw, 32px); /* h1 */
--step-4: clamp(32px, 5vw, 52px); /* hero */
/* spatiere: scara 4-8-12-16-24-32-48-64-96 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
/* forma: butoane si campuri 10px, carduri 14px, containere mari 18px.
Nimic nu devine pastila in afara pilulelor propriu-zise. */
--r-sm: 10px;
--r: 14px;
--r-lg: 18px;
--r-pill: 999px;
/* umbre discrete: una pentru suprafete, una pentru ce trebuie sa iasa in fata */
--shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
--shadow-2: 0 2px 8px rgba(0, 0, 0, .05);
--shadow-3: 0 8px 24px rgba(0, 0, 0, .08);
--ease: cubic-bezier(.32, .72, .35, 1);
--head-h: 60px;
/* Fara asta, un camp fara clasa este desenat de browser dupa tema sistemului:
pe un calculator cu tema inchisa iesea gri-inchis in mijlocul paginii albe. */
color-scheme: light;
/* „Sticla” nu mai exista ca efect: tokenii ei trimit acum la suprafete opace,
bordura subtire si umbra discreta. Asa cele ~60 de locuri care ii foloseau
devin corecte pe fundal deschis fara sa fie rescrise, si dispare costul
backdrop-filter pe listele lungi de carduri. */
--glass: var(--surface);
--glass-2: var(--surface-3);
--glass-line: var(--line);
/* Nu „none”: acest token intra in liste de umbre (`var(--glass-hi), var(--shadow-3)`),
iar `none` nu este valid intr-o lista — browserul arunca declaratia intreaga, iar
opt reguli (cardurile, tabelele, coperta, alertele, lista combo) ramaneau fara umbra.
O umbra transparenta de dimensiune zero este valida si nu se vede. */
--glass-hi: 0 0 #0000;
--glass-blur: none;
--glass-blur-sm: none;
--glass-shade: var(--shadow-2);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
/* Inter daca o are sistemul, altfel fontul de interfata al platformei — aceeasi
familie geometrica, fara cerere la un server din afara (vezi regula GDPR). */
font: var(--step-0)/1.6 Inter, "Inter var", "Segoe UI Variable Text", "Segoe UI",
system-ui, -apple-system, "Helvetica Neue", sans-serif;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--accent-dark); }
h1 {
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.2;
letter-spacing: -.02em;
margin: 0 0 6px;
}
h2 {
font-size: var(--step-1);
letter-spacing: -.01em;
color: var(--text);
font-weight: 650;
margin: var(--space-6) 0 var(--space-3);
}
h2:first-of-type { margin-top: 24px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
code {
background: var(--surface-3);
border: 1px solid var(--line-soft);
border-radius: 6px;
padding: 1px 6px;
font-size: 12.5px;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Utilitare de spatiere si aliniere: inlocuiesc stilurile inline repetate
(margin-top:0 de 31 de ori, margin:0 de 23 de ori etc.). Sunt marcate `!important`
pentru ca inlocuiesc atribute `style`, care bateau orice regula din foaie; fara asta,
o clasa de componenta scrisa mai jos in fisier (.card, .row…) ar schimba tacit
spatierea pe care o aveau paginile. */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.m-0 { margin: 0 !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
/* text doar pentru cititoarele de ecran (badge-uri numerice, etichete de context) */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------------ pictograme
SVG-uri randate de icon() (includes/icons.php) in locul emoji-urilor. Mostenesc
culoarea (`currentColor`) si marimea textului din jur (1em), deci un buton rosu are
pictograma rosie si un titlu mare o are mare, fara reguli scrise pentru fiecare loc.
`flex: none` le tine la marimea lor in butoane si pilule, care sunt containere flex. */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.ico-sprite { display: none; } /* sprite-ul paginii: doar definitii, nimic de aratat */
/* ------------------------------------------------------------------ layout */
.wrap {
max-width: 1220px;
margin: 0 auto;
padding: 22px 24px 80px;
/* Doar opacitate: un `transform` animat cu fill-mode „both” ramane aplicat si dupa
ce animatia se termina, iar atunci .wrap devine sistemul de referinta al oricarui
descendent `position: fixed` — barele si butoanele lipite de ecran ar ajunge la
capatul paginii in loc sa stea la vedere. */
animation: apare .3s var(--ease) both;
}
.wrap.center { max-width: 460px; padding-top: 9vh; }
/* Pagina de bun venit sta tot centrat, dar are loc pentru trei carduri. */
.wrap.center.welcome { max-width: 1020px; padding-top: 6vh; }
@keyframes apare {
from { opacity: 0; }
to { opacity: 1; }
}
/* Foaia barei de jos urca de sub ea. Fara `fill-mode`, anume: un cadru final pastrat
lasa in urma o matrice identitate, iar un element cu `transform` devine reperul
oricarui descendent `position: fixed` — chiar greseala din `.wrap`. */
@keyframes urca {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.foot {
text-align: center;
color: var(--faint);
font-size: 12px;
padding: 26px 20px 34px;
line-height: 1.7;
}
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 6px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; }
.foot-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 10px; }
.foot-social a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.foot-social a:hover { color: var(--text); }
.foot-social svg { flex: none; }
/* ------------------------------------------------------------------ prezentarea salii */
.presentation .room-description { line-height: 1.6; max-width: 80ch; white-space: normal; margin: 6px 0 14px; }
.facility-group { margin-top: 10px; }
.facility-title { margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.chip.facility { --pill: var(--ok); font-size: var(--step--2); padding: 5px 11px; }
details.card summary { cursor: pointer; }
/* ------------------------------------------------------------------ echipamente & servicii */
.extras { margin: 4px 0 12px; }
.extras summary { cursor: pointer; }
.extras-provider { margin-top: 12px; }
.extras-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.extras-title a { color: var(--muted); }
.extra-item { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); margin: 0; font-weight: 400; }
.extra-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.extra-name small { display: block; font-size: 12px; margin-top: 2px; }
.extra-price { white-space: nowrap; font-size: 13px; color: var(--muted); }
.extra-qty { white-space: nowrap; font-size: 13px; color: var(--muted); }
.extra-qty input { width: 64px; display: inline-block; padding: 5px 8px; margin-left: 4px; }
/* in formulare (.form label/input sunt block, 100%): articolele raman pe grila, cu casuta si cantitatea mici */
.form .extra-item { display: grid; margin-bottom: 0; }
.form .extra-item input[type="checkbox"] { display: inline-block; width: 18px; margin: 0; }
.form .extra-qty input { display: inline-block; width: 64px; margin-top: 0; }
.item-inactive { opacity: .6; }
.item-videos { margin: 6px 0 0; grid-template-columns: 1fr; }
.inline-details summary { list-style: none; display: inline-flex; }
.inline-details summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) {
.extra-item { grid-template-columns: 22px 1fr; }
.extra-price, .extra-qty { grid-column: 2; }
}
/* ------------------------------------------------------------------ abonament iCal */
.ical-help { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.ical-help summary { cursor: pointer; }
.ical-help p { margin: 8px 0 0; line-height: 1.55; }
.ical-help code { font-size: 12px; }
/* ------------------------------------------------------------------ cupoane */
.coupon-code { font-size: 14px; letter-spacing: .08em; font-weight: 600; }
.coupon-off { opacity: .55; }
.coupon-form { margin-top: 10px; }
.item-coupons { margin-top: 8px; }
.item-coupons summary { cursor: pointer; }
.item-coupons .coupon-form { padding: 12px; }
.coupon-line { color: var(--ok-text); }
/* ------------------------------------------------------------------ pagini legale */
.legal { max-width: 82ch; line-height: 1.65; }
.legal h2 { font-size: 17px; margin: 26px 0 8px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { margin: 0 0 8px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--accent); }
.legal-nav { flex-wrap: wrap; }
.legal h3 { font-size: 15px; margin: 18px 0 6px; }
.legal ol { padding-left: 22px; }
.legal-model {
white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; padding: 14px 16px;
border: 1px dashed var(--glass-line); border-radius: var(--r); background: var(--glass); overflow-x: auto;
}
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 6px 0 12px; }
/* `.form label { display: block }` are specificitate mai mare decat `.consent`, asa ca
in formulare caseta ajungea deasupra textului, nu langa el. */
.form .consent { display: flex; }
.consent input { margin-top: 2px; width: auto; flex: none; }
.consent input[type="checkbox"] { width: 17px; height: 17px; }
.consent a { color: var(--accent); }
/* ------------------------------------------------------------------ topbar */
.topbar {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 10px;
min-height: var(--head-h);
padding: 0 22px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.brand {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 16px;
letter-spacing: .16em;
color: var(--text);
padding-right: 8px;
}
.brand-logo { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand b { color: var(--accent); }
.brand:hover { color: var(--text); }
.topbar nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; flex-wrap: wrap; } /* wrap + min-width:0: cu multe elemente (admin) bara creste pe doua randuri in loc sa impinga contul in afara ecranului */
.topbar nav a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 14px;
padding: 7px 12px;
border-radius: var(--r-pill);
transition: background .16s var(--ease), color .16s var(--ease);
}
.topbar nav a:hover { background: var(--surface-2); color: var(--text); }
.nav-sep { width: 1px; align-self: stretch; margin: 8px 8px; background: var(--line); } /* separa grupul „ce administrez” de catalog */
@media (max-width: 1150px) { .nav-sep { width: 100%; height: 1px; margin: 4px 0; align-self: auto; } }
.topbar nav a.on { color: var(--accent-text); font-weight: 600; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.me { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.me img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.me-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout {
color: var(--muted);
padding: 6px 10px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
}
.logout:hover { color: var(--text); background: var(--surface-2); }
.nav-toggle { display: none; }
/* ------------------------------------------------------------------ header de pagina */
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.page-head .lead { color: var(--muted); max-width: 70ch; margin: 0; }
/* ------------------------------------------------------------------ badges */
/* ------------------------------------------------------------------ pilule
O singura primitiva pentru toate etichetele rotunde, cu trei presetari:
.badge stare, necliccabila („3 in asteptare”, rolul contului);
.chip filtru, fila sau legatura, cliccabila, cu bulina in fata;
.trust semn de incredere pe paginile publice („Pagina revendicata”).
Inainte erau trei sisteme paralele: trei forme, trei marimi (11 / 12 / 13px), trei
feluri de a scrie tonul — sapte triplete rgba scrise de mana in .badge-* si .trust-*,
dar `--chip` cu color-mix la .chip. Doua verzi diferite insemnau acelasi lucru.
Acum tonul este o singura culoare, `--pill`; fundalul, bordura si textul se calculeaza
din ea. Rezultatele masurate pe card sunt intre 6,4:1 si 9,3:1, deci peste pragul AA.
Pentru marcaje noi: …. */
.pill, .badge, .chip, .trust, .chip-check {
--pill: var(--pill-neutral);
display: inline-flex;
align-items: center;
gap: var(--space-1);
border-radius: var(--r-pill);
border: 1px solid color-mix(in srgb, var(--pill) 34%, transparent);
background: color-mix(in srgb, var(--pill) 14%, var(--surface-2));
color: color-mix(in srgb, var(--pill) 55%, var(--text));
white-space: nowrap;
vertical-align: middle;
}
/* marimea mica: stari si semne de incredere */
.pill, .badge, .trust {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .02em;
padding: 3px 9px;
}
.pub-head .trust, .band-head .trust { font-size: var(--step--1); }
.topbar nav .badge, h1 .badge, td .badge { margin-left: 6px; }
/* marimea mare, cliccabila: filtre, file, categorii */
.chip, .chip-check {
font-size: var(--step--1);
gap: var(--space-2);
padding: 7px 14px;
cursor: pointer;
}
.chip {
--pill: var(--accent); /* bulina si starea „ales”; fundalul ramane de sticla */
background: var(--glass);
border-color: var(--glass-line);
color: var(--muted);
backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
box-shadow: var(--glass-hi);
transition: all .16s var(--ease);
}
.chip::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--pill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pill) 22%, transparent);
}
.chip:hover { color: var(--text); border-color: #D4D4D8; background: var(--surface-3); text-decoration: none; }
.chip-on {
color: var(--text);
border-color: color-mix(in srgb, var(--pill) 55%, transparent);
background: color-mix(in srgb, var(--pill) 20%, var(--surface));
}
/* pilula cu bifa din panoul de filtre: aceeasi forma, dar cu un input inauntru */
.chip-check { display: inline-flex !important; flex-direction: row !important; gap: var(--space-1) !important; }
.chip-check:has(input:checked) { --pill: var(--accent); color: var(--text); }
.chip-check input { margin: 0; }
/* tonuri: o singura culoare pe pilula, aceeasi lista pentru toate presetarile */
.pill-accent, .badge-admin, .trust-booked { --pill: var(--accent); }
.pill-ok, .badge-member, .trust-claimed { --pill: var(--ok); }
.pill-warn, .badge-pending { --pill: var(--warn); }
.pill-info, .badge-owner { --pill: var(--info); }
.pill-danger { --pill: var(--danger); }
.pill-neutral, .badge-user { --pill: var(--pill-neutral); }
/* furnizorul nu avea deloc ton: eticheta lui de rol se afisa nestilizata */
.badge-provider { --pill: var(--accent-2); }
/* ------------------------------------------------------------------ alerte */
.alert {
position: relative;
padding: 12px 16px 12px 44px;
border-radius: var(--r);
margin: 0 0 12px;
border: 1px solid var(--glass-line);
background: var(--glass-2);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-hi), var(--shadow-1);
animation: apare .25s var(--ease) both;
}
.alert::before {
position: absolute;
left: 15px; top: 12px;
font-size: 15px;
line-height: 1.3;
}
/* Fiecare fel de alerta isi ia bordura si fundalul din perechea lui de tokeni;
pana acum erau culori scrise direct, din tema inchisa. */
.alert-ok { border-color: var(--ok-line); background: var(--ok-soft); }
.alert-ok::before { content: "✓"; color: var(--ok); }
.alert-err { border-color: var(--danger-line); background: var(--danger-soft); }
.alert-err::before { content: "!"; color: var(--danger); font-weight: 700; }
.alert-warn { border-color: var(--warn-line); background: var(--warn-soft); }
.alert-warn::before { content: "▲"; color: var(--warn-text); font-size: 11px; }
.alert-info { border-color: var(--accent-line); background: var(--accent-soft); }
.alert-info::before { content: "i"; color: var(--accent); font-weight: 700; font-style: italic; }
/* ------------------------------------------------------------------ butoane */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
padding: 9px 16px;
border-radius: var(--r-sm);
border: 1px solid var(--glass-line);
background: var(--glass-2);
backdrop-filter: var(--glass-blur-sm);
-webkit-backdrop-filter: var(--glass-blur-sm);
box-shadow: var(--glass-hi);
color: var(--text);
transition: transform .12s var(--ease), background .16s var(--ease),
border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: #D4D4D8; color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
border-color: transparent;
color: #fff;
box-shadow: var(--shadow-2);
}
.btn-primary:hover {
background: var(--accent-dark);
box-shadow: var(--shadow-3);
}
.btn-danger { background: transparent; border-color: var(--danger-line); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-google {
background: var(--surface); color: var(--text); border: 1px solid var(--line); font-weight: 600;
padding: 12px 20px; font-size: 15px; width: 100%;
box-shadow: var(--shadow-1);
}
.btn-google:hover { background: var(--surface-3); color: var(--text); border-color: #D4D4D8; }
.btn-google .g { font-weight: 800; color: #4285f4; font-size: 17px; }
/* ------------------------------------------------------------------ carduri si formulare */
.card {
background: var(--surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-line);
border-radius: var(--r-lg);
padding: 18px;
box-shadow: var(--glass-hi), var(--glass-shade);
}
.form label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; font-weight: 500; }
.form label[hidden] { display: none; }
.form input, .form select, .form textarea,
.grid input, .grid select {
display: block;
width: 100%;
margin-top: 6px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 9px 12px;
font: inherit;
font-size: 14px;
transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.form input::placeholder { color: var(--faint); }
.form input:focus, .form select:focus, .grid input:focus, .grid select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft-2);
background: var(--surface);
}
.form input[readonly] { color: var(--muted); }
.grid input[type="checkbox"], .form input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.form input[type="color"], .grid input[type="color"] { padding: 2px; height: 36px; width: 54px; cursor: pointer; }
.form input[type="file"] { padding: 7px 10px; color: var(--muted); }
.form input[type="file"]::file-selector-button {
font: inherit; font-size: 13px; margin-right: 10px; cursor: pointer;
background: var(--surface-3); color: var(--text);
border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px;
}
.form .row { display: flex; gap: 14px; flex-wrap: wrap; }
.form .row label { flex: 1; min-width: 150px; }
.inline-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 22px; }
.inline-form label { flex: 1; min-width: 180px; margin-bottom: 0; }
.actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.hidden-form { display: none; }
/* Campurile, oriunde ar fi: aceeasi forma ca in .form. Regula de mai sus prinde doar
campurile din formularele cu clasa; cautarea din prima pagina si filtrele publice nu
au clasa, si pana acum ramaneau cu desenul implicit al browserului. */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="password"], input[type="date"],
input[type="time"], input[type="datetime-local"], select, textarea {
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 10px 12px;
font: inherit;
font-size: var(--step-0);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft-2);
}
/* Fiecare element pe care se poate ajunge cu tastatura isi arata focalizarea. */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* ------------------------------------------------------------------ login */
.login-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--space-6) var(--space-5);
text-align: center;
box-shadow: var(--shadow-3);
}
.login-card h1 { margin: 0 0 var(--space-1); font-size: var(--step-3); letter-spacing: -.02em; }
/* ------------------------------------------------------------------ prezentarea de pe login */
.about { margin-top: 56px; text-align: left; }
.about h2 { font-size: 22px; margin: 0 0 10px; text-align: center; }
.about-intro { max-width: 760px; margin: 0 auto 28px; text-align: center; color: var(--muted); line-height: 1.6; }
.about-intro p { margin: 0; }
.about-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.about-card .role-mark { font-size: 30px; padding: 18px 20px 0; }
.about-card h3 { margin: 6px 0 10px; font-size: 16px; }
.about-card ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.about-card ul li::marker { color: var(--accent-2); }
.about-price { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.about-steps { max-width: 760px; margin: 36px auto 0; text-align: center; }
.about-steps ol { text-align: left; margin: 0 auto 14px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.about-steps .btn { margin: 6px 4px 0; }
.login-mark { line-height: 1; margin-bottom: var(--space-4); }
/* 64px, nu 112px, si fara haloul violet de 50px ramas din tema inchisa: pe fundal alb
era singura umbra colorata din aplicatie. */
.login-mark img { width: 64px; height: 64px; border-radius: 16px; box-shadow: var(--shadow-2); }
/* ------------------------------------------------------------------ comutator de tip */
.segmented-wrap { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.segmented-wrap legend { font-size: 12.5px; color: var(--muted); padding: 0; margin-bottom: 7px; font-weight: 500; }
.segmented {
display: inline-flex; gap: 4px; padding: 4px;
border-radius: var(--r-pill); background: var(--glass);
border: 1px solid var(--glass-line); box-shadow: var(--glass-hi);
flex-wrap: wrap;
}
.form .segmented label { display: block; margin: 0; cursor: pointer; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.segmented span {
display: block; padding: 8px 16px; border-radius: var(--r-pill);
font-size: 13px; color: var(--muted); white-space: nowrap;
transition: background .16s var(--ease), color .16s var(--ease);
}
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span {
background: var(--accent);
color: #fff; box-shadow: var(--shadow-1);
}
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
#mode-note { margin: 8px 0 0; }
/* ------------------------------------------------------------------ select cu cautare */
.combo { position: relative; }
.combo select {
position: absolute; width: 1px; height: 1px;
opacity: 0; pointer-events: none; margin: 0;
}
.combo-input { cursor: text; width: 100%; padding-right: 30px; }
.combo-input::placeholder { color: var(--faint); }
.combo::after {
content: "▾";
position: absolute; right: 12px; bottom: 10px;
color: var(--faint); font-size: 11px; pointer-events: none;
}
.combo-list {
position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
max-height: 320px; overflow-y: auto;
margin: 0; padding: 5px; list-style: none;
background: var(--surface);
border: 1px solid var(--line); border-radius: var(--r);
box-shadow: var(--glass-hi), var(--shadow-3);
}
.combo-option {
padding: 8px 11px; border-radius: 7px; cursor: pointer; font-size: 13.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-option.active { background: var(--accent-soft); color: var(--accent-text); }
.combo-option.chosen { color: var(--accent-text); font-weight: 600; }
.combo-option.chosen::after { content: " ✓"; opacity: .7; }
.combo-empty { padding: 9px 11px; color: var(--faint); font-size: 13px; }
/* ------------------------------------------------------------------ bara de unelte */
.toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 4px 0 16px;
}
.rooms { display: flex; gap: 8px; flex-wrap: wrap; }
/* .chip este o presetare a pilulei; definitia ei e in sectiunea „pilule”. */
.weeknav { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.room-picker { display: flex; align-items: flex-end; gap: 10px; margin: 0; min-width: 320px; }
.room-picker label { margin: 0; flex: 1; }
.room-address { color: var(--muted); font-size: 13.5px; margin: 2px 0 6px; }
.weeknav strong { min-width: 132px; text-align: center; }
/* ------------------------------------------------------------------ calendar */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend .l-taken { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.legend .l-pending { background: repeating-linear-gradient(45deg, var(--amber) 0 4px, var(--amber-line) 4px 8px); }
.legend .l-free { background: var(--surface-2); border: 1px dashed var(--line); }
.cal-wrap {
overflow-x: auto;
border: 1px solid var(--glass-line);
border-radius: var(--r-lg);
box-shadow: var(--glass-hi), var(--glass-shade);
background: var(--surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.cal { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 940px; }
.cal th, .cal td {
border-right: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.cal th:last-child, .cal td:last-child { border-right: 0; }
.cal tbody tr:last-child td, .cal tbody tr:last-child th { border-bottom: 0; }
.cal thead th {
padding: 11px 8px; font-size: 13px; font-weight: 600;
background: var(--surface-3); position: sticky; top: 0; z-index: 3;
}
/* Peste latimea la care tabelul incape, containerul nu mai e zona de derulare,
deci antetul se poate lipi de bara aplicatiei. */
@media (min-width: 1151px) {
.cal-wrap { overflow: visible; border-radius: var(--r-lg); }
.cal thead th { top: var(--head-h); }
.cal thead th:first-child { border-top-left-radius: var(--r-lg); }
.cal thead th:last-child { border-top-right-radius: var(--r-lg); }
.cal tbody tr:last-child > *:first-child { border-bottom-left-radius: var(--r-lg); }
.cal tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--r-lg); }
}
.cal thead th small { display: block; font-weight: 400; color: var(--faint); font-size: 11.5px; margin-top: 1px; }
/* Selectorul de zile: se vede doar pe ecran ingust, unde calendarul arata o zi pe rand.
Sapte zile x 24 de ore nu incap pe un telefon; derularea laterala ascundea cinci zile
din sapte, asa ca acolo tabelul se restrange la ziua aleasa. */
.cal-days { display: none; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.cal-day-btn {
flex: 1 1 0; min-width: 42px; padding: 7px 4px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 1px;
font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cal-day-btn small { font-size: 10.5px; font-weight: 400; color: var(--faint); }
.cal-day-btn[aria-pressed="true"] {
color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line);
}
.cal-day-btn[aria-pressed="true"] small { color: var(--accent-text); }
/* 900px e pragul pe care proiectul il foloseste deja pentru ecrane mici; sub el intra si
tableta in portret (768), unde saptamana intreaga cerea 237px de derulare laterala. */
@media (max-width: 900px) {
.cal-days { display: flex; }
/* Tabelul nu mai are latime minima: coloana orelor plus o singura zi incap oriunde.
Coloane fixe si text care se rupe, altfel un nume lung de client largeste celula si
impinge calendarul afara din ecran — exact ce reparam aici. */
.cal { min-width: 0; table-layout: fixed; }
.cal .hcol { width: 56px; }
.cal .slot, .cal .bk-band, .cal .bk-note, .cal .bk-time, .cal .bk-state {
white-space: normal; overflow-wrap: anywhere;
}
.cal thead th[data-day] { font-size: 12.5px; }
.cal-wrap[data-active="0"] [data-day]:not([data-day="0"]),
.cal-wrap[data-active="1"] [data-day]:not([data-day="1"]),
.cal-wrap[data-active="2"] [data-day]:not([data-day="2"]),
.cal-wrap[data-active="3"] [data-day]:not([data-day="3"]),
.cal-wrap[data-active="4"] [data-day]:not([data-day="4"]),
.cal-wrap[data-active="5"] [data-day]:not([data-day="5"]),
.cal-wrap[data-active="6"] [data-day]:not([data-day="6"]) { display: none; }
}
.cal thead th.today { color: var(--accent-text); background: var(--accent-soft); }
.cal .hcol {
width: 66px; font-size: 11.5px; color: var(--muted); background: var(--surface-3);
font-weight: 500; vertical-align: top; padding-top: 6px;
}
.cal tr.now .hcol { color: var(--accent-2); font-weight: 700; }
.cal tr.now td { border-top: 1px solid var(--accent-line); }
.cal td.slot { height: 42px; padding: 0; vertical-align: top; }
.cal td.past { background: var(--surface-3); }
.cal td.free a {
display: flex; align-items: center; justify-content: center;
height: 100%; min-height: 42px;
color: transparent; font-size: 17px; font-weight: 300;
transition: background .14s var(--ease), color .14s var(--ease);
}
.cal td.free:hover a { color: var(--accent-text); background: var(--accent-soft); }
.cal td.free.has-requests a { color: var(--warn-text); font-size: 12px; font-weight: 600; background: var(--warn-soft); }
.cal td.free.has-requests:hover a { background: var(--amber-line); color: var(--warn-text); }
.cal td.taken {
--room: var(--accent);
background: color-mix(in srgb, var(--room) 26%, var(--surface));
box-shadow: inset 3px 0 0 var(--room);
}
.cal td.taken.mine { background: color-mix(in srgb, var(--room) 42%, var(--surface)); }
.bk { position: relative; padding: 6px 9px; font-size: 12px; height: 100%; }
.bk-band { display: block; font-weight: 600; line-height: 1.25; padding-right: 14px; }
.bk-time { display: block; color: var(--muted); font-size: 11px; }
.bk-note { display: block; color: var(--muted); font-style: italic; font-size: 11px; }
.bk form { position: absolute; top: 4px; right: 4px; }
.bk .x {
cursor: pointer; border: 0; background: transparent; color: var(--muted);
font-size: 12px; padding: 2px 4px; line-height: 1; border-radius: 4px;
}
.bk .x:hover { color: var(--danger); background: var(--danger-soft); }
/* ------------------------------------------------------------------ tabele */
.grid {
width: 100%; border-collapse: separate; border-spacing: 0;
background: var(--surface);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-line);
border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--glass-hi), var(--glass-shade);
}
.grid th, .grid td {
padding: 11px 14px; text-align: left; font-size: 14px; vertical-align: middle;
border-bottom: 1px solid var(--line-soft);
}
.grid thead th {
background: var(--surface-3); font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.grid tbody tr { transition: background .14s var(--ease); }
.grid tbody tr:hover { background: var(--surface-2); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid form { display: inline; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.user-cell { display: flex; align-items: center; gap: 9px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
/* ------------------------------------------------------------------ stare goala */
.empty {
text-align: center; padding: 42px 20px; color: var(--muted);
border: 1px dashed var(--glass-line); border-radius: var(--r-lg);
background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.empty-mark { font-size: 30px; display: block; margin-bottom: 8px; opacity: .75; }
/* ------------------------------------------------------------------ trupe (carduri) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.band-card {
position: relative;
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
box-shadow: var(--shadow-1);
transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.band-card:hover {
transform: translateY(-2px); border-color: var(--accent-line);
box-shadow: var(--shadow-3);
}
.band-cover { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; }
.band-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-cover .no-cover {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 30px; opacity: .35;
background: radial-gradient(120% 100% at 50% 0%, var(--accent-soft), transparent 70%);
}
/* Favoritele: un buton rotund in coltul fotografiei. Tinta de atins are 40px, peste
pragul de 44px cu tot cu spatiul din jur, si nu fura locul indemnului principal. */
.fav-float {
position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
width: 40px; height: 40px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 50%;
background: rgba(255, 255, 255, .92); color: var(--muted);
box-shadow: var(--shadow-2); cursor: pointer;
transition: color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.fav-float:hover { color: var(--danger); background: #fff; transform: scale(1.06); }
.fav-float.on { color: var(--danger); background: #fff; }
.band-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.band-card-body h3 { margin: 0; font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.band-card-body h3 a { color: var(--text); }
.band-card-body h3 a:hover { color: var(--accent-text); }
.band-desc {
color: var(--muted); font-size: 13px; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.band-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
/* Pretul: cifra e mai mare si mai inchisa decat textul din jur, ca ochiul sa o gaseasca
prima. „de la 480 RON / persoană” — 480 RON se citeste, restul insoteste. */
.band-price { font-size: var(--step-1); color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.band-price small, .band-price .muted { font-size: var(--step--1); font-weight: 500; color: var(--muted); }
.band-price-ask { font-size: var(--step--1); font-weight: 600; color: var(--accent-text); }
.band-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
/* ------------------------------------------------------------------ coperta */
.cover {
position: relative; border: 1px solid var(--glass-line); border-radius: var(--r-lg);
overflow: hidden; margin: 0 0 18px; box-shadow: var(--glass-hi), var(--glass-shade);
}
.cover img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.cover-title { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 1; }
.cover-title h1 { margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.cover-title p { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: 14px; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.cover::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .68));
}
.cover-cell { width: 78px; }
.cover-thumb {
display: block; width: 64px; height: 40px; object-fit: cover;
border-radius: 7px; border: 1px solid var(--line); background: var(--surface-3);
}
.cover-empty { display: flex; align-items: center; justify-content: center; font-size: 15px; opacity: .5; }
/* ------------------------------------------------------------------ video */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; margin: 14px 0 22px; }
/* ------------------------------------------------- clipurile unei trupe, in fata
Nimeni nu rezerva o trupa fara sa o auda, deci sectiunea vine imediat sub hero,
iar primul clip tine doua coloane: se vede de la prima privire cu ce se incepe. */
.band-listen { margin: 0 0 var(--space-6); }
.band-listen h2 { margin-top: 0; }
@media (min-width: 720px) {
/* `align-items: start` opreste cardurile mai scurte sa se intinda pe inaltimea celui
mare: altfel ar ramane cu o palma de gol sub titlu. */
.band-listen .videos { align-items: start; }
.band-listen .videos > .video:first-child { grid-column: span 2; }
}
.video {
margin: 0; background: var(--glass); border: 1px solid var(--glass-line);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--r); overflow: hidden; box-shadow: var(--glass-hi), var(--shadow-1);
transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.video:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 30px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
background: rgba(0, 0, 0, .2); transition: background .16s var(--ease);
}
.video-thumb:hover .video-play { background: rgba(0, 0, 0, .42); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video figcaption {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; font-size: 13px;
}
.video figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ------------------------------------------------------------------ responsive
Trei praguri, nu sapte. Regulile raman langa componenta lor, dar toate folosesc
aceleasi latimi, ca sa nu mai existe zone de 20–100px in care o parte a paginii a
trecut in modul mobil si alta nu:
max-width: 640px — telefon (o coloana, controale pe toata latimea, sticla mai subtire)
max-width: 900px — tableta (coloanele publice se aseaza una sub alta, tabelele scroleaza)
max-width: 1150px — bara de meniu trece pe buton de meniu; perechea ei este min-width: 1151px */
@media (max-width: 1150px) {
.topbar { flex-wrap: wrap; padding: 8px 16px; }
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto; width: 38px; height: 34px; cursor: pointer;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r-sm); color: var(--text); font-size: 15px;
}
.topbar nav {
/* flex-basis 100%: altfel `flex: 1` din regula de baza il lasa sa imparta randul cu .me */
order: 3; flex: 0 0 100%; width: 100%; display: none; flex-wrap: wrap; gap: 4px;
padding: 8px 0 4px; border-top: 1px solid var(--line-soft); margin-top: 6px;
}
.topbar.open nav { display: flex; }
.topbar nav a { padding: 11px 14px; } /* tinte de atins de ~44px pe telefon */
.me { order: 2; }
.me-name { display: none; }
}
@media (max-width: 640px) {
.wrap { padding: 16px 14px 60px; }
.page-head { align-items: flex-start; }
.inline-form, .form .row { gap: 10px; }
.grid th, .grid td { padding: 9px 10px; font-size: 13px; }
.weeknav { width: 100%; flex-wrap: wrap; gap: 8px; }
.weeknav strong { order: -1; width: 100%; text-align: left; min-width: 0; font-size: 15px; }
.weeknav .btn { flex: 1; padding: 8px 6px; }
.toolbar { gap: 10px; }
.cover-title { left: 16px; right: 16px; bottom: 12px; }
.cover img { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ------------------------------------------------------------------ rezerva
Fara backdrop-filter (browsere vechi), sticla devine suprafata opaca. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.topbar { background: var(--surface); }
.card, .grid, .cal-wrap, .band-card, .login-card, .video, .empty, .alert {
background: var(--surface);
border-color: var(--line);
}
.btn { background: var(--surface-2); }
.chip { background: var(--surface); }
.cal thead th, .grid thead th { background: var(--surface-2); }
}
/* Pe ecrane mici blur-ul costa mai mult decat aduce. */
@media (max-width: 640px) {
:root { --glass-blur: saturate(150%) blur(8px); --glass-blur-sm: blur(4px); }
}
/* ------------------------------------------------------------------ mobil
Tabelele late isi scroleaza propriul container, ca pagina sa nu porneasca
lateral; pe ecrane tactile tintele cresc si inputurile ajung la 16px, ca
iOS sa nu mai apropie pagina la focus. */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
border-radius: var(--r-md);
}
.table-wrap > .grid { margin: 0; }
@media (pointer: coarse) {
.btn, .chip, .row-actions button, .row-actions a {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-sm { min-height: 40px; }
/* iOS apropie pagina la focus daca fontul e sub 16px, deci il ridicam. */
.form input, .form select, .form textarea,
.grid input, .grid select,
input, select, textarea { font-size: 16px; }
.cal td a, .cal td form button { min-height: 40px; }
}
@media (max-width: 900px) {
/* Sub aceasta latime tabelul nu mai incape: ii dam latimea lui fireasca si il
lasam sa scroleze in container, ca sa nu se rupa numerele si datele. */
.table-wrap .grid { min-width: 700px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
}
.grid td a[href*="contract.php"], .grid td .badge, .cal .slot { white-space: nowrap; }
/* ------------------------------------------------------------------ meniuri
Meniurile salii: cardul trupei refolosit, cu o galerie mica in loc de coperta. */
.menu-photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 64px;
gap: 4px;
padding: 4px;
}
.menu-photos a { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.menu-photos a.menu-photo-main { grid-column: 1 / -1; grid-row: span 3; }
.menu-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-photo-delete { position: absolute; top: 4px; right: 4px; }
.menu-photo-delete button {
width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(0, 0, 0, .66); color: #fff; font-size: 12px;
}
.menu-photo-delete button:hover { background: #ef4444; }
.form textarea { min-height: 96px; resize: vertical; }
/* ------------------------------------------------------------- bun venit
Alegerea rolului la prima conectare: trei carduri, fiecare este un buton. */
.choose-role { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.role-card {
text-align: left; cursor: pointer; font: inherit; color: var(--text);
padding: 0; border-color: var(--glass-line);
}
.role-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.role-card .role-mark {
font-size: 44px; line-height: 1; padding: 26px 16px 10px; text-align: center;
background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.role-card .band-desc { min-height: 3.2em; }
.role-card .btn { pointer-events: none; align-self: flex-start; }
/* ------------------------------------------------------------- contul meu */
.me-name { color: var(--text); text-decoration: none; }
.me-name:hover { color: var(--accent); }
.delete-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
/* ------------------------------------------------- conectare si cont nou
Formularul la stanga, intr-o coloana de latimea unui formular, si vizualul care
spune beneficiul la dreapta. Pe telefon vizualul coboara sub formular: intai ce
are de facut omul, apoi de ce. */
.auth {
display: grid;
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
gap: var(--space-7);
align-items: start;
text-align: left;
}
.auth-brand {
display: inline-flex; align-items: center; gap: var(--space-2);
margin-bottom: var(--space-5); color: var(--text); text-decoration: none;
}
.auth-brand img { width: 40px; height: 40px; border-radius: 11px; }
.auth-brand b { font-size: var(--step-1); letter-spacing: -.01em; }
.auth-brand:hover { color: var(--accent); }
.auth h1 { margin: 0 0 var(--space-2); font-size: var(--step-3); letter-spacing: -.02em; }
.auth-sub { margin: 0 0 var(--space-5); color: var(--muted); line-height: 1.5; }
.auth-form { margin: 0; }
/* 16px, nu 14: sub 16px, Safari pe iPhone mareste pagina cand se intra in camp. */
.auth-form input { font-size: 16px; padding: 11px 12px; }
.auth-form .actions { margin-top: var(--space-4); }
.auth-form .actions .btn { flex: 1; }
.auth-forgot { margin: var(--space-3) 0 0; font-size: var(--step--1); }
.auth-switch { margin: var(--space-5) 0 0; font-size: var(--step--1); color: var(--muted); }
.auth-note { margin: var(--space-3) 0 0; }
.login-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: var(--space-4) 0; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Vizualul: cei trei pasi pe care aplicatia ii face chiar, desenati din pictogramele
paginii — nicio imagine de stoc, nicio cifra care sa nu fie adevarata. */
.auth-aside {
border: 1px solid var(--accent-line); border-radius: var(--r-lg);
background: var(--accent-soft); padding: var(--space-6) var(--space-5);
}
.auth-aside h2 { margin: 0 0 var(--space-5); font-size: var(--step-2); letter-spacing: -.01em; }
.auth-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.auth-steps li {
display: grid; grid-template-columns: 40px minmax(0, 1fr);
gap: var(--space-4); align-items: start; position: relative;
}
/* Firul dintre pasi porneste de sub pastila si se opreste in dreptul urmatoarei. */
.auth-steps li::after {
content: ""; position: absolute; left: 19px; top: 46px;
bottom: calc(-1 * var(--space-5)); width: 2px; background: var(--accent-line);
}
.auth-steps li:last-child::after { display: none; }
.auth-step-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: var(--r-pill);
background: var(--surface); border: 1px solid var(--accent-line);
color: var(--accent); font-size: 18px;
}
.auth-step-text strong { display: block; font-size: var(--step-0); }
.auth-step-desc { display: block; margin-top: 2px; color: var(--muted-ink); font-size: var(--step--1); line-height: 1.5; }
.auth-free {
margin: var(--space-6) 0 0; padding-top: var(--space-4);
border-top: 1px solid var(--accent-line);
font-size: var(--step--1); color: var(--muted-ink); line-height: 1.55;
}
.auth-free a { color: var(--accent-text); }
@media (max-width: 860px) {
.auth { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.auth-aside { padding: var(--space-5) var(--space-4); }
}
/* ------------------------------------------------------------- pagini publice
Catalogul fara cont: prima pagina, listele de sali/trupe/furnizori si paginile lor. */
.guest-actions { margin-left: auto; gap: 8px; }
.pub-hero { text-align: center; max-width: 860px; margin: var(--space-7) auto var(--space-7); }
.pub-hero h1 {
font-size: var(--step-4); line-height: 1.08; margin: 0 0 var(--space-4);
letter-spacing: -.03em; font-weight: 800;
}
.pub-hero .lead {
color: var(--muted); font-size: var(--step-1); line-height: 1.6;
margin: 0 auto var(--space-5); max-width: 56ch;
}
.pub-hero-alt { margin: var(--space-3) 0 0; }
/* ------------------------------------------------------- placi de categorie
Patru-cinci usi de intrare, fiecare cu o fotografie adevarata din categoria ei.
Imaginea tine aproape jumatate din placa, restul este text si un indemn clar. */
.cat-tiles {
display: grid; gap: var(--space-4); margin: 0 0 var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.cat-tile {
display: flex; flex-direction: column; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: var(--shadow-1); color: var(--text);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.cat-tile:hover {
color: var(--text); border-color: var(--accent-line);
box-shadow: var(--shadow-3); transform: translateY(-2px);
}
.cat-tile-img { display: block; aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile-blank {
display: flex; align-items: center; justify-content: center; height: 100%;
font-size: 30px; color: var(--accent); background: var(--accent-soft);
}
.cat-tile-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); flex: 1; }
.cat-tile-body strong { font-size: var(--step-1); letter-spacing: -.01em; }
.cat-tile-desc { color: var(--muted); font-size: var(--step--1); }
.cat-tile-cta {
margin-top: auto; padding-top: var(--space-3);
color: var(--accent-text); font-weight: 600; font-size: var(--step--1);
}
.cat-tile:hover .cat-tile-cta { color: var(--accent-dark); }
/* butonul secundar, fara umplutura: pentru indemnul de rangul doi */
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent-text); font-weight: 600; }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); }
.pub-search { display: flex; gap: 8px; max-width: 560px; margin: 0 auto 16px; }
.pub-search input { flex: 1; min-width: 0; }
.county-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-head.pub-section { margin-top: 34px; }
.page-head.pub-section h2 { margin: 0 0 4px; font-size: 22px; }
.pub-cta { margin-top: 26px; color: var(--muted); line-height: 1.6; }
.pub-cta strong { color: var(--text); }
.crumbs { color: var(--faint); font-size: 13px; margin: 0 0 12px; }
.crumbs a { color: var(--muted); }
.pub-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 8px; }
.pub-cols h2 { margin-top: 18px; }
.pub-cols > div > h2:first-child, .pub-cols aside h2:first-child { margin-top: 0; }
.pub-menu-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pub-card .band-actions .badge { align-self: center; }
/* ------------------------------------------- cardul de rezervare al unei sali
Sta lipit in dreapta cat timp pagina se deruleaza, ca indemnul sa ramana la
vedere si cand omul citeste recenziile din josul paginii. Pe telefon coloana
trece sub continut, dar cardul urca primul in ea. */
.pub-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.book-card {
position: sticky; top: calc(var(--head-h) + var(--space-3));
margin: 0; padding: var(--space-4);
border: 1px solid var(--accent-line); box-shadow: var(--shadow-2);
}
.book-card-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-1); }
.book-card-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.book-card-form label {
display: block; margin: 0;
font-size: var(--step--2); font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
.book-card-form label input, .book-card-form label select {
width: 100%; margin-top: var(--space-1);
font-weight: 400; font-size: var(--step-0); color: var(--text);
}
.book-card-cta { width: 100%; justify-content: center; padding-top: 11px; padding-bottom: 11px; }
.book-card-foot { margin: var(--space-3) 0 0; }
.book-est {
background: var(--surface-3); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: var(--space-3);
}
.book-est-row, .book-est-total { display: flex; justify-content: space-between; gap: var(--space-3); }
.book-est-row { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-1); }
.book-est-total {
align-items: baseline; padding-top: var(--space-2); margin-top: var(--space-2);
border-top: 1px solid var(--line);
font-size: var(--step--1); font-weight: 600; color: var(--muted);
}
.book-est-total b { font-size: var(--step-2); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.book-est-note { margin: var(--space-2) 0 0; }
@media (max-width: 900px) {
.book-card { position: static; }
}
/* galeria salii: poza mare + patru mici */
.pub-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 150px; gap: 4px; padding: 4px; max-height: none; }
.pub-gallery a { display: block; overflow: hidden; border-radius: 10px; }
.pub-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: none; }
.pub-gallery-main { grid-row: span 2; }
.pub-gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-row: span 2; gap: 4px; }
/* codul QR al paginii publice, in paginile de administrare */
.qr-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.qr-card .qr { flex: 0 0 auto; }
.qr-card-body { flex: 1 1 260px; min-width: 0; }
.qr-card-body p { margin: 0 0 8px; }
.qr-url { word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
/* codurile QR de la plata creditelor */
.pay-qr { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.qr-tile { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 220px; min-width: 0; }
.qr { background: var(--qr-bg); padding: 8px; border-radius: 10px; width: 152px; max-width: 100%; }
.qr img, .qr-svg { display: block; width: 100%; height: auto; }
.qr-tile figcaption { font-size: 13px; color: var(--muted); line-height: 1.45; }
/* zilele libere: trei luni, o grila de zile */
.avail { display: grid; gap: 14px; }
.avail-title { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; text-transform: capitalize; }
.avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.avail-dow { font-size: 11px; color: var(--faint); text-align: center; padding-bottom: 2px; }
.avail-day {
display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 7px;
font-size: 12.5px; text-decoration: none; color: var(--text); background: var(--surface-2); border: 1px solid transparent;
}
.avail-day.past { color: var(--faint); background: transparent; }
.avail-day.busy { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); }
.avail-day.free { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); }
a.avail-day.free:hover { background: var(--ok-line); color: var(--ok-text); }
.avail-legend { margin: 10px 0 0; display: flex; gap: 6px; align-items: center; }
.avail-legend .avail-day { width: 22px; aspect-ratio: 1; font-size: 11px; }
/* distribuire */
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.claim-form .hp, .login-card .hp, #oferta-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
.pub-cols { grid-template-columns: 1fr; }
.pub-gallery { grid-template-columns: 1fr; grid-auto-rows: auto; }
.pub-gallery-main { grid-row: span 1; height: 220px; }
.pub-gallery-thumbs { grid-row: span 1; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 70px; }
.guest-actions .btn { padding: 6px 10px; }
}
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 22px 0 6px; }
.pager span.btn[aria-disabled] { opacity: .45; }
/* bara de consimtamant pentru cookie-uri (Google Analytics) */
.cookie-consent {
position: fixed; right: 12px; bottom: 12px; left: auto; max-width: 480px; z-index: 60;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
padding: 10px 14px; border-radius: var(--r-lg); border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow-3); font-size: 13.5px; color: var(--muted);
}
.cookie-consent p { margin: 0; flex: 1 1 200px; line-height: 1.4; font-size: 13px; }
.consent-actions { display: flex; gap: 8px; }
.extras-cat { margin: 14px 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
/* note de la 1 la 10 */
.chip.rating { --pill: var(--warn); }
.rating-inline { color: var(--text); font-weight: 600; }
.rating-inline .ico { color: var(--amber); }
.rate-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rate-form select { width: 64px; padding: 4px 6px; }
.rate-form input[type=text] { flex: 1 1 140px; min-width: 120px; padding: 4px 8px; font-size: 12.5px; }
.reviews { display: grid; gap: 8px; }
.review { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); font-size: 13.5px; }
.review .score { color: var(--amber-text); font-weight: 700; margin-right: 8px; }
/* filtre in catalog */
.filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: var(--r-lg); background: var(--glass); }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.filters select { min-width: 150px; }
.filters-fac { display: flex; flex-wrap: wrap; gap: 6px; }
/* .chip-check este tot o presetare a pilulei; definitia ei e in sectiunea „pilule”. */
/* favorite */
.fav-btn.on { color: #fb7185; border-color: rgba(251, 113, 133, .5); background: rgba(251, 113, 133, .12); }
/* Inima ramane roz (pictograma, 3,2:1 — pragul graficelor), eticheta ei nu: ca text
ar fi picat sub 4,5:1. */
.fav-btn.on .fav-label { color: var(--text); }
.compare td.fac, .compare th.fac { text-align: center; font-size: 12px; }
.compare th.fac { font-weight: 500; color: var(--muted); }
.pub-search input[type=date] { flex: 0 0 auto; width: 150px; }
@media (max-width: 640px) { .pub-search { flex-wrap: wrap; } .pub-search input[type=date] { width: 100%; } }
/* panou (admin) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kpi { padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: var(--r-lg); background: var(--glass); }
.kpi-label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 28px; font-weight: 700; margin: 4px 0; }
.kpi-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 160px; }
.week { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; opacity: .9; }
.b-users { background: #8b7cff; } .b-bookings { background: #34d399; } .b-inq { background: #f59e0b; } .b-claims { background: #fb7185; }
.week-label { font-size: 10.5px; color: var(--faint); text-align: center; margin-top: 4px; }
.legend { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } .weeks { height: 120px; } }
.review-reply { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: rgba(124, 108, 246, .08); border-radius: 0 6px 6px 0; font-size: 13px; }
/* galeria salii */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gallery-item { position: relative; display: block; border-radius: 8px; overflow: hidden; background: var(--surface-2); margin: 0; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery-item.main { outline: 2px solid var(--accent); }
.gallery-item figcaption { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; font-size: 12px; }
/* ------------------------------------------------------- navigarea de jos (telefon)
Cinci destinatii, fiecare cu pictograma si cuvant. Nu se arata pe ecran lat: acolo
meniul din antet e intreg. Tinta de atins are 56px inaltime, peste pragul de 44px,
iar bara respecta zona sigura de jos a telefoanelor cu ecran pana in margine. */
.botnav { display: none; }
@media (max-width: 900px) {
.botnav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: var(--surface); border-top: 1px solid var(--line);
box-shadow: var(--shadow-3);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.botnav a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; min-height: 56px; padding: 6px 4px;
color: var(--muted); font-size: var(--step--2); font-weight: 600;
}
.botnav a.on { color: var(--accent-text); }
.botnav a.on .botnav-ic { background: var(--accent-soft); }
.botnav-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 22px; border-radius: var(--r-pill); font-size: 15px;
}
/* „Caută” deschide in sus cele trei cataloage. Este un , deci merge si
fara JavaScript; foaia doar ii scoate triunghiul si ii deseneaza foaia. */
.botnav-cauta > summary {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; min-height: 56px; padding: 6px 4px;
color: var(--muted); font-size: var(--step--2); font-weight: 600;
list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.botnav-cauta > summary::-webkit-details-marker { display: none; }
.botnav-cauta > summary.on,
.botnav-cauta[open] > summary { color: var(--accent-text); }
.botnav-cauta > summary.on .botnav-ic,
.botnav-cauta[open] > summary .botnav-ic { background: var(--accent-soft); }
/* Foaia se aseaza peste toata latimea barei, nu peste a cincea parte a ei: reperul
este `.botnav` (fixat, deci pozitionat), fiindca `details` nu primeste `position`. */
.botnav-sheet {
position: absolute; left: 0; right: 0; bottom: 100%;
display: grid; gap: 2px; padding: var(--space-2);
background: var(--surface); border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
animation: urca .16s var(--ease);
}
.botnav .botnav-sheet a {
display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
gap: var(--space-3);
min-height: 48px; padding: 0 var(--space-4); border-radius: var(--r-sm);
color: var(--text); font-size: var(--step-0); font-weight: 600; text-align: left;
}
.botnav .botnav-sheet a .ico { color: var(--accent); font-size: 19px; flex: none; }
.botnav .botnav-sheet a.on {
background: var(--accent-soft); color: var(--accent-text);
}
.botnav .botnav-sheet a.on .ico { color: var(--accent-text); }
/* Pagina se termina deasupra barei, ca ultimul rand sa nu stea sub ea. */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
/* Bara cosului urca deasupra navigarii, nu peste ea. */
#cart-bar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
/* ------------------------------------------------------- paginile de cautare
Filtrele stau intr-o coloana la stanga, lipita cand pagina se deruleaza, iar
rezultatele la dreapta. Sub 900px coloana se strange in spatele unui buton
fixat jos — dar numai cand exista JavaScript (clasa .are-js), ca fara el
filtrele sa ramana vizibile, deasupra listei. */
.search-layout {
display: grid;
grid-template-columns: 272px minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
margin-bottom: var(--space-6);
}
.search-filters {
position: sticky; top: calc(var(--head-h) + var(--space-3));
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
padding: var(--space-4); box-shadow: var(--shadow-1);
max-height: calc(100vh - var(--head-h) - var(--space-5)); overflow: auto;
}
.search-filters h2 { margin: 0 0 var(--space-3); font-size: var(--step-1); }
.search-filters .filters-close { display: none; }
.search-filters label { display: block; margin: 0 0 var(--space-3); font-size: var(--step--2);
font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.search-filters label input, .search-filters label select { width: 100%; margin-top: var(--space-1);
font-weight: 400; font-size: var(--step-0); color: var(--text); }
.search-filters .filters-fac { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.search-filters .filters-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-filters hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--space-4) 0; }
/* capul listei: cate sunt, dupa ce se sorteaza, cum se vad */
.results-head {
display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
justify-content: space-between; margin: 0 0 var(--space-4);
}
.results-count { margin: 0; font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; }
.results-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.results-sort { display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--step--2); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.results-sort select { font-weight: 400; font-size: var(--step--1); color: var(--text); padding: 7px 10px; }
.results-view { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.results-view-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 36px; color: var(--muted); background: var(--surface);
}
.results-view-btn + .results-view-btn { border-left: 1px solid var(--line); }
.results-view-btn:hover { background: var(--surface-3); color: var(--text); }
.results-view-btn.on { background: var(--accent-soft); color: var(--accent-text); }
/* vederea lista: fotografia la stanga, textul la dreapta */
.cards-list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.cards-list .band-card { flex-direction: row; }
.cards-list .band-cover { flex: 0 0 240px; aspect-ratio: 16 / 10; }
.cards-list .band-card-body { flex: 1; min-width: 0; }
.cards-list .fav-float { top: var(--space-2); left: calc(240px - 48px); right: auto; }
@media (max-width: 640px) {
.cards-list .band-card { flex-direction: column; }
.cards-list .band-cover { flex: none; }
.cards-list .fav-float { left: auto; right: var(--space-2); }
}
/* butonul fixat de pe telefon */
.filters-fab { display: none; }
@media (max-width: 900px) {
.search-layout { grid-template-columns: minmax(0, 1fr); }
/* Fara JavaScript nimic nu se ascunde: filtrele raman deasupra rezultatelor. */
.are-js .search-layout .search-filters {
position: fixed; inset: 0; z-index: 80; margin: 0; max-height: none; border-radius: 0;
border: 0; box-shadow: none; padding: var(--space-4) var(--space-4) calc(var(--space-8) + 56px);
transform: translateY(100%); visibility: hidden;
transition: transform .22s var(--ease), visibility .22s var(--ease);
}
.are-js .search-layout.filtre-deschise .search-filters { transform: translateY(0); visibility: visible; }
.are-js .search-filters .filters-close {
display: inline-flex; float: right; margin: -4px -4px 0 0;
width: 40px; height: 40px; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
color: var(--muted); cursor: pointer; font-size: 17px;
}
.are-js .filters-fab {
display: inline-flex; align-items: center; gap: var(--space-2);
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(56px + var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: 75;
padding: 12px 20px; border: 1px solid transparent; border-radius: var(--r-pill);
background: var(--accent); color: #fff; font: inherit; font-weight: 600;
box-shadow: var(--shadow-3); cursor: pointer;
}
.are-js .filters-fab:hover { background: var(--accent-dark); }
.are-js .filters-fab .badge { background: #fff; color: var(--accent-text); border-color: transparent; }
}
/* Cosul de rezervare („Adauga la rezervare”, assets/cart.js) */
.cart-btn.on { color: var(--ok-text); border-color: var(--ok-line); background: var(--ok-soft); }
#cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); color: var(--text); border-top: 1px solid var(--line); box-shadow: var(--shadow-3); font-size: 14px; }
#cart-bar .cart-bar-in { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
#cart-bar .cart-item { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 6px 4px 10px; }
#cart-bar .cart-item small { opacity: .7; }
#cart-bar .cart-rm { border: 0; background: var(--line); color: var(--text); border-radius: 50%; width: 20px; height: 20px; line-height: 18px; cursor: pointer; padding: 0; }
#cart-bar .cart-rm:hover { background: var(--danger); color: #fff; }
#cart-bar .cart-bar-actions { margin-left: auto; display: inline-flex; gap: 8px; }
#cart-bar .btn:not(.btn-primary) { color: var(--text); border-color: var(--line); background: var(--surface); }
body:has(#cart-bar) { padding-bottom: 64px; }
/* Indrumarul din Contul meu (includes/guide.php) */
.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 26px; }
.guide-card h3 { margin: 0 0 8px; font-size: 15px; }
.guide-card ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.guide-card .guide-link { white-space: nowrap; font-size: 13px; }
/* Rezervarea rapida a salii (rezerva.php): 3 pasi */
.quick-book { max-width: 760px; margin: 0 auto; }
.quick-book h1 { font-size: 26px; margin: 4px 0 6px; }
/* --------------------------------------------- fluxul de rezervare: pasii
Trei pasi, cati are chiar formularul. Indicatorul spune unde esti si cat mai
este; pasul terminat primeste o bifa si se poate redeschide. */
.qb-progress {
display: flex; flex-wrap: wrap; gap: var(--space-2);
list-style: none; margin: 0 0 var(--space-5); padding: 0;
}
.qb-progress li {
display: flex; align-items: center; gap: var(--space-2);
flex: 1 1 0; min-width: 0;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface); color: var(--muted);
font-size: var(--step--1); font-weight: 600;
}
.qb-progress-num {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 24px; height: 24px; border-radius: 50%;
background: var(--surface-3); color: var(--muted); font-size: var(--step--2);
}
.qb-progress-et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-progress li.on {
border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft);
}
.qb-progress li.on .qb-progress-num { background: var(--accent); color: #fff; }
.qb-progress li.gata { color: var(--ok-text); border-color: var(--ok-line); background: var(--ok-soft); }
.qb-progress li.gata .qb-progress-num { background: var(--ok); color: #fff; }
.qb-progress li.gata .qb-progress-num::after { content: "✓"; }
.qb-progress li.gata .qb-progress-num { font-size: 0; }
.qb-progress li.gata .qb-progress-num::after { font-size: var(--step--2); }
@media (max-width: 560px) {
.qb-progress li { flex: 1 1 100%; }
}
/* ------------------------------------- fluxul de rezervare: costul orientativ
Sta in afara pasilor si lipit de marginea de jos, deci se vede de la primul
pas pana la ultimul — acolo unde omul se intreaba „cat ma costa”. */
.qb-estimate {
position: sticky; top: calc(var(--head-h) + var(--space-2)); z-index: 50;
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r);
box-shadow: var(--shadow-2);
}
.qb-est-rows > div {
display: flex; justify-content: space-between; gap: var(--space-4);
font-size: var(--step--1); color: var(--muted);
}
.qb-est-rows > div + div { margin-top: var(--space-1); }
.qb-estimate .qb-total {
align-items: baseline;
margin-top: var(--space-2); padding-top: var(--space-2);
border-top: 1px solid var(--line);
font-weight: 600; color: var(--muted);
}
.qb-estimate .qb-total span {
font-size: var(--step-2); font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.qb-est-note { margin: var(--space-2) 0 0; }
@media (max-width: 640px) {
/* Pe ecran mic nota de sub total s-ar lua jumatate din bara; ramane doar cifra. */
.qb-estimate .qb-est-note { display: none; }
}
.qb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.qb-step h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 12px; }
.qb-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; flex: none; }
.qb-step.qb-done { opacity: .75; }
.qb-step.qb-done h2 { cursor: pointer; }
.qb-step.qb-done h2::after { content: ' ✓ · modifica'; font-size: 13px; font-weight: 500; color: var(--muted); }
.qb-step.qb-done > *:not(h2) { display: none; }
.qb-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.quick-book .btn-lg { font-size: 17px; padding: 12px 22px; }
.quick-book input, .quick-book select, .quick-book textarea { font-size: 16px; }
.qb-menus { display: flex; flex-wrap: wrap; gap: 8px; }
.oferta-targets { display: flex; flex-wrap: wrap; gap: 8px; }
.oferta-target { font-size: 14px !important; color: var(--text) !important; }
.oferta-target small { margin-left: 4px; }
#fav-cta { margin: 0 0 14px; }
/* uneltele de planificare (buget, checklist) */
.budget-table input { width: 140px; display: inline-block; margin: 0; padding: 7px 10px; }
.budget-table td.num, .budget-table th.num { text-align: right; white-space: nowrap; }
.budget-table tfoot th { font-size: 17px; }
.chk-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.chk-bar { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.chk-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.chk-list { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 4px; }
.chk-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.chk-item:first-child { border-top: 0; }
.chk-item label { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 320px; font-size: 15px; color: var(--text); font-weight: 500; cursor: pointer; }
.chk-item input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.chk-item.done .chk-title { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.chk-rm { border: 0; background: var(--surface-3); color: var(--muted); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }
.pub-tools { margin: 28px 0; }
/* ghidul de preturi */
/* --------------------------------------------------- ghidul de preturi: filtrul */
.price-filter { margin: 0 0 var(--space-5); }
.price-filter label {
display: block; margin: 0;
font-size: var(--step--2); font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
.price-filter select {
display: block; margin-top: var(--space-1); max-width: 340px; width: 100%;
font-weight: 400; font-size: var(--step-0); color: var(--text);
}
/* banda: unde sta jumatatea din mijloc a tarifelor.
Nu e un ornament — arata ce nu incape in doua numere: cat de stranse sau de
imprastiate sunt preturile dintr-o categorie. */
.price-bar { margin: var(--space-3) 0 0; }
.price-bar-track {
position: relative; height: 12px; border-radius: var(--r-pill);
background: var(--surface-3); border: 1px solid var(--line); overflow: hidden;
}
.price-bar-band {
position: absolute; top: 0; bottom: 0;
/* Pe pista gri, un violet palid abia se deosebea; banda trebuie sa se vada dintr-o
privire, fiindca ea este informatia, nu decorul. */
background: var(--accent-line);
}
.price-bar-median {
position: absolute; top: -2px; bottom: -2px; width: 3px;
border-radius: 2px; background: var(--accent);
}
.price-bar-axis {
display: flex; justify-content: space-between; gap: var(--space-3);
margin-top: var(--space-1); font-size: var(--step--2); color: var(--muted);
}
/* bara din tabel: compara judetele intre ele, pe aceeasi scara */
.price-table .price-cell { width: 28%; min-width: 90px; vertical-align: middle; }
.price-rowbar {
display: block; height: 8px; min-width: 2px; border-radius: var(--r-pill);
background: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-soft-2);
}
@media (max-width: 720px) {
/* Pe ecran ingust tabelul are deja cinci coloane; bara iese prima. */
.price-table .price-cell, .price-table thead th:nth-child(3) { display: none; }
}
.price-cat { margin-bottom: 14px; }
/* semnele de incredere: pagina revendicata, rezervari confirmate */
.trust-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
/* Program: filele „Calendarul meu” / „Cauta locatie” */
.program-tabs { margin: 0 0 12px; }
.program-tabs .chip { font-size: 14px; padding: 7px 14px; }
/* .trust este o presetare a pilulei; definitia ei e in sectiunea „pilule”. */
.price-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.price-figures { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin-top: 12px; }
.price-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-right: 8px; }
.price-range { font-size: 14px; }
.price-table { margin-top: 12px; }
.price-table td.num, .price-table th.num { text-align: right; white-space: nowrap; }
/* Pagina uneltelor nu este un formular: are latimea unei zone de prezentare, ca sa
incapa toate patru pe un rand pe ecran lat. */
.tools-page { max-width: 1100px; margin: 0 auto; }
.tools-page > .lead { max-width: 68ch; }
/* ------------------------------------------------------------------ unelte
Fiecare unealta este un produs de sine statator: pictograma, nume, o promisiune
de un rand, o cifra adevarata si indemnul ei. Cardul nu mai este o legatura
intreaga, ci o casuta cu buton — altfel indemnul ar fi fost un link intr-un link. */
.tools-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
gap: var(--space-4); margin-top: var(--space-3);
}
.tool-card {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-5) var(--space-4) var(--space-4);
border: 1px solid var(--line); border-radius: var(--r);
/* `var(--card)` nu a existat niciodata in :root: fundalul cadea pe transparent. */
background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.tool-card:hover {
border-color: var(--accent-line); box-shadow: var(--shadow-3); transform: translateY(-2px);
}
.tool-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: var(--r-sm);
background: var(--accent-soft); color: var(--accent); font-size: 19px;
}
.tool-name { margin: var(--space-1) 0 0; font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; }
.tool-promise { margin: 0; font-size: var(--step-0); line-height: 1.5; }
.tool-fact { margin: 0; line-height: 1.45; }
.tool-cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 640px) {
.budget-table thead { display: none; }
.budget-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.budget-table td, .budget-table th { display: block; padding: 0; border: 0; }
.budget-table td:first-child, .budget-table th:first-child { grid-column: 1 / -1; }
.budget-table input { width: 100%; }
.budget-table td.num, .budget-table th.num { align-self: center; }
}
/* Randul ascuns (meniul, cand nu e ales) trebuie sa ramana ascuns: `display: flex`
de mai sus ar invinge singur atributul `hidden`. */
.qb-est-rows > div[hidden] { display: none; }
@media (max-width: 640px) { .quick-book h1 { font-size: 22px; } .qb-nav { flex-direction: column-reverse; } .qb-nav .btn { width: 100%; } }
/* Bannerul permanent „date de contract lipsa” (header.php, render_contract_banner) */
.contract-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-lg); border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12); font-size: 14px; }
.contract-banner .btn { margin-left: auto; }
/* Prima pagina: cautarea cu judet + cele mai mari 8 judete, restul pliate */
/* Cautarea: un singur rand pe ecran lat — felul, textul, judetul, data si butonul.
Sub 1000px randul se rupe singur, iar sub 640px fiecare control ia toata latimea. */
.pub-search { max-width: 980px; flex-wrap: wrap; align-items: stretch; }
.pub-search .pub-search-what { flex: 0 0 180px; font-weight: 600; }
.pub-search .pub-search-county { flex: 0 0 170px; }
.pub-search input[type=search] { flex: 1 1 200px; }
.pub-search .btn { flex: 0 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }
.county-top { margin-top: 4px; }
.county-all { display: contents; }
.county-all summary { list-style: none; cursor: pointer; }
.county-all summary::-webkit-details-marker { display: none; }
.county-all[open] summary { display: none; }
.county-all > .county-chips { width: 100%; margin-top: 8px; }
@media (max-width: 640px) {
.pub-search .pub-search-what, .pub-search .pub-search-county, .pub-search input[type=search], .pub-search input[type=date], .pub-search .btn { flex: 1 1 100%; width: 100%; }
.pub-search .btn { padding: 12px; font-size: 16px; }
.county-top .chip { font-size: 13px; }
}
/* Paginile publice: un singur buton principal (Rezerva / Cere oferta), restul secundare, mici */
.pub-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pub-cta .btn-primary, .pub-cta .btn { font-size: 16px; padding: 12px 22px; }
.pub-secondary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pub-secondary .muted.small { width: 100%; text-align: right; }
@media (max-width: 900px) {
.pub-actions { align-items: stretch; width: 100%; }
.pub-cta .btn { display: block; width: 100%; text-align: center; font-size: 17px; padding: 14px; }
.pub-secondary { justify-content: flex-start; }
}
.share { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
/* bara de cookie-uri: deasupra barei „Rezervarea ta”, pe telefon pe latime */
body:has(#cart-bar) .cookie-consent { bottom: 76px; }
@media (max-width: 640px) { .cookie-consent { left: 12px; right: 12px; max-width: none; } }
/* Pe telefon bara de cookie-uri urca deasupra navigarii de jos, nu peste ea. */
@media (max-width: 900px) {
.cookie-consent { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)); }
body:has(#cart-bar) .cookie-consent { bottom: calc(56px + 76px + env(safe-area-inset-bottom, 0px)); }
}
/* Lista de sali: bara de filtre (judet, nume, data) + panoul pliat „Mai multe filtre” */
.filters-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.filters-bar .filters-q { flex: 1 1 220px; }
.filters-bar select { min-width: 190px; }
.filters-more summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; width: max-content; }
.filters-more summary::-webkit-details-marker { display: none; }
.filters-panel { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.filters-panel .filters-fac { flex: 1 1 100%; }
.filters-actions { display: flex; gap: 8px; }
@media (max-width: 640px) {
.filters-bar label, .filters-bar select, .filters-bar .btn { width: 100%; flex: 1 1 100%; }
.filters-bar .btn { padding: 12px; font-size: 16px; }
.filters-panel label { width: 100%; }
}
/* „Ce e nou” (includes/whatsnew.php): cardul de o singura afisare si lista din /noutati */
.whatsnew { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--accent-line); background: var(--accent-soft); }
.whatsnew-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.whatsnew-head strong { display: inline-flex; align-items: center; gap: 6px; }
.whatsnew-list { margin: 0 0 6px; padding-left: 18px; font-size: 14px; }
.whatsnew-list li { margin: 4px 0; }
.whatsnew-foot { margin: 0; color: var(--muted-ink); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.news-item h2 { margin: 0 0 4px; font-size: 17px; }
.news-item .news-date { font-size: 13px; color: var(--muted-ink); }