/* Estilos dedicados para a seção Black Friday (profissional, chamativo e acessível)
   Coloque este arquivo em assets/css/blackfriday.css e importe no head do index.
*/

.black-friday{
  --bf-bg-1: #0b1b3a;
  --bf-bg-2: #07122a;
  --glass: rgba(255,255,255,0.06);
  color: #fff;
  padding: 28px 20px;
  border-radius: 14px;
  margin: 22px auto;
  background: linear-gradient(160deg, var(--bf-bg-1) 0%, var(--bf-bg-2) 100%);
  box-shadow: 0 30px 80px rgba(3,9,25,0.6);
  max-width: 1280px;
  position: relative;
}

/* Layout interno */
.black-friday .bf-inner{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 22px;
  align-items: start;
}

/* Esquerda - texto / ctas */
.bf-left{
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border: 1px solid rgba(255,255,255,0.04);
}
.bf-label{
  display:inline-block;
  background: linear-gradient(90deg,#ff6b6b,#ffb86b);
  color:#111;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:0.82rem;
  margin-bottom:10px;
  box-shadow: 0 6px 18px rgba(255,107,107,0.14);
}
.bf-title{
  margin:6px 0 8px 0;
  font-size:1.8rem;
  line-height:1.05;
  background: linear-gradient(90deg, var(--accent-2, #ffb86b), var(--accent, #ff6b6b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight:900;
}
.bf-lead{
  color: rgba(255,255,255,0.88);
  margin-bottom:14px;
  font-size:1rem;
  max-width:42ch;
}

/* CTAs */
.bf-cta-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.bf-cta{padding:12px 16px;border-radius:10px;font-weight:900;cursor:pointer;border:0}
.bf-cta-primary{
  background: linear-gradient(90deg,#ff6b6b,#ffb86b);
  color:#111;
  box-shadow: 0 10px 30px rgba(255,107,107,0.12);
}
.bf-cta-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}

/* Countdown */
.bf-countdown-wrap{margin-top:6px}
.bf-countdown-label{font-weight:800;color:rgba(255,255,255,0.72);font-size:0.9rem;margin-bottom:6px;display:block}
.bf-countdown{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius:12px;
  font-weight:900;
  color:#fff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  letter-spacing:0.6px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.5);
}

/* Direita - grade de ofertas */
/* Viewport mantém padding/bordas; track agora é GRID com 3 colunas */
.bf-right{display:flex;flex-direction:column;gap:12px}
.bf-deals-viewport{
  overflow: hidden;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
}

/* FORÇA 3 colunas equilibradas em telas grandes */
.bf-deals-track{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 6px;
  align-items: start;
}

/* Cartões de oferta - responsivos dentro da grid */
.bf-card{
  width: 100%;
  min-width: 0; /* importante para evitar quebra por min-width */
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 30px rgba(2,6,23,0.45);
  transition: transform 200ms cubic-bezier(.2,.9,.3,1), box-shadow 200ms ease;
  min-height: 320px;
  background-clip: padding-box;
  position: relative;
}
.bf-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(2,6,23,0.6);
}
.bf-card-media{
  height:160px;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#0d274b,#07122a);
  flex-shrink:0;
}
.bf-card-media img{
  width: auto;
  height: 100%;
  object-fit: contain;
  display:block;
  padding:8px;
}
.bf-badge{
  display:inline-block;
  background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:0.8rem;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.02);
}
.bf-card-title{
  font-size:1rem;
  color:#fff;
  margin:6px 0;
  font-weight:800;
  min-height:48px;
  line-height:1.2;
}

/* Preços */
.bf-price-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bf-price-old{color:rgba(255,255,255,0.45);text-decoration:line-through;font-weight:800;font-size:0.95rem}
.bf-price{
  background:linear-gradient(90deg,#ffed8a,#ffd86b);
  padding:8px 10px;
  border-radius:9px;
  font-weight:900;
  font-size:1.04rem;
  color:#111;
  box-shadow: 0 6px 20px rgba(255,220,120,0.08);
}
.bf-save{font-size:0.88rem;color:#bff2c7;font-weight:800}

/* Actions */
.bf-actions{display:flex;gap:8px;align-items:center;margin-top:auto}
.bf-actions .btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
}
.bf-actions .btn-primary{
  background:linear-gradient(90deg,#ff6b6b,#ffb86b);
  color:#111;
  padding:10px 14px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  transition: transform 160ms ease;
}
.bf-actions .btn-primary:hover{ transform: translateY(-3px) }

/* Controls */
.bf-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px}
.bf-prev, .bf-next{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
  transition: background 120ms ease;
}
.bf-prev:hover, .bf-next:hover{ background: rgba(255,255,255,0.06) }
.bf-slide-info{font-weight:800;color:rgba(255,255,255,0.85)}

/* RESPONSIVIDADE: 3 -> 2 -> 1 colunas */
/* Até 1200px: 2 colunas */
@media (max-width:1200px){
  .bf-deals-track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .black-friday .bf-inner{grid-template-columns: 1fr; }
  .bf-left{order:2}
  .bf-right{order:1}
  .bf-title{font-size:1.4rem}
  .bf-card{min-height:300px}
}

/* Até 800px: 1 coluna (mobile) */
@media (max-width:800px){
  .bf-deals-track{
    grid-template-columns: 1fr;
  }
  .bf-card-media{height:200px}
  .bf-card{min-height:360px}
  .bf-title{font-size:1.25rem}
  .bf-card{padding:14px}
}

/* Ajustes finos para celular */
@media (max-width:600px){
  .black-friday{padding:18px 14px;border-radius:12px}
  .bf-left{padding:14px}
  .bf-cta{padding:10px 12px}
  .bf-countdown{padding:8px 10px}
  .bf-card-media{height:160px}
  .bf-card{min-height:300px;padding:12px}
}

/* Acessibilidade - foco */
.bf-prev:focus, .bf-next:focus, .bf-card:focus, .bf-actions .btn-primary:focus{
  outline: 3px solid rgba(255,200,100,0.18);
  outline-offset: 3px;
  box-shadow: 0 8px 30px rgba(255,200,100,0.06);
}

/* Pequena melhoria visual para tornar o bloco "normal" e profissional em fundos variados */
.black-friday::before{
  content:"";
  position:absolute;
  inset: auto 0 -40px 0;
  height:40px;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(2,6,23,0.6));
  border-radius: 0 0 14px 14px;
  z-index: -1;
}