/*
 * zhiyi-auth 前端样式
 * 2026-07-30 改造：统一登录/注册 3 tab（验证码 / 密码 / 邮箱登录），按 image#2 参考图视觉
 */

/* === 0. 整个账号页面 body 浅灰背景改成白色 === */
/* 注：主题里 body.woocommerce-account 用了 background: #f8f9fa !important，整张页面都是浅灰 */
/* 改 body.woocommerce-account.woocommerce-page，特异性 (0,2,1) 高于主题 (0,1,1)，且都带 !important */
/* 影响范围：所有 WC 账号页（登录/注册、个人资料、订单、地址、订阅等）整体变白 */
body.woocommerce-account.woocommerce-page {
	background: #fff !important;
}

/* === 1. WC 错误提示：小红条卡片 === */
.woocommerce-account .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-form-login .woocommerce-error,
.woocommerce-account .zhiyi-account-form-card .woocommerce-error {
	background: #fff5f5 !important;
	border: 0 !important;
	border-left: 3px solid #e74c3c !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	margin: 0 0 16px !important;
	color: #c0392b !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	list-style: none !important;
}
.woocommerce-account .woocommerce-notices-wrapper ul,
.woocommerce-account .woocommerce-form-login .woocommerce-error ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce-account .woocommerce-error::before {
	display: none !important;
}

/* === 2. 隐藏 page header 与独立注册卡片 === */
body.woocommerce-account .zak-page-header,
body.woocommerce-account .zak-breadcrumbs,
body.woocommerce-account .entry-title {
	display: none !important;
}
.zhiyi-account-form-card .u-column2,
.zhiyi-account-form-card .woocommerce-form-register {
	display: none !important;
}

/* === 3. 隐藏 WC 默认登录字段（保留 form 容器以兼容 skin / nonce） === */
.woocommerce-form-login > p,
.woocommerce-form-login > button[type="submit"] {
	display: none !important;
}

/* === 4. 统一登录/注册 3 tab 容器 === */
.zhiyi-unified-login {
	display: block;
	width: 100%;
	font-family: inherit;
}

/* 3 tab 横排 + 选中态下划线 */
.zhiyi-unified-tabs {
	display: flex;
	gap: 24px;
	margin: 0 0 20px;
	border-bottom: 1px solid #eef0f4;
}
.zhiyi-unified-tab {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	color: #667085 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 8px 0 12px !important;
	margin-bottom: -1px;
	cursor: pointer;
	border-radius: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.zhiyi-unified-tab.is-active {
	color: #1890ff !important;
	border-bottom-color: #1890ff !important;
}
.zhiyi-unified-tab:hover:not(.is-active) {
	color: #14213d !important;
}

/* panel */
.zhiyi-unified-panel { display: none; }
.zhiyi-unified-panel.is-active { display: block; }

/* input 行 */
.zhiyi-unified-row {
	margin: 0 0 12px !important;
	position: relative;
}
.zhiyi-unified-row input {
	width: 100% !important;
	height: 48px !important;
	padding: 0 16px !important;
	border: 1px solid #e0e3eb !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 14px !important;
	color: #14213d !important;
	outline: none;
	transition: border-color 0.2s;
}
.zhiyi-unified-row input:focus {
	border-color: #1890ff !important;
}
.zhiyi-unified-row input::placeholder {
	color: #99a0b0;
}

/* 验证码 tab：手机号行 +86 前缀 */
.zhiyi-unified-phone-row input {
	padding-left: 56px !important;
}
.zhiyi-unified-prefix {
	position: absolute;
	left: 0;
	top: 0;
	height: 48px;
	line-height: 48px;
	padding: 0 14px;
	color: #14213d;
	font-size: 14px;
	font-weight: 600;
	pointer-events: none;
	border-right: 1px solid #eef0f4;
	z-index: 1;
}

/* 验证码行：右侧"获取验证码"按钮 */
.zhiyi-unified-code-row input {
	padding-right: 124px !important;
}
.zhiyi-unified-send-code {
	position: absolute;
	right: 6px;
	top: 6px;
	height: 36px;
	min-width: 110px;
	padding: 0 14px !important;
	border: 0 !important;
	background: transparent !important;
	color: #1890ff !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600;
	cursor: pointer;
}
.zhiyi-unified-send-code:disabled {
	color: #99a0b0 !important;
	cursor: not-allowed;
}

/* 协议提示行 */
.zhiyi-unified-agree {
	margin: 16px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-size: 12px !important;
	line-height: 1.7 !important;
	color: #99a0b0 !important;
	text-align: left !important;
}
.zhiyi-unified-agree a {
	color: #1890ff !important;
	text-decoration: none !important;
}
.zhiyi-unified-agree a:hover {
	text-decoration: underline !important;
}

/* 蓝色大按钮"登录/注册" */
.zhiyi-unified-submit {
	width: 100%;
	height: 48px;
	margin-top: 16px;
	background: linear-gradient(135deg, #1890ff 0%, #4eaaff 100%) !important;
	border: 0 !important;
	border-radius: 24px !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(24,144,255,0.25) !important;
	transition: all 0.2s;
}
.zhiyi-unified-submit:hover:not(:disabled) {
	box-shadow: 0 6px 16px rgba(24,144,255,0.35) !important;
	transform: translateY(-1px);
}
.zhiyi-unified-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* 消息提示 */
.zhiyi-unified-msg {
	min-height: 20px;
	margin-top: 12px !important;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

/* === 4. 卡片内部统一白色背景（兜底：前两遍改 body 没盖到 WooCommerce 主题的子容器） === */
/* 注：主题可能在 .u-column1 / .woocommerce-form-login / .zhiyi-account-form-card 上各挂了浅色面板背景。
       这里用更高特异性的选择器（0,2,1）+ !important 一律拍成白。 */
body.woocommerce-account .zhiyi-account-form-card,
body.woocommerce-account .zhiyi-account-form-card > *,
body.woocommerce-account .zhiyi-account-form-card .u-column1,
body.woocommerce-account .zhiyi-account-form-card .u-column2,
body.woocommerce-account .zhiyi-account-form-card .woocommerce-form-login,
body.woocommerce-account .zhiyi-account-form-card .zhiyi-unified-login,
body.woocommerce-account .zhiyi-account-form-card .zhiyi-unified-tabs,
body.woocommerce-account .zhiyi-account-form-card .zhiyi-unified-panel,
body.woocommerce-account .zhiyi-account-form-card .zhiyi-unified-row {
	background: #fff !important;
	background-image: none !important;
}
/* 黄色提示块保留黄底（位置在卡片内，不能被上面规则覆盖） */
.zhiyi-account-form-card .zhiyi-account-note {
	background-color: #fffbe6 !important;
	background-image: none !important;
}
/* 蓝色登录按钮保留渐变（被上面 background-image:none 干掉了，这里恢复） */
.zhiyi-account-form-card .zhiyi-unified-submit {
	background: linear-gradient(135deg, #1890ff 0%, #4eaaff 100%) !important;
}

/* === 5. 表单卡片四面留空 === */
/* 注：主题原本 padding: 24-30px，用户要"至少 0.5cm"，给 1cm (≈38px) 让效果可见 */
.zhiyi-account-form-card {
	padding: 1cm !important;
	box-sizing: border-box;
}

/* 黄底"如果你已经报名..."提示：左对齐、占满卡片宽度 */
.zhiyi-account-note {
	text-align: left !important;
	line-height: 1.7 !important;
}