.leftmyClender{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rightmytimes{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* basic date button styles */
.date-btn {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, transform .08s;
  user-select: none;
  font-weight: 600;
}

/* hover for selectable days */
.date-btn:hover { transform: translateY(-2px); }

/* selected future date (stays filled) */
.selected-date {
  background-color: #FD7801 !important;
  color: #fff !important;
}

/* current date: only border circle (not filled) */
.current-date-border {
  border: 3px solid #FD7801;
  color: #111;
  background: transparent;
}

/* small opacity for disabled/past and not clickable */
.disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none !important;
}

/* weekend closed state (weekend always disabled) */
.weekend {
  background: transparent;
  color: #111;
  border: 2px dashed #e2e2e2;
}

/* when hovering weekend show red circle and label (label shown outside circle above) */
.weekend:hover {
  background: transparent; /* main circle remains transparent so label sits above */
}
.weekend .inner-circle {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .12s, color .12s;
}
.weekend:hover .inner-circle {
  background: red;
  color: #fff;
}

/* closed label above day (hidden by default) */
.closed-label {
  position: absolute;
  transform: translate(-50%,-200%);
  left: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #444;
  display: none;
}
.weekend:hover .closed-label {
  display: block;
}

/* time-slot styles */
.time-slot {
  border: 2px solid #e6d6ff;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
}
.time-slot:hover { background: #FD7801; color: #fff; transform: translateY(-2px); }
.selected-time { background: #FD7801 !important; color: #fff !important; }

/* mobile menu open state */
#mobileMenu.open { width: 100vw; max-width: 320px; left: 0; }

/* small tweak for calendar container */
#calendarWrap { max-width: 420px; }

/* helper to center date cells */
.date-cell { position: relative; display:flex; align-items:center; justify-content:center; height:60px; }

/* Add hover effect for future dates */
.future-date:hover .inner-circle {
  background-color: #FD7801;
  color: #fff;
}

/* Prevent default behavior for navigation buttons */
#prevMonth, #nextMonth {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure future dates have proper cursor */
.future-date {
  cursor: pointer;
}
/* responsive */
@media (max-width: 768px) {
  .date-btn { width:44px; height:44px; }
  .date-cell { height:56px; }
  #mobileMenu { left:-100%; }
  #mobileMenu.open { left:0; width:100%; max-width:100%; }
}