/* Cyclone Hosting V5 - Final Homepage 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:34px !important;
}

.v5-plans .v5-plan-card{
    width:350px !important;
    max-width:350px !important;
    min-height:620px !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:380px !important;
    max-width:380px !important;
    min-height:670px !important;
    transform:translateY(-28px) scale(1.035) !important;
    z-index:20 !important;
    border:2px solid rgba(255,216,77,.82) !important;
    background:
        linear-gradient(180deg,rgba(255,216,77,.12),rgba(255,255,255,.05)),
        radial-gradient(circle at 50% 0%,rgba(255,216,77,.20),transparent 38%) !important;
    box-shadow:
        0 0 30px rgba(255,216,77,.34),
        0 36px 100px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

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

.v5-plans .v5-plan-icon{
    width:56px !important;
    height:56px !important;
    font-size:25px !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:36px !important;
}

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

.v5-featured-note{
    margin:-8px 0 18px !important;
    padding:10px 12px !important;
    border-radius:16px !important;
    color:#fff4b8 !important;
    font-weight:900 !important;
    background:rgba(255,216,77,.10) !important;
    border:1px solid rgba(255,216,77,.25) !important;
    text-align:center !important;
    font-size:13px !important;
}

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

.v5-plans .v5-plan-btn{
    margin-top:auto !important;
}

.v5-plans .v5-plan-card.featured .v5-plan-btn{
    min-height:58px !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:620px !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;
    }
}