/* ==========================================================================
   Signup block
   ========================================================================== */

.lc-block-signup {
	margin-block-start: var(--wp--preset--spacing--xx-large) !important;
	margin-block-end: var(--wp--preset--spacing--xx-large) !important;
	background: url(../../img/block-signup-bg.svg) no-repeat left bottom / 30% auto, var(--wp--preset--color--secondary-40);
	position: relative;
	overflow: hidden;

	@media (max-width: 768px) {
		background-image: none;
	}

	.lc-block-signup__container {
		max-width: var(--wp--style--global--wide-size);
		margin: 0 auto;
		padding-top: var(--wp--preset--spacing--xx-large);
		padding-bottom: var(--wp--preset--spacing--xx-large);
		position: relative;
		z-index: 1;
	}

	.lc-block-signup__content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--x-large);

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: var(--wp--preset--spacing--large);
		}
	}

	.lc-block-signup__form {

		/* Gravity Forms styling */
		.gform_wrapper {
			margin: 0;

			.gform_body {
				.gfield {

					.gfield_label {
						font-size: var(--wp--preset--font-size--body-regular);
						font-weight: 600;
						color: var(--wp--preset--color--neutral-10);
						margin-bottom: var(--wp--preset--spacing--x-small);
					}

					input[type="text"],
					input[type="email"] {
						width: 100%;
						padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small);
						border: 1px solid var(--wp--preset--color--secondary-50);
						border-radius: var(--wp--custom--border-radius--fully-rounded);
						font-size: var(--wp--preset--font-size--body-regular);
						font-family: var(--wp--preset--font-family--inter);
						background: var(--wp--preset--color--secondary-50);
						transition: border-color 0.3s ease;
						min-height: 52px;

						&:focus {
							outline: none;
							border-color: var(--wp--preset--color--secondary-20);
						}
					}

					/* Checkbox styling */
					&.gfield_type_checkbox {
						.gfield_checkbox {
							display: flex;
							align-items: flex-start;
							gap: var(--wp--preset--spacing--x-small);

							.gchoice {
								display: flex;
								align-items: flex-start;
								gap: var(--wp--preset--spacing--x-small);

								input[type="checkbox"] {
									width: 16px;
									height: 16px;
									margin: 0;
									border: 1px solid var(--wp--preset--color--neutral-40);
									border-radius: var(--wp--custom--border-radius--x-small);
									background: var(--wp--preset--color--white);
									appearance: none;
									position: relative;

									&:checked {
										background: var(--wp--preset--color--primary-20);
										border-color: var(--wp--preset--color--primary-20);

										&::after {
											content: '✓';
											position: absolute;
											top: 50%;
											left: 50%;
											transform: translate(-50%, -50%);
											color: var(--wp--preset--color--white);
											font-size: 10px;
											font-weight: 600;
										}
									}
								}

								label {
									font-size: var(--wp--preset--font-size--body-regular);
									color: var(--wp--preset--color--neutral-10);
									margin: 0;
									cursor: pointer;
								}
							}
						}
					}
				}
			}

			.gform_footer {
				margin-top: var(--wp--preset--spacing--medium);

				.gform_button {
					border-radius: var(--wp--custom--border-radius--fully-rounded) !important;
				}
			}

		}
	}
}