/* Formularios de cuenta y checkout — Bioherbolario — Claudia, 2026-07-20
   Ámbito: SOLO páginas de cuenta/pedido (por id del body). No toca home, categorías
   ni fichas de producto.
   Paleta propia de BH (verde #5a9e74 + azul #009ad0), deliberadamente distinta de la
   de Rosana. Complementa a factura.css (bloque "¿Necesitas factura?").
   Nace ya compacto: incorpora las lecciones de las 3 pasadas de densidad de Rosana. */

#authentication, #address, #addresses, #identity, #password, #contact,
#order, #order-opc, #guest-tracking, #my-account, #history {
	--bh-verde: #5a9e74;
	--bh-verde-osc: #48815e;
	--bh-azul: #009ad0;
	--bh-azul-osc: #007ab7;
	--bh-tinta: #2f3a36;
	--bh-gris: #6f7b77;
	--bh-borde: #d6dedb;
	--bh-borde-suave: #e8edeb;
	--bh-fondo: #f6f9f8;
}

/* --- Tarjetas y títulos ------------------------------------------------ */
/* BH: esquinas menos redondeadas que Rosana y acento en barra vertical, no en
   subrayado — para que las dos webs no se parezcan. */
#authentication .box, #address .box, #addresses .box, #identity .box,
#password .box, #contact .box, #order .box, #order-opc .box,
#guest-tracking .box, #my-account .box, #history .box {
	border: 1px solid var(--bh-borde-suave);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 40, 30, .06);
	padding: 14px 16px;
}
#authentication .page-heading, #authentication .page-subheading,
#address .page-subheading, #addresses .page-subheading, #identity .page-subheading,
#password .page-subheading, #contact .page-heading, #contact .page-subheading,
#order .page-heading, #order-opc .page-heading, #order-opc .page-subheading,
#guest-tracking .page-heading {
	color: var(--bh-tinta);
	border-bottom: 0;
	padding-left: 11px;
	position: relative;
	font-weight: 700;
}
#authentication .page-heading::before, #authentication .page-subheading::before,
#address .page-subheading::before, #identity .page-subheading::before,
#password .page-subheading::before, #contact .page-heading::before,
#order .page-heading::before, #order-opc .page-heading::before,
#order-opc .page-subheading::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 4px; height: 1.05em;
	border-radius: 2px;
	background: var(--bh-azul);
}

/* --- Campos ------------------------------------------------------------ */
#authentication .form-control, #address .form-control, #addresses .form-control,
#identity .form-control, #password .form-control, #contact .form-control,
#order .form-control, #order-opc .form-control, #guest-tracking .form-control {
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--bh-borde);
	border-radius: 6px;
	font-size: 14.5px;
	color: var(--bh-tinta);
	background: #fff;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
	max-width: 100%;
}
#authentication textarea.form-control, #contact textarea.form-control,
#address textarea.form-control, #order textarea.form-control,
#order-opc textarea.form-control {
	height: auto;
	min-height: 56px;
	padding: 8px 10px;
}
#authentication .form-control:focus, #address .form-control:focus,
#addresses .form-control:focus, #identity .form-control:focus,
#password .form-control:focus, #contact .form-control:focus,
#order .form-control:focus, #order-opc .form-control:focus,
#guest-tracking .form-control:focus {
	border-color: var(--bh-verde);
	box-shadow: 0 0 0 3px rgba(90, 158, 116, .18);
	outline: none;
}
#authentication .form-group, #address .form-group, #identity .form-group,
#password .form-group, #contact .form-group, #order .form-group,
#order-opc .form-group, #guest-tracking .form-group {
	margin-bottom: 8px;
}
#authentication label, #address label, #identity label, #password label,
#contact label, #order label, #order-opc label, #guest-tracking label {
	font-weight: 600;
	font-size: 13px;
	color: var(--bh-tinta);
	margin-bottom: 4px;
}
#authentication .form_info, #address .form_info, #identity .form_info,
#order-opc .form_info {
	color: var(--bh-gris);
	font-size: 12px;
}
#authentication input[type="radio"], #authentication input[type="checkbox"],
#address input[type="radio"], #address input[type="checkbox"],
#identity input[type="radio"], #identity input[type="checkbox"],
#order input[type="radio"], #order input[type="checkbox"],
#order-opc input[type="radio"], #order-opc input[type="checkbox"] {
	accent-color: var(--bh-verde);
	width: 16px;
	height: 16px;
}
/* El "* Campo obligatorio" de cabecera sobra (queda el de junto al botón) */
#order-opc .box > p.required:first-of-type { display: none; }

/* --- Botones ----------------------------------------------------------- */
#authentication .button.button-medium, #authentication .button.button-small,
#address .button, #addresses .button, #identity .button, #password .button,
#contact .button, #order .button.button-medium, #order-opc .button.button-medium,
#guest-tracking .button {
	background: var(--bh-verde);
	border: 0;
	border-radius: 6px;
	color: #fff;
	padding: 10px 18px;
	font-size: 14.5px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	transition: background .15s;
}
#authentication .button.button-medium:hover, #address .button:hover,
#addresses .button:hover, #identity .button:hover, #password .button:hover,
#contact .button:hover, #order .button.button-medium:hover,
#order-opc .button.button-medium:hover, #guest-tracking .button:hover {
	background: var(--bh-verde-osc);
	color: #fff;
}
#authentication .button:focus-visible, #address .button:focus-visible,
#order .button:focus-visible, #order-opc .button:focus-visible {
	outline: 3px solid var(--bh-azul);
	outline-offset: 2px;
}

/* --- Errores ----------------------------------------------------------- */
#authentication .alert-danger, #address .alert-danger, #identity .alert-danger,
#password .alert-danger, #contact .alert-danger, #order .alert-danger,
#order-opc .alert-danger {
	border-radius: 6px;
	border: 1px solid #d64545;
	background: #fdecec;
	color: #8f2323;
}

/* ======================================================================
   Checkout de 1 página (OPC)
   ====================================================================== */

/* Fuera el carrusel de recomendados en pleno pedido: distrae y alarga la
   página casi una pantalla entera. */
#order-opc #crossselling, #order-opc .crossseling, #order-opc #crossselling_list { display: none !important; }

/* Elección de acceso: pestañas finas, siempre visibles. El estado activo lo
   marca factura.js con la clase .opc-activa. */
.opc-eleccion {
	display: grid;
	gap: 8px;
	margin: 0 0 10px;
}
@media (min-width: 768px) {
	.opc-eleccion { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.opc-eleccion .opc-opcion {
	border: 1px solid var(--bh-borde);
	border-radius: 6px;
	background: #fff;
	padding: 7px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bh-tinta);
	text-align: center;
	cursor: pointer;
	line-height: 1.25;
	transition: border-color .15s, background .15s, color .15s;
}
/* El subtítulo va debajo del título, no pegado a su derecha */
.opc-eleccion .opc-opcion strong { display: block; font-weight: 700; }
.opc-eleccion .opc-opcion small { display: block; font-weight: 400; font-size: 11.5px; opacity: .8; }
.opc-eleccion .opc-opcion:hover { border-color: var(--bh-verde); }
.opc-eleccion .opc-opcion.opc-activa {
	border-color: var(--bh-verde);
	background: var(--bh-verde);
	color: #fff;
}

/* Campos en rejilla: 1 columna en móvil, 2 en tableta, 3 en escritorio.
   Menos scroll = menos abandono. */
#order-opc #opc_account_form, #order-opc #opc_invoice_address,
#address form#add_address {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 14px;
}
@media (min-width: 768px) {
	#order-opc #opc_account_form, #order-opc #opc_invoice_address,
	#address form#add_address { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	#order-opc #opc_account_form, #order-opc #opc_invoice_address,
	#address form#add_address { grid-template-columns: repeat(3, 1fr); }
}
/* Campos y elementos que ocupan la fila entera (títulos, avisos, notas, factura).
   Sin esto, un título de sección se come una celda de la rejilla y descoloca todas
   las columnas siguientes. */
#order-opc .opc-campo-ancho, #address .opc-campo-ancho { grid-column: 1 / -1; }
#order-opc #opc_account_form > h3, #order-opc #opc_account_form > p.required,
#order-opc #opc_account_form > .alert, #order-opc #opc_account_form > .checkbox,
#order-opc #opc_account_form > .factura-card, #order-opc #opc_account_form > script,
#order-opc #opc_account_form > link, #order-opc #opc_invoice_address > h3 {
	grid-column: 1 / -1;
}
/* Los campos ocultos del core no deben ocupar celda */
#order-opc #opc_account_form > input[type="hidden"],
#order-opc #opc_account_form > #vat_number_block { display: none; }
/* El textarea trae cols="26" en el HTML del tema: sin width al 100% se queda
   estrecho aunque su contenedor ocupe la fila entera. */
#order-opc .opc-campo-ancho textarea.form-control,
#address .opc-campo-ancho textarea.form-control { height: 52px; min-height: 44px; width: 100% !important; max-width: 100% !important; }

/* Nombre y apellidos de la dirección: los rellena factura.js copiándolos de los
   de la cuenta, y se esconden AQUÍ SIN display:none — el guardado AJAX de
   order-opc.js solo envía inputs :visible de jQuery, así que tienen que
   conservar un tamaño mayor que cero o el pedido se guarda sin nombre. */
#order-opc .opc-campo-espejo {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Menos aire vertical en toda la página de pedido */
#order-opc h1.page-heading { margin: 8px 0; padding-bottom: 4px; }
#order-opc .page-subheading { margin: 4px 0 6px; }
#order-opc .checkbox { margin: 3px 0; }
#order-opc hr { margin: 10px 0; }
#order-opc .box > br, #order-opc .order_carrier_content > div > br { display: none; }

/* Botón con spinner mientras guarda (el AJAX del core es síncrono y congela el
   repintado: sin esto el cliente cree que no ha pasado nada y vuelve a pulsar) */
#order-opc .opc-guardando { opacity: .75; pointer-events: none; }
#order-opc .opc-spinner {
	display: inline-block;
	width: 14px; height: 14px;
	margin-right: 8px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: opcGira .7s linear infinite;
}
@keyframes opcGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	#order-opc .opc-spinner { animation: none; }
}

/* --- Transportistas ---------------------------------------------------- */
/* El tema los pinta como tabla de 4 celdas con anchos Y ALTURA fijos, que en
   móvil hace que las tarjetas se solapen. Los pasamos a fila flexible y
   anulamos width/height con !important (si no, gana el tema). */
#order-opc .delivery_option {
	border: 1px solid var(--bh-borde);
	border-radius: 6px;
	padding: 8px 12px;
	margin: 0 0 8px;
	background: #fff;
}
#order-opc .delivery_option.item, #order-opc .delivery_option.alternate_item { background: #fff; }
#order-opc .delivery_option, #order-opc .delivery_option > div { height: auto !important; }
#order-opc .delivery_option table.resume,
#order-opc .delivery_option table.resume tbody { display: block; width: 100%; height: auto !important; border: 0; margin: 0; }
#order-opc .delivery_option table.resume tr { display: flex; align-items: center; gap: 10px; }
#order-opc .delivery_option table.resume td { display: block; width: auto !important; height: auto !important; border: 0; padding: 0; background: none; }
#order-opc .delivery_option table.resume td.delivery_option_radio { flex: 0 0 auto; }
/* font-size 0 colapsa la celda del logo cuando no hay imagen. El selector tiene
   que ir completo (table.resume td...) o pierde por especificidad. */
#order-opc .delivery_option table.resume td.delivery_option_logo { flex: 0 0 auto; font-size: 0; }
#order-opc .delivery_option table.resume td.delivery_option_logo img.order_carrier_logo {
	max-height: 34px;
	width: auto;
	display: block;
	border-radius: 4px;
}
#order-opc .delivery_option table.resume td:nth-child(3) { flex: 1 1 auto; font-size: 12.5px; line-height: 1.35; color: var(--bh-gris); }
#order-opc .delivery_option table.resume td:nth-child(3) strong { display: block; font-size: 13.5px; color: var(--bh-tinta); }
#order-opc .delivery_option table.resume td:nth-child(3) br { display: none; }
#order-opc .delivery_option table.resume td.delivery_option_price { flex: 0 0 auto; font-weight: 700; white-space: nowrap; font-size: 14px; color: var(--bh-tinta); }
#order-opc .delivery_option table.resume td.delivery_option_price > div { width: auto !important; padding: 0; }
@media (max-width: 767px) {
	#order-opc .delivery_option table.resume td.delivery_option_price { white-space: normal; max-width: 92px; text-align: right; font-size: 13px; line-height: 1.25; }
	#order-opc .delivery_option table.resume td.delivery_option_logo img.order_carrier_logo { max-height: 26px; }
}
#order-opc .carrier_title { font-weight: 600; margin: 6px 0; }

/* --- Punto de recogida Nacex ------------------------------------------- */
/* De 7 filas sueltas a rejilla de 2 columnas (1 en móvil) */
#order-opc #nacexshopChosen { width: 100%; }
#order-opc #nacexshopChosen tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
#order-opc #nacexshopChosen tr { display: flex; align-items: center; gap: 8px; }
#order-opc #nacexshopChosen td { display: block; padding: 0; border: 0; font-size: 12.5px; color: var(--bh-gris); }
#order-opc #nacexshopChosen td:first-child { flex: 0 0 76px; text-align: right; }
#order-opc #nacexshopChosen td:last-child { flex: 1 1 auto; }
#order-opc #nacexshopChosen input { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--bh-borde-suave); border-radius: 5px; background: var(--bh-fondo); color: var(--bh-tinta); font-size: 12.5px; }
#order-opc .order_carrier_content h3 { color: var(--bh-tinta); font-size: 15px; margin: 4px 0 8px; }
#order-opc .ncx_button { border-radius: 6px; }
@media (max-width: 767px) {
	#order-opc #nacexshopChosen tbody { grid-template-columns: 1fr; }
}
/* Aviso de "elige punto" pintado por la puerta JS */
#order-opc .opc-aviso-nacex {
	border: 1px solid #d9534f;
	background: #fff4f4;
	color: #8f2323;
	border-radius: 6px;
	padding: 9px 12px;
	margin: 8px 0;
	font-size: 13.5px;
	font-weight: 600;
}

/* --- Móvil ------------------------------------------------------------- */
@media (max-width: 767px) {
	#authentication .box, #address .box, #identity .box, #password .box,
	#contact .box, #order .box, #order-opc .box { padding: 12px 10px; }
	.opc-eleccion { gap: 6px; }
	#order-opc .button.button-medium { width: 100%; }
}