/* ============================================================
   BengalTutors — LOCATION AUTOCOMPLETE styles
   Upload to:  public_html/css/bt-autocomplete.css

   All classes are prefixed .bt-ac- so nothing here can clash
   with index.php's styles or pages.css.
   ============================================================ */

.bt-ac{position:relative}

.bt-ac-input{
  width:100%;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1rem;
  color:#111827;
}

/* subtle spinner while a request is in the air */
.bt-ac.is-loading::after{
  content:"";
  position:absolute;right:12px;top:50%;
  width:14px;height:14px;margin-top:-7px;
  border:2px solid #d1d5db;border-top-color:#0d6b3e;
  border-radius:50%;
  animation:bt-ac-spin .6s linear infinite;
  pointer-events:none;
}
@keyframes bt-ac-spin{to{transform:rotate(360deg)}}

/* green tick once an area has actually been chosen */
.bt-ac.is-picked:not(.is-loading)::after{
  content:"✓";
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  color:#0d6b3e;font-weight:700;font-size:.95rem;
  pointer-events:none;
}

/* ---------- the dropdown ---------- */
.bt-ac-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  z-index:1200;
  margin:0;padding:6px;
  list-style:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(17,24,39,.14);
  max-height:320px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.bt-ac-list[hidden]{display:none}

.bt-ac-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  line-height:1.35;
}
.bt-ac-item.on,
.bt-ac-item:hover{background:#e8f5ee}

.bt-ac-main{
  font-size:.95rem;font-weight:500;color:#111827;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* the matched characters */
.bt-ac-main b{font-weight:700;color:#0d6b3e}

.bt-ac-sub{
  font-size:.8rem;color:#6b7280;
  margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:48%;
}

.bt-ac-count{
  flex-shrink:0;
  background:#e8f5ee;color:#0d6b3e;
  font-size:.72rem;font-weight:700;
  padding:2px 8px;border-radius:999px;
}
.bt-ac-item.on .bt-ac-count{background:#0d6b3e;color:#fff}

.bt-ac-none{
  padding:14px 12px;
  font-size:.9rem;color:#6b7280;
  text-align:center;
}

/* ---------- multi-select chips ---------- */
.bt-ac-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.bt-ac-chips[hidden]{display:none}
.bt-ac-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#0d6b3e;color:#fff;
  border-radius:999px;padding:4px 6px 4px 11px;
  font-size:.82rem;font-weight:600;line-height:1.3;
}
.bt-ac-x{
  border:0;background:rgba(255,255,255,.22);color:#fff;
  width:17px;height:17px;border-radius:50%;
  font-size:.85rem;line-height:1;cursor:pointer;padding:0;
  display:grid;place-items:center;
}
.bt-ac-x:hover{background:#c8272d}
.bt-ac-input:disabled{background:#f3f4f6;cursor:not-allowed}

/* ---------- mobile ---------- */
@media (max-width:600px){
  .bt-ac-list{max-height:60vh}
  .bt-ac-item{padding:12px}      /* bigger tap target */
  .bt-ac-sub{max-width:42%}
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .bt-ac.is-loading::after{animation:none}
}