// ==================================
// ===== CARD static
// ==================================

// LAYOUT
// ---------------------------------------------------

.cards-static-container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 1140px;
}

.cards-static-container:first-child {
  padding-top: 2rem;
}

.cards-static-container:last-child {
  padding-bottom: 2rem;
}

// This is just for the shadow
.card-static-wrapper {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  justify-content: center;
}

.card-static {
  flex-grow: 1;
  min-width: 300px;
  max-width: 430px;
  min-height: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  border-radius: 10px;
  box-shadow: -6px 12px 50px -10px rgb(204, 204, 204);
  overflow: hidden;
  i {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 2rem;
    color: var(--card-info-icon-color);
    transition: ease-in-out 0.2ms;
    &:hover {
      cursor: pointer;
      color: var(--card-info-icon-color-hover);
    }
  }
}


// ELEMENTS
// ---------------------------------------------------


// Card image
.card-static_image-container {
  width: 100%;
  height: var(--card-image-container-height);
  position: relative;
  z-index: 0;
}

.card-static_image {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--card-image-bg-color);
  object-fit: var(--card-image-object-fit);
  padding: var(--card-image-padding);
}

// Custom message
.card-static_custom-message {
  font-size: 9px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
  background-color: var(--brand-secondary);
  text-align: center;
  padding: 13px;
  position: absolute;
  left: 0;
  top: var(--card-custom-message-top);
  width: 100%;
}

// Low availability message
.card-static_low-availability {
  position: absolute;
  top: 20px;
  left: 0px;
  padding: 3px 10px;
  border-radius: 0 15px 15px 0;
  background-color: var(--error);
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
}

// Card header
.card-static_header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 10px 20px;
  background: #f4f0ec;
  height: 70px;
  border: 1px solid var(--process-container-bg);
}

  .card-static_price {
    width: 100%;
  }

  .card-static_amount {
    display: inline-block;
    font-size: 1rem;
    font-weight: 900;
    color: var(--brand-primary);
    margin: 0;
  }

  .card-static_taxes {
    width: auto;
    text-align: right;
    line-height: 1.5;
    float: right;
    font-size: 14px;
  }

  .card-static_discount {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    line-height: 1;
  }

  .card-static_discount-badge {
    width: auto;
    float: right;
  }

  .card-static_original-price {
    color: #999;
    font-size: 1.2em;
    font-weight: bolder;
    text-decoration: line-through;
  }

// Card body
.card-static_body {
  justify-content: center;
  align-content: space-between;
  position: relative;
  width: 100%;
  height: fit-content !important;
  padding: 20px;
  background-color: var(--card-body-bg-color);
}

.mybooking-catalog .card-static_body {
  text-align: center;
}

  // Product details
  .card-static_product-name {
    width: 280px;
    color: var(--card-product-name-color);
    font-weight: 800;
    font-size: 1.1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mybooking-catalog_header {
    h2.card-static_product-name {
      max-width: 300px;
      text-align: center;
    }
    background-color: transparent;
    border: none;
  }

  .card-static_product-short-description {
    width: 280px;
    color: #999;
    font-weight: 400;
    font-size: 0.9rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .card-static_price_supplement_supplement_1 {
    margin-top: -5px;
  }

  /* Card static Variant styles */
  .card-static_variant_resume {
    &__container {
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      margin: 0 -0.5rem;
      &_inside {
        margin-top: -3px;
      }
    }
    &__box {
      display: inline-block; 
      margin-right: 0.2rem; 
      border-radius: 2px; 
      border: 1px solid lightgray; 
      font-size: 12px;
      &_inside {
        display: inline-block;  
        padding: 2px;
        &:last-child {
          background-color: lightgray;
        }
      }
    }
  }

// Card footer
.card-static_footer {
  justify-content: flex-end;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /*height: 130px;*/
  padding: 20px 20px 20px 20px;
  background-color: var(--card-body-bg-color);
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.mybooking-product_variant_footer {
  height:    var(--card-footer-height);
}

  .card-static_icons {
    display: var(--card-list-key-show);
    justify-content: center;
    flex-wrap: nowrap;
    .icon {
      display: flex;
      flex-direction: column;
      width: 50%;
      margin-bottom: 20px;
      align-items: center;
      text-align: center;
      span {
        font-size: 13px;
        color: var(--card-key-characteristics-text-color);
        line-height: 1;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow: hidden;
      }
      img {
        height: 30px;
        width: 30px;
      }
    }
  }

  .mybooking-product_characteristics-key {
    font-weight: 700;
    max-width: 40px;
    height: 1rem;
  } /* This class is for plugin compatibility! */

  .mybooking-card_product-availability-msg {
    width: 100%;
    padding: .7rem .85rem;
    background-color: transparent;
    border-radius: 50px;
    border-color: transparent;
    font-size: 14px;
    line-height: 1.1rem;
    text-align: center;
    color: var(--error);
  }

  // Card button
  .card-static_btn {
    width: 100%;
    .btn-choose-product,
    .btn-choose-variant {
      width: 100%;
      transition: ease-in-out 0.15s;
      border-radius: 50px;
      background-color: var(--brand-primary);
      border-color: var(--brand-primary);
      font-size: 1.1rem;
      font-weight: bold;
      color: white !important;
      &:hover {
        background-color: var(--brand-primary-dark);
        border-color: var(--brand-primary-dark);
        color: var(--white) !important;
        cursor: pointer;
      }
    }
  }

  // Catalog card button
  .mybooking-card_info-button {
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    /* padding-top: 1rem; */
    position: absolute;
    top: 0;
    right: 0;
    background: #999;
    padding: 0.5rem;
    z-index: 1;
  }

  .mybooking-card_info-button:hover {
    text-decoration: none!important;
    background: var(--brand-primary);
  }


// RESPONSIVE
// ---------------------------------------------------

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
  .key-icon {
    margin: 0 0.5rem;
  }
  .card-static-wrapper {
    flex-basis: 100%;
    width: 100%;
    flex-grow: 0;
  }
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  .card-static-wrapper {
    flex-basis: 50%;
    width: 50%;
    flex-grow: 0;
  }
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  .card-static-wrapper {
    padding: 16px;
    flex-basis: 45%;
    width: 45%;
    flex-grow: 0;
  }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  .cards-static-container {
    padding: 30px 0;
  }
  .card-static-wrapper {
    flex-basis: 33%;
    width: 33%;
    flex-grow: 0;
  }
}
