/**
 * Address Selectors CSS
 * Styles for state, city, and postal code selectors
 */

/* State/City/Postal Selector Options */
.state-selector-option:hover,
.city-selector-option:hover,
.postal-selector-option:hover {
  background-color: #f8f9fa !important;
}

.state-selector-option.selected,
.city-selector-option.selected,
.postal-selector-option.selected {
  background-color: #e7f3ff !important;
  font-weight: 500;
}

/* Postal Selector specific styles */
.postal-selector-option {
  padding: 10px 12px !important;
}

.postal-selector-option > div:first-child {
  font-weight: 500;
  margin-bottom: 2px;
}

.postal-selector-option > div:last-child {
  font-size: 0.85em;
  color: #666;
}

/* Dropdown scrollbar styling */
.state-selector-dropdown::-webkit-scrollbar,
.city-selector-dropdown::-webkit-scrollbar,
.postal-selector-dropdown::-webkit-scrollbar {
  width: 8px;
}

.state-selector-dropdown::-webkit-scrollbar-track,
.city-selector-dropdown::-webkit-scrollbar-track,
.postal-selector-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.state-selector-dropdown::-webkit-scrollbar-thumb,
.city-selector-dropdown::-webkit-scrollbar-thumb,
.postal-selector-dropdown::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.state-selector-dropdown::-webkit-scrollbar-thumb:hover,
.city-selector-dropdown::-webkit-scrollbar-thumb:hover,
.postal-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .state-selector-wrapper,
  .city-selector-wrapper,
  .postal-selector-wrapper {
    width: 100% !important;
  }
  
  .state-selector-dropdown,
  .city-selector-dropdown,
  .postal-selector-dropdown {
    max-height: 250px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .state-selector-search,
  .city-selector-search,
  .postal-selector-search {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px !important;
  }
  
  .state-selector-option,
  .city-selector-option,
  .postal-selector-option {
    padding: 12px !important;
    font-size: 16px !important;
  }
}

/* Ensure proper spacing and layout */
.statedata,
.city-selector-wrapper,
.postal-selector-wrapper {
  width: 100%;
}

.statedata .state-selector-wrapper {
  width: 100%;
  margin-bottom: 0;
}

/* Fix for label preservation */
.statedata label {
  display: block;
  margin-bottom: 0.5rem;
}

/* Disabled state styling */
.postal-selector-search:disabled,
.city-selector-search:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
}