/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.cart-upsell-products {
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
}

.cart-upsell-products .cart-upsell-title {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.cart-upsell-products .products-list.grid:not(.slick-carousel) {
  justify-content: center;
}

.cart-upsell-actions-wrapper {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.cart-upsell-actions-wrapper::before {
  content: "";
  display: block;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 19.92%);
  width: 100%;
  height: calc(100% + 20px);
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.cart-upsell-actions {
  border-radius: 9999px;
  font-family: 'Poppins', sans-serif;
  background-color: rgb(34, 66, 41);
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  margin: 8px 4px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100%;
  max-width: 375px;
  display: block;
  color: white;
  cursor: pointer;
}

.cart-upsell-actions:hover {
  background-color: rgb(17, 32, 20);
  color: white;
}

.cart-addon-data {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-left: 3px solid #e91e63;
  border-radius: 4px;
  font-size: 0.9em;
}

.cart-addon-data.ribbon {
  border-left-color: #e91e63;
}

.cart-addon-data.card {
  border-left-color: #2196f3;
}

.cart-addon-data small {
  display: block;
  margin-bottom: 4px;
}

.cart-addon-data small:last-child {
  margin-bottom: 0;
}

.wc-block-order-summary-item.has-addon-data {
  position: relative;
}

.wc-block-order-summary-item.has-addon-data
  .wc-block-order-summary-item__description {
  margin-bottom: 8px;
}

.wc-block-order-summary-item small[style*="color: #e91e63"] {
  display: block !important;
  margin-top: 4px;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  color: #e91e63 !important;
}

.wc-block-order-summary-item small[style*="color: #2196f3"] {
  display: block !important;
  margin-top: 4px;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  color: #2196f3 !important;
}

.addon-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0009;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.addon-modal-inner {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}

.addon-modal-title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 25px;
}

#ribbon_line1,
#ribbon_line2,
#card_message {
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 15px;
  padding: 14px 10px;
  font-size: 16px;
}

#ribbon_line1:focus,
#ribbon_line2:focus,
#card_message:focus {
  border: 1px solid #000;
}

.addon-modal-buttons {
  width: 100%;
  display: flex;
  justify-content: end;
  gap: 10px;
  align-items: center;
  margin-top: 25px;
}

.addon-modal-buttons .btn-addon-save {
  background: rgb(34, 66, 41);
  color: white;
  border: none;
  width: 25%;
  padding: 6px;
  border-radius: 10px;
}

.addon-modal-buttons .btn-addon-save:hover {
  background-color: rgb(17, 32, 20);
  cursor: pointer;
}

.addon-modal-buttons .btn-addon-cancel {
  background-color: rgba(49, 50, 50, 0.75);
  color: white;
  border: none;
  width: 25%;
  padding: 6px;
  border-radius: 10px;
}

.addon-modal-buttons .btn-addon-cancel:hover {
  background-color: rgb(34, 66, 41);
  cursor: pointer;
}

.cart-upsell-price .price{
  font-size: 18px;
  font-weight: 600;
}

.product-thumb-upsell-wrapper .products-thumb{
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  overflow: hidden;
}

.product-wapper.product-thumb-upsell-wrapper {
  border: 1px solid transparent;
}

.product-wapper.product-thumb-upsell-wrapper:hover {
  border: 1px solid rgb(34, 66, 41) !important;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

.product-thumb-upsell-wrapper .products-thumb,
.product-thumb-upsell-wrapper .products-thumb img {
  width: 100%;
}

.products-content.product-content-upsell {
  text-align: left !important;
  padding: 16px;
}

.product-content-upsell .product-title {
  font-size: 16px !important;
  line-height: 1.35;
  font-weight: 700 !important;
}

.product-button-upsell > div {
  background: rgb(34, 66, 41);
  border-radius: 50%;
}
.product-button-upsell .added_to_cart.wc-forward,
.product-button-upsell .add_to_cart_button{
  pointer-events: none;
}
.product-wapper .products-thumb-upsell .product-button {
  z-index: 9;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.product-wapper .products-thumb-upsell .product-button > * {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 1;
}

.product-wapper .products-thumb-upsell .product-button > :hover:after,
.product-wapper .products-thumb-upsell .product-button > :hover:before {
  opacity: 1;
  visibility: visible;
}

.product-wapper
  .products-thumb-upsell
  .product-button
  .add_to_cart_button:before {
  font-weight: 900;
  content: "\2b";
  font-family: "Font Awesome 6 Pro";
  font-size: 32px;
  color: #fff;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  margin: 0;
  display: inline-block;
}

.product-wapper .products-thumb-upsell .product-button .add_to_cart_button,
.product-wapper .products-thumb-upsell .product-button .added_to_cart {
  color: #fff;
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 0;
  font-size: 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.product-wapper
  .products-thumb-upsell
  .product-button
  .add_to_cart_button.added,
.product-wapper .products-thumb-upsell .product-button .added_to_cart.added,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_external.added,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_grouped.added,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_variable.added,
.product-wapper .products-thumb-upsell .product-button .read_more.added {
  display: none;
}
.product-wapper
  .products-thumb-upsell
  .product-button
  .add_to_cart_button.loading,
.product-wapper .products-thumb-upsell .product-button .added_to_cart.loading,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_external.loading,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_grouped.loading,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_variable.loading,
.product-wapper .products-thumb-upsell .product-button .read_more.loading {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.product-wapper
  .products-thumb-upsell
  .product-button
  .add_to_cart_button.loading:before,
.product-wapper
  .products-thumb-upsell
  .product-button
  .added_to_cart.loading:before,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_external.loading:before,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_grouped.loading:before,
.product-wapper
  .products-thumb-upsell
  .product-button
  .product_type_variable.loading:before,
.product-wapper
  .products-thumb-upsell
  .product-button
  .read_more.loading:before {
  position: relative;
  display: inline-block;
  content: "";
  border: 2px solid rgb(255, 255, 255);
  border-top-color: #9e9d9d;
  width: 18px;
  height: 18px;
  background: none;
  -webkit-animation: 2s linear 0s normal none infinite running m;
  animation: 2s linear 0s normal none infinite running m;
  text-indent: 0;
  top: 9px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.cart-upsell-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.woocommerce .product-button-upsell .wc-forward:before,
.woocommerce .product-button-upsell .wc-forward a:before {
  font-weight: 900;
  font-size: 24px;
  /* content: "\f1f8";
  font-family: "FontAwesome"; */
  content: "\e92b";
  font-family: feather;
  margin: 0;
  color: rgb(255, 255, 255);
}