#cabres-reserve-form {
  margin-top: 40px;
  background-color: #F3F3EF;
  padding: 5px 40px 40px 40px;
  text-align: center;
  box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
	margin-bottom: 50px;
}



#cabres-reserve-form h3 {
	margin-bottom: 50px;
	font-size: 23px;
	border: solid 0px rgba(134,134,134,1.00);
	width: auto;
	padding: 16px;
	background-color: rgba(252,210,69,1.00);
}

#cabres-reserve-form input[type="text"] {
	width: 255px;
	margin-right: 20px;
	margin-bottom: 10px;
	border: none;
}

#cabres-reserve-form input[type="number"] {
	border: none;
	width: 55px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 4px;
	text-align: center;
}

#cabres-reserve-form input[type="checkbox"] {
	
	margin-right: 20px;
	margin-bottom: 15px;
}

#cabres-reserve-form input[type="email"] {
	width: 255px;
	margin-right: 20px;
	margin-bottom: 15px;
	border: none;
}

#cabres-reserve-form button {
	width: 255px;
	margin-bottom: 15px;
	margin-top: 30px;
	background-color: #B7D713;
	border: none;
	padding: 10px;	
	
}


#cabres-reserve-form button:hover {

	background-color: #274B07;
	color: white;
	border: none;
	padding: 10px;	
}

#cabres-selected-date {
	font-weight: 800;
	
	
}


#preu-calculat {
	margin-top: 10px;
	font-size: 23px;
	
}

#cabres-reserve-form label {
	margin-right: 4px;
	font-weight: 400;
}


.fc-toolbar-title {
    font-size: 224px;
    color: #333;
    font-weight: bold;
}



/* ===================================
   Estils per al calendari (admin)
   =================================== */
.calendar-day {
  text-align: center;
  padding: 17px;
  font-weight: bold;
  border-radius: 0px;
}
.calendar-day div:first-child {
  font-size: 1.5em;
  font-weight: bold;
	margin-bottom: 12px;
}
.calendar-day.green {
  background-color: #4CAF50;
  color: white;
}
.calendar-day.orange {
  background-color: #FFA500;
  color: white;
}
.calendar-day.gray {
  background-color: #E0E0E0;
  color: black;
}



/* Contenidor capçalera del calendari (mes i fletxes) */
.cabres-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
	margin-bottom: 30px;
	border-bottom: 1px solid #cccccc;
}

/* Botons "◀" i "▶" */
.cabres-calendar-prev,
.cabres-calendar-next {
  cursor: pointer;
	background-color: rgba(68,68,68,1.00);
	color: rgba(255,255,255,1.00);
	border: none;
	padding: 5px;
	font-weight: bolder;
  /* Altres estils: mida font, color de fons, marges, etc. */
}

/* El text que mostra "Gener 2025", per exemple */
.cabres-calendar-month-year {
  font-weight: bold;
	font-size: 27px;
}

/* Capçalera dels dies (Dl, Dm, Dc...) */
.cabres-calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  /* ... */
}

/* Contenidor dels dies */
.cabres-calendar-days-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  /* ... */
}

/* Cada cel·la d’un dia */
.cabres-calendar-day {
  padding: 10px;
  text-align: center;
  border: 0px solid #ddd; /* ho pots canviar */
  /* ... */
}

/* El número del dia (ex: "1", "2", "3",...) */
.cabres-calendar-day-header {
  font-weight: bold;
	font-size: 23px;
}

/* Dia passat */
.cabres-day-past {
  background-color: #989898;
  color: white;
}

/* Dia amb almenys una sessió disponible */
.cabres-day-available {
  background-color: #a9bb30/* Verd clar */
}

/* Dia amb sessions definides però totes plenes */
.cabres-day-full {
  background-color: #EF6A4C; /* Vermell clar */
	color: rgba(255,255,255,1.00);
}

/* Dia sense cap sessió definida */
.cabres-day-no-session {
  background-color: #eeeeee; /* Gris clar */
}

/* Contenidor per a la info de cada sessió (11:00, 13:00, etc.) */
.cabres-calendar-session {
  font-size: 0.8em;
}

/* Sessió disponible */
.cabres-session-available {
  color: white;
  cursor: pointer; /* així no necessites fer-ho en JS */
	font-weight:bold;
	background-color: #8a9c16;
	margin-bottom: 1px;
	padding: 3px;
}

.cabres-session-available:hover {

	background-color: darkgreen;
	
}

/* Sessió plena */
.cabres-session-full {
  color: #92191B;
  cursor: default;
	margin-bottom: 1px;
	padding: 3px;
}

/* Sessió no disponible */
.cabres-session-not-available {
  color:#5A5A5A;
  cursor: default;
}



/* Estil per al contenidor del temporitzador */
.cabres-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #b59813; /* Color del temporitzador */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: cabres-spin 1s linear infinite;
    margin: 0 auto 10px auto; /* Centrat */
}

/* Animació de rotació */
@keyframes cabres-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Estil per al text */
#cabres-response p {
    text-align: center;
    font-size: 16px;
    color: #333;
}





/* Estils per als dies del calendari (administració) */
.calendar-day {
    padding: 20px;
    border: 0px solid #ddd;
}

/* Fons per als dies segons l'estat */
.day-green {
    background-color: #d4edda;  /* verd clar */
}
.day-orange {
    background-color: #fff3cd;  /* taronja clar */
}
.day-gray {
    background-color: #e2e3e5;  /* gris clar */
}

/* Estil per al número del dia */
.day-number {
    font-weight: bold;
    margin-bottom: 3px;
}

/* Estils per a la sessió */
.session label {
    cursor: pointer;
}

/* Text per a la informació de places lliures: font normal i una mica més petit */
.session-info {
    font-weight: normal;
    font-size: 0.9em;
    margin-left: 0px;
}


.completada {
  background-color: #b6ffb9;
  padding: 10px;
}

.pendent {
  background-color: #ffb888;
  padding: 10px;
}