.smx-form {
	max-width: 480px;
	margin: auto;
	font-family: system-ui;
	@media (min-width: 768px) {
		overflow: hidden;
	}

	h2 {
		font-size: var(--font-title-md);
		line-height: var(--font-title-md);
	}

	.smx-tabs {
		display: flex;
		gap: 0.5rem;
		margin-bottom: var(--space-md);
		background: var(--smx-color-background-light);
		border-radius: var(--border-radius-full);
		padding: 0.3rem;

		position: relative;
		transform: transitionX(-4px);

		.smx-indicator {
			position: absolute;
			top: 4px;
			bottom: 4px;
			left: 4px;
			width: 0;
			border-radius: 999px;
			background: var(--smx-color-primary);
			color: var(--smx-color-white);
			transition: all 0.25s ease;
			z-index: 0;
		}

		button {
			position: relative;
			z-index: 1;
			flex: 1;
			border: none;
			background: transparent;
			padding: var(--space-sm);
			border-radius: var(--border-radius-full);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.4rem;
			transition: all 0.25s ease;
			line-height: var(--font-size-base);

			&.active {
				color: var(--smx-color-white);
			}
		}
	}

	.smx-field {
		margin-bottom: var(--space-sm);
		display: flex;
		flex-direction: column;

		label {
			font-size: var(--font-size-sm);
		}

		input,
		textarea {
			padding: var(--space-sm) var(--space-md);
			border: 1px solid var(--smx-color-text);
			border-radius: var(--border-radius-md);
			font-size: 1rem;

			@media (min-width: 768px) {
				font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
			}

			&:focus {
				outline: none;
				border-color: var(--smx-color-primary);
			}
		}

		.error {
			color: var(--smx-color-danger);
			font-size: var(--font-size-sm);
			display: none;
		}

		&.invalid .error {
			display: block;
		}
	}

	.smx-checkbox {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.85rem;
		margin-bottom: 1rem;
		cursor: pointer;

		input {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		.smx-checkbox-box {
			width: 18px;
			height: 18px;
			border: 1.5px solid #ccc;
			border-radius: 6px;
			display: inline-block;
			position: relative;
			transition: all 0.2s ease;
		}

		input:checked + .smx-checkbox-box {
			background: var(--smx-color-primary);
			border-color: var(--smx-color-primary);
		}

		.smx-checkbox-box::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 5px;
			height: 9px;
			border: solid white;
			border-width: 0 2px 2px 0;
			transform: translate(-50%, -60%) rotate(45deg);
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		input:checked + .smx-checkbox-box::after {
			opacity: 1;
		}

		/* foco acessível */
		input:focus-visible + .smx-checkbox-box {
			outline: 2px solid var(--smx-color-primary);
			outline-offset: 2px;
		}
	}
	.smx-info {
		font-size: var(--font-text);
		line-height: var(--font-text);
		margin-top: var(--space-md);
	}
}

.modal-panel-contact {
	padding: var(--space-sm);
	padding-top: var(--space-xl);
	border-radius: var(--border-radius-lg);

	@media (min-width: 1024px) {
		width: 86%;
		max-width: 1200px;
		background-color: var(--smx-color-white);
		background-image: url('../../images/contact-woman.webp');
		background-position: bottom right;
		background-size: contain;
		background-repeat: no-repeat;
		.smx-form {
			margin: 0;
			max-width: 400px;
		}
	}

	.contact-form {
		border-radius: var(--border-radius-lg);
		overflow: hidden;
	}
}