/* CSS Variables & Dark Mode Support */
:root {
  /* Light Theme (Default) - Whitish/Light Gray with Orange */
  --bg-body: #f8f9fa;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --text-primary: #2a2a2a;
  --text-secondary: #6c757d;
  --accent: #D35400;
  --accent-dark: #E67E22;
  --border-color: rgba(211, 84, 0, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-strong: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  /* Dark Theme - Dark Gray with Orange */
  --bg-body: #1a1a1a;
  --bg-surface: #2d2d2d;
  --bg-card: #3a3a3a;
  --bg-header: rgba(26, 26, 26, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #b8b8b8;
  --accent: #E67E22;
  --accent-dark: #F39C12;
  --border-color: rgba(230, 126, 34, 0.25);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);

  /* Chat Overrides for Dark Mode */
  --glass-bg: rgba(45, 45, 45, 0.95);
  --glass-border: rgba(230, 126, 34, 0.3);
}

/* Base Styles using Variables */
body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
}

p,
span,
li {
  color: var(--text-secondary);
}

/* Hero Section Fixes */
[data-theme="dark"] .main-banner .left-content h2,
[data-theme="dark"] .main-banner .left-content h2 em {
  color: #ffffff !important;
  /* Force white text in dark mode for Hero */
}

[data-theme="dark"] .main-banner .left-content h2 span {
  color: var(--accent);
  /* Keep accent color for highlighted words */
}

/* Header & Nav */
.header-area {
  background-color: var(--bg-header);
  box-shadow: 0 0 15px var(--shadow-color);
}

[data-theme="dark"] .header-area {
  background: var(--bg-header) !important;
  /* Override default gradient */
}

.main-nav .nav li a {
  color: var(--text-primary);
}

.main-nav .logo-img {
  filter: brightness(1);
  transition: filter 0.3s ease;
}

[data-theme="dark"] .main-nav .logo-img {
  filter: none;
}

/* Mobile Menu Dark Mode & Perf */
@media (max-width: 767px) {
  [data-theme="dark"] .header-area .main-nav .nav {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color);
  }

  /* Optimize Menu Animation */
  .header-area .main-nav .nav {
    will-change: transform, opacity;
    backdrop-filter: none !important;
    /* Remove heavy filter for performance */
    -webkit-backdrop-filter: none !important;
  }
}

/* Services Highlights */
.our-services .services-highlights {
  background: var(--bg-surface);
  box-shadow: 0 30px 60px var(--shadow-color);
  border: 1px solid var(--border-color);
}

.our-services .services-highlights h3,
.our-services .services-highlights-intro {
  color: var(--text-primary);
}

.our-services .services-highlight-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 48px var(--shadow-color);
}

[data-theme="dark"] .our-services .services-highlight-card {
  background: linear-gradient(165deg, var(--bg-card), var(--bg-surface));
}

.our-services .services-highlight-card h4 {
  color: var(--accent);
}

.our-services .services-highlight-card p {
  color: var(--text-secondary);
}

/* Pricing Cards */
.pricing-card {
  background: var(--bg-card);
  box-shadow: 0 10px 30px var(--shadow-color);
  /* Hardware acceleration for smooth scrolling */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

[data-theme="dark"] .pricing-card {
  border: 1px solid var(--border-color);
}

.pricing-name,
.pricing-price,
.pricing-period {
  color: var(--text-primary);
}

.pricing-features li {
  color: var(--text-secondary);
}

/* Inputs & Forms */
input,
textarea,
select {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
  outline: none;
}

/* Buttons */
.main-button button,
.main-blue-button a {
  background-color: var(--accent);
  color: #fff !important;
}

/* Theme Toggle Button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-primary);
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle:hover {
  transform: rotate(15deg);
  color: var(--accent);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  border-radius: 50%;
}

/* Focus Visible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- FIXES FOR USER REPORTED ISSUES --- */

/* 1. Mobile Menu Toggle Visibility */
@media (max-width: 767px) {
  .header-area .main-nav .nav li.theme-switcher {
    display: block !important;
    /* Match other items */
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    /* Match other items border */
    padding: 10px 0;
    margin: 0;
  }

  .header-area .main-nav .nav li.theme-switcher button {
    display: inline-flex;
    margin: 0 auto;
    color: #fff !important;
  }

  .header-area .main-nav .nav li.language-switcher {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 10px;
  }
}

/* 2. Pricing Section - Featured Card Fix */
[data-theme="dark"] .pricing-card.featured {
  background: linear-gradient(145deg, #3a2a1a, #2d1f10) !important;
  border: 1px solid var(--accent) !important;
}

[data-theme="dark"] .pricing-card.featured .pricing-name,
[data-theme="dark"] .pricing-card.featured .pricing-price,
[data-theme="dark"] .pricing-card.featured .pricing-period {
  color: #fff !important;
}

[data-theme="dark"] .pricing-features li {
  color: #d1e8ff;
  /* Lighter text for features */
}

/* 3. Trends / Blog Section on Index */
[data-theme="dark"] .our-blog {
  overflow: visible;
  padding-bottom: 120px;
}

[data-theme="dark"] .our-blog .container,
[data-theme="dark"] .our-blog .row {
  overflow: visible;
}

[data-theme="dark"] .our-blog .section-heading h2 {
  color: #fff !important;
}

/* Force dark background on blog container - more specific selector */
html[data-theme="dark"] .our-blog .left-image .info .inner-content,
[data-theme="dark"] .our-blog .left-image .info .inner-content {
  background: #2d1f10 !important;
  background-color: #2d1f10 !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure proper spacing for blog preview */
[data-theme="dark"] .our-blog .left-image {
  margin-bottom: 140px;
  min-height: 600px;
  overflow: visible;
}

/* Mobile responsive for blog */
@media (max-width: 768px) {
  [data-theme="dark"] .our-blog {
    padding-bottom: 60px;
  }
  
  [data-theme="dark"] .our-blog .left-image {
    margin-bottom: 45px;
    min-height: auto;
    overflow: visible;
  }
  
  [data-theme="dark"] .our-blog .left-image .info .inner-content {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 20px;
  }
}

[data-theme="dark"] .our-blog .left-image .info .inner-content h4,
[data-theme="dark"] .our-blog .right-list ul li h4 {
  color: #fff !important;
}

[data-theme="dark"] .our-blog .left-image .info .inner-content h4 a,
[data-theme="dark"] .our-blog .right-list ul li h4 a {
  color: #fff !important;
}

[data-theme="dark"] .our-blog .right-list ul li .left-content p,
[data-theme="dark"] .our-blog .left-image .info p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .our-blog .left-image .info .inner-content ul li {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .our-blog .left-image .info .inner-content ul li i {
  color: var(--accent);
}

[data-theme="dark"] .our-blog .left-image .info .inner-content .badge {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #ffffff;
}

[data-theme="dark"] .our-blog .right-list ul li {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .our-blog .right-list ul li .left-content span {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .our-blog .right-list ul li .left-content span i {
  color: var(--accent);
}

/* 4. Contact Form Fixes */
[data-theme="dark"] form#contact {
  background: var(--bg-card);
  border-radius: 20px;
  /* Ensure rounded corners if background is added */
}

[data-theme="dark"] form#contact input,
[data-theme="dark"] form#contact textarea,
[data-theme="dark"] form#contact select {
  background-color: #2d1f10 !important;
  color: #fff !important;
  border-color: rgba(230, 126, 34, 0.3);
}

[data-theme="dark"] form#contact input::placeholder,
[data-theme="dark"] form#contact textarea::placeholder {
  color: #8fa0bc;
}

/* 5. Chat Widget Dark Mode Override */
[data-theme="dark"] #uwf-chat-container,
[data-theme="dark"] #uwf-chat-container form#pre-chat-form,
[data-theme="dark"] .chat-policy-bubble,
[data-theme="dark"] .chat-policy-dialog {
  background: var(--bg-card) !important;
  /* Force dark background */
  border-color: var(--border-color);
}

[data-theme="dark"] #uwf-chat-container label {
  color: #ccc !important;
}

[data-theme="dark"] #uwf-chat-container input,
[data-theme="dark"] #uwf-chat-container textarea {
  background-color: #2d1f10 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #uwf-chat-container .chat-header {
  background: linear-gradient(135deg, #3a2a1a, #2d1f10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #chat-history {
  background: #2d1f10 !important;
  color: #ddd;
}

[data-theme="dark"] .msg-admin {
  background: #3a2a1a !important;
  color: #eee !important;
}

[data-theme="dark"] .chat-policy-dialog-header h3,
[data-theme="dark"] .chat-policy-dialog-body {
  color: #fff !important;
}

[data-theme="dark"] .chat-policy-dialog-body p,
[data-theme="dark"] .chat-policy-dialog-body li {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .chat-policy-dialog-body h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .chat-policy-bubble .policy-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 6. General Fix for Dark Sections */
[data-theme="dark"] .section-heading h2 {
  color: #ffffff !important;
}

/* 7. Header Nav Links - STRICT OVERRIDE */
[data-theme="dark"] .header-area .main-nav .nav li a,
[data-theme="dark"] .background-header .main-nav .nav li a {
  color: #ffffff !important;
}

[data-theme="dark"] .header-area .main-nav .nav li a:hover,
[data-theme="dark"] .header-area .main-nav .nav li a.active,
[data-theme="dark"] .background-header .main-nav .nav li a:hover,
[data-theme="dark"] .background-header .main-nav .nav li a.active {
  color: var(--accent) !important;
}

/* 8. Portfolio Containers ("Mira lo que...") */
[data-theme="dark"] .portfolio-card {
  background: var(--bg-card) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .portfolio-card:hover {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-surface)) !important;
  transform: translateY(-5px);
}

[data-theme="dark"] .portfolio-card h4 {
  color: #fff !important;
}

[data-theme="dark"] .portfolio-card p {
  color: #ccc !important;
}

[data-theme="dark"] .portfolio-card-media {
  background: rgba(255, 255, 255, 0.05);
  /* Slight tint for image container if needed */
  border-radius: 12px;
}

/* 9. Pricing Background - FORCE DARK */
html[data-theme="dark"] .pricing-card,
[data-theme="dark"] .pricing-card {
  background: #2d1f10 !important;
  /* Force hex color */
  border: 1px solid rgba(230, 126, 34, 0.2);
}

[data-theme="dark"] .pricing-card .pricing-header .pricing-period {
  color: #ffffff !important;
}

/* Pricing Package Titles - Dark Mode Visibility */
/* Package 1 y 3: Color más claro para mejor visibilidad */
[data-theme="dark"] .pricing-card:not(.featured) .pricing-name {
  color: #e0e0e0 !important;
}

/* Package 2 (Featured): El más claro de todos */
[data-theme="dark"] .pricing-card.featured .pricing-name {
  color: #ffffff !important;
}

/* 10. Skills / Progress Bars Text */
[data-theme="dark"] .our-services .progress-skill-bar h4,
[data-theme="dark"] .our-services .progress-skill-bar span {
  color: #ffffff !important;
}

[data-theme="dark"] .our-services .services-highlights h3,
[data-theme="dark"] .our-services .services-highlights-intro {
  color: #ffffff !important;
}

/* 11. Service Highlight Cards (Blueprints, Sprints) */
[data-theme="dark"] .services-highlight-card h4 {
  color: #a0d6fc !important;
  /* Light blue for titles */
}

[data-theme="dark"] .services-highlight-card p {
  color: #ccc !important;
}

[data-theme="dark"] .services-highlight-card .highlight-cta {
  color: #5abaf7 !important;
  /* Brighter accent for link */
  font-weight: 600;
}

/* 12. Pricing Title Visibility (Dark Mode) */
/* User requested "gray almost black" because background is light */
[data-theme="dark"] #pricing .section-heading h2 {
  color: #2a2a2a !important;
}

[data-theme="dark"] #pricing .section-heading p {
  color: #4a4a4a !important;
}

/* 13. Blog Hero Text Visibility */
[data-theme="dark"] .blog-hero {
  background: linear-gradient(135deg, rgba(45, 31, 16, 0.95) 0%, rgba(58, 42, 26, 0.85) 100%);
}

[data-theme="dark"] .blog-hero h1,
[data-theme="dark"] .blog-hero .lead {
  color: #ffffff !important;
}

/* 14. Blog Post Content Visibility */
[data-theme="dark"] .blog-page,
[data-theme="dark"] .blog-post {
  background: var(--bg-body) !important;
}

[data-theme="dark"] .post-hero {
  background: var(--bg-body) !important;
}

[data-theme="dark"] .post-hero h1 {
  color: #ffffff !important;
}

[data-theme="dark"] .post-meta {
  color: #cccccc !important;
}

[data-theme="dark"] .post-content {
  background: var(--bg-body) !important;
}

[data-theme="dark"] .post-content p,
[data-theme="dark"] .post-content li {
  color: #dddddd !important;
  /* Light gray for readability */
}

[data-theme="dark"] .post-content h2,
[data-theme="dark"] .post-content h3,
[data-theme="dark"] .post-content h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .post-content ul strong,
[data-theme="dark"] .post-content b {
  color: #ffffff !important;
}

/* Post CTA Box (Bottom of post) */
[data-theme="dark"] .post-cta {
  background: #2d1f10 !important;
  border-color: rgba(230, 126, 34, 0.2);
}

[data-theme="dark"] .post-cta h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .post-cta p {
  color: #cccccc !important;
}

/* Blog Cards Dark Mode */
[data-theme="dark"] .blog-card .card-inner {
  background: var(--bg-card) !important;
  border-color: var(--border-color);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .blog-card .card-inner:hover {
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .blog-card h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .blog-card h2 a {
  color: #ffffff !important;
}

[data-theme="dark"] .blog-card h2 a:hover {
  color: var(--accent) !important;
}

[data-theme="dark"] .blog-card p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .blog-card .card-date {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Blog Footer Dark Mode */
[data-theme="dark"] .blog-footer {
  background: var(--bg-surface) !important;
  border-top-color: var(--border-color);
}

[data-theme="dark"] .blog-footer p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .blog-footer .cta-link {
  color: var(--accent) !important;
}

/* Blog Header Dark Mode */
[data-theme="dark"] .blog-header {
  background: var(--bg-header) !important;
  border-bottom-color: var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}


/* Footer Dark Mode Fix */
[data-theme="dark"] footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] footer p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] footer a {
  color: var(--accent) !important;
}

[data-theme="dark"] footer a:hover {
  color: var(--accent-dark) !important;
}


/* Language Switcher Label Dark Mode Fix */
[data-theme="dark"] .language-switcher-label,
[data-theme="dark"] .header-area .language-switcher-label,
[data-theme="dark"] .background-header .language-switcher-label {
  color: #ffffff !important;
}

/* Mobile menu language switcher */
@media (max-width: 767px) {
  [data-theme="dark"] .header-area .main-nav .nav li.language-switcher .language-switcher-label {
    color: #ffffff !important;
  }
}

/* Payment Section Dark Mode */
[data-theme="dark"] .payment-section {
  background: linear-gradient(135deg, #3a2a1a 0%, #2d1f10 100%);
}

[data-theme="dark"] .payment-section::before {
  background: radial-gradient(circle, rgba(230, 126, 34, 0.15) 0%, transparent 70%);
}

[data-theme="dark"] .payment-content {
  background: var(--bg-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .payment-content h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .payment-content h2 span {
  color: var(--accent);
}

[data-theme="dark"] .payment-subtitle {
  color: var(--accent);
}

[data-theme="dark"] .payment-description {
  color: var(--text-secondary);
}

[data-theme="dark"] .payment-feature {
  color: #ffffff;
}

[data-theme="dark"] .payment-feature i {
  color: var(--accent);
}

[data-theme="dark"] .payment-cta-button {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 10px 30px rgba(230, 126, 34, 0.3);
}

[data-theme="dark"] .payment-cta-button:hover {
  box-shadow: 0 15px 40px rgba(230, 126, 34, 0.4);
}

/* Pricing Conditions Bubble Dark Mode */
[data-theme="dark"] .conditions-toggle {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 8px 20px rgba(230, 126, 34, 0.3);
}

[data-theme="dark"] .conditions-toggle:hover {
  box-shadow: 0 12px 28px rgba(230, 126, 34, 0.4);
}

[data-theme="dark"] .conditions-bubble {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .conditions-bubble::after {
  border-top-color: var(--bg-card);
}

[data-theme="dark"] .conditions-bubble p {
  color: var(--text-secondary);
}

[data-theme="dark"] .conditions-close {
  background: rgba(230, 126, 34, 0.15);
  color: var(--accent);
}

[data-theme="dark"] .conditions-close:hover {
  background: rgba(230, 126, 34, 0.25);
}

/* Preloader Dark Mode */
[data-theme="dark"] .js-preloader {
  background-color: #000;
}

[data-theme="dark"] .preloader-inner {
  background: transparent;
}