/* ════════════════════════════════════════════════════════════════
STATUS MODAL (modal-status.html) 
════════════════════════════════════════════════════════════════ */


/*****=============================================
UNCHECK!!!!!!!!!!!!
=============================================*****/
/* ── Backdrop ─────────────────────────────────────────────── */
.message-modal-backdrop
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 30, 45, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.message-modal-backdrop.open
{
    opacity: 1;
    visibility: visible;
}

/* ── Card ─────────────────────────────────────────────────── */
.message-modal
{
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 30, 45, .22),
        0 6px 18px rgba(15, 30, 45, .12);
    width: 100%;
    max-width: 380px;
    /* overflow visible so buttons are never clipped */
    overflow: visible;
    transform: translateY(28px) scale(0.96);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(.36, .07, .19, .97),
        opacity 0.3s ease;
}

.message-modal-backdrop.open .message-modal
{
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Band needs its own clip since modal overflow is now visible */
.message-modal-band
{
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

/* ── Accent band ──────────────────────────────────────────── */
.message-modal-band
{
    height: 5px;
    width: 100%;
    border-radius: 20px 20px 0 0;
}

.message-modal-band.success
{
    background: linear-gradient(90deg, #27AE60, #3D8B5E);
}

.message-modal-band.error
{
    background: linear-gradient(90deg, #E74C3C, #C0392B);
}

/* ── Body ─────────────────────────────────────────────────── */
.message-modal-body
{
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
}

.message-modal-content
{
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    text-align: justify;
}

/* ── Close button ─────────────────────────────────────────── */
.message-modal-close
{
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #EEF4F9;
    color: #5A7A96;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.message-modal-close:hover
{
    background: #DAE9F4;
    color: #0F1E2D;
}

.message-modal-close svg
{
    width: 14px;
    height: 14px;
}

/* ── Icon circle ──────────────────────────────────────────── */
.message-modal-icon
{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.message-modal-icon svg
{
    width: 32px;
    height: 32px;
}

.message-modal-icon.success
{
    background: #EBF7F1;
    color: #3D8B5E;
    box-shadow: 0 0 0 10px rgba(61, 139, 94, .08);
    animation: th-pop .42s cubic-bezier(.36, .07, .19, .97) both;
}

.message-modal-icon.error
{
    background: #FDECEA;
    color: #C0392B;
    box-shadow: 0 0 0 10px rgba(192, 57, 43, .08);
    animation: th-pop .42s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes th-pop
{
    0%
    {
        transform: scale(0) rotate(-12deg);
        opacity: 0;
    }

    70%
    {
        transform: scale(1.14) rotate(2deg);
    }

    100%
    {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* ── Text ─────────────────────────────────────────────────── */
.message-modal-title
{
    font-family: 'Outfit', 'Helvetica Neue', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: .45rem;
    line-height: 1.3;
}

.message-modal-title.success
{
    color: #3D8B5E;
}

.message-modal-title.error
{
    color: #C0392B;
}

.message-modal-desc
{
    font-size: .875rem;
    color: #2C4055;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.message-modal-actions
{
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.message-modal-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .7rem 1.25rem;
    border-radius: 9999px;
    border: none;
    font-family: 'Outfit', 'Helvetica Neue', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
    box-sizing: border-box;
}

.message-modal-btn svg
{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.message-modal-btn.primary
{
    background: linear-gradient(135deg, #2B6496, #5A90BE);
    color: #fff;
    box-shadow: 0 4px 12px rgba(43, 100, 150, .28);
}

.message-modal-btn.primary:hover
{
    box-shadow: 0 6px 18px rgba(43, 100, 150, .4);
    transform: translateY(-1px);
    color: #fff;
}

.message-modal-btn.danger
{
    background: linear-gradient(135deg, #C0392B, #E74C3C);
    color: #fff;
    box-shadow: 0 4px 12px rgba(192, 57, 43, .28);
}

.message-modal-btn.danger:hover
{
    box-shadow: 0 6px 18px rgba(192, 57, 43, .4);
    transform: translateY(-1px);
    color: #fff;
}

.message-modal-btn.outline
{
    background: transparent;
    color: #2B6496;
    border: 1.5px solid #2B6496;
}

.message-modal-btn.outline:hover
{
    background: #2B6496;
    color: #fff;
    transform: translateY(-1px);
}

.message-modal-btn.outline-danger
{
    background: transparent;
    color: #C0392B;
    border: 1.5px solid #C0392B;
}

.message-modal-btn.outline-danger:hover
{
    background: #C0392B;
    color: #fff;
    transform: translateY(-1px);
}

/* ── Footer note ──────────────────────────────────────────── */
.message-modal-footer
{
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #DAE9F4;
    font-size: .775rem;
    color: #5A7A96;
}

.message-modal-footer a
{
    color: #2B6496;
    font-weight: 600;
    text-decoration: none;
}

.message-modal-footer a:hover
{
    text-decoration: underline;
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 480px)
{
    .message-modal-backdrop
    {
        padding: 1rem;
        align-items: center;
    }

    .message-modal
    {
        max-width: 100%;
        border-radius: 20px;
        transform: translateY(20px) scale(0.97);
    }

    .message-modal-band
    {
        border-radius: 20px 20px 0 0;
    }

    .message-modal-body
    {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .message-modal-btn
    {
        font-size: .85rem;
        padding: .65rem 1rem;
    }
}