/*
 * Edling Account — блок у хедері, картка з перемикачем кабінетів, пункти меню.
 *
 * Основа — стилі сніпета `header_user_menu_v3` (хедер, мобільні пункти, PWA),
 * які переїхали сюди без змін за змістом.
 */

/* ── Блок у хедері ──────────────────────────────────────────────────────── */

.edl-user-block {
	position: relative;
	font-size: 14px;
	line-height: 1.3;
	color: #1e293b;
	text-align: right;
}

/* «Увійти» — кнопка-пігулка, як на EdLine (рішення Віктора 17.09.2026), колір —
   як у головної кнопки сайту «Приєднатися» (`.edl-btn-primary`, #2563eb). */
.edl-user-block--guest .edl-login,
.edl-user-block--guest .edl-login:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Висота 36px: з 44px кнопка розсувала хедер Divi по висоті (Віктор, 17.09). */
	min-height: 36px;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	background: #2563eb;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.edl-user-block--guest .edl-login:hover,
.edl-user-block--guest .edl-login:focus {
	color: #fff;
	text-decoration: none;
	background: #1d4ed8;
	box-shadow: 0 6px 14px rgba(37, 99, 235, 0.26);
}

.edl-user-block--guest .edl-login:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
}

.edl-account__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 8px 4px 4px;
	font: inherit;
	font-weight: 600;
	color: #1e293b;
	cursor: pointer;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
}

.edl-account__trigger:hover,
.edl-account__trigger[aria-expanded="true"] {
	background: #f1f5f9;
	border-color: #e2e8f0;
}

.edl-account__trigger:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.edl-account__avatar img,
.edl-account__photo img {
	display: block;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

.edl-account__avatar img {
	width: 32px;
	height: 32px;
}

.edl-account__name {
	max-width: 12em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edl-account__caret {
	width: 7px;
	height: 7px;
	margin: -3px 2px 0;
	border-right: 1.5px solid #64748b;
	border-bottom: 1.5px solid #64748b;
	transform: rotate(45deg);
}

.edl-account__trigger[aria-expanded="true"] .edl-account__caret {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/* ── Картка ─────────────────────────────────────────────────────────────── */

.edl-account__card {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 100000;
	box-sizing: border-box;
	width: 280px;
	padding: 8px;
	text-align: left;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.edl-account__card[hidden] {
	display: none;
}

.edl-account__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 18px 14px 14px;
	text-align: center;
	background: #f3f6f8;
	border-radius: 12px;
}

.edl-account__photo img {
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
}

.edl-account__fullname {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
}

.edl-account__email {
	max-width: 100%;
	overflow: hidden;
	font-size: 13px;
	color: #64748b;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edl-account__switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	margin-top: 12px;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 700;
	color: #1d4ed8;
	text-decoration: none;
	background: #e8efff;
	border-radius: 10px;
}

.edl-account__switch + .edl-account__switch {
	margin-top: 6px;
}

.edl-account__switch:hover {
	color: #fff;
	background: #2563eb;
}

.edl-account__links {
	display: flex;
	flex-direction: column;
	padding: 6px 0 0;
}

.edl-account__links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 600;
	color: #163247;
	text-decoration: none;
	border-radius: 10px;
}

.edl-account__links a:hover {
	background: #f1f5f9;
}

.edl-account__links .edl-account__logout {
	margin-top: 4px;
	border-top: 1px solid #e2e8f0;
	border-radius: 0 0 10px 10px;
}

.edl-account__ico {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: #6f8797;
}

.edl-account__switch .edl-account__ico {
	color: currentColor;
}

.edl-account__ico svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* На мобільному блок ховаємо — там пункти в меню (картку на телефоні вже пробували, див. HeaderBlock). */
@media (max-width: 980px) {
	.edl-user-block {
		display: none !important;
	}
}

/* ── Пункти мобільного меню — лише ≤980px ───────────────────────────────── */

@media (min-width: 981px) {
	.edl-mobile-login,
	.edl-mobile-account,
	.edl-mobile-logout {
		display: none !important;
	}
}

/* ── Нижня панель на мобільному (MobileBar) ─────────────────────────────── */

.edl-mobile-bar,
.edl-sheet {
	display: none;
}

@media (max-width: 980px) {
	body.edl-has-mobile-bar {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.edl-mobile-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99990;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		box-sizing: border-box;
		height: calc(64px + env(safe-area-inset-bottom, 0px));
		padding: 0 4px env(safe-area-inset-bottom, 0px);
		background: #fff;
		border-top: 1px solid #e2e8f0;
		box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06);
	}

	.edl-mobile-bar__item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		margin: 0;
		padding: 6px 2px;
		font: inherit;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.1;
		color: #64748b;
		text-decoration: none;
		cursor: pointer;
		background: none;
		border: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.edl-mobile-bar__item span:last-child {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.edl-mobile-bar__item .edl-account__ico,
	.edl-mobile-bar__item .edl-account__ico svg {
		width: 24px;
		height: 24px;
		color: currentColor;
	}

	.edl-mobile-bar__item.is-active,
	.edl-mobile-bar__profile[aria-expanded="true"] {
		color: #2563eb;
	}

	.edl-mobile-bar__item:active {
		opacity: 0.7;
	}

	.edl-mobile-bar__avatar img {
		display: block;
		width: 26px;
		height: 26px;
		margin: 0;
		border-radius: 50%;
		object-fit: cover;
	}

	.edl-mobile-bar__profile[aria-expanded="true"] .edl-mobile-bar__avatar img {
		box-shadow: 0 0 0 2px #2563eb;
	}

	.edl-mobile-bar__more .edl-account__ico svg circle {
		fill: currentColor;
	}

	.edl-mobile-bar__more[aria-expanded="true"] {
		color: #2563eb;
	}

	/* «Більше» — спливне меню над правим краєм панелі (як у Tutor LMS).
	   Прив'язане до низу екрана, як і шторка, — не до хедера. */
	.edl-more:not([hidden]) {
		position: fixed;
		right: 10px;
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
		z-index: 99995;
		display: block;
	}

	.edl-more__panel {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-width: 200px;
		max-width: calc(100vw - 20px);
		max-height: 60vh;
		padding: 6px;
		overflow-y: auto;
		background: #fff;
		border: 1px solid rgba(15, 23, 42, 0.08);
		border-radius: 14px;
		box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
		animation: edl-more-in 0.15s ease-out;
	}

	.edl-more__item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 11px 12px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		color: #163247;
		text-decoration: none;
		border-radius: 10px;
	}

	.edl-more__item:active,
	.edl-more__item:hover {
		background: #f1f5f9;
	}

	.edl-more__item.is-active {
		color: #2563eb;
	}

	.edl-more__item .edl-account__ico {
		color: currentColor;
	}

	/* Шторка «Профіль» — прив'язана до низу екрана, не до хедера. */
	.edl-sheet:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: block;
	}

	.edl-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(15, 23, 42, 0.45);
	}

	.edl-sheet__panel {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		max-height: 85vh;
		padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		background: #fff;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2);
		animation: edl-sheet-up 0.2s ease-out;
	}

	.edl-sheet__grip {
		width: 40px;
		height: 4px;
		margin: 0 auto 10px;
		background: #cbd5e1;
		border-radius: 2px;
	}

	.edl-sheet__close {
		position: absolute;
		top: 8px;
		right: 8px;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		color: #64748b;
		cursor: pointer;
		background: transparent;
		border: 0;
		border-radius: 50%;
	}

	.edl-sheet__close .edl-account__ico {
		color: currentColor;
	}

	.edl-sheet__panel .edl-account__links a {
		padding: 13px 12px;
		font-size: 16px;
	}

	body.edl-sheet-open {
		overflow: hidden;
	}
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
	.edl-sheet__panel,
	.edl-more__panel {
		animation: none;
	}
}

@keyframes edl-more-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes edl-sheet-up {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

/* ── Нижній бар PWA ─────────────────────────────────────────────────────── */

.edl-pwa-user a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 56px;
	padding: 4px 6px;
	color: #1e293b;
	text-decoration: none;
	transform: translateY(-5px);
	-webkit-tap-highlight-color: transparent;
}

.edl-pwa-user .edl-pwa-avatar img {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.edl-pwa-user .edl-pwa-text {
	margin-top: 2px;
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
}

.edl-pwa-user a:active {
	opacity: 0.7;
	transform: translateY(-5px) scale(0.96);
}

/* ── Колонки хедера Divi на мобільному — зі сніпета без змін ────────────
   Ліва колонка (edl-hdr-col-menu) на всю ширину, права (edl-hdr-col-user)
   виходить з рендеру; Divi додає колонкам марджини, звідси висока специфічність. */
@media (max-width: 980px) {
	body .et_pb_section .et_pb_row > .et_pb_column.edl-hdr-col-menu,
	body .et_pb_section .et_pb_column.edl-hdr-col-menu,
	.et_pb_row > .et_pb_column.edl-hdr-col-menu {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	body .et_pb_section .et_pb_row > .et_pb_column.edl-hdr-col-user,
	body .et_pb_section .et_pb_column.edl-hdr-col-user,
	.et_pb_row > .et_pb_column.edl-hdr-col-user {
		display: none !important;
	}

	.et_pb_section_0_tb_header .et_pb_row,
	.et_pb_section.et-l--header .et_pb_row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Висота хедера на телефоні — ~70px, як на EdLine (Віктор, 17.09.2026): з
	   кнопкою 38px у хедері на ~50px не лишалось повітря. Для всіх, не лише
	   гостей, — інакше після входу хедер «стрибав» би по висоті. */
	.et_pb_section.et_pb_section_0_tb_header {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}

	/* Гамбургер більший, як на EdLine (у Divi змовчування 32px), і по центру рядка
	   по вертикалі — Divi зсуває значок на `top: 2px` і ставить його на базову
	   лінію шрифту. Для всіх. */
	.edl-hdr-col-menu .et_mobile_nav_menu,
	.edl-hdr-col-menu .mobile_nav {
		display: flex !important;
		align-items: center;
		margin: 0 !important;
	}

	.edl-hdr-col-menu .mobile_nav .mobile_menu_bar {
		display: flex;
		align-items: center;
		padding: 0 !important;
		line-height: 1 !important;
	}

	.edl-hdr-col-menu .mobile_nav .mobile_menu_bar:before {
		top: 0 !important;
		font-size: 40px !important;
		line-height: 1 !important;
	}

	/* ── Гість на телефоні: «Увійти» кнопкою поруч із гамбургером (0.5.1) ──
	   Рішення Віктора 17.09.2026 — як на EdLine. Права колонка повертається лише
	   гостям (`body:not(.logged-in)`, специфічність вища за правило вище);
	   залогіненим на телефоні вона й далі схована — там нижня панель. */
	body:not(.logged-in) .et_pb_section .et_pb_row > .et_pb_column.edl-hdr-col-menu {
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
	}

	body:not(.logged-in) .et_pb_section .et_pb_row > .et_pb_column.edl-hdr-col-user {
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		width: auto !important;
		margin: 0 !important;
		padding: 0 0 0 14px !important;
	}

	/* ⚠️ Логотип у меню Divi — у відсотках від колонки (40% на телефоні). Колонка
	   тепер ділить рядок із кнопкою, і логотип зменшувався — фіксуємо ширину. */
	body:not(.logged-in) .edl-hdr-col-menu .et_pb_menu_inner_container > .et_pb_menu__logo-wrap,
	body:not(.logged-in) .edl-hdr-col-menu .et_pb_menu__logo-slot {
		flex: 0 0 auto;
		width: 120px !important;
		max-width: 45vw !important;
	}

	/* …а гамбургер — по центру між логотипом і кнопкою (Віктор, 17.09.2026).
	   Колонка на flex, тож модуль меню в ній стискається до вмісту — розтягуємо
	   модуль і його внутрішній контейнер на всю колонку. */
	body:not(.logged-in) .edl-hdr-col-menu > .et_pb_menu {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}

	body:not(.logged-in) .edl-hdr-col-menu .et_pb_menu_inner_container {
		display: flex;
		align-items: center;
		width: 100%;
	}

	body:not(.logged-in) .edl-hdr-col-menu .et_pb_menu__wrap {
		flex: 1 1 auto;
		justify-content: center !important;
	}

	body:not(.logged-in) .edl-user-block--guest {
		display: block !important;
	}

	/* Пропорції — як на EdLine при 360px: кнопка компактна, гамбургер помітніший. */
	body:not(.logged-in) .edl-user-block--guest .edl-login {
		min-height: 34px;
		padding: 0 16px;
		font-size: 13px;
		box-shadow: 0 3px 10px rgba(37, 99, 235, 0.18);
	}

	/* Пункт «Увійти» в гамбургері зайвий, коли кнопка вже в хедері. Через `:has` —
	   на сторінках без нашої колонки в хедері (окремі лендінги) пункт лишається. */
	body:not(.logged-in):has(.edl-hdr-col-user .edl-user-block--guest) .edl-mobile-login {
		display: none !important;
	}
}