/*
Theme Name: Zabitt Child
Theme URI: https://zabitt.com
Description: Child theme de Hello Elementor para personalizaciones de Zabitt.
Author: Zabitt
Author URI: https://zabitt.com
Template: hello-elementor
Version: 1.0.0
Text Domain: zabitt-child
*/

/*
 * ============================================================
 * FORMINATOR OVERRIDES — Módulo de contacto bilingüe
 * ============================================================
 * FUENTE ÚNICA DE VERDAD para el CSS de Forminator.
 * No hay reglas .forminator-* en el <style> inline de functions.php.
 *
 * Prefijo obligatorio en todos los selectores: .zb-contact-close-form
 * Esto evita colisiones con otros formularios de Forminator en el sitio.
 * ============================================================
 */


/* ----------------------------------------------------------
   1. RESET DEL SHELL DE FORMINATOR
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui.forminator-custom-form {
	background:    transparent !important;
	padding:       0           !important;
	margin:        0           !important;
	border:        none        !important;
	box-shadow:    none        !important;
}


/* ----------------------------------------------------------
   2. LAYOUT: 2 COLUMNAS EN DESKTOP
   Requiere que los campos estén en el mismo .forminator-row
   en el admin de Forminator (drag & drop en el builder).
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui .forminator-row {
	display:       flex        !important;
	flex-wrap:     wrap        !important;
	margin-left:  -7px        !important;
	margin-right: -7px        !important;
}

.zb-contact-close-form .forminator-ui .forminator-col {
	padding-left:  7px        !important;
	padding-right: 7px        !important;
	margin-bottom: 14px       !important;
	box-sizing:    border-box !important;
}

/* Columna mitad — 2 campos por fila */
.zb-contact-close-form .forminator-ui .forminator-col.forminator-col-6 {
	width:    50% !important;
	max-width:50% !important;
	flex:  0 0 50% !important;
}

/* Columna completa — 1 campo por fila */
.zb-contact-close-form .forminator-ui .forminator-col.forminator-col-12 {
	width:    100% !important;
	max-width:100% !important;
	flex:  0 0 100% !important;
}

.zb-contact-close-form .forminator-ui .forminator-field {
	margin: 0 !important;
}


/* ----------------------------------------------------------
   3. LABELS
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui label.forminator-label,
.zb-contact-close-form .forminator-ui .forminator-label {
	display:         block  !important;
	margin:          0 0 8px !important;
	color:           #ffffff !important;
	font-size:       12px    !important;
	font-weight:     800     !important;
	letter-spacing: .15px   !important;
	line-height:     1.4     !important;
}

.zb-contact-close-form .forminator-ui .forminator-required {
	color: #ffffff !important;
}


/* ----------------------------------------------------------
   4. INPUTS DE TEXTO Y TEXTAREA
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.zb-contact-close-form .forminator-ui
	textarea {
	width:          100%                                                                           !important;
	border:         none                                                                           !important;
	outline:        none                                                                           !important;
	border-radius:  18px                                                                           !important;
	background:     rgba(255,255,255,.96)                                                          !important;
	color:          #172039                                                                        !important;
	font-family:   'Sora',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif        !important;
	font-size:      14px                                                                           !important;
	box-shadow:     inset 0 0 0 1px rgba(19,33,74,.06)                                            !important;
	transition:     transform .2s ease, box-shadow .2s ease, background .2s ease                  !important;
}

.zb-contact-close-form .forminator-ui
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
	min-height: 54px   !important;
	padding:    0 16px !important;
}

.zb-contact-close-form .forminator-ui textarea {
	min-height: 132px   !important;
	padding:    16px    !important;
	resize:     vertical !important;
}

.zb-contact-close-form .forminator-ui input::placeholder,
.zb-contact-close-form .forminator-ui textarea::placeholder {
	color:   #6A7188 !important;
	opacity: 1       !important;
}

.zb-contact-close-form .forminator-ui
	input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.zb-contact-close-form .forminator-ui
	textarea:focus {
	background: #ffffff !important;
	box-shadow:
		inset 0 0 0 2px rgba(77,107,255,.24),
		0 10px 24px rgba(16,24,40,.10) !important;
	transform: translateY(-1px) !important;
}


/* ----------------------------------------------------------
   5. SELECT: CAJA BLANCA VISIBLE CON FLECHA AZUL

   Estrategia:
   - El WRAPPER (.forminator-field-select o .forminator-select)
     recibe el fondo blanco, border-radius y overflow:hidden.
   - El <select> es transparente encima del wrapper blanco.
   - La flecha va en ::after del wrapper (nunca en el <select>).

   Cubrimos las dos variantes más comunes del markup de Forminator:
     a) <div class="forminator-field forminator-field-select">
           <select class="forminator-select--field">
        b) <div class="forminator-select">
              <select>
   ---------------------------------------------------------- */

/* Wrapper — fondo blanco */
.zb-contact-close-form .forminator-ui .forminator-field-select,
.zb-contact-close-form .forminator-ui .forminator-select {
	position:      relative              !important;
	background:    rgba(255,255,255,.96) !important;
	border-radius: 18px                  !important;
	box-shadow:    inset 0 0 0 1px rgba(19,33,74,.06) !important;
	overflow:      hidden                !important;
}

/* Elemento <select> — transparente sobre el wrapper */
.zb-contact-close-form .forminator-ui select,
.zb-contact-close-form .forminator-ui .forminator-select--field {
	width:               100%       !important;
	min-height:          54px       !important;
	height:              54px       !important;
	padding:             0 46px 0 16px !important;
	border:              none       !important;
	outline:             none       !important;
	background:          transparent !important;
	color:               #172039   !important;
	font-family:        'Sora',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
	font-size:           14px       !important;
	appearance:          none       !important;
	-webkit-appearance:  none       !important;
	-moz-appearance:     none       !important;
	box-shadow:          none       !important;
	cursor:              pointer    !important;
}

/* Flecha personalizada — azul, en el wrapper */
.zb-contact-close-form .forminator-ui .forminator-field-select::after,
.zb-contact-close-form .forminator-ui .forminator-select::after {
	content:        ""                          !important;
	position:       absolute                    !important;
	right:          18px                        !important;
	top:            50%                         !important;
	width:          10px                        !important;
	height:         10px                        !important;
	border-right:   2px solid #4D6BFF           !important;
	border-bottom:  2px solid #4D6BFF           !important;
	transform:      translateY(-60%) rotate(45deg) !important;
	pointer-events: none                        !important;
	display:        block                       !important;
	z-index:        1                           !important;
}


/* ----------------------------------------------------------
   6. CONSENTIMIENTO Y CHECKBOX
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui .forminator-consent,
.zb-contact-close-form .forminator-ui .forminator-checkbox {
	margin-top: 2px !important;
}

.zb-contact-close-form .forminator-ui .forminator-consent .forminator-field,
.zb-contact-close-form .forminator-ui .forminator-checkbox .forminator-field {
	display:     flex        !important;
	align-items: flex-start  !important;
	gap:         10px        !important;
}

/* Checkbox — tamaño y posición */
.zb-contact-close-form .forminator-ui .forminator-consent input[type="checkbox"],
.zb-contact-close-form .forminator-ui .forminator-checkbox input[type="checkbox"] {
	width:        auto     !important;
	min-height:   auto     !important;
	margin-top:   3px      !important;
	flex-shrink:  0        !important;
	accent-color: #ffffff  !important;
	transform:    scale(1.05) !important;
	box-shadow:   none     !important;
	border-radius:0        !important;
	background:   transparent !important;
}

/*
 * Texto del consentimiento — blanco con contraste correcto.
 * Cubrimos 4 selectores posibles porque Forminator varía el markup
 * entre versiones (.forminator-label, .forminator-field--label,
 * texto directo en <p>, y .forminator-consent-text).
 */
.zb-contact-close-form .forminator-ui .forminator-consent .forminator-label,
.zb-contact-close-form .forminator-ui .forminator-checkbox .forminator-label,
.zb-contact-close-form .forminator-ui .forminator-consent .forminator-field--label,
.zb-contact-close-form .forminator-ui .forminator-checkbox .forminator-field--label {
	margin:          0               !important;
	color:           rgba(255,255,255,.92) !important;
	font-size:       13px            !important;
	line-height:     1.6             !important;
	font-weight:     500             !important;
	letter-spacing:  0               !important;
}

.zb-contact-close-form .forminator-ui .forminator-consent p,
.zb-contact-close-form .forminator-ui .forminator-checkbox p {
	margin: 0                        !important;
	color:  rgba(255,255,255,.92)    !important;
}


/* ----------------------------------------------------------
   7. BOTÓN SUBMIT
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui .forminator-button,
.zb-contact-close-form .forminator-ui .forminator-button-submit,
.zb-contact-close-form .forminator-ui button[type="submit"] {
	display:          inline-flex    !important;
	align-items:      center         !important;
	justify-content:  center         !important;
	min-height:       54px           !important;
	padding:          0 22px         !important;
	border:           none           !important;
	border-radius:    999px          !important;
	background:       #ffffff        !important;
	color:            #172039        !important;
	font-family:     'Sora',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
	font-size:        14px           !important;
	font-weight:      800            !important;
	cursor:           pointer        !important;
	box-shadow:       0 10px 22px rgba(16,24,40,.14) !important;
	transition:       transform .24s ease, box-shadow .24s ease !important;
	white-space:      nowrap         !important;
	margin-top:       2px            !important;
}

.zb-contact-close-form .forminator-ui .forminator-button:hover,
.zb-contact-close-form .forminator-ui .forminator-button-submit:hover,
.zb-contact-close-form .forminator-ui button[type="submit"]:hover {
	transform:  translateY(-1px)                     !important;
	box-shadow: 0 12px 24px rgba(16,24,40,.18)       !important;
}


/* ----------------------------------------------------------
   8. MENSAJES DE RESPUESTA Y ERROR
   ---------------------------------------------------------- */

.zb-contact-close-form .forminator-ui .forminator-response-message,
.zb-contact-close-form .forminator-ui .forminator-error-message {
	border:        none         !important;
	border-radius: 16px         !important;
	padding:       14px 16px    !important;
	font-size:     13px         !important;
	line-height:   1.6          !important;
	margin-top:    12px         !important;
}

.zb-contact-close-form .forminator-ui .forminator-response-message {
	background: rgba(255,255,255,.14) !important;
	color:      #ffffff               !important;
}

.zb-contact-close-form .forminator-ui .forminator-error-message {
	background: rgba(255,255,255,.12) !important;
	color:      #ffffff               !important;
}

.zb-contact-close-form .forminator-ui .forminator-description {
	color:     rgba(255,255,255,.72) !important;
	font-size: 12px                  !important;
}


/* ----------------------------------------------------------
   9. MÓVIL: TODO A UNA COLUMNA
   ---------------------------------------------------------- */

@media (max-width: 768px) {
	.zb-contact-close-form .forminator-ui .forminator-col.forminator-col-6,
	.zb-contact-close-form .forminator-ui .forminator-col.forminator-col-12 {
		width:     100% !important;
		max-width: 100% !important;
		flex:   0 0 100% !important;
	}

	.zb-contact-close-form .forminator-ui .forminator-button,
	.zb-contact-close-form .forminator-ui .forminator-button-submit,
	.zb-contact-close-form .forminator-ui button[type="submit"] {
		width: 100% !important;
	}
}

/* ============================================================
   HOTFIX FINAL — SELECT BLANCO + CONSENTIMIENTO LEGIBLE
   Pegar al final de style.css
   ============================================================ */

/* 1) SELECT: forzar fondo blanco real en todas las capas comunes */
.zb-contact-close-form .forminator-ui .forminator-field-select,
.zb-contact-close-form .forminator-ui .forminator-select,
.zb-contact-close-form .forminator-ui .forminator-select .forminator-field,
.zb-contact-close-form .forminator-ui .forminator-field-select .forminator-field {
	background: #ffffff !important;
	border-radius: 18px !important;
	box-shadow: inset 0 0 0 1px rgba(19,33,74,.08) !important;
	overflow: hidden !important;
}

/* El select real transparente sobre wrapper blanco */
.zb-contact-close-form .forminator-ui .forminator-field-select select,
.zb-contact-close-form .forminator-ui .forminator-select select,
.zb-contact-close-form .forminator-ui select.forminator-select--field,
.zb-contact-close-form .forminator-ui .forminator-field-select .forminator-select--field {
	background: transparent !important;
	color: #172039 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 18px !important;
	min-height: 54px !important;
	height: 54px !important;
	padding: 0 46px 0 16px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Placeholder / opción inicial del select */
.zb-contact-close-form .forminator-ui .forminator-field-select select:invalid,
.zb-contact-close-form .forminator-ui .forminator-select select:invalid,
.zb-contact-close-form .forminator-ui select.forminator-select--field:invalid {
	color: #6A7188 !important;
}

/* Flecha del select */
.zb-contact-close-form .forminator-ui .forminator-field-select::after,
.zb-contact-close-form .forminator-ui .forminator-select::after {
	content: "" !important;
	position: absolute !important;
	right: 18px !important;
	top: 50% !important;
	width: 10px !important;
	height: 10px !important;
	border-right: 2px solid #4D6BFF !important;
	border-bottom: 2px solid #4D6BFF !important;
	transform: translateY(-60%) rotate(45deg) !important;
	pointer-events: none !important;
	display: block !important;
	z-index: 3 !important;
}

/* 2) CONSENTIMIENTO: texto blanco y mejor contraste */
.zb-contact-close-form .forminator-ui .forminator-consent,
.zb-contact-close-form .forminator-ui .forminator-checkbox {
	color: rgba(255,255,255,.96) !important;
}

.zb-contact-close-form .forminator-ui .forminator-consent *,
.zb-contact-close-form .forminator-ui .forminator-checkbox * {
	color: rgba(255,255,255,.96) !important;
}

.zb-contact-close-form .forminator-ui .forminator-consent .forminator-label,
.zb-contact-close-form .forminator-ui .forminator-checkbox .forminator-label,
.zb-contact-close-form .forminator-ui .forminator-consent .forminator-field--label,
.zb-contact-close-form .forminator-ui .forminator-checkbox .forminator-field--label,
.zb-contact-close-form .forminator-ui .forminator-consent p,
.zb-contact-close-form .forminator-ui .forminator-checkbox p,
.zb-contact-close-form .forminator-ui .forminator-consent label,
.zb-contact-close-form .forminator-ui .forminator-checkbox label,
.zb-contact-close-form .forminator-ui .forminator-consent span,
.zb-contact-close-form .forminator-ui .forminator-checkbox span {
	color: rgba(255,255,255,.96) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

/* Checkbox visible sobre fondo azul */
.zb-contact-close-form .forminator-ui .forminator-consent input[type="checkbox"],
.zb-contact-close-form .forminator-ui .forminator-checkbox input[type="checkbox"] {
	accent-color: #ffffff !important;
}