/* 预约页弹出层 */
/* 遮罩层样式 - 增加动画相关属性 */
#mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9998;
    opacity: 0; /* 初始透明度0 */
    transition: opacity 0.3s ease; /* 遮罩层淡入淡出动画 */
}
/* 遮罩层激活状态 */
#mask.active {
    opacity: 1;
}

/* 弹窗表单容器 - 增加动画相关属性 */
#popupForm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* 初始缩放0.9 */
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    z-index: 9999;
    max-width: 500px;
    width: 90%;
    display: none;
    opacity: 0; /* 初始透明度0 */
    /* 弹窗动画：缩放+透明度，使用顺滑的缓动函数 */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 可选：添加阴影增强视觉效果 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
/* 弹窗激活状态 */
#popupForm.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* 正常大小和透明度 */
}

/* 弹窗标题与关闭按钮 */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}
.close-btn {
    cursor: pointer;
    font-size: 22px;
    color: #666;
    transition: color 0.2s ease; /* 关闭按钮hover动画 */
}
.close-btn:hover {
    color: #fd4843;
}

/* 表单元素样式 - 核心：Flex实现label和input并排 */
.form-group {
    margin-bottom: 15px;
    display: flex; /* 关键：开启Flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 标签和输入框的间距（替代margin） */
}
/* 标签样式：固定宽度，文字右对齐，节省空间 */
.form-group label {
    flex: 0 0 80px; /* 固定宽度80px，不缩放 */
    text-align: right; /* 文字右对齐，更美观 */
    font-size: 14px;
    color: #333;
    margin: 0; /* 清除原有margin */
}
/* 输入框/选择框：占剩余空间 */
.form-group input,
.form-group select {
    flex: 1; /* 关键：占满剩余宽度 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease; /* 输入框聚焦动画 */
}
.form-group input:focus,
.form-group select:focus {
    border-color: #ff7d00;
    outline: none;
}

/* 预约套餐行：统一并排样式 */
.package-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.package-row label {
    flex: 0 0 80px;
    text-align: right;
    font-size: 14px;
    color: #333;
}
.package-row .address-value {
    flex: 1;
    font-weight: bold;
    color: #fd4843;
    font-size: 16px;
}

/* 验证码行样式：特殊处理（输入框+图片） */
.vertify-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.vertify-row label {
    flex: 0 0 80px;
    text-align: right;
    font-size: 14px;
    color: #333;
}
.vertify-row .vertify-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}
    .vertify-row input {
        width: 90px; /* 移动端可再微调1-5px，完全匹配红色圈 */
        padding: 5px 7px;
        font-size: 14px;
    }
    /* 验证码图片同步适配，避免比例失调 */
    .vertify-row img {
        width: 65px; /* 按需调整，仅需和输入框高度匹配即可 */
        height: 28px;
        flex: none;
    }
	
	/* 提交按钮样式 */
.submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(to right, rgb(255, 106, 19), rgb(255, 159, 60)) !important;
    color: #fff;
    cursor: pointer;
	font-size: 16px;
    line-height: normal;
    margin: 10px auto;
    font-weight: bold;
	border: none;
    border-radius: 30px;
    transition: background 0.2s ease; /* 按钮hover动画 */
}
.submit-btn:hover {
    background: #e67000;
}

/* 地址值加粗样式 */
.address-value {
    font-weight: bold;
    color: #fd4843;
    font-size: 14px;
}

/* 移动端适配微调：小屏幕下恢复块级，避免挤压 */
@media (max-width: 480px) {
    #popupForm {
        padding: 20px;
    }
    .form-header {
        font-size: 12px;
    }
    /* 保持Flex水平排列，修复错位 */
    .form-group,
    .package-row,
    .vertify-row {
        flex-direction: row; /* 恢复水平排列 */
        align-items: center; /* 垂直居中对齐 */
        gap: 10px; /* 保持间距 */
    }
    /* 移动端标签保持固定宽度和右对齐，与input并排 */
    .form-group label,
    .package-row label,
    .vertify-row label {
        flex: 0 0 80px; /* 保持固定宽度 */
        text-align: right; /* 文字右对齐 */
        width: auto; /* 取消100%宽度 */
    }
    .vertify-row .vertify-content {
        width: 100%;
    }
}