/**
 * Rome GF Validator — estilos
 *
 * 0. Border-radius base 5px en todos los inputs/select/textarea de GF.
 * 1. Botón de envío deshabilitado (sin cursor de prohibición).
 * 2. Estados visuales por campo:
 *      .rome-gf-focused → borde dorado #dba231 con halo (gradiente)
 *      .rome-gf-valid   → fondo verde claro + tick verde dentro del input
 *      .rome-gf-invalid → fondo rojo claro + X roja dentro del input
 * 3. Detección de autofill vía @keyframes y :-webkit-autofill.
 */

/* ------------------------------------------------------------ */
/* 0. Border-radius base de los inputs                            */
/* ------------------------------------------------------------ */

/*
 * Aplicado sólo a los inputs DENTRO de formularios de Gravity Forms
 * (.gform_wrapper) para no afectar a otros formularios o widgets de
 * la web. Cubre los tipos de input más habituales más select y textarea.
 */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="time"],
.gform_wrapper select,
.gform_wrapper textarea {
	border-radius: 5px !important;
}

/* ------------------------------------------------------------ */
/* 1. Botón deshabilitado                                       */
/* ------------------------------------------------------------ */

/*
 * Importante: NO usamos el atributo HTML disabled para que el botón
 * siga capturando clicks y podamos mostrar el alert. Mantenemos el
 * cursor de puntero normal (no "prohibido") porque el botón sí es
 * clicable: lo único que hace es lanzar el alert si hay errores.
 */
.gform_wrapper .gform_button.rome-gf-disabled,
.gform_wrapper input[type="submit"].rome-gf-disabled,
.gform_wrapper button[type="submit"].rome-gf-disabled {
	opacity: 0.5;
	cursor: pointer;
	filter: grayscale(40%);
}

.gform_wrapper .gform_button.rome-gf-disabled:hover,
.gform_wrapper input[type="submit"].rome-gf-disabled:hover,
.gform_wrapper button[type="submit"].rome-gf-disabled:hover {
	opacity: 0.5;
	cursor: pointer;
}

/* ------------------------------------------------------------ */
/* 2. Estado: foco                                               */
/* ------------------------------------------------------------ */

.rome-gf-focused input[type="text"],
.rome-gf-focused input[type="email"],
.rome-gf-focused input[type="tel"],
.rome-gf-focused input[type="number"],
.rome-gf-focused input[type="url"],
.rome-gf-focused input[type="password"],
.rome-gf-focused input[type="search"],
.rome-gf-focused select,
.rome-gf-focused textarea {
	border-color: #dba231 !important;
	box-shadow:
		0 0 0 3px rgba(219, 162, 49, 0.25),
		0 2px 8px rgba(219, 162, 49, 0.35) !important;
	outline: none !important;
	transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* ------------------------------------------------------------ */
/* 3. Estado: válido (fondo verde + tick verde dentro)           */
/* ------------------------------------------------------------ */

.rome-gf-valid input[type="text"],
.rome-gf-valid input[type="email"],
.rome-gf-valid input[type="tel"],
.rome-gf-valid input[type="number"],
.rome-gf-valid input[type="url"],
.rome-gf-valid input[type="password"],
.rome-gf-valid input[type="search"],
.rome-gf-valid textarea {
	background-color: #e8f5e9 !important;
	border-color: #66bb6a !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 18px 18px;
	padding-right: 36px !important;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* Para selects el tick lo posicionamos a la izquierda de la flecha nativa. */
.rome-gf-valid select {
	background-color: #e8f5e9 !important;
	border-color: #66bb6a !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-position: right 28px center;
	background-size: 18px 18px;
	padding-right: 56px !important;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* ------------------------------------------------------------ */
/* 4. Estado: inválido (fondo rojo + X roja dentro)              */
/* ------------------------------------------------------------ */

.rome-gf-invalid input[type="text"],
.rome-gf-invalid input[type="email"],
.rome-gf-invalid input[type="tel"],
.rome-gf-invalid input[type="number"],
.rome-gf-invalid input[type="url"],
.rome-gf-invalid input[type="password"],
.rome-gf-invalid input[type="search"],
.rome-gf-invalid textarea {
	background-color: #ffebee !important;
	border-color: #ef5350 !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='3' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='6' y1='18' x2='18' y2='6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 18px 18px;
	padding-right: 36px !important;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.rome-gf-invalid select {
	background-color: #ffebee !important;
	border-color: #ef5350 !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='3' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='6' y1='18' x2='18' y2='6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 28px center;
	background-size: 18px 18px;
	padding-right: 56px !important;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* Si el campo tiene foco, ocultamos el icono temporalmente para no
   competir con el halo dorado. (En cualquier caso, al estar enfocado,
   ya no aplican las clases valid/invalid). */

/* ------------------------------------------------------------ */
/* 4-bis. Campos excluidos: SIN icono, CON fondo                 */
/* ------------------------------------------------------------ */

/*
 * Los campos excluidos (clase CSS configurable, por defecto "prefix"
 * en el wrapper .gfield) reciben fondo verde/rojo igual que el resto,
 * pero ocultamos el icono SVG y restablecemos el padding-right para
 * que el ancho del input no se vea afectado.
 *
 * El JS añade la clase `.rome-gf-no-icon` a estos campos al inicializar
 * el formulario.
 */
.rome-gf-no-icon.rome-gf-valid input,
.rome-gf-no-icon.rome-gf-valid select,
.rome-gf-no-icon.rome-gf-valid textarea,
.rome-gf-no-icon.rome-gf-invalid input,
.rome-gf-no-icon.rome-gf-invalid select,
.rome-gf-no-icon.rome-gf-invalid textarea {
	background-image: none !important;
	padding-right: revert !important;
}

/* ------------------------------------------------------------ */
/* 5. Detección de autofill                                      */
/* ------------------------------------------------------------ */

/*
 * El navegador (Chrome/Safari/Edge) no dispara `change`/`input` cuando
 * rellena un campo por autofill. Aprovechamos que sí aplica la
 * pseudo-clase :-webkit-autofill: definimos una @keyframes vacía y la
 * asociamos a esa pseudo-clase. Cuando el navegador rellena un input,
 * se dispara `animationstart` y nuestro JS escucha ese evento para
 * aplicar el feedback visual.
 */
@keyframes rome-gf-autofill-start {
	from { /* noop */ }
	to   { /* noop */ }
}

.gform_wrapper input:-webkit-autofill,
.gform_wrapper input:-webkit-autofill:hover,
.gform_wrapper input:-webkit-autofill:focus,
.gform_wrapper textarea:-webkit-autofill,
.gform_wrapper select:-webkit-autofill,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	animation-name: rome-gf-autofill-start;
	animation-duration: 0.001s;
}

/* ------------------------------------------------------------ */
/* 6. Campos de subida de archivo: zona drag-and-drop            */
/* ------------------------------------------------------------ */

/*
 * El JS añade la clase `.rome-gf-file-dropzone` al contenedor del campo
 * file y un span con la clase `.rome-gf-file-hint` con el mensaje
 * localizado. Aquí lo estilamos como una zona claramente "soltable".
 */
.gform_wrapper .ginput_container_fileupload.rome-gf-file-dropzone {
	position: relative;
	border: 2px dashed #c5c5c5;
	border-radius: 8px;
	padding: 2px 16px;
	background-color: #fafafa;
	text-align: center;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gform_wrapper .ginput_container_fileupload.rome-gf-file-dropzone:hover {
	border-color: #dba231;
	background-color: #fff8ec;
}

/* Estado: usuario arrastrando un archivo encima. */
.gform_wrapper .ginput_container_fileupload.rome-gf-file-dragover {
	border-color: #dba231 !important;
	border-style: solid !important;
	background-color: #fff4d6 !important;
}

/* Mensaje + icono de subida (cloud-upload estilo Lucide). */
.gform_wrapper .rome-gf-file-hint {
	display: block;
	color: #555;
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 1px 0;
	font-weight: 500;
	pointer-events: none; /* no roba clicks al input */
}

.gform_wrapper .rome-gf-file-hint::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 4px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

/* En dragover oscurecemos el icono y el texto para que se note. */
.gform_wrapper .ginput_container_fileupload.rome-gf-file-dragover .rome-gf-file-hint {
	color: #b88820;
}
.gform_wrapper .ginput_container_fileupload.rome-gf-file-dragover .rome-gf-file-hint::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b88820' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
}

/* El input file en sí: lo dejamos visible pero centrado bajo el mensaje. */
.gform_wrapper .ginput_container_fileupload.rome-gf-file-dropzone input[type="file"] {
	display: inline-block;
	max-width: 100%;
	cursor: pointer;
	background-color: transparent;
    padding: 5px;
}