/* ============================================================
   VITALCLINIC — Custom CSS (complements Tailwind)
   Keep theme variables here for easy editing
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── ROOT THEME ── */
:root {
  --teal:       #a020f0;   /* Main violet */
  --teal-dark:  #6d28d9;   /* Dark violet */
  --teal-light: #f3e8ff;   /* Light violet background */
  --teal-mid:   #c4b5fd;   /* Medium violet */
  --navy:       #0f2240;
  --navy-mid:   #1a3a5c;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--navy); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ── TYPOGRAPHY ── */
.font-display { font-family: var(--font-display); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── NAVBAR ── */
.navbar-glass {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}
.navbar-glass.scrolled {
  background: rgba(255,255,255,.97);
  border-bottom-color: #e5e7eb;
  box-shadow: 0 1px 12px rgba(15,34,64,.07);
}

/* ── HERO BG ── */
.hero-bg {
  background: linear-gradient(155deg, #f8fafc 0%, #e9f6f4 45%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -80px; right: -100px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 102, 190, 0.09) 0%, transparent 70%);
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ── CLINIC PHOTO CARD ── */
.clinic-photo-wrap {
  background: linear-gradient(145deg, #e6f7f5 0%, #d0edf5 50%, #dde8f8 100%);
  position: relative;
  overflow: hidden;
}
.clinic-photo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(14,158,142,.04) 0px,
    rgba(14,158,142,.04) 1px,
    transparent 1px,
    transparent 20px
  );
}

/* ── PULSE DOT ── */
.pulse-dot {
  animation: pulse-anim 2s ease-in-out infinite;
}
@keyframes pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

/* ── SECTION DIVIDER LINE ── */
.section-label-line::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2.5px;
  background: var(--teal);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: .6rem;
}

/* ── CARDS ── */
.card-hover {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(14,158,142,.13), 0 4px 12px rgba(15,34,64,.07);
}

.service-card-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--teal-light), transparent);
  opacity: 0;
  transition: opacity .35s;
  border-radius: inherit;
}
.service-card-overlay:hover::before { opacity: 1; }
.service-card-overlay:hover .service-icon-box {
  background: var(--teal);
  color: #fff;
}
.service-icon-box { transition: background .3s, color .3s; }

/* ── WHY NUMBERS ── */
.why-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--teal-mid);
  line-height: 1;
}

/* ── REVIEWS DARK BG ── */
.reviews-bg {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.reviews-bg::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,158,142,.14) 0%, transparent 70%);
}
.reviews-bg::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
}
.review-glass {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .3s;
}
.review-glass:hover {
  background: rgba(255,255,255,.095);
  border-color: rgba(14,158,142,.38);
  transform: translateY(-5px);
}

/* ── FAQ ── */
.faq-item { transition: border-color .3s; }
.faq-item.open { border-color: var(--teal) !important; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .42s ease, padding .3s; }
.faq-item.open .faq-answer { max-height: 220px; }
.faq-icon-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .3s;
  color: #9ca3af;
}
.faq-item.open .faq-icon-btn {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: rotate(45deg);
}

/* ── CTA GRADIENT ── */
.cta-gradient {
  background: linear-gradient(135deg, var(--teal) 0%, #0a7a6e 55%, var(--navy-mid) 100%);
  position: relative;
  overflow: hidden;
}
.cta-gradient::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.045);
}

/* ── GALLERY GLASS CARDS ── */
.gallery-card {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .3s;
}
.gallery-card:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-5px);
}
/* ── GALLERY BADGE ── */
.gallery-badge {
  background: rgba(255,255,255,.18);
}

/* ── BUTTONS ── */
.btn-teal {
  background: var(--teal);
  color: #fff;
  transition: background .22s, transform .22s, box-shadow .22s;
}
.btn-teal:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14,158,142,.35);
}
.btn-navy-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid #d1d5db;
  transition: border-color .22s, color .22s, transform .22s;
}
.btn-navy-outline:hover {
  border-color: var(--teal-dark);
  color: var(--teal-dark);   /* #6d28d9 — passes contrast */
  transform: translateY(-2px);
}

.btn-white-solid {
  background: #fff;
  color: var(--teal);
  font-weight: 600;
  transition: background .22s, transform .22s;
}
.btn-white-solid:hover {
  background: var(--teal-light);
  transform: translateY(-2px);
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  transition: background .22s, border-color .22s;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* ── FORM ── */
.form-input {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,158,142,.13);
}

/* ── MOBILE BAR ── */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: .7rem 1.25rem;
  gap: .75rem;
  box-shadow: 0 -4px 20px rgba(15,34,64,.09);
}
@media (max-width: 768px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 74px; }
}

/* ── FOOTER ── */
.footer-bg { background: var(--navy); }

/* ── MAP PLACEHOLDER ── */
.map-placeholder {
  background: linear-gradient(145deg, #e8f4f8, #ddf0ed);
  border: 1px solid #e5e7eb;
}

/* ── COUNTER ANIMATION ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.stat-animate { animation: countUp .6s ease forwards; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--teal-mid); border-radius: 6px; }