/**
 * Signup Form block frontend styles
 */

:root {
	--vxprofiles-overlay-bg: rgba(0, 0, 0, 0.6);
	--vxprofiles-popup-bg: #fefefe;
	--vxprofiles-popup-border: #888;
	--vxprofiles-popup-shadow: rgba(0, 0, 0, 0.3);
	--vxprofiles-popup-text: #000;
	--vxprofiles-popup-close: #aaa;
	--vxprofiles-preview-bg: #2a2a2a;
	--vxprofiles-preview-border: #3a3a3a;
	--vxprofiles-text-primary: #ffffff;
	--vxprofiles-text-secondary: #aaaaaa;
	--vxprofiles-text-tertiary: #cccccc;
	--vxprofiles-gmail-button: #dc3545;
	--vxprofiles-checkmark-bg: #eee;
	--vxprofiles-checkmark-hover: #ccc;
	--vxprofiles-legal-font-size-base: 14px;
	--vxprofiles-legal-line-height: 1.6;
	--vxprofiles-legal-h1-size: 24px;
	--vxprofiles-legal-h2-size: 20px;
	--vxprofiles-legal-h3-size: 18px;
	--vxprofiles-legal-h4-size: 16px;
}

.wp-block-group.is-vertical.is-content-justification-center.is-nowrap.is-layout-flex,
.wp-block-group.vxs-footer.has-contrast-background-color.has-background.has-global-padding.is-layout-constrained {
	min-height: 50px;
	contain: layout;
}

.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
	margin-top: 24px !important;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.wp-block-vxprofiles-signup-form,
.vxprofiles-signup-form-block {
	max-width: 400px;
	margin: 0 auto !important;
	margin-bottom: 0 !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 20px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	contain: layout;
}

.wp-block-vxprofiles-signup-form {
	padding: 8px 20px 0 !important;
}

.vxprofiles-signup-form-block {
	margin-top: 0 !important;
}

.wp-block-vxprofiles-signup-form form,
.vxprofiles-signup-form-block form,
.vxprofiles-signup-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 400px;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	contain: layout;
}

.vxprofiles-signup-form-block form > :last-child,
.wp-block-vxprofiles-signup-form form > :last-child {
	margin-bottom: 0 !important;
}

.wp-block-vxprofiles-signup-form form {
	max-width: 360px;
}


.wp-block-vxprofiles-signup-form input[type="text"],
.wp-block-vxprofiles-signup-form input[type="email"],
.vxprofiles-signup-form-block input[type="text"],
.vxprofiles-signup-form-block input[type="email"] {
	width: 100%;
	max-width: 400px;
	height: 50px;
	padding: 14px 16px;
	border: var(--border-width, 1.5px) solid var(--input-border-color, #3a3a3a);
	border-radius: var(--border-radius, 12px);
	background-color: var(--input-bg-color, #1a1a1a);
	color: var(--input-text-color, #ffffff);
	font-size: var(--input-font-size, 15px);
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1.5;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s ease;
}

.wp-block-vxprofiles-signup-form input[type="text"]::placeholder,
.wp-block-vxprofiles-signup-form input[type="email"]::placeholder,
.vxprofiles-signup-form-block input[type="text"]::placeholder,
.vxprofiles-signup-form-block input[type="email"]::placeholder {
	color: var(--input-placeholder-color, #aaaaaa);
	opacity: 0.7;
}

.wp-block-vxprofiles-signup-form input[type="text"]:focus,
.wp-block-vxprofiles-signup-form input[type="email"]:focus,
.vxprofiles-signup-form-block input[type="text"]:focus,
.vxprofiles-signup-form-block input[type="email"]:focus {
	outline: none;
	border-color: var(--input-focus-border-color, #1f93e9);
}

.wp-block-vxprofiles-signup-form input[type="text"].invalid,
.wp-block-vxprofiles-signup-form input[type="email"].invalid,
.vxprofiles-signup-form-block input[type="text"].invalid,
.vxprofiles-signup-form-block input[type="email"].invalid {
	border-color: var(--error-color, #f44336);
}

.wp-block-vxprofiles-signup-form .invalid__message {
	color: var(--error-color, #f44336);
	font-size: 14px;
	margin-top: 5px;
	display: none;
}

.wp-block-vxprofiles-signup-form .success__message {
	padding: 12px;
	background: var(--success-bg-color, #4caf50);
	color: var(--success-text-color, #ffffff);
	border-radius: 8px;
	margin-top: 10px;
}

.wp-block-vxprofiles-signup-form button[type="submit"],
.wp-block-vxprofiles-signup-form .signup-redirect-button,
.vxprofiles-signup-form-block .signup-email-regarding-button,
.vxprofiles-signup-form-block .signup-email-come-see-me-button {
	width: 100%;
	padding: 14px;
	background-color: var(--button-bg-color, #1f93e9);
	color: var(--button-text-color, #ffffff);
	border: none;
	border-radius: var(--border-radius, 12px);
	font-size: var(--input-font-size, 15px);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-vxprofiles-signup-form button[type="submit"],
.wp-block-vxprofiles-signup-form .signup-redirect-button {
	padding: 14px;
}

.vxprofiles-signup-form-block .signup-email-regarding-button,
.vxprofiles-signup-form-block .signup-email-come-see-me-button {
	padding: 12px 20px;
	border-radius: 8px;
	gap: 8px;
}

.vxprofiles-signup-form-block .signup-email-come-see-me-button {
	padding: 12px 24px;
	display: inline-flex;
	font-size: 16px;
	font-weight: bold;
}

.wp-block-vxprofiles-signup-form button[type="submit"]:hover:not(:disabled),
.wp-block-vxprofiles-signup-form .signup-redirect-button:hover,
.vxprofiles-signup-form-block .signup-email-regarding-button:hover,
.vxprofiles-signup-form-block .signup-email-come-see-me-button:hover {
	background-color: var(--button-hover-color, #1a7bc7);
}

.wp-block-vxprofiles-signup-form button[type="submit"]:disabled,
.wp-block-vxprofiles-signup-form button[type="submit"].disabled,
.vxprofiles-signup-form-block .signup-form-button-wrapper button:disabled,
.vxprofiles-signup-form-block .signup-form-button-wrapper button.disabled,
.wp-block-vxprofiles-signup-form .signup-form-button-wrapper button:disabled,
.wp-block-vxprofiles-signup-form .signup-form-button-wrapper button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: var(--button-bg-color, #1f93e9);
}

.wp-block-vxprofiles-signup-form button[type="submit"]:disabled:hover,
.wp-block-vxprofiles-signup-form button[type="submit"].disabled:hover,
.vxprofiles-signup-form-block .signup-form-button-wrapper button:disabled:hover,
.vxprofiles-signup-form-block .signup-form-button-wrapper button.disabled:hover,
.wp-block-vxprofiles-signup-form .signup-form-button-wrapper button:disabled:hover,
.wp-block-vxprofiles-signup-form .signup-form-button-wrapper button.disabled:hover {
	background-color: var(--button-bg-color, #1f93e9);
}

.vxprofiles-signup-form-block .signup-email-gmail-button {
	background-color: var(--vxprofiles-gmail-button, #dc3545);
	color: var(--vxprofiles-text-primary, #ffffff);
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wp-block-vxprofiles-signup-form .signup-step-1,
.wp-block-vxprofiles-signup-form .signup-step-2,
.vxprofiles-signup-form-block .signup-step-1,
.vxprofiles-signup-form-block .signup-step-2 {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	contain: layout;
	transition: opacity 0.3s ease;
}

.vxprofiles-signup-form-block .signup-form-field-wrapper,
.wp-block-vxprofiles-signup-form .signup-form-field-wrapper {
	width: 100%;
	display: block;
	contain: layout;
}

.vxprofiles-signup-form-block .signup-form-field-wrapper input,
.wp-block-vxprofiles-signup-form .signup-form-field-wrapper input {
	width: 100%;
	box-sizing: border-box;
}

.vxprofiles-signup-form-block .signup-form-button-wrapper,
.wp-block-vxprofiles-signup-form .signup-form-button-wrapper {
	width: 100%;
	display: block;
	margin-bottom: 0 !important;
	contain: layout;
}

.vxprofiles-signup-form-block .signup-form-button-wrapper button,
.wp-block-vxprofiles-signup-form .signup-form-button-wrapper button {
	min-height: 48px;
	box-sizing: border-box;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeOutUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

.wp-block-vxprofiles-signup-form .fadeInUp {
	animation: fadeInUp 0.3s ease-out forwards;
}

.wp-block-vxprofiles-signup-form .fadeOutUp {
	animation: fadeOutUp 0.3s ease-in forwards;
}

.wp-block-vxprofiles-signup-form .signup-success-message {
	text-align: center;
}

.wp-block-vxprofiles-signup-form .signup-success-message h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.wp-block-vxprofiles-signup-form .signup-success-message p {
	font-size: 16px;
	margin: 0 0 20px 0;
}

.vxprofiles-signup-form-block .signup-email-confirmation-header {
	text-align: center;
	margin-bottom: 20px;
}

.vxprofiles-signup-form-block .signup-email-confirmation-header > div {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: var(--button-bg-color, #1f93e9);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	color: var(--vxprofiles-text-primary, #ffffff);
	font-weight: bold;
	font-size: 18px;
}

.vxprofiles-signup-form-block .signup-email-confirmation-header h2 {
	color: var(--button-text-color, #ffffff);
	margin-bottom: 10px;
	font-size: 24px;
}

.vxprofiles-signup-form-block .signup-email-address-display {
	color: var(--input-text-color, #ffffff);
	margin-bottom: 20px;
	font-size: 16px;
}

.vxprofiles-signup-form-block .signup-email-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
	width: 100%;
	max-width: 400px;
}

.vxprofiles-signup-form-block .signup-email-preview {
	background-color: var(--vxprofiles-preview-bg, #2a2a2a);
	border-radius: 8px;
	padding: 20px;
	margin-top: 20px;
	width: 100%;
	max-width: 400px;
}

.vxprofiles-signup-form-block .email-preview-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--vxprofiles-preview-border, #3a3a3a);
}

.vxprofiles-signup-form-block .email-preview-header > div:first-child {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--button-bg-color, #1f93e9);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vxprofiles-text-primary, #ffffff);
	font-weight: bold;
	font-size: 18px;
}

.vxprofiles-signup-form-block .model-name-display {
	color: var(--vxprofiles-text-primary, #ffffff);
	font-weight: bold;
	font-size: 16px;
}

.vxprofiles-signup-form-block .model-email-display {
	color: var(--vxprofiles-text-secondary, #aaaaaa);
	font-size: 14px;
}

.vxprofiles-signup-form-block .email-preview-subject {
	color: var(--vxprofiles-text-primary, #ffffff);
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 12px;
}

.vxprofiles-signup-form-block .email-preview-body {
	color: var(--vxprofiles-text-tertiary, #cccccc);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 20px;
}

.vxprofiles-signup-form-block .email-preview-button-wrapper {
	margin-bottom: 12px;
}

.vxprofiles-signup-form-block .email-preview-fallback {
	color: var(--vxprofiles-text-secondary, #aaaaaa);
	font-size: 12px;
}

.vxprofiles-signup-form-block .signup-email-fallback-link,
.vxprofiles-signup-form-block .signup-email-try-again {
	color: var(--button-bg-color, #1f93e9);
	text-decoration: underline;
}

.vxprofiles-signup-form-block .signup-email-fallback-message {
	margin-top: 20px;
	color: var(--input-text-color, #ffffff);
	font-size: 14px;
	text-align: center;
}

.vxprofiles-signup-form-block input[name="website"] {
	display: none;
}

.signup-form-legal-wrapper {
	overflow: hidden;
	max-height: 200px;
	transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.signup-form-legal-wrapper[style*="display: none"] {
	opacity: 0;
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.input__checkbox,
.vxprofiles-signup-form-block .input__checkbox,
.wp-block-vxprofiles-signup-form .input__checkbox,
.vxprofiles-signup-form .input__checkbox {
	display: block;
	position: relative;
	padding-left: 42px;
	margin: 0;
	cursor: pointer;
	user-select: none;
	max-width: calc(var(--wp--style--global--content-size, 100%) - 35px);
	color: var(--checkbox-text-color, #cfcfcf);
	font-size: 15px;
	text-align: left;
}

.input__checkbox a,
.vxprofiles-signup-form-block .input__checkbox a,
.wp-block-vxprofiles-signup-form .input__checkbox a,
.vxprofiles-signup-form .input__checkbox a {
	color: var(--checkbox-text-color, #cfcfcf);
	text-decoration: underline;
}

.input__checkbox a:hover,
.vxprofiles-signup-form-block .input__checkbox a:hover,
.wp-block-vxprofiles-signup-form .input__checkbox a:hover,
.vxprofiles-signup-form .input__checkbox a:hover {
	color: var(--checkbox-hover-text-color, #ffffff);
}

.signup-form-legal-label .legal__agb,
.signup-form-legal-label .legal__dse {
	color: #6baaff !important;
	text-decoration: underline;
}

.signup-form-legal-label .legal__agb:hover,
.signup-form-legal-label .legal__dse:hover {
	color: #6baaff !important;
	opacity: 0.8;
}

.input__checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: var(--vxprofiles-checkmark-bg, #eee);
}

.input__checkbox:hover input ~ .checkmark {
	background-color: var(--vxprofiles-checkmark-hover, #ccc);
}

.input__checkbox input:checked ~ .checkmark,
.vxprofiles-signup-form-block .input__checkbox input:checked ~ .checkmark,
.wp-block-vxprofiles-signup-form .input__checkbox input:checked ~ .checkmark,
.vxprofiles-signup-form .input__checkbox input:checked ~ .checkmark {
	background-color: var(--button-bg-color, #1f93e9);
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid var(--vxprofiles-text-primary, #ffffff);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.input__checkbox input:checked ~ .checkmark:after {
	display: block;
}

.popup__agb,
.popup__dse {
	display: none !important;
	position: fixed !important;
	z-index: 999999 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	max-height: none !important;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--vxprofiles-overlay-bg, rgba(0, 0, 0, 0.6)) !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

.popup__agb.display,
.popup__dse.display {
	display: flex !important;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	padding-top: 5vh;
	box-sizing: border-box;
}

.popup__agb .popup__content,
.popup__dse .popup__content {
	background-color: var(--vxprofiles-popup-bg, #fefefe);
	margin: 0 auto;
	padding: 30px 45px;
	border: 1px solid var(--vxprofiles-popup-border, #888);
	width: 90%;
	max-width: 1000px;
	height: auto;
	max-height: 95vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 4px 20px var(--vxprofiles-popup-shadow, rgba(0, 0, 0, 0.3));
	color: var(--vxprofiles-popup-text, #000);
	box-sizing: border-box;
}

.popup__agb .popup__content *:not(a):not(.popup__close),
.popup__dse .popup__content *:not(a):not(.popup__close),
.popup__agb .legal-texts,
.popup__dse .legal-texts {
	color: inherit;
}

.popup__agb .legal-texts *,
.popup__dse .legal-texts * {
	color: inherit;
}

.popup__agb .legal-texts,
.popup__dse .legal-texts {
	font-size: var(--vxprofiles-legal-font-size-base, 14px);
	line-height: var(--vxprofiles-legal-line-height, 1.6);
}

.popup__agb .legal-texts h1,
.popup__dse .legal-texts h1 {
	font-size: var(--vxprofiles-legal-h1-size, 24px);
	margin-bottom: 20px;
}

.popup__agb .legal-texts h2,
.popup__dse .legal-texts h2 {
	font-size: var(--vxprofiles-legal-h2-size, 20px);
	margin-top: 20px;
	margin-bottom: 15px;
}

.popup__agb .legal-texts h3,
.popup__dse .legal-texts h3 {
	font-size: var(--vxprofiles-legal-h3-size, 18px);
	margin-top: 15px;
	margin-bottom: 10px;
}

.popup__agb .legal-texts h4,
.popup__dse .legal-texts h4 {
	font-size: var(--vxprofiles-legal-h4-size, 16px);
	margin-top: 10px;
	margin-bottom: 5px;
}

.popup__agb .legal-texts p,
.popup__dse .legal-texts p {
	margin-bottom: 10px;
}

.popup__agb .legal-texts ul,
.popup__dse .legal-texts ul,
.popup__agb .legal-texts ol,
.popup__dse .legal-texts ol {
	margin-bottom: 10px;
	padding-left: 20px;
}

.popup__agb .legal-texts li,
.popup__dse .legal-texts li {
	margin-bottom: 5px;
}

.popup__agb .popup__close,
.popup__dse .popup__close {
	float: right;
	font-size: 25pt;
	font-weight: bold;
	color: var(--vxprofiles-popup-close, #aaa);
	cursor: pointer;
	line-height: 1;
}

.popup__agb .popup__close:hover,
.popup__dse .popup__close:hover {
	color: var(--vxprofiles-popup-text, #000);
}