/*
Theme Name: Veritas Kliniken
Description: Tema custom Veritas Kliniken (chirurgie plastică și estetică, București).
Version: 2.0
Text Domain: veritas-kliniken
*/

:root{
  --navy:#2F2F54; --navy-soft:#3D3D66; --ink:#0A0B0E; --white:#FFFFFF;
  --fog:#EEF1F5; --line:#DDE2E9; --slate:#5D6677; --text-2:#2F3644;
  --display:'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body:'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  --r:20px; --r-sm:12px; --wrap:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0; letter-spacing:-.025em; color:var(--ink)}
h2{font-size:clamp(34px,3.6vw,52px); line-height:1.05}
p{margin:0}
.kicker{font-size:15px; color:var(--slate); margin-bottom:18px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r-sm); font:500 16px/1 var(--body); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .2s, color .2s, border-color .2s}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--ink)}
.btn-quiet{background:var(--fog); color:var(--navy)}
.btn-quiet:hover{background:var(--line)}
.btn-white{background:#fff; color:var(--navy)}
.btn-white:hover{background:var(--fog)}
.arrow{transition:transform .2s}
a:hover .arrow{transform:translateX(4px)}

/* header */
.header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.header .wrap{display:flex; align-items:center; gap:48px; min-height:84px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--navy); line-height:1}
.brand .mark{width:66px; height:auto}
.brand .txt{display:flex; flex-direction:column; gap:7px}
.brand .word{width:165px; height:auto}
.brand span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate)}
.nav{display:flex; gap:32px; margin-right:auto; font-size:15.5px}
.nav a{text-decoration:none; color:var(--text-2)}
.nav a:hover{color:var(--navy)}
.h-tel{text-decoration:none; font-size:15.5px; color:var(--text-2); white-space:nowrap}
.header .btn{min-height:46px; padding:0 22px; font-size:15px}
.burger{display:none; width:46px; height:46px; border-radius:var(--r-sm); border:none; background:var(--fog); cursor:pointer; align-items:center; justify-content:center; color:var(--navy)}

/* hero */
.hero{padding:32px 0 112px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:30px; padding-bottom:40px}
.hero h1{font-size:clamp(44px,4.9vw,76px); line-height:1; letter-spacing:-.04em}
.hero h1 span{color:var(--slate)}
.hero .lead{font-size:20px; line-height:1.5; color:var(--text-2); max-width:500px}
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 28px; font-size:15px; color:var(--slate)}
.hero-meta b{color:var(--ink); font-weight:500}
.hero-visual{position:relative}
.hero-visual img{width:100%; height:min(78vh,720px); min-height:520px; object-fit:cover; border-radius:var(--r); object-position:60% 30%}

/* planner – elementul semnătură */
.planner{position:absolute; left:-72px; bottom:-56px; width:380px; background:#fff; border-radius:var(--r); padding:26px; box-shadow:0 30px 60px -20px rgba(13,31,60,.28), 0 0 0 1px rgba(13,31,60,.04)}
.planner h3{font-size:19px; letter-spacing:-.01em; margin-bottom:16px}
.seg{display:grid; grid-template-columns:.8fr .7fr .8fr 1.25fr; background:var(--fog); border-radius:10px; padding:4px; gap:4px}
.seg button{white-space:nowrap; font:500 13.5px var(--body); border:none; background:transparent; color:var(--text-2); min-height:40px; border-radius:7px; cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(13,31,60,.14)}
.plan{margin-top:18px; display:flex; flex-direction:column; gap:10px; min-height:118px}
.plan .procs{font-size:15px; color:var(--text-2)}
.plan dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14.5px}
.plan dt{color:var(--slate)}
.plan dd{margin:0; text-align:right; font-weight:500}
.planner .btn{width:100%; margin-top:18px}
.pl-all{display:block; text-align:center; margin-top:12px; font-size:14px; color:var(--slate); text-underline-offset:3px}
.pl-all:hover{color:var(--navy)}

/* servicii */
.services{padding:40px 0 120px}
.s-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px}
.s-head p{max-width:420px; color:var(--slate)}
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.tile{text-decoration:none; display:flex; flex-direction:column; gap:16px}
.tile .ph{overflow:hidden; border-radius:var(--r)}
.tile img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.035)}
.tile h3{font-size:24px; display:flex; justify-content:space-between; align-items:center}
.tile p{font-size:15px; color:var(--slate); margin-top:-8px}

/* doctor */
.doctor{background:var(--fog); padding:120px 0}
.doctor .wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:88px; align-items:center}
.doctor img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); background:#d9dee6}
.doc-copy{display:flex; flex-direction:column; gap:26px}
.doc-copy .role{font-family:var(--display); font-size:24px; line-height:1.3; letter-spacing:-.015em; color:var(--text-2); max-width:540px}
.doc-copy .bio{color:var(--text-2); max-width:540px}
.doc-links{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; background:#fff; text-decoration:none; font-size:14.5px; color:var(--navy)}
.chip:hover{background:var(--navy); color:#fff}

/* proces */
.process{padding:120px 0}
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:52px; counter-reset:s}
.step{background:var(--fog); border-radius:var(--r); padding:30px 28px 34px; display:flex; flex-direction:column; gap:12px}
.step::before{counter-increment:s; content:counter(s); font-family:var(--display); font-size:15px; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.step h3{font-size:21px}
.step p{font-size:15.5px; color:var(--text-2)}
.step small{font-size:13.5px; color:var(--slate); margin-top:auto; padding-top:8px}

/* faq */
.faq-sec{padding:0 0 120px}
.faq-sec .wrap{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:88px}
.faq-sec .side p{color:var(--slate); margin-top:20px; max-width:340px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; font-family:var(--display); font-size:20px; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none; width:32px; height:32px; border-radius:50%; background:var(--fog); position:relative; transition:background .2s}
.faq summary i::before,.faq summary i::after{content:''; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--navy); transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .25s}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{padding:0 56px 26px 0; color:var(--text-2)}

/* contact */
.contact{padding:0 0 40px}
.contact-box{background:var(--navy); color:#fff; border-radius:28px; padding:72px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px}
.contact-box h2{color:#fff}
.contact-box .lead{color:#C3CBD8; margin:20px 0 40px; max-width:400px}
.cinfo{display:flex; flex-direction:column; gap:22px}
.cinfo div span{display:block; font-size:13.5px; color:#9FAAC0; margin-bottom:2px}
.cinfo a{color:#fff; text-decoration:none}
.cinfo a:hover{text-decoration:underline}
form{background:#fff; color:var(--ink); border-radius:var(--r); padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
form .full{grid-column:1/-1}
label{display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:500; color:var(--text-2)}
label small{font-weight:400; color:var(--slate)}
input,select,textarea{font:inherit; font-size:16px; padding:14px 16px; border-radius:10px; border:1px solid var(--line); background:var(--fog); color:var(--ink); width:100%; transition:border-color .2s, background .2s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy); background:#fff}
textarea{resize:vertical}
.check{flex-direction:row; align-items:flex-start; gap:12px; font-weight:400; font-size:14px}
.check input{width:20px; height:20px; padding:0; margin:1px 0 0; flex:none; accent-color:var(--navy)}
form .btn{width:100%}
.ok{display:none; background:var(--fog); border-radius:10px; padding:14px 16px; font-weight:500; color:var(--navy)}

/* footer */
.footer{padding:56px 0 48px; font-size:14.5px; color:var(--slate)}
.footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 48px}
.f-brand{display:flex; flex-direction:column; gap:14px}
.f-brand img{width:150px; height:auto}
.footer nav{display:flex; flex-wrap:wrap; gap:10px 28px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--navy)}

.mbar{display:none}

/* intrare hero */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *:nth-child(2){animation-delay:.08s}
  .hero-copy > *:nth-child(3){animation-delay:.16s}
  .hero-copy > *:nth-child(4){animation-delay:.24s}
  .hero-visual img{animation:fade 1.1s ease both}
  .planner{animation:rise .9s .35s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (max-width:1120px){
  .h-tel{display:none}
  .nav{gap:22px}
  .planner{left:24px; bottom:-48px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  body{font-size:16px; padding-bottom:78px}
  .wrap{padding:0 20px}
  .header .wrap{min-height:66px; gap:12px}
  .brand{margin-right:auto}
  .brand{gap:10px}
  .brand .mark{width:50px}
  .brand .word{width:132px}
  .brand span{font-size:9.5px; letter-spacing:.16em}
  .nav,.header .btn{display:none}
  .burger{display:inline-flex}
  .nav.open{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:#fff; padding:8px 20px 20px; box-shadow:0 20px 30px -20px rgba(13,31,60,.25)}
  .nav.open a{padding:16px 0; font-size:19px; border-bottom:1px solid var(--line)}
  .hero{padding:8px 0 64px}
  .hero .wrap{grid-template-columns:1fr; gap:28px}
  .hero-copy{padding-bottom:0; gap:22px}
  .hero .lead{font-size:18px}
  .ctas .btn{flex:1 1 auto}
  .hero-visual img{height:380px; min-height:0}
  .planner{position:relative; left:auto; bottom:auto; width:auto; margin:-64px 12px 0}
  .services{padding:16px 0 80px}
  .tiles{gap:14px}
  .tile h3{font-size:20px}
  .doctor,.process{padding:80px 0}
  .doctor .wrap,.faq-sec .wrap,.contact-box{grid-template-columns:1fr; gap:36px}
  .steps{grid-template-columns:1fr}
  .faq-sec{padding-bottom:80px}
  .faq summary{font-size:18px}
  .faq details p{padding-right:0}
  .contact-box{padding:36px 20px; border-radius:22px}
  form{grid-template-columns:1fr; padding:22px}
  .mbar{display:grid; grid-template-columns:1fr 1fr 1.6fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 -1px 0 var(--line)}
  .mbar a{display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:var(--r-sm); background:var(--fog); color:var(--navy); text-decoration:none; font-weight:500; font-size:15px}
  .mbar a.go{background:var(--navy); color:#fff}
}
@media (max-width:480px){
  .tiles{grid-template-columns:1fr 1fr}
  .tile p{display:none}
  .seg button{font-size:13px}
}

/* preturi */
.prices{padding:0 0 120px}
.prices .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:88px; align-items:start}
.pr-side{position:sticky; top:110px; display:flex; flex-direction:column; gap:22px; min-width:0}
.pr-side .kicker{margin:0}
.pr-note{color:var(--slate); max-width:320px}
.pr-tabs{display:flex; flex-direction:column; gap:4px; margin-top:6px}
.pr-tabs button{font:500 16px var(--body); text-align:left; padding:13px 16px; min-height:46px; border:none; border-radius:10px; background:transparent; color:var(--text-2); cursor:pointer; transition:background .2s, color .2s}
.pr-tabs button:hover{background:var(--fog)}
.pr-tabs button[aria-selected="true"]{background:var(--navy); color:#fff}
.pr-cta{align-self:flex-start; margin-top:10px}
.pr-panel[hidden]{display:none}
.pr-panel h3{font-size:30px; margin-bottom:8px}
.pr-panel h4{font:600 13px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:36px 0 4px}
.pr-sub{color:var(--slate); font-size:15.5px; margin-bottom:4px}
.pr-list{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--ink)}
.pr-panel h4 + .pr-list, .pr-sub + .pr-list{margin-top:10px}
.pr-list li{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:15px 0; border-bottom:1px solid var(--line)}
.pr-list span{min-width:0; font-size:17px}
.pr-list small{display:block; font-size:14px; color:var(--slate); margin-top:2px}
.pr-list b{flex:none; font-family:var(--display); font-weight:500; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--navy)}
.pr-list b i{font-style:normal; font-family:var(--body); font-size:13.5px; color:var(--slate); margin-left:6px}
.pr-foot{margin-top:20px; font-size:15px; color:var(--text-2); background:var(--fog); border-radius:var(--r-sm); padding:16px 18px}
@media (max-width:880px){
  .prices{padding:0 0 80px}
  .prices .wrap{grid-template-columns:minmax(0,1fr); gap:28px}
  .pr-side{position:static; gap:14px}
  .pr-tabs{flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; margin:4px -20px 0; padding-left:20px; padding-right:20px; scrollbar-width:none}
  .pr-tabs::-webkit-scrollbar{display:none}
  .pr-tabs button{flex:none; background:var(--fog); white-space:nowrap; padding:10px 16px; font-size:15px}
  .pr-cta{display:none}
  .pr-panel h3{font-size:24px}
  .pr-list li{gap:16px}
  .pr-list span{font-size:16px}
  .pr-list b{font-size:16.5px}
  .pr-list b i{display:block; margin:2px 0 0; text-align:right}
}

.page-preturi .prices{padding-top:56px}
@media (max-width:880px){.page-preturi .prices{padding-top:24px}}

/* inainte / dupa */
.ba{margin-top:44px}
.ba-note{color:var(--slate); font-size:14.5px; margin:4px 0 0}
.ba-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.ba figure{margin:0}
.ba-open{display:block; width:100%; padding:0; border:0; background:var(--fog); border-radius:var(--r-sm); overflow:hidden; cursor:zoom-in; aspect-ratio:1/1}
.ba-open img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s}
.ba-open:hover img{transform:scale(1.02)}
.ba figcaption{font-size:14.5px; color:var(--text-2); margin-top:8px}
.ba-dlg{border:0; padding:0; background:transparent; max-width:min(92vw,900px); max-height:92vh}
.ba-dlg::backdrop{background:rgba(10,14,30,.82)}
.ba-dlg img{display:block; max-width:100%; max-height:88vh; border-radius:12px}
.ba-x{position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:50%; border:0; background:#fff; color:var(--navy); font-size:24px; line-height:1; cursor:pointer}
@media (max-width:560px){.ba-grid{grid-template-columns:minmax(0,1fr)}}
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}

.ba-reveal{position:relative; display:block; width:100%; padding:0; border:0; background:var(--fog); border-radius:var(--r-sm); overflow:hidden; cursor:pointer; aspect-ratio:1/1}
.ba-reveal img{display:block; width:100%; height:100%; object-fit:cover; filter:blur(28px); transform:scale(1.15); transition:filter .3s}
.ba-reveal span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; font:500 15px var(--body); color:#fff; background:rgba(20,24,54,.55)}
.ba-sens.on .ba-reveal img{filter:none; transform:none}
.ba-sens.on .ba-reveal span{display:none}

.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.err{display:none; background:#fdecec; border-radius:10px; padding:14px 16px; font-weight:500; color:#7a1c1c}
.err a{color:inherit; text-decoration:underline}

#lead button[type=submit]{display:inline-flex; align-items:center; justify-content:center; gap:10px}
#lead .spin{display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:vkspin .7s linear infinite}
#lead button.loading .spin{display:inline-block}
#lead button:disabled{opacity:.85; cursor:default}
@keyframes vkspin{to{transform:rotate(360deg)}}

/* "de la" in lista de preturi */
.pr-list b{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; text-align:right}
.pr-list b .from{font:500 11.5px var(--body); letter-spacing:.06em; text-transform:uppercase; font-style:normal; color:var(--slate); margin-bottom:3px}
.pr-list b i{margin:3px 0 0 !important; display:block}
.pr-list li{align-items:center}

/* procedura cu descriere expandabila */
.pr-list li.pr-item{display:block; padding:0}
.pr-item summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; cursor:pointer}
.pr-item summary::-webkit-details-marker{display:none}
.pr-item summary > span{flex:1; min-width:0}
.pr-item summary:hover > span{color:var(--navy)}
.pr-item .chev{flex:none; width:28px; height:28px; border-radius:50%; background:var(--fog); position:relative; transition:background .2s, transform .25s}
.pr-item .chev::before{content:""; position:absolute; left:50%; top:45%; width:7px; height:7px; border-right:1.6px solid var(--navy); border-bottom:1.6px solid var(--navy); transform:translate(-50%,-50%) rotate(45deg)}
.pr-item details[open] .chev{transform:rotate(180deg); background:var(--navy)}
.pr-item details[open] .chev::before{border-color:#fff}
.pr-desc{margin:-4px 48px 18px 0; color:var(--text-2); font-size:15.5px; line-height:1.6; max-width:560px}
.pr-item summary:focus-visible{outline:2px solid var(--navy); outline-offset:4px; border-radius:6px}
@media (max-width:880px){ .pr-item summary{gap:12px} .pr-item .chev{width:24px; height:24px} .pr-desc{margin-right:0; font-size:15px} }