/* ==========================================================================
   Piel del checkout
   --------------------------------------------------------------------------
   Viste con el diseño las cuatro pantallas que renderiza el tema traveltour:
   la barra de 4 pasos y el formulario de TourMaster, el order-pay de
   WooCommerce, el carro y el checkout.

   ESCRITO MOBILE FIRST a pedido de Leandro (2026-08-24): el foco es 100%
   teléfonos, así que el bloque base es el de teléfono y el único breakpoint
   sube a escritorio, no al revés.

   Todo prefijado con body.southern-checkout para ganarle a tourmaster.css y a
   traveltour sin necesidad de !important — la misma receta que funcionó en la
   ficha del tour (ver motor-reserva.css).
   ========================================================================== */

/* La tipografía del diseño.
   El mu-plugin `southern-propuestas.php` inyecta Inter en las páginas que sirve crudas (home,
   tarifas, faqs…), pero el checkout lo renderiza el TEMA, así que ahí nunca llegaba: salía con la
   tipografía de traveltour. De ahí que Leandro viera dos tipografías distintas entre `/` y
   `/?tourmaster-payment`. Se declara igual que allá, apuntando a los mismos .woff2 del child theme.
   Si algún día se unifican, tocar los dos lugares. */
@font-face {
	font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.southern-checkout,
body.southern-checkout button,
body.southern-checkout input,
body.southern-checkout select,
body.southern-checkout textarea,
body.southern-checkout h1,
body.southern-checkout h2,
body.southern-checkout h3,
body.southern-checkout h4,
body.southern-checkout h5,
body.southern-checkout h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* El cuerpo del diseño va en 17px. Los inputs NO heredan: se quedan en 16px por la regla de más
   abajo, porque por debajo de 16 iOS hace zoom al enfocar. */
body.southern-checkout { font-size: 17px; line-height: 1.65; }

/* Los tokens del diseño. Duplicados a propósito de diseno-tour.css: esa hoja
   trae además un reset `*{margin:0;padding:0}` que acá arrasaría con el layout
   del tema. Si algún día se extraen a su propio archivo, unificar los dos. */
body.southern-checkout {
	--deep: #08222F; --deep2: #0E3345; --glacier: #2A7F9E; --glacier-lt: #5FB3CE;
	--ice: #F2F7FA; --text: #152A34; --muted: #5B7280; --line: #DDE7ED;
	--accent: #C9762F; --accent-d: #A85F20; --ok: #2E7D5B;
	--r: 14px; --sh: 0 4px 20px rgba(8, 34, 47, .09);
}

/* --------------------------------------------------------------------------
   1. Lo que el diseño no usa
   -------------------------------------------------------------------------- */

/* El bloque "Detalles de Facturación" repite los mismos 6 campos que "Tus
   datos". Se esconde y checkout.js espeja los valores, así que los inputs
   billing_* siguen viajando en el POST: de ahí salen los datos del pedido de
   WooCommerce y el email del pagador de Mercado Pago. Sin el espejo, se
   romperían. Se oculta con clip-path en vez de display:none para no sacarlos
   del formulario. */
body.southern-checkout .tourmaster-payment-billing-wrap {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* La fila del hero con el título del tour y la foto de fondo.
   Pedido por Leandro el 2026-08-24: fuera toda esa fila.

   OJO: NO se puede `display:none` el contenedor. `payment-online.php` abre
   `.tourmaster-payment-head` en la línea 97 y lo cierra en la 147, y **la barra
   de los 4 pasos vive adentro** (línea 118). Esconder el div se llevaría los
   pasos puestos. Así que se saca lo que sobra —título, foto y overlays— y el
   contenedor queda como una caja sin alto propio.

   El `!important` es necesario y es el único del archivo: el plugin arma la foto
   de fondo en un atributo `style` inline (línea 97), y a un inline style no se le
   gana por especificidad. */
body.southern-checkout .tourmaster-payment-head {
	background: none !important;
	min-height: 0; height: auto; padding: 0; margin: 0;
}
body.southern-checkout .tourmaster-payment-title-container,
body.southern-checkout .tourmaster-payment-head-overlay,
body.southern-checkout .tourmaster-payment-head-overlay-opacity,
body.southern-checkout .tourmaster-payment-head-top-overlay { display: none; }

/* Iconos decorativos de los títulos: el diseño no los usa. */
body.southern-checkout .tourmaster-payment-contact-title > .fa,
body.southern-checkout .tourmaster-payment-additional-note-title > .fa { display: none; }

/* --------------------------------------------------------------------------
   1.b La cabecera del tema, fuera. La nuestra, adentro.
   --------------------------------------------------------------------------
   Decidido con Leandro el 2026-08-24: en el checkout no va menú ni hero. Cada
   link del header es una salida del embudo cuando el cliente está por pagar.

   Se esconde el header de traveltour completo en vez de disfrazarlo, porque es
   transparente y calcula su altura contra el hero de la página: al ocultar el
   hero, esas cuentas quedan mal. La cabecera propia se imprime en
   `wp_body_open` (ver southern_cabecera_checkout en functions.php).
   -------------------------------------------------------------------------- */

body.southern-checkout .traveltour-top-bar,
body.southern-checkout .traveltour-header-wrap,
body.southern-checkout .traveltour-mobile-header-wrap,
body.southern-checkout .traveltour-page-title-wrap,
body.southern-checkout .traveltour-header-transparent-substitute,
/* El tema tiene navegación pegajosa: al hacer scroll agrega `traveltour-fixed-navigation`
   (`position: fixed; top: 0; z-index: 99`) y deja placeholders. En el order-pay eso se
   montaba ENCIMA de la tabla de totales — el menú superpuesto que reportó Leandro.
   Se listan los contenedores del menú además de los wrappers, porque el tema los
   reusa en más de una variante de cabecera. */
body.southern-checkout .traveltour-fixed-navigation,
body.southern-checkout .traveltour-sticky-menu-placeholder,
body.southern-checkout .traveltour-sticky-mobile-placeholder,
body.southern-checkout .traveltour-navigation,
body.southern-checkout .traveltour-main-menu,
body.southern-checkout .traveltour-mobile-menu,
body.southern-checkout .traveltour-mm-menu-wrap,
body.southern-checkout .traveltour-logo { display: none; }

/* Nuestra cabecera sí lleva logo: se repone después de la lista de arriba. */
body.southern-checkout .southern-checkout-header .sc-marca { display: block; }

/* El tema empuja el contenido hacia abajo para dejar lugar al header
   transparente. Sin header, ese margen sobra. */
body.southern-checkout .traveltour-body-wrapper,
body.southern-checkout .traveltour-page-wrapper,
body.southern-checkout .tourmaster-page-wrapper { margin-top: 0; padding-top: 0; }

/* OJO: `payment-online.php` imprime un SEGUNDO .traveltour-header-transparent-substitute
   *adentro* del contenido. Es un espaciador dimensionado contra el header transparente que
   acabamos de esconder, así que sin esto deja un hueco vacío arriba de la primera tarjeta.
   Ya está en la lista de arriba; se anota acá porque no es obvio de dónde sale. */

body.southern-checkout .southern-checkout-header {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line);
	text-align: center;
}
body.southern-checkout .southern-checkout-header .sc-marca { display: block; line-height: 0; }
body.southern-checkout .southern-checkout-header .sc-marca img {
	width: auto; height: 38px; display: block;
}
body.southern-checkout .southern-checkout-header .sc-contacto {
	display: flex; align-items: center; gap: 14px;
	font-size: .84rem; font-weight: 600;
}
body.southern-checkout .southern-checkout-header .sc-contacto a {
	color: var(--muted); text-decoration: none;
}
body.southern-checkout .southern-checkout-header .sc-contacto a:hover { color: var(--glacier); }

/* --------------------------------------------------------------------------
   2. Lienzo
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-page-content,
body.southern-checkout .woocommerce { color: var(--text); }

/* --------------------------------------------------------------------------
   3. La barra de los 4 pasos
   --------------------------------------------------------------------------
   En un teléfono los cuatro tienen que entrar en una fila sin cortarse. Por eso
   las etiquetas son cortas ("Reserva · Tus datos · Pago · Listo", ver
   textos-motor.php) y el número va arriba del texto, no al lado.
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-payment-step-wrap {
	background: var(--ice); border-bottom: 1px solid var(--line);
	padding: 10px 0; margin-bottom: 14px;
}
body.southern-checkout .tourmaster-payment-step-overlay { display: none; }

body.southern-checkout .tourmaster-payment-step-inner {
	display: flex; align-items: flex-start; gap: 4px;
}

body.southern-checkout .tourmaster-payment-step-item {
	flex: 1 1 0; min-width: 0; float: none; width: auto;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	text-align: center; position: relative;
}

/* La línea que une los pasos, detrás de los círculos. */
body.southern-checkout .tourmaster-payment-step-item::before {
	content: ""; position: absolute; top: 13px; left: 50%; right: -50%;
	height: 2px; background: var(--line); z-index: 0;
}
body.southern-checkout .tourmaster-payment-step-item:last-child::before { display: none; }
body.southern-checkout .tourmaster-payment-step-item.tourmaster-checked::before { background: var(--glacier-lt); }

body.southern-checkout .tourmaster-payment-step-item-icon {
	position: relative; z-index: 1;
	width: 26px; height: 26px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid var(--line); color: var(--muted);
	font-size: .78rem; font-weight: 700; line-height: 1;
}
body.southern-checkout .tourmaster-payment-step-item-icon > .fa { display: none; }

/* Pasos ya hechos: tilde sobre fondo lleno. */
body.southern-checkout .tourmaster-checked .tourmaster-payment-step-item-icon {
	background: var(--glacier); border-color: var(--glacier); color: #fff;
}
body.southern-checkout .tourmaster-checked .tourmaster-payment-step-item-icon > .fa { display: block; }
body.southern-checkout .tourmaster-checked .tourmaster-payment-step-item-icon > .tourmaster-text { display: none; }

/* Pasos que todavía no se hicieron. El plugin les pone `.tourmaster-enable` desde
   el JS (tourmaster-tour.js:1258) y **oculta el número** además de mostrar el tilde
   (tourmaster.css:189-192, cuatro clases de especificidad). Combinado con nuestra
   regla que oculta el tilde, el círculo quedaba VACÍO — es lo que veía Leandro en
   el paso 2 estando en el 3. Acá se invierte: número sí, tilde no. */
body.southern-checkout .tourmaster-payment-step-wrap .tourmaster-payment-step-item.tourmaster-enable .tourmaster-payment-step-item-icon > .tourmaster-text {
	display: inline;
}
body.southern-checkout .tourmaster-payment-step-wrap .tourmaster-payment-step-item.tourmaster-enable .tourmaster-payment-step-item-icon > .fa {
	display: none;
}

/* Paso actual: anillo, para distinguirlo del hecho sin usar otro color. */
body.southern-checkout .tourmaster-current .tourmaster-payment-step-item-icon {
	background: #fff; border-color: var(--glacier); color: var(--deep);
	box-shadow: 0 0 0 3px rgba(42, 127, 158, .16);
}

body.southern-checkout .tourmaster-payment-step-item-title {
	font-size: .68rem; font-weight: 600; line-height: 1.2; color: var(--muted);
	letter-spacing: 0; text-transform: none;
	/* En una sola línea, siempre. En teléfono los rótulos se cortaban al medio ("Reserv/a",
	   "Tus/datos"): el ancho de cada paso es un cuarto de la pantalla y el navegador partía la
	   palabra. Con `nowrap` la etiqueta no se rompe y, si algún idioma trae una más larga, se sale
	   del cuarto en vez de apilarse — que es lo que se quiere en una barra de progreso. */
	white-space: nowrap;
}
body.southern-checkout .tourmaster-checked .tourmaster-payment-step-item-title,
body.southern-checkout .tourmaster-current .tourmaster-payment-step-item-title {
	color: var(--deep); font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. Bloques del formulario
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-form-field.tourmaster-with-border {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--sh); padding: 14px; margin-bottom: 12px;
}

/* Todas las tarjetas de la izquierda, al mismo ancho.
   Pedido por Leandro el 2026-08-24: el tema las deja flotando con anchos
   distintos, y quedaban desparejas entre sí. */
body.southern-checkout .tourmaster-payment-contact-wrap,
body.southern-checkout .tourmaster-payment-traveller-info-wrap,
body.southern-checkout .tourmaster-payment-additional-note-wrap,
body.southern-checkout .tourmaster-payment-service-form-wrap {
	float: none; width: 100%; max-width: none; margin-left: 0; margin-right: 0;
	box-sizing: border-box;
}

/* El padding lateral del tema come ancho útil. En teléfono cada píxel cuenta. */
body.southern-checkout .tourmaster-page-content.tourmaster-item-pdlr {
	padding-left: 14px; padding-right: 14px;
}

body.southern-checkout .tourmaster-payment-contact-title,
body.southern-checkout .tourmaster-payment-additional-note-title,
body.southern-checkout .tourmaster-payment-traveller-info-title,
body.southern-checkout .tourmaster-payment-service-form-title {
	font-size: 1rem; font-weight: 700; color: var(--deep);
	letter-spacing: -.01em; margin: 0 0 10px; padding: 0; border: none;
}
body.southern-checkout .tourmaster-payment-traveller-info-title > .fa,
body.southern-checkout .tourmaster-payment-service-form-title > .fa { display: none; }

/* --------------------------------------------------------------------------
   T8 · Botón "Copiar los datos del Pasajero 1"
   --------------------------------------------------------------------------
   Lo inyecta js/checkout.js debajo del título de "Tus datos". Va discreto a
   propósito: es un atajo, no la acción principal del paso. El principal es
   "Siguiente Paso" y no queremos competirle.

   OJO con el breakpoint: a partir de 782px `.tourmaster-payment-contact-wrap`
   pasa a `grid` de dos columnas, así que el botón necesita `grid-column: 1/-1`
   o se mete en la celda de "Nombre". Está más abajo, en el media query.
   -------------------------------------------------------------------------- */
body.southern-checkout .southern-copiar-pasajero {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 0 14px; padding: 7px 13px;
	font: 600 .82rem/1.2 inherit; color: var(--glacier);
	background: var(--ice); border: 1px solid var(--line);
	border-radius: 999px; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
body.southern-checkout .southern-copiar-pasajero::before {
	content: "⇩"; font-size: .95em; line-height: 1;
}
body.southern-checkout .southern-copiar-pasajero:hover,
body.southern-checkout .southern-copiar-pasajero:focus-visible {
	background: #fff; border-color: var(--glacier); color: var(--deep);
}

/* --------------------------------------------------------------------------
   5. Campos
   --------------------------------------------------------------------------
   El detalle que más importa en teléfono: 16px de font-size en los inputs.
   Por debajo de eso iOS hace zoom al enfocar el campo y descuadra la pantalla.
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-contact-field { margin-bottom: 10px; }
body.southern-checkout .tourmaster-contact-field:last-child { margin-bottom: 0; }

body.southern-checkout .tourmaster-contact-field > .tourmaster-head,
body.southern-checkout .tourmaster-additional-note-field > .tourmaster-head {
	display: block; float: none; width: auto; padding: 0; margin: 0 0 4px;
	font-size: .8rem; font-weight: 600; color: var(--deep); line-height: 1.3;
}
body.southern-checkout .tourmaster-req { color: var(--accent); margin-left: 2px; }

body.southern-checkout .tourmaster-contact-field > .tourmaster-tail,
body.southern-checkout .tourmaster-additional-note-field > .tourmaster-tail {
	display: block; float: none; width: auto; padding: 0;
}

body.southern-checkout .tourmaster-contact-field input[type="text"],
body.southern-checkout .tourmaster-contact-field input[type="email"],
body.southern-checkout .tourmaster-contact-field input[type="tel"],
body.southern-checkout .tourmaster-traveller-info-input,
body.southern-checkout .tourmaster-traveller-info-passport,
body.southern-checkout .tourmaster-traveller-info-custom input,
body.southern-checkout .tourmaster-combobox-wrap select,
body.southern-checkout .tourmaster-additional-note-field textarea {
	width: 100%; box-sizing: border-box;
	font-size: 16px; font-family: inherit; color: var(--text);
	background: #fff; border: 1px solid var(--line); border-radius: 10px;
	padding: 10px 12px; min-height: 44px; line-height: 1.4;
	transition: border-color .12s, box-shadow .12s;
}

body.southern-checkout .tourmaster-contact-field input:focus,
body.southern-checkout .tourmaster-traveller-info-input:focus,
body.southern-checkout .tourmaster-traveller-info-passport:focus,
body.southern-checkout .tourmaster-combobox-wrap select:focus,
body.southern-checkout .tourmaster-additional-note-field textarea:focus {
	outline: none; border-color: var(--glacier);
	box-shadow: 0 0 0 3px rgba(42, 127, 158, .14);
}

body.southern-checkout .tourmaster-additional-note-field textarea {
	min-height: 72px; resize: vertical;
}

/* El CSS del plugin le pone `max-width: 575px` a este campo
   (.tourmaster-additional-note-field.clearfix) y otro de 600px al wrap, así que la caja no llegaba
   nunca al ancho de la tarjeta. Es la razón por la que se veía angosta y no un tema de layout. */
body.southern-checkout .tourmaster-additional-note-field,
body.southern-checkout .tourmaster-payment-additional-note-wrap .tourmaster-additional-note-field {
	max-width: none; width: 100%; float: none; margin-bottom: 0;
}

/* El select de país: flecha propia, porque el tema le saca la nativa. */
body.southern-checkout .tourmaster-combobox-wrap { position: relative; }
body.southern-checkout .tourmaster-combobox-wrap::after {
	content: ""; position: absolute; right: 14px; top: 50%; pointer-events: none;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg);
}
body.southern-checkout .tourmaster-combobox-wrap select {
	appearance: none; -webkit-appearance: none; padding-right: 36px;
}

/* --------------------------------------------------------------------------
   5.b Detalles del Pasajero
   --------------------------------------------------------------------------
   Otro bloque, otras clases: `.tourmaster-traveller-info-*`. El tema lo deja
   con el `.tourmaster-head` ("Pasajero 1") flotando a la izquierda, lo que en
   un teléfono se come una columna entera para una etiqueta de dos palabras.
   Acá el nombre del pasajero pasa a ser un rótulo arriba de sus campos.
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-traveller-info-field {
	margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
body.southern-checkout .tourmaster-traveller-info-field:last-child {
	margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}

body.southern-checkout .tourmaster-traveller-info-field > .tourmaster-head {
	display: block; float: none; width: auto; padding: 0; margin: 0 0 8px;
	font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--glacier); line-height: 1.3;
}

/* Los campos del pasajero, de a dos por fila ya en teléfono: son cortos
   (Nombre, Apellido, DNI, Edad) y ponerlos apilados duplica el scroll.

   Esto funciona porque se le quitó el `width=` a los campos en la config del tour
   (`additional-traveller-fields`). Con width, el plugin envolvía cada campo en un
   `<div style="float:left;width:50%">` y esos estilos inline le ganaban a cualquier grilla. */
body.southern-checkout .tourmaster-traveller-info-field > .tourmaster-tail {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
	float: none; width: auto; padding: 0;
}

/* El Hotel va a lo ancho porque es el campo más largo, y por eso se reordenó al final en la config
   del tour: así ocupa la última fila entera en vez de partir la grilla al medio. */
body.southern-checkout .tourmaster-traveller-info-field > .tourmaster-tail > *:last-child {
	grid-column: 1 / -1;
}

/* Los anchos del plugin usan TRES clases de especificidad
   (`.tourmaster-payment-traveller-info-wrap .tourmaster-tail .tourmaster-traveller-info-input{width:47%}`
   y `-custom{width:97%}`), así que le ganaban a una regla de dos. De ahí que Nombre y Apellido
   salieran cortos y Fecha/DNI más anchos. Se replica la cadena para ganar sin `!important`. */
body.southern-checkout .tourmaster-payment-traveller-info-wrap .tourmaster-tail .tourmaster-traveller-info-input,
body.southern-checkout .tourmaster-payment-traveller-info-wrap .tourmaster-tail .tourmaster-traveller-info-passport,
body.southern-checkout .tourmaster-payment-traveller-info-wrap .tourmaster-tail .tourmaster-traveller-info-custom {
	float: none; width: 100%; box-sizing: border-box; margin: 0;
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-button,
body.southern-checkout .tourmaster-tour-booking-continue,
body.southern-checkout .tourmaster-tour-booking-submit,
body.southern-checkout #place_order,
body.southern-checkout .woocommerce-button.button {
	display: block; width: 100%; box-sizing: border-box;
	background: var(--accent); color: #fff; border: none; border-radius: 11px;
	padding: 13px 20px; min-height: 48px;
	font-size: 1rem; font-weight: 700; font-family: inherit; line-height: 1.2;
	text-align: center; text-transform: none; letter-spacing: 0;
	cursor: pointer; transition: background .14s;
}
body.southern-checkout .tourmaster-button:hover,
body.southern-checkout .tourmaster-tour-booking-continue:hover,
body.southern-checkout .tourmaster-tour-booking-submit:hover,
body.southern-checkout #place_order:hover,
body.southern-checkout .woocommerce-button.button:hover {
	background: var(--accent-d); color: #fff;
}

/* --------------------------------------------------------------------------
   7. Avisos y errores
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-notification-box,
body.southern-checkout .woocommerce-error,
body.southern-checkout .woocommerce-info,
body.southern-checkout .woocommerce-message {
	border-radius: 11px; padding: 13px 15px; margin: 0 0 16px;
	font-size: .9rem; line-height: 1.45; list-style: none; border: 1px solid;
}
body.southern-checkout .tourmaster-notification-box.tourmaster-failure,
body.southern-checkout .woocommerce-error {
	background: #FDF3F2; border-color: #E7BDB6; color: #8A2E1E;
}
body.southern-checkout .woocommerce-info,
body.southern-checkout .woocommerce-message {
	background: #F6FBFD; border-color: var(--glacier-lt); color: var(--deep);
}
/* El tema le pone un ::before con icono que rompe el interlineado. */
body.southern-checkout .woocommerce-error::before,
body.southern-checkout .woocommerce-info::before,
body.southern-checkout .woocommerce-message::before { display: none; }

/* Vacío no ocupa lugar: TourMaster deja el div del error siempre en el DOM. */
body.southern-checkout .tourmaster-notification-box:empty {
	display: none; padding: 0; margin: 0; border: none;
}

/* --------------------------------------------------------------------------
   8. Resumen de la reserva (la columna lateral)
   --------------------------------------------------------------------------
   En teléfono va arriba del formulario y no se hace sticky: ocuparía media
   pantalla mientras el cliente escribe.
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-tour-booking-bar-wrap {
	float: none; width: auto; margin: 0 0 18px; padding: 0;
}
body.southern-checkout .tourmaster-tour-booking-bar-inner {
	position: static; width: auto;
	background: var(--ice); border: 1px solid var(--line);
	border-radius: var(--r); padding: 16px;
}
body.southern-checkout .tourmaster-tour-payment-content {
	float: none; width: auto; padding: 0;
}

/* --------------------------------------------------------------------------
   9. order-pay de WooCommerce: la pantalla donde se elige cómo pagar
   -------------------------------------------------------------------------- */

body.southern-checkout .woocommerce table.shop_table {
	width: 100%; border: 1px solid var(--line); border-radius: var(--r);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
	margin: 0 0 20px; font-size: .93rem;
}
body.southern-checkout .woocommerce table.shop_table th,
body.southern-checkout .woocommerce table.shop_table td {
	padding: 12px 14px; border: none; border-bottom: 1px solid var(--line);
	text-align: left; vertical-align: top;
}
body.southern-checkout .woocommerce table.shop_table thead th {
	background: var(--ice); font-size: .72rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--deep);
}
body.southern-checkout .woocommerce table.shop_table tfoot th,
body.southern-checkout .woocommerce table.shop_table tfoot td {
	font-weight: 600; background: #fff;
}
/* El total, que es lo que el cliente busca con la mirada. */
body.southern-checkout .woocommerce table.shop_table tfoot tr:last-child th,
body.southern-checkout .woocommerce table.shop_table tfoot tr:last-child td {
	font-size: 1.08rem; font-weight: 700; color: var(--deep);
	background: var(--ice); border-bottom: none;
}
/* El descuento del 10%, en verde: es una buena noticia. */
body.southern-checkout .woocommerce table.shop_table tfoot .fee td,
body.southern-checkout .woocommerce table.shop_table tfoot .fee th { color: var(--ok); }

/* Formas de pago
   --------------------------------------------------------------------------
   Se selecciona a través de `#payment` a propósito. WooCommerce estiliza esto con
   `.woocommerce-checkout #payment ul.payment_methods li` —tres clases más un
   elemento—, así que `body.southern-checkout li.wc_payment_method` perdía y la caja
   de la pasarela seguía saliendo gris violácea con su flecha. Con el id gana sin
   discusión. */
body.southern-checkout #payment,
body.southern-checkout .woocommerce-checkout-payment {
	background: transparent; border-radius: 0; padding: 0;
}
body.southern-checkout #payment ul.wc_payment_methods,
body.southern-checkout ul.wc_payment_methods {
	list-style: none; margin: 0 0 18px; padding: 0; border: none;
}

/* El radio y su texto en la MISMA línea. La plantilla de WooCommerce
   (`checkout/payment-method.php`) pone el `<input>` y el `<label>` como hermanos
   dentro del `<li>`, así que el li tiene que ser la fila; con `flex-wrap`, la caja
   de descripción cae completa abajo. Pedido por Leandro el 2026-08-25. */
body.southern-checkout #payment li.wc_payment_method,
body.southern-checkout li.wc_payment_method {
	display: flex; flex-wrap: wrap; align-items: center;
	border: 1px solid var(--line); border-radius: 12px; background: #fff;
	margin: 0 0 10px; padding: 0; overflow: hidden; list-style: none;
}
body.southern-checkout #payment li.wc_payment_method > input[type="radio"] {
	width: 20px; height: 20px; flex: none; margin: 0 0 0 15px;
	accent-color: var(--glacier);
}
body.southern-checkout #payment li.wc_payment_method > label {
	display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
	padding: 14px 15px; margin: 0; min-height: 48px;
	font-size: .96rem; font-weight: 600; color: var(--deep); cursor: pointer;
	text-transform: none; letter-spacing: 0;
}
body.southern-checkout #payment li.wc_payment_method img {
	max-height: 24px; width: auto; display: inline-block; margin: 0;
}

/* La caja de descripción ocupa la fila entera, debajo del radio. */
body.southern-checkout #payment div.payment_box,
body.southern-checkout .payment_box {
	flex: 1 1 100%; width: 100%; box-sizing: border-box;
	background: var(--ice); border: none; border-top: 1px solid var(--line);
	border-radius: 0; margin: 0; padding: 14px 15px;
	font-size: .88rem; line-height: 1.5; color: var(--muted);
}
/* La flechita que WooCommerce dibuja apuntando al radio. */
body.southern-checkout #payment div.payment_box::before,
body.southern-checkout #payment div.payment_box::after,
body.southern-checkout .payment_box::before { display: none; content: none; }

body.southern-checkout .form-row.place-order { padding: 0; margin: 0; }

/* Términos y condiciones: el checkbox pegado al texto, a la izquierda.
   El tema lo flotaba a la derecha y quedaba en la otra punta de la línea.
   La plantilla (`checkout/terms.php`) ya trae el input antes del texto, así que
   basta con desflotarlo y hacer del label una fila. */
body.southern-checkout .woocommerce-terms-and-conditions-wrapper { padding: 0; margin: 12px 0 16px; }
body.southern-checkout .woocommerce-terms-and-conditions-wrapper .form-row { padding: 0; margin: 0; }
body.southern-checkout .woocommerce-form__label-for-checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	float: none; margin: 0; padding: 0;
	font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--text);
	text-transform: none; letter-spacing: 0; cursor: pointer;
}
body.southern-checkout .woocommerce-form__input-checkbox {
	float: none; flex: none; margin: 2px 0 0; width: 18px; height: 18px;
	accent-color: var(--glacier);
}
body.southern-checkout .woocommerce-terms-and-conditions-checkbox-text {
	font-weight: 400; text-transform: none; letter-spacing: 0;
}
body.southern-checkout .woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--glacier); text-decoration: underline;
}

/* La verificación de email, que aparece si el cliente abre el link de pago
   desde otro dispositivo. */
body.southern-checkout .woocommerce-verify-email .form-row { margin: 0 0 14px; padding: 0; }
body.southern-checkout .woocommerce-verify-email label {
	display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600; color: var(--deep);
}
body.southern-checkout .woocommerce-verify-email input.input-text {
	width: 100%; box-sizing: border-box; font-size: 16px; min-height: 46px;
	border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px;
}

/* --------------------------------------------------------------------------
   9.b El paso 4: "Listo"
   --------------------------------------------------------------------------
   Es la última pantalla que ve el cliente y estaba sin estilar. Sale con el
   ícono, un "gracias" y el detalle de la reserva.
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-payment-complete-wrap {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--sh); padding: 24px 16px; margin-bottom: 12px; text-align: center;
}

body.southern-checkout .tourmaster-payment-complete-head { margin-bottom: 18px; }

/* El tilde de "listo": verde, que es lo que el cliente espera ver. */
body.southern-checkout .tourmaster-payment-complete-icon {
	font-size: 2.6rem; line-height: 1; color: var(--ok); margin-bottom: 10px; display: block;
}
body.southern-checkout .tourmaster-payment-complete-thank-you {
	display: block; font-size: 1.3rem; font-weight: 800; color: var(--deep);
	letter-spacing: -.02em; line-height: 1.2; margin-bottom: 6px;
}
body.southern-checkout .tourmaster-payment-complete-title {
	font-size: .95rem; font-weight: 400; color: var(--muted); line-height: 1.5;
}

/* El detalle de la reserva vuelve a alinearse a la izquierda: son pares
   etiqueta/valor y centrados no se leen. */
body.southern-checkout .tourmaster-payment-complete-content-wrap,
body.southern-checkout .tourmaster-payment-complete-content {
	text-align: left; font-size: .92rem; line-height: 1.6;
}
body.southern-checkout .tourmaster-payment-complete-content-wrap {
	border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px;
}
body.southern-checkout .tourmaster-payment-complete-content .tourmaster-head {
	font-weight: 600; color: var(--deep);
}

body.southern-checkout .tourmaster-payment-complete-bottom-text {
	font-size: .88rem; color: var(--muted); line-height: 1.55; margin-top: 14px;
}

/* --------------------------------------------------------------------------
   9.c order-pay: detalles que faltaban
   --------------------------------------------------------------------------
   La plantilla de WooCommerce (`checkout/form-pay.php`) usa `.order_item` con
   celdas `.product-name/-quantity/-subtotal/-total`, y el botón sale como
   `<button class="button alt" id="place_order">`. La regla de `#place_order` ya
   lo cubría, pero `.button.alt` se agrega por si el tema lo reemplaza vía el
   filtro `woocommerce_pay_order_button_html`.
   -------------------------------------------------------------------------- */

body.southern-checkout .woocommerce .order_item .product-name { font-weight: 600; color: var(--deep); }
body.southern-checkout .woocommerce .order_item .product-quantity { color: var(--muted); white-space: nowrap; }
body.southern-checkout .woocommerce .order_item .product-subtotal,
body.southern-checkout .woocommerce .order_item .product-total {
	text-align: right; white-space: nowrap;
}
body.southern-checkout .woocommerce table.shop_table td[data-title]::before { display: none; }

body.southern-checkout .woocommerce .button.alt {
	background: var(--accent); color: #fff; border: none; border-radius: 11px;
	padding: 13px 20px; min-height: 48px; font-weight: 700; font-size: 1rem;
}

/* --------------------------------------------------------------------------
   9.d La página de "pedido recibido" (order-received)
   --------------------------------------------------------------------------
   Es la pantalla que ve el cliente después de comprar, y salía con los títulos
   gigantes del tema y los importes desalineados. La arma WooCommerce con cuatro
   bloques: el aviso, el resumen del pedido, los datos bancarios de BACS, la tabla
   del pedido y la dirección de facturación.
   -------------------------------------------------------------------------- */

/* Los títulos del tema son enormes y de otra familia. Se bajan al tamaño del
   diseño. Incluye el `h2` que trae el contenido del "Servicio Opcional". */
body.southern-checkout .woocommerce-order h2,
body.southern-checkout .woocommerce-order-details__title,
body.southern-checkout .woocommerce-column__title,
body.southern-checkout .wc-bacs-bank-details-heading,
body.southern-checkout .woocommerce-bacs-bank-details h2 {
	font-size: 1.15rem; font-weight: 700; color: var(--deep);
	letter-spacing: -.01em; line-height: 1.25; margin: 22px 0 10px; padding: 0;
	text-transform: none;
}
body.southern-checkout .wc-bacs-bank-details-account-name {
	font-size: 1rem; font-weight: 700; color: var(--deep); margin: 0 0 8px;
	text-transform: none; letter-spacing: 0;
}

/* El "gracias" de arriba. */
body.southern-checkout .woocommerce-thankyou-order-received {
	background: #F3FAF6; border: 1px solid #BFE3D0; border-radius: 11px;
	padding: 13px 15px; margin: 0 0 6px;
	font-size: .95rem; font-weight: 600; color: #1F5C41;
}

/* El resumen (número, fecha, total, medio de pago) y los datos bancarios usan la
   misma lista `.order_details`. Se convierten en tarjeta, y en teléfono se apilan
   en dos columnas en vez de una fila que se desborda. */
body.southern-checkout ul.order_details {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px;
	list-style: none; margin: 0 0 14px; padding: 14px;
	background: var(--ice); border: 1px solid var(--line); border-radius: var(--r);
}

/* EL CLEARFIX DE WOOCOMMERCE ROMPÍA LA GRILLA.
   `.woocommerce ul.order_details::after, ::before { content:" "; display:table }`
   es un clearfix pensado para una lista flotada. Pero en un contenedor grid **cada
   pseudo-elemento cuenta como celda**, así que el `::before` se comía la primera y
   todo quedaba corrido un lugar: el número de pedido arrancaba en la segunda
   columna y el último dato caía a una fila nueva. Es lo que reportó Leandro el
   2026-08-25. Con grid el clearfix no hace falta. */
body.southern-checkout .woocommerce ul.order_details::before,
body.southern-checkout .woocommerce ul.order_details::after,
body.southern-checkout ul.order_details::before,
body.southern-checkout ul.order_details::after { display: none; content: none; }
body.southern-checkout ul.order_details li {
	border: none; padding: 0; margin: 0; float: none; width: auto;
	font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted); line-height: 1.35;
}
body.southern-checkout ul.order_details li strong {
	display: block; margin-top: 3px;
	font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none;
	color: var(--deep); word-break: break-word;
}

/* El IBAN es largo y no puede empujar la grilla. */
body.southern-checkout ul.order_details li.iban,
body.southern-checkout ul.order_details li.account_number { grid-column: 1 / -1; }

/* La tabla del pedido: los importes a la derecha, que es donde los busca la vista.
   Subtotal, descuento, medio de pago y total salían a la izquierda mientras el
   importe de la línea del producto sí iba a la derecha — lo reportó Leandro el
   2026-08-25.

   La culpa era de una regla NUESTRA, no del plugin: la de más arriba
   (`body.southern-checkout .woocommerce table.shop_table td { text-align: left }`)
   lleva TRES clases y esta llevaba dos, así que se ganaba a sí misma. Se le suma
   `.woocommerce` para empatar en clases y ganar por elementos. */
body.southern-checkout .woocommerce table.shop_table tfoot td,
body.southern-checkout .woocommerce table.shop_table tfoot th + td,
body.southern-checkout .woocommerce .woocommerce-table--order-details tfoot td,
body.southern-checkout .woocommerce table.shop_table tfoot .woocommerce-Price-amount {
	text-align: right; white-space: nowrap;
}
body.southern-checkout .woocommerce table.shop_table tfoot th,
body.southern-checkout .woocommerce .woocommerce-table--order-details tfoot th {
	text-align: left;
}

/* La dirección de facturación, como tarjeta y sin la cursiva del tema. */
body.southern-checkout .woocommerce-customer-details address {
	font-style: normal; font-size: .93rem; line-height: 1.6; color: var(--text);
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	padding: 14px; margin: 0;
}
body.southern-checkout .woocommerce-customer-details address p { margin: 0; }

/* --------------------------------------------------------------------------
   10. Escritorio
   --------------------------------------------------------------------------
   Único breakpoint. Acá el resumen vuelve a ser columna y se hace sticky, y
   los campos que van de a pares se acomodan en dos columnas.
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {

	body.southern-checkout .southern-checkout-header {
		flex-direction: row; justify-content: space-between; padding: 16px 32px;
	}
	body.southern-checkout .southern-checkout-header .sc-marca img { height: 52px; }
	body.southern-checkout .southern-checkout-header .sc-contacto { font-size: .9rem; }

	body.southern-checkout .tourmaster-payment-step-item-title { font-size: .84rem; }
	body.southern-checkout .tourmaster-payment-step-item-icon { width: 30px; height: 30px; font-size: .86rem; }
	body.southern-checkout .tourmaster-payment-step-item::before { top: 15px; }

	body.southern-checkout .tourmaster-form-field.tourmaster-with-border { padding: 18px 20px; }
	body.southern-checkout .tourmaster-page-content.tourmaster-item-pdlr {
		padding-left: 20px; padding-right: 20px;
	}

	/* Nombre y Apellido, uno al lado del otro. El resto a lo ancho. */
	body.southern-checkout .tourmaster-payment-contact-wrap {
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
	}
	body.southern-checkout .tourmaster-payment-contact-title { grid-column: 1 / -1; }
	body.southern-checkout .southern-copiar-pasajero { grid-column: 1 / -1; justify-self: start; }
	body.southern-checkout .tourmaster-contact-field-DNIoPasaporte,
	body.southern-checkout .tourmaster-contact-field-email,
	body.southern-checkout .tourmaster-contact-field-phone,
	body.southern-checkout .tourmaster-contact-field-country { grid-column: 1 / -1; }

	body.southern-checkout .tourmaster-button,
	body.southern-checkout #place_order {
		display: inline-block; width: auto; min-width: 240px;
	}

	/* "Siguiente Paso" va pegado a la derecha de la columna izquierda, alineado con el borde de las
	   tarjetas. Pedido por Leandro el 2026-08-24: quedaba suelto a la izquierda, sin relación con
	   nada. A la derecha lee como el final natural del formulario.

	   OJO: se acota a `.tourmaster-tour-payment-content`. Los dos botones —el del formulario y el de
	   la tarjeta del resumen— comparten la clase `.tourmaster-tour-booking-continue`, así que sin
	   acotar esto también volvía angosto y corría a la derecha el del resumen. */
	body.southern-checkout .tourmaster-tour-payment-content .tourmaster-tour-booking-continue {
		display: block; width: fit-content; min-width: 240px;
		margin-left: auto; margin-right: 0;
	}

	/* El del resumen no: va a lo ancho de su tarjeta, que es angosta. */
	body.southern-checkout .tourmaster-tour-booking-submit {
		display: block; width: 100%; min-width: 0;
	}

}

/* --------------------------------------------------------------------------
   11. Dos columnas: lo que se completa a la izquierda, el resumen a la derecha
   --------------------------------------------------------------------------
   Pedido por Leandro el 2026-08-24. Entra en 1000px y no en 782px a propósito:
   con el resumen en 340px, a un viewport de 800px le quedarían menos de 400px
   para el formulario y las tablas de pasajeros quedarían apretadas. Entre 782 y
   1000 sigue en una columna.

   El resumen va PRIMERO en el HTML que genera el plugin (payment-online.php lo
   imprime antes del contenido). Con grid se reubica sin tocar el markup, que es
   lo que permite que en teléfono siga arriba y en escritorio vaya a la derecha.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {

	body.southern-checkout .tourmaster-page-content {
		display: grid; grid-template-columns: minmax(0, 1fr) 320px;
		gap: 24px; align-items: start;
	}

	body.southern-checkout .tourmaster-tour-payment-content { grid-column: 1; grid-row: 1; }
	body.southern-checkout .tourmaster-tour-booking-bar-wrap { grid-column: 2; grid-row: 1; margin: 0; }

	/* Fijo mientras el cliente completa: el total queda siempre a la vista.
	   El top deja aire para que no se pegue al borde de la ventana. */
	body.southern-checkout .tourmaster-tour-booking-bar-inner {
		position: sticky; top: 24px;
	}
}

@media (min-width: 782px) {
	/* El resumen del pedido y los datos bancarios entran en cuatro columnas. */
	body.southern-checkout ul.order_details {
		grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 18px;
	}
	/* Con cuatro columnas los cuatro datos entran en una fila y el CBU cabe de sobra,
	   así que se les saca el ancho completo que llevan en teléfono. */
	body.southern-checkout ul.order_details li.iban,
	body.southern-checkout ul.order_details li.account_number { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   12. La tarjeta del resumen
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-tour-booking-bar-summary-title {
	font-size: 1.05rem; font-weight: 700; color: var(--deep);
	letter-spacing: -.01em; margin-bottom: 10px; line-height: 1.25;
}

/* Las líneas de fecha y de cada categoría de pasajero. */
body.southern-checkout .tourmaster-tour-booking-bar-summary,
body.southern-checkout .tourmaster-tour-booking-bar-summary-people-wrap {
	font-size: .89rem; color: var(--muted); line-height: 1.6;
}
body.southern-checkout .tourmaster-tour-booking-bar-summary-people-amount { color: var(--deep); font-weight: 600; }

body.southern-checkout .tourmaster-tour-booking-bar-price-breakdown-link {
	display: inline-block; margin: 10px 0 0;
	font-size: .84rem; font-weight: 600; color: var(--glacier); cursor: pointer;
}

/* Cupón: el input y "Aplicar" en una fila que no se desborda. */
body.southern-checkout .tourmaster-coupon-option {
	display: flex; align-items: stretch; gap: 8px; margin: 14px 0 0;
}
body.southern-checkout .tourmaster-coupon-code {
	flex: 1 1 auto; min-width: 0; box-sizing: border-box;
	font-size: 16px; font-family: inherit;
	border: 1px solid var(--line); border-radius: 9px;
	padding: 10px 12px; min-height: 42px; background: #fff;
}
body.southern-checkout .tourmaster-coupon-code:focus {
	outline: none; border-color: var(--glacier);
	box-shadow: 0 0 0 3px rgba(42, 127, 158, .14);
}
body.southern-checkout .tourmaster-coupon-text {
	flex: none; display: flex; align-items: center;
	font-size: .88rem; font-weight: 700; color: var(--glacier); cursor: pointer;
}

/* "Siguiente Paso" de la tarjeta: centrado y a lo ancho, como pidió Leandro el
   2026-08-24. El plugin ya lo quiere así
   (`.tourmaster-tour-booking-bar-wrap .tourmaster-tour-booking-continue{width:100%}`);
   lo que lo había roto era nuestra propia regla de alinear a la derecha, que
   agarraba los dos botones por compartir clase. Se deja explícito para que no
   vuelva a pasar si alguien toca la de la izquierda. */
body.southern-checkout .tourmaster-tour-booking-bar-wrap .tourmaster-tour-booking-continue,
body.southern-checkout .tourmaster-tour-booking-bar-wrap .tourmaster-tour-booking-submit .tourmaster-button {
	display: block; width: 100%; min-width: 0;
	margin-left: auto; margin-right: auto; text-align: center;
}

/* --------------------------------------------------------------------------
   12.b El desglose de precios
   --------------------------------------------------------------------------
   El plugin arma cada fila con `.tourmaster-head` inline y el importe con
   `float: right`. En una columna angosta el float no entra al lado del rótulo y
   cae a la línea siguiente: por eso "General Precio base  2 x $180.000" quedaba
   arriba y "$360.000,00" solo, desalineado abajo.

   Se pasa cada fila a flex con el importe a la derecha. Se enumeran las filas una
   por una en vez de usar un selector genérico porque el desglose mezcla filas y
   contenedores, y un `> div` agarraría los wrappers también.
   -------------------------------------------------------------------------- */

body.southern-checkout .tourmaster-price-breakdown { font-size: .88rem; padding-top: 14px; }

body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-base-price,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-room-price,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-additional-service-item,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-sub-total,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-tax-rate,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-tax-due,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-coupon-code,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-coupon-amount,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-group-discount-amount {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 10px; margin-bottom: 6px;
}

/* Sin el float, el importe se acomoda solo al final de la fila. */
body.southern-checkout .tourmaster-price-breakdown .tourmaster-head {
	margin-right: 0; font-weight: 600; color: var(--deep); min-width: 0;
}
body.southern-checkout .tourmaster-price-breakdown .tourmaster-tail,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-tail.tourmaster-right,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price {
	float: none; text-align: right; white-space: nowrap; color: var(--muted);
}

body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-base-price-wrap {
	margin-bottom: 10px; padding-bottom: 8px; border-bottom-color: var(--line);
}

/* El total del desglose: mismo criterio que el de la tarjeta, apilado y sobrio. */
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-sub-total .tourmaster-price,
body.southern-checkout .tourmaster-price-breakdown .tourmaster-price-breakdown-sub-total .tourmaster-tail {
	font-weight: 700; color: var(--deep);
}

/* El total. En una columna de 320px no entra en una línea junto al rótulo: el plugin lo pone en
   22px con `float:right` y el precio se partía al medio ("$360.000," / "00"). Va apilado: rótulo
   arriba, precio abajo y más chico. Pedido por Leandro el 2026-08-24.

   El `-wrap` del plugin trae `padding: 32px 30px` y un `border-top` propio, que sumaba una segunda
   línea divisoria además de la nuestra. Se anulan los dos. */
body.southern-checkout .tourmaster-tour-booking-bar-total-price-wrap {
	padding: 0; border-top: none; font-size: inherit; line-height: inherit;
}
/* Rótulo y precio en UNA línea, centrados. Pedido por Leandro el 2026-08-25: apilado
   quedaba desalineado y con el ícono suelto arriba. Entra en una línea porque el precio
   bajó a 1.15rem y el ícono del plugin se esconde. */
body.southern-checkout .tourmaster-tour-booking-bar-total-price-container {
	display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap;
	margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
body.southern-checkout .tourmaster-tour-booking-bar-total-price-title {
	display: inline-block; float: none; clear: none;
	font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted); line-height: 1.3; margin-bottom: 0;
}
body.southern-checkout .tourmaster-tour-booking-bar-total-price-title > .fa,
body.southern-checkout .tourmaster-tour-booking-bar-total-price-wrap > i { display: none; }
body.southern-checkout .tourmaster-tour-booking-bar-total-price {
	display: inline-block; float: none;
	font-size: 1.15rem; font-weight: 800; color: var(--deep);
	letter-spacing: -.02em; line-height: 1.2;
}

/* El ícono de etiqueta del plugin: fuera. Quedaba solo en su propia línea. */
body.southern-checkout .tourmaster-tour-booking-bar-total-price-wrap i,
body.southern-checkout .tourmaster-tour-booking-bar-total-price-container i { display: none; }