/**
 * Tlačidlo účtu v hlavičke (shortcode [tulipobox_account_button]).
 *
 * Vzhľadom kopíruje tlačidlo košíka z Elementora vedľa neho: tmavá kakaová
 * piluľka (ink), krémový text a ikona, Nunito, rovnaká výška. Selektory
 * začínajú „body a.“ – Elementor farbí všetky odkazy (.elementor-kit-N a)
 * aj ich písmo a inak by prebil farbu aj font.
 *
 * @package TulipoBox\AccountButton
 */

.tlpb-account-btn-wrap,
body a.tlpb-account-btn {
	--tlpb-account-btn-h: 41px;   /* výška tlačidla košíka v Elementore */
	--tlpb-account-menu-w: 15rem; /* šírka menu – „Pribaliť k ďalšiemu boxu“ s rezervou */
}

/* --- Tlačidlo ----------------------------------------------------------- */

body a.tlpb-account-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --tlpb-space-2 );
	box-sizing: border-box;
	min-width: var( --tlpb-account-btn-h );
	height: var( --tlpb-account-btn-h );
	padding: 0 var( --tlpb-space-4 );
	border: 1px solid var( --tlpb-ink );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-ink );
	color: var( --tlpb-on-accent );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

/* Neprihlásený: len ikona, štvorcové tlačidlo. */
body a.tlpb-account-btn--guest {
	width: var( --tlpb-account-btn-h );
	padding: 0;
}

body a.tlpb-account-btn:hover,
body a.tlpb-account-btn:focus,
body a.tlpb-account-btn:visited {
	color: var( --tlpb-on-accent );
	text-decoration: none;
}

body a.tlpb-account-btn:hover,
body .tlpb-account-btn-wrap.is-open a.tlpb-account-btn {
	filter: brightness( 1.15 );
}

body a.tlpb-account-btn:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

.tlpb-account-btn__icon {
	flex: 0 0 auto;
}

/* Dlhé meno skrátiť, nech hlavička nepretečie. */
.tlpb-account-btn__name {
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlpb-account-btn__caret {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

/* --- Menu --------------------------------------------------------------- */

.tlpb-account-btn-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

/*
 * Horné odsadenie menu je neviditeľný mostík – kurzor ním prejde z tlačidla
 * do menu bez toho, aby menu zmizlo. Zatvára sa s oneskorením 0,3 s (Baymard:
 * menu, ktoré zmizne pri každom zakopnutí kurzora, ľudí odrádza).
 */
.tlpb-account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 9995;
	width: var( --tlpb-account-menu-w );
	padding-top: var( --tlpb-space-2 );
	visibility: hidden;
	opacity: 0;
	transform: translateY( -4px );
	transition: opacity 0.15s ease 0.3s, transform 0.15s ease 0.3s, visibility 0s linear 0.45s;
}

.tlpb-account-btn-wrap.is-open .tlpb-account-menu,
.tlpb-account-btn-wrap:focus-within .tlpb-account-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

/* Po Escape zostane tlačidlo zaostrené, ale menu sa skryje. */
.tlpb-account-btn-wrap.is-dismissed .tlpb-account-menu {
	visibility: hidden;
	opacity: 0;
	transition: none;
}

/* Hover len tam, kde naozaj je (myš) – na dotyku menu otvára skript. */
@media ( hover: hover ) {
	.tlpb-account-btn-wrap:hover .tlpb-account-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.tlpb-account-btn-wrap:hover .tlpb-account-btn__caret {
		transform: rotate( 180deg );
	}
}

.tlpb-account-btn-wrap.is-open .tlpb-account-btn__caret,
.tlpb-account-btn-wrap:focus-within .tlpb-account-btn__caret {
	transform: rotate( 180deg );
}

.tlpb-account-menu__panel {
	padding: var( --tlpb-space-2 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
}

/* „Ďalší box: 14. 10.“ – len informácia, nie odkaz. */
.tlpb-account-menu__info {
	margin: 0 0 var( --tlpb-space-1 );
	padding: var( --tlpb-space-2 ) var( --tlpb-space-3 );
	border-bottom: 1px solid var( --tlpb-line );
	color: var( --tlpb-ink-muted );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 600;
	line-height: 1.3;
}

.tlpb-account-menu__info strong {
	color: var( --tlpb-ink );
	font-weight: 800;
}

.tlpb-account-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlpb-account-menu__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body a.tlpb-account-menu__link {
	display: flex;
	align-items: center;
	min-height: 44px; /* dotykový cieľ */
	padding: 0 var( --tlpb-space-3 );
	border-radius: var( --tlpb-radius-sm );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

body a.tlpb-account-menu__link:hover,
body a.tlpb-account-menu__link:focus-visible {
	background: var( --tlpb-surface );
	color: var( --tlpb-plum );
	text-decoration: none;
}

body a.tlpb-account-menu__link:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: -2px;
}

/* Odhlásenie je oddelené čiarou a tichšie. */
.tlpb-account-menu__list li.tlpb-account-menu__item--logout {
	margin-top: var( --tlpb-space-1 );
	padding-top: var( --tlpb-space-1 );
	border-top: 1px solid var( --tlpb-line );
}

body a.tlpb-account-menu__link--logout {
	color: var( --tlpb-ink-muted );
	font-weight: 600;
}

/* --- Verzia do mobilného menu (layout="menu") --------------------------- */

/*
 * Riadky na celú šírku menu, nič pod hoverom. Farba textu je ink – menu má
 * svetlý podklad; ak by bolo tmavé, stačí v Elementore nastaviť farbu textu
 * widgetu, odkazy ju zdedia cez currentColor.
 */
.tlpb-account-rows {
	--tlpb-account-row-h: 48px; /* dotykový cieľ v menu */

	display: flex;
	flex-direction: column;
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
}

.tlpb-account-rows__name {
	display: flex;
	align-items: center;
	gap: var( --tlpb-space-2 );
	min-height: var( --tlpb-account-row-h );
	margin: 0;
	color: inherit;
	font-size: var( --tlpb-text-lg );
	font-weight: 800;
}

.tlpb-account-rows__info {
	margin: 0;
	padding-bottom: var( --tlpb-space-2 );
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
	font-weight: 600;
}

.tlpb-account-rows__info strong {
	color: inherit;
	font-weight: 800;
}

body a.tlpb-account-rows__link {
	display: flex;
	align-items: center;
	gap: var( --tlpb-space-2 );
	min-height: var( --tlpb-account-row-h );
	border-top: 1px solid var( --tlpb-line );
	color: inherit;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
	font-weight: 700;
	text-decoration: none;
}

/* Prvý riadok (neprihlásený: „Prihlásiť sa“) čiaru nad sebou nepotrebuje. */
body a.tlpb-account-rows__link:first-child {
	border-top: 0;
}

body a.tlpb-account-rows__link:hover,
body a.tlpb-account-rows__link:focus,
body a.tlpb-account-rows__link:visited {
	color: inherit;
	text-decoration: none;
}

body a.tlpb-account-rows__link:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

body a.tlpb-account-rows__link--logout,
body a.tlpb-account-rows__link--logout:hover,
body a.tlpb-account-rows__link--logout:visited {
	color: var( --tlpb-ink-muted );
	font-weight: 600;
}

@media ( prefers-reduced-motion: reduce ) {
	body a.tlpb-account-btn,
	.tlpb-account-btn__caret,
	.tlpb-account-menu {
		transition: none;
	}
}