/**
 * modal.css - 移动端弹窗组件样式
 * 版本: 1.0.0
 * 作者: Modal Component
 * 说明: 支持弹窗(alert/confirm/prompt)、底部菜单(actionSheet)、加载提示(loading)、轻提示(toast)
 * 
 * 使用方法:
 * 1. 在HTML中引入此CSS文件: <link rel="stylesheet" href="modal.css">
 * 2. 配合 modal.js 使用
 */

/* ==================== 遮罩层 ==================== */
/* 弹窗遮罩层 - 覆盖全屏的半透明背景 */
.modal-overlay {
    position: fixed;           /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);  /* 半透明黑色背景 */
    z-index: 1000;             /* 高层级，确保在最上层 */
    display: flex;
    align-items: center;       /* 垂直居中 */
    justify-content: center;   /* 水平居中 */
    opacity: 0;                /* 初始透明 */
    visibility: hidden;        /* 初始隐藏 */
    transition: all 0.3s ease; /* 过渡动画 */
}

/* 遮罩层激活状态 - 显示弹窗 */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==================== 居中弹窗容器 ==================== */
/* 标准弹窗容器 - 居中显示 */
.modal-container {
    background: white;
    border-radius: 20px;       /* 圆角 */
    width: 260px;              /* 固定宽度，适合移动端 */
    max-width: 85%;            /* 小屏适配 */
    overflow: hidden;          /* 隐藏溢出内容 */
    transform: scale(0.9);     /* 初始缩小 */
    transition: transform 0.3s ease;  /* 缩放动画 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
}

/* 弹窗显示时 - 放大到正常大小 */
.active .modal-container {
    transform: scale(1);
}

/* ==================== 底部弹窗容器 ==================== */
/* 底部弹窗容器 - 从底部滑出 (用于 ActionSheet) */
.modal-container-bottom {
    background: white;
    border-radius: 20px 20px 0 0;  /* 上方圆角，下方直角 */
    width: 100%;
    max-width: 100%;
    position: fixed;                /* 固定定位在底部 */
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);    /* 初始隐藏在底部下方 */
    transition: transform 0.3s ease;
}

/* 底部弹窗显示时 - 滑入屏幕 */
.active .modal-container-bottom {
    transform: translateY(0);
}

/* ==================== 弹窗头部 ==================== */
/* 弹窗头部区域 - 包含图标和标题 */
.modal-header {
    padding: 12px 16px 0;      /* 上 左右 下 */
    text-align: center;
}

/* ==================== 图标样式 ==================== */
/* 图标容器 - 圆形背景 */
.modal-icon {
    width: 44px;               /* 图标大小 */
    height: 44px;
    margin: 0 auto 8px;        /* 居中，底部间距 */
    border-radius: 50%;        /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;           /* 图标内文字大小 */
}

/* 成功图标 - 绿色 */
.modal-icon.success {
    background: #d1fae5;
    color: #10b981;
}

/* 错误图标 - 红色 */
.modal-icon.error {
    background: #fee2e2;
    color: #ef4444;
}

/* 警告图标 - 橙色 */
.modal-icon.warning {
    background: #fed7aa;
    color: #f59e0b;
}

/* 信息图标 - 蓝色 */
.modal-icon.info {
    background: #dbeafe;
    color: #3b82f6;
}

/* ==================== 标题样式 ==================== */
/* 弹窗标题 */
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

/* ==================== 内容样式 ==================== */
/* 弹窗内容区域 */
.modal-content {
    padding: 0 16px 12px;      /* 上 左右 下 */
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

/* ==================== 按钮区域 ==================== */
/* 按钮容器 - 水平排列 */
.modal-buttons {
    display: flex;
    border-top: 1px solid #e5e7eb;  /* 上边框分隔线 */
}

/* 按钮通用样式 */
.modal-buttons button {
    flex: 1;                   /* 等宽分布 */
    border-radius: 0;
    background: white;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

/* 第一个按钮右侧边框分隔线 */
.modal-buttons button:first-child {
    border-right: 1px solid #e5e7eb;
}

/* 按钮点击效果 */
.modal-buttons button:active {
    background: #f9fafb;
}

/* 确认按钮 - 蓝色 */
.modal-buttons .confirm-btn {
    color: #3b82f6;
}

/* 取消按钮 - 灰色 */
.modal-buttons .cancel-btn {
    color: #6b7280;
}

/* 危险按钮 - 红色 (用于删除等操作) */
.modal-buttons .danger-btn {
    color: #ef4444;
}

/* ==================== 底部菜单样式 ==================== */
/* 底部菜单项 */
.action-sheet-item {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

/* 菜单项点击效果 */
.action-sheet-item:active {
    background: #f3f4f6;
}

/* 取消按钮 - 特殊样式，红色加粗 */
.action-sheet-cancel {
    margin-top: 8px;
    background: white;
    font-weight: 600;
    color: #ef4444;
}

/* ==================== 输入框样式 ==================== */
/* 弹窗内输入框 */
.modal-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 8px;
    outline: none;
    transition: border 0.2s;
}

/* 输入框聚焦效果 */
.modal-input:focus {
    border-color: #3b82f6;
}

/* ==================== Toast 轻提示样式 ==================== */
/* Toast 基础样式 - 黑色半透明圆角提示 */
.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 14px;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 80%;
    white-space: normal;
    text-align: center;
    backdrop-filter: blur(8px);     /* 背景模糊效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Toast 显示状态 */
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* 顶部 Toast - 距离顶部80px */
.toast-top {
    top: 80px;
}

/* 中部 Toast - 垂直居中 */
.toast-center {
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
}

/* 中部 Toast 显示时的位置修正 */
.toast-center.show {
    transform: translate(-50%, -50%) scale(1);
}

/* 底部 Toast - 距离底部80px */
.toast-bottom {
    bottom: 80px;
}

/* Toast 带图标时的内联样式 */
.toast-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==================== 加载提示样式 ==================== */
/* 加载遮罩层 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 加载遮罩层显示状态 */
.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 加载容器 - 白色圆角卡片 */
.loading-container {
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    text-align: center;
}

/* 加载动画 - 旋转圆环 */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}

/* 旋转动画关键帧 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 加载文字 */
.loading-text {
    font-size: 13px;
    color: #6b7280;
}