/* ==========================================================
WIZORA PRICING
========================================================== */

.wizora-pricing{

    position:relative;
    overflow:hidden;

    background:#ffffff;

    font-family:var(--body-font);

    color:var(--text-color);

}


.wizora-pricing *{

    box-sizing:border-box;

}


/* ==========================================================
INNER
========================================================== */

.pricing-inner{

    max-width:1300px;

    margin:auto;

}


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

.pricing-header{

    text-align:center;

    margin-bottom:70px;

}


.pricing-title{

    margin:0 0 18px;

    font-size:clamp(34px,5vw,54px);

    line-height:1.1;

    font-weight:800;

    font-family:var(--heading-font);

    color:var(--text-color);

}


.pricing-subtitle{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    opacity:.75;

}


/* ==========================================================
GRID
========================================================== */

.pricing-grid{

    display:grid;

    gap:var(--pricing-gap);

    align-items:stretch;

}


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

.pricing-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.08);

    border-radius:var(--pricing-radius);

    padding:42px;

    transition:
    transform .35s,
    box-shadow .35s,
    border-color .35s;

    overflow:hidden;

}


.pricing-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(37,99,235,.05),
    rgba(124,58,237,.04)
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}


.pricing-card:hover{

    transform:translateY(-10px);

    border-color:rgba(37,99,235,.25);

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}


.pricing-card:hover::before{

    opacity:1;

}


/* ==========================================================
FEATURED
========================================================== */

.pricing-card.featured{

    border:2px solid var(--primary-color);

    transform:scale(1.04);

    box-shadow:

    0 20px 60px rgba(37,99,235,.20);

}


.pricing-card.featured:hover{

    transform:
    translateY(-10px)
    scale(1.04);

}


.pricing-badge{

    position:absolute;

    top:18px;

    right:18px;

    background:

    linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
    );

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    padding:8px 14px;

    border-radius:999px;

}


/* ==========================================================
PLAN NAME
========================================================== */

.plan-name{

    margin:10px 0;

    font-size:30px;

    font-weight:800;

    font-family:var(--heading-font);

    color:var(--text-color);

}


/* ==========================================================
DESCRIPTION
========================================================== */

.plan-description{

    opacity:.7;

    line-height:1.8;

    margin-bottom:28px;

}


/* ==========================================================
PRICE
========================================================== */

.plan-price{

    display:flex;

    align-items:flex-start;

    gap:4px;

    margin-bottom:35px;

}


.plan-price .currency{

    margin-top:8px;

    font-size:26px;

    font-weight:700;

    color:var(--primary-color);

}


.plan-price .amount{

    font-size:58px;

    line-height:1;

    font-weight:900;

    color:var(--text-color);

}


/* ==========================================================
FEATURES
========================================================== */

.plan-features{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:16px;

    flex:1;

}


.plan-features li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    line-height:1.6;

}


.feature-icon{

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:bold;

    flex-shrink:0;

}


.included .feature-icon{

    background:rgba(37,99,235,.10);

    color:var(--primary-color);

}


.optional{

    opacity:.55;

}


.optional .feature-icon{

    background:#f3f4f6;

    color:#999;

}


/* ==========================================================
BUTTON
========================================================== */

.pricing-button{

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:

    linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
    );

    color:#fff;

    height:58px;

    border-radius:14px;

    font-weight:700;

    transition:
    transform .25s,
    box-shadow .25s;

}


.pricing-button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(37,99,235,.28);

}


/* ==========================================================
EMPTY
========================================================== */

.pricing-empty{

    text-align:center;

    padding:120px 30px;

}


.pricing-empty-icon{

    font-size:70px;

    margin-bottom:20px;

}


.pricing-empty h3{

    margin-bottom:10px;

    font-size:30px;

}


.pricing-empty p{

    opacity:.6;

}


/* ==========================================================
ANIMATION
========================================================== */

.pricing-card{

    animation:pricingFade .5s ease both;

}


.pricing-card:nth-child(2){

    animation-delay:.08s;

}


.pricing-card:nth-child(3){

    animation-delay:.16s;

}


.pricing-card:nth-child(4){

    animation-delay:.24s;

}


.pricing-card:nth-child(5){

    animation-delay:.32s;

}


@keyframes pricingFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ==========================================================
TABLET
========================================================== */

@media(max-width:1024px){

.pricing-grid{

grid-template-columns:
repeat(2,1fr)!important;

}

.pricing-card.featured{

transform:none;

}

.pricing-card.featured:hover{

transform:translateY(-10px);

}

}


/* ==========================================================
MOBILE
========================================================== */

@media(max-width:768px){

.pricing-header{

margin-bottom:45px;

}

.pricing-grid{

grid-template-columns:1fr!important;

}

.pricing-card{

padding:30px;

}

.plan-name{

font-size:26px;

}

.plan-price .amount{

font-size:48px;

}

.pricing-title{

font-size:38px;

}

.pricing-subtitle{

font-size:16px;

}

}


/* ==========================================================
DARK MODE SUPPORT
========================================================== */

@media(prefers-color-scheme:dark){

.wizora-pricing{

background:#0f172a;

}

.pricing-card{

background:#1e293b;

border-color:#334155;

}

.pricing-title,
.plan-name,
.plan-price .amount{

color:#fff;

}

.pricing-subtitle,
.plan-description{

color:#cbd5e1;

}

.optional{

opacity:.7;

}

}