.calendar-popup {
  z-index: 9999 !important;
  /* גבוה יותר מכל modal רגיל */
}


.date-picker-day {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #dbd1d1;
  background-color: white;
  color: #444;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}


.date-picker-day:hover {
  border: 1.5px solid #4da6ff;
}


.date-picker-day.selected {
  background-color: #4da6ff;
  color: white;
}

.month-year-picker div {
  transition: background-color 0.2s, color 0.2s;
}

.month-year-picker div:hover {
  background-color: #4da6ff;
  color: white;
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-left {
  animation: slideLeft 0.4s ease-in-out;
}

.slide-right {
  animation: slideRight 0.4s ease-in-out;
}

.arrowBtn .next {
  top: 15%;
  right: 80% !important;
}

.arrowBtn .prev {
  top: 15%;
  right: 90% !important;
}

.arrowBtn:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  right: 80% !important;
}

/* Tooltip Styles */
.icon-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.icon-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-text {
  top: 0%;
  border: solid 0.005px black;
  border-radius: 5px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  /* was -50%, shift a bit more for Hebrew */
  background-color: white;
  color: black;
  padding: 4px 8px;
  /* wider */
  /* min-width: 60px; */
  /* width: fit-content; */
  /* ensure enough width for Hebrew */
  white-space: nowrap;
  /* allow wrapping if needed */
  font-size: 12px;
  z-index: 10;
}


@media (hover: hover) and (pointer: fine) {
  .icon-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}

@media (hover: none) and (pointer: coarse) {
  .icon-tooltip:active .tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  .tooltip-text {
    visibility: visible;
    opacity: 0.7;
    font-size: 10px;
    padding: 2px 4px;
  }
}