/* =================================================
   CLUB SEARCH (FINDER PAGE)
================================================= */
.club-search-wrapper{
  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.club-search{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:24px;
}

.club-search h3{
  font-size:20px;
  font-weight:700;
  margin:0 0 20px;
}

/* City + territory pill */
.city-block{
  display:flex;
  align-items:center;
  background:#f4f4f4;
  border-radius:999px;
  padding:6px;
  margin:0 0 22px;
  position:relative;
}

.city-block select.country{
  width:auto;
  max-width:max-content;
  border:0;
  background:transparent;
  height:40px;
  padding:0 12px;
  font-weight:500;
  font-size:14px;
  outline:none;
  white-space:nowrap;
  color:#123bb0;
}

.city-block input[type="text"]{
  flex:1;
  border:0;
  background:transparent;
  height:40px;
  padding:0 14px;
  margin-left:16px;
  font-size:14px;
  outline:none;
  border-left:1px solid #d1d5db;
}

/* Autocomplete */
#city-suggestions{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  list-style:none;
  margin:0;
  padding:6px 0;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  z-index:20;
}

#city-suggestions li{
  padding:10px 16px;
  cursor:pointer;
  font-size:14px;
}

#city-suggestions li:hover{ background:#f3f4f6; }

/* Radius */
.radius-block{ margin:0 0 28px; }

.radius-header{
  display:flex;
  justify-content:space-between;
  font-weight:600;
  margin:0 0 8px;
}

.radius-block input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  outline:none;
  background:linear-gradient(to right,#2563eb 0%,#2563eb 43%,#d1d5db 43%,#d1d5db 100%);
}

.radius-block input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2563eb;
  cursor:pointer;
}

.radius-block input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2563eb;
  border:none;
  cursor:pointer;
}

.radius-value{
  text-align:center;
  margin-top:6px;
  font-size:14px;
  color:#6b7280;
}

/* Disciplines */
.disciplines{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:0 0 28px;
}

.disciplines button{
  height:46px;
  border-radius:999px;
  border:0;
  background:#f3f4f6;
  color:#6b7280;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}

.disciplines button:hover{ background:#e5e7eb; }
.disciplines button.active{ background:#e53935; color:#fff; }

/* Search button */
.search-wrapper{ display:flex; justify-content:center; }

.search-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:52px;
  padding:0 22px;
  border-radius:999px;
  border:0;
  background:#e53935;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  width:fit-content;
}

.search-icon{ display:flex; align-items:center; }

.separator{
  height:1px;
  background:#e5e7eb;
  margin:28px 0;
}

.club-search-title{
  font-size:20px;
  font-weight:700;
  margin:0 0 18px;
}

/* Map */
#club-map{
  width:100%;
  height:100%;
  min-height:500px;
  border-radius:18px;
  overflow:hidden;
}

.club-search-layout *{ box-sizing:border-box; }

.club-search-layout,
.club-search-layout > *,
.club-search-layout > * > *,
.club-search-layout > * > * > *{
  height:100%;
}

/* Map popup */
.club-popup-link{
  display:inline-block;
  margin-top:6px;
  text-decoration:underline;
  font-weight:700;
}

/* =================================================
   CLUB DETAIL PAGE
================================================= */
.club-detail-wrapper{
  width:100%;
  max-width:100vw !important;
  margin:0 !important;
  padding:22px 28px !important;
}

.club-detail-wrapper .back-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:500;
  color:#111827;
  margin:0 0 14px;
}

.club-title{
  font-size:64px;
  line-height:.95;
  font-weight:900;
  margin:12px 0 26px;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.club-detail-grid{
  width:100%;
  max-width:none !important;
  display:grid;
  gap:48px !important;
  align-items:start;
}

.section-title{
  font-size:22px !important;
  font-weight:600 !important;
  margin:0 0 14px !important;
  color:#111827;
}

.club-main-info{ min-width:0; }

/* Practice cards */
.practice-card{
  background:#fff;
  border-radius:18px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  padding:18px !important;
  display:grid;
  grid-template-columns:1fr 280px !important;
  gap:22px !important;
  align-items:center !important;
  margin:0 0 18px;
  max-width:100%;
}

.practice-text{ min-width:0; }

.location-name{
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:.01em;
  margin:0 0 10px !important;
  text-transform:uppercase;
  color:#2F4999 !important;
}

.location-address{
  margin:0;
  font-size:14px !important;
  font-weight:500 !important;
  color:#111827 !important;
  line-height:1.4 !important;
}

.practice-map{
  width:280px !important;
  height:174px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#f3f4f6;
  justify-self:end;
  flex:none;
}

.practice-map iframe{
  display:block !important;
  width:280px !important;
  height:174px !important;
  min-height:174px !important;
  border:0 !important;
}

/* Disciplines pills (detail page) */
.disciplines-container{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.discipline-tag{
  display:inline-flex;
  align-items:center;
  padding:12px 16px !important;
  border-radius:999px;
  background:#f3f4f6 !important;
  font-size:14px;
  font-weight:600 !important;
  color:#111827 !important;
}

/* Contact card (detail page) */
.club-contact-card{
  background:#fff;
  border-radius:18px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  padding:26px 28px 26px !important;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 140px;
  gap:24px;
  align-items:start;
}

.contact-left{ min-width:0; }

.contact-right{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.club-logo-img{
  width:120px;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
}

.contact-item{ margin-top:20px; }

.contact-item strong{
  display:block;
  font-size:14px !important;
  color:#2F4999 !important;
  font-weight:500 !important;
  margin:0 0 8px;
}

.contact-item p{
  margin:0;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  color:#111827 !important;
  white-space:normal;
  overflow-wrap:anywhere;
}

.contact-item a{
  color:#111827 !important;
  text-decoration:underline;
  font-weight:500;
}

.web-button{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:56px;
  border-radius:999px;
  background:#2F4999 !important;
  color:#fff;
  text-decoration:none;
  font-weight:900;
}

.web-button .arrow{ font-size:18px; line-height:1; }

/* Layout widths: desktop = 50/50, mobile = stack */
@media (min-width: 981px){
  .club-detail-grid{ grid-template-columns:1fr 1fr !important; }
}

@media (max-width: 980px){
  .club-detail-wrapper{ width:100%; padding:18px 16px !important; }
  .club-title{ font-size:40px; }

  .club-detail-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .practice-card{ grid-template-columns:1fr !important; }

  .practice-map,
  .practice-map iframe{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
  }

  .contact-grid{ grid-template-columns:1fr; }
  .contact-right{ justify-content:flex-start; }
}

/* Container for the suggestions */
#city-suggestions-main {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none; /* Hide initially */
  z-index: 1000;
  margin-top: 5px;
  padding: 0;
  list-style-type: none;
}

/* Each suggestion item */
#city-suggestions-main li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for suggestions */
#city-suggestions-main li:hover {
  background-color: #f0f0f0;
}

/* Ensure input field doesn't overlap with suggestions */
#city-input-main {
  position: relative;
}