/* location.css - Premium redesign - Fixed all overlapping issues */

/* Header offset to prevent overlap */
:root{--header-offset-desktop:120px;--header-offset-mobile:80px;}
body.scroll{padding-top:var(--header-offset-desktop);} /* offsets fixed header+top bar */
@media (max-width:991px){body.scroll{padding-top:var(--header-offset-mobile);}}

/* Banner section - proper z-index and padding */
.inner-banner{
  background-image:url('../images/locatio-banner.jpg'); 
  background-size:cover; 
  background-position:center; 
  padding: clamp(100px,15vw,160px) 0 clamp(80px,12vw,140px) 0; /* Increased top padding for more space */
  position:relative; 
  color:#fff;
  z-index:1;
}
.banner-inner{position:relative; z-index:2; text-align:center; max-width:1000px; margin:0 auto; padding:0 20px;}
.banner-title{font-size:clamp(1.8rem,6vw,3rem); margin:0 0 8px 0; font-weight:900; color:#fff; text-shadow:2px 2px 8px rgba(0,0,0,0.3);}
.banner-sub{color:rgba(255,255,255,0.95); font-size:clamp(0.95rem,2.5vw,1.2rem); margin:0 auto; text-shadow:1px 1px 4px rgba(0,0,0,0.3);}

/* Main content area - proper spacing and z-index */
.locations-wrap{
  max-width:1200px; 
  margin: -60px auto 80px; /* Negative margin pulls content up */
  position:relative;
  z-index:10; /* Above banner */
  padding:0 15px;
}

.locations-grid{
  display:grid; 
  grid-template-columns: 340px 1fr; 
  gap:28px; 
  align-items:start;
}

.locations-left .panel{
  background:#fff; 
  border-radius:12px; 
  padding:20px; 
  box-shadow:0 8px 30px rgba(0,0,0,0.08); 
  border:1px solid #f0e6dd;
  position:relative;
  z-index:100;
}

.panel-head h3{margin:0 0 6px 0; color:#5C2E00; font-size:1.25rem; font-weight:700;}
.panel-head .muted{color:#8a6b58; margin:0 0 12px 0; font-size:0.9rem;}
#location-search{width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e9d6bc; font-size:0.95rem;}
#location-search:focus{outline:none; border-color:#C86E35; box-shadow:0 0 0 3px rgba(200,110,53,0.1);}
#region-select{width:100%; padding:10px; margin-top:8px; border-radius:8px; border:1px solid #e9d6bc; font-size:0.95rem;}
#region-select:focus{outline:none; border-color:#C86E35; box-shadow:0 0 0 3px rgba(200,110,53,0.1);}
.panel-list{margin-top:12px; max-height:550px; overflow-y:auto;}
.location-item{padding:12px; border-bottom:1px solid #f3efe9; cursor:pointer; display:flex; gap:12px; transition:background 0.2s ease;}
.location-item:hover{background:linear-gradient(90deg, rgba(200,110,53,0.05), transparent);}
.location-item .meta{color:#4a2a12; font-weight:500;}
.location-item .small{color:#8a6b58; font-size:0.9rem; margin-top:4px;}

/* Map section */
.locations-main{
  min-height:480px; 
  position:relative;
  z-index:50;
}

#map{
  width:100%; 
  height:520px; 
  border-radius:12px; 
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  border:1px solid #f0e6dd;
}

.map-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.btn{
  background:#C86E35; 
  color:#fff; 
  padding:10px 16px; 
  border-radius:10px; 
  border:none; 
  cursor:pointer;
  font-size:0.95rem;
  font-weight:500;
  transition:all 0.3s ease;
}
.btn:hover{background:#a05a2a; transform:translateY(-1px); box-shadow:0 4px 12px rgba(200,110,53,0.3);}
.btn.ghost{
  background:transparent; 
  color:#C86E35; 
  border:1px solid rgba(200,110,53,0.3);
}
.btn.ghost:hover{background:rgba(200,110,53,0.05); border-color:#C86E35;}

/* Modal - proper z-index above everything */
.modal{
  position:fixed; 
  inset:0; 
  display:none; 
  align-items:center; 
  justify-content:center; 
  background:rgba(0,0,0,0.6); 
  z-index:99999; /* Highest z-index */
  backdrop-filter:blur(2px);
}
.modal[aria-hidden="false"]{display:flex;}
.modal-content{
  background:#fff; 
  padding:28px; 
  border-radius:12px; 
  width:clamp(300px,80vw,700px); 
  max-height:90vh; 
  overflow:auto;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.modal-close{
  position:absolute; 
  right:18px; 
  top:18px; 
  border:none; 
  background:transparent; 
  font-size:1.8rem; 
  cursor:pointer;
  color:#666;
  line-height:1;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.2s ease;
}
.modal-close:hover{color:#C86E35;}

/* Responsive - mobile fixes */
@media (max-width: 991px){
  body.scroll{padding-top:var(--header-offset-mobile);}
  .locations-wrap{margin: 20px auto 40px; padding:0 10px;}
}

@media (max-width: 900px){
  .locations-grid{grid-template-columns: 1fr; gap:20px;}
  #map{height:420px;}
  .panel-list{max-height:400px;}
}

@media (max-width:768px){
  .inner-banner{padding: clamp(80px,12vw,120px) 0 clamp(70px,10vw,100px) 0;}
  .banner-title{font-size:clamp(1.6rem,7vw,2.2rem);}
  .banner-sub{font-size:clamp(0.9rem,3vw,1.1rem);}
  .locations-wrap{margin: 10px auto 30px;}
  #map{height:380px;}
  .modal-content{padding:20px; width:92vw;}
}

@media (max-width:480px){
  .banner-title{font-size:clamp(1.4rem,8vw,1.9rem);}
  .panel-list{max-height:320px;}
  #map{height:340px;}
  .map-actions{flex-direction:column;}
  .btn{width:100%; justify-content:center; display:flex;}
  .modal-content{padding:18px;}
  .locations-wrap{padding:0 8px;}
}