/* ═══════════════════════════════════════════════════════════════════════
   VIANTO DESIGN V2 - strat de rafinare vizuala (22 sep 2026)
   Se incarca DUPA style.css, doar cand vpDesignV2() e activ (?design=v2 -> cookie 30 zile; ?design=v1 il stinge).
   Principiu: acelasi limbaj vizual (crem, ink, magenta, Cormorant + DM Sans), executat mai fin.
   Nu redefineste layout-uri; suprascrie umbre, tipografie, stari, icoane, micro-interactiuni.
   La trecerea pe default se poate lipi la finalul style.css (o singura cerere HTTP).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens ─────────────────────────────────────────────────────── */
:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --sh-rest:0 1px 2px rgba(26,26,26,.03),0 12px 32px -20px rgba(26,26,26,.14);
  --sh-hover:0 2px 4px rgba(26,26,26,.04),0 20px 44px -18px rgba(26,26,26,.20);
  --sh-float:0 1px 2px rgba(26,26,26,.04),0 8px 28px -10px rgba(26,26,26,.16);
  --ink-08:rgba(26,26,26,.08);
}

/* ── 1. Tipografie ─────────────────────────────────────────────────── */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,.hero-h1,.sec-head h2,.prop-title,.svc-title,.team-name,.blog-title,.f-success-msg{text-wrap:balance}
p,li,.svc-desc,.seo-content p,.prop-desc p,.about-txt p,.blog-exc{text-wrap:pretty}
.prop-price,.prop-price-lg,.hero-stat-num,.prop-attr-card .val,.piata-widget-card .wvalue,.sidebar-phone,.wvalue{font-variant-numeric:tabular-nums lining-nums}
.eyebrow{letter-spacing:.2em;color:rgba(26,26,26,.55)}
.s-group label,.f-group label,.footer-col h3,.svc-n,.team-role,.prop-attr-card .lbl,.blog-tag,.prop-chip{letter-spacing:.14em}
::selection{background:rgba(200,23,154,.14);color:var(--ink)}
.sec-head h2{letter-spacing:-.025em}
.sec-head p{max-width:460px}

/* ── 2. Focus vizibil unitar (tastatura), fara inel la click ───────── */
:where(a,button,[tabindex],select,input,textarea,summary):focus-visible{outline:2px solid var(--mag);outline-offset:3px;border-radius:8px}
:where(.nav-cta,.btn-dark,.btn-ghost,.vezi-toate,.contact-btn,.s-btn,.s-btn-reset,.s-btn-adv,.mf-chip,.prop-chip-lg):focus-visible{border-radius:100px}
:where(.prop-card):focus-visible{border-radius:var(--r-lg)}

/* ── 3. Butoane: apasare pe tot ce e buton + arrow nudge ───────────── */
:where(.nav-cta,.btn-dark,.btn-ghost,.vezi-toate,.s-btn,.s-btn-reset,.s-btn-adv,.contact-btn,.mf-chip,.mf-btn,.f-btn,.btn-primary,.load-more button,.piata-tab,.fc-city-btn,.fc-preset-btn):active{transform:scale(.97);transition-duration:.1s}
.btn-dark svg,.btn-ghost svg,.contact-btn-secondary svg,.blog-link svg{transition:transform .25s var(--ease-out)}
.btn-dark:hover svg,.btn-ghost:hover svg{transform:translateX(3px)}
.blog-link{transition:color .2s}
.blog-link:hover{gap:5px}
.blog-link:hover svg{transform:translateX(3px)}
/* Linkuri in text: underline fin, ridicat, care se intensifica la hover */
.article-content a,.seo-content p a,.prop-desc a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(29,78,216,.35);transition:text-decoration-color .2s,color .2s}
.article-content a:hover,.seo-content p a:hover,.prop-desc a:hover{text-decoration-color:currentColor}

/* ── 4. Nav: sticla, linie fina, underline animat ──────────────────── */
.nav{background:rgba(250,249,247,.78);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:transparent;box-shadow:0 1px 0 rgba(26,26,26,.06);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav.at-top{background:transparent;box-shadow:none}
.nav-links > a:not(.nav-cta){position:relative;padding:4px 0}
.nav-links > a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.nav-links > a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta{box-shadow:var(--sh-float)}
.nav-cta:hover{box-shadow:var(--sh-hover)}

/* ── 5. Carduri de proprietate ─────────────────────────────────────── */
.prop-card{border-color:var(--ink-08);box-shadow:var(--sh-rest);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .prop-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
}
/* poza: shimmer cat se incarca (se opreste singur dupa 10 s), voal discret jos pentru puncte si etichete */
.prop-photo{background:linear-gradient(110deg,var(--cream-2) 30%,#fdfcfb 50%,var(--cream-2) 70%);background-size:220% 100%;animation:v2shimmer 1.6s ease-in-out 6}
.prop-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to top,rgba(26,26,26,.26),transparent);pointer-events:none;z-index:2}
@keyframes v2shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.prop-chip{box-shadow:0 1px 3px rgba(26,26,26,.10)}
.chip-rent{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card-dots{bottom:12px;gap:6px}
.card-dot{width:5px;height:5px;background:rgba(255,255,255,.55);transition:transform .25s var(--ease-out),background .25s}
.card-dot.on{transform:scale(1.4);background:#fff}
.card-arr{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.16);transition:opacity .2s,transform .2s var(--ease-out),background .2s}
.card-arr:hover{background:#fff}
.prop-photo-ph,.gallery-main-ph{color:rgba(26,26,26,.22);opacity:1}
.prop-photo-ph .vp-ico,.gallery-main-ph .vp-ico{width:40px;height:40px;stroke-width:1.25}
.prop-price{letter-spacing:-.01em}
.prop-name{letter-spacing:-.005em}
.prop-attrs{border-top-color:var(--ink-08)}

/* ── 6. Skeleton in loc de spinner cat se incarca lista ────────────── */
.prop-skel{background:#fff;border-radius:var(--r-lg);border:1px solid var(--ink-08);overflow:hidden;box-shadow:var(--sh-rest)}
.prop-skel .sk-photo{height:224px;background:linear-gradient(110deg,var(--cream-2) 30%,#fdfcfb 50%,var(--cream-2) 70%);background-size:220% 100%;animation:v2shimmer 1.6s ease-in-out infinite}
.prop-skel .sk-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.prop-skel .sk-line{height:12px;border-radius:6px;background:var(--cream-2)}
.prop-skel .sk-line.w1{width:38%;height:22px;margin-bottom:4px}
.prop-skel .sk-line.w2{width:88%}
.prop-skel .sk-line.w3{width:52%}
.prop-skel .sk-line.w4{width:60%;margin-top:8px}
.prop-state{color:var(--ink-30)}
.prop-state .vp-ico{width:36px;height:36px;stroke-width:1.25;margin:0 auto 12px;display:block;color:var(--ink-30)}
.api-note .vp-ico{width:16px;height:16px;flex:none;color:var(--mag)}
@media (prefers-reduced-motion:reduce){.prop-photo,.prop-skel .sk-photo{animation:none}}

/* ── 7. Servicii, echipa, blog, despre: umbre stratificate, icoane ─── */
.svc-card,.team-card,.blog-card,.hero-card,.about-val{border-color:var(--ink-08);box-shadow:var(--sh-rest)}
.svc-card,.team-card,.blog-card,.hero-card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.svc-card:hover,.team-card:hover,.blog-card:hover,.hero-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.svc-icon{width:46px;height:46px;border-radius:14px;background:var(--mag-soft);color:var(--mag);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:22px;line-height:1}
.svc-icon .vp-ico{width:22px;height:22px}
.svc-n{color:var(--ink-30)}
.team-photo .vp-ico{width:56px;height:56px;stroke-width:1;color:rgba(26,26,26,.16)}
.blog-thumb .vp-ico{width:34px;height:34px;stroke-width:1.25;color:rgba(26,26,26,.18)}
.about-img .vp-ico{width:72px;height:72px;stroke-width:1;color:var(--ink-10)}
.f-success-icon{display:flex;justify-content:center;color:#059669}
.f-success-icon .vp-ico{width:44px;height:44px;stroke-width:1.5}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article-meta .vp-ico{width:14px;height:14px;color:var(--ink-30)}
.vp-ico{display:inline-block;vertical-align:middle;flex:none}

/* (8 si 11 sunt prefixate cu html.v2: piata.css si <style>-ul din proprietate.php vin DUPA style-v2.css in document si ar castiga la specificitate egala) */
/* ── 8. Sectiunea de piata (homepage): grila echilibrata, cifre tabulare ── */
html.v2 #piataWidget.piata-widget{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:920px}
html.v2 .piata-widget-card{border-color:var(--ink-08);box-shadow:var(--sh-rest);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
html.v2 .piata-widget-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
html.v2 .piata-widget-card .wlabel{letter-spacing:.02em}
@media(max-width:600px){html.v2 #piataWidget.piata-widget{grid-template-columns:1fr 1fr;gap:10px}}

/* ── 9. Cautare: card mai compact pe mobil, focus pe grup ──────────── */
.search-bar{border-color:var(--ink-08);box-shadow:var(--sh-float)}
.s-group{border-radius:10px;transition:background .2s}
.s-group:focus-within{background:var(--cream)}
@media(max-width:768px){
  .s-group{padding:10px 12px}
  .s-group label{font-size:10px}
}

/* ── 10. Footer: ierarhie mai calma ────────────────────────────────── */
.footer{border-top:1px solid rgba(255,255,255,.06)}
.footer-col a{transition:color .2s,transform .2s var(--ease-out);display:inline-block}
.footer-col a:hover{transform:translateX(2px)}

/* ── 11. Pagina de proprietate ─────────────────────────────────────── */
html.v2 .prop-price-lg{font-family:var(--serif);font-size:38px;font-weight:500;letter-spacing:-.01em}
html.v2 .prop-price-lg small{font-family:var(--sans);font-size:15px;font-weight:400}
html.v2 .prop-title{font-weight:500;letter-spacing:-.015em}
html.v2 .prop-chip-lg{letter-spacing:.1em}
/* atribute: fara cutii, o linie cu separatoare, valori in serif */
html.v2 .prop-attrs-grid{justify-content:flex-start;gap:0;margin-bottom:36px;padding:14px 0;border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)}
html.v2 .prop-attr-card{background:transparent;border:0;border-right:1px solid var(--ink-08);border-radius:0;padding:4px 28px 4px 0;margin-right:28px;text-align:left;gap:2px;min-width:0}
html.v2 .prop-attr-card:last-child{border-right:0;margin-right:0;padding-right:0}
html.v2 .prop-attr-card .val{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.1}
html.v2 .prop-attr-card .lbl{font-size:10px}
@media(max-width:600px){
  html.v2 .prop-attrs-grid{gap:0;row-gap:14px;flex-wrap:wrap}
  html.v2 .prop-attr-card{padding:0 18px 0 0;margin-right:18px}
}
html.v2 .sidebar-card{border-color:var(--ink-08);box-shadow:var(--sh-float)}
html.v2 .sidebar-phone{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:0}
html.v2 .contact-btn{transition:background .2s,border-color .2s,color .2s,transform .1s}
html.v2 .contact-btn-primary{box-shadow:var(--sh-float)}
html.v2 .detail-section-header{border-bottom-width:1px}
html.v2 .detail-row{border-bottom-color:var(--ink-05)}
html.v2 .detail-label{color:var(--ink-60)}
html.v2 .gallery-hero,html.v2 .gallery-single,html.v2 .gallery-thumb,html.v2 .gallery-grid img{border-radius:var(--r-lg)}
/* desktop: sidebarul e sticky si are deja toate butoanele, bara de sub galerie e dublura */
@media(min-width:1025px){
  html.v2 .prop-contactbar{display:none}
  html.v2 .prop-sidebar{top:90px}
}
/* mobil: bara ramane, cu sticla ca sa nu taie brutal continutul */
@media(max-width:1024px){
  html.v2 .prop-contactbar{background:rgba(250,249,247,.86);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
}
html.v2 .poi-item .poi-icon{display:flex;align-items:center;justify-content:center}
html.v2 .poi-item .poi-icon .vp-ico{width:18px;height:18px}