/**
 * Keysion Shop - WooCommerce 页面样式.
 *
 * 仅在 WooCommerce 相关页面加载（inc/enqueue.php 中通过 keysion_is_woocommerce_page() 守护）。
 *
 * 覆盖范围：
 *  - Checkout 结算页布局（参考美术预览第 388-422 行 Checkout Modal CSS）
 *  - 表单输入框统一样式
 *  - 支付方式网格布局
 *  - 移动端响应式调整
 *
 * @package Keysion_Shop
 */

/* ============================================================
 * Checkout 结算页
 * 美术基准：前端美术预览.html 第 388-422 行（Checkout Modal CSS）
 * ============================================================ */

.woocommerce-checkout .checkout {
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	gap: 48px;
	margin-top: 32px;
}

.woocommerce-checkout .checkout .col-1 { order: 1; }
.woocommerce-checkout .checkout .col-2 { order: 2; }

.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	padding: 24px;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea.input-text {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea.input-text:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.woocommerce-checkout .form-row {
	margin-bottom: 16px;
}

.woocommerce-checkout ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.woocommerce-checkout ul.payment_methods li {
	border: 1.5px solid var(--border);
	border-radius: var(--radius-xl);
	padding: 16px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.woocommerce-checkout ul.payment_methods li:hover {
	border-color: var(--primary);
}

.woocommerce-checkout ul.payment_methods li input:checked + label {
	color: var(--primary);
}

.woocommerce-checkout ul.payment_methods .payment_box {
	margin-top: 12px;
	font-size: 13px;
	color: var(--text-secondary);
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding: 16px;
	background: var(--primary);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-lg);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: background-color 0.2s, transform 0.2s;
}

.woocommerce-checkout #place_order:hover {
	background: var(--primary-hover);
	transform: translateY(-1px);
}

/* ============================================================
 * 结算页移动端响应式
 * ============================================================ */
@media (max-width: 768px) {
	.woocommerce-checkout .checkout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.woocommerce-checkout ul.payment_methods {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 商品归档页（T3.1）
 * 美术基准：前端美术预览.html 第 204-278 行（Product Modal CSS）
 * ============================================================ */

.keysion-woo-archive .products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 24px;
}
@media (max-width: 1024px) {
	.keysion-woo-archive .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.keysion-woo-archive .products-grid { grid-template-columns: repeat(2, 1fr); }
	.product-detail-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-width: 480px) {
	.keysion-woo-archive .products-grid { grid-template-columns: 1fr; }
}

/* WooCommerce 排序/结果数工具条 */
.keysion-woo-archive .woocommerce-result-count {
	float: left;
	margin: 12px 0;
	font-size: 14px;
	color: var(--text-secondary);
}
.keysion-woo-archive .woocommerce-ordering {
	float: right;
	margin: 8px 0;
}
.keysion-woo-archive .woocommerce-ordering select {
	padding: 8px 14px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: white;
	font-size: 14px;
	outline: none;
	cursor: pointer;
}

/* 分页 */
.keysion-woo-archive .woocommerce-pagination {
	margin-top: 40px;
	text-align: center;
}
.keysion-woo-archive .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.keysion-woo-archive .woocommerce-pagination ul.page-numbers li {
	list-style: none;
}
.keysion-woo-archive .woocommerce-pagination ul.page-numbers li a,
.keysion-woo-archive .woocommerce-pagination ul.page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}
.keysion-woo-archive .woocommerce-pagination ul.page-numbers li a:hover {
	border-color: var(--primary);
	color: var(--primary);
}
.keysion-woo-archive .woocommerce-pagination ul.page-numbers li .current {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
}

/* ============================================================
 * 商品详情页（T3.1）
 * 美术基准：前端美术预览.html 第 204-278 行（Product Modal CSS）
 * ============================================================ */

.keysion-single-product .product-detail-layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
}

.keysion-single-product .product-title {
	font-size: 32px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 12px;
}

/* 价格框：渐变背景 + 价格 #DC2626 32px 700 */
.keysion-single-product .price {
	background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
	border-radius: var(--radius-xl);
	padding: 16px 20px;
	margin: 20px 0;
}
.keysion-single-product .price .amount {
	color: #DC2626;
	font-size: 32px;
	font-weight: 700;
}
.keysion-single-product .price del .amount {
	color: #94A3B8;
	font-size: 18px;
	text-decoration: line-through;
	margin-right: 8px;
}

/* 简介与 SKU 选项 */
.keysion-single-product .woocommerce-product-details__short-description {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.7;
	margin: 16px 0;
}
.keysion-single-product .variations {
	width: 100%;
	margin: 16px 0;
}
.keysion-single-product .variations td {
	padding: 8px 12px 8px 0;
}
.keysion-single-product .variations select {
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	font-size: 14px;
	background: white;
	outline: none;
	cursor: pointer;
}
.keysion-single-product .variations select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* SKU 选项卡片：激活态边框 #2563EB */
.keysion-single-product .swatch-select,
.keysion-single-product .sku-option {
	display: inline-block;
	padding: 8px 16px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	color: var(--text-primary);
}
.keysion-single-product .sku-option:hover {
	border-color: var(--primary);
	color: var(--primary);
}
.keysion-single-product .sku-option.active {
	border-color: #2563EB;
	color: #2563EB;
	background: #EFF6FF;
}

/* 服务标签：3 个（正品保障/快速发货/售后无忧），背景 #F1F5F9 圆角 9999px */
.keysion-single-product .product-service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0;
}
.keysion-single-product .service-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	background: #F1F5F9;
	color: var(--text-secondary);
	font-size: 13px;
	border-radius: var(--radius-full);
}

/* 数量选择器：- + 数字框 */
.keysion-single-product form.cart {
	margin: 24px 0;
}
.keysion-single-product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-right: 12px;
}
.keysion-single-product .quantity input {
	width: 60px;
	height: 48px;
	text-align: center;
	border: none;
	background: white;
	font-size: 16px;
	font-weight: 600;
	outline: none;
}
.keysion-single-product .quantity button {
	width: 40px;
	height: 48px;
	background: var(--bg-secondary);
	color: var(--text-primary);
	font-size: 18px;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}
.keysion-single-product .quantity button:hover {
	background: #E2E8F0;
}

/* 加入购物车按钮：大号 100% 宽，背景 #2563EB */
.keysion-single-product .single_add_to_cart_button {
	background: #2563EB;
	color: white;
	padding: 14px 32px;
	border-radius: var(--radius-lg);
	font-size: 15px;
	font-weight: 600;
	box-shadow: var(--shadow-md);
	transition: all 0.2s;
	border: none;
	cursor: pointer;
	width: 100%;
}
.keysion-single-product .single_add_to_cart_button:hover {
	background: var(--primary-hover);
	transform: translateY(-1px);
}

/* 商品 meta */
.keysion-single-product .product_meta {
	border-top: 1px solid var(--border);
	padding-top: 16px;
	margin-top: 24px;
	font-size: 13px;
	color: var(--text-secondary);
}
.keysion-single-product .product_meta span {
	display: block;
	margin-bottom: 8px;
}
.keysion-single-product .product_meta a {
	color: var(--primary);
	text-decoration: none;
}
.keysion-single-product .product_meta a:hover {
	text-decoration: underline;
}

/* 评分 */
.keysion-single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--text-secondary);
}
.keysion-single-product .woocommerce-product-rating .star-rating {
	color: var(--accent);
}
.keysion-single-product .woocommerce-product-rating a {
	color: var(--text-secondary);
	text-decoration: none;
}
.keysion-single-product .woocommerce-product-rating a:hover {
	color: var(--primary);
}

/* ============================================================
 * WooCommerce 默认 Tabs 样式覆盖：底部下划线激活态
 * ============================================================ */
.keysion-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 32px;
	border-bottom: 2px solid var(--border);
	margin: 0 0 32px;
	padding: 0;
}
.keysion-single-product .woocommerce-tabs ul.tabs li {
	list-style: none;
	padding: 12px 0;
	margin: 0;
	position: relative;
}
.keysion-single-product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--primary);
	margin-bottom: -2px;
}
.keysion-single-product .woocommerce-tabs ul.tabs li a {
	color: var(--text-secondary);
	font-weight: 500;
	text-decoration: none;
	padding: 12px 0;
}
.keysion-single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--primary);
}
.keysion-single-product .woocommerce-tabs .panel {
	padding: 8px 0 24px;
	color: var(--text-primary);
	line-height: 1.7;
}

/* ============================================================
 * 评价：评分概览 + 5 星分布条 + 评价列表
 * ============================================================ */
.keysion-single-product .woocommerce-Reviews-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 16px;
}
.keysion-single-product .commentlist {
	list-style: none;
	padding: 0;
	margin: 0;
}
.keysion-single-product .commentlist .comment {
	border-bottom: 1px solid var(--border);
	padding: 16px 0;
}
.keysion-single-product .commentlist .comment .comment-text {
	margin-left: 0;
}
.keysion-single-product .commentlist .comment .meta {
	color: var(--text-secondary);
	font-size: 13px;
	margin-bottom: 6px;
}
.keysion-single-product .commentlist .comment .description {
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-primary);
}

/* 评分概览与 5 星分布条 */
.keysion-single-product .woocommerce-review-summary {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding: 20px;
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
}
.keysion-single-product .reviews-score {
	text-align: center;
}
.keysion-single-product .reviews-score .score {
	font-size: 36px;
	font-weight: 700;
	color: var(--accent);
}
.keysion-single-product .reviews-score .count {
	font-size: 13px;
	color: var(--text-secondary);
}
.keysion-single-product .reviews-bars {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.keysion-single-product .review-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--text-secondary);
}
.keysion-single-product .review-bar span {
	width: 36px;
}
.keysion-single-product .review-bar .bar {
	flex: 1;
	height: 8px;
	background: #E2E8F0;
	border-radius: var(--radius-full);
	overflow: hidden;
}
.keysion-single-product .review-bar .bar-fill {
	height: 100%;
	background: var(--accent);
	border-radius: var(--radius-full);
}

/* ============================================================
 * 相关产品
 * ============================================================ */
.keysion-single-product .related-products h2 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 24px;
}
.keysion-single-product .related-products .products-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
 * 消息提示
 * ============================================================ */
.keysion-woo-archive .woocommerce-message,
.keysion-single-product .woocommerce-message,
.keysion-woo-archive .woocommerce-info,
.keysion-single-product .woocommerce-info,
.keysion-woo-archive .woocommerce-error,
.keysion-single-product .woocommerce-error {
	padding: 12px 16px;
	border-radius: var(--radius-lg);
	margin-bottom: 16px;
	font-size: 14px;
	list-style: none;
}
.keysion-woo-archive .woocommerce-message,
.keysion-single-product .woocommerce-message {
	background: #DCFCE7;
	color: #166534;
}
.keysion-woo-archive .woocommerce-info,
.keysion-single-product .woocommerce-info {
	background: #DBEAFE;
	color: #1E40AF;
}
.keysion-woo-archive .woocommerce-error,
.keysion-single-product .woocommerce-error {
	background: #FEE2E2;
	color: #991B1B;
}

/* ============================================================
 * 商品图集（gallery）
 * ============================================================ */
.keysion-single-product .woocommerce-product-gallery {
	position: relative;
	border-radius: var(--radius-2xl);
	overflow: hidden;
}
.keysion-single-product .woocommerce-product-gallery__image img {
	border-radius: var(--radius-xl);
	background: var(--bg-secondary);
}
.keysion-single-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	list-style: none;
	padding: 0;
}
.keysion-single-product .flex-control-thumbs li {
	width: 88px;
	height: 88px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	background: white;
	opacity: 0.7;
	transition: all 0.2s;
}
.keysion-single-product .flex-control-thumbs li:hover,
.keysion-single-product .flex-control-thumbs li.flex-active {
	border-color: var(--primary);
	opacity: 1;
}
.keysion-single-product .flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
 * 响应式（1024 / 768 / 480 断点）
 * ============================================================ */
@media (max-width: 1024px) {
	.keysion-single-product .product-detail-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.keysion-single-product .related-products .products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.keysion-single-product .product-detail-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.keysion-single-product .related-products .products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.keysion-single-product .woocommerce-tabs ul.tabs {
		gap: 20px;
	}
	.keysion-single-product .single_add_to_cart_button {
		width: 100%;
	}
}
@media (max-width: 480px) {
	.keysion-single-product .related-products .products-grid {
		grid-template-columns: 1fr;
	}
	.keysion-single-product .product-title {
		font-size: 24px;
	}
	.keysion-single-product .price .amount {
		font-size: 26px;
	}
}

/* ============================================================
 * T3.7 修复：结算页支付方式选中态 + 总计价格样式
 * 解决 W2（支付方式选中态缺背景边框）+ W3（总计价格样式缺失）
 * ============================================================ */

/* 支付方式选中态：背景 #EFF6FF + 边框 #2563EB */
.woocommerce-checkout ul.payment_methods li:has(input:checked) {
	background: #EFF6FF;
	border-color: #2563EB;
}

/* 兼容不支持 :has() 的浏览器，用 JS 切换 class（此处仅作为 fallback 提示） */
.woocommerce-checkout ul.payment_methods li.checked {
	background: #EFF6FF;
	border-color: #2563EB;
}

/* 总计价格：#2563EB 20px 字重 700 */
.woocommerce-checkout .order-total .amount {
	color: #2563EB;
	font-size: 20px;
	font-weight: 700;
}

/* ============================================================
 * T3.8 修复：缺货变体置灰 + 库存提示样式
 * 解决 I3（缺货变体置灰未实现）+ I4（库存提示样式缺失）
 * ============================================================ */

/* 缺货变体置灰 */
.keysion-single-product .variations .out-of-stock option,
.keysion-single-product .variations option[disabled] {
	color: #94A3B8;
	background-color: #F1F5F9;
}

/* 库存提示基础样式 */
.keysion-single-product .stock {
	font-size: 14px;
	margin-top: 8px;
	padding: 6px 12px;
	border-radius: 6px;
	display: inline-block;
	font-weight: 500;
}

.keysion-single-product .stock.in-stock {
	color: var(--success);
	background-color: #D1FAE5;
}

.keysion-single-product .stock.out-of-stock {
	color: var(--error);
	background-color: #FEE2E2;
}

.keysion-single-product .stock.available-on-backorder {
	color: var(--accent);
	background-color: #FEF3C7;
}

/* ============================================================
 * T6.4 订单详情物流展示
 * 美术基准：自绘卡片 + 时间线，配色与主题一致（#F9FAFB / #2563EB / #10B981 / #F59E0B）
 * ============================================================ */

.keysion-order-shipping {
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 20px;
	margin: 20px 0;
}

.keysion-order-shipping.pending {
	background: #FFFBEB;
	border-color: #FDE68A;
}

.keysion-order-shipping .shipping-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #1F2937;
	margin: 0 0 16px 0;
}

.keysion-order-shipping .shipping-title svg {
	color: var(--primary, #2563EB);
}

.keysion-order-shipping.pending .shipping-title svg {
	color: #F59E0B;
}

.keysion-order-shipping .shipping-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.keysion-order-shipping .shipping-info-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.keysion-order-shipping .info-label {
	font-size: 12px;
	color: #6B7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.keysion-order-shipping .info-value {
	font-size: 14px;
	color: #111827;
	font-weight: 500;
}

.keysion-order-shipping .tracking-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--primary, #2563EB);
	color: white;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.2s;
}

.keysion-order-shipping .tracking-button:hover {
	background: var(--primary-hover, #1D4ED8);
}

.keysion-order-shipping .shipping-timeline {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #E5E7EB;
}

.keysion-order-shipping .timeline-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
	position: relative;
}

.keysion-order-shipping .timeline-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 24px;
	bottom: -8px;
	width: 2px;
	background: #E5E7EB;
}

.keysion-order-shipping .timeline-item.completed .timeline-dot {
	background: #10B981;
	border-color: #10B981;
}

.keysion-order-shipping .timeline-item.pending .timeline-dot {
	background: white;
	border: 2px solid #D1D5DB;
}

.keysion-order-shipping .timeline-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid;
	flex-shrink: 0;
	margin-top: 4px;
}

.keysion-order-shipping .timeline-title {
	font-size: 14px;
	font-weight: 500;
	color: #1F2937;
	margin: 0;
}

.keysion-order-shipping .timeline-time {
	font-size: 12px;
	color: #6B7280;
	margin: 2px 0 0 0;
}

.keysion-order-shipping .shipping-pending {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #92400E;
	font-size: 14px;
	margin: 0;
}

@media (max-width: 768px) {
	.keysion-order-shipping .shipping-info-grid {
		grid-template-columns: 1fr;
	}
}

/* ============= 退款申请（T6.5） ============= */
.keysion-refund-section {
	margin: 20px 0;
	padding: 16px;
	background: #FEF2F2;
	border: 1px solid #FECACA;
	border-radius: 12px;
}

.keysion-refund-section .refund-request-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #DC2626;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.2s;
}

.keysion-refund-section .refund-request-btn:hover {
	background: #B91C1C;
}

.keysion-refund-section .refund-pending {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #92400E;
	font-size: 14px;
	margin: 0;
}

.keysion-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 42, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.keysion-modal .modal-content {
	background: white;
	border-radius: 12px;
	padding: 24px;
	max-width: 480px;
	width: 90%;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.keysion-modal h3 {
	margin: 0 0 12px 0;
	font-size: 18px;
	color: #1F2937;
}

.keysion-modal .modal-description {
	color: #6B7280;
	margin: 0 0 16px 0;
	font-size: 14px;
}

.keysion-modal textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	font-size: 14px;
	resize: vertical;
	margin-bottom: 16px;
	box-sizing: border-box;
}

.keysion-modal .modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.keysion-modal .cancel-btn {
	background: #F3F4F6;
	color: #374151;
	border: none;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
}

.keysion-modal .submit-btn {
	background: #DC2626;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
}

.keysion-modal .submit-btn:disabled {
	background: #9CA3AF;
	cursor: not-allowed;
}

/* ============================================================
 * T16.13 / T16.14 修复：表单错误样式 + 按钮 spinner
 * 解决 DevTools 验收 FAIL-3（错误提示样式）+ FAIL-4（按钮 spinner）
 * ============================================================ */

/* 表单错误提示文本 */
.form-error {
	color: var(--error, #EF4444);
	font-size: 13px;
	margin-top: 4px;
	animation: keysion-shake 0.3s ease;
}

/* 输入框错误态：红色边框 + 浅红背景 */
input.input-text.form-error,
input[type="email"].form-error,
input[type="password"].form-error,
input[type="text"].form-error {
	border-color: var(--error, #EF4444) !important;
	background-color: #FEF2F2;
}

@keyframes keysion-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* WooCommerce 内置错误样式覆盖（登录失败 / 校验失败时显示） */
.woocommerce-error,
.woocommerce-Message.woocommerce-error {
	background: #FEF2F2;
	color: var(--error, #EF4444);
	border-left: 4px solid var(--error, #EF4444);
	padding: 12px 16px;
	border-radius: var(--radius-md, 8px);
	margin-bottom: 16px;
	list-style: none;
}

/* 按钮 spinner：提交时显示加载动画 */
.btn-spinner {
	display: none;
	margin-left: 8px;
	vertical-align: middle;
}

.btn.is-loading .btn-text {
	opacity: 0.7;
}

.btn.is-loading .btn-spinner {
	display: inline-block;
}

.btn.is-loading {
	cursor: not-allowed;
	opacity: 0.85;
}

.animate-spin {
	animation: keysion-spin 0.8s linear infinite;
}

@keyframes keysion-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}