/* Keyframe animation for modal entrance */
@keyframes slideIn {
    from {
        top: -100px;
        opacity: 0;
    }
    to {
        top: 15%;
        opacity: 1;
    }
}

/* -- Scrollbar -- */

/* General Scrollbar Styling (WebKit-based browsers) */
::-webkit-scrollbar {
  width: 1px; /* Width of the vertical scrollbar */
  height: 1px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: #fff; /* Color of the scrollbar handle */
  border-radius: 0; /* Rounded corners */
  border: 1px solid transparent; /* Adds space around the scrollbar */
  background-clip: padding-box; /* Prevents the border from overlapping the handle */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #fff; /* Darker color when hovered */
}

::-webkit-scrollbar-track {
  background-color: #fff; /* Color of the scrollbar track */
  border-radius: 0; /* Rounded corners */
}

/* Firefox Scrollbar Styling */
* {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #fff #fff; /* Handle color and track color */
}


/* -- Trigger Button -- */

#ergofast-custom-modal-trigger {
    position: fixed;
    top: 50%;
    right: 0;
    background-color: #e96e41;
    padding: 0.5em 1em;
    outline: 2px solid #F7F4F2;
    color: #F7F4F2;
    font-family: "Karla", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    transform-origin: 100% 100%;
    transform: rotate(-90deg) translateX(100%) translateY(1px);
    z-index: 20;
    cursor: pointer;
    border-radius: 0;
}

/* #ergofast-custom-modal-trigger:hover {} */

#ergofast-custom-modal {
  display: none; /* Ensure it starts hidden */
}

/* disable scrolling when  modal is open */
body.modal-open {
  overflow: hidden; /* Disable scrolling on background */
}

/* Hide the scrollbar but still allow scrolling */
body {
  -ms-overflow-style: none;  /* For Internet Explorer */
  scrollbar-width: none;  /* For Firefox */
}

body::-webkit-scrollbar {
  display: none;  /* For Chrome, Safari, and Opera */
}


#ergofast-custom-modal { 
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); 
  z-index: 1000; 
  overflow: hidden;
  }

  .modal-overlay.visible {
    opacity: 1;
    pointer-events: all;
  }
  
.ergo-modal-content {
  width: 60%;
  position: relative;
  max-width: 730px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  z-index: 1001; /* Ensure it's above the background */
  border-radius: 0;
  max-height: 80vh;  /* Set a limit on the height of the modal content */
  overflow-y: scroll;  /* Enable scrolling inside the modal*/
  padding-right: 15px; /* Account for scroll bar width */
  } 

@media (max-width: 768px) { .ergo-modal-content { width: 90%; }}
@media (min-width: 769px) { .ergo-modal-content { width: 60%; }}

/* Hide the scrollbar inside the modal but allow scrolling */
#ergofast-custom-modal .ergo-modal-content::-webkit-scrollbar {
  display: none;  /* Hide scrollbar in WebKit browsers */
}

#ergofast-custom-modal .ergo-modal-content {
  -ms-overflow-style: none;  /* For IE */
  scrollbar-width: none;  /* For Firefox */
}

/* Optional: Hide scrollbar while maintaining scroll functionality */
#ergofast-custom-modal .ergo-modal-content::-webkit-scrollbar-track {
  background: transparent; /* Hide the track */
}

#ergofast-custom-modal .ergo-modal-content::-webkit-scrollbar-thumb {
  background: transparent; /* Hide the thumb */
}


/* When modal is open, disable scrolling in the background */
body.modal-open {
  overflow: hidden;
}

.ergo-modal-content .ergo-modal-body {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 33em;
  margin: 0 auto;
  max-height: 60vh;
  max-width: 650px;
  overflow-y: auto;
}

  @media screen and (min-width: 30.06em) {
    .modal-overlay .ergo-modal-body {
      padding: 1em;
    }
  }

  .modal-overlay .ergo-modal-body .title {
    margin-top: 0;
    margin-bottom: 0;
  }

div.salesman-item {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 2rem;
    padding: 1rem;
    background-color: #eee;
    /* border: 1px solid #847488; */
    margin: 1rem;
}


@media (max-width: 768px) { div.salesman-item { flex-direction: column-reverse; }}
@media (min-width: 769px) { div.salesman-item { flex-direction: row; }}

div.salesman-item img {
  width: 125px;
  height: auto;
  border-radius: 100%
}

p.salesman_details {
font-size: 1rem;
}
  
.ergofast-custom-modal-close {
  position: absolute;
  top: 16px;
  right: 26px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 999;

}

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  p.small {
    font-size: 1rem;
  }

  h4.contact-direct {
    font-weight: bold;
    text-align: center;
    color: #ee7501;
  }

  select.select-location {
    border: none;
    line-height: 1.5rem;
    width: 100%;
    background-color: #f7f7f7;
    font-size: 16px;
    padding: 8px 4px;
  } 

  select.select-location:focus {
    border-color: #ccc;
    outline: none;
  }

.dont-show {display:none;}