/* =========================================================
   Vedika Wellness Clinic — custom styles — DARK template
   Palette: #0B130E page | #17291D forest | #1E3025 paper
            #7BB569 moss | #AFBF9C sage | #E8C86A marigold
            #F0EDE2 paper-light (ink) | #060C08 deep
   ========================================================= */

:root {
  --forest: #17291D;
  --moss: #7BB569;
  --sage: #AFBF9C;
  --cream: #0B130E;
  --deep: #060C08;
  --paper: #1E3025;
  --marigold: #E8C86A;
  --paper-light: #F0EDE2;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }

body {
  font-family: 'Jost', system-ui, sans-serif;
  background-color: var(--cream);
  color: var(--paper-light);
  overflow-x: hidden;
}

.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }

::selection { background: var(--moss); color: #0B130E; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--moss); }

:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

/* ---------------- Arches & organic shapes ---------------- */
.arch-full { border-radius: 999px 999px 26px 26px; }
.arch-top { border-radius: 999px 999px 0 0; }
.arch-round { border-radius: 999px; }

.blob {
  border-radius: 62% 38% 55% 45% / 45% 58% 42% 55%;
  animation: blob-morph 14s ease-in-out infinite;
}
.blob-slow { animation-duration: 22s; }
@keyframes blob-morph {
  0%, 100% { border-radius: 62% 38% 55% 45% / 45% 58% 42% 55%; }
  33%      { border-radius: 45% 55% 42% 58% / 55% 42% 58% 45%; }
  66%      { border-radius: 55% 45% 62% 38% / 42% 55% 45% 58%; }
}

/* ---------------- Lotus mandala pattern backgrounds ---------------- */
.pattern-botanical {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%20viewBox='0%200%2072%2072'%3E%3Cg%20fill='none'%20stroke='%233A5A40'%20stroke-width='1'%20opacity='0.28'%3E%3Cpath%20d='M36%2024c-7%200-12%206-12%2013s5%2012%2012%2012%2012-5%2012-12-5-13-12-13z'/%3E%3Cpath%20d='M36%2029c-4.5%200-8%203.5-8%208%200%204%203.5%207.5%208%207.5s8-3.5%208-7.5c0-4.5-3.5-8-8-8z'/%3E%3Ccircle%20cx='36'%20cy='40'%20r='2.5'/%3E%3Cpath%20d='M0%200c5.5%200%209.5%204%209.5%209.5S5.5%2019%200%2019z'/%3E%3Cpath%20d='M72%200c-5.5%200-9.5%204-9.5%209.5S66.5%2019%2072%2019z'/%3E%3Cpath%20d='M0%2072c5.5%200%209.5-4%209.5-9.5S5.5%2053%200%2053z'/%3E%3Cpath%20d='M72%2072c-5.5%200-9.5-4-9.5-9.5S66.5%2053%2072%2053z'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='1.5'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='1.5'/%3E%3Ccircle%20cx='36'%20cy='0'%20r='1.5'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}
.pattern-botanical-light {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%20viewBox='0%200%2072%2072'%3E%3Cg%20fill='none'%20stroke='%23DAD7CD'%20stroke-width='1'%20opacity='0.5'%3E%3Cpath%20d='M36%2024c-7%200-12%206-12%2013s5%2012%2012%2012%2012-5%2012-12-5-13-12-13z'/%3E%3Cpath%20d='M36%2029c-4.5%200-8%203.5-8%208%200%204%203.5%207.5%208%207.5s8-3.5%208-7.5c0-4.5-3.5-8-8-8z'/%3E%3Ccircle%20cx='36'%20cy='40'%20r='2.5'/%3E%3Cpath%20d='M0%200c5.5%200%209.5%204%209.5%209.5S5.5%2019%200%2019z'/%3E%3Cpath%20d='M72%200c-5.5%200-9.5%204-9.5%209.5S66.5%2019%2072%2019z'/%3E%3Cpath%20d='M0%2072c5.5%200%209.5-4%209.5-9.5S5.5%2053%200%2053z'/%3E%3Cpath%20d='M72%2072c-5.5%200-9.5-4-9.5-9.5S66.5%2053%2072%2053z'/%3E%3Ccircle%20cx='0'%20cy='36'%20r='1.5'/%3E%3Ccircle%20cx='72'%20cy='36'%20r='1.5'/%3E%3Ccircle%20cx='36'%20cy='0'%20r='1.5'/%3E%3Ccircle%20cx='36'%20cy='72'%20r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ---------------- Paper grain texture ---------------- */
.texture-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------------- Handcrafted borders ---------------- */
.hand-border {
  border: 1px solid rgba(163, 177, 138, 0.55);
  box-shadow: inset 0 0 0 3px rgba(163, 177, 138, 0.14);
}
.hand-border-soft { border: 1px solid rgba(163, 177, 138, 0.35); }

/* ---------------- Floating leaves ---------------- */
.float-leaf { animation: float 7s ease-in-out infinite; }
.float-leaf-slow { animation-duration: 11s; }
.float-leaf-2 { animation-duration: 9s; animation-delay: 1.2s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(7deg); }
}

/* ---------------- Reveal on scroll ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-zoom { transform: scale(0.94); }
.reveal.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-leaf, .blob { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- Header states ---------------- */
#site-header.scrolled .nav-wrap {
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.65);
}
.top-bar {
  max-height: 2.5rem;
  transition: max-height .4s ease, opacity .4s ease, padding .4s ease;
  overflow: hidden;
}
#site-header.scrolled .top-bar {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------- Nav link underline ---------------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--moss);
  transform: translateX(-50%);
  transition: width .35s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ---------------- Mobile menu ---------------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.77, 0, .18, 1);
}
#mobile-menu.open { max-height: 560px; }
body.menu-open { overflow: hidden; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border-radius: 999px;
  padding: .9rem 1.9rem;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--moss); color: #0B130E; }
.btn-primary:hover { background: var(--marigold); box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5); }
.btn-outline { border: 1px solid var(--moss); color: var(--moss); }
.btn-outline:hover { background: var(--moss); color: #0B130E; box-shadow: 0 18px 34px -16px rgba(123, 181, 105, .35); }
.btn-outline-light { border: 1px solid rgba(246, 242, 231, .45); color: var(--paper-light); }
.btn-outline-light:hover { background: var(--paper-light); color: #17291D; }
.btn-light { background: var(--paper-light); color: #17291D; }
.btn-light:hover { background: #fff; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5); }

/* ---------------- Leaf divider ---------------- */
.divider-leaf { display: flex; align-items: center; gap: 1rem; }
.divider-leaf::before,
.divider-leaf::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--sage));
}
.divider-leaf::after { background: linear-gradient(to left, transparent, var(--sage)); }

/* ---------------- Cards ---------------- */
.leaf-card {
  background: var(--paper);
  border: 1px solid rgba(163, 177, 138, 0.4);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.leaf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .65);
  border-color: var(--sage);
}
.group:hover .service-icon-wrap {
  transform: rotate(-6deg) scale(1.08);
}
.service-icon-wrap {
  transition: transform .5s ease;
}

/* ---------------- Image reveal ---------------- */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img {
  transform: scale(1.12);
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.img-reveal.is-visible img { transform: scale(1); }
.img-reveal:hover img { transform: scale(1.05); }
.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(52, 78, 65, .45), transparent 55%);
  opacity: 0;
  transition: opacity .5s ease;
}
.img-reveal:hover::after { opacity: 1; }

/* ---------------- Testimonials ---------------- */
.testimonial-track {
  display: flex;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.testimonial-slide { min-width: 100%; }

/* ---------------- FAQ ---------------- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.faq-chevron { transition: transform .35s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item.open .faq-q { color: var(--moss); }
.faq-item.open .faq-q-icon { background: var(--moss); color: #0B130E; }

/* ---------------- Page transition overlay ---------------- */
.pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #060C08 0%, #17291D 55%, #7BB569 100%);
  transform: translateY(-102%);
  transition: transform .55s cubic-bezier(.77, 0, .18, 1);
  pointer-events: none;
}
.pt-overlay.active { transform: translateY(0); }
.pt-overlay.done { transform: translateY(102%); }
.pt-mark {
  font-family: 'Cormorant Garamond', serif;
  color: var(--paper-light);
  font-size: 3.2rem;
  animation: ptPulse 1.1s ease-in-out infinite;
}
@keyframes ptPulse {
  0%, 100% { opacity: .45; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ---------------- WhatsApp float ---------------- */
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.wa-float { animation: waPulse 2.6s ease-out infinite; }

/* ---------------- Marquee ---------------- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------- Back to top ---------------- */
#to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all .4s ease;
}
#to-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* ---------------- Form ---------------- */
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AFBF9C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

/* ---------------- Marquee chip ---------------- */
.chip-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--marigold); display: inline-block; }

/* ---------------- Doctor filter ---------------- */
.filter-btn { transition: all .3s ease; }
.filter-btn.active-filter { background: var(--moss); color: #0B130E; border-color: var(--moss); }

/* ---------------- Utility ---------------- */
.text-balance { text-wrap: balance; }

/* =========================================================
   DARK TEMPLATE — Tailwind utility overrides
   The Play CDN injects its generated styles AFTER this file,
   so plain rules would lose. Every rule below is prefixed
   with `html` to raise specificity above Tailwind's own
   classes (0,2,0 hover variants still win where intended).
   ========================================================= */

/* Text inks — were dark-on-light, now light-on-dark */
html .text-forest { color: #F0EDE2; }
html .hover\:text-forest:hover { color: #F0EDE2; }

html .text-deep { color: #DAD5C3; }
html .text-deep\/50 { color: rgba(218, 213, 195, .5); }
html .text-deep\/55 { color: rgba(218, 213, 195, .55); }
html .text-deep\/60 { color: rgba(218, 213, 195, .6); }
html .text-deep\/70 { color: rgba(218, 213, 195, .7); }
html .text-deep\/75 { color: rgba(218, 213, 195, .75); }
html .text-deep\/80 { color: rgba(218, 213, 195, .8); }

/* Accent hues — brighter for dark grounds */
html .text-moss { color: #7BB569; }
html .hover\:text-moss:hover { color: #7BB569; }
html .text-marigold { color: #E8C86A; }
html .hover\:text-marigold:hover { color: #E8C86A; }
html .text-sage { color: #AFBF9C; }
html .text-sage\/40 { color: rgba(175, 191, 156, .4); }
html .text-sage\/50 { color: rgba(175, 191, 156, .5); }
html .text-sage\/60 { color: rgba(175, 191, 156, .6); }
html .text-sage\/70 { color: rgba(175, 191, 156, .7); }

/* Surfaces — were light, now deep */
html .bg-cream { background-color: #0B130E; }
html .bg-cream\/40 { background-color: rgba(11, 19, 14, .55); }
html .bg-cream\/90 { background-color: rgba(11, 19, 14, .9); }
html .bg-cream\/95 { background-color: rgba(11, 19, 14, .96); }
html .bg-forest { background-color: #17291D; }
html .bg-forest\/10 { background-color: rgba(240, 237, 226, .08); }
html .hover\:bg-forest:hover { background-color: #17291D; }
html .bg-paper { background-color: #1E3025; }
html .bg-paper\/30 { background-color: rgba(240, 237, 226, .14); }
html .bg-paper\/90 { background-color: rgba(23, 41, 29, .92); }
html .bg-deep { background-color: #060C08; }
html .bg-deep\/70 { background-color: rgba(6, 12, 8, .7); }

/* Solid accents */
html .bg-moss { background-color: #639A50; }
html .hover\:bg-moss:hover { background-color: #639A50; }
html .bg-moss\/15 { background-color: rgba(123, 181, 105, .15); }
html .bg-moss\/20 { background-color: rgba(123, 181, 105, .2); }
html .bg-marigold { background-color: #E8C86A; }

/* Borders & focus rings */
html .border-moss { border-color: #7BB569; }
html .border-moss\/40 { border-color: rgba(123, 181, 105, .4); }
html .hover\:border-moss:hover { border-color: #7BB569; }
html .focus\:border-moss:focus { border-color: #7BB569; }
html .ring-moss\/30 { --tw-ring-color: rgba(123, 181, 105, .3); }
html .focus\:ring-moss\/20:focus { --tw-ring-color: rgba(123, 181, 105, .2); }

/* =========================================================
   PLAIN & NO-MOTION overrides
   Decorative animation and textured backgrounds removed.
   ========================================================= */

/* Reveals — content always visible */
.reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1; transform: none; transition: none; }

/* Decorative motion removed (leaves, blobs, pulse, marquee) */
.float-leaf, .float-leaf-slow, .float-leaf-2 { animation: none; display: none; }
.blob, .blob-slow { animation: none; display: none; }
.wa-float { animation: none; }
.marquee-wrap { display: none; }
.pt-overlay { display: none; }

/* Hover motion removed */
.btn:hover { transform: none; }
.leaf-card:hover { transform: none; }
.group:hover .service-icon-wrap { transform: none; }
.service-icon-wrap { transition: none; }
.img-reveal img { transition: none; transform: none; }
.img-reveal:hover img { transform: none; }
.img-reveal::after { display: none; }
.nav-link::after { transition: none; }

/* Plain backgrounds — no patterns or grain */
.pattern-botanical, .pattern-botanical-light { background-image: none; }
.texture-grain { background-image: none; }