/**
 * The login screen, to the mock-up's measurements.
 *
 * Scoped under .cl-login throughout, and every rule carries that prefix even
 * where it looks unnecessary: the theme styles elements as
 * `.elementor-kit-426 h1` and `.elementor-kit-426 button` (0,1,1), which beats
 * a single class (0,1,0). Two classes clears it without !important — the same
 * trap the product cards hit.
 */

.cl-login {
	--cl-ink: #061e21;
	--cl-mint: #8fd2db;
	--cl-paper: #ffffff;
	--cl-line: rgba(255, 255, 255, 0.16);
	--cl-muted: rgba(255, 255, 255, 0.7);
	--cl-faint: rgba(255, 255, 255, 0.45);
	--cl-wash: rgba(255, 255, 255, 0.02);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	background: var(--cl-ink);
	color: var(--cl-paper);
	/* 80/60 is the mock-up's own Body padding. No allowance for the site
	   header here, unlike the feed: this page runs on a canvas template with
	   no header or footer at all, the way the Labs login does. */
	padding: 80px 60px;
	min-height: 100vh;
	box-sizing: border-box;

	/**
	 * FULL BLEED, the simple way. The page runs on Elementor's Canvas
	 * template, which has no header, no footer and no content container — so
	 * 100% already is the whole window.
	 *
	 * The first attempt used the usual `width: 100vw` + negative-margin trick
	 * for breaking out of a container. It is the right tool when there IS a
	 * container, but here it only added a horizontal scrollbar: 100vw counts
	 * the vertical scrollbar's width, so the box came out wider than the space
	 * it had.
	 */
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

/* Top-left, above the panel, as it is on Labs. */
.cl-login .cl-login__back {
	position: absolute;
	top: 40px;
	left: 60px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Same as every other link on the page: mint, 14/22, white on hover.
	   It was muted white at 15px, which made three links look like three
	   different kinds of thing. */
	color: var(--cl-mint);
	font-size: 14px;
	line-height: 22px;
	text-decoration: none;
}

/* Flags top-right, level with the back link — the header's place for them. */
.cl-login .cl-login__languages {
	position: absolute;
	top: 39px;
	right: 60px;
	line-height: 0;
}

.cl-login .cl-login__languages a,
.cl-login .cl-login__languages a:hover {
	display: inline-block;
	margin-left: 8px;
	border: 0;
	background: transparent;
	transition: opacity 0.2s ease;
}

.cl-login .cl-login__languages a:hover {
	opacity: 0.8;
}

.cl-login .cl-login__languages img {
	display: block;
	width: 24px;
	height: auto;
	border: 0;
	border-radius: 2px;
}

.cl-login .cl-login__back svg {
	flex: 0 0 auto;
}

.cl-login *,
.cl-login *::before,
.cl-login *::after {
	box-sizing: border-box;
}

/* Panel: 480 wide, 40 all round, 16 radius, wash fill, hairline border. */
.cl-login .cl-login__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 480px;
	max-width: 100%;
	padding: 40px;
	border: 1px solid var(--cl-line);
	border-radius: 16px;
	background: var(--cl-wash);
}

.cl-login .cl-login__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

/* Label/13 Caps — 13/18 with the mock-up's 8% tracking. */
.cl-login .cl-login__eyebrow {
	margin: 0;
	color: var(--cl-mint);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Display/38 */
.cl-login .cl-login__title {
	margin: 0;
	color: var(--cl-paper);
	font-size: 38px;
	line-height: 50px;
	font-weight: 400;
}

/* Body/15 */
.cl-login .cl-login__intro {
	margin: 0;
	color: var(--cl-muted);
	font-size: 15px;
	line-height: 24px;
}

.cl-login .cl-login__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.cl-login .cl-login__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cl-login .cl-login__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

/* Body/14 */
.cl-login .cl-login__label {
	color: var(--cl-muted);
	font-size: 14px;
	line-height: 22px;
}

/* Input: 48 tall, 16 each side, 8 radius, wash fill, hairline border. */
.cl-login .cl-login__box {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--cl-line);
	border-radius: 8px;
	background: var(--cl-wash);
}

/**
 * Focus is mint, matching the filters on the products page — one design
 * language across the site rather than a different ring per screen.
 *
 * It was plain white, inherited from the stock login form's own default
 * (`input_focus_border_color: #ffffff`). On this dark panel that reads as a
 * hard outline rather than an accent, and it is the one colour the design
 * uses for nothing else.
 *
 * NOTE: Chrome draws its OWN heavy ring around a field while its password
 * manager dropdown is open. That is a browser affordance on top of whatever
 * is here, it cannot be styled away, and it disappears as soon as the
 * dropdown is dismissed — so a thick white rectangle in a screenshot with the
 * password list showing is not this rule.
 */
.cl-login .cl-login__box:focus-within {
	border-color: var(--cl-mint);
	box-shadow: 0 0 0 3px rgba(143, 210, 219, 0.25);
}

/* Field/16 */
.cl-login .cl-login__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--cl-paper);
	/* An input does not inherit the page font on its own. */
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

/* The theme's reset gives every focused input a 4px white box-shadow ring
   (`input:focus-visible`). Here the ring belongs to the whole box, not the
   bare input inside it, so that one drew a hard white rectangle in the middle
   of the field, stopping short of "Pokaż". Switched off on the input only. */
.cl-login .cl-login__input:focus,
.cl-login .cl-login__input:focus-visible {
	outline: none;
	box-shadow: none;
	border: 0;
}

.cl-login .cl-login__input::placeholder {
	color: var(--cl-faint);
}

/* The mock-up's trailing "Pokaż" — Body/14 in the accent. */
.cl-login .cl-login__reveal {
	flex: 0 0 auto;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--cl-mint);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	line-height: 22px;
}

.cl-login .cl-login__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cl-login .cl-login__remember {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cl-muted);
	font-size: 14px;
	line-height: 22px;
	cursor: pointer;
}

/* 18px box, 4 radius — drawn rather than the browser's own, which is a
   different size and colour on every platform. */
.cl-login .cl-login__remember input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--cl-line);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
}

.cl-login .cl-login__remember input:checked {
	border-color: var(--cl-mint);
	background: var(--cl-mint);
}

.cl-login .cl-login__remember input:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--cl-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cl-login .cl-login__forgot,
.cl-login .cl-login__foot a {
	color: var(--cl-mint);
	font-size: 14px;
	line-height: 22px;
	text-decoration: none;
}

/* Button: 48 tall, 8 radius, accent fill, Button/14 on the dark. */
.cl-login .cl-login__submit {
	height: 48px;
	width: 100%;
	border: 0;
	border-radius: 8px;
	background: var(--cl-mint);
	color: var(--cl-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

/* The buttons get the same ring. A keyboard user tabs Username, Password,
   Pokaż, Zapamiętaj mnie, Nie pamiętasz hasła?, Zaloguj się — every one of
   those stops needs to be visible, and three of them had nothing. */
.cl-login .cl-login__submit:focus-visible,
.cl-login .cl-login__reveal:focus-visible,
.cl-login .cl-login__back:focus-visible,
.cl-login .cl-login__forgot:focus-visible,
.cl-login .cl-login__foot a:focus-visible {
	outline: 2px solid var(--cl-mint);
	outline-offset: 3px;
	border-radius: 4px;
}

.cl-login .cl-login__remember input:focus-visible {
	outline: 2px solid var(--cl-mint);
	outline-offset: 2px;
	/* Same reset ring as on the fields — it would sit outside the mint one. */
	box-shadow: none;
}

.cl-login .cl-login__rule {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--cl-line);
}

.cl-login .cl-login__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	color: var(--cl-muted);
	font-size: 14px;
	line-height: 22px;
}

.cl-login .cl-login__error {
	margin: 0;
	padding: 12px 16px;
	border-radius: 8px;
	background: rgba(255, 107, 107, 0.12);
	color: #ff6b6b;
	font-size: 14px;
	line-height: 22px;
}

.cl-login .cl-login__notice {
	color: var(--cl-faint);
}

/* ------------------------------------------------------------------ */
/* Hover — one language for the whole form                             */
/* ------------------------------------------------------------------ */

/**
 * Every hover here is pinned on purpose. The theme and the Elementor kit both
 * style `a:hover` and `button:hover`, and they were winning:
 *
 * - the kit's `a:hover` sets its own font size and line height, so every link
 *   jumped as the pointer crossed it, and its dark ink colour turned the mint
 *   links almost invisible on this panel;
 * - `button:hover` gave "Pokaż" a pale blue box (and the theme reset a pink
 *   one underneath);
 * - speeds were mixed — some instant, inputs and buttons 0.3s.
 *
 * So the rule is simple: text brightens to white, the button takes the site's
 * own button hover (mint at 80%, as "Umów wizytę" in the header does), and
 * fields and the checkbox lift their hairline. One 0.2s ease for all of it,
 * and nothing else is allowed to change.
 */
.cl-login .cl-login__back,
.cl-login .cl-login__forgot,
.cl-login .cl-login__foot a,
.cl-login .cl-login__reveal,
.cl-login .cl-login__submit,
.cl-login .cl-login__box,
.cl-login .cl-login__input,
.cl-login .cl-login__remember,
.cl-login .cl-login__remember input {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cl-login .cl-login__back:hover,
.cl-login .cl-login__forgot:hover,
.cl-login .cl-login__foot a:hover,
.cl-login .cl-login__reveal:hover {
	color: var(--cl-paper);
	background: transparent;
	border: 0;
	text-decoration: none;
	font-family: inherit;
}

.cl-login .cl-login__back:hover,
.cl-login .cl-login__forgot:hover,
.cl-login .cl-login__foot a:hover,
.cl-login .cl-login__reveal:hover {
	font-size: 14px;
	line-height: 22px;
}

.cl-login .cl-login__submit:hover {
	background: rgba(143, 210, 219, 0.8);
	color: var(--cl-ink);
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

.cl-login .cl-login__box:hover:not(:focus-within),
.cl-login .cl-login__remember:hover input:not(:checked) {
	border-color: rgba(255, 255, 255, 0.32);
}

.cl-login .cl-login__remember:hover {
	color: var(--cl-paper);
}

@media (prefers-reduced-motion: reduce) {

	.cl-login .cl-login__back,
	.cl-login .cl-login__forgot,
	.cl-login .cl-login__foot a,
	.cl-login .cl-login__reveal,
	.cl-login .cl-login__submit,
	.cl-login .cl-login__box,
	.cl-login .cl-login__input,
	.cl-login .cl-login__remember input {
		transition: none;
	}
}

@media (max-width: 782px) {

	.cl-login {
		padding: 88px 16px 48px;
		justify-content: flex-start;
	}

	.cl-login .cl-login__back {
		top: 24px;
		left: 16px;
		/* Leave room for the flags on the right: 102px of flags, 16px
		   gutters and a 16px gap. Ukrainian ("Повернутися на головну
		   сторінку") ran 3px into them at 375 wide; it now wraps instead. */
		max-width: calc(100% - 150px);
		align-items: flex-start;
	}

	.cl-login .cl-login__back svg {
		margin-top: 3px;
	}

	.cl-login .cl-login__languages {
		top: 23px;
		right: 16px;
	}

	.cl-login .cl-login__panel {
		padding: 28px 20px;
		gap: 20px;
	}

	.cl-login .cl-login__title {
		font-size: 30px;
		line-height: 38px;
	}
}