/*
  Beauty Business - Custom CSS
  Estilo premium, femenino y limpio
*/

body {
  background: #fff7f6 !important;
  font-family: 'Inter', 'Poppins', Arial, sans-serif !important;
}

/* Títulos de servicios */
#events h3 {
  color: #2b2430 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 10px !important;
}

/* Duración del servicio */
#events p.duration,
#events div.duration {
  color: #e98b8f !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: #fff0ee !important;
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

/* Descripción del servicio */
#events p.description,
#events div.description {
  color: #625866 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Tarjeta del servicio seleccionado */
#events .selectedEvent {
  background: linear-gradient(135deg, #fff7f6, #fff0ee) !important;
  border: 2px solid #ef9a9a !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 45px rgba(233, 139, 143, 0.22) !important;
  padding: 22px !important;
}

/* Botón reservar horario */
#events input.reserve_time_btn,
#eventForm #save_button {
  background: linear-gradient(135deg, #e98b8f, #f6a76f) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 30px rgba(233, 139, 143, 0.35) !important;
  transition: all 0.25s ease !important;
}

#events input.reserve_time_btn:hover,
#eventForm #save_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px rgba(233, 139, 143, 0.45) !important;
}

/* Botón seleccionar otro */
#events input.select_another_btn {
  background: #ffffff !important;
  color: #e98b8f !important;
  border: 2px solid #e98b8f !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* Títulos dentro del formulario */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  color: #2b2430 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

/* Contenedores generales */
div.ui-widget-content {
  background: #ffffff !important;
  border: 1px solid #f5d7d5 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 35px rgba(43, 36, 48, 0.08) !important;
  padding: 18px !important;
}

/* Encabezados */
div.ui-widget-header {
  background: linear-gradient(135deg, #e98b8f, #f6a76f) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px 18px 0 0 !important;
  font-weight: 800 !important;
}

/* Tabla de horarios */
#timeline-container table.timeline {
  border-collapse: separate !important;
  border-spacing: 8px !important;
  width: 100% !important;
}

/* Horarios no disponibles */
.timeline td.not_worked_time,
.timeline td.reserved_time {
  background: #f1eeee !important;
  color: #aaa !important;
  border-radius: 12px !important;
  opacity: 0.7 !important;
}

/* Horarios disponibles */
.timeline td.free_time {
  background: #fff0ee !important;
  color: #2b2430 !important;
  border: 1px solid #f4c6c4 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

.timeline td.free_time:hover {
  background: linear-gradient(135deg, #e98b8f, #f6a76f) !important;
  color: #ffffff !important;
  transform: scale(1.03) !important;
  cursor: pointer !important;
}

/* Horario seleccionado */
.timeline td.selected_time {
  background: linear-gradient(135deg, #e98b8f, #f6a76f) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 25px rgba(233, 139, 143, 0.35) !important;
}

/* Loading */
div#loading {
  color: #e98b8f !important;
  font-weight: 800 !important;
}

/* Fecha y etiquetas */
#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
  color: #2b2430 !important;
  font-weight: 700 !important;
}

/* Inputs generales */
input,
select,
textarea {
  border-radius: 14px !important;
  border: 1px solid #f2c9c7 !important;
  padding: 12px !important;
  color: #2b2430 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #e98b8f !important;
  box-shadow: 0 0 0 3px rgba(233, 139, 143, 0.18) !important;
}

/* Ajuste móvil */
@media (max-width: 768px) {
  #events h3 {
    font-size: 21px !important;
    text-align: center !important;
  }

  #events .selectedEvent {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  #events input.reserve_time_btn,
  #eventForm #save_button,
  #events input.select_another_btn {
    width: 100% !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
  }

  #timeline-container table.timeline {
    border-spacing: 6px !important;
  }

  .timeline td.free_time,
  .timeline td.selected_time,
  .timeline td.not_worked_time,
  .timeline td.reserved_time {
    font-size: 13px !important;
    padding: 10px 6px !important;
  }
}