/* ============================================================
   Property Promo Popup — shown to guests on Requirement (People)
   listing pages, offering a jump to property listings.
   Ported from Claude-Designs/.../website/prop-popup.css.
   All selectors prefixed .ppop- (not .pp — .pp-* is used elsewhere).
   Desktop: centered modal. <=768px: bottom sheet + carousel.
   ============================================================ */
.ppop-scrim{
  --ppop-blue:#0E8AE0;
  --ppop-blue-dark:#0A6EB5;
  --ppop-blue-tint:#E6F3FC;
  --ppop-ink:#0B1726;
  --ppop-ink-soft:#3A4757;
  --ppop-muted:#6B7785;
  --ppop-hairline:#E5E9EE;
  --ppop-hairline-soft:#EEF1F5;
  --ppop-canvas:#F6F8FB;
  --ppop-display:"Plus Jakarta Sans","SF Pro Display",system-ui,sans-serif;
  --ppop-body:"Inter","SF Pro Text",system-ui,sans-serif;
  --ppop-shadow-sm:0 1px 3px rgba(15,30,50,.05);
  position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:10050;background:rgba(11,23,38,.55);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
}
.ppop-scrim *,.ppop-scrim *::before,.ppop-scrim *::after{box-sizing:border-box;}
.ppop-scrim.open{opacity:1;visibility:visible;}
.ppop{position:relative;width:100%;max-width:1010px;max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(11,23,38,.35);transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.32,.72,0,1);text-align:left;}
.ppop-scrim.open .ppop{transform:none;}
.ppop-grab{display:none;}
.ppop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 32px 22px;background:linear-gradient(100deg,#F1F8FD 0%,#FFFFFF 70%);border-bottom:1px solid var(--ppop-hairline-soft);}
.ppop-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--ppop-body);font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ppop-blue-dark);}
.ppop-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--ppop-blue);}
.ppop-head h2{font-family:var(--ppop-display);font-weight:800;font-size:25px;line-height:1.2;letter-spacing:-.025em;color:var(--ppop-ink);margin:9px 0 0;text-wrap:pretty;}
.ppop-head p{font-family:var(--ppop-body);font-size:14.5px;line-height:1.5;color:var(--ppop-muted);margin:6px 0 0;text-wrap:pretty;}
.ppop-count{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-right:36px;}
.ppop-count-n{font-family:var(--ppop-display);font-weight:800;font-size:30px;letter-spacing:-.03em;color:var(--ppop-blue-dark);line-height:1;}
.ppop-count-l{font-family:var(--ppop-body);font-weight:600;font-size:12.5px;color:var(--ppop-muted);}
.ppop-x{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--ppop-hairline-soft);display:flex;align-items:center;justify-content:center;color:var(--ppop-ink-soft);cursor:pointer;transition:.12s;z-index:2;}
.ppop-x:hover{color:var(--ppop-ink);border-color:var(--ppop-hairline);box-shadow:var(--ppop-shadow-sm);}
.ppop-scroll{overflow-y:auto;flex:1;min-height:0;}
.ppop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:18px 32px 24px;}
.ppop-dots{display:none;}
.ppop-foot{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;border-top:1px solid var(--ppop-hairline-soft);background:var(--ppop-canvas);border-radius:0 0 22px 22px;}
.ppop-stay{font-family:var(--ppop-body);font-weight:600;font-size:14px;color:var(--ppop-muted);cursor:pointer;padding:6px 2px;background:none;border:none;}
.ppop-stay:hover{color:var(--ppop-ink-soft);}
.ppop-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:13px;background:var(--ppop-blue);color:#fff;font-family:var(--ppop-display);font-weight:800;font-size:15.5px;letter-spacing:-.01em;box-shadow:0 8px 20px rgba(14,138,224,.3);white-space:nowrap;text-decoration:none;transition:background .13s,transform .12s;}
.ppop-cta:hover,.ppop-cta:focus{background:var(--ppop-blue-dark);color:#fff;text-decoration:none;}
.ppop-cta:active{transform:translateY(1px);}
.ppop-cta-cnt{background:rgba(255,255,255,.2);border-radius:7px;padding:3px 8px;font-size:13px;font-family:var(--ppop-body);font-weight:800;}

/* ---------- Property card ----------
   The popup renders the property listing's own card partial
   (property-list-item-new.blade.php). These rules are copied from
   public/css/property-listing.css (not loaded on people listing pages),
   scoped under .ppop-scrim so nothing leaks into the people listing.
   Keep in sync with property-listing.css. */
.ppop-scrim .property-card{background:#ffffff;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(15,30,50,0.07);border:1px solid #eef1f5;transition:box-shadow 0.2s, transform 0.2s, border-color 0.2s;display:flex;flex-direction:column;cursor:pointer;position:relative;text-decoration:none;color:inherit;min-width:0;}
.ppop-scrim .property-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-4px);border-color:#dde3ea;color:inherit;text-decoration:none;}
.ppop-scrim .property-card .media{position:relative;aspect-ratio:16 / 11;overflow:hidden;background:#f0f0f0;}
.ppop-scrim .property-carousel{position:relative;width:100%;height:100%;overflow:hidden;}
.ppop-scrim .carousel-track{position:relative;width:100%;height:100%;}
.ppop-scrim .carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 0.5s ease;z-index:1;}
.ppop-scrim .carousel-slide.active{opacity:1;z-index:2;}
.ppop-scrim .carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.ppop-scrim .carousel-counter{position:absolute;bottom:0.625rem;right:0.625rem;background:rgba(0, 0, 0, 0.6);color:white;padding:0.25rem 0.625rem;border-radius:20px;font-size:0.6875rem;font-weight:600;z-index:3;}
.ppop-scrim .carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 0.625rem;z-index:3;opacity:0;transition:opacity 0.3s;}
.ppop-scrim .property-card:hover .carousel-nav{opacity:1;}
.ppop-scrim .carousel-prev,.ppop-scrim .carousel-next{background:rgba(255, 255, 255, 0.9);border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;color:#333;transition:background 0.3s, transform 0.2s;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);}
.ppop-scrim .carousel-prev:hover,.ppop-scrim .carousel-next:hover{background:#ffffff;transform:scale(1.1);}
.ppop-scrim .property-card .type-pill{position:absolute;top:10px;left:10px;z-index:3;background:rgba(255,255,255,0.96);padding:5px 10px;border-radius:999px;font-family:'DM Sans', sans-serif;font-weight:700;font-size:0.71875rem;color:#1a1a1a;display:inline-flex;align-items:center;gap:6px;overflow:hidden;transition:background 0.35s ease;}
.ppop-scrim .property-card .type-pill .dot{width:6px;height:6px;border-radius:3px;flex-shrink:0;}
.ppop-scrim .property-card .type-pill.social{color:#fff;box-shadow:0 2px 8px rgba(0, 0, 0, 0.18);}
.ppop-scrim .property-card .type-pill .lbl{letter-spacing:0.2px;}
.ppop-scrim .property-card .type-pill .rt{display:inline-flex;align-items:center;gap:6px;transition:opacity 0.35s ease, transform 0.35s ease;}
.ppop-scrim .property-card .type-pill .rt.out{opacity:0;transform:translateY(4px);}
.ppop-scrim .property-card .topright{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;gap:7px;}
.ppop-scrim .wishlist-btn{position:static;background:rgba(255, 255, 255, 0.96);border:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.3s, transform 0.2s;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);}
.ppop-scrim .wishlist-btn:hover{background:#ffffff;transform:scale(1.1);}
.ppop-scrim .wishlist-btn.active{background:#ffffff;}
.ppop-scrim .wishlist-btn.active svg{fill:#ef4444;color:#ef4444;}
.ppop-scrim .wishlist-btn svg{width:18px;height:18px;color:#666;transition:all 0.3s;}
.ppop-scrim .property-card .price{position:absolute;bottom:10px;left:10px;z-index:3;background:#fff;color:#1a1a1a;padding:6px 12px;border-radius:999px;font-family:'DM Sans', sans-serif;font-weight:800;font-size:0.9375rem;box-shadow:0 4px 12px rgba(0,0,0,0.18);}
.ppop-scrim .property-card .price .unit{font-size:0.6875rem;font-weight:600;color:#888;}
.ppop-scrim .property-content{padding:0.875rem 0.9375rem 1rem;display:flex;flex-direction:column;flex:1;}
.ppop-scrim .property-title{font-size:0.9375rem;font-weight:700;color:#1a1a1a;margin:0;line-height:1.3;font-family:'DM Sans', sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ppop-scrim .property-location{display:flex;align-items:flex-start;gap:5px;color:#888;font-size:0.75rem;margin-top:0.3125rem;}
.ppop-scrim .property-location svg{flex-shrink:0;color:#999;margin-top:2px;}
.ppop-scrim .property-location span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.ppop-scrim .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:0.6875rem;}
.ppop-scrim .tag{display:inline-flex;align-items:center;gap:4px;font-family:'DM Sans', sans-serif;font-weight:700;font-size:0.65625rem;padding:4px 8px;border-radius:7px;}
.ppop-scrim .tag-furnish{color:#1B7F47;background:#E8F6EE;}
.ppop-scrim .tag-preferred{color:#2d8bc0;background:#EAF4FC;}
.ppop-scrim .tag-new{color:#B6611A;background:#FFF3E0;}
.ppop-scrim .property-foot{margin-top:auto;padding-top:0.75rem;border-top:1px dashed #eef1f5;display:flex;justify-content:space-between;align-items:center;font-family:'DM Sans', sans-serif;font-size:0.75rem;color:#888;}
.ppop-scrim .foot-stats{display:inline-flex;gap:0.75rem;align-items:center;}
.ppop-scrim .foot-stats span{display:inline-flex;align-items:center;gap:4px;}

@media (max-width:480px){
  .ppop-scrim .property-content{padding:0.8125rem 0.875rem 0.9375rem;}
  .ppop-scrim .property-title{font-size:0.9375rem;}
}

@media (max-width:900px){
  .ppop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- Mobile: bottom sheet ---------- */
@media (max-width:768px){
  .ppop-scrim{align-items:flex-end;padding:0;}
  .ppop{max-width:520px;border-radius:22px 22px 0 0;max-height:92vh;transform:translateY(100%);}
  .ppop-scrim.open .ppop{transform:none;}
  .ppop-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--ppop-hairline);margin:10px auto 0;flex-shrink:0;}
  .ppop-head{flex-direction:column;align-items:stretch;gap:12px;padding:14px 18px 16px;background:linear-gradient(180deg,#F1F8FD 0%,#FFFFFF 100%);}
  .ppop-head h2{font-size:20px;margin-top:7px;padding-right:34px;}
  .ppop-head p{font-size:13.5px;}
  .ppop-count{flex-direction:row;align-items:baseline;gap:7px;align-self:flex-start;background:#fff;border:1px solid #CFE6F7;border-radius:999px;padding:6px 13px;}
  .ppop-count-n{font-size:17px;}
  .ppop-count-l{font-size:12px;}
  .ppop-x{top:12px;right:12px;width:34px;height:34px;}
  .ppop-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 16px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .ppop-grid::-webkit-scrollbar{display:none;}
  /* Carousel sizing only — card design itself is unchanged from the listing. */
  .ppop-scrim .property-card{flex:0 0 78%;scroll-snap-align:start;}
  .ppop-scrim .property-card:hover{transform:none;}
  .ppop-dots{display:flex;justify-content:center;gap:5px;padding:0 0 14px;}
  .ppop-dots span{width:6px;height:6px;border-radius:3px;background:var(--ppop-hairline);transition:.2s;}
  .ppop-dots span.on{width:18px;background:var(--ppop-blue);}
  .ppop-foot{flex-direction:column-reverse;align-items:stretch;gap:6px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:0;background:#fff;box-shadow:0 -6px 18px rgba(15,30,50,.06);border-top:none;}
  .ppop-cta{width:100%;height:52px;}
  .ppop-stay{text-align:center;padding:8px;min-height:44px;}
}

@media (prefers-reduced-motion:reduce){.ppop,.ppop-scrim{transition:none;}}
html.ppop-lock,body.ppop-lock{overflow:hidden;}