/**
 * HappyJokersEspana — header variants (header-1 / header-2 / header-3).
 *
 * header-1: menu + app | logo center | help + CTAs + lang
 * header-2: actions left, menu + logo right (mirror).
 * header-3: logo + menu left, actions right.
 */

.header {
	--header-bg: linear-gradient(180deg, #420a3c 0%, #030125 100%);
	--header-yellow: #faff03;
	--header-yellow-hover: #ffff4d;
	--header-text: #ffffff;
	--header-muted: #1a102c;
	--header-btn-text: #030025;
	--header-font: var(--site-font, "Inter", "Open Sans", sans-serif);

	--header-menu-link: var(--header-text);
	--header-menu-link-hover: var(--header-yellow);
	--header-login-bg: transparent;
	--header-login-bg-hover: var(--header-yellow);
	--header-login-border: var(--header-yellow);
	--header-login-border-hover: var(--header-yellow);
	--header-login-text: var(--header-yellow);
	--header-login-text-hover: var(--header-btn-text);
	--header-register-bg: var(--header-yellow);
	--header-register-bg-hover: var(--header-yellow-hover);
	--header-register-border: var(--header-yellow);
	--header-register-border-hover: var(--header-yellow-hover);
	--header-register-text: var(--header-btn-text);
	--header-register-text-hover: var(--header-btn-text);
	--header-lang-bg: var(--header-muted);
	--header-lang-text: var(--header-text);
	--header-lang-text-hover: var(--header-yellow);
	--header-accent: var(--header-yellow);
	--header-accent-hover: var(--header-yellow-hover);

	background: var(--header-bg);
	height: 108px;
	position: relative;
	width: 100%;
	z-index: 1000;
}

.header__top {
	align-items: center;
	display: flex;
	height: 108px;
	justify-content: space-between;
	padding: 22px 20px;
	width: 100%;
}

.header__top.container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1470px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

.header__left,
.header__right,
.header__center {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
}

.header__brand {
	gap: 85px;
	justify-content: flex-start;
}

.header__actions {
	gap: 20px;
}

/* —— header-1: centered logo —— */
.header-1 .header__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.header-1 .header__left {
	gap: 50px;
	justify-self: start;
	min-width: 0;
}

.header-1 .header__center {
	justify-self: center;
}

.header-1 .header__right {
	justify-content: flex-end;
	justify-self: end;
	min-width: 0;
}

.header-1 .header__left .header-ui__app {
	align-items: center;
	border: 3px solid var(--header-accent);
	border-radius: 24px;
	color: var(--header-accent);
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--header-font);
	font-size: 14px;
	font-weight: 700;
	gap: 10px;
	height: 48px;
	line-height: 16.8px;
	padding: 0 16px 0 21px;
	width: 142px;
}

.header-1 .header__left .header-ui__app:hover {
	border-color: var(--header-accent-hover);
	color: var(--header-accent-hover);
}

.header-1 .header__actions .lang-block-wrapper,
.header-1 .header__actions .lang-toggle-block {
	min-width: 142px;
	width: auto;
}

.header-1 .header__actions .lang-toggle-block__item.current-lang {
	padding-right: 18px;
}

.header__top .logo {
	flex: 0 0 auto;
	line-height: 0;
}

.header__top .logo img {
	height: 64px;
	width: 165px;
}

.header-menu-main {
	flex: 0 0 auto;
}

.header-menu-main .menu-top-container {
	overflow: visible;
}

.header-menu-main ul.top {
	display: flex;
	gap: 30px;
}

.header-menu-main ul.top li {
	margin: 0;
	padding: 0;
}

.header-menu-main ul.top a,
.header-menu-main ul.top span {
	align-items: center;
	color: var(--header-menu-link);
	display: inline-flex;
	font-family: var(--header-font);
	font-size: 14px;
	font-weight: 700;
	gap: 6px;
	line-height: 20px;
	white-space: nowrap;
}

.header-menu-main ul.top a:hover,
.header-menu-main ul.top span:hover {
	color: var(--header-menu-link-hover);
}

.header-ui__menu-app-icon {
	display: inline-flex;
	flex-shrink: 0;
	height: 20px;
	line-height: 0;
	width: 20px;
}

.header-ui__menu-app-icon svg {
	display: block;
	height: 20px;
	width: 20px;
}

.header-menu-main .dd-menu {
	flex: 0 0 auto;
	height: 20px;
	position: relative;
	width: 18px;
}

.header-menu-main .dd-menu-btn {
	display: block;
	height: 20px;
	position: relative;
	width: 18px;
}

.header-menu-main .dd-menu-btn::before {
	display: none;
}

.header-menu-main .dd-menu-btn::after {
	color: var(--header-text);
	content: "...";
	font-family: var(--header-font);
	font-size: 20px;
	font-weight: 700;
	left: 0;
	letter-spacing: 0.05em;
	line-height: 20px;
	position: absolute;
	top: -5px;
}

.header-menu-main .dd-menu-list {
	display: none;
}

.header__actions .lang-toggle-block,
.header__actions .header__top_buttons .btn,
.header__actions .header-ui__app {
	border-radius: 24px;
	flex-shrink: 0;
	font-family: var(--header-font);
	font-size: 14px;
	font-weight: 700;
	height: 48px;
	line-height: 16.8px;
	width: 142px;
}

.header__actions .for_langs {
	flex-shrink: 0;
}

.header__actions .lang-block-wrapper {
	width: 142px;
}

.header__actions .lang-toggle-block {
	background: var(--header-lang-bg);
	overflow: hidden;
}

.header__actions .lang-toggle-block__item.current-lang {
	align-items: center;
	color: var(--header-lang-text);
	display: flex;
	gap: 8px;
	height: 48px;
	padding: 0 15px;
	width: 100%;
}

.header__actions .lang-toggle-block__item.current-lang:hover {
	color: var(--header-lang-text-hover);
}

.header-ui__lang-flag {
	border-radius: 50%;
	flex-shrink: 0;
	height: 24px;
	line-height: 0;
	overflow: hidden;
	width: 24px;
}

.header-ui__lang-flag svg {
	border-radius: 50%;
	display: block;
	height: 24px;
	width: 24px;
}

.header-ui__lang-code {
	font-family: var(--header-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 16.8px;
	text-transform: uppercase;
}

.header-ui__lang-chevron {
	display: inline-flex;
	flex-shrink: 0;
	height: 7px;
	line-height: 0;
	margin-left: auto;
	width: 12px;
}

.header-ui__lang-chevron svg {
	display: block;
	height: 7px;
	width: 12px;
}

.header__actions .header__top_buttons {
	display: flex;
	flex-shrink: 0;
	margin: 0;
}

.header__actions .header__top_buttons .btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.header__actions .header__top_buttons .btn.header-reg {
	background: var(--header-register-bg);
	border: 1px solid var(--header-register-border);
	color: var(--header-register-text);
}

.header__actions .header__top_buttons .btn.header-reg:hover {
	background: var(--header-register-bg-hover);
	border-color: var(--header-register-border-hover);
	color: var(--header-register-text-hover);
}

.header__actions .header__top_buttons .btn.header-anm {
	background: var(--header-login-bg);
	border: 1px solid var(--header-login-border);
	color: var(--header-login-text);
}

.header__actions .header__top_buttons .btn.header-anm:hover {
	background: var(--header-login-bg-hover);
	border-color: var(--header-login-border-hover);
	color: var(--header-login-text-hover);
}

.header__actions > .header-ui__help {
	align-items: center;
	color: var(--header-accent);
	display: inline-flex;
	flex-shrink: 0;
	gap: 8px;
	height: 24px;
	max-width: 130px;
}

.header-3 .header__actions > .header-ui__help {
	margin-left: 6px;
}

.header-2 .header__actions > .header-ui__help {
	margin-right: 6px;
}

.header__actions > .header-ui__help:hover {
	color: var(--header-accent-hover);
}

.header-ui__help-icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.header-ui__help-icon svg {
	display: block;
	height: 24px;
	width: 24px;
}

.header-ui__help-text {
	font-family: var(--header-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
}

.header__actions .header-ui__app {
	align-items: center;
	border: 3px solid var(--header-accent);
	color: var(--header-accent);
	display: inline-flex;
	gap: 10px;
	padding: 0 16px 0 21px;
}

.header__actions .header-ui__app:hover {
	border-color: var(--header-accent-hover);
	color: var(--header-accent-hover);
}

.header-ui__app-icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.header-ui__app-icon svg {
	display: block;
	height: 20px;
	width: 14px;
}

.header-ui__app-text {
	font-family: var(--header-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 16.8px;
	max-width: 4.8em;
	white-space: normal;
}

.header__top .mobile_menu_icon {
	display: none;
}

.header-menu-left {
	display: none;
}

/* —— Wide desktop: Figma gap between actions and brand —— */
@media (min-width: 1600px) {
	.header-2 .header__top,
	.header-3 .header__top {
		gap: 107px;
	}
}

/* —— Large tablet / small desktop: drop secondary CTAs, tighten gaps —— */
@media (max-width: 1440px) {
	.header__actions > .header-ui__help--desktop,
	.header__actions > .header-ui__app--desktop,
	.header-1 .header__left > .header-ui__app--desktop {
		display: none;
	}

	.header__top,
	.header__top.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.header__brand {
		gap: 48px;
	}

	.header-1 .header__left {
		gap: 24px;
	}

	.header-menu-main ul.top {
		gap: 20px;
	}

	.header__actions {
		gap: 12px;
	}

	.header-3 .header__actions > .header-ui__help,
	.header-2 .header__actions > .header-ui__help {
		margin-left: 0;
		margin-right: 0;
	}
}

/* —— Tablet: compact desktop bar —— */
@media (max-width: 1280px) {
	.header__brand {
		gap: 28px;
	}

	.header-menu-main ul.top {
		gap: 14px;
	}

	.header__actions .lang-block-wrapper,
	.header__actions .lang-toggle-block {
		width: 120px;
	}

	.header__actions .lang-toggle-block {
		height: 42px;
		line-height: 1;
	}

	.header__actions .lang-toggle-block__item.current-lang {
		height: 42px;
		padding: 0 12px;
	}
}

/* —— Tablet & mobile: logo + CTAs + burger —— */
@media (max-width: 1100px) {
	.header {
		height: 57px;
	}

	.header__top,
	.header__top.container {
		height: 57px;
		max-width: none;
		padding: 13px 12px 13px 13px;
		width: 100%;
	}

	.header__brand {
		flex: 0 0 auto;
		gap: 0;
	}

	.header-1 .header__top {
		display: flex;
		justify-content: space-between;
	}

	.header-1 .header__left {
		display: none;
	}

	.header-1 .header__center {
		flex: 0 0 auto;
	}

	.header-1 .header__right {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.header-menu-main {
		display: none;
	}

	.header__top .logo img {
		height: 31px;
		width: 100px;
	}

	.header__actions {
		flex: 1 1 auto;
		gap: 10px;
		min-width: 0;
	}

	.header-3 .header__actions {
		justify-content: flex-end;
	}

	.header-2 .header__actions {
		justify-content: flex-start;
	}

	.header-1 .header__actions {
		justify-content: flex-end;
	}

	.header__actions .header-ui__langs--desktop,
	.header__actions > .header-ui__help--desktop,
	.header__actions > .header-ui__app--desktop {
		display: none;
	}

	.header__actions .header__top_buttons {
		display: flex;
		gap: 8px;
	}

	.header__actions .header__top_buttons .btn {
		border-radius: 24px;
		box-sizing: border-box;
		font-size: 12px;
		height: auto;
		line-height: 1;
		min-height: 35px;
		padding: 13px 20px 13px 22px;
		width: auto;
	}

	.header__actions .header__top_buttons .btn.header-anm {
		border-width: 1px;
	}

	.header__actions .lang-block-wrapper,
	.header__actions .lang-toggle-block {
		display: none;
	}

	.header__top .mobile_menu_icon.mobile_only_burger {
		align-items: center;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		gap: 3px;
		height: 35px;
		justify-content: center;
		padding: 0;
		width: 20px;
	}

	.header-3 .header__top .mobile_menu_icon.mobile_only_burger {
		margin-left: 4px;
	}

	.header-1 .header__top .mobile_menu_icon.mobile_only_burger {
		margin-left: 4px;
	}

	.header-2 .header__top .mobile_menu_icon.mobile_only_burger {
		margin-right: 4px;
		order: -1;
	}

	.header__top .mobile_menu_icon.mobile_only_burger span {
		background: var(--header-accent);
		border-radius: 1px;
		display: block;
		height: 2px;
		width: 20px;
	}

	.header-menu-left {
		align-items: center;
		background: #030125;
		bottom: 0;
		display: flex;
		flex-direction: column;
		left: 0;
		overflow-y: auto;
		padding: 40px 28px;
		position: fixed;
		right: 0;
		top: 0;
		transform: translateX(100%);
		transition: transform 0.3s ease, visibility 0.3s ease;
		visibility: hidden;
		z-index: 1001;
	}

	.header-menu-left[hidden] {
		display: flex;
	}

	.header.is-menu-open .header-menu-left {
		transform: translateX(0);
		visibility: visible;
	}

	body.admin-bar .header-menu-left {
		top: 32px;
	}

	.header-ui__close {
		align-items: center;
		display: flex;
		height: 40px;
		justify-content: center;
		margin: 0 0 24px auto;
		padding: 0;
		width: 40px;
	}

	.header-ui__close img {
		display: block;
		height: 20px;
		width: 18px;
	}

	.header-top-mobile-menu {
		flex: 1 0 auto;
		padding-top: 24px;
		width: 100%;
	}

	.header-top-mobile-menu ul.top {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

	.header-top-mobile-menu ul.top a,
	.header-top-mobile-menu ul.top span {
		color: #ffffff;
		font-family: var(--header-font);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
	}

	.header-top-mobile-menu .header-ui__menu-app-icon {
		display: none;
	}

	.header-ui__drawer-footer {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: auto;
		padding-top: 40px;
		width: 100%;
	}

	.header-ui__drawer-footer .lang-block-wrapper {
		width: 142px;
	}

	.header-ui__drawer-footer .lang-toggle-block {
		background: var(--header-lang-bg);
		border-radius: 24px;
		height: 48px;
		overflow: hidden;
		width: 142px;
	}

	.header-ui__drawer-footer .lang-toggle-block__item.current-lang {
		align-items: center;
		color: var(--header-lang-text);
		display: flex;
		gap: 8px;
		height: 48px;
		padding: 0 15px;
		width: 100%;
	}

	.header-ui__drawer-footer .header-ui__help {
		align-items: center;
		color: var(--header-accent);
		display: inline-flex;
		gap: 8px;
		justify-content: center;
	}

	.header-ui__drawer-footer .header-ui__help-text {
		color: var(--header-accent);
		font-family: var(--header-font);
		font-size: 14px;
		font-weight: 700;
		line-height: 16.8px;
	}

	.header-ui__drawer-footer .header-ui__app {
		align-items: center;
		border: 1px solid var(--header-accent);
		border-radius: 24px;
		color: var(--header-accent);
		display: inline-flex;
		gap: 8px;
		height: 48px;
		justify-content: center;
		max-width: 220px;
		padding: 0 20px;
		width: 100%;
	}

	.header-ui__drawer-footer .header-ui__app-text {
		color: var(--header-accent);
		font-family: var(--header-font);
		font-size: 14px;
		font-weight: 700;
		line-height: 16.8px;
		max-width: none;
		text-align: left;
		white-space: normal;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .header-menu-left {
		top: 46px;
	}
}

@media (max-width: 440px) {
	.header__actions {
		gap: 6px;
	}

	.header__actions .header__top_buttons {
		gap: 6px;
	}

	.header__actions .header__top_buttons .btn {
		font-size: 11px;
		padding: 10px 12px 10px 14px;
		width: auto;
	}
}