/* ==========================================================================
   Dora Silver - Global Stylesheet (style.css)
   Header & Theme Visibility System (Mobile, Tablet, Desktop & Drawers)
   ========================================================================== */

/* ── 0. Mobile Tap Delay Elimination (300ms Delay Fix) ── */
a,
button,
input,
select,
.icon,
svg,
[role="button"] {
  touch-action: manipulation;
}

/* ── 1. Dynamic Theme Variables (CSS Variables) ── */
:root,
.light-mode,
[data-theme="light"],
html:not(.dark) {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --text-muted: #4b5563;
  --header-bg: #ffffff;
  --header-border: #e5e7eb;
  --header-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  --drawer-bg: #ffffff;
  --drawer-text: #111827;
  --drawer-muted: #6b7280;
  --drawer-border: #e5e7eb;
  --drawer-footer-bg: #f9fafb;
}

.dark,
.dark-mode,
[data-theme="dark"],
html.dark {
  --bg-color: #0a0a0a;
  --text-color: #ffffff;
  --text-muted: #9ca3af;
  --header-bg: #0a0a0a;
  --header-border: rgba(255, 255, 255, 0.1);
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  --drawer-bg: #141414;
  --drawer-text: #f5f5f5;
  --drawer-muted: #8a8a8a;
  --drawer-border: rgba(255, 255, 255, 0.1);
  --drawer-footer-bg: #141414;
}

/* ── 2. Header Container Stacking Context ── */
header {
  position: relative;
  z-index: 60;
}

/* ── 3. Navbar Background System (Light Mode: ALWAYS SOLID/FROSTED WHITE on PC & Mobile) ── */
html:not(.dark) #navbar,
html:not(.dark) .navbar,
html:not(.dark) .mobile-header,
.light-mode #navbar,
.light-mode .navbar,
.light-mode .mobile-header,
[data-theme="light"] #navbar,
[data-theme="light"] .navbar,
[data-theme="light"] .mobile-header {
  background-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Mobile Header Padding */
@media (max-width: 768px) {
  html:not(.dark) #navbar,
  .light-mode #navbar,
  [data-theme="light"] #navbar {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  /* Dark Mode Mobile Header */
  html.dark #navbar,
  html.dark .navbar,
  html.dark .mobile-header,
  .dark-mode #navbar,
  .dark-mode .navbar,
  .dark-mode .mobile-header,
  [data-theme="dark"] #navbar,
  [data-theme="dark"] .navbar,
  [data-theme="dark"] .mobile-header {
    background-color: var(--header-bg, #0a0a0a) !important;
    background: var(--header-bg, #0a0a0a) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }
}

/* Desktop Header Padding in Light Mode */
@media (min-width: 769px) {
  html:not(.dark) #navbar {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
  }
}

/* Dark Mode Scrolled Navbar on PC */
html.dark #navbar.scrolled,
html.dark header.scrolled,
.dark-mode #navbar.scrolled,
[data-theme="dark"] #navbar.scrolled {
  background: rgba(10, 10, 10, 0.96) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  border-bottom: 1px solid rgba(192, 192, 192, 0.1) !important;
}

/* ── 4. Nav Links & Actions in Header ── */
.nav-link {
  position: relative;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #1f2937 !important;
  transition: color 0.3s;
}
.nav-link:hover {
  color: #000000 !important;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: #111827;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after {
  width: 100%;
}

html.dark .nav-link,
.dark-mode .nav-link,
[data-theme="dark"] .nav-link {
  color: #c0c0c0 !important;
}
html.dark .nav-link:hover,
.dark-mode .nav-link:hover,
[data-theme="dark"] .nav-link:hover {
  color: #ffffff !important;
}
html.dark .nav-link::after,
.dark-mode .nav-link::after,
[data-theme="dark"] .nav-link::after {
  background: #c0c0c0;
}

/* ── 5. Dynamic SVG Icon Colors & Fill/Stroke Bindings in Header ── */
header nav svg,
#navbar svg,
.navbar svg,
.mobile-header svg {
  color: var(--text-color) !important;
  stroke: var(--text-color) !important;
  transition: stroke 0.3s ease, color 0.3s ease, fill 0.3s ease;
}

header nav svg[fill]:not([fill="none"]),
#navbar svg[fill]:not([fill="none"]),
.navbar svg[fill]:not([fill="none"]),
.mobile-header svg[fill]:not([fill="none"]) {
  fill: var(--text-color) !important;
}

header nav button,
#navbar button,
.navbar button,
.mobile-header button {
  color: var(--text-color) !important;
}

/* Hamburger Menu 3 Lines Dynamic Color */
#menu-btn span,
#navbar #menu-btn span,
header #menu-btn span,
.mobile-header #menu-btn span,
#hb1,
#hb2,
#hb3 {
  background-color: var(--text-color) !important;
  transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Language selector active flag */
#active-lang-flag {
  color: var(--text-color) !important;
}
#lang-selector button {
  color: var(--text-color) !important;
}
#lang-selector button svg {
  stroke: var(--text-color) !important;
}

/* ── 6. Brand Logo Responsive Sizing & Dynamic Theme Filter (.brand-logo) ── */
.brand-logo {
  min-width: 120px;
  min-height: 30px;
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 768px) {
  .brand-logo {
    min-width: 90px;
    min-height: 24px;
    max-height: 32px;
  }
}

/* Light Mode: Logonun orijinal rengi beyaz olduğundan brightness(0) ile saf siyaha çeviriyoruz */
html:not(.dark) .brand-logo,
.light-mode .brand-logo,
[data-theme="light"] .brand-logo,
html:not(.dark) #logo-link img,
.light-mode #logo-link img,
[data-theme="light"] #logo-link img,
html:not(.dark) .navbar-logo img,
html:not(.dark) header a img,
html:not(.dark) #footer-logo img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}

/* Dark Mode: Logonun orijinal rengi zaten beyaz olduğundan saf beyaz tutuyoruz */
html.dark .brand-logo,
.dark-mode .brand-logo,
[data-theme="dark"] .brand-logo,
html.dark #logo-link img,
.dark-mode #logo-link img,
[data-theme="dark"] #logo-link img,
html.dark .navbar-logo img,
html.dark header a img,
html.dark #footer-logo img {
  filter: brightness(1) invert(0) !important;
  opacity: 1 !important;
}

/* ── 7. Drawer Visibility System (Wishlist & Cart) in Light & Dark Modes ── */
/* Drawer Panels */
html:not(.dark) #wishlist-drawer,
html:not(.dark) #cart-drawer,
.light-mode #wishlist-drawer,
.light-mode #cart-drawer,
[data-theme="light"] #wishlist-drawer,
[data-theme="light"] #cart-drawer {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-left-color: #e5e7eb !important;
}

html.dark #wishlist-drawer,
html.dark #cart-drawer,
.dark-mode #wishlist-drawer,
.dark-mode #cart-drawer,
[data-theme="dark"] #wishlist-drawer,
[data-theme="dark"] #cart-drawer {
  background-color: #141414 !important;
  color: #f5f5f5 !important;
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Drawer Headers */
html:not(.dark) #wishlist-drawer h2,
html:not(.dark) #wishlist-drawer h3,
html:not(.dark) #cart-drawer h2,
html:not(.dark) #cart-drawer h3,
.light-mode #wishlist-drawer h2,
.light-mode #wishlist-drawer h3,
.light-mode #cart-drawer h2,
.light-mode #cart-drawer h3 {
  color: #111827 !important;
}

html:not(.dark) #drawer-wishlist-count,
html:not(.dark) #drawer-cart-count,
.light-mode #drawer-wishlist-count,
.light-mode #drawer-cart-count {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

html:not(.dark) #wishlist-drawer [data-i18n="collection_title"],
html:not(.dark) #cart-drawer [data-i18n="shopping_title"],
.light-mode #wishlist-drawer [data-i18n="collection_title"],
.light-mode #cart-drawer [data-i18n="shopping_title"] {
  color: #6b7280 !important;
}

/* Close Buttons */
html:not(.dark) #wishlist-close,
html:not(.dark) #cart-close,
.light-mode #wishlist-close,
.light-mode #cart-close {
  color: #374151 !important;
  border-color: #d1d5db !important;
}
html:not(.dark) #wishlist-close svg,
html:not(.dark) #cart-close svg,
.light-mode #wishlist-close svg,
.light-mode #cart-close svg {
  stroke: #374151 !important;
}
html:not(.dark) #wishlist-close:hover,
html:not(.dark) #cart-close:hover,
.light-mode #wishlist-close:hover,
.light-mode #cart-close:hover {
  background-color: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #000000 !important;
}

/* Empty States */
html:not(.dark) #wishlist-empty svg,
html:not(.dark) #cart-empty svg,
.light-mode #wishlist-empty svg,
.light-mode #cart-empty svg {
  color: #9ca3af !important;
  stroke: #9ca3af !important;
}

html:not(.dark) #wishlist-empty p,
html:not(.dark) #cart-empty p,
.light-mode #wishlist-empty p,
.light-mode #cart-empty p {
  color: #374151 !important;
}

html:not(.dark) [data-i18n="wishlist_empty_title"],
html:not(.dark) [data-i18n="cart_empty_title"],
.light-mode [data-i18n="wishlist_empty_title"],
.light-mode [data-i18n="cart_empty_title"] {
  color: #111827 !important;
  font-weight: 500 !important;
}

html:not(.dark) [data-i18n="wishlist_empty_desc"],
html:not(.dark) [data-i18n="cart_empty_desc"],
.light-mode [data-i18n="wishlist_empty_desc"],
.light-mode [data-i18n="cart_empty_desc"] {
  color: #6b7280 !important;
}

/* Items inside Drawers */
html:not(.dark) #wishlist-items h4,
html:not(.dark) #cart-items p.ci-name,
html:not(.dark) #cart-items h4.ci-name,
.light-mode #wishlist-items h4,
.light-mode #cart-items p.ci-name,
.light-mode #cart-items h4.ci-name {
  color: #111827 !important;
}

html:not(.dark) #wishlist-items p,
html:not(.dark) #cart-items p,
.light-mode #wishlist-items p,
.light-mode #cart-items p {
  color: #4b5563 !important;
}

html:not(.dark) .ci-qty,
.light-mode .ci-qty {
  color: #111827 !important;
}

html:not(.dark) .ci-minus,
html:not(.dark) .ci-plus,
html:not(.dark) .ci-qty-minus,
html:not(.dark) .ci-qty-plus,
.light-mode .ci-minus,
.light-mode .ci-plus,
.light-mode .ci-qty-minus,
.light-mode .ci-qty-plus {
  color: #374151 !important;
}

html:not(.dark) .ci-remove svg,
.light-mode .ci-remove svg {
  stroke: #9ca3af !important;
}
html:not(.dark) .ci-remove:hover svg,
.light-mode .ci-remove:hover svg {
  stroke: #ef4444 !important;
}

html:not(.dark) #cart-drawer .bg-charcoal,
.light-mode #cart-drawer .bg-charcoal {
  background-color: #f9fafb !important;
  border-top-color: #e5e7eb !important;
}

html:not(.dark) #cart-drawer .bg-charcoal span,
.light-mode #cart-drawer .bg-charcoal span {
  color: #111827 !important;
}

html:not(.dark) #cart-drawer .bg-charcoal [data-i18n="cart_subtotal_lbl"],
html:not(.dark) #cart-drawer .bg-charcoal [data-i18n="cart_shipping_lbl"],
.light-mode #cart-drawer .bg-charcoal [data-i18n="cart_subtotal_lbl"],
.light-mode #cart-drawer .bg-charcoal [data-i18n="cart_shipping_lbl"] {
  color: #6b7280 !important;
}

html:not(.dark) #cart-subtotal,
html:not(.dark) #cart-total,
.light-mode #cart-subtotal,
.light-mode #cart-total {
  color: #111827 !important;
  font-weight: 500 !important;
}

/* Product Detail Drawer Card & Footer Styles */
html:not(.dark) #wishlist-items > div,
html:not(.dark) #cart-items > div,
.light-mode #wishlist-items > div,
.light-mode #cart-items > div {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}
html:not(.dark) #wishlist-items > div p.text-pearl,
html:not(.dark) #cart-items > div p.text-pearl,
.light-mode #wishlist-items > div p.text-pearl,
.light-mode #cart-items > div p.text-pearl {
  color: #111827 !important;
}
html:not(.dark) #wishlist-items > div p.text-silver,
html:not(.dark) #cart-items > div p.text-silver,
.light-mode #wishlist-items > div p.text-silver,
.light-mode #cart-items > div p.text-silver {
  color: #374151 !important;
}

html:not(.dark) #cart-drawer .bg-obsidian\/40,
.light-mode #cart-drawer .bg-obsidian\/40 {
  background-color: #f9fafb !important;
  border-top-color: #e5e7eb !important;
}
html:not(.dark) #cart-drawer .bg-obsidian\/40 span,
.light-mode #cart-drawer .bg-obsidian\/40 span {
  color: #111827 !important;
}

html:not(.dark) #cart-order-form,
.light-mode #cart-order-form {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}
html:not(.dark) #cart-order-form span,
.light-mode #cart-order-form span {
  color: #111827 !important;
}
html:not(.dark) #cart-order-form input,
.light-mode #cart-order-form input {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* ── 8. Language Dropdown Visibility System (Light & Dark Modes) ── */
/* Light Mode Dropdown Box */
html:not(.dark) .lang-dropdown-menu,
html:not(.dark) .language-dropdown,
html:not(.dark) #lang-selector .lang-dropdown-menu,
.light-mode .lang-dropdown-menu,
.light-mode .language-dropdown,
.light-mode #lang-selector .lang-dropdown-menu,
[data-theme="light"] .lang-dropdown-menu,
[data-theme="light"] .language-dropdown,
[data-theme="light"] #lang-selector .lang-dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  border-radius: 0.375rem;
}

/* Light Mode Dropdown Buttons (Default) */
html:not(.dark) .lang-dropdown-menu button,
html:not(.dark) .language-dropdown button,
html:not(.dark) #lang-selector .lang-dropdown-menu button,
.light-mode .lang-dropdown-menu button,
.light-mode .language-dropdown button,
.light-mode #lang-selector .lang-dropdown-menu button,
[data-theme="light"] .lang-dropdown-menu button,
[data-theme="light"] .language-dropdown button,
[data-theme="light"] #lang-selector .lang-dropdown-menu button {
  color: #374151 !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Light Mode Dropdown Buttons Hover */
html:not(.dark) .lang-dropdown-menu button:hover,
html:not(.dark) .language-dropdown button:hover,
html:not(.dark) #lang-selector .lang-dropdown-menu button:hover,
.light-mode .lang-dropdown-menu button:hover,
.light-mode .language-dropdown button:hover,
.light-mode #lang-selector .lang-dropdown-menu button:hover,
[data-theme="light"] .lang-dropdown-menu button:hover,
[data-theme="light"] .language-dropdown button:hover,
[data-theme="light"] #lang-selector .lang-dropdown-menu button:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Light Mode Dropdown Buttons Active / Selected */
html:not(.dark) .lang-dropdown-menu button.active,
html:not(.dark) .language-dropdown button.active,
html:not(.dark) #lang-selector .lang-dropdown-menu button.active,
html:not(.dark) .lang-dropdown-menu button[data-active="true"],
html:not(.dark) .language-dropdown button[data-active="true"],
html:not(.dark) #lang-selector .lang-dropdown-menu button[data-active="true"],
html:not(.dark) .lang-dropdown-menu button.text-pearl,
html:not(.dark) .language-dropdown button.text-pearl,
html:not(.dark) #lang-selector .lang-dropdown-menu button.text-pearl,
.light-mode .lang-dropdown-menu button.active,
.light-mode .language-dropdown button.active,
.light-mode #lang-selector .lang-dropdown-menu button.active,
[data-theme="light"] .lang-dropdown-menu button.active,
[data-theme="light"] .language-dropdown button.active,
[data-theme="light"] #lang-selector .lang-dropdown-menu button.active {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  font-weight: 600 !important;
}

/* Light Mode Text Spans inherit */
html:not(.dark) .lang-dropdown-menu button span,
html:not(.dark) .language-dropdown button span,
html:not(.dark) #lang-selector .lang-dropdown-menu button span,
.light-mode .lang-dropdown-menu button span,
.light-mode .language-dropdown button span,
[data-theme="light"] .lang-dropdown-menu button span {
  color: inherit !important;
}

/* Dark Mode Dropdown Box */
html.dark .lang-dropdown-menu,
html.dark .language-dropdown,
html.dark #lang-selector .lang-dropdown-menu,
.dark .lang-dropdown-menu,
.dark .language-dropdown,
.dark #lang-selector .lang-dropdown-menu,
.dark-mode .lang-dropdown-menu,
.dark-mode .language-dropdown,
.dark-mode #lang-selector .lang-dropdown-menu,
[data-theme="dark"] .lang-dropdown-menu,
[data-theme="dark"] .language-dropdown,
[data-theme="dark"] #lang-selector .lang-dropdown-menu {
  background-color: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7) !important;
}

/* Dark Mode Dropdown Buttons (Default) */
html.dark .lang-dropdown-menu button,
html.dark .language-dropdown button,
html.dark #lang-selector .lang-dropdown-menu button,
.dark .lang-dropdown-menu button,
.dark .language-dropdown button,
.dark #lang-selector .lang-dropdown-menu button,
.dark-mode .lang-dropdown-menu button,
.dark-mode .language-dropdown button,
[data-theme="dark"] .lang-dropdown-menu button {
  color: #9ca3af !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dark Mode Dropdown Buttons Hover */
html.dark .lang-dropdown-menu button:hover,
html.dark .language-dropdown button:hover,
html.dark #lang-selector .lang-dropdown-menu button:hover,
.dark .lang-dropdown-menu button:hover,
.dark .language-dropdown button:hover,
.dark-mode .lang-dropdown-menu button:hover,
[data-theme="dark"] .lang-dropdown-menu button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Dark Mode Dropdown Buttons Active */
html.dark .lang-dropdown-menu button.active,
html.dark .language-dropdown button.active,
html.dark #lang-selector .lang-dropdown-menu button.active,
html.dark .lang-dropdown-menu button[data-active="true"],
html.dark .language-dropdown button[data-active="true"],
html.dark #lang-selector .lang-dropdown-menu button[data-active="true"],
html.dark .lang-dropdown-menu button.text-pearl,
html.dark .language-dropdown button.text-pearl,
html.dark #lang-selector .lang-dropdown-menu button.text-pearl,
.dark .lang-dropdown-menu button.active,
.dark .language-dropdown button.active,
.dark-mode .lang-dropdown-menu button.active,
[data-theme="dark"] .lang-dropdown-menu button.active {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Dark Mode Text Spans inherit */
html.dark .lang-dropdown-menu button span,
html.dark .language-dropdown button span,
html.dark #lang-selector .lang-dropdown-menu button span,
.dark .lang-dropdown-menu button span,
.dark .language-dropdown button span,
[data-theme="dark"] .lang-dropdown-menu button span {
  color: inherit !important;
}

/* ── Brand Logo Responsive Sizing & Dynamic Theme Filter (.brand-logo) ── */
.brand-logo {
  min-width: 120px;
  min-height: 30px;
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
@media (max-width: 768px) {
  .brand-logo {
    min-width: 90px;
    min-height: 24px;
    max-height: 32px;
  }
}
html:not(.dark) .brand-logo,
.light-mode .brand-logo,
[data-theme="light"] .brand-logo,
html:not(.dark) #logo-link img,
.light-mode #logo-link img,
[data-theme="light"] #logo-link img,
html:not(.dark) .navbar-logo img,
html:not(.dark) header a img,
html:not(.dark) #footer-logo img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}
html.dark .brand-logo,
.dark-mode .brand-logo,
[data-theme="dark"] .brand-logo,
html.dark #logo-link img,
.dark-mode #logo-link img,
[data-theme="dark"] #logo-link img,
html.dark .navbar-logo img,
html.dark header a img,
html.dark #footer-logo img {
  filter: brightness(1) invert(0) !important;
  opacity: 1 !important;
}

/* ── Zero-FOUC Language Transition Shield ── */
html.dora-translating body {
  opacity: 0;
  pointer-events: none;
}