/* ==========================================================================
   LATEPOINT — Sistema de reservas
   Catalina Casa de Té — https://mktactual.com/

   LatePoint trae su propio diseño. Aquí solo lo vestimos con la paleta y las
   tipografías de la marca, para que la ventana de reserva no parezca de otro
   sitio. No se cambia su estructura ni su funcionamiento.
   ========================================================================== */

/* ==========================================================================
   1. BOTÓN DE RESERVA DENTRO DE LAS TARJETAS
   El botón lo genera LatePoint; le pasamos nuestras clases para que herede
   el estilo del tema en lugar de traer el suyo.
   ========================================================================== */

.taller-card-footer .latepoint-book-button,
.card-footer .latepoint-book-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Neutraliza el estilo de botón de bloque de WordPress que LatePoint usa
   por defecto en su envoltorio */
.catalina-reserva-wrapper.wp-block-button {
  display: inline-flex;
  margin: 0;
}

.catalina-reserva-wrapper .wp-block-button__link {
  border-radius: inherit;
}

/* ==========================================================================
   2. VENTANA DE RESERVA
   ========================================================================== */

.latepoint-booking-form-element,
.latepoint-lightbox-w {
  font-family: var(--catalina-font-body);
}

/* Encabezado de la ventana */
.latepoint-lightbox-w .latepoint-lightbox-heading,
.latepoint-booking-form-element .step-heading h2,
.latepoint-booking-form-element .os-step-title {
  font-family: var(--catalina-font-heading) !important;
  color: var(--catalina-dark);
}

/* Botones principales de LatePoint */
.latepoint-booking-form-element .latepoint-btn,
.latepoint-booking-form-element .latepoint-btn-primary,
.latepoint-lightbox-w .latepoint-btn-primary {
  background: var(--catalina-terracotta) !important;
  color: var(--catalina-light-cream) !important;
  font-family: var(--catalina-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px;
  border-radius: 11px !important;
  border: 0 !important;
  transition: background 0.26s ease, transform 0.2s ease;
}

.latepoint-booking-form-element .latepoint-btn:hover,
.latepoint-booking-form-element .latepoint-btn-primary:hover,
.latepoint-lightbox-w .latepoint-btn-primary:hover {
  background: var(--catalina-brown-text) !important;
  transform: translateY(-2px);
}

/* Botón secundario (volver) */
.latepoint-booking-form-element .latepoint-btn-secondary,
.latepoint-booking-form-element .latepoint-btn-link {
  color: var(--catalina-brown-text) !important;
  font-family: var(--catalina-font-body) !important;
}

/* Elemento seleccionado (servicio, agente, horario) */
.latepoint-booking-form-element .os-selectable-item.selected,
.latepoint-booking-form-element .os-item-selected,
.latepoint-booking-form-element .time-slot.selected,
.latepoint-booking-form-element .os-day-item.selected {
  border-color: var(--catalina-terracotta) !important;
  background: var(--catalina-light-cream) !important;
}

/* Barra de progreso de los pasos */
.latepoint-booking-form-element .os-steps-progress-bar .os-progress-fill,
.latepoint-booking-form-element .latepoint-progress-fill {
  background: var(--catalina-terracotta) !important;
}

/* Resumen lateral */
.latepoint-booking-form-element .os-summary-panel,
.latepoint-booking-form-element .latepoint-summary-panel {
  background: var(--catalina-light-cream) !important;
}

/* Campos de formulario */
.latepoint-booking-form-element input[type="text"],
.latepoint-booking-form-element input[type="email"],
.latepoint-booking-form-element input[type="tel"],
.latepoint-booking-form-element textarea,
.latepoint-booking-form-element select {
  font-family: var(--catalina-font-body) !important;
  border-radius: 10px !important;
}

.latepoint-booking-form-element input:focus,
.latepoint-booking-form-element textarea:focus,
.latepoint-booking-form-element select:focus {
  border-color: var(--catalina-terracotta) !important;
  box-shadow: 0 0 0 3px rgba(164, 94, 68, 0.13) !important;
}

/* Precio en el resumen */
.latepoint-booking-form-element .os-summary-price,
.latepoint-booking-form-element .summary-total-value {
  color: var(--catalina-terracotta) !important;
  font-weight: 700;
}

/* ==========================================================================
   3. RESPONSIVE
   La ventana de LatePoint debe caber en pantallas pequeñas sin desbordar.
   ========================================================================== */

@media (max-width: 768px) {
  .latepoint-lightbox-w .latepoint-lightbox-content {
    max-width: 96vw;
    max-height: 92vh;
  }

  .latepoint-booking-form-element .os-summary-panel,
  .latepoint-booking-form-element .latepoint-summary-panel {
    display: none; /* En móvil estorba: el resumen ya se ve en el último paso */
  }
}

@media (max-width: 480px) {
  .taller-card-footer .catalina-reserva-wrapper,
  .taller-card-footer .latepoint-book-button {
    width: 100%;
  }
}