/* ============================================
   MODERN DROPDOWN STYLES
   Language, Currency & Top Menu Dropdowns
   ============================================ */

/* CSS Custom Properties for easy theming - Black & Grey Theme */
:root {
  --dropdown-bg: #2a2a2a;
  --dropdown-bg-glass: rgba(35, 35, 35, 0.98);
  --dropdown-border: rgba(255, 255, 255, 0.08);
  --dropdown-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 
                     0 4px 12px rgba(0, 0, 0, 0.3);
  --dropdown-item-hover: rgba(255, 255, 255, 0.08);
  --dropdown-accent: #ffffff;
  --dropdown-accent-light: rgba(255, 255, 255, 0.1);
  --dropdown-text: #e0e0e0;
  --dropdown-text-muted: #888888;
  --dropdown-radius: 12px;
  --dropdown-item-radius: 8px;
  --dropdown-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Top Bar Spacing
   ============================================ */
.header .top-bar {
  padding-top: 8px !important;
}

/* ============================================
   Dropdown Toggle Buttons
   ============================================ */
.language-currency .dropdown-toggle,
.top-menu .dropdown > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  border-radius: 8px;
  transition: var(--dropdown-transition);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.language-currency .dropdown-toggle:hover,
.language-currency .dropdown.open .dropdown-toggle,
.top-menu .dropdown > a:hover,
.top-menu .dropdown.open > a {
  background: var(--dropdown-accent-light);
}

/* Arrow icon styling */
.language-currency .dropdown::after,
.top-menu .dropdown > a::after {
  font-size: 9px !important;
  opacity: 0.6;
  transition: var(--dropdown-transition);
  margin-left: 4px !important;
}

.language-currency .dropdown.open::after,
.language-currency .dropdown:hover::after,
.top-menu .dropdown.open > a::after,
.top-menu .dropdown:hover > a::after {
  opacity: 1;
  transform: rotate(90deg) translateX(2px);
}

/* ============================================
   Language Flag Styling
   ============================================ */
.language-currency .symbol img,
.language-flag img {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: var(--dropdown-transition);
}

.language-currency .dropdown-toggle:hover .symbol img,
.language-currency .dropdown.open .symbol img {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Main Dropdown Container (exclude cart)
   ============================================ */
.language-currency .j-dropdown,
.top-menu:not(#cart) .j-dropdown,
#language .j-dropdown,
#currency .j-dropdown,
.secondary-menu .j-dropdown {
  background: var(--dropdown-bg-glass) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--dropdown-border) !important;
  border-radius: var(--dropdown-radius) !important;
  box-shadow: var(--dropdown-shadow) !important;
  padding: 8px !important;
  min-width: 140px !important;
  width: auto !important;
  margin-top: 8px;
  overflow: visible;
}

/* Ensure j-menu expands - exclude cart */
.top-menu:not(#cart) .j-dropdown > .j-menu,
.secondary-menu .j-dropdown > .j-menu,
.language-currency .j-dropdown > .j-menu {
  width: auto !important;
  min-width: 100% !important;
}

/* Hide the ugly default triangle */
.language-currency .j-dropdown::before,
.top-menu .j-dropdown::before,
#language .j-dropdown::before,
#currency .j-dropdown::before {
  display: none !important;
}

/* Hide the arrow indicator - cleaner look */
.language-currency .j-dropdown::after,
.top-menu .j-dropdown::after,
#language .j-dropdown::after,
#currency .j-dropdown::after {
  display: none;
}

/* Animation enhancement */
.language-currency .dropdown.animating .j-dropdown,
.top-menu .dropdown.animating .j-dropdown,
.animating > .j-dropdown {
  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   Dropdown Menu Items
   ============================================ */
.language-currency .j-dropdown .j-menu,
.top-menu .j-dropdown .j-menu,
#language .j-dropdown .j-menu,
#currency .j-dropdown .j-menu {
  padding: 0;
  margin: 0;
}

.language-currency .j-dropdown .j-menu > li,
.top-menu .j-dropdown .j-menu > li,
#language .j-dropdown .j-menu > li,
#currency .j-dropdown .j-menu > li {
  border: none !important;
  margin: 2px 0;
}

.language-currency .j-dropdown .j-menu > li > a,
.top-menu .j-dropdown .j-menu > li > a,
#language .j-dropdown .j-menu > li > a,
#currency .j-dropdown .j-menu > li > a {
  display: block !important;
  padding: 10px 20px 10px 16px !important;
  border-radius: var(--dropdown-item-radius) !important;
  color: var(--dropdown-text) !important;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0.01em;
  transition: var(--dropdown-transition);
  position: relative;
  border: none !important;
  background: transparent !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  width: auto !important;
}

/* Hover state - simple text highlight */
.language-currency .j-dropdown .j-menu > li > a:hover,
.top-menu .j-dropdown .j-menu > li > a:hover,
#language .j-dropdown .j-menu > li > a:hover,
#currency .j-dropdown .j-menu > li > a:hover {
  background: transparent !important;
  color: #ffffff !important;
}

/* Active/selected state - just highlight text, no background */
.language-currency .j-dropdown .j-menu > li.active > a,
.top-menu .j-dropdown .j-menu > li.active > a,
#language .j-dropdown .j-menu > li.active > a,
#currency .j-dropdown .j-menu > li.active > a {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* ============================================
   Language Dropdown Specific
   ============================================ */
/* Hide all language flags */
.language-flag,
.language-flag img,
#language .symbol,
#language .symbol img,
.j-dropdown .language-flag {
  display: none !important;
}

.language-title-dropdown {
  font-weight: 500;
}

/* ============================================
   Currency Dropdown Specific
   ============================================ */
/* Keep symbol, hide duplicate code - only show code-dropdown */
#currency .currency-title,
.currency-symbol-title > .currency-title,
.j-dropdown .currency-code-dropdown {
  display: none !important;
}

/* Show symbol */
#currency .symbol,
.currency-symbol-title > .symbol,
.j-dropdown .currency-symbol {
  display: inline !important;
  margin-right: 6px;
}

/* Show only title-dropdown (which shows the code) */
.j-dropdown .currency-title-dropdown {
  display: inline !important;
  font-size: 14px;
  font-weight: 500;
  color: inherit !important;
}

/* Header button - show symbol and code */
#currency .currency-code {
  display: inline !important;
}

/* ============================================
   Top Menu Dropdown Specific
   ============================================ */
.top-menu .j-dropdown {
  min-width: 200px !important;
  width: max-content !important;
  max-width: none !important;
}

/* Secondary menu / Account dropdown positioning */
.secondary-menu .j-dropdown,
.top-menu:not(.language-currency) .j-dropdown {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* Force dropdown menu items to show full text */
.top-menu .j-dropdown .j-menu,
.secondary-menu .j-dropdown .j-menu,
.j-dropdown .j-menu {
  width: auto !important;
  min-width: 200px !important;
  display: block !important;
}

.top-menu .j-dropdown .j-menu > li,
.secondary-menu .j-dropdown .j-menu > li,
.j-dropdown .j-menu > li {
  width: auto !important;
  display: block !important;
}

.top-menu .j-dropdown .j-menu > li > a,
.secondary-menu .j-dropdown .j-menu > li > a,
.j-dropdown .j-menu > li > a {
  display: block !important;
  width: auto !important;
  padding: 10px 20px 10px 16px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Remove any flex constraints that might cause text truncation */
.j-dropdown .j-menu > li > a > span,
.j-dropdown .j-menu > li > a > div {
  display: inline !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  max-width: none !important;
}

/* Fix for links-text which contains menu item text */
.j-dropdown .j-menu > li > a .links-text,
.j-dropdown .links-text,
.top-menu .links-text,
.secondary-menu .links-text,
.j-menu .links-text {
  display: inline !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  max-width: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

/* Fix for menu-label */
.j-dropdown .menu-label,
.top-menu .menu-label {
  display: inline !important;
  overflow: visible !important;
  white-space: nowrap !important;
  max-width: none !important;
}

/* ============================================
   AGGRESSIVE DROPDOWN WIDTH FIXES (exclude cart)
   ============================================ */
/* Force the dropdown container to size based on content - exclude cart */
.top-menu .dropdown-menu.j-dropdown:not(#cart *),
.secondary-menu .dropdown-menu.j-dropdown,
.language-currency .dropdown-menu.j-dropdown {
  width: auto !important;
  min-width: 150px !important;
  max-width: none !important;
}

/* Force ul inside dropdown to be full width - exclude cart */
.top-menu .j-dropdown > .j-menu:not(#cart *),
.secondary-menu .j-dropdown > .j-menu,
.language-currency .j-dropdown > .j-menu {
  width: auto !important;
  min-width: 100% !important;
}

/* Force li items to be full width of dropdown - exclude cart */
.top-menu .j-dropdown .j-menu li:not(#cart *),
.secondary-menu .j-dropdown .j-menu li,
.language-currency .j-dropdown .j-menu li {
  width: auto !important;
  min-width: 100% !important;
  display: block !important;
}

/* Force anchor tags to expand to fit content - exclude cart */
.top-menu .j-dropdown .j-menu li a:not(#cart *),
.secondary-menu .j-dropdown .j-menu li a,
.language-currency .j-dropdown .j-menu li a {
  width: auto !important;
  min-width: 100% !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  box-sizing: border-box !important;
}

/* ============================================
   Cart Dropdown - Reset to normal
   ============================================ */
#cart .j-dropdown,
#cart .dropdown-menu,
.cart-content {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 400px !important;
}

#cart .j-dropdown *,
#cart .dropdown-menu * {
  white-space: normal !important;
  overflow: visible !important;
}

/* Account specific styling */
.top-menu .j-dropdown .j-menu > li > a[href*="login"],
.top-menu .j-dropdown .j-menu > li > a[href*="register"] {
  font-weight: 600;
}

/* Divider styling for menus */
.top-menu .j-dropdown .j-menu > li.divider {
  height: 1px;
  margin: 8px 14px;
  background: var(--dropdown-border);
  padding: 0;
}

/* Fix menu item icons - remove colorful backgrounds */
.top-menu .j-dropdown .j-menu > li > a > *:first-child {
  color: var(--dropdown-text-muted) !important;
}

.top-menu .j-dropdown .j-menu > li > a:hover > *:first-child {
  color: var(--dropdown-text) !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 991px) {
  .language-currency .j-dropdown,
  .top-menu .j-dropdown,
  #language .j-dropdown,
  #currency .j-dropdown {
    min-width: 150px !important;
    padding: 4px !important;
  }
  
  .language-currency .j-dropdown .j-menu > li > a,
  .top-menu .j-dropdown .j-menu > li > a {
    padding: 8px 12px !important;
    font-size: 13px;
  }
}

/* ============================================
   Dropdown Positioning Fixes
   ============================================ */
.language-currency .j-dropdown,
.top-menu .j-dropdown,
#language .j-dropdown,
#currency .j-dropdown {
  position: absolute;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  margin-top: 8px !important;
}

/* Ensure dropdown stays within viewport */
.language-currency .dropdown,
.top-menu .dropdown {
  position: relative;
}

/* Fix for right-aligned dropdowns */
.header-cart-group .j-dropdown,
.language-currency > div:last-child .j-dropdown {
  left: auto !important;
  right: 0 !important;
  transform: none;
}

/* Fix for left-aligned dropdowns */
.language-currency > div:first-child .j-dropdown {
  left: 0 !important;
  right: auto !important;
  transform: none;
}

/* ============================================
   Icon Overflow Fixes
   ============================================ */
.top-menu .j-dropdown .j-menu > li > a i,
.top-menu .j-dropdown .j-menu > li > a .fa,
.top-menu .j-dropdown .j-menu > li > a svg,
.top-menu .j-dropdown .j-menu > li > a [class*="icon"],
.j-dropdown .j-menu > li > a i,
.j-dropdown .j-menu > li > a .fa,
.j-dropdown .j-menu > li > a svg {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: 8px !important;
  margin-left: 0 !important;
  opacity: 0.7;
  color: var(--dropdown-text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove any colored backgrounds from icons */
.j-dropdown .j-menu > li > a i::before,
.j-dropdown .j-menu > li > a .fa::before {
  color: inherit !important;
  background: transparent !important;
}

/* Fix icon container - allow text to show fully */
.j-dropdown .j-menu > li > a {
  overflow: visible !important;
  white-space: nowrap;
}

/* Icon image overflow fix */
.j-dropdown .j-menu > li > a img {
  max-width: 18px;
  max-height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 8px;
}

/* Fix for module icons in dropdowns */
.j-dropdown .j-menu > li > a > span:first-child:not(.language-flag):not(.currency-symbol) {
  display: inline-flex !important;
  align-items: center;
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Hide any badge-like icon backgrounds */
.j-dropdown .j-menu > li > a > span[style*="background"],
.j-dropdown .j-menu > li > a > div[style*="background"] {
  background: transparent !important;
}

/* Reset any inline styled icons */
.j-dropdown .j-menu > li > a > span[style],
.j-dropdown .j-menu > li > a > div[style] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Journal3 module icons - force grey styling */
.j-dropdown .j-menu > li > a .module-icon,
.j-dropdown .j-menu > li > a [class*="module-icon"],
.j-dropdown .j-menu > li > a .menu-icon {
  background: transparent !important;
  color: var(--dropdown-text-muted) !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
}

/* Override any icomoon colored icons */
.j-dropdown [class^="icon-"],
.j-dropdown [class*=" icon-"] {
  color: var(--dropdown-text-muted) !important;
  background: transparent !important;
}

/* Fix for SVG icons */
.j-dropdown svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  color: var(--dropdown-text-muted) !important;
}

/* Remove any pseudo-element backgrounds on icons */
.j-dropdown .j-menu > li > a > *::before,
.j-dropdown .j-menu > li > a > *::after {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================
   Hover Effects Enhancement - Clean minimal style
   ============================================ */
.language-currency .j-dropdown .j-menu > li > a::before,
.top-menu .j-dropdown .j-menu > li > a::before,
#language .j-dropdown .j-menu > li > a::before,
#currency .j-dropdown .j-menu > li > a::before {
  display: none !important;
}

/* ============================================
   Header Icons - Hide Text Labels (Icon Only)
   ============================================ */
/* Hide text labels in header top menu icons */
.header .top-bar .top-menu .links-text,
.header .top-bar .secondary-menu .links-text,
.header-cart-group .top-menu .links-text,
.header-cart-group .secondary-menu .links-text,
.desktop-header-active .top-bar .top-menu > .j-menu > li > a > .links-text,
.desktop-header-active .header-cart-group .links-text {
  display: none !important;
}

/* But show text in dropdowns */
.j-dropdown .links-text,
.dropdown-menu .links-text {
  display: inline !important;
}

/* ============================================
   Focus States for Accessibility
   ============================================ */
.language-currency .dropdown-toggle:focus,
.top-menu .dropdown > a:focus,
.language-currency .j-dropdown .j-menu > li > a:focus,
.top-menu .j-dropdown .j-menu > li > a:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--dropdown-accent-light);
}

/* ============================================
   Smooth Scroll for Long Dropdown Lists
   ============================================ */
.language-currency .j-dropdown .j-menu,
.top-menu .j-dropdown .j-menu,
#language .j-dropdown .j-menu,
#currency .j-dropdown .j-menu {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dropdown-border) transparent;
}

.language-currency .j-dropdown .j-menu::-webkit-scrollbar,
.top-menu .j-dropdown .j-menu::-webkit-scrollbar,
#language .j-dropdown .j-menu::-webkit-scrollbar,
#currency .j-dropdown .j-menu::-webkit-scrollbar {
  width: 6px;
}

.language-currency .j-dropdown .j-menu::-webkit-scrollbar-track,
.top-menu .j-dropdown .j-menu::-webkit-scrollbar-track,
#language .j-dropdown .j-menu::-webkit-scrollbar-track,
#currency .j-dropdown .j-menu::-webkit-scrollbar-track {
  background: transparent;
}

.language-currency .j-dropdown .j-menu::-webkit-scrollbar-thumb,
.top-menu .j-dropdown .j-menu::-webkit-scrollbar-thumb,
#language .j-dropdown .j-menu::-webkit-scrollbar-thumb,
#currency .j-dropdown .j-menu::-webkit-scrollbar-thumb {
  background: var(--dropdown-border);
  border-radius: 3px;
}

.language-currency .j-dropdown .j-menu::-webkit-scrollbar-thumb:hover,
.top-menu .j-dropdown .j-menu::-webkit-scrollbar-thumb:hover,
#language .j-dropdown .j-menu::-webkit-scrollbar-thumb:hover,
#currency .j-dropdown .j-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}