/* 覆盖可能的背景色，保持与webBase.css一致 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8e8e8; /* 与webBase.css保持一致 */
}

/* 重置.row可能带来的宽度限制，确保内容居中 */
.row {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* 确保表单元素居中但顶部对齐 */
.row .contact > form {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start; /* 顶部对齐 */
}

/* 表单内部元素的样式调整 */
.row .contact > form > * {
    width: 100%;
    max-width: 100%; /* 保持原来的宽度 */
}

/* 在小屏幕上堆叠元素而不是并排显示 */
@media (max-width: 768px) {
    .row .contact {
        flex-direction: column;
        align-items: center;
    }
    
    .row .contact > form,
    .row .contact > .license-declaration {
        width: 100%;
        max-width: 500px;
    }
}
h2 {
    text-align: center;
    padding: 20px;
    color: #333;
}

form {
    /* 基础样式保持，但移除可能与居中布局冲突的设置 */
    margin: 0;
	
}
label {
    display: block;
    margin-bottom: 8px;
	color: #555;
}
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}
input[type="submit"] {
    background-color: #007BFF;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
    background-color: #0062cc;
}

/* 加载状态动画 */
.loading .loading-dot {
    display: inline-block;
    animation: dotPulse 1.5s infinite ease-in-out;
    width: 6px;
    height: 6px;
    background-color: #007bff;
    border-radius: 50%;
    margin: 0 2px;
}
.loading .loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.loading .loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 60%, 100% {
        transform: scale(0);
    }
    30% {
        transform: scale(1);
    }
}

/* 状态容器样式 */
.loading-state, .success-state, .error-state {
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
}
.loading-state {
    background-color: #f8f9fa;
    color: #495057;
}
.success-state {
    background-color: #e8f5e9;
    border-left: 4px solid #28a745;
}
.error-state {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
}
.code-value {
    font-family: monospace;
    font-weight: bold;
    color: #007bff;
    margin-left: 5px;
}

/* 授权声明容器样式 */
.license-declaration {
  width: 400px; /* 宽度可根据实际需求调整 */
  height: 500px; /* 固定高度，超出出现滚动条 */
  overflow-y: auto; /* 垂直方向超出自动出现滚动条 */
  border: 1px solid #ccc; /* 灰色边框，增强视觉边界 */
  border-radius: 8px; /* 圆角，让外观更柔和 */
  padding: 15px; /* 内边距，让内容和边框有间隔 */
  margin-top: 0; /* 移除负边距，保持顶部对齐 */
  background-color: #f9f9f9; /* 浅灰色背景，区分内容区域 */
  float: right; /* 让容器靠右侧显示 */
  margin-right: 50px; /* 右侧留出一些空白，避免贴着边缘 */
}

/* 修改整体布局，使表单居中显示，授权声明在右侧作为说明 */
.contact {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 整体内容居中 */
  align-items: flex-start; /* 顶部对齐 */
  position: relative; /* 相对定位，为右侧说明提供参考 */
  width: 100%; /* 宽度100% */
  max-width: 1080px; /* 最大宽度限制，与全局设置一致 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* 表单容器样式 - 确保表单居中显示 */
.contact form {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 280px;
  z-index: 2; /* 确保表单显示在最上层 */
}

/* 授权声明容器样式 - 在右侧作为说明显示 */
.license-declaration {
  position: absolute; /* 绝对定位 */
  right: 1%; /* 距离右侧5%的位置 */
  top: 0; /* 顶部对齐 */
  width: 300px; /* 调整宽度 */
  height: auto; /* 自动高度 */
  max-height: 500px; /* 最大高度限制 */
  margin: 0; /* 重置margin */
  float: none; /* 移除float */
  z-index: 1; /* 低于表单的层级 */
}

/* 响应式调整 - 当屏幕宽度不足时，授权声明移至表单下方 */
@media (max-width: 1024px) {
  .contact {
    flex-direction: column;
    align-items: center;
  }
  
  .license-declaration {
    position: static;
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
  }
}

.license-declaration h3 {
  margin-top: 0;
  font-size: 16px;
  color: #333; /* 标题文字颜色加深，突出层级 */
  border-bottom: 1px solid #ccc; /* 标题下方加分割线，区分标题和内容 */
  padding-bottom: 10px; /* 标题和分割线间留出间距 */
}

.license-declaration p {
  margin: 0 0 10px 0; /* 段落之间设置间距 */
  line-height: 1.6; /* 行高调整，提升可读性 */
  color: #666; /* 段落文字颜色稍浅，突出层次 */
  text-indent: 2em; /* 首行缩进，让排版更规范（可选，看需求） */
}

/* 验证码功能 */
/* 手机号容器：控制整体布局 */
.phone-input-group {
	margin-bottom: 15px; /* 和其他输入框保持间距一致 */
}

/* 关键：输入框 + 按钮的父容器，必须相对定位 */
.phone-input-wrapper {
	position: relative; 
	width: 100%;       /* 占满父容器宽度 */
	/* max-width: 300px;  /* 可选：限制输入框最大宽度 */ 
}

/* 手机号输入框：统一尺寸和行高 */
#phone {
	width: 100%;
	padding: 8px 100px 8px 10px; /* 右侧预留按钮空间，左侧留内边距 */
	box-sizing: border-box;
	height: 36px;              /* 固定高度，方便垂直居中计算 */
	line-height: 36px;         /* 文字垂直居中 */
	font-size: 14px;           /* 和按钮字体一致 */
}

/* 验证码按钮：绝对定位 + 垂直居中魔法 */
#send-captcha {
	position: absolute;
	right: 8px;          /* 距离右侧的间距，可微调 */
	top: 50%;            /* 基于父容器顶部50% */
	transform: translateY(-80%); /* 向上偏移自身高度的50%，实现垂直居中 */
	background: transparent;      /* 无背景 */
	border: none;                 /* 无边框 */
	color: #28a745;              /* 绿色文字 */
	font-size: 14px;             /* 和输入框字体一致 */
	line-height: 36px;           /* 和输入框行高一致，确保按钮文字居中 */
	padding: 0 8px;              /* 左右内边距，扩大点击区域 */
	cursor: pointer;
	white-space: nowrap;         /* 防止文字换行 */
}

/* 按钮交互效果优化 */
#send-captcha:hover {
	color: #218838; /* 深绿色 hover */
	background-color: rgba(40, 167, 69, 0.05) !important; /* 轻微背景色提升体验 */
}
#send-captcha:disabled {
	color: #ccc;    /* 禁用时灰色 */
	cursor: not-allowed;
}