/* ===== Clinica Magda Calatoru — styles.css ===== */
/* Re-skinned with the Zapier-inspired design system: warm-cream canvas,
   deep coffee ink, single saturated-orange CTA accent, Inter across the
   type system (Degular Display substitute), 12px canonical radius. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --porcelain: #fffefb;
  --porcelain-2: #f8f4f0;
  --ink: #201515;
  --ink-light: #605d52;
  --ink-dark: #201515;
  --gold: #939084;
  --gold-light: #c5c0b1;
  --gold-dark: #201515;
  --sage: #f8f4f0;
  --charcoal: #605d52;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--porcelain);
  color: var(--charcoal);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.font-display {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Line-height mai strâns pentru titluri display — implicit Tailwind e prea
   aerisit (text-lg ~1.56, text-3xl/4xl ~1.2), ceea ce face titlurile pe 2
   randuri sa para departate. Selector element+clasa => bate utilitarele
   Tailwind fara !important. */
h1.font-display, h2.font-display, h3.font-display,
h4.font-display, p.font-display, span.font-display {
  line-height: 1.08 !important;
  letter-spacing: -0.01em;
}

/* Paragrafele de corp foloseau leading-relaxed (1.625) — prea aerisit.
   Le strangem la 1.5. !important ca sa batem sigur utilitarul Tailwind. */
.font-body.leading-relaxed, p.font-body {
  line-height: 1.4 !important;
}

/* Serif elegant — folosit DOAR pentru titlul principal din hero (H1), nu global. */
.font-serif-hero {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
}

.font-mono {
  font-family: "IBM Plex Mono", monospace;
}

::selection {
  background-color: #ff4f00;
  color: #fffefb;
}

:focus-visible {
  outline: 2px solid #ff4f00;
  outline-offset: 3px;
  border-radius: 2px;
}

.text-balance {
  text-wrap: balance;
}

/* Soft text-shadow for white text over photos — keeps headlines readable
   without needing a heavy dark tint across the whole image. */
.text-shadow-hero {
  text-shadow: 0 2px 16px rgba(30, 18, 8, 0.5), 0 1px 4px rgba(30, 18, 8, 0.65);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* subtle film-grain texture over the whole page */
.grain-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ===== scroll-reveal (driven by IntersectionObserver in script.js) ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== hero slide crossfade ===== */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* ===== hero: full-bleed photo slides with crossfade ===== */
.hero-slide-bg {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}
.hero-slide-bg.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Ken Burns slow zoom while a slide is active. Restarted via JS
   (class removed + reflow + re-added) each time a slide activates. */
.hero-kenburns {
  transform: scale(1);
}
.hero-kenburns.kenburns-active {
  animation: kenburns 5.8s linear forwards;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.hero-slide-text,
.hero-stats {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hero-slide-text.is-active,
.hero-stats.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== Before / After comparison slider ===== */
.ba-slider {
  cursor: ew-resize;
  background-color: var(--ink);
  touch-action: none;
}
.ba-before-img {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.ba-slider:not(.ba-dragging) .ba-before-img {
  transition: clip-path 0.15s ease-out;
}
.ba-handle {
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  z-index: 10;
}
.ba-slider:not(.ba-dragging) .ba-handle {
  transition: left 0.15s ease-out;
}
.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--porcelain);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.ba-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--porcelain);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ba-handle-grip svg {
  width: 18px;
  height: 18px;
}
.ba-label {
  position: absolute;
  top: 14px;
  z-index: 5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(32, 21, 21, 0.6);
  color: var(--porcelain);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba-label-before { left: 14px; }
.ba-label-after { right: 14px; }

/* ===== Google reviews marquee ===== */
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.reviews-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
  animation: reviews-scroll 42s linear infinite;
}
.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}
@keyframes reviews-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}
.review-stars i {
  width: 13px;
  height: 13px;
  fill: var(--gold);
  color: var(--gold);
}

/* ===== Map overlay card ===== */
.map-card {
  backdrop-filter: blur(6px);
}

/* ===== Footer — Zapier "footer" component: dark ink surface, canvas-soft text,
   single primary-orange accent for links/CTA. ===== */
.footer-ref{
  --navy: #f8f4f0;
  --navy-soft: #c5c0b1;
  --teal: #ff4f00;
  --teal-dark: #e64500;
  --footer-bg: #201515;
  --line: rgba(248, 244, 240, 0.14);
  --text-muted: #939084;
  background: var(--footer-bg);
  color: var(--navy);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.footer-ref .footer{max-width:1400px;margin:0 auto;padding:56px 40px 0;}

.footer-ref .footer-top{
  display:flex;
  align-items:flex-start;
  gap:48px;
  padding-bottom:40px;
}
.footer-ref .footer-brand{
  display:flex;
  gap:18px;
  padding-right:48px;
  border-right:1px solid var(--line);
  min-width:220px;
  max-width:280px;
}
.footer-ref .footer-brand .footer-logo{
  width:64px;height:64px;border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
}
.footer-ref .footer-brand .brand-info .name{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 4px;}
.footer-ref .footer-brand .brand-info .form{font-size:13px;color:var(--navy-soft);margin:0;}

.footer-ref .footer-cta{flex:1;min-width:280px;}
.footer-ref .footer-cta h3{font-size:24px;font-weight:400;margin:6px 0 20px;color:var(--navy);}
.footer-ref .footer-actions{display:flex;flex-wrap:wrap;gap:14px;}
.footer-ref .btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:12px;border:1px solid var(--line);
  font-size:15px;color:var(--navy);text-decoration:none;
  background:transparent;transition:.15s ease;
}
.footer-ref .btn svg{width:18px;height:18px;flex-shrink:0;}
.footer-ref .btn:hover{border-color:var(--teal);}
.footer-ref .btn.primary{background:var(--teal);border-color:var(--teal);color:#fffefb;font-weight:600;}
.footer-ref .btn.primary:hover{background:var(--teal-dark);border-color:var(--teal-dark);}

.footer-ref .divider{border:none;border-top:1px solid var(--line);margin:0;position:relative;}
.footer-ref .divider::after{
  content:"";position:absolute;left:calc(220px + 24px);top:-4px;
  width:9px;height:9px;border-radius:50% 50% 50% 0;
  background:var(--teal);transform:rotate(45deg);
}

.footer-ref .footer-links{
  display:grid;
  grid-template-columns:1fr 1fr 1.6fr;
  gap:40px;
  padding:40px 0;
}
.footer-ref .footer-links h4{font-size:14px;font-weight:600;color:var(--navy-soft);margin:0 0 16px;}
.footer-ref .footer-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer-ref .footer-links a{font-size:15px;font-weight:600;color:var(--navy);text-decoration:none;}
.footer-ref .footer-links a:hover{color:var(--teal);}
.footer-ref .footer-links .plain{font-size:15px;font-weight:400;color:var(--navy);line-height:1.7;}

.footer-ref .legal-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
/* Butonul "Setari cookies" e <button> din motive de accesibilitate (declanseaza
   o actiune, nu navigheaza), dar trebuie sa arate identic cu linkurile legale
   de langa el. Selectorul de mai jos il aliniaza complet. */
.footer-ref .legal-links .cc-manage{
  font-family:inherit;font-size:15px;font-weight:600;color:var(--navy);
  text-decoration:none;text-align:left;background:none;border:none;
  padding:0;margin:0;cursor:pointer;
}
.footer-ref .legal-links .cc-manage:hover{color:var(--teal);}

.footer-ref .footer-bottom{
  border-top:1px solid var(--line);
  padding:24px 0 32px;
  font-size:13px;color:var(--text-muted);line-height:1.7;
}
.footer-ref .footer-bottom .compliance{max-width:900px;margin-bottom:16px;}
.footer-ref .footer-bottom .copyright{font-size:13px;color:#ff4f00;}
.footer-ref .footer-bottom .copyright strong{color:#ff4f00;}

@media (max-width:900px){
  .footer-ref .footer-links{grid-template-columns:1fr;}
  .footer-ref .footer-top{flex-direction:column;}
  .footer-ref .footer-brand{border-right:none;border-bottom:1px solid var(--line);padding:0 0 24px;max-width:100%;width:100%;}
  .footer-ref .divider::after{left:20px;}
}
@media (max-width:560px){
  .footer-ref .footer{padding:40px 20px 0;}
  .footer-ref .legal-links{grid-template-columns:1fr;}
}

/* ===== Servicii: descriere expandabila (acordeon) ===== */
.service-toggle {
  cursor: pointer;
}
.service-toggle-icon {
  transition: transform 0.25s ease, color 0.25s ease;
}
.service-toggle.is-open .service-toggle-icon {
  transform: rotate(45deg);
  color: #ff4f00;
}
.service-desc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.service-desc-wrap.is-open {
  grid-template-rows: 1fr;
}
.service-desc-inner {
  overflow: hidden;
}

/* ===== Medici: card aliniat + fereastra de text de 6 randuri ===== */
.medic-card__name { min-height: 2.4em; }
.medic-card__role { min-height: 2.6em; }
.medic-quote {
  --medic-quote-lh: 1.4;
  --medic-quote-lines: 6;
  margin-bottom: 1rem;
}
.medic-quote > summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.medic-quote > summary::-webkit-details-marker { display: none; }
.medic-quote .medic-quote__p {
  line-height: var(--medic-quote-lh) !important;
}
.medic-quote .medic-quote__p + .medic-quote__p { margin-top: 0.5rem; }
/* inchis: fereastra fixa care taie textul exact dupa 6 randuri */
.medic-quote:not([open]) .medic-quote__lead {
  height: calc(var(--medic-quote-lines) * var(--medic-quote-lh) * 1em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.15) 100%);
          mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.15) 100%);
}
.medic-quote__more,
.medic-quote__less {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgba(38, 38, 38, 0.7);
  transition: color 0.2s ease;
}
.medic-quote__more:hover,
.medic-quote__less:hover { color: #1a1a1a; }
.medic-quote__less { cursor: pointer; background: none; border: 0; padding: 0; }
.medic-quote[open] .medic-quote__more { display: none; }

/* ===== Competente complete - accordion nativ pe pagina medici ===== */
.medic-accordion > summary {
  list-style: none;
}
.medic-accordion > summary::-webkit-details-marker {
  display: none;
}
.medic-accordion .medic-accordion-icon {
  transition: transform 0.25s ease;
}
.medic-accordion[open] .medic-accordion-icon {
  transform: rotate(180deg);
}

/* accent used across .service-toggle-icon below, kept in sync with primary CTA orange */

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== Card pe imagine (CTA + hero) ===== */
.dd-cta {
  --dd-bg: url("images/solution-1.jpg");
  --dd-ink: #201515;
  --dd-panel: #f8f4f0;
  --dd-panel2: #efe9e3;
  --dd-brand: #ff4f00;
  --dd-frame: #fffefb;

  background: var(--dd-frame);
  padding: 0;
  box-sizing: border-box;
}
.dd-cta *, .dd-cta *::before, .dd-cta *::after { box-sizing: border-box; }

.dd-cta--confort { --dd-bg: url("images/solution-2.jpg"); }
.dd-cta--relatie { --dd-bg: url("images/solution-3.jpg"); }

.dd-cta__card {
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  background-image: var(--dd-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 26px;
}

.dd-cta__left, .dd-cta__right { background: var(--dd-panel); }
.dd-cta__left {
  border-radius: 14px 0 0 14px;
  padding: 34px 32px;
  flex: 1.15;
}
.dd-cta__right {
  border-radius: 0 14px 14px 0;
  padding: 34px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dd-cta__eyebrow {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dd-brand);
  margin-bottom: 14px;
}
.dd-cta__title {
  margin: 0 0 16px;
  color: var(--dd-ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.5px;
  max-width: 620px;
}
.dd-cta__desc {
  margin: 0;
  color: #605d52;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
}

.dd-cta__list { list-style: none; margin: 0 0 24px; padding: 0; }
.dd-cta__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dd-ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 7px 0;
}
.dd-cta__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dd-ink);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.dd-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.dd-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 8px 0 22px;
  border-radius: 12px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.dd-cta__btn:hover { transform: translateY(-1px); opacity: .92; }
.dd-cta__btn--primary { background: var(--dd-brand); color: #fff; }
.dd-cta__btn--secondary { background: var(--dd-panel2); color: var(--dd-ink); }

.dd-cta__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
}
.dd-cta__btn--primary .dd-cta__arrow { background: #fffefb; color: var(--dd-brand); }
.dd-cta__btn--secondary .dd-cta__arrow { background: #e2dbd3; color: var(--dd-ink); }

@media (max-width: 820px) {
  .dd-cta__card {
    min-height: 0;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .dd-cta__left { border-radius: 14px 14px 0 0; }
  .dd-cta__right { border-radius: 0 0 14px 14px; }
  .dd-cta__title { font-size: 30px; }
}

/* Titlu de secțiune în stilul "Relație pe termen lung. Grijă continuă." */
.section-title-alt {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.5px;
}
@media (max-width: 820px) {
  .section-title-alt { font-size: 30px; }
}

/* ===== Hero pe imagine (model dd-cta) — pagina Echipa ===== */
.dd-hero {
  --dd-bg: url("images/head-section.jpg");
  padding-top: 96px;
}
.dd-hero .dd-cta__card { min-height: 620px; }
.dd-hero .dd-cta__title { font-size: 44px; }
.dd-hero .dd-cta__right { justify-content: center; }
.dd-hero__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dd-hero__list li { display: flex; gap: 14px; align-items: flex-start; }
.dd-hero__num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dd-ink);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dd-hero__item-title {
  margin: 0 0 4px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--dd-ink);
}
.dd-hero__item-desc {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #605d52;
}
@media (min-width: 768px) {
  .dd-hero { padding-top: 112px; }
}
@media (max-width: 820px) {
  .dd-hero .dd-cta__title { font-size: 30px; }
  .dd-hero .dd-cta__card { min-height: 0; }
}

/* ============================================================
   CONSIMTAMANT COOKIES + BLOCARE CONTINUT TERT (Google)
   ------------------------------------------------------------
   Legea 506/2004 art. 4^1 (ePrivacy) cere consimtamant PREALABIL
   pentru orice cookie non-esential. Iframe-urile Google (harta si
   calendarul de programari) pun cookie-uri Google, deci nu au voie
   sa se incarce inainte de accept.

   Mecanismul: iframe-urile au src-ul in data-consent-src, nu in src.
   script.js (initConsent) il muta in src doar dupa accept.
   Alegerea se tine in localStorage, cheia "cmc-consent".
   ============================================================ */

.cc-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--porcelain, #FFF8EF);
  border: 1px solid rgba(32, 21, 21, 0.12);
  box-shadow: 0 18px 44px rgba(32, 21, 21, 0.22);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  transform: translateY(140%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-banner.is-visible { transform: translateY(0); }
.cc-banner[hidden] { display: none; }

.cc-banner__title {
  margin: 0 0 8px;
  font-family: Merriweather, Georgia, serif;
  font-size: 17px;
  color: var(--ink, #201515);
}
.cc-banner__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(43, 33, 26, 0.72);
}
.cc-banner__text a { color: var(--ink, #201515); text-decoration: underline; }

/* Accept si Respinge au ACELASI format si aceeasi greutate vizuala —
   cerinta EDPB. Nu face butonul de refuz mai mic sau mai palid. */
.cc-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-btn {
  flex: 1 1 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s;
}
.cc-btn--accept { background: #FF7000; color: #fff; }
.cc-btn--accept:hover { background: #D95E00; }
.cc-btn--reject { background: transparent; color: var(--ink, #201515); border-color: rgba(32, 21, 21, 0.2); }
.cc-btn--reject:hover { background: rgba(32, 21, 21, 0.06); }

/* Buton discret de retragere a consimtamantului (footer) */
.cc-manage {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Placeholder afisat in locul continutului Google blocat */
.cc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px 24px;
  background: #F1EDE6;
  border-radius: inherit;
}
.cc-placeholder__text {
  margin: 0;
  max-width: 380px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(43, 33, 26, 0.7);
}
.cc-placeholder__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  background: #FF7000;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.cc-placeholder__btn:hover { background: #D95E00; }

@media (max-width: 480px) {
  .cc-banner { padding: 18px; }
  .cc-btn { flex: 1 1 100%; }
}

/* Text vizibil doar pentru cititoarele de ecran (etichete de formular etc.) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Sectiunea "Cum lucram" (pagina Echipa). A preluat fotografia de fundal de la
   fostul hero, ca antetul paginii sa ramana text si primul rand de casete cu
   medici sa fie vizibil fara scroll. Reciclam .dd-hero__list pentru cei 3 pasi. */
.dd-cta--lucram { --dd-bg: url("images/head-section.jpg"); }
.dd-cta--lucram .dd-cta__card { min-height: 520px; }
.dd-cta--lucram .dd-cta__title { font-size: 34px; }
.dd-cta--lucram .dd-cta__right { justify-content: center; }
@media (max-width: 820px) {
  .dd-cta--lucram .dd-cta__card { min-height: 0; }
  .dd-cta--lucram .dd-cta__title { font-size: 28px; }
}

/* ============================================================
   Butoane flotante (telefon / programare / WhatsApp)
   ------------------------------------------------------------
   Sub 640px: cerc cu iconita + eticheta mica dedesubt, ca sa se
   inteleaga la ce foloseste fiecare buton fara sa se acopere
   continutul. De la 640px in sus: pastila clasica, text pe
   orizontala — exact ca inainte, nimic nu se schimba pe desktop.
   ============================================================ */
.fab-group{display:flex;align-items:flex-start;gap:8px}

.fab-item{display:flex;flex-direction:column;align-items:center;gap:5px;
          text-decoration:none;color:#fff}
.fab-item.fab-right{align-items:flex-end}

.fab-btn{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;
         justify-content:center;box-shadow:0 8px 20px rgba(32,21,21,.22);
         transition:background-color .2s ease,filter .2s ease}
.fab-brand .fab-btn{background:#ff4f00}
.fab-ink   .fab-btn{background:#201515}
.fab-wa    .fab-btn{background:#25D366}

/* order:-1 muta eticheta deasupra cercului, fara sa schimbam ordinea in HTML
   (unde iconita ramane prima, ca sa fie citita prima de cititoarele de ecran).
   Cercul ramane jos, la indemana degetului. */
.fab-label{order:-1;font-size:11px;font-weight:600;line-height:1.1;white-space:nowrap;
           color:#201515;background:rgba(255,254,251,.94);border-radius:999px;
           padding:3px 8px;box-shadow:0 2px 8px rgba(32,21,21,.10)}
.fab-text{display:none}

/* Al doilea numar (mobilul clinicii) nu apare pe telefon: cine e deja pe telefon
   are nevoie de un singur buton de sunat, iar al doilea doar inghesuia bara.
   Numarul ramane vizibil pe desktop si, oricum, in footer si la Contact. */
.fab-doar-desktop{display:none}

@media (min-width:640px){
  .fab-doar-desktop{display:flex}
  .fab-group{gap:8px;align-items:center}
  .fab-item{flex-direction:row;align-items:center;gap:8px;border-radius:999px;
            padding:14px 20px;box-shadow:0 10px 24px rgba(32,21,21,.18);
            transition:background-color .2s ease,filter .2s ease}
  .fab-item.fab-right{align-items:center}
  .fab-item .fab-btn{width:auto;height:auto;border-radius:0;box-shadow:none;
                     background:transparent}
  .fab-label{display:none}
  .fab-text{display:inline;font-size:14px;font-weight:500;line-height:1}
  .fab-brand{background:#ff4f00}
  .fab-brand:hover{background:#e64500}
  .fab-ink{background:#201515}
  .fab-ink:hover{filter:brightness(1.35)}
  .fab-wa{background:#25D366}
  .fab-wa:hover{filter:brightness(.95)}
}

/* Spatiu jos ca butoanele flotante sa nu acopere ultimul rand din footer.
   Doar pe mobil — acolo butoanele sunt mai inalte (cerc + eticheta). */
@media (max-width:639px){
  body{padding-bottom:96px}
}

/* ============================================================
   Hero — bara de slide ("next") si banda de argumente pe mobil
   ============================================================ */

/* Bara de slide. Pe desktop ramane exact ca inainte: 28x6 px, aurie.
   Pe mobil e mult mai mare si se umple pe durata slide-ului, ca sa se
   vada cat mai e pana la urmatorul. */
.hero-dot{
  position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;
  height:6px;width:6px;border-radius:999px;background:rgba(248,244,240,.3);
  transition:width .35s ease,background-color .35s ease;
}
.hero-dot.is-active{width:28px;background:#939084}

@media (max-width:767px){
  .hero-dot{height:9px;width:9px;background:rgba(248,244,240,.35)}
  .hero-dot.is-active{width:64px;background:rgba(248,244,240,.35)}
  /* Umplerea portocalie. Durata trebuie sa fie egala cu SLIDE_DURATION
     de pe mobil din script.js (7000 ms) — daca schimbi acolo, schimba si aici. */
  .hero-dot.is-active::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:0;
    border-radius:999px;background:#ff4f00;
    animation:heroDotFill 7s linear forwards;
  }
  /* Zona de atins mai mare decat bara vizibila (degetul nu e cursor). */
  .hero-dot::after{content:"";position:absolute;inset:-14px -5px}
}
@keyframes heroDotFill{from{width:0}to{width:100%}}

/* Statisticile din hero, pe mobil: intra sub cardul cu locatia, deasupra barei
   de slide (mutarea o face script.js). Textul se micsoreaza mult, ca sa incapa
   fara sa impinga bara de slide prea jos. */
@media (max-width:767px){
  #hero-stats-slot{margin-top:2px}
  /* Cele trei seturi de statistici stau suprapuse in aceeasi celula de grid,
     deci slotul ia automat inaltimea celui mai lung slide. Asa bara de slide
     de dedesubt nu mai sare cand se schimba slide-ul, fara nicio inaltime
     fixa de intretinut. Cel inactiv ramane invizibil (opacity 0 din regula
     generala .hero-stats de mai sus). */
  #hero-stats-col{display:grid}
  #hero-stats-col > .hero-stats{grid-column:1;grid-row:1;position:relative;inset:auto}
  #hero-stats-col .hero-stats > div{padding-top:9px;padding-bottom:9px}
  #hero-stats-col .hero-stats > div:first-child{padding-top:0}
  #hero-stats-col .hero-stats > div:last-child{padding-bottom:0}
  #hero-stats-col .hero-stats .font-display{font-size:15px;line-height:1.2}
  #hero-stats-col .hero-stats .font-body{font-size:12px;line-height:1.35;margin-top:3px}
}