/* =============================================================================
   floorplan-widget.css  —  styles for the self-contained floor-plan widget.
   Inject / include this on the page alongside floorplan-widget.js.
   (The JS no longer injects styles; it relies on this file.)
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;300;600&family=Mulish:ital,wght@0,300;0,400;0,700;1,400&display=swap');

.fpx{
  --fpx-accent:#00455D; --fpx-ink:#0B263B; --fpx-gold:#CCAE6A;
  --fpx-teal:#265F74; --fpx-beige:#f4f0ea;
  font-family:Mulish,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--fpx-ink); box-sizing:border-box; max-width:1180px; margin:0 auto;
}
.fpx *{ box-sizing:border-box; }

/* header (optional) */
.fpx-head{ text-align:center; margin:0 0 20px; }
.fpx-head h2{ font-family:Prompt,sans-serif; font-weight:100; color:var(--fpx-accent); font-size:clamp(26px,4vw,40px); margin:0 0 6px; letter-spacing:.5px; }
.fpx-head p{ margin:0; color:#5a6b73; font-size:16px; }

/* hero (large plan): image left, info right */
.fpx-hero{ position:relative; background:var(--fpx-beige); border-radius:6px; display:flex; flex-direction:row; align-items:center; padding:30px; gap:20px; overflow:hidden; }
.fpx-hero-img{ width:58%; display:flex; align-items:center; justify-content:center; min-height:340px; }
.fpx-hero-img img{ max-width:100%; max-height:450px; object-fit:contain; transition:opacity .3s ease; }
.fpx-hero-info{ width:42%; text-align:center; padding:10px 20px; transition:opacity .3s ease; }
.fpx-name{ font-family:Prompt,sans-serif; font-weight:100; font-size:clamp(28px,3.4vw,40px); color:var(--fpx-accent); text-transform:uppercase; letter-spacing:.5px; margin:0 0 14px; }
.fpx-line{ font-weight:700; color:var(--fpx-ink); font-size:18px; margin:2px 0; }
.fpx-badge{ display:inline-block; margin:10px 0; background:#9a3b2e; color:#fff; text-transform:uppercase; letter-spacing:.08em; font-size:12px; padding:6px 12px; border-radius:4px; }
.fpx-dl{ display:inline-block; margin-top:18px; background:var(--fpx-gold); color:#fff; text-transform:uppercase; font-family:Prompt,sans-serif; font-weight:600; letter-spacing:.5px; font-size:18px; padding:16px 28px; text-decoration:none; transition:filter .15s; }
.fpx-dl:hover{ filter:brightness(.94); }

/* paging dots */
.fpx-dots{ display:flex; justify-content:center; gap:12px; margin:18px 0 6px; }
.fpx-dot{ width:14px; height:14px; border-radius:50%; border:0; background:rgba(63,139,142,.3); cursor:pointer; padding:0; transition:background .2s; }
.fpx-dot.active{ background:#3f8b8e; }

/* thumbnail strip */
.fpx-strip-wrap{ position:relative; margin-top:14px; }
.fpx-strip{ display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:6px 2px 10px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.fpx-thumb{ flex:0 0 clamp(200px,23%,260px); cursor:pointer; background:#fff; border:1px solid #ece7de; position:relative; transition:box-shadow .2s; overflow:hidden; }
.fpx-thumb.active{ box-shadow:0 0 0 2px var(--fpx-accent); }
.fpx-thumb-img{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:#fff; padding:8px; }
.fpx-thumb-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.fpx-thumb-foot{ background:var(--fpx-teal); color:#fff; padding:12px 10px; text-align:center; }
.fpx-thumb-title{ font-family:Prompt,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:14px; }
.fpx-thumb-sub{ font-style:italic; font-size:12.5px; margin-top:3px; opacity:.95; line-height:1.35; }
.fpx-plus{ display:inline-block; margin-top:8px; width:22px; height:22px; border:1px solid rgba(255,255,255,.8); border-radius:50%; position:relative; }
.fpx-plus:before,.fpx-plus:after{ content:''; position:absolute; background:#fff; top:50%; left:50%; transform:translate(-50%,-50%); }
.fpx-plus:before{ width:10px; height:1.5px; }
.fpx-plus:after{ width:1.5px; height:10px; }
.fpx-thumb.reserved .fpx-thumb-img img{ opacity:.45; filter:grayscale(.5); }
.fpx-thumb.reserved .fpx-thumb-foot{ background:#8a8a8a; }
.fpx-ribbon{ position:absolute; top:10px; left:0; background:#9a3b2e; color:#fff; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; z-index:2; }

/* strip arrows — teal at 60% opacity */
.fpx-arrow{ position:absolute; top:38%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:rgba(38,95,116,.6); color:#fff; cursor:pointer; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.15); z-index:3; transition:background .2s ease, opacity .2s ease; }
.fpx-arrow:hover{ background:rgba(38,95,116,.85); }
.fpx-arrow.prev{ left:-6px; }
.fpx-arrow.next{ right:-6px; }

@media(max-width:860px){
  .fpx-hero{ flex-direction:column; }
  .fpx-hero-img,.fpx-hero-info{ width:100%; }
  .fpx-hero-img{ min-height:220px; }
}