/*==================================================
NOBO Digital Verification Portal V3
==================================================*/

:root{

--primary:#0B4EA2;
--primary-dark:#083C7E;
--primary-light:#EDF5FF;

--gold:#C6A14A;

--success:#169C5A;
--danger:#D63B42;

--text:#1F2937;
--text-light:#6B7280;

--background:#F4F7FB;

--white:#FFFFFF;

--border:#E6ECF4;

--radius:18px;

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

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Inter,sans-serif;

background:

radial-gradient(circle at top right,
rgba(11,78,162,.06),
transparent 28%),

#F4F7FB;

color:var(--text);

line-height:1.6;

}

#verificationResults{
    display:none;
}

main{

width:min(1350px,94%);

margin:auto;

padding-bottom:60px;

}

section{

    position:relative;

}

section+section{

    margin-top:35px;

}

.portal-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 5%;

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

backdrop-filter:blur(12px);

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

position:sticky;

top:0;

z-index:100;

}

.portal-brand{

display:flex;

align-items:center;

gap:18px;

}

.portal-brand img{

width:72px;

}

.portal-brand h1{

font-size:1.35rem;

color:var(--primary);

font-weight:800;

}

.portal-brand p{

font-size:.88rem;

color:#64748B;

}

.portal-header a{

font-weight:700;

color:var(--primary);

text-decoration:none;

}

.hero{

margin-top:35px;

padding:60px;

border-radius:24px;

background:

linear-gradient(135deg,

#0B4EA2,

#1A74E8);

color:white;

box-shadow:

0 20px 55px rgba(11,78,162,.18);

}

.hero h2{

font-size:2.6rem;

margin-bottom:12px;

font-weight:800;

}

.hero p{

max-width:700px;

opacity:.92;

font-size:1.05rem;

}

.verification-status-card{

    margin-top:28px;

    scroll-margin-top:110px;

    display:flex;

    flex-direction:column;

    gap:18px;

}


.status-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--success);

    color:white;

    font-size:34px;

    font-weight:800;

    flex-shrink:0;

    transform:scale(0);

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

}


.status-banner.neutral{

    border-left-color:var(--primary);

}

.status-banner.neutral .status-icon{

    background:var(--primary);
    transform:scale(1);

}

.status-banner.invalid{

    border-left-color:var(--danger);

}

.status-banner.invalid .status-icon{

    transform:scale(1);

}

.status-banner.unavailable{

    border-left-color:var(--gold);

}

.status-banner.unavailable .status-icon{

    background:var(--gold);
    transform:scale(1);

}

.status-content h3{

font-size:2.2rem;
font-weight:800;
color:var(--primary);
margin-bottom:10px;

}



.document-badge{
    border:1px solid rgba(11,78,162,.08);

    background:#fff;

    padding:18px 28px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    box-shadow:var(--shadow);

}

.document-badge h4{

    margin:0;

    font-size:.75rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#64748B;

}



.document-type-badge{

    
    padding:12px 30px;

    font-size:.92rem;

    letter-spacing:.08em;

    font-weight:700;

    border-radius:999px;

    box-shadow:

        0 8px 18px rgba(11,78,162,.15);

}

.document-type-badge{

    animation:badgePulse 3.5s infinite;

}

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

.information-grid{

margin-top:30px;

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:24px;

}

.provider-grid{

margin-top:35px;

display:grid;

grid-template-columns:

2fr 1fr;

gap:24px;

}





.learner-card h3::before{

    content:"👤";

}

.programme-card h3::before{

    content:"🎓";

}

.document-card h3::before{

    content:"📄";

}

.provider-card h3::before{

    content:"🏢";

}

.issued-card h3::before{

    content:"✍";

}

.registry-card h3::before{

    content:"🛡";

}

.fingerprint-card h3::before{

    content:"🔐";

}

.security-card h3::before{

    content:"✔";

}

.search-card h3::before{

    content:"🔎";

}

.card{

background:white;

border-radius:20px;

box-shadow:var(--shadow);

padding:30px;

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

transition:

        transform .28s ease,

        box-shadow .28s ease,

        border-color .28s ease;

}

.card:hover{

    transform:translateY(-5px);

    border-color:rgba(11,78,162,.18);

    box-shadow:

        0 24px 45px rgba(15,23,42,.10);

}

.card h3{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--primary);

    font-size:1.18rem;

    font-weight:700;

    margin-bottom:24px;

    padding-bottom:14px;

    border-bottom:2px solid #EDF3FA;

}

.card p{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:20px;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(15,23,42,.05);

}

.card p:last-child{

border:none;

}

.card strong{

    color:#64748B;

    font-size:.73rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-weight:700;

}

.card span{

    color:#0F172A;

    font-weight:700;

    font-size:.98rem;

}




.learner-card{
    grid-column:1;
    background:#fff;
    border:1px solid rgba(11,78,162,.10);
    border-top:6px solid var(--primary);
    box-shadow:
        0 20px 45px rgba(11,78,162,.08);
}


.programme-card{
    grid-column:2;

    background:#FBFDFF;

    border-top:6px solid #159957;

}

.document-card{

border-top:5px solid var(--gold);

}

.document-card{

    grid-column:1 / span 2;

}

.document-card{

    background:#FFFFFF;

    border-top:6px solid var(--gold);

}



.provider-card{

    background:linear-gradient(180deg,#FFFFFF,#FAFCFF);

    border:1px solid rgba(11,78,162,.10);

    border-top:5px solid var(--primary);

}

.issued-card{

background:white;
border-top:5px solid var(--gold);

}

/*==================================================
REGISTRY
==================================================*/

.registry-card{

    margin-top:30px;

    background:

        linear-gradient(

            135deg,

            #F7FBFF,

            #FFFFFF

        );

    border-left:8px solid var(--primary);

    border-top:none;

    box-shadow:

        0 18px 45px rgba(11,78,162,.08);

}

.fingerprint-card,
.authenticity-card,
.security-card,
.search-card{
    margin-top:30px;
}

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

.search-card{

    margin-top:40px;

    text-align:center;

}

.search-card input{

    width:min(540px,100%);

    padding:18px 22px;

    border-radius:14px;

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

    font-size:1rem;

    margin:25px auto 18px;

    display:block;

}

.search-card button{

    padding:16px 48px;

    border:none;

    border-radius:14px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #2874E6

        );

    color:white;

    font-weight:700;

    cursor:pointer;

     transition:

        transform .25s,

        box-shadow .25s,

        background .25s;

}

.search-card button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 14px 26px rgba(11,78,162,.25);

}

.search-card button:active{

    transform:scale(.98);

}

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

.security-card{

    margin-top:35px;

}


/*==================================================
AUTHENTICITY
==================================================*/

.authenticity-card{

    display:flex;

    align-items:center;

    gap:30px;

    margin-top:35px;

    background:

        linear-gradient(

            135deg,

            #FFFFFF,

            #FCFCF9

        );

    border-left:8px solid var(--gold);

}

.seal{

    width:90px;

    height:90px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            #D4AF37,

            #B88A28

        );

    color:white;

    font-size:40px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 15px 30px rgba(198,161,74,.35);

}

.authenticity-card h3{

    margin-bottom:10px;

    color:var(--primary);

}

/*==================================================
DIGITAL FINGERPRINT
==================================================*/

.fingerprint-card{

    background:#FFFFFF;

    border-radius:20px;

    padding:32px;

    box-shadow:var(--shadow);

}

#documentFingerprint{

    margin-top:18px;

    padding:24px;

    background:#F8FAFD;

    border:2px dashed #CBD5E1;

    border-radius:16px;

    font-family:Consolas,monospace;

    letter-spacing:.08em;

    color:#334155;

    line-height:1.8;

    word-break:break-all;

}


.search-card input{

    max-width:520px;

    margin:auto;

    display:block;

}

.search-card button{

    margin-top:18px;

}



.status-banner{

background:white;

padding:40px;

border-radius:20px;

display:flex;

align-items:center;

gap:22px;

border-left:8px solid var(--success);

box-shadow:var(--shadow);
transition:
        box-shadow .45s ease,
        border-color .45s ease;
}




.status-content{

    flex:1;

}


.status-content p{

    font-size:1rem;
    color:#5B6675;
    max-width:700px;

}




/*==================================================
PRIMARY INFORMATION LAYOUT
==================================================*/

.information-grid{

    margin-top:30px;

    display:grid;

    grid-template-columns:7fr 5fr;

    gap:24px;

}

#documentFingerprint{

    background:#F8FAFD;

    border:1px dashed #CBD5E1;

    border-radius:14px;

    padding:22px;

    font-family:Consolas,monospace;

    font-size:.82rem;

    letter-spacing:.08em;

    color:#334155;

}

/*==================================================
SECURE REGISTRY BANNER
==================================================*/

.registry-lock{

    margin:22px 0 32px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 24px;

    border-left:6px solid var(--primary);

    background:#F7FBFF;

    border-radius:16px;

    box-shadow:var(--shadow);

}

.registry-lock{

    position:relative;

    overflow:hidden;

}

.registry-lock::before{

    content:"";

    position:absolute;

    left:-150px;

    top:0;

    width:90px;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.65),

            transparent

        );

    animation:shine 7s infinite;

}

@keyframes shine{

    0%{

        left:-150px;

    }

    100%{

        left:120%;

    }

}

.lock-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    flex-shrink:0;

}

.registry-lock h4{

    color:var(--primary);

    margin-bottom:4px;

    font-size:1rem;

}

.registry-lock p{

    color:#64748B;

    font-size:.92rem;

}

/*==================================================
TRUST INDICATORS
==================================================*/

.trust-grid{

    display:grid;

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

    gap:22px;

    margin-top:28px;

}

.trust-item{

    background:white;

    border-radius:18px;

    padding:28px;

    text-align:center;

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

    box-shadow:var(--shadow);

    transition:.3s;

}

.trust-item:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 40px rgba(11,78,162,.12);

}

.trust-item div{

    font-size:2rem;

    margin-bottom:14px;

}

.trust-item h4{

    color:var(--primary);

    margin-bottom:6px;

}

.trust-item p{

    color:#64748B;

    font-size:.9rem;

}


/*==================================================
PAGE ENTRANCE ANIMATIONS
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(24px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.hero{

    animation:fadeUp .5s ease forwards;

}


.registry-lock{

    animation:fadeUp .65s ease forwards;

}

.information-grid{

    animation:fadeUp .75s ease forwards;

}

.provider-grid{

    animation:fadeUp .9s ease forwards;

}

.registry-card{

    animation:fadeUp 1.0s ease forwards;

}

.fingerprint-card{

    animation:fadeUp 1.1s ease forwards;

}

.authenticity-card{

    animation:fadeUp 1.2s ease forwards;

}

.security-card{

    animation:fadeUp 1.3s ease forwards;

}

.search-card{

    animation:fadeUp 1.4s ease forwards;

}

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

.success-pop{

    animation:verifySuccess .65s ease;

}

@keyframes verifySuccess{

0%{

transform:scale(.5);
opacity:0;

}

35%{

transform:scale(1.18);

}

60%{

transform:scale(.95);

}

100%{

transform:scale(1);

}

}

.status-icon.verified{

animation:verifySuccess .9s ease;

box-shadow:

0 0 25px rgba(22,156,90,.45);

}

.status-icon.success-pop{

    animation:verifyPop .85s cubic-bezier(.22,1,.36,1);

}

/*==================================================
STATUS BANNER
==================================================*/

.status-banner.verified{

    border-left-color:#169C5A;

    box-shadow:

        0 0 0 1px rgba(22,156,90,.15),

        0 16px 40px rgba(22,156,90,.10);

}

/* Tick keeps glowing */

.status-banner.verified .status-icon{

    background:#169C5A;
    transform:scale(1);

    box-shadow:

        0 0 0 6px rgba(22,156,90,.12),

        0 0 28px rgba(22,156,90,.28);

}

@keyframes verifyPop{

0%{

    transform:scale(.55);

    opacity:.25;

}

40%{

    transform:scale(1.22);

}

65%{

    transform:scale(.94);

}

100%{

    transform:scale(1);

    opacity:1;

}

}




/*==================================================
REGISTRY VERIFICATION CERTIFICATE
==================================================*/

.registry-certificate-card{

    margin:35px 0;

    background:#fff;

    border-radius:22px;

    padding:32px;

    display:flex;

    align-items:center;

    gap:28px;

    border-top:5px solid var(--gold);

    box-shadow:var(--shadow);

}

.certificate-icon{

    width:74px;

    height:74px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--gold),
        #D6B15B
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    flex-shrink:0;

}

.certificate-content{

    flex:1;

}

.certificate-content h3{

    color:var(--primary);

    font-size:1.35rem;

    margin-bottom:8px;

    font-weight:800;

}

.certificate-content p{

    color:#64748B;

    margin-bottom:8px;

    max-width:700px;

}

.certificate-content small{

    color:#94A3B8;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-weight:700;

}

.download-certificate-btn{

    border:none;

    background:linear-gradient(
        135deg,
        var(--primary),
        #1A74E8
    );

    color:white;

    padding:16px 28px;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

    white-space:nowrap;

}

.download-certificate-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(11,78,162,.25);

}







@media(max-width:900px){

.trust-grid{

    grid-template-columns:1fr;

}

.provider-grid{

    grid-template-columns:1fr;

}


.authenticity-card{

    flex-direction:column;

    text-align:center;

}

/*==================================================
MOBILE INFORMATION LAYOUT
==================================================*/

    .registry-certificate-card{

    flex-direction:column;

    text-align:center;

    padding:24px;

}

.download-certificate-btn{

    width:100%;

}

    .information-grid{

        display:flex;

        flex-direction:column;

        gap:18px;

    }

    .learner-card,
    .programme-card,
    .document-card{

        width:100%;

        min-width:0;

    }

    .card p{

        grid-template-columns:1fr;

        gap:6px;

    }

    .card span{

        text-align:left;

        word-break:break-word;

        overflow-wrap:anywhere;

    }

.card.collapsible{

    overflow:hidden;

}

.card.collapsible h3{

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:0;

    padding:4px 0;

}

.card.collapsible h3::after{

    display:block;

    content:"+";

    font-size:1.5rem;

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.card.collapsible.active h3::after{

    transform:rotate(45deg);

}

.collapse-content{
    max-height:none;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .45s ease,
        opacity .30s ease;
}

.card.collapsible.active .collapse-content{
    max-height:700px;
    opacity:1;
    margin-top:20px;
}

.card.collapsible .collapse-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .45s ease,
        opacity .35s ease;
}

.card.collapsible.active .collapse-content{
    max-height:800px;
    opacity:1;
}

}



@media (max-width:768px){

    .portal-header{

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:18px;

    }

    .portal-brand{

        flex-direction:column;

        text-align:center;

        gap:16px;

    }

    .return-link{

        display:inline-flex;

        align-items:center;

        justify-content:center;

        white-space:nowrap;

        padding:10px 18px;

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

        border-radius:999px;

        font-size:.95rem;

        margin-top:8px;

    }

}