/* Responsive breakpoints
   xs: max 575.98px
   sm: min 576px
   md: min 768px
   lg: min 992px
   xl: min 1200px
   xxl: min 1400px
   xxxl: min 1600px
   ultra: min 1920px
*/
/* Section index (search for [tag])
   [backdrop] Modal overlay and dim background
   [popup]    Centered modal styling
   [cart]     Slide-in cart layout and responsive tweaks
   [close]    Close button appearance
*/
/* ===============================
   Backdrop (Shared)
================================ */
/* [backdrop] */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: none;
}
.modal-backdrop.show {
  display: block;
}

/* ===============================
   Popup Modal (Center-aligned)
================================ */
/* [popup] */
.modal-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 500px;
  max-width: 90%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0.95);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1060;
  opacity: 0;
  pointer-events: none;
  display: none;
  border-radius: 16px !important;
}

.modal-popup.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  display: block;
}

/* Popup Header/Footer */
.modal-popup .modal-header,
.modal-popup .modal-footer {
  padding: 1rem;
  /* border-bottom: 1px solid #dee2e6; */
}
.modal-popup .modal-footer {
  border-top: 1px solid #dee2e6;
}

/* Popup Body */
.modal-popup .modal-body {
  padding: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

/* Close Button (popup) */
.modal-popup .close,
.modal-popup .btn-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
}

/* ===============================
   Slide-In Cart Modal
================================ */
/* [cart] */
#cartModal {
  position: fixed;
  /* top: 185px; */
  top: 0px;
  right: 0;
  width: 600px;
  /* height: calc(100% - 185px); */
  height: 100%;
  background: white;
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 1055;
  opacity: 0;
  pointer-events: none;
  display: none;
}
#cartModal.open {
  transform: translateX(0%);
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* Slide-in Layout */
.cartModalWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* padding: 0 10px; */
}
.cartModalContent {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cartModalBody {
  overflow-y: auto;
  flex: 1 1 auto;
}
.cartModalHeader,
.cartModalFooter {
  flex-shrink: 0;
  padding: 15px 5px;
}

/* Optional styling */
.cartSliderBottomText {
  text-align: center;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  padding: 15px;
}
.cartSliderCheckoutBtn {
  text-align: center;
  width: 100%;
  color: #ffffff;
  background: #c70061;
  border-color: #c70061;
}

.cartSliderCheckoutBtn::before {
  background: rgba(255, 255, 255, 0.15);
}

.cartSliderCheckoutBtn.is-tapped {
  color: #ffffff;
}

.cartSliderCheckoutBtn.is-tapped::before {
  transform: scaleX(1);
}

@media (hover: none) and (pointer: coarse) {
  .cartModalFooter .cartSliderCheckoutBtn:active,
  .cartModalFooter .cartSliderCheckoutBtn:focus,
  .cartModalFooter a:active .cartSliderCheckoutBtn,
  .cartModalFooter a:focus .cartSliderCheckoutBtn {
    color: #ffffff;
  }

  .cartModalFooter .cartSliderCheckoutBtn:active::before,
  .cartModalFooter .cartSliderCheckoutBtn:focus::before,
  .cartModalFooter a:active .cartSliderCheckoutBtn::before,
  .cartModalFooter a:focus .cartSliderCheckoutBtn::before {
    transform: scaleX(1);
  }
}

@supports (-webkit-touch-callout: none) {
  .cartModalFooter .cartSliderCheckoutBtn:active,
  .cartModalFooter .cartSliderCheckoutBtn:focus,
  .cartModalFooter a:active .cartSliderCheckoutBtn,
  .cartModalFooter a:focus .cartSliderCheckoutBtn {
    color: #ffffff;
  }

  .cartModalFooter .cartSliderCheckoutBtn:active::before,
  .cartModalFooter .cartSliderCheckoutBtn:focus::before,
  .cartModalFooter a:active .cartSliderCheckoutBtn::before,
  .cartModalFooter a:focus .cartSliderCheckoutBtn::before {
    transform: scaleX(1);
  }
}

/* CART STARTS HERE */
.cartSliderBody
{
  background-color: #f2f2f2;
}

.cartSliderBody p
{
  margin: 0px;
}

.cartSliderItems
{
  background-color: #ffffff;
  padding: 5px;
  margin: 5px 10px;
}

.cartSliderImg
{
  padding: 0px !important;
}

.cartSliderItem
{
  min-height: 120px;
  padding-left: 10px;
}

.cartSliderAccessory
{
  padding: 2px 0px;
  font-size: 15px;

  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cartSliderAccessoryName
{
  margin-right: 10px;
}

.cartSliderItemQty input
{
	height: 25px;
	width: 70px;
	min-height: 20px;
	min-width: 70px;
	text-align: center;
	float: none !important;
	margin: 0px 5px;
}

.cartSliderPlusMinus
{
  cursor: pointer;
}

.cartSliderPrice
{
  text-align: right;
  padding: 0px;
}

.cartSliderItemTotal
{
  padding: 0px;
}

.cartFooterHireDays
{
  background-color: #f2f2f2;
	margin-bottom: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (min-width: 768px) {
  .cartSliderItemQty input {
    width: 70px;
    min-width: 70px;
  }
}
@media (max-width: 575.98px) {
  #cartModal {
    width: 100vw;
    max-width: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
  }

  .cartModalBody {
    max-height: calc(100vh - 100px); /* Adjust based on header/footer */
    overflow-y: auto;
  }
  
  .cartSliderPlusMinus
  {
    display: none;
  }

  .cartSliderItems
  {
    font-size: 15px !important;
    margin: 0px;
  }
  
  .cartSliderItem
  {
    min-height: auto;
    font-size: 14px;
  }

  .cartSliderItemQty input
  {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0px !important;
  }

  .cartSliderItemTotal.mt-auto.pt-2 > div {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .modal-popup #accessorySelectedID.product-card__input {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* ===============================
   Close Button
================================ */
/* [close] */
.closeModalButton {
  font-size: 1.5rem;
  line-height: 1;
  color: #000;
  opacity: 0.5;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  user-select: none;
}
.closeModalButton:hover {
  opacity: 1;
}