/* ============================================================
   1. CORE VARIABLES & BASE RESET
   ============================================================ */
:root {
    --dripbox-primary: #0073e6;
    --dripbox-secondary: #ff7b00;
    --dripbox-success: #2fb44a;
    --dripbox-purple: #6c63ff;
    --dripbox-danger: #d82a2a;
    --dripbox-text: #111;
    --dripbox-muted: #555;
    --dripbox-radius: 8px;
    --dripbox-shadow: 0 4px 14px rgba(0,0,0,0.08);
    --dripbox-transition: all 0.2s ease;
    --dripbox-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Reset Global --- */
.dripbox-banner-v2,
.dripbox5-lite-banner,

/* LIMITA LARGURA DOS TEMPLATES QUE NÃO USAM MINI-AFFILIATE-BOX */
.dripbox-banner-v2,
.dripbox5-lite-banner {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Container Base --- */
.dripbox-container {
    position: relative;
}

/* --- Disclaimer (Global) --- */
.mini-affiliate-disclaimer {
    font-size: 13px;
    margin-top: 20px;
    color: var(--dripbox-muted, #999);
    font-style: italic;
}

/* --- Animação Badge (Global) --- */
@keyframes badgeIn {
    0% { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   4. LAYOUT 3: BANNER V2 / STARTER BOX
   ============================================================ */

/* --- 4.1 Container Principal --- */
.dripbox-banner-v2,
.dripbox5-lite-banner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) 220px !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 900px !important;
    background: #fff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
    padding: 34px 28px 26px 28px !important;
    margin: 36px auto 28px auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* --- 4.2 Badge Flutuante --- */
.dbx-badge-floating,
.dripbox5-lite-banner .dripbox5-badge {
    position: absolute !important;
    top: -18px !important;
    left: -10px !important;
    background: linear-gradient(135deg, #d82a2a 0%, #b91c1c 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.7px !important;
    white-space: nowrap !important;
    padding: 11px 22px !important;
    border-radius: 7px !important;
    box-shadow: 0 8px 18px rgba(216,42,42,0.38) !important;
    z-index: 20 !important;
    line-height: 1 !important;
}

/* --- 4.3 Colunas --- */
.banner-left-col,
.dripbox5-lite-banner .dripbox5-image {
    width: 170px !important;
    min-width: 170px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.banner-center-col,
.dripbox5-lite-banner .dripbox5-content {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.banner-right-col,
.dripbox5-lite-banner .dripbox5-buttons {
    width: 220px !important;
    min-width: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* --- 4.4 Imagem --- */
.banner-img-main,
.dripbox5-lite-banner .dripbox5-image img {
    width: 150px !important;
    max-width: 150px !important;
    max-height: 135px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important;
}

/* --- 4.5 Tipografia --- */
.banner-heading,
.dripbox5-lite-banner .dripbox5-content h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
    color: #111 !important;
    line-height: 1.22 !important;
}

.banner-desc,
.dripbox5-lite-banner .dripbox5-description {
    font-size: 14px !important;
    color: #444 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.5 !important;
}

.dripbox5-lite-banner .dripbox5-description p {
    margin: 0 !important;
}

/* --- 4.6 Reviews --- */
.banner-reviews-block,
.dripbox5-lite-banner .dripbox5-rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
}

.review-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
}

.star-row {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.score-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffb400 !important;
}

/* --- 4.7 Botões --- */
.dripbox-banner-v2 .btn-check-price,
.dripbox5-lite-banner .dripbox5-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: 0 5px 12px rgba(0,0,0,0.16) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    box-sizing: border-box !important;
}

.dripbox-banner-v2 .btn-check-price::before,
.dripbox5-lite-banner .dripbox5-button::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    margin-right: 7px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h8.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") no-repeat center !important;
    background-size: contain !important;
}

.dripbox-banner-v2 .btn-check-price:hover,
.dripbox5-lite-banner .dripbox5-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.22) !important;
}

/* --- 4.8 Responsivo para áreas médias, sidebar, content estreito --- */
@media (max-width: 820px) {
    .dripbox-banner-v2,
    .dripbox5-lite-banner {
        grid-template-columns: 140px minmax(0, 1fr) !important;
        grid-template-areas:
            "image content"
            "buttons buttons" !important;
        gap: 18px !important;
        padding: 34px 22px 24px 22px !important;
    }

    .banner-left-col,
    .dripbox5-lite-banner .dripbox5-image {
        grid-area: image !important;
        width: 140px !important;
        min-width: 140px !important;
    }

    .banner-center-col,
    .dripbox5-lite-banner .dripbox5-content {
        grid-area: content !important;
    }

    .banner-right-col,
    .dripbox5-lite-banner .dripbox5-buttons {
        grid-area: buttons !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 10px !important;
    }

    .banner-img-main,
    .dripbox5-lite-banner .dripbox5-image img {
        width: 130px !important;
        max-width: 130px !important;
        max-height: 120px !important;
    }
}

/* --- 4.9 Mobile --- */
@media (max-width: 600px) {
    .dripbox-banner-v2,
    .dripbox5-lite-banner {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 42px 16px 22px 16px !important;
        margin: 34px auto 24px auto !important;
    }

    .dbx-badge-floating,
    .dripbox5-lite-banner .dripbox5-badge {
        left: 50% !important;
        top: -16px !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        padding: 10px 18px !important;
        max-width: calc(100% - 24px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .banner-left-col,
    .banner-center-col,
    .banner-right-col,
    .dripbox5-lite-banner .dripbox5-image,
    .dripbox5-lite-banner .dripbox5-content,
    .dripbox5-lite-banner .dripbox5-buttons {
        width: 100% !important;
        min-width: 0 !important;
    }

    .banner-img-main,
    .dripbox5-lite-banner .dripbox5-image img {
        width: 170px !important;
        max-width: 170px !important;
        max-height: 150px !important;
    }

    .banner-heading,
    .dripbox5-lite-banner .dripbox5-content h3 {
        font-size: 21px !important;
    }

    .banner-reviews-block,
    .dripbox5-lite-banner .dripbox5-rating {
        justify-content: center !important;
    }

    .banner-right-col,
    .dripbox5-lite-banner .dripbox5-buttons {
        display: flex !important;
        flex-direction: column !important;
    }

    .dripbox-banner-v2 .btn-check-price,
    .dripbox5-lite-banner .dripbox5-button {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   6. PADRONIZAÇÃO VISUAL GLOBAL
   ============================================================ */

/* --- Estilo Unificado das Imagens --- */
.mini-affiliate-img-wrapper img,
.dripbox-horizontal .dripbox-left img,
.dripbox-banner-v2 .banner-img-main,
.dripbox-mag .mag-image img, img.dripbox-product-image {
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- Hover Unificado --- */
.mini-affiliate-img-wrapper img:hover,
.dripbox-horizontal .dripbox-left img:hover,
.dripbox-banner-v2 .banner-img-main:hover,
.dripbox-mag .mag-image img:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06) !important;
}



/* ============================================================
   7. RESPONSIVE - MOBILE
   ============================================================ */

/* --- 7.1 Mobile Geral (max-width: 768px) --- */
@media (max-width: 768px) {


    /* LAYOUT 3: BANNER V2 */
    .dripbox-banner-v2 {
flex-direction: column;
        text-align: center;
        /* Reduzi paddings laterais aqui também */
        padding: 40px 12px 25px 12px !important;
    }

    .dbx-badge-floating {
        left: 50%;
        transform: translateX(-50%);
        top: -15px;
    }

    .banner-left-col,
    .banner-center-col,
    .banner-right-col {
        width: 100%;
        flex: auto;
    }

    .banner-reviews-block {
        justify-content: center;
    }
}

/* --- 7.2 Mobile Pequeno (max-width: 600px) --- */
@media (max-width: 600px) {
    .mini-affiliate-box {
        padding: 15px;
    }

    .mini-affiliate-buttons a {
        flex: 1 1 100%;
    }
}