/* BruinPlace shared pieces, from the hi-fi Figma file (nav, footer, listing cards, chips, buttons, reviews). */
.bp { font-family: "Inter", system-ui, sans-serif; background: #fff; color: #000; }
.bp img { display: block; }
.bp p { margin: 0; }
.bp h1, .bp h2, .bp h3 { margin: 0; font-weight: 600; }
.bp .hero-h { font-weight: 800; }

/* ---------- header ---------- */
.bp-nav { position: absolute; left: 0; top: 0; width: 1441px; height: 83px; background: #71c4ff; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 70px 0 80px; }
.bp-brand { display: flex; align-items: center; gap: 14px; color: #fff; font: 700 24px/32px "Quicksand", sans-serif; letter-spacing: -0.144px; }
.bp-brand img { width: 51px; height: 51px; }
.bp-nav-right { display: flex; align-items: center; gap: 20px; }
.bp-add { display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 16px; border-radius: 25px; background: #fff;
  color: #71c4ff; font-weight: 500; font-size: 14px; line-height: 24px; }
.bp-add img { width: 25px; height: 25px; margin: 0 -1px 0 0; }
.bp-bell { position: relative; width: 43.24px; height: 39.36px; border-radius: 10px; background: #fff; }
.bp-bell img { position: absolute; left: 8px; top: 5px; width: 28px; height: 29px; }
.bp-avatar { box-sizing: content-box; margin: 0 -3.63px; width: 47.9px; height: 47.9px; border-radius: 50%; background: #3ea6fc; border: 3.63px solid #fff; color: #fff;
  font-size: 16.94px; line-height: 29px; display: grid; place-items: center; }
.bp-nav-search { display: flex; align-items: center; gap: 13px; }
.bp-searchbar { width: 416px; height: 40px; border: 1px solid #3ea6fc; border-radius: 50px; background: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 0 4px 0 20px; color: #919191; font-weight: 500; font-size: 14px; line-height: 24px; }
.bp-searchbar img { width: 31px; height: 31px; border-radius: 50%; }
.bp-filters { width: 103px; height: 40px; border-radius: 50px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 9px;
  color: #71c4ff; font-weight: 500; font-size: 14px; line-height: 24px; }
.bp-filters img { width: 24px; height: 24px; }

/* ---------- footer ---------- */
.bp-footer { position: absolute; left: 0; width: 1441px; height: 289px; background: #71c4ff; color: #fff; padding: 80px; display: flex; gap: 75px; align-items: flex-start; overflow: hidden; }
.bp-footer .col-brand { width: 173px; display: grid; gap: 8px; }
.bp-footer .col-brand b { font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.144px; }
.bp-footer .col-brand p { font-size: 14px; line-height: 24px; }
.bp-footer .col { display: grid; gap: 10px; font-size: 14px; line-height: 24px; justify-items: start; }
.bp-footer .col b { font-weight: 700; font-size: 16px; line-height: 24px; }
.bp-footer .col u { text-underline-offset: 2px; }
.bp-footer .col-contact { width: 167.3px; gap: 11px; white-space: nowrap; }
.bp-footer .col-contact span { display: flex; align-items: center; gap: 14px; }
.bp-footer .col-contact img { width: 15px; height: 16px; }
.bp-footer .art { position: absolute; left: 787px; top: 25px; width: 598px; height: 260px; }

/* ---------- shared text bits ---------- */
.bp-h2 { font-weight: 600; font-size: 30px; line-height: 36px; letter-spacing: -0.225px; }
.bp-h3 { font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.144px; }
.bp-h4 { font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; }
.bp-muted { color: #bababa; font-weight: 400; }
.bp-rule { height: 1px; background: #d9d9d9; }

/* ---------- listing card (image + title/rating + meta) ---------- */
.bp-card { --pad: 15.55px; --gap: 19.43px; --rad: 25px; --img-rad: 20px; position: relative; background: #fff; border-radius: var(--rad);
  box-shadow: 0 3.1px 3.1px rgba(0,0,0,.25); padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); flex: none; }
.bp-card > img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; border-radius: var(--img-rad); }
.bp-card-body { display: flex; flex-direction: column; gap: 3.9px; }
.bp-card-row { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; }
.bp-card-row .t { color: #0f172a; font-weight: 600; font-size: 18.66px; line-height: 21.77px; }
.bp-rate { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 24px; font-weight: 700; }
.bp-rate img { width: 17px; height: 17px; }
.bp-rate i { font-style: normal; font-weight: 500; color: #bababa; margin-left: 4px; }
.bp-card .addr { color: #919191; font-size: 14px; line-height: 24px; white-space: nowrap; }
.bp-card .meta { display: flex; align-items: baseline; gap: 7.7px; white-space: nowrap; font-size: 15.48px; line-height: 18.57px; }
.bp-card .meta b { font-weight: 700; }
.bp-card .meta s { text-decoration: none; color: #919191; font-size: 10.8px; }

/* ---------- buttons, chips ---------- */
.bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 25px;
  background: #3ea6fc; color: #fff; font-weight: 500; font-size: 14px; line-height: 24px; white-space: nowrap; }
.bp-btn img { width: 24px; height: 24px; }
.bp-outline { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 16px; border-radius: 25px;
  border: 1px solid #919191; background: #fff; color: #0f172a; font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; }
.bp-outline img { width: 20px; height: 20px; }
.bp-chip { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 25px; border: 1px solid #3ea6fc;
  background: rgba(113,196,255,.1); color: #3ea6fc; font-weight: 500; font-size: 14px; line-height: 24px; white-space: nowrap; }
.bp-chip img { width: 20px; height: 20px; }
.bp-chip.lg { height: 40px; }
.bp-chip.lg img { width: 24px; height: 24px; }
.bp-toggle { display: flex; align-items: center; padding: 4px 5px; border: 1px solid #71c4ff; border-radius: 25px; background: #fff; }
.bp-toggle span { padding: 6px 12px; border-radius: 25px; font-weight: 500; font-size: 14px; line-height: 20px; }
.bp-toggle .on { background: #3ea6fc; color: #fff; }

/* ---------- detail pages (building / unit) ---------- */
.bp-gallery { position: absolute; left: 120px; width: 1201px; height: 475px; }
.bp-gallery > img { position: absolute; object-fit: cover; }
.bp-gallery .g0 { left: 0; top: 0; width: 595px; height: 475px; border-radius: 25px 0 0 25px; }
.bp-gallery .g1 { left: 620px; top: 0; width: 278px; height: 225px; }
.bp-gallery .g2 { left: 923px; top: 0; width: 278px; height: 225px; border-radius: 0 25px 0 0; }
.bp-gallery .g3 { left: 620px; top: 250px; width: 278px; height: 225px; }
.bp-gallery .g4 { left: 923px; top: 250px; width: 278px; height: 225px; border-radius: 0 0 25px 0; }
.bp-gallery .bp-btn { position: absolute; right: 12px; bottom: 20px; }
.bp-stars { display: flex; gap: 15.79px; }
.bp-stars img { width: 34px; height: 34px; }
.bp-amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.bp-amen span { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; }
.bp-body { font-size: 14px; line-height: 24px; }
.bp-contact { position: absolute; width: 299px; background: #fff; border-radius: 25px; box-shadow: 0 4px 7.5px rgba(0,0,0,.25); padding: 30px; }
.bp-contact .in { display: flex; flex-direction: column; gap: 40px; }
.bp-contact hr { margin: 0; border: 0; height: 1px; background: #d9d9d9; }
.bp-contact .who { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.bp-contact .pfp { display: flex; align-items: center; gap: 15px; }
.bp-contact .pfp i { width: 67px; height: 67px; border-radius: 50%; background: #71c4ff; color: #fff; font-style: normal; font-size: 26.8px; display: grid; place-items: center; }
.bp-contact .info { display: grid; gap: 25px; font-size: 14px; line-height: 24px; }
.bp-contact .info div { display: flex; gap: 15px; align-items: flex-start; }
.bp-contact .info b { display: block; font-weight: 700; }
.bp-map { width: 842px; height: 350px; border-radius: 25px; object-fit: cover; }
.bp-dist { display: flex; align-items: flex-end; gap: 10px; }
.bp-dist img { width: 38px; height: 38px; }
.bp-ratings { display: flex; gap: 16px; align-items: center; height: 181px; }
.bp-ratings .names { width: 53px; display: grid; gap: 15px; font-size: 14px; line-height: 24px; }
.bp-ratings .bars { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.bp-ratings .bars div { position: relative; width: 361px; height: 19px; border-radius: 25px; background: rgba(186,186,186,.2); }
.bp-ratings .bars i { position: absolute; left: 0; top: 0; height: 19px; border-radius: 25px; background: #71c4ff; }
.bp-search-sm { display: flex; align-items: center; gap: 10px; width: 251px; height: 40px; padding: 0 16px; border: 1px solid #919191; border-radius: 25px;
  color: #919191; font-size: 14px; line-height: 20px; }
.bp-search-sm img { width: 24px; height: 24px; }
.bp-review { position: relative; width: 842px; background: #fff; border-radius: 25px; box-shadow: 0 4px 4px rgba(0,0,0,.25); padding: 30px;
  display: flex; flex-direction: column; gap: 10px; }
.bp-review .top { display: flex; align-items: center; justify-content: space-between; }
.bp-review .user { display: flex; align-items: center; gap: 15px; }
.bp-review .av { width: 57px; height: 57px; border-radius: 50%; color: #fff; font-size: 22.8px; display: grid; place-items: center; }
.bp-review .name { display: grid; gap: 3px; }
.bp-review .yrs { color: #919191; font-size: 14px; line-height: 24px; }
.bp-review .txt { display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 24px; }
.bp-review .more { display: flex; align-items: center; gap: 5px; color: #3ea6fc; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bp-review .more img { width: 24px; height: 24px; }
.bp-review .cats { display: flex; gap: 10px; }
.bp-rec { position: absolute; left: 0; width: 1441px; background: #edf7ff; }
.bp-rec .head { position: absolute; left: 120px; width: 1201px; display: flex; justify-content: space-between; align-items: center; }
.bp-rec .grid { position: absolute; left: 120px; display: grid; grid-template-columns: repeat(3, 377px); column-gap: 35px; row-gap: 35px; }
.bp-rec .bp-card { --pad: 20px; --gap: 25px; --img-rad: 25px; height: 400px; box-shadow: 0 4px 4px rgba(0,0,0,.25); }
.bp-rec .bp-card-body { gap: 5px; }
.bp-rec .bp-card-row .t { font-size: 24px; line-height: 28px; }
.bp-rec .bp-rate { gap: 8px; }
.bp-rec .bp-rate img { width: 20px; height: 20px; }
.bp-rec .bp-card .addr { font-size: 16px; line-height: 24px; white-space: normal; }
.bp-rec .bp-card .meta { gap: 10px; font-size: 20px; line-height: 24px; }
.bp-rec .bp-card .meta b { font-size: 14px; }
.bp-rec .bp-card .meta s { font-size: 14px; }