/**
 * Tiles Page - Blue Theme Overrides
 * Replaces green (#8bc63f) with light blue throughout the page
 */

/* Light Blue color values - lighter and more vibrant */
:root {
    --tiles-primary: #1e75bc;
    --tiles-primary-dark: #1e75bc;
    --tiles-primary-light: #1e75bc;
    --tiles-primary-rgb: 30, 117, 188;
}

/* Override main CSS variables for tiles page */
body[data-product-page="tiles"] {
    --primary: #1e75bc;
    --primary-dark: #1e75bc;
    --primary-light: #1e75bc;
    --accent: #1e75bc;
    --accent-dark: #1e75bc;
}

/* Hero Section - Blue Theme */
body[data-product-page="tiles"] .products-hero {
    background: linear-gradient(135deg, 
        var(--background) 0%, 
        rgba(30, 117, 188, 0.05) 50%, 
        var(--background) 100%
    );
}

body[data-product-page="tiles"] .products-hero .hero-bg {
    background: linear-gradient(135deg, 
        var(--background) 0%, 
        rgba(30, 117, 188, 0.1) 100%
    );
}

body[data-product-page="tiles"] .hero-badge {
    background: rgba(30, 117, 188, 0.1);
    border: 1px solid rgba(30, 117, 188, 0.2);
}

body[data-product-page="tiles"] .hero-badge svg {
    color: #1e75bc;
}

body[data-product-page="tiles"] .gradient-text {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons - Blue Theme */
body[data-product-page="tiles"] .btn-primary {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
}

body[data-product-page="tiles"] .btn-primary:hover {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
    box-shadow: 0 0 0 3px rgba(30, 117, 188, 0.1);
}

/* Section Badges - Blue Theme */
body[data-product-page="tiles"] .section-badge {
    background: rgba(30, 117, 188, 0.1);
    color: #1e75bc;
    border: 1px solid rgba(30, 117, 188, 0.2);
}

/* Category Cards - Blue Theme */
body[data-product-page="tiles"] .category-card {
    border: 1px solid rgba(30, 117, 188, 0.2);
}

body[data-product-page="tiles"] .category-card:hover {
    box-shadow: 0 0 0 3px rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .category-card.active {
    background: linear-gradient(135deg, rgba(30, 117, 188, 0.05), rgba(30, 117, 188, 0.1));
    border: 1px solid rgba(30, 117, 188, 0.2);
}

body[data-product-page="tiles"] .category-icon {
    background: rgba(30, 117, 188, 0.1);
    color: #1e75bc;
}

body[data-product-page="tiles"] .category-card:hover .category-icon {
    background: #1e75bc;
}

/* Category Filters - Blue Theme */
body[data-product-page="tiles"] .category-filter {
    border: 1px solid rgba(30, 117, 188, 0.3);
}

body[data-product-page="tiles"] .category-filter:hover {
    background: rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .category-filter.active {
    background: rgba(30, 117, 188, 0.1);
    border-color: #1e75bc;
    color: #1e75bc;
}

/* Product Cards - Blue Theme */
body[data-product-page="tiles"] .product-card:hover {
    border-bottom: 1px solid rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .product-badge {
    background: rgba(30, 117, 188, 0.1);
    color: #1e75bc;
}

body[data-product-page="tiles"] .product-code {
    color: #1e75bc;
}

body[data-product-page="tiles"] .product-actions .btn-icon:hover {
    background: rgba(30, 117, 188, 0.1);
}

/* Modal - Blue Theme */
body[data-product-page="tiles"] .modal-overlay {
    background: rgba(30, 117, 188, 0.05);
}

body[data-product-page="tiles"] .product-category {
    background: rgba(30, 117, 188, 0.1);
    color: #1e75bc;
}

body[data-product-page="tiles"] .product-tags span {
    background: rgba(30, 117, 188, 0.05);
    border: 1px solid rgba(30, 117, 188, 0.2);
}

body[data-product-page="tiles"] .product-tags span:hover {
    background: rgba(30, 117, 188, 0.1);
}

/* CTA Section - Blue Theme */
body[data-product-page="tiles"] .order-cta {
    border-top: 1px solid rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .cta-primary {
    background: #1e75bc;
}

body[data-product-page="tiles"] .cta-primary:hover {
    background: #1e75bc;
}

body[data-product-page="tiles"] .cta-secondary {
    border: 1px solid rgba(30, 117, 188, 0.2);
}

body[data-product-page="tiles"] .cta-secondary:hover {
    background: rgba(30, 117, 188, 0.1);
    border-color: #1e75bc;
}

body[data-product-page="tiles"] .feature-item svg {
    color: #1e75bc;
}


body[data-product-page="tiles"] .search-box:focus-within {
    border-color: #1e75bc;
    box-shadow: 0 0 0 3px rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .search-icon {
    color: #1e75bc;
}

/* Scrollbar - Blue Theme */
body[data-product-page="tiles"]::-webkit-scrollbar-thumb,
html:has(body[data-product-page="tiles"]) ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1e75bc, #1e75bc) !important;
}

body[data-product-page="tiles"]::-webkit-scrollbar-thumb:hover,
html:has(body[data-product-page="tiles"]) ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%) !important;
    box-shadow: 0 2px 8px rgba(30, 117, 188, 0.3) !important;
}

body[data-product-page="tiles"]::-webkit-scrollbar-track,
html:has(body[data-product-page="tiles"]) ::-webkit-scrollbar-track {
    background: rgba(30, 117, 188, 0.05) !important;
}

body[data-product-page="tiles"]::-webkit-scrollbar-corner,
html:has(body[data-product-page="tiles"]) ::-webkit-scrollbar-corner {
    background: rgba(30, 117, 188, 0.05) !important;
}

html:has(body[data-product-page="tiles"]),
html:has(body[data-product-page="tiles"]) * {
    scrollbar-width: thin !important;
    scrollbar-color: #1e75bc rgba(30, 117, 188, 0.05) !important;
}

/* WhatsApp Widget - Blue Theme */
body[data-product-page="tiles"] .whatsapp-button {
    background: #1e75bc !important;
    box-shadow: 0 4px 16px rgba(30, 117, 188, 0.3) !important;
}

body[data-product-page="tiles"] .whatsapp-button:hover {
    box-shadow: 0 6px 20px rgba(30, 117, 188, 0.4) !important;
}

@keyframes whatsapp-pulse-blue {
    0% {
        box-shadow: 0 4px 16px rgba(30, 117, 188, 0.3), 0 0 0 0 rgba(30, 117, 188, 0.7);
    }
    70% {
        box-shadow: 0 4px 16px rgba(30, 117, 188, 0.3), 0 0 0 10px rgba(30, 117, 188, 0);
    }
    100% {
        box-shadow: 0 4px 16px rgba(30, 117, 188, 0.3), 0 0 0 0 rgba(30, 117, 188, 0);
    }
}

body[data-product-page="tiles"] .whatsapp-button {
    animation: whatsapp-pulse-blue 2s infinite !important;
}

body[data-product-page="tiles"] .whatsapp-header {
    background: #1e75bc !important;
}

body[data-product-page="tiles"] .whatsapp-chat-btn {
    background: #1e75bc !important;
}

body[data-product-page="tiles"] .whatsapp-chat-btn:hover {
    background: #1e75bc !important;
}

/* Load More Button - Blue Theme */
body[data-product-page="tiles"] #loadMoreProducts {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
}

body[data-product-page="tiles"] #loadMoreProducts:hover {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
}

/* Orbs Animation - Blue Theme */
body[data-product-page="tiles"] .orb-1 {
    background: radial-gradient(circle, rgba(30, 117, 188, 0.1) 0%, transparent 70%);
}

body[data-product-page="tiles"] .orb-2 {
    background: radial-gradient(circle, rgba(30, 117, 188, 0.1) 0%, transparent 70%);
}

body[data-product-page="tiles"] .orb-3 {
    background: radial-gradient(circle, rgba(30, 117, 188, 0.1) 0%, transparent 70%);
}

/* Grid Overlay remains the same - no color override needed */

/* Hover Effects - Blue Theme */
body[data-product-page="tiles"] .product-card:hover .product-image::after {
    background: linear-gradient(180deg, transparent, rgba(30, 117, 188, 0.1));
}

body[data-product-page="tiles"] .category-card:hover .category-count {
    color: #1e75bc;
}

/* Active States - Blue Theme */
body[data-product-page="tiles"] .modal-close:hover {
    background: rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .gallery-thumbs img.active {
    border-color: #1e75bc;
}

body[data-product-page="tiles"] .gallery-thumbs img:hover {
    border-color: #1e75bc;
}

/* Spec Items - Blue Theme */
body[data-product-page="tiles"] .spec-label {
    color: #1e75bc;
}

/* Product Info Dividers - Blue Theme */
body[data-product-page="tiles"] .product-features {
    border-bottom: 1px solid rgba(30, 117, 188, 0.1);
}

body[data-product-page="tiles"] .product-specifications {
    border-bottom: 1px solid rgba(30, 117, 188, 0.1);
}

/* Hidden Categories Dropdown - Blue Theme */
body[data-product-page="tiles"] .hidden-categories {
    border: 1px solid rgba(30, 117, 188, 0.2);
}

body[data-product-page="tiles"] .more-categories.active {
    background: rgba(30, 117, 188, 0.1);
    color: #1e75bc;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body[data-product-page="tiles"] .btn-primary {
        background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
    }
}

/* Loading States - Blue Theme */
body[data-product-page="tiles"] .loading-spinner {
    border-color: rgba(30, 117, 188, 0.2);
    border-top-color: #1e75bc;
}

/* Additional Blue Theme Enhancements */
body[data-product-page="tiles"] .product-card .btn-modern:hover {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
}

body[data-product-page="tiles"] .hero-actions .btn-ghost:hover {
    background: rgba(30, 117, 188, 0.1);
    border-color: #1e75bc;
}

/* Play Icon - Blue Theme */
body[data-product-page="tiles"] .play-icon {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
}

/* Navigation Hover - Blue Theme */
body[data-product-page="tiles"] .nav-link::before {
    background: linear-gradient(135deg, #1e75bc 0%, #1e75bc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Product Search Focus - Blue Theme */
body[data-product-page="tiles"] #productSearch:focus {
    border-color: #1e75bc !important;
    box-shadow: 0 0 0 3px rgba(30, 117, 188, 0.1);
}

/* Product Card Shadow - Blue Theme */
body[data-product-page="tiles"] .product-card:nth-child(even):hover {
    box-shadow: 0 25px 50px rgba(30, 117, 188, 0.3);
}

/* Category Title and Button - Blue Theme (override inline styles) */
body[data-product-page="tiles"] .category-title {
    color: #1e75bc !important;
}

body[data-product-page="tiles"] .view-category-btn {
    background-color: #1e75bc !important;
    color: white !important;
}

body[data-product-page="tiles"] .view-category-btn:hover {
    background-color: #1e75bc !important;
}

/* Product Button Hover - Blue Theme */
body[data-product-page="tiles"] .product-btn:hover {
    box-shadow: rgba(30, 117, 188, 0.5) 0px 6px 20px;
}

/* CTA Primary Button Hover - Blue Theme */
body[data-product-page="tiles"] .cta-primary:hover {
    box-shadow: rgba(30, 117, 188, 0.3) 0px 8px 24px;
}

.footer {
    background: #1e75bcd6 !important;
}
.footer-social a{
    color: #33a3ffd6 !important;
}