/* General Styles */
.product {
    overflow: hidden; /* Ensure the image stays inside the container */
    position: relative;
}

.product img {
    transition: transform 0.3s ease;
    transform-origin: center;
    position: relative;
    z-index: 0;
}

.product img:hover {
    transform: scale(1.1); /* Slight zoom effect */
}

.card-body {
    position: relative;
    z-index: 1; /* Ensure it's above the image */
    background: rgb(255, 255, 255); /* Optional: Better readability */
    padding: 10px;
    text-align: center; /* Center-align content */
}

/* Product Card Styles */
.product-card {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    transition: all 0.3s ease-in-out;
    text-align: center; /* Center-align content */
    position: relative;
    overflow: hidden;
    word-break: break-word; /* Allow text to break and wrap within the container */
}

.product-card img {
    display: block;
    max-height: 400px;
    width: auto;
    max-width: 100%;
    margin: 0 auto; /* Center-align image */
    transition: transform 0.3s ease-in-out;
}

.product-card img:hover {
    transform: scale(1.1);
}

.product-card .card-body {
    padding: 10px;
    text-align: center; /* Ensure text inside card body is centered */
}

.product-card .text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto; /* Center-align the text container */
    max-width: 100%;
    text-align: center; /* Ensure the text itself is centered */
}

.product-card .text-muted {
    margin: 0 auto; /* Center-align price text */
    text-align: center;
}

/* Overlay Buttons */
.overlay-buttons {
    opacity: 1;
    visibility: visible;
    /* transition: opacity 0.3s ease, visibility 0.3s ease; */
}

/* .product-card:hover .overlay-buttons {
    opacity: 1;
    visibility: visible;
} */

.cart-btn,
.buy-now-btn {
    position: absolute;
    bottom: 20%;
    background-color: #ffffffc9;
    color: grey;
    border: none;
    border-radius: 50%;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cart-btn {
    left: 35%;
}

.buy-now-btn {
    right: 35%;
}

.cart-btn:hover {
    background-color: #fff;
    color: #073A3E;
}

.buy-now-btn:hover {
    background-color: #fff;
    color: #007bff;
}

/* Wishlist and Delete Buttons */
.like-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: white;
    color: grey;
    border: none;
    border-radius: 50%;
    padding: 5px 10px;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .like-btn {
        right: 7px;
        top: 7px;
    }
    
}

.like-btn:hover {
    color: red;
    background-color: #ffffff;
}

.delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffffffaf;
    color: grey;
    border: none;
    border-radius: 50%;
    padding: 5px 10px;
    cursor: pointer;
}

.delete-btn:hover {
    color: red;
    background-color: #ffffff;
}

/* Modal Styles */
.close-modal-btn {
    position: absolute;
    top: 10px;
    right: 0;
    padding: 5px 10px;
    cursor: pointer;
}

.product-modal {
    position: relative;
}

/* Button Size */
.btn-size {
    min-width: 40px;
    min-height: 40PX;
    font-size: 11px;
    border: 1px solid #073A3E;
    border-radius:50%;
    background-color: rgb(245, 245, 245);
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    
    text-align: center;
}

.btn-size.selected {
    background-color: #073A3E;
    color: white;
    border-color: #073A3E;
}

.btn-size:hover {
    background-color: #073A3E;
    color: white;
    border-color: #073A3E;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .cart-btn {
        left: 25%;
    }

    .buy-now-btn {
        right: 25%;
    }
}