/* oi-nav-2.css — dipindah dari comp/seller-oi-nav.php (baris 585, 26 Okt 2026) agar bisa di-cache browser. */

/* <style id="IC_STOREFRONT_MAIN_NAV_DARKMODE_READABLE_CLEAN_FINAL"> */
/*
 * Main nav Online Identity dark mode readability.
 * Scope:
 * - hanya .ic-oi-nav
 * - tidak menyentuh product category
 * - tidak menyentuh showcase masonry
 */

/* Light/default */
.ic-oi-nav .ic-oi-nav-label{
  color:#1f2937 !important;
}

.ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label{
  color:#111827 !important;
}

/* Dark mode label */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-label,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-label,
html.dark .ic-oi-nav .ic-oi-nav-label,
body.dark .ic-oi-nav .ic-oi-nav-label{
  color:rgba(255,255,255,.78) !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
}

/* Dark mode active label */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label,
html.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
body.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
html.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label,
body.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label{
  color:#ffffff !important;
}

/* Dark mode ring */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-ring{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(255,255,255,.72) !important;
  color:rgba(15,23,42,.78) !important;
}

/* Dark mode active ring */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring{
  background:rgba(255,255,255,.98) !important;
  border-color:var(--brand, #198754) !important;
  color:var(--brand, #198754) !important;
  box-shadow:0 0 0 .18rem color-mix(in srgb, var(--brand, #198754) 28%, transparent) !important;
}

/* Jangan redupkan item yang tampil */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item:not([hidden]),
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item:not([hidden]),
html.dark .ic-oi-nav .ic-oi-nav-item:not([hidden]),
body.dark .ic-oi-nav .ic-oi-nav-item:not([hidden]){
  opacity:1 !important;
  filter:none !important;
}

/* <style id="IC_STOREFRONT_MAIN_NAV_DARK_ICON_RING_FINAL"> */
/*
 * Main nav dark mode icon ring.
 * Membuat background icon Links / Booking / Showcase / Products gelap
 * agar menyatu dengan dark storefront.
 */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-ring{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:rgba(255,255,255,.86) !important;
}

/* Active tetap pakai warna brand, tapi background tetap gelap */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring{
  background:rgba(15,23,42,.86) !important;
  border-color:var(--brand, #198754) !important;
  color:var(--brand, #198754) !important;
  box-shadow:0 0 0 .18rem color-mix(in srgb, var(--brand, #198754) 32%, transparent) !important;
}

/* Pastikan SVG/icon di dalam ring ikut warna */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring i,
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring svg,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring i,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring svg,
html.dark .ic-oi-nav .ic-oi-nav-ring i,
html.dark .ic-oi-nav .ic-oi-nav-ring svg,
body.dark .ic-oi-nav .ic-oi-nav-ring i,
body.dark .ic-oi-nav .ic-oi-nav-ring svg{
  color:inherit !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* <style id="IC_STOREFRONT_MAIN_NAV_FINAL_EMPTY_GUARD_CSS"> */
.ic-oi-nav .ic-oi-nav-item[data-ic-oi-force-hidden="1"],
.ic-oi-nav [data-ic-oi-main-nav="1"][data-ic-oi-force-hidden="1"]{
    display:none !important;
}

/* <style id="IC_STOREFRONT_MAIN_NAV_ICON_RESTORE_FINAL_CSS"> */
/*
 * Restore Online Identity main nav to icon mode.
 * Aman:
 * - hanya .ic-oi-nav
 * - tidak memakai class product/category
 * - tidak menyentuh #categoryImageBar
 */
.ic-oi-nav{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.ic-oi-nav .ic-oi-nav-item{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  color:inherit !important;
  text-align:center !important;
}

.ic-oi-nav .ic-oi-nav-ring{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.28) !important;
  color:#64748b !important;
  box-shadow:none !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .08s ease, color .18s ease, background .18s ease !important;
}

.ic-oi-nav .ic-oi-nav-ring i{
  font-size:20px !important;
  line-height:1 !important;
}

.ic-oi-nav .ic-oi-nav-label{
  display:block !important;
  width:62px !important;
  max-width:62px !important;
  margin:0 !important;
  padding:0 !important;
  color:#1f2937 !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.12 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-align:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring{
  border-color:var(--brand, #198754) !important;
  color:var(--brand, #198754) !important;
  box-shadow:0 0 0 .18rem color-mix(in srgb, var(--brand, #198754) 18%, transparent) !important;
}

.ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
.ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label{
  font-weight:600 !important;
  color:#111827 !important;
}

/* Dark mode */
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-ring{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:rgba(255,255,255,.86) !important;
}

html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-label,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-label,
html.dark .ic-oi-nav .ic-oi-nav-label,
body.dark .ic-oi-nav .ic-oi-nav-label{
  color:rgba(255,255,255,.78) !important;
}

html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-ring,
html.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring,
body.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-ring{
  background:rgba(15,23,42,.86) !important;
  border-color:var(--brand, #198754) !important;
  color:var(--brand, #198754) !important;
  box-shadow:0 0 0 .18rem color-mix(in srgb, var(--brand, #198754) 32%, transparent) !important;
}

html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
html[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label,
body[data-stf-mode="dark"] .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label,
html.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
body.dark .ic-oi-nav .ic-oi-nav-item.is-active .ic-oi-nav-label,
html.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label,
body.dark .ic-oi-nav .ic-oi-nav-item[aria-current="page"] .ic-oi-nav-label{
  color:#fff !important;
}