/* ============================================================
   Prudent Clinic — UI Enhancements v1.1
   Floating-card aesthetic inspired by CarePlus Medical design.
   Applied as a safe override layer on top of the Tailwind build.
   ============================================================ */

/* ── 1. Page background ───────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  /* Soft blue-teal gradient — matches the reference */
  background: linear-gradient(150deg, #d6edf8 0%, #e8f5fb 40%, #eef7fa 70%, #f3f9fc 100%);
  background-attachment: fixed;
}

/* ── 2. Hero section ─────────────────────────────────────── */
/* Enhance the existing from-primary-100 gradient */
section.relative.overflow-hidden {
  background: linear-gradient(165deg, #c2dcf0 0%, #d8eefa 35%, #edf7fd 70%, #f8fcff 100%) !important;
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
  box-shadow: 0 8px 48px rgba(31, 100, 160, 0.14);
}

/* Decorative blobs — slightly stronger */
section.relative.overflow-hidden [aria-hidden="true"].blur-3xl {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ── 3. Stats bar — glass card ────────────────────────────── */
section[aria-label="Clinic statistics"] {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 28px rgba(31, 100, 160, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.65);
}

/* ── 4. White content sections — subtle floating card ─────── */
section.py-16,
section[class^="py-"],
section[class*=" py-"] {
  border-radius: 1.75rem;
  box-shadow: 0 2px 24px rgba(31, 100, 160, 0.07);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Sections with cream background */
section[class*="bg-cream"] {
  background: rgba(248, 250, 253, 0.88) !important;
}

/* Border-top/bottom sections */
section.border-y {
  border-left: none !important;
  border-right: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  background: rgba(242, 249, 253, 0.80) !important;
}

/* ── 5. Navbar — enhanced glass ──────────────────────────── */
nav.sticky,
header.sticky,
div.sticky {
  /* Only target the topmost sticky element (the nav) */
}
/* Target by known class combo */
.sticky.top-0.z-40 {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(31, 100, 160, 0.08), 0 4px 20px rgba(31, 100, 160, 0.06) !important;
  border-bottom-color: transparent !important;
}

/* ── 6. Cards — hover lift effect ────────────────────────── */
/* General hover lift for bordered white cards */
a[class*="rounded-xl"][class*="border"],
a[class*="rounded-2xl"][class*="border"],
div[class*="rounded-xl"][class*="border"][class*="bg-white"],
div[class*="rounded-2xl"][class*="bg-white"],
article[class*="rounded"] {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease !important;
  will-change: transform;
}

a[class*="rounded-xl"][class*="border"]:hover,
a[class*="rounded-2xl"][class*="border"]:hover,
div[class*="rounded-xl"][class*="border"][class*="bg-white"]:hover,
div[class*="rounded-2xl"][class*="bg-white"]:hover,
article[class*="rounded"]:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px rgba(31, 100, 160, 0.16), 0 4px 12px rgba(31, 100, 160, 0.08);
}

/* Doctor / group cards with the .group class */
.group,
[class*="group/"] {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease !important;
}
.group:hover,
[class*="group/"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(31, 100, 160, 0.14);
}

/* ── 7. CTA buttons — lift + glow ────────────────────────── */
a[class*="bg-red-600"],
button[class*="bg-red-600"] {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease !important;
}
a[class*="bg-red-600"]:hover,
button[class*="bg-red-600"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35) !important;
}

a[class*="bg-primary"]:not([class*="bg-primary-50"]):not([class*="bg-primary-100"]),
button[class*="bg-primary"]:not([class*="bg-primary-50"]) {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
a[class*="bg-primary"]:not([class*="bg-primary-50"]):hover,
button[class*="bg-primary"]:not([class*="bg-primary-50"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 100, 160, 0.30) !important;
}

/* ── 8. Forms — glass morphism ───────────────────────────── */
form {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 8px 40px rgba(31, 100, 160, 0.13),
              inset 0 1px 0 rgba(255,255,255,0.90) !important;
  border-radius: 1.5rem !important;
}

/* Form inputs */
input,
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(31, 100, 160, 0.14) !important;
}

/* ── 9. Footer — elevated dark card ──────────────────────── */
footer {
  border-radius: 2rem 2rem 0 0 !important;
  box-shadow: 0 -4px 32px rgba(31, 100, 160, 0.10);
  margin-top: 2.5rem;
}

/* ── 10. Scroll-reveal animation ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.in-view {
    opacity: 1;
    transform: none;
  }
}

/* ── 11. Image hover zoom ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  figure img,
  .overflow-hidden img,
  [class*="rounded"] img {
    transition: transform 0.4s ease;
  }
  figure:hover img,
  .overflow-hidden:hover img {
    transform: scale(1.04);
  }
}

/* ── 12. Badge pills — subtle glow on hover ──────────────── */
span[class*="rounded-full"][class*="border"],
a[class*="rounded-full"][class*="border"] {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a[class*="rounded-full"][class*="border"]:hover {
  box-shadow: 0 4px 14px rgba(31, 100, 160, 0.18);
  transform: translateY(-1px);
}

/* ── 13. Specialties mega-menu cards ─────────────────────── */
.absolute.inset-x-0.top-full {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 40px rgba(31, 100, 160, 0.14) !important;
}