/* ========================================
   LAYOUT
   ======================================== */

/* Main container with max-width and centered */
.form-page-container {
	max-width: 1400px;
	margin: 0 auto !important;
	padding: clamp(20px, 6vw, 80px) clamp(15px, 2vw, 20px);
	padding-bottom: 0;
}

/* Two-column grid layout */
.form-page-content {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: clamp(30px, 5vw, 60px);
	align-items: start;
	margin-bottom: clamp(50px, 8vw, 150px) !important;
}

/* ========================================
   PAGE TITLE
   ======================================== */

/* Title section with decorative lines */
.form-page-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(15px, 12vw, 150px);
	margin-bottom: clamp(30px, 8vw, 70px) !important;
}

/* Decorative lines on each side of title */
.form-page-title-line {
	flex: 1;
	height: 1px;
	background-color: var(--color-canelle) !important;
}

/* Main title text styling */
.form-page-title-text {
	text-transform: uppercase;
	letter-spacing: clamp(2px, 0.8vw, 8px);
	color: var(--color-canelle) !important;
	font-weight: 100 !important;
	font-size: clamp(11px, 1.2vw, 16px) !important;
	font-family: var(--font-arial) !important;
	white-space: nowrap;
}

/* ========================================
   IMAGE SECTION
   ======================================== */

/* Contact image container */
.form-page-image-section {
	width: 100%;
	min-width: 300px;
	max-width: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	order: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
}

/* Responsive image */
.form-page-image-section img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ========================================
   FORM SECTION
   ======================================== */

/* Form section container */
.form-section {
	width: 100%;
	font-family: var(--font-futura-ndalt) !important;
	font-weight: 400 !important;
	display: flex;
	flex-direction: column;
	gap: clamp(30px, 3.5vw, 40px);
	order: 2;
}

/* Section titles (h2) */
.form-section-title {
	font-size: clamp(26px, 2.8vw, 35px) !important;
	color: black !important;
	margin-bottom: 15px !important;
	line-height: 1.5;
}

/* Contact info box with background image */
.form-contact-info {
	margin-bottom: 20px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 20px;
}

/* Contact text styling */
.form-contact-text {
	font-size: clamp(20px, 1.8vw, 20px) !important;
	color: var(--color-black) !important;
	margin-bottom: 15px !important;
	line-height: 1.6;
}

/* Phone number styling */
.form-phone-number {
	font-size: clamp(20px, 2.8vw, 35px) !important;
	color: var(--color-canelle) !important;
	margin-top: 10px !important;
}

/* ========================================
   GRAVITY FORMS STYLING
   ======================================== */

/* Form container */
.form-container {
	margin-top: 20px !important;
}

/* Gravity Forms wrapper reset - target all gform wrappers */
.gf_browser_chrome .gform_wrapper,
.gform_wrapper {
	margin: 0 !important;
}

/* Form body reset */
.gf_browser_chrome .gform_wrapper .gform_body,
.gform_wrapper .gform_body {
	margin: 0 !important;
}

/* Form fields list - target by class instead of ID */
.gf_browser_chrome .gform_wrapper .gform_body ul.gform_fields,
.gform_wrapper .gform_body ul.gform_fields,
.gform_wrapper .gform_body .gform_fields {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

/* Individual field item */
.gform_wrapper .gform_body .gform_fields .gfield,
.gform_wrapper .gform_body .gform_fields li.gfield {
	margin: 0 !important;
	padding: 0 !important;
}

/* Labels styling */
.gform_wrapper .gform_body .gform_fields .gfield .gfield_label,
.gform_wrapper .gform_body .gform_fields li.gfield .gfield_label {
	display: block !important;
	font-size: clamp(12px, 1.3vw, 14px) !important;
	color: var(--color-grey) !important;
	font-family: var(--font-arial) !important;
	font-weight: var(--font-weight-demi-bold) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	margin-bottom: 8px !important;
}

/* Required field asterisk */
.gform_wrapper .gform_body .gform_fields .gfield .gfield_required,
.gform_wrapper .gform_body .gform_fields li.gfield .gfield_required {
	color: var(--color-canelle) !important;
}

/* Input container */
.gform_wrapper .gform_body .gform_fields .gfield .ginput_container,
.gform_wrapper .gform_body .gform_fields li.gfield .ginput_container {
	margin: 0 !important;
	width: 100% !important;
}

/* Specific container for select */
.gform_wrapper .gform_body .gform_fields .gfield .ginput_container_select,
.gform_wrapper .gform_body .gform_fields li.gfield .ginput_container_select {
	width: 100% !important;
	display: block !important;
}

/* ========================================
   FORM INPUTS
   ======================================== */

/* Base styling for all input types */

.gform_wrapper .gform_body .gform_fields .gfield input,
.gform_wrapper .gform_body .gform_fields li.gfield input,
.gform_wrapper .gform_body .gform_fields .gfield select,
.gform_wrapper .gform_body .gform_fields li.gfield select,
.gform_wrapper .gform_body .gform_fields .gfield textarea,
.gform_wrapper .gform_body .gform_fields li.gfield textarea {
	width: 100% !important;
	padding: clamp(10px, 1.2vw, 12px) clamp(12px, 1.3vw, 14px) !important;
	border: none !important;
	border-bottom: 1px solid var(--color-grey) !important;
	background: #f9f9f9 !important;
	font-size: clamp(14px, 1.5vw, 16px) !important;
	letter-spacing: 1px !important;
	color: var(--color-grey) !important;
	outline: none !important;
	transition: all 0.3s ease !important;
	font-family: var(--font-arial) !important;
	font-weight: 100 !important;
}

/* Placeholder styling */
.gform_wrapper .gform_body .gform_fields .gfield input::placeholder,
.gform_wrapper .gform_body .gform_fields li.gfield input::placeholder,
.gform_wrapper .gform_body .gform_fields .gfield textarea::placeholder,
.gform_wrapper .gform_body .gform_fields li.gfield textarea::placeholder {
	color: #cccccc !important;
	font-weight: 100 !important;
	letter-spacing: 0.5px !important;
	text-transform: normal !important;
	font-size: clamp(14px, 1.5vw, 16px) !important;
}

/* Hide helper text under message field */
#gfield_description_1_5 {
	display: none !important;
}

/* Focus state for inputs */
.gform_wrapper .gform_body .gform_fields .gfield input:focus,
.gform_wrapper .gform_body .gform_fields li.gfield input:focus,
.gform_wrapper .gform_body .gform_fields .gfield select:focus,
.gform_wrapper .gform_body .gform_fields li.gfield select:focus,
.gform_wrapper .gform_body .gform_fields .gfield textarea:focus,
.gform_wrapper .gform_body .gform_fields li.gfield textarea:focus {
	border-bottom-color: var(--color-accent) !important;
	background: #ffffff !important;
}

/* ========================================
   SELECT DROPDOWN
   ======================================== */

/* Custom select dropdown styling */
.gform_wrapper .gform_body .gform_fields .gfield select,
.gform_wrapper .gform_body .gform_fields li.gfield select,
.gform_wrapper .gform_body .gform_fields .gfield .gfield_select,
.gform_wrapper .gform_body .gform_fields li.gfield .gfield_select {
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-color: #f9f9f9 !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: calc(100% - 14px) center !important;
	background-size: 12px 8px !important;
	padding-right: 40px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
}

/* Select focus state - keep chevron in same position */
.gform_wrapper .gform_body .gform_fields .gfield select:focus,
.gform_wrapper .gform_body .gform_fields li.gfield select:focus,
.gform_wrapper .gform_body .gform_fields .gfield .gfield_select:focus,
.gform_wrapper .gform_body .gform_fields li.gfield .gfield_select:focus {
	background-color: #ffffff !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: calc(100% - 14px) center !important;
	background-size: 12px 8px !important;
}

/* Select options styling */
.gform_wrapper .gform_body .gform_fields .gfield select option,
.gform_wrapper .gform_body .gform_fields li.gfield select option {
	background-color: var(--color-white) !important;
	color: var(--color-grey) !important;
	padding: 10px !important;
}

/* Default selected option styling */
.gform_wrapper .gform_body .gform_fields .gfield select option:first-child,
.gform_wrapper .gform_body .gform_fields li.gfield select option:first-child {
	color: #cccccc !important;
}

/* ========================================
   TEXTAREA
   ======================================== */

/* Textarea specific styling */
.gform_wrapper .gform_body .gform_fields .gfield textarea,
.gform_wrapper .gform_body .gform_fields li.gfield textarea {
	resize: vertical !important;
	min-height: clamp(80px, 10vw, 100px) !important;
	border: 1px solid transparent !important;
	border-bottom: 1px solid var(--color-grey) !important;
}

/* Textarea focus state with full border */
.gform_wrapper .gform_body .gform_fields .gfield textarea:focus,
.gform_wrapper .gform_body .gform_fields li.gfield textarea:focus {
	border: 1px solid var(--color-accent) !important;
	border-radius: 4px !important;
}

/* Field description text */
.gform_wrapper .gform_body .gform_fields .gfield .gfield_description,
.gform_wrapper .gform_body .gform_fields li.gfield .gfield_description {
	font-size: clamp(12px, 1.2vw, 14px) !important;
	color: var(--color-grey) !important;
	margin-top: 5px !important;
	font-style: italic !important;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */

/* Form footer (button container) */
.gform_footer {
	margin-top: 10px !important;
	padding: 0 !important;
}

/* Submit button styling */
.gform_button {
	display: inline-block;
	font-size: var(--font-size-CTA) !important;
	font-family: var(--font-arial-bold) !important;
	text-decoration: none;
	color: var(--color-white) !important;
	background-color: var(--color-vitamine) !important;
	border: none;
	border-radius: 100px;
	padding: 12px 20px;
	cursor: pointer;
	box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25);
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	transition: background 0.3s;
}

/* Button hover state */
.gform_button:hover {
	background-color: var(--color-vitamine-hover) !important;
}

/* ========================================
   FORM VALIDATION ERRORS
   ======================================== */

/* General form validation error banner */
.gform_validation_error {
	background-color: #fef5f1 !important;
	border: 1px solid #c02b0a !important;
	border-radius: 8px !important;
	padding: 16px !important;
	margin-bottom: 24px !important;
	color: #c02b0a !important;
	font-weight: 500 !important;
	font-size: clamp(14px, 1.4vw, 16px) !important;
}

/* Field error state - remove default red border from Gravity Forms */
.gform_wrapper .gform_body .gform_fields li.gfield_error,
.gform_wrapper li.gfield.gfield_error,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required {
	background-color: transparent !important;
	border-top: none !important;
	border-bottom: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Error state for inputs */
.gform_wrapper .gform_body .gform_fields .gfield input.gfield_error,
.gform_wrapper .gform_body .gform_fields li.gfield input.gfield_error,
.gform_wrapper .gform_body .gform_fields .gfield select.gfield_error,
.gform_wrapper .gform_body .gform_fields li.gfield select.gfield_error,
.gform_wrapper .gform_body .gform_fields .gfield textarea.gfield_error,
.gform_wrapper .gform_body .gform_fields li.gfield textarea.gfield_error {
	border-bottom-color: #c02b0a !important;
	background-color: #fef5f1 !important;
}

/* Validation message styling */
.gform_wrapper .gform_body .gform_fields .gfield .validation_message,
.gform_wrapper .gform_body .gform_fields li.gfield .validation_message {
	color: #c02b0a !important;
	font-size: clamp(12px, 1.2vw, 14px) !important;
	margin-top: 8px !important;
	font-weight: 500 !important;
	font-family: var(--font-arial) !important;
	display: block !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Custom validation message styling (client-side validation) */
.gform_wrapper .gform_body .gform_fields .gfield .gfield_validation_message_custom {
	color: #c02b0a !important;
	font-size: clamp(12px, 1.2vw, 14px) !important;
	margin-top: 8px !important;
	font-weight: 500 !important;
	font-family: var(--font-arial) !important;
	display: block !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Custom error field state */
.gform_wrapper .gform_body .gform_fields li.gfield.gfield_error_custom {
	background-color: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Character counter styling */
.char-counter {
	margin-top: 8px !important;
	font-size: clamp(12px, 1.2vw, 13px) !important;
	color: #666 !important;
	text-align: right !important;
	font-family: var(--font-arial) !important;
	font-weight: 400 !important;
}

.char-counter .char-count {
	font-weight: 600 !important;
}

/* Valid checkmark styling */
.gfield_valid_checkmark {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #10b981 !important;
	font-size: 20px !important;
	font-weight: bold !important;
	pointer-events: none !important;
	animation: checkmarkFadeIn 0.3s ease !important;
}

@keyframes checkmarkFadeIn {
	from {
		opacity: 0;
		transform: translateY(-50%) scale(0.5);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

/* Email suggestion styling */
.gform_wrapper .gform_body .gform_fields .gfield .gfield_email_suggestion {
	color: #f97316 !important;
	font-size: clamp(12px, 1.2vw, 14px) !important;
	margin-top: 8px !important;
	font-weight: 500 !important;
	font-family: var(--font-arial) !important;
	display: block !important;
	border: none !important;
	padding: 8px 12px !important;
	background: #fff7ed !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.gform_wrapper .gform_body .gform_fields .gfield .gfield_email_suggestion:hover {
	background: #fed7aa !important;
}

.gform_wrapper .gform_body .gform_fields .gfield .gfield_email_suggestion strong {
	color: #ea580c !important;
	text-decoration: underline !important;
}

/* Error label styling */
.gform_wrapper .gform_body .gform_fields li.gfield_error .gfield_label {
	color: #c02b0a !important;
}

/* Legacy form error styling (kept for compatibility) */
.form-error {
	margin-top: 10px !important;
	color: #c02b0a !important;
	font-size: 14px !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
	/* Increase lateral padding on tablet */
	.form-page-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	.form-page-content {
		grid-template-columns: 1fr;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Form section */
	.form-section {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Prevent form elements from overflowing */
	.gform_wrapper,
	.gform_body,
	.gform_fields {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Ensure all inputs respect padding */
	.gform_wrapper .gform_body .gform_fields .gfield input,
	.gform_wrapper .gform_body .gform_fields li.gfield input,
	.gform_wrapper .gform_body .gform_fields .gfield select,
	.gform_wrapper .gform_body .gform_fields li.gfield select,
	.gform_wrapper .gform_body .gform_fields .gfield textarea,
	.gform_wrapper .gform_body .gform_fields li.gfield textarea {
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

	/* Hide contact image on tablet */
	.form-page-image-section {
		display: none;
	}
}

/* Mobile breakpoint */
@media (max-width: 768px) {
	/* Increase lateral padding on mobile */
	.form-page-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* Single column layout */
	.form-page-content {
		grid-template-columns: 1fr;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Image appears first on mobile */
	.form-page-image-section {
		max-width: 70%;
		margin: 0 auto !important;
		order: 1;
	}

	/* Form section appears second on mobile */
	.form-section {
		order: 2;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Prevent form elements from overflowing */
	.gform_wrapper,
	.gform_body,
	.gform_fields {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Ensure all inputs respect padding */
	.gform_wrapper .gform_body .gform_fields .gfield input,
	.gform_wrapper .gform_body .gform_fields li.gfield input,
	.gform_wrapper .gform_body .gform_fields .gfield select,
	.gform_wrapper .gform_body .gform_fields li.gfield select,
	.gform_wrapper .gform_body .gform_fields .gfield textarea,
	.gform_wrapper .gform_body .gform_fields li.gfield textarea {
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

	/* Shorter decorative lines on mobile */
	.form-page-title-line {
		max-width: 80px;
	}

	/* Title spacing adjustment */
	.form-page-title:last-child {
		margin-bottom: 0 !important;
		margin-top: clamp(30px, 4vw, 50px) !important;
	}

	/* Full-width button on mobile */
	.gform_button {
		width: 100%;
		box-sizing: border-box !important;
	}
}