/* Theme Toggle - Sistema de Tema Claro/Escuro */

/* ========================================
   Variáveis CSS para Tema Claro
   ======================================== */
:root[data-theme="light"] {
  /* Backgrounds */
  --ss-bg-primary: #ffffff;
  --ss-bg-secondary: #f8fafc;
  --ss-bg-tertiary: #f1f5f9;
  --ss-card-bg: rgba(255, 255, 255, 0.9);
  --ss-card-bg-hover: rgba(248, 250, 252, 0.95);
  
  /* Textos */
  --ss-text-primary: #0f172a;
  --ss-text-secondary: #475569;
  --ss-text-tertiary: #64748b;
  --ss-text-muted: #94a3b8;
  
  /* Bordas */
  --ss-border-color: #cbd5e1;
  --ss-border-color-hover: #94a3b8;
  
  /* Sombras */
  --ss-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --ss-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  --ss-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  
  /* Overlay */
  --ss-overlay: rgba(0, 0, 0, 0.5);
  
  /* Gradientes */
  --ss-gradient-bg: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  --ss-card-gradient: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%);
  --ss-card-gradient-hover: linear-gradient(135deg, rgba(248,250,252,0.95) 0%, rgba(241,245,249,0.98) 100%);
}

/* ========================================
   Tema Escuro (Padrão)
   ======================================== */
:root,
:root[data-theme="dark"] {
  /* Backgrounds */
  --ss-bg-primary: #121621;
  --ss-bg-secondary: #1a1f32;
  --ss-bg-tertiary: #232843;
  --ss-card-bg: #2a3575;
  --ss-card-bg-hover: #3a4585;
  
  /* Textos */
  --ss-text-primary: #ffffff;
  --ss-text-secondary: #d0d8f0;
  --ss-text-tertiary: #a8b8dd;
  --ss-text-muted: #8892b0;
  
  /* Bordas */
  --ss-border-color: #3d4b6f;
  --ss-border-color-hover: #5a65a9;
  
  /* Sombras */
  --ss-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --ss-shadow-md: 0 8px 16px -2px rgba(0, 0, 0, 0.4);
  --ss-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  
  /* Overlay */
  --ss-overlay: rgba(0, 0, 0, 0.75);
  
  /* Gradientes */
  --ss-gradient-bg: radial-gradient(ellipse at top, #1a1f32 0%, #121621 100%);
  --ss-card-gradient: linear-gradient(135deg, #2e3a85 0%, #3a4590 50%, #4650a0 100%);
  --ss-card-gradient-hover: linear-gradient(135deg, #3a4590 0%, #4650a0 50%, #5260b0 100%);
}

/* ========================================
   Aplicação dos Temas
   ======================================== */

/* Background geral */
body {
  background: var(--ss-bg-primary);
  color: var(--ss-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards de produtos */
.ss-card,
.produto-card,
.ss-product-card {
  background: var(--ss-card-bg) !important;
  border-color: var(--ss-border-color) !important;
  box-shadow: var(--ss-shadow-md) !important;
  transition: all 0.3s ease;
}

.ss-card:hover,
.produto-card:hover,
.ss-product-card:hover {
  background: var(--ss-card-bg-hover) !important;
  border-color: var(--ss-border-color-hover) !important;
}

/* Textos */
.ss-card h3,
.ss-card h4,
.produto-titulo,
.ss-product-title {
  color: var(--ss-text-primary) !important;
}

.ss-card p,
.produto-descricao,
.ss-product-description {
  color: var(--ss-text-secondary) !important;
}

/* Seções */
.ss-section,
.produto-section {
  background: var(--ss-bg-secondary);
}

/* Container principal */
.ss-container,
.main-content {
  background: var(--ss-bg-primary);
}

/* Bordas */
.ss-border {
  border-color: var(--ss-border-color) !important;
}

/* ========================================
   Botão Toggle de Tema
   ======================================== */
.theme-toggle {
  position: fixed !important;
  bottom: 30px !important;
  right: 110px !important; /* Ao lado do carrinho (60px + 30px gap + 20px) */
  z-index: 999998 !important; /* Um pouco abaixo do carrinho */
  background: var(--ss-card-bg) !important;
  border: 2px solid var(--ss-border-color) !important;
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: var(--ss-shadow-lg) !important;
  transition: all 0.3s ease !important;
  font-size: 1.6rem !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Ícones do toggle */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

/* Responsivo */
@media (max-width: 768px) {
  .theme-toggle {
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    bottom: 20px;
    right: 90px; /* Ao lado do carrinho mobile */
  }
}

/* ========================================
   Ajustes Específicos para Tema Claro
   ======================================== */
[data-theme="light"] {
  /* Modal PIX - ajustes para tema claro */
  .modal-pix .modal-content {
    background: linear-gradient(135deg, #c5cad9 0%, #d1d5e8 100%) !important;
    border-color: #8b9ddc !important;
  }
  
  .modal-pix .modal-header {
    background: linear-gradient(135deg, #b5bace, #c5cad9) !important;
    border-color: #8b9ddc !important;
  }
  
  .modal-pix .modal-body {
    color: #0f172a !important;
  }
  
  .modal-pix h3,
  .modal-pix h4,
  .modal-pix h5,
  .modal-pix h6 {
    color: #0f172a !important;
    text-shadow: none !important;
  }
  
  .modal-pix .step-description,
  .modal-pix .qr-instructions ol,
  .modal-pix label,
  .modal-pix p,
  .modal-pix .product-name,
  .modal-pix .status-content h6,
  .modal-pix .status-content p,
  .modal-pix .step-label,
  .modal-pix .polling-indicator small,
  .modal-pix .field-helper {
    color: #0f172a !important;
  }
  
  .modal-pix .step.active .step-label {
    color: #5cb8ff !important;
    text-shadow: none !important;
  }
  
  .modal-pix .step.completed .step-label {
    color: #059669 !important;
    text-shadow: none !important;
  }
  
  .modal-pix .form-control {
    background: rgba(241, 245, 249, 0.5) !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }
  
  .modal-pix .form-control:focus {
    background: #ffffff !important;
    border-color: #5cb8ff !important;
  }
  
  /* Background particles em tema claro */
  #tech-particles-bg {
    background: radial-gradient(
      ellipse at center,
      #a5b4fc 0%,
      #8b9ddc 30%,
      #7186c9 60%,
      #5a6db8 100%
    ) !important;
  }
  
  /* Linhas escuras no tema claro */
  #tech-particles-bg canvas {
    filter: invert(0.15) contrast(1.2);
  }
  
  /* ========================================
     MINHA CONTA - Cards e Textos
     ======================================== */
  .ss-account-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  }
  
  .ss-account-card:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .ss-account-card__title,
  .ss-account-header__title {
    color: #0f172a !important;
  }
  
  .ss-account-card__content,
  .ss-account-header__subtitle,
  .ss-data-item__label {
    color: #475569 !important;
  }
  
  .ss-data-item__value {
    color: #1e293b !important;
    font-weight: 600;
  }
  
  .ss-data-item {
    background: rgba(248, 250, 252, 0.6) !important;
    border: 1px solid #e2e8f0 !important;
  }
  
  .ss-action-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #cbd5e1 !important;
    color: #0f172a !important;
  }
  
  .ss-action-card:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #6366f1 !important;
    transform: translateY(-2px);
  }
  
  /* ========================================
     CHECKOUT - Cards e Textos
     ======================================== */
  .ss-summary-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .ss-summary-title,
  .ss-section-title {
    color: #0f172a !important;
  }
  
  .ss-summary-item {
    background: rgba(248, 250, 252, 0.5) !important;
    border: 1px solid #e2e8f0 !important;
  }
  
  .ss-summary-item:hover {
    background: rgba(241, 245, 249, 0.7) !important;
    border-color: #cbd5e1 !important;
  }
  
  .ss-payment-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #cbd5e1 !important;
  }
  
  .ss-payment-card:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #6366f1 !important;
  }
  
  .ss-form-section {
    color: #0f172a !important;
  }
  
  .ss-checkout-subtitle,
  .ss-checkbox-label {
    color: #475569 !important;
  }
  
  /* ========================================
     PRODUTO ÚNICO - Cards e Textos  
     ======================================== */
  .ss-product-info,
  .ss-product-details {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .ss-product-title {
    color: #0f172a !important;
  }
  
  .ss-product-price {
    color: #059669 !important;
    font-weight: 700;
  }
  
  .ss-tabs__button {
    color: #475569 !important;
    border-bottom: 2px solid transparent !important;
  }
  
  .ss-tabs__button.active {
    color: #0f172a !important;
    border-bottom-color: #6366f1 !important;
  }
  
  .ss-product-description,
  .ss-description-content {
    color: #475569 !important;
  }
  
  .ss-tabs__content {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #cbd5e1 !important;
  }
  
  .ss-feature-item {
    background: rgba(248, 250, 252, 0.6) !important;
    border: 1px solid #e2e8f0 !important;
  }
  
  .ss-feature-item:hover {
    background: rgba(241, 245, 249, 0.8) !important;
    border-color: #cbd5e1 !important;
  }
  
  /* Cards de produtos relacionados */
  .ss-product-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .ss-product-card:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-4px);
  }
  
  .ss-product-card__title {
    color: #0f172a !important;
  }
  
  .ss-product-card__price {
    color: #059669 !important;
    font-weight: 700;
  }
  
  /* Galeria de produto - tema claro */
  .ss-gallery-main {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
  }
  
  .ss-gallery-thumb {
    background: rgba(248, 250, 252, 0.9) !important;
    border-color: #cbd5e1 !important;
  }
  
  .ss-gallery-thumb:hover {
    border-color: #6366f1 !important;
  }
  
  .ss-gallery-thumb.active {
    border-color: #6366f1 !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), 0 0 24px rgba(99, 102, 241, 0.2) !important;
  }
  
  .ss-gallery-thumb.placeholder {
    opacity: 0.3 !important;
    filter: grayscale(1) brightness(1.1) !important;
  }
  
  /* ========================================
     FILTROS - Tema Claro
     ======================================== */
  .ss-filter-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .ss-filter-card__header h4 {
    color: #0f172a !important;
    background: linear-gradient(135deg, #0f172a, #6366f1) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  
  .ss-filter-clear {
    color: #6366f1 !important;
  }
  
  .ss-filter-clear:hover {
    color: #4f46e5 !important;
  }
  
  .plat-btn {
    background: rgba(248, 250, 252, 0.8) !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
  }
  
  .plat-btn:hover {
    background: rgba(241, 245, 249, 1) !important;
    color: #0f172a !important;
    border-color: #6366f1 !important;
  }
  
  .plat-btn.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
  }
  
  .plat-btn--clear-out {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
  }
  
  .plat-btn--clear-out:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #991b1b !important;
    border-color: #dc2626 !important;
  }
  
  .ss-toggle-label,
  .ss-filtro-titulo,
  .ss-label {
    color: #0f172a !important;
  }
  
  .ss-input,
  .ss-select {
    background: rgba(248, 250, 252, 0.8) !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }
  
  .ss-input:focus,
  .ss-select:focus {
    background: #ffffff !important;
    border-color: #6366f1 !important;
  }
  
  .ss-range-slider-track {
    background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%) !important;
  }
  
  .ss-range-slider-fill {
    background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%) !important;
  }
  
  .ss-slider {
    background: #cbd5e1 !important;
  }
  
  .ss-switch__input:checked + .ss-slider {
    background: #6366f1 !important;
  }
  
  .ss-price-filter__display {
    color: #475569 !important;
  }
}