Palette: #020201 (nero), #a26a2d (marrone), #f6f6f6 (grigio) --- */

/* 1) Testo, label e span */
#fbuilder,
#fbuilder label,
#fbuilder span {
  color: #020201;
}

/* 2) Campi di input, textarea e select */
#fbuilder input,
#fbuilder textarea,
#fbuilder select {
  background: #f6f6f6;
  border: 1px solid #a26a2d;
  color: #020201;
  border-radius: 4px;
  padding: 6px 8px;
}

/* 3) Calendario responsive */
#fbuilder .ui-datepicker-inline {
  width: 100% !important;
  max-width: none !important;
}

/* 4) Header calendario */
#fbuilder .ui-datepicker-header {
  background: #a26a2d;
  color: #f6f6f6;
  text-shadow: none;
  border: none;
}

/* 5) Giorni nel calendario */
/* 5a) Giorno corrente: cerchio grigio con bordo marrone, testo nero */
#fbuilder .ui-datepicker-calendar td.ui-datepicker-current-day a {
  background: #f6f6f6 !important;
  color: #020201 !important;
  border: 2px solid #a26a2d !important;
  border-radius: 50% !important;
}

/* 5b) Giorni disponibili: cerchio marrone, testo grigio, bordo nero */
#fbuilder .ui-datepicker-calendar td:not(.ui-datepicker-unselectable) a.ui-state-default {
  background: #a26a2d;
  color: #f6f6f6;
  border: 1px solid #020201;
  border-radius: 50%;
}

/* 5c) Giorni non disponibili: cerchio grigio, testo nero, bordo nero */
#fbuilder .ui-datepicker-calendar td.ui-datepicker-unselectable .ui-state-default {
  background: #f6f6f6;
  color: #020201;
  border: 1px solid #020201;
  opacity: 0.5;
  border-radius: 50%;
}

/* 6) Slot orari */
/* 6a) Slot liberi: marrone con testo grigio e bordo nero */
#fbuilder .slots div a {
  background: #a26a2d;
  color: #f6f6f6;
  border: 1px solid #020201;
  border-radius: 20px;
  padding: 6px 12px;
  display: inline-block;
  text-decoration: none;
}

/* 6b) Slot selezionato: cerchio nero con testo grigio */
#fbuilder .slots .currentSelection a {
  background: #020201 !important;
  color: #f6f6f6 !important;
  border-color: #020201 !important;
}

/* 7) Pulsanti principali (“Prenota Ora”, ecc.) */
#fbuilder .pbSubmit,
#fbuilder .ahb_list a {
  background: #a26a2d;
  color: #f6f6f6;
  border: 1px solid #020201;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

/* Hover sui pulsanti: inverti colori */
#fbuilder .pbSubmit:hover,
#fbuilder .ahb_list a:hover {
  background: #020201;
  color: #f6f6f6;
}
/* Hover sui giorni disponibili */
#fbuilder .ui-datepicker-calendar td:not(.ui-datepicker-unselectable) a.ui-state-default:hover {
  background:    #020201 !important;  /* nero */
  color:         #f6f6f6 !important;  /* testo bianco */
  border:        2px solid #a26a2d !important; /* bordo marrone */
  border-radius: 50% !important;
}
/* Top bar under the title: black instead of blue */
#fbuilder hr,
#fbuilder .ui-widget-header {
  background: #020201 !important;
  border-color: #020201 !important;
}
#fbuilder .slots div a {
  border-color: #020201 !important;
}
/* Bordi neri per i giorni non disponibili */
#fbuilder .ui-datepicker-calendar td.ui-datepicker-unselectable a.ui-state-default {
  border: 2px solid #020201 !important;
  border-radius: 50% !important;
}
/* Hover sugli orari disponibili: marrone interno, testo chiaro e bordo marrone */
#fbuilder .slots div a:hover {
  background:    #a26a2d !important;
  color:         #f6f6f6 !important;
  border-color:  #a26a2d !important;
}
/* 1) Barra di progresso (jQuery UI Progressbar) */
#fbuilder .ui-progressbar .ui-progressbar-value {
  background-color: #020201 !important;
  border-color:     #020201 !important;
}

/* 2) Header del calendario (nav) tutto nero */
#fbuilder .ui-datepicker-header {
  background: #020201 !important;
  border:     none    !important;
}

/* 3) Blocco del mese “Luglio 2025” nero con testo bianco */
#fbuilder .ui-datepicker-header .ui-datepicker-title {
  background:     #020201 !important;
  color:          #f6f6f6 !important;
  padding:        5px 10px   !important;
  border-radius:  3px        !important;
}

/* 4) Frecce di navigazione in bianco per contrasto */
#fbuilder .ui-datepicker-prev span,
#fbuilder .ui-datepicker-next span {
  color: #f6f6f6 !important;
}
/* Testo mese+anno in bianco */
#fbuilder .ui-datepicker-header .ui-datepicker-month,
#fbuilder .ui-datepicker-header .ui-datepicker-year {
  color: #f6f6f6 !important;
}

/* Se il titolo è un wrapper generico */
#fbuilder .ui-datepicker-header .ui-datepicker-title {
  color: #f6f6f6 !important;
}
/* Giorno selezionato sempre nero */
#fbuilder .ui-datepicker-calendar .ui-state-active {
  background:    #020201 !important;
  color:         #f6f6f6 !important;  /* testo bianco per il contrasto */
  border-color:  #020201 !important;
}

/* Orario selezionato sempre nero */
#fbuilder .slots .currentSelection a {
  background:    #020201 !important;
  color:         #f6f6f6 !important;  /* testo bianco */
  border-color:  #020201 !important;
}
/* Giorno selezionato sempre nero */
#fbuilder .ui-datepicker-calendar td a.ui-state-active,
#fbuilder .ui-datepicker-calendar td a.currentSelection {
  background:    #020201 !important; /* nero pieno */
  color:         #f6f6f6 !important; /* numero in bianco */
  border:        2px solid #020201 !important;
  border-radius: 50% !important;
}

/* Orario selezionato sempre nero */
#fbuilder .slots div a.ui-state-active,
#fbuilder .slots div a.currentSelection {
  background:    #020201 !important; /* nero pieno */
  color:         #f6f6f6 !important; /* testo in bianco */
  border:        2px solid #020201 !important;
  border-radius: 20px !important;
}
/* Slot orario selezionato o attivo: nero */
#fbuilder .slots div a.currentSelection,
#fbuilder .slots div a.ui-state-active,
#fbuilder .slots div a.ui-state-hover,
#fbuilder .slots div a:focus {
  background-color: #020201 !important;
  background-image: none      !important;
  border:           2px solid #020201 !important;
  color:            #f6f6f6 !important;
  box-shadow:       none      !important;
}

/* Evita gradient o altre immagini sullo slot attivo */
#fbuilder .slots div a.ui-state-active {
  background-image: none !important;
}
/* Slot orari: bordo nero in tutte le varianti */
#fbuilder .slots div a {
  border: 2px solid #020201 !important;
}

/* Anche per gli stati jQuery UI che potrebbero reimpostare il bordo */
#fbuilder .slots div a.ui-state-default,
#fbuilder .slots div a.ui-state-hover,
#fbuilder .slots div a.ui-state-active,
#fbuilder .slots div a.currentSelection,
#fbuilder .slots div a:focus {
  border: 2px solid #020201 !important;
}
/* Slot orario attivo: sfondo nero, bordo nero, testo bianco */
#fbuilder .slots div a.ui-state-active,
#fbuilder .slots div a.currentSelection,
#fbuilder .slots div a.ui-button.ui-state-active {
  background-color: #020201 !important;
  background-image: none      !important;
  border-color:     #020201 !important;
  color:            #f6f6f6 !important;
  box-shadow:       none      !important;
}
/* === SLOT ORARIO ATTIVO (click / selezionato) NERO === */
#fbuilder .slots div a.ui-button.ui-state-active,
#fbuilder .slots div a.ui-state-active,
#fbuilder .slots div a.currentSelection,
#fbuilder .slots div a:focus {
  /* Sfondo nero pieno */
  background-color: #020201 !important;
  /* Rimuovi qualunque gradiente o immagine di background */
  background-image: none      !important;
  /* Bordo nero spesso 2px */
  border:           2px solid #020201 !important;
  /* Testo in bianco per contrasto */
  color:            #f6f6f6 !important;
  /* Elimina eventuali ombre */
  box-shadow:       none      !important;
}
/* Slot selezionato (attivo): sfondo nero, testo bianco, bordo nero */
#fbuilder .slots .currentSelection.choosen a {
  background-color: #020201 !important;
  color: #f6f6f6 !important;
  border: 2px solid #020201 !important;
  border-radius: 20px !important;
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
}
/* Tutti gli slot attivi/selezionati */
#fbuilder .slots div.currentSelection a,
#fbuilder .slots div.choosen a {
  background-color: #020201 !important;
  color: #f6f6f6 !important;
  border: 2px solid #020201 !important;
  border-radius: 20px !important;
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
}
