/*==================================================
CERTIFICATIONS PAGE
==================================================*/

.certifications-page{

    --primary:#4f46e5;
    --secondary:#7c3aed;
    --success:#16a34a;
    --danger:#dc2626;

    --bg:#f5f7fb;
    --card:#ffffff;

    --text:#172554;
    --muted:#64748b;

    --border:#e5e7eb;

    background:var(--bg) !important;

    padding:36px 0 60px;

}

/*==================================================
CONTAINER
==================================================*/

.certifications-page .container{

    max-width:1380px;

}   


/*==================================================
HERO PREMIUM COMPACT
==================================================*/

.certifications-hero{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;

    padding:22px 26px;

    margin-bottom:20px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #4338ca,
        #7c3aed
    );

    color:#fff;

    box-shadow:0 10px 28px rgba(79,70,229,.16);

    position:relative;
    overflow:hidden;

}

.certifications-hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:radial-gradient(

        circle at top right,

        rgba(255,255,255,.12),

        transparent 55%

    );

}

.certifications-hero>*{

    position:relative;
    z-index:2;

}

.certifications-hero__content{

    flex:1;

}

.hero-label{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:5px 12px;

    margin-bottom:10px;

    border-radius:999px;

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

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

}

.certifications-hero h1{

    margin:0 0 8px;

    font-size:1.8rem;

    font-weight:800;

    line-height:1.2;

}

.certifications-hero p{

    margin:0;

    max-width:560px;

    font-size:.92rem;

    line-height:1.55;

    opacity:.95;

}

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

.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:16px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:40px;

    padding:0 16px;

    border-radius:10px;

    font-size:.84rem;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.hero-btn-light{

    background:#fff;

    color:var(--primary);

}

.hero-btn-outline{

    color:#fff;

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

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

}

.hero-btn:hover{

    transform:translateY(-2px);

}

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

.certifications-hero__image{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-medal{

    width:95px;

    height:95px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

    backdrop-filter:blur(10px);

    font-size:48px;

}

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

.page-header{

    margin-bottom:16px;

}

.page-header h2{

    margin:0;

    font-size:1.35rem;

    font-weight:800;

    color:var(--text);

}

.page-header p{

    margin-top:4px;

    font-size:.90rem;

    color:var(--muted);

}

/*==================================================
SEARCH TOOLBAR
==================================================*/

.certifications-toolbar{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.cert-search-form{

    flex:1;

}

.cert-search-box{

    display:flex;

    align-items:center;

    gap:10px;

    padding:7px 10px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

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

}

.cert-search-box i{

    font-size:16px;

    color:var(--muted);

}

.cert-search-box .form-control{

    border:none;

    background:transparent;

    box-shadow:none;

    font-size:.9rem;

}

.cert-search-box .form-control:focus{

    box-shadow:none;

}

.btn-search,

.btn-reset,

.btn-create-cert{

    height:38px;

    padding:0 14px;

    border-radius:10px;

    font-size:.84rem;

    font-weight:700;

}

.btn-search{

    border:none;

    color:#fff;

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

}

.btn-reset{

    display:flex;

    align-items:center;

    gap:6px;

    text-decoration:none;

    color:var(--muted);

    background:#f8fafc;

}

.btn-create-cert{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

}

/*==================================================
COMPACT STATS
==================================================*/

.cert-stats{

    display:grid;

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

    gap:12px;

    margin-bottom:22px;

}

.stat-card{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

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

    transition:.25s;

}

.stat-card:hover{

    transform:translateY(-2px);

}

.stat-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#eef2ff;

    font-size:20px;

}

.stat-card h3{

    margin:0;

    font-size:1.15rem;

    font-weight:800;

    color:var(--text);

}

.stat-card p{

    margin:2px 0 0;

    font-size:.78rem;

    color:var(--muted);

}

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

@media(max-width:991px){

    .certifications-hero{

        flex-direction:column;

        text-align:center;

    }

    .hero-actions{

        justify-content:center;

    }

    .certifications-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .cert-stats{

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

    }

}

@media(max-width:768px){

    .certifications-hero{

        padding:18px;

    }

    .hero-medal{

        display:none;

    }

.cert-stats{

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

    gap:10px;

}

.stat-card{

    padding:12px;

}

    .hero-actions{

        flex-direction:row;

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-btn,

    .btn-create-cert{

        width:auto;

    }

    .cert-search-box{

        flex-wrap:wrap;

    }

    .cert-search-box .form-control{

        width:100%;

        order:2;

    }

}


/*==================================================
CERTIFICATION CARD PREMIUM COMPACT
==================================================*/

.certification-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

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

    transition:.25s;

    overflow:hidden;

}

.certification-card:hover{

    transform:translateY(-3px);

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

}

.certification-card::before{

    content:"";

    position:absolute;

    top:14px;

    right:14px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(79,70,229,.04);

}


/*==================================================
CERTIFICATION COVER
==================================================*/

.certification-cover{

    width:100%;

    margin:-18px -18px 18px;

    width:calc(100% + 36px);

    height:180px;

    overflow:hidden;

    background:#eef2ff;

}

.certification-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.certification-card:hover
.certification-cover img{

    transform:scale(1.05);

}

/*==================================================
TOP
==================================================*/

.certification-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    position:relative;

    z-index:2;

}

.certification-icon{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-size:15px;

    transition:.25s;

}

.certification-card:hover .certification-icon{

    transform:rotate(-8deg);

}

.cefr-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 11px;

    border-radius:999px;

    background:#eef2ff;

    color:var(--primary);

    font-size:.74rem;

    font-weight:700;

    transition:.25s;

}

.certification-card:hover .cefr-badge{

    background:var(--primary);

    color:#fff;

}

/*==================================================
TITLE
==================================================*/

.certification-card h3{

    margin:0 0 10px;

    font-size:1.08rem;

    font-weight:700;

    line-height:1.35;

    color:var(--text);

    position:relative;

    z-index:2;

}

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

.certification-description{

    margin-bottom:14px;

    color:var(--muted);

    font-size:15px;

    line-height:1.45;

    max-height:4.4em;

    overflow:auto;

    word-break:break-word;

}

/*==================================================
META
==================================================*/

.certification-meta{

    display:grid;

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

    gap:8px;

    margin-bottom:10px;

    position:relative;

    z-index:2;

}

.meta-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 10px;

    border-radius:10px;

    background:#f8fafc;

}

.meta-item i{

    font-size:15px;

    color:var(--primary);

}

.meta-item strong{

    display:block;

    font-size:.82rem;

    color:var(--text);

}

.meta-item small{

    display:block;

    margin-top:1px;

    font-size:.68rem;

    color:var(--muted);

}

/*==================================================
BUTTONS
==================================================*/

.certification-actions{

    display:flex;

    gap:8px;

    margin-top:auto;

    position:relative;

    z-index:2;

}

.btn-take-test,

.btn-delete-certification{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    height:40px;

    border-radius:10px;

    text-decoration:none;

    font-size:.82rem;

    font-weight:700;

    transition:.25s;

}

.btn-take-test{

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:#fff;

}

.btn-delete-certification{

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color:#fff;

}

.btn-take-test:hover,

.btn-delete-certification:hover{

    transform:translateY(-2px);

}

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

@media(max-width:768px){

.certification-card{

    padding:16px;

}

.certification-meta{

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

}

.certification-actions{

    flex-direction:row;

}

.btn-take-test,

.btn-delete-certification{

    width:auto;

    height:38px;

    font-size:.80rem;

}

}

/*==================================================
LANGUAGE SECTION
==================================================*/

.language-section{

    margin-bottom:28px;

}

/*----------------------------------
Language Header
----------------------------------*/

.language-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    padding-bottom:10px;

    border-bottom:1px solid var(--border);

}

.language-flag{

    width:28px;

    height:28px;

    border-radius:50%;

    object-fit:cover;

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

}

.language-title h2{

    margin:0;

    font-size:1.2rem;

    font-weight:700;

    color:var(--text);

    line-height:1;

}

/*----------------------------------
Responsive
----------------------------------*/

@media(max-width:768px){

.language-title{

    gap:8px;

    margin-bottom:14px;

}

.language-flag{

    width:24px;

    height:24px;

}

.language-title h2{

    font-size:1.05rem;

}

}

/*==================================================
LANGUAGE BADGE
==================================================*/

.language-count{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:10px;

    padding:4px 10px;

    border-radius:999px;

    background:#eef2ff;

    color:var(--primary);

    font-size:.72rem;

    font-weight:700;

}


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

.empty-certifications{

    padding:42px 22px;

    text-align:center;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

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

}

.empty-certifications-icon{

    font-size:48px;

    margin-bottom:14px;

}

.empty-certifications h3{

    margin-bottom:8px;

    font-size:1.3rem;

    font-weight:700;

}

.empty-certifications p{

    color:var(--muted);

    font-size:.92rem;

    margin-bottom:20px;

}

/*==================================================
PAGINATION
==================================================*/

.pagination{

    margin-top:30px;

    justify-content:center;

    gap:8px;

}

.page-item .page-link{

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:12px;

    background:#fff;

    color:#334155;

    font-weight:600;

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

    transition:.25s;

}

.page-item.active .page-link{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

}

.page-item .page-link:hover{

    transform:translateY(-2px);

}

.page-item.disabled .page-link{

    opacity:.5;

}


/*==================================================
PREMIUM ANIMATIONS
==================================================*/

.certifications-hero,
.certification-card,
.stat-card,
.empty-certifications{

    animation:fadeUp .45s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
GLOBAL HOVER
==================================================*/

.certification-card,
.stat-card,
.hero-btn,
.btn-search,
.btn-reset,
.btn-create-cert,
.page-link{

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

}

.certification-card:hover,
.stat-card:hover{

    transform:translateY(-4px);

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

}

.hero-btn:hover,
.btn-search:hover,
.btn-reset:hover,
.btn-create-cert:hover{

    transform:translateY(-2px);

}

.page-link:hover{

    transform:translateY(-2px);

}

/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

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

@media(max-width:992px){

.certifications-page{

    padding:28px 0 50px;

}

.certification-card{

    padding:16px;

}

.certification-meta{

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

}

.hero-actions{

    justify-content:center;

}

}

/*==================================================
PHONE
==================================================*/

@media(max-width:768px){

.certifications-page{

    padding:20px 0 40px;

}

.certifications-hero{

    padding:18px;

    border-radius:16px;

}

.certifications-hero h1{

    font-size:1.45rem;

}

.certifications-hero p{

    font-size:.84rem;

}

.certification-card{

    padding:15px;

}

.certification-card h3{

    font-size:1rem;

}

.certification-description{

    font-size:.80rem;

}

.certification-meta{

    gap:8px;

}

.meta-item{

    padding:8px;

}

.certification-actions{

    flex-direction:row;

    flex-wrap:wrap;

    gap:8px;

}

.btn-take-test,
.btn-delete-certification{

    width:auto;

    min-width:130px;

    flex:1;

}

}

/*==================================================
SMALL PHONE
==================================================*/

@media(max-width:480px){

.certifications-page{

    padding:16px 0 34px;

}

.certifications-hero{

    padding:16px;

}

.hero-label{

    font-size:.68rem;

}

.certifications-hero h1{

    font-size:1.25rem;

}

.certifications-hero p{

    font-size:.80rem;

}

.certification-card{

    border-radius:16px;

}

.certification-icon{

    width:42px;

    height:42px;

    font-size:20px;

}

.cefr-badge{

    font-size:.68rem;

    padding:4px 9px;

}

.language-title h2{

    font-size:1rem;

}

.language-count{

    font-size:.68rem;

}

.meta-item{

    padding:7px;

}

.meta-item strong{

    font-size:.78rem;

}

.meta-item small{

    font-size:.64rem;

}

.btn-take-test,
.btn-delete-certification{

    height:38px;

    font-size:.78rem;

}

}

/*==================================================
FINAL SPACING
==================================================*/

.language-section:last-child{

    margin-bottom:0;

}

.certification-card>*:last-child{

    margin-bottom:0;

}

.certifications-toolbar:last-child{

    margin-bottom:20px;

}