/* ============================================
   DIGITAL AGENCY DARK/LIGHT MODE PLUGIN CSS
   ============================================ */

/* Reset and base styles */
.da-dark-mode,
.da-dark-mode *,
.da-dark-mode *:before,
.da-dark-mode *:after {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Body styles */
body.da-dark-mode {
  background-color: var(--da-bg-color) !important;
  color: var(--da-text-body) !important;
}

body:not(.da-dark-mode) {
  background-color: var(--da-bg-color) !important;
  color: var(--da-text-body) !important;
}

/* ============================================
   1. ELEMENTOR SPECIFIC STYLES
   ============================================ */

/* Elementor sections and containers */
body.da-dark-mode .elementor-section,
body.da-dark-mode .elementor-column,
body.da-dark-mode .elementor-widget-wrap,
body.da-dark-mode .elementor-container {
  background-color: var(--da-bg-color) !important;
  color: var(--da-text-body) !important;
}

/* Elementor headings */
body.da-dark-mode .elementor-heading-title,
body.da-dark-mode h1.elementor-heading-title,
body.da-dark-mode h2.elementor-heading-title,
body.da-dark-mode h3.elementor-heading-title,
body.da-dark-mode h4.elementor-heading-title,
body.da-dark-mode h5.elementor-heading-title,
body.da-dark-mode h6.elementor-heading-title {
  color: var(--da-text-heading) !important;
}

/* Elementor text */
body.da-dark-mode .elementor-text-editor,
body.da-dark-mode .elementor-widget-text-editor,
body.da-dark-mode .elementor-widget-text-editor * {
  color: var(--da-text-body) !important;
}

/* Elementor buttons */
body.da-dark-mode .elementor-button,
body.da-dark-mode .elementor-button:hover,
body.da-dark-mode .elementor-button:focus {
  background-color: var(--da-primary-blue) !important;
  color: var(--da-button-text) !important;
  border-color: var(--da-primary-blue) !important;
}

/* ============================================
   2. PLUGIN SPECIFIC CLASSES
   ============================================ */

/* Card styling */
.da-card {
  background-color: var(--da-surface-color) !important;
  border: 1px solid var(--da-border-color) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  color: var(--da-text-body) !important;
}

.da-card h1,
.da-card h2,
.da-card h3,
.da-card h4,
.da-card h5,
.da-card h6 {
  color: var(--da-text-heading) !important;
}

/* Button classes */
.da-btn-primary {
  background-color: var(--da-primary-blue) !important;
  color: var(--da-button-text) !important;
  border: 2px solid var(--da-primary-blue) !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.da-btn-primary:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
}

.da-btn-cta {
  background-color: var(--da-primary-green) !important;
  color: var(--da-button-text) !important;
  border: 2px solid var(--da-primary-green) !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.da-btn-cta:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
}

/* Text utility classes */
.da-text-heading {
  color: var(--da-text-heading) !important;
}

.da-text-body {
  color: var(--da-text-body) !important;
}

.da-text-muted {
  color: var(--da-text-muted) !important;
}

/* Background utility classes */
.da-bg-surface {
  background-color: var(--da-surface-color) !important;
}

.da-bg-primary {
  background-color: var(--da-primary-blue) !important;
  color: var(--da-button-text) !important;
}

/* Border utility */
.da-border {
  border: 1px solid var(--da-border-color) !important;
}

/* ============================================
   3. TOGGLE SWITCH STYLES
   ============================================ */

.da-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.da-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.da-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--da-border-color);
  transition: 0.4s;
  border-radius: 34px;
}

.da-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--da-button-text);
  transition: 0.4s;
  border-radius: 50%;
}

.da-switch input:checked + .da-slider {
  background-color: var(--da-primary-blue);
}

.da-switch input:checked + .da-slider:before {
  transform: translateX(26px);
}

/* Icons inside toggle */
.da-slider:after {
  content: "☀️";
  position: absolute;
  left: 8px;
  top: 5px;
  font-size: 14px;
  opacity: 0.8;
  transition: 0.4s;
}

.da-switch input:checked + .da-slider:after {
  content: "🌙";
  left: 35px;
}

/* ============================================
   4. HEADER & LOGO SWITCHING
   ============================================ */

/* Logo switching */
.da-light-logo {
  display: block !important;
}

.da-dark-logo {
  display: none !important;
}

body.da-dark-mode .da-light-logo {
  display: none !important;
}

body.da-dark-mode .da-dark-logo {
  display: block !important;
}

/* Header background */
body.da-dark-mode header,
body.da-dark-mode .site-header,
body.da-dark-mode .elementor-location-header {
  background-color: var(--da-header-bg) !important;
  border-bottom: 1px solid var(--da-border-color) !important;
}

/* ============================================
   5. FORM ELEMENTS
   ============================================ */

body.da-dark-mode input[type="text"],
body.da-dark-mode input[type="email"],
body.da-dark-mode input[type="tel"],
body.da-dark-mode input[type="url"],
body.da-dark-mode input[type="password"],
body.da-dark-mode textarea,
body.da-dark-mode select {
  background-color: var(--da-surface-color) !important;
  color: var(--da-text-body) !important;
  border: 1px solid var(--da-border-color) !important;
}

/* ============================================
   6. FOOTER
   ============================================ */

body.da-dark-mode footer,
body.da-dark-mode .site-footer,
body.da-dark-mode .elementor-location-footer {
  background-color: var(--da-surface-color) !important;
  color: var(--da-text-body) !important;
  border-top: 1px solid var(--da-border-color) !important;
}

/* ============================================
   7. SPECIFIC ELEMENTOR WIDGET OVERRIDES
   ============================================ */

/* Icon Box */
body.da-dark-mode .elementor-icon-box-wrapper {
  color: var(--da-text-body) !important;
}

body.da-dark-mode .elementor-icon-box-title {
  color: var(--da-text-heading) !important;
}

/* Testimonial */
body.da-dark-mode .elementor-testimonial-content {
  background-color: var(--da-surface-color) !important;
  color: var(--da-text-body) !important;
  border: 1px solid var(--da-border-color) !important;
}

/* Progress Bar */
body.da-dark-mode .elementor-progress-bar {
  background-color: var(--da-primary-blue) !important;
}

/* Counter */
body.da-dark-mode .elementor-counter-number-wrapper {
  color: var(--da-text-heading) !important;
}

/* ============================================
   8. ANIMATIONS & EFFECTS
   ============================================ */

.da-card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.da-card-hover:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

body.da-dark-mode .da-card-hover:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   9. RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
  .da-theme-toggle-wrapper {
    bottom: 20px !important;
    right: 20px !important;
  }

  .da-theme-toggle {
    padding: 12px !important;
  }

  .da-switch {
    width: 50px;
    height: 28px;
  }

  .da-slider:before {
    height: 20px;
    width: 20px;
    bottom: 4px;
    left: 4px;
  }

  .da-switch input:checked + .da-slider:before {
    transform: translateX(22px);
  }

  .da-slider:after {
    font-size: 12px;
    top: 3px;
    left: 6px;
  }

  .da-switch input:checked + .da-slider:after {
    left: 28px;
  }
}


/* ============================================
   TRANSPARENT CONTAINER CLASSES
   ============================================ */

/* Transparent Container (no background) */
.da-transparent {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.da-transparent .elementor-widget-container,
.da-transparent .elementor-widget,
.da-transparent .elementor-element {
    background-color: transparent !important;
}

/* Semi-transparent Container */
.da-glass {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.da-dark-mode .da-glass {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Section Background Types */
.da-bg-none {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Card Variants - Only apply when explicitly wanted */
.da-card {
    background-color: var(--da-surface-color) !important;
    border: 1px solid var(--da-border-color) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    color: var(--da-text-body) !important;
}

/* Transparent Card */
.da-card-transparent {
    background-color: transparent !important;
    border: 1px solid var(--da-border-color) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    color: var(--da-text-body) !important;
}

/* Remove Background from Specific Elements */
.da-no-bg .elementor-background-overlay,
.da-no-bg .elementor-background-slideshow,
.da-no-bg .elementor-background-video-container {
    display: none !important;
}

/* ============================================
   OVERRIDE PLUGIN'S DEFAULT BACKGROUNDS
   ============================================ */

/* Remove default background from Elementor elements */
.elementor-section:not(.da-card):not(.da-bg-surface):not([class*="background"]) {
    background-color: transparent !important;
}

.elementor-column:not(.da-card):not(.da-bg-surface) {
    background-color: transparent !important;
}

.elementor-widget-wrap:not(.da-card):not(.da-bg-surface) {
    background-color: transparent !important;
}

/* Keep text colors working */
body.da-dark-mode .elementor-heading-title,
body.da-dark-mode h1.elementor-heading-title,
body.da-dark-mode h2.elementor-heading-title,
body.da-dark-mode h3.elementor-heading-title,
body.da-dark-mode h4.elementor-heading-title,
body.da-dark-mode h5.elementor-heading-title,
body.da-dark-mode h6.elementor-heading-title {
    color: var(--da-text-heading) !important;
}

body.da-dark-mode .elementor-text-editor,
body.da-dark-mode .elementor-widget-text-editor,
body.da-dark-mode .elementor-widget-text-editor * {
    color: var(--da-text-body) !important;
}

/* ============================================
   BUTTONS - Keep these working
   ============================================ */

body.da-dark-mode .da-btn-primary,
.da-btn-primary {
    background-color: var(--da-primary-blue) !important;
    color: var(--da-button-text) !important;
    border-color: var(--da-primary-blue) !important;
}

body.da-dark-mode .da-btn-cta,
.da-btn-cta {
    background-color: var(--da-primary-green) !important;
    color: var(--da-button-text) !important;
    border-color: var(--da-primary-green) !important;
}

/* ============================================
   UTILITY CLASSES FOR FLEXIBLE STYLING
   ============================================ */

/* Background Classes (use when needed) */
.da-bg-surface { /* Surface color background */
    background-color: var(--da-surface-color) !important;
}

.da-bg-primary { /* Primary color background */
    background-color: var(--da-primary-blue) !important;
    color: var(--da-button-text) !important;
}

.da-bg-cta { /* CTA color background */
    background-color: var(--da-primary-green) !important;
    color: var(--da-button-text) !important;
}

/* Border Classes */
.da-border {
    border: 1px solid var(--da-border-color) !important;
}

.da-border-top {
    border-top: 1px solid var(--da-border-color) !important;
}

.da-border-bottom {
    border-bottom: 1px solid var(--da-border-color) !important;
}

/* Text Classes */
.da-text-heading {
    color: var(--da-text-heading) !important;
}

.da-text-body {
    color: var(--da-text-body) !important;
}

.da-text-muted {
    color: var(--da-text-muted) !important;
}

.da-text-primary {
    color: var(--da-primary-blue) !important;
}

.da-text-cta {
    color: var(--da-primary-green) !important;
}

/* ============================================
   SPECIFIC FIX FOR ELEMENTOR SECTIONS
   ============================================ */

/* By default, Elementor sections should be transparent */
.elementor-section {
    background-color: transparent !important;
}

/* Only apply background if explicitly requested */
.elementor-section.da-has-bg {
    background-color: var(--da-surface-color) !important;
}

/* Fix for Elementor's default white backgrounds */
.elementor-widget-container:not(.da-card) {
    background-color: transparent !important;
}

/* ============================================
   HEADER & FOOTER SPECIFIC FIXES
   ============================================ */

/* Header should still work with theme */
body.da-dark-mode header,
body.da-dark-mode .site-header,
body.da-dark-mode .elementor-location-header {
    background-color: var(--da-header-bg) !important;
    border-bottom: 1px solid var(--da-border-color) !important;
}

/* But you can make header transparent too */
.da-header-transparent {
    background-color: transparent !important;
    backdrop-filter: blur(10px);
}

/* ============================================
   HERO SECTION FIXES (from previous design)
   ============================================ */

/* Hero sections should use gradient by default */
.da-hero-section {
    background: linear-gradient(135deg, var(--da-surface-color) 0%, var(--da-bg-color) 100%) !important;
}

/* But you can make hero transparent too */
.da-hero-section.da-transparent {
    background: transparent !important;
}

/* ============================================
   TOGGLE SWITCH (keep this working)
   ============================================ */

.da-switch,
.da-slider,
.da-mode-label {
    /* Keep toggle styles as they are */
}

.da-theme-toggle-wrapper{
	display:none!important;
}
.da-dark-mode .site-footer {
    background-color: var(--da-surface-color);
    color: var(--da-text-body);
}
.da-dark-mode .site-footer a {
    color: var(--da-primary-blue);
}