/* =========================================================
   PropCountry — inner pages (listing, detail, developers, blog, static)
   ========================================================= */

/* cards: fav button now sits outside the media link */
.project-card, .listing-card { position: relative; }
.pc-media, .lc-media { display: block; }
.status.st-new { background: #db2777; }

/* ---------- Page header ---------- */
.page-head { background: radial-gradient(circle at 90% -20%, rgba(245, 130, 32, .28), transparent 50%), linear-gradient(135deg, #16171b, #26282f); color: #fff; padding: 28px 0 32px; }
.page-head .breadcrumb { margin-bottom: .6rem; font-size: .78rem; --bs-breadcrumb-divider-color: rgba(255, 255, 255, .4); --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .6); }
.page-head .breadcrumb a { color: rgba(255, 255, 255, .8); }
.page-head .breadcrumb a:hover { color: var(--brand); }
.page-head .breadcrumb-item.active { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head h1 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.95rem); margin: 0 0 .35rem; }
.page-head p { color: rgba(255, 255, 255, .7); margin: 0; font-size: .9rem; }
.page-head p a { color: var(--brand); font-weight: 600; }
.page-head p i { color: var(--brand); }

/* ---------- Listing layout ---------- */
.listing-wrap { padding: 32px 0 64px; }
.listing-wrap.pb-0 { padding-bottom: 0; }
.filter-panel { --bs-offcanvas-width: 320px; }
@media (min-width: 992px) {
    .filter-panel { position: sticky; top: 92px; }
    .filter-panel .offcanvas-body { padding: 0; overflow: visible; }
}
.filter-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; }
@media (max-width: 991.98px) { .filter-form { border: 0; padding: 0; } }
.ff-head { justify-content: space-between; align-items: center; margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.ff-head h5 { font-size: .95rem; margin: 0; }
.ff-head h5 i { color: var(--brand); }
.ff-head a { font-size: .78rem; font-weight: 600; color: var(--brand-600); }
.ff-group { margin-bottom: 1rem; }
.ff-label { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .4rem; }
.filter-form .form-control, .filter-form .form-select { font-size: .86rem; border-radius: 9px; border-color: var(--line); min-height: 40px; }
.filter-form .form-control:focus, .filter-form .form-select:focus, .side-form .form-control:focus, .enquiry-modal .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(245, 130, 32, .18); }
.filter-form .form-check { display: flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 500; cursor: pointer; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.chip-radios { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-radios label { cursor: pointer; }
.chip-radios input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radios span { display: inline-block; padding: .32rem .7rem; border: 1px solid var(--line); border-radius: 50px; font-size: .78rem; font-weight: 600; color: var(--ink-2); transition: .15s; }
.chip-radios label:hover span { border-color: var(--brand); }
.chip-radios input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-radios input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); }
.results-bar strong { color: var(--ink); }
.rb-actions { display: flex; gap: .5rem; align-items: center; }
.rb-actions .form-select { width: auto; font-size: .82rem; border-radius: 8px; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.active-filters a { display: inline-flex; align-items: center; gap: .25rem; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); font-size: .76rem; font-weight: 600; padding: .25rem .4rem .25rem .7rem; border-radius: 50px; }
.active-filters a:hover { background: var(--brand); color: #fff; }

.for-switch { display: inline-flex; gap: .3rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .3rem; margin-bottom: 1.4rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.for-switch::-webkit-scrollbar { display: none; }
.for-switch a { white-space: nowrap; padding: .5rem 1rem; border-radius: 9px; font-weight: 600; font-size: .86rem; color: var(--muted); }
.for-switch a.active { background: var(--brand); color: #fff; }
.for-switch a:not(.active):hover { color: var(--ink); background: var(--soft); }

.chip-filter a { padding: .45rem 1rem; border-radius: 50px; font-weight: 600; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.chip-filter a:hover { color: var(--ink); }
.chip-filter a.active { background: var(--ink); color: #fff; }

.hub-search { display: flex; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .45rem; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
.hub-search .sf-field { border: 0; min-height: 44px; padding: 0 .75rem; }
.hub-search .sf-field:first-of-type:not(:only-of-type) { border-right: 1px solid var(--line); }
.hub-search .btn { padding: 0 1.4rem; min-height: 44px; }
@media (max-width: 575.98px) { .hub-search .sf-field { flex: 1 1 100%; border-right: 0 !important; border-bottom: 1px solid var(--line); } .hub-search .btn { flex: 1 1 100%; } }

.pc-pager { margin-top: 2rem; display: flex; justify-content: center; }
.pc-pager .pagination { gap: .3rem; }
.pc-pager .page-link { border-radius: 10px !important; border: 1px solid var(--line); color: var(--ink); font-weight: 600; min-width: 40px; text-align: center; }
.pc-pager .page-link:hover { background: var(--brand-50); color: var(--brand-600); }
.pc-pager .active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }

.empty-state { text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: 16px; padding: 3rem 1.5rem; }
.empty-state > span { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: inline-grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem; }
.empty-state h3 { font-size: 1.15rem; }
.empty-state p { color: var(--muted); max-width: 460px; margin: 0 auto 1.2rem; font-size: .9rem; }

.post-nudge { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 14px; padding: 1rem 1.2rem; }
.post-nudge > i { font-size: 1.6rem; color: var(--brand); }
.post-nudge strong { display: block; color: var(--ink); font-size: .95rem; }
.post-nudge span { font-size: .84rem; color: var(--muted); }

/* ---------- Detail pages ---------- */
.detail-wrap { padding: 28px 0 64px; }
.gallery { margin-bottom: 1.2rem; }
.gal-main { position: relative; border-radius: 16px; overflow: hidden; background: #ddd; margin: 0 !important; padding: 0 !important; }
.gal-main .swiper-slide img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; display: block; }
.gal-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: .4rem; flex-wrap: wrap; }
.gal-badges span { font-size: .74rem; font-weight: 700; color: #fff; padding: .32rem .65rem; border-radius: 7px; background: var(--ink); }
.gal-badges .featured { background: var(--brand); }
.gal-badges .rera { background: var(--ready); }
.gal-badges .owner { background: #0f766e; }
.gal-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(0, 0, 0, .6); color: #fff; font-size: .76rem; font-weight: 600; padding: .3rem .65rem; border-radius: 7px; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); }
.gal-nav:hover { background: var(--brand); color: #fff; }
.gal-nav.prev { left: 14px; }
.gal-nav.next { right: 14px; }
.gal-thumbs { margin-top: .6rem !important; padding: 0 !important; }
.gal-thumbs .swiper-slide { width: 110px; opacity: .55; cursor: pointer; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: .2s; }
.gal-thumbs .swiper-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--brand); }
@media (max-width: 575.98px) { .gal-main { border-radius: 12px; } .gal-thumbs .swiper-slide { width: 76px; } .gal-nav { width: 34px; height: 34px; } }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 1.2rem; }
.facts > div { background: #fff; padding: .85rem 1rem; }
.facts small { display: block; color: var(--muted); font-size: .72rem; font-weight: 600; margin-bottom: .15rem; }
.facts strong { color: var(--ink); font-size: .9rem; }
@media (max-width: 767.98px) { .facts { grid-template-columns: repeat(2, 1fr); } }

.sec-tabs { position: sticky; top: 76px; z-index: 5; display: flex; gap: .2rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .3rem; margin-bottom: 1.2rem; overflow-x: auto; scrollbar-width: none; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs a { white-space: nowrap; padding: .45rem .9rem; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.sec-tabs a.active, .sec-tabs a:hover { background: var(--brand-50); color: var(--brand-600); }
@media (max-width: 1199.98px) { .sec-tabs { top: 64px; } }

.d-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; margin-bottom: 1.2rem; scroll-margin-top: 140px; }
.d-card h2 { font-size: 1.15rem; margin-bottom: .9rem; }
.d-card h3 { font-size: 1rem; }
.d-text { color: var(--ink-2); font-size: .92rem; line-height: 1.75; }
.hl-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; }
.hl-list li { display: flex; gap: .5rem; font-size: .88rem; }
.hl-list i { color: var(--ready); margin-top: .15rem; }
@media (max-width: 575.98px) { .hl-list { grid-template-columns: 1fr; } }

.rera-box { display: flex; gap: 1rem; align-items: center; background: #ecfdf3; border: 1px solid #a7f3d0; border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.rera-box > i { font-size: 2rem; color: var(--ready); }
.rera-box strong { display: block; color: #065f46; }
.rera-box span { display: block; font-size: .88rem; color: #065f46; word-break: break-all; }
.rera-box small { color: #047857; font-size: .76rem; }

.plan-table { margin: 0; font-size: .88rem; }
.plan-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; background: var(--soft); border: 0; }
.plan-table td { vertical-align: middle; border-color: var(--line); }
.plan-table .price { font-weight: 800; color: var(--ink); }

.amen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.amen-grid > div { display: flex; align-items: center; gap: .55rem; background: var(--soft); border-radius: 10px; padding: .6rem .75rem; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.amen-grid i { color: var(--brand); font-size: 1.1rem; }
@media (max-width: 991.98px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .amen-grid { grid-template-columns: repeat(2, 1fr); } }

.map-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: var(--soft); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 575.98px) { .map-frame { aspect-ratio: 4 / 3; } }

.dev-logo.lg { flex: 0 0 60px; width: 60px; height: 60px; font-size: 1.05rem; border-radius: 14px; }
.dev-logo.xl { flex: 0 0 96px; width: 96px; height: 96px; font-size: 1.6rem; border-radius: 22px; }

.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin: 0; }
.spec-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.spec-list dt { font-weight: 500; color: var(--muted); }
.spec-list dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
@media (max-width: 575.98px) { .spec-list { grid-template-columns: 1fr; } }

.safety-note { display: flex; gap: .8rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: .9rem 1rem; font-size: .84rem; color: #92400e; }
.safety-note i { font-size: 1.2rem; }
.safety-note p { margin: 0; }

.side-sticky { position: sticky; top: 92px; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; box-shadow: var(--shadow); }
.price-card > small { color: var(--muted); font-weight: 600; font-size: .78rem; }
.price-card .pr { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.price-card .pr span { font-size: 1rem; color: var(--muted); font-weight: 600; }
.price-card .rate { color: var(--muted); font-size: .82rem; margin: .1rem 0 0; }
.price-card ul { list-style: none; padding: .8rem 0; margin: .8rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); display: grid; gap: .35rem; font-size: .86rem; }
.price-card ul i { color: var(--brand); margin-right: .35rem; }
.poster { display: flex; align-items: center; gap: .7rem; padding: .9rem 0; margin: .8rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.poster strong { display: block; color: var(--ink); font-size: .92rem; }
.poster small { color: var(--muted); font-size: .78rem; }
.side-form { display: grid; gap: .55rem; }
.side-form .form-control { font-size: .88rem; border-radius: 9px; min-height: 42px; }
.side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.side-actions .btn { font-size: .86rem; }
.btn-wa { background: #25d366; color: #fff; border: 0; }
.btn-wa:hover { background: #1ebe5b; color: #fff; }
.trust-mini { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; margin-top: .9rem; font-size: .76rem; color: var(--muted); font-weight: 600; }
.trust-mini i { color: var(--ready); margin-right: .2rem; }

.similar { margin-top: 3rem; }

.m-cta { position: fixed; left: 0; right: 0; bottom: 62px; z-index: 1036; display: flex; align-items: center; gap: .5rem; background: #fff; border-top: 1px solid var(--line); padding: .55rem 16px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .06); }
.m-cta > div { flex: 1; line-height: 1.1; }
.m-cta small { display: block; color: var(--muted); font-size: .7rem; }
.m-cta strong { color: var(--ink); font-size: 1.05rem; }
@media (max-width: 991.98px) { body:has(.m-cta) { padding-bottom: 124px; } body:has(.m-cta) .wa-float { bottom: 136px; } body:has(.m-cta) .to-top { bottom: 194px; } }

/* ---------- Enquiry modal + toast ---------- */
.enquiry-modal { border: 0; border-radius: 18px; overflow: hidden; }
.em-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.3rem .4rem; }
.em-head h5 { font-size: 1.08rem; font-weight: 800; margin: 0; }
.em-head h5 span { color: var(--brand-600); }
.em-body { padding: .5rem 1.3rem 1.3rem; }
.em-body .form-label { font-size: .8rem; font-weight: 600; margin-bottom: .25rem; }
.em-body .form-control, .em-body .input-group-text { font-size: .9rem; border-radius: 9px; }
.em-body .input-group .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.em-body .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; background: var(--soft); font-weight: 600; }
.em-note { font-size: .74rem; color: var(--muted); text-align: center; margin: .7rem 0 0; }

.pc-toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2000; display: flex; align-items: center; gap: .6rem; max-width: calc(100% - 32px); background: #fff; border-radius: 12px; padding: .8rem 1rem; box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 600; animation: toastIn .35s ease-out; }
.pc-toast.ok { border-left: 4px solid var(--ready); }
.pc-toast.ok > i { color: var(--ready); font-size: 1.2rem; }
.pc-toast.err { border-left: 4px solid #dc2626; }
.pc-toast.err > i { color: #dc2626; font-size: 1.2rem; }
.pc-toast button { border: 0; background: none; color: var(--muted); padding: 0 .2rem; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -12px); } }

/* ---------- Developers ---------- */
.dev-tile { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; color: var(--ink); transition: .25s; }
.dev-tile:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); }
.dev-tile h3 { font-size: 1.05rem; margin: .9rem 0 .15rem; }
.dev-tile .meta { font-size: .78rem; color: var(--muted); margin-bottom: .6rem; }
.dev-tile .desc { font-size: .84rem; color: var(--ink-2); flex: 1; }
.dt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .4rem 0 1rem; }
.dt-stats div { background: var(--soft); border-radius: 10px; text-align: center; padding: .5rem .2rem; }
.dt-stats strong { display: block; font-size: 1.05rem; }
.dt-stats small { font-size: .68rem; color: var(--muted); font-weight: 600; }
.dev-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; }
.dh-text h2 { font-size: 1.2rem; }
.dh-text p { color: var(--ink-2); font-size: .92rem; line-height: 1.7; }
.dh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dh-stats div { background: var(--soft); border-radius: 12px; padding: .7rem 1rem; min-width: 120px; }
.dh-stats strong { display: block; font-size: 1.4rem; color: var(--brand-600); }
.dh-stats small { font-size: .74rem; color: var(--muted); font-weight: 600; }
@media (max-width: 991.98px) { .dev-hero { grid-template-columns: auto 1fr; } .dh-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .dev-hero { grid-template-columns: 1fr; padding: 1.2rem; } .dh-stats { grid-template-columns: 1fr 1fr; } .dh-stats div { min-width: 0; } }

/* ---------- Blog ---------- */
.bc-ex { font-size: .84rem; color: var(--muted); margin-bottom: .6rem; }
.article-cover { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 16px; margin-bottom: 1.6rem; }
.article-body { font-size: 1rem; line-height: 1.85; color: var(--ink-2); }
.article-body h2 { font-size: 1.3rem; margin: 1.8rem 0 .7rem; }
.article-body ul { padding-left: 1.2rem; }
.article-body li { margin-bottom: .4rem; }
.share-row { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-weight: 600; font-size: .88rem; }
.share-row a { width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--ink); display: grid; place-items: center; }
.share-row a:hover { background: var(--brand); color: #fff; }
.recent-posts { margin-top: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; }
.recent-posts h5 { font-size: .98rem; font-weight: 800; margin-bottom: .8rem; }
.recent-posts a { display: flex; gap: .75rem; align-items: center; padding: .55rem 0; border-top: 1px dashed var(--line); color: var(--ink); }
.recent-posts a:first-of-type { border-top: 0; }
.recent-posts img { width: 70px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.recent-posts strong { display: block; font-size: .84rem; line-height: 1.35; }
.recent-posts small { color: var(--muted); font-size: .74rem; }
.recent-posts a:hover strong { color: var(--brand-600); }

/* ---------- About / contact / legal ---------- */
.about-h { font-size: calc(clamp(1.6rem, 2.6vw, 2.3rem) - 4px); margin-bottom: 1rem; }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.4rem; }
.about-points div { display: flex; align-items: center; gap: .6rem; background: var(--soft); border-radius: 12px; padding: .75rem .9rem; font-size: .88rem; font-weight: 600; }
.about-points i { color: var(--brand); font-size: 1.2rem; }
@media (max-width: 575.98px) { .about-points { grid-template-columns: 1fr; } }
.about-visual { position: relative; }
.about-visual img { width: 100%; border-radius: 20px; aspect-ratio: 4 / 3.2; object-fit: cover; }
.av-card { position: absolute; left: -16px; bottom: 24px; background: var(--brand); color: #fff; border-radius: 14px; padding: 1rem 1.3rem; box-shadow: var(--shadow-lg); }
.av-card strong { display: block; font-size: 1.6rem; line-height: 1; }
.av-card span { font-size: .8rem; }
@media (max-width: 575.98px) { .av-card { left: 12px; } }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.about-stats strong { display: block; font-size: 2rem; color: var(--brand-600); }
.about-stats span { color: var(--muted); font-weight: 600; font-size: .88rem; }
@media (max-width: 767.98px) { .about-stats { grid-template-columns: 1fr 1fr; } }
.pc-accordion .accordion-item { border: 1px solid var(--line); border-radius: 12px !important; margin-bottom: .6rem; overflow: hidden; }
.pc-accordion .accordion-button { font-weight: 700; font-size: .95rem; color: var(--ink); box-shadow: none; }
.pc-accordion .accordion-button:not(.collapsed) { background: var(--brand-50); color: var(--brand-600); }
.pc-accordion .accordion-body { color: var(--ink-2); font-size: .9rem; }

.contact-cards { display: grid; gap: .7rem; }
.cc { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; color: var(--ink); }
a.cc:hover { border-color: var(--brand); }
.cc > i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-size: 1.2rem; }
.cc small { display: block; color: var(--muted); font-size: .76rem; font-weight: 600; }
.cc strong { font-size: .92rem; line-height: 1.45; }

.legal-body h2 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.legal-body p { color: var(--ink-2); line-height: 1.8; font-size: .94rem; }

/* ---------- Auth ---------- */
.auth-wrap { padding: 40px 0 70px; background: var(--soft); }
.auth-card { display: grid; grid-template-columns: 1fr 1.15fr; max-width: 1020px; margin: 0 auto; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.auth-side { position: relative; color: #fff; background: linear-gradient(160deg, rgba(22, 23, 27, .92), rgba(22, 23, 27, .7) 55%, rgba(224, 109, 12, .75)), var(--auth-img) center/cover; padding: 2.4rem 2.2rem; display: flex; }
.as-inner { display: flex; flex-direction: column; gap: 1.2rem; }
.auth-side h2 { color: #fff; font-size: 1.6rem; line-height: 1.25; margin: 1.4rem 0 .2rem; }
.auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; font-size: .92rem; }
.auth-side li i { color: var(--brand); margin-right: .45rem; }
.as-foot { margin-top: auto; font-size: .84rem; color: rgba(255, 255, 255, .75); }
.as-foot a { color: #fff; font-weight: 700; }
.auth-form { padding: 2.4rem 2.4rem 2.2rem; }
.auth-form h1, .auth-single h1 { font-size: 1.55rem; margin-bottom: .25rem; }
.af-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.af-sub a, .auth-single a:not(.btn) { color: var(--brand-600); font-weight: 600; }
.auth-form .form-label, .auth-single .form-label, .acc-wrap .form-label { font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon .form-control { padding-left: 2.4rem; min-height: 46px; border-radius: 10px; }
.input-icon.pw .form-control { padding-right: 2.6rem; }
.pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: .35rem .5rem; }
.pw-toggle:hover { color: var(--ink); }
.input-icon .form-control.is-invalid { background-image: none; }
.auth-wrap .form-control:focus, .acc-wrap .form-control:focus, .acc-wrap .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(245, 130, 32, .18); }
.field-err { color: #dc2626; font-size: .78rem; margin-top: .25rem; font-weight: 500; }
.pw-meter { height: 4px; background: var(--line); border-radius: 4px; margin-top: .4rem; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.type-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.type-pick label { cursor: pointer; }
.type-pick input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick span { display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 1.5px solid var(--line); border-radius: 12px; padding: .7rem .4rem; font-size: .82rem; font-weight: 700; color: var(--ink-2); transition: .15s; text-align: center; }
.type-pick span i { font-size: 1.25rem; color: var(--muted); }
.type-pick input:checked + span { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); }
.type-pick input:checked + span i { color: var(--brand); }
.type-pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.af-divider { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1rem; color: var(--muted); font-size: .8rem; }
.af-divider::before, .af-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.af-note { text-align: center; color: var(--muted); font-size: .8rem; margin: .8rem 0 0; }
.auth-single { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 2.2rem; text-align: center; box-shadow: var(--shadow); }
.auth-single > p { color: var(--ink-2); font-size: .94rem; }
.as-icon { width: 70px; height: 70px; border-radius: 20px; background: var(--brand-50); color: var(--brand); display: inline-grid; place-items: center; font-size: 2rem; margin-bottom: 1rem; }
.as-tips { list-style: none; padding: 0; margin: 1rem 0; text-align: left; display: grid; gap: .5rem; font-size: .86rem; color: var(--muted); }
.as-tips i { color: var(--brand); margin-right: .4rem; }
.dev-box { text-align: left; background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 12px; padding: .9rem 1rem; font-size: .82rem; display: grid; gap: .3rem; margin-top: .8rem; }
.dev-box strong { color: #92400e; }
.dev-box a { word-break: break-all; color: #b45309 !important; }
@media (max-width: 991.98px) { .auth-card { grid-template-columns: 1fr; max-width: 560px; } .auth-side { display: none; } }
@media (max-width: 575.98px) { .auth-wrap { padding: 20px 0 40px; } .auth-form, .auth-single { padding: 1.5rem 1.2rem; } .auth-single { border-radius: 16px; } }

.pc-alert { display: flex; gap: .6rem; align-items: flex-start; border-radius: 12px; padding: .75rem .95rem; font-size: .88rem; font-weight: 500; margin-bottom: 1rem; text-align: left; }
.pc-alert > i { font-size: 1.05rem; margin-top: .05rem; }
.pc-alert ul { margin: 0; padding-left: 1rem; }
.pc-alert.ok { background: #ecfdf3; color: #065f46; border: 1px solid #a7f3d0; }
.pc-alert.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.pc-alert.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* header user menu */
.avatar.xs { width: 26px; height: 26px; font-size: .66rem; display: inline-grid; vertical-align: middle; }
.avatar.lg { width: 54px; height: 54px; font-size: 1.05rem; flex-shrink: 0; }
.user-menu .btn-login { display: inline-flex; align-items: center; gap: .4rem; }
.user-menu .dropdown-item i { color: var(--muted); margin-right: .35rem; }
.user-menu form .dropdown-item i { color: inherit; }
@media (max-width: 1199.98px) { .user-menu .btn-login { width: 100%; justify-content: center; } .user-menu .dropdown-menu { position: static !important; transform: none !important; } }

/* ---------- Account ---------- */
.acc-wrap { padding: 32px 0 70px; background: var(--soft); min-height: 60vh; }
.acc-nav { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem; position: sticky; top: 92px; }
.acc-user { display: flex; align-items: center; gap: .75rem; padding: .3rem .3rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.acc-user strong { display: block; color: var(--ink); font-size: .95rem; line-height: 1.2; }
.acc-user small { font-size: .76rem; color: var(--muted); }
.acc-nav nav { display: grid; gap: .15rem; }
.acc-nav nav a, .acc-nav nav button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; border: 0; background: none; padding: .6rem .75rem; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.acc-nav nav a:hover, .acc-nav nav button:hover { background: var(--soft); color: var(--ink); }
.acc-nav nav a.active { background: var(--brand-50); color: var(--brand-600); }
.acc-nav nav button { color: #dc2626; }
@media (max-width: 991.98px) {
    .acc-nav { position: static; padding: .6rem; }
    .acc-user { padding-bottom: .7rem; }
    .acc-nav nav { grid-auto-flow: column; overflow-x: auto; scrollbar-width: none; }
    .acc-nav nav::-webkit-scrollbar { display: none; }
    .acc-nav nav a, .acc-nav nav button { white-space: nowrap; }
}
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.acc-head h1 { font-size: 1.45rem; margin: 0 0 .2rem; }
.acc-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.verify-banner { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.verify-banner > i { font-size: 1.6rem; color: #d97706; }
.verify-banner strong { display: block; color: #92400e; font-size: .92rem; }
.verify-banner span { font-size: .82rem; color: #a16207; }
.acc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.acc-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.acc-stats i { color: var(--brand); font-size: 1.2rem; }
.acc-stats strong { display: block; font-size: 1.5rem; color: var(--ink); line-height: 1.2; margin-top: .3rem; }
.acc-stats span { font-size: .76rem; color: var(--muted); font-weight: 600; }
@media (max-width: 991.98px) { .acc-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .acc-stats { grid-template-columns: repeat(2, 1fr); } }
.acc-empty { text-align: center; padding: 1.6rem 1rem; }
.acc-empty > i { font-size: 2.6rem; color: var(--brand); }
.acc-empty h3 { font-size: 1.1rem; margin: .6rem 0 .3rem; }
.acc-empty p { color: var(--muted); font-size: .9rem; }
.my-list { display: grid; gap: .6rem; }
.ml-row { display: flex; align-items: center; gap: .9rem; border: 1px solid var(--line); border-radius: 12px; padding: .55rem; }
.ml-row img { width: 84px; height: 62px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ml-info { flex: 1; min-width: 0; }
.ml-info strong { display: block; font-size: .92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-info small { color: var(--muted); font-size: .8rem; }
.ml-status { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 50px; }
.ml-status.approved { background: #ecfdf3; color: #047857; }
.ml-status.pending { background: #fffbeb; color: #b45309; }
.ml-status.rejected { background: #fef2f2; color: #b91c1c; }
.acc-how { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; }
.acc-how h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.steps.light .step { background: var(--soft); border-color: var(--line); color: var(--ink); }
.steps.light .step h4 { color: var(--ink); }
.steps.light .step p { color: var(--muted); }
.steps.light .step span { color: rgba(0, 0, 0, .06); }

/* ---------- Blog author box ---------- */
.author-box { display: flex; gap: 1.2rem; margin-top: 1.6rem; background: linear-gradient(135deg, var(--brand-50), #fff 60%); border: 1px solid var(--brand-100); border-radius: 18px; padding: 1.4rem; }
.ab-avatar { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--brand-100); }
.ab-body { min-width: 0; }
.ab-body > small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
.ab-body h3 { font-size: 1.15rem; margin: .1rem 0 .15rem; }
.ab-role { font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: .6rem; }
.ab-role i { color: var(--ready); }
.ab-body > p:not(.ab-role) { font-size: .88rem; color: var(--ink-2); line-height: 1.7; margin-bottom: .8rem; }
.ab-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ab-links a, .ab-links button { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: .35rem .8rem; }
.ab-links a:hover, .ab-links button:hover { border-color: var(--brand); color: var(--brand-600); }
.ab-links i { color: var(--brand); }
@media (max-width: 575.98px) { .author-box { flex-direction: column; padding: 1.2rem; } .ab-avatar { flex-basis: auto; width: 62px; height: 62px; font-size: 1.2rem; } }
/* keep the footer CTA (pulled up 50%) clear of page content */
.detail-wrap { padding-bottom: 110px; }

/* developer logo image variant */
.dev-logo.has-img { background: #fff; border: 1px solid var(--line); padding: 4px; }
.dev-logo.has-img img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================
   Mobile compact mode (phones)
   ========================================================= */
@media (max-width: 575.98px) {
    body { font-size: .92rem; }
    .section { padding: 38px 0; }
    .sec-head { margin-bottom: 1.1rem; gap: .5rem; }
    .sec-head h2, .sec-head-center h2 { font-size: 1.3rem; margin-bottom: .2rem; }
    .sec-head p { font-size: .82rem; }
    .sec-head-center { margin-bottom: 1.3rem; }
    .eyebrow { margin-bottom: .25rem; }
    .link-arrow { font-size: .82rem; }

    /* hero */
    .hero { padding: 22px 0 70px; }
    .hero-kicker { display: none; }
    .hero h1 { font-size: 1.6rem; margin: 0 0 .45rem; }
    .hero-copy p { font-size: .86rem; }
    .search-panel { margin-top: 1rem; }
    .search-tabs .nav-link { padding: .45rem .7rem; font-size: .78rem; }
    .sf-field { min-height: 42px; }
    .sf-btn { min-height: 42px; }
    .popular { margin-top: .6rem; font-size: .74rem; }
    .hero-stats { grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1.1rem; }
    .hero-stats strong { font-size: 1.05rem; }
    .hero-stats span { font-size: .64rem; line-height: 1.2; }
    .cat-section { margin-top: -46px; padding-bottom: 26px; }

    /* horizontal swipe rows (resale, blog) */
    .row.m-scroll { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -12px; padding-bottom: 4px; --bs-gutter-x: .75rem; }
    .row.m-scroll::-webkit-scrollbar { display: none; }
    .row.m-scroll > [class*="col"] { flex: 0 0 80%; max-width: 80%; scroll-snap-align: start; }

    /* two-column compact grids (commercial, why us) */
    .row.m-2col { --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; }
    .row.m-2col > [class*="col"] { flex: 0 0 50%; max-width: 50%; }
    .com-card img { aspect-ratio: 16 / 11; }
    .com-body { padding: 1rem .75rem .75rem; }
    .com-icon { width: 34px; height: 34px; font-size: .95rem; top: -17px; right: .7rem; border-radius: 9px; }
    .com-body h3 { font-size: .9rem; margin-bottom: .15rem; }
    .com-body p { display: none; }
    .com-foot { flex-direction: column; gap: .1rem; font-size: .72rem; padding-top: .45rem; }
    .why-card { padding: .95rem .85rem; }
    .why-card > span { width: 38px; height: 38px; font-size: 1.05rem; margin-bottom: .55rem; border-radius: 10px; }
    .why-card h3 { font-size: .86rem; margin-bottom: .2rem; }
    .why-card p { font-size: .74rem; line-height: 1.45; }

    /* cards */
    .pc-body h3 { font-size: .95rem; }
    .lc-price { font-size: 1.02rem; }

    /* post band */
    .post-band h2 { font-size: 1.25rem; }
    .post-band p { font-size: .82rem; }
    .post-band .row { --bs-gutter-y: 1.2rem; }
    .steps { gap: .55rem; }
    .step { padding: .8rem .75rem; }
    .step i { font-size: 1.2rem; }
    .step h4 { font-size: .85rem; margin: .4rem 0 .1rem; }
    .step p { font-size: .72rem; }
    .step span { font-size: 1.5rem; top: 8px; right: 10px; }

    /* cities */
    .city-grid { grid-auto-rows: 110px; }
    .city-tile.big .ct-info h3 { font-size: 1.1rem; }
    .ct-info { left: .75rem; bottom: .6rem; }
    .ct-info h3 { font-size: .88rem; }
    .ct-info span { font-size: .7rem; }

    /* developers: 2 per row */
    .dev-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .dev-card { padding: .65rem .7rem; gap: .55rem; }
    .dev-card > i { display: none; }
    .dev-logo { flex: 0 0 38px; height: 38px; font-size: .72rem; border-radius: 10px; }
    .dev-card h3 { font-size: .8rem; }
    .dev-card p { font-size: .68rem; }

    /* budget + EMI */
    .panel { padding: 1.1rem; border-radius: 16px; }
    .panel h2.h3 { font-size: 1.1rem; }
    .budget-grid { gap: .5rem; margin-top: .8rem; }
    .budget-grid a { padding: .7rem; }
    .budget-grid strong { font-size: .98rem; }
    .emi-row { margin-top: .8rem; }
    .emi-result { margin-top: 1rem; gap: .5rem; }
    .emi-result .er-main strong { font-size: 1.15rem; }

    /* testimonials & blog */
    .testi { padding: 1.1rem; }
    .bc-body { padding: .8rem; }

    /* enquiry + footer */
    .enquiry-box h2 { font-size: 1.2rem; }
    .enquiry-box p { font-size: .82rem; }
    .enquiry-form .form-control, .enquiry-form .form-select { min-height: 44px; }
    #enquiry { padding-bottom: 90px; }
    .footer-cta { padding: 1.1rem; gap: .8rem; }
    .footer-cta h3 { font-size: 1.02rem; }
    .footer-cta p { display: none; }
    .footer-cta .btn-lg { padding: .6rem 1rem; font-size: .9rem; }
    .footer-main { --bs-gutter-y: 1.1rem; padding-bottom: 1.2rem; }
    .footer-main img { width: 170px; height: auto; }
    .footer-main p.small { font-size: .78rem; }
    .site-footer h6 { margin-bottom: .45rem; font-size: .88rem; }
    .site-footer .col-6 a { padding: .18rem 0; font-size: .8rem; }
    .footer-contact li { font-size: .8rem; }
    .footer-bottom { padding: 1rem 0; font-size: .72rem; }

    /* inner pages */
    .page-head { padding: 18px 0 20px; }
    .page-head h1 { font-size: 1.2rem; }
    .page-head p { font-size: .8rem; }
    .listing-wrap { padding: 20px 0 50px; }
    .detail-wrap { padding: 18px 0 90px; }
    .d-card { padding: 1rem; border-radius: 14px; }
    .d-card h2 { font-size: 1rem; }
    .facts > div { padding: .6rem .7rem; }
    .facts strong { font-size: .82rem; }
    .price-card { padding: 1rem; }
    .price-card .pr { font-size: 1.35rem; }
}

/* =========================================================
   Mobile compact mode — round 2 (tighter)
   ========================================================= */
@media (max-width: 575.98px) {
    .section { padding: 28px 0; }
    .sec-head p, .sec-head-center p { display: none; }
    .sec-head h2, .sec-head-center h2 { font-size: 1.15rem; }

    /* hero: heading + search only */
    .hero { padding: 14px 0 58px; }
    .hero h1 { font-size: 1.32rem; line-height: 1.15; margin-bottom: .2rem; }
    .hero-copy p { display: none; }
    .search-panel { margin-top: .7rem; }
    .search-tabs { gap: .2rem; }
    .search-tabs .nav-link { padding: .38rem .6rem; font-size: .72rem; border-radius: 9px 9px 0 0; }
    .search-tabs .nav-link i { display: none; }
    .search-form { padding: .35rem; gap: .3rem; border-radius: 0 12px 12px 12px; }
    .sf-field { min-height: 38px; padding: 0 .6rem; border-radius: 8px; }
    .sf-field input, .sf-field select { font-size: .8rem; }
    .sf-field i { font-size: .9rem; }
    .sf-city { flex: 1 1 calc(50% - .3rem); }
    .sf-type, .sf-budget { flex: 1 1 calc(50% - .3rem); }
    .sf-query { flex: 1 1 calc(50% - .3rem); order: 0; }
    .sf-btn { min-height: 38px; font-size: .86rem; border-radius: 8px; }
    .popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: .5rem; gap: .35rem; }
    .popular::-webkit-scrollbar { display: none; }
    .popular a { white-space: nowrap; font-size: .7rem; padding: .18rem .55rem; }
    .popular a:nth-child(n+5) { display: inline-block; }
    .hero-stats { margin-top: .75rem; }
    .hero-stats strong { font-size: .95rem; }
    .hero-stats span { font-size: .6rem; }

    /* categories */
    .cat-section { margin-top: -42px; padding-bottom: 18px; }
    .cat-grid { padding: .25rem; border-radius: 12px; }
    .cat-item { padding: .5rem .15rem; gap: .1rem; }
    .ci-icon { width: 32px; height: 32px; font-size: .9rem; border-radius: 9px; margin-bottom: 0; }
    .cat-item strong { font-size: .64rem; }

    /* cards */
    .pc-media { aspect-ratio: 16 / 8.5; }
    .lc-media { aspect-ratio: 16 / 8.5; }
    .pc-body { padding: .65rem .8rem .3rem; }
    .pc-meta { font-size: .74rem; }
    .pc-foot, .lc-foot { padding: .5rem .8rem .8rem; }
    .lc-body { padding: .6rem .8rem .25rem; }
    .lc-specs { padding: .4rem 0; }
    .slider-nav { margin-top: .8rem; }
    .slider-nav button { width: 36px; height: 36px; }

    /* post band */
    .post-band p { display: none; }
    .post-band .btn-lg { padding: .55rem 1rem; font-size: .86rem; }
    .steps { grid-template-columns: repeat(4, 1fr); gap: .35rem; }
    .step { padding: .55rem .35rem; text-align: center; border-radius: 10px; }
    .step span { display: none; }
    .step i { font-size: 1rem; }
    .step h4 { font-size: .68rem; margin: .25rem 0 0; }
    .step p { display: none; }

    /* cities */
    .city-grid { grid-auto-rows: 88px; gap: .45rem; }

    /* commercial / why / devs */
    .com-card img { aspect-ratio: 16 / 9; }
    .com-body h3 { font-size: .82rem; }
    .why-card p { display: none; }
    .why-card { display: flex; align-items: center; gap: .55rem; padding: .7rem; }
    .why-card > span { margin: 0; width: 32px; height: 32px; flex-shrink: 0; font-size: .9rem; }
    .why-card h3 { margin: 0; font-size: .78rem; }

    /* budget/EMI */
    .budget-grid a { padding: .55rem .6rem; }
    .budget-grid small { font-size: .66rem; }
    .budget-grid strong { font-size: .88rem; }
    .bhk-pills a { padding: .3rem .7rem; font-size: .76rem; }

    /* testimonials, blog, enquiry */
    .testi blockquote { font-size: .8rem; margin-bottom: .7rem; }
    .bc-body h3 { font-size: .86rem; margin: .25rem 0 .4rem; }
    .enquiry-box { padding: 1.2rem 1rem; }
    .enquiry-box p { display: none; }

    /* footer */
    .footer-main p.small { display: none; }
}

/* =========================================================
   Mobile fixes — round 3
   ========================================================= */
/* Touch screens: no hover "lift" on cards (it sticks after a tap). */
@media (hover: none) {
    .project-card:hover, .listing-card:hover, .blog-card:hover, .why-card:hover,
    .com-card:hover, .step:hover, .dev-tile:hover, .dev-card:hover { transform: none; }
    .project-card:hover .pc-media img, .listing-card:hover .lc-media img,
    .blog-card:hover .bc-media img, .city-tile:hover img { transform: none; }
}

@media (max-width: 575.98px) {
    /* swipe rows must only scroll sideways — never vertically */
    .row.m-scroll { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; padding-top: 4px; margin-top: 0; }
    .sec-head { margin-bottom: 1rem; }
    .sec-head > .link-arrow { margin-top: .1rem; }

    /* hero: a bit taller again */
    .hero { padding: 26px 0 74px; }
    .hero h1 { margin-bottom: .45rem; }
    .search-panel { margin-top: 1rem; }
    .hero-stats { margin-top: 1.1rem; }

    /* bottom app bar: slimmer */
    body { padding-bottom: 56px; }
    .mobile-nav { padding: .2rem .25rem calc(.2rem + env(safe-area-inset-bottom)); }
    .mobile-nav a { font-size: .62rem; padding: .15rem 0; gap: 0; }
    .mobile-nav a i { font-size: 1.05rem; }
    .mobile-nav a.post i { width: 40px; height: 40px; margin-top: -18px; font-size: 1.05rem; border-width: 3px; }
    .wa-float { width: 44px; height: 44px; font-size: 1.25rem; right: 14px; bottom: 70px; }
    .to-top { width: 36px; height: 36px; right: 18px; bottom: 122px; }
    body:has(.m-cta) { padding-bottom: 108px; }
    .m-cta { bottom: 52px; padding: .45rem 14px; }
    body:has(.m-cta) .wa-float { bottom: 118px; }
    body:has(.m-cta) .to-top { bottom: 170px; }
}

/* ---------- WhatsApp button: modern "assistant" style ---------- */
.wa-float {
    background: radial-gradient(circle at 30% 25%, #5dfc9a 0%, #25d366 38%, #0f9f6e 100%);
    box-shadow: 0 8px 22px -6px rgba(16, 185, 129, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
    border: 2px solid rgba(255, 255, 255, .85);
    overflow: visible;
    isolation: isolate;
}
.wa-float::before, .wa-float::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
    border: 2px solid rgba(37, 211, 102, .55); animation: waPulse 2.6s ease-out infinite;
}
.wa-float::after { animation-delay: 1.3s; }
.wa-float .wa-dot {
    position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
    background: #a3ff3f; border: 2px solid #fff; box-shadow: 0 0 8px #a3ff3f;
}
.wa-float:hover { transform: scale(1.06) rotate(-6deg); }
@keyframes waPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-float::before, .wa-float::after { animation: none; display: none; } }

@media (max-width: 575.98px) {
    .wa-float { width: 38px; height: 38px; font-size: 1.05rem; right: 12px; bottom: 66px; }
    .wa-float .wa-dot { width: 8px; height: 8px; }
    .to-top { width: 34px; height: 34px; font-size: .85rem; right: 14px; bottom: 112px; }
    body:has(.m-cta) .wa-float { bottom: 114px; }
    body:has(.m-cta) .to-top { bottom: 160px; }
    /* hero: taller */
    .hero { padding: 36px 0 86px; }
    .hero h1 { font-size: 1.42rem; margin-bottom: .55rem; }
    .search-panel { margin-top: 1.15rem; }
    .hero-stats { margin-top: 1.3rem; }
}

/* mobile: smaller tabs */
@media (max-width: 575.98px) {
    .search-tabs { gap: .15rem; }
    .search-tabs .nav-link { padding: .3rem .5rem; font-size: .66rem; font-weight: 600; border-radius: 8px 8px 0 0; }
    .chip-filter { padding: .2rem; gap: .15rem; }
    .chip-filter button, .chip-filter a { padding: .28rem .6rem; font-size: .7rem; }
    .for-switch { padding: .2rem; margin-bottom: 1rem; }
    .for-switch a { padding: .35rem .65rem; font-size: .74rem; }
    .sec-tabs { padding: .2rem; }
    .sec-tabs a { padding: .3rem .6rem; font-size: .74rem; }
}

/* mobile: smaller placeholders & select text in fields */
@media (max-width: 575.98px) {
    input::placeholder, textarea::placeholder { font-size: .72rem; letter-spacing: 0; }
    .sf-field input, .sf-field select { font-size: .76rem; }
    .sf-field input::placeholder { font-size: .7rem; }
    .form-control, .form-select { font-size: .82rem; }
    .enquiry-form .form-control, .enquiry-form .form-select { font-size: .8rem; min-height: 42px; }
    .filter-form .form-control, .filter-form .form-select { font-size: .78rem; }
    .input-icon .form-control { min-height: 42px; }
}

/* mobile/tablet side menu (offcanvas): smaller text */
@media (max-width: 1199.98px) {
    .offcanvas-xl { width: 290px !important; }
    .offcanvas-xl .offcanvas-header { padding: .75rem 1rem; }
    .offcanvas-xl .offcanvas-header img { height: 32px; }
    .offcanvas-xl .offcanvas-body { padding: .5rem 1rem 1rem; }
    .site-header .offcanvas-xl .nav-link { font-size: .84rem; padding: .62rem .2rem !important; }
    .offcanvas-xl .mega-menu h6 { font-size: .62rem; margin-bottom: .35rem; }
    .offcanvas-xl .mega-menu a { font-size: .8rem; padding: .22rem 0; }
    .offcanvas-xl .dropdown-item { font-size: .8rem; padding: .35rem .6rem; }
    .offcanvas-xl .nav-actions { margin-top: .9rem; gap: .4rem; }
    .offcanvas-xl .nav-actions .btn { font-size: .8rem; padding: .5rem .8rem; }
    .offcanvas-xl .nav-actions .btn-link-dark { font-size: .82rem; }
}

/* keep floating bars below the header/off-canvas menu (header is z 1030) */
.mobile-nav { z-index: 1020; }
.wa-float, .to-top { z-index: 1019; }
.m-cta { z-index: 1021; }

/* mobile: smaller buttons everywhere */
@media (max-width: 575.98px) {
    .btn { font-size: .8rem; padding: .45rem .85rem; border-radius: 9px; }
    .btn-lg { font-size: .84rem; padding: .55rem 1rem; border-radius: 10px; }
    .btn-sm { font-size: .72rem; padding: .3rem .6rem; border-radius: 7px; }
    .site-header .btn-post.btn-sm { font-size: .72rem; padding: .3rem .55rem; gap: .25rem; }
    .site-header .btn-post .badge-free { font-size: .52rem; padding: .1rem .3rem; }
    .navbar-toggler { font-size: 1.15rem; padding: .15rem .4rem; }
    .sf-btn { font-size: .8rem; min-height: 36px; }
    .pc-foot .btn, .lc-foot .btn { font-size: .7rem; padding: .32rem .4rem; }
    .slider-nav button { width: 32px; height: 32px; font-size: .85rem; }
    .enquiry-form .btn-lg, .side-form .btn, .auth-form .btn-lg, .auth-single .btn-lg, .em-body .btn-lg { font-size: .84rem; padding: .6rem 1rem; }
    .m-cta .btn-sm { font-size: .74rem; padding: .38rem .7rem; }
    .side-actions .btn { font-size: .78rem; padding: .45rem .6rem; }
    .footer-cta .btn-lg { font-size: .8rem; padding: .5rem .9rem; }
    .post-band .btn-lg { font-size: .8rem; padding: .5rem .9rem; }
}

/* =========================================================
   Mobile — inner pages polish (round 4)
   ========================================================= */
@media (max-width: 575.98px) {
    /* auth pages */
    .auth-wrap, .acc-wrap { padding: 16px 0 96px; }
    .auth-form, .auth-single { padding: 1.25rem 1.05rem; }
    .auth-form h1, .auth-single h1 { font-size: 1.2rem; }
    .af-sub { font-size: .8rem; margin-bottom: 1rem; }
    .auth-form .form-label, .auth-single .form-label, .acc-wrap .form-label { font-size: .76rem; margin-bottom: .2rem; }
    .input-icon .form-control { min-height: 40px; padding-left: 2.2rem; }
    .input-icon > i { left: .75rem; font-size: .9rem; }
    .auth-form .mb-3 { margin-bottom: .7rem !important; }
    .af-divider { margin: 1rem 0 .7rem; font-size: .72rem; }
    .type-pick span { padding: .5rem .3rem; font-size: .72rem; }
    .type-pick span i { font-size: 1.05rem; }
    .as-icon { width: 54px; height: 54px; font-size: 1.5rem; border-radius: 16px; margin-bottom: .7rem; }
    .auth-single > p, .as-tips { font-size: .8rem; }
    .pc-alert { font-size: .78rem; padding: .6rem .75rem; }
    .acc-head h1 { font-size: 1.15rem; }
    .acc-head p { font-size: .78rem; }
    .acc-stats > div { padding: .7rem; }
    .acc-stats strong { font-size: 1.15rem; }

    /* listing pages: horizontal compact cards (photo left, details right) */
    .listing-wrap .row > [class*="col"] > .project-card,
    .listing-wrap .row > [class*="col"] > .listing-card {
        display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto; border-radius: 12px;
    }
    .listing-wrap .project-card .pc-media, .listing-wrap .listing-card .lc-media { grid-row: 1 / 3; aspect-ratio: auto; height: 100%; min-height: 150px; }
    .listing-wrap .pc-badges, .listing-wrap .lc-by { top: 6px; left: 6px; }
    .listing-wrap .pc-badges .featured, .listing-wrap .pc-type, .listing-wrap .lc-verified { display: none; }
    .listing-wrap .pc-badges span, .listing-wrap .lc-by { font-size: .58rem; padding: .15rem .35rem; }
    .listing-wrap .project-card .fav, .listing-wrap .listing-card .fav { top: auto; bottom: 6px; left: 6px; right: auto; width: 26px; height: 26px; font-size: .72rem; }
    .listing-wrap .pc-body, .listing-wrap .lc-body { padding: .55rem .65rem .2rem; min-width: 0; }
    .listing-wrap .pc-dev { font-size: .6rem; }
    .listing-wrap .pc-body h3, .listing-wrap .lc-body h3 { font-size: .84rem; margin: .1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .listing-wrap .pc-loc, .listing-wrap .lc-loc { font-size: .7rem; margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .listing-wrap .pc-price { font-size: .92rem; margin-bottom: .2rem; }
    .listing-wrap .pc-meta { font-size: .68rem; gap: 0; margin-bottom: .3rem; }
    .listing-wrap .pc-meta li:nth-child(n+2) { display: none; }
    .listing-wrap .pc-rera { font-size: .6rem; padding: .15rem .35rem; }
    .listing-wrap .lc-price { font-size: .95rem; }
    .listing-wrap .lc-sub { font-size: .64rem; margin-bottom: .15rem; }
    .listing-wrap .lc-specs { font-size: .66rem; gap: .15rem .5rem; padding: .3rem 0; border-bottom: 0; }
    .listing-wrap .lc-specs li:nth-child(n+4) { display: none; }
    .listing-wrap .lc-note { display: none; }
    .listing-wrap .pc-foot, .listing-wrap .lc-foot { grid-column: 2; padding: .2rem .65rem .6rem; gap: .3rem; }
    .listing-wrap .pc-foot .btn, .listing-wrap .lc-foot .btn { font-size: .64rem; padding: .28rem .3rem; }
    .listing-wrap .row { --bs-gutter-y: .65rem; }
    .results-bar { font-size: .78rem; margin-bottom: .6rem; }
    .rb-actions .form-select { font-size: .72rem; padding-top: .3rem; padding-bottom: .3rem; }
    .active-filters a { font-size: .66rem; }
    .post-nudge { padding: .7rem .8rem; gap: .6rem; }
    .post-nudge strong { font-size: .8rem; }
    .post-nudge span { font-size: .7rem; }
    .hub-search .btn, .hub-search .sf-field { min-height: 38px; }
    .dev-tile { padding: .9rem; }
    .dev-tile h3 { font-size: .92rem; margin-top: .6rem; }
    .dev-tile .desc { font-size: .76rem; }
    .dev-hero { gap: .8rem; }
    .dh-stats strong { font-size: 1.1rem; }

    /* detail pages */
    .plan-table { font-size: .74rem; }
    .plan-table th { font-size: .6rem; }
    .plan-table td { padding: .45rem .4rem; }
    .plan-table .btn { white-space: nowrap; font-size: .64rem; padding: .25rem .45rem; }
    .gal-main .swiper-slide img { aspect-ratio: 16 / 10.5; }
    .gal-badges span { font-size: .6rem; padding: .2rem .4rem; }
    .amen-grid { gap: .4rem; }
    .amen-grid > div { font-size: .72rem; padding: .45rem .55rem; }
    .hl-list li { font-size: .8rem; }
    .d-text { font-size: .84rem; line-height: 1.65; }
    .rera-box { padding: .75rem .85rem; gap: .65rem; }
    .rera-box > i { font-size: 1.5rem; }
    .rera-box span { font-size: .76rem; }
    .spec-list > div { font-size: .78rem; padding: .45rem 0; }
    .map-frame { aspect-ratio: 16 / 11; }
    .side-form .form-control { min-height: 38px; font-size: .8rem; }
    .side-form .btn { padding: .5rem .8rem; }
    .safety-note { font-size: .74rem; }

    /* blog article, about, contact, legal */
    .article-body { font-size: .9rem; line-height: 1.75; }
    .article-body h2 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
    .article-cover { border-radius: 12px; margin-bottom: 1rem; }
    .author-box { gap: .7rem; padding: 1rem; }
    .about-h { font-size: 1.2rem; }
    .about-points div { font-size: .78rem; padding: .55rem .7rem; }
    .about-stats strong { font-size: 1.4rem; }
    .about-stats span { font-size: .74rem; }
    .pc-accordion .accordion-button { font-size: .84rem; padding: .75rem .9rem; }
    .pc-accordion .accordion-body { font-size: .8rem; }
    .cc { padding: .7rem .8rem; gap: .65rem; }
    .cc > i { width: 36px; height: 36px; font-size: 1rem; }
    .cc strong { font-size: .8rem; }
    .legal-body h2 { font-size: .98rem; }
    .legal-body p { font-size: .84rem; }
}

/* ---------- Thank-you page ---------- */
.ty-hero { position: relative; overflow: hidden; padding: 48px 0 40px; background: radial-gradient(circle at 15% 0%, rgba(245, 130, 32, .18), transparent 45%), radial-gradient(circle at 90% 30%, rgba(34, 197, 94, .12), transparent 40%), var(--soft); }
.ty-card { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 2.4rem 2rem 1.8rem; text-align: center; box-shadow: var(--shadow-lg); animation: tyIn .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tyIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.ty-check { width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #15803d); display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(22, 163, 74, .6), 0 0 0 8px rgba(34, 197, 94, .12); animation: tyPop .5s .15s cubic-bezier(.2, 1.4, .4, 1) both; }
.ty-check svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ty-check circle { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.ty-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tyDraw .5s .55s ease-out forwards; }
@keyframes tyPop { from { transform: scale(.3); opacity: 0; } }
@keyframes tyDraw { to { stroke-dashoffset: 0; } }
.ty-kicker { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ready); background: #ecfdf3; border: 1px solid #a7f3d0; padding: .25rem .7rem; border-radius: 50px; }
.ty-card h1 { font-size: 1.9rem; margin: .8rem 0 .5rem; }
.ty-lead { color: var(--ink-2); font-size: .98rem; max-width: 480px; margin: 0 auto 1.4rem; }
.ty-lead strong { color: var(--ink); }
.ty-ref { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ty-ref > div { background: var(--soft); border: 1px dashed var(--line); border-radius: 12px; padding: .6rem 1rem; text-align: left; min-width: 0; }
.ty-ref small { display: block; font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ty-ref strong { font-size: .98rem; color: var(--ink); letter-spacing: .03em; }
.ty-ref-for a { font-weight: 700; color: var(--brand-600); font-size: .9rem; }
.ty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; text-align: left; margin-bottom: 1.5rem; position: relative; }
.ty-steps > div { display: flex; gap: .55rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem; }
.ty-steps span { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--brand-50); color: var(--brand-600); }
.ty-steps .done span { background: var(--ready); color: #fff; }
.ty-steps strong { display: block; font-size: .82rem; color: var(--ink); line-height: 1.25; }
.ty-steps small { font-size: .72rem; color: var(--muted); }
.ty-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ty-home { display: inline-block; margin-top: 1.1rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.ty-home:hover { color: var(--brand-600); }

.ty-confetti { position: absolute; inset: 0; pointer-events: none; }
.ty-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: tyFall 3.2s ease-in forwards; }
.ty-confetti i:nth-child(1) { left: 44%; background: #f58220; animation-delay: 0.85s; animation-duration: 2.87s; }
.ty-confetti i:nth-child(2) { left: 9%; background: #22c55e; animation-delay: 0.07s; animation-duration: 3.04s; }
.ty-confetti i:nth-child(3) { left: 49%; background: #3b82f6; animation-delay: 0.52s; animation-duration: 3.49s; }
.ty-confetti i:nth-child(4) { left: 30%; background: #eab308; animation-delay: 0.03s; animation-duration: 2.92s; }
.ty-confetti i:nth-child(5) { left: 11%; background: #ec4899; animation-delay: 0.22s; animation-duration: 3.06s; }
.ty-confetti i:nth-child(6) { left: 10%; background: #16171b; animation-delay: 0.74s; animation-duration: 2.55s; }
.ty-confetti i:nth-child(7) { left: 31%; background: #f58220; animation-delay: 0.57s; animation-duration: 3.10s; }
.ty-confetti i:nth-child(8) { left: 10%; background: #22c55e; animation-delay: 0.52s; animation-duration: 2.88s; }
.ty-confetti i:nth-child(9) { left: 31%; background: #3b82f6; animation-delay: 0.04s; animation-duration: 3.43s; }
.ty-confetti i:nth-child(10) { left: 40%; background: #eab308; animation-delay: 0.38s; animation-duration: 3.05s; }
.ty-confetti i:nth-child(11) { left: 76%; background: #ec4899; animation-delay: 0.28s; animation-duration: 3.38s; }
.ty-confetti i:nth-child(12) { left: 26%; background: #16171b; animation-delay: 0.09s; animation-duration: 3.09s; }
.ty-confetti i:nth-child(13) { left: 27%; background: #f58220; animation-delay: 0.34s; animation-duration: 3.06s; }
.ty-confetti i:nth-child(14) { left: 11%; background: #22c55e; animation-delay: 0.51s; animation-duration: 3.14s; }
.ty-confetti i:nth-child(15) { left: 66%; background: #3b82f6; animation-delay: 0.61s; animation-duration: 2.91s; }
.ty-confetti i:nth-child(16) { left: 43%; background: #eab308; animation-delay: 0.42s; animation-duration: 3.51s; }
.ty-confetti i:nth-child(17) { left: 49%; background: #ec4899; animation-delay: 0.27s; animation-duration: 3.35s; }
.ty-confetti i:nth-child(18) { left: 92%; background: #16171b; animation-delay: 0.70s; animation-duration: 2.50s; }
@keyframes tyFall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(520px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .ty-confetti { display: none; } .ty-card, .ty-check, .ty-check path { animation: none; stroke-dashoffset: 0; } }

.ty-tips { padding: 26px 0 8px; }
.ty-tip { display: flex; gap: .8rem; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.ty-tip > i { font-size: 1.4rem; color: var(--brand); }
.ty-tip strong { display: block; font-size: .9rem; color: var(--ink); margin-bottom: .15rem; }
.ty-tip p { margin: 0; font-size: .8rem; color: var(--muted); }

@media (max-width: 575.98px) {
    .ty-hero { padding: 20px 0 22px; }
    .ty-card { padding: 1.5rem 1rem 1.2rem; border-radius: 18px; }
    .ty-check { width: 64px; height: 64px; margin-bottom: .7rem; }
    .ty-check svg { width: 42px; height: 42px; }
    .ty-card h1 { font-size: 1.3rem; margin: .55rem 0 .35rem; }
    .ty-lead { font-size: .82rem; margin-bottom: 1rem; }
    .ty-ref { gap: .45rem; margin-bottom: 1rem; }
    .ty-ref > div { padding: .45rem .7rem; flex: 1 1 100%; }
    .ty-ref strong { font-size: .86rem; }
    .ty-steps { grid-template-columns: 1fr; gap: .4rem; margin-bottom: 1rem; }
    .ty-steps > div { padding: .5rem .6rem; align-items: center; }
    .ty-steps span { flex-basis: 24px; height: 24px; font-size: .7rem; }
    .ty-actions .btn { flex: 1 1 0; }
    .ty-tips { padding: 16px 0 0; }
    .ty-tip { padding: .75rem; }
    .ty-tip strong { font-size: .8rem; }
    .ty-tip p { font-size: .72rem; }
}

/* tighter vertical rhythm between sections (desktop & tablet) */
@media (min-width: 576px) {
    .section { padding: 60px 0; }
    .sec-head { margin-bottom: 1.75rem; }
    .sec-head-center { margin-bottom: 2rem; }
    .cat-section { padding-bottom: 44px; }
    #enquiry { padding-bottom: 110px; }
}
@media (min-width: 576px) and (max-width: 991.98px) { .section { padding: 48px 0; } }

/* ---------- Photo lightbox ---------- */
.gal-main .swiper-slide img { cursor: zoom-in; }
.gal-count { cursor: pointer; transition: background .2s; }
.gal-count:hover { background: var(--brand); }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(8, 9, 12, .96); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.lb.show { opacity: 1; }
.lb[hidden] { display: none; }
.lb-top { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; color: #fff; flex-shrink: 0; }
.lb-count { font-weight: 700; font-size: .9rem; background: rgba(255, 255, 255, .1); padding: .3rem .7rem; border-radius: 50px; white-space: nowrap; }
.lb-title { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-close { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; display: grid; place-items: center; flex-shrink: 0; transition: .2s; }
.lb-close:hover { background: var(--brand); transform: rotate(90deg); }
.lb-main { flex: 1; width: 100%; min-height: 0; margin: 0 !important; padding: 0 !important; }
.lb-main .swiper-slide { display: flex; align-items: center; justify-content: center; }
.lb-main .swiper-zoom-container { width: 100%; height: 100%; padding: 0 70px; }
.lb-main img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.2rem; display: grid; place-items: center; transition: .2s; }
.lb-nav:hover { background: var(--brand); border-color: var(--brand); }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }
.lb-nav.swiper-button-disabled { opacity: .25; pointer-events: none; }
.lb-thumbs { flex-shrink: 0; width: 100%; padding: .8rem 1rem !important; margin: 0 !important; }
.lb-thumbs .swiper-slide { width: 84px; height: 60px; border-radius: 8px; overflow: hidden; opacity: .45; cursor: pointer; border: 2px solid transparent; transition: .2s; }
.lb-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--brand); }
.lb-hint { display: none; text-align: center; color: rgba(255, 255, 255, .45); font-size: .72rem; margin: 0 0 .6rem; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .lb-top { padding: .6rem .8rem; }
    .lb-title { font-size: .8rem; }
    .lb-count { font-size: .76rem; }
    .lb-close { width: 36px; height: 36px; font-size: .95rem; }
    .lb-main .swiper-zoom-container { padding: 0; }
    .lb-main img { border-radius: 0; }
    .lb-nav { display: none; }
    .lb-thumbs { padding: .5rem .6rem !important; }
    .lb-thumbs .swiper-slide { width: 60px; height: 44px; }
    .lb-hint { display: block; }
}

/* sidebar enquiry message box */
.side-form textarea.form-control { min-height: 84px; resize: vertical; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 575.98px) { .side-form textarea.form-control { font-size: .76rem; min-height: 74px; } }

/* ---------- Project detail: floor plans, payment plan, gallery, layout, location ---------- */
.fp-tabs { display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; }
.fp-tabs::-webkit-scrollbar { display: none; }
.fp-tabs button { white-space: nowrap; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 700; font-size: .84rem; padding: .45rem .95rem; border-radius: 50px; transition: .2s; }
.fp-tabs button:hover { border-color: var(--brand); color: var(--brand-600); }
.fp-tabs button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.fp-pane { display: none; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: center; }
.fp-pane.active { display: grid; animation: fpIn .3s ease; }
@keyframes fpIn { from { opacity: 0; transform: translateY(6px); } }
.fp-img, .layout-img, .loc-img, .pg-item { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--soft); cursor: zoom-in; }
.fp-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; display: block; transition: transform .4s; }
.fp-img:hover img, .layout-img:hover img, .loc-img:hover img, .pg-item:hover img { transform: scale(1.03); }
.fp-img > span, .layout-img > span, .loc-img > span { position: absolute; right: 10px; bottom: 10px; background: rgba(22, 23, 27, .78); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border-radius: 7px; }
.fp-info h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.fp-info p { margin: 0 0 .35rem; color: var(--muted); font-size: .9rem; }
.fp-info p i { color: var(--brand); }
.fp-info .fp-price { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: .5rem 0 .9rem; }
.fp-info .fp-price small { font-size: .8rem; color: var(--muted); }

.pay-table { margin: 0 0 .6rem; font-size: .9rem; }
.pay-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; background: var(--soft); border: 0; }
.pay-table td { vertical-align: middle; border-color: var(--line); }
.pay-table td.n { width: 44px; color: var(--muted); font-weight: 700; }
.pay-table td small { display: block; color: var(--muted); font-size: .76rem; }
.pay-table td.pct { font-weight: 800; color: var(--brand-600); white-space: nowrap; }
.pay-table tbody tr:nth-child(even) td { background: #fcfbf9; }

.pg-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; gap: .6rem; }
.pg-item { border-radius: 12px; }
.pg-item.big { grid-column: span 2; grid-row: span 2; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.pg-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22, 23, 27, .6); color: #fff; font-size: 1.5rem; font-weight: 800; }

.layout-img img { width: 100%; max-height: 520px; object-fit: contain; background: #fff; display: block; transition: transform .4s; }

.loc-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.2rem; }
.loc-list li { display: flex; gap: .5rem; font-size: .88rem; color: var(--ink-2); }
.loc-list i { color: var(--brand); margin-top: .1rem; }
.loc-media.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: .8rem; }
.loc-media.two .map-frame { aspect-ratio: auto; min-height: 280px; }
.loc-img img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; transition: transform .4s; }

@media (max-width: 767.98px) {
    .fp-pane { grid-template-columns: 1fr; gap: .8rem; }
    .loc-media.two { grid-template-columns: 1fr; }
    .loc-img img { min-height: 0; aspect-ratio: 16 / 10; }
    .pg-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; }
}
@media (max-width: 575.98px) {
    .fp-tabs button { font-size: .72rem; padding: .3rem .7rem; }
    .fp-info h3 { font-size: 1rem; }
    .fp-info .fp-price { font-size: 1.15rem; margin: .3rem 0 .6rem; }
    .pay-table { font-size: .76rem; }
    .pay-table th { font-size: .6rem; }
    .pay-table td { padding: .45rem .4rem; }
    .loc-list { grid-template-columns: 1fr; }
    .loc-list li { font-size: .78rem; }
    .pg-grid { grid-auto-rows: 78px; gap: .35rem; }
    .loc-media.two .map-frame { min-height: 200px; }
}

/* 404 page */
.nf-box { max-width: 680px; margin: 0 auto; text-align: center; }
.nf-code { display: inline-block; font-size: 5rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--brand), var(--brand-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-box h1 { font-size: 1.6rem; margin: .6rem 0 .5rem; }
.nf-box > p { color: var(--muted); margin-bottom: 1.4rem; }
.nf-search { max-width: 520px; margin: 0 auto 1.2rem; }
.nf-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.nf-links a { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 50px; font-weight: 600; font-size: .85rem; color: var(--ink); }
.nf-links a:hover { border-color: var(--brand); color: var(--brand-600); }
.nf-links i { color: var(--brand); }
@media (max-width: 575.98px) { .nf-code { font-size: 3.6rem; } .nf-box h1 { font-size: 1.2rem; } .nf-links a { font-size: .74rem; padding: .35rem .7rem; } }

/* ---------- Post property (member forms) ---------- */
.acc-head h1 .badge-free { font-size: .62rem; vertical-align: middle; }
.pp-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pp-choice { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 1.4rem; color: var(--ink); transition: .2s; }
.pp-choice:hover { border-color: var(--brand); box-shadow: 0 14px 34px -18px rgba(245, 130, 32, .55); transform: translateY(-2px); color: var(--ink); }
.pp-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: .9rem; }
.pp-ic.rent { background: #ecfdf3; color: #059669; }
.pp-choice strong { font-size: 1.15rem; }
.pp-choice p { color: var(--muted); font-size: .88rem; margin: .3rem 0 .7rem; }
.pp-choice ul { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .3rem; font-size: .84rem; color: var(--ink-2); }
.pp-choice li i { color: #059669; }
.pp-go { margin-top: auto; font-weight: 700; color: var(--brand-600); font-size: .92rem; }
.pp-go i { display: inline-block; transition: .2s; }
.pp-choice:hover .pp-go i { transform: translateX(4px); }
.pp-builder { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1rem; background: #fff; border: 1px dashed var(--line); border-radius: 14px; padding: .9rem 1.1rem; }
.pp-builder > i { font-size: 1.5rem; color: var(--brand); }
.pp-builder strong { display: block; font-size: .92rem; }
.pp-builder span { font-size: .8rem; color: var(--muted); }

.pp-switch { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: 4px; }
.pp-switch a { padding: .45rem 1.1rem; border-radius: 50px; font-weight: 700; font-size: .86rem; color: var(--ink-2); }
.pp-switch a.active { background: var(--ink); color: #fff; }
.pp-form .d-card h2 { display: flex; align-items: center; gap: .55rem; }
.pp-n { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); display: inline-grid; place-items: center; font-size: .78rem; font-weight: 800; flex-shrink: 0; }
.pp-hint { font-size: .82rem; color: var(--muted); margin-bottom: .9rem; }
.pp-seg { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.pp-seg label, .pp-chips label { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px solid var(--line); background: #fff; border-radius: 50px; padding: .45rem 1rem; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: .15s; user-select: none; margin: 0; }
.pp-seg label:hover, .pp-chips label:hover, .pp-types label:hover { border-color: var(--brand); }
.pp-seg .btn-check:checked + label, .pp-chips .btn-check:checked + label { background: var(--brand-50); border-color: var(--brand); color: var(--brand-600); }
.pp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-chips label { padding: .38rem .85rem; font-size: .82rem; }
.pp-chips.multi label i { display: none; }
.pp-chips.multi .btn-check:checked + label i { display: inline; }
.pp-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: .55rem; }
.pp-types[hidden] { display: none; }
.pp-types label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; border: 1.5px solid var(--line); border-radius: 14px; padding: .85rem .4rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: .15s; min-height: 84px; margin: 0; }
.pp-types label i { font-size: 1.35rem; color: var(--muted); }
.pp-types .btn-check:checked + label { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); box-shadow: 0 0 0 3px rgba(245, 130, 32, .12); }
.pp-types .btn-check:checked + label i { color: var(--brand); }
.pp-unit { max-width: 100px; flex: 0 0 100px !important; }
.pp-words { font-size: .8rem; font-weight: 700; color: var(--brand-600); min-height: 1.1em; margin-top: .3rem; }
.pp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .65rem; }
.pp-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--soft); }
.pp-ph img { width: 100%; height: 100%; object-fit: cover; }
.pp-ph:first-child::after { content: "Cover"; position: absolute; left: 6px; bottom: 6px; background: rgba(22, 23, 27, .75); color: #fff; font-size: .66rem; font-weight: 700; padding: .12rem .45rem; border-radius: 6px; }
.pp-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(22, 23, 27, .75); color: #fff; display: grid; place-items: center; font-size: .72rem; }
.pp-x:hover { background: #dc2626; }
.pp-drop { aspect-ratio: 4 / 3; border: 2px dashed var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; cursor: pointer; color: var(--muted); text-align: center; transition: .15s; margin: 0; }
.pp-drop[hidden] { display: none; }
.pp-drop:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand-600); }
.pp-drop i { font-size: 1.5rem; color: var(--brand); }
.pp-drop strong { font-size: .84rem; color: var(--ink); }
.pp-drop span { font-size: .7rem; }
.pp-photo-msg { font-size: .8rem; color: var(--muted); margin-top: .5rem; min-height: 1em; }
.pp-photo-msg.bad { color: #dc2626; }
.pp-form-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 12px; padding: .7rem 1rem; font-size: .86rem; margin-bottom: .8rem; }
.pp-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem; }
.pp-submit-note { font-size: .82rem; color: var(--muted); max-width: 440px; }
.pp-submit-note i { color: #059669; }
.pp-submit .btn-lg { font-size: .95rem; padding: .7rem 1.5rem; }

.my-list.full { display: grid; gap: .8rem; }
.ml-card { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .8rem; }
.ml-card.just-posted { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(245, 130, 32, .14); }
.ml-card > img { width: 190px; height: 140px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.ml-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ml-top { display: flex; gap: .4rem; align-items: center; }
.ml-for { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 50px; background: var(--soft); color: var(--ink-2); text-transform: uppercase; letter-spacing: .02em; }
.ml-for.rent { background: #eff6ff; color: #1d4ed8; }
.ml-body > strong { font-size: .98rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-body > small { color: var(--muted); font-size: .8rem; }
.ml-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .78rem; color: var(--muted); }
.ml-meta b { color: var(--ink); font-size: .95rem; }
.ml-reason { font-size: .78rem; background: #fef2f2; color: #b91c1c; border-radius: 8px; padding: .35rem .6rem; margin-top: .2rem; }
.ml-reason.wait { background: #fffbeb; color: #92400e; }
.ml-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: auto; padding-top: .4rem; }
.ml-actions .btn { font-size: .78rem; }
.ml-actions form { margin: 0; }

@media (max-width: 991.98px) {
    .pp-types { grid-template-columns: repeat(3, 1fr); }
    /* keep the submit button visible above the fixed mobile bottom nav */
    .pp-submit { position: sticky; bottom: 62px; z-index: 5; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2); }
}
@media (max-width: 575.98px) {
    .pp-choose { grid-template-columns: 1fr; gap: .7rem; }
    .pp-choice { padding: 1rem; border-radius: 14px; }
    .pp-ic { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: .6rem; }
    .pp-choice strong { font-size: 1rem; }
    .pp-choice p, .pp-choice ul { font-size: .78rem; }
    .pp-switch a { padding: .35rem .85rem; font-size: .78rem; }
    .pp-types { gap: .4rem; }
    .pp-types label { min-height: 70px; padding: .6rem .3rem; font-size: .72rem; border-radius: 12px; }
    .pp-types label i { font-size: 1.1rem; }
    .pp-seg label { padding: .38rem .8rem; font-size: .78rem; }
    .pp-chips label { padding: .3rem .7rem; font-size: .74rem; }
    .pp-photos { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
    .pp-drop i { font-size: 1.2rem; }
    .pp-submit { padding: .7rem .8rem; }
    .pp-submit-note { display: none; }
    .pp-submit .btn-lg { width: 100%; font-size: .88rem; padding: .6rem 1rem; }
    .ml-card { gap: .7rem; padding: .6rem; }
    .ml-card > img { width: 96px; height: 96px; border-radius: 10px; }
    .ml-body > strong { font-size: .86rem; }
    .ml-meta { font-size: .72rem; gap: .2rem .6rem; }
    .ml-meta b { font-size: .84rem; }
    .ml-actions .btn { font-size: .72rem; padding: .25rem .5rem; }
}

/* ---------- Inside the PropCountry mobile app (UA "PropCountryApp") ----------
   The native app bar + bottom tabs replace the website header, footer and quick-nav. */
body.in-app { padding-bottom: 0 !important; }
.in-app .topbar, .in-app .site-header, .in-app .site-footer, .in-app .mobile-nav, .in-app .wa-float { display: none !important; }
.in-app .sec-tabs { top: 8px !important; }
.in-app .filter-panel, .in-app .side-sticky, .in-app .acc-nav { top: 12px !important; }
.in-app .m-cta { bottom: 0 !important; padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
body.in-app:has(.m-cta) { padding-bottom: 64px !important; }
.in-app .to-top { bottom: 20px !important; }
body.in-app:has(.m-cta) .to-top { bottom: 80px !important; }
.in-app .pp-submit { bottom: 8px !important; }
.in-app .d-card, .in-app [id] { scroll-margin-top: 70px; }