/**
 * 会员登记表 · 前台样式
 *
 * 全部作用域在 .zrbj-hy / .zrbj-hy-wrap 里，不碰主题任何选择器。
 * 字号跟着站内正文走（表单里 14px，比正文 15px 略小一点，一行能多放几个字），
 * 主色沿用报名表那支绿 #65c4a0，两个功能的观感是一致的。
 *
/*
 * 一个必须记住的坑：主题的 .entry-content ul li 挂着一个小方块背景图，
 * 所以这张表从头到尾没有一个 ul / li，列表类的结构都用 div 拼。
 *
 * 另一个更要命的坑（1.1.1）：ziranbiji 主题里有一条
 *     #content, #head, .site-info, .searchm, .header { letter-spacing: -.8em; }
 * 这本来是「去掉 inline-block 之间空白」的老办法，代价是 #content 里的
 * 所有文字继承到 -0.8em 的字距 —— 12px 的字每两个字之间要左移 9.6px，
 * 汉字会一个压一个，整张表看起来像"字体叠在一起"。
 * 主题自己每加一个块就要跟着补一次 letter-spacing: 0（.mc-lookup 那几个块
 * 就是这么处理的），我们这边也得补，而且**必须写在 .zrbj-hy 自己身上**：
 * #content 那条是 ID 选择器，光靠选择器权重压不过它，只能靠"继承让位于直接声明"。
 */

.zrbj-hy-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 20px 56px;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
}

.zrbj-hy {
	font-size: 14px;
	line-height: 1.75;
	color: #333;
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-text-size-adjust: 100%;
}

.zrbj-hy *,
.zrbj-hy *::before,
.zrbj-hy *::after {
	box-sizing: border-box;
}

/* 主题里的 section / div 有时会被强制 display:block，把 [hidden] 顶掉 */
.zrbj-hy [hidden] {
	display: none !important;
}

/* ---------- 页头 ---------- */

.zrbj-hy .hy-head {
	margin: 0 0 24px;
}

.zrbj-hy .hy-head h2 {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.4;
	font-weight: 500;
	color: #222;
	letter-spacing: 0.5px;
}

.zrbj-hy .hy-intro {
	margin: 0 0 12px;
	color: #555;
}

.zrbj-hy .hy-lead {
	margin: 0 0 8px;
	color: #555;
	font-size: 14px;
}

.zrbj-hy .hy-lead-sub {
	color: #777;
	font-size: 13px;
}

.zrbj-hy .hy-lead a {
	color: #3f9c7c;
	text-decoration: none;
	border-bottom: 1px solid rgba(101, 196, 160, 0.45);
}

.zrbj-hy .hy-lead a:hover {
	color: #2f7f63;
	border-bottom-color: #2f7f63;
}

/* ---------- 分块 ---------- */

.zrbj-hy .hy-block {
	margin: 0 0 26px;
}

.zrbj-hy .hy-block-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0 0 8px;
	border-bottom: 1px solid #e6e6e6;
	font-size: 15px;
	font-weight: 500;
	color: #222;
}

.zrbj-hy .hy-block-title span {
	font-size: 12px;
	font-weight: 400;
	color: #999;
	white-space: nowrap;
}

.zrbj-hy .hy-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
}

.zrbj-hy .hy-field.is-wide {
	grid-column: 1 / -1;
}

/* ---------- 单个字段 ---------- */

.zrbj-hy .hy-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: #444;
	line-height: 1.5;
}

.zrbj-hy .hy-req {
	margin-left: 3px;
	color: #d9534f;
	font-style: normal;
	font-weight: 400;
}

.zrbj-hy .hy-field input,
.zrbj-hy .hy-field textarea,
.zrbj-hy .hy-field select {
	display: block;
	width: 100%;
	margin: 0;
	padding: 9px 11px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.zrbj-hy .hy-field textarea {
	resize: vertical;
	min-height: 62px;
}

/* 下拉框：去掉系统外观后得自己画个三角，否则右边空着一条，
   老人会看不出这是可以点的 */
.zrbj-hy .hy-field select {
	padding-right: 32px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}

.zrbj-hy .hy-field select:disabled {
	color: #b0b0b0;
	background-color: #fafafa;
	cursor: default;
}

.zrbj-hy .hy-field select option {
	color: #333;
}

.zrbj-hy .hy-field input::placeholder,
.zrbj-hy .hy-field textarea::placeholder {
	color: #bbb;
}

.zrbj-hy .hy-field input:focus,
.zrbj-hy .hy-field textarea:focus,
.zrbj-hy .hy-field select:focus {
	border-color: #65c4a0;
	box-shadow: 0 0 0 3px rgba(101, 196, 160, 0.16);
}

.zrbj-hy .hy-field.has-err input,
.zrbj-hy .hy-field.has-err textarea,
.zrbj-hy .hy-field.has-err select {
	border-color: #d9534f;
	box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.12);
}

/* ---------- 省 / 市 / 区县 ---------- */

/* 用 flex 不用 grid：有时候第三级（区县）没有数据，那个控件会整个藏掉，
   flex 会让剩下两个自动平分宽度；grid 会留一个空格在那儿，很难看。
   省名最长是「新疆维吾尔自治区」7 个字，给它多一点。 */
.zrbj-hy .hy-region {
	display: flex;
	gap: 10px;
}

.zrbj-hy .hy-region select {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.zrbj-hy .hy-region .hy-prov {
	flex-grow: 1.4;
}

.zrbj-hy .hy-hint {
	margin: 5px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: #999;
}

/* ---------- 「这个号已经在名录里了」提醒 ---------- */

/* 放在字段正下方、正常文档流里，不用浮层。
   浮层在小屏上会盖住下一个输入框，而且滚一下就不见了。 */
.zrbj-hy .hy-hit {
	margin: 7px 0 0;
	padding: 8px 12px;
	font-size: 12.5px;
	line-height: 1.7;
	color: #7a5b13;
	background: #fdf6e3;
	border-left: 3px solid #e0b552;
	border-radius: 0 3px 3px 0;
}

.zrbj-hy .hy-hit b {
	font-weight: 500;
	color: #8a5a00;
	font-variant-numeric: tabular-nums;
}

.zrbj-hy .hy-hit a {
	color: #3f9c7c;
	text-decoration: none;
	border-bottom: 1px solid rgba(101, 196, 160, 0.45);
}

/* ---------- 蜜罐 ---------- */

.zrbj-hy .hy-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- 提交区 ---------- */

.zrbj-hy .hy-actions {
	margin: 4px 0 0;
	padding-top: 20px;
	border-top: 1px solid #e6e6e6;
}

.zrbj-hy .hy-submit {
	display: inline-block;
	margin: 0 0 14px;
	padding: 11px 34px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	background: #65c4a0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s;
}

.zrbj-hy .hy-submit:hover {
	background: #55b892;
}

.zrbj-hy .hy-submit:disabled {
	background: #a8d8c6;
	cursor: default;
}

.zrbj-hy .hy-submit-link {
	text-decoration: none;
}

.zrbj-hy .hy-privacy {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: #999;
}

/* ---------- 提示消息 ---------- */

.zrbj-hy .hy-msg {
	display: none;
	margin: 14px 0 0;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.7;
	border-radius: 4px;
}

.zrbj-hy .hy-msg.is-err {
	display: block;
	color: #8a2b28;
	background: #fbeeed;
	border-left: 3px solid #d9534f;
}

.zrbj-hy .hy-msg.is-warn {
	display: block;
	color: #7a5b13;
	background: #fdf6e3;
	border-left: 3px solid #e0b552;
}

.zrbj-hy .hy-msg b {
	font-weight: 500;
}

.zrbj-hy .hy-msg .hy-msg-hint {
	display: block;
	margin: 6px 0 0;
	color: inherit;
	opacity: 0.86;
}

/* ---------- 提交成功后的回执 ---------- */

.zrbj-hy .hy-done {
	margin: 8px 0 0;
	padding: 30px 26px 26px;
	text-align: center;
	background: #f6fbf9;
	border: 1px solid #d8eee5;
	border-radius: 8px;
}

.zrbj-hy .hy-done-icon {
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #65c4a0;
	position: relative;
}

/* 对勾用两条边框拼，不用图片、不用字体图标 */
.zrbj-hy .hy-done-icon::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 12px;
	width: 16px;
	height: 9px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.zrbj-hy .hy-done h3 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 500;
	color: #222;
}

.zrbj-hy .hy-done-lead {
	margin: 0 auto 18px;
	max-width: 460px;
	font-size: 14px;
	color: #555;
}

.zrbj-hy .hy-token-box {
	margin: 18px auto;
	padding: 16px 18px;
	max-width: 320px;
	background: #fff;
	border: 1px dashed #b9dfd0;
	border-radius: 6px;
}

.zrbj-hy .hy-token-label {
	font-size: 12px;
	color: #8aa79c;
	letter-spacing: 1px;
}

.zrbj-hy .hy-token {
	margin: 6px 0 8px;
	font-family: Menlo, Consolas, monospace;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 4px;
	color: #3f9c7c;
	line-height: 1.3;
	word-break: break-all;
}

.zrbj-hy .hy-token-note {
	margin: 0;
	font-size: 12px;
	color: #999;
}

.zrbj-hy .hy-done-wechat {
	margin: 18px 0 0;
}

.zrbj-hy .hy-wx {
	display: inline-block;
	margin: 0 0 4px;
	padding: 7px 20px;
	font-family: Menlo, Consolas, monospace;
	font-size: 16px;
	letter-spacing: 1px;
	color: #2f7f63;
	background: #fff;
	border: 1px solid #cfe9df;
	border-radius: 4px;
	-webkit-user-select: all;
	user-select: all;
}

.zrbj-hy .hy-done-foot {
	margin: 16px 0 0;
	font-size: 13px;
}

.zrbj-hy .hy-done-link {
	color: #3f9c7c;
	text-decoration: none;
	border-bottom: 1px solid rgba(101, 196, 160, 0.45);
}

.zrbj-hy .hy-done-link:hover {
	color: #2f7f63;
}

/* ---------- 进度页 ---------- */

.zrbj-hy .hy-status {
	margin: 0 0 18px;
	padding: 4px 18px;
	background: #fafafa;
	border: 1px solid #ececec;
	border-radius: 6px;
}

.zrbj-hy .hy-status-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid #f0f0f0;
}

.zrbj-hy .hy-status-row:last-child {
	border-bottom: 0;
}

.zrbj-hy .hy-status-k {
	flex: 0 0 64px;
	font-size: 13px;
	color: #999;
}

.zrbj-hy .hy-status-v {
	font-size: 15px;
	color: #222;
}

.zrbj-hy .hy-status-pending .hy-status-v {
	color: #b8860b;
}

.zrbj-hy .hy-status-approved .hy-status-v,
.zrbj-hy .hy-status-merged .hy-status-v {
	color: #2f7f63;
}

.zrbj-hy .hy-status-rejected .hy-status-v {
	color: #c0392b;
}

.zrbj-hy .hy-mono {
	font-family: Menlo, Consolas, monospace;
	letter-spacing: 1px;
}

.zrbj-hy .hy-no {
	font-size: 20px;
	font-weight: 500;
	color: #2f7f63;
}

.zrbj-hy .hy-note {
	margin: 0 0 14px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.8;
	color: #555;
	background: #fafafa;
	border-left: 3px solid #ddd;
	border-radius: 0 4px 4px 0;
}

.zrbj-hy .hy-note.is-ok {
	color: #2f6b56;
	background: #f3faf7;
	border-left-color: #65c4a0;
}

.zrbj-hy .hy-note.is-warn {
	color: #7a5b13;
	background: #fdf9ee;
	border-left-color: #e0b552;
}

.zrbj-hy .hy-note a {
	color: #3f9c7c;
}

.zrbj-hy .hy-quote {
	margin: 0 0 14px;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.85;
	color: #444;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
}

/* ---------- 关闭状态 ---------- */

.zrbj-hy .hy-closed {
	padding: 26px 24px;
	background: #fbf9f2;
	border: 1px solid #eadfc2;
	border-radius: 6px;
	color: #6b5a2e;
}

.zrbj-hy .hy-closed p {
	margin: 0 0 8px;
}

.zrbj-hy .hy-closed p:last-child {
	margin-bottom: 0;
}

.zrbj-hy .hy-closed a {
	color: #3f9c7c;
}

/* ---------- 窄屏 ---------- */

@media screen and (max-width: 640px) {
	.zrbj-hy-wrap {
		padding: 4px 14px 40px;
	}

	.zrbj-hy .hy-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* 手机上一行三个下拉会挤成三个 90px 的小框，省名都显示不全。
	   竖着排三行，每个都能完整显示。 */
	.zrbj-hy .hy-region {
		flex-direction: column;
		gap: 8px;
	}

	.zrbj-hy .hy-region select {
		flex: 0 0 auto;
		width: 100%;
	}

	.zrbj-hy .hy-head h2 {
		font-size: 20px;
	}

	.zrbj-hy .hy-block-title {
		flex-wrap: wrap;
	}

	.zrbj-hy .hy-submit {
		width: 100%;
		padding: 13px 0;
	}

	.zrbj-hy .hy-done {
		padding: 24px 16px 20px;
	}

	.zrbj-hy .hy-token {
		font-size: 22px;
		letter-spacing: 3px;
	}
}