/* ============================================
   dark-mode.css - TEMA ESCURO
   ============================================ */

/* ============================================
   VARIÁVEIS DO TEMA ESCURO
   ============================================ */
.dark-mode {
  /* Cores Principais */
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --secondary: #94a3b8;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  /* Cores de Fundo */
  --dark: #f1f5f9;
  --gray: #64748b;
  --light-gray: #1e293b;
  --white: #0f172a;

  /* Sombras */
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

  /* Cores de Texto */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Cores de Border */
  --border-color: #1e293b;
  --border-light: #334155;

  /* Cores de Fundo Alternativas */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-hover: #1e293b;

  /* Cores de Input */
  --input-bg: #1e293b;
  --input-border: #334155;
  --input-text: #f1f5f9;
  --input-placeholder: #64748b;

  /* Cores de Card */
  --card-bg: #1e293b;
  --card-border: #334155;

  /* Cores de Modal */
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-bg: #1e293b;
  --modal-border: #334155;
}

/* ============================================
   TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
  z-index: var(--z-fixed);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.theme-toggle .sun-icon {
  display: none;
}

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

.dark-mode .theme-toggle .sun-icon {
  display: inline-block;
}

.dark-mode .theme-toggle .moon-icon {
  display: none;
}

/* ============================================
   HEADER
   ============================================ */
.dark-mode .header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .header .logo {
  color: var(--text-primary);
}

.dark-mode .header .logo span {
  color: var(--primary);
}

.dark-mode .header-actions button {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .header-actions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dark-mode .header-actions button.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-hover);
}

.dark-mode .search-bar input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.dark-mode .search-bar input::placeholder {
  color: var(--input-placeholder);
}

.dark-mode .search-bar input:focus {
  border-color: var(--primary);
}

.dark-mode .search-bar button {
  background: var(--primary);
  color: white;
}

/* ============================================
   CATEGORIES NAV
   ============================================ */
.dark-mode .categories-nav {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .categories-nav ul li a {
  color: var(--text-secondary);
}

.dark-mode .categories-nav ul li a:hover {
  color: var(--primary);
}

.dark-mode .categories-nav ul li a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.dark-mode .main-content {
  background: var(--bg-primary);
}

/* ============================================
   HERO
   ============================================ */
.dark-mode .hero {
  background: linear-gradient(135deg, #1e3a5f, #0f172a);
  border: 1px solid var(--border-color);
}

.dark-mode .hero h1,
.dark-mode .hero p {
  color: var(--text-primary);
}

.dark-mode .hero .stat-number {
  color: var(--primary);
}

.dark-mode .hero .stat-label {
  color: var(--text-secondary);
}

/* ============================================
   SECTION TITLES
   ============================================ */
.dark-mode .section-header h2 {
  color: var(--text-primary);
}

.dark-mode .section-header .view-all {
  color: var(--primary);
}

.dark-mode .section-header .view-all:hover {
  color: var(--primary-dark);
}

/* ============================================
   CARDS
   ============================================ */
.dark-mode .store-card,
.dark-mode .product-card,
.dark-mode .imovel-card,
.dark-mode .veiculo-card,
.dark-mode .profissional-card,
.dark-mode .servico-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.dark-mode .store-card .store-image,
.dark-mode .product-card .product-image,
.dark-mode .imovel-card .imovel-image,
.dark-mode .veiculo-card .veiculo-image,
.dark-mode .profissional-card .profissional-image,
.dark-mode .servico-card .servico-image {
  background: var(--bg-tertiary);
}

.dark-mode .store-card .store-info h3,
.dark-mode .product-card .product-info h4,
.dark-mode .imovel-card .imovel-info h3,
.dark-mode .veiculo-card .veiculo-info h3,
.dark-mode .profissional-card .profissional-info h3,
.dark-mode .servico-card .servico-info h3 {
  color: var(--text-primary);
}

.dark-mode .store-card .store-info .store-category,
.dark-mode .product-card .product-info .product-category,
.dark-mode .profissional-card .profissional-info .profissional-specialty {
  color: var(--text-secondary);
}

.dark-mode .store-card .store-info .store-location,
.dark-mode .store-card .store-info .store-phone,
.dark-mode .imovel-card .imovel-info .imovel-location,
.dark-mode .veiculo-card .veiculo-info .veiculo-year,
.dark-mode .profissional-card .profissional-info .profissional-location,
.dark-mode .profissional-card .profissional-info .profissional-phone {
  color: var(--text-muted);
}

.dark-mode .store-card .store-info .store-tag {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.dark-mode .imovel-card .imovel-info .imovel-features span,
.dark-mode .veiculo-card .veiculo-info .veiculo-features span {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.dark-mode .product-card .product-info .product-price {
  color: var(--primary);
}

.dark-mode .product-card .product-info .product-price .old-price {
  color: var(--text-muted);
}

.dark-mode .product-card .product-info .product-store {
  color: var(--text-muted);
}

.dark-mode .product-card .product-info .product-coupon {
  background: #1e293b;
  color: #fcd34d;
}

.dark-mode .product-card .product-actions .btn-add-cart {
  background: var(--primary);
}

.dark-mode .product-card .product-actions .btn-add-cart:hover {
  background: var(--primary-dark);
}

.dark-mode .profissional-card .profissional-actions .btn-contact {
  background: var(--success);
}

.dark-mode .profissional-card .profissional-actions .btn-contact:hover {
  background: #16a34a;
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.dark-mode .category-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.dark-mode .category-card:hover {
  border-color: var(--primary);
}

.dark-mode .category-info h3 {
  color: var(--text-primary);
}

.dark-mode .category-info p {
  color: var(--text-secondary);
}

.dark-mode .category-subtags span {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.dark-mode .subcategory-card {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.dark-mode .subcategory-card:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}

.dark-mode .subcategory-card span {
  color: var(--text-primary);
}

/* ============================================
   QUICK CATEGORIES
   ============================================ */
.dark-mode .quick-category {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.dark-mode .quick-category:hover {
  border-color: var(--primary);
}

.dark-mode .quick-category span {
  color: var(--text-primary);
}

/* ============================================
   FEATURED CATEGORIES
   ============================================ */
.dark-mode .featured-category {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.dark-mode .featured-category:hover {
  border-color: var(--primary);
}

.dark-mode .featured-category h3 {
  color: var(--text-primary);
}

.dark-mode .featured-category p {
  color: var(--text-secondary);
}

.dark-mode .featured-category .featured-count {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ============================================
   MODAL
   ============================================ */
.dark-mode .modal {
  background: var(--modal-overlay);
}

.dark-mode .modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
}

.dark-mode .modal-header {
  border-bottom-color: var(--border-color);
}

.dark-mode .modal-header h2 {
  color: var(--text-primary);
}

.dark-mode .modal-header .btn-close {
  color: var(--text-secondary);
}

.dark-mode .modal-header .btn-close:hover {
  color: var(--danger);
}

.dark-mode .modal-footer {
  border-top-color: var(--border-color);
}

/* ============================================
   CART
   ============================================ */
.dark-mode .cart-item {
  border-bottom-color: var(--border-color);
}

.dark-mode .cart-item .cart-item-info h4 {
  color: var(--text-primary);
}

.dark-mode .cart-item .cart-item-info .cart-item-store {
  color: var(--text-muted);
}

.dark-mode .cart-item .cart-item-info .cart-item-price {
  color: var(--primary);
}

.dark-mode .cart-item .cart-item-quantity button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .cart-item .cart-item-quantity button:hover {
  background: var(--primary);
  color: white;
}

.dark-mode .cart-item .cart-item-quantity span {
  color: var(--text-primary);
}

.dark-mode .cart-item .cart-item-actions .cart-item-subtotal {
  color: var(--text-primary);
}

.dark-mode .cart-empty p {
  color: var(--text-muted);
}

.dark-mode .cart-total {
  color: var(--text-primary);
}

.dark-mode .cart-total span {
  color: var(--primary);
}

.dark-mode .btn-checkout {
  background: var(--primary);
}

.dark-mode .btn-checkout:hover {
  background: var(--primary-dark);
}

.dark-mode .btn-continue {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dark-mode .btn-continue:hover {
  background: #334155;
}

/* ============================================
   SEARCH
   ============================================ */
.dark-mode .search-results {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.dark-mode .search-results-header {
  border-bottom-color: var(--border-color);
}

.dark-mode .search-results-header span {
  color: var(--text-secondary);
}

.dark-mode .search-results-header button {
  color: var(--text-secondary);
}

.dark-mode .search-result-item {
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .search-result-item:hover {
  background: var(--bg-hover);
}

.dark-mode .search-result-item .search-result-info h4 mark {
  background: #1e293b;
  color: #fcd34d;
}

.dark-mode .search-result-item .search-result-info p mark {
  background: #1e293b;
  color: #fcd34d;
}

.dark-mode .search-result-item .search-result-meta span {
  color: var(--text-muted);
}

.dark-mode .search-result-item .search-result-meta .search-result-price {
  color: var(--primary);
}

.dark-mode .search-results-footer {
  border-top-color: var(--border-color);
}

.dark-mode .search-results-footer .btn-view-all {
  background: var(--primary);
}

.dark-mode .search-results-footer .btn-view-all:hover {
  background: var(--primary-dark);
}

.dark-mode .search-no-results p {
  color: var(--text-muted);
}

/* ============================================
   PAGINATION
   ============================================ */
.dark-mode .pagination-btn {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .pagination-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.dark-mode .pagination-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.dark-mode .pagination-ellipsis {
  color: var(--text-muted);
}

/* ============================================
   FOOTER
   ============================================ */
.dark-mode .footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.dark-mode .footer h4 {
  color: var(--text-primary);
}

.dark-mode .footer p,
.dark-mode .footer ul li a {
  color: var(--text-secondary);
}

.dark-mode .footer ul li a:hover {
  color: var(--primary);
}

.dark-mode .footer-bottom {
  border-top-color: var(--border-color);
}

.dark-mode .footer-bottom p {
  color: var(--text-muted);
}

.dark-mode .footer-links a {
  color: var(--text-secondary);
}

.dark-mode .footer-links a:hover {
  color: var(--primary);
}

/* ============================================
   BREADCRUMB
   ============================================ */
.dark-mode .breadcrumb {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .breadcrumb ul li {
  color: var(--text-secondary);
}

.dark-mode .breadcrumb ul li a {
  color: var(--primary);
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-mode .btn-primary {
  background: var(--primary);
}

.dark-mode .btn-primary:hover {
  background: var(--primary-dark);
}

.dark-mode .btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.dark-mode .btn-secondary:hover {
  background: var(--primary);
  color: white;
}

.dark-mode .btn-danger {
  background: var(--danger);
}

.dark-mode .btn-danger:hover {
  background: #dc2626;
}

.dark-mode .btn-success {
  background: var(--success);
}

.dark-mode .btn-success:hover {
  background: #16a34a;
}

/* ============================================
   LOADING
   ============================================ */
.dark-mode .loading .spinner {
  border-color: var(--border-color);
  border-top-color: var(--primary);
}

.dark-mode .loading .spinner-small {
  border-color: var(--border-color);
  border-top-color: var(--primary);
}

/* ============================================
   ERROR MESSAGE
   ============================================ */
.dark-mode .error-message {
  background: #1e293b;
  color: #f87171;
  border-color: #450a0a;
}

.dark-mode .error-message .btn-retry {
  background: var(--danger);
}

.dark-mode .error-message .btn-retry:hover {
  background: #dc2626;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.dark-mode .empty-state {
  color: var(--text-secondary);
}

.dark-mode .empty-state h3 {
  color: var(--text-primary);
}

/* ============================================
   TOAST
   ============================================ */
.dark-mode .toast {
  box-shadow: var(--shadow-lg);
}

.dark-mode .toast-success {
  background: var(--success);
}

.dark-mode .toast-error {
  background: var(--danger);
}

.dark-mode .toast-info {
  background: var(--primary);
}

.dark-mode .toast-warning {
  background: var(--warning);
}

/* ============================================
   SCROLLBAR
   ============================================ */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ============================================
   SELECTION
   ============================================ */
.dark-mode ::selection {
  background: var(--primary);
  color: white;
}

/* ============================================
   TRANSITION
   ============================================ */
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.dark-mode * {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}