/* Sort dropdown styling */
select.input-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 40px 16px 20px; /* Match search input padding */
  color: white;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  width: 100% !important; /* Ensure it spans the full width of its container */
  max-width: 500px; /* Increased maximum width for longer option text */
  font-size: 0.95rem; /* Match search input font size */
  min-height: 56px; /* Match search input height */
  line-height: 1.5; /* Match search input line height */
}

select.input-glass:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

select.input-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Style the dropdown options */
select.input-glass option {
  background-color: #1a1a1a;
  color: white;
  padding: 16px 24px 16px 16px; /* Extra padding on right side */
  font-size: 0.85rem; /* Reduced font size for dropdown options */
}

/* Force dark dropdown background and white text for the popup list */
select.input-glass,
select.input-glass option {
  background-color: #18181b !important; /* dark background */
  color: #fff !important;
}

/* Add more right padding to each option for better spacing */
select.input-glass option {
  padding-right: 48px !important; /* Increased right padding */
  padding-left: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 0.85rem; /* Reduced font size */
}

/* Remove default blue highlight and use custom highlight for selected/active/hover */
select.input-glass option:checked,
select.input-glass option:active,
select.input-glass option:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(102, 126, 234, 0.6)) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Enhanced styling for better visibility of selected option */
select.input-glass option:checked {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(102, 126, 234, 0.7)) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Remove default browser border/shadow on focus */
select.input-glass:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

/* Custom styling for the dropdown arrow container */
.relative {
  position: relative;
}

.relative .input-glass + span { /* Changed div to span */
  pointer-events: none;
  transition: all 0.3s ease;
}

.relative:hover .input-glass + span { /* Changed div to span */
  color: rgba(255, 255, 255, 0.9);
}

/* Active state when dropdown is open */
select.input-glass:active, 
select.input-glass:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* Ensure the "Sort by" option is unclickable and visually distinct - scoped to shop page only */
.shop-page select.input-glass option[disabled] {
  color: rgba(255, 255, 255, 0.5) !important; /* lighter text color */
  cursor: not-allowed !important;
}

/* Browser-specific fixes for dropdown option visibility */

/* WebKit browsers (Chrome, Safari, Edge) */
@supports (-webkit-appearance: none) {
  select.input-glass option:checked {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(102, 126, 234, 0.7)) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }
  
  select.input-glass option:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.6), rgba(102, 126, 234, 0.4)) !important;
    color: #ffffff !important;
  }
}

/* Firefox specific styling */
@-moz-document url-prefix() {
  select.input-glass option:checked {
    background-color: rgba(102, 126, 234, 0.8) !important;
    color: #ffffff !important;
    font-weight: bold !important;
  }
  
  select.input-glass option:hover {
    background-color: rgba(102, 126, 234, 0.6) !important;
    color: #ffffff !important;
  }
}

/* Additional fallback for older browsers */
select.input-glass option[selected] {
  background: rgba(102, 126, 234, 0.8) !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

/* Add mobile responsive styles to make dropdown smaller on mobile devices */

/* Mobile styles for dropdown select element */
@media (max-width: 768px) {
  /* Align dropdown container with search bar */
  .shop .flex.gap-2.order-2 {
    width: 100%;
    max-width: 100%;
  }
  
  /* Make each dropdown container match search bar width */
  .shop .flex.gap-2.order-2 .relative {
    flex: 1;
    width: 100%;
    height: 38px; /* Match search bar height */
  }
  
  select.input-glass {
    padding: 8px 32px 8px 12px; /* Reduced padding for mobile */
    font-size: 0.75rem; /* Smaller font size */
    border-radius: 10px; /* Slightly smaller border radius */
    max-width: 100%; /* Full width on mobile */
    height: 100%; /* Match container height */
  }
  
  /* Style the dropdown options for mobile */
  select.input-glass option {
    padding: 12px 16px 12px 12px; /* Reduced padding for mobile */
    font-size: 0.75rem; /* Smaller font size for mobile */
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  /* Even smaller adjustments for very small screens */
  .shop .flex.gap-2.order-2 .relative {
    height: 36px; /* Slightly smaller height for very small screens */
  }
  
  select.input-glass {
    padding: 6px 28px 6px 10px; /* Even smaller padding */
    font-size: 0.7rem; /* Even smaller font size */
  }
  
  select.input-glass option {
    padding: 10px 14px 10px 10px; /* Even smaller padding */
    font-size: 0.7rem; /* Even smaller font size for very small screens */
    padding-right: 32px !important; /* Reduced right padding for smaller screens */
  }
}

/* Ensure consistent container heights and alignment across all screen sizes */
.shop .input-glass {
  min-height: 38px;
}

/* Match heights for search and dropdowns at medium screen sizes */
@media (max-width: 1023px) and (min-width: 769px) {
  .shop .flex.gap-2.order-2 {
    width: 100%;
  }
  
  /* Keep consistent height between search and dropdowns */
  .shop .input-glass, 
  .shop .flex.gap-2.order-2 .relative {
    height: 42px;
  }
}

/* Fix specific container alignment between search bar and dropdowns */
@media (max-width: 640px) {
  /* Make the search and dropdowns have consistent styling */
  .shop .flex.flex-col.lg\\:flex-row.gap-3 > * {
    width: 100%;
  }
  
  /* Make the dropdowns container take full width */
  .shop .flex.gap-2.order-2 {
    width: 100%;
  }
}