/* =========================================================
   public/css/promo-campaigns.css
   Divulga Aê — campanhas do calendário de marketing

   COMO USAR EM QUALQUER LUGAR:
   1) Coloque data-promo="chave-da-campanha" em um elemento
      (ex.: <div class="dv-promo-bg" data-promo="natal">).
   2) Dentro dele, use as variáveis:
        var(--promo-from)       cor inicial do degradê
        var(--promo-to)         cor final do degradê
        var(--promo-accent)     cor de destaque (selo/botão)
        var(--promo-on-accent)  cor do texto sobre o destaque
   3) Formatos prontos: .dv-promo-strip (faixa), .dv-promo-chip (selo),
      .dv-promo-bg (fundo em degradê).
   ========================================================= */


/* ---------- 1. CORES POR CAMPANHA ---------- */

/* Padrão / fallback (roxo da marca) */
.dv-promo-strip, .dv-promo-chip, .dv-promo-bg, [data-promo] {
    --promo-from: #1e1b4b; --promo-to: #6d28d9; --promo-accent: #fbbf24; --promo-on-accent: #1e1b4b;
}

[data-promo="janeiro-branco"]    { --promo-from: #1e293b; --promo-to: #64748b; --promo-accent: #f8fafc; --promo-on-accent: #0f172a; }
[data-promo="volta-as-aulas"]    { --promo-from: #0f2a5c; --promo-to: #2563eb; --promo-accent: #fde047; --promo-on-accent: #1e1b4b; }
[data-promo="carnaval"]          { --promo-from: #4c1d95; --promo-to: #db2777; --promo-accent: #fde047; --promo-on-accent: #2e1065; }
[data-promo="dia-da-mulher"]     { --promo-from: #4a044e; --promo-to: #c026d3; --promo-accent: #f5d0fe; --promo-on-accent: #3b0764; }
[data-promo="dia-do-consumidor"] { --promo-from: #1e1b4b; --promo-to: #4f46e5; --promo-accent: #fb923c; --promo-on-accent: #ffffff; }
[data-promo="pascoa"]            { --promo-from: #2b1810; --promo-to: #7a4a2b; --promo-accent: #fcd34d; --promo-on-accent: #2b1810; }
[data-promo="abril-azul"]        { --promo-from: #083344; --promo-to: #0891b2; --promo-accent: #67e8f9; --promo-on-accent: #083344; }
[data-promo="dia-das-maes"]      { --promo-from: #4c0519; --promo-to: #e11d48; --promo-accent: #fecdd3; --promo-on-accent: #4c0519; }
[data-promo="dia-dos-namorados"] { --promo-from: #450a0a; --promo-to: #dc2626; --promo-accent: #ffffff; --promo-on-accent: #991b1b; }
[data-promo="festa-junina"]      { --promo-from: #7c2d12; --promo-to: #ea580c; --promo-accent: #fde047; --promo-on-accent: #431407; }
[data-promo="ferias-de-julho"]   { --promo-from: #0c4a6e; --promo-to: #0ea5e9; --promo-accent: #fde047; --promo-on-accent: #422006; }
[data-promo="dia-dos-pais"]      { --promo-from: #0f172a; --promo-to: #334155; --promo-accent: #38bdf8; --promo-on-accent: #03121f; }
[data-promo="setembro-amarelo"]  { --promo-from: #422006; --promo-to: #ca8a04; --promo-accent: #fde047; --promo-on-accent: #422006; }
[data-promo="dia-do-cliente"]    { --promo-from: #052e16; --promo-to: #16a34a; --promo-accent: #fde047; --promo-on-accent: #052e16; }
[data-promo="outubro-rosa"]      { --promo-from: #831843; --promo-to: #ec4899; --promo-accent: #fbcfe8; --promo-on-accent: #500724; }
[data-promo="dia-das-criancas"]  { --promo-from: #2563eb; --promo-to: #9333ea; --promo-accent: #fde047; --promo-on-accent: #1e1b4b; }
[data-promo="halloween"]         { --promo-from: #0a0a0a; --promo-to: #5b1d06; --promo-accent: #fb923c; --promo-on-accent: #000000; }
[data-promo="novembro-azul"]     { --promo-from: #0b1b3a; --promo-to: #2563eb; --promo-accent: #93c5fd; --promo-on-accent: #0b1b3a; }
[data-promo="black-friday"]      { --promo-from: #0b0b0f; --promo-to: #3a1d00; --promo-accent: #ffb400; --promo-on-accent: #000000; }
[data-promo="dezembro-laranja"]  { --promo-from: #431407; --promo-to: #ea580c; --promo-accent: #fed7aa; --promo-on-accent: #431407; }
[data-promo="natal"]             { --promo-from: #064e3b; --promo-to: #b91c1c; --promo-accent: #fde047; --promo-on-accent: #3b0a0a; }
[data-promo="reveillon"]         { --promo-from: #0a0a0a; --promo-to: #1e1b4b; --promo-accent: #fcd34d; --promo-on-accent: #0a0a0a; }
[data-promo="ofertas"]           { --promo-from: #1e1b4b; --promo-to: #6d28d9; --promo-accent: #fbbf24; --promo-on-accent: #1e1b4b; }


/* ---------- 2. FORMATO: FUNDO EM DEGRADÊ (utilitário) ---------- */

.dv-promo-bg {
    color: #fff;
    background: linear-gradient(135deg, var(--promo-from) 0%, var(--promo-to) 100%);
}


/* ---------- 3. FORMATO: SELO (chip) ---------- */

.dv-promo-tag,
.dv-promo-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--promo-accent); color: var(--promo-on-accent);
    font-weight: 900; font-size: .78rem; padding: .3rem .8rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--promo-accent) 25%, transparent),
                0 4px 14px color-mix(in srgb, var(--promo-accent) 45%, transparent);
}
a.dv-promo-chip:hover { filter: brightness(1.08); color: var(--promo-on-accent); }


/* ---------- 4. FORMATO: FAIXA COMPACTA (strip) ---------- */

.dv-promo-strip {
    display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 18px;
    color: #fff; overflow: hidden; max-width: 100%;
    background: linear-gradient(135deg, var(--promo-from) 0%, var(--promo-to) 100%);
}

.dv-promo-head { flex: 0 0 auto; max-width: 280px; padding-right: .5rem; }
.dv-promo-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin-top: .75rem; color: #fff; text-transform: none; }
.dv-promo-sub { font-size: .75rem; line-height: 1.4; margin-top: .3rem; color: rgba(255, 255, 255, .78); }

.dv-promo-btn {
    flex: 0 0 auto; order: 3; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    background: var(--promo-accent); color: var(--promo-on-accent);
    font-weight: 800; font-size: .8rem; border-radius: 10px; padding: .7rem 1.2rem; text-decoration: none;
}
.dv-promo-btn:hover { filter: brightness(1.1); color: var(--promo-on-accent); }

.dv-promo-track {
    order: 2; flex: 1 1 auto; min-width: 0; display: flex; gap: .85rem; overflow-x: auto; padding: .15rem 0;
    scroll-snap-type: x proximity; scrollbar-width: none;
}
.dv-promo-track::-webkit-scrollbar { display: none; }

.dv-promo-mini {
    flex: 1 1 0; min-width: 175px; max-width: 280px; display: flex; align-items: center; gap: .75rem; padding: .6rem;
    border-radius: 12px; background: #fff; color: #111; text-decoration: none; scroll-snap-align: start;
    transition: transform .12s ease;
}
.dv-promo-mini:hover { transform: translateY(-2px); color: #111; }
.dv-promo-mini img { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border-radius: 8px; background: #f3f3f5; }
.dv-promo-mini-info { display: flex; flex-direction: column; min-width: 0; }
.dv-promo-mini-name {
    font-size: .72rem; font-weight: 600; line-height: 1.3; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dv-promo-mini-price { font-size: .72rem; line-height: 1.2; margin-top: .25rem; }
.dv-promo-mini-price del { opacity: .5; margin-right: .25rem; font-size: .65rem; }
.dv-promo-mini-price strong { color: #e02424; font-size: .82rem; }

@media (max-width: 767px) {
    .dv-promo-strip { flex-wrap: wrap; gap: 1rem; padding: 1rem; }
    .dv-promo-head { flex: 1 1 auto; max-width: none; }
    .dv-promo-track { flex: 1 1 100%; order: 4; }
}

/* ---------- 5. FORMATO: BARRA RECOLHÍVEL (details/summary) ---------- */

.dv-promo-wrap { max-width: 100%; }

.dv-promo-bar {
    display: flex; align-items: center; gap: .9rem; cursor: pointer; list-style: none;
    padding: .55rem .9rem; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, var(--promo-from) 0%, var(--promo-to) 100%);
    user-select: none;
}
.dv-promo-bar::-webkit-details-marker { display: none; }
.dv-promo-bar::marker { content: ''; }

.dv-promo-bar-text { flex: 1 1 auto; min-width: 0; font-size: .85rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dv-promo-bar-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 800; background: var(--promo-accent); color: var(--promo-on-accent);
    padding: .35rem .8rem; border-radius: 999px; }
.dv-promo-bar:hover .dv-promo-bar-cta { filter: brightness(1.08); }

.dv-promo-bar-icon { font-size: .7rem; transition: transform .2s ease; }
.dv-promo-wrap[open] .dv-promo-bar-icon { transform: rotate(180deg); }

.dv-promo-bar-less { display: none; }
.dv-promo-wrap[open] .dv-promo-bar-more { display: none; }
.dv-promo-wrap[open] .dv-promo-bar-less { display: inline; }

/* banner completo, quando aberto */
.dv-promo-wrap > .dv-promo-strip { margin-top: .5rem; }

@media (max-width: 767px) {
    .dv-promo-bar { gap: .6rem; padding: .5rem .7rem; }
    .dv-promo-bar-text { font-size: .75rem; }
}.dv-promo-wrap { max-width: 100%; margin: .75rem 0 1.5rem; }
/* ---------- 6b. CARDS NA COR DA CAMPANHA ---------- */

/* botão "Ver mais": gradiente da campanha */
.dv-promo-card-btn {
    background: linear-gradient(135deg, var(--promo-from) 0%, var(--promo-to) 100%);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--promo-to) 35%, transparent);
}

/* selo "Em promoção" sobre a imagem */
.dv-promo-card-flag {
    background: linear-gradient(135deg, var(--promo-from) 0%, var(--promo-to) 100%);
    color: #fff;
}

/* chip de categoria: fundo claro da campanha + texto na cor forte */
.dv-promo-card-chip {
    background: color-mix(in srgb, var(--promo-to) 12%, #fff);
    color: var(--promo-to);
}

/* ícone do carrinho (vendas) */
.dv-promo-card-sales i { color: var(--promo-to); }

/* hover do card com borda na cor da campanha */
.dv-promo-card:hover {
    border-color: color-mix(in srgb, var(--promo-to) 40%, transparent);
}