/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Main container */
.bump-offer-container {
  box-shadow: 0 0.4em 1.2em #c5c6c7 !important;
}

.bump-offer-title {
  background-color: var(--btn-accented-bgcolor) !important;
  color: #fff !important;
  padding: 5px 20px !important;
  border-radius: 35px;
}

/* Check box container */
.wps_accept_offer_cla {
  display: flex;
  align-items: center;
}

/* Product image */
.wps_upsell_offer_img {
  width: 100% !important;
  height: auto !important;
  max-width: 120px !important;
  max-height: initial !important;
  box-shadow: initial !important;
}

/* Product name */
.wps_bump_name.bump-offer-product-name {
  font-size: 1.125em !important;
}

/* Del regular price line */
.bump-offer-product-price.wps-ubo__temp-prod-price-new del {
  color: #868e96;
}

/* Check box checkmark */
.wps_upsell_bump_checkbox_container {
  margin-right: 0.4em !important;
}

.checkmark {
  border: 0.05em solid var(--btn-accented-bgcolor);
  border-radius: 0.4em !important;
}
.checkmark::after {
  border-color: var(--btn-accented-bgcolor) !important;
}

@media (max-width: 650px) {
  .bump-offer-product {
    align-items: center !important;
  }
  .bump-offer-product-name,
  .bump-offer-product-description,
  .bump-offer-product-price {
    text-align: center !important;
  }

  .wps_accept_offer_cla {
    margin: 0 auto;
  }

  .wps_bump_name.bump-offer-product-name {
    font-size: 1em !important;
  }

  .wps_accetp_offer_title {
    font-size: 16px !important;
  }
}

.page-id-12 .wps_upsell_offer_main_wrapper{
    display: none !important;
}

/* Bump Checkbox */
.wps_upsell_offer_main_wrapper {
  position: relative !important;
}

/* Styling for the ::after element when checkbox is checked */
.wps_upsell_bump_checkbox_container .checkmark-checked::after {
  display: block;
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #333; /* Adjust color as needed */
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  border-color: var(--btn-accented-bgcolor) !important;
}

.upsell-loader {
  display: none;
  position: absolute;
  z-index: 9999;
  top: 45%;
  left: 45%;
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  color: #000;
}
.upsell-loader:before,
.upsell-loader:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.upsell-loader:after {
  color: rgb(232, 120, 143);
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin {
  0%,
  100% {
    box-shadow: 0.2em 0px 0 0px currentcolor;
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 0.2em 0 0px currentcolor;
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -0.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0px -0.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 currentcolor;
  }
}


/* Center coupon box*/
.checkout_coupon.woocommerce-form-coupon {
    margin: 0 auto 25px auto;
}