/* ============================================================
   OA Lodge Locator
   Search bar, map, lodge detail panel, loader and error message.
   Built on the OA Components tokens, .oa-field/.oa-input and .oa-btn;
   everything is scoped to .oa-ll so the theme is left alone.
   ============================================================ */

.oa-ll {
  position: relative;
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* Search bar */

.oa-ll__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.oa-ll__field { flex: 1; min-width: 220px; }
.oa-ll__bar .oa-btn { flex: none; padding-top: .78rem; padding-bottom: .78rem; }

/* typeahead.js wraps the input and sets display:inline-block inline. */
.oa-ll .twitter-typeahead { display: block !important; width: 100%; }
.oa-ll .tt-hint { color: var(--text-muted); }

.oa-ll .tt-dropdown-menu {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
  padding: var(--space-1) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.oa-ll .tt-suggestion { padding: .5rem .8rem; cursor: pointer; line-height: var(--leading-snug); }
.oa-ll .tt-suggestion.tt-cursor { background: var(--color-surface-sunken); }
.oa-ll .tt-suggestion strong { color: var(--brand-primary); }
.oa-ll .tt-suggestion p { margin: 0; }
.oa-ll__suggestion-lodge { font-weight: var(--weight-bold); }
.oa-ll__suggestion-council { font-size: var(--text-xs); color: var(--text-secondary); }

/* Map + detail panel (stacked on phones, side by side from 768px) */

.oa-ll__body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
}

.oa-ll__map { flex: 1; min-height: 200px; }
.oa-ll__map img { max-width: none; }

.oa-ll__detail {
  display: none;
  flex: 0 0 55%;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  outline: none;
}

.oa-ll__detail.is-open { display: flex; }

.oa-ll__close {
  display: flex;
  align-items: center;
  gap: .5em;
  width: 100%;
  margin: 0;
  padding: .75rem var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: var(--color-surface-sunken);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
}

.oa-ll__close:hover { background: var(--color-surface-mist); }
.oa-ll__close:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }

.oa-ll__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-5);
}

.oa-ll__lodge {
  margin: 0 0 .15em;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.oa-ll__council { margin: 0; font-weight: var(--weight-bold); }
.oa-ll__city { margin: 0; color: var(--text-secondary); }

.oa-ll__heading {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.oa-ll__role { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.oa-ll__person { margin: 0; font-weight: var(--weight-semibold); }

.oa-ll__link { margin: 0 0 var(--space-1); }
.oa-ll__link a { display: flex; align-items: center; gap: .5em; min-width: 0; color: var(--color-link); text-decoration: none; }
.oa-ll__link a:hover { text-decoration: underline; }
.oa-ll__link .oa-icon { flex: none; }
.oa-ll__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oa-ll__source {
  margin: auto 0 0;
  padding-top: var(--space-5);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .oa-ll__body { flex-direction: row; }
  .oa-ll__detail { flex: 0 0 340px; border-top: 0; border-left: 1px solid var(--color-border); }
}

/* Loader */

.oa-ll__loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, .4);
  backdrop-filter: blur(6px);
}

.oa-ll__loader.is-visible { display: block; }

.oa-ll__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 6px solid var(--oa-mist);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: oa-ll-spin 1s linear infinite;
}

@keyframes oa-ll-spin {
  to { transform: rotate(360deg); }
}

/* Error message */

.oa-ll__error {
  position: absolute;
  top: var(--space-5);
  left: 50%;
  z-index: 3;
  width: min(560px, calc(100% - 2rem));
  padding: var(--space-4) var(--space-5);
  text-align: center;
  color: var(--text-inverse);
  background: var(--color-surface-dark);
  border-top: 4px solid var(--brand-primary);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .3s, transform .3s, visibility .3s;
}

.oa-ll__error.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.oa-ll__error-title { margin: 0 0 .25em; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); }
.oa-ll__error-text { margin: 0; font-size: var(--text-sm); }

/* Shown to administrators only */

.oa-ll__admin-note {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: #8A6410;
  background: #FBF1DA;
}

@media (prefers-reduced-motion: reduce) {
  .oa-ll__spinner { animation-duration: 3s; }
  .oa-ll__error { transition: none; }
}