/**
 * ELBIN Redesign 2 — Account Drawer (бічна панель акаунта)
 *
 * Каркас панелі успадковується з cart-drawer.css (класи .elbin-cartdrawer*).
 * Тут — приховання старого дропдауна і специфіка вмісту (.elbin-accdrawer*).
 */

/* 07.07.2026: ховалку .sh-menu видалено — розмітка дропдауна прибрана
   з panel-builder/header/account/view.php, вузла більше не існує. */

/* Страховка: display правил панелі не має перебивати hidden-атрибут */
.elbin-cartdrawer--acc [hidden] {
	display: none !important;
}

/* ── Вміст ─────────────────────────────────────────────────────────────── */

.elbin-accdrawer {
	padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
}

.elbin-accdrawer__profile {
	margin-bottom: 20px;
}
.elbin-accdrawer__name {
	font: 800 19px/1.25 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text, #F4F4F5);
}
.elbin-accdrawer__phone {
	margin-top: 4px;
	font: 600 13px/1 var(--elbin-r2-font-mono);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-accdrawer__hint {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}

/* Меню кабінету */
.elbin-accdrawer__menu {
	display: flex;
	flex-direction: column;
}
.elbin-accdrawer__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 10px;
	border-radius: 10px;
	font: 600 14px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text, #F4F4F5);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.elbin-accdrawer__item svg {
	flex-shrink: 0;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	transition: color 0.15s ease;
}
.elbin-accdrawer__item:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--elbin-r2-accent, #1AD0CA);
	text-decoration: none;
}
.elbin-accdrawer__item:hover svg {
	color: var(--elbin-r2-accent, #1AD0CA);
}
.elbin-accdrawer__item--muted {
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-accdrawer__foot {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Форма входу (гість) ───────────────────────────────────────────────── */

.elbin-accdrawer__form {
	display: flex;
	flex-direction: column;
}
.elbin-accdrawer__label {
	margin: 0 0 6px;
	font: 700 11px/1 var(--elbin-r2-font-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
/* input.клас — Blocksy-стилі input[type=...] специфічніші за голий клас */
input.elbin-accdrawer__input {
	height: 46px;
	margin-bottom: 14px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--elbin-r2-header-text, #F4F4F5);
	font: 500 14px/1 var(--elbin-r2-font-ui);
	transition: border-color 0.15s ease, background 0.15s ease;
}
input.elbin-accdrawer__input:focus {
	outline: none;
	border-color: var(--elbin-r2-accent, #1AD0CA);
	background: rgba(255, 255, 255, 0.09);
}
.elbin-accdrawer__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 13.5px;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	cursor: pointer;
}
.elbin-accdrawer__remember input {
	accent-color: var(--elbin-r2-accent, #1AD0CA);
	width: 16px;
	height: 16px;
}
.elbin-accdrawer__submit {
	height: 50px;
	border: none;
	border-radius: var(--elbin-r2-r-control, 6px);
	background: var(--elbin-r2-accent, #1AD0CA);
	color: var(--elbin-r2-ink-on-accent, #063D2E);
	font: 700 14px/1 var(--elbin-r2-font-ui);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}
.elbin-accdrawer__submit:hover {
	background: var(--elbin-r2-accent-hover, #16B8B2);
}
.elbin-accdrawer__lost {
	margin-top: 12px;
	align-self: center;
	font: 600 13px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.elbin-accdrawer__lost:hover {
	color: var(--elbin-r2-accent, #1AD0CA);
}

.elbin-accdrawer__sep {
	margin: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Блок реєстрації: підказка «Ще немає акаунта?» + кнопка — щоб було явно,
   що можна зареєструватися (а не лише увійти). */
.elbin-accdrawer__reg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.elbin-accdrawer__reg-q {
	font: 500 13.5px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}

/* «Зареєструватися» — без обведення: заповнена пігулка з акцент-текстом
   (вторинна до суцільної accent-кнопки «Увійти»). */
.elbin-accdrawer__ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	border: none;
	border-radius: var(--elbin-r2-r-control, 6px);
	background: rgba(255, 255, 255, 0.08);
	color: var(--elbin-r2-accent, #1AD0CA);
	font: 700 13px/1 var(--elbin-r2-font-ui);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.elbin-accdrawer__ghost:hover {
	background: rgba(26, 208, 202, 0.14);
	color: var(--elbin-r2-accent, #1AD0CA);
	text-decoration: none;
}

/* ── Вхід/реєстрація за кодом (OTP, Retention Фаза 2, реворк 16.07) ──────
   Базові стилі тут (файл глобальний): блок рендериться на my-account
   (оверрайд form-login.php) і в гостьовій гілці цього ж дровера. */

.elbin-r2-otp--page {
	max-width: 560px;
	margin: 0 auto 26px;
	padding: 24px 26px;
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-accent);
	border-radius: 12px;
}
.elbin-r2-otp__title {
	margin: 0 0 6px;
	font: 800 18px/1.3 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
}
.elbin-r2-otp__sub {
	margin: 0 0 14px;
	font: 400 13px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-2);
}
.elbin-r2-otp__step {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
/* display:flex перебиває UA-стиль атрибута hidden — повертаємо */
.elbin-r2-otp__step[hidden] {
	display: none;
}
input.elbin-r2-otp__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--elbin-r2-line);
	border-radius: 8px;
	font: 400 16px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	background: var(--elbin-r2-surface);
	box-sizing: border-box;
	outline: none;
}
input.elbin-r2-otp__input:focus {
	border-color: var(--elbin-r2-accent);
	box-shadow: 0 0 0 3px var(--elbin-r2-accent-50);
}
input.elbin-r2-otp__input--code {
	flex: 0 1 180px;
	font-family: var(--elbin-r2-font-mono, monospace);
	letter-spacing: 4px;
	text-align: center;
}
/* letter-spacing 4px обрізає плейсхолдер «Код із листа» на вузьких екранах */
input.elbin-r2-otp__input--code::placeholder {
	letter-spacing: normal;
	font-family: inherit;
}
.elbin-r2-otp__btn {
	padding: 12px 22px;
	border: none;
	border-radius: 9px;
	background: var(--elbin-r2-accent);
	font: 700 14px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-ink-on-accent);
	cursor: pointer;
	transition: background var(--elbin-r2-transition-fast);
}
.elbin-r2-otp__btn:hover { background: var(--elbin-r2-accent-hover, #16B8B2); }
.elbin-r2-otp__btn:disabled { opacity: 0.6; cursor: wait; }
.elbin-r2-otp__resend {
	border: none;
	background: none;
	font: 400 13px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.elbin-r2-otp__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 0;
	font: 400 13px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-2);
	cursor: pointer;
}
.elbin-r2-otp__consent-box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--elbin-r2-accent);
	cursor: pointer;
}
.elbin-r2-otp__msg {
	margin: 12px 0 0;
	font: 500 13px/1.5 var(--elbin-r2-font-ui);
}
.elbin-r2-otp__msg.is-ok { color: var(--elbin-r2-accent-700, #0E8F8A); }
.elbin-r2-otp__msg.is-err { color: var(--elbin-r2-error, #E5484D); }

/* Deep-лінк «Без пошти? Отримуйте коди в Telegram» (Telegram-крок passwordless) */
.elbin-r2-otp__tg {
	margin: 10px 0 0;
	font: 400 13px/1.4 var(--elbin-r2-font-ui);
}
.elbin-r2-otp__tg a {
	color: var(--elbin-r2-accent-700, #0E8F8A);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Темна панель дровера: світлі тексти, напівпрозорі інпути (як у старої форми) */
.elbin-r2-otp--drawer .elbin-r2-otp__sub {
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	font-size: 13.5px;
}
/* id-скоуп: фокус-стилі інпутів Blocksy (var-правила ядра) специфічніші за
   класовий ланцюжок — без id поле коду ставало білим при автофокусі */
#elbin-account-drawer input.elbin-r2-otp__input {
	border-color: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--elbin-r2-header-text, #F4F4F5);
}
#elbin-account-drawer input.elbin-r2-otp__input:focus {
	border-color: var(--elbin-r2-accent, #1AD0CA);
	background: rgba(255, 255, 255, 0.09);
	box-shadow: none;
}
.elbin-r2-otp--drawer .elbin-r2-otp__consent,
.elbin-r2-otp--drawer .elbin-r2-otp__resend {
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-r2-otp--drawer .elbin-r2-otp__tg a {
	color: var(--elbin-r2-accent, #1AD0CA);
}
.elbin-r2-otp--drawer .elbin-r2-otp__msg.is-ok {
	color: var(--elbin-r2-accent, #1AD0CA);
}
/* У вузькій панелі кроки — колонкою, кнопка на всю ширину */
.elbin-r2-otp--drawer .elbin-r2-otp__step {
	flex-direction: column;
	align-items: stretch;
}
.elbin-r2-otp--drawer input.elbin-r2-otp__input,
.elbin-r2-otp--drawer input.elbin-r2-otp__input--code {
	flex: 1 1 auto;
}
.elbin-r2-otp--drawer .elbin-r2-otp__btn {
	height: 50px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.elbin-r2-otp--drawer .elbin-r2-otp__resend {
	align-self: center;
	padding: 4px;
}

/* ── Мобільний: акаунт-шторка під контент (усе видно без скролу) ──
   Перебиваємо спільну фіксовану висоту --elbin-sheet-h (cart-drawer.css) —
   для акаунта вона давала скрол. Ручка-ресайз тут не діє → ховаємо. */
@media (max-width: 999.98px) {
	.elbin-cartdrawer--acc .elbin-cartdrawer__panel {
		height: auto;
		max-height: 92vh;
	}
	.elbin-cartdrawer--acc .elbin-cartdrawer__handle {
		display: none;
	}
}