/* =========================================================
   project-details.css
   Page-specific styles for a single PROPERTY / PROJECT DETAILS
   page only. Loaded in addition to common.css, only on
   project_details.blade.php.

   Note: the source page shipped its own header/nav/drawer/footer
   markup and CSS — dropped here since it duplicates what already
   lives in common.css + partials/header.blade.php +
   partials/footer.blade.php.

   Variables are scoped to .project-details-page (rather than
   :root) so they can't leak out and change the shared header or
   footer's colors on this page — everything specific to this
   page lives inside that one wrapper in the Blade view.
   ========================================================= */

.project-details-page{
  --pd-bg:#0b0b0c;
  --pd-bg-2:#151517;
  --pd-bg-3:#1d1d20;
  --pd-line:rgba(255,255,255,.11);
  --pd-text:#f3f1ec;
  --pd-text-dim:#a6a49f;
  --pd-gold:#c9a15a;
  --pd-gold-soft:rgba(201,161,90,.16);

  background:var(--pd-bg);
  color:var(--pd-text);
}

.project-details-page h1,
.project-details-page h2,
.project-details-page h3,
.project-details-page .font-display{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:.2px;
}

.project-details-page a{color:inherit; text-decoration:none;}
.project-details-page a:hover{color:var(--pd-gold);}

/* ===== FLOATING SIDE ACTIONS ===== */
.project-details-page .float-actions{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:1020; display:flex; flex-direction:column; gap:10px;
}
.project-details-page .float-actions a{
  width:56px; height:56px; border-radius:50%;
  background:var(--pd-bg-3); border:1px solid var(--pd-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.1rem; gap:2px; color:var(--pd-text);
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.project-details-page .float-actions a span{font-size:.55rem; letter-spacing:.2px;}
.project-details-page .float-actions a:hover{transform:scale(1.08); border-color:var(--pd-gold); background:var(--pd-gold-soft); color:var(--pd-gold);}
@media (max-width:767px){ .project-details-page .float-actions{display:none;} }

.project-details-page .chat-bubble{
  position:fixed; bottom:22px; right:22px; z-index:1020;
  width:54px; height:54px; border-radius:50%;
  background:var(--pd-gold); color:#151515;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  box-shadow:0 6px 24px rgba(201,161,90,.35);
  transition:transform .3s ease;
}
.project-details-page .chat-bubble:hover{transform:scale(1.08); color:#151515;}

/* ===== HERO GALLERY ===== */
.gallery-wrap{padding-top:2.2rem;}
.gallery-main{
  position:relative; width:100%;
  aspect-ratio:16/8.4;
  border-radius:6px; overflow:hidden; background:var(--pd-bg-2);
}
.gallery-main img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .5s ease;
}
.gallery-main img.active{opacity:1;}
.gallery-main .g-slide{position:absolute; inset:0;}

.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(11,11,12,.55); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; transition:background .3s, border-color .3s;
}
.gallery-arrow:hover{background:rgba(201,161,90,.65); border-color:var(--pd-gold);}
.gallery-arrow.prev{left:16px;}
.gallery-arrow.next{right:16px;}

.gallery-counter{
  position:absolute; bottom:14px; right:16px; z-index:5;
  background:rgba(11,11,12,.6); border:1px solid rgba(255,255,255,.2);
  padding:.25rem .7rem; border-radius:20px; font-size:.78rem; letter-spacing:.4px;
}

.thumb-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px;
}
.thumb-strip .thumb{
  position:relative; aspect-ratio:16/10.2; border-radius:5px; overflow:hidden;
  cursor:pointer; border:2px solid transparent; transition:border-color .3s ease, opacity .3s ease;
  opacity:.65;
}
.thumb-strip .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb-strip .thumb.active{border-color:var(--pd-gold); opacity:1;}
.thumb-strip .thumb:hover{opacity:1;}
@media (max-width:767px){
  .thumb-strip{grid-template-columns:repeat(4,minmax(120px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;}
  .thumb-strip .thumb{scroll-snap-align:start; min-width:120px;}
}

/* ===== SECTIONS ===== */
.project-details-page .section-title{font-size:1.9rem; margin-bottom:1rem;}
.project-details-page .lede{color:var(--pd-text-dim); line-height:1.75; font-size:.98rem;}

.floorplan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.floorplan-grid .fp-item{
  background:#efece4; border-radius:6px; overflow:hidden; cursor:pointer;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.floorplan-grid .fp-item img{width:100%; height:100%; object-fit:cover;}
.floorplan-grid .fp-item:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.35);}
@media (max-width:575px){ .floorplan-grid{grid-template-columns:repeat(2,1fr);} }

.video-card{
  position:relative; border-radius:6px; overflow:hidden; cursor:pointer;
  aspect-ratio:16/8;
}
.video-card img{width:100%; height:100%; object-fit:cover; display:block;}
.video-card .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  display:flex; align-items:center; justify-content:center;
}
.play-btn{
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.7); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
  transition:transform .3s ease, background .3s ease;
}
.video-card:hover .play-btn{transform:scale(1.1); background:var(--pd-gold); border-color:var(--pd-gold); color:#151515;}

/* ===== SIDEBAR ===== */
.project-details-page .btn-outline-lux{
  border:1px solid var(--pd-text); color:var(--pd-text); border-radius:40px;
  padding:.85rem 1.4rem; font-size:.92rem; background:transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.project-details-page .btn-outline-lux:hover{background:var(--pd-text); color:var(--pd-bg);}

.project-details-page .btn-gold{
  border:1px solid var(--pd-gold); color:#151515; background:var(--pd-gold); border-radius:40px;
  padding:.75rem 1.3rem; font-size:.92rem; transition:filter .3s ease;
}
.project-details-page .btn-gold:hover{filter:brightness(1.1); color:#151515;}

.project-details-page .btn-ghost-sm{
  border:1px solid var(--pd-line); color:var(--pd-text); border-radius:40px;
  padding:.55rem 1rem; font-size:.82rem; background:transparent;
  transition:border-color .3s ease, color .3s ease;
}
.project-details-page .btn-ghost-sm:hover{border-color:var(--pd-gold); color:var(--pd-gold);}

.project-details-page .card-panel{
  background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:8px; padding:1.6rem;
}
.project-details-page .card-panel + .card-panel{margin-top:1.6rem;}
.project-details-page .panel-title{font-size:1.15rem; margin-bottom:.9rem;}
.project-details-page .panel-underline{width:44px; height:2px; background:var(--pd-gold); margin-bottom:1.2rem;}

.project-details-page .glance-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--pd-line); font-size:.88rem;
}
.project-details-page .glance-row:last-child{border-bottom:none;}
.project-details-page .glance-label{display:flex; align-items:center; gap:.55rem; color:var(--pd-text-dim); min-width:44%;}
.project-details-page .glance-label i{color:var(--pd-gold); font-size:.95rem;}
.project-details-page .glance-val{text-align:right; color:var(--pd-text);}

.project-details-page .form-control-lux{
  background:var(--pd-bg); border:1px solid var(--pd-line); color:var(--pd-text);
  border-radius:8px; padding:.7rem 1rem; font-size:.9rem;
}
.project-details-page .form-control-lux:focus{
  background:var(--pd-bg); color:var(--pd-text); border-color:var(--pd-gold);
  box-shadow:0 0 0 3px var(--pd-gold-soft);
}
.project-details-page .form-control-lux::placeholder{color:var(--pd-text-dim);}

.sticky-side{position:sticky; top:100px;}
@media (max-width:991px){
  .sticky-side{position:static; margin-top:2.5rem;}
}

/* ===== LOCATION ===== */
.map-frame{
  border-radius:6px; overflow:hidden; border:1px solid var(--pd-line); height:280px;
}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.3) invert(.92) contrast(.9);}

/* ===== TOAST ===== */
.project-details-page .lux-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--pd-bg-3); border:1px solid var(--pd-gold); color:var(--pd-text);
  padding:.85rem 1.4rem; border-radius:40px; font-size:.9rem; z-index:2000;
  opacity:0; visibility:hidden; transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
  display:flex; align-items:center; gap:.6rem;
}
.project-details-page .lux-toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.project-details-page .lux-toast i{color:var(--pd-gold);}

/* modal tweaks (Bootstrap modals render outside .project-details-page in the DOM,
   so these are NOT scoped to that wrapper — they need to apply globally on this page) */
#lightboxModal .modal-content,
#videoModal .modal-content,
#fpModal .modal-content{
  background:#151517; border:1px solid rgba(255,255,255,.11); color:#f3f1ec;
}
#lightboxModal .btn-close,
#videoModal .btn-close,
#fpModal .btn-close{filter:invert(1);}