/* ===========================================================================
   PROPERTY PAGE — buyer.html ke liye. yard.css ke UPAR load hota hai.
   ---------------------------------------------------------------------------
   Yeh page pehle purane halke design par tha: dark card par click karke
   safed 2019-wala page khulta tha. Product ka sabse bada jhatka wahi tha.

   Alag file isliye (yard.css me nahi): ye style sirf isi ek page par
   chahiye. Har page par 200 line bhejne ka koi matlab nahi.

   Rang/naap sab yard.css ke tokens se aate hain -- yahan koi nayi hadd
   nahi banti.

   Desktop par do khambe (gallery + byora | broker ka card jo saath
   chalta hai), mobile par ek khamba aur neeche chipki hui patti --
   property portal par wahi sabse zyada dabayi jaati hai.
   =========================================================================== */

.p-wrap {
  display: grid;
  gap: 26px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 348px;
  padding: 22px 0 40px;
}
@media (max-width: 940px) {
  /* Mobile par neeche chipki patti hai -- uske peechhe content na chhupe. */
  .p-wrap { grid-template-columns: 1fr; gap: 18px; padding: 16px 0 96px; }
}

/* ── gallery ──────────────────────────────────────────────────────────── */
.p-gal {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.p-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.p-strip::-webkit-scrollbar { display: none; }

.p-shot { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; position: relative; cursor: zoom-in; }
.p-shot img { width: 100%; height: 100%; object-fit: cover; }
.p-wm { position: absolute; inset: 0; pointer-events: none; }

.p-noimg {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink-3);
}
.p-noimg span { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; }

.p-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(7, 11, 20, .6);
  color: #fff; font-size: 21px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: inherit; padding: 0 0 3px;
}
.p-nav:hover { background: rgba(79, 140, 255, .72); }
.p-nav.l { left: 10px; }
.p-nav.r { right: 10px; }

.p-dots {
  position: absolute; bottom: 12px; left: 0; right: 0; z-index: 2;
  display: flex; gap: 6px; justify-content: center; pointer-events: none;
}
.p-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .42); transition: .2s var(--ease); }
.p-dot.on { background: #fff; width: 20px; border-radius: 999px; }

.p-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(7, 11, 20, .78); border: 1px solid var(--line-strong); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.p-tag.rent { color: var(--a2); border-color: rgba(34, 211, 238, .5); }
.p-tag.sale { color: var(--a1); border-color: rgba(79, 140, 255, .5); }

/* ── heading block ────────────────────────────────────────────────────── */
.p-top { padding: 20px 2px 2px; }
.p-ask { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.p-ask small { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.p-sub { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.p-h1 { margin: 12px 0 6px; font-size: clamp(17px, 2.2vw, 21px); font-weight: 700; letter-spacing: -.4px; line-height: 1.32; }
.p-where { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.p-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.p-quick span {
  font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}

/* ── EK DABBA, EK NAAP ─────────────────────────────────────────────────
   Is panne par teen tarah ke dabbe hain -- byora wala card, broker ka rail
   card, aur "bechna hai?" wala. 28 Sep 2026 tak teenon apni-apni jagah
   surface, line, radius aur padding likhte the, aur padding do jagah 20px
   thi aur ek jagah 18px -- yaani rail me doosre card ka matn 2px andar se
   shuru hota tha. Wahi bimari jiske liye 99Lease me `--pan-pad` bana (uski
   CLAUDE.md §15): ek naap do jagah likhne par ek din wo alag ho jaate hain,
   aur farq theek us jagah dikhta hai jahan do dabbe saath khade hon.

   Ab naap EK jagah hai. Har dabba apne block me sirf wo rakhta hai jo SIRF
   uska hai -- card ka gap, broker ka glow. `.p-sell` ka apna kuch bacha hi
   nahi, isliye uska rule hi nahi hai (khaali rule mara hua CSS hota hai). */
.p-card, .p-broker, .p-sell {
  --p-pad: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--p-pad);
}

/* ── SACH WALI CHHOTI LAKEER ───────────────────────────────────────────
   Har wo lakeer jo ek ank ke neeche uska AADHAAR likhti hai, ya batati hai
   ki kya jaancha nahi gaya (§79). Teen jagah thi aur teenon apna naap khud
   likhti thi -- ek to `buyer-page.js` me inline style se, yaani stylesheet
   use dekh bhi nahi sakti thi. Ab ek jagah; har istemaal apne block me sirf
   apni EK wajah rakhta hai.

   Rang `--ink-2` hai, `--ink-3` nahi -- aur WAJAH 28 Sep ki shaam BADAL
   gayi, isliye wo yahan dobara likhi ja rahi hai. Pehle yeh majboori thi:
   us waqt `--ink-3` `#6b7d99` tha aur card par 4.36:1 deta tha, yaani AA se
   neeche. Wo token usi din theek ho gaya (`yard.css`, ab `#7e94b5`), aur ab
   `--ink-3` bhi har background par AA paas karta hai -- card par 5.90,
   `--surface-2` par 5.22.

   Yaani ab yeh ek KRAM ka faisla hai, majboori nahi: jo lakeer batati hai
   ki kya jaancha NAHI gaya wo label se zyada zor se padhni chahiye. Label
   (`.p-fact b`, `.p-bmeta`, `.p-emi-sub`) `--ink-3` par rehte hain, caveat
   `--ink-2` par (8.27:1). Naya hex ek bhi nahi -- dono token yard.css ke. */
.p-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
/* broker card me yeh button ke neeche beech me baithti hai */
.p-fine { text-align: center; }
/*  Listing ki apni meta -- yeh CAVEAT nahi hai, sirf pehchan aur taazgi hai,
    isliye panne par sabse halki (`--ink-3`) rehti hai. Naap `.p-note` se, aur
    gap card ke gap (16px) jitna, kyunki wo do card ke BEECH khadi hai. */
.p-meta { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; color: var(--ink-3); }

/* ── content cards ────────────────────────────────────────────────────── */
.p-card { margin-top: 16px; }
.p-card h2 {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3);
}
.p-desc { font-size: 14.5px; line-height: 1.7; white-space: pre-line; }

.p-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 12px; }
.p-fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px; }
.p-fact b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
.p-fact span { display: block; font-size: 14.5px; font-weight: 700; margin-top: 3px; }

.p-amen { display: flex; flex-wrap: wrap; gap: 8px; }
.p-amen span {
  font-size: 13px; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}

/* Google ka map halke rang me aata hai -- gehre page par wo ek safed
   dhabba ban jaata tha. Halka sa dabaa kar page me mila diya. */
.p-map { border: 0; width: 100%; height: 280px; border-radius: var(--r); display: block; filter: saturate(.82) contrast(1.05) brightness(.92); }

/* ── broker rail ──────────────────────────────────────────────────────── */
.p-side { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 940px) { .p-side { position: static; } }

/* Sirf glow uska apna hai -- baaki naap upar wale saanjhe rule se. */
.p-broker {
  background:
    radial-gradient(420px 190px at 50% 0%, rgba(79, 140, 255, .15), transparent 70%),
    var(--surface);
}
.p-bwho { display: flex; align-items: center; gap: 12px; }
.p-bava {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--grad); color: #04121f;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
}
.p-bname { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; }
.p-bmeta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
/*  CP ki listing: naam ke neeche referral code (99Broker patch 603) --
    card ka `.y-cp` hi, panne ke naap par (2 Oct: 11 -> 10px, maalik ne
    "thoda chota" kaha). Rang sirf token se; `color-mix` na samajhne wala
    browser upar wali saadi keemat par rukta hai. */
.p-bcp {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  margin-top: 4px; padding: 0 7px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .2px; line-height: 1.6;
  color: var(--a2);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--a2) 12%, var(--surface));
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--a2) 32%, var(--surface));
}
.p-bcp-l { color: var(--ink-2); font-weight: 600; }
.p-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.p-acts .btn { width: 100%; }
.p-wa { border-color: transparent; background: #1fa855; color: #04140b; }
.p-wa:hover { background: #23bf60; border-color: transparent; }

.p-sell b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.p-sell p { margin: 0 0 13px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ── mobile sticky bar ────────────────────────────────────────────────── */
.p-bar { display: none; }
@media (max-width: 940px) {
  .p-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(7, 11, 20, .9); border-top: 1px solid var(--line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .p-bar .btn { flex: 1; }
}

/* ── zoom ─────────────────────────────────────────────────────────────── */
.p-zoom { position: fixed; inset: 0; z-index: 100; background: rgba(4, 7, 13, .97); display: flex; flex-direction: column; }
.p-zoom-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); flex-shrink: 0; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; font-size: 14px; font-weight: 600; }
.p-zoom-body { flex: 1; position: relative; min-height: 0; display: flex; }
.p-zoom-body .p-strip { flex: 1; }
.p-zoom-shot { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; }
.p-zoom-shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p-zoom-hint { text-align: center; color: var(--ink-3); font-size: 12px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); flex-shrink: 0; }
.p-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit; }

/* ── site visit sheet ─────────────────────────────────────────────────── */
.p-sheet-bg { position: fixed; inset: 0; z-index: 90; background: rgba(4, 7, 13, .68); display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(3px); }
.p-sheet {
  width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .6);
}
@media (min-width: 620px) {
  .p-sheet-bg { align-items: center; }
  .p-sheet { border-radius: var(--r-xl); border-bottom: 1px solid var(--line); }
}
.p-sheet-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.p-sheet-hd h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.p-sheet .lead { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.p-row { display: flex; gap: 10px; margin-bottom: 10px; }
.p-row .inp { min-width: 0; }

.p-toggle {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 12px 13px; margin-bottom: 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
}
.p-toggle.on { border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .08); }
.p-toggle b { display: block; font-size: 13px; font-weight: 800; }
.p-toggle small { display: block; font-size: 11.5px; color: var(--ink-3); }
.p-knob { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; flex-shrink: 0; transition: .18s var(--ease); }
.p-toggle.on .p-knob { background: var(--warn); }
.p-knob i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .18s var(--ease); }
.p-toggle.on .p-knob i { left: 20px; }

.p-err { color: #fca5a5; font-size: 12.5px; margin-bottom: 8px; }
.p-ok { text-align: center; padding: 6px 0; }
.p-ok .tick { font-size: 44px; }
.p-ok h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 800; }
.p-ok p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }


/* ── EMI ──────────────────────────────────────────────────────────────── */
.p-emi { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.p-emi-val { font-size: 27px; font-weight: 800; letter-spacing: -.7px; }
.p-emi-val small { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.p-emi-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.p-emi-ctl { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 200px; }
.p-emi-ctl label { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
.p-emi-ctl input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--a1); }
.p-emi-ctl span { font-size: 13px; font-weight: 700; min-width: 46px; text-align: right; }

/* ── similar ──────────────────────────────────────────────────────────── */
.p-sim { display: grid; gap: 12px; }
.p-simcard {
  display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px; transition: .18s var(--ease);
}
.p-simcard:hover { border-color: rgba(79, 140, 255, .55); transform: translateX(2px); }
.p-simimg {
  width: 78px; height: 62px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.p-simimg img { width: 100%; height: 100%; object-fit: cover; }
.p-siminfo { min-width: 0; }
.p-siminfo b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.p-siminfo span {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; color: var(--ink); margin-top: 2px;
}
.p-siminfo small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* "Show phone number" (99Broker patch 595) -- dabba jo app/contact-number.js bharta hai. */
.p-cn { margin-top: 12px; }
.p-cn .btn { width: 100%; }
.p-cn .cn-num .btn, .p-cn .cn-row .btn { width: auto; flex: 1 1 140px; }