<!-- Order Flow Header Component -->
<header class="order-header">
    <div class="order-header-container">
        <a href="{{ url('/') }}" class="header-logo-link" title="Return to Home">
            <img 
                src="{{ asset('images/logo.svg') }}" 
                alt="Lindsay's Leather" 
                class="header-logo"
               
                onerror="this.src='{{ asset('images/Lindsays Leather logo.png') }}'"
            >
        </a>
    </div>
</header>

<style>
    .order-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #ffffff;
        border-bottom: 3px solid #B5702F;
        box-shadow: 0 2px 15px rgba(55, 28, 22, 0.15);
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .order-header-container {
        width: 100%;
        max-width: 1200px;
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .header-logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        padding: 10px;
        border-radius: 8px;
    }
    
    .header-logo-link:hover {
        transform: translateY(-2px);
        opacity: 0.85;
        background: rgba(181, 112, 47, 0.08);
    }
    
    .header-logo {
        height: 80px;
        width: auto;
        max-width: 350px;
        /* No filter - keep original brand colors */
        transition: transform 0.3s ease;
    }
    
    /* Add top padding to body when header is present */
    .with-order-header {
        padding-top: 120px !important; /* Header height + spacing */
    }
    
    /* Tablet Responsive */
    @media (max-width: 768px) {
        .order-header {
            height: 85px;
        }
        
        .order-header-container {
            padding: 0 1rem;
        }
        
        .header-logo {
            height: 70px;
            max-width: 300px;
        }
        
        .with-order-header {
            padding-top: 95px !important;
        }
    }
    
    /* Mobile Phones */
    @media (max-width: 480px) {
        .order-header {
            height: 75px;
        }
        
        .order-header-container {
            padding: 0 0.5rem;
        }
        
        .header-logo {
            height: 60px;
            max-width: 260px;
        }
        
        .with-order-header {
            padding-top: 85px !important;
        }
    }
    
    /* Extra Small Mobile */
    @media (max-width: 375px) {
        .order-header {
            height: 70px;
        }
        
        .header-logo {
            height: 55px;
            max-width: 240px;
        }
        
        .with-order-header {
            padding-top: 80px !important;
        }
    }
</style>
