/**
 * Prihlásenie, registrácia a zabudnuté heslo v sekcii Môj účet.
 *
 * Načíta sa len pre neprihláseného návštevníka (trieda .tlpb-account-guest na
 * <body>). Uvítací panel s maskotom vypisuje class-tulipobox-account-login.php
 * okolo formulára WooCommerce:
 *
 *   .tlpb-login
 *     .tlpb-login__intro   – nadpis, úvod, výhody, maskot
 *     .tlpb-login__main    – formulár WooCommerce a poznámka pod ním
 *
 * Na počítači je to jedna veľká karta (panel vľavo, formulár vpravo). Na mobile
 * sa panel rozpustí (display: contents) a poradie je: maskot s nadpisom,
 * formulár, výhody – formulár tak ostane hore na obrazovke.
 *
 * Stránka účtu má aj triedu pokladne (.tlpb-checkout-design), takže na polia
 * by inak padli menovky vnútri polí z checkout.css. Tie potrebujú skript
 * pokladne, ktorý tu nebeží – pri hesle vyplnenom prehliadačom by menovka
 * ležala cez bodky. Preto sú menovky nad poľom, ako vo zvyšku účtu.
 *
 * @package TulipoBox\MyAccount
 */

.tlpb-account-guest {
	--tlpb-login-form-width: 28rem;  /* jeden formulár – pohodlná dĺžka riadku */
	--tlpb-login-width: 60rem;       /* karta s panelom a formulárom */
	--tlpb-login-pw-btn: 44px;       /* dotykový cieľ tlačidla „zobraziť heslo“ */
	--tlpb-login-mascot: clamp( 11rem, 20vw, 15rem ); /* šírka maskota v paneli */
	--tlpb-login-mascot-ratio: 0.74; /* výška / šírka maskota (306 × 227) */
	--tlpb-login-mascot-sm: 9rem;    /* maskot nad nadpisom na mobile */
	--tlpb-login-check: 1.5rem;      /* krúžok s fajkou pri výhodách */
}

/* --- Nadpis stránky ----------------------------------------------------- */

/* Panel má vlastný nadpis (h1), „Môj účet“ z témy by bol druhý nad ním. */
body.tlpb-account-guest:has( .tlpb-login ) .page-header {
	display: none;
}

/* --- Šírka obsahu ------------------------------------------------------- */

body.tlpb-account-guest .woocommerce {
	max-width: var( --tlpb-login-form-width );
}

body.tlpb-account-guest .woocommerce:has( .tlpb-login ) {
	max-width: var( --tlpb-login-width );
	margin-inline: auto;
}

/* --- Uvítací panel: mobil ----------------------------------------------- */

.tlpb-login {
	display: flex;
	flex-direction: column;
	gap: var( --tlpb-space-5 );
	margin: 0; /* odstup od hlavičky a päty dáva main.site-main v my-account.css */
}

/* Panel sa na mobile rozpustí, jeho časti radíme samostatne. */
.tlpb-login__intro {
	display: contents;
}

.tlpb-login__mascot {
	order: 0;
	display: block;
	width: var( --tlpb-login-mascot-sm );
	height: auto;
	margin: 0 auto calc( -1 * var( --tlpb-space-4 ) );
}

.tlpb-login__head {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tlpb-login__main {
	order: 2;
	min-width: 0;
}

.tlpb-login__perks {
	order: 3;
}

.tlpb-login__eyebrow {
	margin: 0 0 var( --tlpb-space-1 );
	color: var( --tlpb-plum );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.tlpb-account-guest .tlpb-login__title {
	margin: 0 0 var( --tlpb-space-2 );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-h1 );
	font-weight: 800;
	line-height: 1.15;
}

.tlpb-login__lead {
	max-width: 26rem;
	margin: 0;
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-body );
	line-height: 1.6;
}

/* Výhody: na mobile marhuľová karta pod formulárom (ink na apricot 5,7:1). */
.tlpb-login__perks {
	display: grid;
	gap: var( --tlpb-space-3 );
	margin: 0;
	padding: var( --tlpb-space-5 );
	border-radius: var( --tlpb-radius-lg );
	background: var( --tlpb-apricot );
	list-style: none;
}

.tlpb-login__perks li {
	position: relative;
	margin: 0;
	padding-left: calc( var( --tlpb-login-check ) + var( --tlpb-space-3 ) );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-body );
	line-height: 1.5;
	list-style: none;
}

/* Fajka v plum krúžku: krúžok je ::before, fajka ::after kreslená maskou,
   takže obe farby idú z tokenov. */
.tlpb-login__perks li::before,
.tlpb-login__perks li::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var( --tlpb-login-check );
	height: var( --tlpb-login-check );
}

.tlpb-login__perks li::before {
	border-radius: 50%;
	background: var( --tlpb-plum );
}

.tlpb-login__perks li::after {
	background: var( --tlpb-on-accent );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* --- Uvítací panel: počítač --------------------------------------------- */

@media screen and ( min-width: 900px ) {
	.tlpb-login {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: 0;
		overflow: hidden;
		border: 1px solid var( --tlpb-line );
		border-radius: var( --tlpb-radius-lg );
		background: var( --tlpb-panel );
		box-shadow: var( --tlpb-shadow-card );
	}

	/*
	 * Panel v plných farbách identity, ako ich používa značka na plochách
	 * s nadpisom: marhuľový podklad (ink na ňom 5,7:1, plum 5,6:1), slezový
	 * kruh v rohu hore a šalviový kruh, na ktorom leží maskot. Na kruhoch
	 * nesmie ležať text (ink na mauve má len 3,2:1) – horný kruh je preto
	 * malý a spodok panelu je rezervovaný pre maskota.
	 */
	.tlpb-login__intro {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var( --tlpb-space-5 );
		padding: var( --tlpb-space-7 ) var( --tlpb-space-7 ) calc( var( --tlpb-login-mascot ) * var( --tlpb-login-mascot-ratio ) + var( --tlpb-space-4 ) + var( --tlpb-space-5 ) );
		overflow: hidden;
		background:
			radial-gradient( circle at 100% 0%, var( --tlpb-mauve ) 0 5rem, transparent 5.05rem ),
			radial-gradient( circle at 88% 100%, var( --tlpb-sage ) 0 9rem, transparent 9.05rem ),
			var( --tlpb-apricot );
	}

	.tlpb-login__head {
		position: relative;
		z-index: 1;
		align-items: flex-start;
		text-align: left;
	}

	.tlpb-login__perks {
		position: relative;
		z-index: 1;
		padding: 0;
		background: none;
	}

	/* Maskot leží v pravom dolnom rohu panelu na marhuľovom kruhu. */
	.tlpb-login__mascot {
		position: absolute;
		right: var( --tlpb-space-5 );
		bottom: var( --tlpb-space-4 );
		width: var( --tlpb-login-mascot );
		margin: 0;
	}

	.tlpb-login__main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var( --tlpb-space-7 );
	}

	/* Formulár v karte rámik nepotrebuje, je ním celá karta. Selektor má
	   .woocommerce navyše, aby prebil základnú kartu formulára nižšie. */
	body.tlpb-account-guest .woocommerce .tlpb-login form.login,
	body.tlpb-account-guest .woocommerce .tlpb-login form.lost_reset_password {
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* --- Registrácia vedľa prihlásenia (ak je zapnutá) ---------------------- */

body.tlpb-account-guest #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --tlpb-space-5 );
}

@media screen and ( min-width: 768px ) {
	body.tlpb-account-guest #customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

/* Čistiace prvky a plávanie stĺpcov WooCommerce mriežke prekážajú. */
body.tlpb-account-guest #customer_login::before,
body.tlpb-account-guest #customer_login::after {
	display: none;
}

body.tlpb-account-guest #customer_login > .u-column1,
body.tlpb-account-guest #customer_login > .u-column2 {
	float: none;
	width: auto;
	margin: 0;
}

/* Panel a dva formuláre sa vedľa seba nezmestia: panel ide nad ne, bez maskota. */
@media screen and ( min-width: 900px ) {
	body.tlpb-account-guest .tlpb-login:has( #customer_login ) {
		grid-template-columns: 1fr;
	}

	body.tlpb-account-guest .tlpb-login:has( #customer_login ) .tlpb-login__intro {
		padding-bottom: var( --tlpb-space-7 );
	}

	body.tlpb-account-guest .tlpb-login:has( #customer_login ) .tlpb-login__mascot {
		display: none;
	}
}

/* --- Nadpis formulára --------------------------------------------------- */

body.tlpb-account-guest .woocommerce h2 {
	margin: 0 0 var( --tlpb-space-5 );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-h2 );
	font-weight: 700;
	line-height: 1.25;
}

/* --- Karta formulára ---------------------------------------------------- */

body.tlpb-account-guest .woocommerce form.login,
body.tlpb-account-guest .woocommerce form.register,
body.tlpb-account-guest .woocommerce form.lost_reset_password {
	margin: 0;
	padding: var( --tlpb-space-6 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-lg );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
}

@media screen and ( max-width: 479px ) {
	body.tlpb-account-guest .woocommerce form.login,
	body.tlpb-account-guest .woocommerce form.register,
	body.tlpb-account-guest .woocommerce form.lost_reset_password {
		padding: var( --tlpb-space-5 );
	}
}

/* Úvodný text zabudnutého hesla a poznámky pod registráciou. */
body.tlpb-account-guest .woocommerce form > p:not( .form-row ),
body.tlpb-account-guest .woocommerce .woocommerce-privacy-policy-text p {
	margin: 0 0 var( --tlpb-space-4 );
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
	line-height: 1.6;
}

body.tlpb-account-guest .woocommerce .woocommerce-privacy-policy-text a {
	color: var( --tlpb-plum );
	text-underline-offset: 3px;
}

/* --- Polia -------------------------------------------------------------- */

/* Zabudnuté a nové heslo dáva polia do polovíc – tu sú na celý riadok. */
body.tlpb-account-guest .woocommerce form .form-row {
	float: none;
	width: 100%;
	margin: 0 0 var( --tlpb-space-4 );
	padding: 0;
}

body.tlpb-account-guest .woocommerce form .clear {
	display: none;
}

/*
 * Zrušenie menoviek vnútri polí z checkout.css. Tamto pravidlo má dlhý
 * reťazec :not() a pri písaní !important – zdvojená trieda a !important tu
 * sú zámerne, aby menovka ostala nad poľom aj pri zaostrení.
 */
body.tlpb-account-guest .woocommerce form .form-row.form-row:not( .tlpb-consent ):not( .tlpb-company-toggle ):not( .create-account ) {
	position: static;
}

body.tlpb-account-guest .woocommerce form .form-row.form-row:not( .tlpb-consent ):not( .tlpb-company-toggle ):not( .create-account ) > label {
	position: static;
	top: auto !important;
	left: auto;
	display: block;
	max-width: none;
	margin: 0 0 var( --tlpb-space-1 );
	overflow: visible;
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 600;
	line-height: 1.4;
	text-overflow: clip;
	white-space: normal;
	pointer-events: auto;
	transform: none !important;
	transition: none;
}

body.tlpb-account-guest .woocommerce form .form-row .required {
	color: var( --tlpb-plum );
	text-decoration: none;
}

body.tlpb-account-guest .woocommerce form .form-row input.input-text {
	box-sizing: border-box;
	width: 100%;
	height: var( --tlpb-control-h );
	min-height: 0;
	padding: 0 var( --tlpb-space-4 );
	border: 1px solid var( --tlpb-field-line );
	border-radius: var( --tlpb-radius-sm );
	background: var( --tlpb-panel );
	color: var( --tlpb-ink );
	font: inherit;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.tlpb-account-guest .woocommerce form .form-row input.input-text:focus {
	border-color: var( --tlpb-plum );
	box-shadow: var( --tlpb-focus-ring );
	outline: none;
}

body.tlpb-account-guest .woocommerce form .form-row input.input-text:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

body.tlpb-account-guest .woocommerce form .woocommerce-invalid input.input-text {
	border-color: var( --tlpb-danger );
}

body.tlpb-account-guest .woocommerce form .woocommerce-invalid > label {
	color: var( --tlpb-danger ) !important;
}

/* --- Zobraziť heslo ----------------------------------------------------- */

body.tlpb-account-guest .woocommerce form .password-input {
	position: relative;
	display: block;
}

body.tlpb-account-guest .woocommerce form .password-input input.input-text {
	padding-right: calc( var( --tlpb-login-pw-btn ) + var( --tlpb-space-1 ) );
}

/* Ikona oka je pozadie tlačidla od WooCommerce, meníme len plochu a pozíciu. */
body.tlpb-account-guest .woocommerce form .show-password-input {
	top: 50%;
	right: var( --tlpb-space-1 );
	width: var( --tlpb-login-pw-btn );
	height: var( --tlpb-login-pw-btn );
	padding: 0;
	border: 0;
	border-radius: var( --tlpb-radius-sm );
	background-color: transparent;
	transform: translateY( -50% );
}

body.tlpb-account-guest .woocommerce form .show-password-input:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 0;
}

/* --- Zapamätať si ma a tlačidlo ----------------------------------------- */

/* Riadok s tlačidlom (posledný .form-row) – zaškrtávacie pole nad tlačidlom. */
body.tlpb-account-guest .woocommerce form.login .form-row:has( .woocommerce-form-login__submit ),
body.tlpb-account-guest .woocommerce form .form-row:has( > .button:only-of-type ) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var( --tlpb-space-4 );
	margin-bottom: 0;
}

body.tlpb-account-guest .woocommerce form .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center;
	gap: var( --tlpb-space-2 );
	align-self: flex-start;
	min-height: var( --tlpb-acc-control-h, 44px );
	margin: 0 !important;
	font-weight: 400 !important;
	cursor: pointer;
}

body.tlpb-account-guest .woocommerce form .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var( --tlpb-plum );
	cursor: pointer;
}

body.tlpb-account-guest .woocommerce form .woocommerce-form-login__rememberme span {
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-body );
}

body.tlpb-account-guest .woocommerce form button.button {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var( --tlpb-control-h );
	margin: 0;
	padding: 0 var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-plum );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

/* Rovnaký hover ako ostatné tlačidlá v účte. */
body.tlpb-account-guest .woocommerce form button.button:hover {
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
	filter: brightness( 1.1 );
}

body.tlpb-account-guest .woocommerce form button.button:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* --- Odkazy pod formulárom ---------------------------------------------- */

body.tlpb-account-guest .woocommerce form .lost_password {
	margin: var( --tlpb-space-4 ) 0 0;
	text-align: center;
}

/* „Ešte nemáte účet?“ a „Späť na prihlásenie“ – v karte oddelené čiarou. */
.tlpb-login__note {
	margin: var( --tlpb-space-4 ) 0 0;
	color: var( --tlpb-ink-muted );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-sm );
	line-height: 1.6;
	text-align: center;
}

@media screen and ( min-width: 900px ) {
	.tlpb-login__note {
		margin-top: var( --tlpb-space-5 );
		padding-top: var( --tlpb-space-5 );
		border-top: 1px solid var( --tlpb-line );
	}
}

body.tlpb-account-guest .woocommerce form .lost_password a,
body.tlpb-account-guest .tlpb-login__note a {
	color: var( --tlpb-plum );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

body.tlpb-account-guest .woocommerce form .lost_password a:focus-visible,
body.tlpb-account-guest .tlpb-login__note a:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* --- Pohyb -------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	body.tlpb-account-guest .woocommerce form .form-row input.input-text,
	body.tlpb-account-guest .woocommerce form button.button {
		transition: none;
	}
}