/**
 * Barex — login / registration page (P3).
 *
 * Loaded by inc/front/account/login.php on the logged-out account page only,
 * and every rule is scoped under body.barex-login so nothing here can reach the
 * logged-in account screens, the checkout, or the lost-password form.
 */

/* --------------------------------------------------------------------------
 * The password reveal
 *
 * Scape draws this with `font-family: WooCommerce; content: "\e010"`, an icon
 * font modern WooCommerce dropped for an SVG — and woocommerce-general.css,
 * which would have defined it, is not enqueued on this site either. The
 * Additional CSS written to patch it asks for `font-family: "inherit"` (quoted,
 * so it looks for a font actually named "inherit") and `content: "👁"` (an
 * emoji, with no emoji font in the stack). Both produce the same missing-glyph
 * box, which is what the page shows today.
 *
 * Drawn as a mask instead of a background image so the eye takes `color` and
 * can darken on hover and when active — a background-image would be a fixed
 * colour and could not respond to state.
 * ---------------------------------------------------------------------------- */

/* Specificity note: the theme's rule is `.woocommerce form .show-password-input`
 * (0,2,1) and sets background-color:transparent and its own colour, which beat
 * a plain `.barex-login .show-password-input` (0,2,0) — the mask was applying
 * while the paint behind it was not, so the control rendered as nothing at all.
 * Matching its shape and adding one class puts this above it without
 * !important. Its `margin-top: 1.125em` is zeroed too: that offset exists to
 * clear a label this layout does not have, and it pushed the eye off centre. */
body.barex-login .woocommerce form .show-password-input,
body.barex-login .woocommerce-page form .show-password-input {
	position: absolute;
	margin-top: 0;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	cursor: pointer;
	color: #9a9a9a;
	background-color: currentColor;
	transition: color .18s ease;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;

	/* eye */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6.5 5.2 12 5.2 21.6 12 21.6 12 17.5 18.8 12 18.8 2.4 12 2.4 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6.5 5.2 12 5.2 21.6 12 21.6 12 17.5 18.8 12 18.8 2.4 12 2.4 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

/* WooCommerce toggles this class on the same element when the password is
 * visible, so the icon can say what the next click will do. */
body.barex-login .woocommerce form .show-password-input.display-password,
body.barex-login .woocommerce-page form .show-password-input.display-password {
	color: #101010;

	/* eye, struck through */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6.5 5.2 12 5.2 21.6 12 21.6 12 17.5 18.8 12 18.8 2.4 12 2.4 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6.5 5.2 12 5.2 21.6 12 21.6 12 17.5 18.8 12 18.8 2.4 12 2.4 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
}

@media (hover: hover) {
	body.barex-login .woocommerce form .show-password-input:hover,
	body.barex-login .woocommerce-page form .show-password-input:hover { color: #101010; }
}

/* Kill the broken glyph at its source, whichever rule is drawing it. */
body.barex-login .woocommerce form .show-password-input::before,
body.barex-login .woocommerce form .show-password-input::after,
body.barex-login .woocommerce-page form .show-password-input::before,
body.barex-login .woocommerce-page form .show-password-input::after {
	content: none !important;
	display: none !important;
}

/* The reveal must be positioned against the INPUT, not the row.
 *
 * WooCommerce's script wraps the field in .password-input for exactly this, but
 * the rule that makes it a positioning context lives in woocommerce-general.css
 * — which this site never enqueues. Without it the icon resolved against
 * .woocommerce-form-row, whose height includes the label, and sat 14px above
 * the field's centre. */
.barex-login .password-input {
	position: relative;
	display: block;
}

/* Room for the icon, so a long password never runs underneath it. */
.barex-login input[type="password"] {
	padding-right: 44px;
}

/* --------------------------------------------------------------------------
 * Required marks
 *
 * rgb(255,51,102) — a hot pink, and the only colour of its kind on the site.
 * The asterisk is a hint, not an alarm; the screen-reader text beside it is
 * what actually communicates "required".
 * ---------------------------------------------------------------------------- */

.barex-login .required {
	color: #9a9a9a;
	text-decoration: none;
	border: 0;
}

/* --------------------------------------------------------------------------
 * Tabs — phones only
 *
 * From 900px up they are hidden and both panels show side by side, exactly as
 * the page already did. One DOM either way.
 * ---------------------------------------------------------------------------- */

.barex-login .barex-login-tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 18px;
	padding: 4px;
	border: 1px solid #ececea;
	border-radius: 999px;
	background: #fafaf9;
}

.barex-login .barex-login-tab {
	flex: 1 1 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #6f6f6f;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.barex-login .barex-login-tab[aria-selected="true"] {
	background: #101010;
	color: #fff;
}

.barex-login .barex-login-tab:focus-visible {
	outline: 2px solid #101010;
	outline-offset: 2px;
}

/* Direction C, chosen 2026-08-17: ONE CARD AT EVERY WIDTH.
 *
 * The page previously showed both forms side by side on desktop and tabs only
 * on phones, which meant the thing you tested on a phone was not the thing a
 * desktop visitor saw. Now there is a single centred card and one form at a
 * time everywhere — same control, same code path, one behaviour to reason
 * about.
 *
 * Only the selected panel is in the page: `hidden`, not merely invisible, so a
 * keyboard and a screen reader skip the other form's fields entirely rather
 * than tabbing into something nobody can see. With JavaScript off nothing sets
 * `hidden` at all, so both forms render stacked and remain fully usable — the
 * tabs are an enhancement, never a requirement.
 */
.barex-login .barex-login-panel[hidden] {
	display: none;
}

/* The theme floats these columns to 50% at desktop widths; inside a single
 * card there is only ever one, so the float and the width both go. */
.barex-login .barex-login-wrap .barex-login-panel,
.barex-login .barex-login-wrap .wtbx-col-md-6,
.barex-login .barex-login-wrap .wtbx-col-md-12 {
	width: 100%;
	float: none;
	padding: 0;
}

/* The card itself — narrow enough that the eye does not travel, wide enough
 * that the B2B account-type select is not cramped. */
.barex-login .barex-login-wrap {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	float: none;
}

.barex-login .barex-login-wrap > .wtbx-col-md-12:first-child {
	margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
 * Spacing and type — the page reads as one thing, not two boxes
 * ---------------------------------------------------------------------------- */

.barex-login .barex-login-wrap h2 {
	margin: 0 0 18px;
	font-size: 20px;
	line-height: 1.25;
}

.barex-login .woocommerce-form-row {
	margin-bottom: 14px;
}

.barex-login .barex-login-wrap label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6f6f6f;
}

/* A checkbox label is a phrase the person reads, not a name for a box above an
 * input, so it never takes the uppercase field-label treatment. Stated once for
 * the class WooCommerce puts on all of them, rather than per instance — the
 * registration panel has one too (B2BKing's "Spec. naujienlaiškis
 * profesionalams"), and scoping this to remember-me alone left the two panels
 * showing the same kind of control in two different styles.
 * Typography only: the box/label geometry differs between the two and is left
 * to whatever already lays each of them out. */
.barex-login .barex-login-wrap .woocommerce-form__label-for-checkbox,
.barex-login .barex-login-wrap .woocommerce-form__label-for-checkbox span {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #101010;
}

.barex-login .woocommerce-form-login__rememberme,
.barex-login .woocommerce-form-login__rememberme span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #101010;
}

.barex-login .woocommerce-form-login__rememberme input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #101010;
}

.barex-login .lost_password {
	margin: 0;
	font-size: 12.5px;
}

.barex-login .lost_password a {
	color: #8a8a8a;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	.barex-login .lost_password a:hover { color: #101010; }
}

/* The login row, in reading order: remember-me and "forgot password?" share a
 * line, the button takes the next one at full width.
 *
 * Password reset is the one thing on this page a stuck customer needs, so it
 * sits beside the checkbox at full contrast rather than trailing under the
 * button where it was easy to miss. It is ordered AFTER remember-me on purpose:
 * the eye lands on it on the way to the button. */
.barex-login form.login .form-row.clearfix {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	/* ⚠ column-gap MUST stay 0. WooCommerce's markup puts newlines between the
	 * label, the two hidden nonce inputs and the link, and the browser counts
	 * something ahead of the label in the flex order — bisected live: `order:-1`
	 * on the label and `column-gap:0` both move it to the row's start, while
	 * position, inset, float and padding change nothing. With a column gap the
	 * label was pushed 16px in and looked indented with no cause in its own box
	 * model. Horizontal spacing comes from the link's auto margin instead. */
	row-gap: 10px;
	column-gap: 0;
	margin-top: 4px;
}

.barex-login form.login .form-row.clearfix .button {
	flex: 1 1 100%;
	margin-top: 8px;
	width: 100%;
}

.barex-login .barex-login-wrap .button {
	width: 100%;
}

/* The theme uppercases this link through a broad rule; next to the uppercase
 * field labels it read as a heading rather than a way out. */
.barex-login .lost_password a {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
 * Owner QA — 2026-08-17
 * ---------------------------------------------------------------------------- */

/* "Prisiminti mane" sat indented instead of flush with the field above it.
 * The row is a flex line holding the checkbox label and the reset link, and the
 * theme also floats that link right — `float` is ignored on a flex item, but
 * `space-between` was distributing the leftover space in front of the label
 * rather than between the two. Packed to the start with the link pushed over by
 * an auto margin: the label now begins exactly where the input above it does,
 * whatever the two widths turn out to be. */
.barex-login form.login .form-row.clearfix {
	justify-content: flex-start;
}

/* No auto margin here. An auto margin on BOTH items splits the free space
 * between them, which pushed the label 16px off the start — half the leftover —
 * and looked like an indent with no source in the box model. Only the link
 * pushes; the label just sits at the start. */
.barex-login .woocommerce-form-login__rememberme {
	margin-right: 0;
	padding-left: 25px;   /* the theme draws its checkbox as ::before at left:0 */
}

.barex-login .lost_password {
	float: none;
	margin-left: auto;
	text-align: right;
}

/* --------------------------------------------------------------------------
 * B2BKing's own registration fields
 *
 * Selecting "Profesionalas" reveals B2BKing's custom rows, and one of them is a
 * sentence, not a label: "Kvalifikacijos įrodymai (pridėkite savo kirpėjo
 * diplomą…)". It carries white-space: nowrap, so on a phone it ran ~270px past
 * the edge of the card — measured with the required asterisk at x=610 on a
 * 390px screen.
 *
 * Two fixes, because there were two causes. The nowrap is theirs; the shouted
 * uppercase paragraph was OURS.
 *
 * ⚠ Their rows carry the SAME classes WooCommerce's own do
 * (woocommerce-form-row form-row form-row-wide) and their labels carry NO class,
 * so there is no selector that says "a B2BKing label". Checked, not assumed:
 * .b2bking_registration_field matches 0 elements here — only the outer
 * .b2bking_custom_registration_container (10) exists. Anything scoped to their
 * markup has to hang off that container.
 *
 * So the exception is scoped to what actually differs — the field whose label is
 * a sentence rather than a name, which is the file upload. Everything else keeps
 * the page's own label style, or the form would show two competing label
 * treatments stacked on each other (11px uppercase for El.paštas, 12.5px
 * sentence case for Vardas directly below it).
 *
 * :has() is the right tool and is universally supported now; if it ever is not,
 * the sentence label falls back to uppercase but still WRAPS — the rule above is
 * unconditional, so the overflow bug cannot come back either way.
 * ---------------------------------------------------------------------------- */

.barex-login .barex-login-wrap label {
	white-space: normal;
	overflow-wrap: break-word;
}

.barex-login .barex-login-wrap .form-row:has( input[type="file"] ) label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--barex-login-label, #5E5C57);
}

/* A file input is wider than its column by default; keep it inside the card. */
.barex-login .barex-login-wrap input[type="file"] {
	max-width: 100%;
	font-size: 12px;
}