#registration {
        max-width: 1140px !important; 
        margin: 60px auto 100px !important; 
        padding: 0 15px;
    }
    #registration .card {
        margin-bottom: 25px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; 
    }
    #registration .card-body {
        padding: 30px !important;
    }

    @media (max-width: 768px) {
        #registration {
            margin-top: 30px !important;
        }
    }
    
    /* 1. 结账页主容器美化 */
#frmCheckout {
    max-width: 1100px !important;
    margin: 40px auto !important;
    padding: 20px;
}

/* 2. 个人资料/账单地址 卡片美化 */
#frmCheckout .card {
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    margin-bottom: 30px !important;
    overflow: hidden;
}

/* 3. 卡片标题栏颜色调整 */
#frmCheckout .card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 15px 25px !important;
    font-weight: 700;
    color: #333;
}

/* 4. 输入框美化 */
#frmCheckout .form-control {
    border-radius: 8px !important;
    height: 45px !important;
    border: 1px solid #ddd !important;
}

/* 5. 结账按钮（完成订购） */
#btnCompleteOrder {
    background-color: #0052ff !important;
    border: none !important;
    padding: 15px 60px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 20px rgba(0,82,255,0.2) !important;
}
/* 1. 邮件列表卡片整体重塑 */
#frmCheckout .card.mb-4:has(.fa-envelope), 
div.card.mb-4:contains("邮件列表") {
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    padding: 30px !important;
    margin-top: 30px !important;
    transition: all 0.3s ease;
}

/* 2. 标题与描述文字优化 */
#frmCheckout .card-body h3, 
.card-body .card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin-bottom: 10px !important;
}

#frmCheckout .card-body p {
    font-size: 14px !important;
    color: #86868b !important;
    line-height: 1.6 !important;
}

/* 3. 美化开关/单选框区域 (Bootstrap Switch) */
.bootstrap-switch {
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: #0052ff !important; /* 统一品牌蓝 */
}

/* 如果是原生单选框，增加间距和质感 */
.card-body .radio-inline, .card-body .checkbox-inline {
    padding: 10px 20px !important;
    background: #f8f9fa;
    border-radius: 8px;
    margin-right: 15px;
    cursor: pointer;
}
/* 1. 强制验证码容器聚拢 */
.captcha-container, 
.text-center.row.justify-content-center:has(img[src*="captcha"]) {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    padding: 40px !important;
    margin: 40px auto !important;
    max-width: 500px !important; /* 限制宽度，防止由于 flex 导致的过远拉伸 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 2. 让验证码图片和输入框紧凑并排 */
.captcha-container .form-group, 
.captcha-container > div {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important; /* 图片和框之间的距离 */
    justify-content: center !important;
    width: 100% !important;
}

/* 3. 验证码图片样式 */
.captcha-container img, 
img[src*="captcha"] {
    height: 45px !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    cursor: pointer;
}

/* 4. 验证码输入框样式：让它像个精致的小框 */
.captcha-container input[name="code"], 
input[id*="captcha"] {
    width: 140px !important; /* 固定宽度，不让它乱跑 */
    height: 45px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    margin: 0 !important; /* 消除可能的外边距 */
}

/* 5. 提示文字居中且精致 */
.captcha-container p {
    font-size: 13px !important;
    color: #888 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}
/* --- 1. 按钮基础样式：科技蓝渐变与外发光 --- */
input.btn.btn-lg.btn-primary, 
#btnRegister, 
#btnCompleteOrder {
    position: relative;
    background: linear-gradient(135deg, #0052ff 0%, #00a2ff 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 80px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important; /* 字体间距拉开更有高级感 */
    text-transform: uppercase;
    border-radius: 4px !important; /* 科技风通常采用小圆角或直角 */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* 核心：科技感青色外发光 */
    box-shadow: 0 0 15px rgba(0, 82, 255, 0.4), 
                inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
    
    /* 边缘修饰 */
    border-left: 3px solid #00f6ff !important;
    border-right: 3px solid #00f6ff !important;
}

/* --- 2. 悬停效果：增强亮度与扫光动画 --- */
input.btn.btn-lg.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(0, 162, 255, 0.6), 
                0 0 10px rgba(0, 246, 255, 0.8) !important;
    background: linear-gradient(135deg, #0062ff 0%, #00c2ff 100%) !important;
}

/* --- 3. 科技风扫光动画 (伪元素实现) --- */
input.btn.btn-lg.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: all 0.6s;
}

input.btn.btn-lg.btn-primary:hover::before {
    left: 100%;
}

/* --- 4. 底部装饰：增加一个科技感线条 (可选) --- */
.text-center:has(input.btn-primary)::after {
    content: "";
    display: block;
    width: 160px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f6ff, transparent);
    margin: 15px auto 0;
    box-shadow: 0 0 10px #00f6ff;
    opacity: 0.6;
}
/* 1. 拉開驗證碼與按鈕的距離 */
.captcha-container, 
div:has(img[src*="captcha"]) {
    margin-bottom: 50px !important; /* 增加底部間距，讓按鈕往下沉 */
}

/* 2. 讓「註冊」按鈕區域整體下移 */
.text-center:has(#btnRegister), 
.text-center:has(input[type="submit"]) {
    margin-top: 40px !important; 
    padding-bottom: 60px !important; /* 確保下方也有足夠空間 */
}

/* 3. 按鈕設計：改為極簡高級風（深邃藍、小圓角、微陰影） */
#btnRegister, 
input.btn-primary[type="submit"] {
    background: linear-gradient(135deg, #0052ff 0%, #003bc7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 100px !important; /* 橫向加寬，更大氣 */
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 5px !important; /* 文字間距拉開，視覺更穩重 */
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 82, 255, 0.2) !important;
}

/* 4. 懸停效果：輕微放大並增強投影 */
#btnRegister:hover, 
input.btn-primary[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 82, 255, 0.3) !important;
    background: linear-gradient(135deg, #0062ff 0%, #004ceb 100%) !important;
}
/* 1. 缩小按钮容器底部的外边距 */
/* 针对截图中的 div.text-center */
#frmCheckout .text-center, 
.text-center:has(#btnRegister) {
    margin-bottom: 5px !important;  /* 将原本较大的间距压低 */
    padding-bottom: 5px !important;
}

/* 2. 移除表单 (form) 底部可能存在的默认边距 */
#frmCheckout {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. 强制消除页脚顶部的所有外边距 */
footer#footer.ctg-dark-footer {
    margin-top: 0 !important; /* 彻底消除页脚上方的“空隙” */
    position: relative;
    z-index: 10;
}

/* 4. 如果你想让按钮离页脚“极近”，可以微调这个值 */
.main-content, .item-content {
    padding-bottom: 10px !important;
}
/* 1. 统一表单组容器，模拟输入框外观 */
#personalInformation .form-group.prepend-icon,
#frmCheckout .form-group.prepend-icon {
    display: flex !important;
    align-items: center !important;
    background: #fdfdfd !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;
    height: 50px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 2. 焦点状态：点击时边框变蓝 */
#personalInformation .form-group.prepend-icon:focus-within,
#frmCheckout .form-group.prepend-icon:focus-within {
    border-color: #0052ff !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1) !important;
}

/* 3. 彻底对齐左侧图标 (Label 容器) */
#personalInformation .field-icon,
#frmCheckout .field-icon {
    width: 45px !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    border-right: 1px solid #f0f0f0;
    pointer-events: none; /* 防止点击图标干扰输入 */
}

/* 修正图标位置，确保绝对居中 */
#personalInformation .field-icon i,
#frmCheckout .field-icon i {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* 4. 彻底对齐右侧输入框 (Input) */
#personalInformation input.field,
#frmCheckout input.field,
#personalInformation select.field,
#frmCheckout select.field {
    flex: 1 !important;
    height: 100% !important;
    border: none !important;      /* 删掉输入框自带边框 */
    background: transparent !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    color: #333 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 5. 解决 Placeholder (占位文字) 颜色 */
#personalInformation input::placeholder {
    color: #bbb !important;
}

/* 6. 解决原本文字消失的问题：强制显示内容 */
#personalInformation .form-group, 
#frmCheckout .form-group {
    visibility: visible !important;
    display: block !important;
}



/* 1. 核心容器：强制取消绝对定位，改用水平排列 */
.form-group.prepend-icon {
    display: flex !important;
    flex-direction: row !important; /* 图标在左，文字在右 */
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 8px !important;
    height: 48px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important; /* 清除所有内边距，交给子元素控制 */
}

/* 2. 彻底修正图标容器（Label） */
/* 强制让它变成一个固定宽度的左侧色块 */
.form-group.prepend-icon .field-icon {
    position: static !important; /* 必须取消 absolute，否则会盖在文字上 */
    width: 45px !important;
    height: 100% !important;
    background: #f8f9fa !important; /* 给图标一个浅灰色背景，增加层次感 */
    border-right: 1px solid #e1e1e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    margin: 0 !important;
    flex-shrink: 0; /* 防止图标被压缩 */
}

/* 3. 彻底修正输入框（Input） */
.form-group.prepend-icon input.field,
.form-group.prepend-icon .form-control {
    position: static !important;
    flex: 1 !important; /* 占据右侧剩余所有空间 */
    height: 100% !important;
    border: none !important;      /* 删掉自带边框 */
    background: transparent !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    color: #333 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 4. 解决点击时的发光效果 */
.form-group.prepend-icon:focus-within {
    border-color: #0052ff !important;
    box-shadow: 0 0 0 3px rgba(0,82,255,0.1) !important;
}
.form-group.prepend-icon:focus-within .field-icon {
    color: #0052ff !important;
    background: #f0f5ff !important;
}

/* 5. 修正下拉选框（国家选择等） */
.form-group.prepend-icon select.field {
    flex: 1 !important;
    border: none !important;
    height: 100% !important;
    padding-left: 15px !important;
    -webkit-appearance: none; /* 去掉原生箭头 */
}

/* 每个表单项容器设为相对定位，方便气泡定位 */
.form-group.prepend-icon {
    position: relative !important;
}

/* 对话框气泡样式 */
.error-bubble {
    position: absolute;
    bottom: calc(100% + 10px); /* 悬浮在输入框正上方 10px 处 */
    left: 10px;
    background: #ff4d4f; /* 警告红 */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
    animation: bubbleUp 0.3s ease-out;
}

/* 气泡下方的三角形小箭头 */
.error-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15px;
    border: 6px solid transparent;
    border-top-color: #ff4d4f;
}

@keyframes bubbleUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 错误时输入框边框变红 */
.input-error-border {
    border-color: #ff4d4f !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1) !important;
}
/* 确保所有表单组都有定位基准，防止气泡乱飞 */
.form-group {
    position: relative !important;
}

/* 红色警告边框 */
.input-error-border {
    border-color: #ff4d4f !important;
    background-color: #fff1f0 !important; /* 淡淡的红底色，提醒更明显 */
}

/* 气泡样式保持不变，但增加一个 z-index 确保不被遮挡 */
.error-bubble {
    z-index: 2000 !important;
}
.form-group {
    position: relative !important;
}
.input-error-border {
    border: 1px solid #ff4d4f !important;
    box-shadow: 0 0 5px rgba(255, 77, 79, 0.2) !important;
}