/* Small style tweaks for the address capture component */
.address-capture .form-control[required] {
  border-left: 4px solid #0d6efd; /* emphasize required field */
}
.address-capture .form-control[required]:focus {
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.18);
}

/* Tom Select sizing tweaks */
/* Tom Select renders a sibling .ts-control element. Target that and the control class directly. */
.address-capture .ts-control,
.address-capture .ts-control .ts-control {
  /* match Bootstrap .form-control height and vertically center contents */
  min-height: 38px; /* align with .form-control */
  padding-top: 6px;
  padding-bottom: 6px;
  width: 100% !important; /* force full width to avoid shrink on render */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Ensure inner TomSelect input area fills control height and is vertically centered */
.address-capture .ts-control .ts-input {
  display: flex;
  align-items: center;
  height: 100%;
}

.address-capture .ts-dropdown {
  z-index: 1050; /* ensure dropdown sits above modals and other elements */
}

/* Make town narrower on wide screens (reduced by ~40% total) and adjust small screen spacing */
@media (min-width: 768px) {
  /* reduce town select width to 60% (40% smaller than full width) */
  .address-capture .col-md-5 .tom-select { width: 60% !important; }
  /* also ensure the rendered Tom Select control respects the narrower width */
  .address-capture #townWrapper .ts-control { width: 60% !important; }
}
@media (max-width: 767.98px) {
  .address-capture .col-md-6 { margin-bottom: 0.5rem; }
}

/* subtle visual for searchable hint */
.address-capture label small.text-muted { font-style: italic; color: #6c757d; }