/* 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: 360px; }
}

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

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