.modal-open {
  overflow: hidden;
  /* padding-right: 17px; */
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-open.modal-padding .modal {
  padding-right: 17px;
}

/*
.modal-open #wpadminbar {
  display: none;
}
*/

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10002;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  background-color: rgba(0,0,0,0.5); 
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.modal.fade.in {
  display: flex;
  opacity: 1;
}

.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  /* min-height: 100%; */
  margin: 1.75rem auto;
}

.modal .card-selectable {
  background-color: #fff;
  border: 0;
  cursor: default;
  margin: 0;
}

.modal .card-selectable.is_coffee {
  flex-wrap: nowrap;
  max-width: 387px;
  width: 387px;
  padding: 30px;
}

.modal .card-selectable.is_coffee .card-image {
  max-width: 136px;
  width: 44.3%;
}

.modal .card-selectable.is_coffee .card-description {
  margin-top: 10px;
  text-align: center;
  max-height:250px;
  overflow: scroll;
}

.modal .card-selectable.is_coffee .single_variation_wrap .single_variation {
  display: none !important;
}

.modal .card-selectable.is_coffee .woocommerce-variation-price {
  padding: 20px 0 25px 0;
  text-align: center;
}

.modal .card-selectable.is_coffee .variations_form .woocommerce-variation-price .price > ins .amount {
  font-weight: var(--font-weight-normal);
}

.modal .card-selectable.is_coffee .variations_form select.form-control-sm[name="attribute_pa_cantidad"] {
  min-width: 84px;
  padding-right: 25px !important;
}

.modal-dismiss {
  background-color: #fff !important;
  border: 1px solid rgba(var(--primary-rgb), 0.3) !important;
  border-radius: 50%;
  color: #000 !important;
  font-size: 18px;
  height: 40px;
  width: 40px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-dismiss .i-times {
  margin-right: -1px;
}

.modal-xs-full .modal-body {
  background-color: #fff;
  border-radius: 10px;
  height: 100%;
  overflow-y: auto;
  width: 100%;
}

.modal-xs-full .modal-body .modal-dismiss {
  bottom: 0;
  margin: 0 auto;
  position: sticky;
}

@media (min-width: 992px) {
  .modal .card-selectable.is_machine {
    max-width: 305px;
    padding: 24px 40px 20px 40px;
  } 

  #modal-login.modal-xs-full .modal-body {
    width: 420px;
  }
}

@media (max-width: 991.98px) {
  .modal-xs-full {
    top: 60px; /* header 60px */
  }

  .admin-bar .modal-xs-full {
    top: 92px; /* admin-bar 32px, header 60px */
  }

  .modal-xs-full .modal-dialog {
    align-items: flex-start;
    height: 100%;
    width: 100%;
    margin: 0;
  }

  .modal-open .modal-xs-full { 
    padding-right: 0 !important;
  }
  /*
  .modal .card-selectable.is_coffee {
    border-radius: 0;
    max-width: 100%;
    min-height: 100%;
    padding-bottom: 60px;
    width: 100%;
  }
  */

  .modal-xs-full .modal-body {
    border-radius: 0;
  }

  .modal-xs-full .card-selectable,
  .modal-xs-full .card-filters {
    border-radius: 0;
    min-height: unset;
    max-width: 100% !important;
    height: calc(100vh) !important;  /* summary 60px, header 60px */
    width: 100% !important;
    overflow-y: auto;
  }

  .admin-bar .modal-xs-full .card-selectable,
  .admin-bar .modal-xs-full .card-filters {
    height: calc(100vh) !important;  /* summary 60px, header 60px, admin-bar 32px */
  }

  .next-step-enabled .modal-xs-full .card-selectable,
  .next-step-enabled .modal-xs-full .card-filters {
    height: calc(100vh) !important;  /* summary 60px, header 60px, btn next 44px */
  }

  .next-step-enabled.admin-bar .modal-xs-full .card-selectable,
  .next-step-enabled.admin-bar .modal-xs-full .card-filters {
    height: calc(100vh) !important;  /* summary 60px, header 60px, admin-bar 32px, btn next 44px */
  }

  .modal .card-selectable.is_coffee,
  .modal .card-filters {
    padding-bottom: 24px;
  }

  .modal .card-selectable.is_coffee .card-form {
    flex-grow: unset;
  }

  .modal .card-selectable.is_extra .card-form {
    max-width: 272px;
  }

  .modal .card-selectable.is_coffee .modal-dismiss {
    display: flex;
    flex-shrink: 0;
  }
  
  .modal .card-selectable.is_coffee .card-form .variations .form-group + .form-group, 
  .modal .card-selectable.is_coffee .card-form .variations .form-group + .quantity {
    margin-left: 18px;
  }

  .modal .card-selectable.is_coffee .card-form .single_variation_wrap {
    margin-top: 18px;
  }

  #modal-login.modal-xs-full {
    z-index: 10002; /* above checkout summary mobile */
  }
}

@media (max-width: 782px) {
  .admin-bar .modal-xs-full {
    top: 106px; /* admin-bar 46px, header 60px */
  }

  .admin-bar .modal-xs-full .card-selectable,
  .admin-bar .modal-xs-full .card-filters {
    height: calc(100vh) !important;  /* summary 60px, header 60px, admin-bar 46px */
  }

  .next-step-enabled.admin-bar .modal-xs-full .card-selectable,
  .next-step-enabled.admin-bar .modal-xs-full .card-filters {
    height: calc(100vh) !important;  /* summary 60px, header 60px, admin-bar 46px, btn next 44px */
  }
}

.modal-body video {
  display: block;
  width: 100%;
}

.modal-header .close {
  padding: 10px;
  font-size: 32px;
  color: #fff;
  display: inline-block;
  text-shadow: none;
  box-shadow: none;
  background: none;
  border: 0;
  position: absolute;
  right: -10px;
  top: -40px;
  z-index: 2;
}

.modal-header .close > span {
  display: block;
}

/* Large
--------------------------------------------------------------------------- */
.modal-lg {
  max-width: 90%;
  width: auto;
}

.modal-lg .modal-content {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .modal-lg.fixed-width {
    max-width: 100%;
    width: 600px;
  }
}

@media (max-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}

@media (max-width: 1200px) {
  .modal-lg {
    max-width: 1024px;
  }
}

/* Default
--------------------------------------------------------------------------- */
.modal-default { 
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  z-index: 10002; /* over checkout summary (10001) */

  --modal-padding-x: 24px;
}

.modal-default.fade.in {
  display: block;
}

.modal-default .modal-dialog {
  margin: 0.5rem;
  position: relative;
  width: auto;
  pointer-events: none;
}

.modal-default .modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-default .modal-content { 
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  outline: 0;
  pointer-events: auto;
  position: relative;
  width: 100%;
}

.modal-default .modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 20px 65px 0 var(--modal-padding-x);
  position: relative;
}

.modal-default .modal-title {
  font-family: var(--font-family-halvareng);
  font-size: var(--font-size-lg);
  letter-spacing: 0.05em;
  line-height: 1.1;
  padding: 0.3em 0;
}

.modal-default .modal-header .modal-dismiss {
  display: flex;
  position: absolute;
  right: 10px;
  top: 15px;
}

.modal-default .modal-body {
  color: var(--primary);
  flex: 1 1 auto;
  padding: var(--modal-padding-x);
  position: relative;
}

.modal-default .modal-footer {
  padding: 0 var(--modal-padding-x) var(--modal-padding-x) var(--modal-padding-x);
}

@media (min-width: 576px) {
  .modal-default .modal-dialog {
    max-width: 355px;
    margin: 1.75rem auto;
  }

  .modal-default .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
}

/* Warranty
--------------------------------------------------------------------------- */
#modal-warranty .badge-warranty {
  position: absolute;
  right: calc(var(--modal-padding-x) - 12px);
  top: 0;
  transform: rotate(35deg);
}

#modal-warranty .modal-body {
  padding: 0;
}

#modal-warranty .modal-slider--item {
  padding: var(--modal-padding-x);
}

#modal-warranty .badge-offer {
  line-height: 1.167em;
  padding: 5px 14px 4px 14px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-4.43deg);
}

/* Slider
--------------------------------------------------------------------------- */
.modal-slider {
  opacity: 0;
}

.modal-slider.shown {
  opacity: 1;
}

.modal-slider:not(.slick-slider) {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.modal-slider:not(.slick-slider) .modal-slider--item {
  min-width: 100%;
}

.modal-slider .slick-track {
  display: flex;
  /* align-items: center; */
  flex-wrap: nowrap;
}

.modal-slider--item {
  float: none !important;
  position: relative;
}

.modal-slider .slick-arrow {
  background: none !important;
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 7px;
}
.modal-slider .slick-arrow.slick-prev { left: 20px; right: unset; }
.modal-slider .slick-arrow.slick-next { right: 20px; left: unset; }

.modal-slider .slick-arrow > span {
  background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 185.343 185.343' style='enable-background:new 0 0 185.343 185.343;' xml:space='preserve'%3E%3Cpath style='fill:%231E2D23;' d='M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  display: block;
  height: 40px;
  width: 20px;
}

.modal-slider .slick-arrow.slick-prev > span { transform: rotate(180deg); }

.modal-slider .slick-arrow.slick-disabled { opacity: 0; visibility: hidden; }