/* SharkSales - Página de Ativos - Dark Theme */

/* === LAYOUT GERAL DARK === */
.ss-canvas-page {
  background: var(--ss-dark-bg);
  min-height: 100vh;
  color: var(--ss-dark-text);
}

/* === SEÇÃO DE OFERTAS EM DESTAQUE === */
.sharksales-ofertas {
  margin: 0 0 var(--ss-space-12);
  padding: var(--ss-space-4) var(--ss-space-5);
  background: var(--ss-dark-bg);
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

/* Header da seção de ofertas */
.sharksales-ofertas-titulo {
  text-align: center;
  margin-bottom: var(--ss-space-8);
  padding: 0;
  position: relative;
}

.sharksales-ofertas-titulo .ss-fire {
  width: 32px;
  height: 32px;
  margin: 0 var(--ss-space-2) 0 0;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.8));
}

.sharksales-ofertas-titulo h3 {
  font-size: var(--ss-font-size-3xl); /* 36px - increased from 28px */
  font-weight: var(--ss-font-weight-extrabold); /* 800 - increased from 700 */
  color: var(--ss-dark-text);
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  text-shadow: none;
  letter-spacing: var(--ss-letter-spacing-tight);
  line-height: var(--ss-line-height-tight);
}

/* NOVO LAYOUT COMPACTO (barra única) */
.ss-ofertas--compact { padding: .85rem 1.25rem 1.25rem; border-radius:24px; }
.ss-ofertas-bar { 
  display:grid; 
  grid-template-columns: auto auto 1fr; 
  align-items:center; 
  gap:2rem; 
  background: linear-gradient(135deg, rgba(15,20,51,0.95), rgba(11,15,38,0.98));
  border: 1px solid rgba(111, 129, 255, 0.25); 
  padding: 0.75rem 1.25rem; 
  border-radius: 16px; 
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(111, 129, 255, 0.1) inset;
  backdrop-filter: blur(8px);
}
.ss-ofertas-bar__left { display:flex; align-items:center; gap:.55rem; }
.ss-ofertas-ico img { 
  width:22px; 
  height:22px; 
  filter:drop-shadow(0 0 4px rgba(255,120,60,0.6));
  animation: fireGlow 1.5s ease-in-out infinite alternate;
}

/* Animação pulsante de brilho do fogo */
@keyframes fireGlow {
  0% {
    filter: drop-shadow(0 0 4px rgba(255,120,60,0.6)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255,150,40,0.8)) brightness(1.2);
    transform: scale(1.05);
  }
  100% {
    filter: drop-shadow(0 0 12px rgba(255,100,0,0.9)) brightness(1.3);
    transform: scale(1.08);
  }
}
.ss-ofertas-title { font-size:var(--ss-font-size-base); font-weight:var(--ss-font-weight-semibold); letter-spacing:.5px; color:#f5f7fb; text-transform:none; }
.ss-ofertas-bar__middle { font-size:var(--ss-font-size-sm); font-weight:var(--ss-font-weight-semibold); letter-spacing:.55px; color:#d0d6e2; white-space:nowrap; }
.ss-ofertas-countdown { 
  color: #ffffff; 
  background: linear-gradient(135deg, rgba(90,125,255,0.25), rgba(30,90,200,0.2));
  padding: 0.65rem 1.25rem; 
  border: 1px solid rgba(111, 129, 255, 0.6); 
  border-radius: 24px; 
  font-size: var(--ss-font-size-base); 
  font-weight: var(--ss-font-weight-bold);
  letter-spacing: 0.5px; 
  display: inline-block;
  box-shadow: 0 0 20px rgba(111, 129, 255, 0.4),
              0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.ss-ofertas-countdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
.ss-ofertas-bar__right { text-align:right; font-size:var(--ss-font-size-xs); font-weight:var(--ss-font-weight-medium); letter-spacing:.45px; color:#677387; }
@media (max-width:900px){
  .ss-ofertas-bar { grid-template-columns: 1fr; gap:.65rem; }
  .ss-ofertas-bar__right { text-align:left; font-size:0.625rem; }
  .ss-ofertas-bar__middle { order:3; }
}

.ss-offer-timer {
  font-size: var(--ss-font-size-sm);
  color: var(--ss-dark-text-muted);
  font-weight: var(--ss-font-weight-medium);
  margin: var(--ss-space-2) 0 0;
  display: block;
  text-transform: none;
  letter-spacing: normal;
}

.sharksales-ofertas-titulo p {
  display: none; /* Remove subtítulo para simplicidade */
}

/* Grid de ofertas - 5 colunas responsivas mais compactas */
#sharksales-ofertas-grid.ss-ativos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ss-space-4);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--ss-space-4);
}

/* Colapsar ofertas quando houver muitas: mostra 12 e oculta o restante */
.ss-offers-collapsed #sharksales-ofertas-grid.ss-ativos-grid > *:nth-child(n+13) {
  display: none !important;
}
.ss-offers-toggle {
  margin-top: var(--ss-space-4);
  text-align: center;
}
.ss-tab-icon { margin-right: 6px; opacity: .9; }

/* === ESTRUTURA PRINCIPAL === */
.sharksales-produtos {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Títulos da página */
.ss-ativos-page-head {
  max-width: 100%;
  margin: 0 auto var(--ss-space-8);
  padding: 2rem 2.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(26, 27, 35, 0.85) 0%, rgba(18, 20, 28, 0.92) 100%);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(111, 129, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(111, 129, 255, 0.1) inset;
  position: relative;
  overflow: hidden;
}

.ss-ativos-page-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(111, 129, 255, 0.6) 50%, transparent);
  box-shadow: 0 0 12px rgba(111, 129, 255, 0.4);
}

.ss-page-title {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 900;
  margin: 0 0 1.25rem;
  background: linear-gradient(135deg, #fefcff 0%, #0286fe 50%, #0271d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  text-shadow: none;
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}

.ss-page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #0286fe, #0271d9, transparent);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(2, 134, 254, 0.6);
}

.ss-page-subtitle {
  margin: 0;
  font-size: var(--ss-font-size-lg);
  font-weight: var(--ss-font-weight-medium);
  color: #d2d6e6;
  letter-spacing: var(--ss-letter-spacing-wide);
  line-height: var(--ss-line-height-relaxed);
}

/* Categorias (card acima dos filtros) */
.ss-categories-card {
  background: rgba(18,20,28,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin: 0 0 1.75rem;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.ss-categories-title {
  margin: 0;
  padding: 0 0 var(--ss-space-4);
  font-size: var(--ss-font-size-2xl);
  font-weight: var(--ss-font-weight-extrabold);
  letter-spacing: var(--ss-letter-spacing-tight);
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  background: transparent; /* Sem fundo */
  border-bottom: 2px solid rgba(111, 129, 255, 0.3); /* Apenas borda inferior sutil */
}
.ss-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ss-category-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.15rem; /* increased from .65rem .95rem */
  text-decoration: none;
  font-size: var(--ss-font-size-sm); /* 14px - increased from .70rem */
  font-weight: var(--ss-font-weight-semibold); /* 600 */
  color: #d2d6e6;
  letter-spacing: var(--ss-letter-spacing-wide);
  transition: all var(--ss-transition-fast);
}
.ss-category-item a:hover { 
  background: rgba(255,255,255,0.08); /* increased opacity */
  color:#fff; 
  transform: translateX(4px);
}
.ss-category-item.active a { 
  background: rgba(74,158,255,0.16); /* increased opacity */
  color: #fff; 
  font-weight: var(--ss-font-weight-bold); /* 700 */
  border-left: 3px solid #0286fe;
}
.ss-category-count { 
  font-size: var(--ss-font-size-xs); /* 12px */
  opacity: .85; 
  font-weight: var(--ss-font-weight-semibold);
}



/* === PAINEL DE FILTROS === */
.sharksales-produtos-panel {
  background: var(--ss-dark-card);
  border-radius: 32px;
  padding: 0% 1rem 1rem; /* reduz vertical e lateral */
  height: fit-content;
  position: sticky;
  top: 1.5rem;
}

.sharksales-produtos-panel h4 {
  color: var(--ss-dark-text);
  font-size: var(--ss-font-size-lg); /* 18px - increased from .9rem */
  font-weight: var(--ss-font-weight-bold); /* 700 - increased from 600 */
  margin: 0 0 .75rem;
  letter-spacing: var(--ss-letter-spacing-wide);
}

.sharksales-produtos-panel .ss-subtitle {
  color: var(--ss-dark-text-muted);
  font-size: var(--ss-font-size-sm); /* 14px - increased from .7rem */
  margin: 0 0 1.25rem;
  line-height: var(--ss-line-height-relaxed);
}

/* === LISTA DE PRODUTOS === */
.ss-ativos-content {
  background: rgba(26, 27, 35, 0.85); /* Fundo mais opaco para melhor contraste */
  backdrop-filter: blur(8px);
  border-radius: var(--ss-radius-lg);
  padding: var(--ss-space-6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ss-ativos-title {
  font-size: var(--ss-font-size-2xl);
  font-weight: var(--ss-font-weight-extrabold); /* Mais pesado */
  margin-bottom: var(--ss-space-6);
  color: #ffffff; /* Branco puro para melhor contraste */
  letter-spacing: var(--ss-letter-spacing-tight);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
}

/* Empty State com melhor contraste */
.ss-ativos-empty {
  text-align: center;
  padding: var(--ss-space-8) var(--ss-space-4);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--ss-radius-md);
  border: 2px dashed rgba(255, 255, 255, 0.15);
}

.ss-ativos-empty__icon {
  font-size: 4rem;
  margin-bottom: var(--ss-space-4);
  opacity: 0.6;
}

.ss-ativos-empty__title {
  font-size: var(--ss-font-size-xl);
  font-weight: var(--ss-font-weight-bold);
  color: #ffffff;
  margin-bottom: var(--ss-space-3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ss-ativos-empty__message {
  font-size: var(--ss-font-size-base);
  color: #d2d6e6; /* Cinza claro para melhor leitura */
  line-height: var(--ss-line-height-relaxed);
  max-width: 500px;
  margin: 0 auto;
}

#sharksales-lista-produtos.ss-ativos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ss-space-4);
}

/* === RESPONSIVIDADE === */
@media (max-width: 1400px) {
  #sharksales-ofertas-grid.ss-ativos-grid,
  #sharksales-lista-produtos.ss-ativos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  #sharksales-ofertas-grid.ss-ativos-grid,
  #sharksales-lista-produtos.ss-ativos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ss-space-4);
  }
}

@media (max-width: 1024px) {
  .sharksales-produtos {
    grid-template-columns: 1fr;
    gap: var(--ss-space-6);
  }
  
  .sharksales-produtos-panel {
    position: static;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
  
  #sharksales-ofertas-grid.ss-ativos-grid {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .sharksales-ofertas {
    padding: var(--ss-space-6) var(--ss-space-4);
    margin-bottom: var(--ss-space-8);
  }
  
  #sharksales-ofertas-grid.ss-ativos-grid {
    grid-template-columns: 1fr;
    gap: var(--ss-space-4);
  }
  
  .sharksales-produtos {
    padding: 0 var(--ss-space-4);
    gap: var(--ss-space-5);
  }
  
  /* Painel de filtros ocupa toda largura */
  .sharksales-produtos-panel.ss-ativos-filters {
    margin-left: calc(-1 * var(--ss-space-4));
    margin-right: calc(-1 * var(--ss-space-4));
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  
  .ss-ativos-content {
    padding: var(--ss-space-4);
  }
  
  /* Títulos da página em mobile */
  .ss-ativos-page-head {
    padding: 0 var(--ss-space-4);
    margin-bottom: var(--ss-space-6);
  }
  
  .ss-page-title {
    font-size: 1.75rem;
  }
  
  .ss-page-subtitle {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .sharksales-produtos {
    padding: 0 var(--ss-space-3);
    gap: var(--ss-space-4);
  }
  
  .sharksales-produtos-panel.ss-ativos-filters {
    margin-left: calc(-1 * var(--ss-space-3));
    margin-right: calc(-1 * var(--ss-space-3));
  }
  
  .ss-ativos-content {
    padding: var(--ss-space-3);
  }
  
  .ss-ativos-page-head {
    padding: 0 var(--ss-space-3);
    margin-bottom: var(--ss-space-4);
  }
  
  .ss-page-title {
    font-size: 1.5rem;
  }
  
  .ss-page-subtitle {
    font-size: 0.8rem;
  }
}