/* Secțiunea „Aplicația DenisTheBarber" (homepage). Apare doar când în admin e aleasă programarea de pe site (Barberly) —
   login/content-lib.php → bookingApply() o scoate în modul MERO sau când nu există linkuri spre magazine. */
.app-promo{padding:clamp(40px,6vw,96px) clamp(16px,5vw,72px);background:var(--paper,#050505)}
.app-promo[hidden]{display:none}
/* deasupra hero-ului (Barberly): loc pentru meniul fix; hero-ul de dedesubt nu mai are nevoie de spațiul lui de sus */
.app-promo.is-top{padding-top:250px;padding-bottom:0}
.app-promo.is-top + .hero{min-height:auto;padding-top:clamp(56px,7vw,96px)}
/* „Programare online" a fost scoasă de pe homepage: „Experiență" vine direct după hero, fără golul dintre ele */
@media (min-width:901px){.hero:has(+ .experience){min-height:auto;padding-top:280px;padding-bottom:clamp(40px,5vw,64px)}}
.hero + .experience{padding-top:clamp(40px,5vw,72px)}
@media (max-width:900px){.app-promo.is-top{padding-top:190px}}
/* „Descoperă DenisTheBarber": pe desktop avea 230–270px gol deasupra textului (loc rămas de la un vizual scos) */
@media (min-width:901px){.local-seo-text{padding-top:clamp(16px,2vw,32px)}}
/* „Descoperă DenisTheBarber" stă acum în „Experiență", în locul pozei salonului (stânga pe desktop, după text pe telefon) */
.experience .experience-discover{max-width:620px;padding:0;margin:0}
.experience .experience-discover .local-seo-desc{color:rgba(255,255,255,.78)}
@media (max-width:900px){.experience .experience-discover{order:4;max-width:none;padding-top:28px;border-top:1px solid rgba(255,122,26,.18)}}

/* ---- Bara de sus „Programează-te mai rapid din aplicație" (mașină de scris, apoi se plimbă) ----
   Stă fixă sub anunțul din admin (dacă e activ); tot ce e fix sus (meniul, bara cu programul) și pagina coboară cu înălțimea ei. */
:root{--appbar-h:0px}
html:has(.app-topbar:not([hidden])){--appbar-h:36px}
body{padding-top:calc(var(--announcement-height,0px) + var(--appbar-h))}
.site-header,.mobile-top-info,.mobile-schedule-panel.is-open{margin-top:calc(var(--announcement-height,0px) + var(--appbar-h))}
.app-topbar{position:fixed;left:0;right:0;top:var(--announcement-height,0px);z-index:149;display:flex;align-items:center;gap:10px;height:var(--appbar-h);padding:0 8px 0 0;
  background:linear-gradient(90deg,var(--atb-edge,#140c05),var(--atb-bg,#1e1208) 50%,var(--atb-edge,#140c05));border-bottom:1px solid color-mix(in srgb,var(--atb-line,#ff7a1a) 45%,transparent);box-shadow:0 3px 16px rgba(0,0,0,.35);color:var(--atb-fg,#ffd9b8);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.01em}
.app-topbar[hidden]{display:none}
.app-topbar:focus-visible{outline:2px solid #ff7a1a;outline-offset:-3px}
.app-topbar-viewport{position:relative;flex:1;min-width:0;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent)}
.app-topbar-track{position:absolute;left:16px;top:0;display:flex;align-items:center;height:100%;white-space:nowrap;will-change:transform}
.app-topbar-track b{color:var(--atb-hl,#ff9a45);font-weight:800}
.app-topbar-gap{display:inline-block}
.app-topbar-caret{display:inline-block;width:2px;height:1.1em;margin-left:3px;background:#ff7a1a;vertical-align:middle;animation:appCaret .8s steps(1) infinite;background:var(--atb-line,#ff7a1a)}
.app-topbar.is-scrolling .app-topbar-caret,.app-topbar.is-done .app-topbar-caret{display:none}
/* modelele fixe ale textului (admin → Anunțuri → „Cum apare textul”) */
.app-topbar-text.atb-fade{animation:atbFade 1.2s ease both}
.app-topbar-text.atb-slide{display:inline-block;animation:atbSlide .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes atbFade{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
@keyframes atbSlide{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes appCaret{50%{opacity:0}}
.app-topbar-cta{flex:none;padding:5px 12px;border-radius:999px;background:var(--atb-btn-bg,#ff7a1a);color:var(--atb-btn-fg,#1a0d02);font-size:11.5px;font-weight:900;letter-spacing:.02em;transition:transform .18s ease}
.app-topbar:hover .app-topbar-cta{transform:translateX(2px)}
@media (max-width:420px){.app-topbar{font-size:12px}.app-topbar-cta{padding:5px 10px;font-size:11px}}
/* Varianta „9B": text centrat, telefonul la mijloc, avantajele în carduri de sticlă de o parte și de alta. */
.ap-card{position:relative;overflow:hidden;isolation:isolate;max-width:1180px;margin:0 auto;padding:64px 48px 72px;border-radius:30px;border:1px solid rgba(255,255,255,.1);background:#080706;color:#f8f5f1;text-align:center}
.ap-card::before{content:"";position:absolute;z-index:-1;left:50%;top:-20%;width:900px;height:700px;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(255,122,26,.22) 180deg,transparent 200deg);filter:blur(10px)}
.ap-card::after{content:"";position:absolute;z-index:-1;left:50%;bottom:-180px;width:700px;height:360px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(255,122,26,.3),transparent)}
.ap-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfc8c0;font-size:.8rem;font-weight:600}
.ap-pill b{padding:3px 9px;border-radius:999px;background:#ff7a1a;color:#1a0d02;font-size:.68rem;font-weight:800;letter-spacing:.06em}
.ap-card h2{margin:0 auto;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:800;line-height:1.04;letter-spacing:-.03em;color:#f8f5f1;text-wrap:balance}
.ap-card h2 span{background:linear-gradient(90deg,#ffb36b,#ff7a1a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-lead{max-width:46ch;margin:16px auto 0;color:#cfc8c0;font-size:1.02rem;line-height:1.6}
.ap-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.ap-store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.6);color:#fff;text-decoration:none;text-align:left;backdrop-filter:blur(8px);transition:transform .18s ease,border-color .18s ease}
.ap-store:hover{transform:translateY(-2px);border-color:#ff7a1a}
.ap-store:focus-visible{outline:2px solid #ff7a1a;outline-offset:3px}
.ap-store svg{width:26px;height:26px;flex:none}
.ap-store small{display:block;font-size:.68rem;line-height:1.1;opacity:.8}
.ap-store strong{display:block;font-size:1.12rem;font-weight:700;line-height:1.15}

.ap-orb{display:grid;grid-template-columns:1fr auto 1fr;gap:36px;align-items:center;margin-top:56px;text-align:left}
.ap-feats{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.ap-feats li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.ap-ic{display:flex;flex:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,122,26,.4);background:linear-gradient(145deg,rgba(255,122,26,.3),rgba(255,122,26,.06));color:#ffb36b}
.ap-ic svg{width:21px;height:21px}
.ap-feats b{display:block;font-size:.95rem}
.ap-feats p{margin:4px 0 0;color:#b9b1a8;font-size:.84rem;line-height:1.5}

/* telefonul (decorativ: ecran recreat al aplicației) */
.ap-ph{--w:270px;width:var(--w);aspect-ratio:9/19.3;padding:calc(var(--w)*.035);border-radius:calc(var(--w)*.16);font-size:calc(var(--w)*.046);
  background:linear-gradient(145deg,#3a3632,#141210 40%,#2a2724);box-shadow:0 30px 60px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.08)}
.ap-scr{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:calc(var(--w)*.13);background:#0d0b0a;color:#f4efe9;line-height:1.3}
.ap-scr::before{content:"";position:absolute;top:2.2%;left:50%;z-index:3;width:32%;height:3.6%;border-radius:99px;background:#000;transform:translateX(-50%)}
.ap-sb{position:relative;z-index:2;display:flex;justify-content:space-between;padding:5.5% 8% 0;font-size:.82em;font-weight:700}
.ap-cover{position:relative;flex:none;height:24%;background:url(assets/salon-denisthebarber-800.webp) center/cover}
.ap-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),#0d0b0a)}
.ap-id{position:relative;z-index:2;display:flex;align-items:center;gap:.7em;margin-top:-9%;padding:0 7%}
.ap-id img{width:3.4em;height:3.4em;border:1px solid #2c2620;border-radius:.8em;background:#000;object-fit:contain}
.ap-id b{display:block;font-size:1.12em}.ap-id small{color:#b9b1a8;font-size:.78em}
.ap-chips{display:flex;flex-wrap:wrap;gap:.35em;padding:.8em 7% 0}
.ap-chips span{padding:.35em .6em;border-radius:99px;background:#1c1815;font-size:.72em;font-weight:600}
.ap-chips .g{color:#5fd08a}
.ap-next{margin:.9em 7% 0;padding:.8em .9em;border:1px solid rgba(255,122,26,.55);border-radius:.9em;background:rgba(255,122,26,.08)}
.ap-next small{display:block;color:#ff7a1a;font-size:.66em;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ap-next b{display:block;margin-top:.2em;font-size:1.1em}.ap-next span{color:#b9b1a8;font-size:.72em}
.ap-sec{display:flex;justify-content:space-between;padding:1em 7% .5em;font-size:.9em;font-weight:800}
.ap-sec em{color:#ff7a1a;font-size:.8em;font-style:normal}
.ap-barbers{display:flex;gap:.9em;padding:0 7%}
.ap-barbers div{font-size:.72em;font-weight:600;text-align:center}
.ap-barbers img,.ap-barbers .av{display:block;width:3.4em;height:3.4em;margin-bottom:.3em;border:2px solid #ff7a1a;border-radius:50%;background:#1c1815;object-fit:cover;object-position:50% 20%}
.ap-barbers .av{border-color:#2c2620}
.ap-svc{display:flex;align-items:center;gap:.7em;margin:.35em 7%;padding:.55em;border-radius:.8em;background:#16130f}
.ap-svc img{flex:none;width:2.8em;height:2.8em;padding:.2em;border:1px solid #2c2620;border-radius:.55em;background:#000;object-fit:contain}
.ap-svc div{flex:1;min-width:0}.ap-svc b{display:block;font-size:.85em}.ap-svc small{color:#8b847c;font-size:.68em}
.ap-svc em{color:#e8b84f;font-size:.8em;font-style:normal;font-weight:800}
.ap-btn{margin:auto 7% 0;padding:.9em;border-radius:.8em;background:#ff7a1a;color:#1a0d02;font-size:.92em;font-weight:800;text-align:center}
.ap-tabs{display:flex;justify-content:space-around;margin-top:.9em;padding:.8em 4% 1.1em;border-top:1px solid #221d19;color:#8b847c;font-size:.62em;font-weight:600}
.ap-tabs .on{color:#ff7a1a}

@media (max-width:900px){
  .ap-card{padding:44px 18px 40px;border-radius:24px}
  .ap-card::before{width:600px}
  .ap-lead{font-size:.98rem}
  .ap-stores{flex-wrap:nowrap}
  .ap-store{flex:1 1 0;justify-content:center;min-width:0;min-height:52px;padding:0 10px}
  .ap-store strong{font-size:1rem;white-space:nowrap}
  .ap-orb{grid-template-columns:1fr;gap:14px;margin-top:36px}
  /* pe telefon: ecranul tăiat jos, ca să nu ocupe toată pagina */
  .ap-phwrap{order:-1;justify-self:center;max-height:420px;overflow:hidden;margin-bottom:10px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .ap-ph{--w:240px}
  .ap-feats{gap:12px}
  .ap-feats li{padding:14px}
}
@media (max-width:360px){.ap-stores{flex-wrap:wrap}.ap-store{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.ap-store{transition:none}.ap-store:hover{transform:none}}

/* ---- Subsol: varianta discretă „Descarcă gratuit aplicația mobilă" ---- */
.ap-foot{display:flex;align-items:center;gap:16px;width:min(680px,100%);margin:6px auto 4px;padding:14px 16px 14px 14px;border:1px solid rgba(255,122,26,.28);border-radius:18px;
  background:linear-gradient(120deg,rgba(255,122,26,.10),rgba(255,122,26,.02) 55%),#0a0806;text-align:left;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.ap-foot[hidden]{display:none}
.ap-foot-icon{flex:none;width:52px;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#000;object-fit:cover}
.ap-foot-text{flex:1;min-width:0;line-height:1.35}
.ap-foot-text strong{display:block;color:#f8f5f1;font-size:1rem;font-weight:800}
.ap-foot-text span{display:block;margin-top:2px;color:rgba(255,255,255,.58);font-size:.84rem}
.ap-foot-stores{display:flex;flex:none;gap:8px}
.ap-foot-store{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px 0 10px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:#000;color:#fff;text-decoration:none;font-size:.92rem;font-weight:700;line-height:1.1;transition:border-color .18s ease,transform .18s ease}
.ap-foot-store:hover{border-color:#ff7a1a;transform:translateY(-1px)}
.ap-foot-store:focus-visible{outline:2px solid #ff7a1a;outline-offset:3px}
.ap-foot-store svg{width:20px;height:20px;flex:none}
.ap-foot-store small{display:block;font-size:.62rem;font-weight:500;opacity:.75}
@media (max-width:640px){
  .ap-foot{flex-wrap:wrap;justify-content:center;text-align:center;padding:16px}
  .ap-foot-text{flex-basis:calc(100% - 68px)}
  .ap-foot-text,.ap-foot-text strong{text-align:left}
  .ap-foot-stores{flex:1 1 100%}
  .ap-foot-store{flex:1;justify-content:center}
}

/* „NOU" live în stânga barei de sus: punct care pulsează, strălucire și o lumină care trece peste etichetă */
.app-topbar-new{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:3px 9px 3px 7px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(0,0,0,.12)),var(--atb-new-bg,#ff7a1a);color:var(--atb-new-fg,#1a0d02);font-size:10.5px;font-weight:900;letter-spacing:.08em;line-height:1;animation:appNewGlow 1.6s ease-in-out infinite}
.app-topbar-new i{position:relative;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9;animation:appNewDot 1.6s ease-out infinite}
.app-topbar-new::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:appNewShine 2.8s ease-in-out infinite}
@keyframes appNewGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.55),0 0 8px rgba(255,122,26,.35)}50%{box-shadow:0 0 0 5px rgba(255,122,26,0),0 0 16px rgba(255,122,26,.7)}}
@keyframes appNewDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.85)}70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes appNewShine{0%,55%{left:-60%}100%{left:130%}}