@charset "UTF-8";

html {
	font-size: 16px;
}

.login-container {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 768px) {
	.login-container {
		min-height: 100vh;
		display: flex;
		align-items: flex-start;
	}

	.login-container-row {
		padding-top: 68px;
		padding-bottom: 50px;
		min-height: 100vh;
	}

	.login-main {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.login-main-container {
		height: auto !important;
		padding: 20px 15px !important;
	}

	.login-main-form {
		padding: 25px !important;
		width: 100vw !important;
		border-radius: 0 !important;
		max-height: none !important;
	}

	.login-container .login-container-row {
		justify-content: center !important;
	}

	.login-head {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	.login-footer {
		position: fixed !important;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background-color: #fff;
	}
}


.login-container {
	width: 100%;
	background-color: #eff2f7;
	background-image: url("../images/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.login-main-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background-image: url(/themes/clientarea/mdy/static/images/loginLeft.png);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.login-main-bg {
	width: 520px;
	height: 100%;
	max-width: 35%;
    min-width: 30%;
	overflow-y: hidden;
	position: absolute;
	left: 0;
	top: 0;
}

.login-container .login-container-row {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	align-items: stretch;
}

.login-container .max-login {
	height: 100%;
	width: 100%;
	max-width: 1440px;
	padding: 0 42px;
	margin: auto;
}

.login-container .login-head {
	height: 68px;
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 1;
}

.login-container .login-head .login-head-container {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.max-login {
	padding: 0 16px 0 16px;
}

.login-container .login-head .login-logo {
	width: max-content;
	height: 34px;
}

.login-container .login-head .login-logo img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

.login-container .login-head .login-title {
	display: flex;
	align-items: center;
	gap: 20px;
}

.login-container .login-head .login-title a {
	color: #000;
	font-size: 16px;
}

.login-container .login-footer {
	width: 100%;
	height: fit-content;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
}

.login-container .login-footer .footer-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.login-container .login-footer .footer-content .login-footer-item {
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
	padding: 6px 0;
	gap: 10px;
	flex-wrap: wrap;
}

.login-container .login-footer .footer-content .login-footer-item a {
	font-size: 14px;
	color: #999;
	font-weight: 400;
	line-height: 24px;
}

.login-container .login-footer .footer-content .statement {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}

.login-container .login-footer .footer-content .statement a {
	color: var(--primary);;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	transition: all 0.3s ease;
}

.login-container .login-footer .footer-content .statement a:hover {
	color: var(--primary);
}

.login-main {
	height: 100%;
	width: 100%;
	position: relative;
}

.login-main .login-main-container {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	align-items: center;
	height: calc(100vh - 68px - 50px);
	gap: 58px;
	padding-right: calc((100% - 520px - 476px) / 2);
}

.login-main .login-main-container .login-main-form {
	overflow: hidden;
	overflow-y: auto;
	background: #fff;
	padding: 28px 30px 40px 40px;
	pointer-events: all;
	box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 476px;
	border-radius: 15px 0 15px 0;
}

.login-main .login-tab {
	padding-bottom: 10px;
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	position: relative;
	border-bottom: 3px solid #f6f6f6;
}

.login-main .login-tab .login-tab-item {
	position: relative;
	margin-right: 22px;
	font-size: 18px;
	font-weight: 900;
	color: #8d94a1;
	cursor: pointer;
	transition: background 0.3s ease;
	-webkit-font-smoothing: initial;
}

.login-main .login-tab .login-tab-item:last-child {
	margin-right: 0;
}

.login-main .login-tab .login-tab-item.active {
	color: var(--primary);
}

.login-main .login-tab .transitionSwitching {
	position: absolute;
	bottom: -3px;
	height: 3px;
	background-color: var(--primary);
	transition: all 0.3s ease;
}

.login-main .text-register {
	position: absolute;
	right: 0;
	color: #505363;
}

.login-main .text-primary {
	color: var(--primary) !important;
	font-weight: 500;
}

.login-main .login-content {
	padding-right: 10px;
}

.login-main .login-content .tab-pane {
	display: none;
}

.login-main .login-content .tab-pane.active {
	display: block;
	animation: fadeIn 0.5s;
}

.login-main .login-content .form-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.login-main .login-content .form-group label {
	color: #505363;
	font-weight: 300;
	font-size: 14px;
}

.login-main .login-content .form-group .custom-dropdown {
	position: relative;
	width: fit-content;
}

.login-main .login-content .form-group .custom-dropdown-selection {
	position: relative;
	padding: 0 21px 0 11px;
	color: #505363;
	font-weight: normal;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid #d4d9e2;
	border-right: none;
	border-radius: 0;
	transition: all 0.3s;
	line-height: 38px;
	text-align: left;
	width: 108px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.login-main .login-content .form-group .custom-dropdown-selection::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #adb5bd;
}

.login-main .login-content .form-group .custom-dropdown-list {
	display: none;
	position: absolute;
	width: max-content;
	padding: 0;
	list-style: none;
	border: 1px solid #ccc;
	border-top: none;
	max-height: 200px;
	overflow-y: auto;
	background-color: #fff;
	z-index: 1;
}

.login-main .login-content .form-group .custom-dropdown-list li {
	padding: 10px;
	cursor: pointer;
	transition: background-color 0.2s;
	/* 平滑背景颜色过渡 */
}

.login-main .login-content .form-group .custom-dropdown-list li:hover {
	background-color: #f0f0f0;
}

.login-main .login-content .mt-3 .btn-primary {
	height: 48px;
	background-color: var(--primary);
	transition: all 0.3s ease;
	font-weight: 500;
}

.login-main .login-content .mt-3 .btn-primary:hover {
	background: #0f4bcc;
}

/* 「使用其他登录」：标题两侧各一条细线，图标居中排一行 */
.login-main .login-content .Oauth_login {
	position: relative;
	display: block;
	margin-top: 22px;
}

.login-main .login-content .Oauth_login .Oauth_login_txt {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	color: #9aa3b2;
	font-weight: 400;
	font-size: 13px;
	white-space: nowrap;
}

/* 标题左右那两条线 */
.login-main .login-content .Oauth_login .Oauth_login_txt::before,
.login-main .login-content .Oauth_login .Oauth_login_txt::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e9ecf1;
}

.login-main .login-content .Oauth_login .list-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.login-main .login-content .Oauth_login .list-inline .list-inline-item {
	margin: 0;
}

.login-main .login-content .Oauth_login .list-inline .social-list-item {
	display: block;
	height: 34px;
	width: 34px;
	background-image: none;
	border: none;
	border-radius: 50%;
	overflow: hidden;
	transition: all .4s;
}

/* 悬停效果跟 default 主题一致：底色变浅灰 */
.login-main .login-content .Oauth_login .list-inline .social-list-item:hover {
	background-color: #eff2f7;
}

/* 图标可能是 <img>（位图）也可能是内联 <svg>，两种都要撑满圆形 */
.login-main .login-content .Oauth_login .list-inline .social-list-item .icon,
.login-main .login-content .Oauth_login .list-inline .social-list-item img,
.login-main .login-content .Oauth_login .list-inline .social-list-item svg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* mdy GeeTest host layout.
   GeeTest owns every `.geetest_*` descendant and its popup challenge. Do not
   reset those descendants here: doing so changes the stock slider proportions
   and can make the challenge fill the whole page. */
.mdy-captcha-host,
[data-mdy-captcha-container="true"],
[id^="jiyan-"] {
	position: relative;
	display: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: visible;
	font-size: 14px;
	line-height: normal;
}

/* Keep a disabled/unused takeover row from reserving form space. */
.mdy-captcha-hidden-row {
	display: none !important;
	min-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* The security centre wraps the host in a labelled Bootstrap row. Hide that
   complete row until the mdy manager actually activates the host; otherwise
   the label and row margin remain even when MFCW is using its own provider. */
.mdy-security-captcha-row:not([data-mdy-captcha-active="true"]) {
	display: none !important;
	min-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.mdy-security-captcha-row[data-mdy-captcha-active="true"] {
	display: flex !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* GeeTest's challenge is a viewport overlay; it must stay above form buttons. */
.geetest_popup_wrap,
.geetest_popup_box,
.geetest_panel,
.geetest_panel_ghost,
.geetest_fullpage_click {
	z-index: 2147483000 !important;
}
/* 极验验证样式 */

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.form-control {
	padding: 7px 10px;
	line-height: 24px;
	height: fit-content;
	background-color: #fff;
	border: 1px solid #d4d9e2;
	border-radius: 0;
}



.btn {
	padding: 7px 10px;
	line-height: 26px;
	height: fit-content;
	background-color: var(--primary);
	border: none;
	border-radius: 0;
}

.btn-primary.disabled, .btn-primary:disabled {
	background-color: var(--primary);
	cursor: not-allowed;
}

.btn-outline-light {
	padding: 7px 10px;
	line-height: 26px;
	height: fit-content;
	background-color: #fff;
	border: 1px solid #d4d9e2;
	border-radius: 0;
	color: var(--primary);
}

.input-group-append {
	height: 40px;
}

.input-group-append img {
	border: 1px solid #d4d9e2 !important;
	border-left: none;
}

.serviceTerms {
	margin: 14px 0 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
}

.serviceTerms span {
	color: #9ea5b2;
}

.serviceTerms .custom-checkbox {
	width: 16px;
	height: 16px;
	background-color: #fff;
	border: 1.5px solid #9ea5b2;
	cursor: pointer;
	position: relative;
}

.serviceTerms .custom-checkbox:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	opacity: 0;
	transition: all 0.3s;
}

.serviceTerms .custom-checkbox.checked {
	background-color: var(--primary);
	border: 1.5px solid var(--primary);
}

.serviceTerms .custom-checkbox.checked:after {
	opacity: 1;
}

@keyframes antCheckboxEffect {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}

	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

.modal {
	background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
	.login-container {
		background: #fff;
		background-image: url(#) !important;
	}

	.login-container .max-login {
		padding: 0 20px;
	}

	.login-container .login-container-row .login-head {
		height: 68px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.login-container .login-container-row .login-head .login-title a {
		color: rgb(153, 153, 153);
	}

	.login-container .login-container-row .login-logo {
		height: 32px;
	}

	.login-container .login-container-row .login-logo img {
		width: auto;
		height: 32px;
	}

	.login-container .login-main {
		margin: 0 !important;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.login-container .login-main .login-main-container {
		padding: 0;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		height: auto;
	}

	.login-container .login-main .login-main-container .login-main-bg {
		display: none;
	}

	.login-container .login-main .login-main-container .login-main-form {
		min-width: 100%;
		padding: 20px 10px;
		box-shadow: none;
	}

	.login-container .login-main .login-tab {
		width: 100%;
		justify-content: center;
		border-bottom: 1px solid #f6f6f6;
		padding-bottom: 10px;
		margin-bottom: 20px;
		white-space: nowrap;
	}

	.login-container .login-main .login-tab .login-tab-item {
		margin-right: 20px;
		font-size: 18px;
	}

	.login-container .login-main .text-register {
		position: relative;
		width: 100%;
		text-align: right;
		color: #505363;
	}

	.login-container .login-main .login-content {
		width: 100%;
		padding-right: 0;
	}

	.login-container .login-main .login-content .form-group {
		width: 100%;
		margin-bottom: 20px;
	}

	.login-container .login-main .login-content .form-group label {
		font-size: 16px;
	}

	.login-container .login-main .login-content .form-group .custom-dropdown {
		width: 100%;
		margin-bottom: 12px;
	}

	.login-container .login-main .login-content .form-group .custom-dropdown-selection {
		width: 100%;
		border-right: 1px solid rgb(212, 217, 226);
	}

	.login-container .login-main .login-content .form-group .custom-dropdown-list {
		width: 100%;
	}

	.login-container .login-main .login-content .mt-3 .btn-primary {
		width: 100%;
		font-size: 16px;
	}

	.login-container .login-main .login-content .Oauth_login {
		width: 100%;
	}

	.login-container .login-main .login-content .Oauth_login .Oauth_login_txt {
		margin: 0 0 12px;
	}

	.login-container .login-footer {
		position: fixed;
		bottom: 0;
		right: 0;
		height: 42px;
		display: flex;
		background-color: #f0f0f0;
		padding: 10px 0;
	}

	.login-container .login-footer .footer-content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.login-container .login-footer .footer-content .statement a {
		color: #999;
	}
}

/*# sourceMappingURL=login.css.map */

/* 登录/注册类页面：左上角品牌 logo（原来右侧那条「回到首页」已去掉） */
.login-container .login-head {
    padding: 20px 0 0;
}
.login-container .login-head .login-head-container {
    align-items: center;
}
.login-container .login-head .login-logo a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    text-decoration: none;
}
.login-container .login-head .login-logo .login-logo-text {
    font-size: 20px;
    font-weight: 600;
    color: #1f2d3d;
    line-height: 40px;
    white-space: nowrap;
}

/* 登录/注册类页面：左上角浮动 logo（不带白条） */
.login-container { position: relative; }
.mdy-login-brand {
    position: absolute;
    top: 28px;
    left: 40px;
    z-index: 5;
    line-height: 0;
}
.mdy-login-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.mdy-login-brand img {
    height: 40px;
    width: auto;
    display: block;
}
.mdy-login-brand__text {
    font-size: 20px;
    font-weight: 600;
    color: #1f2d3d;
    line-height: 40px;
    white-space: nowrap;
}
/* 顶部原本给白条留的高度去掉，页面内容整体上移 */
.login-container .login-main { padding-top: 0; }
@media (max-width: 768px) {
    /* 内联样式里写的是 left:var(--mdy-brand-left,40px)，这里改变量才能真正生效 */
    .mdy-login-brand { --mdy-brand-left: 16px; }
    .mdy-login-brand img { height: 32px; }
}
/* 登录/注册/找回密码页脚：与会员中心页脚同一套排版 */
.mdy-light-footer{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:10px 20px;background:transparent!important;border:0;box-shadow:none;text-align:center;font-size:11px;line-height:1.7;color:#8a93a3;overflow-wrap:anywhere}
.mdy-light-footer .mdy-footer-line{margin:0}
/* 页脚整行居中（模板里原来带 text-lg-start，大屏会被拉成左对齐） */
.mdy-light-footer,.mdy-light-footer *{text-align:center!important}
/* 内层是 flex + space-between（右侧还有一个空 div），会把文字顶到左边，改成居中 */
.mdy-light-footer .d-lg-flex{display:flex!important;justify-content:center!important;align-items:center!important;gap:0!important}
.mdy-light-footer .d-lg-flex>*{flex:0 1 auto!important}
.mdy-light-footer .row,.mdy-light-footer .container,.mdy-light-footer .py-3{background:transparent!important;padding-top:0!important;padding-bottom:0!important;margin:0!important;max-width:100%!important;width:100%!important}
.mdy-light-footer .mdy-footer-line>*+*:before{content:' | ';white-space:pre;color:#b0b7c2}
.mdy-light-footer a{color:#939dac;text-decoration:none}
.mdy-light-footer a:hover{color:#606266}

/* 登录框整体居中：左侧装饰图是绝对定位、不占位，
   原来用 padding-right 把「图+框」当一组居中，导致框偏右 */
.login-main .login-main-container {
    justify-content: center !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* ===== 登录/注册页：居中白卡片（仿经典登录框布局） ===== */
/* 背景保持原样（背景图 + 地球装饰图都不动），这里只管卡片本身 */
/* 左上角 logo 保持不动 */

/* 卡片本体 */
.login-container .login-main .login-main-container {
    justify-content: center !important;
    align-items: center !important;
    padding: 0 16px !important;
    height: calc(100vh - 46px) !important;
    gap: 0 !important;
}
/* 原样式带 min-width:476px，这里一并压掉 */
.login-container .login-main .login-main-container .login-main-form {
    width: 476px !important;
    min-width: 0 !important;
    /* 上限交给父容器（父容器已有左右内边距），这样窄屏也不会溢出、能居中 */
    max-width: 100% !important;
    margin: 0 auto;
    border-radius: 4px !important;
    padding: 24px 24px 20px !important;
    box-shadow: 0 12px 36px rgba(31, 64, 120, .10) !important;
    background: #fff !important;
}
/* 卡片顶部不再放 logo（logo 继续在左上角） */
/* tab 保持模板原本的排布（右侧「已有账户」是绝对定位，别去动它的间距） */
.login-container .login-tab { border-bottom: 1px solid #eef0f4; }
/* 表单控件：平常灰底，hover 变深一档，聚焦再深一点（不要描边） */
.login-container .login-main-form .form-control,
.login-container .login-main-form .input-group-text,
.login-container .login-main-form .custom-select {
    background-color: #f5f6f8 !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    height: 40px;
    color: #1f2b3d !important;
    font-size: 14px;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* hover：灰底加深一档 */
.login-container .login-main-form .form-control:hover,
.login-container .login-main-form .input-group-text:hover,
.login-container .login-main-form .custom-select:hover {
    background-color: #eceef2 !important;
    border-color: transparent !important;
}
/* 选中/聚焦：灰底变白底，边框变蓝 */
.login-container .login-main-form .form-control:focus,
.login-container .login-main-form .input-group-text:focus,
.login-container .login-main-form .custom-select:focus {
    outline: none !important;
    background-color: #fff !important;
    border-color: #0052d9 !important;
    /* 轻微发光：2px 淡蓝光晕 */
    box-shadow: 0 0 0 2px rgba(0, 82, 217, .10) !important;
}
.login-container .login-main-form label { font-size: 14px; color: #1f2d3d; margin-bottom: 8px; }
/* 主按钮 */
.login-container .login-main-form .btn-primary {
    width: 100%;
    height: 44px;
    border-radius: 4px !important;
    background: #2563eb !important;
    border: 0 !important;
    font-size: 15px;
}
@media (max-width: 768px) {
    .login-container .login-main .login-main-container { height: auto !important; padding: 20px 14px 60px !important; }
    .login-container .login-main-form { width: 100%; }
}

/* 「还没有账户？现在注册」：脚本会把它挪到登录表单下面、第三方登录上面 */
.login-container .login-main-form { position: relative; padding-bottom: 54px !important; }
.login-container .login-main-form .text-register {
    position: static !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    text-align: center !important;
    color: #6b7280;
    font-size: 13px;
}
.login-container .login-main-form .text-register p { margin: 0; }

/* tab 与「我已阅读并同意」这一行都居中 */
.login-container .login-tab { justify-content: center !important; }
.login-container .serviceTerms { justify-content: center !important; text-align: center; }

/* tab 拉宽：两个等分卡片宽度，下划线跟着占满 */
.login-container .login-tab { gap: 0 !important; }
.login-container .login-tab .login-tab-item {
    flex: 1 1 0 !important;
    margin-right: 0 !important;
    text-align: center;
}

/* 选中蓝线：78% 宽、2px 粗（比灰线略粗但不夸张） */
.login-container .login-tab .transitionSwitching {
    transform: scaleX(.78);
    transform-origin: center center;
    height: 2px !important;
    bottom: -1px !important;
    border-radius: 1px;
}

/* 输入框 + 按钮拼接：只外侧画圆角，接缝处直角 */
.login-container .login-main-form .input-group { border-radius: 4px; }
/* 左端 */
.login-container .login-main-form .input-group > *:first-child,
.login-container .login-main-form .input-group > *:first-child > .form-control,
.login-container .login-main-form .input-group > *:first-child > .input-group-text,
.login-container .login-main-form .input-group > *:first-child > .custom-select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
/* 右端 */
.login-container .login-main-form .input-group > *:last-child,
.login-container .login-main-form .input-group > *:last-child > .form-control,
.login-container .login-main-form .input-group > *:last-child > .btn,
.login-container .login-main-form .input-group > *:last-child > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
/* 区号下拉（.custom-dropdown 包裹的 div）也走同一套三态 */
.login-container .login-main-form .input-group > .custom-dropdown,
.login-container .login-main-form .input-group .custom-dropdown .dropdown-toggle {
    background-color: #f5f6f8 !important;
    border: 1px solid transparent !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.login-container .login-main-form .input-group > .custom-dropdown:hover,
.login-container .login-main-form .input-group .custom-dropdown:hover .dropdown-toggle {
    background-color: #eceef2 !important;
}
.login-container .login-main-form .input-group > .custom-dropdown:focus-within,
.login-container .login-main-form .input-group .custom-dropdown:focus-within .dropdown-toggle {
    background-color: #fff !important;
    border-color: #0052d9 !important;
    box-shadow: 0 0 0 2px rgba(0, 82, 217, .10) !important;
}
/* 中间那种（三段式）中间段保持直角 */
.login-container .login-main-form .input-group > *:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* ===== 区号下拉：照购物车 .mdcfg-dd 那套（选择器含 .form-group，压过原样式） ===== */
.login-container .login-main .login-content .form-group .custom-dropdown {
    position: relative;
    width: fit-content;
}
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-selection {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px !important;
    min-width: 118px;
    padding: 0 12px !important;
    background: #fff !important;
    border: 1px solid #e8ecf4 !important;
    border-radius: 4px 0 0 4px !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #1f2b3d !important;
    line-height: 1 !important;
    text-align: left !important;
    cursor: pointer;
    overflow: visible;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-selection:hover {
    border-color: #c9d3e3 !important;
}
/* 箭头：纯 CSS 画 chevron（不内联 svg） */
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-selection::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 auto;
    width: 6px !important;
    height: 6px !important;
    margin: -4px 2px 0 0 !important;
    border: 0 !important;
    border-right: 1.5px solid #8792a8 !important;
    border-bottom: 1.5px solid #8792a8 !important;
    transform: rotate(45deg) !important;
    transition: transform .2s ease, border-color .2s ease;
}
/* 文字包一层 span，过长省略（和购物车 .mdcfg-dd__text 一样），免得把箭头挤出可视区 */
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login-container .login-main .login-content .form-group .custom-dropdown.is-open .custom-dropdown-selection,
.login-container .login-main .login-content .form-group .custom-dropdown:has(.custom-dropdown-list[style*="block"]) .custom-dropdown-selection {
    border-color: #0052d9 !important;
    box-shadow: 0 0 0 2px rgba(0, 82, 217, .10) !important;   /* 与输入框聚焦光晕一致 */
}
.login-container .login-main .login-content .form-group .custom-dropdown.is-open .custom-dropdown-selection::after,
.login-container .login-main .login-content .form-group .custom-dropdown:has(.custom-dropdown-list[style*="block"]) .custom-dropdown-selection::after {
    transform: rotate(-135deg);
    border-color: #0052d9 !important;
}
/* 面板：默认收起（透明 + 上移 4px + 不可点），加 .is-open 才展开 —— 这样弹出/收起都有过渡 */
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-list {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 4px) !important;
    z-index: 80 !important;
    min-width: 100% !important;
    max-width: 320px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: max-content !important;
    padding: 4px !important;
    margin: 0 !important;
    list-style: none !important;
    background: #fff !important;
    border: 1px solid #e8ecf4 !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 20px rgba(20, 30, 55, .1) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.login-container .login-main .login-content .form-group .custom-dropdown.is-open .custom-dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
/* 选项 */
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-list li {
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    color: #1f2b3d !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-list li:hover {
    background: #f2f6ff !important;
    color: #0052d9 !important;
}
/* 当前选中的那一项（和购物车里 is-on 一样：浅蓝底 + 蓝字 + 稍重） */
.login-container .login-main .login-content .form-group .custom-dropdown .custom-dropdown-list li.is-on {
    background: #eef4ff !important;
    color: #0052d9 !important;
    font-weight: 500 !important;
}

/* ===== 同意条款勾选框：照购物车结算页 .vc-terms__checkbox ===== */
.serviceTerms .custom-checkbox {
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 1px solid #d4dae6;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}
.serviceTerms .custom-checkbox:hover { border-color: var(--primary); }
/* 选中：蓝底 + 白色 SVG 勾（与购物车同一个勾形），不再用原来的 CSS 三角勾 */
.serviceTerms .custom-checkbox.checked {
    background-color: #165dff !important;
    border-color: #165dff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 11px 11px;
}
.serviceTerms .custom-checkbox.checked:after { content: none; opacity: 0; border: 0; }

/* 「验证码登录 / 忘记密码」这类辅助行：只把文字挪到原有空隙中间（上 8 下 8，总高不变）。
   选择器用通用 .d-flex（手机登录那行带 align-items-center，邮箱登录那行不带） */
.login-container .login-main-form .d-flex:has(+ .mt-3) {
    margin: 8px 0 !important;
}
.login-container .login-main-form .d-flex:has(+ .mt-3) + .mt-3 {
    margin-top: 0 !important;
}

/* ===== 输入框左侧图标：包裹层 + 内联 SVG（浏览器自动填充也不会掉） ===== */
.login-container .login-main-form .mdy-ic-wrap {
    position: relative;
    /* 用 flex 而不是 block：避免包裹层里出现行盒把高度撑高 2px，导致和区号框错位 */
    display: flex;
    align-items: center;
    line-height: 0;
    font-size: 0;
    flex: 1 1 auto;
    min-width: 0;
}
/* 直接挂在 form-group 下的（密码/邮箱）：撑满一行 */
.login-container .login-main-form .form-group > .mdy-ic-wrap {
    width: 100%;
}
/* 在 input-group 里的（手机号）：只占剩余空间，不能 100%，否则会被挤到下一行。
   同时补上底色、吃掉 1px 缝，让「区号 + 输入框」看起来是一个整体 */
.login-container .login-main-form .input-group > .mdy-ic-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: -1px;
    background-color: #f5f6f8;
    border-radius: 0 4px 4px 0;
    transition: background-color .2s ease;
}
.login-container .login-main-form .input-group > .mdy-ic-wrap:hover {
    background-color: #eceef2;
}
.login-container .login-main-form .input-group > .mdy-ic-wrap:focus-within {
    background-color: #fff;
}
.login-container .login-main-form .mdy-ic-wrap > input {
    width: 100% !important;
    display: block;
}
/* 验证码那组：按钮与输入框等高 */
.login-container .login-main-form .input-group .input-group-append .btn {
    height: 40px !important;
    padding: 0 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 0 !important;
}
.login-container .login-main-form .mdy-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    line-height: 0;
    color: #74788d;            /* 与占位符文字同色 */
    pointer-events: none;
    transition: color .2s ease;
}
/* 图标用外部 svg + mask，颜色跟随 currentColor（不再内联 svg） */
.login-container .login-main-form .mdy-ic {
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}
.login-container .login-main-form .mdy-ic--phone{-webkit-mask-image:url("/themes/clientarea/mdy/assets/images/icons/phone.svg");mask-image:url("/themes/clientarea/mdy/assets/images/icons/phone.svg")}
.login-container .login-main-form .mdy-ic--lock{-webkit-mask-image:url("/themes/clientarea/mdy/assets/images/icons/lock.svg");mask-image:url("/themes/clientarea/mdy/assets/images/icons/lock.svg")}
.login-container .login-main-form .mdy-ic--mail{-webkit-mask-image:url("/themes/clientarea/mdy/assets/images/icons/mail.svg");mask-image:url("/themes/clientarea/mdy/assets/images/icons/mail.svg")}
/* 聚焦时图标变主题蓝 */
.login-container .login-main-form .mdy-ic-wrap:focus-within .mdy-ic {
    color: #165dff;
}
/* 有图标的输入框留出左侧空间 */
.login-container .login-main-form input[name="phone"],
.login-container .login-main-form input[name="password"],
.login-container .login-main-form input[name="checkPassword"],
.login-container .login-main-form input[name="email"] {
    padding-left: 38px !important;
    background-image: none !important;
}

/* 兜底：包裹层里的输入框聚焦态（权重最高，确保蓝框+光晕一定生效） */
.login-container .login-main-form .mdy-ic-wrap > .form-control:focus {
    border: 1px solid #0052d9 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 2px rgba(0, 82, 217, .10) !important;
    outline: none !important;
}

/* 主按钮 / 获取验证码：去掉点击聚焦的发光，hover 叠一层半透明白 */
.login-container .login-main-form .btn-primary,
.login-container .login-main-form .input-group-append .btn {
    transition: background-color .2s ease, background-image .2s ease, box-shadow .2s ease !important;
}
/* 聚焦 / 按下：不要任何发光和轮廓 */
.login-container .login-main-form .btn-primary:focus,
.login-container .login-main-form .btn-primary:active,
.login-container .login-main-form .btn-primary.active,
.login-container .login-main-form .btn-primary:focus-visible,
.login-container .login-main-form .input-group-append .btn:focus,
.login-container .login-main-form .input-group-append .btn:active,
.login-container .login-main-form .input-group-append .btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}
/* hover：在蓝底上叠一层半透明白，看起来「变浅」 */
.login-container .login-main-form .btn-primary:hover,
.login-container .login-main-form .input-group-append .btn:hover {
    background-image: linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, .26)) !important;
    box-shadow: none !important;
}
/* 按下时比 hover 稍微回一点，不要发光 */
.login-container .login-main-form .btn-primary:active,
.login-container .login-main-form .input-group-append .btn:active {
    background-image: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) !important;
    box-shadow: none !important;
}

/* 没有区号下拉时（只允许 +86）：输入框左侧应该是圆角 */
.login-container .login-main-form .input-group > .mdy-ic-wrap:first-child,
.login-container .login-main-form .input-group > .form-control:first-child {
    margin-left: 0;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.login-container .login-main-form .input-group > .mdy-ic-wrap:first-child > .form-control,
.login-container .login-main-form .input-group > .mdy-ic-wrap:first-child > .form-control:focus {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

/* ===== 提交按钮 loading：机制照参考站（btn-text / btn-loading / is-loading），外观用我们原来的 ===== */
.login-container .login-main-form button[type="submit"] {
    position: relative;
}
.login-container .login-main-form button[type="submit"] .mdy-btn-loading { display: none; }

/* 加载态：保持「蓝底叠一层半透明白」的观感，文字隐藏，转圈 + 请稍后并排 */
.login-container .login-main-form button[type="submit"].is-loading {
    pointer-events: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-image: linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, .26)) !important;
    box-shadow: none !important;
}
.login-container .login-main-form button[type="submit"].is-loading .mdy-btn-text {
    display: none;
}
.login-container .login-main-form button[type="submit"].is-loading .mdy-btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    line-height: 1;
}
/* 转圈：16px，2px 白亮弧 */
.login-container .login-main-form button[type="submit"] .mdy-btn-loading::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mdy-btn-spin .8s linear infinite;
}
@keyframes mdy-btn-spin {
    to { transform: rotate(360deg); }
}

/* 表单内容右侧不再缩进 10px，让输入框与标签栏的灰线左右都对齐 */
.login-container .login-main-form .login-content,
.login-main .login-content{
    padding-right: 0 !important;
    padding-left: 0 !important;
}