/**
 * Formulario de solicitud B2B — réplica del estilo del tema PrestaShop "celebrand".
 * Paleta y tipografías calcadas del tema (cipisa.css): magenta corporativo,
 * etiquetas técnicas en mayúsculas (Roboto Mono), inputs altos y botón sólido.
 * Todo está cableado con valores literales (no variables CSS) para que funcione
 * igual en WordPress, donde no existen las :root del tema de PrestaShop.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto+Mono:wght@500;700&display=swap');

.cb2b-form {
	--cb2b-pink: #d21668;
	--cb2b-pink-dark: #8f3658;
	--cb2b-pink-2: #c8145f;
	--cb2b-paper: #ffffff;
	--cb2b-paper-2: #f4f6f8;
	--cb2b-ink: #1c2430;
	--cb2b-ink-2: #444a52;
	--cb2b-muted: #5b6676;
	--cb2b-rule: #e7ebf0;
	--cb2b-rule-2: #b8bec7;
	--cb2b-r-sm: 6px;
	--cb2b-sans: 'Montserrat', 'Roboto', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--cb2b-tech: 'Roboto Mono', ui-monospace, Menlo, monospace;

	/* Va "plano" dentro de su columna (la tarjeta la pone la página réplica). */
	width: 100%;
	margin: 0;
	font-family: var(--cb2b-sans);
	color: var(--cb2b-ink);
	box-sizing: border-box;
}

/* Filas de dos columnas (como el alta de PrestaShop). */
.cb2b-form .cb2b-row { display: flex; gap: 18px; flex-wrap: wrap; }
.cb2b-form .cb2b-col { flex: 1 1 240px; }
.cb2b-form .cb2b-field { margin-bottom: 18px; }

/* Etiquetas: técnicas, en mayúsculas, como las del login del tema. */
.cb2b-form .cb2b-field label,
.cb2b-form .cb2b-label {
	display: block;
	color: var(--cb2b-muted);
	font-family: var(--cb2b-tech);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}
.cb2b-form .cb2b-req { color: var(--cb2b-pink); }

/* Campos de texto: blancos, altos, con foco magenta. */
.cb2b-form .cb2b-field input[type="text"],
.cb2b-form .cb2b-field input[type="email"],
.cb2b-form .cb2b-field input[type="tel"],
.cb2b-form .cb2b-field select,
.cb2b-form .cb2b-field textarea {
	width: 100%;
	background: var(--cb2b-paper);
	border: 1px solid var(--cb2b-rule-2);
	border-radius: var(--cb2b-r-sm);
	color: var(--cb2b-ink);
	font-family: var(--cb2b-sans);
	font-size: 16px;
	min-height: 52px;
	padding: 14px 16px;
	box-sizing: border-box;
}
.cb2b-form .cb2b-field textarea { min-height: 120px; resize: vertical; }

/* Selects: misma caja que los inputs + flecha propia (quita la nativa). */
.cb2b-form .cb2b-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6676' d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.cb2b-form .cb2b-field select:disabled {
	background-color: var(--cb2b-paper-2);
	color: var(--cb2b-muted);
	cursor: not-allowed;
	opacity: 1;
}
/* Placeholder de los inputs: gris suave, no negro. */
.cb2b-form .cb2b-field input::placeholder { color: #9aa3b0; opacity: 1; }
/* CIF en mayúsculas (es como se escribe un NIF/CIF). */
.cb2b-form #cb2b-cif { text-transform: uppercase; }

.cb2b-form .cb2b-field input:focus,
.cb2b-form .cb2b-field select:focus,
.cb2b-form .cb2b-field textarea:focus {
	outline: none;
	border-color: var(--cb2b-pink);
	box-shadow: 0 0 0 3px rgba(210, 22, 104, .15);
}

/* ───────────────────────────────────────────────────────────────
   Combobox con buscador (provincia / población). El <select> nativo
   se oculta cuando JS lo mejora; el input hereda el estilo de los
   inputs de texto y añade su propia flecha + lista desplegable.
   ─────────────────────────────────────────────────────────────── */
.cb2b-form .cb2b-combo { position: relative; }
.cb2b-form .cb2b-combo__native { display: none; }
.cb2b-form .cb2b-field .cb2b-combo__input {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6676' d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.cb2b-form .cb2b-field .cb2b-combo__input:disabled {
	background-color: var(--cb2b-paper-2);
	color: var(--cb2b-muted);
	cursor: not-allowed;
}
.cb2b-form .cb2b-combo__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	background: var(--cb2b-paper);
	border: 1px solid var(--cb2b-rule-2);
	border-radius: var(--cb2b-r-sm);
	box-shadow: 0 10px 30px rgba(28, 36, 48, .15);
}
.cb2b-form .cb2b-combo__opt {
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 15px;
	color: var(--cb2b-ink);
	cursor: pointer;
}
.cb2b-form .cb2b-combo__opt:hover,
.cb2b-form .cb2b-combo__opt.is-active { background: var(--cb2b-paper-2); }
.cb2b-form .cb2b-combo__opt[aria-selected="true"] { color: var(--cb2b-pink); font-weight: 600; }
.cb2b-form .cb2b-combo__empty {
	padding: 10px 12px;
	font-size: 14px;
	color: var(--cb2b-muted);
}

/* Errores de validación por campo. */
.cb2b-form .cb2b-field input.cb2b-invalid,
.cb2b-form .cb2b-field .cb2b-combo__input.cb2b-invalid {
	border-color: #d63333;
	box-shadow: 0 0 0 3px rgba(214, 51, 51, .15);
}
.cb2b-form .cb2b-field-error {
	display: block;
	margin-top: 6px;
	color: #b3261e;
	font-family: var(--cb2b-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
.cb2b-form .cb2b-field-error:empty { display: none; }

/* Tratamiento (Sr./Sra.): radios en línea. */
.cb2b-form .cb2b-gender .cb2b-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 20px;
	color: var(--cb2b-ink-2);
	font-family: var(--cb2b-sans);
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}
.cb2b-form .cb2b-gender .cb2b-radio input { margin: 0; }

/* Consentimiento / optin: casillas con texto normal. */
.cb2b-form .cb2b-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--cb2b-ink-2);
	font-family: var(--cb2b-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
}
.cb2b-form .cb2b-consent input { margin-top: 3px; }
.cb2b-form .cb2b-consent a { color: var(--cb2b-pink); font-weight: 700; }

/* Botón de envío: sólido magenta, técnico, como #submit-login del tema. */
.cb2b-form .cb2b-actions { margin-top: 8px; }
.cb2b-form .cb2b-btn {
	align-items: center;
	background: var(--cb2b-pink);
	border: 0;
	border-radius: var(--cb2b-r-sm);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	font-family: var(--cb2b-tech);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	min-height: 52px;
	padding: 0 32px;
	text-transform: uppercase;
	transition: background .15s ease;
}
.cb2b-form .cb2b-btn:hover { background: var(--cb2b-pink-2); }

/* Avisos de éxito / error. */
.cb2b-form.cb2b-alert,
.cb2b-alert { padding: 14px 16px; border-radius: var(--cb2b-r-sm); margin-bottom: 20px; font-family: 'Montserrat', system-ui, sans-serif; }
.cb2b-alert--ok { background: #e7f6ec; border: 1px solid #b6e0c4; color: #1c6b39; }
.cb2b-alert--error { background: #fdecec; border: 1px solid #f3c2c2; color: #9b1c1c; }
.cb2b-alert ul { margin: 0; padding-left: 18px; }

/* Honeypot oculto a usuarios reales. */
.cb2b-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

@media (max-width: 600px) {
	.cb2b-form { padding: 0; }
}

/* ───────────────────────────────────────────────────────────────
   Layout réplica de /registro: panel magenta a la izquierda +
   formulario a la derecha. Las variables del tema PrestaShop se definen
   SOLO dentro del bloque (.cip-auth-page) para NO alterar la cabecera ni
   el footer de WordPress (que quedan con su estilo de GeneratePress).
   ─────────────────────────────────────────────────────────────── */
.cip-auth-page {
	--navy: #8f3658;
	--navy-2: #6f2744;
	--red: #d21668;
	--red-2: #c8145f;
	--paper: #ffffff;
	--paper-2: #f4f6f8;
	--paper-3: #ececec;
	--ink: #1c2430;
	--ink-2: #444a52;
	--muted: #5b6676;
	--rule: #e7ebf0;
	--rule-2: #b8bec7;
	--r-sm: 6px;
	--sans: 'Montserrat', 'Roboto', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--display: 'Montserrat', 'Roboto', system-ui, sans-serif;
	--tech: 'Roboto Mono', ui-monospace, Menlo, monospace;
	font-family: var(--sans);
	color: var(--ink);
}
.cip-auth-page .cip-auth-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	min-height: 720px;
}
.cip-auth-page .cip-auth-panel {
	background: var(--navy);
	color: #fff;
	padding: 80px 56px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.cip-auth-page .cip-auth-panel > .imgslot { z-index: 0; }
.cip-auth-page .cip-auth-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 8, 14, 0.30) 0%, rgba(20, 8, 14, 0.52) 100%);
	pointer-events: none;
}
.cip-auth-page .cip-auth-panel > div:not(.imgslot) { position: relative; z-index: 2; }
.cip-auth-page .cip-auth-form-wrap {
	padding: 72px 64px;
	background: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cip-auth-page .cip-auth-card { max-width: 620px; width: 100%; }
.cip-reg-page .cip-reg-login-link { margin: 26px 0 0; font-size: 13px; color: var(--ink-2); }
.cip-reg-page .cip-reg-login-link a { color: var(--red); font-weight: 700; }

@media (max-width: 900px) {
	.cip-auth-page .cip-auth-layout { grid-template-columns: 1fr; min-height: 0; }
	.cip-auth-page .cip-auth-panel,
	.cip-auth-page .cip-auth-form-wrap { padding: 48px 24px; }
	.cip-auth-page .cip-auth-panel { min-height: 300px; }
	/* Los títulos llevan tamaño inline; se reducen con !important en móvil. */
	.cip-auth-page .cip-auth-panel h1 { font-size: 40px !important; }
	.cip-auth-page .cip-auth-form-wrap h2 { font-size: 30px !important; }
}
@media (max-width: 560px) {
	.cip-auth-page .cip-auth-panel,
	.cip-auth-page .cip-auth-form-wrap { padding: 36px 18px; }
	.cip-auth-page .cip-auth-card { max-width: none; }
	.cip-auth-page .cip-auth-panel h1 { font-size: 31px !important; }
	.cip-auth-page .cip-auth-form-wrap h2 { font-size: 26px !important; }
	/* Estadísticas (1975 / +50 / B2B): que no se aprieten. */
	.cip-auth-page .cip-auth-panel > div:last-child { gap: 18px !important; flex-wrap: wrap; }
}

/* ───────────────────────────────────────────────────────────────
   SOLO en la página de alta (page-id-2569): ocultar los elementos
   globales de GeneratePress que NO son ni el menú ni el footer (el hero
   del título "Protegido…" y la sección CTA "Somos importadores"), para
   dejar dentro únicamente la réplica del formulario de PrestaShop.
   El menú (.main-navigation) y el footer (.site-footer) NO se tocan.
   Nota: si se editan esos elementos en GeneratePress sus hashes pueden
   cambiar; entonces habría que actualizar estos selectores.
   ─────────────────────────────────────────────────────────────── */
.page-id-2569 .gb-container-44ec79a4,
.page-id-2569 .gb-container-08e7e52d { display: none !important; }

/* ───────────────────────────────────────────────────────────
   Selector de idioma de la landing ([cipisa_b2b_lang]).
   Va en una barra propia ENCIMA del bloque, alineada a la derecha: dentro de
   la tarjeta pasaba desapercibido. Bandera + nombre del idioma; el codigo de
   dos letras solo se ve cuando no cabe el nombre (movil).
   Vive FUERA de .cb2b-form, asi que no hereda sus variables: valores literales.
   ─────────────────────────────────────────────────────────── */
/* La barra queda justo debajo del menu magenta: sin este aire se pega a el. */
.cip-auth-page .cb2b-langbar-wrap,
.cb2b-langbar-wrap { padding: 34px 0 0; }

.cip-auth-page .cb2b-langbar,
.cb2b-langbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	font-family: 'Roboto Mono', ui-monospace, Menlo, monospace;
}
.cb2b-langbar__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #5b6676;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cb2b-langbar__globe { flex: 0 0 auto; }
.cb2b-langbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cb2b-langbar__item { margin: 0; }
.cb2b-langbar__item a,
.cb2b-langbar__item > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: #fff;
	border: 1px solid #b8bec7;
	border-radius: 999px;
	color: #1c2430;
	font-family: 'Montserrat', 'Roboto', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.cb2b-langbar__item a:hover,
.cb2b-langbar__item a:focus-visible {
	background: #fff;
	border-color: #d21668;
	color: #d21668;
	box-shadow: 0 2px 10px rgba(210, 22, 104, .16);
}
/* El idioma activo no es un enlace: magenta solido. */
.cb2b-langbar__item.is-current > span {
	background: #d21668;
	border-color: #d21668;
	color: #fff;
}
/* Banderas: las imagenes de Polylang (16x11) sin deformar. */
.cb2b-langbar__flag { display: inline-flex; flex: 0 0 auto; }
.cb2b-langbar__flag img {
	display: block;
	width: 18px;
	height: auto;
	margin: 0;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(28, 36, 48, .12);
}
.cb2b-langbar__code { display: none; }

/* Movil: la barra se centra y se queda solo el codigo de idioma, que cabe. */
@media (max-width: 640px) {
	.cip-auth-page .cb2b-langbar-wrap,
	.cb2b-langbar-wrap { padding-top: 22px; }
	.cip-auth-page .cb2b-langbar,
	.cb2b-langbar { justify-content: center; gap: 10px; margin-bottom: 20px; }
	.cb2b-langbar__label-txt { display: none; }
	.cb2b-langbar__name { display: none; }
	.cb2b-langbar__code { display: inline; font-size: 12px; letter-spacing: .06em; }
	.cb2b-langbar__item a,
	.cb2b-langbar__item > span { padding: 8px 12px; }
}

/* Campos que se ocultan al cambiar de pais (Espana ↔ resto del mundo). */
.cb2b-form [hidden],
.cip-auth-page [hidden] { display: none !important; }