@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ==================================================
GENERAL
================================================== */
.m21-my-applications{
    background:#fff;
    padding:20px;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ==================================================
EMAIL + SEND OTP (ONE ROW – FIXED)
================================================== */
#m21-search-applications{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:nowrap;
}

.m21-email-label{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

#m21_email{
    flex:1;
    height:46px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #ddd;
    background:#fff9c4;
    font-size:13px;
}

/* ==================================================
EMAIL + SEND OTP (ONE ROW – FIXED)
================================================== */
#m21-search-applications{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:nowrap;
}

.m21-email-label{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    color:#0f172a;
}

#m21_email{
    flex:1;
    height:46px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #bae6fd;
    background:#e0f2fe;
    font-size:13px;
}

/* SEND VERIFICATION BUTTON */
#m21-send-otp{
    height:46px;
    min-width:220px;
    padding:0 22px;
    border-radius:10px;
    border:none;
    background:linear-gradient(135deg,#38bdf8,#0284c7);
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    box-shadow:0 6px 14px rgba(2,132,199,.25);
    transition:all .25s ease;
}

#m21-send-otp:hover{
    background:linear-gradient(135deg,#012345,#012F5C);
    box-shadow:0 10px 22px rgba(2,6,23,.4);
}

#m21-send-otp:disabled{
    opacity:.6;
    cursor:not-allowed;
    box-shadow:none;
}

/* ==================================================
TABLE
================================================== */
.m21-table{
    width:100%;
    border-collapse:collapse;
    margin-top:16px;
}

.m21-table th{
    background:#f5f5f5;
    padding:10px;
    font-size:13px;
}

.m21-table td{
    padding:10px;
    font-size:13px;
    text-align:center;
}

/* VIEW DETAILS BUTTON */
.m21-view-details{
    padding:6px 16px;
    border-radius:20px;
    border:1px solid #062c5b;
    background:#fff;
    color:#062c5b;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.m21-view-details:hover{
    background:#062c5b;
    color:#fff;
}

/* ==================================================
PROGRESS BAR
================================================== */
.m21-progress{
    position:relative;
    margin:32px 0 24px;
    height:48px;
}

/* base line */
.m21-progress::before{
    content:"";
    position:absolute;
    top:22px;
    left:0;
    width:100%;
    height:4px;
    background:#DAEBF0;
    border-radius:4px;
}

/* filled line */
.m21-progress::after{
    content:"";
    position:absolute;
    top:22px;
    left:0;
    height:4px;
    width:0;
    background:linear-gradient(90deg,#05254D,#1F4C82);
    border-radius:4px;
    transition:width .9s cubic-bezier(.4,0,.2,1);
}

/* progress widths */
.m21-progress[data-step="submitted"]::after{width:0%}
.m21-progress[data-step="review"]::after{width:25%}
.m21-progress[data-step="payment"]::after{width:50%}
.m21-progress[data-step="final"]::after{width:75%}

/* rejected */
.m21-progress[data-status="rejected"]::after{
    width:75%;
    background:#dc3545;
}

/* ==================================================
PROGRESS STEPS
================================================== */
.m21-progress-step{
    position:absolute;
    top:14.5px;
    transform:translateX(-50%) translateX(36px); /* ← تحريك يمين أنيق */
    text-align:center;
}


.m21-progress-step:nth-child(1){left:0%}
.m21-progress-step:nth-child(2){left:25%}
.m21-progress-step:nth-child(3){left:50%}
.m21-progress-step:nth-child(4){left:75%}

/* circle */
.m21-progress-step .circle{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#DAEBF0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
    transition:.3s;
}

/* icon */
.m21-progress-step .icon::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:9px;
    color:#fff;
}

/* states */
.m21-progress-step.completed .circle{
    background:#05254D;
}

.m21-progress-step.active .circle{
    background:#5798D9;
    animation:pulse 1.4s infinite;
}

.m21-progress-step.pending .circle{
    background:#DAEBF0;
}

/* label */
.m21-progress-step .label{
    font-size:11px;
    margin-top:6px;
    color:#2E5173;
    white-space:nowrap;
}

/* icons per step */
.m21-progress-step.submitted .icon::before{content:"\f15c"}
.m21-progress-step.review .icon::before{content:"\f06e"}
.m21-progress-step.payment .icon::before{content:"\f09d"}
.m21-progress-step.final .icon::before{content:"\f058"}

/* tooltip */
.m21-progress-step[data-tooltip]:hover::after{
    content:attr(data-tooltip);
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    background:#333;
    color:#fff;
    font-size:11px;
    padding:4px 8px;
    border-radius:6px;
    white-space:nowrap;
}

/* animation */
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(240,173,78,.6)}
    70%{box-shadow:0 0 0 8px rgba(240,173,78,0)}
    100%{box-shadow:0 0 0 0 rgba(240,173,78,0)}
}
/* ===============================
STATUS BADGE (FIX)
================================ */
.m21-status{
    display:inline-block;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    border:1px solid;
}

.status-review{
    background:#fff3cd;
    color:#856404;
    border-color:#e0c36a;
}

.status-approved{
    background:#d4edda;
    color:#155724;
    border-color:#1e7e34;
}

.status-rejected{
    background:#f8d7da;
    color:#721c24;
    border-color:#bd2130;
}

.status-pending{
    background:#d1ecf1;
    color:#0c5460;
    border-color:#117a8b;
}
/* ===============================
REMOVE FORM BACKGROUND / SHADOW
================================ */
.m21-my-applications{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}
/* ===============================
FORCE APPLICATION PROGRESS TITLE SIZE
================================ */
.m21-my-applications .m21-section-title{
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}
/* ===============================
OTP / SYSTEM MESSAGES TEXT SIZE
================================ */
#m21-otp-msg{
    font-size: 11px !important;
    line-height: 1.35;
    margin-top: 8px;
}
/* ===============================
APPLICATION DETAILS MESSAGE
================================ */
#m21-message{
    font-size:11px;
    opacity:0;
    animation:fadeIn .25s ease forwards;
}

@keyframes fadeIn{
    to{opacity:1}
}