/* ============================================================
   Smil Klinikken — styles.css
   Light theme: white/blue, calming, professional
   ============================================================ */

/* ---------- Custom Properties ---------- */
:root {
  --clr-accent:     #0ea5e9;
  --clr-accent-dark:#0284c7;
  --clr-accent-light:#e0f2fe;
  --clr-bg:         #f0f9ff;
  --clr-bg-white:   #ffffff;
  --clr-text:       #0f172a;
  --clr-text-muted: #475569;
  --clr-border:     #e2e8f0;
  --clr-success:    #22c55e;
  --clr-error:      #ef4444;
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --shadow-sm:  0 1px 3px rgba(15,23,42,.06);
  --shadow-md:  0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:  0 10px 30px rgba(15,23,42,.10);
  --font-heading: "DM Sans", sans-serif;
  --font-body:    "Inter", sans-serif;
  --transition:   .3s ease;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--clr-text);
  background:var(--clr-bg-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- Utility ---------- */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem;
}
.text-accent{color:var(--clr-accent)}
.section{padding:5rem 0}
.section__header{text-align:center;margin-bottom:3rem}
.section__title{
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;
  line-height:1.2;
  margin-bottom:0.75rem;
  color:var(--clr-text);
}
.section__subtitle{
  font-size:1.125rem;
  color:var(--clr-text-muted);
  max-width:600px;
  margin:0 auto;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  font-family:var(--font-heading);
  font-weight:600;
  border-radius:var(--radius-md);
  transition:var(--transition);
  white-space:nowrap;
  cursor:pointer;
  border:2px solid transparent;
}
.btn--primary{
  background:var(--clr-accent);
  color:#fff;
  border-color:var(--clr-accent);
}
.btn--primary:hover{
  background:var(--clr-accent-dark);
  border-color:var(--clr-accent-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.btn--outline{
  background:transparent;
  color:var(--clr-accent);
  border-color:var(--clr-accent);
}
.btn--outline:hover{
  background:var(--clr-accent);
  color:#fff;
  transform:translateY(-1px);
}
.btn--lg{
  padding:0.875rem 2rem;
  font-size:1.05rem;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--clr-border);
  transition:var(--transition);
}
.nav--scrolled{
  box-shadow:var(--shadow-sm);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:4rem;
}
.nav__logo{
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:700;
  color:var(--clr-text);
  flex-shrink:0;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:2rem;
}
.nav__links a{
  font-size:0.925rem;
  font-weight:500;
  color:var(--clr-text-muted);
  transition:var(--transition);
  position:relative;
}
.nav__links a::after{
  content:"";
  position:absolute;
  bottom:-4px;left:0;
  width:0;height:2px;
  background:var(--clr-accent);
  transition:var(--transition);
}
.nav__links a:hover{color:var(--clr-accent)}
.nav__links a:hover::after{width:100%}
.nav__cta{
  padding:0.5rem 1.25rem;
  font-size:0.9rem;
}

/* Burger */
.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:28px;
  z-index:1001;
}
.nav__burger span{
  display:block;
  height:2px;
  background:var(--clr-text);
  border-radius:2px;
  transition:var(--transition);
}
.nav__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.active span:nth-child(2){opacity:0}
.nav__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    opacity:0;
    pointer-events:none;
    transition:var(--transition);
  }
  .nav__links.open{opacity:1;pointer-events:all}
  .nav__links a{font-size:1.25rem}
  .nav__cta{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:8rem 0 5rem;
  background:
    linear-gradient(170deg, rgba(240,249,255,0.92) 0%, rgba(224,242,254,0.88) 40%, rgba(255,255,255,0.90) 100%),
    url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=1400&q=80') center/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-30%;right:-10%;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(14,165,233,.08) 0%, transparent 70%);
  pointer-events:none;
}
.hero__inner{
  text-align:center;
}
.hero__title{
  font-family:var(--font-heading);
  font-size:clamp(2.25rem,5.5vw,3.75rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:1.25rem;
  color:var(--clr-text);
}
.hero__subtitle{
  font-size:clamp(1.05rem,2vw,1.25rem);
  color:var(--clr-text-muted);
  max-width:640px;
  margin:0 auto 2rem;
  line-height:1.7;
}
.hero__actions{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}

/* Badges */
.hero__badges{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.badge{
  display:flex;
  align-items:center;
  gap:0.6rem;
  background:var(--clr-bg-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:0.75rem 1.25rem;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.badge:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.badge__icon{font-size:1.3rem}
.badge__text{
  font-weight:500;
  font-size:0.925rem;
  color:var(--clr-text);
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar{
  background:var(--clr-bg-white);
  border-top:1px solid var(--clr-border);
  border-bottom:1px solid var(--clr-border);
  padding:1.25rem 0;
}
.trust-bar__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem 2.5rem;
}
.trust-bar__item{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.925rem;
  color:var(--clr-text);
}
.trust-bar__item strong{
  color:var(--clr-accent-dark);
  font-weight:700;
}
.trust-bar__stars{
  color:#f59e0b;
  letter-spacing:0.05em;
  font-size:1rem;
}
.trust-bar__icon{
  font-size:1.1rem;
}
.trust-bar__muted{
  color:var(--clr-text-muted);
}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  background:linear-gradient(135deg,var(--clr-accent) 0%,var(--clr-accent-dark) 100%);
  padding:3.5rem 0;
  color:#fff;
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  text-align:center;
}
.stats__item{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  padding:0.5rem;
}
.stats__number{
  font-family:var(--font-heading);
  font-size:clamp(1.9rem,4vw,2.75rem);
  font-weight:700;
  color:#fff;
  line-height:1;
}
.stats__label{
  font-size:0.875rem;
  color:rgba(255,255,255,.9);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:500;
}

@media(max-width:640px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--clr-bg-white)}
.reviews__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
.review-card{
  background:var(--clr-bg);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:var(--transition);
}
.review-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--clr-accent);
}
.review-card__stars{
  color:#f59e0b;
  font-size:1rem;
  letter-spacing:0.1em;
}
.review-card__text{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--clr-text);
  flex-grow:1;
}
.review-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1rem;
  border-top:1px solid var(--clr-border);
  font-size:0.875rem;
}
.review-card__name{
  color:var(--clr-accent-dark);
  font-weight:600;
}
.review-card__time{
  color:var(--clr-text-muted);
}

/* ============================================================
   INSURANCE / PAYMENT
   ============================================================ */
.insurance{
  background:var(--clr-bg);
  padding:2.5rem 0;
  border-top:1px solid var(--clr-border);
  border-bottom:1px solid var(--clr-border);
}
.insurance__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem 2.25rem;
  text-align:center;
}
.insurance__label{
  font-size:0.875rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--clr-text-muted);
  font-weight:600;
}
.insurance__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0.75rem 2rem;
}
.insurance__item{
  font-family:var(--font-heading);
  font-size:1.05rem;
  font-weight:600;
  color:var(--clr-accent-dark);
  letter-spacing:0.02em;
  opacity:0.9;
  transition:var(--transition);
}
.insurance__item:hover{
  opacity:1;
  color:var(--clr-accent);
}

/* ============================================================
   TREATMENTS
   ============================================================ */
.treatments{background:var(--clr-bg)}
.treatments__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
}
.treatment-card{
  background:var(--clr-bg-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem;
  transition:var(--transition);
}
.treatment-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--clr-accent);
}
.treatment-card__icon{
  font-size:2.5rem;
  display:block;
  margin-bottom:1rem;
}
.treatment-card__title{
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:0.5rem;
}
.treatment-card__desc{
  color:var(--clr-text-muted);
  font-size:0.95rem;
  line-height:1.65;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.about__placeholder{
  background:url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?w=800&q=80') center/cover no-repeat;
  border:none;
  border-radius:var(--radius-xl);
  aspect-ratio:4/3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  color:transparent;
  font-size:0;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.about__placeholder span{font-size:0}
.about__placeholder p{font-size:0}
.about__content p{
  color:var(--clr-text-muted);
  font-size:1.05rem;
  line-height:1.75;
  margin-bottom:1.5rem;
}
.about__list{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.about__list li{
  padding-left:1.5rem;
  position:relative;
}
.about__list li::before{
  content:"";
  position:absolute;
  top:0.55rem;
  left:0;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--clr-accent);
}
.about__list li strong{
  display:block;
  font-family:var(--font-heading);
  font-weight:600;
  margin-bottom:0.15rem;
}
.about__list li span{
  color:var(--clr-text-muted);
  font-size:0.95rem;
}

@media(max-width:768px){
  .about__inner{grid-template-columns:1fr;gap:2rem}
}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--clr-bg)}
.team__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1.5rem;
}
.team-card{
  background:var(--clr-bg-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem;
  text-align:center;
  transition:var(--transition);
}
.team-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}
.team-card__avatar{
  width:80px;height:80px;
  border-radius:50%;
  background:var(--clr-accent-light);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
  font-size:2rem;
}
.team-card__name{
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:0.25rem;
}
.team-card__role{
  color:var(--clr-accent);
  font-weight:500;
  font-size:0.9rem;
  margin-bottom:0.75rem;
}
.team-card__bio{
  color:var(--clr-text-muted);
  font-size:0.9rem;
  line-height:1.6;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing__tables{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:1.5rem;
}
.pricing-table{
  background:var(--clr-bg-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.pricing-table__category{
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:600;
  padding:1.25rem 1.5rem;
  background:var(--clr-bg);
  border-bottom:1px solid var(--clr-border);
}
.pricing-table table{width:100%;border-collapse:collapse}
.pricing-table thead{display:none}
.pricing-table td{
  padding:0.875rem 1.5rem;
  font-size:0.95rem;
  border-bottom:1px solid var(--clr-border);
}
.pricing-table tr:last-child td{border-bottom:none}
.pricing-table td:last-child{
  text-align:right;
  font-weight:500;
  color:var(--clr-accent-dark);
  white-space:nowrap;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--clr-bg)}
.faq__list{
  max-width:780px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.faq-item{
  background:var(--clr-bg-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:var(--transition);
}
.faq-item.open{
  border-color:var(--clr-accent);
  box-shadow:var(--shadow-md);
}
.faq-item__question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.15rem 1.5rem;
  font-size:1rem;
  font-weight:500;
  text-align:left;
  color:var(--clr-text);
  background:none;
  cursor:pointer;
}
.faq-item__chevron{
  flex-shrink:0;
  transition:transform var(--transition);
  color:var(--clr-text-muted);
}
.faq-item.open .faq-item__chevron{
  transform:rotate(180deg);
  color:var(--clr-accent);
}
.faq-item__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  padding:0 1.5rem;
}
.faq-item.open .faq-item__answer{
  max-height:400px;
  padding:0 1.5rem 1.25rem;
}
.faq-item__answer p{
  color:var(--clr-text-muted);
  font-size:0.95rem;
  line-height:1.7;
}

/* ============================================================
   BOOKING
   ============================================================ */
.booking{background:var(--clr-bg-white)}
.booking-form{
  max-width:780px;
  margin:0 auto;
}
.booking-form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-bottom:2rem;
}
.form-group--full{grid-column:1/-1}

.form-group label{
  display:block;
  font-weight:500;
  font-size:0.9rem;
  margin-bottom:0.35rem;
  color:var(--clr-text);
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:0.75rem 1rem;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  background:var(--clr-bg);
  color:var(--clr-text);
  font-size:0.95rem;
  transition:var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--clr-accent);
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
  background:var(--clr-bg-white);
}
.form-group input.invalid,
.form-group select.invalid{
  border-color:var(--clr-error);
  box-shadow:0 0 0 3px rgba(239,68,68,.1);
}
.form-error{
  display:block;
  font-size:0.8rem;
  color:var(--clr-error);
  margin-top:0.25rem;
  min-height:1.2em;
}

.booking-form__submit{
  display:block;
  width:100%;
  max-width:320px;
  margin:0 auto;
}

.booking-form__success{
  display:none;
  text-align:center;
  padding:2rem;
  margin-top:2rem;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.25);
  border-radius:var(--radius-md);
}
.booking-form__success.show{display:block}
.booking-form__success-icon{font-size:2rem;display:block;margin-bottom:0.5rem}
.booking-form__success h3{
  font-family:var(--font-heading);
  font-size:1.25rem;
  margin-bottom:0.35rem;
}
.booking-form__success p{color:var(--clr-text-muted)}

@media(max-width:600px){
  .booking-form__grid{grid-template-columns:1fr}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--clr-bg)}
.contact__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.contact__details{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin-top:1.5rem;
}
.contact__item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.contact__icon{font-size:1.5rem}
.contact__item strong{
  display:block;
  font-family:var(--font-heading);
  margin-bottom:0.15rem;
}
.contact__item p{
  color:var(--clr-text-muted);
  font-size:0.95rem;
}
.contact__item a{
  color:var(--clr-accent);
  transition:var(--transition);
}
.contact__item a:hover{color:var(--clr-accent-dark)}

.contact__hours h3{
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  margin-bottom:1rem;
}
.hours-table{
  width:100%;
  border-collapse:collapse;
  background:var(--clr-bg-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.hours-table td{
  padding:0.85rem 1.25rem;
  font-size:0.95rem;
  border-bottom:1px solid var(--clr-border);
}
.hours-table tr:last-child td{border-bottom:none}
.hours-table td:last-child{
  text-align:right;
  font-weight:500;
}
.hours-table__closed td:last-child{
  color:var(--clr-error);
}
.contact__note{
  margin-top:1rem;
  font-size:0.875rem;
  color:var(--clr-text-muted);
  font-style:italic;
}

@media(max-width:768px){
  .contact__inner{grid-template-columns:1fr;gap:2.5rem}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--clr-text);
  color:rgba(255,255,255,.7);
  padding:4rem 0 0;
}
.footer__inner{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2rem;
  padding-bottom:3rem;
}
.footer__logo{
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:700;
  color:#fff;
  display:inline-block;
  margin-bottom:0.75rem;
}
.footer__brand p{
  font-size:0.95rem;
  line-height:1.6;
  max-width:280px;
}
.footer__links h4{
  color:#fff;
  font-family:var(--font-heading);
  font-size:0.95rem;
  font-weight:600;
  margin-bottom:1rem;
}
.footer__links li{margin-bottom:0.5rem;font-size:0.9rem}
.footer__links a{
  color:rgba(255,255,255,.6);
  transition:var(--transition);
}
.footer__links a:hover{color:var(--clr-accent)}

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 0;
  text-align:center;
  font-size:0.85rem;
}

@media(max-width:768px){
  .footer__inner{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:480px){
  .footer__inner{grid-template-columns:1fr}
}

/* ===== Floating WhatsApp Chat Button ===== */
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 998;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: whatsapp-pulse 2s infinite;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}
.whatsapp-float::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; background: #25D366;
    opacity: 0.5; z-index: -1;
    animation: whatsapp-ripple 2s infinite;
}
@keyframes whatsapp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes whatsapp-ripple {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}
.whatsapp-tooltip {
    position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
    padding: 8px 14px; background: #333; color: #fff;
    font-size: 0.8rem; font-weight: 500; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.whatsapp-tooltip::after {
    content: ''; position: absolute; top: 50%; right: -4px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px; height: 8px; background: #333;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }
@media (max-width: 768px) {
    .whatsapp-float { bottom: 16px; right: 16px; width: 50px; height: 50px; }
    .whatsapp-float svg { width: 24px; height: 24px; }
    .whatsapp-tooltip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float, .whatsapp-float::before { animation: none; }
}