.su-popup-overlay,
.modal-overlay,
.cd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.su-popup,
.modal-card,
.cd-modal-card {
    background: #fff;
    border-radius: 16px;
    width: 640px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.su-popup--lg,
.modal-card-lg {
    width: 860px;
}

.su-popup__header,
.modal-header,
.cd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #edf2f8;
}

.su-popup__title,
.modal-title,
.cd-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2d3d;
}

.su-popup__close,
.modal-close,
.cd-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: #8ea1b7;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

.su-popup__close:hover:not(:disabled),
.modal-close:hover:not(:disabled),
.cd-modal-close:hover:not(:disabled) {
    background: #f3f6fa;
    color: #1f2d3d;
}

.su-popup__close:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.su-popup__close-icon {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 0;
}

.su-popup__close-icon svg,
.su-popup__close svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

.su-popup__body,
.modal-body,
.cd-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.su-popup__body:has(.su-passport-review),
.modal-body:has(.su-passport-review),
.cd-modal-body:has(.su-passport-review) {
    padding: 24px 28px 28px;
}

/*
    A default panel is absolutely positioned inside the body, so the body has to stop clipping
    while one is open. A fixed panel is positioned against the viewport and tracks scrolling in
    script, so it is never clipped. Dropping the body scrollbar for those would reset the scroll
    position and let the form spill outside the card, so leave the body alone in that case.
*/
.su-popup__body:has(.su-searchable-select--open:not(.su-searchable-select--fixed-panel)),
.modal-body:has(.su-searchable-select--open:not(.su-searchable-select--fixed-panel)),
.cd-modal-body:has(.su-searchable-select--open:not(.su-searchable-select--fixed-panel)),
.su-popup__body:has(.su-date-input--open:not(.su-date-input--fixed-panel)),
.modal-body:has(.su-date-input--open:not(.su-date-input--fixed-panel)),
.cd-modal-body:has(.su-date-input--open:not(.su-date-input--fixed-panel)) {
    overflow: visible;
}

.su-popup__footer,
.modal-footer,
.cd-modal-footer {
    padding: 14px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #edf2f8;
}

.su-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.86rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.su-alert__icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 0;
}

.su-alert__icon svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
}

.su-alert--error,
.alert-error,
.cd-alert-error {
    background: #f8d7da;
    color: #721c24;
}

.su-alert--warning,
.alert-warning {
    background: #fff8e6;
    color: #7a5b00;
}

.su-alert--success,
.alert-success {
    background: #d4edda;
    color: #155724;
}

.modal-form-grid,
.cd-modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .modal-form-grid,
    .cd-modal-form-grid {
        grid-template-columns: 1fr;
    }
}