/* plv-project v8 — 2026-11-04 */
/* 1 — One frame for every plan.
   The viewer already centres and contains the image, but the frame itself was
   as tall as the plan list beside it, so switching from a wide floor plate to a
   tall unit plan resized the box and the drawing jumped. The box is pinned; the
   list scrolls inside it. */
.pd-page .pd-fp__body { height: 520px; }
.pd-page .pd-fp__picker { height: 100%; max-height: none; box-sizing: border-box; }
.pd-page .pd-fp__preview { height: 100%; box-sizing: border-box; overflow: hidden;
  align-items: center; justify-content: center; }
.pd-page .pd-fp__stage { width: 100%; height: 100%; box-sizing: border-box; }
.pd-page .pd-fp__stage img { max-width: 100% !important; max-height: 100% !important;
  width: auto !important; height: auto !important; object-fit: contain; margin: auto; }

@media (max-width: 900px) {
  /* stacked: the picker keeps its own scroll, the plan gets a fixed window */
  .pd-page .pd-fp__body { height: auto; }
  .pd-page .pd-fp__preview { height: 420px; }
  /* the zoom buttons sit on top; a tall plan starts under them (2026-10-20) */
  .pd-page .pd-fp__preview .pd-fp__canvas { height: 400px !important; min-height: 400px !important; max-height: 400px !important; padding-top: 58px; }
}

/* 6 — The intent switch fits one word per column.
   Three Russian words did not fit three columns of a 400px card:
   "Для инвестиции" wrapped and pushed the row 24px taller than the two beside
   it. The client's wording moves the preposition into the label — "Меня
   интересует для: жизни | инвестиций | аренды" — and the button can then
   refuse to wrap outright, which also protects the English labels. */
.pd-page .lf-seg__btn {
  padding: 0 6px;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* 7 — Design-system corrections.
   These three values were the page's standing deviation from the system:
   a navy hover one step off the token, and a press that was both shallower
   and faster than every other control on the site. */
.pd-page .pd-hero__cta--primary:hover { background: #162B47; border-color: #162B47; }
.pd-page .lf-submit:hover            { background: #162B47; }
.pd-page .pd-hero__cta,
.pd-page .lf-submit {
  transition: background 200ms cubic-bezier(.23,1,.32,1),
              color 200ms cubic-bezier(.23,1,.32,1),
              border-color 200ms cubic-bezier(.23,1,.32,1),
              box-shadow 200ms cubic-bezier(.23,1,.32,1),
              transform 140ms cubic-bezier(.23,1,.32,1);
}
.pd-page .pd-hero__cta:active,
.pd-page .lf-submit:active { transform: scale(0.97); }

/* 10 — The price gets its own line (v4, 2026-10-19).
   The client's reference: the full figure, not "฿5.39M", on its own row under
   the address, set off by a hairline. The location pill above the title went
   with it — the address under the title already says where the project is,
   so the pill row only repeated it. With both pills gone the row is empty and
   is dropped; the price row is built by the script from the same CMS number
   (data-raw), so nothing new is stored. */
.pd-page .pd-hero__meta.plv-meta-off { display: none; }
.pd-page .plv-hprice {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 2px;
  width: fit-content; min-width: min(340px, 100%); max-width: 100%;
  margin: -6px 0 26px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.42);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.pd-page .plv-hprice__lab { font-size: 16px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.86); }
.pd-page .plv-hprice__val {
  font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 767px) {
  .pd-page .plv-hprice { margin: -8px 0 20px; padding-top: 12px; min-width: min(280px, 100%); column-gap: 10px; }
  .pd-page .plv-hprice__lab { font-size: 14px; }
  .pd-page .plv-hprice__val { font-size: 24px; }
}

/* 9 — The starting price is the one number a buyer looks for in the hero,
   and it sat in the same 12%-white glass as the location next to it: on a
   bright sky both pills dissolved into the photo. It is not made bigger — it
   becomes the one solid surface in that row (the same white as the status pill
   above), with the figure in the navy accent and "from" stepped back to grey.
   Solid white reads on any frame, dark or bright, on every breakpoint. */
.pd-page .pd-hero__meta-pill:has([data-cms-field="starting-price"]),
.pd-page .pd-hero__meta-pill.plv-price {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #6F6F6F;
  text-shadow: none;              /* the hero's photo shadow smudges dark text */
  box-shadow: 0 2px 10px rgba(0,0,0,0.16);
}
.pd-page .pd-hero__meta-pill [data-cms-field="starting-price"] {
  color: #1F3A5F;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* 8 — The installment modal, brought onto the form's controls.
   It shipped with a bare native <select> for the dial code and a grey
   (#303030) focus ring, while the form beside it uses a searchable country
   panel and the navy accent. Two phone fields on one page that behave
   differently read as two different products, so the modal borrows the form's
   tokens here; the picker itself is swapped for the form's panel by the
   script below. */
.pdc-root .pc-input:focus,
.pdc-root .pc-phone:focus-within { border-color: #1F3A5F; box-shadow: 0 0 0 3px rgba(31,58,95,0.08); }

/* Chrome's autofill wash made the field look pre-filled and blue. */
.pdc-root .pc-input:-webkit-autofill,
.pdc-root .pc-phone__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: #303030;
}

.pdc-root .pc-phone { overflow: visible; }
.pdc-root .pc-phone__input { height: 46px; }
.pdc-root .pc-cc__display { border-radius: 7px 0 0 7px; background: #f8f7f4; border-right: 1px solid #d4d4d4; }
.pdc-root .pc-cc__display:hover { background: #eeeeee; }
.pdc-root .pc-cc__code { color: #1F3A5F; border-color: #d4d4d4; }
.pdc-root .pc-cc__dial { color: #1F3A5F; }
.pdc-root .pc-cc__chev { transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.pdc-root .pc-cc__chev[data-open="true"] { transform: rotate(180deg); }
.pdc-root .pc-submit { border-radius: 999px; }
.pdc-root .pc-submit:active { transform: scale(0.97); }

/* the searchable panel — same geometry as .lf-cc__panel on the form */
.pdc-root .pc-cc__panel { position: absolute; top: calc(100% + 8px); left: 0; width: 320px;
  max-width: calc(100vw - 64px); max-height: 300px; background: #fff; border: 1px solid #d4d4d4;
  border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 40; display: flex;
  flex-direction: column; overflow: hidden; animation: pd-cc-in 140ms cubic-bezier(.23,1,.32,1); }
.pdc-root .pc-cc__search { padding: 8px; border-bottom: 1px solid #d4d4d4; flex: 0 0 auto; }
.pdc-root .pc-cc__search input { width: 100%; height: 36px; border: 1px solid #c4c4c4; border-radius: 6px;
  padding: 0 10px; font: inherit; font-size: 14px; color: #303030; background: #fff; }
.pdc-root .pc-cc__search input:focus { outline: none; border-color: #1F3A5F; box-shadow: 0 0 0 3px rgba(31,58,95,0.08); }
.pdc-root .pc-cc__list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; }
.pdc-root .pc-cc__opt { appearance: none; cursor: pointer; background: transparent; border: 0; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px;
  font: inherit; font-size: 14px; color: #303030; text-align: left; transition: background 200ms cubic-bezier(.23,1,.32,1); }
.pdc-root .pc-cc__opt:hover { background: #f8f7f4; }
.pdc-root .pc-cc__opt.is-active { background: rgba(31,58,95,0.07); color: #1F3A5F; }
.pdc-root .pc-cc__opt-code { font-weight: 600; font-size: 11px; background: #f8f7f4; border: 1px solid #d4d4d4;
  border-radius: 4px; padding: 2px 6px; color: #1F3A5F; letter-spacing: 0.04em; }
.pdc-root .pc-cc__opt-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdc-root .pc-cc__opt-dial { color: #838383; font-variant-numeric: tabular-nums; font-size: 13px; }
.pdc-root .pc-cc__opt.is-active .pc-cc__opt-dial { color: #1F3A5F; }
.pdc-root .pc-cc__empty { padding: 16px 14px; color: #838383; font-size: 13px; text-align: center; }

/* 11 — One rhythm, top to bottom (2026-10-20).
   Sections sat 64px apart, but the layout opened 56px under the hero, closed
   96px above the footer, and once stacked put only 36px between the map and
   the enquiry form. All four are now the section step. */
.pd-page .pd-layout { padding-top: 64px; padding-bottom: 64px; row-gap: 64px; }

/* 12 — Plan list on phone and tablet (2026-10-20).
   Stacked, the picker grew to all 27 or 58 rows and pushed the plan itself a
   screen or more below the row that was tapped. It now shows three rows and
   the top of the fourth, scrolls inside, and the fourth row fades into white
   (the same cue as the rails on /shortlist) until the end is reached. The
   exact height is measured by the script, because a row with a spec line is
   taller; 244px is the three-and-a-half-row value for single-line rows. */
.pd-page .pd-fp__picker::after {
  content: ""; display: block; position: sticky; bottom: 0;
  height: 56px; margin-top: -56px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.86));
  opacity: 0; transition: opacity 200ms cubic-bezier(.23,1,.32,1);
}
.pd-page .pd-fp__picker.plv-more::after { opacity: 1; }
@media (max-width: 900px) {
  .pd-page .pd-fp__picker { max-height: 244px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pd-page .pd-fp__picker.plv-short { max-height: none; }
}

/* 13 — The plan image takes gestures (2026-10-20; buttons removed 2026-11-04).
   The template set the image to pointer-events:none, which also removed "Copy
   image" from the desktop menu and the long press on a phone; both stay back.
   The Copy / Download / Share buttons that sat on the plan are gone: agents
   take plans from the portal (my.prime-loft.com), the public page only shows
   them (client's decision 03.11: remove the buttons, no watermark). */
.pd-page .pd-fp__stage img,
.pd-fp__canvas.plv-fs .pd-fp__stage img {
  pointer-events: auto !important;
  -webkit-touch-callout: default !important;
}

/* 14 — Full screen on iPhone (2026-10-20).
   iPhone Safari has no element full screen, so the template's button opened
   the bare image in a new tab and lost the zoom. The canvas now covers the
   viewport itself; a tap on the plan opens it on any touch screen. */
.pd-fp__canvas.plv-fs,
.pd-page .pd-fp__preview .pd-fp__canvas.plv-fs {
  min-height: 0 !important;
  position: fixed !important; inset: 0 !important; z-index: 100000 !important;
  width: 100% !important; height: 100% !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  padding: max(64px, calc(env(safe-area-inset-top) + 56px)) 12px max(64px, calc(env(safe-area-inset-bottom) + 60px)) !important;
  background: #f8f7f4 !important; box-sizing: border-box !important;
}
.pd-fp__canvas.plv-fs .pd-fp__zoom { top: max(12px, env(safe-area-inset-top)) !important; right: 12px !important; }
html.plv-fs-lock, html.plv-fs-lock body { overflow: hidden !important; }
@media (hover: none) and (pointer: coarse) {
  .pd-page .pd-fp__canvas:not(.plv-fs) .pd-fp__stage { cursor: zoom-in; }
}

/* 15 — One finger scrolls the page (2026-10-20).
   On a phone the list and the plan together fill the screen, and the
   template's touch-action:none on the plan made it a dead zone: a swipe that
   landed on it did nothing. Inline and not zoomed, the plan now lets one
   finger scroll the page like everywhere else; two fingers still pinch
   (the script cancels the browser's scroll once a second finger is down).
   Zoomed in, or full screen, one finger moves the plan again. */
.pd-page .pd-fp__canvas:not(.plv-fs):not(.plv-zoomed) { touch-action: pan-y !important; }
.pd-page .pd-fp__canvas.plv-zoomed,
.pd-fp__canvas.plv-fs,
.pd-fp__canvas:fullscreen { touch-action: none !important; }

/* 16 — The installment popup on a phone (2026-10-20).
   It sat at z-index 200 under the site header (1000), so its top was covered,
   and its fixed overlay could not scroll: once iOS opened and closed the
   keyboard and shifted the viewport, the form was stuck with its top out of
   reach. The overlay now sits above the header and the floating widgets and
   scrolls on its own; the card is centred while it fits (auto margins) and
   simply scrolls when it does not. On phones the card is also tighter, so
   with the keyboard up most of it stays in view. */
.pc-modal-overlay {
  z-index: 10050 !important;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  align-items: flex-start !important;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}
.pc-modal-overlay .pc-modal { margin: auto !important; flex: none !important; }
@media (max-width: 600px) {
  .pc-modal-overlay .pc-modal { padding: 20px 18px 18px !important; }
  .pc-modal-overlay .pc-modal__title { font-size: 20px !important; line-height: 1.2 !important; margin: 0 36px 8px 0 !important; text-align: left !important; }
  .pc-modal-overlay .pc-modal__sub { font-size: 14.5px !important; line-height: 1.45 !important; margin: 0 0 14px !important; text-align: left !important; }
  .pc-modal-overlay .pc-field { margin-bottom: 12px !important; height: auto !important; gap: 0 !important; row-gap: 0 !important; }
  .pc-modal-overlay .pc-label { margin: 0 0 6px !important; line-height: 1.3 !important; }
  .pc-modal-overlay .pc-submit { height: 50px !important; margin-top: 4px !important; }
  .pc-modal-overlay .pc-modal__legal { font-size: 12.5px !important; line-height: 1.45 !important; margin-top: 10px !important; }
  .pc-modal-overlay .pc-modal__close { top: 14px !important; right: 12px !important; }
}