/* ==========================================================================
   Flipthinks Custom Registration Fields — Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

/* Flex row wrapper for two half-width fields sitting side by side */
.flipthinks-reg-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}

.flipthinks-reg-field-half {
	flex: 0 0 49% !important;
	max-width: 49% !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
	float: none !important;
}

.flipthinks-reg-field-full {
	width: 100% !important;
	box-sizing: border-box;
	clear: both;
}

/* --------------------------------------------------------------------------
   Hide the default WooCommerce password field on My Account registration.
   We render our own visible "mirror" password field inside a side-by-side
   row together with Confirm Password, and JS syncs values to #reg_password.
   -------------------------------------------------------------------------- */
.woocommerce-form-register > p:has(#reg_password) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}

/* --------------------------------------------------------------------------
   Password half-width override
   -------------------------------------------------------------------------- */
.flipthinks-password-field {
	flex: 0 0 49% !important;
	max-width: 49% !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
	float: none !important;
}

/* --------------------------------------------------------------------------
   Password row — ensure both fields sit side by side
   -------------------------------------------------------------------------- */
.flipthinks-password-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Select element — match WooCommerce input-text height
   -------------------------------------------------------------------------- */
#flipthinks_country {
	width: 100%;
	height: 40px;
	padding: 0 8px;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Date input — consistent styling
   -------------------------------------------------------------------------- */
.flipthinks-dob-input {
	width: 100%;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Gender radio buttons — display inline / horizontally
   -------------------------------------------------------------------------- */
.flipthinks-gender-options {
	display: flex;
	flex-wrap: wrap;
gap: 16px;
	margin-top: 6px;
}

.flipthinks-gender-option {
	display: flex;
	align-items: center;
gap: 6px;
	font-weight: normal;
	cursor: pointer;
}

.flipthinks-gender-option input[type="radio"] {
	width: auto !important;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Show / Hide password toggle button
   -------------------------------------------------------------------------- */
.flipthinks-password-wrap {
	position: relative;
}

.flipthinks-toggle-password {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 13px;
	color: #7f54b3;
	padding: 4px 6px;
	line-height: 1;
	font-weight: 600;
	transition: color 0.2s;
}

.flipthinks-toggle-password:hover,
.flipthinks-toggle-password:focus {
	color: #333;
	outline: none;
}

/* Neutralise WooCommerce's <span class="password-input"> wrapper */
.flipthinks-password-wrap .password-input {
	display: contents !important;
}

/* --------------------------------------------------------------------------
   Confirm-password match indicator (set via JS)
   -------------------------------------------------------------------------- */
#flipthinks_confirm_password.flipthinks-match {
	border-color: #4caf50 !important;
	box-shadow: 0 0 0 1px #4caf50;
}

#flipthinks_confirm_password.flipthinks-mismatch {
	border-color: #f44336 !important;
	box-shadow: 0 0 0 1px #f44336;
}

/* --------------------------------------------------------------------------
   Responsive: below 600 px collapse half-width fields to full width
   -------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	.flipthinks-reg-field-half,
	.flipthinks-password-field,
	.flipthinks-password-row > .flipthinks-reg-field-half {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Checkout: extra fields container
   -------------------------------------------------------------------------- */
.flipthinks-checkout-extra-fields {
	width: 100%;
	clear: both;
}

.flipthinks-checkout-extra-fields .flipthinks-reg-row {
	display: flex;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Checkout: "Create account password" + "Confirm Password" side by side.
   Registering the confirm field as a WC account field places both inside
   the same .create-account wrapper; these rules guarantee the side-by-side
   layout regardless of the active theme.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #account_password_field,
.woocommerce-checkout #flipthinks_confirm_password_field {
	float: left !important;
	width: 48% !important;
	clear: none !important;
	box-sizing: border-box !important;
}

.woocommerce-checkout #account_password_field {
	margin-right: 4% !important;
}

.woocommerce-checkout #flipthinks_confirm_password_field {
	float: right !important;
	margin-right: 0 !important;
}

@media ( max-width: 600px ) {
	.woocommerce-checkout #account_password_field,
	.woocommerce-checkout #flipthinks_confirm_password_field {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
	}
}