.certificate-result-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.certificate-result-modal.show{display:flex}
.certificate-result-modal__dialog{
  width:min(94vw,760px);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(191,215,48,.14);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}
.certificate-result-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:17px 20px;border-bottom:1px solid rgba(255,255,255,.06)
}
.certificate-result-modal__title{font-weight:900;font-size:15px;color:inherit}
.certificate-result-modal__close{border:0;background:transparent;color:#aaa;font-size:25px;cursor:pointer}
.certificate-result-table{width:100%;border-collapse:collapse}
.certificate-result-table th,.certificate-result-table td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px;vertical-align:top;text-align:right}
.certificate-result-table th{width:34%;font-weight:800;color:#b5b5b5}
.certificate-result-table td{font-weight:700;color:inherit;line-height:1.9;word-break:break-word}
.certificate-result-modal__foot{display:flex;justify-content:flex-start;padding:16px 20px}
.certificate-download-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 15px;background:#a21c43;color:white!important;font-size:12px;font-weight:800}
.certificate-download-link:hover{opacity:.87}

/* Merged certificate verification + OTP + physical request */
.certificate-auth-methods{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:stretch}
.certificate-auth-methods-1{display:grid;}
.certificate-auth-method-card{background:var(--background,#fff);border:1px solid rgba(120,120,120,.16);border-radius:24px;padding:18px;box-shadow:0 12px 35px rgba(0,0,0,.04)}
.certificate-auth-method-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}
.certificate-auth-method-head h3{font-size:15px;font-weight:900;margin:3px 0 0}.certificate-auth-method-kicker{font-size:10px;font-weight:800;color:#a21c43}
.certificate-auth-method-icon{width:42px;height:42px;border-radius:15px;background:rgba(239,68,68,.09);color:#a21c43;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}







.certificate-auth-note{
    display:flex;
    gap:10px;
    align-items:flex-start;

    padding:12px 13px;

    border:1px solid rgba(239,68,68,.12);
    background:rgba(239,68,68,.045);

    border-radius:15px;

    font-size:11px;
    line-height:2;
    color:inherit;
}

.certificate-auth-note>span{
    flex:0 0 auto;

    color:#a21c43;

    font-size:14px;
    line-height:2;
}

/* Main content */
.certificate-auth-note>div{
    flex:1;
    min-width:0;
}

/* "ملاحظات :" */
.certificate-auth-note>div>div:first-child{
    display:flex;
    align-items:center;

    margin-bottom:8px;

    font-size:14px !important;
    font-weight:900;
    line-height:1.8;
    text-align:right;
}

/* Text paragraphs */
.certificate-auth-note p{
    margin:0;
}

.certificate-auth-note p+p{
    margin-top:5px;
}


/* Secondary button */

.certificate-auth-note .certificate-modal-secondary{
    display:flex;
    align-items:center;
    justify-content:center;

    width:max-content;

    height:40px;

    border:1px solid rgba(120,120,120,.18);

    background:transparent;

    border-radius:12px;

    padding:0 14px;

    font-size:11px;
    font-weight:800;

    color:inherit;

    cursor:pointer;

    /* Push to the literal left in RTL */
    margin-top:14px;
    margin-right:auto;
    margin-left:0;

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

.certificate-auth-note .certificate-modal-secondary:hover{
    color:#a21c43;

    border-color:rgba(162,28,67,.25);

    background:rgba(162,28,67,.045);

    transform:translateY(-1px);

    box-shadow:0 6px 16px rgba(162,28,67,.05);
}

.certificate-auth-note .certificate-modal-secondary:active{
    transform:translateY(0);
}




.certificate-auth-qr-content{display:flex;flex-direction:column;gap:14px;height:calc(100% - 59px)}.certificate-auth-qr-image{display:flex;align-items:center;justify-content:center;min-height:140px}.certificate-auth-qr-image img{max-height:210px;object-fit:contain}
.certificate-auth-divider{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#9ca3af;font-size:10px}.certificate-auth-divider span{width:1px;height:70px;background:rgba(120,120,120,.22)}
.certificate-physical-form .certificate-auth-method-card{max-width:100%}.certificate-physical-agreement{margin-top:0px;padding:13px 14px;background:rgba(15,23,42,.035);border:1px solid rgba(120,120,120,.13);border-radius:15px}
.certificate-result-modal__content{padding:18px 20px 20px}.certificate-result-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.certificate-result-summary>div{padding:11px 13px;border-radius:14px;background:rgba(127,127,127,.07);display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:11px}.certificate-result-summary span{color:#8b8b8b}.certificate-result-summary strong{font-weight:900}
.certificate-result-table-wrap{overflow:auto}.certificate-result-table--cards{min-width:760px}.certificate-result-table--cards th,.certificate-result-table--cards td{width:auto}.certificate-result-table--cards th{font-size:10px;color:#7c7c7c}.certificate-result-table--cards td{font-size:11px}.certificate-file-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;background:rgba(34,197,94,.1);color:#16a34a;font-size:10px;font-weight:800}.certificate-download-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:8px 10px;background:#a21c43;color:#fff!important;font-size:10px;font-weight:900;text-decoration:none}.certificate-download-link:hover{opacity:.86}
.certificate-otp-view{
    text-align:center;
    padding:10px 0 4px;

    animation:certificateOtpFadeUp .45s ease both;
}

.certificate-otp-icon{
    width:58px;
    height:58px;

    margin:0 auto 12px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(162,28,67,.09);
    color:#a21c43;

    font-size:20px;

    box-shadow:0 8px 20px rgba(162,28,67,.06);

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

.certificate-otp-view:hover .certificate-otp-icon{
    transform:translateY(-2px) scale(1.04);
    background:rgba(162,28,67,.13);
    box-shadow:0 10px 24px rgba(162,28,67,.1);
}

.certificate-otp-view h4{
    font-size:16px;
    font-weight:900;
    line-height:1.8;

    margin:0 0 7px;
}

.certificate-otp-view p{
    font-size:12px;
    line-height:2;

    color:#7d7d7d;

    margin:0 auto;

    max-width:440px;
}


/* OTP inputs */

.certificate-otp-inputs{
    display:flex;
    justify-content:center;
    gap:9px;

    margin:21px auto 11px;
}

.certificate-otp-input{
    width:49px;
    height:56px;

    border:1px solid rgba(120,120,120,.2);

    background:rgba(127,127,127,.06);

    border-radius:14px;

    text-align:center;

    font-size:21px;
    font-weight:900;

    outline:none;

    color:inherit;

    caret-color:#a21c43;

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

.certificate-otp-input:hover{
    border-color:rgba(162,28,67,.3);
    background:rgba(162,28,67,.035);
}

.certificate-otp-input:focus{
    border-color:#a21c43;

    background:rgba(162,28,67,.045);

    box-shadow:
        0 0 0 3px rgba(162,28,67,.09),
        0 6px 16px rgba(162,28,67,.06);

    transform:translateY(-2px);
}

.certificate-otp-input:not(:placeholder-shown){
    border-color:rgba(162,28,67,.25);
}


/* Hint */

.certificate-otp-hint{
    font-size:11px !important;
    line-height:1.9 !important;

    color:#858585;

    transition:color .2s ease;
}



/* Dark mode */

.dark .certificate-otp-icon{
    background:rgba(162,28,67,.13);
    box-shadow:0 8px 20px rgba(162,28,67,.08);
}

.dark .certificate-otp-view:hover .certificate-otp-icon{
    background:rgba(162,28,67,.18);
}

.dark .certificate-otp-input{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.12);
}

.dark .certificate-otp-input:hover{
    background:rgba(162,28,67,.07);
    border-color:rgba(162,28,67,.3);
}

.dark .certificate-otp-input:focus{
    background:rgba(162,28,67,.08);
    border-color:#a21c43;
    box-shadow:
        0 0 0 3px rgba(162,28,67,.13),
        0 6px 16px rgba(0,0,0,.15);
}

.dark .certificate-modal-secondary{
    border-color:rgba(255,255,255,.13);
}

.dark .certificate-modal-secondary:hover{
    color:#d94b72;
    border-color:rgba(162,28,67,.35);
    background:rgba(162,28,67,.09);
}


/* Animation */

@keyframes certificateOtpFadeUp{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* Small screens */

@media (max-width:420px){

    .certificate-otp-inputs{
        gap:6px;
    }

    .certificate-otp-input{
        width:44px;
        height:52px;
        font-size:19px;
        border-radius:13px;
    }

    .certificate-otp-view h4{
        font-size:15px;
    }

    .certificate-otp-view p{
        font-size:11px;
    }
}


/* Reduced motion */

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

    .certificate-otp-view,
    .certificate-otp-icon,
    .certificate-otp-input,
    .certificate-modal-secondary{
        animation:none;
        transition:none;
    }
}
.certificate-empty-view{padding:35px 10px;text-align:center;font-size:12px;color:#777}.certificate-qr-scanner{text-align:center}.certificate-qr-video-wrap{position:relative;background:#050505;border-radius:20px;overflow:hidden;aspect-ratio:4/3;max-height:62vh}.certificate-qr-video-wrap video{width:100%;height:100%;object-fit:cover;display:block}.certificate-qr-reader{position:absolute;inset:0}.certificate-qr-reader video{width:100%!important;height:100%!important;object-fit:cover!important}.certificate-qr-frame{position:absolute;inset:16%;border:2px solid rgba(255,255,255,.82);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.15);pointer-events:none}.certificate-qr-frame span{position:absolute;top:50%;left:8%;right:8%;height:2px;background:#a21c43;box-shadow:0 0 12px rgba(239,68,68,.75);animation:certificateQrScan 1.7s ease-in-out infinite}.certificate-qr-scanner>p{font-size:11px;color:#737373;line-height:1.9;margin:12px 0}.certificate-qr-scanner-actions{display:flex;justify-content:center}.certificate-qr-reader #qr-shaded-region{border-color:#a21c43!important}
@keyframes certificateQrScan{0%,100%{transform:translateY(-45px);opacity:.65}50%{transform:translateY(45px);opacity:1}}
@media (max-width:900px){.certificate-auth-methods{grid-template-columns:1fr}.certificate-auth-divider{flex-direction:row}.certificate-auth-divider span{width:100%;height:1px}.certificate-auth-qr-content{height:auto}.certificate-result-modal__dialog{width:min(96vw,900px)}}
@media (max-width:560px){.certificate-auth-method-card{padding:15px;border-radius:20px}.certificate-result-summary{grid-template-columns:1fr}.certificate-otp-input{width:42px;height:50px}.certificate-otp-inputs{gap:6px}}

.dark .certificate-result-modal__dialog{background:#111827;color:#f3f4f6}.dark .certificate-result-modal__head{border-bottom-color:rgba(255,255,255,.08)}.dark .certificate-result-table th{color:#9ca3af}.dark .certificate-result-table td{border-bottom-color:rgba(255,255,255,.07)}

.certificate-auth-legacy-image{margin-top:2px;text-align:center}.certificate-auth-legacy-image img{max-height:350px;object-fit:contain}.certificate-auth-method-card .certificate-modal-secondary{margin-top:10px}
.certificate-inline-results{
    margin-top:24px;
    padding-top:6px;
    border-top:1px solid rgba(162,28,67,.14);

    animation:certificateResultsFadeUp .45s ease both;
}

.certificate-inline-results .certificate-result-summary{
    margin-bottom:18px;

    color:inherit;
    font-size:13px;
    font-weight:700;

    transition:color .25s ease;
}

.certificate-inline-results .certificate-result-table-wrap{
    border:1px solid rgba(162,28,67,.12);
    border-radius:22px;
    overflow:hidden;

    background:var(--secondary);

    box-shadow:
        0 16px 40px rgba(15,23,42,.06),
        0 4px 14px rgba(162,28,67,.035);

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

.certificate-inline-results .certificate-result-table-wrap:hover{
    border-color:rgba(162,28,67,.2);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08),
        0 6px 18px rgba(162,28,67,.05);
}

.certificate-inline-results .certificate-result-table{
    margin:0;
    width:100%;
}


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

.certificate-inline-results .certificate-result-table thead th{
    position:relative;

    background:
        linear-gradient(
            135deg,
            rgba(162,28,67,.08),
            rgba(162,28,67,.035)
        );

    color:inherit;

    font-size:12px;
    font-weight:850;

    text-align:center;
    vertical-align:middle;

    padding:13px 12px;

    border-bottom:1px solid rgba(162,28,67,.12);

    transition:
        background-color .25s ease,
        color .25s ease;
}


/* Header icons */

.certificate-inline-results .certificate-result-table thead th::before{
    display:inline-block;

    font-family:"Font Awesome 6 Free";
    font-weight:900;

    color:#a21c43;

    font-size:11px;

    margin-left:7px;

    opacity:.9;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.certificate-inline-results .certificate-result-table thead th:hover::before{
    transform:translateY(-1px) scale(1.08);
    opacity:1;
}


/*
   Column icons
   1 = certificate / title
   2 = national ID
   3 = phone / contact
   4 = status
   5 = date
   6 = actions
*/

.certificate-inline-results .certificate-result-table thead th:nth-child(1)::before{
    content:"\f02e";
}

.certificate-inline-results .certificate-result-table thead th:nth-child(2)::before{
    content:"\f2bb";
}

.certificate-inline-results .certificate-result-table thead th:nth-child(3)::before{
    content:"\f095";
}

.certificate-inline-results .certificate-result-table thead th:nth-child(4)::before{
    content:"\f058";
}

.certificate-inline-results .certificate-result-table thead th:nth-child(5)::before{
    content:"\f073";
}

.certificate-inline-results .certificate-result-table thead th:nth-child(6)::before{
    content:"\f0c9";
}


/* ========================================
   TABLE BODY
======================================== */

.certificate-inline-results .certificate-result-table tbody tr{
    transition:
        background-color .25s ease,
        transform .25s ease;
}

.certificate-inline-results .certificate-result-table tbody tr:hover{
    background:rgba(162,28,67,.035);
}

.certificate-inline-results .certificate-result-table tbody td{
    font-size:12px;
    font-weight:600;

    text-align:center;
    vertical-align:middle;

    padding:12px;

    transition:
        color .25s ease,
        background-color .25s ease;
}

.certificate-inline-results .certificate-result-table tbody tr:hover td{
    color:inherit;
}


/* Accent on first meaningful cell */

.certificate-inline-results .certificate-result-table tbody tr:hover td:first-child{
    color:#a21c43;
}


/* Center everything inside cells */

.certificate-inline-results .certificate-result-table tbody td > *{
    margin-left:auto;
    margin-right:auto;
}


/* Links */

.certificate-inline-results .certificate-result-table a{
    color:#a21c43;
    font-weight:800;

    transition:
        color .2s ease,
        opacity .2s ease,
        transform .2s ease;
}

.certificate-inline-results .certificate-result-table a:hover{
    color:#821735;
    opacity:.9;
    transform:translateY(-1px);
}


/* Buttons */

.certificate-inline-results .certificate-result-table button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}


/* ========================================
   STATUS / BADGES
======================================== */

.certificate-inline-results .certificate-result-table .badge,
.certificate-inline-results .certificate-result-table .status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border-color:rgba(162,28,67,.15);

    background:rgba(162,28,67,.08);

    color:#a21c43;

    text-align:center;
}


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

@media (max-width:767px){

    .certificate-inline-results{
        margin-top:20px;
        padding-top:5px;
    }

    .certificate-inline-results .certificate-result-summary{
        margin-bottom:14px;
        font-size:12px;
    }

    .certificate-inline-results .certificate-result-table-wrap{
        border-radius:18px;
    }

    .certificate-inline-results .certificate-result-table,
    .certificate-inline-results .certificate-result-table tbody,
    .certificate-inline-results .certificate-result-table tr,
    .certificate-inline-results .certificate-result-table td{
        display:block;
        width:100%;
    }

    .certificate-inline-results .certificate-result-table thead{
        display:none;
    }

    .certificate-inline-results .certificate-result-table tr{
        position:relative;

        padding:14px 15px;

        border-bottom:1px solid rgba(162,28,67,.1);

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

    .certificate-inline-results .certificate-result-table tr:hover{
        background:rgba(162,28,67,.035);
    }

    .certificate-inline-results .certificate-result-table tr:last-child{
        border-bottom:0;
    }

    .certificate-inline-results .certificate-result-table td{
        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:16px;

        padding:9px 0;

        border:0;

        font-size:12px;
        line-height:1.8;

        text-align:center;
    }

    .certificate-inline-results .certificate-result-table td::before{
        content:attr(data-label);

        flex:0 0 90px;

        color:var(--muted);

        font-size:11px;
        font-weight:750;

        text-align:right;

        transition:color .2s ease;
    }

    .certificate-inline-results .certificate-result-table td:hover::before{
        color:#a21c43;
    }

    .certificate-inline-results .certificate-result-table td > *{
        min-width:0;

        margin-left:0;
        margin-right:0;

        text-align:center;

        word-break:break-word;
    }
}


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

.dark .certificate-inline-results{
    border-top-color:rgba(162,28,67,.2);
}

.dark .certificate-inline-results .certificate-result-table-wrap{
    border-color:rgba(162,28,67,.14);

    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        0 4px 14px rgba(162,28,67,.04);
}

.dark .certificate-inline-results .certificate-result-table-wrap:hover{
    border-color:rgba(162,28,67,.25);
}

.dark .certificate-inline-results .certificate-result-table thead th{
    background:
        linear-gradient(
            135deg,
            rgba(162,28,67,.12),
            rgba(162,28,67,.045)
        );

    border-bottom-color:rgba(162,28,67,.16);
}

.dark .certificate-inline-results .certificate-result-table tbody tr:hover{
    background:rgba(162,28,67,.055);
}

.dark .certificate-inline-results .certificate-result-table tbody tr{
    border-bottom-color:rgba(162,28,67,.12);
}

.dark .certificate-inline-results .certificate-result-table .badge,
.dark .certificate-inline-results .certificate-result-table .status{
    background:rgba(162,28,67,.12);

    color:#d94b72;

    border-color:rgba(162,28,67,.2);
}


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

@keyframes certificateResultsFadeUp{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ========================================
   REDUCED MOTION
======================================== */

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

    .certificate-inline-results,
    .certificate-inline-results .certificate-result-table-wrap,
    .certificate-inline-results .certificate-result-table tr,
    .certificate-inline-results .certificate-result-table td,
    .certificate-inline-results .certificate-result-table a,
    .certificate-inline-results .certificate-result-table thead th::before{
        animation:none;
        transition:none;
    }
}

.certificate-detail-overview{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    margin-bottom:14px;
}

.certificate-detail-overview>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border:1px solid rgba(162,28,67,.12);
    border-radius:15px;
    background:rgba(162,28,67,.045);
    font-size:12px;
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
    animation:certificateDetailFadeUp .45s ease both;
}

.certificate-detail-overview>div:hover{
    transform:translateY(-2px);
    background:rgba(162,28,67,.07);
    border-color:rgba(162,28,67,.2);
    box-shadow:0 8px 20px rgba(162,28,67,.07);
}

.certificate-detail-overview span{
    display:flex;
    align-items:center;
    gap:6px;
    color:#777;
    font-size:11px;
    font-weight:700;
}

.certificate-detail-overview span::before{
    content:"\f05a";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:#a21c43;
    font-size:10px;
    opacity:.85;
}

.certificate-detail-overview strong{
    font-size:12px;
    font-weight:900;
    color:inherit;
}

.certificate-detail-list{
    display:grid;
    gap:12px;
}

.certificate-detail-card{
    padding:16px;
    border:1px solid rgba(120,120,120,.14);
    border-radius:20px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.98),
        rgba(248,250,252,.98)
    );
    box-shadow:0 12px 30px rgba(15,23,42,.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
    animation:certificateDetailFadeUp .5s ease both;
}

.certificate-detail-card:hover{
    transform:translateY(-3px);
    border-color:rgba(162,28,67,.14);
    box-shadow:
        0 16px 38px rgba(15,23,42,.09),
        0 5px 15px rgba(162,28,67,.035);
}

.certificate-detail-card__top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.certificate-detail-card__number{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:rgba(162,28,67,.1);
    color:#a21c43;
    font-size:13px;
    font-weight:900;
    transition:
        transform .3s ease,
        background-color .3s ease,
        color .3s ease;
}

.certificate-detail-card:hover .certificate-detail-card__number{
    transform:scale(1.07) rotate(-3deg);
    background:#a21c43;
    color:#fff;
}

.certificate-detail-card__heading{
    min-width:0;
    flex:1;
}

.certificate-detail-card__eyebrow{
    display:flex;
    align-items:center;
    gap:5px;
    margin-bottom:3px;
    color:#969696;
    font-size:10px;
    font-weight:800;
}

.certificate-detail-card__eyebrow::before{
    content:"\f02e";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:#a21c43;
    font-size:9px;
}

.certificate-detail-card__heading h4{
    margin:0;
    font-size:14px;
    font-weight:900;
    line-height:1.8;
}

.certificate-detail-card__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.certificate-detail-item{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:45px;
    padding:11px 13px;
    border:1px solid transparent;
    border-radius:14px;
    background:rgba(15,23,42,.035);
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.certificate-detail-item:hover{
    transform:translateY(-2px);
    background:rgba(162,28,67,.045);
    border-color:rgba(162,28,67,.09);
    box-shadow:0 7px 18px rgba(15,23,42,.04);
}

.certificate-detail-item span{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    color:#858585;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

.certificate-detail-item span::before{
    content:"\f111";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:#a21c43;
    font-size:5px;
    opacity:.75;
}

.certificate-detail-item strong{
    display:block;
    min-width:0;
    color:inherit;
    font-size:12px;
    font-weight:850;
    line-height:1.9;
    text-align:left;
    word-break:break-word;
}


/* Wide item */

.certificate-detail-item--wide{
    grid-column:1 / -1;
    position:relative;
    display:block;
    padding:14px 15px 15px 17px;
    overflow:hidden;
    border:1px solid rgba(162,28,67,.1);
    background:linear-gradient(
        135deg,
        rgba(162,28,67,.06),
        rgba(162,28,67,.025)
    );
}

.certificate-detail-item--wide::after{
    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    right:0;
    width:3px;
    border-radius:10px 0 0 10px;
    background:#a21c43;
    opacity:.75;
    transition:
        height .3s ease,
        opacity .3s ease;
}

.certificate-detail-item--wide:hover{
    background:linear-gradient(
        135deg,
        rgba(162,28,67,.085),
        rgba(162,28,67,.035)
    );
    border-color:rgba(162,28,67,.16);
    box-shadow:0 8px 22px rgba(162,28,67,.055);
}

.certificate-detail-item--wide span{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:6px;
    color:#777;
    font-size:11px;
    font-weight:800;
}

.certificate-detail-item--wide span::before{
    content:"\f05a";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:#a21c43;
    font-size:10px;
}

.certificate-detail-item--wide strong{
    display:block;
    font-size:12.5px;
    font-weight:800;
    line-height:2;
    text-align:right;
}


/* Dark mode */

.dark .certificate-detail-card{
    background:linear-gradient(
        180deg,
        #172033,
        #111827
    );
    border-color:rgba(255,255,255,.08);
}

.dark .certificate-detail-card:hover{
    border-color:rgba(162,28,67,.18);
}

.dark .certificate-detail-item{
    background:rgba(255,255,255,.045);
}

.dark .certificate-detail-item:hover{
    background:rgba(162,28,67,.08);
}

.dark .certificate-detail-item--wide{
    background:linear-gradient(
        135deg,
        rgba(162,28,67,.1),
        rgba(255,255,255,.025)
    );
    border-color:rgba(162,28,67,.13);
}

.dark .certificate-detail-overview>div{
    background:rgba(162,28,67,.08);
}


/* Animations */

@keyframes certificateDetailFadeUp{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.certificate-detail-card:nth-child(1){animation-delay:.03s}
.certificate-detail-card:nth-child(2){animation-delay:.07s}
.certificate-detail-card:nth-child(3){animation-delay:.11s}
.certificate-detail-card:nth-child(4){animation-delay:.15s}
.certificate-detail-card:nth-child(5){animation-delay:.19s}


/* Mobile */

@media (max-width:560px){

    .certificate-detail-overview{
        grid-template-columns:1fr;
    }

    .certificate-detail-card{
        padding:14px;
    }

    .certificate-detail-card__top{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .certificate-detail-card__heading{
        order:2;
        flex:1 1 calc(100% - 52px);
    }

    .certificate-detail-card__top .certificate-file-badge{
        margin-right:auto;
    }

    .certificate-detail-card__grid{
        grid-template-columns:1fr;
    }

    .certificate-detail-item--wide{
        grid-column:auto;
    }
}


/* Reduced motion */

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

    .certificate-detail-card,
    .certificate-detail-item,
    .certificate-detail-overview>div,
    .certificate-detail-card__number{
        animation:none;
        transition:none;
    }
}