.app-modal[hidden] {
    display: none !important;
}

.ui-modal.app-modal.show,
.dashboard-modal.app-modal.is-open,
.share-modal.app-modal.show,
.theme-editor-modal.app-modal.is-open,
.ntf-modal.app-modal.is-open,
.sidebar-link-modal.app-modal:not([hidden]),
.outletsmap-modal.app-modal:not([hidden]) {
    display: grid !important;
    place-items: center;
}

.app-modal {
    position: fixed;
    inset: 0;
    z-index: var(--app-modal-z-index, 10000);
    padding: var(--app-modal-padding, 1.5rem);
    isolation: isolate;
}

.app-modal.app-modal--closing {
    pointer-events: none;
}

.app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--app-modal-backdrop, rgba(9, 12, 20, 0.44));
    backdrop-filter: blur(var(--app-modal-backdrop-blur, 8px));
    -webkit-backdrop-filter: blur(var(--app-modal-backdrop-blur, 8px));
    animation: app-modal-backdrop-in 0.24s ease both;
}

.app-modal__panel {
    position: relative;
    z-index: 1;
    width: min(var(--app-modal-width, 540px), calc(100vw - 2rem));
    height: var(--app-modal-height, auto);
    max-height: min(var(--app-modal-max-height, calc(100vh - 3rem)), calc(100vh - 1rem));
    overflow: auto;
    border-radius: var(--app-modal-radius, 28px);
    border: 1px solid var(--app-modal-border, color-mix(in srgb, var(--border-soft, rgba(255, 255, 255, 0.16)) 82%, transparent));
    background: var(--app-modal-surface, var(--card-bg));
    color: var(--app-modal-text, var(--text-main));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    animation: app-modal-panel-in 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.app-modal.app-modal--closing .app-modal__backdrop {
    animation: app-modal-backdrop-out 0.2s ease both;
}

.app-modal.app-modal--closing .app-modal__panel {
    animation: app-modal-panel-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

.app-modal__content {
    padding: var(--app-modal-content-padding, 2rem);
}

.app-modal__content,
.app-modal__body {
    min-width: 0;
}

.app-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--app-modal-content-gap, 1.25rem);
}

.app-modal__header,
.app-modal__footer {
    flex: 0 0 auto;
}

.app-modal__body {
    flex: 1 1 auto;
}

.app-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-modal-close-bg, var(--bg-tertiary, rgba(0, 0, 0, 0.22))) 92%, transparent);
    color: var(--app-modal-close-color, var(--text-main, #161616));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.app-modal__close:hover {
    transform: scale(1.05);
    background: color-mix(in srgb, var(--primary-color, #4361ee) 16%, var(--app-modal-close-bg, transparent));
}

html.app-modal-open,
body.app-modal-open {
    overflow: hidden;
}

@keyframes app-modal-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes app-modal-panel-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes app-modal-backdrop-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes app-modal-panel-out {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.96) translateY(18px);
    }
}

@media (max-width: 640px) {
    .app-modal {
        padding: 0.9rem;
    }

    .app-modal__panel {
        width: min(var(--app-modal-width, 540px), calc(100vw - 1.8rem));
        max-height: calc(100vh - 1.8rem);
        border-radius: min(var(--app-modal-radius, 28px), 22px);
    }

    .app-modal__content {
        padding: var(--app-modal-content-padding-mobile, 1.2rem);
    }
}