/*  99Lease — design system.  99Yard ka sagaa bhai.
    ===========================================================================
    YEH FILE YARD SE NIKLI HAI
    --------------------------
    `99Yard Deploy Folder/styles/yard.css` se banayi gayi -- haddiyaan wahi
    hain, sirf class ka prefix `.y-` se `.l-` hua aur rang badle.

    Dono portal alag Vercel project hain, isliye ek CSS file saanjhi nahi ho
    sakti. Nakal majboori hai. ⚠️ Lakeer, spacing ya motion ka koi niyam
    yahan badlein to yard me bhi dekh lein -- do bhai alag dikhne lagen to
    network ek nahi lagta.

    RANG KYUN ALAG
    --------------
    Yard KHOJNE ki jagah hai -- neela/cyan, thanda aur taez, jaise koi
    yantra. Lease RAHNE ki jagah hai: kiraya har mahine, receipt, marammat,
    saal bhar ka rishta. Isliye teal/emerald -- base wahi gehra, par thoda
    jeevit.

    Violet dono me ek jaisa hai (--a3), aur wo SIRF AI wali cheezon par
    lagta hai. Iska matlab hai: poore network me jo violet dikhe, wo AI hai.
    Isliye use kisi aam button par mat lagaiye -- pehchaan tabhi banti hai
    jab wo ek hi cheez ke liye ho.

    LAKEER KE TEEN DARJE (maalik ka niyam) — gehre par naapi gayi:
      surface #0e1a22 ke against
        --line          ~1.6:1   card ki lakeer
        --line-strong   ~3:1     input ki lakeer
      button apne bharav se hi 2.3:1 se kaafi upar hai.
    Nayi hadd YAHIN badlegi, neeche kahin hex likh kar nahi.

    MOTION
    ------
    Har animation `prefers-reduced-motion` ke peechhe hai. Chamak dikhane ke
    chakkar me kisi ko chakkar nahi aana chahiye.
=========================================================================== */

:root {
  color-scheme: dark;

  --shell:      1220px;
  --shell-form: 540px;

  /* base — yard jaisa gehra, par neele ki jagah halka sa hara-pan */
  --bg:         #06100f;
  --bg-2:       #081616;
  --surface:    #0e1a22;
  --surface-2:  #14262f;
  --surface-3:  #1b3440;

  /* lakeerein — upar likha naap */
  --line:        #263a44;
  --line-strong: #55707d;

  /* ink */
  --ink:    #e7f1f2;
  --ink-2:  #9db9bd;
  --ink-3:  #698891;

  /* accent */
  --a1: #2dd4bf;   /* teal    — mukhya */
  /*  rgba() ke liye alag se. Yeh isliye hai ki neeche glow/ring me
      transparency chahiye, aur rgba() hex nahi leta. Rang badlein to
      DONO jagah badalna hoga -- isliye yahi ek jagah rakhi hai. */
  --a1-rgb: 45,212,191;
  --bg-rgb: 6,16,15;
  --a2-rgb: 52,211,153;
  --a2: #34d399;   /* emerald          */
  --a3: #a78bfa;   /* violet  — SIRF AI ke liye, yard me bhi yahi */
  --brand-a: #f59e0b;
  --brand-b: #1e3a8a;

  --grad:      linear-gradient(120deg, var(--a1), var(--a2));
  --grad-soft: linear-gradient(120deg, rgba(var(--a1-rgb),.16), rgba(var(--a2-rgb),.10));
  --grad-ai:   linear-gradient(120deg, var(--a3), var(--a1));

  --ok:   #34d399;
  --warn: #fbbf24;
  --due:  #fb7185;   /* kiraya baaki / late — lease me hi chahiye */

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 10px 30px -12px rgba(0,0,0,.7);
  --sh-glow: 0 0 0 1px rgba(var(--a1-rgb),.35), 0 12px 38px -14px rgba(var(--a1-rgb),.55);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  font-family: "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Poore page ke peechhe ek halka jaal + do dhundhle gole. Yahi wo "kuch
     zinda hai" wala ehsaas deta hai bina kisi image ke (page hallka rehta). */
  background-image:
    radial-gradient(900px 520px at 12% -6%, rgba(var(--a1-rgb),.13), transparent 60%),
    radial-gradient(760px 460px at 92% 4%, rgba(167,139,250,.11), transparent 62%),
    linear-gradient(var(--bg), var(--bg-2));
  background-attachment: fixed;
}

/*  [hidden] ka bharosa
    -------------------
    HTML ka `hidden` attribute browser ke default me `display:none` deta
    hai -- par wo default hai, aur koi bhi class use haraa deti hai.
    `.l-warn { display:flex }` theek yahi kar raha tha: `#notice` par
    `hidden` laga hota, phir bhi khaali amber patti har page par dikhti.

    Yeh ek line usse bandh kar deti hai. `!important` yahan jaayaz hai --
    `hidden` ka matlab hi "mat dikhao", uspar bahas ki gunjaish nahi.
    Yard me bhi yahi kami thi (1 Sep 2026 ko lease banate waqt pakdi). */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; }

.shell      { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
.shell-form { width: 100%; max-width: var(--shell-form); margin: 0 auto; padding: 0 16px; }
@media (max-width: 560px) { .shell { padding: 0 14px; } }

/* ── entrance ─────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s var(--ease) both; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .11s } .d3 { animation-delay: .17s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── header ───────────────────────────────────────────────────────────── */
.l-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(var(--bg-rgb),.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.l-head-in { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.l-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.l-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--grad); color: #04121f;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; letter-spacing: -.5px;
  box-shadow: 0 6px 18px -8px rgba(var(--a1-rgb),.9);
}
.l-word { font-weight: 800; font-size: 17px; letter-spacing: -.4px; }
.l-word em { font-style: normal; color: var(--a2); }

.l-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.l-nav a {
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-2);
  padding: 9px 12px; border-radius: var(--r-sm); transition: .18s var(--ease);
}
.l-nav a:hover { color: var(--ink); background: var(--surface-2); }
.l-nav a.cta {
  color: #04121f; background: var(--grad); font-weight: 700;
  padding: 9px 17px; border-radius: var(--r-pill);
  box-shadow: 0 6px 20px -10px rgba(var(--a1-rgb),.95);
}
.l-nav a.cta:hover { color: #04121f; filter: brightness(1.08); }
@media (max-width: 700px) { .l-nav a.hide-sm { display: none; } }

/* ── buttons / inputs ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: .18s var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--a1); }
.btn-primary {
  border-color: transparent; color: #04121f; background: var(--grad);
  box-shadow: 0 10px 28px -12px rgba(var(--a1-rgb),.9);
}
.btn-primary:hover { filter: brightness(1.08); background: var(--grad); }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface-2); border-color: var(--line-strong); }

.inp, .sel {
  font: inherit; font-size: 14.5px; width: 100%; color: var(--ink);
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: .18s var(--ease);
}
.sel {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0c9' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.inp:focus, .sel:focus {
  outline: none; border-color: var(--a1);
  box-shadow: 0 0 0 3px rgba(var(--a1-rgb),.22);
}
.inp::placeholder { color: var(--ink-3); opacity: 1; }
.sel option { background: var(--surface-2); color: var(--ink); }

.chip {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: .18s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip[aria-pressed="true"] {
  background: var(--grad); border-color: transparent; color: #04121f;
  box-shadow: 0 8px 22px -12px rgba(var(--a1-rgb),.95);
}

/* ── AI pill ──────────────────────────────────────────────────────────── */
.ai-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--r-pill);
  color: var(--a2); background: rgba(var(--a2-rgb),.10);
  border: 1px solid rgba(var(--a2-rgb),.32);
}
.ai-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a2); box-shadow: 0 0 10px var(--a2);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ── hero ─────────────────────────────────────────────────────────────── */
.l-hero { position: relative; padding: 62px 0 40px; overflow: hidden; }
.l-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Halka jaal — perspective ke bina, warna wo 2014 lagta hai. */
  background-image:
    linear-gradient(rgba(var(--a1-rgb),.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--a1-rgb),.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%);
}
.l-hero .shell { position: relative; }
.l-hero h1 {
  margin: 16px 0 12px; font-size: clamp(30px, 5.2vw, 52px); line-height: 1.06;
  font-weight: 800; letter-spacing: -1.6px; max-width: 17ch;
}
.l-hero h1 .g {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.l-hero .sub { margin: 0 0 26px; font-size: clamp(14.5px, 1.6vw, 17px); color: var(--ink-2); max-width: 56ch; }

/* search panel — kaanch ki parat */
.l-search {
  background: rgba(var(--bg-rgb),.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 16px;
  box-shadow: var(--sh-2);
}
.l-search-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.l-purpose { display: flex; gap: 8px; }
.l-searchrow { display: flex; gap: 10px; }
.l-searchrow .inp { flex: 1 1 auto; font-size: 15.5px; padding: 15px 17px; }
@media (max-width: 620px) {
  .l-searchrow { flex-direction: column; }
  .l-searchrow .btn { width: 100%; padding: 14px; }
}
.l-hints { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; align-items: center; }
.l-hints .lbl { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.l-hint {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-2);
  transition: .18s var(--ease);
}
.l-hint:hover { color: var(--a2); border-color: var(--a2); border-style: solid; }

/* parsed filter -> chips */
.l-parsed { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.l-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(var(--a1-rgb),.14); border: 1px solid rgba(var(--a1-rgb),.34); color: var(--ink);
}

/* ── stat strip ───────────────────────────────────────────────────────── */
.l-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 26px;
}
.l-stat { background: var(--surface); padding: 18px 16px; text-align: center; }
.l-stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.8px; }
.l-stat span { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .7px; font-weight: 600; }
@media (max-width: 700px) { .l-stats { grid-template-columns: repeat(2, 1fr); } .l-stat b { font-size: 20px; } }

/* ── sections ─────────────────────────────────────────────────────────── */
.l-sec { padding: 52px 0 6px; }
.l-sec-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.l-sec h2 { margin: 0 0 4px; font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.8px; }
.l-sec .sub { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.l-sec-head .more { margin-left: auto; }

/* ── grid + property card ─────────────────────────────────────────────── */
.l-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 620px) { .l-grid { grid-template-columns: 1fr; gap: 14px; } }

.l-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.l-card:hover { transform: translateY(-4px); border-color: rgba(var(--a1-rgb),.55); box-shadow: var(--sh-glow); }

.l-photo {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(150deg, var(--surface-2), var(--surface-3));
  display: flex; align-items: center; justify-content: center;
}
.l-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.l-card:hover .l-photo img { transform: scale(1.06); }
/* Photo na ho to khaali dhabba nahi -- ek saaf nishaan. */
.l-noimg { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink-3); }
.l-noimg svg { opacity: .55; }
.l-noimg span { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; }

.l-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--bg-rgb),.86) 0%, rgba(var(--bg-rgb),0) 52%);
}
.l-badge {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(var(--bg-rgb),.78); border: 1px solid var(--line-strong); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.l-badge.rent { color: var(--a2); border-color: rgba(var(--a2-rgb),.5); }
.l-badge.sale { color: var(--a1); border-color: rgba(var(--a1-rgb),.5); }

/*  "Available now" — lease par badge ki asli jagah yahi hai.
    Yard par badge "For Rent / For Sale" batata tha. Yahan sab kiraye ka
    hai, to wo lableel bekaar thi. Kirayedaar ke liye asli khabar yeh hai
    ki abhi shift ho sakta hun ya do mahine rukna hoga -- isliye wahi upar
    aata hai, aur SIRF tab jab sach me abhi khaali ho. */
.l-badge.now {
  display: inline-flex; align-items: center; gap: 5px;
  text-transform: none; letter-spacing: .2px; font-size: 11px;
  color: var(--a2); border-color: rgba(var(--a2-rgb),.55);
  background: rgba(var(--bg-rgb),.82);
}
.l-badge.now svg { opacity: .9; }

/*  Kiraya + deposit ek saath. Deposit card par isliye hai ki pehle din
    jeb se dono jaate hain -- chhupane se pehli call par hi baat toot ti
    hai, aur wo call broker ka waqt khaati hai.
    Lakeer upar isliye ki yeh "shart" hai, "khoobi" nahi -- facts se alag
    padhi jaani chahiye. */
.l-terms {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
}

.l-count {
  position: absolute; bottom: 11px; right: 11px; z-index: 2;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-sm);
  background: rgba(var(--bg-rgb),.72); border: 1px solid var(--line); color: var(--ink-2);
}
.l-priceover {
  position: absolute; left: 13px; bottom: 11px; z-index: 2;
  font-size: 20px; font-weight: 800; letter-spacing: -.6px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.l-priceover small { font-size: 12px; font-weight: 600; color: #cbd8ea; }

.l-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.l-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.l-loc { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.l-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.l-fact {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.l-foot-row {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3);
}
.l-ava {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-ai); color: #04121f;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
}
.l-foot-row .ago { margin-left: auto; }

/* ── AI feature cards ─────────────────────────────────────────────────── */
.l-feat {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; overflow: hidden;
  transition: .22s var(--ease);
}
.l-feat:hover { border-color: rgba(167,139,250,.5); transform: translateY(-3px); }
.l-feat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad-ai);
}
.l-feat .ico {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
  background: var(--grad-soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--a2);
}
.l-feat h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.l-feat p  { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

/* ── cities ───────────────────────────────────────────────────────────── */
.l-cities { display: flex; flex-wrap: wrap; gap: 9px; }
.l-city {
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  padding: 10px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: .18s var(--ease);
}
.l-city:hover { border-color: var(--a1); color: var(--a1); background: var(--surface-2); }
.l-city span { color: var(--ink-3); font-weight: 500; margin-left: 4px; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.l-band {
  margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(var(--a1-rgb),.20), transparent 62%),
    radial-gradient(600px 300px at 90% 100%, rgba(167,139,250,.16), transparent 60%),
    var(--surface);
  padding: 36px 30px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.l-band h2 { margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.7px; }
.l-band p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 54ch; }
.l-band .acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .l-band { padding: 26px 20px; } .l-band .acts { margin-left: 0; width: 100%; } .l-band .acts .btn { flex: 1; } }

/* ── filters (search page) ────────────────────────────────────────────── */
.l-filters {
  position: sticky; top: 61px; z-index: 30;
  background: rgba(var(--bg-rgb),.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); padding: 14px 0;
}
.l-filterrow { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.l-filterrow::-webkit-scrollbar { display: none; }
.l-filterrow > * { flex: 0 0 auto; }
.l-filterrow .sel { width: auto; min-width: 136px; padding: 10px 32px 10px 13px; font-size: 13.5px; }

/* ── states ───────────────────────────────────────────────────────────── */
.l-note {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 26px 22px; text-align: center; color: var(--ink-2); font-size: 14px;
}
.l-note strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; font-weight: 700; }
.l-warn {
  text-align: left; padding: 14px 16px; font-size: 13.5px;
  border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.07); color: #f5d99b;
  display: flex; gap: 10px; align-items: flex-start;
}
.l-warn::before { content: "!"; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: #23180a; font-weight: 900; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/*  Kiraye wali soochna -- 99Lease ka rang (violet), taaki wo "kuch galat
    hua" wale peele warning se alag dikhe. Yeh galti nahi hai, raasta hai. */
.l-lease {
  border-color: rgba(167,139,250,.42);
  background:
    radial-gradient(420px 180px at 50% 0%, rgba(167,139,250,.14), transparent 70%),
    var(--surface);
}
.l-lease span { display: block; margin-top: 2px; }
.l-lease b { color: var(--a3); }
.l-lease .soon {
  margin-top: 13px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--a3);
}

@keyframes shim { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
.l-sk {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%; animation: shim 1.5s ease infinite; border-radius: var(--r-sm);
}

/* ── footer ───────────────────────────────────────────────────────────── */
.l-foot {
  margin-top: 64px; border-top: 1px solid var(--line);
  background: rgba(var(--bg-rgb),.7); padding: 30px 0; font-size: 13px; color: var(--ink-3);
}
.l-foot-in { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.l-foot a { color: var(--ink-2); text-decoration: none; }
.l-foot a:hover { color: var(--a2); }
.l-foot .sp { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }


/* ── shortlist ka dil (card par) ──────────────────────────────────────── */
.l-save {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line-strong);
  background: rgba(7, 11, 20, .62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: .18s var(--ease);
}
/* Bina bhara hua dil = "abhi saved nahi". Bhara hua = saved. Sirf rang
   badalne se colour-blind ko farq nahi dikhta, isliye bharav bhi badalta. */
.l-save svg { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.l-save:hover { border-color: #f472b6; }
.l-save:hover svg { stroke: #f472b6; }
.l-save.on { background: rgba(244, 114, 182, .18); border-color: #f472b6; }
.l-save.on svg { fill: #f472b6; stroke: #f472b6; }

/* Header par shortlist ki ginti */
.l-nav .count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--a1); color: #04121f;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 18px;
}


/* ── compare table (shortlist) ────────────────────────────────────────── */
/* Chaudi table mobile par page ko todti hai. Isliye wo APNE andar scroll
   karti hai -- page kabhi baayen-daayen nahi khiskta. */
.l-tablewrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface);
}
.l-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; }
.l-table th, .l-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.l-table thead th {
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); position: sticky; top: 0;
}
.l-table thead th a { color: var(--a1); text-decoration: none; }
.l-table thead th a:hover { text-decoration: underline; }
.l-table tbody th {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; width: 1%;
}
.l-table tbody td { color: var(--ink); font-weight: 600; }
.l-table tr:last-child th, .l-table tr:last-child td { border-bottom: 0; }


/* Header ka Save button jab saved ho */
.btn.on { border-color: #f472b6; color: #f9a8d4; background: rgba(244, 114, 182, .12); }
.btn.on:hover { border-color: #f472b6; background: rgba(244, 114, 182, .2); }

/* ── breadcrumb (city page) ───────────────────────────────────────────── */
.l-crumb { padding: 18px 0 4px; font-size: 12.5px; color: var(--ink-3); }
.l-crumb a { color: var(--ink-2); text-decoration: none; }
.l-crumb a:hover { color: var(--a2); }
.l-crumb span { margin: 0 6px; }
.l-crumb span:last-child { margin: 0; color: var(--ink); font-weight: 600; }

/* ═══ rental.html — ek ghar ka poora page ═══════════════════════════════════
   Yeh class sirf `/rental` par chalti hain. Prefix `.r-` isliye ki `.l-`
   wale poore portal ke hain -- yahan kuch badalne se baaki page na hilein. */

.r-hero {
  position: relative; margin: 18px 0 10px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  aspect-ratio: 16/9;
}
.r-hero img { width: 100%; height: 100%; object-fit: cover; }
/*  Photo na ho to dabba CHHOTA. Pehle yeh bhi poora 16:9 tha, aur bade
    screen par kiraya/deposit/facts -- sab kuch neeche dhakel deta tha.
    Ek khaali dabbe ko itni jagah dena galat hai: dekhne wale ko wahi
    dikhta hai jo hai hi nahi, aur jo hai wo scroll ke neeche chala jaata
    hai. */
.r-hero.r-noimg {
  aspect-ratio: auto; min-height: 132px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 13px; letter-spacing: .4px; text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(var(--a1-rgb),.03) 10px 20px),
    var(--surface);
}

.r-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.r-thumb {
  flex: 0 0 84px; height: 60px; padding: 0; cursor: pointer;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  transition: .18s var(--ease);
}
.r-thumb img { width: 100%; height: 100%; object-fit: cover; }
/*  Kaunsa photo khula hai -- lakeer se, dhundhlepan se nahi. Dhundhla
    karne par lagta hai photo hi kharab hai. */
.r-thumb.on { border-color: var(--a1); box-shadow: 0 0 0 2px rgba(var(--a1-rgb),.28); }

.r-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0 4px;
}
.r-head > div:first-child { flex: 1; min-width: 0; }
.r-title { margin: 0 0 4px; font-size: clamp(20px, 3vw, 27px); font-weight: 800; letter-spacing: -.6px; }
#saveBtn.on { border-color: var(--a1); color: var(--a1); }

/*  Kiraya + deposit + kab se khaali -- teeno ek saath, sabse upar.
    Kirayedaar ka faisla inhi teen par hota hai; alag-alag jagah rakhne se
    use page bhar me dhoondhna padta hai. */
.r-money {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  margin: 14px 0 6px; padding: 16px 18px;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--grad-soft);
}
.r-money-main b { font-size: 27px; font-weight: 800; letter-spacing: -.8px; }
.r-money-main span { font-size: 14px; color: var(--ink-2); margin-left: 3px; }
.r-money-side { font-size: 13.5px; color: var(--ink-2); }

.r-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px; margin: 18px 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.r-fact { background: var(--surface); padding: 13px 15px; }
.r-fact span { display: block; font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.r-fact b { font-size: 14.5px; font-weight: 700; }

.r-block { margin: 26px 0; }
.r-block h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.r-block p { margin: 0 0 10px; color: var(--ink-2); font-size: 14.5px; max-width: 72ch; }

.r-broker {
  padding: 20px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
}
.r-by { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.r-by b { display: block; font-size: 15px; }
.r-by span:last-child { font-size: 12.5px; color: var(--ink-3); }
.r-note { margin: 12px 0 0 !important; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 560px) {
  .r-hero { aspect-ratio: 4/3; }
  .r-money-main b { font-size: 23px; }
}

/* ── kiraya kis band me (r-intel) ─────────────────────────────────────────
   Band ki patti hi asli baat hai: kirayedaar ek nazar me dekh leta hai ki
   yeh listing sasti taraf hai ya mehngi. Ginti ke ank uske neeche hain --
   pehle tasveer, phir tafseel. */
.r-intel-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.r-intel-top h2 { margin-bottom: 0; }
.r-intel-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
}
/*  Rang sirf ishaara hai, faisla nahi -- "mehnga" ka matlab bura nahi hota
    (badi property, achhi manzil). Isliye laal ki jagah amber. */
.r-intel-tag.ok { color: #4ade80; border-color: rgba(74,222,128,.34); background: rgba(74,222,128,.10); }
.r-intel-tag.hi { color: #fbbf24; border-color: rgba(251,191,36,.34); background: rgba(251,191,36,.10); }
.r-intel-tag.lo { color: #7dd3fc; border-color: rgba(125,211,252,.34); background: rgba(125,211,252,.10); }

.r-intel-band { margin: 14px 0 12px; }
.r-intel-scale {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px;
}
.r-intel-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--line);
}
.r-intel-bar > i {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 999px;
  background: var(--a1); border: 2px solid var(--bg);
  transform: translate(-50%, -50%);
}
.r-intel-me { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.r-intel-me b { color: var(--ink); }
.r-intel-facts { margin-top: 10px; }
/*  Jab band bana hi na ho (3 se kam listing) -- tab sirf ek saaf line, koi
    patti nahi. Khaali dhaancha dikhana andaaza dikhane jaisa hi bura hai. */
.r-intel-thin p { margin-bottom: 6px; }