/* ========================================================================
   themes.css
   - Dark (default)
   - Light
   - Blue (no white; light→dark blues only)  [aliases: [data-theme="light-blue"], .theme-blue]
   - Utilities, components, and compatibility overrides
   ======================================================================== */

/* ------------------------------
   Base / default (Dark) tokens
   ------------------------------ */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --color-bg: #1a1f2b;
  --color-bg-alt: #2a2f3b;
  --color-surface: #2a2f3b;
  --color-navbar: var(--color-surface);
  --color-footer: #15171a;
  --color-panel: #21252c;
  --color-border: #374151;

  /* Ink */
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;

  /* Brand / actions */
  --color-primary: #3f20fb;
  --color-primary-hover: #5b3ffd;
  --color-accent: #6366f1;

  /* Feedback */
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;

  /* Elevation / adornments */
  --shadow-elevate: 0 4px 16px rgba(0, 0, 0, 0.35);

  /* On-color text for filled elements */
  --color-on-primary: #0b1222; /* darker ink on bright accents in dark theme */
  --color-on-accent:  #0b1222;

  /* Radius, focus ring, etc. */
  --radius: 12px;
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/* ---------------------------------
   Light theme (true light, uses white)
   --------------------------------- */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-alt: #f4f6fb;
  --color-surface: #ffffff;
  --color-navbar: #ffffff;
  --color-footer: #f8fafc;
  --color-panel: #ffffff;
  --color-border: #d1d5db;

  --color-text: #1f2937;
  --color-text-muted: #6b7280;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-accent: #3b82f6;

  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;

  --shadow-elevate: 0 4px 16px rgba(0, 0, 0, 0.08);

  --color-on-primary: #ffffff;
  --color-on-accent:  #ffffff;

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* Light theme readability overrides for legacy classes */
[data-theme="light"] .text-white,
[data-theme="light"] .text-white * { color: var(--color-text) !important; }

[data-theme="light"] .hover\:text-white:hover { color: var(--color-text) !important; }

[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-700,
[data-theme="light"] .bg-gray-600,
[data-theme="light"] .bg-black { background-color: var(--color-surface) !important; }

[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-600 { color: var(--color-text-muted) !important; }

[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-500 {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  color: var(--color-text) !important;
  background-color: var(--color-bg-alt) !important;
  border-color: var(--color-border) !important;
}

[data-theme="light"] ::placeholder { color: var(--color-text-muted) !important; }

/* ---------------------------
   BLUE THEME (canonical)
   No white anywhere.
   Aliases: [data-theme="light-blue"], .theme-blue
   --------------------------- */
[data-theme="blue"],
[data-theme="light-blue"],
.theme-blue {
  /* Surfaces (light→dark blues) */
  --color-bg:        #e6f2ff; /* page */
  --color-bg-alt:    #dfeaff; /* inputs / alt */
  --color-surface:   #d6e6ff; /* generic surface (replaces #fff) */
  --color-navbar:    #dbe8ff; /* navbar */
  --color-footer:    #ccddff; /* footer */
  --color-panel:     #c9dcff; /* cards/panels */
  --color-border:    #9ec9ff;

  /* Ink */
  --color-text:       #0b2545; /* deep naval */
  --color-text-muted: #3a5572;

  /* Brand / actions */
  --color-primary:       #1e6ff2;
  --color-primary-hover: #1557c9;
  --color-accent:        #2a62e0;

  /* Feedback (cool-biased) */
  --color-danger:        #b72a2a;
  --color-danger-hover:  #972121;

  /* Elevation */
  --shadow-elevate: 0 4px 16px rgba(30, 64, 175, 0.15);

  /* On-color text for filled elements (no white) */
  --color-on-primary: #e6f2ff; /* very light blue ink */
  --color-on-accent:  #e6f2ff;

  --focus-ring: 0 0 0 3px rgba(30, 111, 242, 0.28);
}

/* Blue theme: eliminate any forced white text */
[data-theme="blue"] .text-white,
.theme-blue .text-white,
[data-theme="light-blue"] .text-white,
[data-theme="blue"] .text-white *,
.theme-blue .text-white *,
[data-theme="light-blue"] .text-white * {
  color: var(--color-text) !important;
}

/* -------------------------
   Global application styles
   ------------------------- */
html[data-theme],
body[data-theme],
body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Smooth theme transitions (opt-in for most elements) */
body, body * {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

/* Links */
a { color: var(--color-accent); }
a:hover { color: color-mix(in srgb, var(--color-primary) 85%, #000 15%); }

/* Generic components */
.card-surface {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevate);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-hover); }
.btn:focus { outline: none; box-shadow: var(--focus-ring); }

.theme-primary { background: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.theme-primary:hover { background: var(--color-primary-hover) !important; }

.theme-danger  { background: var(--color-danger) !important;  color: var(--color-on-primary) !important; }
.theme-danger:hover { background: var(--color-danger-hover) !important; }

.input, .select, .textarea,
.form-input, .form-textarea, .newsletter-input,
input, select, textarea {
  background: var(--color-bg-alt) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius);
}
::placeholder { color: var(--color-text-muted) !important; }

.hr { border: 0; height: 1px; background: var(--color-border); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* -------------------------
   Section theming helpers
   ------------------------- */
.theme-bg       { background-color: var(--color-bg) !important; }
.theme-bg-alt   { background-color: var(--color-bg-alt) !important; }
.theme-surface  { background-color: var(--color-panel) !important; }
.navbar-bg      { background-color: var(--color-navbar) !important; }
.footer-bg      { background-color: var(--color-footer) !important; }
.panel-bg       { background-color: var(--color-panel) !important; }
.theme-border   { border-color: var(--color-border) !important; }
.theme-text     { color: var(--color-text) !important; }
.theme-text-muted { color: var(--color-text-muted) !important; }

/* Major sections map to theme tokens */
.hero, .services, .pricing, .videos, .testimonials, .contact {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Cards / panels across sections */
.pricing-card, .contact-card, .testimonial-card, .video-container, .video-card, .service-card {
  background: var(--color-panel) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-elevate) !important;
  border-radius: var(--radius);
}

/* Service icons (keep recognisable accents) */
.service-icon {
  width: 64px; height: 64px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
}

/* Hover elevation */
.testimonial-card:hover, .service-card:hover, .video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08) !important;
}

/* Pricing: remove decorative dark pseudo-elements when light/blue */
[data-theme="light"] .pricing::before,
[data-theme="blue"] .pricing::before,
[data-theme="light-blue"] .pricing::before {
  content: "" !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  display: block !important;
  z-index: 0 !important;
}

/* Plan details */
.plan-price { color: var(--color-text) !important; }
.plan-features li { color: var(--color-text-muted) !important; }
.plan-features i { color: var(--color-primary) !important; }

/* Plan button */
.plan-button,
.btn-outline,
.cta-btn,
.form-submit,
.newsletter-button {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.plan-button:hover,
.btn-outline:hover,
.cta-btn:hover,
.form-submit:hover,
.newsletter-button:hover {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* Contact / quote blocks */
.contact-quote, .company-quote {
  background: var(--color-panel) !important;
  color: var(--color-text) !important;
  border-left: 4px solid var(--color-accent) !important;
  box-shadow: var(--shadow-elevate) !important;
  padding: 20px !important; border-radius: var(--radius) !important;
}
.quote-text { color: var(--color-text-muted) !important; font-style: italic; }

/* Footer */
.footer { background: var(--color-footer) !important; border-top: 1px solid var(--color-border) !important; }
.footer-bg a {
  display: inline-flex !important; width: auto !important; max-width: 100% !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--color-text-muted) !important; align-items: center; justify-content: center; gap: .5rem;
  padding: 0 !important; border-radius: 0 !important;
}
.footer-bg a:hover { color: var(--color-text) !important; text-decoration: underline !important; }

/* -------------------------
   Blue theme special rules
   ------------------------- */

/* No #fff labels anywhere in Blue theme */
[data-theme="blue"] .theme-primary,
.theme-blue .theme-primary,
[data-theme="light-blue"] .theme-primary,
[data-theme="blue"] .theme-danger,
.theme-blue .theme-danger,
[data-theme="light-blue"] .theme-danger {
  color: var(--color-on-primary) !important;
}

/* Hover states that previously forced white */
[data-theme="blue"] .plan-button:hover,
.theme-blue .plan-button:hover,
[data-theme="light-blue"] .plan-button:hover,
[data-theme="blue"] .btn-outline:hover,
.theme-blue .btn-outline:hover,
[data-theme="light-blue"] .btn-outline:hover,
[data-theme="blue"] .cta-btn:hover,
.theme-blue .cta-btn:hover,
[data-theme="light-blue"] .cta-btn:hover,
[data-theme="blue"] .form-submit:hover,
.theme-blue .form-submit:hover,
[data-theme="light-blue"] .form-submit:hover,
[data-theme="blue"] .newsletter-button:hover,
.theme-blue .newsletter-button:hover,
[data-theme="light-blue"] .newsletter-button:hover {
  color: var(--color-on-primary) !important;
}

/* Service icons ink in Blue */
[data-theme="blue"] .service-icon,
.theme-blue .service-icon,
[data-theme="light-blue"] .service-icon {
  color: var(--color-on-accent) !important;
}

/* Inputs / tables / legacy dark utilities inside Blue */
[data-theme="blue"] .table,
[data-theme="blue"] .table thead th,
[data-theme="blue"] .table th,
[data-theme="blue"] .table tbody tr,
[data-theme="blue"] .table td,
[data-theme="blue"] .bg-gray-900,
[data-theme="blue"] .bg-gray-800,
[data-theme="blue"] .bg-gray-700,
[data-theme="blue"] .text-gray-400,
[data-theme="blue"] .text-gray-500,
[data-theme="blue"] .border-gray-700,
[data-theme="blue"] .border-gray-800,
.theme-blue .table,
.theme-blue .bg-gray-900,
.theme-blue .bg-gray-800,
.theme-blue .bg-gray-700 {
  background: var(--color-panel) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Focus ring unify (remove harsh outlines but keep accessibility) */
[data-theme="blue"] :focus,
[data-theme="blue"] :focus-visible,
[data-theme="dark"] :focus,
[data-theme="dark"] :focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  outline-offset: 0 !important;
}

/* Remove dashed borders on file-drop areas */
[data-theme] .border-dashed,
.border-dashed,
[data-theme] .file-upload-area {
  border: 0 !important;
  box-shadow: none !important;
}

/* -------------------------
   Light-only conveniences
   ------------------------- */
[data-theme="light"] .footer-bottom,
[data-theme="light"] .footer-bottom-left,
[data-theme="light"] .footer-bottom-right,
[data-theme="light-blue"] .footer-bottom,
[data-theme="light-blue"] .footer-bottom-left,
[data-theme="light-blue"] .footer-bottom-right {
  color: var(--color-text-muted) !important;
  border-top-color: var(--color-border) !important;
}
[data-theme="light"] .footer a,
[data-theme="light"] .footer-link,
[data-theme="light"] .footer-bottom-link,
[data-theme="light-blue"] .footer a,
[data-theme="light-blue"] .footer-link,
[data-theme="light-blue"] .footer-bottom-link { color: var(--color-text-muted) !important; }
[data-theme="light"] .footer a:hover,
[data-theme="light"] .footer-link:hover,
[data-theme="light"] .footer-bottom-link:hover,
[data-theme="light-blue"] .footer a:hover,
[data-theme="light-blue"] .footer-link:hover,
[data-theme="light-blue"] .footer-bottom-link:hover { color: var(--color-text) !important; }

/* -------------------------
   Theme toggle button
   ------------------------- */
#theme-toggle-perm-container,
#theme-toggle-container {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 9999;
}
#theme-toggle-perm, #theme-toggle {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--shadow-elevate);
  cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem;
}
#theme-toggle-perm:hover, #theme-toggle:hover {
  background: var(--color-primary); color: var(--color-on-primary);
}
#theme-toggle-perm .theme-dot,
#theme-toggle .theme-dot,
#theme-toggle-perm .dot,
#theme-toggle .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-border);
}

/* -------------------------
   Accessibility hints
   ------------------------- */
html.theme-dark, html.dark { color-scheme: dark; }
@media (prefers-color-scheme: light) {
  .footer-bg a:hover { background: transparent !important; }
}

[data-theme="light"] #news .section-title,
[data-theme="light"] #news .section-title *,
[data-theme="light"] #news .section-title::before,
[data-theme="light-blue"] #news .section-title,
[data-theme="light-blue"] #news .section-title *,
[data-theme="light-blue"] #news .section-title::before {
  color: var(--color-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

[data-theme="light"] #news .section-description,
[data-theme="light-blue"] #news .section-description {
  color: var(--color-text-muted) !important;
}

[data-theme="light"] .features-section-title,
[data-theme="light"] .features-section-title *,
[data-theme="light"] .features-section-title::before,
[data-theme="light-blue"] .features-section-title,
[data-theme="light-blue"] .features-section-title *,
[data-theme="light-blue"] .features-section-title::before {
  color: var(--color-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

[data-theme="light"] .features-section-subtitle,
[data-theme="light-blue"] .features-section-subtitle {
  color: var(--color-text-muted) !important;
}

[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(209, 213, 219, 0.8) !important;
  color: var(--color-text) !important;
}

[data-theme="light"] .header.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(209, 213, 219, 0.9) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light-blue"] .header {
  background: rgba(219, 232, 255, 0.9) !important;
  border-bottom: 1px solid rgba(158, 201, 255, 0.85) !important;
  color: var(--color-text) !important;
}

[data-theme="light-blue"] .header.scrolled {
  background: rgba(201, 220, 255, 0.95) !important;
  border-bottom: 1px solid rgba(142, 185, 245, 0.9) !important;
  box-shadow: 0 6px 24px rgba(30, 64, 175, 0.18) !important;
}

[data-theme="light"],
[data-theme="light-blue"] {
  --header-link-color: var(--color-text);
}

[data-theme="light"] .header .nav-link,
[data-theme="light-blue"] .header .nav-link {
  color: var(--header-link-color) !important;
}

[data-theme="light"] .header .nav-link::after,
[data-theme="light-blue"] .header .nav-link::after {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent)) !important;
}

[data-theme="light"] .footer-logo-text,
[data-theme="light-blue"] .footer-logo-text {
  color: var(--color-text) !important;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-secondary-mobile,
[data-theme="light-blue"] .btn-secondary,
[data-theme="light-blue"] .btn-secondary-mobile {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
  color: var(--color-on-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-secondary-mobile:hover,
[data-theme="light-blue"] .btn-secondary:hover,
[data-theme="light-blue"] .btn-secondary-mobile:hover {
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)) !important;
  color: var(--color-on-primary) !important;
  border-color: var(--color-primary-hover) !important;
}

[data-theme="light"] .btn-secondary:active,
[data-theme="light"] .btn-secondary-mobile:active,
[data-theme="light-blue"] .btn-secondary:active,
[data-theme="light-blue"] .btn-secondary-mobile:active {
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)) !important;
  filter: brightness(0.95);
}

[data-theme="light"] .nav-action-btn,
[data-theme="light"] .nav-action-btn:focus {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: var(--color-on-primary) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
}

[data-theme="light"] .nav-action-btn:hover {
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(29, 78, 216, 0.25) !important;
}

[data-theme="light-blue"] .nav-action-btn,
[data-theme="light-blue"] .nav-action-btn:focus {
  background: linear-gradient(135deg, #2a62e0, #1e6ff2) !important;
  color: var(--color-on-primary) !important;
  border: 1px solid rgba(46, 110, 230, 0.5) !important;
}

[data-theme="light-blue"] .nav-action-btn:hover {
  background: linear-gradient(135deg, #194fbd, #1e6ff2) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(30, 111, 242, 0.25) !important;
}

[data-theme="dark"] .nav-action-btn,
body:not([data-theme]) .nav-action-btn,
[data-theme="dark"] .nav-action-btn:focus,
body:not([data-theme]) .nav-action-btn:focus {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .nav-action-btn:hover,
body:not([data-theme]) .nav-action-btn:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.35) !important;
}

[data-theme="light"] .social-link,
[data-theme="light-blue"] .social-link {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
  color: var(--color-on-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

[data-theme="light"] .social-link.youtube,
[data-theme="light-blue"] .social-link.youtube { background: #dc2626 !important; color: #ffffff !important; }
[data-theme="light"] .social-link.linkedin,
[data-theme="light-blue"] .social-link.linkedin { background: #0a66c2 !important; color: #ffffff !important; }
[data-theme="light"] .social-link.whatsapp,
[data-theme="light-blue"] .social-link.whatsapp { background: #25d366 !important; color: #0b2a12 !important; }

[data-theme="light"] .social-link:hover,
[data-theme="light-blue"] .social-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .contact-info-footer .contact-info-item,
[data-theme="light-blue"] .contact-info-footer .contact-info-item {
  color: var(--color-text-muted) !important;
}

[data-theme="light"] .contact-info-footer .contact-info-item span,
[data-theme="light-blue"] .contact-info-footer .contact-info-item span {
  color: var(--color-text) !important;
}

[data-theme="light"] #features .video-title,
[data-theme="light"] #features .video-desc,
[data-theme="light-blue"] #features .video-title,
[data-theme="light-blue"] #features .video-desc,
[data-theme="light"] #features .features-preview-container .video-title,
[data-theme="light"] #features .features-preview-container .video-desc,
[data-theme="light-blue"] #features .features-preview-container .video-title,
[data-theme="light-blue"] #features .features-preview-container .video-desc,
[data-theme="light"] #news .video-title,
[data-theme="light"] #news .video-desc,
[data-theme="light-blue"] #news .video-title,
[data-theme="light-blue"] #news .video-desc {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Features card background colors for light themes */
[data-theme="light"] #features .features-preview-container .video-card,
[data-theme="light-blue"] #features .features-preview-container .video-card {
  background: var(--color-panel) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-elevate) !important;
}

[data-theme="light"] #features .features-preview-container .video-card:hover,
[data-theme="light-blue"] #features .features-preview-container .video-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="light"] #features .features-preview-container .video-content,
[data-theme="light-blue"] #features .features-preview-container .video-content {
  background: linear-gradient(to bottom, transparent, var(--color-panel)) !important;
}

/* Testimonials card background and text colors for light themes */
[data-theme="light"] .testimonial-card,
[data-theme="light-blue"] .testimonial-card {
  background: var(--color-panel) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-elevate) !important;
}

[data-theme="light"] .testimonial-card:hover,
[data-theme="light-blue"] .testimonial-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="light"] .testimonial-text,
[data-theme="light-blue"] .testimonial-text {
  color: var(--color-text) !important;
}

[data-theme="light"] .testimonial-name,
[data-theme="light-blue"] .testimonial-name {
  color: var(--color-text) !important;
}

[data-theme="light"] .testimonial-role,
[data-theme="light-blue"] .testimonial-role {
  color: var(--color-text-muted) !important;
}

[data-theme="light"] .testimonial-avatar,
[data-theme="light-blue"] .testimonial-avatar {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* News section card background and text colors for light themes */
[data-theme="light"] #news .video-card,
[data-theme="light-blue"] #news .video-card {
  background: var(--color-panel) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-elevate) !important;
}

[data-theme="light"] #news .video-card:hover,
[data-theme="light-blue"] #news .video-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="light"] #news .video-content,
[data-theme="light-blue"] #news .video-content {
  background: var(--color-panel) !important;
}

[data-theme="light"] .news-search-bar,
[data-theme="light-blue"] .news-search-bar,
[data-theme="light"] .features-search-bar,
[data-theme="light-blue"] .features-search-bar {
  background: var(--color-panel) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-elevate) !important;
}

[data-theme="dark"] .news-search-bar,
body:not([data-theme]) .news-search-bar,
[data-theme="dark"] .features-search-bar,
body:not([data-theme]) .features-search-bar {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(55, 65, 81, 0.6) !important;
}

/* Hide the inner input box - make it completely transparent in all themes */
.news-search-input,
.features-search-input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.news-search-input:focus,
.features-search-input:focus,
.news-search-input:active,
.features-search-input:active,
.news-search-input:hover,
.features-search-input:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}