/* Cyclone Hosting V5 - Clean Final Pricing Polish
   Load this file AFTER your existing plan CSS files.
*/

.v5-plans{
    overflow:visible !important;
}

.v5-plans .v5-plan-grid{
    width:min(1180px,100%) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:28px !important;
    overflow:visible !important;
    padding-top:24px !important;
}

.v5-plans .v5-plan-card{
    width:350px !important;
    max-width:350px !important;
    min-height:610px !important;
    display:flex !important;
    flex-direction:column !important;
    border:1px solid rgba(126,218,255,.18) !important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
        radial-gradient(circle at 50% 0%,rgba(19,223,255,.12),transparent 36%) !important;
    box-shadow:
        0 28px 80px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.v5-plans .v5-plan-card.featured{
    width:372px !important;
    max-width:372px !important;
    min-height:635px !important;
    transform:translateY(-22px) scale(1.025) !important;
    z-index:20 !important;
    border:2px solid rgba(255,216,77,.82) !important;
    background:
        linear-gradient(180deg,rgba(255,216,77,.11),rgba(255,255,255,.05)),
        radial-gradient(circle at 50% 0%,rgba(255,216,77,.18),transparent 38%) !important;
    box-shadow:
        0 0 28px rgba(255,216,77,.30),
        0 34px 90px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.v5-plans .v5-plan-card.featured:hover{
    transform:translateY(-28px) scale(1.035) !important;
}

.v5-plans .v5-plan-icon{
    width:64px !important;
    height:64px !important;
    font-size:31px !important;
    border-radius:20px !important;
}

.v5-plans .v5-plan-card.featured .v5-plan-icon{
    background:rgba(255,216,77,.14) !important;
    border-color:rgba(255,216,77,.34) !important;
    box-shadow:0 0 28px rgba(255,216,77,.24) !important;
}

.v5-plans .v5-plan-badge{
    font-size:12px !important;
    padding:7px 13px !important;
}

.v5-plans .v5-plan-card.featured .v5-plan-badge{
    font-size:14px !important;
    padding:9px 18px !important;
    min-height:38px !important;
    box-shadow:0 0 28px rgba(255,216,77,.50) !important;
}

.v5-plans .v5-plan-card h3{
    font-size:30px !important;
}

.v5-plans .v5-plan-card.featured h3{
    font-size:35px !important;
}

.v5-plans .v5-plan-card.featured .v5-price strong{
    font-size:60px !important;
}

.v5-plans .v5-plan-card ul{
    min-height:184px !important;
}

.v5-plans .v5-plan-btn{
    margin-top:auto !important;
    box-shadow:
        0 0 18px rgba(19,223,255,.16),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.v5-plans .v5-plan-card:not(.featured) .v5-plan-btn{
    border-color:rgba(126,218,255,.26) !important;
    background:rgba(255,255,255,.065) !important;
}

.v5-plans .v5-plan-card:not(.featured) .v5-plan-btn:hover{
    border-color:rgba(19,223,255,.42) !important;
    box-shadow:0 0 26px rgba(19,223,255,.24) !important;
}

.v5-plans .v5-plan-card.featured .v5-plan-btn{
    min-height:56px !important;
    font-size:16px !important;
    color:#111827 !important;
    background:linear-gradient(135deg,#ffef4a,#ffc400) !important;
    box-shadow:0 0 34px rgba(255,216,77,.45) !important;
}

@media(max-width:1100px){
    .v5-plans .v5-plan-grid{
        padding-top:0 !important;
    }

    .v5-plans .v5-plan-card,
    .v5-plans .v5-plan-card.featured{
        width:340px !important;
        max-width:340px !important;
        min-height:610px !important;
        transform:none !important;
    }

    .v5-plans .v5-plan-card.featured:hover{
        transform:translateY(-8px) !important;
    }
}

@media(max-width:760px){
    .v5-plans .v5-plan-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:min(420px,100%) !important;
        gap:18px !important;
    }

    .v5-plans .v5-plan-card,
    .v5-plans .v5-plan-card.featured{
        width:100% !important;
        max-width:100% !important;
        min-height:auto !important;
    }

    .v5-plans .v5-plan-card ul{
        min-height:auto !important;
    }
}