/* =========================================
   GLOBAL MODAL CLOSE
========================================= */

.modal-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 48px;
    height: 48px;

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

    padding: 0;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.04);

    color: #fff;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    z-index: 20;

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

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.modal-close:hover {
    background: var(--accent-medium);

    border-color: rgba(86, 192, 141, 0.28);

    box-shadow:
        0 0 18px rgba(86, 192, 141, 0.14);

    transform: rotate(90deg);
}

.modal-close:focus-visible {
    outline: 1px solid rgba(86, 192, 141, 0.85);
    outline-offset: 4px;
}