/**
 * 模态框组件
 */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop > .modal {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95) translateY(-20px);
    transition: transform var(--transition-normal);
}

.modal-backdrop.active > .modal {
    transform: scale(1) translateY(0);
}

.modal-sm { width: 400px; }
.modal-md { width: 560px; }
.modal-lg { width: 720px; }
.modal-xl { width: 900px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--modal-header-bg, linear-gradient(135deg, #F0B90B 0%, #F8D12F 100%));
    color: var(--modal-header-fg, #1E2329);
    border-bottom: 1px solid var(--modal-header-border, #F0B90B);
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header i {
    color: inherit;
}

.modal-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.modal-close,
.app-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--app-close-btn-bg, var(--modal-close-bg, rgba(255, 255, 255, 0.10)));
    color: var(--app-close-btn-color, var(--modal-close-color, #FFFFFF));
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(11, 14, 17, 0.45);
    transition: var(--close-btn-transition, var(--transition-normal, 0.2s ease));
}

.modal-close.ripple-enabled {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.modal-close:hover,
.app-close-btn:hover {
    background: var(--app-close-btn-bg-hover, var(--modal-close-bg-hover, rgba(255, 255, 255, 0.18)));
    transform: var(--close-btn-hover-transform, rotate(90deg));
}

.app-close-btn--transparent,
.app-close-btn--light {
    --app-close-btn-bg: rgba(255, 255, 255, 0.10);
    --app-close-btn-bg-hover: rgba(255, 255, 255, 0.18);
    --app-close-btn-color: #FFFFFF;
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}