/* ============================================================
   ONEMUNDO - BANNER MEMBERSHIP - TODOS OS NÍVEIS v2
   Bronze | Silver | Gold | Platinum | Diamond
   Aplica em TODAS as camadas: banner, wrap, content
   Instalado em: 2025-12-14 05:58:27
   ============================================================ */

/* ============================================================
   🥉 BRONZE - Todas as camadas
   ============================================================ */
#om-membership-banner.level-bronze,
.level-bronze#om-membership-banner {
    background: linear-gradient(135deg, #1a1208 0%, #2d1f0f 25%, #3d2914 50%, #2d1f0f 75%, #1a1208 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-bronze .om-mb-wrap,
.level-bronze .om-mb-wrap {
    background: linear-gradient(135deg, #1a1208 0%, #2d1f0f 25%, #3d2914 50%, #2d1f0f 75%, #1a1208 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-bronze .om-mb-content,
.level-bronze .om-mb-content {
    background: linear-gradient(135deg, #1a1208 0%, #2d1f0f 25%, #3d2914 50%, #2d1f0f 75%, #1a1208 100%) !important;
    border: 1px solid rgba(205, 127, 50, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(205, 127, 50, 0.2) !important;
}

#om-membership-banner.level-bronze .om-mb-title span,
.level-bronze .om-mb-title span {
    color: #CD7F32 !important;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.5) !important;
}

.level-bronze .om-mb-cta {
    background: linear-gradient(135deg, #CD7F32, #B8860B) !important;
    color: #1a1208 !important;
}

/* ============================================================
   🥈 SILVER - Todas as camadas
   ============================================================ */
#om-membership-banner.level-silver,
.level-silver#om-membership-banner {
    background: linear-gradient(135deg, #1a1a1f 0%, #252530 25%, #2a2a35 50%, #252530 75%, #1a1a1f 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-silver .om-mb-wrap,
.level-silver .om-mb-wrap {
    background: linear-gradient(135deg, #1a1a1f 0%, #252530 25%, #2a2a35 50%, #252530 75%, #1a1a1f 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-silver .om-mb-content,
.level-silver .om-mb-content {
    background: linear-gradient(135deg, #1a1a1f 0%, #252530 25%, #2a2a35 50%, #252530 75%, #1a1a1f 100%) !important;
    border: 1px solid rgba(192, 192, 192, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(192, 192, 192, 0.2) !important;
}

#om-membership-banner.level-silver .om-mb-title span,
.level-silver .om-mb-title span {
    color: #C0C0C0 !important;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.5) !important;
}

.level-silver .om-mb-cta {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8) !important;
    color: #1a1a1f !important;
}

/* ============================================================
   🥇 GOLD - Todas as camadas
   ============================================================ */
#om-membership-banner.level-gold,
.level-gold#om-membership-banner {
    background: linear-gradient(135deg, #252008 0%, #3d350f 25%, #504515 50%, #3d350f 75%, #252008 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-gold .om-mb-wrap,
.level-gold .om-mb-wrap {
    background: linear-gradient(135deg, #252008 0%, #3d350f 25%, #504515 50%, #3d350f 75%, #252008 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-gold .om-mb-content,
.level-gold .om-mb-content {
    background: linear-gradient(135deg, #252008 0%, #3d350f 25%, #504515 50%, #3d350f 75%, #252008 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 215, 0, 0.2) !important;
}

#om-membership-banner.level-gold .om-mb-title span,
.level-gold .om-mb-title span {
    color: #FFD700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

.level-gold .om-mb-cta {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #1a1508 !important;
}

/* ============================================================
   💠 PLATINUM - Todas as camadas
   ============================================================ */
#om-membership-banner.level-platinum,
.level-platinum#om-membership-banner {
    background: linear-gradient(135deg, #1a1a20 0%, #252530 25%, #2f2f3a 50%, #252530 75%, #1a1a20 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-platinum .om-mb-wrap,
.level-platinum .om-mb-wrap {
    background: linear-gradient(135deg, #1a1a20 0%, #252530 25%, #2f2f3a 50%, #252530 75%, #1a1a20 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-platinum .om-mb-content,
.level-platinum .om-mb-content {
    background: linear-gradient(135deg, #1a1a20 0%, #252530 25%, #2f2f3a 50%, #252530 75%, #1a1a20 100%) !important;
    border: 1px solid rgba(229, 228, 226, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(229, 228, 226, 0.2) !important;
}

#om-membership-banner.level-platinum .om-mb-title span,
.level-platinum .om-mb-title span {
    color: #E5E4E2 !important;
    text-shadow: 0 0 10px rgba(229, 228, 226, 0.5) !important;
}

.level-platinum .om-mb-cta {
    background: linear-gradient(135deg, #E5E4E2, #C0C0C0) !important;
    color: #1a1a20 !important;
}

/* ============================================================
   💎 DIAMOND - Todas as camadas
   ============================================================ */
#om-membership-banner.level-diamond,
.level-diamond#om-membership-banner {
    background: linear-gradient(135deg, #0a1520 0%, #152030 25%, #1a2535 50%, #152030 75%, #0a1520 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-diamond .om-mb-wrap,
.level-diamond .om-mb-wrap {
    background: linear-gradient(135deg, #0a1520 0%, #152030 25%, #1a2535 50%, #152030 75%, #0a1520 100%) !important;
    border-radius: 16px !important;
}

#om-membership-banner.level-diamond .om-mb-content,
.level-diamond .om-mb-content {
    background: linear-gradient(135deg, #0a1520 0%, #152030 25%, #1a2535 50%, #152030 75%, #0a1520 100%) !important;
    border: 1px solid rgba(185, 242, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(185, 242, 255, 0.2) !important;
}

#om-membership-banner.level-diamond .om-mb-title span,
.level-diamond .om-mb-title span {
    color: #B9F2FF !important;
    text-shadow: 0 0 15px rgba(185, 242, 255, 0.6) !important;
}

.level-diamond .om-mb-cta {
    background: linear-gradient(135deg, #B9F2FF, #87CEEB) !important;
    color: #0a1520 !important;
}

/* ============================================================
   ESTILOS COMUNS
   ============================================================ */

/* Textos */
#om-membership-banner .om-mb-title,
.om-mb-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#om-membership-banner .om-mb-subtitle,
.om-mb-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Badges */
#om-membership-banner .om-mb-benefit,
.om-mb-benefit {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
}

/* Botão CTA */
#om-membership-banner .om-mb-cta,
.om-mb-cta {
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

#om-membership-banner .om-mb-cta:hover,
.om-mb-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    #om-membership-banner .om-mb-content,
    .om-mb-content {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 16px !important;
        gap: 12px !important;
    }
    
    #om-membership-banner .om-mb-benefits,
    .om-mb-benefits {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    #om-membership-banner .om-mb-cta,
    .om-mb-cta {
        width: 100% !important;
        text-align: center !important;
    }
}