/*=====================================================
  TIMESNEWSPLUS SUBSCRIPTION PAGE
  Version: 1.0
=====================================================*/

/*=====================================================
  VARIABLES
=====================================================*/

:root{

    --tnp-red:#d60000;
    --tnp-blue:#0057b8;
    --tnp-gold:#d4af37;

    --tnp-dark:#111827;
    --tnp-dark-2:#1f2937;

    --tnp-white:#ffffff;

    --tnp-bg:#f7f8fb;

    --tnp-text:#222;

    --tnp-muted:#6b7280;

    --tnp-border:#e5e7eb;

    --tnp-radius:20px;

    --tnp-shadow:
        0 10px 30px rgba(0,0,0,.08);

    --tnp-shadow-hover:
        0 25px 70px rgba(0,0,0,.18);

    --tnp-transition:.35s ease;

}


/*=====================================================
  RESET
=====================================================*/

.tnp-plans-page *,
.tnp-plans-page *::before,
.tnp-plans-page *::after{

    box-sizing:border-box;

}

.tnp-plans-page{

    background:var(--tnp-bg);

    color:var(--tnp-text);

    overflow:hidden;

    padding-bottom:80px;

}

.tnp-container{
    width:min(1400px,94%);
    margin:auto;
}


/*=====================================================
  HERO
=====================================================*/

.tnp-plans-hero{

    position:relative;

    overflow:hidden;

   padding:42px 20px;

    background:
    linear-gradient(
        135deg,
        var(--tnp-dark),
        var(--tnp-dark-2)
    );

    color:#fff;

    text-align:center;

}

.tnp-plans-hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.06;

    background-image:
    radial-gradient(circle,#fff 1px,transparent 1px);

    background-size:28px 28px;

}

.tnp-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}

.tnp-hero-badge{

    display:inline-block;

    padding:9px 20px;

    margin-bottom:24px;

    border-radius:40px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

}

.tnp-plans-hero h1{

    font-size:40px;

    line-height:1.1;

    margin-bottom:14px;

    color:#fff;

}

.tnp-plans-hero p{

    font-size:18px;

    line-height:1.6;

    color:#d6d6d6;

    max-width:700px;

    margin:0 auto 18px;

}


.tnp-hero-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:24px;

}

.tnp-hero-features a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:rgba(255,255,255,.10);

    color:#fff;

    padding:10px 18px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.12);

    transition:.3s;

    font-size:14px;

    font-weight:600;

}

.tnp-hero-features a:hover{

    background:#d60000;

    border-color:#d60000;

    transform:translateY(-2px);

}
.tnp-hero-features span{

    background:rgba(255,255,255,.08);

    padding:12px 18px;

    border-radius:40px;

    font-size:14px;

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

}


/*=====================================================
  SECTION SPACING
=====================================================*/

.tnp-plan-section{

    margin:80px 0;

}



/*=====================================================
  PRICING GRID
=====================================================*/
.tnp-plan-grid{

    display:grid;

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

    gap:24px;

    align-items:stretch;

}
/*=====================================================
  PUBLICATION HEADERS
=====================================================*/

.tnp-section-header{

    text-align:center;

    margin-bottom:50px;

}

.tnp-section-header h2{

    font-size:48px;

    font-weight:700;

    margin-bottom:15px;

    color:#111827;

}

.tnp-section-header p{

    color:#6b7280;

    font-size:18px;

}

/*=====================================================
  PREMIUM PLAN CARD
=====================================================*/

.tnp-plan-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:24px;

    padding:32px;

    border:1px solid #ececec;

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);

    overflow:hidden;

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

    height:100%;

}

.tnp-plan-card:hover{

    transform:translateY(-10px);

    box-shadow:0 24px 45px rgba(0,0,0,.15);

}

/* Featured Plans */

.tnp-plan-card.featured{

    transform:translateY(-8px);

    border:2px solid #f4c542;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    position:relative;

    z-index:2;

}

.tnp-plan-card.featured:hover{

    transform:translateY(-8px) scale(1.06);

}
.tnp-plan-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:7px;

}
/* Ghanaian Times */

.publication-ghanaian-times::before{

    background:var(--tnp-blue);

}

/* The Spectator */

.publication-the-spectator::before{

    background:var(--tnp-red);

}

/* Bundle */

.publication-bundle::before{

    background:var(--tnp-gold);

}

.tnp-plan-badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:40px;

    color:#fff;

    font-size:12px;

    font-weight:700;

    margin-bottom:25px;

}

.tnp-plan-title{

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    color:#111827;

    margin-bottom:14px;

}

.tnp-plan-price{

    font-size:56px;

    font-weight:800;

    line-height:1;

    color:#d60000;

    margin-bottom:10px;

    letter-spacing:-1px;

}


.tnp-plan-period{

    color:var(--tnp-muted);

    font-size:15px;

    margin-bottom:24px;

}

.tnp-plan-divider{

    height:1px;

    background:var(--tnp-border);

    margin:0 0 28px;

}

.tnp-plan-description{

    font-size:17px;

    line-height:1.8;

    color:#444;

    margin-bottom:30px;

}

.tnp-plan-features{

    list-style:none;

    padding:0;

    margin:0;

}

.tnp-plan-features li{

    padding:10px 0;

    border-bottom:1px solid #f1f1f1;

    font-size:16px;

}
.tnp-plan-footer{

    margin-top:auto;

    padding-top:35px;

}


.tnp-plan-btn{

    display:block;

    width:100%;

    padding:14px 18px;

    border-radius:999px;

    background:#d60000;

    color:#fff;

    text-align:center;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.tnp-plan-btn:hover{

    background:#b30000;

    transform:translateY(-2px);

}

.tnp-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(214,0,0,.35);

}

/*=====================================================
  BENEFITS
=====================================================*/

.tnp-benefits-section{

    margin:100px 0;

}

.tnp-benefits-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:45px;

}

.tnp-benefit-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:var(--tnp-shadow);

    transition:var(--tnp-transition);

}

.tnp-benefit-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--tnp-shadow-hover);

}

.tnp-benefit-icon{

    font-size:42px;

    margin-bottom:18px;

}

.tnp-benefit-card h3{

    font-size:24px;

    margin-bottom:15px;

    color:var(--tnp-text);

}

.tnp-benefit-card p{

    color:var(--tnp-muted);

    line-height:1.8;

}


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

@media (max-width:768px){

    .tnp-container{
        width:100%;
        padding:0 16px;
    }

   .tnp-plans-hero{

    padding:42px 20px;
    }

    .tnp-plans-hero h1{
        font-size:34px;
        line-height:1.2;
    }

    .tnp-plans-hero p{
        font-size:16px;
        line-height:1.6;
        margin-bottom:24px;
    }

    .tnp-hero-features{
        gap:10px;
    }

    .tnp-hero-features span{
        width:100%;
        text-align:center;
        padding:12px;
    }

    .tnp-section-header{
        margin-bottom:30px;
    }

    .tnp-section-header h2{
        font-size:32px;
    }

    .tnp-section-header p{
        font-size:16px;
    }

    .tnp-plan-section{
        margin:50px 0;
    }

    .tnp-plan-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .tnp-plan-card{
        padding:24px;
    }

    .tnp-plan-card.featured{
        transform:none;
    }

    .tnp-plan-card.featured:hover{
        transform:translateY(-6px);
    }

    .tnp-plan-title{
        font-size:28px;
    }

    .tnp-plan-price{
        font-size:42px;
    }

    .tnp-btn{
        padding:16px;
    }

    .tnp-benefits-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .tnp-benefit-card{
        padding:24px;
    }
}

/*====================================
  PREMIUM PLAN BRAND
====================================*/

.tnp-plan-brand{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1.8px;

    font-weight:700;

    color:#6b7280;

    margin:18px 0 10px;

}

.tnp-plan-title{

    text-transform:uppercase;

    letter-spacing:.6px;

}

.tnp-plan-price{

    margin-top:8px;

}

.tnp-plan-period{

    font-size:15px;

    color:#888;

    text-transform:uppercase;

    letter-spacing:1px;

}

.tnp-plan-features li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 0;

    font-size:15px;

}

.tnp-plan-description{

    font-size:16px;

    margin-bottom:24px;

}


/*=========================================
 HERO STATS
=========================================*/

.tnp-hero-stats{

    display:flex;

    justify-content:center;

    gap:40px;

    margin:26px 0;

    flex-wrap:wrap;

}

.tnp-stat{

    text-align:center;

}

.tnp-stat strong{

    display:block;

    font-size:28px;

    color:#fff;

    font-weight:800;

}

.tnp-stat span{

    color:#b9c0cc;

    font-size:13px;

    letter-spacing:.6px;

}

/*=========================================
 MOST POPULAR LABEL
=========================================*/

.tnp-best-value{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin:10px 0 12px;

    padding:6px 12px;

    border-radius:999px;

    background:#fff4d6;

    color:#b8860b;

    border:1px solid #f3d26a;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.tnp-plan-price-wrap{

    margin-bottom:24px;

}