/* =========================================================
   TOBWENE MONETIZATION
   Wallet + Premium
   Bluehost-safe Flexbox version
   ========================================================= */

.money-page {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 120px 4vw 90px;
}

.money-hero {
    padding: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    background:
        radial-gradient(circle at 88% 10%,rgba(255,59,48,.18),transparent 30%),
        #101218;
}

.money-premium-hero {
    min-height: 260px;
}

.money-kicker {
    color: #ff625a;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.money-hero h1 {
    margin: 7px 0 10px;
    font-size: clamp(2.6rem,5vw,5rem);
    line-height: .96;
    letter-spacing: -.06em;
}

.money-hero p,
.money-active-plan p,
.money-package-card p {
    margin: 0;
    color: #a5a7af;
    line-height: 1.55;
}

.money-section {
    margin-top: 34px;
}

.money-section-head {
    margin-bottom: 15px;
}

.money-section-head h2 {
    margin: 5px 0 0;
    font-size: 2rem;
    letter-spacing: -.04em;
}

.money-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.money-package-card {
    flex: 1 1 250px;
    min-width: 230px;
    max-width: 360px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: #101218;
}

.money-package-card > span {
    color: #ff625a;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.money-package-card strong {
    font-size: 1.65rem;
    color: #fff;
}

.money-package-card h3 {
    margin: 5px 0 0;
    font-size: 1.35rem;
    color: #fff;
}

.money-package-card small {
    color: #7d8088;
    line-height: 1.4;
}

.money-primary-btn,
.money-secondary-btn {
    min-height: 46px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 800;
    font-size: .82rem;
}

.money-primary-btn {
    margin-top: 8px;
    border: 0;
    background: linear-gradient(135deg,#ff443a,#d51b13);
    color: #fff;
}

.money-primary-btn[disabled] {
    opacity: .52;
    cursor: not-allowed;
}

.money-secondary-btn {
    border: 1px solid rgba(255,255,255,.10);
    background: #171a20;
    color: #fff;
}

.money-history {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: #0f1116;
}

.money-history-row {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.money-history-row:last-child {
    border-bottom: 0;
}

.money-history-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.money-history-row strong {
    color: #fff;
    font-size: .88rem;
}

.money-history-row small {
    color: #777b83;
    font-size: .72rem;
}

.money-history-row > span {
    font-weight: 900;
}

.money-positive {
    color: #69dda9;
}

.money-negative {
    color: #ff6c64;
}

.money-empty {
    padding: 28px;
    border: 1px dashed rgba(255,255,255,.09);
    border-radius: 18px;
    color: #858991;
}

.money-active-plan {
    margin-top: 22px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 80% 20%,rgba(122,85,255,.15),transparent 30%),
        #111319;
}

.money-active-plan h2 {
    margin: 7px 0;
    font-size: 2rem;
}

@media (max-width: 720px) {
    .money-page {
        padding: 95px 18px 100px;
    }

    .money-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .money-package-card {
        max-width: none;
        min-width: 100%;
    }
}