/**
 * ELBIN R2 — структурний CSS елемента білдера «Account».
 *
 * Кнопка акаунта в зоні дій (іконка + лейбл/підзаголовок) з випадним
 * міні-меню (.sh-menu). Десктоп ≥1000px; на планшеті/мобільному елемент
 * прихований (account живе в нижній мобільній навігації).
 *
 * Перебиває базовий 50×50-квадрат .ct-header-account з header-main.css:
 * кнопка тут — flex-рядок авто-ширини (іконка + текст), як у дизайні.
 * Кольори/фон/падінги керуються CSS-змінними з dynamic-styles.php
 * (--account-*), з дефолтами на темну палітру хедера.
 *
 * Завантажується ПІСЛЯ header-main.css (dep у enqueue.php), тож override
 * виграє за порядком каскаду без !important.
 */

@media (min-width: 1000px) {

	/* Корінь елемента — позиціонуючий контейнер для дропдауна */
	[data-row="middle"] .ct-header-account.sh-account {
		position: relative;
		/* скидаємо квадрат 50×50 із header-main.css — кнопка-дитина задає розмір */
		width: auto;
		height: auto;
		background: transparent;
		border-radius: 0;
		overflow: visible;
	}

	/* Тригер: іконка + текстовий блок (лейбл + підзаголовок) */
	[data-row="middle"] .ct-header-account .sh-action {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 50px;
		padding: var(--account-padding, 0 10px);
		border: none;
		border-radius: var(--elbin-r2-r-control);
		background: var(--account-background, transparent);
		color: var(--account-text-color, var(--elbin-r2-header-text-3));
		cursor: pointer;
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
		font-family: var(--elbin-r2-font-ui);
	}

	[data-row="middle"] .ct-header-account .sh-action:hover,
	[data-row="middle"] .ct-header-account.is-open .sh-action {
		background: var(--account-background-hover, rgba(255, 255, 255, 0.1));
		color: var(--account-text-hover-color, var(--elbin-r2-accent));
	}

	/* Обгортка іконки */
	[data-row="middle"] .ct-header-account .sh-action-ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		flex: 0 0 auto;
	}

	[data-row="middle"] .ct-header-account .sh-action-ico svg {
		width: 26px;
		height: 26px;
		display: block;
	}

	/* Текстовий блок: лейбл зверху, підзаголовок знизу */
	[data-row="middle"] .ct-header-account .sh-action-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		line-height: 1;
	}

	[data-row="middle"] .ct-header-account .sh-action-label {
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		color: inherit;
	}

	[data-row="middle"] .ct-header-account .sh-action-sub {
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		color: var(--elbin-r2-header-text-3);
	}

	/* 07.07.2026: стилі дропдауна .sh-menu видалено — розмітку прибрано з
	   panel-builder/header/account/view.php (замінена панеллю account-drawer). */
}

/* ───────────────────────────────────────────────
   Мобільний/планшет (<1000px) — account прихований
   (видимість також керується ct-visibility-класами,
   але страхуємо структурно).
   ─────────────────────────────────────────────── */
@media (max-width: 999.98px) {
	.ct-header-account.sh-account {
		display: none !important;
	}
}