:root{ --navH:82px; }
/* compensează navbarul fix */
body{ padding-top: var(--navH); }
/* -------------------- NAVBAR -------------------- */
#topNav{
position:fixed; top:0; left:0; right:0; height:var(--navH);
background:transparent; box-shadow:none; z-index:1030;
transition:background .25s ease, box-shadow .25s ease, color .25s ease;
backdrop-filter:none;
}
.nav-grid.container{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; height:100%; }
.nav-center{ justify-self:center; }
.nav-right{ justify-self:end; }
#topNav.navbar-transparent .navbar-brand,
#topNav.navbar-transparent .nav-link,
#topNav.navbar-transparent .btn-link{ color:#0f172a !important; opacity:.96; }
#topNav.navbar-transparent .navbar-toggler{ filter:invert(1); }
#topNav.navbar-solid{
background:#fff !important; box-shadow:0 10px 30px rgba(16,24,40,.08);
}
#topNav.navbar-solid .navbar-brand,
#topNav.navbar-solid .nav-link,
#topNav.navbar-solid .btn-link{ color:#0f172a !important; opacity:.9; }
#topNav:hover{ background:#fff; box-shadow:0 10px 30px rgba(16,24,40,.08); }
#topNav:hover .navbar-brand, #topNav:hover .nav-link, #topNav:hover .btn-link{ color:#0f172a !important; }
.navbar-brand{ font-weight:800; letter-spacing:.2px; font-size:1.45rem; }
.nav-link{ font-weight:700;font-size:1.05rem; }
.nav-item .dropdown-toggle::after{ display:none }
/* ===== NAVBAR LOGO ===== */
.nav-logo {
height: 34px;
width: auto;
transition: opacity 0.3s ease, filter 0.3s ease;
}
/* Logo alb (pe fundal transparent) */
#topNav.navbar-transparent .nav-logo {
content: url("../img/vp_logo_dark.png");
filter: brightness(1);
}
/* Logo negru (după scroll sau hover) */
#topNav.navbar-solid .nav-logo,
#topNav:hover .nav-logo {
content: url("../img/vp_logo_dark.png");
filter: brightness(0.95);
}
/* ===== NAVBAR LOGO DIMENSIONS ===== */
.nav-logo {
height: 50px; /* mic și echilibrat — poți ajusta între 36–48px */
width: auto;
max-height: 52px; /* previne să se extindă prea mult */
object-fit: contain;
transition: all 0.3s ease;
}
/* ===== MEGA MENU bandă crem, full-width, colțuri jos ===== */
.dropdown-mega{ position:static; }
.dropdown-menu.mega{
width:100% !important;
left:0 !important; right:0 !important; top:100% !important;
margin-top:0 !important; padding:24px 0 !important;
background:#DEE3E3 !important;
border:0 !important;
box-shadow:none !important;
opacity:0; transform:none;
transition:opacity .18s ease, visibility .18s ease;
}
/* anulează transformările Popper */
.dropdown-menu.mega[data-bs-popper]{
left:0 !important; right:0 !important; top:100% !important; transform:none !important;
}
/* arată mega-ul la hover pe desktop */
@media (min-width: 992px){
.dropdown-hover:hover > .dropdown-menu.mega{ opacity:1; visibility:visible; }
.dropdown-menu.mega .col-lg-8 .col-md-4{ padding-inline:18px; }
.dropdown-menu.mega .col-lg-7{ padding-right:18px; }
.dropdown-menu.mega .col-lg-5{ padding-left:18px; }
}
.mega-title{ font-size:1.05rem; color:#0f172a; font-weight:800; margin-bottom:.75rem; }
.mega-note{ color:#6b7280; }
.mega-link{ display:flex; align-items:center; gap:.6rem; padding:.45rem 0; color:#0f172a; text-decoration:none; font-weight:700; }
.mega-link i{ font-size:1.1rem; color:#64748b; }
.mega-link .sub{ font-weight:600; color:#64748b; margin-left:.25rem; }
.promo{ display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem; height:100%; }
.promo img{ width:120px; height:90px; object-fit:cover; border-radius:10px; }
.promo h6{ margin:0 0 .25rem; font-weight:800; }
.promo p{ margin:0; color:#6b7280; }
/* ====== Card mare din stânga ====== */
/* Opportunities */
.opp-left-card{
display:flex; align-items:center; gap:24px;
background:transparent; border:1px solid transparent;
padding:24px 28px; /* padding fix (același și pe hover) */
box-shadow:none;
transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.opp-left-card .opp-img{
flex:0 0 auto;
width:220px; aspect-ratio: 4 / 3; /* stabil, în loc de height fix */
object-fit:cover;
transition:transform .25s;
}
.opp-left-card h5{
margin:0 0 .4rem; font-weight:800; color:#0f172a; font-size:1.35rem;
}
.opp-left-card p{
margin:0; color:#6b7280; font-size:1rem; line-height:1.55;
}
.opp-left-card:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:0 12px 20px rgba(2,6,23,.08), 0 34px 80px rgba(2,6,23,.16);
transform:translateY(-4px);
}
.opp-left-card:hover .opp-img{ transform:scale(1.04); }
/* ====== Carduri mici ====== */
.opp-mini-card{
display:flex; align-items:center; gap:14px;
background:transparent; border:1px solid transparent;
padding:16px 18px; /* padding fix */
transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.opp-mini-card img{
flex:0 0 auto;
width:88px; aspect-ratio: 4 / 3; /* stabil */
object-fit:cover;
transition:transform .25s;
}
.opp-mini-card h6{
margin:0 0 .2rem; font-weight:700; font-size:1.05rem; color:#0f172a;
}
.opp-mini-card p{
margin:0; color:#6b7280; font-size:.95rem; line-height:1.45;
}
.opp-mini-card:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:0 10px 18px rgba(2,6,23,.08), 0 28px 70px rgba(2,6,23,.14);
transform:translateY(-3px);
}
.opp-mini-card:hover img{ transform:scale(1.04); }
/* ====== Titlu secțiune ====== */
.mega-section-title{
font-size:.85rem; font-weight:700; color:#94a3b8;
text-transform:uppercase; letter-spacing:.05em;
margin-bottom:1rem;
}
/* ===== Buy mega: 3 columns look, icons & spacing ===== */
/* ===== Coloane din stânga (tipografie + icon chips) ===== */
.mega-heading{
font-size:1.15rem; font-weight:800; color:#0f172a; margin-bottom:1rem;font-family: var(--font-sans);
}
.mega-item{
display:flex; align-items:center; gap:.7rem;
padding:.35rem .45rem;
color:#0f172a; text-decoration:none; font-weight:600; /* titlul mai greu */
border-radius:12px;
transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
font-family: var(--font-sans);
}
.mega-item i{
width:36px; height:36px; display:inline-grid; place-items:center;
border-radius:10px; background:#e9eef5; color:#2f3a4a; font-size:1.1rem;
}
.mega-item .sub{ margin-left:.3rem; font-weight:600; color:#8a97ad; } /* "en venta" / "for sale" */
.mega-item:hover{
background:#fff; transform:translateX(2px);
box-shadow:0 10px 22px rgba(2,6,23,.05);
}
/* spațiere egală între cele 3 coloane pe desktop */
@media (min-width: 992px){
.dropdown-menu.mega .col-lg-8 .col-md-4{ padding-inline:18px; }
}
/* ===== Buy mega: big promo cards on the right ===== */
/* Buy */
.mega-heading{ font-size:1.15rem; font-weight:800; color:#0f172a; margin-bottom:1rem; }
.mega-item{ display:flex; align-items:center; gap:.7rem; padding:.35rem .45rem; color:#0f172a; text-decoration:none; font-weight:800; border-radius:0px; transition:background .18s, transform .18s, box-shadow .18s; }
.mega-item i{ width:36px; height:36px; display:inline-grid; place-items:center; border-radius:10px; background:#eef2f6; color:#334155; font-size:1.1rem; }
.mega-item .sub{ margin-left:.3rem; font-weight:600; color:#8a97ad; }
.mega-item:hover{ background:#fff; transform:translateX(2px); box-shadow:0 10px 22px rgba(2,6,23,.05); }
/* Buy – promo cards */
.promo-card-lg{ display:flex; align-items:center; gap:20px; background:transparent; border:0; box-shadow:none; padding:0; transition:all .25s; }
.pc-img-wrap{ flex:0 0 auto; width:100px; height:80px; border-radius:10px; overflow:hidden; }
.promo-card-lg img{ width:100%; height:100%; object-fit:cover; transition:transform .22s; }
.pc-title{ margin:0 0 .25rem; font-weight:800; color:#0f172a; font-size:1.25rem; }
.pc-text{ margin:0; color:#6b7280; line-height:1.55; font-size:1rem; }
.promo-card-lg:hover{ background:#fff; padding:20px 24px; border:1px solid #e5e7eb; box-shadow:0 10px 20px rgba(2,6,23,.08),0 30px 80px rgba(2,6,23,.16); transform:translateY(-4px); }
.promo-card-lg:hover img{ transform:scale(1.04); }
/* ușor mai compact pe desktop mare */
@media (min-width: 992px){
.dropdown-menu.mega .col-lg-7{ padding-right:18px; }
.dropdown-menu.mega .col-lg-5{ padding-left:18px; }
}
/* ===== Services: HERO card ===== */
/* ==== Glass card variant (left) ==== */
/* ===== Services – Premium left card ===== */
/* ===== Services: HERO card ===== */
/* ==== Glass card variant (left) ==== */
/* ===== Services: HERO card — Premium Glass (LEFT) ===== */
/* CARD */
.svc-card{
position:relative; isolation:isolate;
padding:22px 24px 20px;
border-radius:18px;
border:1px solid rgba(225,232,245,.9);
background:
radial-gradient(1400px 600px at -10% -40%, rgba(255,255,255,.85), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.66)),
repeating-linear-gradient(0deg, transparent 0 18px, rgba(15,23,42,.03) 18px 19px);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
0 12px 20px rgba(2,6,23,.06),
0 44px 120px rgba(2,6,23,.18);
overflow:hidden;
will-change: transform, box-shadow;
}
/* scoatem linia portocalie de sus */
.svc-card::after{ content:none; }
/* highlight premium sus (gloss discret) */
.svc-card::before{
content:"";
position:absolute; left:18px; right:18px; top:8px; height:42px;
border-radius:999px;
background: radial-gradient(120% 100% at 50% 0%,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,0) 70%);
pointer-events:none;
}
/* HEAD */
.svc-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:.35rem; }
.svc-badge{
width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
background:linear-gradient(180deg,#eef3f8,#e7edf6);
color:#334155; font-size:1.25rem;
box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(2,6,23,.08);
}
.svc-eyebrow{
display:inline-flex; align-items:center; gap:.35rem;
padding:.28rem .6rem; border-radius:999px;
background:#f5f7fb; border:1px solid #e6ebf2;
color:#0f172a; font-weight:800; font-size:.86rem;
}
/* TYPO */
.svc-title{
margin:.25rem 0 .2rem; font-weight:900;
font-size:1.75rem; letter-spacing:.1px; color:#0f172a;
}
.svc-sub{ margin:0 0 .9rem; color:#7b8aa6; font-size:1.02rem; line-height:1.6; }
/* INPUT + CTA ancorat (fără salt pe hover) */
.svc-input-row{
display:flex; align-items:center; gap:.6rem;
background:#fff;
border:1px solid #e6ebf2;
border-radius:999px;
padding:.6rem .7rem;
box-shadow:0 8px 22px rgba(2,6,23,.06);
}
.svc-input-row i{ color:#64748b; font-size:1rem; }
.svc-input-row input{
flex:1; border:0; outline:0; background:transparent;
font-size:1rem; color:#0f172a; min-width:0;
}
/* CTA negru — glass premium */
.svc-cta{
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
padding:.66rem 1.05rem;
white-space:nowrap;
font-weight:900;
color:#fff;
background: rgba(0,0,0,.55);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
box-shadow:
0 12px 24px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(0,0,0,.38);
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.svc-cta:hover{
transform:translateY(-1px);
background: rgba(0,0,0,.7);
box-shadow: 0 18px 36px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.22);
}
.svc-cta:active{ transform:translateY(0); }
/* FOOT */
.svc-foot{ display:flex; align-items:center; gap:.6rem; margin-top:.7rem; }
.svc-hint{ color:#0f172a; font-weight:700; opacity:.85; }
.svc-dot{ width:4px; height:4px; border-radius:999px; background:#cbd5e1; display:inline-block; }
/* ===== Tiles din dreapta — păstrăm efectul premium coerent ===== */
.svc-tile{
display:flex; gap:14px; align-items:flex-start;
box-sizing:border-box;
padding:14px 16px;
border:1px solid transparent;
background:transparent;
box-shadow:none;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
will-change: transform, box-shadow;
}
.svc-tile-icon{
flex:0 0 auto; width:46px; height:46px; border-radius:12px;
display:grid; place-items:center;
background:linear-gradient(180deg,#eef2f6,#e8edf5);
color:#334155; font-size:1.2rem; box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(2,6,23,.06);
}
.svc-tile-title{ margin:0 0 .15rem; font-weight:800; color:#0f172a; font-size:1.05rem; }
.svc-tile-text{ margin:0; color:#6b7280; line-height:1.5; font-size:.97rem; }
.svc-tile .chip{
display:inline-flex; align-items:center; padding:.28rem .5rem;
background:#fff; border:1px solid #e5e7eb; border-radius:999px; font-weight:700; font-size:.82rem; color:#0f172a;
}
.svc-tile:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:0 12px 20px rgba(2,6,23,.08), 0 34px 80px rgba(2,6,23,.14);
transform:translateY(-3px);
}
/* QUICK LINKS */
.svc-quick{ display:flex; gap:.6rem; flex-wrap:wrap; }
.svc-quick-link{
display:inline-flex; align-items:center; gap:.35rem;
padding:.46rem .68rem; border-radius:999px;
background:#fff; border:1px solid #e5e7eb; color:#0f172a; text-decoration:none; font-weight:700; font-size:.9rem;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
will-change: transform, box-shadow;
}
.svc-quick-link:hover{
transform:translateY(-2px);
border-color:#e2e8f0;
box-shadow:0 8px 16px rgba(2,6,23,.08);
}
/* spacing în mega */
@media (min-width:992px){
.dropdown-menu.mega .col-lg-7{ padding-right:18px; }
.dropdown-menu.mega .col-lg-5{ padding-left:18px; }
}
/* ============ SERVICES (mega menu) – CLEAN ============ */
/* ===== Left promo card (re-use opp-left-card) ===== */
.opp-left-card--svc{
padding:22px 24px;
border-radius:0; /* colțuri drepte */
border:1px solid transparent; /* pt. hover subtle */
background:transparent;
transition:transform .22s, box-shadow .22s, border-color .22s, background .22s;
}
.opp-left-card--svc .opp-img{
width:200px;
aspect-ratio:4/3;
border-radius:12px;
}
.opp-left-card--svc:hover{
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
border-color:#e6ebf2;
box-shadow:0 14px 24px rgba(2,6,23,.08), 0 60px 140px rgba(2,6,23,.18);
}
/* Stack left spacing */
.svc-left{ display:flex; flex-direction:column; }
.svc-left .opp-left-card--svc{ margin-bottom:.6rem; }
/* ===== Quick pills (sub cardul din stânga) – MARI + CONTUR NEGRU ===== */
.svc-quick--under{
display:flex; gap:.8rem; flex-wrap:wrap;
}
.svc-quick-link{
display:inline-flex; align-items:center; gap:.5rem;
padding:.66rem 1.05rem; /* mai mare */
border-radius:999px;
font-weight:900; font-size:1rem;
line-height:1;
text-decoration:none;
transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.svc-quick-link--outline-black{
color:#0b1220;
background:rgba(255,255,255,.92);
border:1.6px solid rgba(0,0,0,.85); /* contur negru elegant */
box-shadow:
0 6px 14px rgba(0,0,0,.08),
inset 0 0 0 .6px rgba(255,255,255,.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.svc-quick-link--outline-black:hover{
transform:translateY(-2px);
background:rgba(255,255,255,1);
border-color:#000;
box-shadow:0 10px 22px rgba(0,0,0,.12);
}
/* ===== RIGHT SERVICE CARDS (tile-urile din dreapta) ===== */
.svc-tile{
position:relative;
display:flex;
align-items:flex-start;
gap:18px;
padding:14px 20px;
border:1.5px solid rgba(0,0,0,.85); /* contur negru rafinat */
border-radius:10px;
/* „alb” mai transparent (glass) */
background:
linear-gradient(180deg, rgba(255,255,255,.80), rgba(245,245,245,.72));
box-shadow:
0 8px 18px rgba(0,0,0,.08),
inset 0 0 0 .8px rgba(255,255,255,.4);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.svc-tile:hover{
transform:translateY(-3px);
box-shadow:0 16px 28px rgba(0,0,0,.15), 0 60px 120px rgba(0,0,0,.18);
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,245,.84));
}
/* Icon container – relief discret */
.svc-tile-icon{
width:48px; height:48px;
display:grid; place-items:center;
border:1.4px solid rgba(0,0,0,.85);
border-radius:12px;
background:linear-gradient(145deg, #ffffff, #e6e9ef);
color:#111;
font-size:1.15rem;
box-shadow:
0 2px 5px rgba(0,0,0,.12),
inset 0 0 0 .6px rgba(255,255,255,.5);
transition:transform .25s ease;
}
.svc-tile:hover .svc-tile-icon{ transform:scale(1.07) rotate(-2deg); }
/* Tipografie în carduri */
.svc-tile-title{
font-weight:900;
font-size:1.06rem;
color:#0f172a;
letter-spacing:.2px;
margin-bottom:.25rem;
}
.svc-tile-text{
color:#444;
font-size:.95rem;
line-height:1.5;
font-weight:500;
}
/* Chips / tag-uri din carduri */
.svc-tile .chip{
background:rgba(255,255,255,.96);
border:1.3px solid rgba(0,0,0,.78);
border-radius:999px;
font-weight:800;
font-size:.82rem;
text-transform:uppercase;
padding:.24rem .55rem;
box-shadow:
0 2px 5px rgba(0,0,0,.1),
inset 0 0 0 .6px rgba(255,255,255,.45);
transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s;
}
.svc-tile .chip:hover{
background:#0f172a;
color:#fff;
border-color:#0f172a;
transform:translateY(-2px);
}
/* ===== “Popular tools” – heading ===== */
.svc-section-label{
font-family:var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial);
font-weight:900;
font-size:.78rem;
letter-spacing:.14em;
text-transform:uppercase;
color:#0f172a;
opacity:.9;
display:flex; align-items:center; gap:.65rem;
margin:2px 0 12px;
transition:opacity .25s ease, letter-spacing .25s ease;
}
.svc-section-label::after{
content:"";
flex:1; height:1px; background:#0f172a; opacity:.15;
}
.svc-section-label:hover{ opacity:1; letter-spacing:.18em; }
/* ===== Accessibility: reduce motion ===== */
@media (prefers-reduced-motion: reduce){
.svc-section-label,
.svc-quick-link,
.svc-tile,
.svc-tile-icon{ transition:none !important; }
}
/* ===== Responsive ===== */
@media (max-width: 991.98px){
.opp-left-card--svc .opp-img{ width:150px; }
.svc-quick--under{ gap:.7rem; }
.svc-quick-link{ padding:.62rem .95rem; font-size:.98rem; }
.svc-tile{
padding:12px 16px;
border-radius:16px;
background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,245,245,.78));
backdrop-filter: blur(8px);
}
.svc-tile-icon{ width:44px; height:44px; font-size:1.05rem; }
}
/* ===== Quick pills – Premium black outline version ===== */
.svc-quick--under {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.svc-quick-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1.3rem; /* mai mare, premium feel */
border-radius: 999px; /* complet rotund */
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
color: #0f172a;
background: rgba(255, 255, 255, 0.92);
border: 1.8px solid #000; /* contur negru clar */
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.08),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.svc-quick-link:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 1);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.12),
0 0 0 1px #000;
}
.svc-quick-link i {
font-size: 1.1rem;
line-height: 1;
color: #0f172a;
}
/* Responsive pills */
@media (max-width: 991.98px) {
.svc-quick-link {
padding: 0.65rem 1.1rem;
font-size: 1rem;
}
}
/* ===== Quick pills (sub cardul din stânga) – Black Outline Premium ===== */
.svc-quick--under {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.svc-quick-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1.3rem; /* proporții mai mari, look premium */
border-radius: 999px;
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
color: #0f172a;
background: rgba(255, 255, 255, 0.9);
border: 1.8px solid #000; /* contur negru clar */
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.08),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
/* === Hover – se inversează, la fel ca Enterprise === */
.svc-quick-link:hover {
transform: translateY(-2px);
background: #0f172a; /* negru elegant */
color: #fff; /* text alb la hover */
border-color: #0f172a;
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.svc-quick-link i {
font-size: 1.1rem;
line-height: 1;
color: inherit; /* urmează culoarea textului */
transition: color 0.22s ease;
}
/* ===== Responsive ===== */
@media (max-width: 991.98px) {
.svc-quick-link {
padding: 0.65rem 1.1rem;
font-size: 1rem;
}
}
/* ===== Enterprise – feature cards ===== */
.ent-feature{
position:relative;
display:flex;
gap:18px;
align-items:center;
padding:18px;
background:transparent;
border:1px solid transparent;
transition:all .25s ease;
}
.ent-media{
flex:0 0 210px;
height:150px;
border-radius:10px;
overflow:hidden;
border:2px solid rgba(0,0,0,.9); /* contur negru tip “ramă” */
background:#fff;
box-shadow:
0 2px 4px rgba(0,0,0,.08),
inset 0 0 0 1px rgba(255,255,255,.6); /* efect de profunzime subtil */
transition:transform .25s ease, box-shadow .25s ease;
}
.ent-media img{
width:100%; height:100%; object-fit:cover;
transform:scale(1.0);
transition:transform .25s ease, filter .25s ease;
border-radius:10px; /* ușor rotunjit în interiorul ramei */
}
.ent-body{ min-width:0; }
.ent-title{
position:relative;
margin:2px 0 10px;
font-weight:900;
font-size:1.45rem;
color:#0f172a;
display:inline-block;
}
/* Linie subțire neagră elegantă sub titlu */
.ent-title::after{
content:"";
display:block;
width:100%;
height:1.5px;
background:#000;
opacity:0.7;
margin-top:6px;
border-radius:2px;
}
.ent-text{
margin:0;
color:#7b8aa6;
line-height:1.6;
font-size:.98rem;
}
.ent-meta{
display:flex;
gap:.5rem;
flex-wrap:wrap;
margin-top:.65rem;
}
.ent-chip{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.34rem .6rem;
border-radius:999px;
background:#f7f9fc;
border:1px solid #e5e7eb;
color:#0f172a;
font-weight:700;
font-size:.9rem;
}
/* === Hover state === */
.ent-feature:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:
0 12px 22px rgba(2,6,23,.08),
0 42px 110px rgba(2,6,23,.16);
transform:translateY(-3px);
}
.ent-feature:hover .ent-media{
box-shadow:
0 4px 8px rgba(0,0,0,.15),
inset 0 0 0 1px rgba(255,255,255,.5);
transform:scale(1.02);
}
.ent-feature:hover .ent-media img{
transform:scale(1.04);
filter:brightness(1.03);
}
/* Varianta revers (imagine în dreapta) */
.ent-feature--reverse{
flex-direction:row-reverse;
}
/* Responsive */
@media (max-width: 991.98px){
.ent-feature{
flex-direction:column;
align-items:flex-start;
}
.ent-media{
width:100%;
height:180px;
}
}
/* ===== Elegant black-outline pills (meta chips) ===== */
.ent-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9); /* alb ușor transparent */
border: 1.6px solid rgba(0, 0, 0, 0.9); /* contur negru clar */
color: #0f172a;
font-weight: 800;
font-size: 0.93rem;
text-decoration: none;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.06),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ent-chip:hover {
transform: translateY(-2px);
background: #0f172a;
color: #fff;
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.12);
}
.ent-chip i {
font-size: 1rem;
line-height: 1;
}
/* ===== NAVBAR — MOBILE PREMIUM v3 (fix: show mega items) ===== */
@media (max-width: 991.98px){
#topNav.navbar{
--nav-h: 60px;
--panel-w: min(86vw, 420px);
--bg: #fbfbfd;
--card: #ffffff;
--ink: #1f2937;
--muted: #64748b;
--divider: #e9edf3;
--shadow: 0 12px 30px rgba(15,23,42,.10);
--radius: 16px;
}
/* Header row */
#topNav .nav-grid.container{
display:flex; align-items:center; justify-content:space-between;
min-height: var(--nav-h);
}
/* Burger */
#topNav .navbar-toggler{
position:absolute; right:12px; top:50%; transform:translateY(-50%);
border:0 !important; box-shadow:none !important; z-index:1031;
}
#topNav .navbar-toggler-icon{
background-image:none; width:28px; height:22px; position:relative;
}
#topNav .navbar-toggler-icon::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(#111,#111) left 0 top 2px/100% 2px no-repeat,
linear-gradient(#111,#111) left 0 center/70% 2px no-repeat,
linear-gradient(#111,#111) left 0 bottom 2px/100% 2px no-repeat;
}
/* Slide-in panel */
#topNav .navbar-collapse{
position:fixed; top:8px; right:-100%;
width: var(--panel-w); height: calc(100vh - 16px);
background: var(--bg);
border-radius: var(--radius) 0 0 var(--radius);
box-shadow: var(--shadow);
transition: right .35s ease;
padding: calc(var(--nav-h) - 6px) 14px 16px;
overflow-y:auto; z-index:1030;
border:1px solid #eef2f7;
}
#topNav .navbar-collapse.show{ right:8px; }
/* Optional backdrop (dacă adaugi `body.nav-open` în JS) */
body.nav-open::before{
content:""; position:fixed; inset:0;
background: rgba(2,6,23,.28);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index:1029;
}
/* Main list */
#topNav .navbar-nav{ width:100%; gap:0; }
#topNav .nav-item{ margin: 2px 0; }
#topNav .nav-link{
display:flex; align-items:center; justify-content:space-between;
gap:.75rem;
padding:.9rem .25rem;
font-weight:700;
color: var(--ink) !important;
border-bottom:1px solid var(--divider);
}
#topNav .nav-item:last-child .nav-link{ border-bottom:0; }
/* Chevron */
#topNav .nav-link .bi-chevron-down{
font-size:.95rem; color: var(--muted);
transition: transform .22s ease, color .2s ease;
}
#topNav .dropdown.show > .nav-link .bi-chevron-down{
transform: rotate(180deg); color: var(--ink);
}
/* ============ ACCORDION CONTENT (VISIBLE) ============ */
/* Dropdown container devine acordion cu animație */
#topNav .dropdown-menu{
position: static !important;
float:none; margin:0;
border:0; box-shadow:none;
background: var(--bg);
padding: 0; /* padding gestionat mai jos */
max-height: 0; /* ascuns implicit */
overflow: hidden;
opacity: 0;
transition: max-height .3s ease, opacity .2s ease;
}
#topNav .dropdown.show > .dropdown-menu{
max-height: 2000px; /* suficient pentru conținutul tău */
opacity: 1;
}
/* Container intern */
#topNav .dropdown-menu > .container{ padding: 12px 12px 10px; }
/* Titlul de secțiune pentru mobil (d-lg-none din HTML) */
#topNav .dropdown-menu .border-bottom.bg-body-tertiary{
background: transparent !important;
border-color: var(--divider) !important;
}
#topNav .dropdown-menu h4{ font-size:1.25rem; color:var(--ink); }
/* ===== Carduri compacte cu thumbnail ===== */
#topNav .dropdown-menu img{
width:72px; height:72px; object-fit:cover; border-radius:12px;
flex-shrink:0;
}
/* Generic card look pentru itemii principali (opp/promo/ent/etc.) */
#topNav .dropdown-menu .opp-left-card,
#topNav .dropdown-menu .opp-mini-card,
#topNav .dropdown-menu .promo-card-lg,
#topNav .dropdown-menu .ent-feature{
display:flex; align-items:center; gap:12px;
background: var(--card);
border:1px solid var(--divider);
padding:12px;
text-decoration:none;
color: var(--ink);
margin-bottom:12px;
}
#topNav .dropdown-menu .opp-left-card h5,
#topNav .dropdown-menu .promo-card-lg .pc-title,
#topNav .dropdown-menu .ent-feature .ent-title{
margin:0 0 4px; font-size:1rem; line-height:1.2;
}
#topNav .dropdown-menu p,
#topNav .dropdown-menu .pc-text,
#topNav .dropdown-menu .ent-text{
margin:0; font-size:.9rem; color:var(--muted);
}
/* Elimină layout-uri complexe pe mobil (row/grid) → stack */
#topNav .dropdown-menu .row{ --bs-gutter-x: .75rem; }
/* ===== Lista de categorii (“Buy”) ===== */
#topNav .dropdown-menu .mega-heading{
font-weight:800; color:var(--muted); margin:.25rem 0 .35rem;
}
#topNav .dropdown-menu .mega-item{
display:flex; align-items:center;
gap:.5rem;
padding:.6rem .25rem;
font-weight:600; color: var(--ink) !important; text-decoration:none;
border-bottom:1px dashed var(--divider);
}
#topNav .dropdown-menu .mega-item:last-child{ border-bottom:0; }
#topNav .dropdown-menu .mega-item i{ opacity:.7; }
/* Right actions în panou */
#topNav .nav-right{ display:none !important; }
#topNav .navbar-collapse .nav-right-clone{
margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--divider);
}
#topNav .navbar-collapse .nav-right-clone .btn{
width:100%; padding:.9rem 1rem; font-weight:800; border-radius:14px;
background:#111; color:#fff;
}
/* Hover-uri discrete */
#topNav .nav-link:hover{ background: linear-gradient(0deg, rgba(2,6,23,.03), rgba(2,6,23,.03)); border-radius:10px; }
#topNav .dropdown-menu .opp-left-card:hover,
#topNav .dropdown-menu .opp-mini-card:hover,
#topNav .dropdown-menu .promo-card-lg:hover,
#topNav .dropdown-menu .ent-feature:hover,
#topNav .dropdown-menu .mega-item:hover{ background:#fff; border-radius:8px; }
}
/* Desktop: păstrează mega-menu la hover */
@media (min-width: 992px){
#topNav .dropdown-hover:hover > .dropdown-menu{ display:block; }
}
/* ===== Enterprise (în mega-menu pe mobil) – compact, curat ===== */
@media (max-width: 991.98px){
/* cardul din mega-menu */
#topNav .dropdown-menu .ent-feature{
display:flex;
flex-direction: row !important;
align-items: flex-start;
gap: 12px;
padding: 12px;
margin-bottom: 12px;
background:#fff;
border:1px solid var(--divider);
border-radius: 14px;
box-shadow: none;
transform: none !important;
}
/* imagine mică, pătrată */
#topNav .dropdown-menu .ent-media{
flex: 0 0 68px !important;
width: 68px !important;
height: 68px !important;
border-radius: 12px !important;
overflow: hidden;
}
#topNav .dropdown-menu .ent-media img{
width:100%; height:100%; object-fit:cover;
transform:none !important; /* anulează zoom-ul de hover */
}
/* textul din dreapta */
#topNav .dropdown-menu .ent-body{ min-width:0; }
#topNav .dropdown-menu .ent-title{
margin: 0 0 4px;
font-size: 1rem;
line-height: 1.2;
color: var(--ink);
}
#topNav .dropdown-menu .ent-text{
margin: 0;
font-size: .92rem;
line-height: 1.45;
color: var(--muted);
}
/* chip-urile (meta) – mai mici și pe un singur rând */
#topNav .dropdown-menu .ent-meta{
margin-top: 8px;
gap: 6px;
flex-wrap: wrap;
}
#topNav .dropdown-menu .ent-chip{
padding: .3rem .55rem;
font-size: .78rem;
border-radius: 10px;
background:#f8fafc;
border:1px solid #e6edf6;
}
/* headerul secțiunii din mega-menu */
#topNav .dropdown-menu .mega-section-title,
#topNav .dropdown-menu .border-bottom.bg-body-tertiary h4{
font-size: 1.05rem;
margin: 2px 0 8px;
}
}
/* ===== Services card (mega-menu mobile) — compact & stacked ===== */
@media (max-width: 991.98px){
/* Card container */
#topNav .dropdown-menu .svc-card{
padding: 14px 14px 12px;
border-radius: 14px;
background: #fff;
border: 1px solid #e9edf3;
box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
#topNav .dropdown-menu .svc-card::after{
left: 12px; right: 12px; top: 8px; height: 3px;
opacity: .85;
}
/* Header (icon + badge) */
#topNav .dropdown-menu .svc-card-head{ gap: 10px; margin-bottom: .2rem; }
#topNav .dropdown-menu .svc-badge{
width: 44px; height: 44px; border-radius: 12px; font-size: 1.05rem;
}
#topNav .dropdown-menu .svc-eyebrow{
padding: .22rem .55rem; font-size: .8rem; border-radius: 999px;
}
/* Title & sub */
#topNav .dropdown-menu .svc-title{
margin: .35rem 0 .2rem;
font-size: 1.25rem; line-height: 1.2; letter-spacing: .1px;
}
#topNav .dropdown-menu .svc-sub{
font-size: .95rem; line-height: 1.5; margin: 0 0 .7rem; color: #667085;
}
/* Input + CTA → stacked */
#topNav .dropdown-menu .svc-input-row{
position: relative;
display: flex; flex-direction: column; gap: 8px;
padding: 0; background: transparent; border: 0; box-shadow: none;
}
/* Icon over the input */
#topNav .dropdown-menu .svc-input-row i{
position: absolute; left: 12px; top: 14px;
font-size: 1rem; color: #94a3b8;
background: transparent; border: 0;
}
/* Make the input standalone and full width */
#topNav .dropdown-menu .svc-input-row input{
width: 100%;
padding: .7rem .9rem .7rem 2.2rem; /* room for the icon */
border: 1px solid #e5e7eb; border-radius: 12px;
background: #fff; box-shadow: 0 2px 8px rgba(2,6,23,.04) inset;
font-size: .98rem; color: #0f172a;
}
/* CTA → full width button */
#topNav .dropdown-menu .svc-cta{
width: 100%;
padding: .8rem 1rem;
border-radius: 12px;
box-shadow: 0 10px 22px rgba(216,138,10,.22), inset 0 1px 0 rgba(255,255,255,.6);
font-size: 1rem;
}
/* Footer hints (chips) */
#topNav .dropdown-menu .svc-foot{ gap: .5rem; margin-top: .6rem; }
#topNav .dropdown-menu .svc-hint{
font-size: .9rem; opacity: .9;
}
/* Popular tools (tiles) under the card — smaller */
#topNav .dropdown-menu .svc-section-label{ margin-top: 12px; font-size: .82rem; }
#topNav .dropdown-menu .svc-tile{
padding: 12px; border-radius: 12px; gap: 12px;
}
#topNav .dropdown-menu .svc-tile-icon{ width: 42px; height: 42px; border-radius: 10px; }
#topNav .dropdown-menu .svc-tile-title{ font-size: 1rem; }
#topNav .dropdown-menu .svc-tile-text{ font-size: .92rem; line-height: 1.45; }
#topNav .dropdown-menu .svc-tile .chip{
font-size: .78rem; padding: .26rem .48rem; border-radius: 999px;
}
}
/* Hover lift & shadow pentru cardurile din mega-menú – doar pe pointer fin */
@media (hover:hover) and (pointer:fine){
#topNav .dropdown-menu .opp-left-card:hover,
#topNav .dropdown-menu .opp-mini-card:hover,
#topNav .dropdown-menu .promo-card-lg:hover,
#topNav .dropdown-menu .ent-feature:hover,
#topNav .dropdown-menu .svc-tile:hover,
#topNav .dropdown-menu .mega-item:hover{
background:#fff;
transform:translateY(-4px);
border-color:#e5e7eb;
box-shadow:0 12px 24px rgba(2,6,23,.10), 0 36px 80px rgba(2,6,23,.16);
}
}
/* ===== MOBILE FULLSCREEN OFFCANVAS — fără JS ===== */
@media (max-width: 991.98px){
/* 1) Panoul devine full-screen */
#topNav.navbar{
--nav-h: 60px;
--panel-w: 100vw;
--bg: #fbfbfd;
--card: #ffffff;
--ink: #1f2937;
--muted: #64748b;
--divider: #e9edf3;
}
#topNav .navbar-collapse{
position: fixed;
inset: 0; /* ocupă tot ecranul */
right: -100%;
left: auto;
width: var(--panel-w);
height: 100dvh; /* sigur pe iOS/Android */
background: var(--bg);
border-radius: 0;
box-shadow: none;
transition: right .35s ease;
padding: var(--nav-h) 16px 16px;
overflow-y: auto; /* derulare DOAR în panou */
z-index: 1040;
border: 0;
}
#topNav .navbar-collapse.show{ right: 0; }
/* 2) Blochează scrollul paginii când panoul e deschis (browsere moderne) */
body:has(#topNav .navbar-collapse.show){ overflow: hidden; }
/* 3) Mega-menourile pe mobil: fără limite de înălțime, fără fade/transform */
#topNav .dropdown-menu{
position: static !important;
float: none;
margin: 0;
border: 0;
box-shadow: none;
background: var(--bg);
padding: 0;
max-height: none; /* IMPORTANT: nu mai tăiem conținutul */
opacity: 1;
transform: none !important;
overflow: visible;
}
/* 4) Varianta mega: ocupă toată lățimea panoului și spațiere corectă */
#topNav .dropdown-menu.mega{
width: 100% !important;
left: 0 !important; right: 0 !important; top: auto !important;
padding: 12px 0 !important;
background: #f6f8fb !important; /* sau #fff dacă preferi */
}
/* 5) Carduri/elemente interne — compacte, dar complete vizibile */
#topNav .dropdown-menu .opp-left-card,
#topNav .dropdown-menu .opp-mini-card,
#topNav .dropdown-menu .promo-card-lg,
#topNav .dropdown-menu .ent-feature,
#topNav .dropdown-menu .svc-card,
#topNav .dropdown-menu .svc-tile{
background: var(--card);
border: 1px solid var(--divider);
border-radius: 14px;
margin-bottom: 12px;
}
/* 6) Listă principală: linkuri ca „rânduri” și iconițe aliniate */
#topNav .nav-link{
display:flex; align-items:center; justify-content:space-between;
gap:.75rem; padding:.9rem .25rem;
font-weight:700; color:var(--ink) !important;
border-bottom:1px solid var(--divider);
}
#topNav .nav-item:last-child .nav-link{ border-bottom:0; }
/* 7) Butoanele din dreapta — full width în panou */
#topNav .navbar-collapse .nav-right-clone .btn{
width: 100%;
padding: .9rem 1rem;
font-weight: 800;
border-radius: 14px;
}
/* 8) Mini-thumbs & text în mega — fără tăiere */
#topNav .dropdown-menu img{
width:72px; height:72px; object-fit:cover; border-radius:12px; flex-shrink:0;
}
#topNav .dropdown-menu .row{ --bs-gutter-x: .75rem; }
}
/* ===== DESKTOP: păstrează comportamentul tău la hover ===== */
@media (min-width: 992px){
#topNav .dropdown-hover:hover > .dropdown-menu{ display:block; }
}
/* ===== Fix: toggler corect poziționat și funcțional, doar din CSS ===== */
@media (max-width: 991.98px){
/* (A) Comportament implicit (MENIU ÎNCHIS):
păstrăm poziția ta inițială în header */
#topNav .navbar-toggler{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
border: 0 !important;
box-shadow: none !important;
z-index: 1031; /* deasupra headerului, dar sub panou când se deschide */
padding: 8px; /* hit area mai mare */
}
/* (B) Când MENIUL E DESCHIS:
toggler devine FIX în colțul de sus, deasupra panoului (clickabil) */
#topNav:has(.navbar-collapse.show) .navbar-toggler{
position: fixed;
right: calc(12px + env(safe-area-inset-right));
top: calc(12px + env(safe-area-inset-top));
transform: none;
z-index: 1055; /* > 1040 cât are panoul */
}
/* Spațiu extra sus în panou ca să nu stea sub toggler */
#topNav .navbar-collapse.show{
padding-top: max(72px, calc(56px + env(safe-area-inset-top)));
}
/* Burger → “X” când meniul e deschis (fără JS) */
#topNav .navbar-toggler .navbar-toggler-icon{
width: 28px; height: 22px; position: relative;
background-image: none;
}
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
content:""; position:absolute; left:0; right:0; height:2px; top:50%;
background: #111; transform-origin:center; transition:transform .2s ease, opacity .2s ease;
}
/* linii inițiale (burger) */
#topNav .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-7px) rotate(0deg); /* linia de sus */
}
#topNav .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(5px) rotate(0deg); /* linia de jos */
}
/* în stare DESCHIS → X */
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-50%) rotate(45deg);
}
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(-50%) rotate(-45deg);
}
/* Dacă panoul are backdrop cu ::before, nu bloca togglerul */
#topNav .navbar-collapse.show::before{ z-index: -1; }
}
/* Opțional: dacă headerul e transparent și vrei ca liniile burgerului să fie închise la culoare
și în starea transparentă, păstrează regula ta existentă:
#topNav.navbar-transparent .navbar-toggler{ filter:invert(1); }
*/
@media (max-width: 991.98px){
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
background: white !important; /* negru intens */
}
}
/* ===== MOBILE FULLSCREEN OFFCANVAS — fără JS ===== */
@media (max-width: 991.98px){
/* 1) Panoul devine full-screen */
#topNav.navbar{
--nav-h: 60px;
--panel-w: 100vw;
--bg: #fbfbfd;
--card: #ffffff;
--ink: #1f2937;
--muted: #64748b;
--divider: #e9edf3;
}
#topNav .navbar-collapse{
position: fixed;
inset: 0; /* ocupă tot ecranul */
right: -100%;
left: auto;
width: var(--panel-w);
height: 100dvh; /* sigur pe iOS/Android */
background: var(--bg);
border-radius: 0;
box-shadow: none;
transition: right .35s ease;
padding: var(--nav-h) 16px 16px;
overflow-y: auto; /* derulare DOAR în panou */
z-index: 1040;
border: 0;
}
#topNav .navbar-collapse.show{ right: 0; }
/* 2) Blochează scrollul paginii când panoul e deschis (browsere moderne) */
body:has(#topNav .navbar-collapse.show){ overflow: hidden; }
/* 3) Mega-menourile pe mobil: fără limite de înălțime, fără fade/transform */
#topNav .dropdown-menu{
position: static !important;
float: none;
margin: 0;
border: 0;
box-shadow: none;
background: var(--bg);
padding: 0;
max-height: none; /* IMPORTANT: nu mai tăiem conținutul */
opacity: 1;
transform: none !important;
overflow: visible;
}
/* 4) Varianta mega: ocupă toată lățimea panoului și spațiere corectă */
#topNav .dropdown-menu.mega{
width: 100% !important;
left: 0 !important; right: 0 !important; top: auto !important;
padding: 12px 0 !important;
background: #f6f8fb !important; /* sau #fff dacă preferi */
}
/* 5) Carduri/elemente interne — compacte, dar complete vizibile */
#topNav .dropdown-menu .opp-left-card,
#topNav .dropdown-menu .opp-mini-card,
#topNav .dropdown-menu .promo-card-lg,
#topNav .dropdown-menu .ent-feature,
#topNav .dropdown-menu .svc-card,
#topNav .dropdown-menu .svc-tile{
background: var(--card);
border: 1px solid var(--divider);
border-radius: 14px;
margin-bottom: 12px;
}
/* 6) Listă principală: linkuri ca „rânduri” și iconițe aliniate */
#topNav .nav-link{
display:flex; align-items:center; justify-content:space-between;
gap:.75rem; padding:.9rem .25rem;
font-weight:700; color:var(--ink) !important;
border-bottom:1px solid var(--divider);
}
#topNav .nav-item:last-child .nav-link{ border-bottom:0; }
/* 7) Butoanele din dreapta — full width în panou */
#topNav .navbar-collapse .nav-right-clone .btn{
width: 100%;
padding: .9rem 1rem;
font-weight: 800;
border-radius: 14px;
}
/* 8) Mini-thumbs & text în mega — fără tăiere */
#topNav .dropdown-menu img{
width:72px; height:72px; object-fit:cover; border-radius:12px; flex-shrink:0;
}
#topNav .dropdown-menu .row{ --bs-gutter-x: .75rem; }
}
/* ===== DESKTOP: păstrează comportamentul tău la hover ===== */
@media (min-width: 992px){
#topNav .dropdown-hover:hover > .dropdown-menu{ display:block; }
}
/* ===== Fix: toggler corect poziționat și funcțional, doar din CSS ===== */
@media (max-width: 991.98px){
/* (A) Comportament implicit (MENIU ÎNCHIS):
păstrăm poziția ta inițială în header */
#topNav .navbar-toggler{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
border: 0 !important;
box-shadow: none !important;
z-index: 1031; /* deasupra headerului, dar sub panou când se deschide */
padding: 8px; /* hit area mai mare */
}
/* (B) Când MENIUL E DESCHIS:
toggler devine FIX în colțul de sus, deasupra panoului (clickabil) */
#topNav:has(.navbar-collapse.show) .navbar-toggler{
position: fixed;
right: calc(12px + env(safe-area-inset-right));
top: calc(12px + env(safe-area-inset-top));
transform: none;
z-index: 1055; /* > 1040 cât are panoul */
}
/* Spațiu extra sus în panou ca să nu stea sub toggler */
#topNav .navbar-collapse.show{
padding-top: max(72px, calc(56px + env(safe-area-inset-top)));
}
/* Burger → “X” când meniul e deschis (fără JS) */
#topNav .navbar-toggler .navbar-toggler-icon{
width: 28px; height: 22px; position: relative;
background-image: none;
}
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
content:""; position:absolute; left:0; right:0; height:2px; top:50%;
background: black; transform-origin:center; transition:transform .2s ease, opacity .2s ease;
}
/* linii inițiale (burger) */
#topNav .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-7px) rotate(0deg); /* linia de sus */
}
#topNav .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(5px) rotate(0deg); /* linia de jos */
}
/* în stare DESCHIS → X */
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-50%) rotate(45deg);
}
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(-50%) rotate(-45deg);
}
/* Dacă panoul are backdrop cu ::before, nu bloca togglerul */
#topNav .navbar-collapse.show::before{ z-index: -1; }
}
/* Opțional: dacă headerul e transparent și vrei ca liniile burgerului să fie închise la culoare
și în starea transparentă, păstrează regula ta existentă:
#topNav.navbar-transparent .navbar-toggler{ filter:invert(1); }
*/
@media (max-width: 991.98px){
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
background: black !important; /* negru intens */
}
}
/* ===== Bottom actions în panoul mobil (fără JS) ===== */
@media (max-width: 991.98px){
/* containerul de butoane din panou */
#topNav .navbar-collapse .nav-right-clone{
position: sticky; /* rămâne lipit jos cât derulezi panoul */
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px;
margin-top: 12px;
/* fundal separat + „elevare” */
background:
linear-gradient(to top, rgba(251,251,253,1), rgba(251,251,253,.96) 48%, rgba(251,251,253,.85) 80%, rgba(251,251,253,0));
border-top: 1px solid var(--divider);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1; /* peste conținutul panoului */
}
/* butoanele */
#topNav .navbar-collapse .nav-right-clone .btn{
width: 100%;
padding: .9rem 1rem;
font-weight: 800;
border-radius: 14px;
}
/* spațiu safe-area pe iOS */
#topNav .navbar-collapse .nav-right-clone{
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
/* ascunde acțiunile din dreapta pe mobil (rămân pe desktop) */
#topNav .nav-right{ display: none !important; }
}
/* Desktop: ascunde varianta „clone” */
@media (min-width: 992px){
#topNav .navbar-collapse .nav-right-clone{ display: none !important; }
}
/* === Premium pill-style buttons în panoul mobil === */
@media (max-width: 991.98px){
#topNav .navbar-collapse .nav-right-clone .btn{
border-radius: 999px !important;
padding: .9rem 1.4rem !important;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 800;
font-size: .95rem;
line-height: 1;
transition: transform .15s ease, box-shadow .2s ease, background-color .25s ease, color .25s ease;
}
/* === LOGIN (alb, contur negru) === */
#topNav .navbar-collapse .nav-right-clone .btn.btn-dark{
background: #fff !important;
color: #0f172a !important;
border: 2px solid #0f172a !important;
box-shadow: none !important;
}
#topNav .navbar-collapse .nav-right-clone .btn.btn-dark:hover{
background: #f8fafc !important;
transform: translateY(-1px);
}
/* === REGISTER (negru, text alb) === */
#topNav .navbar-collapse .nav-right-clone .btn.btn-outline-dark{
background: #0f172a !important;
color: #fff !important;
border: 2px solid #0f172a !important;
box-shadow: 0 12px 24px rgba(15,23,42,.25);
}
#topNav .navbar-collapse .nav-right-clone .btn.btn-outline-dark:hover{
filter: brightness(1.1);
transform: translateY(-1px);
}
/* Shadow mic la hover */
#topNav .navbar-collapse .nav-right-clone .btn:active{
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(15,23,42,.15);
}
}
.footer {
background: #1a1d23; /* culoarea închisă ca în poză */
color: #e2e8f0;
font-family: 'Inter', sans-serif;
padding: 60px 20px 30px;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 40px;
}
.footer-logo {
font-size: 1.8rem;
font-weight: 900;
color: #fff;
}
.footer-logo span {
color: #e0a94f; /* accent auriu */
}
.footer-desc {
font-size: 0.95rem;
margin: 16px 0 20px;
color: #cbd5e1;
line-height: 1.6;
}
.footer-col h4 {
font-weight: 700;
margin-bottom: 14px;
color: #cbd5e1;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col ul li a {
color: #e2e8f0;
text-decoration: none;
font-size: 0.92rem;
transition: color .2s;
}
.footer-col ul li a:hover {
color: #e0a94f;
}
.footer-social {
display: flex;
gap: 14px;
font-size: 1.4rem;
}
.footer-social a {
color: #cfd6e0;
font-size: 1.6rem;
transition: all 0.3s ease;
}
.footer-social a:hover {
color: white; /* galbenul tău */
transform: scale(1.25); /* mărește iconul */
text-shadow: 0 0 8px rgba(224,169,79,0.7),
0 0 15px rgba(224,169,79,0.6);
}
.footer-lang {
margin-top: 18px;
font-size: 0.9rem;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 6px;
}
.footer-lang span {
font-size: 0.75rem;
}
.footer-bottom {
text-align: center;
margin-top: 40px;
font-size: 0.85rem;
color: #94a3b8;
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 20px;
}
/* ===== FOOTER LOGO POSITION & SIZE ===== */
.footer-logo {
display: flex;
align-items: center;
justify-content: flex-start; /* logo la stânga */
margin-bottom: 1.2rem;
margin-left: 0; /* aliniat perfect cu textul din stânga */
}
/* imaginea logo */
.footer-logo-img {
height: 58px; /* mai mare (ajustabil între 54–64px) */
width: auto;
object-fit: contain;
filter: brightness(1.2); /* mai clar pe fundalul închis */
opacity: 0.95;
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* mic efect premium la hover */
.footer-logo-img:hover {
transform: scale(1.05);
opacity: 1;
}
* ===== Typography override: elegant sans (NOT Inter) ===== */
:root{
--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Setează fontul pe tot site-ul (texte + UI) */
html, body,
button, input, select, textarea,
.hero, .how-clean, .kv-section, .faq-wrap, .tstX-wrap, .footer,
.navbar, .dropdown-menu {
font-family: var(--font-sans) !important;
}
/* ——— Headline style (H1/H2 mari) ——— */
/* Titlul de sus + titlul de jos identice */
.how-head .how-title,
.kv-section .kv-head .kv-title{
font-family: var(--font-sans) !important;
font-weight: 800 !important; /* 900 dacă îl vrei și mai masiv */
letter-spacing: -0.015em !important; /* ușor compact, look modern */
line-height: 1.06 !important;
font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.1rem) !important; /* exact ca „How does…” */
margin: 0 0 .35rem !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Subtitluri subțiri/fluide (păstrează aspectul elegant) */
.how-head .how-sub,
.kv-section .kv-sub,
.faq-head p,
.tstX-head p{
font-family: var(--font-sans) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
/* Micro headere din carduri / liste (consistente) */
.how-h,
.kv-item h5,
.promo h6,
.pc-title,
.inv-mini-title,
.svc-title,
.ent-title,
.faq-q{
font-family: var(--font-sans) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Butoane/CTA (shape rămâne, doar tipografia) */
.how-cta,
.kv-cta,
.btn, .svc-cta, .svc-quick-link{
font-family: var(--font-sans) !important;
font-weight: 800 !important;
letter-spacing: .01em !important;
}
/* Brand + iteme din nav să nu rămână pe vechiul font */
.navbar-brand,
.nav-link,
.mega-heading,
.mega-item{
font-family: var(--font-sans) !important;
}
/* ====== Valuation Wizard – polished light style ====== */
:root{
--vw-ink:#0f172a;
--vw-muted:#6b7280;
--vw-line:rgba(15,23,42,.08);
--vw-soft:#fbfcfd;
--vw-card:#ffffff;
--vw-cream:#fcf7f2;
--vw-accent:#f5ab2a;
--vw-accent-ink:#111827;
--vw-focus:0 0 0 4px rgba(245,158,11,.22);
--vw-shadow:0 16px 40px rgba(2,6,23,.06), 0 50px 120px rgba(2,6,23,.05);
--vw-radius:18px;
--vw-radius-lg:22px;
}
/* container spacing (se potrivește cu restul site-ului) */
.val-wizard.container{
padding-top: clamp(1.2rem, 1.2vw + .8rem, 2.2rem);
padding-bottom: clamp(1.2rem, 1.2vw + .8rem, 2.2rem);
}
/* ===== Head ===== */
.vw-head{
text-align:center;
margin: 0 auto 1.2rem;
max-width: 64rem;
}
.vw-title{
font-weight:900;
letter-spacing:-.015em;
line-height:1.06;
font-size:clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
color:var(--vw-ink);
margin:.45rem 0 .25rem;
}
.vw-sub{
color:var(--vw-muted);
margin:0 0 1rem;
font-weight:600;
}
/* stepper (pills + line) */
/* ===== Premium Stepper Overrides (glass + gold + motion) ===== */
.vw-pillbar{
display:flex; align-items:center; justify-content:center; gap:14px;
margin-bottom:.6rem;
perspective: 900px;
}
/* pills */
.vw-pill{
appearance:none; cursor:pointer;
display:flex; align-items:center; gap:.6rem;
background:rgba(255,255,255,.9);
border:1px solid rgba(15,23,42,.08);
border-radius:999px;
padding:.55rem 1rem;
box-shadow:0 12px 30px rgba(2,6,23,.07), 0 1px 0 rgba(255,255,255,.7) inset;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
transform-style: preserve-3d;
transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
position:relative; isolation:isolate;
}
/* halo */
.vw-pill::before{
content:"";
position:absolute; inset:-2px; border-radius:999px;
background: radial-gradient(60% 120% at 20% 0%, rgba(245,171,42,.22), transparent 60%);
opacity:0; transition:opacity .25s ease; z-index:-1;
}
/* number badge */
.vw-pill span{
width:36px; height:36px; display:grid; place-items:center;
border-radius:999px; font-weight:900; color:#0f172a;
border:1px solid rgba(15,23,42,.08);
background:#fff;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
transition: transform .22s ease;
}
/* label */
.vw-pill small{ font-weight:800; color:#6b7280; letter-spacing:.01em; }
/* hover */
.vw-pill:hover{
transform: translateY(-3px) scale(1.02) rotateX(4deg);
box-shadow:0 16px 40px rgba(2,6,23,.10), 0 60px 140px rgba(2,6,23,.10);
border-color: rgba(15,23,42,.12);
}
.vw-pill:hover::before{ opacity:.9; }
.vw-pill:hover span{ transform: translateZ(12px); }
/* active */
.vw-pill.is-active{
background:
linear-gradient(180deg, #ffe9bf, #fff3d4) padding-box,
linear-gradient(180deg, #f5ab2a, #d88a0a) border-box;
border:1px solid transparent;
}
.vw-pill.is-active span{
border-color: transparent;
background: linear-gradient(180deg, #f5ab2a, #d88a0a);
color:#111827;
}
.vw-pill.is-active small{ color:#374151; }
/* shimmer on active */
.vw-pill.is-active::after{
content:"";
position:absolute; inset:0; border-radius:999px;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
transform: translateX(-120%);
animation: vw-shimmer 2.2s ease-in-out infinite;
mix-blend-mode: soft-light;
}
@keyframes vw-shimmer{
0% { transform: translateX(-120%); }
60%{ transform: translateX(120%); }
100%{ transform: translateX(120%); }
}
/* completed */
.vw-pill.is-complete{
background:#fff;
border:1px solid #f2d299;
box-shadow:0 12px 26px rgba(249,200,115,.22), 0 1px 0 rgba(255,255,255,.8) inset;
}
.vw-pill.is-complete span{
background:#fff;
border-color:#f2d299;
}
/* connector line */
.vw-line{
width:44px; height:3px; border-radius:999px;
background:linear-gradient(90deg,#e9eef5,#f1f5f9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
transition: background .25s ease, height .25s ease, box-shadow .25s ease;
}
.vw-pill.is-complete + .vw-line,
.vw-pill.is-active + .vw-line{
background:linear-gradient(90deg,#f5ab2a,#ffd27a);
height:4px;
box-shadow:0 4px 12px rgba(245,171,42,.35);
}
/* optional micro-pulse when treci pe Next */
@keyframes vw-pulse {
0%{transform:translateY(0) scale(1)}
50%{transform:translateY(-2px) scale(1.02)}
100%{transform:translateY(0) scale(1)}
}
.pulse{ animation: vw-pulse .42s ease; }
/* ===== Pane (card) ===== */
.vw-pane{
display:none;
border-radius: var(--vw-radius-lg);
background:
radial-gradient(1200px 480px at -10% -30%, rgba(255,255,255,.9), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.9)),
repeating-linear-gradient(0deg, transparent 0 18px, rgba(17,24,39,.02) 18px 19px);
border: 1px solid rgba(230,235,245,.9);
padding: clamp(1rem, 1.2vw + .8rem, 1.5rem);
box-shadow: var(--vw-shadow);
animation: vw-enter .22s ease;
}
.vw-pane.is-current{ display:block; }
.vw-pane-title{
margin:0 0 .9rem;
font-weight:900; color:var(--vw-ink);
font-size:1.18rem; letter-spacing:.01em;
}
/* grid layout */
.vw-grid{
display:grid; gap:14px; grid-template-columns:1fr;
}
@media(min-width: 820px){
.vw-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.vw-grid--sm{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
/* fields */
.vw-field{ display:flex; flex-direction:column; }
.vw-field label{ font-weight:900; color:var(--vw-ink); margin-bottom:.38rem; }
.vw-field label span{ color:#ef4444; }
.vw-label{ font-weight:900; color:var(--vw-ink); margin-bottom:.3rem; }
.vw-help{
color:#93a1b5; font-weight:600; margin-top:.3rem; font-size:.875rem;
}
/* form controls */
.vw-field input,
.vw-field select,
.vw-field textarea{
border:1px solid var(--vw-line);
border-radius:14px;
padding:.85rem 1rem;
background:#fff; color:var(--vw-ink);
font-weight:700;
outline:0;
transition: border-color .15s, box-shadow .15s, transform .04s;
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.vw-field input::placeholder,
.vw-field textarea::placeholder{ color:#9aa3b2; font-weight:600; }
.vw-field input:focus,
.vw-field select:focus,
.vw-field textarea:focus{
border-color:#e7c27a;
box-shadow: var(--vw-focus);
}
.vw-field select{
appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%),
linear-gradient(to right, #fff, #fff);
background-position:
calc(100% - 18px) calc(50% - 4px),
calc(100% - 12px) calc(50% - 4px),
100% 0;
background-size: 6px 6px, 6px 6px, 2.5rem 100%;
background-repeat: no-repeat;
}
/* radios */
.vw-radios{ display:flex; gap:14px; flex-wrap:wrap; }
.vw-radios label{ font-weight:800; color:var(--vw-ink); }
.vw-radios input{ margin-right:.35rem; }
/* buttons */
.vw-cta{
display:flex; gap:.6rem; justify-content:flex-end; margin-top:16px;
}
.btn-amber{
appearance:none; border:0; border-radius:999px; padding:.95rem 1.35rem;
font-weight:1000; letter-spacing:.01em;
color:var(--vw-accent-ink); background:linear-gradient(180deg,var(--vw-accent),#d88a0a);
box-shadow:0 16px 28px rgba(216,138,10,.25), inset 0 1px 0 rgba(255,255,255,.65);
cursor:pointer; transition: transform .12s, filter .12s, box-shadow .12s;
}
.btn-amber:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn-soft{
appearance:none; border:1px solid var(--vw-line); background:#fff; color:var(--vw-ink);
border-radius:999px; padding:.95rem 1.15rem; font-weight:900;
}
/* progress animation */
@keyframes vw-enter { from {opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }
/* subtle empty-state for selects fără opțiuni */
select.is-empty{
background-image:none;
color:#9aa3b2;
}
/* ===== Decorative headline line + dot ===== */
/* ===== Title divider (exact look) ===== */
/* ===== Elegant golden divider ===== */
/* ====== Valuation Wizard – polished + elegant premium ====== */
:root{
--vw-ink:#0f172a;
--vw-muted:#6b7280;
--vw-line:rgba(15,23,42,.08);
--vw-soft:#fbfcfd;
--vw-card:#ffffff;
--vw-cream:#fcf7f2;
--vw-accent:#f5ab2a;
--vw-accent-ink:#111827;
--vw-focus:0 0 0 4px rgba(245,158,11,.22);
--vw-shadow:0 14px 36px rgba(2,6,23,.05), 0 46px 110px rgba(2,6,23,.05);
--vw-radius:18px;
--vw-radius-lg:22px;
/* premium gold system */
--gold:#d4af37;
--gold-soft:#f5d77a;
--ivory:#fdfcf8;
}
/* container spacing */
.val-wizard.container{
padding-top: clamp(1.2rem, 1.2vw + .8rem, 2.2rem);
padding-bottom: clamp(1.2rem, 1.2vw + .8rem, 2.2rem);
}
/* ===== Head ===== */
.vw-head{
text-align:center;
margin: 0 auto 1.2rem;
max-width: 64rem;
}
.vw-title{
font-weight:900;
letter-spacing:-.015em;
line-height:1.06;
font-size:clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
color:var(--vw-ink);
margin:.45rem 0 .25rem;
}
.vw-sub{
color:var(--vw-muted);
margin:0 0 .2rem;
font-weight:600;
}
/* ===== Elegant golden divider (cerc + linii) ===== */
.vw-head .vw-divider{
position: relative;
width: 26px; height: 26px;
margin: 12px auto 18px;
border-radius: 50%;
background:#fff;
border: 2px solid var(--gold);
box-shadow:0 2px 6px rgba(212,175,55,.22);
z-index:1;
}
.vw-head .vw-divider span{
position:absolute; inset:0; margin:auto;
width:10px; height:10px; border-radius:50%;
background: linear-gradient(180deg,var(--gold-soft),var(--gold));
box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
top:50%; left:50%; transform:translate(-50%,-50%);
}
.vw-head .vw-divider::before,
.vw-head .vw-divider::after{
content:""; position:absolute; top:50%; transform:translateY(-50%);
height:2px; width: clamp(120px, 30vw, 480px);
background: linear-gradient(90deg,#fff8e1,var(--gold-soft),#fff8e1);
z-index:-1;
}
.vw-head .vw-divider::before{ right:100%; margin-right:14px; }
.vw-head .vw-divider::after{ left:100%; margin-left:14px; }
/* ===== Premium Stepper (glass + gold + motion) ===== */
.vw-pillbar{
display:flex; align-items:center; justify-content:center; gap:14px;
margin-bottom:.6rem; perspective: 900px;
}
.vw-pill{
appearance:none; cursor:pointer;
display:flex; align-items:center; gap:.6rem;
background:rgba(255,255,255,.9);
border:1px solid rgba(15,23,42,.08);
border-radius:999px; padding:.55rem 1rem;
box-shadow:0 12px 30px rgba(2,6,23,.07), 0 1px 0 rgba(255,255,255,.7) inset;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
transform-style: preserve-3d;
transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
position:relative; isolation:isolate;
}
.vw-pill::before{
content:""; position:absolute; inset:-2px; border-radius:999px;
background: radial-gradient(60% 120% at 20% 0%, rgba(245,171,42,.22), transparent 60%);
opacity:0; transition:opacity .25s ease; z-index:-1;
}
.vw-pill span{
width:36px; height:36px; display:grid; place-items:center;
border-radius:999px; font-weight:900; color:#0f172a;
border:1px solid rgba(15,23,42,.08); background:#fff;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
transition: transform .22s ease;
}
.vw-pill small{ font-weight:800; color:#6b7280; letter-spacing:.01em; }
.vw-pill:hover{ transform: translateY(-3px) scale(1.02) rotateX(4deg);
box-shadow:0 16px 40px rgba(2,6,23,.10), 0 60px 140px rgba(2,6,23,.10);
border-color: rgba(15,23,42,.12);
}
.vw-pill:hover::before{ opacity:.9; }
.vw-pill:hover span{ transform: translateZ(12px); }
.vw-pill.is-active{
background:
linear-gradient(180deg, #ffe9bf, #fff3d4) padding-box,
linear-gradient(180deg, #f5ab2a, #d88a0a) border-box;
border:1px solid transparent;
}
.vw-pill.is-active span{
border-color: transparent; background: linear-gradient(180deg, #f5ab2a, #d88a0a); color:#111827;
}
.vw-pill.is-active small{ color:#374151; }
.vw-pill.is-active::after{
content:""; position:absolute; inset:0; border-radius:999px;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
transform: translateX(-120%); animation: vw-shimmer 2.2s ease-in-out infinite; mix-blend-mode: soft-light;
}
@keyframes vw-shimmer{ 0%{transform:translateX(-120%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }
.vw-pill.is-complete{
background:#fff; border:1px solid #f2d299;
box-shadow:0 12px 26px rgba(249,200,115,.22), 0 1px 0 rgba(255,255,255,.8) inset;
}
.vw-pill.is-complete span{ background:#fff; border-color:#f2d299; }
.vw-line{
width:44px; height:3px; border-radius:999px;
background:linear-gradient(90deg,#e9eef5,#f1f5f9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
transition: background .25s ease, height .25s ease, box-shadow .25s ease;
}
.vw-pill.is-complete + .vw-line,
.vw-pill.is-active + .vw-line{
background:linear-gradient(90deg,#f5ab2a,#ffd27a);
height:4px; box-shadow:0 4px 12px rgba(245,171,42,.35);
}
@keyframes vw-pulse{ 0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.02)} 100%{transform:translateY(0) scale(1)} }
.pulse{ animation: vw-pulse .42s ease; }
/* ===== Pane (card) – warm ivory + hairline gold ===== */
/* ===== Pane (card) – elegant, fără linia sus ===== */
.vw-pane{
display:none;
position:relative;
border-radius: var(--vw-radius-lg);
background:
radial-gradient(900px 480px at 10% -12%, rgba(245,215,122,.05), transparent 70%),
radial-gradient(900px 480px at 90% -12%, rgba(245,215,122,.05), transparent 70%),
linear-gradient(180deg,#ffffff 0%, #fdfcf8 100%);
border: 1px solid rgba(226,232,240,.9);
padding: clamp(1.1rem, 1.2vw + .9rem, 1.6rem);
box-shadow: 0 8px 22px rgba(2,6,23,.05), 0 36px 90px rgba(2,6,23,.06);
animation: vw-enter .22s ease;
}
/* scoate firul/linia de sus, indiferent ce a fost definit anterior */
.vw-pane::before{ content:none !important; }
.vw-pane.is-current{ display:block; }
.vw-pane-title{
margin:0 0 .9rem;
font-weight:900; color:var(--vw-ink);
font-size:1.18rem; letter-spacing:-.01em;
}
/* ===== Grid ===== */
.vw-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width: 820px){ .vw-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.vw-grid--sm{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
/* ===== Labels & help ===== */
/* ===== Labels premium pentru formular ===== */
.vw-field label {
font-size: 1.05rem; /* puțin mai mare */
font-weight: 900;
color: #0f172a;
letter-spacing: 0.02em;
margin-bottom: .45rem;
position: relative;
padding-left: 0.6rem; /* loc pentru bara aurie */
}
/* mic accent auriu la stânga fiecărui label */
/* pentru câmpuri obligatorii (cu *) să păstrăm și roșu */
.vw-field label span {
color: #d97706; /* portocaliu-auriu mai fin decât roșu crud */
font-size: .9rem;
margin-left: .25rem;
}
.vw-label{ font-weight:900; color:var(--vw-ink); margin-bottom:.3rem; }
.vw-help{ color:#93a1b5; font-weight:600; margin-top:.32rem; font-size:.875rem; }
/* ===== Controls – hover mai puternic + glow premium ===== */
.vw-field input,
.vw-field select,
.vw-field textarea{
border:1px solid rgba(15,23,42,.10);
border-radius:14px;
padding:.9rem 1rem;
background:#fff;
color:var(--vw-ink);
font-weight:700;
outline:0;
transition: border-color .18s, box-shadow .18s, background .18s, transform .05s;
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.vw-field input::placeholder,
.vw-field textarea::placeholder{ color:#9aa3b2; font-weight:700; opacity:.9; }
/* hover: contur mai vizibil + subtil lift */
.vw-field input:hover,
.vw-field select:hover,
.vw-field textarea:hover{
border-color:#cbd5e1;
background:#fffefe;
box-shadow:0 6px 18px rgba(2,6,23,.06);
transform:translateY(-1px);
}
/* focus: auriu + glow clar */
.vw-field input:focus,
.vw-field select:focus,
.vw-field textarea:focus{
border-color:#d4af37;
box-shadow:
0 0 0 3px rgba(212,175,55,.22),
0 10px 26px rgba(212,175,55,.18);
background:#fffcf4;
}
/* ===== Select – păstrăm săgeata nativă stilizată ===== */
.vw-field select{
appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%),
linear-gradient(to right, #fff, #fff);
background-position:
calc(100% - 18px) calc(50% - 4px),
calc(100% - 12px) calc(50% - 4px),
100% 0;
background-size: 6px 6px, 6px 6px, 2.5rem 100%;
background-repeat: no-repeat;
}
/* ===== Radios ===== */
.vw-radios{ display:flex; gap:14px; flex-wrap:wrap; }
.vw-radios label{ font-weight:800; color:var(--vw-ink); }
.vw-radios input{ margin-right:.35rem; }
/* ===== CTA ===== */
.vw-cta{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:16px; }
.btn-amber{
appearance:none; border:0; border-radius:14px; padding:.9rem 1.3rem;
font-weight:900; letter-spacing:.01em; color:var(--vw-accent-ink);
background:linear-gradient(180deg,#f5d77a,#d4af37);
box-shadow:0 14px 26px rgba(212,175,55,.32), inset 0 1px 0 rgba(255,255,255,.65);
cursor:pointer; transition: transform .15s, filter .15s, box-shadow .15s;
}
.btn-amber:hover{
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow:0 18px 34px rgba(212,175,55,.42), inset 0 1px 0 rgba(255,255,255,.75);
}
.btn-soft{
appearance:none; border:1px solid rgba(15,23,42,.10); background:#fff; color:var(--vw-ink);
border-radius:14px; padding:.9rem 1.15rem; font-weight:900;
}
/* ===== Motion ===== */
@keyframes vw-enter { from {opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }
/* ===== Select fără opțiuni ===== */
select.is-empty{ background-image:none; color:#9aa3b2; }
/* =================================================================
ICONIȚE AURII ÎN CÂMPURI (fără HTML nou) — doar pentru PASUL 1
Province, Municipality, Street, Postcode, Address nr., Floor nr.
================================================================= */
/* padding pentru icon */
#province, #municipality, #street, #postcode, #addressNr, #floorNr{ padding-left:48px; background-repeat:no-repeat; background-position:16px 50%; background-size:18px auto; }
/* province – pin */
#province{
background-image:url("data:image/svg+xml;utf8,"),
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%),
linear-gradient(to right, #fff, #fff);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
background-size:18px auto, 6px 6px, 6px 6px, 2.5rem 100%;
background-position:16px 50%, calc(100% - 18px) calc(50% - 4px), calc(100% - 12px) calc(50% - 4px), 100% 0;
}
/* municipality – clădiri */
#municipality{
background-image:url("data:image/svg+xml;utf8,"),
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%),
linear-gradient(to right, #fff, #fff);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
background-size:18px auto, 6px 6px, 6px 6px, 2.5rem 100%;
background-position:16px 50%, calc(100% - 18px) calc(50% - 4px), calc(100% - 12px) calc(50% - 4px), 100% 0;
}
/* street – drum */
#street{
background-image:url("data:image/svg+xml;utf8,");
}
/* postcode – poștă */
#postcode{
background-image:url("data:image/svg+xml;utf8,");
}
/* address nr – # */
#addressNr{
background-image:url("data:image/svg+xml;utf8;");
}
/* floor nr – elevator up */
#floorNr{
background-image:url("data:image/svg+xml;utf8,");
}
/* ================= Premium radios (no HTML changes) ================= */
/* containerul tău existent */
.vw-radios{
display:flex;
gap:18px;
flex-wrap:wrap;
align-items:center;
}
/* label-ul devine un mic „chip” foarte discret */
.vw-radios label{
position:relative;
display:inline-flex;
align-items:center;
gap:.45rem;
padding:.35rem .65rem .35rem 34px; /* loc pentru cercul custom */
border-radius:12px;
background:#fff;
border:1px solid rgba(15,23,42,.08);
font-weight:800;
color:#0f172a;
cursor:pointer;
transition: border-color .18s, box-shadow .18s, background .18s, transform .12s, color .18s;
user-select:none;
}
/* ascunde radio nativ dar păstrează accesibilitatea */
.vw-radios label > input[type="radio"]{
position:absolute; inset:0; width:100%; height:100%;
opacity:0; margin:0; cursor:pointer;
}
/* cercul exterior (neutru) */
.vw-radios label::before{
content:"";
position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:18px; height:18px; border-radius:50%;
background:#fff;
border:2px solid #cbd5e1;
box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
transition:border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
/* punctul interior (auriu, animat) */
.vw-radios label::after{
content:"";
position:absolute; left:14px; top:50%; transform:translateY(-50%) scale(0);
width:10px; height:10px; border-radius:50%;
background: linear-gradient(180deg,#f5d77a,#d4af37);
box-shadow:0 2px 6px rgba(212,175,55,.35);
transition: transform .18s ease;
}
/* hover: chip ușor ridicat + inel mai vizibil */
.vw-radios label:hover{
border-color:#cbd5e1;
background:#fffefe;
box-shadow:0 8px 18px rgba(2,6,23,.06);
transform: translateY(-1px);
}
.vw-radios label:hover::before{
border-color:#bfc9d7;
}
/* checked (folosim :has – nu schimbă HTML) */
.vw-radios label:has(input[type="radio"]:checked){
border-color:#d4af37;
background:linear-gradient(180deg,#fffdf3,#ffffff);
box-shadow:0 0 0 3px rgba(212,175,55,.16), 0 10px 22px rgba(212,175,55,.14);
color:#0b1220;
}
.vw-radios label:has(input[type="radio"]:checked)::before{
border-color:#d4af37;
box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.vw-radios label:has(input[type="radio"]:checked)::after{
transform:translateY(-50%) scale(1);
}
/* focus accesibil (keyboard) */
.vw-radios label:has(input[type="radio"]:focus-visible){
outline:none;
box-shadow:0 0 0 3px rgba(212,175,55,.22), 0 10px 22px rgba(2,6,23,.08);
}
/* disabled (dacă vei avea) */
.vw-radios label:has(input[type="radio"]:disabled){
opacity:.6; cursor:not-allowed;
background:#fafafa; border-color:#e5e7eb;
box-shadow:none; transform:none;
}
/* opțional: nu vrei „chip”? scoate conturul și păstrează doar cercul premium */
/*
.vw-radios label{ background:transparent; border-color:transparent; box-shadow:none; padding-left:34px; }
.vw-radios label:hover{ transform:none; box-shadow:none; }
*/
/* ===== Premium Section Titles (Ubicación / Características / Contacto) ===== */
/* Comun pentru toate legendele din fieldset-uri (titlurile de secțiune) */
.vw-pane-title{
position: relative;
display: inline-flex;
align-items: center;
gap:.55rem;
font-weight: 900;
letter-spacing: .005em;
color: #0f172a;
/* puțin mai mare decât înainte, dar controlat responsiv */
font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.55rem);
margin: .2rem 0 .95rem;
padding-bottom: .65rem;
-webkit-font-smoothing: antialiased;
}
/* linie aurie sub titlu + medalion central (într-un singur pseudo-element) */
/* STEP 1 – pin (Ubicación) */
.vw-pane[data-step="1"] .vw-pane-title::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
/* STEP 2 – plan / grid (Características) */
.vw-pane[data-step="2"] .vw-pane-title::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
/* STEP 3 – mail (Contacto) */
.vw-pane[data-step="3"] .vw-pane-title::before{
background-image:url("data:image/svg+xml;utf8,\
");
}
/* micro-animație când intră în viewport (odată cu .vw-pane) */
.vw-pane.is-current .vw-pane-title{
animation: title-pop .35s ease-out both;
}
@keyframes title-pop{
from{ opacity:0; transform: translateY(6px) scale(.98); }
to { opacity:1; transform: translateY(0) scale(1); }
}
/* opțional: la hover pe titlu, un shimmer discret pe medalionul de sub linie */
.vw-pane-title:hover::after{
filter: drop-shadow(0 3px 8px rgba(212,175,55,.35));
}
/* ===== Selector limba ===== */
.footer-lang{ position:relative; display:inline-block; }
.lang-btn{
display:inline-flex; align-items:center; gap:.5rem;
background:#1f2937; color:#e5e7eb; border:1px solid #374151;
padding:.5rem .75rem; border-radius:999px; cursor:pointer;
}
.lang-btn .caret{ opacity:.8; font-size:.8rem; }
.lang-list{
position:absolute; inset:auto 0 auto 0; min-width:180px; margin-top:.5rem;
background:#111827; color:#e5e7eb; border:1px solid #374151; border-radius:.75rem;
padding:.25rem; list-style:none; display:none; z-index:50;
box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.lang-list.show{ display:block; }
.lang-list li{
padding:.55rem .75rem; border-radius:.5rem; cursor:pointer;
}
.lang-list li[aria-selected="true"]{ background:#1f2937; }
.lang-list li:hover{ background:#374151; }
/* ===== MINIMAL PREMIUM (vx-*) ===== */
.vx-wizard{
--ink:#0f172a;
--muted:#6b7280;
--line:#0f172a33;
--line-strong:#0f172a55;
--focus:#0f172a;
--radius:0;
color:var(--ink);
background:#ffffff;
padding:clamp(36px,6vw,64px) 0;
}
/* Head */
.vx-head{ text-align:center; max-width:1100px; margin:0 auto 18px; }
.vx-title{ font-weight:900; letter-spacing:-.01em; font-size:clamp(28px,4vw,36px); margin:.2rem 0; }
.vx-sub{ color:var(--muted); font-size:clamp(14px,1.8vw,16px); margin:.25rem 0 .75rem; }
.vx-divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); width:min(860px,92vw); margin:14px auto 0; }
/* Pills (subtle) */
.vx-pillbar{ display:flex; justify-content:center; align-items:center; gap:.6rem; margin-bottom:14px; flex-wrap:wrap; }
.vx-pill{ display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--line); background:#fff; color:#0f172a; padding:.35rem .7rem; border-radius:999px; font-weight:800; letter-spacing:.02em; transition:.2s transform,.2s box-shadow; }
.vx-pill span{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%; font-size:.9rem; background:#0f172a; color:#fff; font-weight:900; }
.vx-pill small{ color:#64748b; font-weight:800; }
.vx-pill.is-active, .vx-pill:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.06); }
.vx-line{ width:22px; height:2px; background:var(--line-strong); border-radius:2px; }
/* Panes: NO CARD BACKGROUND */
.vx-pane{ display:none; max-width:min(1120px,92vw); margin:0 auto; padding:4px 0; }
.vx-pane.is-current{ display:block; }
.vx-pane-title{ position:absolute; left:-9999px; }
/* Grid & spacing */
.vx-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin:0 0 28px; }
.vx-grid--sm{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 860px){ .vx-grid, .vx-grid--sm{ grid-template-columns:1fr; } }
/* Fields — big outline boxes, uppercase placeholder like screenshot */
.vx-field{ position:relative; }
.vx-field input[type="text"],
.vx-field input[type="number"],
.vx-field input[type="email"],
.vx-field input[type="tel"],
.vx-field textarea,
.vx-select select{
width:100%;
background:#fff;
border:1px solid #11182755;
border-radius:0;
padding:28px 22px;
height:96px;
font-size:20px;
line-height:1;
color:#0f172a;
letter-spacing:.01em;
outline:none;
transition:border .15s, box-shadow .15s, background .15s;
text-transform:none;
}
.vx-field textarea{ height:auto; min-height:140px; padding:18px 22px; }
/* Placeholders in caps */
.vx-field ::placeholder{ color:#6b7280; text-transform:uppercase; font-weight:800; letter-spacing:.02em; }
/* Focus */
.vx-field input:focus,
.vx-field textarea:focus,
.vx-select:has(select:focus){
border-color:#0f172a;
box-shadow:0 0 0 3px rgba(15,23,42,.08);
}
/* Select + caret */
.vx-select{ position:relative; }
.vx-select select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:46px; }
.vx-caret{
position:absolute; right:18px; top:50%; translate:0 -50%; width:18px; height:18px; pointer-events:none; opacity:.7;
background:
linear-gradient(225deg, transparent 48%, #0f172a 50%) left center/8px 8px no-repeat,
linear-gradient(135deg, transparent 48%, #0f172a 50%) right center/8px 8px no-repeat;
}
/* Phone split */
.vx-phone-row{ display:flex; gap:14px; }
.vx-dial select{ min-width:130px; }
/* Radios: flat outlined chips */
.vx-label{ font-weight:900; font-size:14px; letter-spacing:.03em; color:#111827; margin-bottom:8px; }
.vx-radios{ display:flex; gap:12px; flex-wrap:wrap; }
.vx-radio{ display:inline-flex; align-items:center; gap:10px; padding:16px 18px; border:1px solid #11182755; border-radius:0; cursor:pointer; user-select:none; }
.vx-radio input{ appearance:none; width:18px; height:18px; border:2px solid #111827; border-radius:50%; display:inline-block; background:#fff; }
.vx-radio input:checked{ background:radial-gradient(#111827 50%, transparent 52%); }
.vx-radio span{ font-weight:900; letter-spacing:.03em; }
/* Help text */
.vx-help{ color:#6b7280; font-size:13px; margin-top:8px; display:block; }
/* Buttons */
.vx-cta{ display:flex; justify-content:flex-start; gap:14px; margin-top:4px; }
.vx-btn{
border:1.5px solid #0f172a; background:#0f172a; color:#fff;
padding:16px 28px; border-radius:999px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
transition:.2s transform,.2s box-shadow,.2s background,.2s color;
}
.vx-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 22px rgba(15,23,42,.12); }
.vx-soft{ background:#fff; color:#0f172a; }
.vx-outline{ background:#fff; color:#0f172a; }
/* Reveal on scroll */
[vx-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
[vx-reveal].is-visible{ opacity:1; transform:translateY(0); }
/* Accessibility invalid */
.vx-field input:invalid[aria-invalid="true"],
.vx-field select:invalid[aria-invalid="true"],
.vx-field textarea:invalid[aria-invalid="true"]{
border-color:#ef4444;
box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
/* Hide visual labels to mimic screenshot but keep for a11y */
.vx-visually-hidden{
position:absolute !important;
height:1px; width:1px; overflow:hidden;
clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
/* ================= PREMIUM OUTLINE PILL STYLE ================= */
.vx-pillbar{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 24px;
}
.vx-line{
width: 40px;
height: 1.5px;
background: var(--line, #0f172a33);
border-radius: 2px;
}
/* pastilă: ovală, doar contur */
.vx-pill{
background: transparent;
border: 1.6px solid #0f172a;
color: #0f172a;
border-radius: 999px;
padding: 0.6rem 1.6rem;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-transform: uppercase;
transition: all 0.2s ease;
box-shadow: none;
}
/* cercul numerotat dispare – doar text centrat ca în butoane */
.vx-pill span{
display: none;
}
/* eticheta pastilei */
.vx-pill small{
color: inherit;
font-weight: 800;
font-size: 0.95rem;
}
/* hover elegant */
.vx-pill:hover{
background: #0f172a;
color: #fff;
transform: translateY(-1px);
}
/* pastila activă */
.vx-pill.is-active{
background: #0f172a;
color: #fff;
}
/* eliminăm umbră, păstrăm tranziție */
.vx-pill, .vx-pill.is-active, .vx-pill:hover{
box-shadow: none;
}
/* linia dintre pași */
.vx-line{
background: #0f172a33;
}
/* ============ Responsive ============ */
@media (max-width: 640px){
.vx-pillbar{
flex-direction: column;
gap: 0.7rem;
}
.vx-line{ display: none; }
.vx-pill{
width: 100%;
max-width: 300px;
justify-content: center;
padding: 0.7rem 0;
}
}
/* ===== Listings Hero ===== */
:root{
--ink:#0f172a;
--muted:#6b7280;
--cream:#fcf7f2;
--line:#e5e7eb;
--card:#ffffff;
--shadow1:0 10px 30px rgba(16,24,40,.08);
--shadow2:0 12px 26px rgba(2,6,23,.12);
--r:18px;
}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);}
/* ====== HERO ca în screenshot (stânga crem, dreapta imagine) ====== */
.ali-hero{
position:relative;
border-bottom:1px solid #eef2f6;
overflow:hidden;
}
.ali-hero .ali-bg{
position:absolute; inset:0;
background:linear-gradient(90deg,var(--cream) 0 66%, transparent 66% 100%);
}
.ali-hero .ali-photo{
position:absolute; top:0; right:0; bottom:0; width:48vw; min-width:740px;
background:url("https://images.unsplash.com/photo-1616594039964-ae9021a400a0?q=80&w=1920&auto=format&fit=crop") center/cover no-repeat;
}
.ali-hero .container{
position:relative; z-index:2;
padding:28px 16px 90px; /* loc pentru bara care “plutește” dedesubt */
max-width:1240px; margin:auto;
}
/* breadcrumb + mini-count */
.ali-path{color:#475569; font-weight:600; margin:6px 0 2px;}
.ali-path small{display:block; color:#9aa3b2; font-weight:700; margin-top:4px;}
/* header text */
.ali-count-row{
display:flex; align-items:center; gap:.6rem; margin:12px 0 10px;
color:#0f172a; font-weight:800;
}
.ali-count-row i{font-size:1.05rem}
.ali-title{
font-weight:800; letter-spacing:-.01em; line-height:1.06;
font-size:clamp(1.8rem,1.1rem + 2.4vw,2.6rem); margin:.2rem 0 .6rem;
}
.ali-sub{max-width:960px; color:#374151; font-size:1.15rem; line-height:1.6; font-weight:600;}
/* ====== BARĂ FILTRE (card alb mare + butoane) ====== */
.ali-band{ background:#f3f6fb00; }
.ali-filters{
position:relative; z-index:3;
max-width:min(96vw, 1440px); /* lată, dar nu full-screen */
margin:-52px auto 14px;
padding:0 16px;
}
/* card pe un singur rând, fără scroll */
.ali-card{
display:flex;
flex-wrap:nowrap;
align-items:flex-end;
gap:12px;
background:var(--card);
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 8px 18px rgba(2,6,23,.06);
padding:16px 18px;
overflow-x:visible;
}
/* fiecare dropdown îngust */
.ali-col{
flex:0 0 135px; /* <— lățimea vizată, poți coborî la 130/120px */
min-width:135px;
}
/* etichete compacte, gri */
.ali-label{
margin:0 0 6px;
font-weight:700;
color:#6b7280;
font-size:.84rem;
letter-spacing:.01em;
}
/* select dreptunghiular, compact (look Aliseda) */
.ali-select{
width:100%;
height:40px;
padding:.52rem .8rem;
background:#fff; color:#111827; font-weight:700; font-size:1rem;
border:1px solid #e5e7eb; /* gri fin */
border-radius:10px;
appearance:none; outline:0; box-shadow:none;
transition:border-color .15s, transform .04s, background-color .15s;
/* chevron mic la dreapta */
background-image:
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 4px),
calc(100% - 12px) calc(50% - 4px);
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
}
.ali-select:hover{ border-color:#d1d5db; transform:translateY(-1px); }
.ali-select:focus{ border-color:#111827; box-shadow:0 0 0 3px rgba(17,24,39,.10); }
/* acțiunile merg la dreapta */
.ali-actions{
margin-left:auto;
flex:0 0 auto;
display:flex; gap:12px; justify-content:flex-end;
}
/* butoane: contur pt Filtros, pilulă neagră pt Guardar */
.ali-btn{
display:inline-flex; align-items:center; gap:.55rem;
padding:.6rem 1rem; font-weight:800; font-size:1rem;
border-radius:999px; border:1px solid transparent; cursor:pointer;
transition:transform .12s, filter .12s, border-color .12s, box-shadow .12s;
}
.ali-btn i{ font-size:1rem; }
.ali-btn-filters{
background:#fff; color:#111827;
border:2px solid #0f172a; /* contur negru ca în captura 2 */
box-shadow:none;
}
.ali-btn-filters:hover{ transform:translateY(-1px); filter:brightness(1.02); }
.ali-btn-save{
background:#0f172a; color:#fff; border:0;
padding:.6rem 1.35rem;
box-shadow:0 8px 22px rgba(2,6,23,.18);
}
.ali-btn-save:hover{ transform:translateY(-1px); filter:brightness(1.05); }
/* link Ver mapa */
.ali-map{
display:inline-flex; align-items:center; gap:.4rem;
color:#0f172a; font-weight:800; text-decoration:none;
padding:6px 0 16px; max-width:1240px; margin:0 auto; display:block;
}
.ali-map:hover{ text-decoration:underline; }
/* responsive: micșorez fin, dar păstrez UN SINGUR rând */
@media (max-width:1280px){
.ali-col{ flex-basis:130px; min-width:130px; }
.ali-select{ height:38px; padding:.48rem .76rem; font-size:.96rem; }
}
@media (max-width:1140px){
.ali-col{ flex-basis:122px; min-width:122px; }
.ali-select{ height:36px; padding:.44rem .7rem; font-size:.94rem; }
.ali-btn{ padding:.56rem .9rem; font-size:.95rem; }
}
/* ======= Results section ======= */
.ali-results { padding: 24px 12px 36px; }
.ali-results-head { text-align:left; margin-bottom: 14px; }
.ali-results-title{
font-weight: 900; letter-spacing: -.01em; color:#0f172a;
font-size: clamp(1.2rem, .7rem + 1.4vw, 1.5rem);
margin: 0;
}
.ali-results-sub{ margin:.15rem 0 0; color:#6b7280; font-weight:700; }
/* Grid */
.ali-grid{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}
@media (max-width: 1200px){ .ali-grid{ gap:12px; } }
@media (max-width: 992px){ .ali-grid{ gap:12px; } }
@media (max-width: 768px){ .ali-grid{ gap:10px; } }
.prop-card{
grid-column: span 4; /* 3 pe rând desktop */
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
overflow:hidden;
box-shadow: 0 10px 26px rgba(2,6,23,.05);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (max-width: 1200px){ .prop-card{ grid-column: span 6; } } /* 2 pe rând */
@media (max-width: 640px){ .prop-card{ grid-column: span 12; } } /* 1 pe rând */
.prop-card:hover{
transform: translateY(-4px);
border-color:#e6eaf2;
box-shadow: 0 16px 40px rgba(2,6,23,.08), 0 48px 120px rgba(2,6,23,.06);
}
/* Media */
.prop-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.prop-media img{
width:100%; height:100%; object-fit:cover;
transform: scale(1.02);
transition: transform .5s ease;
}
.prop-card:hover .prop-media img{ transform: scale(1.06); }
.prop-media::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.1) 100%);
opacity:.6; pointer-events:none;
}
/* Badge de pe imagine */
.prop-badge{
position:absolute; left:12px; top:12px;
display:inline-flex; align-items:center; gap:.4rem;
padding:.32rem .6rem; font-weight:900; font-size:.85rem;
border-radius:999px; color:#111827; background:#fff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 6px 18px rgba(2,6,23,.08);
}
.badge--gold{
background:linear-gradient(180deg,#f5d77a,#d4af37);
color:#111827; border-color:transparent;
}
/* Favorite */
.prop-like{
position:absolute; right:12px; top:12px;
width:40px; height:40px; display:grid; place-items:center;
border-radius:999px; border:1px solid rgba(255,255,255,.6);
background:rgba(255,255,255,.85);
box-shadow:0 8px 20px rgba(2,6,23,.18);
color:#0f172a; cursor:pointer; transition: transform .12s, filter .12s;
}
.prop-like:hover{ transform: translateY(-1px); filter: brightness(1.04); }
/* Body */
.prop-body{ padding:14px 14px 12px; }
.prop-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.prop-price{
margin:0; font-weight:1000; letter-spacing:.005em; color:#0f172a;
font-size: clamp(1.05rem, .7rem + .8vw, 1.25rem);
}
.prop-verified{
display:inline-flex; align-items:center; gap:.35rem;
font-weight:900; font-size:.83rem; color:#0f172a;
background:#fff; border:1px solid #f2d299;
padding:.28rem .5rem; border-radius:999px;
}
.prop-verified i{ color:#d4af37; }
.prop-title{
margin:.25rem 0 .15rem;
font-weight:900; color:#0f172a; letter-spacing:-.01em;
font-size:1.02rem;
}
.prop-meta{
display:flex; align-items:center; gap:.45rem;
color:#6b7280; font-weight:700; font-size:.92rem;
margin-bottom:.35rem;
}
.prop-meta i{ color:#94a3b8; }
/* Features row */
.prop-feats{
display:flex; align-items:center; gap:12px;
list-style:none; padding:0; margin:.15rem 0 .55rem;
color:#0f172a;
flex-wrap:wrap;
}
.prop-feats li{
display:inline-flex; align-items:center; gap:.4rem;
background:#fff; border:1px solid rgba(15,23,42,.08);
padding:.34rem .55rem; border-radius:999px; font-weight:800; font-size:.85rem;
}
.prop-feats i{ color:#64748b; }
/* Tags */
.prop-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
display:inline-flex; align-items:center; padding:.34rem .6rem;
background:#f7f9fc; border:1px solid #e5e7eb; color:#0f172a;
border-radius:999px; font-weight:800; font-size:.82rem;
}
/* Load more */
.ali-more{ display:flex; justify-content:center; padding:18px 0 8px; }
.btn-ali-more{
appearance:none; border:1px solid rgba(15,23,42,.1);
background:#fff; color:#0f172a; font-weight:900;
padding:.8rem 1.2rem; border-radius:999px; cursor:pointer;
box-shadow:0 8px 18px rgba(2,6,23,.06);
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.btn-ali-more:hover{
transform: translateY(-1px);
border-color:#d4af37;
box-shadow:0 12px 26px rgba(2,6,23,.08);
}
/* ===== HERO OVERRIDES (layout ca în al doilea screenshot) ===== */
/* === HERO compact cu poză pe înălțime, mai îngustă și mutată la stânga === */
.ali-hero{
position: relative;
min-height: 120px; /* și mai scund */
--split: 55%; /* cât spațiu are textul */
--cream: #fffdf8; /* crem discret */
overflow: hidden;
}
/* fundal crem în spate */
.ali-hero .ali-bg{
position:absolute; inset:0;
background: linear-gradient(
90deg,
var(--cream) 0 var(--split),
transparent var(--split) 100%
);
z-index:1;
}
/* poza: ocupă toată înălțimea hero-ului, dar mai îngustă și mutată stânga */
/* poza: ocupă toată înălțimea hero-ului, dar mai îngustă și mutată stânga */
.ali-hero .ali-photo{
position:absolute;
top: 0; bottom: 0;
left: calc(var(--split) - 5%); /* mutată mai la stânga */
width: 220px; /* lățime fixă, nu procent */
max-width: 220px; /* siguranță la ecrane mari */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 4px 14px rgba(0,0,0,.08);
z-index:2;
}
/* text compact */
.ali-hero .container{
position:relative; z-index:3;
padding: 18px 16px;
max-width:1240px; margin:0 auto;
}
/* responsive: pe mobil poza coboară jos și se lățește */
@media (max-width: 992px){
.ali-hero{ --split: 100%; min-height: 200px; }
.ali-hero .ali-bg{ background: var(--cream); }
.ali-hero .ali-photo{
left: 16px; right:16px;
width:auto; height:160px;
top: auto; bottom: 16px;
border-radius: 12px;
}
.ali-hero .container{ padding-bottom: 180px; }
}
/* === OVERRIDE pentru poziția barei de filtre === */
.ali-filters{
margin: -22px auto 14px !important; /* ↑ ajustează 20px după cât spațiu vrei sub hero */
}
/* ================== CORE VARS (folosite de FORM) ================== */
:root{
--ink:#0f172a;
--muted:#7b8aa6;
--ring:#94b2ff;
--shadow-1:0 10px 30px rgba(15,23,42,.12), 0 6px 16px rgba(15,23,42,.10);
--shadow-2:0 12px 22px rgba(2,6,23,.08), 0 42px 110px rgba(2,6,23,.16);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}
/* ================== HERO — BLACK MODERN (no image) ================== */
.vh-hero{
position:relative; isolation:isolate;
min-height:58dvh; /* mai mic decât 72dvh */
display:grid; place-items:center;
background:
radial-gradient(120% 120% at 50% -20%, #0e1522 0%, transparent 60%),
linear-gradient(180deg, #070a0f 0%, #0b1118 100%);
color:#e6ebf2;
overflow:clip;
}
/* straturi decorative */
.vh-ink{
position:absolute; inset:-12% -12% -12% -12%; pointer-events:none;
background:
radial-gradient(80% 60% at 20% 0%, rgba(76,107,163,.18), transparent 60%),
radial-gradient(90% 70% at 110% 20%, rgba(100,140,255,.12), transparent 60%);
filter: blur(8px);
}
.vh-spot{
position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(600px 320px at 26% 30%, rgba(120,160,255,.16), transparent 70%),
radial-gradient(420px 240px at 60% 10%, rgba(255,255,255,.10), transparent 70%);
mix-blend-mode: screen;
animation: vhSweep 8s ease-in-out infinite alternate;
}
@keyframes vhSweep{
0% { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity:.85; }
100% { transform: translate3d(2%, 1%, 0) scale(1.04); opacity:.95; }
}
.vh-grid{
position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(90% 70% at 30% 30%, #000 40%, transparent 100%);
opacity:.16;
}
.vh-noise{
position:absolute; inset:-50% -50% -50% -50%; pointer-events:none;
background-image: url("data:image/svg+xml;utf8,\
");
background-size: 300px 300px; mix-blend-mode: soft-light;
}
/* layout și conținut */
.vh-wrap{
width:min(1200px, 94vw);
display:grid; grid-template-columns: 1fr; gap:24px;
align-items:center; z-index:2;
}
.vh-left{ max-width:780px; }
.vh-back{
display:inline-block; margin-bottom:12px;
padding:8px 14px; border-radius:999px; color:#cfe0ff; text-decoration:none;
border:1px solid rgba(170,190,255,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.vh-back:hover{ transform:translateY(-1px); border-color:rgba(170,190,255,.32); }
.vh-title{
margin:.2rem 0 .35rem; font-weight:900;
font-size: clamp(34px, 5.4vw, 52px); /* ușor mai mic */
letter-spacing:.2px; color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.vh-sub{
margin:0 0 .35rem; font-weight:800; font-size:clamp(18px,2.2vw,22px); color:#d7e1ff;
}
.vh-desc{ margin:0 0 18px; color:#aeb9d4; }
/* search pill */
.vh-search{
display:flex; align-items:center; gap:.7rem;
background: rgba(255,255,255,.08);
border:1px solid rgba(200,210,255,.16);
border-radius:999px; padding:.64rem .75rem;
box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.24);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
.vh-icon{ color:#c6d2ff; font-style:normal; font-size:1.05rem; }
.vh-search input{
flex:1; border:0; outline:0; background:transparent; min-width:0;
font-size:1.02rem; color:#eaf1ff;
}
.vh-search input::placeholder{ color:#aab6d2; }
.vh-btn{
border:1px solid rgba(255,255,255,.12);
border-radius:999px; padding:.74rem 1.05rem; font-weight:900;
color:#fff; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.0)) , #0e1220;
box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.vh-btn:hover{ transform:translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.0)) , #0b1020; }
/* focus & reveal */
.vh-search:focus-within{ box-shadow: 0 0 0 3px rgba(70,120,255,.25), 0 10px 30px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.24); }
.vh-btn:focus-visible, .vh-back:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }
[data-reveal]{ opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (max-width: 768px){
.vh-title{ font-size: clamp(28px, 7.6vw, 40px); }
.vh-search{ padding:.68rem .72rem; }
}
/* ================== FORM (rămâne ca în versiunea ta) ================== */
.vf-form{
background: linear-gradient(180deg,
#e6e6e6 0%, /* silver luminos */
#cfcfcf 25%, /* gri perlat */
#a9a9a9 60%, /* gri mediu */
#4a4a4a 100% /* gri grafit deschis */
);
color: var(--ink);
}
.vf-wrap{ width:min(1100px, 94vw); margin:0 auto; padding: clamp(40px, 6vw, 80px) 0; }
.vf-head{ text-align:left; margin-bottom:18px; }
.vf-title{ margin:.2rem 0 .25rem; font-weight:900; font-size:clamp(26px, 3vw, 34px); color:#0f172a; }
.vf-sub{ margin:0; color:var(--muted); }
.vf-grid{ display:grid; gap:18px; grid-template-columns: repeat(12, 1fr); margin-top:18px; }
.vf-field{ grid-column: span 6; }
.vf-field:nth-child(3){ grid-column: span 3; }
@media (max-width: 991.98px){ .vf-field, .vf-field:nth-child(3){ grid-column: 1 / -1; } }
.vf-label{ display:block; margin:0 0 6px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; font-size:.92rem; color:#1f2937; }
.vf-control{
position:relative; background:#fff;
border:2px solid #1e293b; border-radius:8px;
padding:14px 16px; display:flex; align-items:center; gap:8px;
}
.vf-control input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:1.05rem; color:#0f172a; }
.vf-adorn{ position:relative; top:1px; font-weight:800; color:#4b5563; opacity:.9; }
.vf-left{ order:-1; margin-right:4px; }
.vf-right{ margin-left:6px; color:#6b7280; }
.vf-control:focus-within{ box-shadow: 0 0 0 4px rgba(148,178,255,.35); border-color:#1e293b; }
.vf-actions{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.vf-cta{
border:1px solid rgba(255,255,255,.2);
border-radius:999px; padding:.8rem 1.15rem; font-weight:900;
color:#fff; background:#111827; box-shadow: var(--shadow-1);
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.vf-cta:hover{ transform:translateY(-1px); background:#0b1220; }
.vf-note{ color:#475569; font-weight:700; }
/* ============ HERO — Mobile polish (≤ 640px) ============ */
@media (max-width: 640px){
/* ocupă tot ecranul util pe mobil */
.vh-hero{
min-height: calc(100dvh - var(--navH, 0px));
padding: 16px;
}
/* centru perfect pe verticală + orizontală */
.vh-wrap{
width: 100%;
display: grid;
place-items: center;
grid-template-columns: 1fr;
text-align: center;
}
.vh-left{
width: min(520px, 100%);
max-width: 100%;
margin: 0 auto;
}
/* butonul de întoarcere: fix sus-stânga, în safe area */
.vh-back{
position: fixed;
top: calc(12px + env(safe-area-inset-top));
left: calc(12px + env(safe-area-inset-left));
z-index: 5;
padding: 10px 14px;
font-weight: 700;
font-size: .95rem;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border: 1px solid rgba(200,210,255,.22);
color: #dbe6ff;
}
/* afișăm DOAR titlul; ascundem sub & desc pe mobil */
.vh-title{
margin-top: 48px; /* spațiu sub butonul Back */
margin-bottom: 14px;
font-size: clamp(24px, 7.2vw, 32px);
line-height: 1.15;
letter-spacing: .1px;
}
.vh-sub, .vh-desc{ display: none !important; }
/* bara de căutare full-width, centrată */
.vh-search{
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: .78rem .85rem; /* hit area bună */
gap: .6rem;
}
.vh-icon{ font-size: 1rem; }
.vh-search input{
font-size: 1rem;
padding: 2px 0;
}
.vh-btn{
padding: .78rem 1rem;
font-size: .95rem;
white-space: nowrap;
}
/* opțional: micșorăm animația spot-ului pe ecrane mici */
.vh-spot{
background:
radial-gradient(440px 240px at 30% 32%, rgba(120,160,255,.16), transparent 70%),
radial-gradient(320px 180px at 64% 12%, rgba(255,255,255,.10), transparent 70%);
}
}
/* ============ Small tablets (641px–900px): layout aerisit, tot centrat ============ */
@media (min-width: 641px) and (max-width: 900px){
.vh-hero{ min-height: 68dvh; padding: 24px; }
.vh-wrap{ place-items: center; text-align: center; }
.vh-left{ max-width: 760px; margin: 0 auto; }
.vh-title{ font-size: clamp(28px, 5.6vw, 40px); margin-bottom: 12px; }
.vh-sub{ font-size: 1.05rem; opacity: .9; }
.vh-desc{ font-size: .95rem; opacity: .85; }
.vh-search{ max-width: 640px; margin-inline: auto; }
}
/* ===== HERO — PATCH pentru mobil: bottom-centered & mai scund ===== */
@media (max-width: 640px){
/* Hero mai mic și conținutul jos, centrat */
.vh-hero{
/* mai scund decât înainte */
min-height: 52dvh;
/* rezervăm puțin spațiu jos pt tastatură/gesturi */
padding: 16px 16px calc(10dvh + env(safe-area-inset-bottom));
/* forțăm layout pe mobil: jos & centrat */
display: flex !important;
flex-direction: column;
justify-content: flex-end; /* conținutul coboară jos */
align-items: center;
}
/* containerul din interior — centrat text + lățime fluidă */
.vh-wrap{
width: 100%;
max-width: 560px;
margin: 0 auto;
text-align: center;
display: block; /* evită interferența cu grid-ul */
}
/* Buton Back rămâne sus-stânga, în safe area */
.vh-back{
position: fixed;
top: calc(12px + env(safe-area-inset-top));
left: calc(12px + env(safe-area-inset-left));
z-index: 5;
padding: 8px 12px;
font-size: .9rem;
}
/* doar titlul pe mobil */
.vh-title{
margin: 0 0 12px;
font-size: clamp(22px, 7.6vw, 28px);
line-height: 1.15;
}
.vh-sub,
.vh-desc{ display: none !important; }
/* bara de căutare — full width, centrată jos */
.vh-search{
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: .7rem .85rem;
gap: .55rem;
}
.vh-icon{ font-size: 1rem; }
.vh-search input{ font-size: 1rem; }
.vh-btn{
padding: .68rem .95rem;
font-size: .9rem;
white-space: nowrap;
}
/* spot-ul mai mic pe mobile (opțional) */
.vh-spot{
background:
radial-gradient(380px 210px at 32% 34%, rgba(120,160,255,.16), transparent 70%),
radial-gradient(280px 160px at 60% 12%, rgba(255,255,255,.10), transparent 70%);
}
}
/* ===== TABLET — puțin mai scund și tot jos & centrat ===== */
@media (min-width: 641px) and (max-width: 900px){
.vh-hero{
min-height: 56dvh;
padding: 24px 24px 8vh;
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.vh-wrap{
width: min(680px, 94vw);
text-align: center;
}
.vh-title{ font-size: clamp(26px, 5.4vw, 34px); margin-bottom: 12px; }
.vh-sub, .vh-desc{ display: none !important; }
.vh-search{ max-width: 640px; }
}
:root {
--pv-ink: #f8fafc;
--pv-sub: #e5e7eb;
--pv-wrap: min(1240px, 92vw);
--pv-ease: cubic-bezier(.2, .7, .2, 1);
}
/* ===== HERO ===== */
.pv-hero {
position: relative;
min-height: 90vh;
color: var(--pv-ink);
display: grid;
align-items: center;
isolation: isolate;
overflow: hidden;
--pv-bg: url('about:blank');
}
.pv-hero__bg {
position: absolute;
inset: -8%;
background: var(--pv-bg) center/cover no-repeat;
filter: saturate(1.05) contrast(1.05);
z-index: -4;
}
.pv-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75) 80%);
z-index: -3;
}
.pv-hero__vignette {
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 40%, transparent 60%, rgba(0,0,0,.7) 100%);
z-index: -2;
}
.pv-hero__grain {
position: absolute; inset: -2%;
opacity: .12;
background-image: url('data:image/svg+xml;utf8,\
');
background-size: cover;
mix-blend-mode: overlay;
z-index: -1;
}
/* ===== TEXTS ===== */
.pv-wrap {
width: var(--pv-wrap);
margin: 0 auto;
padding: clamp(72px, 8vw, 120px) 0;
}
.pv-left { max-width: min(820px, 95%); }
.pv-back {
display: inline-block;
margin-bottom: 1rem;
color: var(--pv-sub);
text-decoration: none;
font-size: .95rem;
border-bottom: 1px solid transparent;
transition: .3s var(--pv-ease);
}
.pv-back:hover { border-color: currentColor; color: #fff; }
.pv-title {
font-size: clamp(42px, 5vw, 80px);
line-height: 1.05;
margin-bottom: .4em;
text-shadow: 0 1px 16px rgba(0,0,0,.25);
}
.pv-sub {
font-size: clamp(18px, 1.6vw, 22px);
color: var(--pv-sub);
margin-bottom: .6em;
}
.pv-desc {
font-size: clamp(16px, 1.35vw, 18px);
color: #e2e8f0;
margin-bottom: 1.6em;
max-width: 70ch;
}
/* ===== SEARCH – glass light style ===== */
.pv-search {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 16px;
border-radius: 999px;
width: min(900px, 100%);
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,0.25);
backdrop-filter: blur(20px) saturate(150%);
box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.pv-search__icon {
width: 42px; height: 42px;
display: grid; place-items: center;
border-radius: 999px;
background: rgba(255,255,255,.35);
color: #0f172a;
}
.pv-search input {
flex: 1;
height: 54px;
border: none;
outline: none;
background: transparent;
color: #0f172a;
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 500;
padding: 0 10px;
}
.pv-search input::placeholder { color: rgba(15,23,42,.55); }
/* ===== BUTTON – elegant outline pill ===== */
.pv-btn {
height: 48px;
padding: 0 28px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.85);
background: rgba(255,255,255,0.8);
color: #0f172a;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
font-size: 13px;
cursor: pointer;
transition: .25s var(--pv-ease);
box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.1);
}
.pv-btn:hover {
transform: translateY(-1px);
background: #ffffff;
box-shadow: 0 3px 0 rgba(0,0,0,.08), 0 16px 28px rgba(0,0,0,.12);
}
.pv-btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.08); }
.pv-visually-hidden {
position: absolute!important;
width: 1px; height: 1px; overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
/* ===== REVEAL ===== */
[pv-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: .9s var(--pv-ease); }
[pv-reveal].is-in { opacity: 1; transform: none; }
/* ===== SCROLL CUE ===== */
.pv-cue {
position: absolute; left: 50%; bottom: 24px;
transform: translateX(-50%);
width: 36px; height: 56px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
display: grid; place-items: center;
}
.pv-cue__dot {
width: 6px; height: 10px; border-radius: 999px; background: #fff;
animation: pv-cue 1.8s var(--pv-ease) infinite;
}
@keyframes pv-cue {
0% { transform: translateY(-8px); opacity: 0; }
25% { opacity: 1; }
60% { transform: translateY(10px); opacity: 0; }
100% { opacity: 0; }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
.pv-title { font-size: clamp(34px, 8vw, 56px); }
.pv-search { flex-direction: column; padding: 16px; border-radius: 20px; }
.pv-search input { width: 100%; height: 52px; }
.pv-btn { width: 100%; height: 48px; }
}
/* === Fix white rectangle on Chrome/Edge autofill === */
.pv-search input{
flex:1;
height:54px;
padding:0 12px;
border:0;
outline:0;
background: transparent !important; /* nu lăsăm UA să pună alb */
color:#0f172a;
font-size:clamp(15px,1.2vw,18px);
font-weight:500;
border-radius:12px; /* evită colțurile pătrate din interior */
appearance:none;
-webkit-appearance:none;
caret-color:#0f172a;
}
/* Autofill (Chrome/Edge) – păstrăm efectul glass light */
.pv-search input:-webkit-autofill,
.pv-search input:-webkit-autofill:hover,
.pv-search input:-webkit-autofill:focus{
-webkit-text-fill-color:#0f172a;
transition: background-color 99999s ease-in-out 0s;
/* vopsim "umplutura" autofill-ului cu un strat transparent deschis */
-webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.25) inset !important;
box-shadow: 0 0 0 1000px rgba(255,255,255,.25) inset !important;
border-radius:12px;
}
/* Placeholder color mai discret */
.pv-search input::placeholder{ color: rgba(15,23,42,.55); }
/* (Opțional) ascunde iconița X din input[type=search] pe WebKit */
.pv-search input::-webkit-search-cancel-button{
-webkit-appearance:none; appearance:none;
}
/* ===== TITLE refinement ===== */
.pv-title {
font-size: clamp(32px, 3.6vw, 56px); /* mai mic și mai elegant */
font-weight: 500; /* mai subțire, dar încă vizibil */
line-height: 1.08;
letter-spacing: -0.015em; /* subtil spacing pentru rafinament */
margin-bottom: 0.4em;
text-wrap: balance;
text-shadow: 0 1px 10px rgba(0,0,0,.25);
}
/* ===== MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
/* Titlul mare - păstrăm doar el + bara de search */
.pv-sub,
.pv-desc,
.pv-back {
display: none !important; /* ascundem textele secundare */
}
.pv-title {
font-size: clamp(36px, 9vw, 50px);
line-height: 1.1;
margin-bottom: 1.2em;
text-align: center;
}
/* Centrare generală */
.pv-hero {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 1rem;
}
.pv-wrap {
width: 100%;
padding-top: 18vh; /* poziționează conținutul frumos pe verticală */
}
/* Bara de căutare: verticală + buton dedesubt */
.pv-search {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding: 18px 16px;
border-radius: 24px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}
.pv-search__icon {
display: none; /* ascundem lupa pentru mai mult spațiu */
}
.pv-search input {
width: 100%;
height: 52px;
border-radius: 14px;
background: rgba(255,255,255,0.75);
color: #0f172a;
font-size: 16px;
padding: 0 14px;
text-align: center;
}
.pv-btn {
width: 100%;
height: 48px;
margin-top: 12px;
font-size: 13px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 700;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.9);
background: #ffffff;
color: #0f172a;
box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.pv-btn:hover {
transform: none;
background: #f9fafb;
}
/* Ascundem și scroll-cue pentru claritate */
.pv-cue { display: none; }
}
/* Desktop: popover în dreapta */
@media (min-width: 992px){
.footer-lang .lang-list {
bottom: auto; /* anulăm deschiderea în sus */
top: 50%; /* aliniere pe verticală */
right: auto;
left: calc(100% + 10px); /* la dreapta butonului */
transform: translateY(-50%); /* centrare pe buton */
max-height: 240px; /* sigur încape, fără scroll pagină */
overflow: auto;
overscroll-behavior: contain;
}
}
/* ===== Glass search ===== */
.pv-search{
--glass-bg: rgba(255,255,255,.14);
--glass-brd: rgba(255,255,255,.28);
--ink:#fff;
position:relative; display:flex; align-items:center; gap:12px;
width:min(980px, 92vw);
padding:10px; border-radius:40px;
background:var(--glass-bg);
border:1px solid var(--glass-brd);
backdrop-filter: blur(10px) saturate(120%);
box-shadow: 0 6px 24px rgba(0,0,0,.25) inset, 0 12px 30px rgba(0,0,0,.18);
}
.pv-search input{
flex:1; height:48px; border:0; outline:0;
background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.15));
color:#0d0f12; border-radius:28px; padding:0 18px 0 16px;
font:500 16px/1.1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}
.pv-search input::placeholder{ color:rgba(13,15,18,.55); }
.pv-search__icon{
width:48px; height:48px; display:grid; place-items:center;
border-radius:50%; color:#0d0f12;
background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.25));
border:1px solid rgba(0,0,0,.05);
}
.pv-btn{
min-width:164px; height:48px; border-radius:28px; border:1px solid rgba(0,0,0,.08);
background:linear-gradient(180deg, #ffffff, #ebedf0);
color:#0d0f12; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
padding:0 18px; cursor:pointer;
box-shadow: 0 6px 12px rgba(0,0,0,.18);
}
.pv-btn:disabled{ opacity:.6; cursor:wait; }
/* ===== Autocomplete dropdown ===== */
.pv-suggestions{
position:absolute; left:64px; right:184px; top:100%;
margin-top:10px; list-style:none; padding:8px;
background:rgba(255,255,255,.72);
border:1px solid rgba(0,0,0,.08);
border-radius:16px; backdrop-filter: blur(10px);
box-shadow: 0 16px 36px rgba(0,0,0,.22);
max-height:320px; overflow:auto; z-index:30;
}
.pv-suggestion{
display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; cursor:pointer;
}
.pv-suggestion:hover{ background:rgba(255,255,255,.65); }
.pv-suggestion.is-loading, .pv-suggestion.is-error{ cursor:default; }
.pv-sug__icon{ width:22px; height:22px; line-height:22px; }
.pv-sug__main{ font-weight:600; color:#0d0f12; }
.pv-sug__sub { font-size:12px; color:#4b5563; }
/* ===== Results card ===== */
.pv-results{ margin-top:22px; }
.pv-card{
--card-bg: rgba(255,255,255,.78);
background: var(--card-bg);
border:1px solid rgba(0,0,0,.08);
border-radius:20px; padding:18px; backdrop-filter: blur(12px);
box-shadow: 0 22px 40px rgba(0,0,0,.22);
}
.pv-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:8px; }
.pv-res-title{ margin:0 0 2px; font-size:18px; font-weight:800; color:#0d0f12; }
.pv-res-addr{ margin:0; color:#374151; }
.pv-badge{
display:inline-block; padding:6px 10px; font-size:12px; font-weight:700;
border-radius:999px; background:linear-gradient(180deg,#12c2e9,#c471ed,#f64f59);
color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.pv-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:18px; align-items:stretch; }
@media (max-width: 900px){ .pv-grid{ grid-template-columns: 1fr; } }
.pv-dl{ display:grid; grid-template-columns: max-content 1fr; gap:8px 12px; margin:0; }
.pv-dl dt{ font-weight:700; color:#111827; }
.pv-dl dd{ margin:0; color:#374151; }
.pv-link{ display:inline-block; margin-top:10px; font-weight:700; color:#0d0f12; text-decoration:underline; }
.pv-mapwrap{ border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.pv-map{ width:100%; height:280px; background:#e5e7eb; }
.pv-note{ margin-top:10px; color:#374151; font-size:14px; }
/* reveal animation */
[pv-reveal]{ opacity:0; transform:translateY(8px); transition: all .35s ease; }
[pv-reveal].is-in{ opacity:1; transform:none; }
/* visually hidden util */
.pv-visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }
/* =========================================================
NOIR GLASS THEME — ultra modern, transparent + black frame
Aplica doar când .pv-results are clasa .pv-results--noir
========================================================= */
.pv-results--noir .pv-card{
/* sticlă transparentă cu tentă deschisă */
--bg: rgba(245,245,247,.18);
background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
backdrop-filter: blur(13px) saturate(140%);
-webkit-backdrop-filter: blur(13px) saturate(120%);
/* rama neagră + luciu */
border: 1px solid rgba(0,0,0,.72);
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset, /* hairline interior */
0 20px 60px rgba(0,0,0,.45), /* umbră exterioară */
0 2px 0 rgba(0,0,0,.6) inset; /* muchie superioară */
border-radius: 5px;
padding: 22px;
color: #0b0b0b;
}
.pv-results--noir .pv-card__head{
align-items: center;
margin-bottom: 14px;
}
.pv-results--noir .pv-res-title{
font-size: 20px;
line-height: 1.2;
letter-spacing: .2px;
color: #0b0b0b;
margin: 0 0 4px;
}
.pv-results--noir .pv-res-addr{
color: #111; opacity: .9;
}
/* badge – pastilă cu contur negru */
.pv-results--noir .pv-badge{
background: linear-gradient(180deg,#fafafa,#e9eaec);
color:#0b0b0b;
border:1px solid rgba(0,0,0,.85);
box-shadow:
0 1px 0 rgba(255,255,255,.45) inset,
0 8px 18px rgba(0,0,0,.22);
}
/* grid aerisit, card map mare cu colțuri rotunjite */
.pv-results--noir .pv-grid{ gap: 22px; }
.pv-results--noir .pv-mapwrap{
border:1px solid rgba(0,0,0,.85);
border-radius: 5px;
overflow:hidden;
background: rgba(0,0,0,.06);
box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.pv-results--noir .pv-map{ height: 180px; }
/* listă info – etichete negre, valori subliniate negru */
.pv-results--noir .pv-dl{
gap: 12px 18px;
}
.pv-results--noir .pv-dl dt{
color:#0b0b0b;
font-weight: 800;
text-transform: none;
}
.pv-results--noir .pv-dl dd{
margin:0;
color:#0b0b0b;
font-weight:600;
/* subliniere fintech vibe */
border-bottom: 1.3px solid #0b0b0b;
line-height: 1.45;
padding-bottom: 2px;
}
/* link cu accent negru */
.pv-results--noir .pv-link{
color:#0b0b0b;
text-decoration: none;
border-bottom: 2px solid #0b0b0b;
font-weight: 800;
}
.pv-results--noir .pv-link:hover{ opacity:.8; }
/* notă discretă */
.pv-results--noir .pv-note{
color:#0b0b0b;
opacity:.85;
border-top:1px solid rgba(0,0,0,.72);
margin-top:16px; padding-top:12px;
}
/* dropdown + search – integrate cu estetica “noir” */
.pv-suggestions{
background: rgba(245,245,247,.24);
border:1px solid rgba(0,0,0,.85);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow: 0 18px 48px rgba(0,0,0,.42);
}
.pv-suggestion{ color:#0b0b0b; }
.pv-suggestion:hover{ background: rgba(255,255,255,.22); }
.pv-sug__sub{ color:#1b1b1b; opacity:.9; }
/* butonul mare – variantă sticlă cu muchii negre */
.pv-btn{
background: linear-gradient(180deg,#fefefe,#e6e7ea);
border:1px solid rgba(0,0,0,.85);
box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.5) inset;
color:#0b0b0b;
}
.pv-search__icon{
background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
border:1px solid rgba(0,0,0,.85);
}
/* mici retușuri responsiv */
@media (max-width: 900px){
.pv-results--noir .pv-map{ height: 260px; }
}
/* === Make the noir results card wider horizontally === */
.pv-results--noir .pv-card {
max-width: 1280px; /* înainte era limitat de container */
width: 96vw; /* ocupă mai mult din lățimea vizibilă */
margin: 0 auto; /* centrează frumos pe pagină */
padding: 26px 30px; /* un pic mai aerisit */
border-radius: 8px;
}
.pv-results--noir .pv-map {
height: 150px; /* harta mai mică */
}
.pv-results--noir .pv-card {
padding: 18px 26px; /* reduce înălțimea generală */
}
/* ===== MORTGAGE RESULT — LUXURY GLASS BRIGHT ===== */
.vf-result,
.vf-result--glass{
position: relative;
border: 1px solid rgba(0,0,0,.9) !important; /* ramă neagră elegantă */
border-radius: 0 !important; /* fără colțuri rotunjite */
background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(210,210,210,.6)) !important;
backdrop-filter: blur(16px) brightness(1.1) saturate(130%) !important;
-webkit-backdrop-filter: blur(16px) brightness(1.1) saturate(130%) !important;
box-shadow:
inset 0 1px 1px rgba(255,255,255,.4),
0 8px 24px rgba(0,0,0,.25),
0 0 28px rgba(255,255,255,.15);
color: #111;
transition: box-shadow .25s ease, transform .25s ease;
overflow: hidden;
}
/* efect subtil de strălucire la margini */
.vf-result::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
mix-blend-mode: screen;
opacity:.65;
}
/* grilă interioară */
.vf-result > div{
display: grid !important;
grid-template-columns: 1.2fr 1fr 1fr !important;
gap: 26px !important;
align-items: start !important;
padding: 28px 32px;
}
/* coloanele interioare */
.vf-result > div > div{
padding: 0 16px;
}
/* separatoare verticale fine între coloane */
.vf-result > div > div:not(:first-child){
position: relative;
}
.vf-result > div > div:not(:first-child)::before{
content: "";
position: absolute;
left: -14px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.3), rgba(0,0,0,.1));
}
/* titlurile de coloană */
.vf-result > div > div > div:first-child{
font-weight: 800 !important;
font-size: 16px !important;
margin-bottom: 10px !important;
text-transform: uppercase;
color: #000;
letter-spacing: .4px;
}
/* rândurile interioare */
.vf-result div{
line-height: 1.55;
margin: 6px 0;
}
/* text puternic */
.vf-result strong{
color: #000;
font-weight: 800;
}
/* separator punctat pentru total */
.vf-result .dsep{
margin-top: 10px !important;
padding-top: 8px !important;
border-top: 1px dashed rgba(0,0,0,.25) !important;
}
/* total lunar evidențiat */
.vf-result .is-total{
display: inline-flex;
align-items: baseline;
gap: 6px;
font-weight: 800;
font-size: 19px;
padding: 6px 14px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(245,245,245,.6));
box-shadow:
inset 0 1px 1px rgba(255,255,255,.7),
0 0 14px rgba(255,255,255,.3);
}
/* efect la hover — ușor glow */
.vf-result:hover{
box-shadow:
inset 0 1px 1px rgba(255,255,255,.4),
0 10px 36px rgba(0,0,0,.3),
0 0 42px rgba(255,255,255,.25);
transform: translateY(-1px);
}
/* responsive */
@media (max-width: 980px){
.vf-result > div{ grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px 14px; }
.vf-result > div > div:not(:first-child)::before{ display: none; }
}
/* ===== Mortgage Result — PLATINUM ===== */
.vf-result,
.vf-result--platinum{
position: relative;
border: 2px solid rgba(0,0,0,.82); /* ramă neagră elegantă */
border-radius: 0; /* fără radius */
/* straturi pentru sticlă + reflexie luminoasă, potrivit pe silver/graphite bg */
background:
linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.15)) 0 0/100% 100% no-repeat,
linear-gradient(145deg, rgba(255,255,255,.92), rgba(230,232,235,.72)) 0 0/100% 100% no-repeat;
backdrop-filter: blur(12px) saturate(130%);
-webkit-backdrop-filter: blur(12px) saturate(130%);
color: #111;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
inset 0 -1px 0 rgba(0,0,0,.08),
0 14px 40px rgba(0,0,0,.28);
overflow: hidden;
transition: box-shadow .25s ease, transform .25s ease;
}
/* subtil “shine” pe muchii */
.vf-result::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
background: linear-gradient(120deg, rgba(255,255,255,.28), transparent 55%);
mix-blend-mode: screen;
}
/* grilă internă (override peste stilurile inline generate din JS) */
.vf-result > div{
display: grid !important;
grid-template-columns: 1.15fr 1fr 1fr !important;
gap: 30px !important;
align-items: start !important;
padding: 28px 32px !important;
}
/* coloanele + separatoare verticale fine */
.vf-result > div > div{ padding: 4px 18px; }
.vf-result > div > div:not(:first-child){ position: relative; }
.vf-result > div > div:not(:first-child)::before{
content:""; position:absolute; left:-15px; top:0; bottom:0; width:1px;
background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.28), rgba(0,0,0,.10));
}
/* headerele de coloană (primul div din fiecare coloană) */
.vf-result > div > div > div:first-child{
font-weight: 800 !important;
font-size: 16px !important;
text-transform: uppercase;
letter-spacing: .35px;
margin: 0 0 10px !important;
color: #0b0d11;
}
/* text & valori */
.vf-result div{ line-height: 1.55; margin: 6px 0; }
.vf-result strong{ font-weight: 800; color:#000; }
/* separator pentru total + accent discret */
.vf-result .dsep{
margin-top: 10px !important;
padding-top: 8px !important;
border-top: 1px dashed rgba(0,0,0,.28) !important;
}
.vf-result .is-total{
display:inline-flex; align-items:baseline; gap:6px;
font-weight: 800; font-size: 19px;
padding: 6px 12px; border-radius: 6px;
border: 1px solid rgba(0,0,0,.18);
background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(245,245,245,.65));
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 12px rgba(255,255,255,.22);
}
/* hover subtil — glow premium */
.vf-result:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 18px 56px rgba(0,0,0,.32),
0 0 40px rgba(255,255,255,.18);
transform: translateY(-1px);
}
/* responsive */
@media (max-width: 980px){
.vf-result > div{ grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px 14px !important; }
.vf-result > div > div:not(:first-child)::before{ display:none; }
}
/* ===== Legal Card – poziționare și stil final ===== */
.zx-legal-section {
padding-top: 10px; /* cardul mai aproape de formular */
padding-bottom: 60px; /* adaugă spațiu înainte de footer */
display: flex;
justify-content: center;
background: #fff;
}
.zx-legal__wrap {
width: min(1180px, 95vw);
margin-inline: auto;
}
/* Card elegant, fără colțuri rotunjite, cu ramă gri închis */
.zx-legal-card {
border: 1.8px solid #2e2e36; /* gri închis premium */
border-radius: 0; /* fără colțuri rotunjite */
background: #fff;
color: #222;
padding: clamp(18px, 2.2vw, 28px);
box-shadow: 0 2px 10px rgba(0,0,0,.04);
margin-bottom: 0; /* evită spațiul suplimentar de jos */
}
/* Titlu elegant */
.zx-legal-card__title {
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(17px, 2vw, 20px);
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
/* Text mai mic, rafinat */
.zx-legal-card__body {
font-family: Inter, system-ui, sans-serif;
font-size: clamp(13px, 1.3vw, 15px);
line-height: 1.75;
color: #2d2d2d;
}
.zx-legal-card__body p {
margin: 0 0 14px;
}
.zx-legal-card strong {
color: #0b0f1a;
font-weight: 700;
}
.zx-legal-card a {
color: #0b0f1a;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Checkbox-uri */
.legal-accept {
display: flex;
align-items: center;
gap: .55rem;
margin-top: 10px;
color: #222;
font-weight: 600;
}
.legal-accept input {
width: 18px;
height: 18px;
accent-color: #0b0f1a;
}
/* Responsive */
@media (max-width: 640px) {
.zx-legal__wrap {
width: 94vw;
}
.zx-legal-card {
padding: 16px;
}
.zx-legal-card__body {
font-size: 13px;
line-height: 1.7;
}
}
.zx-legal-section {
padding-top: 0; /* urcă-l complet lângă formular */
padding-bottom: 60px; /* rămâne distanța față de footer */
display: flex;
justify-content: center;
background: #fff;
}
.zx-legal-card__body {
font-size: clamp(12px, 1.1vw, 14px); /* mai mic decât 13–15px */
line-height: 1.65; /* puțin mai strâns */
color: #2d2d2d;
}
/* TOAST – CARD PREMIUM CENTRAT */
.vx-toast{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.94);
/* dimensiuni mai mari */
max-width: 480px;
width: min(90vw, 480px);
padding: 20px 24px;
/* layout card */
display: flex;
align-items: flex-start;
gap: 14px;
text-align: left;
/* look premium / valorpropi */
background: radial-gradient(circle at top left,
rgba(15, 23, 42, 0.98),
rgba(15, 23, 42, 0.96));
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.55);
box-shadow:
0 28px 80px rgba(15, 23, 42, 0.75),
0 0 0 1px rgba(15, 23, 42, 0.9);
color: #e5e7eb;
font-size: 15px;
line-height: 1.5;
/* efect glassy, unde e suportat */
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 99999; /* peste tot restul */
}
/* icon rotund în stânga (check pentru succes) */
.vx-toast::before{
content: "✓";
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
background: radial-gradient(circle at 30% 0%,
#a5f3fc,
#14b8a6);
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7),
0 10px 25px rgba(20, 184, 166, 0.6);
color: #0b1120;
}
/* stare vizibilă (când JS adaugă .is-visible) */
.vx-toast.is-visible{
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* VARIANTA DE EROARE */
.vx-toast--error{
background: radial-gradient(circle at top left,
rgba(30, 7, 16, 0.98),
rgba(127, 29, 29, 0.98));
border-color: rgba(248, 113, 113, 0.6);
}
.vx-toast--error::before{
content: "!";
background: radial-gradient(circle at 30% 0%,
#fee2e2,
#ef4444);
box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.8),
0 10px 25px rgba(239, 68, 68, 0.7);
color: #7f1d1d;
}