/**
 * 暗色主题
 */

:root {
    --bg-body: #1a1a2e;
    --bg-container: #252540;
    --bg-section: #2d2d4a;
    --bg-price: rgba(250, 140, 22, 0.1);
    --bg-tips: rgba(82, 196, 26, 0.1);
    --bg-unpaid: rgba(250, 140, 22, 0.1);
    --bg-qrcode: #2d2d4a;
    
    --text-primary: #e4e4e4;
    --text-secondary: #a0a0b0;
    --text-muted: #6a6a7a;
    
    --accent-color: #a78bfa;
    --accent-hover: #8b5cf6;
    --price-color: #fbbf24;
    --success-color: #34d399;
    --error-color: #f87171;
    --warning-color: #fbbf24;
    
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-price: rgba(251, 191, 36, 0.3);
    --border-tips: rgba(52, 211, 153, 0.3);
    --border-unpaid: rgba(251, 191, 36, 0.3);
    
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    --remark-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --remark-text: #ffeb3b;
}

body {
    background-color: var(--bg-body);
}

.container {
    background: var(--bg-container);
    box-shadow: var(--shadow);
}

.page-title {
    color: var(--text-primary);
}

/* 步骤引导 */
.step-guide {
    background: var(--bg-section);
}

.step-guide-title {
    color: var(--text-secondary);
}

.step-list li {
    color: var(--text-secondary);
}

.step-list li::before {
    background: var(--accent-color);
    color: #fff;
}

/* 表单 */
.form-label {
    color: var(--text-primary);
}

.price-display {
    background: var(--bg-price);
    border: 1px solid var(--border-price);
}

.price-label {
    color: var(--text-secondary);
}

.price-value {
    color: var(--price-color);
}

/* layui覆盖 */
.layui-input,
.layui-select {
    background: var(--bg-section) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.layui-input:focus {
    border-color: var(--accent-color) !important;
}

.layui-form-select dl {
    background: var(--bg-section) !important;
    border-color: var(--border-color) !important;
}

.layui-form-select dl dd {
    color: var(--text-secondary) !important;
}

.layui-form-select dl dd:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    color: var(--accent-color) !important;
}

.layui-form-select dl dd.layui-this {
    background: rgba(167, 139, 250, 0.25) !important;
    color: var(--accent-color) !important;
}

.layui-btn-normal {
    background: var(--accent-color) !important;
}

.layui-btn-normal:hover {
    background: var(--accent-hover) !important;
}

/* 验证码 */
.captcha-img {
    border: 1px solid var(--border-color);
}

.captcha-refresh {
    color: var(--accent-color);
}

/* 自定义文本 */
.custom-display-text {
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--accent-color);
}

/* 备注码 */
.remark-code-box {
    background: var(--remark-bg);
}

.remark-code-label {
    color: rgba(255, 255, 255, 0.9);
}

.remark-code-value {
    color: var(--remark-text);
    text-shadow: 0 0 20px rgba(255, 235, 59, 0.6), 0 0 40px rgba(255, 235, 59, 0.3);
}

.remark-code-tip {
    color: rgba(255, 255, 255, 0.8);
}

/* 二维码 */
.qrcode-wrapper {
    border: 1px solid var(--border-color);
}

.qrcode-tabs {
    border-bottom: 1px solid var(--border-color);
}

.qrcode-tab {
    color: var(--text-secondary);
}

.qrcode-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.qrcode-tab:hover {
    color: var(--accent-color);
}

.qrcode-content {
    background: var(--bg-qrcode);
}

.qrcode-placeholder {
    background: var(--bg-section);
    color: var(--text-muted);
}

/* 订单摘要 */
.order-summary {
    background: var(--bg-section);
}

/* 支付提示 */
.payment-notice {
    background: linear-gradient(135deg, rgba(250, 140, 22, 0.15) 0%, rgba(250, 140, 22, 0.08) 100%);
    border: 2px solid rgba(250, 140, 22, 0.4);
    color: var(--price-color);
}

.payment-notice i {
    color: var(--price-color);
}

.summary-label {
    color: var(--text-secondary);
}

.summary-value {
    color: var(--text-primary);
}

.summary-value.price {
    color: var(--price-color);
}

.back-link a {
    color: var(--text-muted);
}

.back-link a:hover {
    color: var(--accent-color);
}

/* 流程条 */
.progress-icon {
    background: var(--bg-section);
}

.progress-icon i {
    color: var(--text-muted);
}

.progress-text {
    color: var(--text-muted);
}

.progress-item.done .progress-icon {
    background: var(--success-color);
}

.progress-item.done .progress-icon i {
    color: #fff;
}

.progress-item.done .progress-text {
    color: var(--success-color);
}

.progress-item.active .progress-icon {
    background: var(--price-color);
    animation: pulse 1.5s infinite;
}

.progress-item.active .progress-icon i {
    color: #1a1a2e;
}

.progress-item.active .progress-text {
    color: var(--price-color);
    font-weight: 600;
}

.progress-line {
    background: var(--border-color);
}

.progress-line.done {
    background: var(--success-color);
}

.pending-title {
    color: var(--text-primary);
}

/* 温馨提示 */
.pending-tips {
    background: var(--bg-tips);
    border: 1px solid var(--border-tips);
}

.tip-item {
    color: var(--success-color);
}

/* 订单信息 */
.order-info {
    background: var(--bg-section);
}

.order-info-label {
    color: var(--text-secondary);
}

.order-info-value {
    color: var(--text-primary);
}

.order-info-value.highlight {
    color: var(--price-color);
}

/* 未支付提示 */
.unpaid-notice {
    background: var(--bg-unpaid);
    border: 1px solid var(--border-unpaid);
}

.unpaid-title {
    color: var(--warning-color);
}

.mini-tab {
    background: var(--bg-section);
    color: var(--text-secondary);
}

.mini-tab.active {
    background: rgba(167, 139, 250, 0.2);
    color: var(--accent-color);
}

.mini-qrcode-box {
    background: var(--bg-container);
    border: 1px solid var(--border-color);
}

.mini-qrcode-placeholder {
    background: var(--bg-section);
    color: var(--text-muted);
}

.mini-remark {
    color: var(--text-secondary);
}

.mini-remark-code {
    color: var(--price-color);
}

/* 查询链接 */
.query-link {
    border-top: 1px solid var(--border-light);
}

.query-link a {
    color: var(--accent-color);
}

/* 取消按钮 */
#cancelOrderBtn {
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

#cancelOrderBtn:hover {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* 壁纸模式下的容器样式 */
body.has-wallpaper {
    background-color: transparent;
}

body.has-wallpaper .container {
    background: rgba(37, 37, 64, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}