/* Estilos generales para la página de servicios */

body {
  font-family: sans-serif;
  /* O la fuente que prefieras */
}

.precio {
  color: #000000;
  font-weight: 600;
}

/* Estilos para las tarjetas de servicio principales */
.service-card {
  background-color: #F9EEE0;
  /* Equivalente a bg-gray-100 */
  /* Otros estilos base que ya tenías */
}

/* Estilo hover para subservicios en la lista principal */
.services-grid .sub-service:hover {
  background-color: #ebe8e5;
  /* Equivalente a hover:bg-gray-200 */
}

/* Estilos para el Modal */


.capitalize {
  text-transform: capitalize;
  font-weight: 600;
}

.modal-content {
  /* Estilos base del contenido del modal */
  max-height: 85vh;
  /* Evita que el modal sea demasiado alto */
  display: flex;
  flex-direction: column;
}

#modal-services {
  /* Asegura que esta parte sea la que haga scroll si es necesario */
  overflow-y: auto;
}

.act-btn {
  background-color: #F9EEE0;
  /* Equivalente a bg-blue-500 */
  color: rgb(0, 0, 0);
  /* Equivalente a text-white */
  transition: background-color 0.2s ease;
  /* Transición suave */
  border: #000000 2px solid;
  /* Equivalente a border-gray-300 */
  font-weight: 700;
}

/* Estilo para el botón de cerrar modal */
#close-modal {
  background-color: #EF4444;
  /* Equivalente a bg-red-500 */
  color: white;
  /* Equivalente a text-white */
  transition: background-color 0.2s ease;
  /* Transición suave */
}

#close-modal:hover {
  background-color: #ff0702;
  /* Equivalente a hover:bg-red-600 */
}

/* Estilo para el botón Continuar/Seguir */
#continue-button {
  background-color: #ffffff;
  /* Equivalente a bg-blue-500 */
  color: rgb(0, 0, 0);
  /* Equivalente a text-white */
  transition: background-color 0.2s ease, opacity 0.2s ease;
  /* Transición suave */
}

#continue-button:hover:not(:disabled) {
  /* Aplicar hover solo si no está deshabilitado */
  background-color: #B59573;
  color: white;
  /* Equivalente a hover:bg-[#B59573] */
}

#continue-button:disabled {
  opacity: 0.5;
  /* Equivalente a disabled:opacity-50 */
  cursor: not-allowed;
  /* Indica que el botón está deshabilitado */
}

/* Estilo para subservicios SELECCIONADOS dentro del modal de peluquera */
#services-modal .sub-service.selected {
  background-color: #B59573;
  color: white;
  border-radius: 8px;
  font-weight: 500;
  padding: 10PX;
  /*Opcional: hacer el texto un poco más bold */
  ;
}

/* Estilo hover para opciones de peluquera en el modal de servicio */
#services-modal .hairdresser-option:hover {
  background-color: rgba(181, 149, 115, 0.2);
}

/* Estilo para opciones de peluquera SELECCIONADAS en el modal de servicio */
#services-modal .hairdresser-option.selected {
  background-color: #B59573;
  color: white;
}

/* Estilo hover para tarjetas de peluquera en la lista principal (opcional) */
.hairdresser-card:hover {
  opacity: 0.8;
  /* Equivalente a hover:opacity-80 */
}


#loading-screen {
  background-color: #F9EEE0;
}

/* Custom classes for theme buttons to bypass tailwind compiler issues */
.btn-theme {
  background-color: #B59573 !important;
  color: white !important;
}

.btn-theme-hover:hover {
  background-color: #B59573 !important;
  color: white !important;
}

.border-theme {
  border-color: #B59573 !important;
}