/* =====================================================================
   NAFERO SAFETY — Navbar Stylesheet (CSS murni, tanpa Tailwind)
   Tinggal di-upload ke public/assets/css/navbar.css di shared hosting,
   tidak butuh npm/build apa pun.
   ===================================================================== */

/* Util screen-reader-only (pengganti class "sr-only" Tailwind) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alpine.js: sembunyikan elemen ber-x-cloak sebelum Alpine siap */
[x-cloak] { display: none !important; }

/* ================= TOPBAR DESKTOP ================= */
.nafero-topbar-desktop {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid #DDDBD3;
    font-size: 11px;
    color: #6B6759;
    padding: 0 16px;
    height: 32px;
    position: relative;
    z-index: 9999;
}
@media (min-width: 768px) {
    .nafero-topbar-desktop { display: flex; padding: 0 32px; }
}

.nafero-topbar__location-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; }
.nafero-topbar__loc { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nafero-topbar__loc-icon { color: #EA580C; }
.nafero-topbar__loc-name { font-weight: 600; color: #18170F; }

.nafero-topbar__change-wrap { position: relative; }
.nafero-topbar__change-btn {
    color: #0A66C2; font-weight: 500; margin-left: 4px;
    background: none; border: none; cursor: pointer; font-size: 11px; font-family: inherit;
}
.nafero-topbar__change-btn:hover { text-decoration: underline; }

.nafero-topbar__dropdown {
    position: absolute; left: 0; top: 100%; margin-top: 8px; width: 192px;
    background: #fff; border: 1px solid #DDDBD3; border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    overflow: hidden; padding: 4px 0; z-index: 9999;
}
.nafero-topbar__dropdown--mobile { width: 176px; }
.nafero-topbar__dropdown-item {
    display: block; padding: 8px 16px; font-size: 12px; color: #524E44;
    text-decoration: none; transition: background-color .15s, color .15s;
}
.nafero-topbar__dropdown-item:hover { background: #F5F4EF; }
.nafero-topbar__dropdown-item.is-active { font-weight: 700; color: #18170F; background: #F5F4EF; }
.nafero-topbar__dropdown-empty { display: block; padding: 8px 16px; font-size: 12px; color: #9CA3AF; font-style: italic; }

.nafero-topbar__sep { color: #DDDBD3; flex-shrink: 0; }
.nafero-topbar__hours { display: flex; align-items: center; gap: 6px; overflow: hidden; min-width: 0; }
.nafero-topbar__hours-name { color: #18170F; font-weight: 600; flex-shrink: 0; }
.nafero-topbar__hours-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nafero-topbar__hours-link { color: #0A66C2; margin-left: 4px; flex-shrink: 0; text-decoration: none; }
.nafero-topbar__hours-link:hover { text-decoration: underline; }

.nafero-topbar__links { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: 16px; }
.nafero-topbar__links a { color: #6B6759; text-decoration: none; transition: color .15s; }
.nafero-topbar__links a:hover { color: #18170F; }
.nafero-topbar__links a.is-strong { font-weight: 600; }

/* ================= TOPBAR MOBILE ================= */
.nafero-topbar-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #fff; border-bottom: 1px solid #DDDBD3; font-size: 11px; color: #6B6759;
    padding: 0 12px; height: 32px; position: relative; z-index: 9999;
}
@media (min-width: 768px) {
    .nafero-topbar-mobile { display: none; }
}
.nafero-topbar-mobile__loc { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nafero-topbar-mobile__loc-icon { color: #EA580C; flex-shrink: 0; }
.nafero-topbar-mobile__loc-name {
    font-weight: 600; color: #18170F; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 38vw;
}
.nafero-topbar-mobile__change-wrap { position: relative; flex-shrink: 0; }
.nafero-topbar-mobile__change-btn {
    color: #0A66C2; font-weight: 500; margin-left: 4px; background: none; border: none;
    cursor: pointer; font-size: 11px; font-family: inherit;
}
.nafero-topbar-mobile__tracking { color: #18170F; font-weight: 600; flex-shrink: 0; white-space: nowrap; text-decoration: none; }

/* ================= NAVBAR UTAMA ================= */
.nafero-nav {
    position: sticky; top: 0; z-index: 50;
    background: #F5C518;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    height: 64px;
    transition: background-color .2s ease;
}
.nafero-nav__container {
    max-width: 1440px; margin: 0 auto; height: 100%;
    padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
@media (min-width: 640px) { .nafero-nav__container { padding: 0 16px; gap: 8px; } }
@media (min-width: 768px) { .nafero-nav__container { padding: 0 32px; gap: 12px; } }

/* --- Tombol Kategori --- */
.nafero-nav__category { position: relative; order: 1; flex-shrink: 0; }
@media (min-width: 640px) { .nafero-nav__category { order: 2; } }

.nafero-nav__category-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; width: 36px; padding: 0; border-radius: 9999px;
    background: transparent; border: 1px solid transparent; color: #18170F;
    font-size: 16px; font-weight: 700; font-family: inherit;
    transition: all .15s ease; flex-shrink: 0; cursor: pointer;
}
.nafero-nav__category-btn:hover { color: #3A2E00; }
@media (min-width: 640px) {
    .nafero-nav__category-btn {
        height: 44px; width: auto; padding: 0 16px; border-radius: 8px;
        background: #18170F; border-color: #18170F; color: #F5C518; font-size: 14px;
    }
    .nafero-nav__category-btn:hover { color: #F5C518; opacity: .9; }
}
.nafero-nav__category-btn span { display: none; }
@media (min-width: 640px) { .nafero-nav__category-btn span { display: inline; font-size: 14px; } }

.nafero-nav__category-dot {
    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
    border-radius: 9999px; background: #18170F;
}
@media (min-width: 640px) { .nafero-nav__category-dot { position: static; background: #F5C518; } }

.nafero-nav__category-panel {
    position: absolute; left: 0; margin-top: 8px; width: 288px; max-height: 70vh; overflow-y: auto;
    background: #fff; border: 1px solid #DDDBD3; border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    z-index: 50; padding: 8px 0;
}
.nafero-nav__category-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px;
    color: #524E44; text-decoration: none; transition: background-color .15s;
}
.nafero-nav__category-item:hover { background: #F5F4EF; }
.nafero-nav__category-item.is-active { color: #B8960F; font-weight: 700; }
.nafero-nav__category-icon {
    width: 28px; height: 28px; border-radius: 9999px; background: #F5F4EF; border: 1px solid #DDDBD3;
    display: grid; place-items: center; font-size: 11px; flex-shrink: 0;
}
.nafero-nav__category-fallback { display: block; padding: 10px 16px; font-size: 14px; color: #524E44; text-decoration: none; }
.nafero-nav__category-fallback:hover { background: #F5F4EF; }

/* --- Logo & Brand --- */
.nafero-nav__logo { order: 2; display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
@media (min-width: 640px) { .nafero-nav__logo { order: 1; gap: 12px; } }
.nafero-nav__logo-img {
    width: 28px; height: 28px; object-fit: contain; transition: transform .2s ease; border-radius: 6px;
}
@media (min-width: 640px) { .nafero-nav__logo-img { width: 40px; height: 40px; border-radius: 0; } }
.nafero-nav__logo:hover .nafero-nav__logo-img { transform: rotate(-8deg); }
.nafero-nav__logo-text { display: none; line-height: 1; }
@media (min-width: 640px) { .nafero-nav__logo-text { display: block; } }
.nafero-nav__logo-title {
    display: block; font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 20px;
    letter-spacing: -0.02em; color: #18170F;
}
.nafero-nav__logo-sub {
    font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .35em;
    color: #4A4020; text-transform: uppercase;
}

/* === PERISAI DARK MODE ===
   Navbar ini SENGAJA tidak ikut berubah warna saat dark mode aktif, KECUALI search bar.
   Ditulis dengan !important + selector spesifik supaya kebal terhadap rule dark-mode
   generik apa pun yang mungkin ada di halaman tempat komponen ini dipasang (mis. "nav"
   atau "strong" tanpa scope) — jadi navbar akan selalu terlihat sama persis di semua
   halaman (homepage, produk, auth), tidak tergantung CSS milik halaman itu sendiri. */
html.dark-mode .nafero-nav, body.dark-mode .nafero-nav {
    background: #F5C518 !important;
}
html.dark-mode .nafero-topbar-desktop, body.dark-mode .nafero-topbar-desktop,
html.dark-mode .nafero-topbar-mobile, body.dark-mode .nafero-topbar-mobile {
    background: #ffffff !important; border-color: #DDDBD3 !important; color: #6B6759 !important;
}
html.dark-mode .nafero-nav__logo-title, body.dark-mode .nafero-nav__logo-title,
html.dark-mode .nafero-topbar__loc-name, body.dark-mode .nafero-topbar__loc-name,
html.dark-mode .nafero-topbar__hours-name, body.dark-mode .nafero-topbar__hours-name,
html.dark-mode .nafero-topbar-mobile__loc-name, body.dark-mode .nafero-topbar-mobile__loc-name {
    color: #18170F !important;
}
html.dark-mode .nafero-nav__logo-sub, body.dark-mode .nafero-nav__logo-sub {
    color: #4A4020 !important;
}

/* --- Search --- */
.nafero-nav__search { order: 3; flex: 1 1 0%; min-width: 0; }
.nafero-nav__search-form {
    display: flex; align-items: center; gap: 8px; height: 36px; background: #fff; border-radius: 9999px;
    padding-left: 12px; transition: box-shadow .15s ease, background-color .15s ease;
}
@media (min-width: 640px) { .nafero-nav__search-form { height: 44px; padding-left: 16px; } }
.nafero-nav__search-form:focus-within { box-shadow: 0 0 0 2px rgba(24,23,15,.25); }
.nafero-nav__search-icon { flex-shrink: 0; color: #6B6759; font-size: 12px; transition: color .15s ease; }
.nafero-nav__search-input {
    flex: 1 1 0%; min-width: 0; width: 100%; height: 100%; background: transparent; border: 0;
    padding-left: 0; padding-right: 12px; font-size: 13px; color: #18170F; caret-color: #18170F;
    outline: none; font-family: inherit; transition: color .15s ease;
}
@media (min-width: 640px) { .nafero-nav__search-input { padding-right: 16px; font-size: 14px; } }
.nafero-nav__search-input::placeholder { color: #6B6759; transition: color .15s ease; }

/* --- Dark mode: HANYA search bar yang berubah, elemen navbar lain sengaja tidak disentuh.
       Ditulis untuk dua kemungkinan target toggle (html.dark-mode ATAU body.dark-mode) supaya
       tetap konsisten baik di halaman auth maupun di homepage/halaman produk. --- */
html.dark-mode .nafero-nav__search-form,
body.dark-mode .nafero-nav__search-form {
    background: #1E1E1C !important;
}
html.dark-mode .nafero-nav__search-input,
body.dark-mode .nafero-nav__search-input {
    color: #F0EEE8 !important;
    caret-color: #F0EEE8 !important;
}
html.dark-mode .nafero-nav__search-input::placeholder,
body.dark-mode .nafero-nav__search-input::placeholder {
    color: #9A9588 !important;
}
html.dark-mode .nafero-nav__search-icon,
body.dark-mode .nafero-nav__search-icon {
    color: #9A9588 !important;
}

/* --- Aksi Kanan (Theme, Cart, Akun) --- */
.nafero-nav__actions { order: 4; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
@media (min-width: 640px) { .nafero-nav__actions { gap: 6px; } }

.nafero-nav__theme-btn {
    display: none; width: 44px; height: 44px; background: #18170F; border: 1px solid #18170F;
    border-radius: 9999px; place-items: center; color: #F5C518; cursor: pointer; transition: opacity .15s;
}
.nafero-nav__theme-btn:hover { opacity: .9; }
@media (min-width: 640px) { .nafero-nav__theme-btn { display: grid; } }

.nafero-nav__cart-wrap {
    position: relative; aspect-ratio: 1 / 1; height: 36px; background: transparent; border: 1px solid transparent;
    border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0;
}
@media (min-width: 640px) {
    .nafero-nav__cart-wrap { aspect-ratio: auto; width: 44px; height: 44px; background: #18170F; border-color: #18170F; }
}
.nafero-nav__cart-wrap.is-active { box-shadow: 0 0 0 2px #18170F; }
.nafero-nav__cart-link {
    position: relative; display: block; padding: 6px; color: #18170F; text-decoration: none; transition: opacity .15s;
}
.nafero-nav__cart-link:hover { opacity: .8; }
@media (min-width: 640px) { .nafero-nav__cart-link { padding: 8px; color: #F5C518; } }
.nafero-nav__cart-icon { font-size: 16px; }
@media (min-width: 640px) { .nafero-nav__cart-icon { font-size: 20px; } }
.nafero-nav__cart-badge {
    position: absolute; top: -2px; right: -2px; background: #DC2626; color: #fff;
    font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700; width: 16px; height: 16px;
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    animation: nafero-bounce 1s infinite;
}
@media (min-width: 640px) { .nafero-nav__cart-badge { top: -4px; right: -4px; font-size: 10px; width: 20px; height: 20px; } }
@keyframes nafero-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.nafero-nav__login-btn {
    aspect-ratio: 1 / 1; height: 36px; background: #18170F; color: #F5C518; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; text-decoration: none; transition: opacity .15s; flex-shrink: 0;
}
.nafero-nav__login-btn:hover { opacity: .9; }
@media (min-width: 640px) { .nafero-nav__login-btn { aspect-ratio: auto; height: 44px; width: auto; padding: 0 20px; } }
.nafero-nav__login-btn span { display: none; }
@media (min-width: 640px) { .nafero-nav__login-btn span { display: inline; } }

.nafero-nav__account { position: relative; flex-shrink: 0; }

.nafero-nav__account-trigger-mobile {
    display: grid; width: 36px; height: 36px; aspect-ratio: 1 / 1; background: #18170F; border: 1px solid #18170F;
    border-radius: 9999px; place-items: center; cursor: pointer; transition: opacity .15s;
}
.nafero-nav__account-trigger-mobile:hover { opacity: .9; }
@media (min-width: 640px) { .nafero-nav__account-trigger-mobile { display: none; } }
.nafero-nav__avatar-sm {
    width: 24px; height: 24px; border-radius: 9999px; background: #F5C518; color: #18170F;
    display: grid; place-items: center; font-size: 10px;
}

.nafero-nav__account-trigger-desktop {
    display: none; height: 44px; padding-left: 8px; padding-right: 16px; background: #18170F;
    border: 1px solid #18170F; border-radius: 9999px; align-items: center; gap: 8px; font-size: 12px;
    font-weight: 700; color: #F5C518; cursor: pointer; transition: opacity .15s; font-family: inherit;
}
.nafero-nav__account-trigger-desktop:hover { opacity: .9; }
@media (min-width: 640px) { .nafero-nav__account-trigger-desktop { display: flex; } }
.nafero-nav__avatar {
    width: 28px; height: 28px; border-radius: 9999px; background: #F5C518; color: #18170F;
    display: grid; place-items: center; flex-shrink: 0; font-size: 11px;
}
.nafero-nav__account-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nafero-nav__account-panel {
    position: absolute; right: 0; margin-top: 8px; width: 208px; background: #fff; border: 1px solid #DDDBD3;
    border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    overflow: hidden; z-index: 50; padding: 6px 0;
}
.nafero-nav__account-header { padding: 10px 16px; border-bottom: 1px solid #DDDBD3; }
.nafero-nav__account-header-name { font-size: 12px; font-weight: 700; color: #18170F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nafero-nav__account-header-email { font-size: 10px; color: #6B6759; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nafero-nav__account-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 12px; font-weight: 600;
    color: #524E44; text-decoration: none; transition: background-color .15s;
}
.nafero-nav__account-item:hover { background: #F5F4EF; }
.nafero-nav__account-item i { width: 16px; text-align: center; }
.nafero-nav__account-item.is-admin { color: #8A6E00; }

.nafero-nav__account-logout-wrap { border-top: 1px solid #DDDBD3; margin-top: 4px; padding-top: 4px; }
.nafero-nav__logout-btn {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 12px;
    font-weight: 600; color: #DC2626; background: none; border: 0; cursor: pointer; text-align: left;
    transition: background-color .15s; font-family: inherit;
}
.nafero-nav__logout-btn:hover { background: #FEF2F2; }