.hos_email_right {
 padding: 10px;
}

/* === 整体表单容器 === */
.letter_form {
 padding: 0;
 background: transparent;
 margin: 0;
}

/* === 填写须知：左侧竖线，通透呼吸感 === */
.form-notice {
 background: transparent;
 border-left: 3px solid #30A29C;
 padding: 8px 0 8px 16px;
 margin-bottom: 12px;
}

.form-notice-title {
 padding: 0;
 margin-bottom: 6px;
}

.form-notice-title .notice-title {
 font-size: 15px;
 font-weight: 600;
 color: #333;
}

.form-notice-body {
 padding: 0;
}

.form-notice-body p {
 font-size: 13px;
 color: #555;
 line-height: 1.6;
 margin: 0 0 3px;
}

.form-notice-body .notice-highlight {
 color: #30A29C;
 font-weight: 600;
}

/* === 表单卡片：白底 + 左侧竖线标题 === */
.form-card {
 background: #fff;
 border-radius: 12px;
 margin-bottom: 12px;
 border: 1px solid #EAEEEA;
 overflow: hidden;
 transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.form-card:hover {
 box-shadow: 0 4px 24px rgba(48, 162, 156, 0.08);
 border-color: #D0E8E5;
}

.form-card-header {
 display: flex;
 align-items: center;
 padding: 10px 20px;
 border-bottom: 1px solid #F0F3EE;
 background: #fff;
}

.form-card-header .accent-bar {
 width: 4px;
 height: 20px;
 background: #30A29C;
 border-radius: 2px;
 margin-right: 12px;
 flex-shrink: 0;
}

.form-card-header .card-title {
 font-size: 16px;
 font-weight: 600;
 color: #333;
 letter-spacing: 0.5px;
}

.form-card-header .card-badge {
 display: none;
}

.form-card-body {
 padding: 4px 20px 8px;
}

.form-card-body ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

/* === 表单行 === */
.form-card-body li {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 padding: 8px 0;
 border-bottom: 1px solid #F5F7F3;
 transition: background 0.15s;
}

.form-card-body li:last-child {
 border-bottom: none;
}

.form-card-body li:hover {
 background: rgba(48, 162, 156, 0.015);
}

/* === 标签：左对齐 === */
.form-card-body label {
 text-align: left;
 float: none;
 width: 150px;
 min-width: 150px;
 font-size: 14px;
 font-weight: 400;
 color: #555;
 display: flex;
 align-items: center;
 line-height: 1.4;
 height: auto;
 padding-right: 4px;
 box-sizing: border-box;
}

.form-card-body label .req {
 color: #E74C3C;
 font-size: 14px;
 margin-left: 4px;
 font-weight: 400;
 order: 1;
}

.form-card-body label font {
 display: none;
}

/* 错误提示单独一行显示在输入框下方（对齐输入框左缘），避免挤占输入框宽度 */
.form-card-body li .errorTip,
.form-card-body li .field-validation-error {
 flex: 0 0 100%;
 order: 10;
 padding-left: 154px;
 box-sizing: border-box;
 margin-top: 2px;
}

/* === 输入框：现代交互 === */
/* 输入框与 textarea 同宽：flex:1 占满标签后的剩余空间 */
.form-card-body .letter_form_tx {
 height: 42px;
 flex: 1;
 width: auto;
 min-width: 0;
 max-width: 100%;
 border: 1.5px solid #DDE3DA;
 border-radius: 8px;
 font-size: 14px;
 color: #333;
 background: #fff;
 padding: 0 14px;
 transition: all 0.25s ease;
 outline: none;
 box-shadow: none;
 box-sizing: border-box;
}

.form-card-body .letter_form_tx:hover {
 border-color: #B8D8D4;
}

.form-card-body .letter_form_tx:focus {
 border-color: #30A29C;
 box-shadow: 0 0 0 3px rgba(48, 162, 156, 0.12);
}

.form-card-body .letter_form_tx::placeholder {
 color: #A8B0A3;
}

/* === 文本域 === */
.form-card-body .letter_form_txa {
 height: 100px;
 width: 100%;
 max-width: 100%;
 min-height: 80px;
 border: 1.5px solid #DDE3DA;
 border-radius: 8px;
 outline: none;
 resize: vertical;
 font-size: 14px;
 padding: 8px 14px;
 box-sizing: border-box;
 margin: 0;
 background: #fff;
 color: #333;
 line-height: 1.7;
 transition: all 0.25s ease;
}

.form-card-body .letter_form_txa:hover {
 border-color: #B8D8D4;
}

.form-card-body .letter_form_txa:focus {
 border-color: #30A29C;
 box-shadow: 0 0 0 3px rgba(48, 162, 156, 0.12);
}

.form-card-body .letter_form_txa::placeholder {
 color: #A8B0A3;
}

/* 文本域/附件行：与 label 同行显示，label 垂直居中 */
.form-card-body li.label_textarea {
 /* display: flex; */
 /* align-items: center; */
 /* height: auto; */
 /* padding: 6px 0; */
}

.form-card-body li.label_textarea label {
 margin-bottom: 0;
}

/* textarea 与 input 同宽：flex:1 占满标签后的剩余空间；上传附件区同样占满 */
.form-card-body li.label_textarea .letter_form_txa {
 flex: 1;
 min-width: 0;
 width: auto;
}

.form-card-body li.label_textarea .upload-area {
 flex: 1;
 min-width: 0;
 width: auto;
}

/* === 提交按钮 === */
.form-submit-area {
 text-align: center;
 padding: 4px 0 16px;
}

.letter_form .patient_ask_btn {
 display: inline-block;
 width: 240px;
 height: 48px;
 background: #30A29C;
 border: none;
 border-radius: 24px;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 4px;
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 4px 14px rgba(48, 162, 156, 0.3);
 color: #fff;
 text-align: center;
 line-height: 48px;
 position: relative;
 margin: 20px auto 10px;
 overflow: hidden;
}

.letter_form .patient_ask_btn:hover {
 background: #28918C;
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(48, 162, 156, 0.35);
}

.letter_form .patient_ask_btn:active {
 transform: translateY(0);
 box-shadow: 0 2px 8px rgba(48, 162, 156, 0.3);
}

/* === 隐藏原始说明区域 === */
.right_content_sm {
 display: none;
}

/* === 验证码组合组件 === */
.captcha-group,
.sms-group {
 display: flex;
 align-items: center;
 gap: 12px;
}

/* === 上传附件区域 === */
.upload-area {
 width: 100%;
}

.upload-dropzone {
 border: 2px dashed #D0DDD8;
 border-radius: 12px;
 padding: 20px 16px;
 text-align: center;
 background: #FAFCFB;
 cursor: pointer;
 transition: all 0.25s ease;
}

.upload-dropzone:hover {
 border-color: #30A29C;
 background: #F2F9F7;
}

.upload-dropzone.dragover {
 border-color: #30A29C;
 background: #E8F5F2;
 transform: scale(1.01);
}

.upload-icon {
 width: 48px;
 height: 48px;
 margin: 0 auto 12px;
 background: linear-gradient(135deg, #30A29C 0%, #4DBFB9 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 12px rgba(48, 162, 156, 0.25);
}

.upload-icon svg {
 width: 24px;
 height: 24px;
 stroke: #fff;
}

.upload-title {
 font-size: 14px;
 font-weight: 500;
 color: #333;
 margin-bottom: 6px;
}

.upload-title span {
 color: #30A29C;
 text-decoration: underline;
 text-underline-offset: 2px;
}

.upload-hint {
 font-size: 12px;
 color: #999;
 line-height: 1.6;
}

.file-list {
 margin-top: 8px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.file-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 6px 12px;
 background: #fff;
 border: 1px solid #E8EDE9;
 border-radius: 8px;
 font-size: 13px;
 color: #555;
 transition: all 0.2s;
}

.file-item:hover {
 border-color: #30A29C;
 box-shadow: 0 2px 8px rgba(48, 162, 156, 0.1);
}

.file-icon {
 width: 32px;
 height: 32px;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 11px;
 font-weight: 600;
 color: #fff;
 text-transform: uppercase;
}

.file-icon.img {
 background: linear-gradient(135deg, #FF9A56 0%, #FF6B6B 100%);
}

.file-icon.pdf {
 background: linear-gradient(135deg, #FF5252 0%, #D32F2F 100%);
}

.file-icon.doc {
 background: linear-gradient(135deg, #448AFF 0%, #1976D2 100%);
}

.file-icon.other {
 background: linear-gradient(135deg, #9E9E9E 0%, #757575 100%);
}

.file-info {
 flex: 1;
 min-width: 0;
}

.file-item .file-name {
 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 13px;
 color: #333;
 font-weight: 500;
}

.file-item .file-size {
 display: block;
 color: #999;
 font-size: 12px;
 margin-top: 2px;
}

.file-item .file-remove {
 width: 28px;
 height: 28px;
 border: none;
 background: #F5F5F5;
 color: #999;
 cursor: pointer;
 font-size: 18px;
 line-height: 28px;
 text-align: center;
 border-radius: 50%;
 transition: all 0.2s;
 flex-shrink: 0;
 padding: 0;
}

.file-item .file-remove:hover {
 color: #fff;
 background: #E74C3C;
}

/* === 锦旗/表扬信 单附件上传 === */
.praise-single-wrap {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 width: auto;
}

.praise-single-col {
 flex: 1 1 250px;
 min-width: 230px;
}

/* 与素材图同风格：上方大图标、下方按钮，纵向居中排列（无外框线、无悬浮高亮） */
.praise-single {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 padding: 16px 12px 14px;
}

/* 锦旗/表扬信图标：素材图位于 Content/Areas/Hospitals/images/access/ */
.praise-img {
 width: 120px;
 height: auto;
 display: block;
 margin-bottom: 2px;
}

.praise-desc {
 font-size: 12px;
 color: #999;
 margin-top: 2px;
 text-align: center;
}

.praise-btn {
 margin-top: 4px;
 padding: 9px 28px;
 border: none;
 background: #30A29C;
 color: #fff;
 font-size: 14px;
 border-radius: 20px;
 cursor: pointer;
 transition: all .2s;
}

.praise-btn:hover {
 background: #25857F;
}

.praise-single-col .file-list {
 margin-top: 6px;
}

.captcha-input,
.sms-input {
 width: 200px;
 height: 42px;
 flex-shrink: 0;
}

.captcha-img {
 height: 42px;
 width: 120px;
 object-fit: contain;
 background: #f8f9fa;
 cursor: pointer;
 transition: border-color 0.2s, box-shadow 0.2s;
 flex-shrink: 0;
}

.captcha-img:hover {
 border-color: #30A29C;
 box-shadow: 0 0 0 3px rgba(48, 162, 156, 0.1);
}

.login_mobile_verification_btn {
 height: 42px;
 padding: 0 16px;
 background: #30A29C;
 color: #fff;
 border: none;
 border-radius: 8px;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.25s;
 white-space: nowrap;
 flex-shrink: 0;
 line-height: 42px;
}

.login_mobile_verification_btn:hover {
 background: #28918C;
}

.login_mobile_verification_btn.countdown {
 background: #ccc;
 cursor: not-allowed;
 color: #888;
}

/* === 验证码组件适配（GetValidateCodeAjax 输出为 span>input+img，参考文件为手写结构） === */
/* 验证码组合整体与 input 同宽：flex:1 占满标签后的剩余空间；内部 img 固定 120px、input 弹性填满 */
.captcha-group {
 flex: 1;
 min-width: 0;
 width: auto;
 max-width: 100%;
}

.captcha-group #ajax_div_GetValidateCode {
 display: flex;
 align-items: center;
 gap: 12px;
 flex: 1;
 min-width: 0;
}

.captcha-group input[type="text"] {
 flex: 1;
 width: auto;
 min-width: 0;
}

.captcha-group img {
 height: 42px;
 width: 120px;
 object-fit: contain;
 background: #f8f9fa;
 cursor: pointer;
 transition: border-color 0.2s, box-shadow 0.2s;
 flex-shrink: 0;
}

.captcha-group img:hover {
 border-color: #30A29C;
 box-shadow: 0 0 0 3px rgba(48, 162, 156, 0.1);
}

/* 短信验证码组合整体与 input 同宽：flex:1 占满标签后的剩余空间；内部按钮固定、输入框弹性填满 */
.sms-group {
 flex: 1;
 min-width: 0;
 width: auto;
 max-width: 100%;
}

.sms-group input[type="text"] {
 flex: 1;
 width: auto;
 min-width: 0;
}

.sms-group .login_mobile_verification_btn {
 flex-shrink: 0;
}

/* === 响应式 === */
@media only screen and (max-width: 768px) {
 .form-card-body label {
 width: 100%;
 min-width: 0;
 margin-bottom: 6px;
 }
 .form-card-body li.label_textarea .letter_form_txa{
  width:100%;
 }

 .form-card-body .letter_form_tx {
 width: 100%;
 }

 .captcha-group,
 .sms-group {
 width: 100%;
 max-width: 100%;
 }

 .form-card-body li {
 display: block;
 align-items: flex-start;
 }

 .form-card-header {
 padding: 14px 18px;
 }

 .form-card-body {
 padding: 8px 18px 16px;
 }

 .form-notice {
 padding-left: 14px;
 }

 .letter_form .patient_ask_btn {
 width: 90%;
 }
}