/* Pixelated Orange – Wholesale: registration form */

.po-ws-register-wrap {
	max-width: 640px;
}

/* =========================================================
 * These forms render using the same .po-login-* markup/classes as the
 * site's separate "Wholesale Login" popup (pixelated-orange-login
 * plugin), whose CSS loads globally and is what actually styles labels,
 * inputs, buttons and tabs (colours, fonts, borders, required-field
 * state) across all three surfaces. Pixelated Orange - Login is a hard
 * dependency for these two forms - see the admin notice in settings.php.
 * Only structural/layout rules with no Login equivalent live here.
 * ========================================================= */

.po-ws-register-intro {
	margin-bottom: 20px;
}

/* Flex layout — register-row / register-row-half / register-row-full,
   matching the convention used on your other sites. Utility classes are
   scoped under .po-ws-register-wrap so they don't leak into the rest of
   the theme. */

.po-ws-register-wrap .flex {
	display: flex;
	flex-wrap: wrap;
}

.po-ws-register-wrap .gap20 { gap: 20px; }
.po-ws-register-wrap .full  { width: 100%; }
.po-ws-register-wrap .mt20  { margin-top: 20px; }
.po-ws-register-wrap .mb0   { margin-bottom: 0; }
.po-ws-register-wrap .relative { position: relative; }

.po-ws-register-wrap .register-row {
	flex: 1 1 100%;
	max-width: 100%;
}

.po-ws-register-wrap .register-row-half {
	flex: 1 1 calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.po-ws-register-wrap .register-row-full {
	flex: 1 1 100%;
	max-width: 100%;
}

.po-ws-register-wrap .woocommerce-form-row,
.po-ws-register-wrap .form-row {
	margin: 0;
}

@media ( max-width: 480px ) {
	.po-ws-register-wrap .register-row-half {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.po-ws-password-wrap {
	position: relative;
	display: block;
}

.po-ws-password-wrap input[type="password"],
.po-ws-password-wrap input[type="text"] {
	width: 100%;
	padding-right: 40px;
	box-sizing: border-box;
}

.po-ws-toggle-password {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: #666;
	line-height: 0;
}

.po-ws-toggle-password:hover {
	color: #222;
}

/* Strength meter */

.po-ws-strength-meter {
	display: block;
	margin-top: 6px;
}

.po-ws-strength-bar {
	display: block;
	height: 6px;
	background: #eee;
	border-radius: 3px;
	overflow: hidden;
}

.po-ws-strength-fill {
	display: block;
	height: 100%;
	width: 0;
	background: #ccc;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.po-ws-strength-text {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.85rem;
}

.po-ws-strength-0 .po-ws-strength-fill,
.po-ws-strength-2 .po-ws-strength-fill { background: #d9534f; }
.po-ws-strength-0 .po-ws-strength-text,
.po-ws-strength-2 .po-ws-strength-text { color: #d9534f; }

.po-ws-strength-3 .po-ws-strength-fill { background: #f0ad4e; }
.po-ws-strength-3 .po-ws-strength-text { color: #b8790a; }

.po-ws-strength-4 .po-ws-strength-fill { background: #9ac04c; }
.po-ws-strength-4 .po-ws-strength-text { color: #6e8f2e; }

.po-ws-strength-5 .po-ws-strength-fill { background: #4caf50; }
.po-ws-strength-5 .po-ws-strength-text { color: #357a38; }

/* Match message */

.po-ws-match-message {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
}

.po-ws-match-yes { color: #357a38; }
.po-ws-match-no  { color: #d9534f; }

/* =========================================================
 * LOGIN FORM — shares .po-ws-register-fields/.register-row layout
 * and .woocommerce-Input/.po-ws-password-wrap styling with the
 * registration form above, so both panels of [po_ws_register_login]
 * look identical. Only the bits unique to login are styled here.
 * ========================================================= */

.po-ws-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.po-ws-remember-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	cursor: pointer;
}

.po-ws-lost-password {
	font-size: 0.9rem;
}

/* =========================================================
 * TABS — [po_ws_register_login]
 * ========================================================= */

/* All tab colours/fonts/borders come from Pixelated Orange - Login's own
 * .po-login-tabs / .po-login-tab / .po-login-tab.active CSS (injected
 * inline from its own Appearance settings) - the markup here carries
 * those classes directly (see register-login.php), so nothing further
 * is needed except the show/hide toggle for panels, which Login's own
 * CSS also already provides via .po-login-panel / .po-login-panel.active.
 * Kept here only in case the "is-active" class variant is ever used
 * without "active" alongside it. */
.po-ws-register-login-wrap .po-ws-tab-panel.is-active {
	display: block;
}