.modal {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, .55);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    opacity: 0;

    visibility: hidden;

    transition: .30s;

    z-index: 999999;

}

.modal.show {

    opacity: 1;

    visibility: visible;

}

.modal-content {

    width: min(520px, 100%);

    background: #fff;

    border-radius: 24px;

    padding: 45px;

    text-align: center;

    position: relative;

    animation: modalHide .30s ease;

    box-shadow:

        0 25px 70px rgba(0, 0, 0, .25);

}

.modal.show .modal-content {

    animation: modalShow .35s ease;

}

@keyframes modalShow {

    from {

        opacity: 0;

        transform: translateY(40px) scale(.92);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}

@keyframes modalHide {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

.modal-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 42px;

    font-weight: bold;

    color: #fff;

    background: var(--success);

}

.modal.success .modal-icon {

    background: var(--success);

}

.modal.error .modal-icon {

    background: var(--danger);

}

.modal.warning .modal-icon {

    background: var(--warning);

}

.modal.loading .modal-icon {

    background: var(--primary);

    color: transparent;

    position: relative;

}

.modal.loading .modal-icon::after {

    content: "";

    position: absolute;

    width: 36px;

    height: 36px;

    border: 4px solid rgba(255, 255, 255, .30);

    border-top: 4px solid #fff;

    border-radius: 50%;

    animation: spin .8s linear infinite;

}

.modal-content h2 {

    font-size: 30px;

    color: var(--gray-900);

    margin-bottom: 18px;

}

.modal-content p {

    color: var(--gray-500);

    line-height: 1.8;

    font-size: 16px;

    margin-bottom: 35px;

}

.modal-content button {

    min-width: 170px;

    padding: 15px 28px;

    border: none;

    border-radius: 14px;

    background: var(--primary);

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    transition: .30s;

}

.modal-content button:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

}

.modal-close {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: none;

    background: #eef2f6;

    color: #555;

    cursor: pointer;

    font-size: 18px;

    transition: .25s;

}

.modal-close:hover {

    background: #dce7f3;

    transform: rotate(90deg);

}

.modal-title-success {

    color: #27ae60;

}

.modal-title-error {

    color: #e74c3c;

}

.modal-title-warning {

    color: #f39c12;

}

.modal-footer {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 15px;

}

.modal-footer button.secondary {

    background: #eef3f8;

    color: #333;

}

.modal-footer button.secondary:hover {

    background: #dfe8f2;

}

@media(max-width:700px) {

    .modal-content {

        padding: 30px 22px;

    }

    .modal-icon {

        width: 70px;

        height: 70px;

        font-size: 32px;

    }

    .modal-content h2 {

        font-size: 24px;

    }

    .modal-content p {

        font-size: 15px;

    }

    .modal-content button {

        width: 100%;

    }

    .modal-footer {

        flex-direction: column;

    }

}