/**
 * MyDeal Forms — estilos base.
 *
 * Todo encapsulado bajo .mydeal-form para no afectar el tema.
 * Paleta en variables: ajústala aquí si cambian los colores de marca.
 */

.mydeal-form {
	/* --- Paleta --- */
	--mdf-navy: #0f2a4e;          /* azul marino: títulos y labels */
	--mdf-navy-soft: #1b3a5b;     /* labels */
	--mdf-blue: #1e6fe6;          /* azul brillante: acentos/enlaces */
	--mdf-red: #e11b22;           /* rojo MyDeal: botón principal */
	--mdf-red-hover: #c4141b;
	--mdf-bg: #f4f6fa;            /* fondo gris azulado muy claro */
	--mdf-card: #ffffff;
	--mdf-border: #e4e9f0;
	--mdf-border-input: #dce3ec;
	--mdf-text: #1b2a41;
	--mdf-muted: #6b7a90;         /* textos de ayuda */
	--mdf-placeholder: #9aa7b8;
	--mdf-error: #d12b2b;
	--mdf-success: #1a8f4c;

	/* --- Medidas --- */
	--mdf-radius-input: 10px;
	--mdf-radius-card: 22px;
	--mdf-input-h: 54px;
	--mdf-maxw: 680px;
	--mdf-gap: 22px;

	box-sizing: border-box;
	color: var(--mdf-text);
	font-family: inherit;
	line-height: 1.5;
	/* Evita scroll lateral en mobile si algún hijo llegara a desbordar por
	   accidente (mismo problema y misma solución que en las landings de
	   shortcodes/landings_servicios/homeSellersEs.php). */
	overflow-x: hidden;
}
.mydeal-form *,
.mydeal-form *::before,
.mydeal-form *::after { box-sizing: border-box; }
/* El tema (WPBakery/js_composer) no recorta el desbordamiento horizontal en
   sus propios contenedores (.entry-content, .wpb-content-wrapper), así que
   si algo dentro de .mydeal-form se pasa de ancho, termina empujando scroll
   lateral en TODA la página, no solo en el widget. Se recorta a nivel de esos
   contenedores ancestros — mismo fix ya probado en las landings. */
.entry-content:has(.mydeal-form),
.wpb-content-wrapper:has(.mydeal-form) {
	overflow-x: clip;
}
/* El tema inserta pseudo-elementos ::before/::after de clearfix (herencia de
   Bootstrap/WPBakery) en prácticamente cualquier contenedor, incluidos los
   que vamos agregando nosotros mismos (topbar, filas de canal, etc.) — se
   anulan TODOS de una vez aquí, en vez de ir parcheando elemento por
   elemento cada vez que aparece uno nuevo. No usamos ::before/::after propios
   para contenido (solo el reset de box-sizing de arriba), así que es seguro. */
.mydeal-form *::before,
.mydeal-form *::after {
	content: none !important;
	display: none !important;
}

/* El tema centra texto en varios contenedores en mobile con reglas que
   apuntan a CADA elemento directamente (ej. ".wpb_wrapper *"), no solo al
   contenedor padre — por eso no basta con heredar "left" desde .mydeal-form:
   una regla directa siempre gana sobre un valor heredado, sin importar la
   especificidad. Se fuerza aquí con la misma agresividad (selector universal
   + !important) para TODOS los elementos, y los pocos bloques que SÍ deben
   verse centrados (intro, legal, éxito, dropzone...) lo reafirman después. */
.mydeal-form,
.mydeal-form * { text-align: left !important; }

/* El "cuerpo" del formulario (todo excepto el header) SÍ tiene el fondo gris
   azulado, el padding y el ancho máximo — el header queda fuera de esta caja
   para no verse encerrado en un recuadro de color. */
.mydeal-form__body {
	max-width: var(--mdf-maxw);
	margin: 0 auto;
	padding: 24px 16px 48px;
	background: var(--mdf-bg);
}

/* ---------------------------------------------------------------- Header
   Vive FUERA de .mydeal-form__body a propósito: es una barra propia, sin
   fondo de color distinto al de la página, con su propio ancho máximo
   centrado (alineado visualmente con la tarjeta de abajo) y una raya
   divisora debajo. El selector de idioma copia la estructura/diseño del
   Help Center (themes/one-page-express-child/help_center_user/help-center.css)
   para mantener consistencia visual entre ambas experiencias.
------------------------------------------------------------------------- */
.mydeal-form__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--mdf-maxw);
	margin: 0 auto;
	padding: 14px 16px 16px;
	background: var(--mdf-card);
	border-bottom: 1px solid var(--mdf-border);
}
.mydeal-form__logo-link { display: block; flex-shrink: 0; line-height: 0; }
.mydeal-form__logo { display: block; width: clamp(120px, 30vw, 160px); height: auto; }

/* --- Selector de idioma (copiado del Help Center) --- */
.mydeal-form .switch-field { position: relative; display: inline-block; width: 142px; flex-shrink: 0; }

.mydeal-form .language-selected {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mdf-border-input);
	border-radius: 12px;
	background: #ffffff;
	color: var(--mdf-navy);
	font-size: 14px;
	font-weight: 750;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	line-height: 1;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.mydeal-form .language-selected:hover,
.mydeal-form .language-selected:focus-visible {
	border-color: rgba(30, 111, 230, 0.34);
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.11);
	transform: translateY(-1px);
}

.mydeal-form .language-globe {
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	min-width: 18px;
}
.mydeal-form .language-text { line-height: 1; display: flex; align-items: center; white-space: nowrap; }
.mydeal-form .language-arrow {
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 15px;
	transition: transform 0.2s ease;
}
.mydeal-form .switch-field.open .language-arrow { transform: rotate(180deg); }

.mydeal-form .language-options {
	position: absolute;
	top: 44px;
	right: 0;
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--mdf-border-input);
	border-top: none;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
	overflow: hidden;
	display: none;
	z-index: 20;
}
.mydeal-form .switch-field.open .language-options { display: block; }
.mydeal-form .switch-field.open .language-selected { border-radius: 12px 12px 0 0; }

.mydeal-form .language-options button {
	width: 100%;
	height: 42px;
	padding: 0 10px;
	background: #ffffff;
	border: none;
	border-top: 1px solid var(--mdf-border-input);
	color: var(--mdf-navy);
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 1;
}
.mydeal-form .language-options button:hover { background: var(--mdf-bg); }
.mydeal-form .language-options button[hidden] { display: none; }

/* ----------------------------------------------------------------- Intro */
.mydeal-form__intro { text-align: center !important; margin-bottom: 26px; }
.mydeal-form__intro * { text-align: center !important; }
.mydeal-form__title {
	/* El tema aplica text-transform: uppercase a los <h1> por defecto; se
	   anula porque el diseño de referencia usa mayúsculas/minúsculas normales. */
	text-transform: none !important;
	font-size: clamp(28px, 5.6vw, 34px);
	line-height: 1.2;
	font-weight: 900;
	color: var(--mdf-navy);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.mydeal-form__title-line { display: block; }
.mydeal-form__title-line--accent { color: var(--mdf-blue); }
.mydeal-form__subtitle {
	font-size: clamp(15px, 2.2vw, 16px);
	color: var(--mdf-muted);
	margin: 0;
}
/* Línea de ruta (ej. "Ruta USA → México") entre el título y el subtítulo,
   en formularios que la usan (multi-paso). La flecha es un SVG (no el
   carácter tipográfico "→", que se ve pegado a la línea base en vez de
   centrado entre los dos textos) — flex centra ambos verticalmente. */
.mydeal-form__route-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mdf-blue);
	margin: 0 0 10px;
}
.mydeal-form__route-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mydeal-form__route-arrow svg { display: block; }

/* -------------------------------------------------------------- Stepper
   Indicador de progreso (Datos → Ruta → Tarifas → Comercial) para
   formularios multi-paso. Vive entre el intro y la tarjeta. */
.mydeal-form__stepper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	margin: 0 0 26px;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}
.mydeal-form__stepper-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
.mydeal-form__stepper-dot {
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2px solid var(--mdf-border-input);
	background: #fff;
	color: var(--mdf-muted);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mydeal-form__stepper-check { display: none; }
.mydeal-form__stepper-check svg { display: block; }
.mydeal-form__stepper-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mdf-muted);
	white-space: nowrap;
}
.mydeal-form__stepper-item.is-active .mydeal-form__stepper-dot,
.mydeal-form__stepper-item.is-done .mydeal-form__stepper-dot {
	background: var(--mdf-blue);
	border-color: var(--mdf-blue);
	color: #fff;
}
.mydeal-form__stepper-item.is-active .mydeal-form__stepper-label,
.mydeal-form__stepper-item.is-done .mydeal-form__stepper-label {
	color: var(--mdf-navy);
}
.mydeal-form__stepper-item.is-done .mydeal-form__stepper-num { display: none; }
.mydeal-form__stepper-item.is-done .mydeal-form__stepper-check { display: flex; }
.mydeal-form__stepper-line {
	flex: 1 1 auto;
	height: 2px;
	background: var(--mdf-border-input);
	margin: 12px 6px 0;
	min-width: 16px;
}
.mydeal-form__stepper-item.is-done + .mydeal-form__stepper-line { background: var(--mdf-blue); }

/* ------------------------------------------------------------------ Card */
.mydeal-form__card {
	background: var(--mdf-card);
	border: 1px solid var(--mdf-border);
	border-radius: var(--mdf-radius-card);
	box-shadow: 0 8px 28px rgba(16, 42, 76, 0.06);
	padding: 28px;
}
.mydeal-form__card-head { margin-bottom: 22px; }
.mydeal-form__card-title { text-transform: none !important; font-size: 20px; font-weight: 700; color: var(--mdf-navy); margin: 0 0 6px; }
.mydeal-form__card-desc { font-size: 13.5px; color: var(--mdf-muted); margin: 0; }

/* ---------------------------------------------------------------- Fields */
/* Contenedor de campos de un paso (formularios multi-paso): permite que dos
   campos consecutivos marcados 'width'=>'half' (ej. Ciudad / Estado) se
   acomoden lado a lado sin necesitar un wrapper extra por par. */
.mydeal-form__step-fields { display: flex; flex-wrap: wrap; gap: 0 var(--mdf-gap); }
/* Todo hijo directo ocupa el renglón completo salvo los marcados 'half'. El
   recuadro agrupador va incluido: sin regla propia caería en el 'flex: 0 1 auto'
   por defecto y se encogería al ancho de su contenido en vez de ocupar el ancho
   de la tarjeta. */
.mydeal-form__step-fields > .mydeal-form__group,
.mydeal-form__step-fields > .mydeal-form__subcard,
.mydeal-form__step-fields > h3.mydeal-form__section-title,
.mydeal-form__step-fields > p.mydeal-form__section-desc { flex: 1 1 100%; }
.mydeal-form__step-fields > .mydeal-form__group--half { flex: 1 1 calc(50% - var(--mdf-gap) / 2); min-width: 200px; }

.mydeal-form__section-title {
	text-transform: none !important;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--mdf-navy);
	margin: 6px 0 4px;
}
.mydeal-form__step-fields > h3.mydeal-form__section-title:first-child { margin-top: 0; }
/* Frase explicativa opcional debajo del encabezado de sección (ej. "Volumen
   operativo aproximado" + "Selecciona rangos aproximados."). */
.mydeal-form__section-desc {
	font-size: 13px;
	color: var(--mdf-muted);
	margin: -2px 0 12px;
	line-height: 1.5;
}

.mydeal-form__group { margin-bottom: var(--mdf-gap); }
/* Encabezado suelto que titula a los campos de abajo (type 'heading'): pega
   al grupo siguiente en vez de dejar el hueco normal entre campos. */
.mydeal-form__group--heading { margin-bottom: 10px; }
.mydeal-form__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--mdf-navy-soft);
	margin-bottom: 4px;
}
.mydeal-form__req { color: var(--mdf-red); margin-left: 2px; }
/* Subtítulo "Opcional"/"Optional" debajo de la etiqueta (field['optional_badge']). */
.mydeal-form__optional-badge {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--mdf-bg);
	color: var(--mdf-muted);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: none !important;
}
/* Ayuda ENCIMA del input (como la referencia). */
.mydeal-form__help { font-size: 13px; color: var(--mdf-muted); margin: 0 0 9px; }
.mydeal-form__error { font-size: 13px; color: var(--mdf-error); margin: 6px 0 0; }
.mydeal-form__error:empty { margin: 0; }
/* Mismo hueco, en verde: se usa para confirmaciones en positivo (ej. "Las
   contraseñas coinciden"). Reutilizar este elemento en vez de añadir otro
   evita que lleguen a verse dos mensajes a la vez sobre el mismo campo. */
.mydeal-form__error--ok { color: var(--mdf-success); }
/* Nota informativa DEBAJO del control (distinta de __help, que va encima). */
.mydeal-form__field-note { font-size: 12.5px; color: var(--mdf-muted); margin: 8px 0 0; line-height: 1.5; }

/* !important + selector compuesto por tag+atributo en las propiedades
   visuales clave: el tema (Bootstrap global + reglas propias del tema padre
   tipo "input[type=url]{...}") traen su propio reset de <input> que es MÁS
   ESPECÍFICO que una clase sola (input[type=url] = (0,1,1) le gana a
   .mydeal-form__input = (0,1,0)), así que además de !important hace falta
   igualar/superar esa especificidad repitiendo el selector por tipo — el
   botón del selector de plataforma (que es un <button>, no un <input>) no
   sufre esto, por eso antes se veían de tamaño distinto. */
.mydeal-form__input,
.mydeal-form input[type="text"].mydeal-form__input,
.mydeal-form input[type="email"].mydeal-form__input,
.mydeal-form input[type="url"].mydeal-form__input,
.mydeal-form input[type="tel"].mydeal-form__input,
.mydeal-form input[type="number"].mydeal-form__input,
.mydeal-form input[type="search"].mydeal-form__input {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: var(--mdf-input-h) !important;
	padding: 12px 15px !important;
	margin-bottom: 0 !important;
	/* 16px, NO 15px: en iOS Safari cualquier <input>/<textarea> con letra
	   MENOR a 16px hace zoom automático al tocarlo para enfocarlo, y mientras
	   dura ese zoom la página entera queda arrastrable con el dedo en
	   cualquier dirección (efecto reportado "la página se mueve, solo en
	   iPhone"). Este selector cubre TODOS los inputs de texto/email/tel/url/
	   password y también el <textarea> (comparten esta misma clase), así que
	   basta este único cambio. Confirmar que ningún ajuste futuro de tamaño
	   de fuente en estos campos vuelva a bajar de 16px. */
	font-size: 16px !important;
	font-family: inherit !important;
	vertical-align: top !important;
	color: var(--mdf-text) !important;
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid var(--mdf-border-input) !important;
	border-radius: var(--mdf-radius-input) !important;
	outline: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-shadow: none;
}
.mydeal-form__input::placeholder { color: var(--mdf-placeholder); }
.mydeal-form__input:focus {
	outline: none !important;
	border-color: var(--mdf-blue) !important;
	box-shadow: 0 0 0 3px rgba(30, 111, 230, 0.15) !important;
}
/* El reset de inputs de arriba usa selectores compuestos input[type=...] +
   !important para ganarle al tema (especificidad (0,3,1)). Un simple
   ".mydeal-form__group--error .mydeal-form__input" con !important solo llega
   a (0,2,0): pierde contra ese reset pese al !important, porque entre dos
   reglas !important decide la especificidad, no el orden. Hay que igualar la
   especificidad repitiendo el mismo patrón compuesto — así, en el empate,
   gana esta regla por aparecer después en el archivo. */
.mydeal-form__group--error .mydeal-form__input,
.mydeal-form__group--error input[type="text"].mydeal-form__input,
.mydeal-form__group--error input[type="email"].mydeal-form__input,
.mydeal-form__group--error input[type="url"].mydeal-form__input,
.mydeal-form__group--error input[type="tel"].mydeal-form__input,
.mydeal-form__group--error input[type="number"].mydeal-form__input,
.mydeal-form__group--error input[type="search"].mydeal-form__input,
.mydeal-form__group--error .mydeal-form__combo-toggle,
.mydeal-form__group--error .mydeal-form__dropzone {
	border-color: var(--mdf-error) !important;
	box-shadow: 0 0 0 3px rgba(209, 43, 43, 0.10) !important;
}

/* --- Ícono decorativo dentro de inputs de una línea (field['icon']) --- */
.mydeal-form__input-wrap--icon { position: relative; }
.mydeal-form__input-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mdf-muted);
	pointer-events: none;
}
.mydeal-form__input-icon svg { display: block; }
.mydeal-form__input--icon,
.mydeal-form input[type="text"].mydeal-form__input--icon,
.mydeal-form input[type="email"].mydeal-form__input--icon,
.mydeal-form input[type="tel"].mydeal-form__input--icon,
.mydeal-form input[type="url"].mydeal-form__input--icon,
.mydeal-form input[type="password"].mydeal-form__input--icon,
.mydeal-form textarea.mydeal-form__input--icon {
	padding-left: 44px !important;
}
/* En un textarea el ícono se ancla arriba: centrarlo verticalmente lo dejaría
   flotando a media caja cuando el texto crece. */
.mydeal-form__input-wrap--textarea .mydeal-form__input-icon {
	top: 15px;
	transform: none;
}

/* --- Contraseña: botón de ojo mostrar/ocultar --- */
.mydeal-form__input-wrap--password .mydeal-form__input--password,
.mydeal-form input[type="password"].mydeal-form__input--password,
.mydeal-form input[type="text"].mydeal-form__input--password {
	padding-right: 46px !important;
}
.mydeal-form__password-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--mdf-muted);
	cursor: pointer;
}
.mydeal-form__password-toggle:hover { color: var(--mdf-blue); background: var(--mdf-bg); }
.mydeal-form__password-toggle svg { display: block; }
/* La raya del ojo tachado solo se ve cuando la contraseña está OCULTA;
   al mostrarla el ícono queda como ojo abierto. */
.mydeal-form__password-toggle.is-visible .mydeal-form__eye-slash { display: none; }

/* --- Contador de caracteres del textarea ("0/200") --- */
.mydeal-form__counter {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--mdf-muted);
	text-align: right !important;
}

/* --- Recuadro que agrupa campos dentro de un paso (field['box']) --- */
.mydeal-form__subcard {
	margin: 4px 0 18px;
	padding: 18px 16px 4px;
	background: var(--mdf-bg);
	border: 1px solid var(--mdf-border);
	border-radius: 14px;
}
.mydeal-form__subcard-title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--mdf-navy);
	text-transform: none !important;
}

/* --- Textarea --- */
.mydeal-form__textarea,
.mydeal-form textarea.mydeal-form__textarea {
	min-height: 96px !important;
	height: auto !important;
	padding-top: 12px !important;
	resize: vertical;
	line-height: 1.5;
}

/* --- Combobox genérico (select/categoría), mismo diseño que el selector de
   plataforma pero sin ícono — reutilizable para cualquier campo tipo select. --- */
.mydeal-form__combo { position: relative; }
.mydeal-form__combo-toggle {
	width: 100%;
	min-height: var(--mdf-input-h);
	padding: 0 15px;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	background: #fff;
	color: var(--mdf-text);
	font-size: 15px;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mydeal-form__combo-toggle:hover,
.mydeal-form__combo-toggle:focus-visible {
	border-color: var(--mdf-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 230, 0.15);
}
/* Ícono a la izquierda dentro del combobox (field['icon']). El botón ya es
   flex, así que el ícono es un elemento más de la fila; solo hay que ajustar
   el padding izquierdo para que quede a la misma altura visual que el de los
   inputs de una línea. */
.mydeal-form__combo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--mdf-muted);
}
.mydeal-form__combo-icon svg { display: block; }
.mydeal-form__combo--icon .mydeal-form__combo-toggle { padding-left: 15px; gap: 11px; }

.mydeal-form__combo-label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mydeal-form__combo-arrow { font-size: 13px; color: var(--mdf-muted); flex-shrink: 0; transition: transform .2s ease; }
.mydeal-form__combo.open .mydeal-form__combo-arrow { transform: rotate(180deg); }

.mydeal-form__combo-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
	display: none;
	z-index: 15;
}
.mydeal-form__combo.open .mydeal-form__combo-options { display: block; }
.mydeal-form__combo-options button {
	width: 100%;
	min-height: 42px;
	padding: 8px 15px;
	background: #fff;
	border: none;
	border-top: 1px solid var(--mdf-border);
	color: var(--mdf-text);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	text-align: left;
}
.mydeal-form__combo-options button:first-child { border-top: none; }
.mydeal-form__combo-options button:hover { background: var(--mdf-bg); }
.mydeal-form__combo-options button[hidden] { display: none; }
.mydeal-form__combo-option-label { flex: 1 1 auto; }

/* --- Multiselect (desplegable de selección múltiple, ej. "Medios de
   actualización"): mismo diseño que el combobox, pero el panel se queda
   abierto para marcar varias casillas reales en vez de cerrarse al elegir. --- */
.mydeal-form__multiselect { position: relative; }
.mydeal-form__multiselect-toggle {
	width: 100%;
	min-height: var(--mdf-input-h);
	padding: 0 15px;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	background: #fff;
	color: var(--mdf-placeholder);
	font-size: 15px;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mydeal-form__multiselect-toggle:hover,
.mydeal-form__multiselect-toggle:focus-visible {
	border-color: var(--mdf-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 230, 0.15);
}
.mydeal-form__multiselect-label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mydeal-form__multiselect-label.has-value { color: var(--mdf-text); font-weight: 600; }
.mydeal-form__multiselect-arrow { font-size: 13px; color: var(--mdf-muted); flex-shrink: 0; transition: transform .2s ease; }
.mydeal-form__multiselect.open .mydeal-form__multiselect-arrow { transform: rotate(180deg); }

.mydeal-form__multiselect-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
	display: none;
	z-index: 15;
	padding: 6px;
}
.mydeal-form__multiselect.open .mydeal-form__multiselect-options { display: block; }
.mydeal-form__multiselect-option {
	width: 100%;
	min-height: 40px;
	padding: 8px 9px;
	border-radius: 8px;
	color: var(--mdf-text);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: background .12s ease;
}
.mydeal-form__multiselect-option:hover { background: var(--mdf-bg); }
.mydeal-form__multiselect-option input {
	width: 17px; height: 17px;
	flex: 0 0 auto;
	accent-color: var(--mdf-blue);
	cursor: pointer;
}
.mydeal-form__multiselect-option span { flex: 1 1 auto; }

/* --------------------------------------------------------------- Channels */
.mydeal-form__group--channels .mydeal-form__label { margin-bottom: 4px; }
.mydeal-form__channels { margin-top: 2px; }
.mydeal-form__channel-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}
/* Eliminar + URL van agrupados como una sola unidad (eliminar a la
   izquierda de la URL), no como un tercer bloque suelto. */
.mydeal-form__channel-url-group { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.mydeal-form__channel-url { flex: 1 1 auto; min-width: 0; }

/* --- Selector de plataforma (ícono + nombre), mismo patrón que el idioma --- */
.mydeal-form__platform { position: relative; flex: 0 0 42%; max-width: 200px; }
.mydeal-form__platform-selected {
	width: 100%;
	min-height: var(--mdf-input-h);
	padding: 0 12px;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	background: #fff;
	color: var(--mdf-text);
	font-size: 15px;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mydeal-form__platform-selected:hover,
.mydeal-form__platform-selected:focus-visible {
	border-color: var(--mdf-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 230, 0.12);
}
.mydeal-form__platform-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; }
.mydeal-form__platform-icon svg { display: block; }
.mydeal-form__platform-name { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mydeal-form__platform-arrow { font-size: 13px; color: var(--mdf-muted); flex-shrink: 0; transition: transform .2s ease; }
.mydeal-form__platform.open .mydeal-form__platform-arrow { transform: rotate(180deg); }

.mydeal-form__platform-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	min-width: 190px;
	background: #fff;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
	overflow: hidden;
	display: none;
	z-index: 15;
}
.mydeal-form__platform.open .mydeal-form__platform-options { display: block; }
.mydeal-form__platform-options button {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	background: #fff;
	border: none;
	border-top: 1px solid var(--mdf-border);
	color: var(--mdf-text);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
}
.mydeal-form__platform-options button:first-child { border-top: none; }
.mydeal-form__platform-options button:hover { background: var(--mdf-bg); }
.mydeal-form__platform-options button[hidden] { display: none; }
.mydeal-form__platform-option-label { flex: 1 1 auto; }
.mydeal-form__remove-channel {
	flex: 0 0 auto;
	/* Misma altura que el input de URL junto al que va (--mdf-input-h),
	   cuadrado, y siempre por encima del mínimo táctil de 44px. */
	width: var(--mdf-input-h); height: var(--mdf-input-h);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mdf-border-input);
	background: #fff;
	border-radius: var(--mdf-radius-input);
	color: var(--mdf-muted);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.mydeal-form__remove-channel:hover { border-color: var(--mdf-red); color: var(--mdf-red); }
.mydeal-form__remove-channel svg { display: block; }
.mydeal-form__add-channel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	color: var(--mdf-blue);
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	padding: 4px 0;
	margin-top: 2px;
}
.mydeal-form__add-channel svg { display: block; }
.mydeal-form__add-channel:hover .mydeal-form__add-channel-text { text-decoration: underline; }
.mydeal-form__add-channel:disabled { color: var(--mdf-muted); cursor: not-allowed; }
.mydeal-form__add-channel:disabled .mydeal-form__add-channel-text { text-decoration: none; }

/* ------------------------------------------------------------- Dropzone */
.mydeal-form__dropzone {
	position: relative;
	border: 1.5px dashed var(--mdf-border-input);
	border-radius: 12px;
	background: #fafbfd;
	padding: 30px 18px;
	text-align: center !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mydeal-form__dropzone * { text-align: center !important; }
.mydeal-form__dropzone:hover { border-color: var(--mdf-blue); background: #f5f8ff; }
.mydeal-form__file {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
}
.mydeal-form__dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
/* El atributo [hidden] pierde contra la regla de arriba por tener la misma
   especificidad (empata y gana la que carga después). Se refuerza aquí para
   que, al haber una imagen seleccionada, SOLO se vea la imagen (sin el ícono
   ni los textos de "Toca para subir imagen"). */
.mydeal-form__dropzone-inner[hidden] { display: none !important; }
.mydeal-form__upload-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: #eef3fb;
	color: var(--mdf-blue);
}
/* Envuelve texto+ayuda para que ambos quepan como UN solo ítem flex dentro de
   .mydeal-form__dropzone-inner (junto al ícono), sin cambiar cómo se ven en
   la variante cuadrada de siempre (ambos siguen apilados y centrados). */
.mydeal-form__upload-text-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mydeal-form__upload-text { font-weight: 600; color: var(--mdf-navy-soft); font-size: 14.5px; }
.mydeal-form__upload-hint { font-size: 12.5px; color: var(--mdf-muted); }
.mydeal-form__preview { display: block; max-width: 180px; max-height: 180px; margin: 0 auto; border-radius: 10px; }

/* 'layout' => 'row' (ej. "Adjuntar tarifario"): fila horizontal compacta en
   vez del recuadro grande de arrastrar-y-soltar — pensada para subidas
   opcionales de documentos donde no hace falta tanto peso visual. */
.mydeal-form__dropzone--row {
	padding: 12px 14px;
	text-align: left !important;
}
.mydeal-form__dropzone--row * { text-align: left !important; }
.mydeal-form__dropzone--row .mydeal-form__dropzone-inner {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	justify-content: flex-start;
}
.mydeal-form__dropzone--row .mydeal-form__upload-icon { width: 38px; height: 38px; flex-shrink: 0; }
.mydeal-form__dropzone--row .mydeal-form__upload-icon svg { width: 20px; height: 20px; }
.mydeal-form__dropzone--row .mydeal-form__upload-text-wrap { align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.mydeal-form__dropzone--row .mydeal-form__upload-text,
.mydeal-form__dropzone--row .mydeal-form__upload-hint { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; }
.mydeal-form__upload-chevron { flex-shrink: 0; display: flex; color: var(--mdf-muted); }
.mydeal-form__upload-chevron svg { display: block; }

/* -------------------------------------------------------------- Checkbox */
.mydeal-form__group--checkbox { margin: 8px 0 var(--mdf-gap); }
.mydeal-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mdf-text);
	cursor: pointer;
}
.mydeal-form__checkbox input {
	margin-top: 2px;
	width: 19px; height: 19px;
	flex: 0 0 auto;
	accent-color: var(--mdf-blue);
	cursor: pointer;
}
.mydeal-form__checkbox-text a,
.mydeal-form__checkbox-text .mydeal-form__legal-link { color: var(--mdf-blue); }
.mydeal-form__checkbox-text a { text-decoration: underline; }

/* ------------------------------------------- Grupos de opciones marcables
   Casillas independientes (checkbox_group, ej. "Servicios disponibles") y
   opciones excluyentes (radio_group, ej. "Capital de trabajo"), presentadas
   como tarjetas seleccionables en una lista vertical. Ambos tipos comparten
   este bloque: el único cambio es el type del input (checkbox/radio). */
.mydeal-form__checkgroup-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mydeal-form__checkgroup-option {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 12px 14px;
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	font-size: 14px;
	line-height: 1.4;
	color: var(--mdf-text);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mydeal-form__checkgroup-option:hover { border-color: var(--mdf-blue); background: #f7faff; }
.mydeal-form__checkgroup-option input {
	margin-top: 1px;
	width: 18px; height: 18px;
	flex: 0 0 auto;
	accent-color: var(--mdf-blue);
	cursor: pointer;
}
/* Ícono decorativo por opción (ej. la disponibilidad: mañanas/tardes/noches). */
.mydeal-form__checkgroup-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--mdf-muted);
}
.mydeal-form__checkgroup-icon svg { display: block; }

/* 'layout' => 'inline': opciones lado a lado (ej. "Idiomas que hablas").
   Se reparten el ancho por igual y bajan de renglón solas si no caben. */
.mydeal-form__checkgroup-options--inline {
	flex-direction: row;
	flex-wrap: wrap;
}
.mydeal-form__checkgroup-options--inline .mydeal-form__checkgroup-option {
	flex: 1 1 30%;
	min-width: 96px;
	align-items: center;
}

/* Opción "Otro" con campo de texto libre propio (field['options'][n]['has_input']),
   ej. "Cargos adicionales". El input se deshabilita (y se ve apagado) mientras
   su casilla no esté marcada — ver initOtherInputs() en base.js. */
.mydeal-form__checkgroup-option--with-input { align-items: center; }
/* CSS Grid en vez de flex a propósito: con flex, un <input> intercalado con
   un <span> de ancho variable no llega a "abarcar hasta la derecha" de forma
   confiable porque el tema padre fuerza width:100% en TODO input[type=text]
   (ver la nota larga sobre esa regla en el bloque de .mydeal-form__input más
   arriba) y ese 100% termina compitiendo con flex-basis en vez de ayudar. Con
   grid, la columna "1fr" ya reserva el espacio restante y el 100% que fuerce
   el tema simplemente rellena esa columna — a favor en vez de en contra. */
.mydeal-form__checkgroup-option-body {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 8px 10px;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.mydeal-form__checkgroup-other-input,
.mydeal-form input[type="text"].mydeal-form__checkgroup-other-input {
	width: 100% !important;
	min-width: 0 !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	border: 1px solid var(--mdf-border-input) !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	font-family: inherit !important;
	color: var(--mdf-text) !important;
	background: #fff !important;
}
.mydeal-form__checkgroup-other-input:disabled {
	background: var(--mdf-bg) !important;
	color: var(--mdf-placeholder) !important;
	cursor: not-allowed;
}

/* --------------------------------------------------------------- Submit */
.mydeal-form__submit {
	position: relative;
	width: 100%;
	min-height: 54px;
	background: var(--mdf-red);
	color: #fff;
	border: none;
	border-radius: var(--mdf-radius-input);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	margin-top: 8px;
	transition: background .15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
}
.mydeal-form__submit:hover { background: var(--mdf-red-hover); }
.mydeal-form__submit:disabled { opacity: .7; cursor: not-allowed; }

.mydeal-form__spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: mdf-spin .7s linear infinite; }
.mydeal-form.is-sending .mydeal-form__spinner { display: inline-block; }
@keyframes mdf-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- Step nav
   Botones "Atrás" / "Continuar" al pie de cada paso (formularios
   multi-paso). El primer paso usa el rojo de marca por defecto (igual que
   cualquier .mydeal-form__submit); los pasos siguientes usan el modificador
   --blue (según el diseño de referencia). */
.mydeal-form__step-nav {
	display: flex;
	gap: 12px;
	margin-top: 40px;
}
.mydeal-form__step-nav .mydeal-form__submit { margin-top: 0; flex: 1 1 auto; }
.mydeal-form__submit--blue { background: var(--mdf-blue); }
.mydeal-form__submit--blue:hover { background: #1558b8; }
.mydeal-form__step-back {
	flex: 0 0 auto;
	/* Mismo alto que .mydeal-form__submit, y centrado en flex igual que él:
	   sin display:flex, un <span> con display:flex dentro del botón (un ícono,
	   por ejemplo) se convierte en bloque y parte el botón en dos renglones,
	   dejándolo más alto que el botón de continuar. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	min-height: 54px;
	padding: 0 22px;
	background: #fff;
	color: var(--mdf-navy);
	border: 1px solid var(--mdf-border-input);
	border-radius: var(--mdf-radius-input);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mydeal-form__step-back:hover { border-color: var(--mdf-blue); background: #f7faff; }

/* Flecha dentro del botón "Continuar" del PRIMER paso únicamente (según el
   diseño de referencia). Posicionada absoluta en el borde derecho del botón
   para que el texto siga centrado de forma independiente (si fuera un hijo
   flex normal, el texto+flecha se centrarían juntos como bloque, no el texto
   solo). */
.mydeal-form__submit--with-arrow { position: relative; }
.mydeal-form__submit-arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
}
.mydeal-form__submit-arrow svg { display: block; }

/* Aviso con ícono debajo del botón "Continuar" del primer paso (ej. "Al
   continuar, confirmas que estás autorizado...").
   IMPORTANTE: el ícono va DENTRO del flujo de texto normal (inline-block,
   primer "carácter" del párrafo), no como hermano en un flex row. Con flex,
   un span que hace wrap se estira para ocupar todo el ancho restante de la
   fila, y centrar texto dentro de esa caja de sobra deja un hueco entre el
   ícono y donde arranca la primera línea. Siendo inline, el navegador trata
   ícono+texto como una sola unidad de contenido: text-align:center centra
   cada línea renderizada (ícono+inicio del texto en la línea 1, el resto del
   texto en la línea 2) tal como corta el wrap, sin huecos artificiales. */
.mydeal-form__confirm-notice {
	text-align: center !important;
	margin: 14px auto 0;
	max-width: 460px;
	font-size: 12.5px;
	color: var(--mdf-muted);
	line-height: 1.5;
}
.mydeal-form__confirm-notice-icon {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 6px;
	color: var(--mdf-blue);
}
.mydeal-form__confirm-notice-icon svg { display: block; }
.mydeal-form__confirm-notice-text { color: inherit; }

/* ---------------------------------------------------------------- Legal */
.mydeal-form__legal { font-size: 12px; color: var(--mdf-muted); text-align: center !important; margin: 16px 0 0; line-height: 1.55; }
.mydeal-form__legal * { text-align: center !important; }
.mydeal-form__legal a { color: var(--mdf-blue); text-decoration: underline; }
.mydeal-form__legal-link { color: var(--mdf-blue); font-weight: 500; }

/* Párrafos de aviso legal ESTÁTICOS bajo la casilla de autorización (sin
   enlaces), alineados a la izquierda, distinto del bloque .mydeal-form__legal
   (que sí es centrado y puede llevar un enlace). */
.mydeal-form__legal-notice {
	font-size: 12px;
	color: var(--mdf-muted);
	line-height: 1.55;
	margin: 8px 0 0;
}

/* ------------------------------------------------------------- Messages */
.mydeal-form__messages { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
.mydeal-form__messages--error { background: #fdecec; color: var(--mdf-error); border: 1px solid #f6c9c9; }
.mydeal-form__messages--success { background: #e9f7ef; color: var(--mdf-success); border: 1px solid #bfe6cd; }

/* -------------------------------------------------------------- Success
   Modal de confirmación de PANTALLA COMPLETA (no una tarjeta dentro del
   formulario) — cubre todo el viewport, por encima de cualquier otro
   contenido de la página, hasta que redirige o el usuario navega fuera.
------------------------------------------------------------------------- */
.mydeal-form__success-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mdf-bg);
	padding: 24px 16px;
	overflow-y: auto;
}
.mydeal-form__success-overlay[hidden] { display: none; }
.mydeal-form__success-overlay:focus { outline: none; }

.mydeal-form__success {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border: 1px solid var(--mdf-border);
	border-radius: var(--mdf-radius-card);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
	padding: 40px 32px;
	text-align: center !important;
}
.mydeal-form__success * { text-align: center !important; }

.mydeal-form__success-icon {
	width: 64px; height: 64px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: #e9f7ef;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mydeal-form__success-title {
	text-transform: none !important;
	font-size: 26px;
	font-weight: 800;
	color: var(--mdf-navy);
	margin: 0 0 16px;
}
.mydeal-form__success-divider {
	width: 42px;
	height: 3px;
	background: var(--mdf-red);
	border-radius: 2px;
	margin: 0 auto 20px;
}
.mydeal-form__success-subtitle {
	font-size: 15px;
	color: var(--mdf-muted);
	line-height: 1.55;
	margin: 0 0 30px;
}
.mydeal-form__success-highlight { color: var(--mdf-blue); font-weight: 700; }

.mydeal-form__success-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--mdf-bg);
	border-radius: 14px;
	padding: 18px;
	text-align: left !important;
}
.mydeal-form__success-card * { text-align: left !important; }
.mydeal-form__success-envelope {
	flex-shrink: 0;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: #e6f0ff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mydeal-form__success-card-copy { display: block; }
.mydeal-form__success-card-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--mdf-navy); margin: 0 0 4px; }
.mydeal-form__success-card-text { display: block; font-size: 13.5px; color: var(--mdf-muted); line-height: 1.45; }

/* Variante de éxito con párrafo simple + línea de ETA + botón "Finalizar"
   (en vez de la tarjeta con ícono de sobre de external-store). */
.mydeal-form__success-body { font-size: 14.5px; color: var(--mdf-muted); line-height: 1.55; margin: 0 0 16px; }
.mydeal-form__success-eta { font-size: 14.5px; font-weight: 600; color: var(--mdf-navy); margin: 0 0 18px; }
.mydeal-form__success-disclaimer { font-size: 11.5px; color: var(--mdf-placeholder); line-height: 1.5; margin: 0 0 26px; }
.mydeal-form__success-finish {
	display: block;
	width: 100%;
	min-height: 54px;
	line-height: 54px;
	background: var(--mdf-blue);
	color: #fff !important;
	border-radius: var(--mdf-radius-input);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	transition: background .15s ease;
}
.mydeal-form__success-finish:hover { background: #1558b8; }

@media (max-width: 420px) {
	.mydeal-form__success { padding: 30px 22px; }
	.mydeal-form__success-title { font-size: 22px; }
	.mydeal-form__success-icon { width: 56px; height: 56px; }
}

/* -------------------------------------------------------------- Honeypot */
.mydeal-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.mydeal-form__notice { padding: 10px 14px; background: #fff8e5; border: 1px solid #f0d98a; border-radius: 8px; color: #7a5b00; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 560px) {
	.mydeal-form__body { padding: 16px 14px 40px; }
	.mydeal-form__card { padding: 22px 18px; }
	.mydeal-form__title { font-size: 28px; line-height: 1.25; }
	/* 2 filas en vez de 3: plataforma arriba, [eliminar+url] abajo agrupados. */
	.mydeal-form__channel-row { flex-wrap: wrap; }
	.mydeal-form__platform,
	.mydeal-form__channel-url-group { flex: 1 1 100%; max-width: none; }

	.mydeal-form__topbar { padding: 12px 14px 14px; gap: 12px; }
	/* Mismo alto que el botón de idioma (38px) para que se vean del mismo
	   tamaño uno junto al otro; el ancho se ajusta solo (logo horizontal). */
	.mydeal-form__logo { width: auto; height: 30px; }

	.mydeal-form__stepper { max-width: 340px; }
	.mydeal-form__stepper-dot { width: 22px; height: 22px; font-size: 11px; }
	.mydeal-form__stepper-label { font-size: 10px; }
	.mydeal-form__stepper-line { margin-top: 10px; }
	.mydeal-form__step-back { padding: 0 16px; }

	.mydeal-form .switch-field { width: 118px; }
	.mydeal-form .language-selected,
	.mydeal-form .language-options,
	.mydeal-form .language-options button { width: 118px; box-sizing: border-box; }
	.mydeal-form .language-selected { height: 38px; font-size: 12px; padding: 0 8px; gap: 5px; }
	.mydeal-form .language-options { top: 38px; }
	.mydeal-form .language-options button { height: 38px; font-size: 12px; padding: 0 8px; gap: 5px; }
	.mydeal-form .language-globe { font-size: 15px; width: 15px; min-width: 15px; }
}

@media (max-width: 360px) {
	.mydeal-form__topbar { gap: 10px; }
	.mydeal-form__logo { height: 28px; }
	.mydeal-form .switch-field,
	.mydeal-form .language-selected,
	.mydeal-form .language-options,
	.mydeal-form .language-options button { width: 104px; }
	.mydeal-form .language-selected,
	.mydeal-form .language-options button { height: 34px; }
	.mydeal-form .language-options { top: 34px; }
}