/* Dark Mode Toggle Button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,200,50,0.2), rgba(100,150,255,0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.theme-toggle:hover {
  background: rgba(0,0,0,0.1);
  transform: scale(1.08) rotate(15deg);
  border-color: rgba(0,0,0,0.1);
}
.theme-toggle:hover::before {
  opacity: 1;
}
.theme-toggle:active {
  transform: scale(0.95);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html.dark-mode .theme-toggle .icon-sun { display: inline; }
html.dark-mode .theme-toggle .icon-moon { display: none; }
html.dark-mode .theme-toggle {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}
html.dark-mode .theme-toggle::before {
  background: linear-gradient(135deg, rgba(83,168,255,0.3), rgba(100,200,255,0.1));
}
html.dark-mode .theme-toggle:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(83,168,255,0.4);
  transform: scale(1.08) rotate(-15deg);
}
html.dark-mode .theme-toggle:hover::before {
  opacity: 1;
}

/* ===== Flexbox layout for header (all screen sizes) ===== */
.header-wrapper .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.right-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: auto !important;
  width: 100% !important;
}
.logo {
  flex-shrink: 0;
  margin-right: 15px;
  order: -1;
}
.logo img {
  max-height: 50px;
}
.right-box-wrapper {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  flex-shrink: 0;
  order: 1;
}
.right-box-wrapper .theme-toggle {
  order: 0 !important;
  flex-shrink: 0;
}
.right-box-wrapper > a {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
  margin-right: 8px;
}
.right-box-wrapper > a > img {
  height: 24px !important;
  width: auto !important;
}
.right-box-wrapper .primary {
  order: 2 !important;
}
.right-box-wrapper .header-icons {
  order: 3 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

.cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cart-header .dropdown-toggle b {
  display: none;
}
.cart-header .count {
  position: absolute;
  top: -4px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Desktop: expanded nav uses flex */
@media (min-width: 991px) {
  .primary {
    float: none !important;
    text-align: center !important;
    flex-shrink: 0;
    order: 0;
  }
  .primary .navbar-collapse {
    display: flex !important;
    justify-content: center !important;
  }
  .primary .navbar-nav {
    float: none !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* Mobile: cart always visible */
@media (max-width: 990px) {
  .right-box-wrapper .header-icons {
    margin-left: 10px !important;
  }
  .right-box-wrapper .header-icons .dropdown-menu {
    position: fixed !important;
    right: 10px !important;
    left: auto !important;
    top: 60px !important;
    width: calc(100vw - 20px) !important;
    max-width: 355px !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 600px) {
  .right-box-wrapper .header-icons .dropdown-menu {
    position: fixed !important;
    right: 5px !important;
    left: auto !important;
    top: 55px !important;
    width: calc(100vw - 10px) !important;
    max-width: 300px !important;
    margin-right: 0 !important;
  }
}

/* ===== Dark Mode Overrides ===== */
html.dark-mode {
  color: #e0e0e0;
  background: #16213e !important;
}

html.dark-mode html,
html.dark-mode {
  background: #16213e !important;
}

/* Header */
html.dark-mode .fixed-header .header .header-wrapper,
html.dark-mode .fixed-header.background-opacity .header .header-wrapper {
  background: #16213e !important;
}
html.dark-mode .header .header-wrapper {
  background: #16213e !important;
}

/* Navbar */
html.dark-mode .navbar-default {
  background-color: #16213e;
  border-color: #0f3460;
}
html.dark-mode .navbar-default .navbar-nav > li > a {
  color: #ffffff;
}
html.dark-mode .navbar-default .navbar-nav > li > a:hover,
html.dark-mode .navbar-default .navbar-nav > li > a:focus {
  color: #53a8ff;
}
html.dark-mode .navbar-default .navbar-toggle {
  border-color: #0f3460;
  background-color: #16213e;
}
html.dark-mode .navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
html.dark-mode .navbar-default .navbar-collapse {
  border-color: #0f3460;
}

/* Menu icon bar - high specificity overrides */
html.dark-mode .header .header-wrapper .primary .navbar .btn-navbar .icon-bar,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .btn-navbar .icon-bar {
  background: #ffffff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .btn-navbar .icon-bar + .icon-bar,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .btn-navbar .icon-bar + .icon-bar {
  background: #ffffff !important;
}

/* Menu icons (Font Awesome) inherit text color */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a .fa {
  color: inherit;
  margin-right: 5px;
  font-size: 14px;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a .fa {
  color: inherit;
  margin-right: 5px;
  font-size: 14px;
}

/* Light mode - icons inherit dark text */
.header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a .fa {
  margin-right: 5px;
  font-size: 14px;
}

/* Menu icon button background */
html.dark-mode .header .header-wrapper .primary .navbar .btn-navbar,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .btn-navbar {
  background: #16213e !important;
  border-color: #0f3460 !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .btn-navbar .text,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .btn-navbar .text {
  color: #ffffff !important;
}

/* Mobile hamburger toggle */
html.dark-mode .navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff !important;
}

/* Main nav links - high specificity to override style.css #1e1e1e */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a {
  color: #ffffff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li:hover > a {
  color: #53a8ff !important;
  background: #0f3460 !important;
  border-color: #0f3460 !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li.selected > a {
  color: #53a8ff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li.parent:hover > a {
  color: #53a8ff !important;
  background: #0f3460 !important;
  border-color: #0f3460 !important;
}

/* Dropdown menus */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub,
html.dark-mode .header .header-wrapper .primary .navbar .nav .sub,
html.dark-mode .dropdown-menu {
  background: #16213e !important;
  border-color: #0f3460 !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub {
  left: 0 !important;
  right: auto !important;
  text-align: left !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .nav .sub {
  left: 0 !important;
  right: auto !important;
  text-align: left !important;
}
html.dark-mode .dropdown-menu > li > a {
  color: #ffffff;
}
html.dark-mode .dropdown-menu > li > a:hover {
  background: #0f3460;
  color: #53a8ff;
}

/* Mobile menu */
html.dark-mode .navbar-default .navbar-nav > .open > a,
html.dark-mode .navbar-default .navbar-nav > .open > a:hover,
html.dark-mode .navbar-default .navbar-nav > .open > a:focus {
  color: #53a8ff;
  background-color: #0f3460;
}

/* Sub menu items - high specificity to override style.css */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a {
  color: #ffffff !important;
  background: transparent;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a:hover {
  color: #53a8ff !important;
  background: #0f3460 !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub .sub li a {
  color: #ffffff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li.parent:hover > a {
  background: #16213e;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li.parent:hover > a:after {
  background: #16213e;
}

/* ============================
   MOBILE HAMBURGER MENU - Dark Mode
   ============================ */

/* Navbar wrapper in hamburger mode */
html.dark-mode .header .header-wrapper .primary .navbar-default {
  background: #16213e !important;
  border-color: #0f3460 !important;
}

/* Hamburger menu container when expanded */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse.collapse.in,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse.collapsing {
  background: #16213e !important;
  border-color: #0f3460 !important;
}

/* Nav wrapper inside hamburger */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li {
  background: #16213e !important;
  border-color: #0f3460 !important;
}

/* Main menu items */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > .parent > a {
  background: #16213e !important;
  border-color: #0f3460 !important;
  color: #ffffff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li:hover > a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a:hover,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li.parent:hover > a {
  background: #0f3460 !important;
  border-color: #0f3460 !important;
  color: #53a8ff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > .parent.active > a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > .parent.active:hover > a {
  background: #0f3460 !important;
  border-color: #0f3460 !important;
  color: #ffffff !important;
}

/* Accordion sub panels */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .parent .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .parent:hover > .sub {
  background: #16213e !important;
  border-color: #0f3460 !important;
  color: #e0e0e0 !important;
}

/* Sub menu items */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li {
  background: #16213e !important;
  border-bottom-color: #0f3460 !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a {
  color: #ffffff !important;
  background: transparent !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub a:hover,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a:hover {
  color: #53a8ff !important;
  background: #0f3460 !important;
}

/* Sub menu icon color */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub a > i {
  color: #ffffff !important;
}

/* Accordion toggle button (+ / - icon) */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .open-sub span,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .open-sub span + span {
  background: #ffffff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .parent .parent > a .open-sub span,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .megamenu .title .open-sub span,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .parent .parent > a .open-sub span + span,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .megamenu .title .open-sub span + span {
  background: #ffffff !important;
}

/* Megamenu sub panels */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .megamenu > .sub {
  background: #16213e !important;
  border-color: #0f3460 !important;
}

/* Nested sub panels */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub .sub {
  background: #16213e !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub .sub a {
  color: #e0e0e0 !important;
}

/* Menu text white for navbar-center */
html.dark-mode .nav.navbar-nav.navbar-center > li > a {
  color: #ffffff !important;
}
html.dark-mode .nav.navbar-nav.navbar-center > li > a:hover,
html.dark-mode .nav.navbar-nav.navbar-center > li > a:focus {
  color: #53a8ff !important;
}

/* Content / Body background */
html.dark-mode {
  background-color: #16213e !important;
  color: #e0e0e0;
}
html.dark-mode b,
html.dark-mode strong,
html.dark-mode span,
html.dark-mode p,
html.dark-mode label {
  color: #e0e0e0;
}
html.dark-mode .content,
html.dark-mode .content p,
html.dark-mode .content li,
html.dark-mode .content strong {
  color: #e0e0e0;
}

/* Products */
html.dark-mode .product .product-description .vertical {
  background: #16213e !important;
}
html.dark-mode [class*="frame-shadow"] {
  background: #16213e !important;
}
html.dark-mode .product {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .product .product-name a {
  color: #e0e0e0;
}
html.dark-mode .product .price {
  color: #53a8ff;
}

/* Product hover */
html.dark-mode .product .product-hover {
  background: #0f3460;
}

/* Panels & Accordions */
html.dark-mode .panel-default > .panel-heading {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .panel-default > .panel-heading .panel-title a {
  color: #e0e0e0;
}
html.dark-mode .panel-default > .panel-heading .panel-title a.collapsed {
  color: #000000;
}
html.dark-mode .panel-default > .panel-heading,
html.dark-mode .panel-title {
  color: #e0e0e0;
}
html.dark-mode .panel-group .panel {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .panel-body,
html.dark-mode .panel-body p,
html.dark-mode .panel-body li {
  color: #e0e0e0;
}

/* Toolbar */
html.dark-mode .toolbar {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .toolbar .sort-catalog .dropdown-toggle {
  background: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .toolbar .grid-list a.grid,
html.dark-mode .toolbar .grid-list a.list {
  color: #e0e0e0;
}

/* Sidebar */
html.dark-mode .sidebar .menu li a {
  color: #e0e0e0;
}
html.dark-mode .sidebar .menu li.active > a {
  background: #0f3460;
  color: #fff;
}
html.dark-mode .sidebar .tags a {
  background: #16213e;
  color: #e0e0e0;
  border-color: #0f3460;
}
html.dark-mode .sidebar .banners .banner-text {
  background: #0f3460;
}

/* Pagination */
html.dark-mode .pagination > li > a {
  background: #16213e;
  border-color: #0f3460;
  color: #53a8ff;
}
html.dark-mode .pagination > .active > a,
html.dark-mode .pagination > .active > span {
  background: #0f3460;
  border-color: #0f3460;
  color: #fff;
}

/* Buttons */
html.dark-mode .btn-default {
  background: #0f3460;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .btn-default:hover {
  background: #53a8ff;
  border-color: #53a8ff;
  color: #fff;
}
html.dark-mode .btn-primary {
  background: #0f3460;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .btn-primary:hover {
  background: #53a8ff;
  border-color: #53a8ff;
  color: #fff;
}

/* Forms & Inputs */
html.dark-mode .form-control {
  background: #16213e;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .form-control:focus {
  border-color: #53a8ff;
  box-shadow: 0 0 5px rgba(83,168,255,0.3);
}
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode textarea {
  background: #16213e;
  border-color: #0f3460;
  color: #e0e0e0;
}

/* Tables */
html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > td {
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .table > thead > tr > th {
  background: #0f3460;
  color: #ffffff;
}
html.dark-mode .table-striped > tbody > tr:nth-child(odd) {
  background: #16213e;
}
html.dark-mode .table-striped > tbody > tr:nth-child(even) {
  background: #16213e;
}
html.dark-mode .my-orders-table {
  border-color: #0f3460;
}
html.dark-mode .my-orders-table th {
  background: #0f3460;
  color: #ffffff;
  border-color: #0f3460;
}
html.dark-mode .my-orders-table td {
  border-color: #0f3460;
  color: #e0e0e0;
}

/* Links */
html.dark-mode a {
  color: #53a8ff;
}
html.dark-mode a:hover {
  color: #7ec8ff;
}

/* Headings */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
  color: #ffffff;
}

/* Top box / Search */
html.dark-mode #top-box {
  background: #16213e;
}
html.dark-mode #divcari .form-group {
  background: #16213e;
}

/* Footer - keep existing gradient, just adjust text if needed */
html.dark-mode #footer .footer-top {
  background: linear-gradient(135deg, rgba(40,45,80,1) 0%, rgba(30,35,70,1) 50%, rgba(20,25,60,1) 100%) !important;
}
html.dark-mode #footer .footer-bottom {
  background: linear-gradient(135deg, rgba(20,25,60,1) 0%, rgba(30,35,70,1) 50%, rgba(40,45,80,1) 100%) !important;
}
html.dark-mode #footer a,
html.dark-mode #footer .title,
html.dark-mode #footer strong,
html.dark-mode #footer p,
html.dark-mode #footer .copyright {
  color: #e0e0e0 !important;
}
html.dark-mode #footer .footer-icon svg path {
  fill: #e0e0e0 !important;
}

/* Slider */
html.dark-mode .slider.rs-slider .tparrows {
  background: #0f3460;
}

/* Modal */
html.dark-mode .modal-content {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: #0f3460;
}
html.dark-mode .modal-title {
  color: #fff;
}

/* Breadcrumbs */
html.dark-mode .breadcrumb-box {
  background: #16213e;
}
html.dark-mode .breadcrumb {
  background: #16213e;
}
html.dark-mode .breadcrumb > li + li::before {
  color: #53a8ff;
}

/* Alert */
html.dark-mode .alert {
  background: #16213e;
  border-color: #0f3460;
  color: #e0e0e0;
}

/* Well */
html.dark-mode .well {
  background: #16213e;
  border-color: #0f3460;
}

/* Badge / Label */
html.dark-mode .label-default {
  background: #0f3460;
}
html.dark-mode .badge {
  background: #0f3460;
  color: #fff;
}

/* Cart header */
html.dark-mode .cart-header .dropdown-menu {
  background: #0f3460 !important;
  border-color: #0f3460 !important;
}
html.dark-mode .cart-header .dropdown-toggle {
  color: #e0e0e0;
  background-color: transparent !important;
}
html.dark-mode .cart-header .dropdown-toggle:hover {
  background-color: #0f3460 !important;
  color: #ffffff !important;
}
html.dark-mode .cart-header.open .dropdown-toggle,
html.dark-mode .cart-header.open .dropdown-toggle:after {
  background-color: #0f3460 !important;
  border-color: #0f3460 !important;
}
html.dark-mode .cart-header .dropdown-menu strong {
  color: #fff;
}
html.dark-mode .cart-header .dropdown-menu .product-name a {
  color: #e0e0e0;
}
html.dark-mode .cart-header .dropdown-menu li:hover {
  background: #16213e;
}
html.dark-mode .cart-header .dropdown-menu li {
  border-bottom-color: #0f3460;
}
html.dark-mode .cart-header .dropdown-menu .product-price {
  color: #e0e0e0;
}
html.dark-mode .cart-header .dropdown-menu .product-price .price {
  color: #53a8ff;
}
html.dark-mode .cart-header .dropdown-menu .product-remove svg path {
  fill: #e0e0e0;
}
html.dark-mode .cart-header .dropdown-menu .product-remove:hover svg path {
  fill: #ff6b6b;
}
html.dark-mode .cart-header .dropdown-menu .cart-button .btn {
  background: #0f3460;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .cart-header .dropdown-menu .cart-button .btn:hover {
  background: #53a8ff;
  border-color: #53a8ff;
  color: #fff;
}

/* Cart page - Checkout & Bayar box */
html.dark-mode #car-bottom {
  border-color: #0f3460;
}
html.dark-mode .car-bottom-box {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .car-bottom-box.bg.total {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .car-bottom-box .tr-total td {
  color: #e0e0e0;
}
html.dark-mode .shopping-cart-table {
  border-color: #0f3460;
}
html.dark-mode .shopping-cart-table th {
  background: #0f3460;
  color: #ffffff;
  border-color: #0f3460;
}
html.dark-mode .shopping-cart-table td {
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .shopping-cart-table-button {
  border-color: #0f3460;
}
html.dark-mode .shopping-cart-table-button td {
  border-color: #0f3460;
}
html.dark-mode .btn.checkout.btn-default {
  background: #0f3460;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .btn.checkout.btn-default:hover {
  background: #53a8ff;
  border-color: #53a8ff;
  color: #fff;
}
html.dark-mode .btn-info {
  background: #0f3460;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .btn-info:hover {
  background: #53a8ff;
  border-color: #53a8ff;
  color: #fff;
}

/* Login / Register */
html.dark-mode .form-box {
  background: #16213e;
  border-color: #0f3460;
}

/* Radio & Checkbox text in dark mode */
html.dark-mode .radio,
html.dark-mode .checkbox {
  color: #e0e0e0;
}
html.dark-mode .info-box,
html.dark-mode .info-box .title,
html.dark-mode .info-box .descriptions,
html.dark-mode .form-box .title,
html.dark-mode .form-box .descriptions,
html.dark-mode .form-box label,
html.dark-mode .form-box .buttons-box,
html.dark-mode .form-box .forgot {
  color: #e0e0e0;
}
html.dark-mode .form-box .buttons-box .required {
  color: #ff6b6b;
}
html.dark-mode #customGoogleBtn {
  background: #16213e !important;
  border-color: #0f3460 !important;
  color: #e0e0e0 !important;
}

/* Scrollbar */
html.dark-mode ::-webkit-scrollbar {
  width: 8px;
}
html.dark-mode ::-webkit-scrollbar-track {
  background: #16213e;
}
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #0f3460;
  border-radius: 4px;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #53a8ff;
}

/* Product page */
html.dark-mode .product-page .image-box .thumblist-box .prev,
html.dark-mode .product-page .image-box .thumblist-box .next {
  background: #0f3460;
}

/* Description blocks */
html.dark-mode #catalog .category-img .description {
  background: #0f3460;
}

/* Category images */
html.dark-mode .category-image {
  border-color: #0f3460;
}

/* Tabs */
html.dark-mode .nav-tabs {
  border-color: #0f3460;
}
html.dark-mode .nav-tabs > li > a {
  color: #e0e0e0;
}
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover {
  background: #16213e;
  border-color: #0f3460;
  color: #53a8ff;
}

/* Progress bars */
html.dark-mode .progress {
  background: #16213e;
}

/* List group */
html.dark-mode .list-group-item {
  background: #16213e;
  border-color: #0f3460;
  color: #e0e0e0;
}

/* Caption */
html.dark-mode .sidebar .calendar-wrap caption {
  background: #0f3460;
}

/* Price display */
html.dark-mode .price {
  color: #53a8ff;
}

/* Newsletter / widget */
html.dark-mode .widget {
  color: #e0e0e0;
}
html.dark-mode .widget .title-block h3 {
  color: #fff;
}

/* Search input in top box */
html.dark-mode #divcari input[type="text"] {
  background: #16213e;
  border-color: #0f3460;
  color: #e0e0e0;
}

/* Transition for smooth switching */
html.dark-mode,
html.dark-mode * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ===== Content Page Elements ===== */
html.dark-mode .kotak_diskon {
  color: #e0e0e0 !important;
  border-color: #0f3460 !important;
}
html.dark-mode .price-old {
  color: #ff6b6b !important;
}
html.dark-mode .description {
  color: #e0e0e0;
}
html.dark-mode .content-block .title {
  color: #fff;
  border-color: #0f3460;
}

/* ===== Category Banner Section ===== */
html.dark-mode .banner-set {
  background: #16213e;
  border-color: #0f3460;
}
html.dark-mode .banner-set .title {
  color: #e0e0e0;
}
html.dark-mode .banner-set .banner {
  color: #e0e0e0;
  border-color: #0f3460;
}
html.dark-mode .banner-set .banner:first-child {
  border-color: #0f3460;
}
html.dark-mode .banner-set:before,
html.dark-mode .banner-set > .container:after {
  border-top-color: #0f3460;
}

/* ===== Product listing ===== */
html.dark-mode .product .product-name a {
  color: #e0e0e0;
}
html.dark-mode .product .product-name a:hover {
  color: #53a8ff;
}
html.dark-mode .product .price-box {
  color: #e0e0e0;
}
html.dark-mode .product .price-old {
  color: #ff6b6b !important;
}
html.dark-mode .product .description b {
  color: #53a8ff;
}

/* ===== Slider title/description ===== */
html.dark-mode .slider .tp-caption.title {
  color: #fff !important;
}
html.dark-mode .slider .tp-caption.description {
  color: #e0e0e0 !important;
}

/* ===== Search box ===== */
html.dark-mode .search-form .form-control {
  background: #16213e;
  border-color: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .search-form .btn-danger {
  background: #e74c3c;
  border-color: #c0392b;
}

/* ===== Top box ===== */
html.dark-mode #top-box {
  background: #16213e !important;
  border-color: #0f3460;
}

/* ===== Page content wrapper ===== */
html.dark-mode .page-box-content {
  background: #16213e !important;
}
html.dark-mode .page-box-content p,
html.dark-mode .page-box-content strong,
html.dark-mode .page-box-content b,
html.dark-mode .page-box-content span,
html.dark-mode .page-box-content label,
html.dark-mode .page-box-content li {
  color: #e0e0e0;
}

/* ===== Content block titles ===== */
html.dark-mode .content-block .title,
html.dark-mode .frame .title {
  color: #fff;
  border-bottom-color: #0f3460;
}

/* ===== Category images ===== */
html.dark-mode .category-img img {
  border-color: #0f3460;
}

/* ===== Newsletter widget ===== */
html.dark-mode .widget.newsletter {
  color: #e0e0e0;
}
html.dark-mode .widget.newsletter p {
  color: #b0b0b0;
}

/* ===== Social icons ===== */
html.dark-mode .social-list .icon {
  background: #0f3460;
  color: #e0e0e0;
}
html.dark-mode .social-list .icon:hover {
  background: #53a8ff;
  color: #fff;
}

/* ===== Fixed header override ===== */
html.dark-mode .fixed-header .header .header-wrapper,
html.dark-mode .fixed-header.background-opacity .header .header-wrapper {
  background: #16213e !important;
}

/* ===== Body background ===== */
html.dark-mode body {
  background: #16213e !important;
}

/* ===== COMPREHENSIVE SUBMENU / DROPDOWN OVERRIDE ===== */
/* Force override ALL white backgrounds on submenus */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .parent .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .parent:hover > .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .parent .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .parent:hover > .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .megamenu > .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .item-primary .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .item-success .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .item-info .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .item-warning .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .item-danger .sub,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li.item-bg .sub,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .navbar-collapse .nav .sub,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .navbar-collapse .nav .parent .sub,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .navbar-collapse .nav .parent:hover > .sub,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .navbar-collapse .nav .megamenu > .sub,
html.dark-mode .minimized-menu .header-wrapper .primary .navbar .navbar-collapse .nav > li.item-bg .sub,
html.dark-mode .header .header-wrapper + .header-wrapper .primary .megamenu > .sub,
html.dark-mode .dropdown-menu > li > a,
html.dark-mode .open > .dropdown-menu {
  background: #16213e !important;
  background-color: #16213e !important;
  color: #ffffff;
  border-color: #0f3460 !important;
  left: 0 !important;
  right: auto !important;
}
/* Cart dropdown keeps right alignment */
html.dark-mode .dropdown-menu.cart-header-dropdown,
html.dark-mode .cart-header .dropdown-menu {
  background: #16213e !important;
  background-color: #16213e !important;
  color: #ffffff;
  border-color: #0f3460 !important;
  left: auto !important;
  right: 0 !important;
}

/* ===== FINAL OVERRIDE: Hamburger menu main items font color white ===== */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a {
  color: #ffffff !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a:hover {
  color: #53a8ff !important;
}

/* ===== FINAL OVERRIDE: Accordion submenu items font color white ===== */
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav li.parent .sub li a,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav li.parent .sub a {
  color: #ffffff !important;
  background-color: transparent !important;
}
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub li a:hover,
html.dark-mode .header .header-wrapper .primary .navbar .navbar-collapse .nav .sub a:hover {
  color: #53a8ff !important;
  background: #0f3460 !important;
}

/* ===== selectBox dropdown dark mode (pilih_produk & all selects) ===== */
html.dark-mode .selectBox,
html.dark-mode .selectBox-dropdown {
  background-color: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #53a8ff !important;
}
html.dark-mode .selectBox-label {
  color: #ffffff !important;
}
html.dark-mode .selectBox-arrow {
  filter: invert(1);
}
html.dark-mode .selectBox-dropdown-menu {
  background-color: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #53a8ff !important;
}
html.dark-mode .selectBox-options li a {
  color: #ffffff !important;
}
html.dark-mode .selectBox-options li a:hover {
  background-color: #0f3460 !important;
  color: #ffffff !important;
}
html.dark-mode .selectBox-options li.selectBox-selected a {
  background-color: #16213e !important;
  color: #ffffff !important;
}

/* ===== Product image/card background blends with theme ===== */
html.dark-mode .product-image {
  background: transparent !important;
}
html.dark-mode .product .default {
  background: transparent !important;
}