/* ==========================================================================
   BotsBox — страницы входа/регистрации/восстановления пароля (auth.css)
   Тот же дизайн-язык, что и service-landing.css/cabinet.css: Inter, синий
   акцент #0874f9, мягкие тени, крупные радиусы, без старых bootstrap-рамок.
   Подключается точечно в account/login|register|forgotten — не трогает
   остальной сайт (стандартный column_left/column_right/checkout и т.д.).
   ========================================================================== */

.auth-shell {
	--auth-accent: #0874f9;
	--auth-accent-dark: #0665dd;
	--auth-text: #0b1730;
	--auth-text-secondary: #64708a;
	--auth-text-muted: #98a2b8;
	--auth-border: #e6eaf3;
	--auth-bg: #f7f9fd;
	--auth-radius-lg: 24px;
	--auth-radius: 14px;
	--auth-shadow: 0 24px 60px rgba(15, 30, 70, 0.08);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--auth-text);
	min-height: 62vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 20px;
	background:
		radial-gradient(closest-side, rgba(8,116,249,.08), rgba(8,116,249,0) 70%) top right / 55% 100% no-repeat,
		radial-gradient(closest-side, rgba(124,58,237,.06), rgba(124,58,237,0) 70%) bottom left / 50% 90% no-repeat,
		var(--auth-bg);
}

.auth-shell * { box-sizing: border-box; }

.auth-grid {
	width: 100%;
	max-width: 940px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 860px) {
	.auth-grid { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
}

/* ---------- Левая панель — приглашение зарегистрироваться ---------- */

.auth-promo {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 40px 36px;
	border-radius: var(--auth-radius-lg);
	color: #fff;
	background: linear-gradient(155deg, #0874f9 0%, #2f5fe0 55%, #7c3aed 120%);
	box-shadow: var(--auth-shadow);
}

.auth-promo::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.auth-promo::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -40px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

.auth-promo > * { position: relative; z-index: 1; }

.auth-promo h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.auth-promo p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }

.auth-promo-list { display: grid; gap: 10px; margin: 4px 0 8px; padding: 0; list-style: none; }
.auth-promo-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.92); }
.auth-promo-list li i { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); font-size: 11px; }

.auth-promo .auth-btn { align-self: flex-start; margin-top: 6px; color: #0874f9; background: #fff; }
.auth-promo .auth-btn:hover { background: #f1f6ff; }

/* ---------- Правая панель — сама форма ---------- */

.auth-card {
	background: #fff;
	border-radius: var(--auth-radius-lg);
	box-shadow: var(--auth-shadow);
	padding: 40px 36px;
}

.auth-card h1, .auth-card h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--auth-text); }
.auth-card > p:first-of-type { margin: 0 0 26px; color: var(--auth-text-secondary); font-size: 14px; }

.auth-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
	padding: 12px 15px;
	border-radius: var(--auth-radius);
	font-size: 14px;
	line-height: 1.5;
}

.auth-alert-error { background: #fdecea; color: #b3261e; }
.auth-alert-success { background: #eafaf0; color: #0a7a44; }

/* ---------- Поля форм — переопределяем bootstrap .form-control целиком
   внутри .auth-shell, чтобы не трогать общий сайт. ---------- */

.auth-shell .form-group { margin-bottom: 18px; }
.auth-shell label:not(.radio label):not(.checkbox label) { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--auth-text); }

.auth-shell .form-control,
.auth-shell input[type="text"],
.auth-shell input[type="email"],
.auth-shell input[type="password"],
.auth-shell input[type="tel"],
.auth-shell select.form-control {
	display: block;
	width: 100%;
	height: auto;
	padding: 12px 15px;
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius);
	background: #fbfcfe;
	color: var(--auth-text);
	font-size: 15px;
	font-family: inherit;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.auth-shell .form-control:focus {
	outline: none;
	border-color: var(--auth-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(8, 116, 249, 0.12);
}

.auth-shell .radio, .auth-shell .checkbox { font-size: 14px; color: var(--auth-text-secondary); }
.auth-shell .radio label, .auth-shell .checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 0; }

.auth-shell .text-danger { margin-top: 6px; font-size: 12.5px; color: #dc2626; }

/* Убираем старые bootstrap fieldset/legend рамки — карточка сама уже даёт
   контур, дублирующая рамка внутри выглядит устаревшей ("лишние рамки"). */
.auth-shell fieldset { border: 0; margin: 0 0 8px; padding: 0; }
.auth-shell legend {
	width: auto;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--auth-text-muted);
}

.auth-shell fieldset + fieldset { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--auth-border); }

/* ---------- Кнопки ---------- */

.auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 22px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(90deg, #087dff 0%, #276ff5 45%, #7545ed 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 23px rgba(62, 100, 231, 0.24);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.auth-btn:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 13px 27px rgba(62, 100, 231, 0.28); color: #fff; text-decoration: none; }

.auth-btn-ghost {
	background: transparent;
	color: var(--auth-text-secondary);
	box-shadow: none;
	border: 1px solid var(--auth-border);
}

.auth-btn-ghost:hover { background: var(--auth-bg); color: var(--auth-text); box-shadow: none; transform: none; }

/* register.twig — стандартная bootstrap-форма OpenCart, поля не переписывали
   (риск выше пользы на 400+ строк), но кнопки/сетку заворачиваем в тот же
   современный вид через классы, которые уже там есть. */
.auth-shell .btn.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(90deg, #087dff 0%, #276ff5 45%, #7545ed 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 10px 23px rgba(62, 100, 231, 0.24);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.auth-shell .btn.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 13px 27px rgba(62, 100, 231, 0.28); }
.auth-shell .btn.btn-default { border-radius: 999px; border-color: var(--auth-border); color: var(--auth-text-secondary); }

/* form-horizontal (col-sm-2/col-sm-10) — в узкой карточке ставим лейбл над
   полем в одну колонку вместо бок-о-бок, иначе поля упираются друг в друга. */
.auth-card .form-horizontal .control-label { width: 100%; text-align: left; padding: 0; }
.auth-card .form-horizontal .col-sm-2,
.auth-card .form-horizontal .col-sm-10 { width: 100%; float: none; padding: 0; }
.auth-card .form-horizontal .form-group { display: block; }

.auth-shell .buttons { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.auth-shell .buttons .pull-left, .auth-shell .buttons .pull-right { float: none; }
.auth-shell .buttons .btn { width: auto; }

.auth-forgot-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--auth-accent); text-decoration: none; }
.auth-forgot-link:hover { text-decoration: underline; }

.auth-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--auth-text-secondary); font-size: 13px; text-decoration: none; }
.auth-back-link:hover { color: var(--auth-text); }

@media (max-width: 480px) {
	.auth-card, .auth-promo { padding: 28px 22px; }
	.auth-shell { padding: 32px 14px; }
}