/* 支付页面特有样式 */
.payment-main { padding: 40px 0; }

.payment-header { padding: 24px; border-radius: 8px; margin-bottom: 30px; border: 1px solid #e9ecef; }
.payment-header.pink-color { background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%); }
.payment-header.green-color { background: linear-gradient(135deg, rgb(0 167 40 / 5%) 0%, rgb(0 255 114 / 5%) 100%) }

.payment-title { font-size: 24px; font-weight: 600; color: #2c3e50; margin-bottom: 12px; }

.payment-info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }

.appointment-details { flex: 1; }

.appointment-details h3 { font-size: 18px; font-weight: 500; color: #34495e; margin: 0 0 12px 0; }

.appointment-info-item { display: flex; margin-bottom: 8px; align-items: center; }

.info-label { color: #7f8c8d; margin-right: 8px; min-width: 80px; }

.info-value { color: #2c3e50; font-weight: 500; }

.payment-amount { text-align: right; }

.payment-amount-label { font-size: 14px; color: #7f8c8d; margin-bottom: 4px; }

.payment-amount-value { font-size: 28px; font-weight: 600; color: #e74c3c; }

.payment-methods { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 24px; margin-bottom: 30px; }

.payment-methods h2 { font-size: 20px; font-weight: 600; color: #2c3e50; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e9ecef; }

.payment-options { display: flex; flex-wrap: wrap; gap: 20px; }

.payment-option { flex: 1; min-width: 280px; padding: 20px; border: 2px solid #e9ecef; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; }

.payment-option:hover { border-color: #3498db; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1); }

.payment-option.selected { border-color: #3498db; background-color: #f8fbfe; }

.payment-option.selected::after { content: '✓'; position: absolute; top: 12px; right: 16px; width: 24px; height: 24px; background-color: #3498db; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; }

.payment-option-content { display: flex; align-items: center; gap: 16px; }

.payment-icon { font-size: 32px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }

.alipay-icon { background-color: #1677ff; color: white; }

.wechat-icon { background-color: #07c160; color: white; }

.payment-details h3 { font-size: 18px; font-weight: 500; color: #2c3e50; margin: 0 0 4px 0; }

.payment-details p { font-size: 14px; color: #7f8c8d; margin: 0; }

.payment-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 40px; }


.btn-pay { background-color: #e74c3c; color: white; border: none; padding: 12px 36px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }

.btn-pay:hover { background-color: #c0392b; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3); }

.btn-pay:disabled { background-color: #bdc3c7; cursor: not-allowed; transform: none; box-shadow: none; }


/* 支付二维码页面特有样式 */

.payment-qr-container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 40px; max-width: 600px; margin: 0 auto; text-align: center; }

.payment-method-header { margin-bottom: 30px; }

.payment-method-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 40px; }

.alipay-method { background-color: rgba(22, 119, 255, 0.1); color: #1677ff; }

.wechat-method { background-color: rgba(7, 193, 96, 0.1); color: #07c160; }

.payment-method-title { font-size: 24px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }

.payment-method-desc { font-size: 16px; color: #7f8c8d; }

.qr-code-container { margin: 30px 0; padding: 20px; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; display: inline-block; }

.qr-code { width: 200px; height: 200px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; border-radius: 8px; }

.qr-code img { max-width: 100%; max-height: 100%; }

.qr-code-placeholder { width: 180px; height: 180px; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; border-radius: 4px; }

.qr-code-placeholder i { font-size: 48px; color: #7f8c8d; }

.payment-instructions { margin-bottom: 30px; }

.payment-instructions h3 { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 12px; }

.instructions-list { text-align: left; max-width: 400px; margin: 0 auto; }

.instruction-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }

.instruction-number { width: 24px; height: 24px; border-radius: 50%; background-color: #3498db; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; margin-top: 2px; }

.instruction-text { font-size: 14px; color: #5a6c7d; line-height: 1.6; }

.payment-status { margin: 30px 0; padding: 20px; background-color: #f8f9fa; border-radius: 8px; }

.status-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 12px; }

.status-timer { font-size: 16px; color: #e74c3c; font-weight: 600; }

.payment-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }


.order-info { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef; text-align: left; }
.order-info h3 { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 16px; }
.order-info-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }

.info-label { color: #7f8c8d; }

.info-value { color: #2c3e50; font-weight: 500; }

.order-amount { font-weight: 600; color: #e74c3c; font-size: 18px; }


/* 支付结果页面特有样式 */

.payment-status-container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 40px; max-width: 600px; margin: 0 auto; text-align: center; }

/* 状态图标 */
.status-icon-container { margin-bottom: 30px; }

.status-icon { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; overflow: hidden; }

.status-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background-image: radial-gradient(circle at center, currentColor 0%, transparent 70%); animation: pulse 2s infinite; }

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.2; }
    100% { transform: scale(0.95); opacity: 0.3; }
}

.success-icon { background-color: rgba(7, 193, 96, 0.1); color: #07c160; }

.error-icon { background-color: rgba(235, 87, 87, 0.1); color: #eb5757; }

.warning-icon { background-color: rgba(242, 153, 74, 0.1); color: #f2994a; }

.status-icon i { font-size: 60px; position: relative; z-index: 1; }

/* 状态标题 */
.status-title { font-size: 28px; font-weight: 700; margin-bottom: 16px; color: #2c3e50; }

.success-title { color: #07c160; }

.error-title { color: #eb5757; }

.warning-title { color: #f2994a; }

/* 状态描述 */
.status-description { font-size: 16px; color: #7f8c8d; line-height: 1.6; margin-bottom: 30px; padding: 0 20px; }

/* 订单信息卡片 */
.order-details-card { background-color: #f8f9fa; border-radius: 8px; padding: 24px; margin-bottom: 30px; text-align: left; }

.order-details-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 20px; text-align: center; }

.order-detail-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e9ecef; }

.order-detail-item:last-child { border-bottom: none; margin-top: 8px; }

.detail-label { font-size: 14px; color: #7f8c8d; }

.detail-value { font-size: 14px; color: #2c3e50; font-weight: 500; }

.order-amount { font-size: 20px; font-weight: 700; color: #e74c3c; }

/* 支付提示卡片 */
.payment-tips { background-color: #f0f8ff; border-left: 4px solid #3498db; padding: 16px; border-radius: 4px; margin-top: 24px; text-align: left; }

.payment-tips h4 { color: #2980b9; font-size: 16px; margin-bottom: 12px; font-weight: 600; }

.payment-tips ul { margin: 0; padding-left: 20px; }

.payment-tips li { color: #7f8c8d; font-size: 14px; margin-bottom: 8px; line-height: 1.5; }

.payment-tips li:last-child { margin-bottom: 0; }


/* 响应式设计 */
@media (max-width: 768px) {
    .payment-info { flex-direction: column; align-items: flex-start; }

    .payment-amount { text-align: left; width: 100%; }

    .payment-options { flex-direction: column; }
    .payment-option { min-width: auto; }

    .payment-actions { flex-direction: column-reverse; }
    .payment-actions button { width: 100%; }


    .payment-qr-container { padding: 24px; }

    .payment-method-icon { width: 60px; height: 60px; font-size: 32px; }

    .payment-method-title { font-size: 20px; }

    .qr-code { width: 160px; height: 160px; }

    .payment-actions { flex-direction: column; }

    .payment-actions button { width: 100%; }

    /*支付结果*/
    .payment-status-container { padding: 24px; }
    .status-icon { width: 100px; height: 100px; }
    .status-icon i { font-size: 50px; }
    .status-title { font-size: 24px; }
    .status-description { padding: 0; }
    .order-details-card { padding: 20px; }

}