/* Estilos para el calendario de reservas */
.salon_rental_calendar_section {
  padding: 50px 0;
  background-color: #f9f9f9;
}

/* Contenedor del componente de calendario */
.o_salon_rental_calendar_container {
  width: 100%;
  margin-bottom: 30px;
}

.o_salon_rental_calendar_component {
  width: 100%;
}

.salon_rental_calendar {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 30px;
}

/* Encabezado del calendario */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #4a6492;
  color: white;
}

.calendar-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
}

.calendar-header .btn-link {
  color: white;
  font-size: 1.2rem;
  padding: 5px 10px;
  transition: all 0.2s;
}

.calendar-header .btn-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

/* Cuerpo del calendario */
.calendar-body {
  padding: 15px;
}

/* Días de la semana */
.calendar-weekdays {
  display: flex;
  margin-bottom: 10px;
}

.calendar-weekdays div {
  flex: 1;
  text-align: center;
  font-weight: bold;
  padding: 10px 0;
  color: #555;
}

/* Semanas y días */
.calendar-week {
  display: flex;
  margin-bottom: 5px;
}

.day-cell {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  background-color: #eee;
}

.day-cell.empty {
  background-color: transparent;
  cursor: default;
}

.day-cell.available {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.day-cell.unavailable {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Estilo específico para fechas pasadas - más evidente que son no seleccionables */
.day-cell.unavailable[title="Fecha pasada"] {
  background-color: #e5e5e5;
  border: 1px solid #cccccc;
  color: #999999;
  text-decoration: line-through;
  opacity: 0.6;
}

.day-cell.unavailable[title="Fecha pasada"] .day-number {
  text-decoration: line-through;
}

.day-cell.special-period {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
}

.day-cell.selected {
  background-color: #cce5ff;
  border: 2px solid #007bff;
  color: #004085;
  transform: scale(1.05);
  z-index: 1;
}

.day-cell.available:hover {
  transform: scale(1.05);
}

.day-number {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 2px;
}

.day-price {
  font-size: 0.8rem;
}

/* Panel de información de reserva */
.booking-info-panel {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: 100%;
}

.booking-info-content {
  margin-bottom: 20px;
}

.booking-info-content h4 {
  color: #4a6492;
  margin-bottom: 15px;
}

.select-date-message {
  color: #6c757d;
  font-style: italic;
}

.booking-details {
  padding: 15px;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  background-color: #f8f9fa;
}

.booking-details.special-period-booking {
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.selected-date,
.selected-price {
  font-weight: bold;
  color: #212529;
}

.add-to-cart {
  margin-top: 15px;
}

/* Leyenda del calendario */
.calendar-legend {
  border-top: 1px solid #e9ecef;
  padding-top: 15px;
}

.calendar-legend h5 {
  color: #4a6492;
  margin-bottom: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 10px;
}

.legend-color.available {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.legend-color.unavailable {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.legend-color.special-period {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}

.legend-color.selected {
  background-color: #cce5ff;
  border: 1px solid #007bff;
}

/* Indicador de carga */
.calendar-loading {
  text-align: center;
  padding: 40px 0;
  color: #6c757d;
}

/* Responsividad para móviles */
@media (max-width: 767px) {
  .day-number {
    font-size: 1rem;
  }

  .day-price {
    font-size: 0.5rem;
  }

  .booking-info-panel {
    margin-top: 20px;
  }
}