/*BACK BUTTON BEGIN*/
.btn-back-floating {
  position: fixed;
  top: 180px; /* Este valor depende de la altura de tu .main-nav */
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(to right, #ffffff, #f3f3f3);
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
  z-index: 9998;
}

.btn-back-floating:hover {
  background: linear-gradient(to right, #f9f9f9, #eaeaea);
  transform: translateX(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.icon-arrow {
  width: 22px;
  height: 22px;
  stroke: #333;
}

@media (max-width: 600px) {
  .btn-back-floating {
    left: 12px;
    padding: 8px 12px;
    font-size: 14px;
    gap: 8px;
  }

  .icon-arrow {
    width: 18px;
    height: 18px;
  }
}

/*BACK BUTTON END*/


/*BOOKING BEGIN*/
.calendar {
    padding: 23px;
    width: 100%;
    text-align: -webkit-center;
    min-width: 243px;
    margin-top: 100px;
}

.calendar h2{
    font-family: sans-serif;
    font-weight: 100;
    margin: 50px;
    font-size: 37px;
    color: var(--colortitleBookAppt);
}

.calendar .cal-days {
    font-family: system-ui;
  font-weight: 300;
  margin: 40px;
  font-size: 20px;
}

.calendar .cal-time, .calendar .alert-service, 
.calendar .alert-hours {
  font-family: system-ui;
  font-weight: 100;
  margin: 4px;
  font-size: 14px;
}

.calendar .alert-service,
.calendar .alert-hours {
    color: red;
    font-weight: 900;
}

.calendar .chosen-day {
    margin: 22px;
  font-size: 20px;
}

.calendar #bday {
    width: 300px;
  height: 40px;
  padding: 16px;
  margin-bottom: 40px;
}

.nativeDatePicker span::after {
  padding-left: 5px;
}

.nativeDatePicker input:invalid + span::after {
  content: "✖";
}

.nativeDatePicker input:valid + span::after {
  content: "✓";
}

.fallbackDatePicker {
    display: none;
    margin: 25px;
}

.calendar input[type="submit"], button {
    height: 40px;
    width: 150px;
    color: white;
    background-color: var(--colorbotonBookAppt);
    margin: 30px;
    cursor: pointer;
}

.calendar input:disabled,
.calendar input[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

.calendar .content-hours {
    display: flex;
  justify-content: center;
  margin: 20px;
  font-size: 16px;
}

.calendar .box-hour {
    width: 80px;
  height: 34px;
  background-color: rgb(95, 158, 160);
  color: white;
  padding: 5px;
  margin: 4px;
}

.calendar .cal-cover-services {
    display: grid;
  grid-template-columns: 270px 270px 270px;
  justify-items: flex-start;
  justify-content: center;
}

.cover-services-columns {
  margin: 10px;
}

#available-hours {
  margin-top: 50px;
}

@media only screen and (max-width: 1350px) {
    .calendar .cal-cover-services {
        grid-template-columns: 250px 250px;
    }
}

@media only screen and (max-width: 500px) {
    .calendar .cal-cover-services {
        display: block;
    }
    .cover-services-columns {
        margin-bottom: 23px;
    text-align-last: left;
    }
    .calendar .content-hours {
      font-size: 14px;
    }

    .calendar .box-hour {
        width: 70px;
      height: 29px;
    }
}

@media only screen and (max-width: 808px) {
    .nativeDatePicker span {
        display: none;
    }

    .calendar #bday {
        width: 100%;
    min-width: 100px;
    }
}

@media only screen and (max-width: 680px) {
    .calendar h2 {
        margin: 0;
    font-size: 23px;
    }

    .calendar .msg-confirmation {
      margin-top: 20px;
    }

    .calendar .cal-days {
        margin: 40px 0;
    font-size: 14px;
    }

    .calendar .cal-time {
        font-size: 12px;

    }

    .cover-services-columns {
        font-size: 12px;
    }
}

.box-hour-hidden, .cal-info-hidden {
    display: none;
}

.calendar .cal-info {
    width: 60%;
}

.cal-info .info-user, .column-flex #area-info-user {
  width: 100%;
  height: 33px;
  padding: 8px;
  margin: 16px;
  display: inline-block;
  border: 2px solid #39393c;
  box-sizing: border-box;
  font-size: 13px;
  border-radius: 25px;
  color: #39393c;
}

.cal-info #area-info-user, .column-flex #area-info-user {
    height: 100px;
  resize: none;
}

.calendar .msg-confirmation {
    width: 50%;
  line-height: 32px;
  letter-spacing: 0.8px;
  text-align: justify;
  font-weight: 300;
}
/*BOOKING END*/

/*TOOGLE SWITCH*/
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  justify-content: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #dc186e;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/*END TOOGLE SWITCH*/

/*SPINNER*/
.loader-overlay {
  position: fixed;
  inset: 0;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out;
}

.logo-spinner {
  width: 150px;
  height: auto;
  /*animation: fadein 1s ease-in-out;*/
  animation: spin 2s linear infinite;
}

/*@keyframes fadein {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}*/
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/*END SPINNER*/