/**
 * Elementor Pro Form Override Styles
 *
 * Styles Elementor Pro forms to match Figma design system
 * Design Reference: Figma node 38898-49897
 *
 * @package Elcogen_Elementor_Widgets
 */

/* ============================================
   Phone Field with Country Code Dropdown
   ============================================ */

/* Phone field wrapper - contains country code dropdown + phone input */
.elementor-field-type-tel .elementor-field-subgroup {
	display: flex !important;
	gap: 0 !important;
	align-items: stretch !important;
}

/* Ensure phone field group has normal layout (label above input) */
.elementor-field-type-tel.elementor-field-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* Country code select dropdown */
.elementor-field-type-tel select.elementor-field-textual {
	width: auto !important;
	min-width: 100px !important;
	border-radius: 4px 0 0 4px !important;
	border-right: none !important;
	margin-right: -1px !important;
	padding: 8px !important;
	background-color: white !important;
	border: 1px solid #8a8797 !important;
	font-family: 'Afacad', sans-serif !important;
	font-size: 18px !important;
	line-height: 28px !important;
	color: #131317 !important;
	/* Dropdown arrow */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23686878" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 24px !important;
	padding-right: 40px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

/* Phone number input field */
.elementor-field-type-tel input[type="tel"] {
	flex: 1 !important;
	border-radius: 0.25rem; /* 4px = 0.25rem */
	padding: 0.5rem 0.5rem 0.5rem 3.25rem !important;  /* 8px = 0.5rem */
	background-color: white !important;
	border: 1px solid #8a8797 !important;
	font-family: 'Afacad', sans-serif !important;
	font-size: 1.125rem !important; /* 18px = 1.125rem */
	line-height: 1.75rem !important; /* 28px = 1.75rem */
	color: #131317 !important;
}


/* Phone field placeholder */
.elementor-field-type-tel input[type="tel"]::placeholder {
	color: #686878 !important;
}

/* Phone field focus states */
.elementor-field-type-tel select.elementor-field-textual:focus,
.elementor-field-type-tel input[type="tel"]:focus {
	border-color: #8a8797 !important;
	outline: none !important;
	box-shadow:
		0 0 0 1px #ffffff,
		0 0 0 3px #0092c1 !important;
	z-index: 1;
	position: relative !important;
}

/* ============================================
   All Elementor Form Fields - Base Styles
   ============================================ */

/* Form field groups */
.elementor-field-group {
	margin-bottom: 16px !important;
}

/* Form labels */
.elementor-field-label {
	font-family: 'Afacad', sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 28px !important;
	color: #131317 !important;
	margin-bottom: 0 !important;
	text-align: left !important;
}

/* Required asterisk */
.elementor-mark-required {
	color: #ac3c32 !important;
	margin-left: 2px !important;
}

/* Text inputs, email, textarea, select */
.elementor-field-textual,
.elementor-field.elementor-select-wrapper select {
	padding: 8px !important;
	border: 1px solid #8a8797 !important;
	border-radius: 4px !important;
	background-color: white !important;
	font-family: 'Afacad', sans-serif !important;
	font-size: 18px !important;
	line-height: 28px !important;
	color: #131317 !important;
}

/* Placeholder text */
.elementor-field-textual::placeholder {
	color: #686878 !important;
}

/* Focus states for all fields */
.elementor-field-textual:focus,
.elementor-field.elementor-select-wrapper select:focus {
	border-color: #8a8797 !important;
	outline: none !important;
	box-shadow:
		0 0 0 1px #ffffff,
		0 0 0 3px #0092c1 !important;
}

/* Textarea specific */
textarea.elementor-field-textual {
	min-height: 136px !important;
	resize: vertical !important;
}

/* Hide Elementor's built-in eicons caret - we use our own background-image arrow */
.elementor-field-group .elementor-select-wrapper:before,
.elementor-field-group .elementor-select-wrapper::before {
	content: "" !important;
	display: none !important;
	font-size: 0 !important;
	width: 0 !important;
}

/* Select dropdown arrow */
/* .elementor-field-group .elementor-select-wrapper select {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23686878" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 24px !important;
	padding-right: 40px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
} */

/* ============================================
   Checkboxes
   ============================================ */

.elementor-field-type-checkbox .elementor-field-option input[type="checkbox"],
.elementor-field-type-acceptance input[type="checkbox"] {
	width: 24px !important;
	height: 24px !important;
	border: 1px solid #8a8797 !important;
	border-radius: 4px !important;
	background-color: white !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	position: relative !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	display: block;
}

.elementor-field-type-checkbox .elementor-field-option input[type="checkbox"]:checked,
.elementor-field-type-acceptance input[type="checkbox"]:checked {
	background-color: #0c28c4 !important;
	border-color: #0c28c4 !important;
}

.elementor-field-type-checkbox .elementor-field-option input[type="checkbox"]:checked::after,
.elementor-field-type-acceptance input[type="checkbox"]:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 14px !important;
	height: 14px !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7L6 10L11 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
}

/* Checkbox labels */
.elementor-field-type-checkbox .elementor-field-option label,
.elementor-field-type-acceptance label {
	font-family: 'Afacad', sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 28px !important;
	color: #131317 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* ============================================
   Submit Button — elcogen-button--primary elcogen-button--medium
   ============================================ */

.e-form__buttons .elementor-button,
.elementor-field-type-submit .elementor-button {
	/* Base (elcogen-button) */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	font-family: var(--font-family-body) !important;
	font-weight: var(--font-weight-bold) !important;
	text-decoration: none !important;
	border-style: solid !important;
	cursor: pointer !important;
	transition: var(--transition-all) !important;
	border-radius: var(--radius-pill) !important;
	white-space: nowrap !important;

	/* Primary (elcogen-button--primary) */
	background-color: var(--color-dark-neutral) !important;
	color: var(--color-white) !important;
	border-color: var(--color-dark-neutral) !important;

	/* Medium (elcogen-button--medium) */
	padding: var(--elcogen-button-padding-md) !important;
	font-size: var(--elcogen-button-font-size-md) !important;
	line-height: var(--line-height-body-medium) !important;
	border-width: var(--button-border-width) !important;
}

.e-form__buttons .elementor-button:hover,
.elementor-field-type-submit .elementor-button:hover {
	background-color: var(--color-cobalt-blue-400) !important;
	border-color: var(--color-cobalt-blue-400) !important;
	color: var(--color-white) !important;
}

.e-form__buttons .elementor-button:active,
.elementor-field-type-submit .elementor-button:active {
	background-color: var(--color-dark-neutral) !important;
	border-color: var(--color-dark-neutral) !important;
	color: var(--color-white) !important;
}

.e-form__buttons .elementor-button:focus-visible,
.elementor-field-type-submit .elementor-button:focus-visible {
	background-color: var(--color-dark-neutral-hover) !important;
	border-color: var(--color-dark-neutral-hover) !important;
	color: var(--color-white) !important;
	outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
	outline-offset: var(--focus-outline-offset) !important;
}

/* ============================================
   Error States
   ============================================ */

.elementor-field.elementor-field-error {
	border-color: #ac3c32 !important;
}

.elementor-message.elementor-message-danger {
	background-color: #f8d7da !important;
	border: 1px solid #f5c6cb !important;
	color: #721c24 !important;
	padding: 16px !important;
	border-radius: 4px !important;
	margin-bottom: 16px !important;
}

/* ============================================
   Success States
   ============================================ */

.elementor-message.elementor-message-success {
	background-color: #d4edda !important;
	border: 1px solid #c3e6cb !important;
	color: #155724 !important;
	padding: 16px !important;
	border-radius: 4px !important;
	margin-bottom: 16px !important;
}