/* Modals.css - Modal component styles */

.ui-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 14, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 11000;
}

.ui-modal {
    width: min(520px, 100%);
    background: linear-gradient(180deg, rgba(13, 21, 32, 0.98), rgba(8, 12, 20, 0.98));
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.ui-modal-header,
.ui-modal-body,
.ui-modal-actions {
    padding: 18px 20px;
}

.ui-modal-header {
    border-bottom: 1px solid rgba(58, 90, 106, 0.45);
}

.ui-modal-body p {
    color: var(--color-text-primary);
}

.ui-modal-input {
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    background: rgba(9, 15, 24, 0.92);
    color: var(--color-text-primary);
    font-family: var(--font-main);
}

.ui-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(58, 90, 106, 0.45);
}