/* ===== Light UI (scoped) ===== */
.property-page{
  --bg: #f8fafc;
  --surface: #fff;
  --muted: #4b5563;
  --text: #1e293b;
  --text-dim: #64748b;
  --primary: #2563eb;
  --border: rgba(0,0,0,.08);
  --shadow: 0 10px 25px rgba(0,0,0,.05);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji;
  color: var(--text);
  background: var(--bg);
  padding-bottom: 80px;
}

/* container в собственном неймспейсе */
.property-page .pp-container{ max-width:1200px; margin:48px auto; padding: 0 24px; }

/* HERO */
.property-page .pp-hero{
  position:relative; background-size:cover; background-position:center;
  padding: 140px 24px 100px; isolation:isolate;
}
.property-page .pp-hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.05), rgba(255,255,255,.9) 80%);
  z-index:-1;
}
.property-page .pp-title{ font-size:clamp(36px,4vw,56px); font-weight:800; margin:0 0 10px; color:var(--text); }
.property-page .pp-price{ font-size:clamp(16px,1.8vw,20px); color:var(--text-dim); margin:4px 0 0; }
.property-page .pp-cta{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

/* Buttons */
.property-page .pp-btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:12px; padding:12px 18px; font-weight:600; text-decoration:none;
  border:1px solid var(--border); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.property-page .pp-btn:hover{ transform:translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.property-page .pp-btn--primary{ background:var(--primary); color:#fff; border-color:transparent; }
.property-page .pp-btn--whatsapp{ background:#25D366; color:#fff; border-color:transparent; }
.property-page .pp-btn--sm{ padding:8px 12px; border-radius:10px; font-size:13px; }

/* === Sticky WhatsApp: фон на всю ширину + контент по центру === */
.property-page .pp-sticky-fixed{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;                    /* JS выставляет реальную высоту хедера */
  height: 56px;
  z-index: 10010;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}

/* полоса фона на всю ширину экрана */
.property-page .pp-sticky-fixed::before{
  content: "";
  position: absolute;
  inset: 0;                 /* top/right/bottom/left: 0 */
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* когда показываем */
.property-page .pp-sticky-fixed.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* внутренняя «строка» с контентом по центру */
.property-page .pp-sticky__inner{
  position: relative;       /* выше псевдоэлемента ::before */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  background: transparent;  /* фон на обёртке, не тут */
  border: 0;
  border-radius: 0;
}

/* заголовок в строке */
.property-page .pp-sticky__title{
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}



/* Gallery */
.property-page .pp-gallery{
  display:grid; grid-template-columns:repeat(12,1fr); gap:14px;
}
.property-page .pp-gallery img{
  width:100%; height:100%; object-fit:cover; border-radius:14px; aspect-ratio:4/3;
  box-shadow: var(--shadow); border:1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.property-page .pp-gallery img:hover{ transform:translateY(-3px) scale(1.01); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.property-page .pp-gallery img:nth-child(1){ grid-column:span 6; aspect-ratio:16/9; }
.property-page .pp-gallery img:nth-child(2){ grid-column:span 3; }
.property-page .pp-gallery img:nth-child(3){ grid-column:span 3; }
@media (max-width:1024px){
  .property-page .pp-gallery{ grid-template-columns:repeat(8,1fr); }
  .property-page .pp-gallery img:nth-child(1){ grid-column:span 8; }
}
@media (max-width:640px){
  .property-page .pp-gallery{ grid-template-columns:repeat(2,1fr); }
  .property-page .pp-gallery img{ aspect-ratio:16/11; }
  .property-page .pp-gallery img:nth-child(1){ grid-column:span 2; }
}

/* Info */
.property-page .pp-info{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:22px; box-shadow: var(--shadow);
}
.property-page .pp-info ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.property-page .pp-info li{ display:flex; gap:10px; align-items:flex-start; border:1px dashed var(--border); padding:12px 14px; border-radius:12px; }
.property-page .pp-info strong{ color:var(--primary); min-width:110px; }

/* Description */
.property-page .pp-desc{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:26px; box-shadow: var(--shadow);
  line-height:1.8; font-size:1.05rem; color:var(--text);
}
.property-page .pp-desc h3{ margin:18px 0 10px; color:var(--primary); }
.property-page .pp-desc p{ margin:0 0 12px; }

/* Plans */
.property-page .pp-plans h2,
.property-page .pp-faq h2,
.property-page .pp-master h2{ text-align:center; color:var(--primary); }
.property-page .pp-plans__grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr); }
.property-page .pp-plan{
  grid-column:span 4; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:16px; box-shadow: var(--shadow); text-align:center;
}
.property-page .pp-plan h3{ margin:4px 0 10px; font-size:1rem; color:var(--muted); }
.property-page .pp-plan img{ width:100%; border-radius:12px; border:1px solid var(--border); }
@media (max-width:900px){ .property-page .pp-plan{ grid-column:span 6; } }
@media (max-width:600px){ .property-page .pp-plan{ grid-column:span 12; } }

/* Masterplan */
.property-page .pp-master{ text-align:center; }
.property-page .pp-master img{
  width:100%; max-width:1000px; border-radius:16px; border:1px solid var(--border); box-shadow: var(--shadow);
}
.property-page .pp-master p{ color:var(--text-dim); }

/* FAQ (accordion) */
.property-page .pp-accordion .pp-acc{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:10px; box-shadow: var(--shadow);
}
.property-page .pp-accordion summary{ list-style:none; cursor:pointer; font-weight:600; outline:none; }
.property-page .pp-accordion summary::-webkit-details-marker{ display:none; }
.property-page .pp-accordion .pp-acc[open] summary{ color:var(--primary); }
.property-page .pp-acc__content{ color:var(--text-dim); padding-top:8px; }

/* Sticky поверх контента и под админбаром */
.property-page .pp-sticky-fixed{
  z-index: 10010; /* выше всего контента темы */
}

/* Лайтбокс — кнопки всегда в рамках оверлея и по центру */
.property-page .pp-lightbox{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  z-index: 10020; /* поверх sticky */
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.property-page .pp-lightbox[aria-hidden="false"]{ opacity:1; pointer-events:auto; }

.property-page .pp-lb__fig{ position: relative; margin:0; max-width:min(92vw, 1400px); max-height:86vh; display:flex; }
.property-page .pp-lb__fig img{ width:auto; height:auto; max-width:100%; max-height:86vh; border-radius:12px; }

.property-page .pp-lb__prev,
.property-page .pp-lb__next{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,.95); color:#111; border:0; width:42px; height:42px;
  border-radius:10px; font-size:28px; cursor:pointer;
}
.property-page .pp-lb__prev{ left:24px; }
.property-page .pp-lb__next{ right:24px; }

.property-page .pp-lb__close{
  position:absolute; top:20px; right:20px;
  background: rgba(255,255,255,.95); color:#111; border:0; width:40px; height:40px;
  border-radius:10px; font-size:26px; cursor:pointer;
}


/* На тач-устройствах дадим чуть больше отступа сверху для кнопки закрытия */
@media (hover:none){
  .property-page .pp-lb__close{ top: 12px; right: 12px; }
}

/* === Global lightbox (mounted to <body>) === */
.pp-lightbox{
  position: fixed; top:0; right:0; bottom:0; left:0; /* избегаем inset для старых браузеров/поломанных контекстов */
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.78);
  z-index: 10020;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.pp-lightbox[aria-hidden="false"]{ opacity:1; pointer-events:auto; }

.pp-lb__fig{ position:relative; margin:0; max-width:min(92vw, 1400px); max-height:86vh; display:flex; }
.pp-lb__fig img{ width:auto; height:auto; max-width:100%; max-height:86vh; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.5); }

.pp-lb__prev, .pp-lb__next{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,.95); color:#111; border:0; width:42px; height:42px;
  border-radius:10px; font-size:28px; cursor:pointer;
}
.pp-lb__prev{ left:24px; } .pp-lb__next{ right:24px; }

.pp-lb__close{
  position:absolute; top:20px; right:20px;
  background: rgba(255,255,255,.95); color:#111; border:0; width:40px; height:40px;
  border-radius:10px; font-size:26px; cursor:pointer;
}

body.pp-lb-open{ overflow:hidden; }
