/* ==========================================================================
   PAIN STOP ARC - Multi-Page Web Application Stylesheet
   Material UI & Bootstrap 5 Custom Design System
   Design Philosophy: Clinical Precision & Empathetic Recovery
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --md-primary: #0F2C59;
  --md-primary-light: #1E3A8A;
  --md-primary-dark: #091A36;
  --md-secondary: #059669;
  --md-secondary-hover: #047857;
  --md-accent: #0284C7;
  --md-accent-light: #E0F2FE;
  --md-bg: #F8FAFC;
  --md-surface: #FFFFFF;
  --md-surface-variant: #F1F5F9;
  --md-text-primary: #0B1C30;
  --md-text-muted: #64748B;
  --md-border: #E2E8F0;

  --md-shadow-sm: 0 4px 12px rgba(15, 44, 89, 0.04);
  --md-shadow-md: 0 10px 30px rgba(15, 44, 89, 0.07);
  --md-shadow-lg: 0 20px 50px rgba(15, 44, 89, 0.12);

  --md-radius-sm: 8px;
  --md-radius-md: 16px;
  --md-radius-lg: 24px;
  --md-radius-pill: 9999px;

  --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Reset & Typography */
body {
  font-family: 'Inter', sans-serif;
  color: var(--md-text-primary);
  background-color: var(--md-bg);
  overflow-x: hidden;
  line-height: 1.6;
}

.modal-title {
  color: var(--md-surface);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--md-primary);
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Utility Top Bar */
.top-header-bar {
  background: var(--md-primary-dark);
  color: #CBD5E1;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-header-bar a {
  color: #E2E8F0;
}

.top-header-bar a:hover {
  color: var(--md-secondary);
}

/* Telemedicine pill — white on the dark utility bar, leading the left group */
.top-header-bar a.topbar-badge,
.topbar-badge {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  background: #FFFFFF;
  color: var(--md-primary);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  padding: 4px 14px;
  border-radius: var(--md-radius-pill);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.top-header-bar a.topbar-badge:hover,
.topbar-badge:hover {
  background: var(--md-accent-light);
  color: var(--md-primary);
}

.topbar-badge i {
  color: var(--md-secondary);
}

/* Social icons on the right of the utility bar */
.topbar-social {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* Shared by the utility bar and the footer — both sit on the dark navy. */
.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.78rem;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.10);
  transition: var(--transition-fast);
}

.social-icon-link:hover {
  color: var(--md-primary);
  background: #FFFFFF;
  transform: translateY(-1px);
}

.social-icon-link--lg {
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
}

/* Footer contact list */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: #94A3B8;
  line-height: 1.5;
}

.footer-contact li i {
  width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  text-align: center;
}

.footer-contact a {
  color: #E2E8F0;
  text-decoration: none;
  word-break: break-word;
}

.footer-contact a:hover {
  color: var(--md-accent);
}

/* Main Navbar */
.site-navbar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-smooth);
  padding: 14px 0;
}

.site-navbar.scrolled {
  padding: 10px 0;
  box-shadow: var(--md-shadow-md);
}

/* Hero Section Styles */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #07152B 0%, #0F2C59 50%, #1E3A8A 100%);
  color: white;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.25) 0%, rgba(5, 150, 105, 0.15) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

/* Hero content sits above all overlays */
.hero-section>.container {
  position: relative;
  z-index: 10;
}


.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Anchor the slide to the top so shrinking .hero-section trims the
     bottom of the image instead of cropping the top framing. */
  background-position: top center;
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 0;
}

/* Hero Background Carousel Slider */
.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-carousel .carousel-inner {
  position: absolute;
  inset: 0;
}

.hero-carousel .carousel-item {
  height: 100%;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

.hero-carousel .carousel-item.active,
.hero-carousel .carousel-item-next.carousel-item-start,
.hero-carousel .carousel-item-prev.carousel-item-end {
  z-index: 1;
}

.hero-carousel .carousel-item-next:not(.carousel-item-start),
.hero-carousel .active.carousel-item-end {
  z-index: 0;
}

.hero-carousel .hero-bg-overlay {
  mix-blend-mode: normal;
  opacity: 1;
  will-change: opacity;
}

.hero-carousel .carousel-indicators {
  margin-bottom: 14px;
  pointer-events: auto;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 26px;
  height: 4px;
  border-radius: var(--md-radius-pill);
  background-color: rgba(255, 255, 255, 0.35);
  border: 0;
  transition: var(--transition-fast);
}

.hero-carousel .carousel-indicators .active {
  background-color: #38BDF8;
  width: 38px;
}

.hero-carousel-control {
  width: 9%;
  opacity: 0;
  pointer-events: auto;
  transition: var(--transition-smooth);
}

.hero-carousel:hover .hero-carousel-control {
  opacity: 0.7;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  background-color: rgba(15, 44, 89, 0.4);
  border-radius: 50%;
  padding: 18px;
  background-size: 50% 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 991px) {
  .hero-carousel-control {
    display: none;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #38BDF8;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: var(--md-radius-pill);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hero-badge i {
  color: #F59E0B;
}

.hero-title {
  font-size: 3.3rem;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.9),
    0 2px 20px rgba(0, 0, 0, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.7);
}

@media (max-width: 991px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2.0rem;
  }
}

.hero-sub {
  color: #FFFFFF;
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 700;
  /* text-shadow:
    0 0 20px rgba(0,0,0,0.95),
    0 2px 10px rgba(0,0,0,0.85),
    0 1px 3px rgba(0,0,0,0.7); */
  margin-bottom: 0;
}

.hero-condition-tag {
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.9),
    0 1px 4px rgba(0, 0, 0, 0.75);
}



.text-highlight {
  color: #38BDF8;
  -webkit-text-fill-color: #38BDF8;
  display: inline-block;
  text-shadow:
    0 0 24px rgba(56, 189, 248, 0.7),
    0 0 40px rgba(0, 0, 0, 0.9),
    0 2px 12px rgba(0, 0, 0, 0.8);
}

@keyframes hero-gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Hero Entrance Animations */
@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  animation: hero-fade-in-up 0.7s ease-out both;
}

.hero-title {
  animation: hero-fade-in-up 0.8s 0.2s ease-out both;
}

.hero-sub {
  animation: hero-fade-in-up 0.8s 0.35s ease-out both;
}

.hero-cta {
  animation: hero-fade-in-up 0.8s 0.5s ease-out both;
}

.hero-tags {
  animation: hero-fade-in-up 0.8s 0.65s ease-out both;
}

.hero-card-anim {
  animation: hero-fade-in-up 0.9s 0.4s ease-out both;
}

/* Hero Typewriter Caret */
.type-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #38BDF8;
  margin-left: 5px;
  border-radius: 2px;
  vertical-align: -0.15em;
  animation: caret-blink 0.9s step-end infinite;
}

@keyframes caret-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-badge,
  .hero-title,
  .hero-sub,
  .hero-cta,
  .hero-tags,
  .hero-card-anim,
  .text-highlight {
    animation: none !important;
  }
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
.reveal,
.reveal-stagger>* {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.revealed,
.reveal-stagger.revealed>* {
  opacity: 1;
  transform: none;
}

.reveal-stagger>*:nth-child(1) {
  transition-delay: 0ms;
}

.reveal-stagger>*:nth-child(2) {
  transition-delay: 120ms;
}

.reveal-stagger>*:nth-child(3) {
  transition-delay: 240ms;
}

.reveal-stagger>*:nth-child(4) {
  transition-delay: 360ms;
}

/* ==========================================================================
   Google Map Embed
   ========================================================================== */
.map-embed {
  overflow: hidden;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: block;
  border: 0;
  filter: grayscale(20%) contrast(1.05);
}

@media (max-width: 991px) {
  .map-embed iframe {
    min-height: 320px;
  }
}

.hero-sub {
  font-size: 1.125rem;
  color: #FFFFFF;
  line-height: 1.5;
  max-width: 620px;
  margin-bottom: 32px;
  /* font-weight: 400; */
}

@media (max-width: 576px) {
  .hero-sub {
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 100%;
    margin-bottom: 24px;
  }
}

.hero-condition-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--md-radius-pill);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-condition-tag:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border-color: #38BDF8;
  transform: translateY(-2px);
}

.hero-card-glass {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--md-radius-lg) !important;
  padding: 28px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  position: relative;
  transition: var(--transition-smooth);
}

.hero-card-glass:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35) !important;
}

.doctor-hero-badge {
  display: flex;
  align-items: center;
  gap: 18px;
}

.doctor-hero-img {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  min-height: 90px !important;
  max-width: 90px !important;
  max-height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #38BDF8 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  flex-shrink: 0 !important;
}

.doctor-name-title {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1.25rem;
}

.doctor-degrees {
  color: #38BDF8;
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-trust-bar {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #E2E8F0;
  font-size: 0.9rem;
  font-weight: 600;
}

.hero-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* About Doctor Page Layout Styles */
.doctor-img-wrapper {
  position: relative;
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  box-shadow: var(--md-shadow-lg);
  border: 1px solid var(--md-border);
  background: #FFFFFF;
}

.doctor-img-wrapper img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
  transition: var(--transition-smooth);
}

.doctor-img-wrapper:hover img {
  transform: scale(1.02);
}

.doctor-overlay-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(15, 44, 89, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px 20px;
  border-radius: var(--md-radius-md);
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.qual-card {
  background: #FFFFFF;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  padding: 18px 20px;
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-fast);
  height: 100%;
}

.qual-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-shadow-md);
  border-color: var(--md-accent);
}

.qual-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.qual-icon.aiims {
  background: #FEE2E2;
  color: #DC2626;
}

.qual-icon.kolkata {
  background: #E0F2FE;
  color: #0284C7;
}

.qual-icon.dnb {
  background: #FEF3C7;
  color: #D97706;
}

.qual-icon.mnams {
  background: #D1FAE5;
  color: #059669;
}

.expertise-list-card {
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  padding: 24px;
}

.expertise-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--md-border);
}

.expertise-item:last-child {
  border-bottom: none;
}

.expertise-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D1FAE5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.navbar-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--md-primary), var(--md-accent));
  border-radius: var(--md-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(15, 44, 89, 0.2);
  overflow: hidden;
}

.site-navbar .brand-icon {
  width: 52px;
  height: 52px;
}

.brand-logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  transition: height 0.2s ease;
}

@media (max-width: 991px) {
  .brand-logo-img {
    height: 44px;
  }
}

@media (max-width: 576px) {
  .brand-logo-img {
    height: 36px;
  }
}

.brand-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--md-radius-sm);
}

.brand-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--md-primary);
  line-height: 1.1;
  margin: 0;
}

.brand-sub {
  font-size: 0.72rem;
  color: var(--md-secondary);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--md-text-primary) !important;
  padding: 8px 16px !important;
  border-radius: var(--md-radius-pill);
  transition: var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--md-primary) !important;
  background-color: var(--md-surface-variant);
}

@media (max-width: 991.98px) {
  .navbar-collapse .navbar-nav {
    align-items: center;
    text-align: center;
  }

  .navbar-collapse .navbar-nav .dropdown-menu {
    text-align: center;
  }

  .navbar-collapse>.d-flex {
    justify-content: center;
  }
}

.dropdown-menu-material {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-shadow-md);
  padding: 8px;
  min-width: 220px;
}

.dropdown-item-material {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--md-text-primary);
  padding: 10px 16px;
  border-radius: var(--md-radius-sm);
  transition: var(--transition-fast);
}

.dropdown-item-material:hover,
.dropdown-item-material.active {
  background: var(--md-surface-variant);
  color: var(--md-primary-light);
}

.btn-material-primary {
  background: linear-gradient(135deg, var(--md-primary-light), var(--md-primary));
  color: white !important;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--md-radius-pill);
  border: none;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.3);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-material-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30, 58, 138, 0.4);
}

.btn-material-secondary {
  background: linear-gradient(135deg, var(--md-secondary), #047857);
  color: white !important;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--md-radius-pill);
  border: none;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-material-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.4);
}

.btn-material-outline {
  background: transparent;
  color: var(--md-primary);
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--md-radius-pill);
  border: 2px solid var(--md-primary-light);
  transition: var(--transition-fast);
}

.btn-material-outline:hover {
  background: var(--md-primary-light);
  color: white !important;
}

/* Light outline variant for dark hero section */
.hero-section .btn-material-outline,
.btn-material-outline.text-white {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.hero-section .btn-material-outline:hover,
.btn-material-outline.text-white:hover {
  background: #FFFFFF !important;
  color: var(--md-primary) !important;
  border-color: #FFFFFF !important;
}

/* Internal Page Banner Header */
.page-hero-banner {
  background:
    linear-gradient(rgba(7, 21, 43, 0.72), rgba(7, 21, 43, 0.72)),
    url('../assets/banners/2.jpg') center center / cover no-repeat;
  color: white;
  padding: 65px 0 50px;
  position: relative;
  overflow: hidden;
}

.page-hero-title {
  /* Fluid: a fixed 2.5rem overflowed the viewport on phones, and because
     body has overflow-x:hidden the long titles were silently clipped. */
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.breadcrumb-material {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--md-radius-pill);
  font-size: 0.85rem;
  margin: 0;
}

.breadcrumb-material a {
  color: #38BDF8;
}

.breadcrumb-material .breadcrumb-item.active {
  color: #E2E8F0;
}

/* Cards & Grid Containers */
.material-card {
  background: white;
  border-radius: var(--md-radius-md);
  padding: 30px;
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-smooth);
}

.material-card:hover {
  box-shadow: var(--md-shadow-md);
  transform: translateY(-4px);
  border-color: var(--md-primary-light);
}

/* Symptom Diagnostic Section */
.symptom-section {
  padding: 80px 0;
  background-color: white;
}

.symptom-chip {
  padding: 10px 20px;
  border-radius: var(--md-radius-pill);
  border: 1.5px solid var(--md-border);
  background: var(--md-bg);
  color: var(--md-text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.symptom-chip:hover {
  background: rgba(30, 58, 138, 0.05) !important;
  color: var(--md-primary-light) !important;
  border-color: var(--md-primary-light) !important;
}

.symptom-chip.active {
  background: #FFFFFF !important;
  color: var(--md-primary-light) !important;
  border: 2px solid var(--md-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15), 0 4px 12px rgba(15, 44, 89, 0.08) !important;
  font-weight: 700 !important;
}

.symptom-chip.active i {
  color: var(--md-primary-light) !important;
}

.symptom-result-card {
  background: var(--md-bg);
  border-radius: var(--md-radius-md);
  padding: 30px;
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow-sm);
}

/* Qualification Badges */
.qualification-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--md-accent-light);
  color: var(--md-primary-light);
  padding: 6px 14px;
  border-radius: var(--md-radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 8px;
  margin-bottom: 8px;
}

/* Gallery Grid */
.gallery-item {
  position: relative;
  border-radius: var(--md-radius-md);
  overflow: hidden;
  box-shadow: var(--md-shadow-sm);
  aspect-ratio: 4/3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 44, 89, 0.85) 0%, transparent 100%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: white;
  transition: var(--transition-fast);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Article Cards */
.article-card {
  background: white;
  border-radius: var(--md-radius-md);
  border: 1px solid var(--md-border);
  overflow: hidden;
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-smooth);
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--md-shadow-md);
}

/* Thumbnail on the article cards - shares the .news-media geometry so the
   Articles and News listings crop mixed uploads to the same 16:10 box. */
.article-card .article-media {
  aspect-ratio: 16/10;
}

.article-card:hover .article-media img {
  transform: scale(1.06);
}

/* News List Item */
.news-item-card {
  background: white;
  border-radius: var(--md-radius-md);
  padding: 24px;
  border: 1px solid var(--md-border);
  border-left: 4px solid var(--md-secondary);
  box-shadow: var(--md-shadow-sm);
}

/* ==========================================================================
   News & Events — image-led cards
   A featured lead story plus a responsive grid. Both share .news-media, which
   holds a fixed aspect ratio so mixed image sizes still line up.
   ========================================================================== */
.news-media,
.article-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0F2C59 0%, #1E3A8A 100%);
}

/* Absolute so the image's intrinsic height never drives the card height —
   a tall portrait upload must not stretch the feature card. The box size comes
   from aspect-ratio (grid cards) or the stretched flex column (feature). */
.news-media img,
.article-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition-smooth);
}

/* Fallback plate for items with no image yet */
.news-media-placeholder,
.article-media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 2.75rem;
}

/* Strip under an article body linking out to the attached PDF. */
.article-pdf-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #FFF6F6;
  border: 1px solid rgba(193, 39, 45, 0.18);
  border-radius: var(--md-radius-md);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.article-pdf-link:hover {
  border-color: rgba(193, 39, 45, 0.4);
  box-shadow: var(--md-shadow-sm);
  transform: translateY(-2px);
}

.article-pdf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--md-radius-sm);
  background: #C1272D;
  color: #fff;
  font-size: 1.25rem;
}

/* The line above an article card's title: date badge left, PDF icon right. */
.article-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* PDF icon that shares the date's row. Sized to the badge next to it so the
   two read as one line rather than an icon stuck onto the end of it. */
.article-pdf-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: rgba(193, 39, 45, 0.08);
  color: #C1272D;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.article-pdf-flag:hover,
.article-pdf-flag:focus {
  background: #C1272D;
  color: #fff;
}

.news-media-date {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--md-radius-sm);
  padding: 6px 12px;
  text-align: center;
  line-height: 1.1;
  box-shadow: var(--md-shadow-sm);
}

.news-media-date .day {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--md-primary);
}

.news-media-date .month {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-muted);
}

/* --- Featured lead story --- */
.news-feature-card {
  background: white;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  box-shadow: var(--md-shadow-md);
  transition: var(--transition-smooth);
}

.news-feature-card:hover {
  box-shadow: var(--md-shadow-lg);
}

.news-feature-card:hover .news-media img {
  transform: scale(1.04);
}

.news-feature-card .news-media {
  height: 100%;
  min-height: 380px;
}

.news-feature-body {
  padding: 36px;
}

@media (max-width: 991.98px) {
  .news-feature-card .news-media {
    min-height: 240px;
    aspect-ratio: 16/9;
  }

  .news-feature-body {
    padding: 28px 24px;
  }
}

/* --- Grid cards --- */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  overflow: hidden;
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-smooth);
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--md-shadow-md);
}

.news-card:hover .news-media img {
  transform: scale(1.06);
}

.news-card .news-media {
  aspect-ratio: 16/10;
}

.news-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px;
}

.news-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--md-primary);
  margin-bottom: 10px;
}

.news-card-title a {
  color: inherit;
  text-decoration: none;
}

.news-card-title a:hover {
  color: var(--md-accent);
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--md-border);
}

.news-read-link {
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--md-accent);
  white-space: nowrap;
}

.news-read-link:hover {
  color: var(--md-primary);
}

/* --- Detail page hero image --- */
.news-detail-media {
  border-radius: var(--md-radius-md);
  overflow: hidden;
  max-height: 420px;
}

.news-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Modal & FAB */
.modal-backdrop.show {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(15, 23, 42, 0.65);
}

.modal-content-material {
  border-radius: var(--md-radius-lg);
  border: none;
  box-shadow: var(--md-shadow-lg);
  overflow: hidden;
}

.modal-header-material {
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-light));
  color: white;
  padding: 24px 30px;
  border: none;
}

#appointmentModal .input-group-text {
  border-color: #CBD5E1;
  background-color: #F8FAFC;
}

#appointmentModal .form-control,
#appointmentModal .form-select {
  border-color: #CBD5E1;
}

#appointmentModal .form-control:focus,
#appointmentModal .form-select:focus {
  border-color: var(--md-secondary);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.floating-action-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fab-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: var(--transition-fast);
}

.fab-whatsapp {
  background: #25D366;
}

.fab-appointment {
  background: var(--md-secondary);
}

/* Chatbot launcher - sits where the booking button used to, so it keeps the
   same thumb target on mobile. */
.fab-chatbot {
  background: var(--md-primary);
}

.fab-chatbot:focus-visible {
  outline: 3px solid var(--md-accent);
  outline-offset: 3px;
}

.fab-btn:hover {
  transform: scale(1.1);
  color: white;
}

/* ==========================================================================
   Chatbot
   A menu-led assistant panel anchored above the floating action bar. Answers
   come from the admin FAQ table, so the panel only owns presentation.
   ========================================================================== */
/* The launcher is the assistant's portrait, so the artwork fills the whole
   button rather than sitting as a glyph inside it. */
.fab-chatbot {
  padding: 0;
  overflow: hidden;
}

.fab-chatbot img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  transition: var(--transition-fast);
}

.fab-chatbot.is-active img {
  transform: scale(1.06);
}

.chatbot-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 1001;
  width: 370px;
  max-width: calc(100vw - 32px);
  /* The top bar (43px) plus the sticky navbar (84px) occupy the first 127px of
     the viewport. Capping the height at 100vh - 250px keeps the top of the
     panel at 158px or lower, so it never slides under the header. */
  height: 430px;
  max-height: calc(100vh - 250px);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-shadow-lg);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.chatbot-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Header --- */
.chatbot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-light) 100%);
}

.chatbot-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.chatbot-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chatbot-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.chatbot-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.chatbot-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.chatbot-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
}

.chatbot-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.chatbot-close:hover,
.chatbot-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

/* --- Transcript --- */
.chatbot-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: var(--md-bg);
  scrollbar-width: thin;
}

.chatbot-msg {
  display: flex;
  margin-bottom: 10px;
}

.chatbot-msg-bot {
  justify-content: flex-start;
}

.chatbot-msg-user {
  justify-content: flex-end;
}

.chatbot-bubble {
  max-width: 84%;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: 14px;
  white-space: pre-line;
  box-shadow: var(--md-shadow-sm);
}

.chatbot-msg-bot .chatbot-bubble {
  color: var(--md-text-primary);
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-bottom-left-radius: 4px;
}

.chatbot-msg-user .chatbot-bubble {
  color: #fff;
  background: var(--md-primary);
  border-bottom-right-radius: 4px;
}

/* --- Typing indicator --- */
.chatbot-typing {
  display: flex;
  gap: 4px;
  padding: 13px 14px;
}

.chatbot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--md-text-muted);
  animation: chatbot-blink 1.2s infinite ease-in-out;
}

.chatbot-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.chatbot-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes chatbot-blink {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- Quick replies --- */
.chatbot-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.chatbot-option {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  color: var(--md-primary);
  background: var(--md-surface);
  border: 1px solid var(--md-accent);
  border-radius: var(--md-radius-pill);
  cursor: pointer;
  transition: var(--transition-fast);
}

.chatbot-option:hover,
.chatbot-option:focus-visible {
  color: #fff;
  background: var(--md-accent);
}

.chatbot-option-contact {
  color: #fff;
  background: var(--md-secondary);
  border-color: var(--md-secondary);
}

.chatbot-option-contact:hover,
.chatbot-option-contact:focus-visible {
  background: var(--md-secondary-hover);
  border-color: var(--md-secondary-hover);
}

/* --- Composer --- */
.chatbot-composer {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--md-surface);
  border-top: 1px solid var(--md-border);
}

.chatbot-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--md-text-primary);
  background: var(--md-surface-variant);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-pill);
}

.chatbot-input:focus {
  outline: none;
  border-color: var(--md-accent);
  background: var(--md-surface);
}

.chatbot-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--md-primary);
  border: 0;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.chatbot-send:hover,
.chatbot-send:focus-visible {
  background: var(--md-primary-light);
}

@media (max-width: 575.98px) {
  .chatbot-panel {
    right: 16px;
    left: 16px;
    bottom: 84px;
    width: auto;
    max-width: none;
    height: min(58vh, 400px);
    max-height: calc(100vh - 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-panel {
    transition: none;
  }

  .chatbot-typing span {
    animation: none;
  }
}

/* Site Footer */
.site-footer {
  background: var(--md-primary-dark);
  color: #CBD5E1;
  padding: 70px 0 30px;
  font-size: 0.9rem;
}

.site-footer h5 {
  color: #FFFFFF;
  margin-bottom: 20px;
}

.site-footer p,
.site-footer .text-muted {
  color: #94A3B8 !important;
}

.site-footer strong {
  color: #FFFFFF !important;
}

.site-footer a {
  color: #CBD5E1;
}

.site-footer a:hover {
  color: #38BDF8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  margin-top: 50px;
}

.footer-bottom p,
.footer-bottom .text-muted {
  color: #94A3B8 !important;
}

/* ==========================================================================
   HOMEPAGE REDESIGN v5 - New Layout Styles
   ========================================================================== */

/* Stat Counter Cards */
.stat-counter-card {
  text-align: center;
  padding: 16px 16px;
  border-radius: var(--md-radius-md);
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  transition: var(--transition-smooth);
  height: 100%;
}

.stat-counter-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-shadow-md);
  border-color: var(--md-primary-light);
}

.stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}

.stat-label {
  color: var(--md-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 6px;
}

/* Stats Band */
.stats-band {
  background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-light) 60%, #1E3A8A 100%);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 60%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.stats-band .stat-number {
  color: #FFFFFF;
  font-size: 2.5rem;
}

.stats-band .stat-label {
  color: rgba(255, 255, 255, 0.75);
}

.stats-band .stat-counter-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stats-band .stat-counter-card:hover {
  border-color: #38BDF8;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 576px) {
  .stat-counter-card {
    padding: 18px 8px;
  }

  .stat-number,
  .stats-band .stat-number {
    font-size: 1.65rem;
    line-height: 1.15;
    word-break: break-word;
  }

  .stat-label {
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 4px;
  }
}

/* About / Welcome Section */
.about-section {
  padding: 90px 0;
}

.about-img-wrap {
  position: relative;
  padding-bottom: 30px;
}

.about-img-wrap img {
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-lg);
  width: 100%;
  object-fit: cover;
}

.experience-badge {
  position: absolute;
  bottom: 0;
  left: -24px;
  background: linear-gradient(135deg, var(--md-secondary), #047857);
  color: #FFFFFF;
  border-radius: var(--md-radius-md);
  padding: 20px 26px;
  box-shadow: var(--md-shadow-lg);
  text-align: center;
  animation: float-badge 4s ease-in-out infinite;
}

@keyframes float-badge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.experience-badge .big {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.experience-badge .small {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

.feature-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
}

.feature-check-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #D1FAE5;
  color: var(--md-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Specialization Service Cards */
.service-card {
  background: #FFFFFF;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  padding: 30px;
  height: 100%;
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--md-primary), var(--md-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
  border-color: var(--md-primary-light);
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--md-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(15, 44, 89, 0.12);
}

/* Clinic Panels */
.clinic-panel {
  background: #FFFFFF;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  padding: 32px;
  box-shadow: var(--md-shadow-sm);
}

/* Testimonials */
.testimonial-card {
  background: #FFFFFF;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-lg);
  padding: 28px;
  height: 100%;
  box-shadow: var(--md-shadow-sm);
  transition: var(--transition-smooth);
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--md-shadow-md);
}

.testimonial-quote {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 3rem;
  color: rgba(2, 132, 199, 0.12);
  line-height: 1;
}

.testimonial-stars {
  color: #F59E0B;
}

/* FAQ Accordion */
.faq-accordion .accordion-item {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md) !important;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--md-shadow-sm);
}

.faq-accordion .accordion-button {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--md-text-primary);
  padding: 20px 24px;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(2, 132, 199, 0.06);
  color: var(--md-primary);
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.faq-accordion .accordion-body {
  color: var(--md-text-muted);
  padding: 20px 24px;
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(135deg, var(--md-primary) 0%, #1E3A8A 55%, var(--md-accent) 100%);
  border-radius: var(--md-radius-lg);
  padding: 60px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: var(--md-shadow-lg);
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-banner .cta-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .cta-banner {
    padding: 40px 24px;
  }

  .experience-badge {
    left: 12px;
  }

  .experience-badge .big {
    font-size: 1.7rem;
  }
}
/* Nav labels should never break mid-word if an item is ever added */
@media (min-width: 992px) {
  .site-navbar .navbar-nav .nav-link,
  .site-navbar .btn-material-secondary {
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-navbar .navbar-nav .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.92rem;
  }
}

/* Embedded map on each clinic card */
.clinic-map {
  border-radius: var(--md-radius-sm);
  overflow: hidden;
  border: 1px solid var(--md-border);
  background: var(--md-surface-variant);
}

.clinic-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  filter: grayscale(15%) contrast(1.03);
}

@media (max-width: 575.98px) {
  .clinic-map iframe {
    height: 180px;
  }
}

@media (max-width: 575.98px) {
  .floating-action-bar {
    bottom: 16px;
    right: 16px;
  }
}

/* ==========================================================================
   Notice Board (home page, beside the FAQ)
   ========================================================================== */
.notice-board {
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-shadow-sm);
  overflow: hidden;
}

.notice-board-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-light) 100%);
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.01em;
}

.notice-board-pulse {
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: #F87171;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7);
  animation: noticePulse 2s infinite;
}

@keyframes noticePulse {
  70% { box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

.notice-board-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--md-border) transparent;
}

/* Four or more notices: capped to three rows by JS, this is the fallback. */
.notice-board-scroll.is-scrollable {
  max-height: 420px;
}

/* Looping: the track carries the movement, so no scrollbar is needed. */
.notice-board-scroll.is-looping {
  overflow: hidden;
}

.notice-track {
  will-change: transform;
}

.notice-board-scroll::-webkit-scrollbar { width: 6px; }
.notice-board-scroll::-webkit-scrollbar-thumb {
  background: var(--md-border);
  border-radius: var(--md-radius-pill);
}

.notice-item + .notice-item { border-top: 1px dashed var(--md-border); }

/* The looping duplicate: keep the divider across the seam. */
.notice-list-clone .notice-item:first-child { border-top: 1px dashed var(--md-border); }

.notice-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

.notice-link:hover,
.notice-link:focus-visible {
  background: var(--md-surface-variant);
}

.notice-date {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border-radius: var(--md-radius-sm);
  background: var(--md-accent-light);
  color: var(--md-primary);
  line-height: 1.1;
}

.notice-day {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
}

.notice-month {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.notice-body {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.notice-body .badge {
  font-size: 0.68rem;
  padding: 4px 10px;
}

.notice-new {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.1);
  border-radius: var(--md-radius-pill);
  padding: 3px 9px;
  animation: noticeBlink 1.6s steps(1) infinite;
}

@keyframes noticeBlink {
  50% { opacity: 0.35; }
}

.notice-title {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--md-primary);
  margin-bottom: 4px;
  transition: var(--transition-fast);
}

.notice-link:hover .notice-title { color: var(--md-accent); }

.notice-summary {
  display: block;
  font-size: 0.85rem;
  color: var(--md-text-muted);
  margin-bottom: 0;
}

.notice-arrow {
  align-self: center;
  font-size: 0.75rem;
  color: var(--md-text-muted);
  transition: var(--transition-fast);
}

.notice-link:hover .notice-arrow {
  color: var(--md-accent);
  transform: translateX(3px);
}

.notice-board-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--md-border);
  background: var(--md-surface-variant);
  text-align: center;
}

.notice-board-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--md-text-muted);
}

.notice-board-empty i { font-size: 1.6rem; display: block; }

@media (max-width: 991.98px) {
  .notice-board-scroll { max-height: 380px; }
}

.notice-board-foot {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-text-muted);
}

/* Notice dialogs — the board items and the first-visit popup */
.notice-modal .modal-content {
  border: 0;
  border-radius: var(--md-radius-md);
  overflow: hidden;
  box-shadow: var(--md-shadow-lg);
}

.notice-modal .modal-header {
  border-bottom: 0;
}

.notice-modal .modal-body {
  padding: 28px 30px;
}

.notice-modal-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--md-radius-sm);
}

.notice-modal-text {
  color: var(--md-text-primary);
  line-height: 1.75;
}

.notice-modal-text p { margin-bottom: 1rem; }
.notice-modal-text p:last-child { margin-bottom: 0; }
.notice-modal-text strong { color: var(--md-primary); }

.notice-modal .modal-footer {
  border-top: 1px solid var(--md-border);
  background: var(--md-surface-variant);
  gap: 10px;
}

@media (max-width: 575.98px) {
  .notice-modal .modal-body { padding: 20px 18px; }
  .notice-modal .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .notice-modal .modal-footer > * { width: 100%; }
  .notice-modal .modal-footer .d-flex { flex-direction: column; }
}

/* ==========================================================================
   Telemedicine page — two-column centres section
   The copy column sticks beside the centre cards on desktop, and drops back
   to normal flow below the lg breakpoint where the columns stack.
   ========================================================================== */

.telemedicine-intro-col {
  position: sticky;
  top: 100px;
}

.telemedicine-highlight-heading {
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.telemedicine-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--md-border);
}

.telemedicine-highlight:last-child {
  border-bottom: 0;
}

.telemedicine-highlight-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.telemedicine-note {
  background: var(--md-surface-variant);
  border-left: 3px solid var(--md-accent);
  border-radius: var(--md-radius-sm);
  padding: 14px 16px;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .telemedicine-intro-col {
    position: static;
    top: auto;
  }
}

/* ==========================================================================
   Chatbot launcher hover bubble
   A hand-built tooltip rather than the browser's own: it carries the
   assistant's name and greeting, and is styled as a comment/speech bubble
   pointing at the avatar. Shown only where a real pointer exists, so it never
   flashes on a tap, and suppressed while the chat panel itself is open.
   ========================================================================== */

.fab-chatbot-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

/* Anchored off the avatar's top-left corner: the bubble's bottom edge sits at
   the icon's mid-height and grows upwards and to the left. Sitting clear of the
   button column this way also keeps it from covering the WhatsApp button
   stacked directly above the launcher. */
.chatbot-tip {
  position: absolute;
  right: calc(100% + 18px);
  bottom: 50%;
  z-index: 1;
  width: max-content;
  max-width: 320px;
  padding: 12px 16px;
  /* Same amber as the site's text-warning icons and rating stars. */
  background: var(--bs-warning, #ffc107);
  border: 1px solid #e0a800;
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-shadow-md);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(10px, 8px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Two stacked triangles: the outer one paints the border, the inner one the
   fill, so the arrow keeps the bubble's 1px outline. It sits low on the right
   edge, the corner nearest the avatar. */
.chatbot-tip::before,
.chatbot-tip::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 100%;
  border: 9px solid transparent;
  border-left-color: #e0a800;
}

.chatbot-tip::after {
  border-left-color: var(--bs-warning, #ffc107);
  margin-left: -2px;
}

.chatbot-tip-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--md-text-primary);
  font-weight: 700;
  font-size: calc(0.82rem + 5px);
}

.chatbot-tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--md-secondary);
  flex-shrink: 0;
}

.chatbot-tip-text {
  display: block;
  color: var(--md-text-primary);
  font-size: calc(0.82rem + 5px);
  line-height: 1.55;
}

@media (hover: hover) {
  .fab-chatbot:hover ~ .chatbot-tip,
  .fab-chatbot:focus-visible ~ .chatbot-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0) scale(1);
  }
}

/* While the panel is open the launcher becomes a close button, and the
   greeting has already been said inside the panel. */
.fab-chatbot.is-active ~ .chatbot-tip {
  display: none;
}

/* ==========================================================================
   POLICY PAGES - Privacy, Terms, Cookies
   ========================================================================== */

/* Footer bar: the policy links sit opposite the copyright, separated by thin
   rules rather than bullets so they read as one quiet row.

   The floating WhatsApp and chatbot buttons are fixed to the bottom-right
   corner, which is exactly where these links landed — "Cookie Policy" was
   underneath the chatbot and could not be tapped. Wide screens pull the row in
   from the right to clear the buttons; on a phone the row is centred and full
   width, so there is nowhere to pull it to and the clearance has to be below
   instead. 148px is the stack's own height: two 56px buttons, the 12px between
   them, and the 24px it sits off the bottom. */
.footer-bottom {
  padding-bottom: 148px;
}

@media (min-width: 768px) {
  .footer-bottom {
    padding-bottom: 0;
    padding-right: 76px;
  }
}

.footer-legal li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  margin-left: 12px;
  padding-left: 12px;
}

.footer-legal a {
  color: #94A3B8;
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-legal a:hover {
  color: #38BDF8;
}

/* Contents list, beside the document on wide screens. Sticks below the fixed
   header so it stays reachable while reading a long policy. */
.legal-toc {
  position: sticky;
  top: 100px;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-md);
  padding: 22px 24px;
  box-shadow: var(--md-shadow-sm);
  /* Long policies would otherwise push the list past the fold. */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.legal-toc-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-muted);
  margin-bottom: 14px;
}

.legal-toc li + li {
  margin-top: 10px;
}

.legal-toc a {
  color: var(--md-text-primary);
  text-decoration: none;
  font-size: 0.86rem;
  line-height: 1.45;
  display: block;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: var(--transition-fast);
}

.legal-toc a:hover {
  color: var(--md-accent);
  border-left-color: var(--md-accent);
}

/* The document itself */
.legal-page {
  padding: 40px 44px 36px;
}

@media (max-width: 575.98px) {
  .legal-page {
    padding: 26px 22px 24px;
  }
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--md-accent-light);
  color: var(--md-primary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--md-radius-pill);
  margin-bottom: 20px;
}

.legal-intro {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--md-text-primary);
  padding-bottom: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--md-border);
}

/* Body styling is written against the tags themselves, because the content is
   authored as plain HTML in a textarea — whoever edits a policy should not have
   to remember class names to make a heading look like a heading. */
.legal-body {
  color: #475569;
  line-height: 1.8;
  font-size: 0.95rem;
}

.legal-body h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--md-primary);
  margin: 34px 0 12px;
  /* Anchored headings must clear the fixed header when jumped to. */
  scroll-margin-top: 100px;
}

.legal-body h2:first-child {
  margin-top: 8px;
}

.legal-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-text-primary);
  margin: 24px 0 10px;
  scroll-margin-top: 100px;
}

.legal-body p {
  margin-bottom: 14px;
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body strong {
  color: var(--md-text-primary);
}

.legal-body a {
  color: var(--md-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-body a:hover {
  color: var(--md-primary);
}

.legal-body code {
  background: var(--md-surface-variant);
  color: var(--md-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Tables appear in the cookie policy. Given a scroller of their own so a
   narrow phone scrolls the table rather than the whole page sideways. */
.legal-body table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: 0.88rem;
  display: block;
  overflow-x: auto;
}

.legal-body table th,
.legal-body table td {
  border: 1px solid var(--md-border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  min-width: 120px;
}

.legal-body table th {
  background: var(--md-surface-variant);
  color: var(--md-primary);
  font-weight: 700;
  white-space: nowrap;
}

.legal-footer {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--md-border);
  font-size: 0.88rem;
  color: var(--md-text-muted);
}

.legal-footer a {
  color: var(--md-accent);
  font-weight: 600;
}

/* Section heading inside a receipt block — "Your appointment", "Payment". Only
   appears when there are two blocks to tell apart. */
.payment-receipt-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-muted);
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--md-border);
}

/* Make Payment, in the top utility strip. Outlined rather than solid: the
   green Book Consultation button below it is the primary call to action, and
   two solid buttons stacked would compete. */
.topbar-pay-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 6px 14px;
  border-radius: var(--md-radius-pill);
  transition: var(--transition-fast);
}

.topbar-pay-btn:hover,
.topbar-pay-btn:focus-visible {
  background: var(--md-secondary);
  border-color: var(--md-secondary);
  color: #FFFFFF;
}