/* ===================================================
   JHR Relógios — TEMA FESTA JUNINA / ARRAIÁ
   =================================================== */

:root {
  --jun-red:    #e63946;
  --jun-gold:   #f4a300;
  --jun-yellow: #ffd23f;
  --jun-green:  #2a9d8f;
  --jun-blue:   #457b9d;
  --jun-orange: #e76f51;
  --jun-dark:   #2a1505;
}

/* ── Bandeirinhas penduradas no topo ────────────── */
.junina-flags {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 4px;
  background: transparent;
  position: relative;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* linha do barbante */
.junina-flags::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 0;
}

.junina-flag {
  flex: 1 1 auto;
  height: 26px;
  position: relative;
  display: block;
  background: var(--flag-color);
  /* recorte triangular invertido (bandeirinha) */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: 0 1px;
  transform-origin: top center;
  animation: jun-flag-wave 2.6s ease-in-out infinite alternate;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes jun-flag-wave {
  0%   { transform: rotate(-3deg) translateY(0); }
  100% { transform: rotate(3deg)  translateY(2px); }
}

/* ── Banner topo ────────────────────────────────── */
.junina-banner {
  background: linear-gradient(135deg, #3a1d05 0%, #5a2e08 50%, #3a1d05 100%);
  border-bottom: 3px dashed var(--jun-yellow);
  border-top: 2px solid var(--jun-red);
  padding: 9px 15px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.junina-banner::before,
.junina-banner::after {
  content: '🌽 🔥 🎈 🪕 🌽 🔥 🎈 🪕';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.12;
  font-size: 0.7rem;
  white-space: nowrap;
  letter-spacing: 6px;
  pointer-events: none;
}
.junina-banner::before { left: 0; }
.junina-banner::after  { right: 0; }

.junina-banner-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--jun-yellow);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

.junina-banner-inner i {
  color: var(--jun-orange);
  animation: jun-flicker 1.2s ease-in-out infinite;
}

.junina-banner-inner strong {
  color: #fff;
}

/* ── Balões juninos flutuantes ──────────────────── */
.junina-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

/* cada balão é position:fixed definido 100% via JS */

/* ── Badge no hero ──────────────────────────────── */
.junina-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--jun-red) 0%, var(--jun-orange) 100%);
  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(230, 57, 70, 0.45);
  animation: jun-bounce 1.6s ease-in-out infinite;
  text-transform: uppercase;
}

.junina-hero-badge i {
  animation: jun-flicker 1.2s ease-in-out infinite;
}

/* ── Hero recolored ─────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--bg) 0%, #2a1505 55%, rgba(244, 163, 0, 0.08) 100%) !important;
  border-color: rgba(244, 163, 0, 0.3) !important;
}

/* ── Product card hover — brilho dourado ────────── */
.product-card:hover {
  border-color: var(--jun-yellow) !important;
  box-shadow: 0 20px 40px rgba(244, 163, 0, 0.25) !important;
}

/* ── Filter btn / sidebar active ────────────────── */
.filter-btn.active,
.sidebar-btn.active {
  background: linear-gradient(135deg, var(--jun-red) 0%, var(--jun-orange) 100%) !important;
  border-color: var(--jun-red) !important;
  color: #fff !important;
}

/* ── Section title — decoração junina ──────────── */
.catalog-section .section-title::before {
  content: '🔥  ';
  font-size: 1.1rem;
}

.catalog-section .section-title::after {
  background: linear-gradient(90deg, var(--jun-red) 0%, var(--jun-yellow) 100%) !important;
}

/* ── Category title ─────────────────────────────── */
.category-title {
  color: var(--jun-yellow) !important;
}

/* ── WhatsApp button ────────────────────────────── */
.whatsapp-btn {
  background: var(--jun-green) !important;
}
.whatsapp-btn:hover {
  background: #1f7a6e !important;
  box-shadow: 0 3px 10px rgba(42, 157, 143, 0.45) !important;
}

/* ── Animações ───────────────────────────────────── */
@keyframes jun-flicker {
  0%, 100% { transform: scale(1)   rotate(-2deg); opacity: 1; }
  50%      { transform: scale(1.15) rotate(2deg); opacity: 0.85; }
}

@keyframes jun-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Scrollbar accent ───────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--jun-gold) !important; }
* { scrollbar-color: var(--jun-gold) transparent !important; }

/* ── Promo badge ────────────────────────────────── */
.promo-badge {
  background: linear-gradient(135deg, var(--jun-red) 0%, var(--jun-orange) 100%) !important;
  box-shadow: 0 2px 10px rgba(230, 57, 70, 0.5) !important;
}

/* ── Promo carousel border ───────────────────────── */
.promo-carousel-wrapper {
  border-bottom-color: var(--jun-yellow) !important;
}

/* ── Highlight de preços em promoção ────────────── */
.discount-price,
.promo-new-price {
  color: var(--jun-yellow) !important;
}

@media (max-width: 768px) {
  .junina-banner-inner {
    font-size: 0.8rem;
    gap: 7px;
  }
  .junina-flag {
    height: 20px;
  }
}