/*
 * Tema visual de LatePoint (docs/design-system/components/Booking > .up-lp).
 * Se carga DESPUÉS del CSS del plugin (ver inc/enqueue.php) y solo mapea clases
 * reales de LatePoint (prefijo .latepoint-/.step-, confirmadas contra
 * wp-content/plugins/latepoint/lib/views y _shortcodes.scss) a los tokens del
 * design system. No se edita ningún archivo del plugin.
 */

/* Wrapper del widget: sin card propia (fondo/radio/sombra), porque ya vive
   adentro de .up-agenda (single-profesional.php), que trae su propio fondo,
   borde y sombra -- quedaba una card dentro de otra card. */
.latepoint-book-form-wrapper .latepoint-w {
	background: none;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.latepoint-booking-form-element {
	font-family: var(--font-sans);
	color: var(--ink);
}

/* Pedido del cliente: LatePoint carga su propia fuente de marca ("latepoint",
   ver .latepoint-w y .os-heading-text en su front.css) y varios tamaños más
   grandes que el resto del sitio (encabezados a 20px, nombres de ítem a 17px,
   contra los 16px de body/.up-lead). Se fuerza Montserrat en todo el widget y
   se bajan los tamaños que quedaban sueltos a la escala del sitio. */
/* :not([class*="icon"]) para no pisarle la fuente a los íconos de LatePoint
   (.latepoint-icon-*, flechas/carrito/etc.): esos elementos son en realidad
   glifos de una fuente de íconos, forzar Montserrat ahí los rompe (se ven
   como cuadrados/caracteres random en vez del ícono). */
.latepoint-w,
.latepoint-w *:not([class*="icon"]) {
	font-family: var(--font-sans) !important;
}
.os-heading-text {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .16em !important;
}
.os-item-name {
	font-size: 15px !important;
	font-weight: 500 !important;
}
.summary-header-label {
	font-size: 12px !important;
}
/* Calendario del paso "Día y horario" -- mismo problema, confirmado contra
   wp-content/plugins/latepoint/public/stylesheets/front.css: los números de
   día llegan a 20px negrita y el título del mes ("Diciembre") a 32px, muy por
   encima de los 16px del sitio. */
.os-monthly-calendar-days .os-day {
	font-size: 15px !important;
	font-weight: 600 !important;
}
.os-current-month-label-w .os-current-month-label {
	font-size: 14px !important;
}
.os-current-month-label-w .os-current-month-label .current-month {
	font-size: 15px !important;
}
.os-calendar-searching-info {
	font-size: 14px !important;
}
/* "Precio Total" en el Resumen: a 17px negrita no entraba en una sola línea
   en la columna angosta del panel (188px) y "Precio Total" se partía en 2
   líneas. Confirmado contra .summary-price-item-w.spi-total en front.css. */
.summary-price-item-w.spi-total {
	font-size: 14px !important;
}
/* Campo de teléfono (paso "Tus datos"): LatePoint calcula por JS el ancho de
   la bandera + código de país ("+595") y lo usa como padding-left del input
   para que el texto tipeado no le quede debajo (inline style, venía en 184px
   en el HTML compartido) -- esa medición usa la tipografía/tamaño ORIGINAL de
   LatePoint, así que al forzar Montserrat 15px más chico se desalinea. En vez
   de perseguir ese número con otro número fijo, se saca el problema de raíz:
   con display:flex la bandera y el input quedan lado a lado en flujo normal,
   sin necesitar ningún padding-left calculado ni por JS ni por CSS. */
.lp_iti.lp_iti--allow-dropdown.lp_iti--separate-dial-code {
	display: flex !important;
	align-items: center;
}
.lp_iti--separate-dial-code .lp_iti__flag-container {
	position: static !important;
	flex: none;
}
.lp_iti--separate-dial-code input[type="tel"] {
	flex: 1;
	padding-left: 10px !important;
}
.summary-price-item-w .spi-name,
.summary-price-item-w .spi-price {
	white-space: nowrap;
}

.latepoint-heading-w {
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.latepoint-body {
	padding: var(--space-6);
	display: grid;
	gap: var(--space-4);
}

.latepoint-side-panel {
	background: var(--surface-sky);
	border-radius: var(--radius-md);
}

.latepoint-footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

/* Selección de servicio/agente (paso "Especialidades disponibles"/"Profesionales
   disponibles") → .up-lp__opt. Las clases reales son .os-selectable-item /
   .os-item-selected (confirmadas inspeccionando el DOM ya renderizado, no el
   markup fuente): .lp-option de más abajo NO aplica acá, esa suposición estaba
   mal para este paso puntual (puede seguir sirviendo para otros, sin confirmar). */
.os-selectable-item {
	display: flex !important;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4) !important;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--border);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--up-dur-fast), background-color var(--up-dur-fast);
}
.os-selectable-item:hover {
	border-color: var(--border-control);
}
.os-selectable-item.selected {
	border-color: var(--brand-strong);
	background: var(--surface-lilac);
}
/* .os-item-i (LatePoint) trae su propio padding:10px + fondo blanco, duplicado
   arriba de los 12px/16px de .os-selectable-item -- mismo problema de "card
   dentro de card" que el wrapper general. Se deja como contenedor flex simple,
   el padding/fondo lo pone .os-selectable-item una sola vez. Se suma acá el paso
   "Método de pago" (.latepoint-transaction-payment-form): confirmado contra el
   propio front.css de LatePoint que ese .os-item-i base ya es border:none -- si
   se ve un borde ahí es porque algo más específico se lo pisa, así que se refuerza
   con !important en vez de perseguir esa regla puntual. */
.os-selectable-item .os-item-i,
.latepoint-transaction-payment-form .os-items .os-item .os-item-i {
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: none !important;
}
.os-selectable-item .os-item-img-w {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background-size: cover;
	background-position: center;
	flex: none;
}
.os-selectable-item .os-item-name {
	font-weight: 500;
	color: var(--ink);
}

/* Opciones de cada paso (agente, método/horario de pago) → .up-lp__opt.
   Confirmado contra wp-content/plugins/latepoint/lib/views/steps/_payment__*.php:
   contenedor .lp-options.lp-options-grid, cada opción .lp-option. */
.lp-options {
	display: grid;
	gap: var(--space-3);
}
.lp-options.lp-options-grid {
	grid-template-columns: repeat(2, 1fr);
}
.lp-options.lp-options-grid-three {
	grid-template-columns: repeat(3, 1fr);
}
.lp-option {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	border: 1.5px solid var(--border);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--up-dur-fast), background-color var(--up-dur-fast);
}
.lp-option:hover {
	border-color: var(--border-control);
}
/* LatePoint aplica el estado seleccionado por JS; se cubren los nombres de clase
   más probables (confirmado .lp-option en el markup, no así el modificador exacto
   que agrega el JS del plugin en tiempo de ejecución). */
.lp-option.selected,
.lp-option.is-selected,
.lp-option.is-active,
.lp-option[aria-checked="true"] {
	border-color: var(--brand-strong);
	background: var(--surface-lilac);
}

/* Horarios disponibles → .up-lp__slot (mismo patrón .lp-option dentro del paso de horario) */
.step-payment-times-w .lp-option,
.lp-payment-times-w .lp-option {
	padding: var(--space-2) 0;
	text-align: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.step-payment-times-w .lp-option.selected,
.step-payment-times-w .lp-option.is-selected,
.lp-payment-times-w .lp-option.selected,
.lp-payment-times-w .lp-option.is-selected {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	color: var(--on-brand);
}

/* Botones del widget → .up-btn */
.latepoint-btn,
.latepoint-book-button.os_trigger_booking {
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--radius-md);
	padding: 10px 20px;
	min-height: 40px;
	border: 1.5px solid transparent;
	transition: transform var(--up-dur-fast) var(--up-ease-out), box-shadow var(--up-dur-base) var(--up-ease-out);
}
.latepoint-btn-primary,
.latepoint-book-button.os_trigger_booking {
	background: var(--brand-strong) !important;
	color: var(--on-brand) !important;
}
.latepoint-btn-primary:hover,
.latepoint-book-button.os_trigger_booking:hover {
	box-shadow: var(--shadow-card);
}
.latepoint-btn-white {
	background: var(--surface-raised);
	color: var(--brand-strong);
	border-color: var(--border);
}

/* Resumen de la reserva */
.latepoint-summary-w {
	background: var(--surface-peach);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
/* LatePoint trae de fábrica un fondo de puntitos (radial-gradient) detrás del
   título "Resumen" -- se ve bien en su demo pero no en nuestro diseño, limpio y
   sin texturas decorativas. Se saca y se deja un borde inferior simple, mismo
   patrón que .latepoint-heading-w más arriba. */
.summary-header-inner {
	background: none;
	padding: 0 0 var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.summary-header-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* Modal de LatePoint por encima del resto del sitio, según tokens.json > zIndex.z-modal */
.latepoint-modal,
.os-modal-overlay {
	z-index: var(--z-modal) !important;
}

/* Foco visible dentro del widget (teclado) */
.latepoint-w a:focus-visible,
.latepoint-w button:focus-visible,
.latepoint-w input:focus-visible,
.latepoint-w select:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}