/* Вёрстка auth-страниц (login/register/forgot/reset) — СТРУКТУРА (карточка, круглые
   кнопки, разметка соцкнопок) взята из референса dark.shopping, но ЦВЕТА — наши
   собственные (см. --dh-* в admin.css), референс использовался только за структуру,
   не за палитру (2026-07-14, см. feedback в auto-memory). */

body.auth-page {
	min-height: 100vh;
	margin: 0;
	background-color: var(--dh-bg);
	background-image: radial-gradient(circle, rgba(19, 20, 14, 0.08) 1px, transparent 1px);
	background-size: 22px 22px;
	color: var(--dh-dark);
	display: flex;
	flex-direction: column;
}

/* Minimal topbar - a logo + a couple of links, not the full marketing nav (that would
   distract from the form). Same treatment on login/register/forgot/reset/choose-plan. */
.auth-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
}

/* Was a bare text wordmark ("IMMOHUNTER", 18px, no icon) - looked thin/disproportionate next
   to the branded icon+wordmark lockup used everywhere else, most noticeable on mobile next to
   the bold "Sign up" pill. logo2.png itself has WHITE text (made for the dark marketing
   header) - unreadable on this page's light background, so pairing the icon-only fav-icon.png
   (transparent, works on any background) with real dark text instead. 2026-08-23. */
.auth-topbar__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.auth-topbar__logo img {
	display: block;
}

.auth-topbar__logo span {
	font-size: 20px;
	font-weight: 700;
	color: var(--dh-dark);
}

.auth-topbar__nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.auth-topbar__nav a {
	color: var(--dh-muted);
	font-size: 14px;
	text-decoration: none;
}

.auth-topbar__nav a:hover {
	color: var(--dh-dark);
}

.auth-topbar__cta {
	background: var(--dh-dark) !important;
	color: #fff !important;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
}

button.auth-topbar__cta {
	border: none;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

@media (max-width: 575px) {
	.auth-topbar__nav a:not(.auth-topbar__cta) {
		display: none;
	}
}

/* Flex-centering wrapper around .auth-shell/.choose-plan-shell - fills the space below the
   topbar, so the card stays vertically centered in whatever room is left, not the whole viewport. */
.auth-center {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 32px 16px;
}

.auth-shell {
	width: 100%;
	max-width: 480px;
}

.auth-card {
	background: #fff;
	border: 1px solid var(--dh-border);
	border-radius: 20px;
	padding: 36px 32px;
	text-align: left;
}

.auth-card h1 {
	font-size: 20px;
	margin: 0 0 20px;
	text-align: center;
}

.text-logo {
	display: block;
	text-align: center;
	margin-bottom: 18px;
	font-size: 20px;
	font-weight: 700;
	color: var(--dh-dark);
	text-decoration: none;
}

.auth-card .form-control {
	background: var(--dh-bg);
	border: 1px solid var(--dh-border);
	border-radius: 16px;
	box-shadow: none;
	color: var(--dh-dark);
	/* 16px, not 14px - iOS Safari auto-zooms the whole page on focus for any input with a
	   smaller font-size. That zoom-on-tap is what usually reads as "the form feels too big
	   on mobile", not the field's actual pixel size (which was already within touch-target
	   norms - see auto-memory audit, 2026-08-22). */
	font-size: 16px;
	font-weight: 500;
	min-height: 48px;
	padding: 13px 15px;
	transition: border .3s ease;
}

.auth-card .form-control:hover {
	border-color: var(--dh-dark);
}

.auth-card .form-control:focus {
	border-color: var(--dh-accent);
	outline: none;
	box-shadow: none;
}

.auth-card .form-label {
	display: block;
	text-align: left;
	width: 100%;
	font-size: 13px;
	color: var(--dh-muted);
	margin-bottom: 6px;
}

.auth-card .btn-primary {
	align-items: center;
	background: var(--dh-accent);
	border: 0;
	border-radius: 34px;
	box-sizing: border-box;
	color: var(--dh-dark) !important;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	min-height: 44px;
	transition: opacity .2s ease;
	width: 100%;
}

.auth-card .btn-primary:hover {
	opacity: .85;
}

/* Bootstrap-класс .btn несёт свой синий focus/active glow (--bs-btn-focus-shadow-rgb) —
   мы гасим только фон, эффект фокуса остаётся синим сам по себе, если явно не убрать. */
.auth-card .btn:focus,
.auth-card .btn:active,
.auth-card .btn-primary:focus,
.auth-card .btn-primary:active {
	box-shadow: none !important;
	outline: none !important;
}

.auth-form__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
	margin-bottom: 4px;
}

.auth-form__secondary {
	background: var(--dh-bg);
	border: 1px solid var(--dh-border);
	border-radius: 34px;
	color: var(--dh-dark) !important;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.auth-form__secondary:hover {
	border-color: var(--dh-dark);
}

.auth-form__row {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 16px 0 20px;
}

.auth-form__link {
	border-bottom: 0;
	color: var(--dh-muted);
	font-size: 14px;
	text-decoration: none;
}

.auth-form__link:hover {
	color: var(--dh-dark);
}

.auth-social {
	margin-top: 8px;
}

.auth-social__divider {
	align-items: center;
	color: var(--dh-muted);
	display: flex;
	font-size: 13px;
	gap: 12px;
	letter-spacing: .08em;
	margin: 16px 0 20px;
	text-transform: uppercase;
}

.auth-social__divider:after,
.auth-social__divider:before {
	background: var(--dh-border);
	content: "";
	flex: 1;
	height: 1px;
}

.auth-social__buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
}

/* Full-width "Continue with Google" button (icon + label) - not a bare icon circle, so it
   reads the same way the Google/Telegram-style buttons do everywhere else on the web. */
.btn-google {
	align-items: center;
	border: 1px solid var(--dh-border);
	background: #fff;
	border-radius: 34px;
	color: var(--dh-dark) !important;
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
	width: 100%;
}

.btn-google:hover {
	border-color: var(--dh-dark);
	background: var(--dh-bg);
}

.auth-card .alert {
	border-radius: 12px;
	font-size: 13px;
}

@media (max-width: 575px) {
	.auth-center {
		padding: 18px 12px;
	}
	.auth-shell {
		max-width: 100%;
	}
	.auth-card {
		padding: 30px 20px;
	}
}

/* Plain, classic blue link for "Contact support" - deliberately NOT .auth-form__link's muted
   gray (direct request: "синеньким", a recognizably-clickable blue, not the site's own quiet
   secondary-link color). 2026-08-25. */
.auth-support-link {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 14px;
	color: #2563eb;
	text-decoration: underline;
}
.auth-support-link:hover {
	color: #1d4ed8;
}