/* ============================================================================
   WrightHaven — Floor Plan Viewer (PE model pages)
   Dedicated section: floor tabs, large stage, full-screen zoom/pan modal.
   Scoped to [data-wh-fp-viewer]. Load with wh-fp-viewer.js.
   ========================================================================== */

/* --- Section shell — matches .fp-model__areas / features / similar rail --- */
.fp-model__plans {
  max-width: var(--container-wide, 1440px);
  width: 100%;
  margin: 0 auto var(--fp-section-gap, clamp(3.5rem, 6vw, 5rem));
  padding: 0 var(--gutter, 24px);
  box-sizing: border-box;
}

.fp-model__plans-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 1.15rem;
}

.fp-model__plans-head .whd-h2 {
  margin: 8px 0 0;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  color: var(--text-heading, #1c1a16);
  line-height: 1.15;
}

.fp-model__plans-download {
  flex-shrink: 0;
  border-radius: 0;
  text-decoration: none;
}

/* --- Floor tabs --------------------------------------------------------- */
.fp-model__plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.fp-model__plan-tabs[hidden] {
  display: none !important;
}

.fp-model__plan-tab {
  appearance: none;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--line, #DDD6CC);
  background: var(--surface-card, #FBFAF7);
  color: var(--text-body, #3d3a34);
  font-family: var(--font-sans, "Montserrat", "Poppins", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fp-model__plan-tab:hover {
  border-color: var(--whh-olive, #494F25);
  color: var(--whh-olive, #494F25);
}

.fp-model__plan-tab[aria-selected="true"] {
  background: var(--whh-olive, #494F25);
  border-color: var(--whh-olive, #494F25);
  color: #F3EEE6;
}

.fp-model__plan-tab:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 2px;
}

.fp-model__plan-tab-area {
  display: block;
  margin-top: 3px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.85;
  text-transform: none;
}

/* --- Preview stage ------------------------------------------------------ */
.fp-model__plan-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(62vh, 560px);
  /* Kept comfortably above the image cap below + padding, so a tall portrait
     plan grows the stage instead of being clipped by overflow:hidden. */
  max-height: min(84vh, 920px);
  padding: clamp(1rem, 3vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--line, #DDD6CC);
  overflow: hidden;
  cursor: zoom-in;
}

.fp-model__plan-stage:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 2px;
}

.fp-model__plan-stage img {
  display: block;
  max-width: 100%;
  /*
   * Portrait plan sheets (e.g. encino-* at 1650x2550) are height-bound, so the
   * old min(60vh, 520px) cap rendered them 336px wide inside a ~1290px stage —
   * unreadable, with most of the stage empty. Landscape sheets stay width-bound
   * and are unaffected by the raise.
   */
  max-height: min(74vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/*
 * Must outrank Elementor's global button reset:
 *   .elementor-kit-5 button { background:#9A8C57; color:#fff; font-size:18px;
 *                             font-weight:600; text-transform:uppercase;
 *                             padding:15px 20px; }
 * That selector is (0,1,1); a bare `.fp-model__plan-zoom-btn` is (0,1,0) and
 * loses, which forced 18px nowrap text into an 88px circle and spilled the
 * label outside the button. `body.whd-page` takes this to (0,2,1) and wins.
 * Every property Elementor sets has to be re-asserted here, not just size.
 */
body.whd-page .fp-model__plan-zoom-btn {
  position: absolute;
  right: clamp(12px, 2.5vw, 20px);
  bottom: clamp(12px, 2.5vw, 20px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 8px;
  border: 1px solid rgba(28, 26, 22, 0.12);
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.94);
  color: var(--text-heading, #1c1a16);
  font-family: var(--font-sans, "Montserrat", "Poppins", sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  /* wraps to "OPEN TO / ZOOM" — nowrap overflowed the circle */
  white-space: normal;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(28, 26, 22, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

body.whd-page .fp-model__plan-zoom-btn:hover {
  background: #fff;
  border-color: var(--whh-olive, #494F25);
  transform: scale(1.03);
}

body.whd-page .fp-model__plan-zoom-btn:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 3px;
}

.fp-model__plan-caption {
  margin: 12px 0 0;
  font-family: var(--font-sans, "Montserrat", "Poppins", sans-serif);
  font-size: 0.85rem;
  color: var(--text-muted, #6B6157);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .fp-model__plan-stage {
    min-height: 48vh;
    max-height: 74vh;
    padding: 12px;
  }
  .fp-model__plan-stage img {
    max-height: 64vh;
  }
  /* same specificity bump as the base rule, or the base would win here */
  body.whd-page .fp-model__plan-zoom-btn {
    width: 72px;
    height: 72px;
    font-size: 0.62rem;
  }
  .fp-model__plans-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .fp-model__plans-download {
    width: 100%;
    justify-content: center;
  }
}

/* --- Full-screen zoom modal --------------------------------------------- */
.wh-fp-zoom {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  background: rgba(28, 26, 22, 0.94);
  color: #FBF8F2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wh-fp-zoom.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wh-fp-zoom[hidden] {
  display: none !important;
}

.wh-fp-zoom__chrome {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(14px, 3vw, 24px);
  border-bottom: 1px solid rgba(251, 248, 242, 0.12);
}

.wh-fp-zoom__title {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: #FBF8F2;
  line-height: 1.2;
}

.wh-fp-zoom__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans, "Montserrat", "Poppins", sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.72);
}

.wh-fp-zoom__close {
  appearance: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(251, 248, 242, 0.28);
  background: transparent;
  color: #FBF8F2;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
}

.wh-fp-zoom__close:hover {
  background: rgba(251, 248, 242, 0.08);
  border-color: rgba(251, 248, 242, 0.5);
}

.wh-fp-zoom__close:focus-visible {
  outline: 2px solid #C3C79D;
  outline-offset: 2px;
}

.wh-fp-zoom__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(73, 79, 37, 0.18) 0%, transparent 65%),
    #161513;
}

.wh-fp-zoom__stage.is-dragging,
.wh-fp-zoom.is-zoomed .wh-fp-zoom__stage {
  cursor: grabbing;
}

.wh-fp-zoom__img {
  display: block;
  max-width: min(92%, 1200px);
  max-height: 88%;
  background: #fff;
  box-shadow: 0 28px 80px -18px rgba(0, 0, 0, 0.75);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}

.wh-fp-zoom__footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px clamp(14px, 3vw, 24px);
  border-top: 1px solid rgba(251, 248, 242, 0.12);
  font-family: var(--font-sans, "Montserrat", "Poppins", sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(251, 248, 242, 0.7);
}

.wh-fp-zoom__hint {
  margin: 0;
}

.wh-fp-zoom__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wh-fp-zoom__tabs[hidden] {
  display: none !important;
}

.wh-fp-zoom__tab {
  appearance: none;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(251, 248, 242, 0.22);
  background: transparent;
  color: rgba(251, 248, 242, 0.85);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}

.wh-fp-zoom__tab:hover {
  border-color: rgba(251, 248, 242, 0.55);
  color: #fff;
}

.wh-fp-zoom__tab[aria-selected="true"] {
  background: var(--whh-olive, #494F25);
  border-color: var(--whh-olive, #494F25);
  color: #F3EEE6;
}

.wh-fp-zoom__tab:focus-visible {
  outline: 2px solid #C3C79D;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wh-fp-zoom,
  .fp-model__plan-tab,
  .fp-model__plan-zoom-btn {
    transition: none;
  }
}