/* =========================================================================
   MCI — bloque del pie: "Sigue tu pedido" + suscripcion
   =========================================================================

   Son dos sistemas distintos, de ahi que no combinaran:

   - "Consultar" lo pinta un shortcode con estilos INLINE
     (background: linear-gradient(90deg,#050A30,#01051A); border-radius: 4px).
     Los estilos en linea solo se pueden vencer con !important; por eso los
     lleva este archivo donde toca ese formulario.

   - "Suscribirse" es un widget de formulario de Elementor (elemento e419733),
     con su propio radio en pildora definido en el CSS que genera Elementor.

   Se unifican los dos: misma altura, mismo radio, mismo boton. Y se corrige
   que "Consultar" caia a una tercera linea — el `flex-wrap: wrap` del
   formulario mas el `min-width: 300px` del input no dejaban sitio al boton.
   La etiqueta pasa a ocupar su propia fila y el input y el boton quedan
   juntos, igual que en el bloque de suscripcion.

   Este archivo se encola en todo el sitio (el pie esta en todas las paginas),
   a diferencia de checkout.css. Por eso es corto y sus selectores estan
   acotados a estos dos bloques.
   ========================================================================= */

.mci-tracking-wrapper,
.elementor-element-e419733 {
	--mci-footer-btn-bg: linear-gradient(90deg, #050A30, #01051A);
	--mci-footer-field-h: 46px;
	--mci-footer-radius: 6px;
	--mci-footer-brd: rgba(255, 255, 255, .25);
}


/* -------------------------------------------------------------------------
   Seguimiento de pedido
   ------------------------------------------------------------------------- */

.mci-tracking-wrapper form {
	align-items: center;
	gap: 10px;
}

/* La etiqueta ocupa fila propia para que input y boton queden en la misma. */
.mci-tracking-wrapper form > label {
	flex: 1 1 100% !important;
	margin-bottom: 2px;
	font-size: 14px;
}

.mci-tracking-wrapper form > input#order_id {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: var(--mci-footer-field-h);
	padding: 10px 14px !important;
	border: 1px solid var(--mci-footer-brd) !important;
	border-radius: var(--mci-footer-radius) !important;
	font-size: 14px;
	line-height: 1.4;
}


/* -------------------------------------------------------------------------
   Suscripcion (formulario de Elementor)
   ------------------------------------------------------------------------- */

.elementor-element-e419733 .elementor-form-fields-wrapper {
	align-items: center;
}

.elementor-element-e419733 .elementor-field-textual {
	height: var(--mci-footer-field-h);
	padding: 10px 14px;
	border: 1px solid var(--mci-footer-brd);
	border-radius: var(--mci-footer-radius);
	font-size: 14px;
	line-height: 1.4;
}


/* -------------------------------------------------------------------------
   Los dos botones, identicos

   "Consultar" ya usaba este degradado en linea; se replica en "Suscribirse"
   y se igualan alto, radio, tipografia y espaciado.
   ------------------------------------------------------------------------- */

.mci-tracking-wrapper form > button[name="check_order"],
.elementor-element-e419733 .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--mci-footer-field-h);
	min-height: var(--mci-footer-field-h);
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: var(--mci-footer-radius) !important;
	background: var(--mci-footer-btn-bg) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.mci-tracking-wrapper form > button[name="check_order"]:hover,
.elementor-element-e419733 .elementor-button:hover {
	filter: brightness(1.35);
}

.mci-tracking-wrapper form > button[name="check_order"]:active,
.elementor-element-e419733 .elementor-button:active {
	transform: translateY(1px);
}

.mci-tracking-wrapper form > button[name="check_order"]:focus-visible,
.elementor-element-e419733 .elementor-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   Movil: el boton pasa a ancho completo bajo su campo
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {

	.mci-tracking-wrapper form > input#order_id,
	.mci-tracking-wrapper form > button[name="check_order"] {
		flex: 1 1 100% !important;
		width: 100%;
	}

	.elementor-element-e419733 .elementor-button {
		width: 100%;
	}
}


/* =========================================================================
   Igualar los dos bloques

   Quedaban tres diferencias:

   1. Desalineados en vertical. El bloque de seguimiento tiene una etiqueta
      encima y el de suscripcion no, asi que sus filas de campo nunca podian
      coincidir. Se le da al de suscripcion una etiqueta equivalente, con el
      mismo tipo de letra y el mismo espacio debajo. Ahora ambas filas
      arrancan a la misma altura.

   2. Tipo de letra distinto. Los campos y botones no heredaban la fuente del
      sitio: cada sistema traia la suya. Se fuerza `font-family: inherit` en
      los cuatro elementos.

   3. Separacion entre campo y boton solo en el de la izquierda. El formulario
      del shortcode trae `gap: 10px` en linea; el de Elementor pega las
      columnas. Se replica la misma separacion a la derecha.

   NOTA: la etiqueta de la derecha es texto escrito en el CSS (`content`).
   Es la unica via sin editar el widget de Elementor, pero implica que no pasa
   por traducciones ni se edita desde wp-admin. Si conviene que sea editable,
   hay que ponerla como titulo dentro del propio widget.
   ========================================================================= */

/* --- 1. Etiqueta equivalente para el bloque de suscripcion -------------- */

.elementor-element-e419733 .elementor-widget-container::before {
	content: "Suscríbete a nuestras novedades:";
	display: block;
	margin-bottom: 10px;
	padding-inline-start: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 4.8-8-4.8V6l8 4.8L20 6z'/%3E%3C/svg%3E") no-repeat left center / 20px 20px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* La etiqueta de la izquierda ya se separa con el `gap: 10px` del formulario:
   el margen propio solo desalineaba respecto a la de la derecha. */
.mci-tracking-wrapper form > label {
	margin-bottom: 0 !important;
	line-height: 1.4;
}

/* --- 2. Misma tipografia en los cuatro elementos ------------------------ */

.mci-tracking-wrapper form > label,
.mci-tracking-wrapper form > input#order_id,
.mci-tracking-wrapper form > button[name="check_order"],
.elementor-element-e419733 .elementor-widget-container::before,
.elementor-element-e419733 .elementor-field-textual,
.elementor-element-e419733 .elementor-button {
	font-family: inherit !important;
}

.mci-tracking-wrapper form > input#order_id,
.elementor-element-e419733 .elementor-field-textual {
	font-size: 15px !important;
}

/* --- 3. Misma separacion entre campo y boton ---------------------------- */

.elementor-element-e419733 .elementor-form-fields-wrapper {
	gap: 10px;
}

/* Elementor reparte las columnas con padding lateral propio; se anula para
   que la separacion la de solo el `gap` y quede identica a la izquierda. */
.elementor-element-e419733 .elementor-field-group {
	padding-inline: 0;
}

.elementor-element-e419733 .elementor-field-type-email {
	flex: 1 1 auto;
	max-width: none;
}

.elementor-element-e419733 .e-form__buttons {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}