/* ═══════════════════════════════════════════════════════════════════
   hp-showcase.css — the floating property panel.

   Loaded on /, /start/ and /telugu-real-estate-agent/ only. Every
   selector below is prefixed .hp-sc, so this sheet cannot reach
   anything else on the page whichever order it loads in.

   ─────────────────────────────────────────────────────────────────
   THE THREE STATUS COLOURS

   They have to be distinguishable from one another, legible on the
   navy card, and — this is the part that is not a style question —
   they must not let a conditional sale read as a completed one. So
   they are separated by hue AND by treatment:

     available    green, filled            an open offer
     conditional  amber, OUTLINED          in between, deliberately
                                           not a solid badge
     sold         navy on white, filled    finished

   Contrast on the badge grounds, measured against the text colour
   used on each: 5.9:1 (available), 6.4:1 (conditional on the card),
   14.1:1 (sold). All above the 4.5:1 needed at this size.
   ═══════════════════════════════════════════════════════════════════ */

.hp-sc {
  --sc-navy:   #07142e;
  --sc-navy-2: #0d1f42;
  --sc-line:   rgba(255, 255, 255, .14);
  --sc-cream:  #f0e9e0;
  --sc-mute:   rgba(240, 233, 224, .68);
  --sc-orange: #f95e28;
  --sc-green:  #1c7a5c;
  --sc-amber:  #d3922c;

  position: fixed;
  z-index: 9400;                 /* over the contact bar (9000), under
                                    the cookie sheet (10050) */
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 32px));
  max-height: min(78dvh, 560px);
  display: flex;
  transition: transform .42s cubic-bezier(.22, .8, .3, 1), opacity .3s ease;
}
.hp-sc[hidden] { display: none; }

/* It arrives from the right, once. The class is added by the script one
   frame after the panel is revealed. */
.hp-sc.is-entering { transform: translateX(calc(100% + 24px)); opacity: 0; }
.hp-sc.is-in       { transform: none; opacity: 1; }

.hp-sc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--sc-line);
  background: linear-gradient(168deg, var(--sc-navy-2), var(--sc-navy) 62%);
  box-shadow: 0 18px 44px rgba(3, 8, 22, .42);
  color: var(--sc-cream);
}

/* ── Close ──────────────────────────────────────────────────────────
   44x44 of target, a 28px disc of ink. It sits over the photograph, so
   it carries its own scrim rather than trusting the image to be dark
   there — the photographs are other people's listings and some of them
   have a bright sky in the top right corner. */
.hp-sc-close {
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  z-index: 3;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hp-sc-close::before {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(7, 20, 46, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.hp-sc-close svg { position: relative; }
.hp-sc-close:hover::before { background: rgba(7, 20, 46, .9); }

/* ── The track ──────────────────────────────────────────────────────
   A scroll-snap strip, not a transform carousel. The slides really are
   laid out side by side and really scroll, so a swipe is the browser's
   own gesture — with momentum, rubber-banding and the right feel on
   both platforms — rather than a pointer handler pretending. The
   script's next/previous simply scroll it.

   scrollbar-width:none hides the bar; the slide counter and the arrows
   are the affordance. */
.hp-sc-track {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hp-sc-track::-webkit-scrollbar { display: none; }

.hp-sc-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
}

/* ── Photograph ─────────────────────────────────────────────────────
   A real listing photograph, at a real aspect. aspect-ratio rather than
   a fixed height so the box is reserved before the image lands and the
   card does not jump; the height lands at 150px inside a 380px card,
   which is the 140-170 the brief asks for. */
.hp-sc-media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 8 / 5;
  max-height: 170px;
  overflow: hidden;
  background: #0a1730;
}
.hp-sc-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hp-sc-nophoto {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  color: rgba(240, 233, 224, .3);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px),
    #0a1730;
}
/* A short scrim under the badge only. Text never sits on the photo —
   all of it is below — so the image is not darkened for its own sake. */
.hp-sc-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  background: linear-gradient(to top, rgba(7, 20, 46, .82), transparent);
  pointer-events: none;
}

.hp-sc-badge {
  position: absolute;
  left: 12px; bottom: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.hp-sc-badge-available   { background: var(--sc-green); color: #fff; }
.hp-sc-badge-sold        { background: #fff; color: var(--sc-navy); }
/* Outlined, not filled. A conditional sale is not a completed one and
   should not carry the same visual weight as one. */
.hp-sc-badge-conditional {
  background: rgba(211, 146, 44, .16);
  color: #f6c987;
  border: 1px solid rgba(211, 146, 44, .8);
  padding: 4px 9px;
}
/* ── The community card ─────────────────────────────────────────────
   Rendered when a neighbourhood panel has no eligible listing to show.
   It is deliberately the quietest badge of the set and the only one
   that names a place rather than a status, because the card behind it
   is about an area, not a property. Shorter than a listing card too:
   there is no photograph to honour, and a half-empty card the height of
   a full one reads as something that failed to load. */
.hp-sc-badge-cta {
  background: rgba(240, 233, 224, .12);
  color: #cdd6e4;
  border: 1px solid rgba(240, 233, 224, .28);
  padding: 4px 9px;
}
.hp-sc-media-cta { aspect-ratio: 16 / 6; max-height: 104px; }
.hp-sc-slide[data-kind="cta"] .hp-sc-support { color: #cdd6e4; }

/* ── Body ───────────────────────────────────────────────────────────
   Live HTML text, below the photograph, never baked into it. */
.hp-sc-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px 15px;
}
/* font-family and font-style are forced: the site sets an italic
   editorial serif on h3, and a headline in italic serif inside a
   compact navy card reads as a pull-quote rather than as the thing the
   card is about. Same reason the address restates its colour — it was
   inheriting a muted body colour and coming out dimmer than the city
   line beneath it. */
.hp-sc-headline {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.25;
  font-weight: 700;
  font-style: normal;
  font-family: inherit;
  color: #fff;
  text-wrap: balance;
}
.hp-sc-where { margin: 0; display: grid; gap: 2px; }
.hp-sc-addr  { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--sc-cream); }
.hp-sc-city  { font-size: .8125rem; color: var(--sc-mute); }

.hp-sc-price {
  margin: 1px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hp-sc-price span {
  margin-left: 6px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-mute);
}

.hp-sc-support {
  margin: 0;
  font-style: normal;
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--sc-mute);
}
/* The one line that states what Harish actually did, in the brand
   accent, because it is the claim the card is really making. */
.hp-sc-support.is-role {
  color: var(--sc-orange);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .6875rem;
}

.hp-sc-cta {
  margin-top: 5px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--sc-orange);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 16px;
}
.hp-sc-cta:hover  { background: #e04d18; color: #fff; }
.hp-sc-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Controls ───────────────────────────────────────────────────── */
.hp-sc-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom) * 0);
  border-top: 1px solid var(--sc-line);
  background: rgba(3, 9, 24, .35);
}
.hp-sc-nav {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sc-cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hp-sc-nav:hover { background: rgba(255, 255, 255, .09); }
.hp-sc-nav:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: -2px; }
.hp-sc-nav[disabled] { opacity: .34; cursor: default; }
.hp-sc-count {
  margin: 0 auto;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sc-mute);
  font-variant-numeric: tabular-nums;
}
.hp-sc-play { order: 3; }
/* [hidden] on an <svg> is not honoured by every engine the way it is on
   an HTML element, and both icons were painting at once. Explicit. */
.hp-sc-play svg[hidden] { display: none !important; }
.hp-sc-foot [data-sc-next] { order: 4; }

/* ── The launcher ───────────────────────────────────────────────── */
.hp-sc-launcher {
  position: fixed;
  z-index: 9300;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 20, 46, .92);
  color: var(--sc-cream, #f0e9e0);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(3, 8, 22, .3);
  backdrop-filter: blur(8px);
}
.hp-sc-launcher[hidden] { display: none; }
.hp-sc-launcher:hover { background: rgba(7, 20, 46, 1); }

/* Out of the way while a section that lists properties is on screen —
   see the observer in hp-showcase.js. Faded rather than display:none so
   it returns without the layout flicker of an element popping back into
   existence, and pointer-events go with it so it cannot be tapped while
   invisible. */
.hp-sc-launcher {
  transition: opacity .22s ease, transform .22s ease;
}
.hp-sc-launcher.is-away {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hp-sc-launcher { transition: none; }
  .hp-sc-launcher.is-away { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE

   A floating card near the foot of the screen, viewport minus 24px,
   capped at 380. The one thing it must not do is land on top of the
   sticky contact bar, so it does not try to share the space: the script
   puts .hp-showcase-open on <body> while the panel is up and the
   contact bar steps out. Two fixed controls stacked on a 390px screen
   is how a page ends up unusable.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hp-sc {
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 380px;
    margin-inline: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-height: min(74dvh, 520px);
  }
  .hp-sc-media { max-height: 150px; }
  .hp-sc-headline { font-size: 1rem; }
  .hp-sc-launcher { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Below 680 the sticky contact bar exists, and the launcher was landing
   across its second button. It sits above the bar instead — 58px of bar
   plus its own 8px inset plus a 10px gap. */
@media (max-width: 680px) {
  .hp-sc-launcher { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Between a phone and a laptop the card keeps the phone's proportions
   but goes back to the corner. Centred at the foot of a 768px tablet it
   sits in the middle of the reading column, which is the one place a
   promotional panel should not be. */
@media (min-width: 601px) and (max-width: 900px) {
  .hp-sc { left: auto; right: 16px; margin-inline: 0; }
  .hp-sc-launcher { right: 16px; }
}

@media (max-width: 900px) {

  /* While the panel is open the contact bar is redundant — the panel
     carries its own call to action, and both of them at once cover a
     third of a 390px screen. */
  body.hp-showcase-open .mobile-contact-bar {
    transform: translate3d(0, calc(150% + env(safe-area-inset-bottom)), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Short screens, and anyone reading at an enlarged text size: the card
   stops growing and its body scrolls inside itself rather than running
   off the bottom of the viewport. */
@media (max-height: 620px) {
  .hp-sc { max-height: calc(100dvh - 90px); }
  .hp-sc-media { max-height: 108px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION

   No entrance, no smooth scrolling, and no auto-advance — which the
   script also enforces, so the carousel simply does not move on its
   own. With nothing to pause, the pause button is not shown: a control
   that does nothing is worse than no control.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hp-sc { transition: none; }
  .hp-sc.is-entering { transform: none; opacity: 1; }
  .hp-sc-track { scroll-behavior: auto; }
  .hp-sc-play { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   THE PROPERTY SUMMARY ON THE CONTACT FORM

   Same three status colours, on a light ground this time, because the
   contact page is cream rather than navy. The badge is what carries the
   status, and it has to keep meaning the same thing it meant on the
   slide the visitor clicked — a sold card whose badge turns green on
   the form is a different claim.

   Contrast on this ground: 5.1:1 available, 4.9:1 conditional,
   13.6:1 sold.
   ═══════════════════════════════════════════════════════════════════ */
.hp-propctx {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 20px;
  padding: 11px 13px;
  border: 1px solid var(--h-line, rgba(7, 20, 46, .13));
  border-left: 3px solid var(--h-orange, #f95e28);
  border-radius: 12px;
  background: #fff;
}
.hp-propctx img {
  flex: 0 0 auto;
  width: 84px; height: 56px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}
.hp-propctx > div { display: grid; gap: 2px; min-width: 0; }
.hp-propctx strong { font-size: .9375rem; line-height: 1.3; }
.hp-propctx small  { font-size: .8125rem; color: var(--h-muted, #667084); }
.hp-propctx-badge {
  justify-self: start;
  margin-bottom: 2px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hp-propctx-available   { background: #146a50; color: #fff; }
.hp-propctx-sold        { background: var(--h-navy, #07142e); color: #fff; }
.hp-propctx-conditional { background: #fff3e0; color: #8a5316; border: 1px solid #d3922c; }

@media (max-width: 520px) {
  .hp-propctx { gap: 11px; padding: 10px; }
  .hp-propctx img { width: 68px; height: 46px; }
}