/* ============================================================
   A1 CASH & CARRY — COMPLETE HEADER CSS
   Logo | Location | Search | Language | Theme | Account
   Wishlist | Cart | Navigation (underline hover) | Mega Menu
   Responsive
============================================================ */

/* ===================== ROOT VARIABLES ===================== */

:root {
    --header-white: #ffffff;
    --primary: #f80f0f;
    --primary-dark: #c90012;
    --primary-light: #e9f8ec;
    --header-text: #1d2939;
    --header-muted: #777777;
    --nav-background: #0d1b2a;
    --nav-hover: #e50914;          /* underline ka color */
    --nav-underline-height: 3px;   /* underline ki motai */
    --nav-underline-bottom: 11px;  /* bada number = underline upar, text ke aur paas */
    --logo-height: 88px;
}

/* ===================== RESET ===================== */

.main-header,
.main-header *,
.main-nav,
.main-nav * {
    box-sizing: border-box;
}

.main-header a,
.main-nav a {
    -webkit-tap-highlight-color: transparent;
}

/* ===================== MAIN HEADER ===================== */

.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    isolation: isolate;
}

/* ===================== HEADER TOP ===================== */

.header-top {
    min-height: 104px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 3%;
    background: #ffffff;
    position: relative;
}

/* ===================== LOGO ===================== */

.logo-area,
.main-header .header-top .logo-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: transparent;
    text-decoration: none;
}

.header-main-logo,
.header-logo-image,
.main-header .header-top .header-main-logo,
.main-header .header-top .header-logo-image {
    display: block;
    height: var(--logo-height);
    width: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: left center;
    border: 0;
    outline: none;
    box-shadow: none;
}

/* ===================== LOCATION ===================== */

.location-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 130px;
    flex-shrink: 0;
}

.location-box > i {
    color: var(--primary);
    font-size: 22px;
}

.location-box small {
    display: block;
    color: var(--header-muted);
    font-size: 10px;
}

.location-box strong {
    font-size: 12px;
    white-space: nowrap;
}

/* ===================== SEARCH ===================== */

.search-container {
    flex: 1;
    min-width: 180px;
    height: 46px;
    display: flex;
    border: 2px solid #0b2250;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.search-container select {
    border: none;
    padding: 0 10px;
    background: #f3f7f4;
    outline: none;
    color: #222222;
    cursor: pointer;
}

.search-container input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 14px;
    background: #ffffff;
    color: #222222;
}

.search-container input::placeholder {
    color: #888888;
}

.search-container button {
    width: 55px;
    min-width: 55px;
    border: none;
    background: #0b2250;
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-container button:hover {
    background: #17396f;
}

/* ===================== LANGUAGE BUTTON ===================== */

.language-btn {
    border: none;
    background: #e60505;
    color: #ffffff;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.language-btn:hover {
    background: #c90012;
}

/* ===================== HEADER ICONS ===================== */

.header-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: var(--header-text);
    font-size: 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.header-icon-btn:hover {
    color: var(--primary);
}

/* ===================== DARK MODE BUTTON ===================== */

#themeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin: 0 4px;
    position: relative;
}

#themeBtn i {
    font-size: 21px;
}

/* ===================== BADGES ===================== */

.badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 17px;
    background: #e53935;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

/* ===================== ACCOUNT ===================== */

.account-box {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.account-box small {
    display: block;
    font-size: 10px;
    color: var(--header-muted);
}

.account-box strong {
    font-size: 13px;
    color: var(--header-text);
}

/* ===================== PROFILE ===================== */

.profile-account-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-profile-image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9f8ec;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.profile-account-box:hover .header-profile-image {
    transform: scale(1.08);
    border-color: var(--primary);
}

/* ===================== CART ===================== */

.cart-box {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.cart-icon {
    position: relative;
    font-size: 23px;
    color: #0b2250;
}

.cart-icon span {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e53935;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
}

.cart-box strong {
    color: var(--header-text);
    font-size: 13px;
}

/* ===================== NAVIGATION BAR ===================== */

.main-header .main-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3%;
    background: #1b2948;
    color: #ffffff;
    z-index: 100;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        height 0.25s ease,
        min-height 0.25s ease,
        max-height 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* Navbar sirf tab hide hota hai jab JS ye class lagata hai */
.main-header .main-nav.navbar-hidden {
    position: relative !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* ===================== NAVIGATION LINKS ===================== */

.nav-left {
    --nav-link-pad: 18px;          /* link ke left-right ki jagah */
    display: flex;
    align-items: center;
    height: 48px;
    gap: 4px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Link + All Categories button: poori 48px height,
   taaki underline navbar ke bilkul neeche dikhe */

.nav-left > a,
.category-menu-btn {
    position: relative;
    height: 48px;
    padding: 0 var(--nav-link-pad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: transparent;
    color: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;

    transition: color 0.35s ease;
}

/* ---------- UNDERLINE (neeche wali lal line) ---------- */

.nav-left > a::after,
.category-menu-btn::after {
    content: "";
    position: absolute;
    left: var(--nav-link-pad);
    right: var(--nav-link-pad);
    bottom: var(--nav-underline-bottom);   /* text ke ठीक neeche */
    height: var(--nav-underline-height);
    border-radius: 2px;

    /* simple flat lal line */
    background: var(--nav-hover);

    /* shuru mein chhupi hui; mouse hatane par left taraf simat jati hai */
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease-in-out;   /* speed yahan se badlo */
}

/* Hover par underline dikhao */

.nav-left > a:hover::after,
.category-menu-btn:hover::after {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: right;   /* right se left taraf aati hai */
}

/* Current (active) page par underline hamesha dikhe */

.nav-left > a.active::after,
.nav-left > a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Hover / active par text bilkul white rahe */

.nav-left > a:hover,
.nav-left > a.active,
.nav-left > a[aria-current="page"],
.category-menu-btn:hover {
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.category-menu-btn i {
    flex-shrink: 0;
}

/* Keyboard accessibility */

.nav-left > a:focus-visible,
.category-menu-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.nav-left > a:focus-visible::after,
.category-menu-btn:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Right navigation controls */

.nav-right {
    display: flex;
    gap: 20px;
    font-size: 12px;
    align-items: center;
}

/* ===================== MEGA MENU SUPPORT ===================== */

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10000;
}

/* ===================== HEADER SPACER ===================== */

#a1-header-spacer {
    width: 100%;
    height: 0;
    display: block;
    flex-shrink: 0;
}

#site-header {
    position: relative !important;
    width: 100% !important;
    z-index: 999999 !important;
    overflow: visible !important;
}

/* ===================== DARK MODE ===================== */

body.dark-mode .main-header {
    background: #101512 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
}

body.dark-mode .header-top {
    background: #101512 !important;
}

body.dark-mode .location-box small,
body.dark-mode .account-box small {
    color: #aab5ad;
}

body.dark-mode .account-box strong {
    color: #ffffff;
}

body.dark-mode .header-icon-btn {
    color: #ffffff;
}

body.dark-mode .search-container,
body.dark-mode .search-container select,
body.dark-mode .search-container input {
    background: #1a211c;
    color: #ffffff;
}

body.dark-mode .search-container input::placeholder {
    color: #aab5ad;
}

body.dark-mode .cart-icon,
body.dark-mode .cart-box strong {
    color: #ffffff;
}

body.dark-mode .main-header .main-nav {
    background: #101512;
}

/* ===================== TABLET ===================== */

@media (max-width: 1100px) {
    :root {
        --logo-height: 70px;
    }

    .header-top {
        gap: 12px;
        min-height: 90px;
    }

    .location-box {
        min-width: 110px;
    }

    .main-header .main-nav {
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .main-header .main-nav::-webkit-scrollbar {
        height: 0;
    }

    .nav-left {
        --nav-link-pad: 14px;
        flex-shrink: 0;
    }

    .nav-right {
        display: none;
    }

    .nav-left > a,
    .category-menu-btn {
        font-size: 13px;
    }
}

/* ===================== MOBILE ===================== */

@media (max-width: 768px) {
    :root {
        --logo-height: 54px;
    }

    .header-top {
        min-height: 72px;
        padding: 8px 3%;
        gap: 10px;
    }

    .header-profile-image {
        width: 36px;
        height: 36px;
    }

    .main-header .main-nav {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .nav-left {
        --nav-link-pad: 12px;
    }

    .nav-left > a,
    .category-menu-btn {
        font-size: 13px;
    }

    .search-container {
        height: 40px;
    }
}

/* ===================== SMALL MOBILE ===================== */

@media (max-width: 600px) {
    :root {
        --logo-height: 46px;
    }

    .main-header .header-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        min-height: 0;
    }

    .main-header .header-top .logo-area {
        flex: 1 1 auto;
        min-width: 0;
    }

    .location-box {
        display: none;
    }

    .main-header .header-top .search-container {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        height: 40px;
        order: 10;
    }

    .search-container select {
        display: none;
    }

    .search-container input {
        padding: 0 8px;
        font-size: 11px;
    }

    .search-container button {
        width: 42px;
        min-width: 42px;
        font-size: 14px;
    }

    .language-btn {
        padding: 8px;
        font-size: 10px;
    }

    .main-header .header-top .header-icon-btn,
    .main-header .header-top #themeBtn {
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        height: 36px;
        margin: 0;
        font-size: 17px;
    }

    .main-header .header-top #themeBtn {
        position: static;
    }

    .main-header .header-top #themeBtn i {
        font-size: 19px;
    }

    .main-header .header-top .header-profile-image {
        width: 34px;
        height: 34px;
    }

    .main-header .header-top .account-box {
        flex: 0 0 auto;
        gap: 4px;
    }

    .account-box > div {
        display: none;
    }

    .main-header .header-top .cart-box {
        flex: 0 0 auto;
    }

    .cart-box strong {
        display: none;
    }

    .main-header .main-nav {
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
    }

    .nav-left {
        --nav-link-pad: 10px;
        gap: 2px;
    }

    .nav-left > a,
    .category-menu-btn {
        font-size: 12px;
    }
}

/* ===================== EXTRA SMALL MOBILE ===================== */

@media (max-width: 480px) {
    :root {
        --logo-height: 40px;
    }

    .header-top {
        gap: 5px;
    }

    .nav-left {
        --nav-link-pad: 9px;
    }

    .nav-left > a,
    .category-menu-btn {
        font-size: 11px;
    }
}

/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {
    .nav-left > a,
    .nav-left > a::after,
    .category-menu-btn,
    .category-menu-btn::after,
    .header-icon-btn,
    .header-profile-image,
    .search-container button {
        transition: none;
    }
}