/* ============================================
   CUSTOM SELECT UI
   ============================================ */
.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.custom-select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* No select on this site actually sits inside an icon-prefixed .input-wrap
     (that padding was copied from there for a case that was never used), so
     the big reserved left gap just made this trigger look off next to a
     normal sibling input/select — e.g. the wizard's Trip Date + Select Party
     row, where the party trigger visibly didn't line up with the date input
     and wrapped its text onto two lines for no reason. */
  padding: 0.8rem 1rem;
  background: var(--bg-input);
  border: 1.5px solid var(--border-color, var(--border));
  border-radius: var(--radius-sm, var(--r-sm));
  color: var(--text-primary, var(--text));
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* The trip wizard's Pickup/Delivery state picker sits inside .wp-input-wrap,
   where every other field (the wp-input text box) centers its text. The
   trigger's default left-aligned text made it look out of place next to
   those centered fields, so center it here and bump padding/size to match
   .wp-input, without touching the trigger everywhere else on the site. */
.wp-input-wrap .custom-select-trigger{
  padding: 1rem 1.25rem;
  border-width: 2px;
  font-size: 1.05rem;
}
.wp-input-wrap .custom-select-trigger span:first-child{
  flex: 1;
  text-align: center;
}

.custom-select-wrapper.open .custom-select-trigger,
.custom-select-trigger:focus {
  border-color: var(--accent-500, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--bg-input-focus, var(--bg-input));
  outline: none;
}

.custom-select-trigger .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-secondary, var(--text2));
  transition: transform 0.3s ease;
}

.custom-select-wrapper.open .arrow {
  transform: rotate(180deg);
}

.custom-options {
  position: absolute;
  display: block;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--bg-secondary, var(--bg2));
  border: 1px solid var(--border-color, var(--border));
  border-radius: var(--radius-sm, var(--r-sm));
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  /* A select with many options (e.g. all Indian states) used to have no
     height limit here, so opening it grew the dropdown tall enough that
     the whole page had to scroll to see the rest of it instead of just
     this box. Cap the height and let this box scroll internally. */
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.custom-select-wrapper.open .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.custom-option {
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary, var(--text2));
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.custom-option:hover {
  background: var(--bg-input-focus, var(--bg-input));
  color: var(--accent-500, var(--accent));
}

.custom-option.selected {
  color: var(--text-primary, var(--text));
  background: rgba(var(--accent-rgb),0.1); /* Slight orange tint */
  font-weight: 600;
  border-left: 3px solid var(--accent-500, var(--accent));
}