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

/* === SEARCH === */
.search-box { max-width:640px; margin:32px auto 0; display:flex; gap:0; border-radius:10px; overflow:hidden; box-shadow:var(--shadow-lg); }
.search-box input { flex:1; padding:16px 20px; background:var(--white); border:none; font-size:.95rem; font-family:'Inter',sans-serif; color:var(--black); }
.search-box input::placeholder { color:#999; }
.search-box input:focus { outline:none; }
.search-box button { padding:16px 32px; background:var(--gradient-red); color:var(--white); border:none; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.88rem; cursor:pointer; white-space:nowrap; transition:opacity .2s; }
.search-box button:hover { opacity:.9; }
.search-box button:disabled { opacity:.5; cursor:not-allowed; }

/* === FILTER BAR === */
.filter-bar { display:flex; gap:8px; padding:16px 16px; margin-bottom:8px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.05); }
.filter-btn { padding:8px 18px; border-radius:30px; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--white); font-family:'Inter',sans-serif; font-size:.84rem; cursor:pointer; transition:all .3s; display:inline-flex; align-items:center; gap:6px; }
.filter-btn svg { opacity:.7; transition:opacity .3s; }
.filter-btn:hover svg, .filter-btn.active svg { opacity:1; }
.filter-btn:hover, .filter-btn.active { background:var(--red); border-color:var(--red); }

/* === CENTRES LAYOUT === */
.centres-layout { display:grid; grid-template-columns:380px 1fr; gap:0; min-height:520px; }
.centres-sidebar { display:flex; flex-direction:column; background:var(--dark); border-right:1px solid rgba(255,255,255,.05); }
.centres-list { overflow-y:auto; max-height:520px; flex:1; }
.centres-list::-webkit-scrollbar { width:6px; }
.centres-list::-webkit-scrollbar-track { background:transparent; }
.centres-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
.centres-list::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }

/* === LOADING === */
.centres-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:16px; color:var(--text-muted); }
.loading-spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* === EMPTY STATE === */
.centres-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:16px; text-align:center; color:var(--text-muted); }
.btn-reset { padding:10px 24px; background:var(--red); color:var(--white); border:none; border-radius:8px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.85rem; cursor:pointer; transition:opacity .2s; }
.btn-reset:hover { opacity:.85; }

/* === CENTRE ITEMS === */
.centre-item { padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; transition:all .3s; border-left:4px solid transparent; }
.centre-item:hover, .centre-item.active { background:var(--medium-gray); border-left-color:var(--red); }
.centre-item h3 { font-size:.92rem; margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Badge statuts */
.badge-open { font-size:.65rem; background:rgba(34,197,94,.15); color:#22C55E; padding:2px 9px; border-radius:10px; font-weight:600; letter-spacing:.02em; }
.badge-opening { font-size:.65rem; background:rgba(245,158,11,.15); color:#F59E0B; padding:2px 9px; border-radius:10px; font-weight:600; letter-spacing:.02em; }
.badge-closed { font-size:.65rem; background:rgba(107,114,128,.15); color:#9CA3AF; padding:2px 9px; border-radius:10px; font-weight:600; letter-spacing:.02em; }
.btn-rdv-disabled { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; font-size:.8rem; font-weight:500; color:var(--text-muted); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:8px; cursor:not-allowed; opacity:.6; }

/* Adresse */
.centre-item .address { color:var(--text-muted); font-size:.82rem; margin-bottom:6px; line-height:1.4; }

/* Actions row: RDV + Téléphone sur la même ligne */
.centre-actions-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.centre-action-btn.btn-phone { padding:6px 14px; background:rgba(196,26,31,.1); border-radius:8px; transition:background .2s; color:#FF6B6B; text-decoration:none; font-weight:600; font-size:.82rem; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.centre-action-btn.btn-phone:hover { background:rgba(196,26,31,.2); text-decoration:none; color:#FF8A8A; }

/* Badge distance (recherche proximité) */
.badge-distance { font-size:.65rem; background:rgba(255,255,255,.08); color:var(--text-muted); padding:2px 9px; border-radius:10px; font-weight:500; letter-spacing:.02em; margin-left:4px; }

/* Tags services */
.service-tags-row { margin-top:6px; display:flex; gap:5px; flex-wrap:wrap; }
.service-tag { font-size:.72rem; padding:3px 10px; border-radius:12px; background:rgba(196,26,31,.08); color:var(--red-light); font-weight:500; display:inline-block; }

/* Actions */
.centre-action-btn { font-size:.82rem; color:#FF6B6B; font-weight:600; cursor:pointer; text-decoration:none; padding:4px 0; display:inline-flex; align-items:center; gap:5px; }
.centre-action-btn:hover { text-decoration:underline; }
.centre-action-btn.btn-rdv { padding:6px 14px; background:#C41A1F; color:#fff; border-radius:8px; transition:opacity .2s; }
.centre-action-btn.btn-rdv:hover { opacity:.85; text-decoration:none; }

/* === MAP === */
.centres-map { position:relative; overflow:hidden; min-height:520px; }
#map { width:100%; height:100%; }

/* Override Google Maps InfoWindow — dark compact */
.gm-style .gm-style-iw-c { border-radius:12px !important; box-shadow:0 6px 28px rgba(0,0,0,.45) !important; padding:0 !important; background:var(--dark, #111) !important; border:1px solid rgba(255,255,255,.06) !important; }
.gm-style .gm-style-iw-d { overflow:auto !important; max-height:280px !important; padding:0 !important; }
.gm-style .gm-style-iw-tc::after { background:var(--dark, #111) !important; }
/* Bouton fermer natif Google : masqué — remplacé par un custom close */
.gm-style .gm-ui-hover-effect { display:none !important; }

/* Google Places autocomplete : styles dans global.css (partagé modal + page centres) */

/* === REGION GRID === */
.region-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.region-card { background:var(--dark); border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:24px; transition:border-color .3s; }
.region-card:hover { border-color:rgba(196,26,31,.3); }
.region-card h3 { font-size:1rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.region-count { font-size:.75rem; background:rgba(196,26,31,.15); color:var(--red); padding:2px 10px; border-radius:10px; }
.region-centres { list-style:none; }
.region-centres li { padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03); color:var(--text-muted); font-size:.85rem; }

/* ============================================
   RESPONSIVE BREAKPOINTS - CENTRES PAGE
   ============================================ */
@media (max-width:968px) {
  .centres-layout { grid-template-columns:1fr; }
  .centres-sidebar { order:2; }
  .centres-map { order:1; min-height:350px; }
  .centres-list { max-height:400px; }
}

@media (max-width:768px) {
  .centres-layout { grid-template-columns:1fr; }
  .centres-list { max-height:280px; }
  .search-box { flex-direction:column; border-radius:10px; }
  .search-box button { border-radius:0; }
  .region-grid { grid-template-columns:1fr; }
  .filter-bar { padding:12px 12px; }
  .centre-item { padding:14px 12px; }
}