/* Additional Product Pages CSS */
/* This file provides styling for Bestseller, Latest, Most Viewed, and All Products pages */

/* Page specific styles */
.additional-pages-header {
    margin-bottom: 20px;
}

.additional-pages-header h1 {
    color: #333;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Product grid styling */
.product-layout.additional-page {
    margin-bottom: 20px;
}

.product-layout.additional-page .product-thumb {
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    padding: 15px;
    transition: all 0.3s ease;
}

.product-layout.additional-page .product-thumb:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Cards hover effect - matching product.twig */
.cards {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd!important;
}

.overlay {
    position: relative;
    bottom: 120px; /* Initial position below the card */
    left: 0;
    width: 100%;
    height: 80px; /* Height of the overlay */
    background-color: #fff;
    opacity: 0;
    transition: top 0.3s ease, opacity 0.3s ease; /* Transition for bottom and opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: #000;
}

.cards:hover .overlay {
    bottom: 10px; /* Slide up to show overlay */
    opacity: 0.7;
}

.overlay a:hover i,
.overlay a:focus i {
    background-color: #0083c9!important; 
    border-radius: 50%; 
    padding: 20px 20px!important;
    z-index: 100000;
    line-height: 1;
    color: #fff !important;
}

.overlay i {
    height: 34px;
    width: 34px; /* Ensure the width and height match to create a circular shape */
    font-size: 22px;
    color: #000;
    display: flex;
    padding: 20px 20px!important;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    cursor: pointer;
}

/* Overlay button spacing */
.overlay a {
    margin: 0 10px;
    text-decoration: none;
}

.overlay a:first-child {
    margin-left: 0;
}

.overlay a:last-child {
    margin-right: 0;
}

.product-thumb .image {
    text-align: center;
    height: 360px!important;
}

/* Bestseller specific styles */
.bestseller-page .product-thumb {
    border-left: 4px solid #ff6b6b;
}

/* Latest products specific styles */
.latest-page .product-thumb {
    border-left: 4px solid #4ecdc4;
}

/* Most viewed specific styles */
.mostviewed-page .product-thumb {
    border-left: 4px solid #45b7d1;
}

/* All products specific styles */
.all-products-page .product-thumb {
    border-left: 4px solid #96ceb4;
}

/* Wishlist and Compare button styling to match product.twig */
.product-thumb .button-group .like {
    color: #ff6b6b;
    transition: all 0.3s ease;
}

.product-thumb .button-group .like:hover {
    color: #ff4757;
    transform: scale(1.1);
}

.product-thumb .button-group .composer {
    color: #45b7d1;
    transition: all 0.3s ease;
}

.product-thumb .button-group .composer:hover {
    color: #2c88a0;
    transform: scale(1.1);
}

/* Button group styling */
.product-thumb .button-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.product-thumb .button-group button,
.product-thumb .button-group a {
    border: none;
    background: transparent;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
}

.product-thumb .button-group button:hover,
.product-thumb .button-group a:hover {
    text-decoration: none;
}

/* Shopping cart button styling */
.product-thumb .button-group button[onclick*="cart.add"] {
    background-color: #000;
    color: #fff;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 15px;
    transition: all 0.3s ease;
}

.product-thumb .button-group button[onclick*="cart.add"]:hover {
    background-color: #333;
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .additional-pages-header h1 {
        font-size: 20px;
    }
    
    .product-layout.additional-page .product-thumb {
        padding: 10px;
    }
    
    .product-thumb .button-group {
        flex-direction: column;
        gap: 5px;
    }
    
    .product-thumb .button-group button,
    .product-thumb .button-group a {
        width: 100%;
        text-align: center;
    }
    
    .product-thumb .image {
        height: 280px!important;
    }
    
    .overlay {
        height: 60px;
        bottom: 100px;
    }
    
    .overlay i {
        height: 28px;
        width: 28px;
        font-size: 18px;
        padding: 15px 15px!important;
    }

    .hs-chat-root .hs-right-fb.hs-bottom-pstn {
        bottom: 150px !important;
    }

}

/* Loading states */
.additional-pages-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.additional-pages-loading .fa-spinner {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Empty state */
.additional-pages-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.additional-pages-empty .fa-info-circle {
    font-size: 48px;
    margin-bottom: 20px;
    color: #ddd;
}

/* Sort and filter styling */
.additional-pages-controls {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.additional-pages-controls .form-group {
    margin-bottom: 10px;
}

/* Pagination styling */
.additional-pages-pagination {
    text-align: center;
    margin-top: 30px;
}

.additional-pages-pagination .pagination {
    display: inline-block;
}

/* Breadcrumb styling for additional pages */
.additional-pages-breadcrumb {
    background: #f8f9fa;
    padding: 10px 0;
    margin-bottom: 20px;
    border-radius: 3px;
}

.additional-pages-breadcrumb .breadcrumb {
    background: transparent;
    margin-bottom: 0;
    padding: 0;
}

/* Product count and results info */
.additional-pages-results {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Compare button styling */
.additional-pages-compare {
    margin-bottom: 15px;
}

.additional-pages-compare .btn-link {
    color: #007bff;
    text-decoration: none;
}

.additional-pages-compare .btn-link:hover {
    color: #0056b3;
    text-decoration: underline;
}