/* billing.css - Styles specific to the billing page */
body { background: #18191c; }
.billing-section { max-width:1100px; margin:40px auto; padding:40px 32px; background:#23272f; border-radius:10px; box-shadow:0 2px 16px rgba(0,0,0,0.10); color:#e3e6ed; }
.billing-title { color:#fff; font-size:2.2rem; font-weight:700; text-align:center; margin-bottom:0.5em; }
.billing-tier { font-size:1.3em; font-weight:600; margin-top:2.5em; margin-bottom:1.2em; color:#7ee8fa; display:flex; align-items:center; gap:10px; }
.billing-tier-icon { font-size:2em; }
.billing-tier-desc { color:#b2c2e0; font-size:1.08em; margin-bottom:1.5em; }
.tier-card {
    transition: border 0.3s cubic-bezier(.4,0,.2,1), color 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1);
    border: 2px solid #262a32;
    color: #b2c2e0;
    box-shadow: none;
    cursor: pointer;
    background: #23272f;
    padding: 16px 32px;
    font-size: 1.15em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px;
    border-radius: 12px;
}
.tier-card.active {
    border: 2px solid #4a90e2 !important;
    color: #7ee8fa !important;
    box-shadow: 0 2px 12px rgba(74,144,226,0.12);
    background: #23272f;
}
.plan-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-bottom: 2em;
    max-width: 1100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
}
@media (max-width:900px) { .plan-grid { grid-template-columns:1fr; } }
.plan-card {
    background: #262a32;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 28px 22px;
    color: #e3e6ed;
    position: relative;
    max-width: 320px;
    min-width: 260px;
    width: 100%;
    margin: 0;
}
@media (max-width: 900px) {
    .plan-card {
        max-width: 95vw;
        min-width: 0;
    }
}
.plan-name { font-size:1.25em; font-weight:600; color:#7ee8fa; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.plan-price { font-size:1.15em; color:#fff; font-weight:700; margin-bottom:10px; }
.plan-specs { font-size:1.05em; color:#b2c2e0; margin-bottom:10px; }
.plan-billing { font-size:0.98em; color:#e3e6ed; margin-bottom:8px; }
.plan-billing span { display:block; margin-bottom:2px; }
.plan-card .plan-icon { font-size:1.3em; margin-right:6px; }
#budget-info, #premium-info, #budget-plans, #premium-plans {
    transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
    opacity: 1;
    pointer-events: auto;
    display: block;
}
#premium-plans[style*="display: none"], #premium-info[style*="display: none"] {
    display: none !important;
}
#budget-plans[style*="display: none"], #budget-info[style*="display: none"] {
    display: none !important;
}
.fade-out {
    opacity: 0 !important;
    pointer-events: none !important;
}
.fade-in {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Additional Mobile Styles */
@media (max-width: 768px) {
    .billing-section {
        margin: 20px auto;
        padding: 20px 16px;
        border-radius: 8px;
    }
    
    .billing-title {
        font-size: 1.6rem !important;
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    .tier-card {
        padding: 12px 20px !important;
        font-size: 1rem !important;
        margin: 0 4px !important;
        min-width: auto;
        flex: 1;
    }
    
    .plan-grid {
        gap: 20px !important;
        padding: 0 10px;
    }
    
    .plan-card {
        padding: 20px 16px !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    .plan-name {
        font-size: 1.1rem !important;
    }
    
    .plan-price {
        font-size: 1.4rem !important;
    }
    
    .plan-specs {
        font-size: 0.95rem !important;
    }
    
    .plan-billing {
        font-size: 0.9rem !important;
    }
    
    /* Order buttons mobile */
    button[onclick="orderNow()"] {
        width: 100% !important;
        max-width: 300px !important;
        margin: 1rem auto !important;
        display: block !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
    }
    
    /* Tier info sections */
    #budget-info, #premium-info {
        text-align: center;
        margin: 1.5rem 0;
    }
    
    #budget-info span, #premium-info span {
        padding: 12px 24px !important;
        font-size: 1rem !important;
        display: block !important;
        line-height: 1.4;
    }
    
    /* Tier selection mobile */
    div[style*="display:flex; justify-content:center"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
}