/*
 * forminator.css — Transportadora Estrella
 * Versión 2.0
 *
 * LÓGICA:
 *   Base  →  fondo claro (blanco / gris)  — aplica en Comunicados, blog, etc.
 *   .form-box .forminator-custom-form  →  overrides para el CTA oscuro (homepage, contacto)
 *
 * Pegar en: WordPress › Apariencia › Personalizar › CSS adicional
 * ─────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════ */
:root {
  --ts-blue: #0F5BA7;
  --ts-blue-deep: #083266;
  --ts-gold: #F5A623;
  --ts-gold-hov: #D9911A;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
}


/* ═══════════════════════════════════════════════
   RESET DE BASE — neutralizar estilos default
   de Forminator que rompen ambos temas
═══════════════════════════════════════════════ */

.forminator-custom-form {
  font-family: var(--font-body) !important;
}

/* Eliminar sombras y bordes raros del wrapper */
.forminator-custom-form .forminator-ui {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}


/* ═══════════════════════════════════════════════
   ESPACIADO DE FILAS — más compacto
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-row {
  margin-bottom: 0 !important;
}

.forminator-custom-form .forminator-col {
  padding-bottom: 12px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.forminator-custom-form .forminator-row .forminator-col:first-child {
  padding-left: 0 !important;
}

.forminator-custom-form .forminator-row .forminator-col:last-child {
  padding-right: 0 !important;
}


/* ═══════════════════════════════════════════════
   LABELS — BASE (fondo claro)
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-label {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.forminator-custom-form .forminator-required {
  color: var(--ts-gold) !important;
}


/* ═══════════════════════════════════════════════
   INPUTS Y TEXTAREA — BASE (fondo claro)
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="number"] {
  background: #ffffff !important;
  border: 1.5px solid #CCCCCC !important;
  border-radius: 6px !important;
  color: #333333 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  padding: 10px 13px !important;
  width: 100% !important;
  transition: border-color .18s, box-shadow .18s !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.forminator-custom-form .forminator-input::placeholder,
.forminator-custom-form .forminator-textarea::placeholder {
  color: #AAAAAA !important;
}

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus {
  border-color: var(--ts-blue) !important;
  box-shadow: 0 0 0 3px rgba(15, 91, 167, .08) !important;
}

.forminator-custom-form .forminator-textarea {
  resize: vertical !important;
  min-height: 110px !important;
}


/* ═══════════════════════════════════════════════
   SELECTS — BASE (fondo claro)
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-select--field,
.forminator-custom-form select {
  background: #ffffff !important;
  border: 1.5px solid #CCCCCC !important;
  border-radius: 6px !important;
  color: #333333 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  height: 40px !important;
  padding: 0 36px 0 13px !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999999' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

.forminator-custom-form .forminator-select--field:focus {
  border-color: var(--ts-blue) !important;
  box-shadow: 0 0 0 3px rgba(15, 91, 167, .08) !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════
   SELECT2 — BASE (fondo claro)
═══════════════════════════════════════════════ */

.forminator-custom-form .select2-container .select2-selection--single {
  background: #ffffff !important;
  border: 1.5px solid #CCCCCC !important;
  border-radius: 6px !important;
  height: 40px !important;
}

.forminator-custom-form .select2-container--open .select2-selection--single {
  border-color: var(--ts-blue) !important;
}

.forminator-custom-form .select2-container .select2-selection--single .select2-selection__rendered {
  color: #333333 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 40px !important;
  padding-left: 13px !important;
  padding-right: 32px !important;
}

.forminator-custom-form .select2-container .select2-selection--single .select2-selection__arrow {
  display: none !important;
}

/* Dropdown */
.select2-dropdown {
  background: #ffffff !important;
  border: 1.5px solid #CCCCCC !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1) !important;
}

.select2-results__option {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: #333333 !important;
  padding: 9px 13px !important;
}

.select2-results__option--highlighted {
  background: #EEF3FA !important;
  color: var(--ts-blue) !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(15, 91, 167, .08) !important;
  color: var(--ts-blue) !important;
}

.select2-search--dropdown .select2-search__field {
  background: #f5f5f5 !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 4px !important;
  color: #333333 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════
   GRUPO DE CAMPOS (Información del servicio)
   Neutralizar el contenedor interno de Forminator
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-field--group,
.forminator-custom-form .forminator-field-group,
.forminator-custom-form .forminator-group {
  background: transparent !important;
  border: 1.5px solid #CCCCCC !important;
  border-radius: 8px !important;
  padding: 14px 14px 2px !important;
  margin-bottom: 0 !important;
}

.forminator-custom-form .forminator-field--group .forminator-col,
.forminator-custom-form .forminator-field-group .forminator-col {
  padding-bottom: 12px !important;
}

/* Label del grupo */
.forminator-custom-form .forminator-group-label,
.forminator-custom-form [class*="group"]>.forminator-label {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  margin-bottom: 12px !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════
   BOTÓN DE ENVÍO — igual en ambos temas
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-button-submit,
.forminator-custom-form button[type="submit"] {
  background: var(--ts-gold) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 13px 28px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background .18s !important;
  box-shadow: none !important;
  margin-top: 4px !important;
}

.forminator-custom-form .forminator-button-submit:hover {
  background: var(--ts-gold-hov) !important;
}

.forminator-custom-form .forminator-row-last {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════
   MENSAJES DE RESPUESTA
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-response-message {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  border-radius: 7px !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}

.forminator-custom-form .forminator-response-message.forminator-success {
  background: rgba(26, 140, 78, .08) !important;
  border: 1px solid rgba(26, 140, 78, .25) !important;
  color: #1A8C4E !important;
}

.forminator-custom-form .forminator-response-message.forminator-error {
  background: rgba(220, 60, 60, .07) !important;
  border: 1px solid rgba(220, 60, 60, .22) !important;
  color: #cc3333 !important;
}


/* ═══════════════════════════════════════════════
   ERRORES DE CAMPO
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-input.forminator-has_error,
.forminator-custom-form .forminator-textarea.forminator-has_error,
.forminator-custom-form .forminator-select--field.forminator-has_error {
  border-color: #cc3333 !important;
}

.forminator-custom-form .forminator-error-message {
  font-size: 11px !important;
  color: #cc3333 !important;
  margin-top: 4px !important;
}


/* ═══════════════════════════════════════════════
   SPINNER
═══════════════════════════════════════════════ */

.forminator-custom-form .forminator-spinner {
  border-color: rgba(0, 0, 0, .12) !important;
  border-top-color: var(--ts-gold) !important;
}


/* ═══════════════════════════════════════════════
   CAPTCHA / HONEYPOT
═══════════════════════════════════════════════ */

.forminator-custom-form .grecaptcha-badge {
  visibility: hidden !important;
}

.forminator-custom-form label.forminator-hidden {
  display: none !important;
}

.forminator-custom-form .forminator-row.forminator-hidden {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   OVERRIDE TEMA OSCURO — solo cuando el form está en .form-box
   (CTA de homepage y página Contáctanos)
═══════════════════════════════════════════════════════════════ */

/* Labels */
.form-box .forminator-custom-form .forminator-label {
  color: rgba(255, 255, 255, .5) !important;
}

/* Inputs */
.form-box .forminator-custom-form .forminator-input,
.form-box .forminator-custom-form .forminator-textarea,
.form-box .forminator-custom-form input[type="text"],
.form-box .forminator-custom-form input[type="email"],
.form-box .forminator-custom-form input[type="tel"],
.form-box .forminator-custom-form input[type="number"] {
  background: rgba(255, 255, 255, .07) !important;
  border: 1.5px solid rgba(255, 255, 255, .15) !important;
  color: #ffffff !important;
}

.form-box .forminator-custom-form .forminator-input::placeholder,
.form-box .forminator-custom-form .forminator-textarea::placeholder {
  color: rgba(255, 255, 255, .22) !important;
}

.form-box .forminator-custom-form .forminator-input:focus,
.form-box .forminator-custom-form .forminator-textarea:focus {
  border-color: rgba(245, 166, 35, .5) !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .07) !important;
}

/* Selects */
.form-box .forminator-custom-form .forminator-select--field,
.form-box .forminator-custom-form select {
  background-color: rgba(255, 255, 255, .07) !important;
  border: 1.5px solid rgba(255, 255, 255, .15) !important;
  color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.form-box .forminator-custom-form .forminator-select--field:focus {
  border-color: rgba(245, 166, 35, .5) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .07) !important;
}

/* Select2 dark */
.form-box .forminator-custom-form .select2-container .select2-selection--single {
  background: rgba(255, 255, 255, .07) !important;
  border: 1.5px solid rgba(255, 255, 255, .15) !important;
}

.form-box .forminator-custom-form .select2-container .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
}

/* Grupo de campos dark */
.form-box .forminator-custom-form .forminator-field--group,
.form-box .forminator-custom-form .forminator-field-group,
.form-box .forminator-custom-form .forminator-group {
  background: rgba(255, 255, 255, .04) !important;
  border: 1.5px solid rgba(255, 255, 255, .1) !important;
}

.form-box .forminator-custom-form .forminator-group-label,
.form-box .forminator-custom-form [class*="group"]>.forminator-label {
  color: rgba(255, 255, 255, .3) !important;
}

/* Mensajes dark */
.form-box .forminator-custom-form .forminator-response-message.forminator-success {
  background: rgba(37, 211, 102, .1) !important;
  border: 1px solid rgba(37, 211, 102, .25) !important;
  color: #25D366 !important;
}

.form-box .forminator-custom-form .forminator-response-message.forminator-error {
  background: rgba(220, 60, 60, .08) !important;
  border: 1px solid rgba(220, 60, 60, .22) !important;
  color: #ff7b7b !important;
}

.form-box .forminator-custom-form .forminator-error-message {
  color: #ff7b7b !important;
}