/* Shared styles for the Smart Trip Generator destination autocomplete.
   Loaded by both the public homepage and the My Trips "Plan My Trip" popup so
   the behaviour and look stay in one place. Colours use each page's tokens. */

.sac__field { position: relative; }

.sac__list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 244px;
  overflow-y: auto;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift, 0 14px 38px rgba(13, 31, 63, 0.14));
}
.sac__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  min-height: 48px;
  touch-action: manipulation;
  border-radius: 9px;
  cursor: pointer;
}
.sac__opt:hover,
.sac__opt.is-active { background: var(--accent-soft); }
.sac__opt[aria-disabled="true"] { cursor: not-allowed; opacity: 0.75; }
.sac__opt[aria-disabled="true"]:hover { background: #f4f6fb; }
.sac__place { display: grid; gap: 1px; min-width: 0; }
.sac__city { font: 800 0.92rem/1.2 var(--font-body); color: var(--ink); }
.sac__city small { color: var(--accent, #7652e8); font: 700 0.72rem/1.2 var(--font-body); }
.sac__country { font: 600 0.78rem/1.2 var(--font-body); color: var(--muted); }
.sac__flag {
  flex: none;
  font: 800 0.66rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.sac__flag.is-on { background: #d9f2e7; color: #059669; }
.sac__flag.is-off { background: #edf1f8; color: var(--muted); }
.sac__msg { min-height: 1em; margin: 6px 0 0; font: 700 0.82rem/1.35 var(--font-body); }
.sac__msg.is-ok { color: #059669; }
.sac__msg.is-error { color: #dc2626; }
.sac__msg.is-hint { color: var(--muted); }
[data-city-input][aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }