/* ============================================================
   Inspect-Air Locator — Results Page Styles
   ============================================================ */

/* ── TOP BAR ── */
.ial-rp-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(14,165,233,0.12);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.ial-rp-topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

.ial-rp-back {
  display: flex; align-items: center; gap: 6px;
  background: var(--ial-pale, #E0F2FE);
  border: none; border-radius: 8px;
  color: var(--ial-primary, #0EA5E9);
  font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.ial-rp-back:hover { background: var(--ial-primary, #0EA5E9); color: white; }
.ial-rp-back svg { width: 16px; height: 16px; }

.ial-rp-heading {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  color: #0C1A2E;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ial-rp-search-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-left: auto;
}

.ial-rp-status {
  font-size: 0.8rem;
  padding: 0.25rem 0;
  color: #94A3B8;
  min-height: 1.4rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── MAIN LAYOUT ── */
.ial-rp-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  height: calc(100vh - 130px);
  overflow: hidden;
}

/* Map */
.ial-rp-map-col { position: relative; }
#ial-results-map {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

/* List column */
.ial-rp-list-col {
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  border-left: 1px solid rgba(14,165,233,0.1);
  overflow: hidden;
}

.ial-rp-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #E2E8F0;
  background: white;
  flex-shrink: 0;
}

.ial-rp-list-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}

.ial-rp-show-all {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ial-primary, #0EA5E9);
  background: none;
  border: 1px solid rgba(14,165,233,0.25);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.ial-rp-show-all:hover { background: var(--ial-pale, #E0F2FE); }

.ial-rp-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* ── POINT CARD ── */
.ial-rp-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  animation: ial-card-in 0.3s ease both;
}
@keyframes ial-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ial-rp-card:nth-child(1) { animation-delay: 0.05s; }
.ial-rp-card:nth-child(2) { animation-delay: 0.1s; }
.ial-rp-card:nth-child(3) { animation-delay: 0.15s; }
.ial-rp-card:nth-child(n+4) { animation-delay: 0.2s; }

.ial-rp-card.ial-rp-nearest {
  border-color: var(--ial-primary, #0EA5E9);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}

.ial-rp-card-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  cursor: pointer;
  transition: background 0.15s;
  background: white;
}
.ial-rp-card-header:hover { background: #F0F9FF; }
.ial-rp-nearest .ial-rp-card-header {
  background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(16,185,129,0.04));
}

.ial-rp-rank {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
  flex-shrink: 0;
}
.ial-rp-nearest .ial-rp-rank {
  background: var(--ial-primary, #0EA5E9);
  color: white;
}

.ial-rp-card-info { flex: 1; min-width: 0; }

.ial-rp-nearest-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ial-primary, #0EA5E9);
  color: white;
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 100px;
  margin-bottom: 4px;
}

.ial-rp-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0C1A2E;
  margin: 0 0 4px;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ial-rp-location {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: #94A3B8;
}

.ial-rp-dist {
  background: #E0F2FE;
  color: var(--ial-primary, #0EA5E9);
  font-weight: 700; font-size: 0.7rem;
  padding: 2px 8px; border-radius: 100px;
}

.ial-rp-arrow {
  font-size: 1.25rem; color: #CBD5E1;
  flex-shrink: 0; transition: color 0.2s;
}
.ial-rp-card-header:hover .ial-rp-arrow { color: var(--ial-primary, #0EA5E9); }

/* Card body */
.ial-rp-card-body {
  padding: 0 1.125rem 1rem;
  border-top: 1px solid #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.75rem;
}

.ial-rp-detail {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: #334155; line-height: 1.5;
}
.ial-rp-detail a { color: var(--ial-primary, #0EA5E9); text-decoration: none; font-weight: 500; }
.ial-rp-detail a:hover { text-decoration: underline; }
.ial-rp-icon { flex-shrink: 0; font-size: 0.9rem; }

.ial-rp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ial-rp-tag {
  font-size: 0.68rem; font-weight: 600;
  background: #E0F2FE; color: var(--ial-primary, #0EA5E9);
  padding: 2px 8px; border-radius: 100px;
}

.ial-rp-actions {
  display: flex; gap: 0.5rem; margin-top: 0.5rem;
}
.ial-rp-btn {
  flex: 1; text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ial-rp-btn-call { background: var(--ial-primary, #0EA5E9); color: white; }
.ial-rp-btn-call:hover { background: #0284C7; color: white; }
.ial-rp-btn-dir  { background: #F1F5F9; color: #334155; }
.ial-rp-btn-dir:hover  { background: #E0F2FE; color: var(--ial-primary, #0EA5E9); }

/* ── LOADING / EMPTY ── */
.ial-rp-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem;
  padding: 3rem 1rem; color: #94A3B8; font-size: 0.875rem;
}
.ial-rp-spinner {
  width: 36px; height: 36px;
  border: 3px solid #E2E8F0;
  border-top-color: var(--ial-primary, #0EA5E9);
  border-radius: 50%;
  animation: ial-spin 0.8s linear infinite;
}
@keyframes ial-spin { to { transform: rotate(360deg); } }

.ial-rp-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 3rem 1rem; color: #94A3B8; text-align: center;
}
.ial-rp-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.ial-rp-empty p { font-size: 0.9rem; max-width: 240px; }

/* ── POPUP ── */
.ial-popup { font-family: 'DM Sans', -apple-system, sans-serif; font-size: 0.85rem; line-height: 1.5; min-width: 180px; }
.ial-popup strong { font-size: 0.9rem; color: #0C1A2E; display: block; margin-bottom: 4px; }

/* ── USER DOT ── */
.ial-user-dot { width:16px; height:16px; position:relative; display:flex; align-items:center; justify-content:center; }
.ial-user-dot::after { content:''; position:absolute; width:12px; height:12px; background:#0EA5E9; border:3px solid white; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.3); z-index:1; }
.ial-user-pulse { position:absolute; width:32px; height:32px; background:rgba(14,165,233,0.2); border-radius:50%; animation:ial-pulse 2s ease-out infinite; top:50%; left:50%; transform:translate(-50%,-50%); }
@keyframes ial-pulse { 0%{transform:translate(-50%,-50%) scale(0.5);opacity:1} 100%{transform:translate(-50%,-50%) scale(2);opacity:0} }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ial-rp-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr;
    height: auto;
    min-height: calc(100vh - 130px);
  }
  #ial-results-map { min-height: 300px; height: 300px; }
  .ial-rp-list-col { border-left: none; border-top: 1px solid #E2E8F0; max-height: 60vh; }
  .ial-rp-heading { font-size: 0.95rem; }
  .ial-rp-search-row { width: 100%; }
}

@media (max-width: 600px) {
  .ial-rp-topbar { padding: 0.75rem 1rem; }
  .ial-rp-topbar-inner { gap: 0.75rem; }
  .ial-rp-heading { display: none; }
  .ial-geo-label { display: none; }
}