/* --- Dynamic Color Variables Setup (Day/Night Mode) --- */
:root[data-mode="dark"] {
  /* Dark Mode */
  --color-bg-primary: #1a202c;
  /* Primary Background */
  --color-bg-secondary: #14181f;
  /* Footer/Section Background */
  --color-bg-surface: #2d3748;
  /* Card/Modal Surface */
  --color-text-default: #ffffff;
  /* Main Text */
  --color-text-secondary: #cbd5e0;
  /* Secondary Text (Gray-300) */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  /* Border/Divider */
  --shadow-glow: 0 4px 15px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(150, 238, 60, 0.05);
  --color-chat-bot: #2d3748;
  --color-chat-user: #00b564;
  --color-mobile-menu-bg: #2d3748;
  /* Solid color for mobile menu background */
}

:root[data-mode="light"] {
  /* Light Mode */
  --color-bg-primary: #f7fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-surface: #ffffff;
  --color-text-default: #1a202c;
  --color-text-secondary: #4a5568;
  /* Darker Gray */
  --color-border-subtle: #e2e8f0;
  /* Light Gray Border */
  --shadow-glow: 0 4px 15px rgba(0, 0, 0, 0.1),
    0 0 10px rgba(150, 238, 60, 0.05);
  --color-chat-bot: #e2e8f0;
  --color-chat-user: #96ee3c;
  --color-mobile-menu-bg: #ffffff;
  /* Solid color for mobile menu background */
}

/* --- Apply Variables to Tailwind-like Utility Classes --- */
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  background-color: var(--color-bg-primary);
  color: var(--color-text-default);
  transition: background-color 0.3s, color 0.3s;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.bg-primary-dynamic {
  background-color: var(--color-bg-primary);
}

.bg-secondary-dynamic {
  background-color: var(--color-bg-secondary);
}

.bg-surface-dynamic {
  background-color: var(--color-bg-surface);
}

.text-default-dynamic {
  color: var(--color-text-default);
}

.text-secondary-dynamic {
  color: var(--color-text-secondary);
}

.border-subtle-dynamic {
  border-color: var(--color-border-subtle);
}

.bg-mobile-menu-dynamic {
  background-color: var(--color-mobile-menu-bg);
}

.hero-glow {
  box-shadow: var(--shadow-glow);
}

/* Custom gradient for text and dividers (brand colors remain) */
.text-gradient {
  background-image: linear-gradient(to right, #96ee3c, #00b564);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-accent {
  background-image: linear-gradient(to right, #96ee3c, #00b564);
}

/* Specific overrides for sticky header */
header.sticky {
  background-color: var(--color-bg-primary);
}

/* Chat Specific Styles */
.chat-bot-bubble {
  background-color: var(--color-chat-bot);
  color: var(--color-text-default);
}

.chat-user-bubble {
  background-color: var(--color-chat-user);
  color: #1a202c;
}

#chat-modal {
  transition: all 0.3s ease-in-out;
  transform: scale(0.95);
  opacity: 0;
  pointer-events: none;
}

#chat-modal.active {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Mobile adjustment for chat modal */
@media (max-width: 640px) {
  #chat-modal {
    padding-top: 5rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: flex-end;
  }

  #chat-modal-content {
    width: 100%;
    max-width: 28rem;
    height: 75vh;
    max-height: 550px;
    border-radius: 0.75rem;
  }

  /* Ensure chat header is visible and compact */
  #chat-modal-content > div:first-child {
    padding: 0.75rem;
  }

  /* Adjust messages area for better visibility */
  #chat-messages {
    padding: 0.75rem;
  }
}

/* Extra adjustment for very tall screens like S23 Ultra */
@media (max-width: 640px) and (min-height: 800px) {
  #chat-modal-content {
    height: 70vh;
    max-height: 500px;
  }
}

/* Dropdown transition for smooth appearance */
.dropdown-menu-transition {
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Chat button slow animation */
.chat-button-slow {
  animation-duration: 4s;
}

/* Particle Canvas Background - Always behind all content */
#particle-canvas {
  position: fixed !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure all main content stays above particles */
header {
  position: relative;
  z-index: 50 !important;
}

main {
  position: relative !important;
  z-index: 1 !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* All sections with transparent backgrounds - show particles behind them */
section {
  position: relative !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* Hero section with transparent background */
#hero {
  background-color: transparent !important;
  background: transparent !important;
}

/* Services section */
#services {
  background-color: transparent !important;
  background: transparent !important;
}

/* Pillars section - mantener un color ligeramente diferente pero con opacidad */
#pillars {
  background-color: rgba(20, 24, 31, 0.5) !important;
  background: rgba(20, 24, 31, 0.5) !important;
}

/* Pillars section en light mode */
:root[data-mode="light"] #pillars {
  background-color: rgba(247, 250, 252, 0.5) !important;
  background: rgba(247, 250, 252, 0.5) !important;
}

/* Contact section */
#contact {
  background-color: transparent !important;
  background: transparent !important;
}

footer {
  position: relative;
  z-index: 1 !important;
  background-color: var(--color-bg-secondary);
}

/* Ensure modals and overlays stay on top */
[id$="-modal"] {
  z-index: 1000 !important;
}

#chat-button {
  z-index: 50 !important;
}

/* CRITICAL: Force transparent backgrounds for particle visibility - Hostinger compatibility */
/* These rules MUST be at the end to override Tailwind CSS in production */
body.font-sans {
  background-color: var(--color-bg-primary) !important;
}

main,
section#hero,
section#services,
section#contact {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

section#pillars {
  background: rgba(20, 24, 31, 0.5) !important;
  background-color: rgba(20, 24, 31, 0.5) !important;
  background-image: none !important;
}

:root[data-mode="light"] section#pillars {
  background: rgba(247, 250, 252, 0.5) !important;
  background-color: rgba(247, 250, 252, 0.5) !important;
  background-image: none !important;
}

/* Mobile Responsive Improvements */
@media (max-width: 640px) {
  /* Header adjustments for mobile */
  header {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* Logo mobile styling - 2 lines */
  header a .flex-col {
    line-height: 1.1;
    gap: 0.125rem;
  }

  /* Ensure logo text is aligned properly */
  header a .flex-col span {
    display: block;
    white-space: nowrap;
  }

  /* Ensure logo is readable on smallest screens */
  header a img {
    min-width: 32px;
  }

  /* Language dropdown more compact */
  #lang-dropdown-menu {
    right: 0;
    min-width: 100px;
  }

  /* Chat button positioning for mobile - avoid overlap with navigation */
  #chat-button {
    bottom: 1rem !important;
    right: 1rem !important;
    padding: 0.75rem !important;
  }

  /* Ensure buttons don't overflow */
  .flex.items-center.gap-1 > * {
    flex-shrink: 0;
  }
}

/* Extra small screens (< 375px) */
@media (max-width: 374px) {
  header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Make buttons even more compact on very small screens */
  #mode-toggle-button,
  #mobile-menu-button {
    padding: 0.375rem !important;
  }

  #lang-dropdown-toggle {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem;
  }

  /* Chat button even smaller on tiny screens */
  #chat-button {
    padding: 0.625rem !important;
  }

  #chat-button i {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
}