/*
==================================================
GovtJobPreparation.com
Upcoming Exams
Part-1 : Base + Hero + Summary + Header
==================================================
*/


/*================================================
Main Page
================================================*/

.gjp-upcoming-exams-page{

    min-height:100vh;

    padding:40px 0 70px;

    background:#f8fafc;

}


.gjp-upcoming-exams-container{

    width:100%;

    max-width:1120px;

    margin:0 auto;

    padding:0 20px;

}


/*================================================
Breadcrumb
================================================*/

.gjp-upcoming-exams-page
.gjp-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    margin-bottom:28px;

    font-size:13px;

}


.gjp-upcoming-exams-page
.gjp-breadcrumb a{

    color:#2563eb;

    text-decoration:none;

    font-weight:650;

}


.gjp-upcoming-exams-page
.gjp-breadcrumb a:hover{

    text-decoration:underline;

}


.gjp-upcoming-exams-page
.gjp-breadcrumb-separator{

    color:#94a3b8;

    font-size:17px;

}


.gjp-upcoming-exams-page
.gjp-breadcrumb-current{

    color:#64748b;

    font-weight:550;

}


/*================================================
Premium Hero
================================================*/

.gjp-upcoming-exams-hero{

    position:relative;

    overflow:hidden;

    margin-bottom:25px;

    padding:42px 45px;

    border:1px solid #dbeafe;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eff6ff 100%
        );

    box-shadow:
        0 8px 28px rgba(15,23,42,.05);

}


.gjp-upcoming-exams-hero::after{

    content:"";

    position:absolute;

    width:215px;

    height:215px;

    right:-78px;

    top:-98px;

    border-radius:50%;

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

}


.gjp-upcoming-hero-content{

    position:relative;

    z-index:1;

    max-width:760px;

}


.gjp-upcoming-hero-badge{

    display:inline-flex;

    align-items:center;

    padding:7px 14px;

    margin-bottom:13px;

    border-radius:30px;

    background:#dbeafe;

    color:#2563eb;

    font-size:11px;

    line-height:1.3;

    font-weight:750;

}


.gjp-upcoming-exams-hero h1{

    margin:0 0 12px;

    color:#0f172a;

    font-size:36px;

    line-height:1.3;

    font-weight:780;

    letter-spacing:-.4px;

}


.gjp-upcoming-exams-hero p{

    max-width:700px;

    margin:0;

    color:#64748b;

    font-size:15px;

    line-height:1.8;

}


/*================================================
Summary Section
================================================*/

.gjp-upcoming-exams-summary{

    display:grid;

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

    gap:15px;

    margin-bottom:32px;

}


.gjp-upcoming-summary-item{

    display:flex;

    align-items:center;

    gap:13px;

    min-width:0;

    padding:17px 18px;

    border:1px solid #e2e8f0;

    border-radius:15px;

    background:#ffffff;

    box-shadow:
        0 6px 20px rgba(15,23,42,.04);

}


.gjp-upcoming-summary-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:11px;

    background:#eff6ff;

    font-size:18px;

}


.gjp-upcoming-summary-item > div{

    display:flex;

    flex-direction:column;

    min-width:0;

}


.gjp-upcoming-summary-item strong{

    color:#0f172a;

    font-size:19px;

    line-height:1.3;

    font-weight:780;

}


.gjp-upcoming-summary-item span:not(
    .gjp-upcoming-summary-icon
){

    margin-top:3px;

    color:#64748b;

    font-size:11px;

    line-height:1.4;

    font-weight:600;

}


/*================================================
Exam List Header
================================================*/

.gjp-upcoming-exams-list-section{

    margin-top:5px;

}


.gjp-upcoming-list-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;

}


.gjp-upcoming-section-heading{

    display:flex;

    align-items:center;

    gap:12px;

}


.gjp-upcoming-section-heading h2{

    margin:0;

    color:#0f172a;

    font-size:25px;

    line-height:1.4;

    font-weight:750;

}


.gjp-upcoming-heading-line{

    width:40px;

    height:4px;

    border-radius:10px;

    background:#2563eb;

}


.gjp-upcoming-result-count{

    color:#64748b;

    font-size:12px;

    font-weight:650;

}


/*================================================
Tablet
================================================*/

@media (max-width:850px){

    .gjp-upcoming-exams-summary{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .gjp-upcoming-summary-item:last-child{

        grid-column:1 / -1;

    }

}


/*================================================
Mobile
================================================*/

@media (max-width:650px){

    .gjp-upcoming-exams-page{

        padding:30px 0 55px;

    }


    .gjp-upcoming-exams-container{

        padding:0 15px;

    }


    .gjp-upcoming-exams-hero{

        padding:30px 23px;

        border-radius:18px;

    }


    .gjp-upcoming-exams-hero h1{

        font-size:29px;

    }


    .gjp-upcoming-exams-hero p{

        font-size:14px;

    }


    .gjp-upcoming-exams-summary{

        grid-template-columns:1fr;

        gap:12px;

    }


    .gjp-upcoming-summary-item:last-child{

        grid-column:auto;

    }


    .gjp-upcoming-list-header{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }


    .gjp-upcoming-section-heading h2{

        font-size:23px;

    }

}


/*================================================
Small Mobile
================================================*/

@media (max-width:400px){

    .gjp-upcoming-exams-hero{

        padding:27px 19px;

    }


    .gjp-upcoming-exams-hero h1{

        font-size:26px;

    }


    .gjp-upcoming-summary-item{

        padding:15px;

    }

}
/*
==================================================
GovtJobPreparation.com
Upcoming Exams
Part-2 : Exam Cards + Days Left
==================================================
*/


/*================================================
Exam Grid
================================================*/

.gjp-upcoming-exams-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;

}


/*================================================
Exam Card
================================================*/

.gjp-upcoming-exam-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    border:1px solid #e2e8f0;

    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 8px 26px rgba(15,23,42,.05);

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

}


.gjp-upcoming-exam-card:hover{

    transform:translateY(-4px);

    border-color:#bfdbfe;

    box-shadow:
        0 15px 34px rgba(15,23,42,.09);

}


/*================================================
Card Top
================================================*/

.gjp-upcoming-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:22px 22px 0;

}


/*================================================
Exam Icon
================================================*/

.gjp-upcoming-exam-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:1px solid #dbeafe;

    border-radius:15px;

    background:#eff6ff;

}


.gjp-upcoming-exam-icon span{

    max-width:50px;

    overflow:hidden;

    color:#2563eb;

    font-size:10px;

    line-height:1.2;

    font-weight:850;

    text-align:center;

    text-overflow:ellipsis;

}


/*================================================
Category Badge
================================================*/

.gjp-upcoming-exam-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 12px;

    border-radius:20px;

    background:#f1f5f9;

    color:#64748b;

    font-size:10px;

    line-height:1.3;

    font-weight:750;

    white-space:nowrap;

}


/*================================================
Card Content
================================================*/

.gjp-upcoming-card-content{

    flex:1;

    padding:21px 22px;

}


.gjp-upcoming-card-content h3{

    margin:0 0 7px;

    color:#0f172a;

    font-size:20px;

    line-height:1.45;

    font-weight:780;

    letter-spacing:-.15px;

}


.gjp-upcoming-card-content p{

    margin:0 0 20px;

    color:#64748b;

    font-size:13px;

    line-height:1.7;

}


/*================================================
Exam Date
================================================*/

.gjp-upcoming-exam-date{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:13px 15px;

    border:1px solid #eef2f7;

    border-radius:11px;

    background:#f8fafc;

}


.gjp-upcoming-exam-date span{

    color:#94a3b8;

    font-size:10px;

    line-height:1.4;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.2px;

}


.gjp-upcoming-exam-date strong{

    color:#334155;

    font-size:12px;

    line-height:1.4;

    font-weight:750;

    text-align:right;

}


/*================================================
Card Footer
================================================*/

.gjp-upcoming-card-footer{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding:16px 22px;

    border-top:1px solid #eef2f7;

    background:#fcfdff;

}


/*================================================
Days Left
================================================*/

.gjp-days-left{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:42px;

    padding:0 14px;

    border:1px solid #dbeafe;

    border-radius:10px;

    background:#eff6ff;

}


.gjp-days-number{

    color:#2563eb;

    font-size:18px;

    line-height:1;

    font-weight:850;

}


.gjp-days-label{

    color:#3b82f6;

    font-size:10px;

    line-height:1.2;

    font-weight:750;

    text-transform:uppercase;

    letter-spacing:.15px;

}


/*================================================
Urgent Exam State
================================================*/

.gjp-upcoming-exam-card.gjp-exam-urgent{

    border-color:#fed7aa;

}


.gjp-upcoming-exam-card.gjp-exam-urgent
.gjp-days-left{

    border-color:#fed7aa;

    background:#fff7ed;

}


.gjp-upcoming-exam-card.gjp-exam-urgent
.gjp-days-number{

    color:#ea580c;

}


.gjp-upcoming-exam-card.gjp-exam-urgent
.gjp-days-label{

    color:#f97316;

}


/*================================================
Exam Today
================================================*/

.gjp-upcoming-exam-card.gjp-exam-today{

    border-color:#bbf7d0;

}


.gjp-upcoming-exam-card.gjp-exam-today
.gjp-days-left{

    border-color:#bbf7d0;

    background:#f0fdf4;

}


.gjp-upcoming-exam-card.gjp-exam-today
.gjp-days-number{

    color:#16a34a;

    font-size:13px;

}


.gjp-upcoming-exam-card.gjp-exam-today
.gjp-days-label{

    color:#16a34a;

}


/*================================================
Completed State
================================================*/

.gjp-upcoming-exam-card.gjp-exam-completed{

    opacity:.72;

}


.gjp-upcoming-exam-card.gjp-exam-completed
.gjp-days-left{

    border-color:#e2e8f0;

    background:#f8fafc;

}


.gjp-upcoming-exam-card.gjp-exam-completed
.gjp-days-number{

    color:#64748b;

    font-size:12px;

}


.gjp-upcoming-exam-card.gjp-exam-completed
.gjp-days-label{

    color:#94a3b8;

}


/*================================================
No Results
================================================*/

.gjp-upcoming-no-results{

    margin-top:20px;

    padding:55px 25px;

    text-align:center;

    border:1px solid #e2e8f0;

    border-radius:18px;

    background:#ffffff;

}


.gjp-upcoming-no-results-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 15px;

    border-radius:14px;

    background:#f1f5f9;

    font-size:20px;

}


.gjp-upcoming-no-results h3{

    margin:0 0 7px;

    color:#0f172a;

    font-size:19px;

    font-weight:750;

}


.gjp-upcoming-no-results p{

    margin:0;

    color:#64748b;

    font-size:13px;

    line-height:1.7;

}


/*================================================
Tablet
================================================*/

@media (max-width:800px){

    .gjp-upcoming-exams-grid{

        grid-template-columns:1fr;

    }


    .gjp-upcoming-exam-card{

        max-width:100%;

    }

}


/*================================================
Mobile
================================================*/

@media (max-width:600px){

    .gjp-upcoming-exams-grid{

        gap:15px;

    }


    .gjp-upcoming-card-top{

        padding:18px 18px 0;

    }


    .gjp-upcoming-exam-icon{

        width:52px;

        height:52px;

        border-radius:13px;

    }


    .gjp-upcoming-card-content{

        padding:18px;

    }


    .gjp-upcoming-card-content h3{

        font-size:18px;

    }


    .gjp-upcoming-card-content p{

        font-size:12.5px;

    }


    .gjp-upcoming-card-footer{

        padding:14px 18px;

    }

}


/*================================================
Small Mobile
================================================*/

@media (max-width:400px){

    .gjp-upcoming-card-top{

        align-items:flex-start;

    }


    .gjp-upcoming-exam-category{

        white-space:normal;

        text-align:right;

    }


    .gjp-upcoming-exam-date{

        align-items:flex-start;

        flex-direction:column;

        gap:5px;

    }


    .gjp-upcoming-exam-date strong{

        text-align:left;

    }


    .gjp-upcoming-card-footer{

        justify-content:stretch;

    }


    .gjp-days-left{

        width:100%;

    }

}
/*
==================================================
GovtJobPreparation.com
Upcoming Exams
Part-3 : Pagination
==================================================
*/


/*================================================
Pagination Wrapper
================================================*/

.gjp-upcoming-pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:32px;

    padding:5px 0;

}


/*================================================
Pagination Pages
================================================*/

.gjp-pagination-pages{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

}


/*================================================
Pagination Button
================================================*/

.gjp-pagination-btn,

.gjp-pagination-page{

    min-width:40px;

    height:40px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:0 11px;

    border:1px solid #dbe2ea;

    border-radius:8px;

    background:#ffffff;

    color:#475569;

    font-family:inherit;

    font-size:12px;

    line-height:1;

    font-weight:700;

    cursor:pointer;

    text-decoration:none;

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

}


.gjp-pagination-btn:hover:not(:disabled),

.gjp-pagination-page:hover{

    border-color:#93c5fd;

    background:#eff6ff;

    color:#2563eb;

    transform:translateY(-1px);

}


/*================================================
Active Page
================================================*/

.gjp-pagination-page.active{

    border-color:#2563eb;

    background:#2563eb;

    color:#ffffff;

    box-shadow:
        0 5px 14px rgba(37,99,235,.16);

}


.gjp-pagination-page.active:hover{

    border-color:#1d4ed8;

    background:#1d4ed8;

    color:#ffffff;

    transform:none;

}


/*================================================
Disabled State
================================================*/

.gjp-pagination-btn:disabled{

    opacity:.45;

    background:#f8fafc;

    color:#94a3b8;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*================================================
Pagination Ellipsis
================================================*/

.gjp-pagination-ellipsis{

    min-width:30px;

    height:40px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#94a3b8;

    font-size:13px;

    font-weight:700;

}


/*================================================
Pagination Information
================================================*/

.gjp-upcoming-pagination-info{

    margin-top:12px;

    color:#94a3b8;

    font-size:11px;

    line-height:1.5;

    text-align:center;

    font-weight:600;

}


/*================================================
Pagination Focus
================================================*/

.gjp-upcoming-pagination
button:focus-visible,

.gjp-upcoming-pagination
a:focus-visible{

    outline:3px solid rgba(37,99,235,.20);

    outline-offset:3px;

}


/*================================================
Information Section
================================================*/

.gjp-upcoming-exams-info{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-top:35px;

    padding:20px 22px;

    border:1px solid #dbeafe;

    border-radius:15px;

    background:#f8fbff;

}


.gjp-upcoming-info-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:10px;

    background:#dbeafe;

    color:#2563eb;

    font-size:16px;

    font-weight:800;

}


.gjp-upcoming-info-content{

    min-width:0;

}


.gjp-upcoming-info-content h3{

    margin:0 0 5px;

    color:#334155;

    font-size:14px;

    line-height:1.5;

    font-weight:750;

}


.gjp-upcoming-info-content p{

    margin:0;

    color:#64748b;

    font-size:12px;

    line-height:1.7;

}


/*================================================
Accessibility
================================================*/

.gjp-upcoming-exams-page
button:focus-visible{

    outline:3px solid rgba(37,99,235,.20);

    outline-offset:3px;

}


/*================================================
Hidden Utility
================================================*/

.gjp-upcoming-exams-page
.is-hidden{

    display:none !important;

}


/*================================================
Reduced Motion
================================================*/

@media (prefers-reduced-motion:reduce){

    .gjp-upcoming-exams-page *{

        scroll-behavior:auto !important;

        transition:none !important;

        animation:none !important;

    }

}


/*================================================
Tablet
================================================*/

@media (max-width:700px){

    .gjp-upcoming-pagination{

        gap:5px;

    }


    .gjp-pagination-pages{

        gap:4px;

    }


    .gjp-pagination-btn,
    .gjp-pagination-page{

        min-width:38px;

        height:38px;

        padding:0 9px;

        font-size:11px;

    }


    .gjp-upcoming-exams-info{

        margin-top:28px;

    }

}


/*================================================
Mobile
================================================*/

@media (max-width:500px){

    .gjp-upcoming-pagination{

        flex-wrap:wrap;

        gap:7px;

    }


    .gjp-pagination-pages{

        order:1;

        width:100%;

    }


    .gjp-pagination-btn{

        flex:1;

        min-width:0;

    }


    .gjp-upcoming-exams-info{

        gap:12px;

        margin-top:25px;

        padding:17px;

        border-radius:13px;

    }


    .gjp-upcoming-info-icon{

        width:35px;

        height:35px;

    }


    .gjp-upcoming-info-content h3{

        font-size:13px;

    }


    .gjp-upcoming-info-content p{

        font-size:11.5px;

        line-height:1.65;

    }

}


/*================================================
Small Mobile
================================================*/

@media (max-width:400px){

    .gjp-upcoming-pagination{

        gap:5px;

    }


    .gjp-pagination-pages{

        gap:3px;

    }


    .gjp-pagination-btn,
    .gjp-pagination-page{

        min-width:34px;

        height:36px;

        padding:0 7px;

        font-size:10px;

    }


    .gjp-pagination-ellipsis{

        min-width:20px;

    }


    .gjp-upcoming-exams-info{

        align-items:flex-start;

        padding:15px;

    }


    .gjp-upcoming-info-icon{

        width:32px;

        height:32px;

        border-radius:8px;

        font-size:14px;

    }

}
/*
==================================================
GovtJobPreparation.com
Upcoming Exams
Part-4 : Final Cleanup + Responsive
==================================================
*/


/*================================================
Card Equal Height
================================================*/

.gjp-upcoming-exams-grid{

    align-items:stretch;

}


.gjp-upcoming-exam-card{

    height:100%;

}


/*================================================
Text Selection / Overflow Cleanup
================================================*/

.gjp-upcoming-exam-card h3,
.gjp-upcoming-exam-card p{

    overflow-wrap:anywhere;

}


/*================================================
Button / Interactive Elements
================================================*/

.gjp-upcoming-exams-page
button{

    font-family:inherit;

}


.gjp-upcoming-exams-page
button:focus-visible{

    outline:3px solid rgba(37,99,235,.20);

    outline-offset:3px;

}


/*================================================
Hidden State
================================================*/

.gjp-upcoming-exams-page
.is-hidden{

    display:none !important;

}


/*================================================
Loading / Updating State
================================================*/

.gjp-upcoming-exam-card.gjp-updating{

    opacity:.65;

    pointer-events:none;

}


.gjp-upcoming-exam-card.gjp-updating
.gjp-days-number{

    position:relative;

}


/*================================================
Days Number Stability
================================================*/

.gjp-days-number{

    min-width:20px;

    text-align:center;

}


/*================================================
Today State - Stronger Visual
================================================*/

.gjp-upcoming-exam-card.gjp-exam-today{

    box-shadow:
        0 10px 28px rgba(22,163,74,.10);

}


.gjp-upcoming-exam-card.gjp-exam-today
.gjp-upcoming-card-footer{

    background:#f8fff9;

}


/*================================================
Urgent State
================================================*/

.gjp-upcoming-exam-card.gjp-exam-urgent{

    box-shadow:
        0 10px 28px rgba(234,88,12,.07);

}


.gjp-upcoming-exam-card.gjp-exam-urgent
.gjp-upcoming-card-footer{

    background:#fffdf9;

}


/*================================================
Completed State
================================================*/

.gjp-upcoming-exam-card.gjp-exam-completed{

    box-shadow:none;

}


.gjp-upcoming-exam-card.gjp-exam-completed:hover{

    transform:none;

    border-color:#e2e8f0;

    box-shadow:none;

}


/*================================================
Pagination Stability
================================================*/

.gjp-upcoming-pagination{

    min-height:42px;

}


.gjp-pagination-pages{

    min-height:40px;

}


/*================================================
Information Section
================================================*/

.gjp-upcoming-exams-info{

    box-shadow:
        0 5px 18px rgba(15,23,42,.025);

}


/*================================================
Smooth Page Scroll
================================================*/

html{

    scroll-behavior:smooth;

}


/*================================================
Reduced Motion
================================================*/

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }


    .gjp-upcoming-exams-page *,
    .gjp-upcoming-exams-page *::before,
    .gjp-upcoming-exams-page *::after{

        animation:none !important;

        transition:none !important;

    }

}


/*================================================
Large Desktop
================================================*/

@media (min-width:1200px){

    .gjp-upcoming-exams-container{

        max-width:1160px;

    }


    .gjp-upcoming-exams-grid{

        gap:22px;

    }


    .gjp-upcoming-exam-card{

        border-radius:21px;

    }

}


/*================================================
Tablet
================================================*/

@media (max-width:850px){

    .gjp-upcoming-exams-container{

        padding-left:18px;

        padding-right:18px;

    }


    .gjp-upcoming-exam-card-content h3{

        font-size:19px;

    }


    .gjp-upcoming-exam-date{

        gap:10px;

    }

}


/*================================================
Mobile
================================================*/

@media (max-width:650px){

    .gjp-upcoming-exams-container{

        padding-left:15px;

        padding-right:15px;

    }


    .gjp-upcoming-exams-grid{

        grid-template-columns:1fr;

    }


    .gjp-upcoming-exam-card{

        border-radius:17px;

    }


    .gjp-upcoming-card-content h3{

        font-size:18px;

    }


    .gjp-upcoming-exam-date strong{

        font-size:11px;

    }


    .gjp-upcoming-pagination{

        margin-top:25px;

    }

}


/*================================================
Small Mobile
================================================*/

@media (max-width:400px){

    .gjp-upcoming-exam-card{

        border-radius:15px;

    }


    .gjp-upcoming-card-content{

        padding:17px;

    }


    .gjp-upcoming-card-content h3{

        font-size:17px;

    }


    .gjp-upcoming-card-content p{

        font-size:12px;

    }


    .gjp-upcoming-exam-icon{

        width:48px;

        height:48px;

        border-radius:12px;

    }


    .gjp-upcoming-exam-category{

        padding:6px 9px;

        font-size:9px;

    }


    .gjp-days-left{

        min-height:40px;

        padding:0 12px;

    }


    .gjp-days-number{

        font-size:16px;

    }


    .gjp-days-label{

        font-size:9px;

    }

}