.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;
    }
}
/* =========================================================
   CERTIFICATE REQUEST FOOTER
   Desktop:
   Right — delivery method above agreement
   Left  — price notice beside submit button
   Responsive — stack all sections on smaller screens
========================================================= */

.certificate-physical-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(225px, 290px) auto;
    grid-template-areas:
        "delivery notice submit"
        "agreement notice submit";

    align-items: center;
    justify-content: stretch;
    gap: 12px 16px;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    direction: rtl;
}

/* ---------------------------------------------------------
   1. DELIVERY METHOD — STYLED CARD
--------------------------------------------------------- */

.certificate-physical-footer > .certificate-delivery-method {
    grid-area: delivery;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;

    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;

    box-sizing: border-box;
    border: 1px solid rgba(139, 30, 66, .16);
    border-radius: 12px;

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

    box-shadow:
        0 3px 12px rgba(48, 28, 38, .045),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Legend / card heading */
.certificate-physical-footer .certificate-delivery-method legend {
    float: none;
    display: block;

    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;

    color: #5a243b;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.7;
}

/* Radio options container */
.certificate-physical-footer .certificate-delivery-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 20px;

    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Individual radio option */
.certificate-physical-footer .certificate-delivery-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    color: #49414a;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.7;
    white-space: nowrap;

    cursor: pointer;
    transition: color .2s ease;
}

.certificate-physical-footer .certificate-delivery-option:hover {
    color: #8b1e42;
}

/* Radio input */
.certificate-physical-footer .certificate-delivery-option input {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;
    margin: 0;

    accent-color: #8b1e42;
    cursor: pointer;
}

/* Keyboard accessibility */
.certificate-physical-footer .certificate-delivery-option input:focus-visible {
    outline: 2px solid #c29a52;
    outline-offset: 3px;
}

/* Subtle highlight when the card contains focus */
.certificate-physical-footer
.certificate-delivery-method:focus-within {
    border-color: rgba(139, 30, 66, .32);

    box-shadow:
        0 4px 14px rgba(48, 28, 38, .06),
        0 0 0 3px rgba(139, 30, 66, .045);
}

/* Compact spacing on mobile */
@media (max-width: 480px) {
    .certificate-physical-footer > .certificate-delivery-method {
        padding: 11px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .certificate-physical-footer .certificate-delivery-options {
        gap: 8px 15px;
    }
}

/* Make delivery method card fit its content */
.certificate-physical-footer > .certificate-delivery-method {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0;

    justify-self: start;
    align-self: start;
}

/* Keep the options compact */
.certificate-physical-footer .certificate-delivery-options {
    width: fit-content;
    max-width: 100%;
}

/* ---------------------------------------------------------
   2. AGREEMENT — DIRECTLY BELOW DELIVERY METHOD
--------------------------------------------------------- */

.certificate-physical-footer > .certificate-physical-agreement {
    grid-area: agreement;

    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0;

    align-self: start;
    justify-self: stretch;
}

.certificate-physical-footer .certificate-physical-agreement label {
    display: flex;
    align-items: flex-start;
    gap: 8px !important;

    width: 100%;
    min-width: 0;
    cursor: pointer;
}

.certificate-physical-footer .certificate-physical-agreement label input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.certificate-physical-footer .certificate-physical-agreement label span {
    min-width: 0;

    color: var(--foreground, #374151);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    white-space: normal;
}

/* ---------------------------------------------------------
   3. PRICE NOTICE — LEFT SIDE, CENTERED VERTICALLY
--------------------------------------------------------- */

.certificate-physical-footer > .certificate-delivery-price-notice {
    grid-area: notice;

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

    box-sizing: border-box;
    width: 100%;
    min-width: 300px;
    max-width: 310px;
    padding: 10px 12px;

    border: 1px solid #bfdbfe;
    border-radius: 13px;

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

    color: #1e40af;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.9;
    text-align: center;

    overflow-wrap: anywhere;

    box-shadow: 0 5px 16px rgba(30, 64, 175, 0.08);

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

/* Selected: downloadable certificate */

.certificate-physical-footer
> .certificate-delivery-price-notice[data-delivery-type="file"] {
    border-color: #a7f3d0;

    background: linear-gradient(
        135deg,
        #ecfdf5 0%,
        #f7fffb 100%
    );

    color: #047857;
}

/* ---------------------------------------------------------
   4. SUBMIT BUTTON — BESIDE THE PRICE NOTICE
--------------------------------------------------------- */

.certificate-physical-footer > button[type="submit"] {
    grid-area: submit;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    align-self: center;
    justify-self: start;

    width: auto;
    min-width: 145px;
    min-height: 44px;
    margin: 0;
    padding: 0 20px;

    white-space: nowrap;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   TABLET AND SMALLER SCREENS
   Stack delivery, agreement, notice, and submit button
--------------------------------------------------------- */

@media (max-width: 1024px) {
    .certificate-physical-footer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "delivery"
            "agreement"
            "notice"
            "submit";

        align-items: stretch;
        gap: 14px;

        width: 100%;
    }

    .certificate-physical-footer > .certificate-delivery-method {
        width: 100%;
    }

    .certificate-physical-footer > .certificate-physical-agreement {
        width: 100% !important;
        max-width: 100%;
    }

    .certificate-physical-footer > .certificate-delivery-price-notice {
        width: 100%;
        max-width: none;
        text-align: right;
    }

    .certificate-physical-footer > button[type="submit"] {
        width: 100%;
        min-width: 0;

        align-self: stretch;
        justify-self: stretch;
    }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 560px) {
    .certificate-physical-footer {
        gap: 12px;
    }

    .certificate-physical-footer > .certificate-delivery-method {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .certificate-physical-footer .certificate-delivery-options {
        gap: 10px 14px;
    }

    .certificate-physical-footer .certificate-delivery-option {
        white-space: normal;
    }

    .certificate-physical-footer .certificate-physical-agreement label span {
        font-size: 11px;
        white-space: normal;
    }

    .certificate-physical-footer > .certificate-delivery-price-notice {
        padding: 10px 12px;
        text-align: right;
    }
}

/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .certificate-physical-footer > .certificate-delivery-price-notice {
        transition: none;
    }
}

/* =========================================================
   CERTIFICATE FOOTER — DESKTOP REFINEMENTS
========================================================= */

@media (min-width: 1025px) {

    /* Delivery method: legend and radio options on one row */
    .certificate-physical-footer > .certificate-delivery-method {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;

        width: auto;
        min-width: 0;
    }

    .certificate-physical-footer .certificate-delivery-method legend {
        display: block;
        float: none;
        flex: 0 0 auto;

        width: auto;
        margin: 0;
        padding: 0;

        white-space: nowrap;
    }

    .certificate-physical-footer .certificate-delivery-options {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 120px;
        width: auto;
        min-width: 0;
    }

    /* Agreement: fit its content instead of filling the column */
    .certificate-physical-footer > .certificate-physical-agreement {
        width: fit-content !important;
        max-width: 100%;
        min-width: 0;

        justify-self: start;
        align-self: start;
    }

    .certificate-physical-footer .certificate-physical-agreement label {
        width: fit-content;
        max-width: 100%;
    }
}


.certificate-instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    direction: rtl;
}

.certificate-instructions-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(162, 28, 67, 0.10);
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(162, 28, 67, 0.035),
        rgba(162, 28, 67, 0.01)
    );
    color: var(--foreground, #374151);
    line-height: 1.9;
}

.certificate-instruction-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin-top: 1px;
    border-radius: 8px;
    background: #a21c43;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(162, 28, 67, 0.16);
    transition: transform 180ms ease, background 180ms ease;
}

.certificate-instructions-list li:hover .certificate-instruction-number {
    background: #c12d58;
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .certificate-instruction-number {
        transition: none;
    }
}

/* Physical certificate request terms modal (kept isolated from other certificate sections). */
.certificate-terms-trigger{display:inline;color:#a21c43;font:inherit;font-weight:inherit;background:transparent;border:0;padding:0;margin:0;text-decoration:none;cursor:pointer;white-space:normal}
.certificate-terms-trigger:hover,.certificate-terms-trigger:active{color:#a21c43;text-decoration:none}
.certificate-terms-trigger:focus-visible{outline:2px solid rgba(162,28,67,.35);outline-offset:3px;border-radius:3px}
.certificate-terms-modal{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(13,18,30,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.certificate-terms-modal.show{display:flex}
.certificate-terms-dialog{width:min(94vw,560px);max-height:88vh;overflow:auto;border:1px solid rgba(162,28,67,.13);border-radius:22px;background:#fff;color:var(--foreground,#1f2937);box-shadow:0 28px 90px rgba(10,15,25,.3);animation:certificateTermsEnter .18s ease-out both}
.certificate-terms-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid rgba(120,120,120,.14);background:linear-gradient(135deg,rgba(162,28,67,.07),transparent 78%)}
.certificate-terms-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.certificate-terms-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:rgba(162,28,67,.10);color:#a21c43;font-size:18px}
.certificate-terms-kicker{font-size:10px;color:#a21c43;font-weight:900;margin-bottom:3px}
.certificate-terms-title{font-size:15px;font-weight:900;line-height:1.8;margin:0}
.certificate-terms-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 35px;width:35px;height:35px;border:1px solid rgba(120,120,120,.17);border-radius:11px;background:transparent;color:inherit;font-size:23px;cursor:pointer}
.certificate-terms-content{padding:18px 20px 20px}
.certificate-terms-content .certificate-instructions-list{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.certificate-terms-content .certificate-instructions-list li{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(120,120,120,.13);border-radius:13px;background:rgba(127,127,127,.035);line-height:2}
.certificate-terms-content .certificate-instruction-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 25px;width:25px;height:25px;border-radius:9px;background:rgba(162,28,67,.09);color:#a21c43;font-weight:900}
.certificate-terms-confirm{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:43px;margin-top:16px;border:0;border-radius:13px;background:#a21c43;color:#fff;font-size:12px;font-weight:900;cursor:pointer;transition:transform .18s ease,opacity .18s ease}
.certificate-terms-confirm:hover{opacity:.92;transform:translateY(-1px)}
.certificate-terms-content .certificate-instruction-number:hover {
    color: #fff !important;
}
@keyframes certificateTermsEnter{from{opacity:0;transform:translateY(7px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.dark .certificate-terms-dialog{background:#111827;color:#f3f4f6;border-color:rgba(255,255,255,.09)}
@media(max-width:520px){.certificate-terms-modal{padding:12px}.certificate-terms-head,.certificate-terms-content{padding:15px}.certificate-terms-title{font-size:13px}}


/* Department/course selectors sit opposite the delivery method. */
.certificate-course-delivery-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(225px, 290px);
    align-items: stretch;
    gap: 14px 18px;
    width: 100%;
    direction: rtl;
}
.certificate-course-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    min-width: 0;
}
.certificate-course-fields select:disabled { opacity: .62; cursor: not-allowed; }
.certificate-course-delivery-row > .certificate-delivery-method {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(139, 30, 66, .16);
    border-radius: 12px;
    background: linear-gradient(135deg, #fff 0%, #fcf8fa 100%);
    box-shadow: 0 3px 12px rgba(48, 28, 38, .045), inset 0 1px 0 rgba(255,255,255,.9);
}
.certificate-physical-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(225px, 1fr) auto;
    grid-template-areas: "agreement notice submit";
    align-items: center;
    gap: 12px 16px;
}
.certificate-physical-footer > .certificate-physical-agreement { grid-area: agreement; }
.certificate-physical-footer > .certificate-delivery-price-notice { grid-area: notice; }
.certificate-physical-footer > button[type="submit"] { grid-area: submit; }
@media (max-width: 1024px) {
    .certificate-course-delivery-row { grid-template-columns: minmax(0, 1fr); }
    .certificate-course-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .certificate-physical-footer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "agreement" "notice" "submit";
        align-items: stretch;
        gap: 14px;
    }
}
@media (max-width: 560px) {
    .certificate-course-fields { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   CERTIFICATE LAYOUT — DELIVERY ROW + AGREEMENT ROW
   ========================================================= */

/* ROW 1: Course fields, delivery method, and price notice */
.certificate-course-delivery-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, max-content)
        minmax(260px, 310px);
    grid-template-areas: "fields delivery notice";
    align-items: stretch;
    gap: 12px 16px;
    width: 100%;
    min-width: 0;
    direction: rtl;
    box-sizing: border-box;
}

.certificate-course-fields {
    grid-area: fields;
    min-width: 0;
}

.certificate-course-delivery-row > .certificate-delivery-method {
    grid-area: delivery;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    justify-self: stretch;
    align-self: stretch;
}

/* Price notice beside the delivery-method card */
.certificate-course-delivery-row > .certificate-delivery-price-notice {
    grid-area: notice;

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

    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100%;
    padding: 10px 12px;

    box-sizing: border-box;
    border: 1px solid #bfdbfe;
    border-radius: 13px;

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

    color: #1e40af;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.9;
    text-align: center;
    overflow-wrap: anywhere;

    box-shadow: 0 5px 16px rgba(30, 64, 175, 0.08);

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

/* Selected downloadable certificate */
.certificate-course-delivery-row
> .certificate-delivery-price-notice[data-delivery-type="file"] {
    border-color: #a7f3d0;
    background: linear-gradient(
        135deg,
        #ecfdf5 0%,
        #f7fffb 100%
    );
    color: #047857;
}


/* =========================================================
   ROW 2: FULL-WIDTH AGREEMENT + OPPOSITE-SIDE SUBMIT BUTTON
   ========================================================= */

.certificate-physical-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "agreement submit";

    align-items: center;
    gap: 12px 16px;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    direction: rtl;
}

/* Agreement fills all available space beside the button */
.certificate-physical-footer > .certificate-physical-agreement {
    grid-area: agreement;

    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;

    justify-self: stretch;
    align-self: stretch;
    box-sizing: border-box;
}

.certificate-physical-footer
.certificate-physical-agreement label {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.certificate-physical-footer
.certificate-physical-agreement label input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.certificate-physical-footer
.certificate-physical-agreement label span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.8;
}

/* Submit button stays at the opposite end of the same row */
.certificate-physical-footer > button[type="submit"] {
    grid-area: submit;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: auto;
    min-width: 145px;
    min-height: 44px;
    margin: 0;
    padding: 0 20px;

    white-space: nowrap;
    justify-self: stretch;
    align-self: center;
    box-sizing: border-box;
}


/* =========================================================
   TABLET: COURSE FIELDS ABOVE DELIVERY + PRICE CARDS
   ========================================================= */

@media (min-width: 561px) and (max-width: 1024px) {
    .certificate-course-delivery-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "fields fields"
            "delivery notice";
        gap: 14px;
    }

    .certificate-course-delivery-row > .certificate-delivery-method,
    .certificate-course-delivery-row > .certificate-delivery-price-notice {
        width: 100%;
        max-width: none;
    }
}


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

@media (max-width: 560px) {
    .certificate-course-delivery-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "fields"
            "delivery"
            "notice";
        gap: 12px;
    }

    .certificate-course-delivery-row > .certificate-delivery-method,
    .certificate-course-delivery-row > .certificate-delivery-price-notice {
        width: 100%;
        max-width: none;
    }

    .certificate-physical-footer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "agreement"
            "submit";
        gap: 12px;
    }

    .certificate-physical-footer > .certificate-physical-agreement {
        width: 100% !important;
        max-width: none !important;
    }

    .certificate-physical-footer > button[type="submit"] {
        width: 100%;
        min-width: 0;
    }
}


/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .certificate-course-delivery-row
    > .certificate-delivery-price-notice {
        transition: none;
    }
}

/* =========================================================
   CERTIFICATE DELIVERY — MATCH NORMAL FORM FIELD DIMENSIONS
   ========================================================= */

/* Match the height of the department and course fields */
.certificate-course-delivery-row > .certificate-delivery-method {
    display: grid;
    grid-template-rows: auto 0px;
    align-content: start;
    align-items: stretch;
    gap: 4px;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;

    box-sizing: border-box;

    /* Remove the oversized fieldset card appearance */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    justify-self: stretch;
    align-self: stretch;
}

/* Make the delivery-method heading look like a normal field label */
.certificate-course-delivery-row
> .certificate-delivery-method legend {
    display: block;
    float: none;

    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
margin-bottom: 10px;
    color: var(--foreground, #374151);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: normal;
}

/* Style the radio options like a regular form control */
.certificate-course-delivery-row .certificate-delivery-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;

    width: 100%;
    height: 44px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0 10px;

    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
}

/* Keep each radio option neatly aligned */
.certificate-course-delivery-row .certificate-delivery-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-width: 0;
    margin: 0;

    color: var(--foreground, #374151);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.certificate-course-delivery-row .certificate-delivery-option input {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #a21c43;
}

/* Remove the hover color inherited from the old card design */
.certificate-course-delivery-row
.certificate-delivery-option:hover {
    color: var(--foreground, #374151);
}

/* =========================================================
   PRICE NOTICE — SAME HEIGHT AS THE FORM FIELDS
   ========================================================= */

.certificate-course-delivery-row
> .certificate-delivery-price-notice {
    align-self: stretch;
    height: auto;
    min-height: 0;
    margin: 0;

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

    box-sizing: border-box;
}

/* =========================================================
   MOBILE — ALLOW RADIO OPTIONS TO WRAP WHEN NECESSARY
   ========================================================= */

@media (max-width: 560px) {
    .certificate-course-delivery-row
    > .certificate-delivery-method {
        grid-template-rows: auto auto;
        gap: 4px;
    }

    .certificate-course-delivery-row .certificate-delivery-options {
        flex-wrap: wrap;
        height: auto;
        min-height: 44px;
        gap: 8px 12px;
        padding: 8px 10px;
    }

    .certificate-course-delivery-row .certificate-delivery-option {
        white-space: normal;
    }
}

/* FORCE price notice to match the 44px form-control height */
.certificate-course-delivery-row
> .certificate-delivery-price-notice {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px !important;
    margin: 3px !important;

    box-sizing: border-box !important;
    align-self: end !important;

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

    overflow: hidden;
}

/* Keep the notice readable on narrow mobile screens */
@media (max-width: 560px) {
    .certificate-course-delivery-row
    > .certificate-delivery-price-notice {
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;
        padding: 10px 12px !important;
        overflow: visible;
    }
}

/* Four-column personal details form with regular labels above each field. */
.certificate-physical-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    direction: rtl;
    gap: 15px 13px;
    min-width: 0;
}
.certificate-physical-fields > .certificate-physical-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.certificate-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.certificate-physical-field > label,
.certificate-auth-field > label {
    display: block;
    margin: 0;
    color: var(--foreground, #374151);
    font-family: YekanBakh, Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}
.certificate-physical-fields > .certificate-field--two {
    grid-column: span 2;
    min-width: 0;
}
.certificate-physical-form input:not([type="checkbox"]):not([type="radio"]),
.certificate-physical-form select,
.certificate-physical-form select option,
.certificate-physical-form textarea,
.certificate-auth-method-card select,
.certificate-auth-method-card select option {
    font-family: YekanBakh, Tahoma, sans-serif !important;
}
.certificate-physical-form textarea#physical-address {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 9px 16px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}
@media (min-width: 561px) and (max-width: 1024px) {
    .certificate-physical-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .certificate-physical-fields > .certificate-field--two {
        grid-column: span 2;
    }
}
@media (max-width: 560px) {
    .certificate-physical-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }
    .certificate-physical-fields > .certificate-field--two {
        grid-column: auto;
    }
}

/* Unified agreement, delivery, price notice and submit row. */
.certificate-physical-actions-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.15fr) minmax(250px, 1.05fr) minmax(220px, 1fr) auto;
    grid-template-areas: "agreement delivery notice submit";
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    direction: rtl;
    box-sizing: border-box;
}
.certificate-physical-actions-row > .certificate-physical-agreement {
    grid-area: agreement;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(120, 120, 120, .14);
    border-radius: 12px;
    background: rgba(127, 127, 127, .035);
    box-sizing: border-box;
}
.certificate-physical-actions-row .certificate-physical-agreement label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
}
.certificate-physical-actions-row .certificate-physical-agreement label input {
    flex: 0 0 auto;
    margin: 0;
}
.certificate-physical-actions-row .certificate-physical-agreement label span {
    min-width: 0;
    white-space: normal;
    line-height: 1.8;
}
.certificate-physical-actions-row > .certificate-delivery-method {
    grid-area: delivery;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.certificate-physical-actions-row > .certificate-delivery-method legend {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--foreground, #374151);
    font-family: YekanBakh, Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}
.certificate-physical-actions-row .certificate-delivery-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: var(--background, #fff);
    box-sizing: border-box;
}
.certificate-physical-actions-row .certificate-delivery-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0;
    color: var(--foreground, #374151);
    font-family: YekanBakh, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}
.certificate-physical-actions-row .certificate-delivery-option input {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #a21c43;
}
.certificate-physical-actions-row > .certificate-delivery-price-notice {
    grid-area: notice;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
    color: #1e40af;
    font-family: YekanBakh, Tahoma, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
.certificate-physical-actions-row > .certificate-delivery-price-notice[data-delivery-type="file"] {
    border-color: #a7f3d0;
    background: linear-gradient(135deg, #ecfdf5 0%, #f7fffb 100%);
    color: #047857;
}
.certificate-physical-actions-row > button[type="submit"] {
    grid-area: submit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    min-width: 145px;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    white-space: nowrap;
    box-sizing: border-box;
}
@media (max-width: 1100px) {
    .certificate-physical-actions-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "agreement" "delivery" "notice" "submit";
        align-items: stretch;
    }
}
@media (max-width: 700px) {
    .certificate-physical-actions-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "agreement" "delivery" "notice" "submit";
        gap: 12px;
    }
    .certificate-physical-actions-row .certificate-delivery-options {
        flex-wrap: wrap;
        padding: 9px 10px;
    }
    .certificate-physical-actions-row > button[type="submit"] {
        width: 100%;
        min-width: 0;
    }
}

/* Jalali Persian datepicker shared with the admin panel. */
.apd-jalali-field {
    --primary: #a21c43;
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
}
.apd-jalali-source { display: none !important; }
.apd-jalali-display {
    width: 100% !important;
    padding-left: 44px !important;
    cursor: pointer !important;
    direction: rtl;
    text-align: right;
}
.apd-jalali-trigger {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #a21c43;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
}
.apd-jalali-trigger:hover { background: #f6eef1; }
.apd-jalali-field:focus-within .apd-jalali-display {
    border-color: #a21c43 !important;
    box-shadow: 0 0 0 3px rgba(162, 28, 67, .08);
}
.apd-jalali-picker {
    --primary: #a21c43;
    --text: #1f2937;
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e1e5eb;
    border-radius: 18px;
    box-shadow: 0 24px 65px rgba(28, 36, 52, .18);
    padding: 12px;
    width: 360px;
    max-width: calc(100vw - 24px);
    font-family: YekanBakh, Tahoma, sans-serif;
    color: var(--text);
    direction: rtl;
    overflow: auto;
}
.apd-jalali-picker[hidden] { display: none !important; }
.apd-jp-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}
.apd-jp-head-selects {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, .65fr);
    gap: 6px;
}
.apd-jp-select {
    height: 36px;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    background: #fafbfc;
    padding: 0 8px;
    font: inherit;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
}
.apd-jp-icon {
    height: 34px;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    background: #fafbfc;
    color: var(--primary);
    cursor: pointer;
}
.apd-jp-icon:hover { background: #f8eef2; }
.apd-jp-weekdays, .apd-jp-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.apd-jp-weekdays { margin-bottom: 5px; }
.apd-jp-weekdays span {
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    color: #98a1ae;
    padding: 4px 0;
}
.apd-jp-day, .apd-jp-empty { min-width: 0; height: 38px; }
.apd-jp-day {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 10px;
    color: var(--text);
    cursor: pointer;
}
.apd-jp-day:hover:not(:disabled) { background: #f8eef2; border-color: #f0d6df; }
.apd-jp-day.is-selected { background: var(--primary); color: #fff; font-weight: 800; }
.apd-jp-day.is-today:not(.is-selected) { border-color: var(--primary); color: var(--primary); font-weight: 800; }
.apd-jp-day:disabled, .apd-jp-month:disabled { opacity: .28; cursor: not-allowed; }
.apd-jp-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.apd-jp-month {
    min-height: 42px;
    border: 1px solid #e6e9ee;
    border-radius: 11px;
    background: #fafbfc;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}
.apd-jp-month:hover:not(:disabled) { border-color: #e5c6d0; background: #fff5f7; }
.apd-jp-month.is-selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.apd-jp-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    margin-top: 9px;
    border-top: 1px solid #edf0f4;
    font-size: 9px;
    color: #7f8997;
}
.apd-jp-time input {
    height: 34px;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    padding: 0 9px;
    font: inherit;
    font-size: 11px;
    direction: ltr;
}
.apd-jp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #edf0f4;
}
.apd-jp-foot-btn {
    border: 0;
    border-radius: 10px;
    background: #f6f8fa;
    color: var(--primary);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    padding: 7px 10px;
    cursor: pointer;
}
.apd-jp-foot-btn:hover { background: #f8eef2; }
.apd-jp-foot-btn.muted { color: #7e8794; }
@media (max-width: 520px) {
    .apd-jalali-picker { width: calc(100vw - 24px); }
    .apd-jp-head-selects { grid-template-columns: minmax(0, 1fr) minmax(76px, .65fr); }
}