/* Container & input */
.city-search-wrap {
  position: relative;
  max-width: 520px;
}

.city-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.city-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
  background: #fff;
}

/* Ensure proper padding for city search input with icon */
#city_search {
  padding-left: 50px !important; /* Ensure text doesn't overlap with icon */
}

/* Ensure icon positioning doesn't interfere with text */
.city-search-wrap .position-absolute {
  pointer-events: none; /* Prevent icon from interfering with input clicks */
  z-index: 1; /* Ensure icon stays above input background */
}

.city-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.city-hint {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
}

.ui-autocomplete {
  z-index: 10000 !important;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 6px;
  margin-top: 8px;
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
  max-height: 320px;
  overflow-y: auto;
  font-family: 'Jost', sans-serif;  /* your desired font */
  /* width will be controlled by JS */
}

/* each item */
.ui-menu-item .ui-menu-item-wrapper {
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* hover/active */
.ui-state-active,
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #eff6ff;
  color: #111827;
}

/* custom line: city + state badge */
.ac-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ac-city {
  font-weight: 600;
  color: #111827;
}

.ac-state {
  font-size: 12px;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 2px 8px;
}

/* highlight matching text */
.ui-autocomplete mark {
  background: #fde68a;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .ui-autocomplete {
    z-index: 99999 !important; /* Higher z-index for mobile */
    position: fixed !important; /* Use fixed positioning on mobile */
    left: 5px !important; /* Smaller margin from screen edge */
    right: 5px !important; /* Smaller margin from screen edge */
    width: calc(100vw - 10px) !important; /* Full width minus smaller margins */
    max-width: calc(100vw - 10px) !important; /* Ensure it doesn't exceed viewport */
    min-width: 0 !important; /* Allow it to shrink if needed */
    max-height: 50vh !important; /* Limit height on mobile */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important; /* Stronger shadow for mobile */
    border-radius: 8px !important; /* Slightly smaller border radius */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    overflow-y: auto !important; /* Allow vertical scrolling */
    word-wrap: break-word !important; /* Break long words */
    box-sizing: border-box !important; /* Include padding in width calculation */
  }
  
  .city-search-wrap {
    max-width: 100%; /* Full width on mobile */
  }
  
  /* Ensure input is touch-friendly */
  #city_search {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 14px 16px 14px 50px !important; /* Larger touch target with proper left padding for icon */
    padding-left: 50px !important; /* Ensure text doesn't overlap with icon */
  }
  
  /* Make menu items more touch-friendly */
  .ui-menu-item .ui-menu-item-wrapper {
    padding: 14px 16px !important; /* Larger touch targets */
    min-height: 44px !important; /* Minimum touch target size */
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important; /* Prevent content overflow */
    text-overflow: ellipsis !important; /* Add ellipsis for long text */
    white-space: nowrap !important; /* Prevent text wrapping */
  }
  
  /* Ensure menu items fit within container */
  .ui-menu-item .ui-menu-item-wrapper .ac-row {
    width: 100% !important;
    overflow: hidden !important;
  }
  
  .ui-menu-item .ui-menu-item-wrapper .ac-city {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
  }
  
  /* Better visual feedback for touch */
  .ui-state-active,
  .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #e3f2fd !important;
    transform: scale(1.02) !important;
    transition: all 0.2s ease !important;
  }
  
  /* Prevent body scroll when autocomplete is open */
  body.autocomplete-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  
  /* Left align property type selection on mobile */
  .choose-propert-type ul {
    justify-content: flex-start !important; /* Left align instead of space-around */
    gap: 20px !important; /* Add gap between items */
    padding-left: 0 !important; /* Remove any left padding */
  }
  
  .choose-propert-type ul li {
    flex-shrink: 0 !important; /* Prevent items from shrinking */
  }
  
  /* Make radio buttons and labels touch-friendly on mobile */
  .choose-propert-type .form-check {
    margin-bottom: 0 !important; /* Remove bottom margin */
  }
  
  .choose-propert-type .form-check-input {
    margin-top: 0.25rem !important; /* Adjust vertical alignment */
  }
  
  .choose-propert-type .form-check-label {
    font-size: 14px !important; /* Slightly smaller font for mobile */
    padding-left: 0.5rem !important; /* Add some space between radio and label */
    cursor: pointer !important; /* Ensure it's clickable */
  }
}