/* ============================================================
   Contact Form 7 — pixel-perfect replica of contact-form.tsx
   Reference measurements (Tailwind → rem):
     space-y-6 = 1.5rem    |  space-y-4 = 1rem
     pt-4      = 1rem      |  py-2       = 0.5rem 0
     text-base = 1rem      |  text-xs    = 0.75rem
     text-sm   = 0.875rem  |  text-[0.95rem] = 0.95rem
     px-8      = 2rem      |  py-4       = 1rem
     w-6 h-6   = 1.5rem    |  gap-4      = 1rem
   ============================================================ */

/* wpautop disabled via wpcf7_autop_or_not filter (see Ciclic_Setup). */

.ciclic-form .wpcf7 {
	color: var(--ciclic-dark);
}

/* Vertical rhythm — matches `space-y-6` from the original. */
.ciclic-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Zero out any stray margin CF7 might add. */
.ciclic-form .wpcf7-form p,
.ciclic-form .wpcf7-form br {
	margin: 0;
	padding: 0;
}

.ciclic-form .wpcf7-form br {
	display: none;
}

/* --- Field (input / email / select) ----------------------- */
.ciclic-field {
	position: relative;
	padding-top: 1rem; /* pt-4 */
}

.ciclic-field > label {
	position: absolute;
	left: 0;
	top: 1rem; /* default: top-4 */
	font-size: 1rem; /* text-base */
	font-weight: 300;
	color: var(--ciclic-dark);
	pointer-events: none;
	transition:
		top 0.2s ease-out,
		font-size 0.2s ease-out;
}

.ciclic-field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.ciclic-field input,
.ciclic-field select {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ciclic-dark);
	border-radius: 0;
	padding: 0.5rem 0; /* py-2 */
	font-family: var(--font-sans);
	font-size: 1rem; /* text-base */
	font-weight: 300;
	color: var(--ciclic-dark);
	outline: none;
	transition: border-color 0.2s ease-out;
}

.ciclic-field input:focus,
.ciclic-field select:focus {
	border-color: var(--ciclic-blue);
}

/* Floating label: fires when focused OR filled.
   Inputs use placeholder=" " (a single space) so :placeholder-shown is the
   reliable "empty" check. CF7 wraps inputs in <span> so we use :has(). */
.ciclic-field:has(input:focus) > label,
.ciclic-field:has(input:not(:placeholder-shown)) > label {
	top: 0;
	font-size: 0.75rem; /* text-xs */
}

/* --- Select specifics ------------------------------------- */
.ciclic-field--select select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	padding-right: 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23190d36' stroke-width='2'%3E%3Cpath d='M4 6L8 10L12 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 16px 16px;
}

.ciclic-field--select:has(select:focus) > label,
.ciclic-field--select.is-filled > label {
	top: 0;
	font-size: 0.75rem;
}

.ciclic-field--select select option {
	background-color: var(--ciclic-cream);
	color: var(--ciclic-dark);
}

/* --- Row (sector + equipo) -------------------------------- */
.ciclic-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
	.ciclic-row {
		grid-template-columns: 1fr 1fr;
		gap: 2rem; /* md:gap-8 */
	}
}

/* --- Acceptance checkboxes wrapper ------------------------ */
/* Mirrors `space-y-4 pt-4` from the original. */
.ciclic-checks {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* space-y-4 */
	padding-top: 1rem; /* pt-4 */
}

/* The two acceptance controls live inside .ciclic-checks as direct wrapped spans. */
.ciclic-checks .wpcf7-form-control-wrap {
	display: block;
}

.ciclic-checks .wpcf7-acceptance {
	display: block;
}

.ciclic-checks .wpcf7-list-item {
	display: block;
	margin: 0;
}

.ciclic-checks .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 1rem; /* gap-4 */
	cursor: pointer;
	margin: 0;
	padding: 0;
	line-height: 1.375; /* snug — matches the label span below */
}

.ciclic-checks .wpcf7-acceptance input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	flex-shrink: 0;
	width: 24px; /* w-6 */
	height: 24px; /* h-6 */
	min-width: 24px;
	min-height: 24px;
	max-width: 24px;
	max-height: 24px;
	border: 1px solid rgba(25, 13, 54, 0.3);
	border-radius: 0.25rem; /* rounded */
	background: transparent;
	cursor: pointer;
	padding: 0;
	margin: 4px 0 0; /* mt-[4px] */
	position: relative;
	transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.ciclic-checks .wpcf7-acceptance input[type="checkbox"]:checked {
	background-color: var(--ciclic-blue);
	border-color: var(--ciclic-blue);
}

.ciclic-checks .wpcf7-acceptance input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 11px;
	border: solid var(--ciclic-dark);
	border-width: 0 2.5px 2.5px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

.ciclic-checks .wpcf7-list-item-label {
	font-size: 0.95rem; /* text-[0.95rem] */
	line-height: 1.375; /* leading-snug */
	font-weight: 300;
	color: var(--ciclic-dark);
	display: block;
	padding-top: 2px; /* align baseline with checkbox visual center */
}

.ciclic-checks .wpcf7-list-item-label a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	color: var(--ciclic-dark);
	transition: opacity 0.2s ease-out;
}

.ciclic-checks .wpcf7-list-item-label a:hover {
	opacity: 0.7;
}

/* --- Submit button ---------------------------------------- */
.ciclic-submit {
	display: flex;
	justify-content: flex-end;
	padding-top: 0;
}

.ciclic-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem; /* py-4 px-8 */
	background-color: var(--ciclic-blue);
	color: var(--ciclic-dark);
	border: 0;
	border-radius: 9999px;
	font-family: var(--font-sans);
	font-size: 0.875rem; /* text-sm */
	font-weight: 500; /* font-medium */
	cursor: pointer;
	transition: transform 0.2s ease-out;
	-webkit-appearance: none;
	appearance: none;
}

.ciclic-form .wpcf7-submit:hover {
	transform: scale(1.02);
}

.ciclic-form .wpcf7-submit:active {
	transform: scale(0.98);
}

/* --- CF7 messages and errors ------------------------------ */
.ciclic-form .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid currentColor !important;
	border-radius: 0.5rem !important;
	font-size: 0.875rem;
	font-weight: 300;
}

.ciclic-form .wpcf7-not-valid-tip {
	color: #b00020;
	font-size: 0.75rem;
	margin-top: 0.25rem;
	display: block;
}

.ciclic-form .wpcf7-spinner {
	background-color: var(--ciclic-dark);
}