/* Reset — kept minimal for max compatibility (Tizen 3+, WebOS 3+, Android 7+) */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#root {
  width: 100%;
  height: 100%;
  position: relative;
}

.fullscreen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
}

.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.status-title { font-size: 32px; font-weight: bold; margin-bottom: 12px; }
.status-sub   { font-size: 18px; color: #ccc; }

.media-img,
.media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}

/* ===== Property showcase card (ERA-style signage layout) ===== */
.property {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #0a2540;
  font-family: Arial, Helvetica, sans-serif;
}
.property * { box-sizing: border-box; }

/* ---- Header strip: white bar; brand on the left, REF on the right ---- */
.pc-header {
  position: relative;
  z-index: 5;
  height: 14%;
  background: #fff;
  border-bottom: 1px solid #e2e6ea;
}
/* Brand sits absolutely so the logo can spill ~20% below the strip onto the
   image, while the name stays beside it on the white header (not on the photo). */
.pc-brand {
  position: absolute;
  top: 0; left: 0;
  z-index: 6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/* White logo plate that notches down into the image. */
.pc-logo-box {
  background: #fff;
  padding: 2.4vh 1.6vw 2.4vh 1.8vw;
  margin-right: 1.4vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/* Logo whitespace trim: the wrapper clips to the mark's bounding box and the
   image is shifted so the mark sits flush at the wrapper's top-left. Values are
   derived from this logo's content box (220x118, mark at x80-142, y18-94). */
.pc-logo-wrap {
  display: block;
  overflow: hidden;
  height: 14.2vh;
  width: 11.6vh;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.pc-logo { height: 22vh; width: auto; display: block; margin-left: -14.9vh; margin-top: -3.36vh; }
.pc-logo-text {
  font-size: 4.6vh;
  font-weight: bold;
  color: #0a2540;
  margin-right: 1.2vw;
  letter-spacing: 1px;
}
.pc-tagline { border-left: 0.45vh solid #e2231a; padding-left: 1.1vw; line-height: 1.18; }
.pc-tagline div { font-size: 2.7vh; font-weight: bold; color: #0a2540; letter-spacing: 1px; }

/* ---- REF: angled red badge on the header's top-right ---- */
.pc-ref {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 2.2vw 0 3.4vw;
  background: #e2231a;
  color: #fff;
  font-size: 2.6vh;
  font-weight: bold;
  letter-spacing: 1px;
  -webkit-clip-path: polygon(2vw 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(2vw 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- Body: hero image + info column ---- */
.pc-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;   /* image bleeds to the left/top/bottom edges; info holds its own padding */
}
.pc-photo {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 3.05;
  flex: 3.05;
  overflow: hidden;
  background: #e9edf2;
  margin-right: 1.6vw;   /* only gap kept: between the image and the details */
}
.pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  padding: 0 2.5vw 2.4vh 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
/* Top block of property details; the contact/QR sits below it (space-between).
   padding-top gives breathing room below the REF banner, above the title. */
.pc-info-main { -ms-flex: 0 0 auto; flex: 0 0 auto; padding-top: 3.6vh; }
.pc-type { font-size: 3.08vh; font-weight: bold; color: #0a2540; line-height: 1.05; letter-spacing: 0.3px; }
.pc-loc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1.4vh 0 1.8vh;
}
.pc-loc svg { height: 3.6vh; width: 3.6vh; margin-right: 0.6vw; }
.pc-loc span { font-size: 2.04vh; font-weight: bold; color: #0a2540; letter-spacing: 1px; }
.pc-price {
  background: #e2231a;
  color: #fff;
  font-size: 6vh;
  font-weight: bold;
  padding: 1vh 1.6vw;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 2.4vh;
  /* Bleed the red bar out so it touches the image (left) and the card edge
     (right): -1.6vw cancels the photo gap, -2.5vw cancels the body padding. */
  margin-left: -1.6vw;
  margin-right: -2.5vw;
}
.pc-features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.pc-feat {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 1.8vh;
}
.pc-feat svg { height: 3.6vh; width: 3.6vh; margin-right: 0.8vw; -ms-flex-negative: 0; flex-shrink: 0; }
.pc-feat span { font-size: 2.24vh; color: #0a2540; }

/* ---- Footer: energy cert + stats (left) | red contact panel (right) ---- */
.pc-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 25%;
  padding: 1.6vh 2.5vw;
}
.pc-fleft {
  -webkit-box-flex: 1;
  -ms-flex: 1.25;
  flex: 1.25;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 1.6vw;
  min-width: 0;
}
/* Energy certificate — laid out like a feature row: badge icon + label,
   icon sized the same as the Quartos/WC icons. */
.pc-energy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 1.4vh;
}
.pc-energy img { height: 3.6vh; width: auto; margin-right: 0.8vw; display: block; -ms-flex-negative: 0; flex-shrink: 0; }
.pc-energy-cap { font-size: 2.24vh; color: #0a2540; }
.pc-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid #e6e6e6;
  padding-top: 1.2vh;
}
.pc-stat {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-right: 1px solid #e6e6e6;
  padding: 0 1vw;
}
.pc-stat:last-child { border-right: 0; }
.pc-stat svg { height: 3.6vh; width: 3.6vh; margin-right: 0.7vw; -ms-flex-negative: 0; flex-shrink: 0; }
.pc-stat b { font-size: 1.9vh; color: #0a2540; display: block; letter-spacing: 0.5px; }
.pc-stat small { font-size: 1.5vh; color: #6b7785; }

/* "Scan to see more" block (no brand data yet): QR + instructions, top line */
.pc-scan {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 2vh;
  padding-top: 2.2vh;
  border-top: 1px solid #e2e6ea;
}
.pc-scan-qr {
  height: 13vh;
  width: 13vh;
  display: block;
  margin-right: 1.4vw;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.pc-scan-text { min-width: 0; }
.pc-scan-head {
  font-size: 2.16vh;
  font-weight: bold;
  color: #e2231a;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 1.4vh;
}
.pc-scan-sub {
  font-size: 1.76vh;
  font-weight: bold;
  color: #0a2540;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-transform: uppercase;
}

.pc-contact {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #e2231a;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1.6vh 1.6vw;
  border-radius: 0.5vh;
}
/* No contact/brand data yet — shrink to a compact QR card (no empty red block).
   Pinned to the bottom-right of the info column. */
.pc-contact--qronly {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 1.2vh 1.4vw;
}
.pc-contact--qronly .pc-qr { margin-left: 0; }
.pc-contact-lines {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.pc-cline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1.1vh 0;
}
.pc-cline svg { height: 3.2vh; width: 3.2vh; margin-right: 0.9vw; -ms-flex-negative: 0; flex-shrink: 0; }
.pc-cline span { font-size: 3vh; font-weight: bold; }
.pc-qr { text-align: center; margin-left: 1.4vw; -ms-flex-negative: 0; flex-shrink: 0; }
.pc-qr-top { font-size: 1.5vh; font-weight: bold; line-height: 1.15; margin-bottom: 0.6vh; }
.pc-qr img { width: 13vh; height: 13vh; display: block; background: #fff; padding: 0.5vh; border-radius: 0.4vh; }
.pc-qr-bot { font-size: 1.3vh; line-height: 1.15; margin-top: 0.6vh; }

.hidden { display: none !important; }