/* Custom alert popup (Scripts/js/ui-alert.js): centered, animated, mobile friendly */

.ui-alert-overlay {
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 18, 60, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background-color .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}

.ui-alert-overlay.ui-alert-show {
    background: rgba(15, 18, 60, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.ui-alert-overlay.ui-alert-hide {
    background: rgba(15, 18, 60, 0);
}

.ui-alert-box {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    padding: 30px 28px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 18, 60, .30);
    border-top: 5px solid var(--ui-alert-color);
    opacity: 0;
    transform: translateY(20px) scale(.94);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2);
    font-family: inherit;
}

.ui-alert-show .ui-alert-box {
    opacity: 1;
    transform: none;
}

.ui-alert-hide .ui-alert-box {
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: opacity .18s ease, transform .18s ease;
}

.ui-alert-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-alert-color);
    background: var(--ui-alert-soft);
    box-shadow: 0 0 0 8px var(--ui-alert-ring);
    transform: scale(.6);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.4) .08s;
}

.ui-alert-show .ui-alert-icon {
    transform: scale(1);
}

.ui-alert-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #2d2f5a;
}

.ui-alert-text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: #555a80;
    word-break: break-word;
    max-height: 50vh;
    overflow-y: auto;
}

.ui-alert-btn {
    min-width: 130px;
    padding: 10px 28px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: var(--ui-alert-color);
    box-shadow: 0 6px 16px var(--ui-alert-ring);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.ui-alert-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.ui-alert-btn:active {
    transform: scale(.97);
}

.ui-alert-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--ui-alert-ring);
}

/* Colours per message type */
.ui-alert-success { --ui-alert-color: #0e9f6e; --ui-alert-soft: #e7f8f1; --ui-alert-ring: rgba(14, 159, 110, .18); }
.ui-alert-error   { --ui-alert-color: #e5484d; --ui-alert-soft: #fdecec; --ui-alert-ring: rgba(229, 72, 77, .18); }
.ui-alert-warning { --ui-alert-color: #e6a100; --ui-alert-soft: #fff6e0; --ui-alert-ring: rgba(230, 161, 0, .20); }
.ui-alert-info    { --ui-alert-color: #5458b3; --ui-alert-soft: #eeefff; --ui-alert-ring: rgba(84, 88, 179, .18); }

/* Page behind the popup does not scroll */
body.ui-alert-open {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 480px) {
    .ui-alert-box {
        padding: 24px 18px 18px;
        border-radius: 14px;
    }

    .ui-alert-icon {
        width: 54px;
        height: 54px;
    }

    .ui-alert-title {
        font-size: 18px;
    }

    .ui-alert-text {
        font-size: 14px;
    }

    .ui-alert-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-alert-overlay, .ui-alert-box, .ui-alert-icon, .ui-alert-btn {
        transition: none !important;
    }
}

/* ---------- Confirm popup (two buttons) ---------- */
.ui-alert-confirm { --ui-alert-color: #5458b3; --ui-alert-soft: #eeefff; --ui-alert-ring: rgba(84, 88, 179, .18); }

.ui-alert-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ui-alert-btn-cancel {
    background: #f1f2f8;
    color: #4a4e7a;
    box-shadow: none;
}

.ui-alert-btn-cancel:hover {
    background: #e6e8f3;
}

.ui-alert-btn-yes {
    background: linear-gradient(135deg, #3b3fb6, #5458b3);
}

@media (max-width: 480px) {
    .ui-alert-actions {
        flex-direction: column-reverse;
    }

    .ui-alert-actions .ui-alert-btn {
        width: 100%;
    }
}