/*
 * Custom Product Details Page - Wishlist Button Styling
 * Makes the wishlist button match the Add to Cart button style
 */

/* Override ALL wishlist button styles on product details page to match Add to Cart button */
/* Supports both YITH and TI Wishlist plugins */
.actions .tinv-wishlist .tinvwl_add_to_wishlist_button,
.actions .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt,
.actions .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt,
.actions .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus,
.actions .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart,
.actions .tinv-wishlist a.tinvwl_add_to_wishlist_button,
.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button,
.actions .yith-wcwl-add-to-wishlist a.yith-wcwl-add-to-wishlist-button,
.actions .yith-wcwl-add-to-wishlist button.yith-wcwl-add-to-wishlist-button,
.actions a.yith-wcwl-add-to-wishlist-button,
.actions button.yith-wcwl-add-to-wishlist-button,
.actions .yith-wcwl-add-button-block .yith-wcwl-add-to-wishlist-button,
.actions .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button,
.product-wishlist-beside-cart .yith-wcwl-add-to-wishlist-button,
.product-wishlist-beside-cart a.yith-wcwl-add-to-wishlist-button,
form.cart ~ .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button {
  /* Match vs-btn styling - use !important to override plugin styles */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  text-transform: uppercase !important;
  text-align: center !important;
  background-color: var(--vs-border-color2) !important;
  color: var(--white-color) !important;
  font-family: var(--body-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 19px 45px !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  letter-spacing: 0.1px !important;
  width: auto !important;
  height: 65px !important;
  min-height: 65px !important;
  max-height: 65px !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  border-width: 0 !important;
  outline: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
  transition: all 0.3s ease-in-out !important;
}

/* Add before/after pseudo-elements for hover effects */
.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button::after,
.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button::before,
.actions a.yith-wcwl-add-to-wishlist-button::after,
.actions a.yith-wcwl-add-to-wishlist-button::before,
.actions button.yith-wcwl-add-to-wishlist-button::after,
.actions button.yith-wcwl-add-to-wishlist-button::before {
  width: 101% !important;
  height: 100% !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: var(--theme-color) !important;
  transition: all ease 0.5s !important;
  z-index: -1 !important;
}

.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button:before,
.actions a.yith-wcwl-add-to-wishlist-button:before,
.actions button.yith-wcwl-add-to-wishlist-button:before {
  transform: rotateX(90deg) !important;
}

.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button:after,
.actions a.yith-wcwl-add-to-wishlist-button:after,
.actions button.yith-wcwl-add-to-wishlist-button:after {
  transform: rotateY(90deg) !important;
}

/* Hover state matching vs-btn */
.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button:hover,
.actions a.yith-wcwl-add-to-wishlist-button:hover,
.actions button.yith-wcwl-add-to-wishlist-button:hover {
  color: var(--white-color) !important;
  background-color: var(--vs-border-color2) !important;
}

.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button:hover:before,
.actions a.yith-wcwl-add-to-wishlist-button:hover:before,
.actions button.yith-wcwl-add-to-wishlist-button:hover:before {
  transform: rotateX(0) !important;
}

.actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button:hover:after,
.actions a.yith-wcwl-add-to-wishlist-button:hover:after,
.actions button.yith-wcwl-add-to-wishlist-button:hover:after {
  transform: rotateY(0) !important;
}

/* Force exact height calculation for both buttons */
.actions .vs-btn.single_add_to_cart_button,
.actions button[name="add-to-cart"].vs-btn,
.actions .yith-wcwl-add-to-wishlist-button,
.actions .tinvwl_add_to_wishlist_button {
  box-sizing: border-box !important;
  height: 65px !important;
  min-height: 65px !important;
  max-height: 65px !important;
  line-height: 1 !important;
}

/* Ensure the wishlist wrapper aligns properly with the button */
.actions .yith-wcwl-add-to-wishlist,
.actions .tinv-wishlist,
.actions .tinv-wraper,
.actions .product-wishlist-beside-cart,
.actions .product-share-beside-cart,
form.cart ~ .yith-wcwl-add-to-wishlist {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  /* margin: 0 30px !important; */
  padding: 0 !important;
  align-self: center !important;
}

/* Ensure actions container properly aligns all children including share button */
.actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Ensure quantity selector aligns with buttons */
.actions .product-quantity,
.actions .quantity {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  max-width: 120px !important;
}

/* Make Add to Cart button more compact */
.actions .vs-btn.single_add_to_cart_button,
.actions button[name="add-to-cart"].vs-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Responsive Design - Mobile View
 * Row 1: Quantity + Add to Cart
 * Row 2: Wishlist icon + Share icon
 */
@media screen and (max-width: 767px) {
  /* Allow wrapping so row 2 can form */
  .actions {
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Row 1: Quantity stays compact */
  .actions .product-quantity,
  .actions .quantity {
    flex: 0 0 auto !important;
    max-width: 120px !important;
    margin-bottom: 0 !important;
  }

  /* Row 1: Add to Cart fills the rest of the first row */
  .actions .vs-btn.single_add_to_cart_button,
  .actions button[name="add-to-cart"].vs-btn {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Row 2: Wishlist wrapper — icon size */
  .actions .product-wishlist-beside-cart,
  .actions .yith-wcwl-add-to-wishlist,
  .actions .tinv-wishlist {
    flex: 0 0 65px !important;
    width: 65px !important;
    max-width: 65px !important;
    overflow: hidden !important;
  }

  /* Row 2: Wishlist button — icon-only padding */
  .actions .tinv-wishlist .tinvwl_add_to_wishlist_button,
  .actions .tinv-wishlist a.tinvwl_add_to_wishlist_button,
  .actions .product-wishlist-beside-cart .tinvwl_add_to_wishlist_button,
  .actions .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button,
  .actions .product-wishlist-beside-cart .yith-wcwl-add-to-wishlist-button,
  .actions .yith-wcwl-add-to-wishlist-button,
  .actions button.yith-wcwl-add-to-wishlist-button {
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Row 2: Share wrapper — icon size */
  .actions .product-share-beside-cart {
    flex: 0 0 65px !important;
    width: 65px !important;
    max-width: 65px !important;
    display: flex !important;
  }

  .product-share-button-styled {
    display: inline-flex !important;
    width: 65px !important;
    min-width: 65px !important;
  }
}