/* ============================================
   DARK MODE - TOKENIZED
   OnlineTranslation.ae
   
   REPLACES: dark-mode.css (2000+ lines → ~800)
   
   All hardcoded colors replaced with var(--token)
   Zero !important declarations
   Works with @layer cascade system
   ============================================ */

@layer states {

  /* ============================================
     BASE BODY & BACKGROUNDS
     ============================================ */

  [data-theme="dark"],
  body.theme-dark {
    background: var(--surface-base);
    color: var(--text-body);
  }


  /* ============================================
     TYPOGRAPHY
     ============================================ */

  body.theme-dark h1,
  body.theme-dark h2,
  body.theme-dark h3,
  body.theme-dark h4,
  body.theme-dark h5,
  body.theme-dark h6 {
    color: var(--text-heading);
  }

  body.theme-dark p {
    color: var(--text-body);
  }

  body.theme-dark strong,
  body.theme-dark b {
    color: var(--text-heading);
  }

  body.theme-dark a {
    color: var(--link-color);
  }

  body.theme-dark a:hover {
    color: var(--link-hover);
  }


  /* ============================================
     HEADER & NAVIGATION
     ============================================ */

  body.theme-dark .header-desktop {
    background: rgba(11, 17, 26, 0.95);
    border-bottom: 1px solid var(--border-medium);
    backdrop-filter: blur(10px);
  }

  body.theme-dark .header-desktop.scrolled {
    background: rgba(11, 17, 26, 0.98);
  }

  body.theme-dark .header-mobile {
    background: rgba(11, 17, 26, 0.95);
    border-bottom: 1px solid var(--border-medium);
  }

  body.theme-dark .header-logo-text {
    color: var(--text-on-dark);
  }

  body.theme-dark .header-logo-text span {
    color: var(--accent-coral);
  }

  body.theme-dark .header-mobile .header-title {
    color: var(--text-on-dark);
  }

  body.theme-dark .header-mobile .header-title span {
    color: var(--accent-coral);
  }

  body.theme-dark .header-mobile .header-icon {
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.08);
  }

  body.theme-dark .menu-toggle-btn {
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.08);
  }

  body.theme-dark .menu-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Top bar */
  body.theme-dark .top-bar {
    background: var(--surface-navy-dark);
    border-bottom: 1px solid var(--border-light);
  }

  body.theme-dark .top-bar a,
  body.theme-dark .top-bar span {
    color: var(--text-muted);
  }

  body.theme-dark .top-bar a:hover {
    color: var(--text-on-dark);
  }

  /* Announcement bar */
  body.theme-dark .header-announcement {
    background: var(--accent-coral);
  }


  /* ============================================
     SIDEBAR MENU
     ============================================ */

  body.theme-dark .sidebar-menu {
    background: var(--surface-raised);
    border-right: 1px solid var(--border-medium);
  }

  body.theme-dark .sidebar-header {
    background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%);
    border-bottom: 1px solid var(--border-medium);
  }

  body.theme-dark .sidebar-logo,
  body.theme-dark .sidebar-brand-name {
    color: var(--text-on-dark);
  }

  body.theme-dark .sidebar-brand-name .brand-suffix {
    color: var(--accent-coral);
  }

  body.theme-dark .sidebar-tagline {
    color: var(--text-on-dark-muted);
  }

  body.theme-dark .sidebar-nav ul li a {
    color: var(--text-body);
  }

  body.theme-dark .sidebar-nav ul li a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-heading);
  }

  body.theme-dark .sidebar-nav ul li a i {
    color: var(--text-muted);
  }

  body.theme-dark .sidebar-nav ul li a:hover i {
    color: var(--link-color);
  }

  body.theme-dark .sidebar-cta {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  body.theme-dark .quick-links {
    background: var(--surface-navy-dark);
  }

  body.theme-dark .quick-links a {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-body);
  }

  body.theme-dark .sidebar-overlay {
    background: rgba(0, 0, 0, 0.7);
  }


  /* ============================================
     HERO SECTION
     ============================================ */

  body.theme-dark .hero-section {
    background: transparent;
  }

  body.theme-dark .hero-background {
    opacity: 1;
    z-index: 0;
  }

  body.theme-dark .hero-background .hero-image {
    opacity: 1;
    filter: brightness(0.75) saturate(0.85);
  }

  body.theme-dark .hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(11, 17, 26, 0.65) 0%,
      rgba(11, 17, 26, 0.5) 40%,
      rgba(11, 17, 26, 0.4) 70%,
      rgba(11, 17, 26, 0.3) 100%
    );
  }

  body.theme-dark .hero-overlay.exodus-overlay {
    background: linear-gradient(
      135deg,
      rgba(13, 17, 23, 0.65) 0%,
      rgba(13, 17, 23, 0.5) 40%,
      rgba(13, 17, 23, 0.4) 70%,
      rgba(13, 17, 23, 0.3) 100%
    );
  }

  body.theme-dark .hero-title,
  body.theme-dark .title-bg {
    color: var(--text-on-dark);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  }

  body.theme-dark .hero-subtitle {
    color: var(--text-body);
  }

  body.theme-dark .hero-subtitle .highlight {
    color: var(--accent-coral);
  }

  body.theme-dark .hero-description {
    color: var(--text-muted);
  }

  body.theme-dark .hero-cta {
    background: var(--accent-coral);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
  }

  body.theme-dark .hero-cta:hover {
    background: var(--accent-coral-hover);
    box-shadow: 0 6px 30px rgba(255, 107, 107, 0.5);
  }

  body.theme-dark .hero-cta-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
  }


  /* ============================================
     SECTIONS & BACKGROUNDS
     ============================================ */

  body.theme-dark section {
    background: var(--surface-base);
  }

  body.theme-dark .section-light,
  body.theme-dark .feature-cards-section,
  body.theme-dark .services-section,
  body.theme-dark .about-section {
    background: var(--surface-raised);
  }

  body.theme-dark .section-header h2 {
    color: var(--text-heading);
  }

  body.theme-dark .section-header p,
  body.theme-dark .section-subtitle {
    color: var(--text-muted);
  }


  /* ============================================
     CARDS (UNIVERSAL)
     ============================================ */

  body.theme-dark .card,
  body.theme-dark .feature-card,
  body.theme-dark .service-card,
  body.theme-dark .channel-card,
  body.theme-dark .why-card,
  body.theme-dark .stat-card,
  body.theme-dark .pricing-card,
  body.theme-dark .process-step {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-sm);
  }

  body.theme-dark .card:hover,
  body.theme-dark .feature-card:hover,
  body.theme-dark .service-card:hover,
  body.theme-dark .why-card:hover {
    background: var(--surface-navy);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-md);
  }

  body.theme-dark .card h3,
  body.theme-dark .feature-card h3,
  body.theme-dark .service-card h3,
  body.theme-dark .why-card h3,
  body.theme-dark .channel-card h3 {
    color: var(--text-heading);
  }

  body.theme-dark .card p,
  body.theme-dark .feature-card p,
  body.theme-dark .service-card p,
  body.theme-dark .why-card p,
  body.theme-dark .channel-card p {
    color: var(--text-secondary);
  }

  body.theme-dark .card-icon {
    background: rgba(127, 209, 255, 0.15);
    color: var(--link-color);
  }

  body.theme-dark .card-link {
    color: var(--link-color);
  }

  body.theme-dark .card-link:hover {
    color: var(--accent-coral);
  }

  body.theme-dark .card-divider {
    background: var(--border-medium);
  }

  /* Exodus red card variant */
  body.theme-dark .feature-card.exodus-red-card {
    background: #8b1a1f;
  }

  body.theme-dark .feature-card.exodus-red-card:hover {
    background: #a01f25;
  }


  /* ============================================
     PROCESS STEPS
     ============================================ */

  body.theme-dark .process-step {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark .process-step:hover {
    background: var(--surface-navy);
  }

  body.theme-dark .process-step__number {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  body.theme-dark .process-step h4 {
    color: var(--text-heading);
  }

  body.theme-dark .process-step p {
    color: var(--text-secondary);
  }

  body.theme-dark .process-connector {
    background: var(--border-medium);
  }


  /* ============================================
     TESTIMONIALS
     ============================================ */

  body.theme-dark .testimonial-card {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark .testimonial-card:hover {
    background: var(--surface-navy);
  }

  body.theme-dark .testimonial-text {
    color: var(--text-body);
  }

  body.theme-dark .testimonial-author {
    color: var(--text-heading);
  }

  body.theme-dark .testimonial-role {
    color: var(--text-muted);
  }

  body.theme-dark .testimonial-quote-icon {
    color: var(--accent-coral);
    opacity: 0.5;
  }


  /* ============================================
     BUTTONS
     ============================================ */

  body.theme-dark .btn-coral,
  body.theme-dark .hero-cta {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  body.theme-dark .btn-coral:hover,
  body.theme-dark .hero-cta:hover {
    background: var(--accent-coral-hover);
  }

  body.theme-dark .btn-outline {
    border-color: var(--text-heading);
    color: var(--text-heading);
  }

  body.theme-dark .btn-outline:hover {
    background: var(--text-heading);
    color: var(--surface-base);
  }

  body.theme-dark .header-cta {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  body.theme-dark .header-cta:hover {
    background: var(--accent-coral-hover);
  }


  /* ============================================
     FORMS
     ============================================ */

  body.theme-dark .form-input,
  body.theme-dark .form-textarea,
  body.theme-dark .form-select,
  body.theme-dark input,
  body.theme-dark textarea,
  body.theme-dark select {
    background: var(--surface-muted);
    border-color: var(--border-medium);
    color: var(--text-body);
  }

  body.theme-dark .form-input::placeholder,
  body.theme-dark input::placeholder,
  body.theme-dark textarea::placeholder {
    color: var(--text-muted);
  }

  body.theme-dark .form-input:focus,
  body.theme-dark .form-textarea:focus,
  body.theme-dark .form-select:focus,
  body.theme-dark input:focus,
  body.theme-dark textarea:focus,
  body.theme-dark select:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 3px rgba(127, 209, 255, 0.2);
  }

  body.theme-dark label,
  body.theme-dark .form-label {
    color: var(--text-heading);
  }

  body.theme-dark .form-helper {
    color: var(--text-muted);
  }

  body.theme-dark .form-error {
    color: var(--state-danger);
  }


  /* ============================================
     FOOTER
     ============================================ */

  body.theme-dark .footer {
    background: var(--surface-navy-dark);
    border-top: 1px solid var(--border-medium);
  }

  body.theme-dark .footer h4 {
    color: var(--text-heading);
  }

  body.theme-dark .footer p,
  body.theme-dark .footer li {
    color: var(--text-secondary);
  }

  body.theme-dark .footer a {
    color: var(--text-secondary);
  }

  body.theme-dark .footer a:hover {
    color: var(--link-color);
  }

  body.theme-dark .footer-bar {
    background: rgba(11, 17, 26, 0.98);
    border-top: 1px solid var(--border-medium);
  }

  body.theme-dark .footer-item {
    color: var(--text-muted);
  }

  body.theme-dark .footer-item.active-nav,
  body.theme-dark .footer-item:hover {
    color: var(--accent-coral);
  }


  /* ============================================
     FAQ & ACCORDION
     ============================================ */

  body.theme-dark .faq-item {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark .faq-question {
    color: var(--text-heading);
  }

  body.theme-dark .faq-answer {
    color: var(--text-body);
  }

  body.theme-dark .faq-toggle {
    color: var(--text-muted);
  }

  body.theme-dark .accordion-heading {
    background: var(--surface-muted);
    border-color: var(--border-medium);
    color: var(--text-heading);
  }

  body.theme-dark .accordion-content {
    background: var(--surface-raised);
    border-color: var(--border-medium);
    color: var(--text-body);
  }


  /* ============================================
     TABLES
     ============================================ */

  body.theme-dark table {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark th {
    background: var(--surface-navy);
    color: var(--text-heading);
    border-color: var(--border-medium);
  }

  body.theme-dark td {
    color: var(--text-body);
    border-color: var(--border-light);
  }

  body.theme-dark tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
  }


  /* ============================================
     IMAGES & MEDIA
     ============================================ */

  body.theme-dark .about-image img {
    filter: brightness(0.9);
  }

  body.theme-dark .service-card img,
  body.theme-dark .services-section img {
    filter: brightness(0.85);
  }


  /* ============================================
     MEGAMENU
     ============================================ */

  body.theme-dark .megamenu {
    background: var(--surface-raised);
    border-color: var(--border-medium);
    box-shadow: var(--shadow-lg);
  }

  body.theme-dark .megamenu-column h4 {
    color: var(--text-heading);
  }

  body.theme-dark .megamenu-link {
    color: var(--text-body);
  }

  body.theme-dark .megamenu-link:hover {
    color: var(--link-color);
    background: rgba(127, 209, 255, 0.1);
  }


  /* ============================================
     TRUST BAR
     ============================================ */

  body.theme-dark .trust-bar {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark .trust-item {
    color: var(--text-secondary);
  }

  body.theme-dark .trust-item i {
    color: var(--accent-gold);
  }


  /* ============================================
     DOCUMENT PAGES
     ============================================ */

  body.theme-dark .document-content {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark .document-content h1,
  body.theme-dark .document-content h2,
  body.theme-dark .document-content h3 {
    color: var(--text-heading);
  }

  body.theme-dark .document-content p,
  body.theme-dark .document-content li {
    color: var(--text-body);
  }


  /* ============================================
     WHATSAPP FLOAT
     ============================================ */

  body.theme-dark .whatsapp-float {
    background: #25D366;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }


  /* ============================================
     SELECTION
     ============================================ */

  body.theme-dark ::selection {
    background: var(--surface-navy);
    color: var(--text-heading);
  }


  /* ============================================
     HOMEPAGE SPECIFIC - Enhanced Dark Mode
     ============================================ */

  /* Hero Section - Deeper, richer dark mode */
  body.theme-dark.homepage .hero-section {
    background: var(--surface-base);
  }

  body.theme-dark.homepage .hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(11, 17, 26, 0.88) 0%,
      rgba(11, 17, 26, 0.75) 40%,
      rgba(11, 17, 26, 0.65) 70%,
      rgba(11, 17, 26, 0.55) 100%
    );
  }

  body.theme-dark .hero-bullets li {
    color: var(--text-body);
  }

  body.theme-dark .hero-bullets i {
    color: var(--accent-coral);
  }

  /* Overlap Cards - Better contrast */
  body.theme-dark .overlap-cards-wrapper {
    background: transparent;
  }

  body.theme-dark .overlap-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  body.theme-dark .overlap-card:hover {
    background: var(--surface-navy);
    border-color: var(--border-dark);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  }

  body.theme-dark .overlap-card-icon {
    background: rgba(127, 209, 255, 0.15);
    color: var(--link-color);
  }

  body.theme-dark .overlap-card-title {
    color: var(--text-heading);
  }

  body.theme-dark .overlap-card-desc {
    color: var(--text-secondary);
  }

  body.theme-dark .overlap-card-badge {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  /* Trust Bar - Logo capsules (light background for logo visibility) */
  body.theme-dark .trust-bar-section {
    background: var(--surface-raised);
    border-top: 1px solid var(--border-medium);
    border-bottom: 1px solid var(--border-medium);
  }

  body.theme-dark .trust-bar-title {
    color: var(--text-muted);
  }

  /* Keep capsules light in dark mode so logos remain visible */
  body.theme-dark .trust-capsule {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }

  body.theme-dark .trust-capsule:hover {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  /* No filter needed - logos display in original colors on light capsule */
  body.theme-dark .trust-capsule img {
    filter: none;
  }

  /* Services Section */
  body.theme-dark .services-section,
  body.theme-dark .services-section.bg-white {
    background: var(--surface-base);
  }

  body.theme-dark .service-card-v2 {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  body.theme-dark .service-card-v2:hover {
    background: var(--surface-navy);
    border-color: var(--border-dark);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
  }

  body.theme-dark .service-card-v2 .card-image img {
    filter: brightness(0.85) saturate(0.9);
  }

  body.theme-dark .service-card-v2 h3 {
    color: var(--text-heading);
  }

  body.theme-dark .service-card-v2 p {
    color: var(--text-secondary);
  }

  body.theme-dark .service-card-v2 .card-arrow {
    color: var(--link-color);
  }

  body.theme-dark .service-card-v2:hover .card-arrow {
    color: var(--accent-coral);
  }

  body.theme-dark .service-card-v2 .card-badge {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  /* Why Section */
  body.theme-dark .why-section,
  body.theme-dark .why-section.bg-light {
    background: var(--surface-raised);
  }

  body.theme-dark .why-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .why-card:hover {
    background: var(--surface-navy);
    border-color: var(--link-color);
  }

  body.theme-dark .why-card i {
    color: var(--link-color);
  }

  body.theme-dark .why-card:hover i {
    color: var(--accent-coral);
  }

  /* Process Section */
  body.theme-dark .process-section,
  body.theme-dark .process-section.bg-white {
    background: var(--surface-base);
  }

  body.theme-dark .exodus-process-steps .process-step {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .exodus-process-steps .process-step:hover {
    background: var(--surface-navy);
    border-color: var(--border-dark);
  }

  /* Metrics Section */
  body.theme-dark .ot-metrics {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .ot-metric-value {
    color: var(--text-heading);
  }

  body.theme-dark .ot-metric-label {
    color: var(--text-body);
  }

  body.theme-dark .ot-metric-note {
    color: var(--text-muted);
  }

  /* Specialists Section */
  body.theme-dark .specialists-section {
    background: var(--surface-raised);
  }

  body.theme-dark .specialist-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .specialist-card:hover {
    background: var(--surface-navy);
    border-color: var(--link-color);
  }

  body.theme-dark .specialist-card-icon {
    background: rgba(127, 209, 255, 0.12);
    color: var(--link-color);
  }

  body.theme-dark .specialist-card:hover .specialist-card-icon {
    background: rgba(255, 107, 107, 0.12);
    color: var(--accent-coral);
  }

  body.theme-dark .specialist-tag {
    background: var(--surface-navy);
    color: var(--text-muted);
    border: 1px solid var(--border-medium);
  }

  /* Feature Cards (iOS section) */
  body.theme-dark .feature-cards-section {
    background: var(--surface-raised);
  }

  body.theme-dark .feature-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .feature-card:hover {
    background: var(--surface-navy);
  }

  body.theme-dark .card-divider {
    background: var(--border-medium);
  }

  /* Section Headers */
  body.theme-dark .section-label {
    color: var(--link-color);
  }

  body.theme-dark .section-title {
    color: var(--text-heading);
  }

  body.theme-dark .section-divider {
    background: linear-gradient(90deg, var(--accent-coral) 0%, var(--link-color) 100%);
  }

  /* Porto Header Integration */
  body.theme-dark .site-header .header-body {
    background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%);
    border-bottom: 1px solid var(--border-medium);
  }

  body.theme-dark .site-header .header-top {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-light);
  }

  /* CTA Buttons in Dark Mode */
  body.theme-dark .hero-cta,
  body.theme-dark .exodus-cta {
    background: var(--accent-coral);
    color: var(--text-on-dark);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.35);
  }

  body.theme-dark .hero-cta:hover,
  body.theme-dark .exodus-cta:hover {
    background: var(--accent-coral-hover);
    box-shadow: 0 6px 30px rgba(255, 107, 107, 0.45);
  }

  body.theme-dark .hero-cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--text-on-dark);
  }

  body.theme-dark .hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
  }


  /* ============================================
     SERVICE PAGES - Full Dark Mode Support
     ============================================ */

  /* Section backgrounds - .bg-white and .bg-light */
  body.theme-dark .section.bg-white,
  body.theme-dark section.bg-white {
    background: var(--surface-base);
  }

  body.theme-dark .section.bg-light,
  body.theme-dark section.bg-light {
    background: var(--surface-raised);
  }

  /* Content Prose - Main content area styling */
  body.theme-dark .content-prose {
    color: var(--text-body);
  }

  body.theme-dark .content-prose h2,
  body.theme-dark .content-prose h3,
  body.theme-dark .content-prose h4 {
    color: var(--text-heading);
  }

  body.theme-dark .content-prose p {
    color: var(--text-body);
  }

  body.theme-dark .content-prose a {
    color: var(--link-color);
  }

  body.theme-dark .content-prose a:hover {
    color: var(--accent-coral);
  }

  body.theme-dark .content-prose ul li,
  body.theme-dark .content-prose ol li {
    color: var(--text-body);
  }

  /* Section Headers */
  body.theme-dark .section h2,
  body.theme-dark section h2 {
    color: var(--text-heading);
  }

  body.theme-dark .section-intro {
    color: var(--text-muted);
  }

  /* Pricing Grid */
  body.theme-dark .pricing-grid .pricing-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .pricing-grid .pricing-card--featured {
    border-color: var(--accent-coral);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.2);
  }

  body.theme-dark .pricing-card h3 {
    color: var(--text-heading);
  }

  body.theme-dark .pricing-price {
    color: var(--link-color);
  }

  body.theme-dark .pricing-time {
    color: var(--text-muted);
  }

  body.theme-dark .pricing-features li {
    color: var(--text-body);
    border-bottom-color: var(--border-light);
  }

  body.theme-dark .pricing-features li::before {
    color: var(--accent-coral);
  }

  /* Service Snapshot (Hero) */
  body.theme-dark .service-snapshot {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-medium);
  }

  body.theme-dark .snapshot-item {
    color: var(--text-body);
  }

  body.theme-dark .snapshot-item i {
    color: var(--accent-coral);
  }

  body.theme-dark .snapshot-item strong {
    color: var(--text-heading);
  }

  /* Breadcrumbs */
  body.theme-dark .breadcrumbs {
    background: var(--surface-navy-dark);
    border-bottom: 1px solid var(--border-medium);
  }

  body.theme-dark .breadcrumb-link {
    color: var(--text-muted);
  }

  body.theme-dark .breadcrumb-link:hover {
    color: var(--text-heading);
  }

  body.theme-dark .breadcrumb-sep {
    color: var(--text-muted);
  }

  body.theme-dark .breadcrumb-current {
    color: var(--text-heading);
  }

  /* Generic breadcrumb class */
  body.theme-dark .breadcrumb {
    color: var(--text-muted);
  }

  body.theme-dark .breadcrumb a {
    color: var(--text-muted);
  }

  body.theme-dark .breadcrumb a:hover {
    color: var(--text-heading);
  }

  body.theme-dark .breadcrumb .current {
    color: var(--text-heading);
  }


  /* ============================================
     ACCORDION SECTION COMPONENT - Dark Mode
     ============================================ */

  body.theme-dark .ot-accordion-section {
    background: var(--surface-raised);
  }

  body.theme-dark .ot-accordion-section:nth-child(even) {
    background: var(--surface-base);
  }

  body.theme-dark .ot-accordion-title {
    color: var(--text-heading);
  }

  body.theme-dark .ot-accordion-item {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  body.theme-dark .ot-accordion-section:nth-child(even) .ot-accordion-item {
    background: var(--surface-raised);
  }

  body.theme-dark .ot-accordion-header {
    color: var(--text-heading);
  }

  body.theme-dark .ot-accordion-header:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  body.theme-dark .ot-accordion-icon {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
  }

  body.theme-dark .ot-accordion-item.is-open .ot-accordion-icon {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  body.theme-dark .ot-accordion-content p,
  body.theme-dark .ot-accordion-content li {
    color: var(--text-body);
  }

  body.theme-dark .ot-accordion-content a {
    color: var(--link-color);
  }

  body.theme-dark .ot-accordion-content a:hover {
    color: var(--accent-coral);
  }


  /* ============================================
     FAQ DETAILS ELEMENT - Dark Mode
     ============================================ */

  body.theme-dark .faq-list {
    border-color: var(--border-medium);
  }

  body.theme-dark .faq-item {
    border-bottom-color: var(--border-medium);
  }

  body.theme-dark .faq-question {
    color: var(--text-heading);
  }

  body.theme-dark .faq-question::after {
    color: var(--accent-coral);
  }

  body.theme-dark .faq-answer p {
    color: var(--text-body);
  }

  body.theme-dark details.faq-item {
    background: var(--surface-muted);
    border-color: var(--border-medium);
  }

  body.theme-dark details.faq-item summary {
    color: var(--text-heading);
  }


  /* ============================================
     LOCATION PAGES - Dark Mode
     ============================================ */

  /* Service Grid Cards (Location Cards) */
  body.theme-dark .service-grid .service-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .service-grid .service-card:hover {
    background: var(--surface-navy);
    border-color: var(--accent-coral);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }

  body.theme-dark .service-grid .service-card h3 {
    color: var(--text-heading);
  }

  body.theme-dark .service-grid .service-card p {
    color: var(--text-secondary);
  }

  body.theme-dark .service-icon {
    background: var(--surface-navy);
    color: var(--link-color);
  }

  body.theme-dark .service-grid .service-card:hover .service-icon {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  /* More Dubai Notice Box */
  body.theme-dark .more-dubai {
    background: var(--surface-navy);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .more-dubai p {
    color: var(--text-body);
  }

  body.theme-dark .more-dubai a {
    color: var(--accent-coral);
  }


  /* ============================================
     CONTACT PAGE - Dark Mode
     ============================================ */

  body.theme-dark .contact-grid {
    color: var(--text-body);
  }

  body.theme-dark .contact-methods h2,
  body.theme-dark .contact-form-wrapper h2 {
    color: var(--text-heading);
  }

  body.theme-dark .contact-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .contact-card:hover {
    background: var(--surface-navy);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  }

  body.theme-dark .contact-card.primary-contact {
    background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%);
    border-color: var(--border-dark);
  }

  body.theme-dark .contact-card.primary-contact .contact-icon {
    background: rgba(37, 211, 102, 0.2);
    color: #25D366;
  }

  body.theme-dark .contact-card.primary-contact p {
    color: var(--text-muted);
  }

  body.theme-dark .contact-card.primary-contact .contact-link {
    color: var(--text-heading);
  }

  body.theme-dark .contact-icon {
    background: var(--surface-navy);
    color: var(--link-color);
  }

  body.theme-dark .contact-info h3 {
    color: var(--text-heading);
  }

  body.theme-dark .contact-info p {
    color: var(--text-muted);
  }

  body.theme-dark .contact-link {
    color: var(--link-color);
  }

  body.theme-dark .contact-link:hover {
    color: var(--accent-coral);
  }

  body.theme-dark .form-intro {
    color: var(--text-muted);
  }

  body.theme-dark .form-note {
    color: var(--text-muted);
  }


  /* ============================================
     ABOUT PAGE - Dark Mode (Consolidated)
     ============================================ */

  body.theme-dark .about-hero {
    background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%);
  }

  body.theme-dark .about-intro {
    background: var(--surface-base);
  }

  body.theme-dark .about-text h2 {
    color: var(--text-heading);
  }

  body.theme-dark .about-text p {
    color: var(--text-body);
  }

  body.theme-dark .about-features li {
    color: var(--text-body);
    border-bottom-color: var(--border-medium);
  }

  body.theme-dark .about-features li strong {
    color: var(--accent-coral);
  }

  body.theme-dark .licensing-section {
    background: var(--surface-raised);
  }

  body.theme-dark .licensing-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .moj-badge-title {
    color: var(--text-heading);
  }

  body.theme-dark .moj-badge-subtitle {
    color: var(--text-muted);
  }

  body.theme-dark .compliance-note {
    background: var(--surface-navy);
    border-left-color: var(--link-color);
  }

  body.theme-dark .compliance-note p {
    color: var(--text-body);
  }

  body.theme-dark .values-section {
    background: var(--surface-base);
  }

  body.theme-dark .value-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .value-card:hover {
    background: var(--surface-navy);
    border-color: var(--border-dark);
  }

  body.theme-dark .value-card h3 {
    color: var(--text-heading);
  }

  body.theme-dark .value-card p {
    color: var(--text-secondary);
  }

  body.theme-dark .authority-section {
    background: var(--surface-raised);
  }


  /* ============================================
     PAGE HERO COMPONENT - Dark Mode
     ============================================ */

  body.theme-dark .page-hero {
    background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%);
  }

  body.theme-dark .page-hero .hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(11, 17, 26, 0.88) 0%,
      rgba(11, 17, 26, 0.75) 40%,
      rgba(11, 17, 26, 0.6) 100%
    );
  }

  body.theme-dark .page-title {
    color: var(--text-on-dark);
  }

  body.theme-dark .page-subtitle {
    color: var(--accent-coral);
  }

  body.theme-dark .page-lead {
    color: var(--text-body);
  }


  /* ============================================
     TRUST STRIP COMPONENT - Dark Mode
     ============================================ */

  body.theme-dark .trust-strip {
    background: var(--surface-navy);
    border-color: var(--border-medium);
  }

  body.theme-dark .trust-strip-item {
    color: var(--text-body);
  }

  body.theme-dark .trust-strip-item i {
    color: var(--accent-gold);
  }


  /* ============================================
     PROCESS STEPS COMPONENT - Dark Mode
     ============================================ */

  body.theme-dark .process-section {
    background: var(--surface-raised);
  }

  body.theme-dark .process-steps-wrapper {
    background: transparent;
  }

  body.theme-dark .process-step-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .process-step-card:hover {
    background: var(--surface-navy);
    border-color: var(--border-dark);
  }

  body.theme-dark .process-step-number {
    background: var(--accent-coral);
    color: var(--text-on-dark);
  }

  body.theme-dark .process-step-title {
    color: var(--text-heading);
  }

  body.theme-dark .process-step-text {
    color: var(--text-secondary);
  }


  /* ============================================
     BENEFIT CARDS COMPONENT - Dark Mode
     ============================================ */

  body.theme-dark .benefits-section {
    background: var(--surface-base);
  }

  body.theme-dark .benefit-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .benefit-card:hover {
    background: var(--surface-navy);
    border-color: var(--link-color);
  }

  body.theme-dark .benefit-card-icon {
    background: rgba(127, 209, 255, 0.12);
    color: var(--link-color);
  }

  body.theme-dark .benefit-card:hover .benefit-card-icon {
    background: rgba(255, 107, 107, 0.12);
    color: var(--accent-coral);
  }

  body.theme-dark .benefit-card h3 {
    color: var(--text-heading);
  }

  body.theme-dark .benefit-card p {
    color: var(--text-secondary);
  }


  /* ============================================
     CTA SECTION COMPONENT - Dark Mode
     ============================================ */

  body.theme-dark .cta-section {
    background: var(--surface-raised);
  }

  body.theme-dark .cta-section.bg-white {
    background: var(--surface-base);
  }

  body.theme-dark .cta-section h2 {
    color: var(--text-heading);
  }

  body.theme-dark .cta-section p {
    color: var(--text-body);
  }

  body.theme-dark .cta-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }


  /* ============================================
     TESTIMONIALS CAROUSEL - Dark Mode
     ============================================ */

  body.theme-dark .testimonials-section {
    background: var(--surface-raised);
  }

  body.theme-dark .testimonial-slide {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .testimonial-content {
    color: var(--text-body);
  }

  body.theme-dark .testimonial-name {
    color: var(--text-heading);
  }

  body.theme-dark .testimonial-title {
    color: var(--text-muted);
  }

  body.theme-dark .carousel-dot {
    background: var(--border-medium);
  }

  body.theme-dark .carousel-dot.active {
    background: var(--accent-coral);
  }


  /* ============================================
     RESOURCE/GUIDE PAGES - Dark Mode
     ============================================ */

  body.theme-dark .resource-card {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .resource-card:hover {
    background: var(--surface-navy);
    border-color: var(--accent-coral);
  }

  body.theme-dark .resource-card h3 {
    color: var(--text-heading);
  }

  body.theme-dark .resource-card p {
    color: var(--text-secondary);
  }

  body.theme-dark .guide-sidebar {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .guide-sidebar h4 {
    color: var(--text-heading);
  }

  body.theme-dark .guide-sidebar a {
    color: var(--text-body);
  }

  body.theme-dark .guide-sidebar a:hover {
    color: var(--link-color);
  }

  body.theme-dark .guide-sidebar a.active {
    color: var(--accent-coral);
    background: rgba(255, 107, 107, 0.1);
  }

  body.theme-dark .checklist-item {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark .checklist-item:hover {
    background: var(--surface-navy);
  }

  body.theme-dark .checklist-checkbox {
    border-color: var(--border-dark);
  }

  body.theme-dark .checklist-checkbox:checked {
    background: var(--accent-coral);
    border-color: var(--accent-coral);
  }


  /* ============================================
     LEGAL/TERMS/PRIVACY PAGES - Dark Mode
     ============================================ */

  body.theme-dark .legal-content {
    background: var(--surface-base);
  }

  body.theme-dark .legal-content h1,
  body.theme-dark .legal-content h2,
  body.theme-dark .legal-content h3 {
    color: var(--text-heading);
  }

  body.theme-dark .legal-content p,
  body.theme-dark .legal-content li {
    color: var(--text-body);
  }

  body.theme-dark .legal-content a {
    color: var(--link-color);
  }

  body.theme-dark .legal-sidebar {
    background: var(--surface-muted);
    border: 1px solid var(--border-medium);
  }


  /* ============================================
     404 / ERROR PAGES - Dark Mode
     ============================================ */

  body.theme-dark .error-page {
    background: var(--surface-base);
  }

  body.theme-dark .error-code {
    color: var(--accent-coral);
  }

  body.theme-dark .error-title {
    color: var(--text-heading);
  }

  body.theme-dark .error-message {
    color: var(--text-body);
  }


  /* ============================================
     SCROLLBAR - Dark Mode
     ============================================ */

  body.theme-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body.theme-dark ::-webkit-scrollbar-track {
    background: var(--surface-base);
  }

  body.theme-dark ::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 5px;
  }

  body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }


  /* ============================================
     UTILITY CLASSES - Dark Mode
     ============================================ */

  body.theme-dark .text-dark {
    color: var(--text-heading);
  }

  body.theme-dark .text-muted {
    color: var(--text-muted);
  }

  body.theme-dark .bg-white {
    background: var(--surface-base);
  }

  body.theme-dark .bg-light {
    background: var(--surface-raised);
  }

  body.theme-dark .border {
    border-color: var(--border-medium);
  }

  body.theme-dark .shadow {
    box-shadow: var(--shadow-md);
  }

  body.theme-dark hr {
    border-color: var(--border-medium);
  }

  body.theme-dark blockquote {
    background: var(--surface-muted);
    border-left-color: var(--accent-coral);
    color: var(--text-body);
  }

  body.theme-dark code {
    background: var(--surface-navy);
    color: var(--accent-coral);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark pre {
    background: var(--surface-navy-dark);
    border: 1px solid var(--border-medium);
  }

  body.theme-dark pre code {
    background: transparent;
    border: none;
    color: var(--text-body);
  }

}