.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* hero section (view/dashboard/index */
/* Hide the image on smaller screens */
.logo-wrapper {
  display: none;
}

/* Show the image on large screens (lg) and up */
@media (min-width: 1024px) {
  .logo-wrapper {
    margin-right: 180px;
    display: block;
  }
  .show-small {
    display: none;
  }
}

@media (max-width: 1023px) {
  .noshow {
    display: none;
  }
}

/* admin page, delete button */
/* views/bookings/index */
.css-bg {
  background-color: red;
  color: white;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.css-bg:hover {
  background-color: #e60000;
}

/* adding css colour for the buttons */
.button-colour {
  background-color: #16006C;
}

.button-colour:hover {
  background-color: #0D47A1;
}

/* admin page edit service */
.add-mb-please{
  margin-bottom: 2rem;
}

.add-mt-please{
  margin-top: 2rem;
}
/* CSS FOR CAR SELECTION IN FORM */
.custom-indigo {
  --custom-indigo-border: #16006C;
  --custom-indigo-ring: #16006C;
}

.custom-indigo:checked {
  border-color: var(--custom-indigo-border);
  box-shadow: 0 0 0 2px var(--custom-indigo-ring);
}

.custom-indigo:hover {
  border-color: var(--custom-indigo-border);
}

.custom-indigo:checked + label {
  border-color: var(--custom-indigo-border);
  box-shadow: 0 0 0 2px var(--custom-indigo-ring);
}

/* flatpickr (view/bookings/form) */
/* Change the color of the selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #0D47A1 !important;
  border-color: #0D47A1 !important;
  color: white !important;
}

/* Change the hover color */
.flatpickr-day:hover {
  background: #a5b4fc !important;
  border-color: #a5b4fc !important;
}

/* CSS FOR TIMESLOT SELECTION IN FORM */

#time-slot-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  padding: 10px;
}

.time-slot {
  text-align: center;
}

.time-slot-input {
  display: none;
}

.time-slot-label {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 8px;
  justify-content: center;
}

.time-slot-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: transparent;
  transition: all 0.3s ease;
}

.time-slot-text {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.time-slot-label:hover .time-slot-circle {
  border-color: #0D47A1;
  background-color: #f0f4ff;
}

.time-slot-label:hover .time-slot-text {
  color: #0D47A1;
}

.time-slot-input:disabled + .time-slot-label {
  opacity: 0.5;
  background-color: #e0e0e0;
  cursor: not-allowed;
}

.time-slot-input:disabled + .time-slot-label .time-slot-circle {
  border-color: #e0e0e0;
}

.time-slot-input:checked + .time-slot-label {
  border-color: #16006C;
  /* background-color: #5c6bc0; */
  color: white;
}

.time-slot-input:checked + .time-slot-label .time-slot-circle {
  background-color: #16006C;
  border-color: #16006C;
}

.time-slot-input:checked + .time-slot-label .time-slot-text {
  font-weight: bold;
}

@media (max-width: 600px) {
  #time-slot-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.time-slot.disabled {
  pointer-events: none; /* Prevent clicking */
  color: #ccc; /* Make it look disabled */
}

.time-slot.disabled .time-slot-label {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

.time-slot-booked {
  opacity: 0.5;
  pointer-events: none; /* Prevent user interaction */
}

.time-slot-input:disabled {
  background-color: #e5e5e5;
  cursor: not-allowed;
}

.time-slot.unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}

.time-slot.unavailable input {
  pointer-events: none;
}

.finishes-at {
  font-size: 0.875rem;
  margin-top: 1px;
}

/* contact page */
.custom-flex-container {
  display: flex;
  align-items: center;
  justify-content: center;  /* Center by default */
  width: 100%;
  height: 100%;
  margin-left: 400px;  /* Apply margin-left for larger screens */
}

@media (max-width: 1180px) {  /* Apply centering for screens smaller than 1180px */
  .custom-flex-container {
    justify-content: center;  /* Center content */
    margin-left: 0;  /* Remove margin-left */
  }
}