/* =========================================================
   KokanCart header
   Row 1 = dark green brand bar | Row 2 = cream nav bar
   Link in partials/adminlte4/_head.blade.php AFTER AdminLTE + your custom css
   ========================================================= */
:root {
    --kc-green: #143d2a;
    --kc-green-2: #1f5a3b;
    --kc-gold: #f5c33b;
    --kc-gold-dark: #e2ac1d;
    --kc-cream: #f8f6ef;
    --kc-border: #e4e0d3;
    --kc-text: #1f2a24;
}

/* Reset AdminLTE app-header defaults */
.app-header.kc-header {
    display: block;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

/* =================== ROW 1: brand bar =================== */
.kc-topbar {
    position: relative;
    z-index: 1035;              /* above row 2 so the user dropdown overlaps it */
    background: var(--kc-green);
    color: #fff;
}
.kc-topbar .dropdown-menu { z-index: 1040; }

.kc-topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* logos dead-centre */
    align-items: center;
    gap: 1rem;
    min-height: 110px;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.kc-topbar-left  { display: flex; align-items: center; gap: .5rem; justify-self: start; }
.kc-topbar-right { display: flex; align-items: center; gap: .9rem; justify-self: end; }

.kc-brand           { display: flex; align-items: center; gap: 1.25rem; text-decoration: none; }
.kc-brand-seal      { height: 86px; width: auto; }
.kc-brand-text      { height: 54px; width: auto; margin-left: -.5rem; }
.kc-brand-kokancart { height: 90px; width: auto; }
.kc-brand-divider   { width: 2px; height: 70px; background: var(--kc-gold); border-radius: 2px; }

.kc-auth-link { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.kc-auth-link:hover { color: var(--kc-gold); }
.kc-auth-sep { width: 1px; height: 22px; background: rgba(255,255,255,.45); }

.kc-btn-gold {
    background: var(--kc-gold);
    color: var(--kc-text);
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    padding: .55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.kc-btn-gold:hover { background: var(--kc-gold-dark); color: var(--kc-text); }

.kc-user-toggle { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.kc-user-toggle:hover, .kc-user-toggle:focus { color: var(--kc-gold); }
.kc-user-name { color: var(--kc-gold); font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kc-avatar { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kc-gold); }
.kc-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kc-gold);
    color: var(--kc-green);
    font-weight: 700;
    font-size: .95rem;
}

/* =================== ROW 2: cream nav bar =================== */
/* !important on colours: your existing css forces this row black/white-text */
.kc-header .kc-navbar2 {
    position: relative;
    z-index: 1030;
    background: var(--kc-cream) !important;
    border-bottom: 1px solid var(--kc-border);
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.kc-navbar2-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
}

/* Left */
.kc-nav2-left { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.kc-cat-toggle {
    background: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--kc-text);
    font-weight: 600;
    font-size: .95rem;
    padding: .4rem .25rem;
    white-space: nowrap;
}
.kc-cat-toggle:hover { color: var(--kc-green-2); }
.kc-cat-toggle .bi-list { font-size: 1.6rem; line-height: 1; }

.kc-cat-menu { min-width: 260px; max-height: 440px; overflow-y: auto; }
.kc-cat-menu .dropdown-item { padding: .45rem 1rem; }
.kc-cat-menu .dropdown-item.active,
.kc-cat-menu .dropdown-item:active { background: var(--kc-green-2); color: #fff; }

/* Centre: search */
.kc-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 560px;
    margin: 0 auto;
}
.kc-search .form-control {
    border-radius: 999px 0 0 999px;
    border: 1px solid #cfc9b8;
    border-right: 0;
    background: #fff;
    padding: .5rem 1.1rem;
    font-size: .95rem;
}
.kc-search .form-control:focus { border-color: var(--kc-green-2); box-shadow: none; }
.kc-search .btn {
    border-radius: 0 999px 999px 0;
    background: var(--kc-green);
    color: #fff;
    padding: 0 1.2rem;
    border: 0;
}
.kc-search .btn:hover { background: var(--kc-green-2); color: #fff; }

/* Right */
.kc-nav2-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-shrink: 0; }

.kc-social { align-items: center; gap: .1rem; }
.kc-header .kc-nav2-icon {
    color: var(--kc-green-2) !important;
    font-size: 1.1rem;
    padding: .35rem .45rem;
    text-decoration: none;
    line-height: 1;
}
.kc-header .kc-nav2-icon:hover { color: var(--kc-gold-dark) !important; }

/* Cart */
.kc-cart { position: relative; display: inline-flex; align-items: center; text-decoration: none; padding: 0 .25rem; }
.kc-cart-img { width: 46px; height: 46px; object-fit: contain; }
.kc-cart-count {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--kc-green-2);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--kc-cream);
}

/* Page links */
.kc-links { align-items: stretch; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.kc-header .kc-link {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 .7rem;
    color: var(--kc-text) !important;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.kc-header .kc-link:hover  { color: var(--kc-green-2) !important; }
.kc-header .kc-link.active { color: var(--kc-green-2) !important; border-bottom-color: var(--kc-green-2); }
.kc-header .kc-link.flash-link { color: #c0392b !important; }   /* Offers stands out on cream */

/* =================== Responsive =================== */
@media (max-width: 1199.98px) {
    .kc-cat-label { display: none; }          /* "All Categories" -> just the icon */
    .kc-header .kc-link { padding: 0 .5rem; font-size: .9rem; }
}

@media (max-width: 767.98px) {
    .kc-topbar-inner    { grid-template-columns: 1fr auto; min-height: 72px; gap: .5rem; }
    .kc-topbar-left     { display: none; }
    .kc-brand           { justify-self: start; gap: .6rem; }
    .kc-brand-seal      { height: 50px; }
    .kc-brand-text      { height: 32px; }
    .kc-brand-kokancart { height: 34px; }
    .kc-brand-divider   { height: 40px; }
    .kc-topbar-right    { gap: .6rem; }
    .kc-navbar2-inner   { min-height: 56px; }
}

@media (max-width: 479.98px) {
    .kc-brand-text,
    .kc-brand-divider,
    .kc-brand-kokancart { display: none; }    /* seal only on small phones */
}