/* =====================================================================
   REALTY INDIA — Hero Search Panel REPOLISH
   Drop-in override. Load this AFTER site.css.
   Goal: compact inline Search button + a more premium, attractive panel.
   Only the hero search card (.scard on the home hero) is affected.
   ===================================================================== */

/* ---- card shell: softer radius, layered shadow, thin brand accent ---- */
.hero .scard{
  position:relative;
  max-width:1000px;
  border-radius:22px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 40px 90px -34px rgba(2,6,23,.6), 0 2px 6px rgba(15,23,42,.05);
  overflow:visible;
}
.hero .scard:before{
  content:'';position:absolute;left:26px;right:26px;top:0;height:3px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,var(--blue),#a88a52 55%,#d8c7a0);
}

/* ---- premium segmented tabs (Buy / Rent / Project) ---- */
.hero .scard .stabs{
  display:inline-flex;gap:4px;
  background:#f1f5f9;border:1px solid #e6ebf3;border-radius:999px;
  padding:5px;margin:22px 24px 0;width:auto;
}
.hero .scard .stabs button{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 20px;font-size:13.5px;font-weight:700;border-radius:999px;color:var(--mut);
}
.hero .scard .stabs button svg{width:15px;height:15px}
.hero .scard .stabs button:hover{background:#e7edf5;color:var(--ink)}
.hero .scard .stabs button.on{background:var(--blue);color:#fff;box-shadow:0 8px 16px -8px rgba(168,138,82,.6)}

/* ---- fields as a single flex row so the button sits INLINE + COMPACT ---- */
.hero .scard .sfields{
  display:flex;gap:12px;padding:18px 24px 6px;align-items:flex-end;flex-wrap:wrap;
}
.hero .scard .sfields .fld{flex:1 1 150px;min-width:130px}
.hero .scard .sfields .fld.fld-budget{flex:1.5 1 220px}
.hero .scard .fld label{font-size:10.5px;letter-spacing:.07em;margin-bottom:7px;color:var(--mut)}
/* give the two budget selects room so "No Min / No Max" never truncate */
.hero .scard .frange select{padding-right:34px;background-position:right 14px center}

/* refined controls: 52px height, rounded 14px, focus ring */
.hero .scard .fld input,
.hero .scard .fld select,
.hero .scard .fld .ss-trigger{
  height:52px;min-height:52px;border-radius:14px;background-color:var(--bg);
  border:1px solid var(--line);font-weight:600;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.hero .scard .fld input:hover,
.hero .scard .fld select:hover,
.hero .scard .fld .ss-trigger:hover{border-color:#c7d5ea}
.hero .scard .fld input:focus,
.hero .scard .fld select:focus,
.hero .scard .fld .ss-trigger:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(168,138,82,.12)}
.hero .scard .frange .fsep{line-height:52px}

/* ---- the repolished COMPACT search button ---- */
.hero .scard .sbtn{flex:0 0 auto}
.hero .scard .sbtn .btn{
  width:auto;min-width:154px;height:52px;min-height:52px;
  padding:0 30px;border-radius:14px;gap:9px;
  font-size:14px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 12px 24px -12px rgba(168,138,82,.75);
}
.hero .scard .sbtn .btn svg{width:18px;height:18px}
.hero .scard .sbtn .btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(168,138,82,.8)}
.hero .scard .sbtn .btn:active{transform:translateY(0)}

/* on small screens the button goes full width (touch-friendly) */
@media(max-width:760px){
  .hero .scard .sbtn{flex:1 1 100%}
  .hero .scard .sbtn .btn{width:100%}
}

/* ---- footer row (more filters + count) ---- */
.hero .scard .sfoot{padding:10px 24px 20px}
.hero .scard .sfoot .adv{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.hero .scard .sfoot .adv svg{width:16px;height:16px;transition:transform .2s ease}
.hero .scard .sfoot .adv.on svg{transform:rotate(180deg)}
.hero .scard .sfoot .cnt b{font-weight:800}

/* ---- advanced panel & chips small refinements ---- */
.hero .scard .spanel{padding:16px 24px 20px}
.hero .scard .recent-s{padding:12px 24px 16px}

/* =====================================================================
   HERO BACKGROUND — more attractive, cinematic dusk skyline
   ===================================================================== */
.hero{background:#0a1a35}
.hero .bg{opacity:.58}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.03)}
/* readability + colour: darkening gradient sits above image, below content */
.hero:before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(7,17,38,.70) 0%, rgba(7,17,38,.30) 42%, rgba(7,17,38,.82) 100%),
    linear-gradient(105deg, rgba(9,20,48,.55) 0%, rgba(12,66,150,.18) 55%, rgba(7,17,38,.25) 100%);
}
/* soft brand glow near the top-centre behind the heading */
.hero:after{
  z-index:1;
  background:radial-gradient(ellipse 85% 62% at 50% -12%, rgba(59,130,246,.42), transparent 62%);
}
/* keep the heading, text and search card crisply above every overlay */
.hero .container{position:relative;z-index:3}