/*
==========================================================================
 Style cho trang Yêu thích (/wishlist)
==========================================================================
*/

#my-wishlist-page {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 2em 15px; /* Thêm khoảng cách lề trái/phải */
}

#my-wishlist-page .woocommerce-products-header {
    margin-bottom: 2em;
}

/* Tiêu đề trên trang /wishlist */
#my-wishlist-page .woocommerce-products-header__title {
    font-size: 20px; /* Giảm kích thước font-size */
}

#my-wishlist-page .wishlist-items-container .wishlist-item {
    padding: 20px 0;
}

/* Hiệu ứng khi xóa item trên trang wishlist */
.wishlist-item.removing {
    transition: opacity 0.3s ease-out;
}

/*
==========================================================================
 Tinh chỉnh bố cục trang Yêu thích (Overrides)
==========================================================================
*/

/* Áp dụng riêng cho các sản phẩm trên trang /wishlist */
#my-wishlist-page .wishlist-item {
    /* Căn các thành phần (ảnh, chi tiết, giá) ở trên cùng */
    align-items: flex-start; 
}

#my-wishlist-page .wishlist-item__details {
    /* Bỏ thiết lập mặc định (flex-grow: 1) để nó không tự động giãn ra */
    flex-grow: 0;
    
    /* Thiết lập chiều rộng chiếm khoảng 45% container */
    flex-basis: 45%; 
    
    /* Đặt giới hạn chiều rộng tối đa để không quá dài trên màn hình lớn */
    max-width: 450px; 
}

#my-wishlist-page .wishlist-item__price {
    /* Tự động đẩy phần giá về cuối dòng */
    margin-left: auto;
    
    /* Căn phải cho giá tiền */
    text-align: right;

    /* Thêm khoảng cách bên trái để không dính vào phần mô tả */
    padding-left: 20px;
}

/*
==========================================================================
 Định dạng nút "Thêm vào giỏ hàng" trên trang Yêu thích
==========================================================================
*/
#my-wishlist-page .wishlist-item__actions {
    /* Xếp các nút theo chiều dọc và căn trái */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* Khoảng cách giữa 2 nút */
    margin-top: 10px;
}

/* Định dạng chung cho nút của WooCommerce */
#my-wishlist-page .wishlist-item__actions .button {
    /* Reset lề mặc định */
    margin: 0 !important;

    /* Tùy chỉnh giao diện theo yêu cầu */
    background-color: #d90429; /* Màu đỏ */
    color: #fff !important;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.5;
    border: none;
}

#my-wishlist-page .wishlist-item__actions .button:hover {
    background-color: #b80021; /* Màu đỏ sẫm hơn */
    color: #fff !important;
}

/* Trạng thái loading và đã thêm của nút AJAX */
#my-wishlist-page .wishlist-item__actions .button.loading {
    opacity: 0.7;
    background-color: #d90429;
}

#my-wishlist-page .wishlist-item__actions .added_to_cart {
   display: none !important; /* Luôn ẩn link "Xem giỏ hàng" sau khi thêm */
}