/* =============================================================================
   IT-Life Theme Variables — 3 switchable themes
   ARCHITECTURE: Colors = CSS variables (theme controls)
                 Layout = Elementor (user controls via drag & drop)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   LIGHT THEME (default)
   ----------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  /* Backgrounds */
  --il-bg-primary: #ffffff;
  --il-bg-secondary: #f8f9fa;
  --il-bg-tertiary: #f0f2f5;
  --il-bg-card: #ffffff;
  --il-bg-card-hover: #f8f9fa;
  --il-bg-overlay: rgba(0, 0, 0, 0.5);
  --il-bg-input: #ffffff;

  /* Text */
  --il-text-primary: #1a1a2e;
  --il-text-secondary: #4a5568;
  --il-text-muted: #718096;
  --il-text-inverse: #ffffff;
  --il-text-link: #2563eb;
  --il-text-link-hover: #1d4ed8;

  /* Brand & Accents */
  --il-accent-primary: #2563eb;
  --il-accent-primary-hover: #1d4ed8;
  --il-accent-primary-light: rgba(37, 99, 235, 0.1);
  --il-accent-secondary: #059669;
  --il-accent-secondary-hover: #047857;
  --il-accent-secondary-light: rgba(5, 150, 105, 0.1);
  --il-accent-danger: #ef4444;
  --il-accent-danger-light: rgba(239, 68, 68, 0.1);
  --il-accent-warning: #f59e0b;
  --il-accent-success: #10b981;

  /* Borders */
  --il-border-color: #e2e8f0;
  --il-border-light: #f1f5f9;
  --il-border-focus: #2563eb;
  --il-border-radius-sm: 8px;
  --il-border-radius: 12px;
  --il-border-radius-lg: 16px;
  --il-border-radius-xl: 24px;
  --il-border-radius-full: 9999px;

  /* Shadows */
  --il-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --il-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --il-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --il-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --il-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --il-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
  --il-shadow-button: 0 4px 14px rgba(37, 99, 235, 0.35);
  --il-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Header */
  --il-header-bg: rgba(255, 255, 255, 0.92);
  --il-header-bg-scrolled: rgba(255, 255, 255, 0.97);
  --il-header-border: rgba(0, 0, 0, 0.06);
  --il-header-text: #1a1a2e;

  /* Footer */
  --il-footer-bg: #1a1a2e;
  --il-footer-text: #cbd5e1;
  --il-footer-heading: #ffffff;
  --il-footer-link: #94a3b8;
  --il-footer-link-hover: #ffffff;

  /* Cart & Badges */
  --il-badge-bg: #ef4444;
  --il-badge-text: #ffffff;
  --il-cart-bg: #ffffff;
  --il-cart-border: #e2e8f0;
  --il-price-color: #059669;
  --il-price-old: #94a3b8;
  --il-sale-bg: #ef4444;
  --il-sale-text: #ffffff;

  /* Buttons */
  --il-btn-primary-bg: #2563eb;
  --il-btn-primary-text: #ffffff;
  --il-btn-primary-hover: #1d4ed8;
  --il-btn-secondary-bg: transparent;
  --il-btn-secondary-text: #2563eb;
  --il-btn-secondary-border: #2563eb;
  --il-btn-secondary-hover-bg: rgba(37, 99, 235, 0.08);

  /* Forms */
  --il-input-bg: #ffffff;
  --il-input-border: #cbd5e1;
  --il-input-text: #1a1a2e;
  --il-input-placeholder: #94a3b8;
  --il-input-focus-border: #2563eb;
  --il-input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* Spacing */
  --il-space-xs: 4px;
  --il-space-sm: 8px;
  --il-space-md: 16px;
  --il-space-lg: 24px;
  --il-space-xl: 32px;
  --il-space-2xl: 48px;
  --il-space-3xl: 64px;

  /* Typography */
  --il-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --il-font-size-xs: 0.75rem;
  --il-font-size-sm: 0.875rem;
  --il-font-size-base: 1rem;
  --il-font-size-lg: 1.125rem;
  --il-font-size-xl: 1.25rem;
  --il-font-size-2xl: 1.5rem;
  --il-font-size-3xl: 2rem;
  --il-font-size-4xl: 2.5rem;
  --il-font-weight-normal: 400;
  --il-font-weight-medium: 500;
  --il-font-weight-semibold: 600;
  --il-font-weight-bold: 700;
  --il-line-height: 1.6;
  --il-letter-spacing: -0.01em;

  /* Transitions */
  --il-transition-fast: 0.15s ease;
  --il-transition: 0.3s ease;
  --il-transition-slow: 0.5s ease;
  --il-transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-index */
  --il-z-dropdown: 100;
  --il-z-sticky: 200;
  --il-z-header: 300;
  --il-z-overlay: 400;
  --il-z-modal: 500;
  --il-z-toast: 600;

  /* Glassmorphism */
  --il-glass-bg: rgba(255, 255, 255, 0.7);
  --il-glass-border: rgba(255, 255, 255, 0.3);
  --il-glass-blur: blur(20px);
}


/* -----------------------------------------------------------------------------
   DARK THEME
   ----------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --il-bg-primary: #0f0f14;
  --il-bg-secondary: #1a1a2e;
  --il-bg-tertiary: #16213e;
  --il-bg-card: #1e1e2e;
  --il-bg-card-hover: #252540;
  --il-bg-overlay: rgba(0, 0, 0, 0.7);
  --il-bg-input: #1e1e2e;

  --il-text-primary: #e2e8f0;
  --il-text-secondary: #a0aec0;
  --il-text-muted: #718096;
  --il-text-inverse: #0f0f14;
  --il-text-link: #60a5fa;
  --il-text-link-hover: #93bbfd;

  --il-accent-primary: #3b82f6;
  --il-accent-primary-hover: #60a5fa;
  --il-accent-primary-light: rgba(59, 130, 246, 0.15);
  --il-accent-secondary: #00d4ff;
  --il-accent-secondary-hover: #33ddff;
  --il-accent-secondary-light: rgba(0, 212, 255, 0.12);
  --il-accent-danger: #f87171;
  --il-accent-danger-light: rgba(248, 113, 113, 0.15);
  --il-accent-warning: #fbbf24;
  --il-accent-success: #34d399;

  --il-border-color: rgba(255, 255, 255, 0.08);
  --il-border-light: rgba(255, 255, 255, 0.04);
  --il-border-focus: #3b82f6;

  --il-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --il-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --il-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --il-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  --il-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --il-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
  --il-shadow-button: 0 4px 14px rgba(59, 130, 246, 0.4);
  --il-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  --il-header-bg: rgba(15, 15, 20, 0.92);
  --il-header-bg-scrolled: rgba(15, 15, 20, 0.97);
  --il-header-border: rgba(255, 255, 255, 0.06);
  --il-header-text: #e2e8f0;

  --il-footer-bg: #0a0a0f;
  --il-footer-text: #718096;
  --il-footer-heading: #e2e8f0;
  --il-footer-link: #64748b;
  --il-footer-link-hover: #60a5fa;

  --il-badge-bg: #f87171;
  --il-badge-text: #ffffff;
  --il-cart-bg: #1e1e2e;
  --il-cart-border: rgba(255, 255, 255, 0.08);
  --il-price-color: #00d4ff;
  --il-price-old: #4a5568;
  --il-sale-bg: #f87171;
  --il-sale-text: #ffffff;

  --il-btn-primary-bg: #3b82f6;
  --il-btn-primary-text: #ffffff;
  --il-btn-primary-hover: #60a5fa;
  --il-btn-secondary-bg: transparent;
  --il-btn-secondary-text: #60a5fa;
  --il-btn-secondary-border: #3b82f6;
  --il-btn-secondary-hover-bg: rgba(59, 130, 246, 0.12);

  --il-input-bg: #1e1e2e;
  --il-input-border: rgba(255, 255, 255, 0.12);
  --il-input-text: #e2e8f0;
  --il-input-placeholder: #4a5568;
  --il-input-focus-border: #3b82f6;
  --il-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);

  --il-glass-bg: rgba(30, 30, 46, 0.7);
  --il-glass-border: rgba(255, 255, 255, 0.08);
  --il-glass-blur: blur(20px);
}


/* -----------------------------------------------------------------------------
   GRADIENT THEME
   ----------------------------------------------------------------------------- */
html[data-theme="gradient"] {
  --il-bg-primary: #0c0c1d;
  --il-bg-secondary: #12122b;
  --il-bg-tertiary: #1a1a3e;
  --il-bg-card: rgba(255, 255, 255, 0.06);
  --il-bg-card-hover: rgba(255, 255, 255, 0.1);
  --il-bg-overlay: rgba(0, 0, 0, 0.6);
  --il-bg-input: rgba(255, 255, 255, 0.08);

  --il-text-primary: #ffffff;
  --il-text-secondary: rgba(255, 255, 255, 0.75);
  --il-text-muted: rgba(255, 255, 255, 0.5);
  --il-text-inverse: #0c0c1d;
  --il-text-link: #4cc9f0;
  --il-text-link-hover: #7dd3fc;

  --il-accent-primary: #f72585;
  --il-accent-primary-hover: #ff4da6;
  --il-accent-primary-light: rgba(247, 37, 133, 0.15);
  --il-accent-secondary: #4cc9f0;
  --il-accent-secondary-hover: #7dd3fc;
  --il-accent-secondary-light: rgba(76, 201, 240, 0.12);
  --il-accent-danger: #ff6b6b;
  --il-accent-danger-light: rgba(255, 107, 107, 0.15);
  --il-accent-warning: #ffd166;
  --il-accent-success: #06d6a0;

  --il-border-color: rgba(255, 255, 255, 0.1);
  --il-border-light: rgba(255, 255, 255, 0.05);
  --il-border-focus: #f72585;

  --il-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --il-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --il-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
  --il-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
  --il-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(247, 37, 133, 0.05);
  --il-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(247, 37, 133, 0.1);
  --il-shadow-button: 0 4px 20px rgba(247, 37, 133, 0.4);
  --il-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  --il-header-bg: rgba(12, 12, 29, 0.88);
  --il-header-bg-scrolled: rgba(12, 12, 29, 0.97);
  --il-header-border: rgba(247, 37, 133, 0.15);
  --il-header-text: #ffffff;

  --il-footer-bg: #08081a;
  --il-footer-text: rgba(255, 255, 255, 0.5);
  --il-footer-heading: #ffffff;
  --il-footer-link: rgba(255, 255, 255, 0.4);
  --il-footer-link-hover: #f72585;

  --il-badge-bg: #f72585;
  --il-badge-text: #ffffff;
  --il-cart-bg: rgba(255, 255, 255, 0.06);
  --il-cart-border: rgba(255, 255, 255, 0.1);
  --il-price-color: #4cc9f0;
  --il-price-old: rgba(255, 255, 255, 0.3);
  --il-sale-bg: #f72585;
  --il-sale-text: #ffffff;

  --il-btn-primary-bg: #f72585;
  --il-btn-primary-text: #ffffff;
  --il-btn-primary-hover: #ff4da6;
  --il-btn-secondary-bg: transparent;
  --il-btn-secondary-text: #f72585;
  --il-btn-secondary-border: #f72585;
  --il-btn-secondary-hover-bg: rgba(247, 37, 133, 0.12);

  --il-input-bg: rgba(255, 255, 255, 0.06);
  --il-input-border: rgba(255, 255, 255, 0.12);
  --il-input-text: #ffffff;
  --il-input-placeholder: rgba(255, 255, 255, 0.3);
  --il-input-focus-border: #f72585;
  --il-input-focus-shadow: 0 0 0 3px rgba(247, 37, 133, 0.2);

  --il-glass-bg: rgba(255, 255, 255, 0.05);
  --il-glass-border: rgba(255, 255, 255, 0.1);
  --il-glass-blur: blur(20px);

  --il-gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --il-gradient-card: linear-gradient(135deg, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1));
  --il-gradient-text: linear-gradient(135deg, #f72585, #4cc9f0);
}


/* =============================================================================
   GLOBAL BASE STYLES — Applied to body and inherited by all children
   The !important on color properties ensures theme switching works
   even when Elementor sets inline colors.
   Layout properties (padding, margin, width) are NOT overridden.
   ============================================================================= */

/* Body */
body {
  background-color: var(--il-bg-primary) !important;
  color: var(--il-text-primary) !important;
  font-family: var(--il-font-family) !important;
  line-height: var(--il-line-height);
  letter-spacing: var(--il-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Gradient body background */
html[data-theme="gradient"] body {
  background: #0c0c1d !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(247, 37, 133, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(76, 201, 240, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(114, 9, 183, 0.05) 0%, transparent 50%) !important;
}

/* Links — inheritable */
a { color: var(--il-text-link); transition: color 0.2s ease; }
a:hover { color: var(--il-text-link-hover); }

/* Selection */
::selection { background: var(--il-accent-primary); color: var(--il-text-inverse); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--il-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--il-border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--il-text-muted); }


/* =============================================================================
   ELEMENTOR GLOBAL COLOR OVERRIDES
   These rules force Elementor widgets to follow theme colors.
   !important is required because Elementor uses inline styles.
   User can still control: padding, margin, width, height, alignment,
   font-size, positions — everything layout-related.
   ============================================================================= */

/* --- Elementor Containers & Sections --- */
.elementor-section,
.elementor-section.elementor-section-boxed,
.elementor-section.elementor-section-full_width,
.e-con,
.e-con.e-parent,
.e-con.e-child {
  background-color: transparent !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Elementor columns */
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.e-con-inner {
  background-color: transparent !important;
}

/* --- ALL Text Inside Elementor — inherit theme color --- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title a {
  color: var(--il-text-primary) !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor span {
  color: var(--il-text-secondary) !important;
}

/* Icon Box widget */
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title a {
  color: var(--il-text-primary) !important;
}

.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description {
  color: var(--il-text-secondary) !important;
}

.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
  color: var(--il-accent-primary) !important;
  fill: var(--il-accent-primary) !important;
}

/* Icon List widget */
.elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--il-text-secondary) !important;
}

.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg {
  color: var(--il-accent-primary) !important;
  fill: var(--il-accent-primary) !important;
}

/* --- Elementor Buttons --- */
.elementor-button-wrapper .elementor-button,
.elementor-widget-button .elementor-button {
  background-color: var(--il-btn-primary-bg) !important;
  color: var(--il-btn-primary-text) !important;
  border-radius: var(--il-border-radius) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  font-family: var(--il-font-family) !important;
  font-weight: var(--il-font-weight-semibold) !important;
}

.elementor-button-wrapper .elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: var(--il-btn-primary-hover) !important;
  color: var(--il-btn-primary-text) !important;
  transform: translateY(-2px);
  box-shadow: var(--il-shadow-button) !important;
}

/* Gradient theme buttons get gradient bg */
html[data-theme="gradient"] .elementor-button-wrapper .elementor-button,
html[data-theme="gradient"] .elementor-widget-button .elementor-button {
  background: linear-gradient(135deg, #f72585, #7209b7) !important;
}

html[data-theme="gradient"] .elementor-button-wrapper .elementor-button:hover,
html[data-theme="gradient"] .elementor-widget-button .elementor-button:hover {
  background: linear-gradient(135deg, #ff4da6, #9b30ff) !important;
  box-shadow: 0 4px 20px rgba(247, 37, 133, 0.4) !important;
}

/* --- Social Icons --- */
.elementor-widget-social-icons .elementor-social-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor-widget-social-icons .elementor-social-icon:hover {
  transform: translateY(-3px) !important;
}

/* --- Elementor Divider --- */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--il-border-color) !important;
}

/* --- Image hover effects --- */
.elementor-widget-image img {
  transition: transform 0.4s ease !important;
}

.elementor-widget-image:hover img {
  transform: scale(1.02);
}

/* --- Elementor Gallery --- */
.elementor-widget-gallery .elementor-gallery-item {
  border-radius: var(--il-border-radius) !important;
  overflow: hidden;
}


/* =============================================================================
   PHLOX / AUXIN FRAMEWORK OVERRIDES
   These target the actual header/page/footer structure of Phlox Pro theme.
   ============================================================================= */

/* Main page wrappers */
.aux-wrapper,
.aux-wrapper .aux-container {
  background-color: transparent !important;
}

.page-content,
#main,
.aux-primary,
.content-holder {
  background-color: transparent !important;
  color: var(--il-text-primary) !important;
}

/* Page title / breadcrumbs */
.page-title-section,
.page-header,
.aux-page-title-section {
  background-color: var(--il-bg-secondary) !important;
  color: var(--il-text-primary) !important;
}

.page-title-section h1,
.page-title-section h2,
.page-header h1,
.page-header h2,
.aux-page-title-section .page-title {
  color: var(--il-text-primary) !important;
}

/* Breadcrumbs */
.aux-breadcrumbs,
.aux-breadcrumbs a,
.breadcrumbs,
.breadcrumbs a,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: var(--il-text-muted) !important;
}

.aux-breadcrumbs a:hover,
.breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--il-accent-primary) !important;
}


/* =============================================================================
   SMOOTH TRANSITIONS for theme switching
   Only on color-related properties — not on layout
   ============================================================================= */

body,
.elementor-location-header,
.elementor-location-footer,
.site-header-section,
.aux-wrapper,
.page-footer,
.aux-footer,
.page-title-section,
.elementor-section,
.e-con,
.elementor-widget,
.woocommerce .products li.product,
.il-mini-cart-panel,
#inner-body {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Inner body wrapper — transparent */
#inner-body {
  background-color: transparent !important;
}