/* Dark mode overrides (toggle via html.dark) */
html.dark body {
  background: #0b1220;
  color: #e2e8f0;
}

/* ============================
   Client Portal (forum.css) dark theme
   Moved here from forum.css
   ============================ */
html.dark .portal-hero {
  background: radial-gradient(1200px 600px at 15% 10%, rgba(42, 167, 155, 0.20), transparent 60%),
    radial-gradient(900px 500px at 90% 15%, rgba(244, 124, 60, 0.12), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}

html.dark .portal-hero-text h1 {
  color: rgba(255, 255, 255, 0.92);
}

html.dark .portal-hero-text p,
html.dark .hero-stat p {
  color: rgba(255, 255, 255, 0.68);
}

html.dark .portal-dashboard {
  background-color: #0b1220;
}

html.dark .portal-sidebar,
html.dark .portal-main,
html.dark .card,
html.dark .sidebar-widget,
html.dark .create-post,
html.dark .post-card,
html.dark .category-card {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Explore (Communities) cards readability */
html.dark .category-card h4,
html.dark .category-card h5,
html.dark .category-card h3,
html.dark .category-card h2 {
  color: rgba(255, 255, 255, 0.92) !important;
}

html.dark .category-card p {
  color: rgba(255, 255, 255, 0.72) !important;
}

html.dark .topic-count {
  background-color: rgba(42, 167, 155, 0.18) !important;
  border: 1px solid rgba(42, 167, 155, 0.35) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

html.dark .category-card:hover {
  background-color: rgba(42, 167, 155, 0.12) !important;
  border-color: rgba(42, 167, 155, 0.30) !important;
}

html.dark .category-icon {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html.dark .category-icon i {
  color: rgba(255, 255, 255, 0.90) !important;
}

html.dark .portal-sidebar .nav-title,
html.dark .widget-title,
html.dark .post-user-info h4,
html.dark .user-name,
html.dark .tab-content h3 {
  color: rgba(255, 255, 255, 0.92);
}

html.dark .user-program,
html.dark .progress-text,
html.dark .post-time,
html.dark .member-program,
html.dark .event-time,
html.dark .post-content p {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Comments are shown on light cards even in dark mode, so keep text dark for contrast */
html.dark .comment-content {
  background: #f8fafc !important;
}

html.dark .comment-author {
  color: #0f172a !important;
}

html.dark .comment-time,
html.dark .comment-text {
  color: #334155 !important;
}

html.dark .portal-tabs,
html.dark .tab-contents {
  background: transparent;
}

html.dark .tab-btn {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

html.dark .tab-btn.active {
  background-color: rgba(42, 167, 155, 0.20);
  border-color: rgba(42, 167, 155, 0.45);
  color: rgba(255, 255, 255, 0.92);
}

html.dark .post-textarea,
html.dark .comment-input {
  background-color: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html.dark .post-textarea::placeholder,
html.dark .comment-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

html.dark .post-option,
html.dark .post-action,
html.dark .comment-action,
html.dark .nav-link {
  color: rgba(255, 255, 255, 0.70);
}

html.dark .nav-link.active,
html.dark .post-option:hover,
html.dark .post-action:hover,
html.dark .comment-action:hover {
  color: rgba(255, 255, 255, 0.92);
}

html.dark .post-actions-bar,
html.dark .comments-section,
html.dark .portal-nav,
html.dark .quick-actions {
  border-color: rgba(255, 255, 255, 0.10);
}

html.dark .progress-bar {
  background-color: rgba(255, 255, 255, 0.10);
}

html.dark .progress-fill {
  background: linear-gradient(90deg, rgba(42, 167, 155, 0.95), rgba(42, 167, 155, 0.55));
}

/* Upcoming Events */
html.dark .event-item {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

html.dark .event-item:hover {
  background-color: rgba(42, 167, 155, 0.12);
  border-color: rgba(42, 167, 155, 0.30);
}

html.dark .event-title {
  color: rgba(255, 255, 255, 0.90);
}

html.dark .btn.btn-outline {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.20);
  background-color: rgba(255, 255, 255, 0.06);
}

html.dark .btn.btn-outline:hover {
  background-color: rgba(42, 167, 155, 0.22);
  border-color: rgba(42, 167, 155, 0.35);
  color: rgba(255, 255, 255, 0.95);
}

/* Consultation modal (Book Session) */
html.dark #consultationModal .modal-content {
  background: rgba(2, 6, 23, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55) !important;
}

html.dark #consultationModal .modal-title,
html.dark #consultationModal .form-label {
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark #consultationModal .text-muted {
  color: rgba(226, 232, 240, 0.65) !important;
}

html.dark #consultationModal .btn-close {
  filter: invert(1);
  opacity: 0.85;
}

html.dark #consultationModal .form-control {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark #consultationModal .form-control::placeholder {
  color: rgba(226, 232, 240, 0.45) !important;
}

html.dark #consultationModal .form-control:focus {
  border-color: rgba(94, 234, 212, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.14) !important;
}

html.dark #consultationModal .time-slot-btn.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.82) !important;
}

html.dark #consultationModal .time-slot-btn.btn-outline-secondary:hover {
  background: rgba(94, 234, 212, 0.10) !important;
  border-color: rgba(94, 234, 212, 0.42) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  transform: translateY(-2px);
}

html.dark #consultationModal .time-slot-btn.active {
  background: linear-gradient(135deg, rgba(42, 167, 155, 0.95) 0%, rgba(25, 135, 84, 0.95) 100%) !important;
  border-color: rgba(42, 167, 155, 0.85) !important;
  color: #ffffff !important;
}

/* Main app shell */
html.dark .min-h-screen.bg-white {
  background: radial-gradient(1200px 800px at 20% 10%, rgba(20, 184, 166, 0.12), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(168, 85, 247, 0.10), transparent 55%),
    linear-gradient(180deg, #020617 0%, #0b1220 45%, #020617 100%) !important;
}

/* Hero: fix “light background + light text” issue */
html.dark #hero {
  background: radial-gradient(1200px 800px at 20% 20%, rgba(20, 184, 166, 0.16), transparent 55%),
    radial-gradient(900px 700px at 80% 40%, rgba(59, 130, 246, 0.10), transparent 55%),
    linear-gradient(135deg, #020617 0%, #0b1220 55%, #020617 100%) !important;
}

html.dark #hero .hero-bottom-fade {
  background: linear-gradient(to top, rgba(2, 6, 23, 0.95), transparent) !important;
}

/* Hero: “Trusted by 50,000+ Health Transformations” pill (teal glass + border + bright dot) */
html.dark #hero .hero-trust-badge {
  background: rgba(20, 184, 166, 0.14) !important;
  border: 1px solid rgba(45, 212, 191, 0.42) !important;
  color: #5eead4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

html.dark #hero .hero-trust-badge .hero-trust-dot {
  background-color: #34d399 !important;
  animation: none !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

/* Sections with inline light gradients (like Reviews/Video/Pricing blocks) */
html.dark section[style*="linear-gradient"][style*="#f8fafc"],
html.dark section[style*="linear-gradient"][style*="#f0fdfb"],
html.dark section[style*="linear-gradient"][style*="#f0f9ff"],
html.dark section[style*="linear-gradient"][style*="#f0fdfa"] {
  background: radial-gradient(900px 700px at 15% 20%, rgba(20, 184, 166, 0.16), transparent 55%),
    radial-gradient(900px 700px at 85% 30%, rgba(168, 85, 247, 0.12), transparent 55%),
    linear-gradient(135deg, #020617 0%, #0b1220 55%, #020617 100%) !important;
}

/* Light gradient sections exported with inner absolute background div */
html.dark section.relative.overflow-hidden.py-20.sm\:py-28 > div.absolute.inset-0[style*="#f8fafc"],
html.dark section.relative.overflow-hidden.py-20.sm\:py-28 > div.absolute.inset-0[style*="#f0fdfb"],
html.dark section.relative.overflow-hidden.py-20.sm\:py-28 > div.absolute.inset-0[style*="#f0f9ff"] {
  background: radial-gradient(900px 700px at 15% 20%, rgba(244, 63, 94, 0.10), transparent 55%),
    radial-gradient(900px 700px at 85% 30%, rgba(20, 184, 166, 0.14), transparent 55%),
    linear-gradient(135deg, #020617 0%, #0b1220 55%, #020617 100%) !important;
}

/* Problem/Solution cards use inline light backgrounds & dark inline colors */
html.dark [style*="background:rgba(255,255,255,0.7)"] {
  background: rgba(15, 23, 42, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark [style*="background:rgba(255, 255, 255, 0.85)"],
html.dark [style*="background:rgba(255,255,255,0.85)"] {
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark [style*="border-color:rgba(0,0,0,0.06)"] {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark [style*="border-color:rgba(0,0,0,0.07)"] {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark [style*="color:#0f172a"],
html.dark [style*="color:#1e293b"],
html.dark [style*="color:#334155"],
html.dark [style*="color:#475569"] {
  color: rgba(226, 232, 240, 0.88) !important;
}

html.dark .review-quote-mark {
  opacity: 0.12 !important;
}

/* Pricing cards: replace light gradient surfaces */
html.dark #pricing [style*="background:linear-gradient(145deg"][style*="rgba(255,255,255,0.98)"],
html.dark #pricing [style*="background:linear-gradient(145deg"][style*="rgba(248,250,252,1)"] {
  background: linear-gradient(
      145deg,
      rgba(20, 184, 166, 0.10) 0%,
      rgba(15, 23, 42, 0.92) 45%,
      rgba(2, 6, 23, 0.92) 100%
    ) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.45) !important;
}

html.dark #pricing [style*="background:linear-gradient(145deg"][style*="rgba(139,92,246,0.06)"] {
  background: linear-gradient(
      145deg,
      rgba(139, 92, 246, 0.12) 0%,
      rgba(15, 23, 42, 0.92) 45%,
      rgba(2, 6, 23, 0.92) 100%
    ) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.45) !important;
}

/* Make pricing list items readable */
html.dark #pricing li[style*="color:#334155"] {
  color: rgba(226, 232, 240, 0.82) !important;
}

html.dark .bg-white {
  background-color: rgba(15, 23, 42, 0.92) !important;
}

html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}

/*html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400 {
  color:#0d9488!important;
}*/

html.dark .text-slate-300 {
  color: rgba(226, 232, 240, 0.62) !important;
}

html.dark .text-slate-200 {
  color: rgba(226, 232, 240, 0.85) !important;
}

/* Brand/Accent colors: improve icon contrast in dark mode */
html.dark .text-primary-600 {
  color: #5eead4 !important; /* brighter teal for better visibility */
}

html.dark .text-primary-500 {
  color: #2dd4bf !important;
}

html.dark .text-primary-400 {
  color: #2dd4bf !important;
}

/* Ensure icons inside primary buttons stay visible */
html.dark .btn-primary svg {
  color: #ffffff !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100 {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .bg-slate-50 {
  background-color: rgba(2, 6, 23, 0.6) !important;
}

html.dark header.bg-white\/80 {
  background-color:rgb(2 6 23 / 94%) !important;
}

html.dark .header-nav-link {
  color: rgba(226, 232, 240, 0.72) !important;
}

html.dark .header-nav-link:hover {
  color: #5eead4 !important;
}

html.dark .header-logo-text {
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark .dark-header {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Header: mobile menu (dropdown) */
html.dark .header-menu-btn {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(2, 6, 23, 0.35) !important;
}

html.dark .header-menu-btn:hover {
  border-color:none!important;
  background:none!important;
}

html.dark .header-hamburger {
  background-color: rgba(226, 232, 240, 0.92) !important;
}

html.dark .header-mobile-menu {
  background: rgba(2, 6, 23, 0.96) !important;
  border-top-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .header-mobile-link {
  color: rgba(226, 232, 240, 0.82) !important;
}

html.dark .header-mobile-link:hover {
  color: #5eead4 !important;
  background: rgba(20, 184, 166, 0.10) !important;
}

html.dark .btn-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #e2e8f0 !important;
}

/* Cards & glass blocks */
html.dark .glass {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .shadow-card,
html.dark .shadow-sm {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35) !important;
}

/* Inputs */
html.dark .input-field {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark .input-field::placeholder {
  color: rgba(226, 232, 240, 0.45) !important;
}

/* Images: slightly dim in dark mode */
html.dark img {
  filter: brightness(0.92) contrast(1.05);
}

/* Keep logos crisp */
html.dark img[alt*="logo"],
html.dark img[src*="logo"] {
  filter: none;
}

/* Footer stays dark-teal in both modes */
html.dark footer.site-footer {
  background: #0b4a55;
}

/* About hero (page-hero-banner) */
html.dark .page-hero-banner {
  background: radial-gradient(1000px 700px at 20% 20%, rgba(20, 184, 166, 0.18), transparent 55%),
    radial-gradient(900px 700px at 80% 35%, rgba(168, 85, 247, 0.12), transparent 55%),
    linear-gradient(135deg, #020617 0%, #0b1220 55%, #020617 100%) !important;
}

/* About hero floating badges/cards */
html.dark .page-hero-banner [class*="bg-white"],
html.dark .page-hero-banner [style*="background:rgba(255,255,255"] {
  background: rgba(15, 23, 42, 0.70) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.88) !important;
}

html.dark .page-hero-banner [class*="text-slate-900"],
html.dark .page-hero-banner [class*="text-slate-800"],
html.dark .page-hero-banner [class*="text-slate-700"] {
  color: rgba(226, 232, 240, 0.96) !important;
}

html.dark .page-hero-banner [class*="text-slate-500"],
html.dark .page-hero-banner [class*="text-slate-400"] {
  color: rgba(226, 232, 240, 0.74) !important;
}

/* In the News slider (dark mode) */
html.dark .in-the-news-card {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .in-the-news-logo {
  filter: brightness(0.95) contrast(1.05);
}

html.dark .in-the-news-nav {
  background: rgba(2, 6, 23, 0.65) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: rgba(226, 232, 240, 0.85) !important;
}

/* About: story timeline (journey-story) */
html.dark #journey-story .card-hover.bg-slate-50 {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark #journey-story .journey-highlight {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(15, 23, 42, 0.92)) !important;
  border-color: rgba(94, 234, 212, 0.26) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45) !important;
}

html.dark #journey-story .journey-highlight .text-slate-900,
html.dark #journey-story .journey-highlight .text-slate-800,
html.dark #journey-story .journey-highlight .text-slate-700,
html.dark #journey-story .journey-highlight .text-slate-600,
html.dark #journey-story .journey-highlight .text-slate-500 {
  color: rgba(226, 232, 240, 0.9) !important;
}

html.dark #journey-story .journey-highlight [class*="bg-primary-500/10"] {
  background: rgba(20, 184, 166, 0.12) !important;
  border-color: rgba(94, 234, 212, 0.22) !important;
  color: #5eead4 !important;
}

/* Newsletter form card in dark mode */
html.dark #newsletter .newsletter-form-card {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important;
}

html.dark #newsletter .newsletter-form-card h3 {
  color: rgba(226, 232, 240, 0.96) !important;
}

html.dark #newsletter .newsletter-form-card p {
  color: rgba(226, 232, 240, 0.70) !important;
}

html.dark #newsletter .newsletter-form-card label {
  color: rgba(226, 232, 240, 0.72) !important;
}

html.dark #newsletter .newsletter-form-card .req {
  color: #fb7185;
}

html.dark #newsletter .newsletter-form-card input.input-field,
html.dark #newsletter .newsletter-form-card textarea.input-field {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark #newsletter .newsletter-form-card input.input-field::placeholder,
html.dark #newsletter .newsletter-form-card textarea.input-field::placeholder {
  color: rgba(226, 232, 240, 0.42) !important;
}

html.dark #newsletter .newsletter-form-card .input-field:focus {
  border-color: rgba(94, 234, 212, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.14) !important;
}

html.dark #newsletter .newsletter-form-card .newsletter-submit {
  background: rgba(20, 184, 166, 0.90) !important;
  box-shadow: 0 18px 45px rgba(20, 184, 166, 0.20) !important;
}

html.dark #newsletter .newsletter-form-card .newsletter-submit:hover {
  background: rgba(20, 184, 166, 0.76) !important;
}

/* Consultation cards: Health Assessment icon (teal chip like Book a Call, not light gray box) */
html.dark .consult-assessment-icon {
  background-color: rgba(20, 184, 166, 0.14) !important;
  border-color: rgba(45, 212, 191, 0.32) !important;
  color: #5eead4 !important;
}

/* Programs page: search + sort controls (they don't use .input-field) */
html.dark #programs input[type="text"],
html.dark #programs select {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark #programs input[type="text"]::placeholder {
  color: rgba(226, 232, 240, 0.45) !important;
}

html.dark #programs select {
  background-color: rgba(2, 6, 23, 0.55) !important;
}

/* Programs page: hover utility colors are too light in dark mode */
html.dark .hover\:bg-primary-50:hover {
  background: rgba(20, 184, 166, 0.10) !important;
}

html.dark .hover\:border-primary-300:hover {
  border-color: rgba(94, 234, 212, 0.45) !important;
}

/* Programs page: ensure search field isn't white (more specific than generic rules) */
html.dark section#programs input[placeholder*="Search"] {
  background-color: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  caret-color: #5eead4;
}

html.dark section#programs input[placeholder*="Search"]::placeholder {
  color: rgba(226, 232, 240, 0.45) !important;
}

/* Programs page: “Sort by” label + select should read well */
html.dark section#programs select {
  background-color: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

/* Programs page: bottom help CTA */
html.dark #programs .programs-help-cta {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important;
}

html.dark #programs .programs-help-cta h3 {
  color: rgba(226, 232, 240, 0.96) !important;
}

html.dark #programs .programs-help-cta p {
  color: rgba(226, 232, 240, 0.72) !important;
}

html.dark #programs .programs-help-cta .btn-ghost {
  background: rgba(2, 6, 23, 0.35);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.90);
}

/* Programs: small “badge” pills (Most Recommended / etc.) */
html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.18) !important;
}

html.dark .border-emerald-200 {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html.dark .text-emerald-700 {
  color: rgba(167, 243, 208, 0.98) !important;
}

/* Programs: “Beginner” pill */
html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.14) !important;
}

html.dark .text-emerald-600 {
  color: rgba(110, 231, 183, 0.98) !important;
}

/* Programs: “Take Free Assessment” CTA button should stay white */
html.dark .section-pad.bg-gradient-to-br.from-primary-700.to-primary-500 a.bg-white {
  background: rgba(255, 255, 255, 0.96) !important;
  color: rgba(11, 74, 85, 0.98) !important;
}

html.dark .section-pad.bg-gradient-to-br.from-primary-700.to-primary-500 a.bg-white:hover {
  background: rgba(255, 255, 255, 0.90) !important;
}

html.dark .section-pad.bg-gradient-to-br.from-primary-700.to-primary-500 a.bg-white svg {
  color: rgba(11, 74, 85, 0.98) !important;
}

/* Success Stories: Prev/Next buttons (inline styles are for light mode) */
html.dark button[aria-label="Previous testimonial"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.88) !important;
}

html.dark button[aria-label="Previous testimonial"]:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

html.dark button[aria-label="Next testimonial"] {
  background: rgba(20, 184, 166, 0.18) !important;
  border-color: rgba(45, 212, 191, 0.32) !important;
  color: rgba(94, 234, 212, 0.95) !important;
}

html.dark button[aria-label="Next testimonial"]:hover {
  background: rgba(20, 184, 166, 0.26) !important;
  border-color: rgba(94, 234, 212, 0.48) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Product comparison popup */
html.dark .product-comparison {
  color: rgba(226, 232, 240, 0.92);
}

html.dark .product-comparison > div[style*="max-height"] {
  color: rgba(226, 232, 240, 0.92);
}

html.dark .product-comparison .bg-white {
  background: rgba(15, 23, 42, 0.92) !important;
}

html.dark .product-comparison .border-slate-200,
html.dark .product-comparison .border-slate-100 {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .product-comparison .text-slate-900 {
  color: rgba(226, 232, 240, 0.96) !important;
}

html.dark .product-comparison .text-slate-700,
html.dark .product-comparison .text-slate-600,
html.dark .product-comparison .text-slate-500,
html.dark .product-comparison .text-slate-400 {
  color: rgba(226, 232, 240, 0.70) !important;
}

html.dark .product-comparison .bg-slate-50,
html.dark .product-comparison [class*="from-slate-50"] {
  background: rgba(2, 6, 23, 0.55) !important;
}

html.dark .product-comparison table {
  background: rgba(15, 23, 42, 0.92) !important;
}

html.dark .product-comparison td {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .product-comparison button[data-cmp-remove],
html.dark .product-comparison [data-cmp-close] {
  color: rgba(248, 250, 252, 0.9) !important;
}

/* Free assessment page */
html.dark .free-assessment-page main {
  background: rgba(2, 6, 23, 0.96) !important;
}

html.dark .free-assessment-page section.bg-slate-50\/40 {
  background: rgba(2, 6, 23, 0.65) !important;
}

html.dark .free-assessment-page .free-assessment-sidecard,
html.dark .free-assessment-page .free-assessment-formcard {
  background: rgba(15, 23, 42, 0.86) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5) !important;
}

html.dark .free-assessment-page .free-assessment-sidecard .bg-white\/90 {
  background: rgba(2, 6, 23, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .free-assessment-page input,
html.dark .free-assessment-page select,
html.dark .free-assessment-page textarea {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html.dark .free-assessment-page textarea::placeholder,
html.dark .free-assessment-page input::placeholder {
  color: rgba(226, 232, 240, 0.55) !important;
}

/* Free assessment hero (dark) */
html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 {
  background: linear-gradient(135deg, rgba(2, 6, 23, 0.96) 0%, rgba(15, 23, 42, 0.96) 55%, rgba(13, 148, 136, 0.12) 100%) !important;
}

html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 h1,
html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 .text-slate-900,
html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 .text-slate-800 {
  color: rgba(248, 250, 252, 0.96) !important;
}

html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 .text-slate-500,
html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 .text-slate-400 {
  color: rgba(226, 232, 240, 0.72) !important;
}

html.dark .free-assessment-page section.bg-gradient-to-br.from-slate-50.via-white.to-teal-50\/30 .badge-teal {
  background: rgba(20, 184, 166, 0.12) !important;
  border-color: rgba(45, 212, 191, 0.22) !important;
  color: rgba(94, 234, 212, 0.95) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

/* Remove unwanted light glare inside quick card */
html.dark .free-assessment-page .free-assessment-quickcard > .absolute.inset-0 {
  background: radial-gradient(circle at 20% 15%, rgba(45, 212, 191, 0.22) 0%, rgba(45, 212, 191, 0.08) 22%, rgba(2, 6, 23, 0) 62%) !important;
  opacity: 0.9 !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .bg-slate-100 {
  background: rgba(148, 163, 184, 0.14) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .btn-ghost {
  background: rgba(2, 6, 23, 0.25) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.88) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .btn-ghost:hover {
  background: rgba(2, 6, 23, 0.35) !important;
  border-color: rgba(94, 234, 212, 0.32) !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .text-slate-900,
html.dark .free-assessment-page .free-assessment-quickcard .text-slate-800 {
  color: rgba(248, 250, 252, 0.96) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .text-slate-600,
html.dark .free-assessment-page .free-assessment-quickcard .text-slate-500 {
  color: rgba(226, 232, 240, 0.72) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .bg-slate-100 {
  background: rgba(148, 163, 184, 0.18) !important;
}

html.dark .free-assessment-page .free-assessment-quickcard .border-slate-200 {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

/* Free Assessment: Personalized Wellness Assessment wizard */
html.dark [data-rfl-assessment] #rfl-assess-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(2, 6, 23, 0.88) 100%) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-qcount {
  color: rgba(226, 232, 240, 0.72) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-progress > div {
  background-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-progress > div.bg-primary-500 {
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.95), rgba(34, 211, 238, 0.65)) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-question {
  color: rgba(248, 250, 252, 0.96) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options button {
  background: rgba(2, 6, 23, 0.28) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  color: rgba(226, 232, 240, 0.88) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options button:hover {
  background: rgba(2, 6, 23, 0.38) !important;
  border-color: rgba(94, 234, 212, 0.34) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options button.border-primary-400 {
  border-color: rgba(94, 234, 212, 0.78) !important;
  background: rgba(20, 184, 166, 0.14) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.10) !important;
}

html.dark [data-rfl-assessment] .rfl-assess-icon {
  background: rgba(2, 6, 23, 0.40) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options button.border-primary-400 .rfl-assess-icon {
  background: rgba(20, 184, 166, 0.16) !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options label span {
  color: rgba(226, 232, 240, 0.78) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options input,
html.dark [data-rfl-assessment] #rfl-assess-options textarea,
html.dark [data-rfl-assessment] #rfl-assess-options select {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-options input::placeholder {
  color: rgba(226, 232, 240, 0.50) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-back {
  background: rgba(2, 6, 23, 0.30) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: rgba(248, 250, 252, 0.92) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-back:hover {
  background: rgba(2, 6, 23, 0.42) !important;
  border-color: rgba(94, 234, 212, 0.28) !important;
}

html.dark [data-rfl-assessment] #rfl-assess-next:not([disabled]) {
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 18px 50px rgba(20, 184, 166, 0.18);
}

html.dark [data-rfl-assessment] #rfl-assess-next[disabled] {
  background: rgba(15, 23, 42, 0.70) !important;
  opacity: 0.55 !important;
}

/* Header Sign in modal */
html.dark #rfl-signin-overlay .rfl-signin-panel {
  border-color: rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

html.dark #rfl-signin-overlay .border-slate-100 {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark #rfl-signin-overlay input[type="email"],
html.dark #rfl-signin-overlay input[type="password"] {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(248, 250, 252, 0.94) !important;
}

html.dark #rfl-signin-overlay input::placeholder {
  color: rgba(226, 232, 240, 0.45) !important;
}

html.dark #rfl-signin-overlay [data-rfl-signin-close]:not(.rfl-signin-backdrop) {
  background: rgba(2, 6, 23, 0.35) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(248, 250, 252, 0.88) !important;
}

/* Client Portal: Edit Profile modal
   Client Portal uses html[data-theme="light|dark"].
   Keep html.dark only as a fallback when data-theme isn't set. */
html[data-theme="dark"] #editProfileModal .modal-content,
html.dark:not([data-theme]) #editProfileModal .modal-content {
  background: rgba(2, 6, 23, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55) !important;
}

/* Theme accent (dark) */
html[data-theme="dark"] #editProfileModal .modal-content,
html.dark:not([data-theme]) #editProfileModal .modal-content {
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] #editProfileModal .modal-content::before,
html.dark:not([data-theme]) #editProfileModal .modal-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.95), rgba(34, 211, 238, 0.70), rgba(168, 85, 247, 0.45));
}

html[data-theme="dark"] #editProfileModal .modal-content::after,
html.dark:not([data-theme]) #editProfileModal .modal-content::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

html[data-theme="dark"] #editProfileModal .modal-header,
html.dark:not([data-theme]) #editProfileModal .modal-header {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(34, 211, 238, 0.06), transparent 65%);
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="dark"] #editProfileModal .btn.btn-primary,
html.dark:not([data-theme]) #editProfileModal .btn.btn-primary {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.95) 0%, rgba(6, 182, 212, 0.95) 100%) !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
  box-shadow: 0 18px 55px rgba(20, 184, 166, 0.18);
}

html[data-theme="dark"] #editProfileModal .btn.btn-primary:hover,
html.dark:not([data-theme]) #editProfileModal .btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(20, 184, 166, 0.22);
}

html[data-theme="dark"] #editProfileModal .modal-title,
html[data-theme="dark"] #editProfileModal .form-label,
html.dark:not([data-theme]) #editProfileModal .modal-title,
html.dark:not([data-theme]) #editProfileModal .form-label {
  color: rgba(226, 232, 240, 0.92) !important;
}

html[data-theme="dark"] #editProfileModal .text-muted,
html[data-theme="dark"] #editProfileModal .form-text,
html.dark:not([data-theme]) #editProfileModal .text-muted,
html.dark:not([data-theme]) #editProfileModal .form-text {
  color: rgba(226, 232, 240, 0.65) !important;
}

html[data-theme="dark"] #editProfileModal .btn-close,
html.dark:not([data-theme]) #editProfileModal .btn-close {
  filter: invert(1);
  opacity: 0.85;
}

html[data-theme="dark"] #editProfileModal .form-control,
html.dark:not([data-theme]) #editProfileModal .form-control {
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

html[data-theme="dark"] #editProfileModal .form-control::placeholder,
html.dark:not([data-theme]) #editProfileModal .form-control::placeholder {
  color: rgba(226, 232, 240, 0.45) !important;
}

html[data-theme="dark"] #editProfileModal .form-control:focus,
html.dark:not([data-theme]) #editProfileModal .form-control:focus {
  border-color: rgba(94, 234, 212, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.14) !important;
}

/* Client Portal: Edit Profile modal (light theme safety) */
html[data-theme="light"] #editProfileModal .modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
}

/* Theme accent (light) */
html[data-theme="light"] #editProfileModal .modal-content {
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] #editProfileModal .modal-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.95), rgba(34, 211, 238, 0.75), rgba(168, 85, 247, 0.55));
}

html[data-theme="light"] #editProfileModal .modal-content::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

html[data-theme="light"] #editProfileModal .modal-header {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(34, 211, 238, 0.05), transparent 60%);
}

html[data-theme="light"] #editProfileModal .btn.btn-primary {
  background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%) !important;
  border-color: rgba(20, 184, 166, 0.65) !important;
  box-shadow: 0 18px 45px rgba(20, 184, 166, 0.18);
}

html[data-theme="light"] #editProfileModal .btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(20, 184, 166, 0.22);
}

html[data-theme="light"] #editProfileModal .btn.btn-outline-secondary {
  border-color: rgba(15, 23, 42, 0.16) !important;
}