/* Navigation Active State Fix */
/* This CSS file adds active highlighting to navigation based on current page */

/* Remove ALL default styling from navigation items first */
header a[href="/"],
header a[href="/home"],
header a[href="/products"],
header a[href="/about"],
header a[href="/about-us"],
header a[href="/contact"],
header a[href="/contact-us"],
header a[href="/newsletter"],
header a[href="/orders"],
header button[href="/"],
header button[href="/home"],
header button[href="/products"],
header button[href="/about"],
header button[href="/about-us"],
header button[href="/contact"],
header button[href="/contact-us"],
header button[href="/newsletter"],
header button[href="/orders"] {
    background-color: transparent !important;
    color: #897561 !important;
    box-shadow: none !important;
}

/* Highlight active navigation item based on body data attribute */
body[data-page="home"] header a[href="/"],
body[data-page="home"] header a[href="/home"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

body[data-page="products"] header a[href="/products"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

body[data-page="about"] header a[href="/about"],
body[data-page="about"] header a[href="/about-us"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

body[data-page="contact"] header a[href="/contact"],
body[data-page="contact"] header a[href="/contact-us"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

body[data-page="newsletter"] header a[href="/newsletter"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

body[data-page="my-orders"] header a[href="/orders"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

/* Seller pages */
body[data-page="seller-dashboard"] header a[href*="/seller/dashboard"],
body[data-page="seller-products"] header a[href*="/seller/products"],
body[data-page="seller-upload"] header a[href*="/seller/upload"],
body[data-page="seller-orders"] header a[href*="/seller/orders"],
body[data-page="seller-analytics"] header a[href*="/seller/analytics"],
body[data-page="seller-settings"] header a[href*="/seller/settings"] {
    background-color: #ec4913 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}