/* ==========================================================================
   LAXMI JEWELLERS KANPUR | LUXURY DARK MODE STYLESHEET
   Only active when html has class 'dark-mode'.
   Zero impact on light mode when dark-mode is inactive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT VARIABLES (DARK PALETTE)
   -------------------------------------------------------------------------- */
html.dark-mode {
  --dm-bg-body: #121214;
  --dm-bg-surface: #18181c;
  --dm-bg-card: #1d1d22;
  --dm-bg-card-hover: #23232a;
  --dm-bg-elevated: #26262e;
  --dm-bg-input: #232329;
  --dm-border-subtle: #292932;
  --dm-border-medium: #353542;
  --dm-text-primary: #f8fafc;
  --dm-text-secondary: #cbd5e1;
  --dm-text-muted: #94a3b8;
  --dm-gold-primary: #e6b749;
  --dm-gold-hover: #f3c75d;
  --dm-price-color: #f59e0b;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. GLOBAL BODY & MAIN WRAPPER
   -------------------------------------------------------------------------- */
html.dark-mode,
html.dark-mode body,
html.dark-mode .aiz-main-wrapper {
  background-color: var(--dm-bg-body) !important;
  color: var(--dm-text-secondary) !important;
}

/* Transitions for smooth flipping */
html.dark-mode body,
html.dark-mode .aiz-main-wrapper,
html.dark-mode header,
html.dark-mode .aiz-card-box,
html.dark-mode .card,
html.dark-mode #cart-drawer-panel {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* --------------------------------------------------------------------------
   3. HEADINGS & TYPOGRAPHY
   -------------------------------------------------------------------------- */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .h1,
html.dark-mode .h2,
html.dark-mode .h3,
html.dark-mode .h4,
html.dark-mode .h5,
html.dark-mode .h6,
html.dark-mode strong,
html.dark-mode b {
  color: var(--dm-text-primary) !important;
}

html.dark-mode p,
html.dark-mode span:not(.badge):not(.text-primary):not(.btn),
html.dark-mode li,
html.dark-mode label {
  color: inherit;
}

html.dark-mode .text-dark,
html.dark-mode .text-main,
html.dark-mode .text-body,
html.dark-mode .text-reset {
  color: var(--dm-text-primary) !important;
}

html.dark-mode .text-muted,
html.dark-mode .text-secondary {
  color: var(--dm-text-muted) !important;
}

html.dark-mode a:not(.btn):not(.addtocard):not(.badge) {
  color: var(--dm-text-secondary);
}

html.dark-mode a:not(.btn):not(.addtocard):not(.badge):hover {
  color: var(--dm-gold-hover) !important;
}

/* --------------------------------------------------------------------------
   4. BORDERS & DIVIDERS
   -------------------------------------------------------------------------- */
html.dark-mode hr,
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right,
html.dark-mode .border-soft-light {
  border-color: var(--dm-border-subtle) !important;
}

/* --------------------------------------------------------------------------
   5. HEADER & TOP NAVIGATION
   -------------------------------------------------------------------------- */
html.dark-mode header,
html.dark-mode header.z-1020,
html.dark-mode header.bg-white,
html.dark-mode .site-header-logo-bar,
html.dark-mode .logo-bar-area,
html.dark-mode .site-header-nav-with-cta,
html.dark-mode .book-event-btn-wrap {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-subtle) !important;
}

/* Top Promo Bar */
html.dark-mode .site-header-promo {
  background: #733f15 !important;
  border-bottom: 1px solid rgba(230, 183, 73, 0.25) !important;
}

/* Header Links */
html.dark-mode .site-header-nav-menu-wrap a,
html.dark-mode .site-header-nav-with-cta a,
html.dark-mode .nav-user-info a,
html.dark-mode .nav-box-link {
  color: var(--dm-text-primary) !important;
}

html.dark-mode .site-header-nav-menu-wrap a:hover,
html.dark-mode .nav-box-link:hover {
  color: var(--dm-gold-primary) !important;
}

/* Search input */
html.dark-mode .front-header-search,
html.dark-mode .front-header-search .bg-white {
  background-color: transparent !important;
}

html.dark-mode .search-input-box input,
html.dark-mode .front-header-search input {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-medium) !important;
}

html.dark-mode .search-input-box input::placeholder,
html.dark-mode .front-header-search input::placeholder {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .search-input-box input:focus {
  border-color: var(--dm-gold-primary) !important;
  box-shadow: 0 0 0 2px rgba(230, 183, 73, 0.2) !important;
}

html.dark-mode .search-input-box svg path {
  fill: var(--dm-text-muted) !important;
}

/* Auto-complete Search Results Dropdown */
html.dark-mode .typed-search-box {
  background-color: var(--dm-bg-elevated) !important;
  border: 1px solid var(--dm-border-medium) !important;
  color: var(--dm-text-primary) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .typed-search-box a {
  color: var(--dm-text-primary) !important;
}

html.dark-mode .typed-search-box a:hover {
  background-color: var(--dm-bg-card-hover) !important;
  color: var(--dm-gold-primary) !important;
}

/* Header SVG & Icons */
html.dark-mode button[data-target=".aiz-top-menu-sidebar"] svg rect {
  fill: var(--dm-text-primary) !important;
}

html.dark-mode .nav-box-icon {
  color: var(--dm-text-primary) !important;
}

/* Mobile Header search & cart links */
html.dark-mode .site-header-mobile-trailing a {
  color: var(--dm-text-primary) !important;
}

/* Top menu sidebar */
html.dark-mode .aiz-top-menu-sidebar,
html.dark-mode .menu-collapse-sidebar {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-subtle) !important;
}

html.dark-mode .aiz-top-menu-sidebar a,
html.dark-mode .menu-collapse-sidebar a {
  color: var(--dm-text-primary) !important;
}

/* --------------------------------------------------------------------------
   6. CARDS & PRODUCT BOXES (JEWELRY DISPLAY)
   -------------------------------------------------------------------------- */
html.dark-mode .aiz-card-box,
html.dark-mode .card,
html.dark-mode .carousel-box .has-transition {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-subtle) !important;
  color: var(--dm-text-primary) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .aiz-card-box:hover,
html.dark-mode .card:hover {
  background-color: var(--dm-bg-card-hover) !important;
  border-color: var(--dm-gold-primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Product title */
html.dark-mode .product-name-title,
html.dark-mode .product-name-title a {
  color: var(--dm-text-primary) !important;
}

html.dark-mode .product-name-title a:hover {
  color: var(--dm-gold-primary) !important;
}

/* Product pricing */
html.dark-mode .text-primary,
html.dark-mode span.text-primary,
html.dark-mode .fw-700.text-primary {
  color: var(--dm-price-color) !important;
}

html.dark-mode del,
html.dark-mode .disc-amount del {
  color: var(--dm-text-muted) !important;
}

/* Product Image container */
html.dark-mode .imgheight,
html.dark-mode .img-fit {
  background-color: #17171a;
}

/* CRITICAL: Keep jewelry images 100% natural and bright */
html.dark-mode img,
html.dark-mode picture,
html.dark-mode video,
html.dark-mode canvas {
  filter: none !important;
}

/* Wishlist & Compare floating buttons on cards */
html.dark-mode .aiz-p-hov-icon a {
  background-color: rgba(30, 30, 36, 0.9) !important;
  border: 1px solid var(--dm-border-medium) !important;
}

html.dark-mode .aiz-p-hov-icon svg path {
  fill: var(--dm-text-primary) !important;
}

html.dark-mode .aiz-p-hov-icon a:hover svg path {
  fill: var(--dm-gold-primary) !important;
}

/* Add to Cart button (Keep orange/gold gradient prominent) */
html.dark-mode .addtocard {
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4) !important;
}

/* Section headings */
html.dark-mode .home-section-heading-wrap h2,
html.dark-mode .home-section-heading-wrap h3,
html.dark-mode .home-section-title {
  color: var(--dm-text-primary) !important;
}

html.dark-mode .home-section-arrows a {
  color: var(--dm-text-primary) !important;
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-subtle) !important;
}

/* --------------------------------------------------------------------------
   7. PRODUCT DETAILS PAGE (PDP)
   -------------------------------------------------------------------------- */
html.dark-mode .product-details-area,
html.dark-mode .product-gallery,
html.dark-mode .product-description,
html.dark-mode .product-info {
  background-color: var(--dm-bg-body) !important;
  color: var(--dm-text-primary) !important;
}

html.dark-mode .product-gallery-thumb,
html.dark-mode .thumb-item {
  border-color: var(--dm-border-subtle) !important;
  background-color: var(--dm-bg-card) !important;
}

html.dark-mode .thumb-item.active,
html.dark-mode .thumb-item:hover {
  border-color: var(--dm-gold-primary) !important;
}

html.dark-mode .qty-btn,
html.dark-mode .quantity-btn,
html.dark-mode .quantity input {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-border-medium) !important;
  color: var(--dm-text-primary) !important;
}

html.dark-mode .aiz-accordion-heading,
html.dark-mode .accordion-item,
html.dark-mode .accordion-header,
html.dark-mode .accordion-button {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-subtle) !important;
}

html.dark-mode .accordion-body {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-secondary) !important;
}

html.dark-mode .rubans-mobile-sticky-bar {
  background-color: var(--dm-bg-surface) !important;
  border-top-color: var(--dm-border-subtle) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* --------------------------------------------------------------------------
   8. CART DRAWER & CART PAGE
   -------------------------------------------------------------------------- */
html.dark-mode #cart-drawer-panel,
html.dark-mode .cart-drawer-panel {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-primary) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .cart-drawer-header,
html.dark-mode .cart-drawer-header-title,
html.dark-mode .cart-drawer-footer-panel,
html.dark-mode .cart-drawer-footer-mount {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-subtle) !important;
}

html.dark-mode .cart-drawer-close {
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-medium) !important;
}

html.dark-mode .cart-item,
html.dark-mode .cart-items-wrap {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-subtle) !important;
  color: var(--dm-text-primary) !important;
}

html.dark-mode .cart-summary-box,
html.dark-mode .cart-drawer-summary {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-subtle) !important;
  color: var(--dm-text-primary) !important;
}

/* --------------------------------------------------------------------------
   9. CHECKOUT PAGE & FORMS
   -------------------------------------------------------------------------- */
html.dark-mode .checkout-step,
html.dark-mode .checkout-summary,
html.dark-mode .shipping-info-wrap {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-subtle) !important;
  color: var(--dm-text-primary) !important;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="tel"],
html.dark-mode select,
html.dark-mode textarea {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-medium) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-gold-primary) !important;
  box-shadow: 0 0 0 2px rgba(230, 183, 73, 0.25) !important;
}

html.dark-mode .table,
html.dark-mode .table th,
html.dark-mode .table td {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-subtle) !important;
}

/* Checkout payment method choice cards */
html.dark-mode .buy-now-choice-card,
html.dark-mode .cod-choice-card {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-medium) !important;
  color: var(--dm-text-primary) !important;
}

html.dark-mode .online-choice-card {
  background: linear-gradient(180deg, #241913 0%, #1a1716 100%) !important;
  border-color: #ff6a00 !important;
}

/* --------------------------------------------------------------------------
   10. MODALS & DROPDOWNS
   -------------------------------------------------------------------------- */
html.dark-mode .modal-content {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-primary) !important;
  border: 1px solid var(--dm-border-medium) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: var(--dm-border-subtle) !important;
}

html.dark-mode .modal-header .close {
  color: var(--dm-text-primary) !important;
  text-shadow: none !important;
}

html.dark-mode .dropdown-menu {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border-medium) !important;
  color: var(--dm-text-primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .dropdown-item {
  color: var(--dm-text-primary) !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background-color: var(--dm-bg-card-hover) !important;
  color: var(--dm-gold-primary) !important;
}

/* --------------------------------------------------------------------------
   11. FOOTER & MOBILE BOTTOM NAV
   -------------------------------------------------------------------------- */
html.dark-mode footer,
html.dark-mode .bg-dark {
  background-color: #0b0b0e !important;
  border-top: 1px solid var(--dm-border-subtle) !important;
  color: var(--dm-text-muted) !important;
}

html.dark-mode .aiz-mobile-bottom-nav {
  background-color: rgba(18, 18, 22, 0.96) !important;
  border-top-color: var(--dm-border-subtle) !important;
}

html.dark-mode .aiz-mobile-bottom-nav .mobile-nav-link {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .aiz-mobile-bottom-nav .mobile-nav-link.text-primary,
html.dark-mode .aiz-mobile-bottom-nav .mobile-nav-link.active,
html.dark-mode .aiz-mobile-bottom-nav .svg-active {
  color: var(--dm-gold-primary) !important;
}

html.dark-mode .aiz-mobile-bottom-nav svg path {
  fill: var(--dm-text-muted);
}

html.dark-mode .aiz-mobile-bottom-nav .svg-active svg path,
html.dark-mode .aiz-mobile-bottom-nav .mobile-nav-link:hover svg path {
  fill: var(--dm-gold-primary) !important;
}

/* --------------------------------------------------------------------------
   12. THEME MODE TOGGLE BUTTONS (SUN / MOON)
   -------------------------------------------------------------------------- */
.theme-mode-toggle-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  outline: none !important;
  box-sizing: border-box;
}

.theme-mode-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #d97706;
  transform: translateY(-1px);
}

/* Inside Dark Mode */
html.dark-mode .theme-mode-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f3c75d;
  border-color: rgba(255, 255, 255, 0.15);
}

html.dark-mode .theme-mode-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fde047;
  box-shadow: 0 0 12px rgba(243, 199, 93, 0.35);
}

/* Sun/Moon visibility switch */
/* In light mode: show moon, hide sun */
.theme-icon-light {
  display: none !important;
}
.theme-icon-dark {
  display: inline-flex !important;
}

/* In dark mode: show sun, hide moon */
html.dark-mode .theme-icon-light {
  display: inline-flex !important;
}
html.dark-mode .theme-icon-dark {
  display: none !important;
}

/* FLOATING QUICK THEME SWITCH (Bottom-Left Corner) */
.floating-theme-toggle {
  position: fixed;
  bottom: 80px;
  left: 20px;
  z-index: 99999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #0f172a;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none !important;
}

.floating-theme-toggle:hover {
  transform: scale(1.08) rotate(12deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

html.dark-mode .floating-theme-toggle {
  background: #1e1e24;
  color: #f3c75d;
  border-color: #3b3b48;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(243, 199, 93, 0.25);
}

html.dark-mode .floating-theme-toggle:hover {
  background: #272730;
  color: #fde047;
}

.floating-theme-toggle i {
  font-size: 20px;
}

@media (max-width: 768px) {
  .floating-theme-toggle {
    bottom: 68px;
    left: 14px;
    width: 38px;
    height: 38px;
  }
  .floating-theme-toggle i {
    font-size: 17px;
  }
}