/* ============================================================
   MHDCommerce — Tipos de Oferta
   Arquivo: wwwroot/css/ofertas.css
   Carregar DEPOIS de site.css (usa as variáveis de tema)
   ============================================================
   Cores fixas (não dependem do tenant):
     Clube     → roxo
     Atacarejo → laranja
   ============================================================ */

:root {
    --clube:          #7a3df5;
    --clube-light:    #f3eefe;
    --atacarejo:      #e8730c;
    --atacarejo-light:#fff3e8;
}

/* ════════════════════════════════════════════
   CARD (listagem)
   ════════════════════════════════════════════ */

/* ── Selo "Exclusivo online" ── */
.badge-exclusivo {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--brand-dark); color: #fff;
    border-radius: 99px; padding: 2px 8px;
    font-size: 10px; font-weight: 700;
    margin-bottom: 6px; width: fit-content;
    text-transform: uppercase; letter-spacing: .3px;
}

/* ── Logo do clube sobre a foto (canto inferior esquerdo) ── */
.clube-selo {
    position: absolute; bottom: 8px; left: 8px; z-index: 3;
    display: flex; align-items: center; gap: 5px;
    background: var(--white); border: 1.5px solid var(--clube);
    border-radius: 99px; padding: 3px 9px 3px 5px;
    font-size: 10px; font-weight: 700; color: var(--clube);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    max-width: calc(100% - 16px);
}
.clube-selo .clube-selo-logo {
    width: 20px; height: 20px; border-radius: 99px; flex-shrink: 0;
    object-fit: contain; background: var(--clube); padding: 0;
}
.clube-selo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Bloco "Sócio paga R$X" no card ── */
.preco-clube-row {
    display: flex; align-items: center; gap: 6px; margin-top: 4px;
    background: var(--clube-light); border-radius: var(--radius-sm);
    padding: 5px 8px;
}
.preco-clube-logo {
    width: 18px; height: 18px; border-radius: 99px; flex-shrink: 0;
    object-fit: cover; background: var(--clube);
}
.preco-clube-label { font-size: 10px; font-weight: 600; color: var(--clube); line-height: 1.1; }
.preco-clube-valor {
    font-size: 14px; font-weight: 700; color: var(--clube);
    font-family: 'Sora', sans-serif; margin-left: auto;
}

/* ── Atacarejo no card ── */
.badge-atacarejo {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; align-items: center; gap: 4px;
    background: var(--atacarejo); color: #fff;
    border-radius: 99px; padding: 3px 10px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
}
.atacarejo-aviso {
    margin-top: 8px;
    background: var(--atacarejo-light);
    border: 1px dashed var(--atacarejo);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--atacarejo);
    line-height: 1.3;
}

    .atacarejo-aviso b {
        font-weight: 800;
    }

/* ════════════════════════════════════════════
   VIEW DE PRODUTO (bloco de preço)
   ════════════════════════════════════════════ */

/* ── Selo exclusivo (view) ── */
.v-exclusivo {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--brand-dark); color: #fff;
    border-radius: 99px; padding: 4px 12px;
    font-size: 12px; font-weight: 700; margin-top: 10px; width: fit-content;
}

/* ── Cartão do clube (view) ── */
.v-clube-card {
    margin-top: 14px;
    background: var(--clube-light); border: 1.5px solid var(--clube);
    border-radius: var(--radius-md); padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
}
.v-clube-logo {
    width: 42px; height: 42px; border-radius: 99px; flex-shrink: 0;
    object-fit: cover; background: var(--clube);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; font-weight: 700;
}
.v-clube-info { flex: 1; min-width: 0; }
.v-clube-label { font-size: 12px; font-weight: 600; color: var(--clube); }
.v-clube-nome  { font-size: 11px; color: var(--muted); }
.v-clube-valor { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; color: var(--clube); }

/* Logo do clube sobre a foto na view (canto inf esq, maior) */
.galeria-clube-selo {
    position: absolute; bottom: 16px; left: 16px; z-index: 3;
    display: flex; align-items: center; gap: 8px;
    background: var(--white); border: 1.5px solid var(--clube);
    border-radius: 99px; padding: 6px 14px 6px 6px;
    font-size: 16px; font-weight: 700; color: var(--clube);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.galeria-clube-selo img, .galeria-clube-selo .gcs-logo {
    width: 64px; height: 64px; border-radius: 99px; flex-shrink: 0;
    object-fit: cover; background: var(--clube);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
}

/* ── Cartão do atacarejo (view) ── */
.v-atacarejo-card {
    margin-top: 14px;
    background: var(--atacarejo-light); border: 1.5px dashed var(--atacarejo);
    border-radius: var(--radius-md); padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
}
.v-atacarejo-icon { font-size: 26px; flex-shrink: 0; }
.v-atacarejo-info { flex: 1; }
.v-atacarejo-titulo { font-size: 14px; font-weight: 800; color: var(--atacarejo); }
.v-atacarejo-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.v-atacarejo-desc b { color: var(--atacarejo); }

/* Quando a quantidade atinge o atacarejo, o preço principal ganha destaque laranja */
.preco-atual.atacarejo-ativo { color: var(--atacarejo); transition: color .2s; }