/* 
    New Modal styles
    13-12-2023
*/
#product .drawer-modal.modal {
  height: 100vh;
  width: 100vw;
}

#product .drawer-modal .modal-dialog-sidebar {
  height: 100% !important;
  margin: 0 0 0 auto !important;
}

#product .drawer-modal .modal-content {
  height: 100%;
  border-radius: 12px 0 0 0 !important;
  /* fix overflow */
  overflow: scroll;
  scrollbar-width: none; /* "auto" or "thin" will hide the scrollbar */
  scrollbar-color: transparent transparent; /* optional: set color to match background */
}

/* fix the overflow */
#product .drawer-modal .modal-content::-webkit-scrollbar {
  display: none;
}

#product .drawer-modal .modal-body {
  padding: 16px !important;
}

#product .drawer-modal .modal-header {
  background-color: #010101;
  padding: 32px 16px 32px 16px !important;
  border-radius: 12px 0 0 0 !important;
  /*  */
  display: flex;
  align-items: baseline;
}

/* 
  adds close btn
  -- 22-01-2024    
*/
#product .drawer-modal .modal-header button.close {
  opacity: 1;
  font-size: 1.75rem;
  font-weight: lighter;
  color: white;
}

#product .drawer-modal .modal-title {
  color: white;
  text-align: center !important;
  font-weight: 600;
  width: 100%;
}

#product .drawer-modal .modal-size-adjust {
  max-width: 415px !important;
}

/* custom styles for modal content items */
#product .drawer-modal .modal-body-title {
  font-weight: 600;
  color: #48cae4;
  margin-top: 16px;
  margin-bottom: 8px;
}

#product .drawer-modal .modal-body p {
  line-height: 1.5;
}

#product .drawer-modal .modal-paragraph {
  font-weight: 300;
}

#product .drawer-modal .modal-paragraph-caption {
  font-weight: 600;
}

#product .drawer-modal #modal-selection-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 48px 0;
}

/* handling modal size on small screens */
@media (max-width: 445px) {
  #product .modal-size-adjust {
    max-width: calc(100% - 40px) !important;
  }
}

/* attempt to create a drawer-modal animation */
#product .drawer-modal .centered-content {
  text-align: center !important;
}

#product .drawer-modal .modal-dialog-sidebar {
  transform: translateX(100%);
  transition: transform 0.5s !important;
}

#product .drawer-modal.in .modal-dialog-sidebar {
  transform: translateX(0);
}

/* CUSTOM STYLES FOR DELIVERY MODAL */
#product .drawer-modal .delivery-information p {
  margin-top: 4px;
  text-align: justify;
}

#product .drawer-modal .delivery-information h5 {
  /* margin: auto; */
  margin-top: 28px;
  margin-bottom: 12px;
  font-weight: 600;
  width: 75%;
  padding: 8px;
  text-align: center;
  color: white;
  background-color: #48cae4;
  border-radius: 4px;
}

#product .drawer-modal .delivery-information h6 {
  font-size: 14px;
  margin-bottom: 0px;
  margin-top: 24px;
  text-decoration: underline;
  font-weight: 700;
}

#product .drawer-modal .delivery-information b {
  font-weight: 700;
}

#product .drawer-modal .delivery-information ul {
  list-style-type: disc;
  /* margin-left: 16px; */
  list-style-position: inside;
  padding-block-start: 8px;
}

#product .drawer-modal .delivery-information li {
  text-align: justify;
}

#product .drawer-modal .delivery-information li::marker {
  margin-right: 16px;
}

#product .drawer-modal .delivery-information li::first-line {
  padding-left: 16px;
}