#widget-calendar {
    font-family: 'Effra', sans-serif;
}

#widget-calendar .calendar-row {
    justify-content: space-around;
}

/* Contenedor envolvente para el calendario */
#widget-calendar .calendar-container-wrapper {
    position: relative; /* Necesario para el posicionamiento absoluto del spinner */
}

/* Estilo para el spinner */
#widget-calendar .spinner {
    display: none; /* Lo ocultamos por defecto */
}

#widget-calendar .calendar-header {
    gap: 35px;
}

#widget-calendar .calendar-body {
    margin-bottom: 10px;
}

/* Asegura que las celdas de los días tengan el mismo tamaño */
#widget-calendar .calendar-cell {
    width: 48px; /* Ancho fijo para todas las celdas */
    height: 48px; /* Altura ajustada para dar espacio para el precio */
    display: flex;
    flex-shrink: 0;
    flex-direction: column; /* Dividir la celda en dos filas */
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    /* font-size: 1.2rem; */
    border-radius: 50px;
}

#widget-calendar .calendar-cell.blank {
    cursor: default; /* Cambia el cursor de 'pointer' a 'default' */
    background-color: transparent;
    height: 0;
}

#widget-calendar .calendar-month-year .month-name {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 500;
}

#widget-calendar .calendar-day {
    min-width: 48px;
    height: 48px;
    line-height: 48px;
}

#widget-calendar .calendar-days {
    font-size: 1rem;
    font-weight: 500;
}

/* Ajuste para el número del día */
#widget-calendar .day-number {
    font-size: 1rem; /* Un tamaño mayor para el día */
    font-weight: 500;
}

/* Ajuste para la información de renta */
#widget-calendar .rental-info {
    font-size: 0.625rem; /* Un tamaño menor para el precio */
    margin-top: -4px; /* Espacio entre el día y el precio */
}

/* Si el día no tiene precio, aseguramos que no se desajuste */
#widget-calendar .day.unavailable .rental-info {
    /* height: 15px; */ /* Esto asegura que la celda de los días no disponibles mantenga un tamaño uniforme */
    display: none;
}

/* Estilo para los días disponibles */
#widget-calendar .calendar-cell:not(.unavailable):hover {
    background-color: #D6C7AF;
    border-radius: 50px;
}

/* Estilo para desactivar el hover cuando la clase 'no-hover' esté presente */
#widget-calendar.no-hover .calendar-cell:not(.unavailable):hover {
    background-color: transparent !important; /* Cambia el color de fondo a transparente */
    border-radius: 50px; /* Mantén el borde si es necesario */
}

/* Estilo para los días no disponibles */
#widget-calendar .day.unavailable {
    position: relative; /* Necesario para posicionar la pseudo-clase */
    color: rgb(0, 0, 0); /* O el color que desees para el texto */
    cursor: default; /* Cambia el cursor de 'pointer' a 'default' */
}

/* Pseudo-elemento para crear la línea inclinada */
#widget-calendar .day.unavailable::after {
    content: ''; /* Necesario para crear la pseudo-clase */
    position: absolute;
    top: 50%; /* Coloca la línea en el centro vertical */
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    /* right: 0; */
    width: 50%; /* Asegura que la línea cubra el ancho completo */
    height: 1px; /* Ajusta el grosor de la línea */
    background-color: rgb(0, 0, 0); /* Cambia el color de la línea */
    /* transform: rotate(-45deg); */ /* Rota la línea para que sea diagonal */
    /* transform-origin: center; */ /* Establece el origen de la rotación al centro */
    pointer-events: none; /* Para que la línea no interfiera con los clics */
    z-index: 1; /* Asegura que la línea esté encima del contenido */
}

/* Estilo para el día hoy */
#widget-calendar .day.today {
    background-color: #D6C7AF;
}

#widget-calendar .day.selected {
    background-color: #000000;
    color: #ffffff;
}

#widget-calendar .day.selected.middle {
    background-color: #dfdfdf;
    color: rgb(0, 0, 0);
}

#widget-calendar .message {
    color: brown; /* Cambia el color del texto */
    font-weight: bold;
    font-size: 0.8rem;
}
#widget-calendar .message-alert {
    color: brown; /* Cambia el color del texto */
    font-weight: bold;
    font-size: 0.8rem;
}


#widget-calendar .selected-dates {
    display: flex;            /* Usamos flexbox para alinear los elementos en una fila */
    justify-content: center;  /* Centra los elementos horizontalmente */
    align-items: center;      /* Centra los elementos verticalmente */
    flex-wrap: nowrap;        /* Evitar que los elementos se envuelvan */
    gap: 10px;                /* Espacio entre los elementos */
}

#widget-calendar .start-date,
#widget-calendar .end-date{
    font-size: 0.8rem;
}

#widget-calendar .totalSum{
    font-size: 1rem;
}

#widget-calendar .btn-custom {
    border-radius: 50px;
    border: 1px solid #000000;
    padding: 7px 16px 7px 14px; /* top, right, bottom, left */
    font-weight: 500;
}
#widget-calendar .btn-custom:hover {
    background-color: #81755F !important;
    border: 1px solid #81755F;
    color: #ffffff !important;
}

#widget-calendar .btn-custom.clear {
    /* background-color: rgb(255, 255, 255); */
    color: #000000;
}

#widget-calendar .btn-custom.reserve {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
}

#widget-calendar .blank {
    background-color: transparent;
}

#widget-calendar .blank:hover {
    background-color: transparent;
}

#widget-calendar .form-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin: 10px 0 0;
}

#widget-calendar select {
	appearance: none;
    background: url(/wp-content/uploads/2024/10/arrow.svg) 95% center no-repeat !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 7px 16px 7px 14px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid #000000;
    background-color: #F9F9F6;
    /* width: 100px; */ /* Ajusta el tamaño del select */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Cambiar el borde y el fondo cuando el select está enfocado */
#widget-calendar select:focus {
    border: 1px solid #000000;
    outline: none;
}

/* Estilos para las opciones dentro del select */
#widget-calendar option {
    padding: 10px;
    font-size: 1rem;
    background-color: #fff;
    color: #333;
}

/* Estilo para el estado hover de las opciones */
#widget-calendar option:hover {
    background-color: #ddd;
}

/* Estilo para los divs de las flechas del calendario */
#widget-calendar .prev-month, 
#widget-calendar .next-month {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
}

#widget-calendar .prev-month:hover, 
#widget-calendar .next-month:hover {
    background: transparent;
}

#widget-calendar .prev-month:active, 
#widget-calendar .next-month:active {
    background: transparent;
}

/* Estilo para las flechas del calendario */
#widget-calendar .bi.bi-arrow-left,
#widget-calendar .bi.bi-arrow-right {
    color: black;
    font-size: 1rem;
    font-weight: 300;
    background: transparent; 
}

#widget-calendar .btn-group {
	display: none; /* flex !important */
    margin: 10px 0 0;
    gap: 10px
}

.no-hover:hover {
    background-color: transparent !important;
  }