:root {
  --clinic-navy: #0f2744;
  --clinic-navy-dark: #091728;
  --clinic-primary: #0d9488;
  --clinic-primary-dark: #0f766e;
  --clinic-primary-light: #ccfbf1;
  --clinic-accent: #e11d48;
  --clinic-bg: #f8fafc;
  --clinic-card-bg: #ffffff;
  --clinic-border: #e2e8f0;
  --clinic-text: #1e293b;
  --clinic-muted: #64748b;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
  background-color: var(--clinic-bg);
  color: var(--clinic-text);
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Doctor Portrait & Avatar Frame */
.doctor-portrait-frame {
  width: 145px;
  height: 165px;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(15, 39, 68, 0.06);
  flex-shrink: 0;
}

.doctor-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center !important;
}

/* Responsive Width Helpers */
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
}

@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}

@media (min-width: 992px) {
  .w-lg-auto { width: auto !important; }
}

/* Custom Primary Teal Theme */
.btn-teal {
  background-color: #0d9488 !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.2s ease-in-out;
}

.btn-teal:hover, .btn-teal:focus {
  background-color: #0f766e !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
}

.btn-outline-teal {
  color: #0d9488 !important;
  border: 1.5px solid #0d9488 !important;
  background-color: transparent !important;
  transition: all 0.2s ease-in-out;
}

.btn-outline-teal:hover {
  background-color: #0d9488 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0d9488;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Mobile Responsive Utilities */
@media (max-width: 767.98px) {
  .display-3 {
    font-size: calc(1.75rem + 3vw) !important;
  }
  .display-4 {
    font-size: calc(1.5rem + 2.5vw) !important;
  }
  .display-5 {
    font-size: calc(1.4rem + 1.8vw) !important;
  }
  .display-6 {
    font-size: calc(1.25rem + 1.2vw) !important;
  }
  
  /* Touch-friendly buttons on mobile */
  .btn-mobile-full {
    width: 100% !important;
  }
  
  /* Doctor Cards spacing */
  .doctor-card .card-body,
  .doctor-card .col-md-4,
  .doctor-card .col-md-8 {
    padding: 1.25rem !important;
  }

  /* Specialities tabs border adjustment for vertical mobile stacking */
  .specialities-nav-col {
    border-right: none !important;
    border-bottom: 3px solid #0d9488 !important;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* Floating video pill position on mobile (Bottom-Right) */
  #floatingDoctorVideoPill {
    bottom: 15px !important;
    right: 15px !important;
    left: auto !important;
  }
  
  /* Floating campaign pill position on mobile (Bottom-Left) */
  #floatingCampaignTrigger {
    bottom: 15px !important;
    left: 15px !important;
    right: auto !important;
  }
}

@media (max-width: 480px) {
  #floatingDoctorVideoPill {
    bottom: 12px !important;
    right: 12px !important;
    left: auto !important;
    padding: 0.35rem 0.5rem !important;
  }
  #floatingDoctorVideoPill img {
    width: 36px !important;
    height: 36px !important;
  }
  #floatingCampaignTrigger {
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
    padding: 0.35rem 0.55rem !important;
  }
}

@media (min-width: 768px) {
  .specialities-nav-col {
    border-right: 4px solid #0d9488 !important;
  }
}

/* =========================================================
   Clean, Neat & Modern Clinic Theme Tokens & Components
   ========================================================= */

.text-navy {
  color: #0f2744 !important;
}

.text-teal {
  color: #0d9488 !important;
}

.bg-navy {
  background-color: #0f2744 !important;
  color: #ffffff !important;
}

.bg-teal-soft {
  background-color: #f0fdfa !important;
}

.border-subtle {
  border-color: #e2e8f0 !important;
}

/* Modern Clean Cards */
.card-clean {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 20px -2px rgba(15, 39, 68, 0.05), 0 2px 6px -1px rgba(15, 39, 68, 0.02);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.card-clean:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -4px rgba(15, 39, 68, 0.08), 0 4px 10px -2px rgba(15, 39, 68, 0.03);
  border-color: #cbd5e1;
}

/* Quick Action Cards on Homepage */
.quick-action-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.25rem 1rem;
  box-shadow: 0 10px 25px -3px rgba(15, 39, 68, 0.1), 0 4px 6px -2px rgba(15, 39, 68, 0.05);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.quick-action-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0d9488;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.quick-action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px -5px rgba(15, 39, 68, 0.15), 0 6px 12px -3px rgba(15, 39, 68, 0.06);
  border-color: #99f6e4;
}

.quick-action-card:hover::after {
  opacity: 1;
}

/* Modern Clinic Status Badges */
.badge-founder {
  background-color: #f0fdfa !important;
  color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
  font-weight: 600;
}

.badge-new-specialist {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 600;
}

.badge-soft-teal {
  background-color: #f0fdfa !important;
  color: #0d9488 !important;
  border: 1px solid #ccfbf1 !important;
  font-weight: 600;
}

/* Smooth Links */
.link-teal {
  color: #0d9488;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.link-teal:hover {
  color: #0f766e;
  text-decoration: underline;
}

/* Modern Pill Tabs */
.nav-pills-clean .nav-link {
  color: #475569;
  border-radius: 9999px;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav-pills-clean .nav-link:hover {
  color: #0d9488;
  background-color: #f0fdfa;
}

.nav-pills-clean .nav-link.active {
  background-color: #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}

/* =========================================================
   Modern Executive Ambient Lighting & High-Legibility Cards
   (Replaces busy dot-dot texture with clean, sleek depth)
   ========================================================= */

.ambient-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.ambient-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(55px);
  opacity: 0.35;
  z-index: 0;
}

.ambient-glow-teal {
  background: radial-gradient(circle, #0d9488 0%, rgba(13, 148, 136, 0.05) 70%, transparent 100%);
}

.ambient-glow-amber {
  background: radial-gradient(circle, #f59e0b 0%, rgba(245, 158, 11, 0.05) 70%, transparent 100%);
}

.ambient-glow-blue {
  background: radial-gradient(circle, #38bdf8 0%, rgba(56, 189, 248, 0.05) 70%, transparent 100%);
}

/* Subtle inner top-edge light highlight */
.glass-border-subtle {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 30px -5px rgba(10, 30, 54, 0.3) !important;
}

/* Dedicated Frosted OPD Schedule Box */
.opd-schedule-box {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.75rem 1.15rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.opd-schedule-box:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(45, 212, 191, 0.4);
}

/* High Legibility Card Typography */
.card-text-readable {
  color: rgba(255, 255, 255, 0.94) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.01em;
}

/* Executive Founder Card Glow & Frame */
.founder-avatar-ring {
  border: 3px solid #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.founder-avatar-ring:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Enhanced Mobile Readability Adjustments */
@media (max-width: 767.98px) {
  .opd-schedule-box {
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
  }
  .card-text-readable {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
  .founder-badge-list {
    gap: 0.35rem !important;
  }
  .founder-badge-list .badge {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
  }
}