/* =====================================================================
   YPONTON.RU — страница «Контакты» (page-contacts.php).
   Hi-fi по ТЗ design_handoff_contacts. Всё scoped под .yp-contacts-page.
   Токены — локальные (чтобы не зависеть от глобальных стилей темы).
   ===================================================================== */

/* --- нейтрализация обёртки темы только на этой странице (page-id 1911) --- */
/* Контент по ширине шапки: #content = контейнер шапки (max 1590, боковой отступ 45px), pb=0 (стык с подвалом). */
.page-id-1911 #content.site-content{ max-width:1590px !important; padding:0 45px !important; margin-left:auto !important; margin-right:auto !important; background:#fff; overflow:visible !important; }
.page-id-1911 .site-content-inner{ display:block !important; padding:0 !important; }
.page-id-1911 .site-content-inner > aside,
.page-id-1911 #secondary,
.page-id-1911 .sidebar{ display:none !important; }
.page-id-1911 #primary.content-area,
.page-id-1911 #main.site-main{ width:100% !important; max-width:none !important; float:none !important; padding:0 !important; margin:0 !important; }
.page-id-1911 .block-after-site{ display:none !important; }
/* Бесшовный стык секции «моря» с подвалом: футер — сплошной #0d1c33 (= конец градиента
   секции), без границ/теней/градиента/margin на стыке. #content и футер уже вплотную (зазор 0),
   «воздух» перед подвалом даёт padding-bottom .ypc-pontoon (внутри тёмного градиента). */
.page-id-1911 .site-footer-container,
.page-id-1911 .site-footer{ background:#0d1c33 !important; background-image:none !important; border-top:0 !important; box-shadow:none !important; }
/* тема делает футер position:absolute (sticky-footer) → на этой стр. возвращаем в поток,
   чтобы он шёл сразу за секцией «моря» вплотную, без наложения и без margin-хака */
.page-id-1911 .site-footer-container{ position:relative !important; margin-top:0 !important; }
/* full-bleed секции «моря» не даёт горизонтальный скролл; margin-bottom:0 — плагин (Chaty)
   вешает на body инлайн margin-bottom → пустое место под футером, снимаем */
.page-id-1911{ overflow-x:hidden; margin-bottom:0 !important; }
@media (max-width:900px){
  .page-id-1911 #content.site-content{ padding:0 16px !important; }
}

/* --- база --- */
.yp-contacts-page{
  --navy:#11233f;
  --navy-deep:#0d1c33;
  --orange:#f78e1f;
  --orange-hover:#e07e12;
  --orange-dark:#c9761a;
  --text:#3f4a5c;
  --muted:#6b7688;
  --faint:#8a93a2;
  --border:#e6eaf0;
  --border-ctrl:#d7dde5;
  --font-ui:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Manrope', 'Onest', system-ui, -apple-system, sans-serif;

  font-family:var(--font-ui);
  color:var(--navy);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.yp-contacts-page *,
.yp-contacts-page *::before,
.yp-contacts-page *::after{ box-sizing:border-box; }
.yp-contacts-page a{ text-decoration:none; }

/* eyebrow (надзаголовок) */
.ypc-eyebrow{ display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; }
.ypc-eyebrow__sq{ width:9px; height:9px; background:var(--orange); flex-shrink:0; }
.ypc-eyebrow__t{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.ypc-eyebrow--dark .ypc-eyebrow__t{ color:#9fb2cf; }

/* ============ СЕКЦИЯ 1 ============ */
/* горизонтальный отступ даёт контейнер (#content 45px) → у секции 0 по бокам */
.ypc-band{ padding:72px 0 68px; }
.ypc-h1{ margin:0 0 46px; font-size:62px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--navy); }

.ypc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }

/* левая колонка */
.ypc-intro{ margin:0 0 34px; max-width:440px; font-family:var(--font-body); font-size:18px; line-height:1.6; color:var(--text); }
.ypc-address{ display:inline-block; font-size:23px; font-weight:800; color:var(--navy); line-height:1.25; margin-bottom:6px; transition:color .15s ease; }
.ypc-address:hover{ color:var(--orange-dark); }
.ypc-hours{ font-family:var(--font-body); font-size:16px; color:var(--muted); margin-bottom:30px; }
.ypc-line{ display:block; font-size:23px; font-weight:800; color:var(--navy); transition:color .15s ease; }
.ypc-phone{ margin-bottom:22px; }
.ypc-email{ margin-bottom:36px; word-break:break-word; }
.ypc-line:hover{ color:var(--orange-dark); }

.ypc-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:11px; }
.ypc-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.ypc-pill{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px;
  border:1.5px solid var(--border-ctrl); background:#fff; color:var(--navy); font-size:14px; font-weight:700;
  transition:border-color .15s ease, color .15s ease; }
.ypc-pill svg{ flex-shrink:0; }
.ypc-pill--tg:hover{ border-color:#2ba1e0; }
.ypc-pill--wa:hover{ border-color:#25d366; }
.ypc-pill--max{ }
.ypc-pill--max svg{ fill:#7c4dff; }
.ypc-pill--max:hover{ border-color:#7c4dff; }

.ypc-socs{ display:flex; gap:12px; }
.ypc-soc{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px;
  background:var(--navy); color:#fff; transition:background .15s ease; }
.ypc-soc--vk:hover{ background:#0077ff; }
.ypc-soc--ok:hover{ background:#ee8208; }

/* правая колонка — форма */
/* форма-карточка поднята к уровню H1 (высота H1 62 + отступ 46 = 108px) → заполняет верх справа */
.ypc-formwrap{ scroll-margin-top:120px; margin-top:-108px; }
.ypc-card{ padding:38px 38px 40px; border:1px solid var(--border); border-radius:22px; background:#fff;
  box-shadow:0 18px 50px rgba(17,35,63,.10); }
.ypc-card__t{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:28px; }

.ypc-note{ margin:0 0 22px; padding:12px 16px; border-radius:12px; font-size:14px; font-weight:600; }
.ypc-note--ok{ background:#e7f6ec; color:#1b8a4b; }
.ypc-note--err{ background:#fdecec; color:#c0392b; }

.ypc-fields{ display:flex; flex-direction:column; gap:26px; }
/* .yp-contacts-page-префикс поднимает специфичность (0,2,0) выше темы input[type=…] (0,1,1),
   иначе тема рисует полный бордер-«коробку» вместо подчёркивания */
.yp-contacts-page .ypc-uline{ width:100%; border:none; border-bottom:1.5px solid var(--border-ctrl); background:transparent;
  padding:12px 2px; font-size:17px; color:var(--navy); font-family:var(--font-ui); border-radius:0; box-shadow:none;
  transition:border-color .18s ease; -webkit-appearance:none; appearance:none; }
.yp-contacts-page .ypc-uline::placeholder{ color:var(--faint); opacity:1; }
.yp-contacts-page .ypc-uline:focus{ outline:none; border:none; border-bottom:1.5px solid var(--orange); box-shadow:none; }
.yp-contacts-page .ypc-textarea{ height:200px; resize:none; font-family:var(--font-body); line-height:1.5; }

.ypc-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.ypc-consent{ display:flex; align-items:flex-start; gap:11px; margin:26px 0 24px; cursor:pointer; }
.ypc-consent input{ width:19px; height:19px; margin:2px 0 0; accent-color:var(--orange); flex-shrink:0; }
.ypc-consent span{ font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--muted); }
.ypc-consent a{ color:var(--orange-dark); font-weight:600; }
.ypc-consent a:hover{ text-decoration:underline; }

.ypc-submit{ height:54px; padding:0 40px; border:none; border-radius:13px; background:var(--orange);
  color:#fff; font-size:16px; font-weight:700; cursor:pointer; font-family:var(--font-ui);
  transition:background .18s ease; }
.ypc-submit:hover{ background:var(--orange-hover); }

/* ============ СЕКЦИЯ 2 — понтон на воде ============ */
/* секция «Как нас найти» — на всю ширину экрана (full-bleed) + стык с подвалом (без нижнего отступа) */
.ypc-sea{ position:relative; padding:76px 0 0; overflow:hidden; scroll-margin-top:90px;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:linear-gradient(180deg,#1b3053 0%, #16294a 42%, #0d1c33 100%); }

/* «блики волн» убраны по просьбе клиента */
.ypc-ripple{ display:none !important; }

.ypc-sea__head{ position:relative; z-index:3; text-align:center; margin-bottom:56px; padding:0 45px; }
.ypc-sea__head .ypc-eyebrow{ margin-bottom:16px; }
.ypc-h2{ margin:0 0 10px; font-size:50px; font-weight:800; line-height:1; letter-spacing:-.02em; color:#fff; }
.ypc-sea__sub{ margin:0 auto; max-width:40%; font-family:var(--font-body); color:#ffffff; font-size:20px; font-weight:500; }

/* понтон = контейнер шапки/футера (max 1590, боковой отступ 45px) → карта по границам контента */
.ypc-pontoon{ position:relative; width:auto; max-width:1590px; margin:0 auto; padding:0 45px 96px; }

.ypc-pontoon__refl{ position:absolute; left:50%; bottom:36px; transform:translateX(-50%); width:76%; max-width:1200px; height:56px;
  border-radius:50%; background:radial-gradient(ellipse at center, rgba(120,170,220,.22), transparent 70%); filter:blur(8px); z-index:0; }

.ypc-float{ position:absolute; bottom:60px; width:20%; max-width:320px; height:70px; border-radius:999px;
  background:linear-gradient(180deg,#454b55 0%, #23272e 55%, #14171c 100%); box-shadow:0 26px 40px rgba(0,0,0,.45); z-index:1; }
.ypc-float--l{ left:10%; }
.ypc-float--r{ right:10%; }
.ypc-float__hl{ position:absolute; top:9px; left:26px; right:26px; height:8px; border-radius:999px; background:rgba(255,255,255,.14); }

.ypc-frame{ position:absolute; left:70px; right:70px; bottom:96px; height:30px; border-radius:8px;
  background:linear-gradient(180deg,#3a424e 0%, #262c35 100%); box-shadow:0 8px 18px rgba(0,0,0,.35); z-index:2; }
.ypc-frame__hl{ position:absolute; top:6px; left:20px; right:20px; height:3px; border-radius:2px; background:rgba(255,255,255,.16); }

.ypc-deck{ position:relative; z-index:4; padding:18px; border-radius:14px;
  background:repeating-linear-gradient(90deg, #6f4322 0px, #6f4322 1px, #83552e 1px, #83552e 3px, #7a4c28 3px, #7a4c28 24px);
  box-shadow:0 34px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.ypc-bracket{ position:absolute; width:22px; height:22px; border-radius:5px;
  background:linear-gradient(135deg,#4a525f,#252b34); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); z-index:2; }
.ypc-bracket--tl{ top:8px; left:8px; }
.ypc-bracket--tr{ top:8px; right:8px; }
.ypc-bracket--bl{ bottom:8px; left:8px; }
.ypc-bracket--br{ bottom:8px; right:8px; }

.ypc-map{ position:relative; border-radius:6px; overflow:hidden; height:560px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); background:#eaf0f6; }
.ypc-map__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

.ypc-map__plate{ position:absolute; top:18px; left:18px; z-index:2; display:flex; align-items:center; gap:11px;
  padding:12px 16px; background:#fff; border-radius:12px; box-shadow:0 18px 50px rgba(17,35,63,.14); max-width:calc(100% - 36px); }
.ypc-map__pin{ display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:10px; background:var(--orange); color:#fff; flex-shrink:0; }
.ypc-map__plate-t{ font-size:14px; font-weight:800; color:var(--navy); }
.ypc-map__plate-d{ font-family:var(--font-body); font-size:13px; color:var(--muted); }

.ypc-map__legend{ position:absolute; top:18px; right:18px; z-index:2; padding:12px 16px; background:#fff;
  border-radius:12px; box-shadow:0 18px 50px rgba(17,35,63,.14); }
.ypc-map__leg{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--navy); }
.ypc-map__leg + .ypc-map__leg{ margin-top:8px; }
.ypc-map__leg-line{ width:20px; height:4px; border-radius:2px; flex-shrink:0; }
.ypc-map__leg-line--o{ background:var(--orange); }
.ypc-map__leg-line--n{ background:#4b81e8; }

.ypc-map__btn{ position:absolute; left:18px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 20px; border-radius:13px; background:var(--orange); color:#fff; font-size:15px; font-weight:700;
  box-shadow:0 18px 50px rgba(17,35,63,.14); transition:background .18s ease; }
.ypc-map__btn:hover{ background:var(--orange-hover); color:#fff; }

/* ============ АДАПТИВ ============ */
@media (max-width:900px){
  .ypc-band{ padding:40px 0 36px; }
  .ypc-h1{ font-size:40px; margin-bottom:32px; }
  .ypc-grid{ grid-template-columns:1fr; gap:40px; }
  .ypc-formwrap{ margin-top:0; }
  .ypc-card{ padding:28px 22px 30px; }
  .yp-contacts-page .ypc-textarea{ height:130px; }

  .ypc-sea{ padding:52px 16px 0; }
  .ypc-h2{ font-size:34px; }
  .ypc-sea__head{ margin-bottom:36px; padding:0; }
  .ypc-sea__sub{ max-width:100%; font-size:16px; }
  .ypc-pontoon{ width:100%; max-width:100%; padding:0 0 70px; }
  .ypc-float{ width:34%; height:52px; bottom:44px; }
  .ypc-float--l{ left:6%; }
  .ypc-float--r{ right:6%; }
  .ypc-frame{ left:12px; right:12px; bottom:70px; height:22px; }
  .ypc-deck{ padding:12px; }
  .ypc-map{ height:340px; }
  .ypc-map__legend{ display:none; }
  .ypc-map__plate{ padding:10px 13px; }
}

@media (max-width:520px){
  .ypc-h1{ font-size:32px; }
  .ypc-line, .ypc-address{ font-size:20px; }
  .ypc-map{ height:300px; }
  .ypc-map__btn{ height:40px; padding:0 16px; font-size:14px; }
  .ypc-float{ height:44px; bottom:38px; }
  .ypc-frame{ bottom:60px; }
}

/* печать: карта-заглушка ни к чему, но пусть базово рендерится */
@media print{
  .yp-contacts-page{ background:#fff; }
  .ypc-sea{ background:none !important; color:#11233f; }
  .ypc-h2, .ypc-eyebrow--dark .ypc-eyebrow__t, .ypc-sea__sub{ color:#11233f !important; }
}