/* =========================================================================
   Login & Registration Form Styling
   ========================================================================= */

/* ---- Layout: two-column container ---- */
#customer_login.u-columns.col2-set {
	display: flex;
	gap: 3rem;
	max-width: 960px;
	margin: 0 auto;
}

#customer_login .u-column1,
#customer_login .u-column2 {
	flex: 1;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 2rem 2.5rem;
}

/* ---- Column headings ---- */
#customer_login h2 {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #2c2d33;
}

/* ---- Shared input styles ---- */
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"],
#customer_login textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 0.925rem;
	background: #fafafa;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#customer_login input[type="text"]:focus,
#customer_login input[type="email"]:focus,
#customer_login input[type="password"]:focus,
#customer_login textarea:focus {
	border-color: #2c2d33;
	box-shadow: 0 0 0 2px rgba(44, 45, 51, 0.1);
	background: #fff;
	outline: none;
}

/* ---- Labels ---- */
#customer_login label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #3b3c3f;
	margin-bottom: 0.35rem;
	display: block;
}

#customer_login .required {
	color: #e74c3c;
	margin-left: 2px;
}

/* ---- Radio buttons: role selector (both login & register) ---- */
#customer_login .customer_retail_input,
#customer_login .role_input {
	display: flex;
	gap: 0;
	margin-bottom: 1.25rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	overflow: hidden;
}

#customer_login .customer_retail_input .radio-input,
#customer_login .role_input .radio-input {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
}

#customer_login .customer_retail_input .radio-input + .radio-input,
#customer_login .role_input .radio-input + .radio-input {
	border-left: 1px solid #d1d5db;
}

/* Hide the native radio */
#customer_login .role_radio,
#customer_login .login_role_radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Hide <br> tags injected by wpautop inside radio containers */
#customer_login .customer_retail_input .radio-input br,
#customer_login .role_input .radio-input br {
	display: none;
}

/* Radio label becomes the toggle button */
#customer_login .customer_retail_input .radio-input label,
#customer_login .role_input .radio-input label {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.6rem 1rem;
	margin: 0;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	color: #6b7280;
	background: #fafafa;
	transition: background 0.2s, color 0.2s;
	user-select: none;
}

#customer_login .customer_retail_input .radio-input label:hover,
#customer_login .role_input .radio-input label:hover {
	background: #f0f0f0;
}

/* Checked state — use :has() to avoid relying on adjacent sibling,
   since wpautop can inject <br> between radio and label */
#customer_login .role_radio:checked + label,
#customer_login .login_role_radio:checked + label,
#customer_login .radio-input:has(.role_radio:checked) label,
#customer_login .radio-input:has(.login_role_radio:checked) label {
	background: #2c2d33;
	color: #fff;
	font-weight: 600;
}

/* ---- Role selector header label ---- */
#customer_login .role_input_fields > label,
#customer_login .login_customer_retail_input > label {
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

/* ---- B2B registration fields ---- */
#customer_login .register_retailer_fields {
	margin-top: 0.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e5e5e5;
	animation: ecb-slide-down 0.3s ease-out;
}

@keyframes ecb-slide-down {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

#customer_login .register_retailer_fields .input-row {
	display: flex;
	gap: 1rem;
	margin-bottom: 0;
}

#customer_login .register_retailer_fields .fullWidth-row {
	flex: 1;
	margin-bottom: 0.15rem;
}

#customer_login .register_retailer_fields .fullWidth-row label {
	margin-bottom: 0.35rem;
}

#customer_login .register_retailer_fields input[type="text"],
#customer_login .register_retailer_fields textarea {
	margin-bottom: 0.75rem;
}

/* ---- Delivery address divider ---- */
#customer_login .del_p {
	font-size: 0.825rem;
	font-weight: 500;
	color: #6b7280;
	margin: 1rem 0 0.75rem;
	padding-top: 1rem;
	border-top: 1px dashed #d1d5db;
}

/* ---- Delivery fields ---- */
#customer_login .delivary_fields > div {
	margin-bottom: 0.15rem;
}

#customer_login .delivary_fields label {
	margin-bottom: 0.35rem;
}

#customer_login .delivary_fields input[type="text"],
#customer_login .delivary_fields textarea {
	margin-bottom: 0.75rem;
}

/* ---- Submit buttons ---- */
#customer_login button[type="submit"] {
	width: 100%;
	padding: 0.75rem 1.5rem;
	background: #2c2d33;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	margin-top: 0.5rem;
}

#customer_login button[type="submit"]:hover {
	background: #1a1a1f;
}

#customer_login button[type="submit"]:active {
	transform: scale(0.98);
}

/* ---- Lost password link ---- */
#customer_login .lost_password {
	text-align: center;
	margin-top: 1rem;
}

#customer_login .lost_password a {
	font-size: 0.85rem;
	color: #6b7280;
	text-decoration: none;
}

#customer_login .lost_password a:hover {
	color: #2c2d33;
	text-decoration: underline;
}

/* ---- Remember me ---- */
#customer_login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: #6b7280;
}

/* ---- Privacy policy text ---- */
#customer_login .woocommerce-privacy-policy-text {
	margin-top: 0.5rem;
}

#customer_login .woocommerce-privacy-policy-text p {
	font-size: 0.8rem;
	color: #9ca3af;
	line-height: 1.5;
}

/* ---- Success / Error notices ---- */
.woocommerce-notices-wrapper .woocommerce-message {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-left: 4px solid #22c55e;
	color: #166534;
	padding: 0.85rem 1.25rem;
	border-radius: 6px;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

/* ---- Login error state ---- */
#customer_login .u-column1.login_error {
	border-color: #fca5a5;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	#customer_login.u-columns.col2-set {
		flex-direction: column;
		gap: 1.5rem;
	}

	#customer_login .u-column1,
	#customer_login .u-column2 {
		padding: 1.5rem;
	}

	#customer_login .register_retailer_fields .input-row {
		flex-direction: column;
		gap: 0;
	}
}