/* start 注册页面背景设置 */
/* 确保整个页面没有溢出的边距 */
body, html {
    margin: 0;
    padding: 0;
}

/* 针对 base.html 中 content-wrapper 的修正 */
.content-wrapper {
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important; /* 覆盖之前 global.css 里的 padding-bottom: 50px */
}

/* 确保 footer 紧贴上方，没有上外边距 */
.edu-footer {
    margin-top: 0 !important;
}

/* 针对注册页面 content-wrapper 的定制 */
.register-page-wrapper {
    /* 深灰哑光背景，不使用纯黑，而是带一点蓝调的灰，更有高级感 */
    background: radial-gradient(circle at 50% 50%, #2c313a 0%, #1a1d23 100%);
    min-height: calc(100vh - 60px - 280px); /* 减去顶部导航和大致底部高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;

    margin: 0 !important;      /* 强制消除可能存在的外边距 */
    padding-top: 60px;         /* 这里的内边距控制卡片上下留白 */
    padding-bottom: 60px; 
    
    /* 使用 min-height 确保背景色一直延伸到底部 */
    /* 60px 是 header 高度，页脚高度根据实际情况调整，通常使用 flex-grow 更稳妥 */
    min-height: calc(100vh - 60px); 
}

/* 装饰性光晕：在深灰背景下增加一点“呼吸感” */
.register-page-wrapper::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(29, 98, 240, 0.1);
    filter: blur(100px);
    top: 10%;
    left: 10%;
    z-index: 0;
}

/* 注册容器：在深色背景下采用“极白”或“微透” */
.register-container {
    background: #ffffff; 
    border-radius: 24px;
    padding: 45px;
    width: 100%;
    max-width: 480px;
    /* 极致阴影：深色背景下需要更深但范围更小的阴影来突出轮廓 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

/* 标题与描述文字 */
.register-container h2 {
    color: #1a1a1a;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.register-subtext {
    color: #8c8c8c;
    font-size: 14px;
    text-align: center;
    margin-bottom: 35px;
    display: block;
}

/* 输入框与标签微调 */
.form-group label {
    color: #434343;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 8px;
}

.form-group input, .form-group select {
    background-color: #f5f7f9 !important; /* 浅灰色输入框与深背景形成对比 */
    border: 1.5px solid #eee !important;
    height: 48px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    border-color: #1d62f0 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(29, 98, 240, 0.1) !important;
}
/* 1. 背景：深邃且不沉闷的冷灰色调 */
.register-page {
    background-color: #e0e5ec;
    background-image: 
        radial-gradient(at 80% 0%, rgba(29, 98, 240, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(29, 98, 240, 0.05) 0px, transparent 50%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* 2. 容器：悬浮质感，极细边框 */
.register-container {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 45px;
    width: 100%;
    max-width: 520px;
    /* 三层阴影：环境光、主投影、底部重音，营造立体感 */
    box-shadow: 
        0 1px 2px rgba(0,0,0,0.02),
        0 4px 6px rgba(0,0,0,0.02),
        0 24px 48px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
}

/* 3. 标题排版：层次分明 */
.register-header h2 {
    color: #1a1a1a; /* 接近纯黑但更柔和 */
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.register-header p {
    color: #8c8c8c; /* 次要信息灰色显示 */
    font-size: 15px;
}

/* 4. 表单标签：凸显重点 */
.form-group label {
    font-size: 14px;
    font-weight: 600; /* 加粗显示 */
    color: #434343; /* 中等深灰色 */
    margin-bottom: 10px;
    display: block;
}

/* 5. 输入框：极简、专注状态 */
.form-group input, 
.form-group select,
.custom-select-container .select-selected {
    background-color: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 16px;
    color: #1a1a1a;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 针对所有下拉框的精致化修复 */
.form-group select {
    appearance: none;          /* 移除原生箭头 */
    -webkit-appearance: none;   /* 兼容 Safari */
    -moz-appearance: none;      /* 兼容 Firefox */
    
    /* 核心修复：确保文字垂直居中且不被遮挡 */
    height: 50px !important;    /* 明确高度 */
    line-height: 1.5 !important;/* 明确行高 */
    padding: 0 15px !important; /* 减少上下内边距，只留左右 */
    
    background-color: #f5f7f9;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    color: #1a1a1a;
    width: 100%;
    cursor: pointer;
    
    /* 重新添加一个精致的小箭头，确保它不会挡住文字 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
}

/* 针对 iOS 设备的文字垂直居中修正 */
select option {
    padding: 10px;
}

.form-group input:focus {
    background-color: #fff;
    border-color: #1d62f0;
    box-shadow: 0 0 0 4px rgba(29, 98, 240, 0.08);
}

/* 6. 辅助文字/可选提示：灰色显示 */
.optional-text {
    color: #bfbfbf;
    font-weight: normal;
    font-size: 12px;
    margin-left: 4px;
}

/* 7. 提交按钮：精致的微渐变 */
#submit-btn {
    background: #1a1a1a; /* 酷黑色 */
    color: #fff;
    border-radius: 12px;
    height: 54px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    margin-top: 20px;
}

#submit-btn:hover {
    background: #333;
    transform: translateY(-1px);
}
/* end 注册页面背景设置 */



/* start 老师样式 */
.select-with-info {
    position: relative;
}

/* 简介触发器容器 */
.teacher-info-trigger {
    position: relative;
}

/* 悬浮浮层样式 */
.bio-popover {
    position: absolute;
    bottom: calc(100% + 15px);
    right: -10px;
    width: 240px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    
    /* 默认隐藏 */
    display: none; 
}

/* 鼠标悬浮图标时显示内容 */
.teacher-info-trigger:hover .bio-popover {
    display: block;
}

.bio-popover p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.popover-arrow {
    position: absolute;
    bottom: -6px;
    right: 15px;
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
}

/* 下拉框样式微调 */
select {
    appearance: none; /* 移除某些浏览器默认样式 */
    background: #fff url("data:image/svg+xml;charset=utf-8,...") no-repeat right 15px center;
}

/* end 老师样式 */

/* 容器确保内部元素垂直排列 */
.exclusive-container {
    display: block; /* 弃用 flex，防止宽度被压缩 */
    width: 100%;
}

/* 统一设置下拉框和输入框的宽度 */
.exclusive-select, 
.exclusive-input {
    display: block !important;
    width: 100% !important;        /* 强制占据整行 */
    box-sizing: border-box !important; /* 关键：padding 不会增加总宽度 */
    margin-bottom: 10px;
}

.exclusive-input {
    margin-top: 10px; /* 给下拉框和输入框之间留出间距 */
    transition: all 0.3s ease;
}

/* 当输入框被禁用时的样式 */
.exclusive-input:disabled {
    background-color: #f0f0f0 !important; /* 变成浅灰色 */
    color: #bfbfbf !important;           /* 文字变淡 */
    border-color: #d9d9d9 !important;    /* 边框变淡 */
    cursor: not-allowed;                  /* 鼠标显示禁止图标 */
    opacity: 0.8;
}

/* 焦点样式保持一致 */
.exclusive-input:focus:not(:disabled) {
    border-color: #1d62f0 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(29, 98, 240, 0.1) !important;
}

/* --- 邮箱验证码组件专用样式 --- */

/* 验证码输入框组容器 */
.captcha-input-group {
    display: flex;
    gap: 12px; /* 增加间距，视觉更开阔 */
    align-items: flex-start;
}

/* 获取验证码按钮 */
.btn-send-captcha {
    height: 48px; /* 与输入框高度严格对齐 */
    min-width: 110px;
    padding: 0 15px;
    background-color: #1d62f0; /* 使用你定义的 EDU 蓝色 */
    color: #ffffff;
    border: none;
    border-radius: 10px; /* 略圆润，符合整体设计 */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(29, 98, 240, 0.15);
}

/* 按钮悬浮状态 */
.btn-send-captcha:hover:not(:disabled) {
    background-color: #164ecb;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(29, 98, 240, 0.25);
}

/* 按钮点击激活状态 */
.btn-send-captcha:active:not(:disabled) {
    transform: translateY(0);
}

/* 按钮禁用状态（倒计时中） */
.btn-send-captcha:disabled {
    background-color: #bdc3c7; /* 灰色背景 */
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.8;
}

/* 验证码输入框内的图标微调 */
.captcha-input-group .fa-shield {
    font-size: 16px;
    transition: color 0.3s ease;
}

/* 针对移动端的适配 */
@media (max-width: 480px) {
    .captcha-input-group {
        gap: 8px;
    }
    .btn-send-captcha {
        min-width: 100px;
        font-size: 13px;
        padding: 0 10px;
    }
}

/* 错误提示文字的间距修正 */
.captcha-input-group + .validation-msg {
    margin-top: 5px;
    display: block;
}