/* ============================================================
   APlusZ — Autocomplete styles
   File: frontend/assets/autocomplete.css
   Save: D:\Destop\AplusZ\frontend\assets\autocomplete.css
   ============================================================ */

.ac-menu {
  position: fixed;
  z-index: 9998;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--r-md, 14px);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.ac-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.ac-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.ac-opt:hover, .ac-opt.on { background: #f1f5f9; }
.ac-name { color: #000000; font-size: .95rem; font-weight: 500; }
.ac-code {
  color: #000000;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* invalid-input hint on the search button area */
.search-hint {
  margin-top: 8px;
  font-size: .85rem;
  color: #fca5a5;
  text-align: center;
}
html[dir="rtl"] .ac-opt { flex-direction: row-reverse; }

/* no-live-check (still bookable) card */
.result-nolive { text-align: center; }
.result-nolive .nolive-msg {
  margin: 14px 0 18px;
  color: var(--text-muted, #9fb0c7);
  font-size: .95rem;
  line-height: 1.5;
}

/* live-monitored rows: no background — color signals only */
.ac-opt .ac-name { color: #000000; }            /* city name always black */
.ac-opt.live .ac-code { color: #2563eb; }       /* live: clear dark blue code */
.ac-opt:not(.live) .ac-code { color: #000000; } /* non-live: black code */
.ac-opt .ac-live {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #22c55e;                                /* green "Live Price", no background */
  vertical-align: middle;
}

/* ---- input fields: white, black text, no themed box background ---- */
.search-card .field { background: #ffffff !important; }
.search-card .field input { background: #ffffff !important; color: #000000 !important; }
.search-card .field label { color: #475569 !important; }
.search-card .field input::placeholder { color: #94a3b8 !important; }

/* row zones: name (left) · Live Price (dead center) · code (right) */
.ac-mid { flex: 1; text-align: center; }
.ac-name { flex-shrink: 0; }