/* =========================================================
   project-details.css  (light + dark)
   Colors follow the OS by default, or the site toggle via
   data-bs-theme / data-theme on <html>.
   ========================================================= */

/* --- Theme switch: put this in common.css if it isn't there already --- */
:root{ color-scheme: light dark; }
:root[data-bs-theme="light"], :root[data-theme="light"], :root.light,
html.light, body.light, body.light-theme { color-scheme: light; }
:root[data-bs-theme="dark"], :root[data-theme="dark"], :root.dark,
html.dark, body.dark, body.dark-theme { color-scheme: dark; }

/* Tokens. Modals render outside the page wrapper, so they get the tokens too. */
/* Tokens. Modals render outside the page wrapper, so they get the tokens too. */
.project-details-page,
#lightboxModal, #videoModal, #fpModal, #visitModal{
  --pd-bg:        light-dark(#faf8f4, #0b0b0c);
  --pd-bg-2:      light-dark(#ffffff, #151517);
  --pd-bg-3:      light-dark(#f1ece2, #1d1d20);
  --pd-line:      light-dark(rgba(20,18,14,.12), rgba(255,255,255,.11));
  --pd-text:      light-dark(#201d18, #f3f1ec);
  --pd-text-dim:  light-dark(#6c665c, #a6a49f);
  --pd-gold:      light-dark(#a9793a, #c9a15a);
  --pd-gold-soft: light-dark(rgba(169,121,58,.12), rgba(201,161,90,.16));
  --pd-on-gold:   #151515;
  --pd-shadow-gold: light-dark(rgba(169,121,58,.28), rgba(201,161,90,.35));
  --pd-shadow:      light-dark(rgba(60,45,20,.18), rgba(0,0,0,.35));
  --pd-fp-bg:     light-dark(#f4f0e6, #efece4);
  --pd-map-filter: light-dark(none, grayscale(.3) invert(.92) contrast(.9));
  --pd-close-filter: light-dark(none, invert(1));
}

/* ===== SCHEDULE A VISIT MODAL ===== */
#visitModal .modal-content{border-radius:14px; overflow:hidden;}
#visitModal .modal-header{padding:1.4rem 1.5rem .5rem;}
#visitModal .modal-body{padding:1rem 1.5rem 1.6rem;}
#visitModal .font-display{font-family:'Fraunces',serif; font-weight:500;}
#visitModal .visit-sub{color:var(--pd-text-dim);}

#visitModal .visit-progress{display:flex; gap:8px; margin-bottom:1.3rem;}
#visitModal .visit-progress .dot{
  flex:1; height:4px; border-radius:4px; background:var(--pd-line); transition:background .3s ease;
}
#visitModal .visit-progress .dot.active{background:var(--pd-gold);}

#visitModal .visit-heading{font-family:'Fraunces',serif; font-weight:500; font-size:1.2rem; margin-bottom:1.1rem;}
#visitModal .visit-label{font-size:.85rem; color:var(--pd-text-dim); margin-bottom:.6rem;}

/* option cards */
#visitModal .pref-group{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
#visitModal .pref-option{position:relative; margin:0; cursor:pointer;}
#visitModal .pref-option input{position:absolute; opacity:0; pointer-events:none;}
#visitModal .pref-card{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; padding:.9rem .4rem; text-align:center;
  background:var(--pd-bg); border:1px solid var(--pd-line); border-radius:10px;
  color:var(--pd-text); transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
#visitModal .pref-card i{font-size:1.2rem; color:var(--pd-gold);}
#visitModal .pref-card b{font-weight:500; font-size:.86rem;}
#visitModal .pref-card small{font-size:.7rem; color:var(--pd-text-dim);}
#visitModal .pref-option:hover .pref-card{border-color:var(--pd-gold); transform:translateY(-2px);}
#visitModal .pref-option input:checked + .pref-card{
  border-color:var(--pd-gold); background:var(--pd-gold-soft); box-shadow:0 0 0 1px var(--pd-gold) inset;
}
#visitModal .pref-option input:focus-visible + .pref-card{outline:2px solid var(--pd-gold); outline-offset:2px;}
@media (max-width:420px){
  #visitModal .pref-group{grid-template-columns:1fr;}
  #visitModal .pref-card{flex-direction:row; justify-content:flex-start; padding:.75rem 1rem; gap:.7rem;}
}

/* inputs + buttons (re-declared because the modal is outside .project-details-page) */
#visitModal .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;
}
#visitModal .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);
}
#visitModal .form-control-lux::placeholder{color:var(--pd-text-dim);}
#visitModal .form-control-lux.is-invalid{border-color:#d9534f;}

#visitModal .btn-gold{
  border:1px solid var(--pd-gold); color:var(--pd-on-gold); background:var(--pd-gold);
  border-radius:40px; padding:.75rem 1.3rem; font-size:.92rem; transition:filter .3s ease;
}
#visitModal .btn-gold:hover{filter:brightness(1.1); color:var(--pd-on-gold);}
#visitModal .btn-gold:disabled{opacity:.6; cursor:not-allowed;}
#visitModal .btn-ghost-sm{
  border:1px solid var(--pd-line); color:var(--pd-text); border-radius:40px;
  padding:.55rem 1.1rem; font-size:.85rem; background:transparent;
  transition:border-color .3s ease, color .3s ease;
}
#visitModal .btn-ghost-sm:hover{border-color:var(--pd-gold); color:var(--pd-gold);}

#visitModal .visit-check{display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--pd-text-dim); cursor:pointer;}
#visitModal .visit-check input{accent-color:var(--pd-gold);}

#visitModal .visit-error{
  margin-top:.9rem; padding:.55rem .8rem; border-radius:8px; font-size:.82rem;
  color:light-dark(#9b2c2c, #ffb4b4); background:light-dark(#fdecec, rgba(217,83,79,.15));
  border:1px solid light-dark(#f3c2c2, rgba(217,83,79,.4));
}
#visitModal .visit-error[hidden]{display:none;}

#visitModal .visit-success-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  background:var(--pd-gold-soft); color:var(--pd-gold); border:1.5px solid var(--pd-gold);
}
    /* ===== Privacy Policy page-specific styles ===== */
    .policy-hero {
        position: relative;
        min-height: 28vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.72) 100%
            ),
            url('/assets/img/project/Scene%202_1.png')
            center / cover no-repeat;
        color: #fff;
    }

    .policy-hero .hero-eyebrow {
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: .8rem;
      color: var(--pd-gold, #c9a24b);
      margin-bottom: .75rem;
    }
    .policy-hero h1 {
      font-weight: 700;
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: .5rem;
    }
    .policy-hero .hero-sub {
      color: rgba(255,255,255,.8);
      max-width: 640px;
      margin: 0 auto;
    }


.project-details-page{
  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:var(--pd-on-gold);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  box-shadow:0 6px 24px var(--pd-shadow-gold);
  transition:transform .3s ease;
}
.project-details-page .chat-bubble:hover{transform:scale(1.08); color:var(--pd-on-gold);}

/* ===== 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;}

/* Arrows and counter sit on top of photos, so they stay dark/white in both themes */
.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(169,121,58,.85); 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); color:#fff;
  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:var(--pd-fp-bg); border:1px solid var(--pd-line);
  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 var(--pd-shadow);}
@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:var(--pd-on-gold);}

/* ===== 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:var(--pd-on-gold); 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:var(--pd-on-gold);}

.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:var(--pd-map-filter);}

/* ===== 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);}

/* ===== MODALS (rendered outside .project-details-page, tokens declared above) ===== */
/* ===== MODALS (rendered outside .project-details-page, tokens declared above) ===== */
#lightboxModal .modal-content,
#videoModal .modal-content,
#fpModal .modal-content,
#visitModal .modal-content{
  background:var(--pd-bg-2); border:1px solid var(--pd-line); color:var(--pd-text);
}
#lightboxModal .btn-close,
#videoModal .btn-close,
#fpModal .btn-close,
#visitModal .btn-close{filter:var(--pd-close-filter);}