/* ============================================
   OuiTeint - Contact Page Specific Styles
   ============================================ */

/* === CONTACT GRID === */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info-card { background:var(--dark); border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:20px; margin-bottom:20px; display:flex; gap:14px; align-items:flex-start; }
.contact-info-icon { display:flex; align-items:center; justify-content:center; }
.contact-info-icon svg { margin-right:4px; }
.contact-info-card h4 { margin-bottom:5px; font-size:.95rem; }
.contact-info-card p { color:var(--text-muted); font-size:.85rem; }

/* === CENTRE SEARCH (Google Places) === */
.contact-search-wrap { position:relative; }

/* Dropdown suggestions locales (fallback) */
.contact-city-dropdown {
  position:absolute; top:100%; left:0; right:0; z-index:20;
  background:var(--dark); border:1px solid rgba(255,255,255,.1); border-radius:10px;
  max-height:220px; overflow-y:auto; margin-top:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.contact-city-suggestion {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.88rem; color:#ccc; transition:background .2s;
}
.contact-city-suggestion:hover { background:var(--medium-gray, #2A2A2A); }
.contact-city-suggestion:last-child { border-bottom:none; }
.contact-city-suggestion svg { flex-shrink:0; }

/* === NEARBY CENTRES LIST (Contact Page) === */
.contact-nearby-list {
  display:flex; flex-direction:column; gap:8px;
  margin-top:12px; max-height:320px; overflow-y:auto;
  padding-right:4px;
}
.contact-nearby-item {
  background:var(--dark); border:1px solid rgba(255,255,255,.06);
  border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.contact-nearby-item:hover { border-color:rgba(196,26,31,.25); background:rgba(196,26,31,.03); }
.contact-nearby-item.selected { border-color:rgba(196,26,31,.5); background:rgba(196,26,31,.06); }
.contact-nearby-item.selected .contact-nearby-select-icon { opacity:1; color:#C41A1F; }

.contact-nearby-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.contact-nearby-name { font-size:.9rem; font-weight:600; color:#fff; }
.contact-nearby-badge {
  font-size:.6rem; padding:2px 8px; border-radius:10px; font-weight:600; white-space:nowrap;
}
.contact-nearby-badge-open { background:rgba(34,197,94,.15); color:#22C55E; }
.contact-nearby-badge-opening { background:rgba(245,158,11,.15); color:#F59E0B; }
.contact-nearby-badge-closed { background:rgba(107,114,128,.15); color:#9CA3AF; }

.contact-nearby-address {
  display:flex; align-items:flex-start; gap:5px;
  font-size:.78rem; color:var(--text-muted); line-height:1.3; margin-bottom:6px;
}
.contact-nearby-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.contact-nearby-tag {
  font-size:.65rem; padding:2px 7px; border-radius:8px;
  background:rgba(196,26,31,.08); color:#E34040; font-weight:500;
}
.contact-nearby-distance {
  font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; gap:4px;
}
.contact-nearby-select-icon {
  position:absolute; top:14px; right:14px;
  opacity:0; transition:opacity .2s; color:var(--text-muted);
}
.contact-nearby-item { position:relative; }
.contact-nearby-item:hover .contact-nearby-select-icon { opacity:.5; }

/* Scrollbar subtle */
.contact-nearby-list::-webkit-scrollbar { width:4px; }
.contact-nearby-list::-webkit-scrollbar-track { background:transparent; }
.contact-nearby-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

/* Loading spinner dans la liste */
.contact-nearby-loading {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:24px; color:var(--text-muted); font-size:.85rem;
}
.contact-nearby-spinner {
  width:18px; height:18px; border:2.5px solid rgba(255,255,255,.15);
  border-top-color:var(--red, #C41A1F); border-radius:50%;
  animation:spin .6s linear infinite;
}

/* Empty state */
.contact-nearby-empty {
  text-align:center; padding:20px; color:var(--text-muted); font-size:.85rem;
}

/* === SELECTED CENTRE CARD (même style que le popup RDV) === */
.contact-selected-card {
  background:var(--dark); border:1px solid rgba(34,197,94,.2);
  border-radius:12px; padding:16px 18px;
  transition:border-color .3s;
}
.contact-change-centre-link {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; padding:0; border:none; background:none;
  color:var(--text-muted); font-size:.82rem; cursor:pointer;
  transition:color .2s; font-family:inherit;
}
.contact-change-centre-link:hover { color:var(--red, #C41A1F); }

/* ============================================
   RESPONSIVE BREAKPOINTS - CONTACT PAGE
   ============================================ */
@media (max-width:768px) {
  .contact-grid { grid-template-columns:1fr; gap:32px; }
  .contact-nearby-list { max-height:260px; }
}