/*
 * Temporarily hidden homepage sections.
 * Remove either selector below to restore that section later.
 */
html.sawani-route-home .about,
html.sawani-route-home .about-slider {
  display: none !important;
}

/* Sawani palette and global dark-surface treatment. */
:root {
  --sawani-deep-black: #0a0a0a;
  --sawani-champagne-gold: #cfb692;
  --sawani-deep-gold: #a98554;
  --sawani-midnight-navy: #041938;
  --sawani-ivory: #f4eee4;
  --sawani-white: #ffffff;
}

html,
body,
#root {
  min-height: 100%;
  background-color: var(--sawani-midnight-navy);
}

body {
  color: var(--sawani-ivory);
}

/* Replace the old pure-black page ground while retaining useful opacity levels. */
.bg-black,
[class~="bg-[#000]"] {
  background-color: var(--sawani-midnight-navy) !important;
}

[class~="bg-black/50"] {
  background-color: rgb(4 25 56 / 50%) !important;
}

[class~="bg-black/70"] {
  background-color: rgb(4 25 56 / 70%) !important;
}

/* Keep the hero copy centered and dock the search rail deliberately near its base. */
html.sawani-route-home .bannerSec > div:last-child {
  bottom: 0 !important;
}

html.sawani-route-home .bannerSec .banner-text-container {
  position: relative;
  height: 100%;
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"]) {
  position: absolute;
  right: 16px;
  bottom: clamp(32px, 5vh, 60px);
  left: 16px;
  display: grid !important;
  grid-template-columns:
    minmax(260px, 2fr)
    minmax(150px, 0.72fr)
    minmax(112px, 0.52fr)
    minmax(124px, 0.56fr);
  align-items: stretch !important;
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto !important;
  padding: 8px !important;
  gap: 0 !important;
  color: var(--sawani-ivory) !important;
  background: var(--sawani-deep-black) !important;
  border: 1px solid rgb(207 182 146 / 52%);
  border-radius: 12px !important;
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > * {
  min-width: 0 !important;
  min-height: 54px;
  margin-left: 0 !important;
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > input,
html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > select {
  width: 100%;
  padding: 0 18px !important;
  color: var(--sawani-ivory) !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgb(207 182 146 / 24%) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition:
    color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > input::placeholder {
  color: rgb(244 238 228 / 82%) !important;
  opacity: 1;
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > input:focus,
html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > select:focus-visible {
  color: var(--sawani-white) !important;
  box-shadow: inset 0 -2px var(--sawani-champagne-gold) !important;
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > select
  option {
  color: var(--sawani-ivory);
  background: var(--sawani-deep-black);
}

/* Developers remain available elsewhere but are intentionally secondary on the hero. */
html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > select:last-of-type {
  display: none !important;
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > button {
  padding: 0 24px !important;
  color: var(--sawani-deep-black) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--sawani-champagne-gold) !important;
  border: 0;
  border-radius: 8px !important;
  transition:
    background-color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > button:hover {
  background: var(--sawani-deep-gold) !important;
  transform: translateY(-1px);
}

html.sawani-route-home
  .bannerSec
  .banner-text-container
  > div:has(> input[placeholder="Area, project or community"])
  > button:focus-visible {
  outline: 2px solid var(--sawani-ivory);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"]) {
    bottom: 24px;
    grid-template-columns: 1fr 1fr;
    width: min(680px, calc(100% - 24px));
  }

  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > input,
  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > button {
    grid-column: 1 / -1;
  }

  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > input,
  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > select:nth-of-type(2) {
    border-right: 0 !important;
  }
}

@media (max-width: 640px) {
  html.sawani-route-home .bannerSec {
    height: 780px !important;
  }

  html.sawani-route-home .bannerSec .home-hero-text {
    transform: translateY(-118px);
  }

  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"]) {
    right: 12px;
    bottom: 14px;
    left: 12px;
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    padding: 7px !important;
  }

  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > * {
    grid-column: 1 !important;
  }

  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > input,
  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > select {
    border-right: 0 !important;
    border-bottom: 1px solid rgb(207 182 146 / 24%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > * {
    transition-duration: 1ms !important;
  }

  html.sawani-route-home
    .bannerSec
    .banner-text-container
    > div:has(> input[placeholder="Area, project or community"])
    > button:hover {
    transform: none;
  }
}