/* Theme Switcher CSS */
:root {
  /* Dark theme (default) */
  --bg-primary: #000000;
  --bg-secondary: #0D0D0D;
  --text-primary: #ffffff;
  --text-secondary: #E5E5E5;
  --text-tertiary: #9CA3AF;
  --border-color: rgba(255, 255, 255, 0.2);
  --dashed-lines: #232323;
  --logo-filter: invert(0);
}

/* Smooth scroll for all anchor links */
html {
  scroll-behavior: smooth;
}

/* Pricing cards equal height with fixed buttons */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pricing-card-button {
  margin-top: auto;
}

/* Custom Language Dropdown */
.language-dropdown-trigger:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.language-dropdown-trigger:hover svg {
  transform: rotate(180deg);
}

.language-switcher:hover .language-dropdown,
.language-switcher.active .language-dropdown,
.language-dropdown.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dropdown base styles with theme transition support */
.language-dropdown {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.language-option:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.language-option.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Light theme styles */
[data-theme="light"] .language-dropdown-trigger {
  color: var(--text-tertiary) !important;
}

[data-theme="light"] .language-dropdown-trigger:hover {
  color: var(--text-primary) !important;
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .language-dropdown {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .language-option {
  color: var(--text-tertiary) !important;
}

[data-theme="light"] .language-option:hover {
  color: var(--text-primary) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .language-option.active {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--text-primary) !important;
}

/* Safari select fixes */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px !important;
}

[data-theme="light"] select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
  select {
    background-color: transparent;
    border-radius: 8px;
  }
  
  [data-theme="light"] select {
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #0A0A0A;
  }
}

[data-theme="light"] {
  /* Light theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #0A0A0A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --border-color: rgba(0, 0, 0, 0.2);
  --dashed-lines: #1F2937;
  --logo-filter: invert(1);
}

/* Global theme transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Force theme application with higher specificity */
html[data-theme="light"] {
  background: #ffffff !important;
  color: #0A0A0A !important;
}

html[data-theme="light"] body {
  background: #ffffff !important;
  color: #0A0A0A !important;
}

/* Apply theme variables */
html, body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Main backgrounds */
.bg-black, 
.bg-white,
.bg-\[linear-gradient\(0deg\,\#0D0D0D_0\%\,\#000000_100\%\)\] {
  background: var(--bg-primary) !important;
}

/* Text colors */
.text-white { color: var(--text-primary) !important; }
.text-text-secondary { color: var(--text-secondary) !important; }
.text-text-gray { color: var(--text-tertiary) !important; }
.text-text-tertiary { color: var(--text-tertiary) !important; }
.text-bg-light { color: var(--text-primary) !important; }

/* Borders */
.border-border-light,
.border-border-dark { border-color: var(--border-color) !important; }
.border-t-border-light,
.border-t-border-dark { border-top-color: var(--border-color) !important; }
.border-b-border-light { border-bottom-color: var(--border-color) !important; }

/* Header specific */
.lg\:bg-\[#000000b3\] { 
  background: rgba(0, 0, 0, 0.9) !important; 
}

[data-theme="light"] .lg\:bg-\[#000000b3\] { 
  background: rgba(255, 255, 255, 0.9) !important; 
}

/* Dashed lines */
[class*="bg-[linear-gradient(180deg,#232323"],
[class*="bg-[linear-gradient(90deg,#232323"],
[style*="linear-gradient(180deg,#232323"],
[style*="linear-gradient(90deg,#232323"],
.style-6933, .style-3314, .style-7757, .style-3168 {
  background: linear-gradient(180deg, var(--dashed-lines), var(--dashed-lines) 50%, transparent 0, transparent) !important;
  background-size: 2px 12px !important;
}

/* Logo theme switching - JavaScript handles src changes */
img[src*="ftmvgroup"] {
  transition: opacity 0.2s ease;
}

/* Theme Switcher Button */
.theme-switcher {
  position: relative;
  width: 48px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-switcher:hover {
  background: rgba(255, 255, 255, 0.15);
}

.theme-switcher-toggle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .theme-switcher-toggle {
  transform: translateX(24px);
}

/* Icons in switcher */
.theme-switcher-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.theme-switcher-sun {
  left: 4px;
}

.theme-switcher-moon {
  right: 4px;
}

[data-theme="light"] .theme-switcher-sun {
  opacity: 1;
}

[data-theme="dark"] .theme-switcher-moon,
:root:not([data-theme]) .theme-switcher-moon {
  opacity: 1;
}

/* Form fields theme support */
input, textarea, select {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* Services grid adjustments for light theme */
[data-theme="light"] .services-grid .service-item:hover {
  background-color: rgba(17, 17, 18, 0.05) !important;
}

/* Portfolio adjustments for light theme */
[data-theme="light"] .portfolio-grid .portfolio-item .overlay {
  background: transparent !important;
}

[data-theme="light"] .portfolio-grid .portfolio-item .label {
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .portfolio-grid .portfolio-item:hover img {
  filter: blur(2px) brightness(0.7) !important;
}

/* Mix blend mode adjustments */
[data-theme="light"] .mix-blend-lighten {
  mix-blend-mode: lighten !important;
}

[data-theme="dark"] .mix-blend-lighten,
:root:not([data-theme]) .mix-blend-lighten {
  mix-blend-mode: lighten !important;
}

/* Interactive Dashboard Theme Support */
#interactive-dashboard .bg-black,
#interactive-dashboard .bg-\[#0B0B0B\],
#interactive-dashboard .bg-\[#1A1A1A\],
#interactive-dashboard .bg-\[#0A0A0A\],
#interactive-dashboard .bg-\[#0F0F0F\],
#interactive-dashboard .bg-\[#0D1117\] {
  background: var(--bg-secondary) !important;
}

[data-theme="light"] #interactive-dashboard .bg-black,
[data-theme="light"] #interactive-dashboard .bg-\[#0B0B0B\],
[data-theme="light"] #interactive-dashboard .bg-\[#1A1A1A\] {
  background: #f1f5f9 !important;
}

#interactive-dashboard .text-white {
  color: var(--text-primary) !important;
}

#interactive-dashboard .text-text-secondary {
  color: var(--text-secondary) !important;
}

#interactive-dashboard .border-border-light,
#interactive-dashboard .border-\[#2C2C2C\] {
  border-color: var(--border-color) !important;
}

/* Dashboard sidebar items */
#interactive-dashboard .sidebar-item {
  transition: all 0.2s ease;
}

#interactive-dashboard .sidebar-item.bg-\[#1A1A1A\] {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] #interactive-dashboard .sidebar-item.bg-\[#1A1A1A\] {
  background: #e2e8f0 !important;
  color: var(--text-primary) !important;
}

#interactive-dashboard .sidebar-item:hover {
  color: var(--text-primary) !important;
}

/* Dashboard badges and indicators */
#interactive-dashboard .bg-\[#935DFF\] {
  background: #935DFF !important; /* Keep purple badge */
}

/* Dashboard metrics and content */
#interactive-dashboard .dashboard-content,
#interactive-dashboard .metrics-content,
#interactive-dashboard .code-preview {
  color: var(--text-primary) !important;
}

/* Syntax highlighting for light theme */
[data-theme="light"] .syntax-comment { color: #6a737d !important; }
[data-theme="light"] .syntax-keyword { color: #d73a49 !important; }
[data-theme="light"] .syntax-string { color: #032f62 !important; }
[data-theme="light"] .syntax-number { color: #005cc5 !important; }
[data-theme="light"] .syntax-text { color: #24292e !important; }
[data-theme="light"] .syntax-punctuation { color: #24292e !important; }
[data-theme="light"] .syntax-line-number { color: #959da5 !important; }

/* Additional theme support for common elements */
.bg-\[#0B0B0B\] {
  background: var(--bg-secondary) !important;
}

.bg-\[#1A1A1A\] {
  background: var(--bg-secondary) !important;
}

[data-theme="light"] .bg-\[#0B0B0B\],
[data-theme="light"] .bg-\[#1A1A1A\],
[data-theme="light"] .bg-\[#0A0A0A\],
[data-theme="light"] .bg-\[#0F0F0F\],
[data-theme="light"] .bg-\[#0D1117\] {
  background: #f8fafc !important;
}

/* Back button and navigation */
.text-\[\#67CAF2\] {
  color: #67CAF2 !important;
}

[data-theme="light"] .text-\[\#67CAF2\] {
  color: #0369a1 !important;
}

/* Ensure all text elements adapt */
.text-text-success-light {
  color: var(--text-primary) !important;
}

/* More comprehensive theme coverage */
[data-theme="light"] {
  /* Override any hardcoded dark backgrounds */
  --tw-bg-opacity: 1;
}

/* Force all dark elements to be light */
html[data-theme="light"] .bg-black,
html[data-theme="light"] .bg-\[#000000\],
html[data-theme="light"] .bg-\[\#000000\],
html[data-theme="light"] .bg-\[linear-gradient\(0deg\,\#0D0D0D_0\%\,\#000000_100\%\)\] {
  background: #ffffff !important;
}

html[data-theme="light"] .text-white {
  color: #0A0A0A !important;
}

/* Force dashboard elements - removed * selector as it's too aggressive */

html[data-theme="light"] #interactive-dashboard .bg-black,
html[data-theme="light"] #interactive-dashboard .bg-\[#0B0B0B\],
html[data-theme="light"] #interactive-dashboard .bg-\[#1A1A1A\],
html[data-theme="light"] #interactive-dashboard .bg-\[#0A0A0A\],
html[data-theme="light"] #interactive-dashboard .bg-\[#0F0F0F\],
html[data-theme="light"] #interactive-dashboard .bg-\[#0D1117\] {
  background: #f1f5f9 !important;
  color: #0A0A0A !important;
}

/* More specific dashboard overrides */
html[data-theme="light"] #interactive-dashboard {
  background: #ffffff !important;
}

html[data-theme="light"] #interactive-dashboard .sidebar-item {
  color: #0A0A0A !important;
}

html[data-theme="light"] #interactive-dashboard .sidebar-item.bg-\[#1A1A1A\] {
  background: #e2e8f0 !important;
  color: #0A0A0A !important;
}

html[data-theme="light"] #interactive-dashboard .text-text-secondary {
  color: #475569 !important;
}

html[data-theme="light"] #interactive-dashboard .border-\[#2C2C2C\] {
  border-color: #e5e7eb !important;
}

[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
  color: #64748B !important;
}

/* Complete dashboard light theme overrides */
[data-theme="light"] #interactive-dashboard .w-64.bg-\[#0A0A0A\],
[data-theme="light"] #interactive-dashboard .w-80.bg-\[#0A0A0A\],
[data-theme="light"] #interactive-dashboard div.bg-\[#0A0A0A\],
[data-theme="light"] #interactive-dashboard .bg-\[#0F0F0F\],
[data-theme="light"] #interactive-dashboard .flex-1.bg-\[#0F0F0F\],
[data-theme="light"] #interactive-dashboard .bg-\[#0D1117\],
[data-theme="light"] #interactive-dashboard .w-80.p-4.border-r.border-border-light.bg-\[#0A0A0A\] {
  background: #f8fafc !important;
  color: #0A0A0A !important;
}

[data-theme="light"] #interactive-dashboard select.bg-\[#1A1A1A\] {
  background: #ffffff !important;
  color: #0A0A0A !important;
  border-color: #e5e7eb !important;
}

/* More specific selectors for stubborn elements */
[data-theme="light"] #interactive-dashboard [class*="bg-[#0A0A0A]"] {
  background: #f8fafc !important;
  color: #0A0A0A !important;
}

[data-theme="light"] #interactive-dashboard [class*="bg-[#0F0F0F]"] {
  background: #f8fafc !important;
  color: #0A0A0A !important;
}

[data-theme="light"] #interactive-dashboard .bg-black {
  background: #ffffff !important;
  color: #0A0A0A !important;
}

[data-theme="light"] #interactive-dashboard .border-border-light {
  border-color: #e5e7eb !important;
}

[data-theme="light"] #interactive-dashboard .text-white,
[data-theme="light"] #interactive-dashboard .sidebar-item.text-white {
  color: #0A0A0A !important;
}

[data-theme="light"] #interactive-dashboard .text-text-secondary {
  color: #475569 !important;
}

[data-theme="light"] #interactive-dashboard .hover\:text-white:hover {
  color: #0A0A0A !important;
}

[data-theme="light"] #interactive-dashboard .sidebar-item.bg-\[#1A1A1A\] {
  background: #e2e8f0 !important;
  color: #0A0A0A !important;
}

/* Portfolio1.html back button support */
[data-theme="light"] .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Button theme support */
[data-theme="light"] .bg-bg-light {
  background: #0A0A0A !important;
  color: #ffffff !important;
}

[data-theme="light"] .text-text-dark {
  color: #ffffff !important;
}

/* Form elements in light theme */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff !important;
  color: #0A0A0A !important;
  border-color: #D1D5DB !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #6B7280 !important;
}

/* Portfolio page specific theme support */
[data-theme="light"] .text-black {
  color: #0A0A0A !important;
}

[data-theme="dark"] .text-black {
  color: #ffffff !important;
}

/* Portfolio header specific */
[data-theme="light"] #portfolio-header {
  background: #ffffff !important;
  border-color: #E5E7EB !important;
}

[data-theme="dark"] #portfolio-header {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Portfolio CTA button */
[data-theme="light"] .header-cta {
  background: #0A0A0A !important;
  color: #ffffff !important;
}

[data-theme="dark"] .header-cta {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Portfolio gallery content fixes */
[data-theme="light"] .text-\[\#0A0A0A\] {
  color: #0A0A0A !important;
}

[data-theme="dark"] .text-\[\#0A0A0A\] {
  color: #ffffff !important;
}

[data-theme="light"] .text-\[\#111827\]\/80 {
  color: rgba(17, 24, 39, 0.8) !important;
}

[data-theme="dark"] .text-\[\#111827\]\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Portfolio main content background */
[data-theme="light"] .bg-white {
  background: #ffffff !important;
}

[data-theme="dark"] .bg-white {
  background: #000000 !important;
}

/* Portfolio gallery container */
[data-theme="light"] .border-border-light.bg-white {
  background: #ffffff !important;
  border-color: #E5E7EB !important;
}

[data-theme="dark"] .border-border-light.bg-white {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Portfolio page main section */
[data-theme="dark"] #portfolio-white {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Portfolio back button */
[data-theme="light"] a[href="index.html"] {
  color: #0A0A0A !important;
  outline-color: #E5E7EB !important;
}

[data-theme="dark"] a[href="index.html"] {
  color: #ffffff !important;
  outline-color: rgba(255, 255, 255, 0.2) !important;
}

/* Portfolio buttons with specific background */
[data-theme="light"] .bg-\[\#0A0A0A\] {
  background: #0A0A0A !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-\[\#0A0A0A\] {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Portfolio main container background */
[data-theme="dark"] .new-container {
  background: transparent !important;
}

/* Portfolio content sections */
[data-theme="dark"] section {
  background: transparent !important;
}

/* Header "See our work" button fix */
[data-theme="light"] header a[aria-label="See our work"],
[data-theme="light"] header a[href*="#case-studies"] {
  color: #0A0A0A !important;
  outline: 1px solid #D1D5DB !important;
}

[data-theme="light"] header a[aria-label="See our work"]:hover,
[data-theme="light"] header a[href*="#case-studies"]:hover {
  outline-color: #6B7280 !important;
}

/* More specific text-white override for header buttons */
[data-theme="light"] header .text-text-white,
[data-theme="light"] header a[href*="#case-studies"] .relative {
  color: #0A0A0A !important;
}

/* Dark theme: ensure See our work is white */
[data-theme="dark"] header a[aria-label="See our work"],
[data-theme="dark"] header a[href*="#case-studies"],
[data-theme="dark"] header a[href*="#case-studies"] .relative {
  color: #ffffff !important;
}

/* Portfolio hero buttons */
/* Light theme: black button with white text for Visit project */
[data-theme="light"] a[href*="Visit project"],
[data-theme="light"] a[href="#live"].bg-\[\#0A0A0A\] {
  color: #ffffff !important;
}

/* Ensure specific hero first CTA (Visit project) is white text when black bg */
[data-theme="light"] #portfolio-white a.bg-\[\#0A0A0A\] {
  color: #ffffff !important;
}

/* Bottom CTA: Open live project should stay white text on black bg in both themes */
[data-theme="light"] a[href="#live"].bg-\[\#0A0A0A\],
[data-theme="dark"] a[href="#live"].bg-\[\#0A0A0A\] {
  color: #ffffff !important;
}

/* Fix all buttons with text-text-white class */
[data-theme="light"] .text-text-white {
  color: #0A0A0A !important;
}

/* Fix specific outline styles */
[data-theme="light"] a.text-text-white,
[data-theme="light"] button.text-text-white {
  color: #0A0A0A !important;
}

[data-theme="light"] [class*="outline:1px_solid_#2C2C2C"] {
  outline: 1px solid #D1D5DB !important;
}

[data-theme="light"] [class*="outline:1px_solid_#2C2C2C"]:hover {
  outline-color: #6B7280 !important;
}

/* Fix buttons with bg-bg-light-gray */
[data-theme="light"] .bg-bg-light-gray {
  background: #f1f5f9 !important;
  color: #0A0A0A !important;
}

/* Fix backdrop blur buttons */
[data-theme="light"] .text-text-white.backdrop-blur-sm {
  color: #0A0A0A !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Footer Offices labels (USA / Moldova) */
[data-theme="light"] footer p.new-design-small.text-white,
[data-theme="light"] footer p.new-design-small.font-medium,
[data-theme="light"] footer .new-design-small.text-white,
[data-theme="light"] footer .new-design-small.font-medium {
  color: #0A0A0A !important;
}

/* Ensure USA/Moldova headings switch */
[data-theme="light"] footer p.new-design-small,
[data-theme="light"] footer .new-design-small { color: #0A0A0A !important; }
[data-theme="light"] footer .text-text-secondary { color: #475569 !important; }

/* Header Get a quote text should be white on black button in light theme */
[data-theme="light"] #header-get-started-button { color: #ffffff !important; }
[data-theme="light"] #header-get-started-button .relative { color: #ffffff !important; }

/* Also handle portfolio header CTA */
[data-theme="light"] .header-cta.text-white { color: #ffffff !important; }