/* ============================================================
   LUXURY ESCAPES — property.css  (Single Property Detail Page)
   Inherits the design system tokens defined in styles.css
   ============================================================ */

/* ─── Solid header (no hero behind the PDP) ───────────────── */
.header--solid .header__main {
  background: rgba(6, 8, 15, .94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(0, 0, 0, .4);
}
.header--solid .header__topbar {
  background: rgba(10, 16, 32, .9);
  border-bottom: 1px solid var(--border);
}

/* ─── Page wrapper ────────────────────────────────────────── */
.pdp {
  min-height: 70vh;
  padding-top: 138px;     /* clear fixed topbar + nav */
  padding-bottom: 80px;
}
@media (max-width: 860px) {
  .pdp { padding-top: 92px; }
}

/* ─── Loading skeleton ────────────────────────────────────── */
.pdp-loading { display: grid; gap: 22px; }
.pdp-skel {
  background: linear-gradient(110deg, var(--bg-card) 8%, #131d33 18%, var(--bg-card) 33%);
  background-size: 220% 100%;
  animation: pdpShimmer 1.4s linear infinite;
  border-radius: var(--radius);
}
.pdp-skel--gallery { height: 460px; }
.pdp-skel-row { display: grid; grid-template-columns: 1fr 360px; gap: 22px; }
.pdp-skel--main { height: 520px; }
.pdp-skel--side { height: 520px; }
@keyframes pdpShimmer { to { background-position: -220% 0; } }
@media (max-width: 860px) {
  .pdp-skel-row { grid-template-columns: 1fr; }
  .pdp-skel--gallery { height: 280px; }
  .pdp-skel--side { height: 320px; }
}

/* ─── Breadcrumb ──────────────────────────────────────────── */
.pdp-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: .8rem; letter-spacing: .02em;
  color: var(--text-2);
  margin-bottom: 22px;
}
.pdp-breadcrumb a { color: var(--text-2); transition: color .25s; }
.pdp-breadcrumb a:hover { color: var(--gold); }
.pdp-breadcrumb span { opacity: .5; }
.pdp-breadcrumb__current {
  color: var(--text); opacity: .85;
  max-width: 50ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Head (title + price) ────────────────────────────────── */
.pdp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: 26px;
}
.pdp-head__badge {
  display: inline-block;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px; margin-bottom: 14px;
}
.pdp-head__badge--sale { background: var(--gold-dim); color: var(--gold-2); border: 1px solid var(--border-gold); }
.pdp-head__badge--rent { background: rgba(120,170,255,.1); color: #9cc0ff; border: 1px solid rgba(120,170,255,.25); }
.pdp-head__badge--sold { background: rgba(255,90,90,.12); color: #ff9d9d; border: 1px solid rgba(255,90,90,.25); }
.pdp-head__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600; line-height: 1.12; color: var(--white);
  letter-spacing: -.01em;
}
.pdp-head__loc {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; color: var(--text-2); font-size: .95rem;
}
.pdp-head__loc svg { color: var(--gold); }
.pdp-head__price { text-align: right; flex-shrink: 0; }
.pdp-head__price strong {
  display: block;
  font-family: var(--font-cormorant);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 600; color: var(--gold-2); line-height: 1;
}
.pdp-head__price span { font-size: .9rem; color: var(--text-2); }
@media (max-width: 720px) {
  .pdp-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pdp-head__price { text-align: left; }
}

/* ─── Gallery ─────────────────────────────────────────────── */
.pdp-gallery {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 12px;
  margin-bottom: 40px;
  height: 480px;
}
.pdp-gallery__main {
  position: relative; height: 100%; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); padding: 0; cursor: none;
  background: var(--bg-card);
}
.pdp-gallery__main img,
.pdp-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.pdp-gallery__main:hover img,
.pdp-thumb:hover img { transform: scale(1.06); }
.pdp-gallery__badge {
  position: absolute; top: 16px; left: 16px;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(8px);
}
.pdp-gallery__badge--sale { background: rgba(201,168,108,.22); color: #fff; border: 1px solid var(--border-gold); }
.pdp-gallery__badge--rent { background: rgba(120,170,255,.22); color: #fff; border: 1px solid rgba(120,170,255,.3); }
.pdp-gallery__badge--sold { background: rgba(255,90,90,.25); color: #fff; }
.pdp-gallery__count {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 500; color: #fff;
  padding: 9px 14px; border-radius: 100px;
  background: rgba(6,8,15,.65); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.pdp-gallery__side {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
  height: 100%;
}
.pdp-thumb {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); padding: 0; cursor: none;
  background: var(--bg-card);
}
.pdp-thumb__more {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,15,.62); backdrop-filter: blur(3px);
  font-family: var(--font-cormorant); font-size: 1.7rem; font-weight: 600; color: #fff;
}
@media (max-width: 860px) {
  .pdp-gallery { grid-template-columns: 1fr; height: auto; }
  .pdp-gallery__main { height: 260px; }
  .pdp-gallery__side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 84px; }
}

/* ─── Two-column layout ───────────────────────────────────── */
.pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 980px) {
  .pdp-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Spec cards row ──────────────────────────────────────── */
.pdp-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 38px;
}
.pdp-spec {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 18px 18px 16px;
  background: linear-gradient(150deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pdp-spec__icon { color: var(--gold); }
.pdp-spec__icon svg { width: 22px; height: 22px; }
.pdp-spec strong {
  font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; color: var(--white);
  margin-top: 4px; line-height: 1.1;
}
.pdp-spec span { font-size: .76rem; letter-spacing: .04em; color: var(--text-2); text-transform: uppercase; }

/* ─── Content blocks ──────────────────────────────────────── */
.pdp-block { margin-bottom: 40px; }
.pdp-block__title {
  font-family: var(--font-serif);
  font-size: 1.45rem; font-weight: 600; color: var(--white);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pdp-block__title::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 48px; height: 2px; background: var(--gold);
}
.pdp-desc p { color: var(--text); margin-bottom: 14px; font-size: .98rem; line-height: 1.8; }
.pdp-desc p:last-child { margin-bottom: 0; }

/* ─── Amenities ───────────────────────────────────────────── */
.pdp-amenities {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 18px;
}
.pdp-amenities li {
  display: flex; align-items: center; gap: 11px;
  font-size: .92rem; color: var(--text);
}
.pdp-amenities li svg { color: var(--gold); flex-shrink: 0; }

/* ─── Info table ──────────────────────────────────────────── */
.pdp-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px;
}
.pdp-info__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.pdp-info__row span { color: var(--text-2); font-size: .88rem; }
.pdp-info__row strong { color: var(--white); font-weight: 500; font-size: .92rem; text-align: right; }
@media (max-width: 620px) { .pdp-info { grid-template-columns: 1fr; gap: 0; } }

/* ─── DLD verification ────────────────────────────────────── */
.pdp-dld {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  padding: 26px; border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(201,168,108,.06), rgba(10,16,32,.4));
}
.pdp-dld__qr { text-align: center; }
.pdp-dld__qr img {
  width: 132px; height: 132px; border-radius: var(--radius-sm);
  background: #fff; padding: 6px; display: block;
}
.pdp-dld__qr span { display: block; margin-top: 9px; font-size: .72rem; color: var(--text-2); }
.pdp-dld__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 12px;
}
.pdp-dld__badge svg { color: var(--gold); }
.pdp-dld__info p { font-size: .9rem; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; }
.pdp-dld__permits { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 16px; }
.pdp-dld__permits span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 3px; }
.pdp-dld__permits strong { font-size: 1.02rem; color: var(--white); letter-spacing: .02em; }
.pdp-dld__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dld-link { color: var(--gold); font-size: .88rem; font-weight: 500; transition: color .25s; }
.dld-link:hover { color: var(--gold-2); }
@media (max-width: 620px) {
  .pdp-dld { grid-template-columns: 1fr; text-align: center; }
  .pdp-dld__permits, .pdp-dld__actions { justify-content: center; }
}

/* ─── Sticky sidebar ──────────────────────────────────────── */
.pdp-sidebar { position: sticky; top: 110px; }
.pdp-cta-card {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-lg);
}
.pdp-cta-card__price { display: flex; align-items: baseline; gap: 8px; }
.pdp-cta-card__price strong {
  font-family: var(--font-cormorant); font-size: 2rem; font-weight: 600; color: var(--gold-2); line-height: 1;
}
.pdp-cta-card__price span { font-size: .88rem; color: var(--text-2); }
.pdp-cta-card__ref { font-size: .78rem; color: var(--text-2); margin-top: 6px; letter-spacing: .04em; }

.pdp-agent {
  display: flex; align-items: center; gap: 13px;
  margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pdp-agent img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-gold); }
.pdp-agent__noimg {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-dim); color: var(--gold-2); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600;
  border: 1px solid var(--border-gold);
}
.pdp-agent strong { display: block; color: var(--white); font-size: .98rem; }
.pdp-agent span { font-size: .8rem; color: var(--text-2); }

.pdp-form { display: grid; gap: 10px; margin-top: 18px; }
.pdp-form input, .pdp-form textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(6,8,15,.5); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--white); font-family: var(--font-sans); font-size: .9rem; resize: vertical;
  transition: border-color .25s, background .25s;
}
.pdp-form input::placeholder, .pdp-form textarea::placeholder { color: var(--text-2); }
.pdp-form input:focus, .pdp-form textarea:focus {
  outline: none; border-color: var(--border-gold); background: rgba(6,8,15,.7);
}
.pdp-form__submit { width: 100%; margin-top: 4px; justify-content: center; }

/* Green confirmation shown after a successful enquiry send */
.pdp-form__success {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.45);
  color: #6ee7a0;
  font-size: .9rem;
  line-height: 1.55;
  text-align: center;
}
.pdp-form__success::before {
  content: '✓';
  display: block;
  font-size: 1.4rem;
  margin-bottom: 6px;
  color: #6ee7a0;
}

.pdp-cta-card__direct { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pdp-direct-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text); font-size: .86rem; font-weight: 500;
  transition: border-color .25s, color .25s, background .25s;
}
.pdp-direct-btn:hover { border-color: var(--border-gold); color: var(--gold-2); }
.pdp-direct-btn--wa:hover { border-color: rgba(37,211,102,.5); color: #5fe28a; }

/* ─── Similar properties ──────────────────────────────────── */
.pdp-similar { margin-top: 70px; }
.pdp-similar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.pdp-similar__head .pdp-block__title { margin-bottom: 0; padding-bottom: 14px; }
.pdp-similar__all { color: var(--gold); font-size: .88rem; font-weight: 500; flex-shrink: 0; }
.pdp-similar__all:hover { color: var(--gold-2); }
.pdp-similar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .pdp-similar__grid { grid-template-columns: 1fr; } }

.pdp-sim-card {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.pdp-sim-card:hover { transform: translateY(-6px); border-color: var(--border-gold); box-shadow: var(--shadow-lg); }
.pdp-sim-card__img { position: relative; height: 200px; overflow: hidden; }
.pdp-sim-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pdp-sim-card:hover .pdp-sim-card__img img { transform: scale(1.07); }
.pdp-sim-card__badge {
  position: absolute; top: 12px; left: 12px;
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; backdrop-filter: blur(8px);
}
.pdp-sim-card__badge--sale { background: rgba(201,168,108,.22); color: #fff; }
.pdp-sim-card__badge--rent { background: rgba(120,170,255,.22); color: #fff; }
.pdp-sim-card__badge--sold { background: rgba(255,90,90,.25); color: #fff; }
.pdp-sim-card__body { padding: 18px; }
.pdp-sim-card__price { font-family: var(--font-cormorant); font-size: 1.4rem; font-weight: 600; color: var(--gold-2); }
.pdp-sim-card__price small { font-size: .8rem; color: var(--text-2); }
.pdp-sim-card__title {
  color: var(--white); font-size: .96rem; margin: 6px 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-sim-card__meta { font-size: .82rem; color: var(--text-2); }

/* ─── Unavailable / 404 ───────────────────────────────────── */
.pdp-unavailable { display: flex; justify-content: center; padding: 60px 0; }
.pdp-unavailable__inner { text-align: center; max-width: 480px; }
.pdp-unavailable__inner svg { color: var(--gold); opacity: .55; margin-bottom: 22px; }
.pdp-unavailable__inner h1 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--white); margin-bottom: 14px; }
.pdp-unavailable__inner p { color: var(--text-2); line-height: 1.7; margin-bottom: 26px; }

/* ─── Lightbox ────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
  background: rgba(4,6,12,.94); backdrop-filter: blur(8px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 88vw; max-height: 84vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.lightbox__close {
  position: absolute; top: 22px; right: 28px;
  width: 46px; height: 46px; font-size: 2rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%; cursor: none; transition: background .25s;
}
.lightbox__close:hover { background: rgba(255,255,255,.18); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; font-size: 2.2rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; cursor: none; transition: background .25s;
}
.lightbox__nav:hover { background: rgba(201,168,108,.3); }
.lightbox__nav--prev { left: 26px; }
.lightbox__nav--next { right: 26px; }
.lightbox__counter {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: .85rem; letter-spacing: .1em; color: rgba(255,255,255,.7);
}
@media (max-width: 620px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.7rem; }
  .lightbox__nav--prev { left: 10px; } .lightbox__nav--next { right: 10px; }
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — property detail page adjustments
   (most of the PDP uses design tokens that flip automatically;
   these handle the few hard-coded dark tints.)
   ════════════════════════════════════════════════════════════ */
html.theme-light .pdp-dld {
  background: linear-gradient(150deg, rgba(201,168,108,.12), rgba(255,255,255,.55));
}
html.theme-light .pdp-skel {
  background: linear-gradient(110deg, #ece6db 8%, #f7f3ec 18%, #ece6db 33%);
  background-size: 220% 100%;
}
html.theme-light .pdp-form input,
html.theme-light .pdp-form textarea {
  background: #fff; border-color: var(--ink-line); color: var(--ink);
}
html.theme-light .pdp-form input::placeholder,
html.theme-light .pdp-form textarea::placeholder { color: var(--ink-mut); }
/* gallery overlay chips & lightbox stay dark (they sit over photos) */

/* ── Light theme: give "airless" sections a proper card treatment ──
   .pdp-info (Property Information) and .pdp-amenities (Features &
   Amenities) have no background/padding of their own — on dark they
   read fine because the light text pops off the dark page, but on
   the light body they sat flush with zero breathing room. Wrap them
   like the other PDP cards (spec row, DLD block, sidebar). Also
   deepen the spec-card / sidebar surfaces so they read as distinct
   cards instead of blending into the ivory page. */
html.theme-light .pdp-info,
html.theme-light .pdp-amenities,
html.theme-light .pdp-desc {
  background: #ffffff;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
html.theme-light .pdp-info__row { border-bottom-color: var(--ink-line); }

html.theme-light .pdp-spec {
  background: #ffffff;
  box-shadow: var(--shadow);
}
html.theme-light .pdp-cta-card,
html.theme-light .pdp-sim-card {
  background: #ffffff;
  border-color: var(--ink-line);
}
html.theme-light .pdp-dld {
  background: linear-gradient(150deg, rgba(201,168,108,.1), #ffffff);
  box-shadow: var(--shadow);
}