/**
 * Agronorte - Contact Form 7 Styles
 * Custom styling matching the theme design.
 *
 * @package Agronorte
 * @since 1.0.0
 */

/* ─── Form Container ───────────────────────────────────── */

.agronorte-form {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--large);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	box-shadow: var(--wp--custom--shadow--small);
}

@media (max-width: 1024px) {
	.agronorte-form {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}
}

@media (max-width: 768px) {
	.agronorte-form {
		padding: var(--wp--preset--spacing--40);
	}
}

/* ─── Form Rows ────────────────────────────────────────── */

.agronorte-form .form-row {
	margin-bottom: 16px;
}

.agronorte-form .form-row:last-child {
	margin-bottom: 0;
}

/* Kill CF7 generated spacing */
.agronorte-form p {
	margin: 0;
}

.agronorte-form br {
	display: none;
}

.agronorte-form .wpcf7-form-control-wrap {
	display: block;
}

.agronorte-form .form-row-half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 576px) {
	.agronorte-form .form-row-half {
		grid-template-columns: 1fr;
	}

	.agronorte-form .form-checkboxes .wpcf7-checkbox {
		gap: 12px;
	}
}

/* ─── Labels ───────────────────────────────────────────── */

.agronorte-form label {
	display: block;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-800);
	margin-bottom: 6px;
}

/* ─── Inputs & Textareas ───────────────────────────────── */

.agronorte-form .agronorte-input,
.agronorte-form .agronorte-textarea,
.agronorte-form .agronorte-select-input,
.agronorte-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox) {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid rgba(209, 209, 209, 0.4);
	border-radius: var(--wp--custom--border-radius--small);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 14px;
	color: var(--wp--preset--color--neutral-900);
	background: transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.agronorte-form .agronorte-input:focus,
.agronorte-form .agronorte-textarea:focus,
.agronorte-form .agronorte-select-input:focus,
.agronorte-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: none;
}

.agronorte-form .agronorte-input::placeholder,
.agronorte-form .agronorte-textarea::placeholder,
.agronorte-form .wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--neutral-400);
}

/* Readonly product field */
.agronorte-form .form-producto-info .agronorte-input[readonly] {
	background-color: var(--wp--preset--color--neutral-50);
	color: var(--wp--preset--color--neutral-600);
	font-weight: 600;
	cursor: default;
}

/* ─── Custom Select ────────────────────────────────────── */

.agronorte-form .agronorte-select-input,
.agronorte-form select.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 44px;
	cursor: pointer;
}

/* Hide native select when replaced by custom dropdown */
.agronorte-form .form-provincia-custom select[aria-hidden="true"] {
	display: none !important;
}

/* ─── Textarea ─────────────────────────────────────────── */

.agronorte-form .agronorte-textarea,
.agronorte-form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

/* ─── Checkboxes ───────────────────────────────────────── */

.agronorte-form .form-checkboxes {
	margin-top: 8px;
}

.agronorte-form .form-checkboxes .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.agronorte-form .form-checkboxes .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
}

.agronorte-form .form-checkboxes .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--neutral-700);
	margin-bottom: 0;
	cursor: pointer;
}

.agronorte-form .form-checkboxes input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--wp--preset--color--neutral-300);
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	transition: all var(--wp--custom--transition--fast);
	flex-shrink: 0;
}

.agronorte-form .form-checkboxes input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.agronorte-form .form-checkboxes input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 6px;
	width: 6px;
	height: 10px;
	border: 2px solid var(--wp--preset--color--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.agronorte-form .form-checkboxes input[type="checkbox"]:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ─── Privacy / Acceptance ────────────────────────────── */

.agronorte-form .form-privacy .wpcf7-form-control-wrap,
.agronorte-form .form-privacy .wpcf7-acceptance,
.agronorte-form .form-privacy .wpcf7-form-control {
	border: none !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	width: auto !important;
}

.agronorte-form .form-privacy .wpcf7-list-item {
	margin: 0 !important;
}

.agronorte-form .form-privacy .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: #595959;
	cursor: pointer;
	margin-bottom: 0;
}

.agronorte-form .form-privacy a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.agronorte-form .form-privacy a:hover {
	color: var(--wp--preset--color--primary-dark, #2D6830);
}

.agronorte-form .form-privacy input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1.5px solid #c7c7c7;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	transition: all var(--wp--custom--transition--fast);
	flex-shrink: 0;
	margin-top: 1px;
}

.agronorte-form .form-privacy input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.agronorte-form .form-privacy input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: 1.5px solid var(--wp--preset--color--white);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.agronorte-form .form-privacy input[type="checkbox"]:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ─── Submit Button ────────────────────────────────────── */

.agronorte-form .form-submit {
	margin-top: var(--wp--preset--spacing--40);
}

.agronorte-form .agronorte-btn-submit,
.agronorte-form .wpcf7-submit {
	display: block;
	width: 100%;
	padding: 16px 32px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--border-radius--small);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--wp--custom--transition--fast);
}

.agronorte-form .agronorte-btn-submit:hover,
.agronorte-form .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* ─── Validation ───────────────────────────────────────── */

.agronorte-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--error) !important;
}

.agronorte-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--xs);
	margin-top: var(--wp--preset--spacing--10);
}

/* Response message — works on both light and dark contexts.
   Targets `.wpcf7 form .wpcf7-response-output` because CF7 renders the
   response-output as a sibling of `.agronorte-form`, not a descendant.
   CF7 keeps `aria-hidden="true"` on the empty container until a real
   message lands; we mirror that to keep the empty bubble out of the layout. */
.wpcf7 form .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 12px 0 0;
	padding: 14px 18px;
	border: none !important;
	border-radius: var(--wp--custom--border-radius--small);
	background: var(--wp--preset--color--surface, var(--wp--preset--color--neutral-100));
	color: var(--wp--preset--color--neutral-700);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 14px;
	line-height: 1.5;
}

/* Slide-down + fade-in when the message becomes active. CF7 toggles
   form.sent / form.invalid / form.failed / form.aborted classes when a
   message is rendered, so we tie the animation to those states. */
@keyframes agronorte-cf7-response-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	animation: agronorte-cf7-response-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wpcf7 form .wpcf7-response-output::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Success — soft green bg, primary green text, checkmark icon */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form .wpcf7-mail-sent-ok {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary);
}

.wpcf7 form.sent .wpcf7-response-output::before,
.wpcf7 form .wpcf7-mail-sent-ok::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Error / failed / aborted — soft red bg, red text */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form .wpcf7-mail-sent-ng,
.wpcf7 form .wpcf7-aborted {
	background: rgba(204, 68, 68, 0.08);
	color: #cc4444;
}

/* Validation / spam — soft amber bg, amber text */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form .wpcf7-validation-errors,
.wpcf7 form .wpcf7-spam-blocked {
	background: rgba(204, 132, 44, 0.1);
	color: #b56b18;
}

/* ─── Cotizar Form (Product Page) ──────────────────────── */

.agronorte-cotizar-form {
	margin-top: var(--wp--preset--spacing--50);
}

.agronorte-cotizar-form__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-900);
	margin-bottom: var(--wp--preset--spacing--40);
}

@keyframes agronorte-slide-down {
	from {
		opacity: 0;
		transform: translateY(-16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ─── Custom File Upload with Drag & Drop ─────────────── */

.agronorte-form .form-cv-custom .wpcf7-form-control-wrap {
	position: relative;
}

.agronorte-form .form-cv-custom input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.agronorte-file-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 28px 20px;
	border: 2px dashed var(--wp--preset--color--neutral-300);
	border-radius: var(--wp--custom--border-radius--medium);
	background-color: var(--wp--preset--color--neutral-50);
	cursor: pointer;
	transition: all var(--wp--custom--transition--fast);
	text-align: center;
}

.agronorte-file-dropzone:hover {
	border-color: var(--wp--preset--color--primary);
	background-color: rgba(54, 124, 43, 0.03);
}

.agronorte-file-dropzone.is-dragover {
	border-color: var(--wp--preset--color--primary);
	background-color: rgba(54, 124, 43, 0.06);
	box-shadow: 0 0 0 3px rgba(54, 124, 43, 0.1);
}

.agronorte-file-dropzone.has-file {
	border-color: var(--wp--preset--color--primary);
	border-style: solid;
	background-color: rgba(54, 124, 43, 0.03);
}

.agronorte-file-dropzone__icon {
	display: flex;
	color: var(--wp--preset--color--neutral-400);
	transition: color var(--wp--custom--transition--fast);
}

.agronorte-file-dropzone:hover .agronorte-file-dropzone__icon,
.agronorte-file-dropzone.is-dragover .agronorte-file-dropzone__icon {
	color: var(--wp--preset--color--primary);
}

.agronorte-file-dropzone__text {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--neutral-600);
}

.agronorte-file-dropzone__or {
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral-400);
}

.agronorte-file-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--border-radius--small);
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--wp--custom--transition--fast);
}

.agronorte-file-btn:hover {
	background-color: var(--wp--preset--color--primary-dark, #2D6830);
}

.agronorte-file-btn svg {
	flex-shrink: 0;
}

.agronorte-file-name {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

.agronorte-file-name:empty {
	display: none;
}

/* ─── Custom Select in Forms ──────────────────────────── */

.agronorte-form .agronorte-select {
	display: block;
	min-width: 100%;
}

.agronorte-form .agronorte-select__trigger {
	padding: 14px 18px;
	border: 1px solid rgba(209, 209, 209, 0.4);
	border-radius: var(--wp--custom--border-radius--small);
	background: transparent;
	font-family: var(--wp--preset--font-family--host-grotesk);
	font-size: 14px;
	color: var(--wp--preset--color--neutral-900);
}

.agronorte-form .agronorte-select__trigger:hover,
.agronorte-form .agronorte-select.is-open .agronorte-select__trigger,
.agronorte-form .agronorte-select__trigger:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: none;
}

.agronorte-form .agronorte-select__dropdown {
	border-radius: var(--wp--custom--border-radius--small);
}

/* ─── Spinner ──────────────────────────────────────────── */

.agronorte-form .wpcf7-spinner {
	margin: var(--wp--preset--spacing--30) auto 0;
	display: block;
}

/* CF7 6.1+ wraps the _wpcf7 hidden inputs in a <fieldset class="hidden-fields-container">.
   The browser renders fieldsets with a default border, so the wrapper shows up as an
   empty bordered box at the top of every form. Hide it. */
.hidden-fields-container {
	display: none;
}