/* ==========================================================================
   advertise.css - 2026 Master Version (Enhanced with Badges)
   ========================================================================== */

.advertise-container {
    margin-top: 40px; /* Increased to allow space for top badges */
}

/* 1. PROMO BANNER */
.promo-banner {
    background: linear-gradient(135deg, #3f21b5, #7c3aed);
    color: white;
    padding: 25px 40px;
    border-radius: 20px;
    margin-bottom: 60px; /* More space before the grid */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 25px rgba(63, 33, 181, 0.2);
}

.promo-content h2 { color: #fff; margin-bottom: 5px; font-size: 24px; }
.promo-content p { color: rgba(255,255,255,0.9); font-size: 15px; }

.btn-promo-white {
    background: #fff;
    color: #3f21b5 !important;
    padding: 12px 25px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
}

/* 2. THE PRICING GRID */
.pricing-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: stretch;
    padding-top: 20px;
}

/* 3. THE PRICE CARDS */
.price-card {
    position: relative; /* REQUIRED for the badges to stay inside/on the card */
    background: #ffffff;
    border-radius: 30px;
    padding: 45px 25px 35px; /* Added top padding to accommodate badge */
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    overflow: visible; /* Allows badges to pop out of the border */
}

/* SPECIAL CARD: GOLD POPULAR */
.popular-choice {
    border: 2.5px solid #f59e0b !important; /* Gold Border */
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.15);
}

.popular-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b; /* Gold Color */
    color: #fff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    white-space: nowrap;
}

/* SPECIAL CARD: PLATINUM SAVINGS */
.savings-choice .save-badge {
    position: absolute;
    top: -12px;
    right: -10px;
    background: #ef4444; /* Alert Red */
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    transform: rotate(12deg);
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
    z-index: 11;
}

.price-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Gold hover override to keep the scale */
.popular-choice:hover {
    transform: translateY(-10px) scale(1.05);
}

/* Typography & Hierarchy */
.tier-name {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #bbb;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* BIG Monthly Price */
.price-amount {
    font-size: 38px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 5px;
}

.price-amount span {
    font-size: 16px;
    color: #94a3b8;
    font-weight: 600;
}

/* Package Length Label */
.price-duration {
    font-size: 14px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 15px;
}

/* SMALL Total Cost */
.total-package-cost {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1.5px solid #f8fafc;
    margin-bottom: 20px;
}

/* 5. TIER-SPECIFIC BUTTONS */
.btn-primary {
    width: 100% !important;
    padding: 14px 0 !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
    text-align: center;
}

/* Bronze */
.pricing-matrix .price-card:nth-child(1) .btn-primary { background-color: #cd7f32 !important; color: #fff !important; }
/* Silver */
.featured-tier { border: 2px solid #eeebff; background: #fdfdff; } 
.featured-tier .btn-primary { background-color: #3f21b5 !important; color: #fff !important; }
.featured-tier .tier-name { color: #3f21b5; }
/* Gold */
.popular-choice .btn-primary { background-color: #f59e0b !important; color: #fff !important; }
.popular-choice .tier-name { color: #f59e0b; }
/* Platinum */
.platinum-tier .btn-primary { background-color: #1a1a1a !important; color: #fff !important; }

/* 6. BENTO UPSELL BOX */
.featured-upsell-bento {
    background: #111;
    color: white;
    padding: 35px 50px;
    border-radius: 30px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upsell-text h3 { font-size: 22px; color: #fff; margin-bottom: 5px; font-weight: 800; }
.upsell-text p { color: #888; font-size: 14px; }

.btn-upsell {
    background: #fff;
    color: #000 !important;
    padding: 14px 35px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
}

/* 7. RESPONSIVE */
@media (max-width: 1200px) {
    .pricing-matrix { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .popular-choice { transform: scale(1); } /* Disable scale on mobile to prevent overlapping */
}

@media (max-width: 700px) {
    .pricing-matrix { grid-template-columns: 1fr; }
    .promo-banner, .featured-upsell-bento { 
        flex-direction: column; 
        text-align: center; 
        padding: 30px;
        gap: 20px;
    }
}

/* --- Partnership Section Styles --- */
.partnership-section {
    background: #ffffff;
    padding: 50px;
    border-radius: 35px;
    border: 1px solid #f0f0f0;
    margin-bottom: 50px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.02);
    text-align: center;
}

.partnership-title { font-size: 32px; font-weight: 900; color: #1a1a1a; margin-bottom: 5px; }
.partnership-tagline { font-size: 18px; font-weight: 700; color: #3f21b5; margin-bottom: 25px; }
.partnership-intro { font-size: 16px; color: #555; line-height: 1.7; max-width: 900px; margin: 0 auto 35px; }
.partnership-benefits {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px;
    max-width: 800px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.partnership-benefits li { font-size: 14.5px; color: #444; line-height: 1.5; padding-left: 25px; position: relative; }
.partnership-benefits li::before { content: '•'; color: #3f21b5; font-size: 24px; position: absolute; left: 0; top: -5px; }
.partnership-footer { border-top: 1px solid #f9f9f9; padding-top: 30px; }
.partnership-footer p { font-size: 16px; color: #1a1a1a; font-weight: 700; margin-bottom: 15px; }
.cta-link-red { font-size: 20px; font-weight: 900; color: #ef4444; text-decoration: none; border-bottom: 2px solid transparent; transition: 0.3s; }
.cta-link-red:hover { color: #b91c1c; border-bottom-color: #b91c1c; }

@media (max-width: 800px) {
    .partnership-benefits { grid-template-columns: 1fr; }
    .partnership-section { padding: 30px 20px; }
}