/* ═══════════════════════════════════════════════════════════════
   Motor-Oil™ — Theme Classes & Animations
═══════════════════════════════════════════════════════════════ */

/* Utilities from original inline styles */
.technical-grid { 
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px); 
    background-size: 32px 32px; 
}
.glass-panel { 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(8px); 
}

/* Scroll reveal animations */
.reveal { 
    opacity: 0; 
    transform: translateY(24px); 
    transition: opacity 0.7s ease, transform 0.7s ease; 
}
.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Product Catalog */
.product-card { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    border: 1px solid #e5e5e5; 
}
.product-card:hover { 
    border-color: #ED2728; 
    transform: translateY(-3px); 
    box-shadow: 0 12px 40px rgba(237,39,40,0.10); 
}
.product-card.hidden-card { 
    display: none; 
}

/* Modal styles for catalogue */
#pdf-modal { 
    display: none; 
    position: fixed; 
    inset: 0; 
    z-index: 1000; 
    background: rgba(25,28,29,0.85); 
    backdrop-filter: blur(4px); 
    align-items: center; 
    justify-content: center; 
}
#pdf-modal.open { 
    display: flex; 
}
#pdf-modal-inner { 
    background: white; 
    width: 90vw; 
    max-width: 1100px; 
    height: 85vh; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 0 32px 80px rgba(0,0,0,0.4); 
    animation: slideUp 0.3s ease; 
}
@keyframes slideUp { 
    from { opacity:0; transform:translateY(30px); } 
    to { opacity:1; transform:translateY(0); } 
}
.filter-btn.active { 
    background: #ED2728; 
    color: white; 
}
.filter-btn {
    transition: all 0.2s;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile CTA & Navigation Fix (< 768px)
═══════════════════════════════════════════════════════════════ */

/* Force B2B button visibility on all screen sizes */
.motoroil-b2b-cta {
    display: flex !important;
}

/* Hamburger button — visible only on mobile */
#mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 767px) {
    /* Show hamburger */
    #mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* B2B button smaller on mobile */
    .motoroil-b2b-cta {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.6rem !important;
    }

    /* Mobile dropdown menu */
    #mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 2px solid #ED2728;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
        padding: 1.5rem 2rem;
        z-index: 100;
    }
    #mobile-menu a {
        display: block;
        padding: 0.75rem 0;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #191c1d;
        border-bottom: 1px solid #e1e3e4;
        transition: color 0.2s;
    }
    #mobile-menu a:last-child {
        border-bottom: none;
    }
    #mobile-menu a:hover {
        color: #ED2728;
    }
}