/* Styles for Product Detail Page */

body {
    padding-top: 56px;
}

/* Image styles */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Product name and description */
h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    margin-top: 20px;
}

p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Price styling */
.price {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Button styles */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.container.detail {
    margin-top: 15px; /* Adjust this value based on the height of your navigation panel */
}


#backButton img {
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

#backButton:hover img {
    opacity: 0.7;
    transform: scale(1.05);
}

@keyframes addedToCart {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.product-added {
    animation: addedToCart 0.5s forwards;
}

/* Styles for Back to Catalog Link */
.back-to-catalog-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 1.2rem;
    color: #007bff;
    transition: color 0.3s ease;
    text-decoration: none;
    margin-bottom: 20px;
}

.back-to-catalog-link:hover {
    color: #0056b3;
    text-decoration: none;
}

.back-arrow {
    font-size: 1.5rem;
    margin-right: 5px;
}

.to-catalog-text:hover {
    text-decoration: underline;
}