/**
 * Mobile-friendly select styling
 * Improves the mobile experience for long select lists
 */

/* Apply these styles to all mobile-friendly-select elements */
.mobile-friendly-select {
  /* Make sure the height is adequate for touch */
  height: 44px !important;
  padding: 0.375rem 0.75rem !important;
  
  /* Ensure the font is readable */
  font-size: 16px !important; /* iOS won't zoom in on inputs with 16px or larger font */
  
  /* Add a nice border and rounded corners */
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  
  /* Make sure the selection is visible */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  
  /* Add a dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  
  /* Give it a clean white background and dark text */
  background-color: #fff !important;
  color: #333 !important;
  
  /* Make sure no weird padding messes with the dropdown arrow */
  padding-right: 2.5rem !important;
}

/* Special styles for iOS to make selects open the proper picker UI */
@supports (-webkit-touch-callout: none) {
  .mobile-friendly-select {
    /* iOS-specific styling - keep light theme */
    background-color: #ffffff !important;
    color: #333333 !important;
  }
}

/* Fix for mobile Android devices */
@media screen and (max-width: 767px) {
  .mobile-friendly-select {
    /* Make sure the text is left-aligned */
    text-align: left !important;
    
    /* Prevent the select from being too narrow */
    width: 100% !important;
    max-width: 100% !important;
    
    /* Ensure proper text wrapping for long options */
    white-space: normal !important;
    
    /* Additional mobile touch improvements */
    margin-bottom: 15px !important;
  }
  
  /* Style the options when they're displayed */
  .mobile-friendly-select option {
    padding: 10px !important;
    min-height: 1.2em !important;
  }
}

/* Removed dark mode styles to use light theme consistently */

/* Mobile filter responsive layout */
@media screen and (max-width: 767px) {
  .filter-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .filter-group {
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  /* Make clear filters button more prominent */
  .clear-filters-button {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
  }
  
  /* Fix any overflow issues with selects */
  .advanced-filters.expanded {
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Force native selects on mobile - but NOT for cost estimator page */
  .mobile-friendly-select:not(.estimator-form select):not(.estimator-form .mobile-friendly-select) {
    -webkit-appearance: none !important;
    -moz-appearancce: none !important;
    appearance: none !important;
  }
}

/* Fix for desktop - allow select dropdowns to overflow containers */
.filter-group {
  position: relative;
  z-index: 10;
}

.advanced-filters.expanded {
  overflow: visible !important;
  z-index: 10 !important;
}