/**
 * Pixa Form Styles
 *
 * Scoped under .pixa-form so we never affect forms outside the
 * Gravity Forms / CF7 wrappers that our adapters decorate.
 *
 * Every visual property reads from a CSS custom property set by
 * the theme-engine forms module (--pixa-form-opt-*).
 */

/* ----------------------------------------------------------------
   Root token bridge — local aliases consumed inside this scope
   ---------------------------------------------------------------- */
.pixa-form {
	--pf-height:          var(--pixa-form-opt-height, 48px);
	--pf-radius:          var(--pixa-form-opt-radius, 8px);
	--pf-border-w:        var(--pixa-form-opt-border-width, 1px);
	--pf-border-color:    var(--pixa-form-opt-border-color, #d1d5db);
	--pf-bg:              var(--pixa-form-opt-bg, #ffffff);
	--pf-text:            var(--pixa-form-opt-text-color, #1f2937);
	--pf-placeholder:     var(--pixa-form-opt-placeholder-color, #9ca3af);
	--pf-focus-border:    var(--pixa-form-opt-focus-border-color, #2343f9);
	--pf-focus-shadow:    0 0 0 3px color-mix(in srgb, var(--pf-focus-border) 18%, transparent);
	--pf-error:           var(--pixa-form-opt-error-color, #ef4444);
	--pf-label-color:     var(--pixa-form-opt-label-color, #374151);
	--pf-label-size:      var(--pixa-form-opt-label-size, 14px);
	--pf-label-weight:    var(--pixa-form-opt-label-weight, 500);
	--pf-spacing:         var(--pixa-form-opt-spacing, 16px);
	--pf-textarea-h:      var(--pixa-form-opt-textarea-height, 120px);
	--pf-checkbox-size:   var(--pixa-form-opt-checkbox-size, 18px);
	--pf-submit-bg:       var(--pixa-form-opt-submit-bg, #2343f9);
	--pf-submit-color:    var(--pixa-form-opt-submit-color, #ffffff);
	--pf-submit-radius:   var(--pixa-form-opt-submit-radius, 8px);
	--pf-submit-height:   var(--pixa-form-opt-submit-height, 48px);

	box-sizing: border-box;
	direction: rtl;
	font-family: inherit;
}

.pixa-form *,
.pixa-form *::before,
.pixa-form *::after {
	box-sizing: inherit;
}

/* ----------------------------------------------------------------
   Labels
   ---------------------------------------------------------------- */
.pixa-form label,
.pixa-form .gfield_label,
.pixa-form .wpcf7-form-control-wrap > label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--pf-label-size);
	font-weight: var(--pf-label-weight);
	color: var(--pf-label-color);
	line-height: 1.5;
}

.pixa-form .gfield_required,
.pixa-form .pixa-form-required {
	color: var(--pf-error);
	margin-inline-start: 2px;
}

/* ----------------------------------------------------------------
   Text inputs
   ---------------------------------------------------------------- */
.pixa-form input[type="text"],
.pixa-form input[type="email"],
.pixa-form input[type="tel"],
.pixa-form input[type="url"],
.pixa-form input[type="number"],
.pixa-form input[type="password"],
.pixa-form input[type="search"],
.pixa-form input[type="date"] {
	display: block;
	width: 100%;
	height: var(--pf-height);
	padding: 0 14px;
	border: var(--pf-border-w) solid var(--pf-border-color);
	border-radius: var(--pf-radius);
	background: var(--pf-bg);
	color: var(--pf-text);
	font-size: 14px;
	font-family: inherit;
	line-height: var(--pf-height);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pixa-form input::placeholder {
	color: var(--pf-placeholder);
	opacity: 1;
}

/* ----------------------------------------------------------------
   Focus state
   ---------------------------------------------------------------- */
.pixa-form input[type="text"]:focus,
.pixa-form input[type="email"]:focus,
.pixa-form input[type="tel"]:focus,
.pixa-form input[type="url"]:focus,
.pixa-form input[type="number"]:focus,
.pixa-form input[type="password"]:focus,
.pixa-form input[type="search"]:focus,
.pixa-form input[type="date"]:focus,
.pixa-form textarea:focus,
.pixa-form select:focus {
	border-color: var(--pf-focus-border);
	box-shadow: var(--pf-focus-shadow);
}

/* ----------------------------------------------------------------
   Textarea
   ---------------------------------------------------------------- */
.pixa-form textarea {
	display: block;
	width: 100%;
	min-height: var(--pf-textarea-h);
	padding: 12px 14px;
	border: var(--pf-border-w) solid var(--pf-border-color);
	border-radius: var(--pf-radius);
	background: var(--pf-bg);
	color: var(--pf-text);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pixa-form textarea::placeholder {
	color: var(--pf-placeholder);
	opacity: 1;
}

/* ----------------------------------------------------------------
   Select
   ---------------------------------------------------------------- */
.pixa-form select {
	display: block;
	width: 100%;
	height: var(--pf-height);
	padding: 0 14px;
	padding-inline-end: 36px;
	border: var(--pf-border-w) solid var(--pf-border-color);
	border-radius: var(--pf-radius);
	background-color: var(--pf-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06L6 9.31 2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 12px;
	color: var(--pf-text);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* ----------------------------------------------------------------
   Checkbox & Radio
   ---------------------------------------------------------------- */
.pixa-form input[type="checkbox"],
.pixa-form input[type="radio"] {
	width: var(--pf-checkbox-size);
	height: var(--pf-checkbox-size);
	margin: 0;
	margin-inline-end: 8px;
	border: var(--pf-border-w) solid var(--pf-border-color);
	background: var(--pf-bg);
	cursor: pointer;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
}

.pixa-form input[type="checkbox"] {
	border-radius: calc(var(--pf-radius) * 0.35);
}

.pixa-form input[type="radio"] {
	border-radius: 50%;
}

.pixa-form input[type="checkbox"]:checked {
	background-color: var(--pf-focus-border);
	border-color: var(--pf-focus-border);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10.28 2.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L1.72 6.78a.75.75 0 0 1 1.06-1.06L4.5 7.44l4.72-4.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}

.pixa-form input[type="radio"]:checked {
	border-color: var(--pf-focus-border);
	border-width: calc(var(--pf-checkbox-size) * 0.3);
	background-color: var(--pf-bg);
}

.pixa-form input[type="checkbox"]:focus,
.pixa-form input[type="radio"]:focus {
	box-shadow: var(--pf-focus-shadow);
}

/* Checkbox / Radio labels (inline alignment) */
.pixa-form .gfield_checkbox label,
.pixa-form .gfield_radio label,
.pixa-form .gchoice label,
.pixa-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	font-size: 14px;
	color: var(--pf-text);
	cursor: pointer;
	margin-bottom: 0;
}

.pixa-form .gfield_checkbox li,
.pixa-form .gfield_radio li,
.pixa-form .gchoice,
.pixa-form .wpcf7-list-item {
	margin-bottom: 8px;
	list-style: none;
}

/* ----------------------------------------------------------------
   Field wrappers / spacing
   ---------------------------------------------------------------- */
.pixa-form .gfield,
.pixa-form .wpcf7-form-control-wrap,
.pixa-form .pixa-form-field {
	margin-bottom: var(--pf-spacing);
}

/* ----------------------------------------------------------------
   Gravity Forms semantic sizes
   Keep GF's size intent but map to Pixa proportions.
   ---------------------------------------------------------------- */
.pixa-form .gfield--size-small input,
.pixa-form .pixa-field-size-small input {
	height: calc(var(--pf-height) - 8px);
	font-size: 13px;
}

.pixa-form .gfield--size-large input,
.pixa-form .pixa-field-size-large input {
	height: calc(var(--pf-height) + 8px);
	font-size: 15px;
}

/* ----------------------------------------------------------------
   Validation / Error state
   ---------------------------------------------------------------- */
.pixa-form .gfield_error input,
.pixa-form .gfield_error textarea,
.pixa-form .gfield_error select,
.pixa-form .wpcf7-not-valid,
.pixa-form .pixa-form-error input,
.pixa-form .pixa-form-error textarea,
.pixa-form .pixa-form-error select {
	border-color: var(--pf-error);
}

.pixa-form .gfield_error input:focus,
.pixa-form .gfield_error textarea:focus,
.pixa-form .gfield_error select:focus,
.pixa-form .wpcf7-not-valid:focus,
.pixa-form .pixa-form-error input:focus,
.pixa-form .pixa-form-error textarea:focus,
.pixa-form .pixa-form-error select:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-error) 18%, transparent);
}

.pixa-form .gfield_description.validation_message,
.pixa-form .wpcf7-not-valid-tip,
.pixa-form .pixa-form-error-message {
	color: var(--pf-error);
	font-size: 12px;
	margin-top: 4px;
}

/* Global form validation message */
.pixa-form .gform_validation_errors,
.pixa-form .wpcf7-validation-errors,
.pixa-form .wpcf7-mail-sent-ng {
	border: 1px solid var(--pf-error);
	background: color-mix(in srgb, var(--pf-error) 6%, transparent);
	color: var(--pf-error);
	border-radius: var(--pf-radius);
	padding: 12px 16px;
	margin-bottom: var(--pf-spacing);
	font-size: 14px;
}

/* Success message */
.pixa-form .wpcf7-mail-sent-ok,
.pixa-form .gform_confirmation_message {
	border: 1px solid #10b981;
	background: color-mix(in srgb, #10b981 6%, transparent);
	color: #059669;
	border-radius: var(--pf-radius);
	padding: 12px 16px;
	margin-bottom: var(--pf-spacing);
	font-size: 14px;
}

/* ----------------------------------------------------------------
   Submit button
   ---------------------------------------------------------------- */
.pixa-form input[type="submit"],
.pixa-form button[type="submit"],
.pixa-form .gform_button,
.pixa-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--pf-submit-height);
	min-width: 140px;
	padding: 0 28px;
	border: none;
	border-radius: var(--pf-submit-radius);
	background: var(--pf-submit-bg);
	color: var(--pf-submit-color);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	outline: none;
	transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pixa-form input[type="submit"]:hover,
.pixa-form button[type="submit"]:hover,
.pixa-form .gform_button:hover,
.pixa-form .wpcf7-submit:hover {
	opacity: 0.9;
}

.pixa-form input[type="submit"]:focus-visible,
.pixa-form button[type="submit"]:focus-visible,
.pixa-form .gform_button:focus-visible,
.pixa-form .wpcf7-submit:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-submit-bg) 30%, transparent);
}

.pixa-form input[type="submit"]:active,
.pixa-form button[type="submit"]:active,
.pixa-form .gform_button:active,
.pixa-form .wpcf7-submit:active {
	transform: scale(0.98);
}

/* ----------------------------------------------------------------
   GF multi-column layout support
   ---------------------------------------------------------------- */
.pixa-form .gform_fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-spacing);
}

.pixa-form .gfield--width-full,
.pixa-form .gfield {
	flex: 0 0 100%;
	max-width: 100%;
}

.pixa-form .gfield--width-half {
	flex: 0 0 calc(50% - var(--pf-spacing) / 2);
	max-width: calc(50% - var(--pf-spacing) / 2);
}

.pixa-form .gfield--width-third {
	flex: 0 0 calc(33.333% - var(--pf-spacing) * 2 / 3);
	max-width: calc(33.333% - var(--pf-spacing) * 2 / 3);
}

.pixa-form .gfield--width-quarter {
	flex: 0 0 calc(25% - var(--pf-spacing) * 3 / 4);
	max-width: calc(25% - var(--pf-spacing) * 3 / 4);
}

/* ----------------------------------------------------------------
   GF section / HTML field
   ---------------------------------------------------------------- */
.pixa-form .gsection {
	border-bottom: 1px solid var(--pf-border-color);
	padding-bottom: 8px;
	margin-bottom: var(--pf-spacing);
}

.pixa-form .gsection_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--pf-text);
}

/* ----------------------------------------------------------------
   File upload
   ---------------------------------------------------------------- */
.pixa-form input[type="file"] {
	font-family: inherit;
	font-size: 14px;
	color: var(--pf-text);
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
	.pixa-form .gfield--width-half,
	.pixa-form .gfield--width-third,
	.pixa-form .gfield--width-quarter {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ----------------------------------------------------------------
   Validation Errors & Notices
   ---------------------------------------------------------------- */
.pixa-form .gform_validation_errors,
.pixa-form .wpcf7-response-output {
	border: 1px solid var(--pf-error);
	background-color: color-mix(in srgb, var(--pf-error) 5%, transparent);
	color: var(--pf-error);
	padding: 12px 16px;
	border-radius: var(--pf-radius);
	margin-bottom: var(--pf-spacing);
	font-size: 14px;
	line-height: 1.6;
	font-weight: 500;
}

.pixa-form .gform_validation_errors h2.gform_submission_error {
	font-size: 15px;
	font-weight: bold;
	margin: 0 0 6px 0;
	color: var(--pf-error);
}

/* Field errors - CF7 */
.pixa-form .wpcf7-not-valid {
	border-color: var(--pf-error) !important;
}
.pixa-form .wpcf7-not-valid-tip {
	color: var(--pf-error);
	font-size: 12px;
	margin-top: 4px;
	display: block;
	font-weight: 500;
}

/* Field errors - Gravity Forms */
.pixa-form .gfield_error input[type="text"],
.pixa-form .gfield_error input[type="email"],
.pixa-form .gfield_error input[type="tel"],
.pixa-form .gfield_error input[type="url"],
.pixa-form .gfield_error input[type="number"],
.pixa-form .gfield_error input[type="password"],
.pixa-form .gfield_error textarea,
.pixa-form .gfield_error select {
	border-color: var(--pf-error) !important;
}

.pixa-form .gfield_error input[type="text"]:focus,
.pixa-form .gfield_error input[type="email"]:focus,
.pixa-form .gfield_error input[type="tel"]:focus,
.pixa-form .gfield_error input[type="url"]:focus,
.pixa-form .gfield_error input[type="number"]:focus,
.pixa-form .gfield_error input[type="password"]:focus,
.pixa-form .gfield_error textarea:focus,
.pixa-form .gfield_error select:focus {
	border-color: var(--pf-error) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-error) 18%, transparent) !important;
}

.pixa-form .gfield_validation_message,
.pixa-form .validation_message {
	color: var(--pf-error);
	font-size: 12px;
	margin-top: 6px;
	display: block;
	font-weight: 500;
}

.pixa-form .gfield_error .gfield_label {
	color: var(--pf-error) !important;
}