/* Our changes on top of the Makaan template's style.css. */
/* Logo (img/brand/, inlined by the builder). The SVG is 390x96, so the height sets the size. */
.site-logo { display: block; height: 64px; width: auto; }
.site-logo-footer { height: 54px; }
@media (max-width: 400px) { .site-logo { height: 52px; } }

/* Green: the template's #00B98E with white text was 2.5:1, too faint to read on the green band and
   buttons. css/bootstrap.min.css and css/style.css now use #008566 (4.6:1, the minimum for normal
   text); hover is the darker #006B4F, always with white text (Neal, October 11, 2026). */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { color: #fff !important; }

/* The menu floats over the top of the header from 992px up; keep the headline clear of it. Below
   992px (phones and an upright iPad) the header stacks: photo on top, wide and short, then the text. */
@media (min-width: 992px) { .header .col-lg-6.p-5 { padding-top: 8rem !important; } }
/* The headline starts where the green band's text starts, at every screen size (a sideways iPad had
   it 75px further left). --cmax is Bootstrap's .container width at each size; 35px is the band's own
   padding and 12px its container's. */
:root { --cmax: 100vw; }
@media (min-width: 576px) { :root { --cmax: 540px; } }
@media (min-width: 768px) { :root { --cmax: 720px; } }
@media (min-width: 992px) { :root { --cmax: 960px; } }
@media (min-width: 1200px) { :root { --cmax: 1140px; } }
@media (min-width: 1400px) { :root { --cmax: 1320px; } }
.header .col-lg-6.p-5 { padding-left: calc(max(35px, (min(100vw, 1320px) - var(--cmax)) / 2) + 12px) !important; }
@media (max-width: 991.98px) {
    .header .col-lg-6.p-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .header .owl-carousel-item img, .page-header-img { aspect-ratio: 16 / 9 !important; }
    .header-carousel .owl-nav { display: none; }
}
.nowrap { white-space: nowrap; }

/* Home cards: every card in a row is the same height and the bed/bath bar sits on the bottom edge,
   whether or not the card has the AVAILABLE NOW box. */
.property-item { height: 100%; display: flex; flex-direction: column; background: #fff; }
.property-item > .p-4 { flex: 1 1 auto; }
/* The template's .btn-lg-square display:flex beat its own display:none, so the
   arrow showed at the top of every page. main.js fades it in after scrolling. */
.back-to-top { display: none; }

.header .owl-carousel-item img,
.page-header-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.property-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.cat-item .icon i { line-height: 1; }

.quote-badge {
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff;
}

.home-hero { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-thumb { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; cursor: zoom-in; transition: opacity .2s; }
.gallery-thumb:hover { opacity: .85; }
.detail-list li { padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.detail-list li:last-child { border-bottom: 0; }
.contact-tile span { color: var(--dark); font-weight: 600; }
.contact-tile:hover span { color: var(--primary); }

/* Live AVAILABLE NOW / Currently Leased marks (js/availability.js). Maroon (Neal: the bright red was too bright) so an
   open home cannot be missed (Neal, October 11, 2026). */
.avail-tag, .leased-tag { display: inline-block; font-weight: 800; letter-spacing: .03em;
    padding: 6px 14px; border-radius: 6px; font-size: .95rem; }
.avail-tag { background: #800000; color: #fff; box-shadow: 0 2px 10px rgba(128, 0, 0, .45); }
.leased-tag { background: rgba(60, 60, 60, .82); color: #fff; font-weight: 600; }
.avail-box { display: block; background: #800000; color: #fff !important; border-radius: 10px;
    padding: 14px 16px; margin: 0 0 14px; text-align: center; text-decoration: none;
    box-shadow: 0 4px 16px rgba(128, 0, 0, .35); }
.avail-box:hover { background: #5C0000; }
.avail-box span { display: block; color: #fff; }
.avail-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; }
.avail-price { font-size: 1.15rem; font-weight: 600; margin-top: 2px; }
.avail-call { font-weight: 800; font-size: 1.1rem; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .45); }
.avail-box-lg .avail-title { font-size: 1.7rem; }
.avail-box-lg .avail-price { font-size: 1.35rem; }
.leased-box { background: #eceff1; color: #555; border-radius: 10px; padding: 10px 16px;
    margin: 0 0 14px; text-align: center; font-weight: 600; }
/* Same side padding as the green band above it, so the two line up. */
/* Darkest wine with a delicate trellis: hairline diamonds with a small four-petal flower at each
   crossing, all faint white, and a soft light at the top left (Neal, October 11, 2026: the flat
   red hurt the eye; "one shade darker still, with a beautiful delicate pattern"). */
#available-now { color: #fff; padding-left: 35px; padding-right: 35px;
    background-color: #46070F;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .08), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='.6'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.11'%3E%3Cellipse cx='18' cy='15.6' rx='.9' ry='1.7'/%3E%3Cellipse cx='18' cy='20.4' rx='.9' ry='1.7'/%3E%3Cellipse cx='15.6' cy='18' rx='1.7' ry='.9'/%3E%3Cellipse cx='20.4' cy='18' rx='1.7' ry='.9'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.09'%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='36' cy='0' r='1'/%3E%3Ccircle cx='0' cy='36' r='1'/%3E%3Ccircle cx='36' cy='36' r='1'/%3E%3C/g%3E%3C/svg%3E");
    border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 3px 0 #2E040A, inset 0 -3px 0 #2E040A; }
#available-now .avail-row strong { color: #46070F; }
#available-now h2 { color: #fff; }
.avail-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px;
    background: #fff; color: var(--dark); border-radius: 8px; padding: 14px 18px; margin-bottom: 10px;
    font-size: 1.1rem; text-decoration: none; }
.avail-row strong { color: #800000; }
.avail-row:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }

/* Photo viewer (js/lightbox.js) */
.lb { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 2000;
      display: none; align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 84vh; border-radius: 6px; }
.lb button { position: absolute; background: rgba(255, 255, 255, .15); color: #fff; border: 0;
             width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; }
.lb button:hover { background: var(--primary); }
.lb .lb-close { top: 18px; right: 18px; }
.lb .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb .lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd; }