/* ========================================
   SITE.CSS - UMBRELLA STORE
   Arquivo principal que importa toda a hierarquia CSS
   ✅ PROBLEMA LOJA_UMBRELLA.STYLES.CSS CORRIGIDO
   ======================================== */

/* 1. Reset/Normalize */
@import 'reset.css';

/* 2. Variáveis Globais */
@import 'variables.css';

/* 3. Base/Global */
@import 'global.css';

/* 4. Layout (será criado futuramente) */
/* @import 'layout.css'; */

/* 5. Componentes */
/* @import 'components/buttons.css'; */
/* @import 'components/forms.css'; */
@import 'components/navigation.css';
@import 'components/header-user.css';
@import 'components/app-redirect.css';

/* 6. Páginas Específicas */
@import 'auth.css';
@import 'pages/home.css';
@import 'pages/produtos.css';
@import 'pages/produto-details.css';
@import 'pages/carrinho.css';
@import 'pages/contact.css';
@import 'pages/about.css';
@import 'pages/comunidade.css';

/* 7. Utilities (será criado futuramente) */
/* @import 'utilities.css'; */

/* Override do Bootstrap - design system */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 1px var(--border-3) !important;
}

/* ===== COMPONENTES ESPECÍFICOS DA UMBRELLA STORE ===== */

.hero-section {
  background: linear-gradient(135deg, var(--bg) 0%, var(--surface-2) 100%);
  padding: var(--spacing-2xl) 0;
}

.product-card {
  transition: border-color .2s, box-shadow .2s;
  border: 1px solid var(--border-1);
  background: var(--surface-1);
}

.product-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}

.product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}

.product-original-price {
  font-size: 11px;
  color: var(--text-3);
  text-decoration: line-through;
}

/* Badge de tipo de produto */
.product-type-badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 10;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.navbar-umbrella {
  backdrop-filter: blur(10px);
  background-color: var(--surface-1) !important;
  border-bottom: 1px solid var(--border-1) !important;
}

.footer-umbrella {
  background: var(--surface-1);
  border-top: 1px solid var(--border-1);
}

/* ===== UTILITÁRIOS ESPECÍFICOS ===== */

.bg-gradient-primary { background: linear-gradient(135deg, var(--accent), var(--text-2)); }
.text-gradient {
  background: linear-gradient(90deg, var(--accent), var(--text-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shadow-umbrella { box-shadow: var(--shadow-md); }
.shadow-umbrella-lg { box-shadow: var(--shadow-lg); }

.border-gradient {
  border: 1px solid var(--border-2);
  background: var(--surface-1);
}

/* ===== ANIMAÇÕES ESPECÍFICAS ===== */

/* Hover effects para cards */
.hover-lift {
  transition: transform var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

/* Pulse effect para CTAs */
.pulse-cta {
  animation: pulse-cta 2s infinite;
}

@keyframes pulse-cta {
  0% { box-shadow: 0 0 0 0 var(--accent-dim); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 var(--accent-dim); }
}

/* ===== DARK MODE ESPECÍFICO ===== */
/* Tema escuro é o padrão da Umbrella Store, mesmo se o usuário preferir claro */

@media print {
  .navbar, .footer, .btn { display: none !important; }
  .container { max-width: none !important; }
}

@import 'design-system-override.css';