/* ==================================================
   SUBSCRIPTION CENTER
================================================== */

.fh-subscription-wrapper{
    margin-top:30px;
}


/* ==================================================
   HEADER
================================================== */

.fh-subscription-header{
    text-align:center;
    margin-bottom:35px;
}

.fh-subscription-header h2{
    font-size:48px;
    font-weight:900;
    color:#fff;
    margin-bottom:10px;
}

.fh-subscription-header p{

    color:#cfcfcf;
    max-width:900px;
    margin:0 auto;
    line-height:1.6;
    font-size:18px;

}

.fh-subscription-header::after{

    content:"";
    display:block;
    width:180px;
    height:3px;
    margin:20px auto 0;
    background:#f0c33c;
    border-radius:50px;

}


/* ==================================================
   LAYOUT
================================================== */

.fh-subscription-center{

    display:flex;
    gap:25px;
    align-items:flex-start;

}


/* ==================================================
   BANNER LATERALE
================================================== */

.fh-subscription-banner{

    min-height:800px;
    width:240px;
    flex-shrink:0;

    background:#111;
    border:1px solid #2d2d2d;
    border-radius:20px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

}


.fh-banner-content{

    padding:22px;

}


.fh-banner-content h3{

    margin:0 0 15px;

    color:#f0c33c;

    font-size:22px;
    font-weight:800;
    text-align:center;

}


.fh-banner-slogan{

    text-align:center;

    color:#fff;

    font-size:20px;
    font-weight:800;

    margin-bottom:20px;

}


.fh-banner-features{

    list-style:none;
    margin:0;
    padding:0;

}


.fh-banner-features li{

    color:#d8d8d8;

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    font-size:14px;

}



/* ==================================================
   TITOLI PIANI
================================================== */

.fh-plan-title{

    width:100%;

    text-align:center;

    color:#d8b24b;

    font-size:18px;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:12px;

}



/* ==========================================
   COLORI TITOLI UGUALI AI PULSANTI
========================================== */

.fh-plan.campione .fh-plan-title{
    color:#e53935;
}

.fh-plan.stratega .fh-plan-title{
    color:#f2c230;
}

.fh-plan.leggenda .fh-plan-title{
    color:#2f80ed;
}

.fh-plan.collezione .fh-plan-title{
    color:#27ae60;
}



/* ==================================================
   FOOTER
================================================== */


.fh-subscription-footer{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:30px;

}


.fh-footer-item{

    background:#111;

    border:1px solid #2d2d2d;

    border-radius:16px;

    padding:15px 20px;

    text-align:center;

}


.fh-footer-item strong{

    display:block;

    color:#fff;

    margin-bottom:6px;

}



/* ==================================================
   HIGHLIGHT REGOLAMENTO
================================================== */


.fh-plan-highlight{

    margin-top:12px;

    padding:12px;

    background:#151515;

    border:1px solid #2f2f2f;

    border-radius:14px;

}


.fh-highlight-badge{

    text-align:center;

    font-size:16px !important;

    font-weight:800;

    text-transform:uppercase;

    color:#f0c33c !important;

}


/* ==================================================
   REWARDS MENU
================================================== */

.fh-rewards-card{

    background:#111;

    border:1px solid #2d2d2d;

    border-radius:18px;

    padding:20px;

}

.fh-rewards-title{

    color:#f0c33c;

    font-size:20px;

    font-weight:800;

    text-transform:uppercase;

    text-align:center;

}

.fh-rewards-divider{

    width:100%;

    height:1px;

    background:#2f2f2f;

    margin:18px 0;

}

.fh-rewards-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.fh-reward-item{

    position:relative;

    background:#181818;

    border:1px solid #2b2b2b;

    border-radius:14px;

    padding:16px 18px;

    cursor:pointer;

    transition:.25s;

    overflow:hidden;

}

.fh-reward-item:hover{

    border-color:#f0c33c;

    background:#232323;

    transform:translateX(4px);

}

/* ==========================
   CARD ATTIVA
========================== */

.fh-reward-item.active{

    background:#242424;

    border-color:#f0c33c;

    box-shadow:0 8px 20px rgba(0,0,0,.30);

}

.fh-reward-item.active::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

    background:#f0c33c;

}

.fh-reward-name{

    color:#f0c33c;

    font-size:20px;

    font-weight:800;

}

.fh-reward-desc{

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    margin-top:6px;

    line-height:1.4;

}




/* ==================================================
   RESPONSIVE
================================================== */


@media (max-width:1400px){

    .fh-subscription-center{

        flex-direction:column;

    }

}


@media (max-width:768px){

    .fh-subscription-header h2{

        font-size:30px;

    }

}
@media (max-width:768px){
    .fh-subscription-footer{
        grid-template-columns:1fr;
    }
}