/* StayZio Home — FabHotels / OYO inspired structure
   Keeps StayZio navy + teal branding and existing search functionality.
*/
:root{
  --sz-navy:#0B1F3A;
  --sz-teal:#00B8B8;
  --sz-teal-dark:#009A9A;
  --sz-text:#172033;
  --sz-muted:#667085;
  --sz-line:#E5EAF0;
  --sz-bg:#F7F9FC;
  --sz-white:#FFFFFF;
}

/* ---------- page + hero ---------- */
body{background:#fff!important}

.sz-hero-band{
  background:#fff!important;
  padding-bottom:0!important;
}

.sz-hero-section{
  position:relative;
  margin-bottom:86px!important;
}

.sz-hero-img{
  height:430px!important;
  min-height:430px;
  background-position:center 48%!important;
}

.sz-hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(11,31,58,.93) 0%,
      rgba(11,31,58,.82) 36%,
      rgba(11,31,58,.46) 63%,
      rgba(11,31,58,.18) 100%)!important;
}

.sz-hero-txt{
  max-width:760px!important;
  padding-left:clamp(24px,7vw,96px)!important;
}

.sz-hero-txt h1{
  font-family:'Poppins',sans-serif!important;
  font-size:clamp(34px,4.1vw,58px)!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:-1.2px;
  margin-bottom:16px!important;
  white-space:normal!important;
  max-width:720px;
}

.sz-hero-txt h1 span{
  color:#A8F3F3!important;
  font-weight:800!important;
}

.sz-hero-txt p{
  max-width:620px!important;
  font-size:16px!important;
  line-height:1.65!important;
  color:rgba(255,255,255,.88)!important;
  margin-bottom:0!important;
}

/* ---------- Fab/OYO-style search engine ---------- */
.sz-search-float{
  bottom:-52px!important;
  max-width:1180px!important;
  width:calc(100% - 56px)!important;
}

.sz-search-inner{
  min-height:104px;
  border-radius:12px!important;
  padding:10px!important;
  border:1px solid rgba(11,31,58,.08);
  box-shadow:0 18px 50px rgba(11,31,58,.16)!important;
  align-items:stretch!important;
}

.sz-search-inner .search-item1,
.sz-search-inner .search-item2,
.sz-search-inner .search-item3,
.sz-search-inner .search-item4{
  padding:14px 18px!important;
  border-radius:8px!important;
}

.sz-search-inner span{
  color:#7B8798!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
}

.sz-search-inner .selected-city,
.sz-search-inner #dateRangeDisplay,
.sz-search-inner .selected-time{
  color:var(--sz-text)!important;
  font-size:14px!important;
  font-weight:700!important;
}

.sz-search-inner .search-item1::after,
.sz-search-inner .search-item2::after,
.sz-search-inner .search-item3::after{
  background:#E8EDF3!important;
  top:20%!important;
  bottom:20%!important;
}

.duration-tabs{
  background:#F1F5F8!important;
  border-radius:8px!important;
  padding:4px!important;
}

.duration-tabs button{
  border-radius:6px!important;
  padding:7px 11px!important;
  font-size:11px!important;
  color:#596579!important;
}

.duration-tabs button.active{
  background:var(--sz-teal)!important;
  color:#fff!important;
}

.sz-search-inner .search-btn{
  background:var(--sz-teal)!important;
  border-radius:8px!important;
  min-width:160px;
  justify-content:center;
  padding:0 25px!important;
  font-size:14px!important;
  box-shadow:none!important;
  margin-left:8px!important;
}

.sz-search-inner .search-btn:hover{
  background:var(--sz-teal-dark)!important;
}

/* ---------- localities ---------- */
.top-cities-section{
  max-width:1180px!important;
  padding:36px 28px 28px!important;
  margin:0 auto!important;
}

.top-cities-section h3{
  font-size:24px!important;
  color:var(--sz-navy)!important;
  margin:0 0 20px!important;
  font-weight:800!important;
}

.top-cities-section > p{display:none!important}

.city-strip{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}
.city-strip::-webkit-scrollbar{display:none}

.city-chip{
  width:132px!important;
  flex:0 0 132px;
  background:#fff;
  border:1px solid #E7ECF1;
  border-radius:12px;
  padding:12px 10px 10px;
  color:#344054!important;
  font-size:12px!important;
  font-weight:700!important;
  transition:.2s;
}

.city-chip:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(0,184,184,.42);
  box-shadow:0 8px 22px rgba(11,31,58,.08);
}

.city-chip .city-chip-badge,
.all-cities i{
  width:54px!important;
  height:54px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#0B1F3A,#173A65)!important;
  box-shadow:none!important;
  font-size:21px!important;
  margin:0 auto 9px!important;
}

.all-cities i{
  color:#fff!important;
}

/* ---------- about StayZio ---------- */
.sz-about-home{
  background:#F7F9FC;
  padding:72px 24px;
  font-family:'Poppins',sans-serif;
}

.sz-about-wrap{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:58px;
  align-items:center;
}

.sz-about-media{
  min-height:420px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(135deg,rgba(11,31,58,.14),rgba(0,184,184,.14)),
    url('/assets/img/homepage/default_hero.jpg') center/cover no-repeat;
  box-shadow:0 22px 55px rgba(11,31,58,.14);
}

.sz-about-media:after{
  content:'3H  •  6H  •  FULL DAY';
  position:absolute;
  left:22px;
  bottom:22px;
  background:#fff;
  color:var(--sz-navy);
  border-radius:999px;
  padding:10px 16px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  box-shadow:0 8px 22px rgba(11,31,58,.15);
}

.sz-about-eyebrow{
  color:var(--sz-teal);
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  margin-bottom:12px;
}

.sz-about-title{
  margin:0 0 18px;
  color:var(--sz-navy);
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.8px;
}

.sz-about-copy{
  color:#596579;
  font-size:15px;
  line-height:1.85;
  margin:0 0 26px;
}

.sz-about-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
  margin:0 0 30px;
}

.sz-about-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#344054;
  font-size:13px;
  font-weight:700;
}

.sz-about-check{
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,184,184,.12);
  color:var(--sz-teal-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  margin-top:1px;
  font-size:11px;
}

.sz-about-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--sz-navy);
  color:#fff!important;
  text-decoration:none!important;
  padding:13px 20px;
  border-radius:9px;
  font-size:13px;
  font-weight:800;
  transition:.2s;
}

.sz-about-btn:hover{
  background:#102B4D;
  transform:translateY(-1px);
}

/* keep following home sections clean */
.section,
.benefits-section{
  background:#fff;
}

@media(max-width:992px){
  .sz-search-float{width:calc(100% - 28px)!important}
  .sz-about-wrap{grid-template-columns:1fr;gap:34px}
  .sz-about-media{min-height:330px}
}

@media(max-width:768px){
  .sz-hero-section{margin-bottom:350px!important}
  .sz-hero-img{
    min-height:390px!important;
    height:390px!important;
    padding:0!important;
  }
  .sz-hero-txt{
    padding:0 20px!important;
    max-width:100%!important;
  }
  .sz-hero-txt h1{
    font-size:34px!important;
    max-width:360px;
  }
  .sz-hero-txt p{
    max-width:340px!important;
    font-size:14px!important;
  }
  .sz-search-float{
    bottom:-325px!important;
    width:calc(100% - 24px)!important;
  }
  .sz-search-inner{
    min-height:auto;
    flex-direction:column!important;
    padding:8px!important;
    border-radius:12px!important;
  }
  .sz-search-inner .search-item1,
  .sz-search-inner .search-item2,
  .sz-search-inner .search-item3,
  .sz-search-inner .search-item4{
    width:100%!important;
    padding:12px 11px!important;
    border-bottom:1px solid #EEF1F5!important;
  }
  .sz-search-inner .search-btn{
    width:100%!important;
    min-height:50px;
    margin:8px 0 0!important;
  }
  .top-cities-section{
    padding:30px 16px 22px!important;
  }
  .city-chip{
    flex-basis:112px;
    width:112px!important;
  }
  .sz-about-home{padding:54px 18px}
  .sz-about-media{min-height:270px;border-radius:16px}
  .sz-about-title{font-size:31px}
  .sz-about-points{grid-template-columns:1fr}
}