/* =========================================================
   CodeChaps — Real Estate App Development page
   Page-specific styles (property search phone + EMI calculator hero).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:540px;align-items:center}
.re-wrap{position:relative;width:520px;height:520px}
.js .re-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .re-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.re-wrap .float{z-index:4}

/* ---- property phone ---- */
.prop{position:absolute;left:20px;top:0;width:250px;height:510px;border-radius:40px;background:#05070B;padding:10px;box-shadow:0 50px 90px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 8s ease-in-out infinite;z-index:2}
.prop::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#05070B;z-index:3}
.prop-screen{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden;background:#F8FAFC;color:#0F172A;display:flex;flex-direction:column}
.p-top{padding:42px 12px 8px;background:#fff}
.p-search{display:flex;align-items:center;gap:7px;background:#F1F5F9;border-radius:12px;padding:8px 10px;font-size:10px;color:#334155}
.p-search .ico{width:13px;height:13px;color:#64748B}
.p-chips{display:flex;gap:5px;margin-top:7px}
.p-chips span{font-size:8.5px;font-weight:700;border:1px solid #E2E8F0;border-radius:999px;padding:3px 7px;color:#475569;white-space:nowrap}
.p-chips span.on{background:#0F172A;color:#fff;border-color:#0F172A}
.p-map{position:relative;height:118px;flex:none;background:#E7EEF6;overflow:hidden}
.p-map svg{position:absolute;inset:0;width:100%;height:100%}
.p-map .blk{fill:#DBE4EF}
.p-map .park{fill:#C8EBD4}
.p-map .rd{fill:none;stroke:#fff;stroke-width:6}
.ppin{position:absolute;padding:2px 6px;border-radius:999px;background:#fff;font-size:8.5px;font-weight:700;color:#0F172A;box-shadow:0 3px 8px rgba(15,23,42,.18);transform:scale(0);transform-origin:bottom center}
.ppin::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-top-color:#fff;border-bottom:0}
.ppin.hot{background:var(--blue);color:#fff;animation:pinBob 2.4s ease-in-out infinite}
.ppin.hot::after{border-top-color:var(--blue)}
.js.loaded .ppin{transform:scale(1);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.js.loaded .ppin:nth-of-type(1){transition-delay:1s}.js.loaded .ppin:nth-of-type(2){transition-delay:1.15s}.js.loaded .ppin:nth-of-type(3){transition-delay:1.3s}.js.loaded .ppin:nth-of-type(4){transition-delay:1.45s}
@keyframes pinBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.listing{margin:-18px 10px 0;position:relative;z-index:1;background:#fff;border-radius:16px;box-shadow:0 12px 26px rgba(15,23,42,.14);overflow:hidden}
.house{position:relative;height:112px;background:linear-gradient(180deg,#BAE6FD,#E0F2FE 70%);overflow:hidden}
.house::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1E1B4B,#4F46E5 75%);opacity:0}
.js.loaded .house::before{animation:dusk 10s ease-in-out infinite}
@keyframes dusk{0%,40%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
.house svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
.house .wall{fill:#fff}
.house .roof{fill:#334155}
.house .door{fill:#B45309}
.house .lawn{fill:#86EFAC}
.house .tree{fill:#16A34A}
.house .trunk{fill:#78350F}
.house .win{fill:#CBD5E1}
.js.loaded .house .win{animation:lights 10s ease-in-out infinite}
@keyframes lights{0%,45%{fill:#CBD5E1}55%,90%{fill:#FCD34D}100%{fill:#CBD5E1}}
.house .tour{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:4px;font-size:8.5px;font-weight:700;color:#fff;background:rgba(15,23,42,.65);border-radius:999px;padding:3px 8px}
.house .tour i{width:10px;height:10px;border:1.5px solid #fff;border-radius:50%;border-left-color:transparent;animation:spin360 1.6s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.house .fav{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#E11D48}
.house .fav .ico{width:13px;height:13px;fill:#E11D48;stroke:#E11D48;transform-origin:center;animation:heartPop 2.8s ease-in-out infinite}
@keyframes heartPop{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.35)}86%{transform:scale(1)}}
.l-body{padding:9px 11px 11px}
.l-price{display:flex;justify-content:space-between;align-items:center}
.l-price b{font-family:var(--display);font-weight:900;font-size:17px}
.l-price span{font-size:8.5px;font-weight:700;color:#15803D;background:#DCFCE7;padding:2px 7px;border-radius:999px}
.l-body small{display:block;font-size:9.5px;color:#64748B;margin-top:2px}
.l-meta{display:flex;gap:8px;margin-top:6px;font-size:9px;color:#334155}
.l-meta span{display:flex;align-items:center;gap:3px}
.l-meta .ico{width:11px;height:11px;color:#64748B}
.l-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.l-btns span{text-align:center;font-size:9.5px;font-weight:700;border-radius:9px;padding:7px 4px}
.l-btns .pri{background:var(--blue);color:#fff}
.l-btns .sec{background:#EFF6FF;color:var(--blue)}
.p-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 14px;border-top:1px solid #E2E8F0;background:#fff;color:#94A3B8}
.p-tabs .ico{width:17px;height:17px}
.p-tabs .on{color:var(--blue)}

/* ---- EMI calculator card ---- */
.emi{position:absolute;right:-10px;top:90px;width:232px;border-radius:22px;background:linear-gradient(160deg,#111A2B,#0B111C);border:1px solid #263244;padding:16px;color:#fff;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:floatY 7s ease-in-out infinite reverse;z-index:1}
.emi-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#94A3B8}
.emi-top .ok{font-weight:700;color:#86EFAC;background:rgba(34,197,94,.14);padding:2px 8px;border-radius:999px}
.emi-mid{display:flex;align-items:center;gap:12px;margin:12px 0}
.ring{position:relative;width:78px;height:78px;flex:none}
.ring svg{width:78px;height:78px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:#F59E0B}
.ring .fg{stroke:#3B82F6;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.js.loaded .ring .fg{animation:ringFill 1.8s var(--ease) 1.1s forwards}
@keyframes ringFill{to{stroke-dashoffset:38}}
.ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8.5px;color:#94A3B8}
.ring span b{font-size:13px;color:#fff}
.emi-mid small{display:block;font-size:9.5px;color:#94A3B8}
.emi-mid .big{font-family:var(--display);font-weight:900;font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-direction:column;gap:3px;margin-top:6px;font-size:9px;color:#CBD5E1}
.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;background:var(--c)}
.slider{margin-top:10px;font-size:9.5px;color:#94A3B8}
.slider div{display:flex;justify-content:space-between;margin-bottom:5px}
.slider b{color:#fff;font-size:10px}
.slider .trk{position:relative;height:5px;border-radius:4px;background:#1E293B}
.slider .trk i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--blue);width:var(--w)}
.slider .trk i::after{content:"";position:absolute;right:-6px;top:-4px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.4)}
.js.loaded .slider .trk i{animation:slide 5s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes slide{0%,100%{width:var(--w)}50%{width:calc(var(--w) + 12%)}}
.emi-btn{margin-top:14px;display:block;text-align:center;font-size:10.5px;font-weight:700;border-radius:10px;padding:8px;background:#fff;color:#0F172A}

.float--1{right:-60px;top:-6px}
.float--2{right:-40px;top:auto;bottom:6px}
.float--3{left:-60px;top:auto;bottom:-34px}
@media (max-width:1240px) and (min-width:961px){.re-wrap{transform-origin:left center;scale:.9}.float--1{right:-20px}.float--2{right:-10px}.float--3{left:-40px}.emi{right:-44px}}
@media (max-width:960px){.hero-visual{min-height:0}.re-wrap{width:100%;max-width:520px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}.prop,.emi{position:relative;left:auto;right:auto;top:auto}.emi{margin-top:60px}}
@media (max-width:560px){.emi{display:none}}
@media (prefers-reduced-motion:reduce){.ppin{transform:none}.ring .fg{stroke-dashoffset:38}}