/**
 * KAB Magic Link Auth — стили формы.
 */

.kab-mla-form-wrap {
	max-width: 400px;
	margin: 0 auto;
}

/* =========================================================================
 * Страница входа wp-login — в дизайне модалки темы (area-login.php):
 * заголовок «Вход на сайт», вкладки «По ссылке на почту» / «По паролю»,
 * подчёркнутые поля, фирменные кнопки, кнопка Telegram.
 * Вкладки переключает magic-link-auth.js (класс kab-mla-pass на форме).
 * ======================================================================= */

body.login {
	background: #e9f2f8;
}

body.login #login {
	width: 380px;
	padding-top: 6vh;
}

body.login #login h1,
body.login .language-switcher {
	display: none;
}

body.login #login form {
	padding: 26px 28px 24px;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 14px 44px rgba(42, 78, 110, 0.18);
	background:
		linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
		url(../../../themes/kabacedemy/static/img/assets/modal/bg.png) center / cover no-repeat #fff;
}

.kab-mla-login-title {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #3f77ae;
}

.kab-mla-tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 18px;
}

.kab-mla-tab {
	flex: 1;
	padding: 10px 4px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-size: 15px;
	color: #7a8794;
	cursor: pointer;
	outline: none;
}

.kab-mla-tab:focus {
	outline: none;
	box-shadow: none;
}

.kab-mla-tab.is-active {
	border-bottom-color: #a42bb9;
	color: #222;
	font-weight: 600;
}

#loginform .kab-mla-form-wrap {
	max-width: 100%;
	margin: 0;
}

/* Раскладка страницы входа — через CSS flex + класс kab-mla-showpass на форме.
 * Скрипт wptelegram-login снят с этой страницы (dequeue_wptelegram_login),
 * поэтому форма = чистый wp-login: «Запомнить меня» (.forgetmenot) и «Войти»
 * (.submit) — прямые дети формы, их и таргетим.
 * Порядок: заголовок, вкладки, поля активной вкладки, «или», Telegram — внизу. */
body.login #loginform {
	display: flex;
	flex-direction: column;
}
body.login #loginform > .kab-mla-login-title { order: 0; }
body.login #loginform > .kab-mla-tabs        { order: 1; }
body.login #loginform > p:first-of-type      { order: 2; } /* имя пользователя (вкладка пароля) */
body.login #loginform > .user-pass-wrap      { order: 3; margin: 10px 0 0; }
body.login #loginform > #kab-mla-login-form  { order: 2; } /* email (вкладка ссылки) */
body.login #loginform > .forgetmenot         { order: 4; margin: 14px 0 0; font-size: 13px; } /* «Запомнить меня» */
body.login #loginform > .submit              { order: 5; margin: 16px 0 0; } /* «Войти» */
body.login #loginform > .kab-mla-or          { order: 8; }
body.login #loginform > .kab-mla-tg          { order: 9; }

/* По умолчанию активна вкладка «по ссылке»: парольные поля скрыты. */
body.login #loginform > p:first-of-type,
body.login #loginform > .user-pass-wrap,
body.login #loginform > .forgetmenot,
body.login #loginform > .submit {
	display: none;
}
/* Вкладка «по паролю»: показываем парольные поля, прячем email-блок. */
body.login #loginform.kab-mla-showpass > p:first-of-type,
body.login #loginform.kab-mla-showpass > .user-pass-wrap,
body.login #loginform.kab-mla-showpass > .forgetmenot,
body.login #loginform.kab-mla-showpass > .submit {
	display: block;
}
body.login #loginform.kab-mla-showpass > #kab-mla-login-form {
	display: none;
}

body.login #loginform .submit .button-primary {
	float: none;
	width: 100%;
	padding: 13px 20px;
	font-size: 14px;
	font-weight: 600;
	background: #a42bb9;
	border: 0;
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
}

body.login #loginform .submit .button-primary:hover,
body.login #loginform .submit .button-primary:focus {
	background: #8b23a0;
}

/* Поля — подчёркнутые, как в модалке. */
body.login #login form .input,
#loginform .kab-mla-field input[type="email"] {
	padding: 10px 2px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #b6cfe4;
	border-radius: 0;
	box-shadow: none;
	font-size: 15px;
	color: #28415b;
}

body.login #login form .input:focus,
#loginform .kab-mla-field input[type="email"]:focus {
	border-bottom-color: #2a6dd9;
	box-shadow: none;
	outline: none;
}

body.login #login form ::placeholder {
	color: #84a9cc;
	opacity: 1;
}

#loginform label[for="user_login"],
#loginform label[for="user_pass"],
#loginform .kab-mla-field label {
	display: none;
}

#loginform .kab-mla-submit {
	margin: 18px 0 0;
}

.kab-mla-caption {
	margin: 14px 0 0;
	font-size: 13px;
	color: #6b7784;
	text-align: center;
}

#loginform .kab-mla-why {
	margin: 6px 0 0;
	text-align: center;
}

#loginform .kab-mla-why a {
	font-size: 12px;
	color: #7a8794;
}

/* «или» + вход через Telegram (свой линк, как в модалке шапки). */
.kab-mla-or {
	display: flex;
	align-items: center;
	margin: 18px 0 12px;
	color: #9aa7b3;
	font-size: 12px;
}

.kab-mla-or::before,
.kab-mla-or::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #d8e3ec;
}

.kab-mla-or span {
	padding: 0 12px;
}

.kab-mla-tg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	border-radius: 8px;
	background: #229ED9;
	color: #fff !important;
	font-size: 14px;
	text-decoration: none !important;
}

.kab-mla-tg:hover {
	background: #1d8dc3;
}

/* Штатный виджет wptelegram здесь не нужен — вместо него .kab-mla-tg. */
body.login #wptelegram-login-wrap,
body.login .wptelegram-login-or {
	display: none !important;
}

body.login #login #nav,
body.login #login #backtoblog {
	text-align: center;
	font-size: 13px;
}

.kab-mla-divider {
	display: flex;
	align-items: center;
	margin: 20px 0 16px;
	color: #888;
	font-size: 13px;
}

.kab-mla-divider::before,
.kab-mla-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #ddd;
}

.kab-mla-divider span {
	padding: 0 12px;
	white-space: nowrap;
}

.kab-mla-description {
	margin: 0 0 16px;
	font-size: 14px;
	color: #555;
	line-height: 1.5;
}

.kab-mla-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.kab-mla-field input[type="email"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.kab-mla-field input[type="email"]:focus {
	border-color: #3498db;
	outline: none;
	box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.kab-mla-submit {
	margin-top: 12px;
}

.kab-mla-button {
	display: block;
	width: 100%;
	padding: 13px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	/* Фирменная кнопка темы kabacedemy (.modal__form__button / .btn). */
	background: #a42bb9;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
}

.kab-mla-button:hover {
	background: #8b23a0;
}

.kab-mla-button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.kab-mla-message {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.kab-mla-message.kab-mla-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.kab-mla-message.kab-mla-error,
div.kab-mla-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 14px;
	font-size: 14px;
}

.kab-mla-shortcode {
	padding: 24px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
}

.kab-mla-shortcode .kab-mla-button {
	margin-top: 4px;
}

.kab-mla-why {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
}

.kab-mla-why a {
	color: #888;
	text-decoration: underline;
}

.kab-mla-why a:hover {
	color: #3498db;
}

/* ============================================
   Попап (модальное окно)
   ============================================ */

.kab-mla-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	/* Выше модалки темы и попапа kabMlPopup (100000): объяснялка должна
	 * открываться поверх модалки входа на маршруте /?kab-ml-open=1. */
	z-index: 100002;
	background: rgba(0, 0, 0, 0.55);
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.kab-mla-modal-overlay.kab-mla-modal-open {
	display: flex;
	animation: kab-mla-fade-in 0.2s ease-out;
}

body.kab-mla-no-scroll {
	overflow: hidden;
}

.kab-mla-modal {
	position: relative;
	max-width: 440px;
	width: 100%;
	background: #fff;
	border-radius: 12px;
	padding: 36px 32px 28px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	animation: kab-mla-slide-up 0.25s ease-out;
}

.kab-mla-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 4px;
}

.kab-mla-modal-close:hover {
	color: #333;
}

.kab-mla-modal-icon {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 14px;
}

.kab-mla-modal-title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
}

.kab-mla-modal-text {
	margin: 0 0 14px;
	font-size: 16px;
	color: #444;
	line-height: 1.55;
}

/* list-style и отступы жёстко: на фронте reset темы убирает маркеры. */
.kab-mla-modal ul.kab-mla-modal-list {
	margin: 0 0 14px;
	padding-left: 24px;
	list-style: disc outside;
	text-align: left;
	font-size: 16px;
	color: #444;
	line-height: 1.55;
}

.kab-mla-modal ul.kab-mla-modal-list li {
	margin-bottom: 10px;
	list-style: disc outside;
}

.kab-mla-modal-list strong {
	font-weight: 700;
	color: #222;
}

.kab-mla-modal-note {
	margin: 0 0 24px;
	font-size: 14px;
	color: #777;
	line-height: 1.5;
}

.kab-mla-modal .kab-mla-button {
	display: inline-block;
	width: auto;
	min-width: 180px;
	margin: 4px auto 0;
	text-align: center;
	line-height: 1.3;
}

@keyframes kab-mla-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes kab-mla-slide-up {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 480px) {
	.kab-mla-modal {
		padding: 28px 20px 22px;
	}
}

/* =========================================================================
 * Страница «Мой аккаунт» / «Забыли пароль» / сброс пароля — под дизайн сайта.
 * Дефолтные WooCommerce-нотисы (.woocommerce-message) выглядят чужеродно
 * (серая рамка-коробка) — приводим к фирменной карточке-callout и причёсываем
 * форму сброса под ту же стилистику, что модалка входа (#a42bb9, подчёркнутые
 * поля). Актуально после перехода на magic link: «Забыли пароль?» — штатный
 * путь для тех, кто хочет пароль.
 * ======================================================================= */

body.woocommerce-account .woocommerce-notices-wrapper {
	max-width: 620px;
}

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	margin: 0 0 18px;
	padding: 16px 20px;
	list-style: none;
	border: 0;
	border-left: 4px solid #a42bb9;
	border-radius: 8px;
	background: #f6ecfb;
	box-shadow: 0 6px 20px rgba(42, 78, 110, 0.08);
	color: #33475b;
	font-size: 15px;
	line-height: 1.55;
}

body.woocommerce-account .woocommerce-error {
	border-left-color: #c0392b;
	background: #fdecea;
}

/* Дефолтные ::before-иконки и всплывающая кнопка Woo — убрать. */
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-error::before {
	content: none;
}

body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-info .button {
	float: none;
}

/* Пояснительный абзац под нотисом («Письмо со ссылкой…») — читаемый и в меру. */
body.woocommerce-lost-password .woocommerce > p,
body.woocommerce-lost-password .woocommerce-notices-wrapper ~ p {
	max-width: 620px;
	margin-top: 0;
	color: #6b7784;
	font-size: 14px;
	line-height: 1.6;
}

/* Форма сброса — как карточка входа: подчёркнутое поле, ограниченная ширина. */
body.woocommerce-lost-password .woocommerce-ResetPassword {
	max-width: 620px;
	margin: 0;
}

body.woocommerce-account .woocommerce-ResetPassword input[type="text"],
body.woocommerce-account .woocommerce-ResetPassword input[type="email"] {
	width: 100%;
	max-width: 420px;
	padding: 10px 2px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #b6cfe4;
	border-radius: 0;
	box-shadow: none;
	font-size: 15px;
	color: #28415b;
}

body.woocommerce-account .woocommerce-ResetPassword input:focus {
	border-bottom-color: #a42bb9;
	outline: none;
	box-shadow: none;
}

/* Дашборд «Мой аккаунт»: приветствие и подтекст — фирменная типографика,
 * нотис-callout не налезает на приветствие (нормальный поток + отступ). */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper {
	margin: 0 0 18px;
}

body.woocommerce-account .woocommerce-myaccount__welcome {
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.4;
	color: #28415b;
}

body.woocommerce-account .woocommerce-myaccount__welcome strong {
	color: #a42bb9;
	font-weight: 700;
}

body.woocommerce-account .woocommerce-myaccount__subtext {
	margin: 0;
	color: #6b7784;
	font-size: 15px;
	line-height: 1.6;
}