/* ==========================================================================
   extra.css — stiluri Webflow din <head>/<body> (home.html) + clasele ix2-lite.
   Sursa: export-ul live dentalscience.ro (iul 2026). NU edita webflow.min.css.
   ========================================================================== */

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

/* --- Spark Advance discount (blocul <style> custom din head, sursa de adevăr) --- */
/* Spark Advance discount - desktop si mobil */
.pricing.\32 .old-price,
p.old-price {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: line-through !important;
  font-size: 0.85em !important;
  display: inline-block !important;
  margin-right: 12px !important;
  margin-left: auto !important;
  font-weight: 400 !important;
}
.pricing.\32 .new-price,
p.new-price {
  color: #ffeb3b !important;
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 10px;
  border-radius: 6px;
}
@media (max-width: 767px) {
  p.old-price {
    display: inline-block !important;
    visibility: visible !important;
  }
}

/* --- Echipa: pe live doar cardul Dr. Alina Gheorghiu are link activ --- */
.team-collection-item a, .team-name, a.team-name { pointer-events: none !important; cursor: default !important; touch-action: none !important; } .team-collection-item[data-doctor-slug=dr-alina-gheorghiu] a, .team-collection-item[data-doctor-slug=dr-alina-gheorghiu] .team-name, [data-doctor-slug=dr-alina-gheorghiu] a, [data-doctor-slug=dr-alina-gheorghiu] .team-name { pointer-events: auto !important; cursor: pointer !important; touch-action: auto !important; } .team-name, a.team-name { position: relative !important; z-index: 10 !important; display: block !important; } .team-img-wrap { position: relative !important; z-index: 1 !important; } .team-img-wrap &gt; a { display: block !important; width: 100% !important; }

/* --- Rich text: spațiere între paragrafe ca pe live. Tailwind preflight (@tailwind base
   din globals.css) resetează p{margin:0}, iar .rich-text-block p setează doar culoarea —
   deci paragrafele apăreau lipite. Selector specific (0,1,1) => bate resetul indiferent de ordine.
   Se aplică pe toate blocurile rich-text (pagini de tratament, etc.). --- */
.rich-text-block p, .w-richtext p{margin-bottom:1.5rem;}
.rich-text-block p:last-child, .w-richtext p:last-child{margin-bottom:0;}
/* Titlurile din rich-text (h2/h3, ex. „Cum previi boala parodontală?") au spațiu
   deasupra (separare de paragraful anterior) și dedesubt (față de textul lor), ca pe live.
   Tailwind preflight le resetase margin:0 → apăreau lipite de text. */
.rich-text-block h2, .rich-text-block h3, .rich-text-block h4, .rich-text-block h5, .rich-text-block h6,
.w-richtext h2, .w-richtext h3, .w-richtext h4, .w-richtext h5, .w-richtext h6{margin-top:2rem;margin-bottom:0.6rem;}
.rich-text-block > :first-child, .w-richtext > :first-child{margin-top:0;}
/* Titlurile mari de secțiune din template-ul de tratament (+ eyebrow-ul) — nu au margine
   în webflow.min.css, iar Tailwind preflight le-a resetat, deci erau lipite de textul
   rich-text de sub ele. Restaurăm spațierea titlu→text ca pe live. */
.service-single-item-left-subtitle{margin-bottom:0.5rem;}
.service-single-item-left-title, .benefits{margin-bottom:1rem;}

/* --- Servicii: tratamentele inactive apar fără link (span/a fără href) --- */
.title.w-inline-block:not([href]){cursor:default;pointer-events:none;}
/* Hub tratamente: cardurile inactive (fără href) nu sunt clicabile, ca pe live. */
.service-collection-list-item-wrap.service-inactive a{cursor:default;pointer-events:none;}

/* --- Footer „Link-uri Rapide": 2 coloane predictibile (4 + 3) pe desktop, o coloană
   pe mobil, ca pe live. grid-template-areas din webflow.min.css plasa link-urile
   imprevizibil (ultimele 2 politici apăreau inversate). Umple col.1 (4) apoi col.2 (3). --- */
.link-wrap-2{grid-template-areas:none;grid-template-columns:max-content max-content;grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:40px;row-gap:16px;width:auto;justify-items:start;}
.link-wrap-2 .footer-link-2{white-space:nowrap;}
@media (max-width:479px){.link-wrap-2{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}.link-wrap-2 .footer-link-2{white-space:normal;}}

/* --- Footer: hover pe iconițele sociale (pe live venea din ix2) --- */
.footer-social-icon-link-wrap-2{transition:background-color .3s ease;}
.footer-social-icon-link-wrap-2:hover{background-color:var(--_colors---white);}
.footer-social-icon-link-wrap-2:hover .socile-icon{display:none;}
.footer-social-icon-link-wrap-2:hover .socile-icon-facebook{display:block;}
.socile-icon-svg{width:16px;height:16px;fill:#fff;display:block;}
.footer-social-icon-link-wrap-2:hover .socile-icon-svg{fill:var(--_colors---primary-body-color);}

/* --- ix2-lite: reveal la scroll. Clasele se aplică DOAR din JS (no-JS = totul vizibil). --- */
/* Tranziția stă pe AMBELE stări: la reveal JS scoate .ix-hidden și pune .ix-visible,
   iar starea finală trebuie să aibă transition ca fade-in-ul să se anime (altfel sare instant). */
.ix-hidden{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
.ix-hidden.ix-left{transform:translateX(-44px);}
.ix-hidden.ix-right{transform:translateX(44px);}
.ix-hidden.ix-scale{transform:scale(.92);}
.ix-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
/* wipe-ul imaginilor (overlay-ul .about-img-overlay animat pe live de ix2) */
.ix-wipe{height:100%;transition:height .8s ease;}
.ix-wipe-done{height:0%;}

/* --- Hover pe butoanele CTA (.theme-button-wrap): reproduce EXACT interacțiunea IX2 a-3/a-4 din export ---
   a-3 "Button on Hover": ambele .btn-text-box urcă împreună 33px (normal iese sus prin overflow,
   copia .hover-text — poziționată natural dedesubt — intră în locul lui); durată 500ms, hover-in linear.
   .theme-btn-before (fâșia diagonală): rest = rotate(30deg) translateX(-50px), hover = translateX(300px).
   a-4 "Hover up": revenire cu easeInOut 500ms. Fără nudge pe săgeată (nu există în original).
   :has(.hover-text) => doar pe butoanele care au copia, ca să nu golim butoanele cu un singur text. */
.btn-text-wrap:has(.hover-text) .btn-text-box{transition:transform .5s ease-in-out;}
.theme-button-wrap:hover .btn-text-wrap:has(.hover-text) .btn-text-box{transform:translateY(-33px);transition:transform .5s linear;}
/* Ordinea contează: translateX ÎNAINTE de rotate => fâșia (înclinată 30°) mătură
   ORIZONTAL stânga→dreapta (screen glare), nu pe diagonala cadrului rotit. */
.theme-btn-before{transform:translateX(-50px) rotate(30deg);transition:transform .5s ease-in-out;}
.theme-button-wrap:hover .theme-btn-before{transform:translateX(300px) rotate(30deg);transition:transform .5s linear;}

/* --- Discul rotativ din hero (IX2 a-9 "Invite Animation"): inelul de text .invite-text
   se rotește 0→360° în 10s liniar, în buclă; logo-ul din centru (.m) rămâne fix.
   Refolosește @keyframes spin definit deja în webflow.min.css. --- */
.invite-text{animation:spin 10s linear infinite;transform-origin:50% 50%;}

@media (prefers-reduced-motion: reduce){
  .ix-hidden,.ix-visible,.ix-wipe,.ix-wipe-done{opacity:1;transform:none;transition:none;height:0%;}
  .theme-button-wrap:hover .btn-text-wrap:has(.hover-text) .btn-text-box{transform:none;}
  .theme-btn-before,.theme-button-wrap:hover .theme-btn-before{transition:none;}
  .invite-text{animation:none;}
}
