/**
 * SEIK Retail - User Registration signup form.
 * Square Flatsome fields + primary submit button.
 * Button colors follow --fs-color-primary so theme changes stay in sync.
 */

.ur-frontend-form.seik-signup-form {
	--seik-signup-primary: var(--fs-color-primary, var(--primary-color, #446084));
	--ur-primary-color: var(--seik-signup-primary);
	--ur-button-background-normal-color: var(--seik-signup-primary);
	--ur-button-background-hover-color: var(--seik-signup-primary);
	--ur-button-text-normal-color: #fff;
	--ur-button-text-hover-color: #fff;
	max-width: 440px;
	margin: 0;
}

.ur-frontend-form.seik-signup-form .user-registration-registration-title {
	display: block;
	margin: 0 0 6px !important;
	font-size: 1.5rem !important;
	line-height: 1.25 !important;
	font-weight: 600;
	text-align: left !important;
	letter-spacing: 0;
}

.ur-frontend-form.seik-signup-form .user-registration-registration-description {
	margin: 0 0 18px;
	text-align: left !important;
}

.ur-frontend-form.seik-signup-form .ur-form-row {
	margin: 0 0 14px;
	gap: 0;
}

.ur-frontend-form.seik-signup-form .ur-form-grid {
	width: 100% !important;
	padding: 0 !important;
	float: none;
}

.ur-frontend-form.seik-signup-form .ur-field-item,
.ur-frontend-form.seik-signup-form .form-row {
	margin: 0;
	padding: 0;
}

.ur-frontend-form.seik-signup-form .ur-label,
.ur-frontend-form.seik-signup-form label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	line-height: 1.3;
}

.ur-frontend-form.seik-signup-form input.ur-frontend-field,
.ur-frontend-form.seik-signup-form select.ur-frontend-field,
.ur-frontend-form.seik-signup-form textarea.ur-frontend-field,
.ur-frontend-form.seik-signup-form .select2-container .select2-selection--single {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	line-height: 1.4;
}

.ur-frontend-form.seik-signup-form .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.ur-frontend-form.seik-signup-form input.ur-frontend-field:focus,
.ur-frontend-form.seik-signup-form select.ur-frontend-field:focus,
.ur-frontend-form.seik-signup-form textarea.ur-frontend-field:focus {
	border-color: var(--seik-signup-primary, var(--primary-color, #446084));
	outline: none;
	box-shadow: none;
}

.ur-frontend-form.seik-signup-form .ur-button-container {
	margin: 8px 0 0;
	padding: 0;
	text-align: left;
	float: none;
	clear: both;
}

.ur-frontend-form.seik-signup-form .ur-submit-button,
.ur-frontend-form .ur-submit-button {
	background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
	border-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
	border-radius: 0 !important;
	width: auto !important;
	display: inline-block;
	margin: 0;
	padding: 12px 28px;
	color: #fff !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	box-shadow: none;
}

form.register[data-seik-steps] .seik-steps {
	display: block;
	margin: 0 0 18px;
	font-weight: 600;
}

form.register[data-seik-steps] .seik-steps b {
	display: block;
	margin: 0 0 8px;
}

form.register[data-seik-steps] .seik-bar {
	display: block;
	position: relative;
	height: 2px;
}

form.register[data-seik-steps] .seik-bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: currentColor;
	opacity: 0.18;
}

form.register[data-seik-steps] .seik-bar i {
	display: block;
	position: relative;
	height: 2px;
	width: 25%;
	background: currentColor;
}

form.register[data-seik-steps] .seik-nav {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

body .ur-frontend-form form.register[data-seik-steps] .ur-button-container.seik-submit-off {
	display: none !important;
}

.ur-frontend-form form.register input.ur-frontend-field,
.ur-frontend-form form.register select.ur-frontend-field,
.ur-frontend-form form.register textarea.ur-frontend-field,
.ur-frontend-form form.register .select2-selection--single {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 40px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid #ddd !important;
	border-radius: 0 !important;
	background-color: #fff !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
	color: #333 !important;
	font-size: 16px !important;
	line-height: 40px !important;
}

.ur-frontend-form form.register textarea.ur-frontend-field {
	height: auto !important;
	min-height: 96px !important;
	padding: 10px 12px !important;
	line-height: 1.5 !important;
}

.ur-frontend-form form.register input.ur-frontend-field:focus,
.ur-frontend-form form.register select.ur-frontend-field:focus,
.ur-frontend-form form.register textarea.ur-frontend-field:focus,
.ur-frontend-form form.register .select2-container--focus .select2-selection--single {
	outline: none !important;
	border-color: #333 !important;
}

.ur-frontend-form.seik-signup-form .ur-submit-button:hover,
.ur-frontend-form.seik-signup-form .ur-submit-button:focus,
.ur-frontend-form .ur-submit-button:hover,
.ur-frontend-form .ur-submit-button:focus {
	background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
	border-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
	color: #fff !important;
	filter: brightness(0.92);
}
