/* БАЗОВОЕ */
:root{
  --ink:#1F2742;
  --overlay: rgba(255,255,255,.65);
  --radius: 30px;
  --shadow-inset: 0 4px 10px rgba(6,105,178,.25) inset;
}
*{box-sizing:border-box}
body.modal-open{overflow:hidden}
.open-text{font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink)}
.open-text a{color:#0669B2;}

/* МОДАЛКА */
.modal{position:fixed; inset:0; display:none; z-index:1000;}
.modal.is-open{display:block;}
.modal__overlay{
  position:absolute; inset:0;
  background:var(--overlay);
  backdrop-filter: blur(6px);
}
.modal__window{
  position:relative;
  width:647px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);
  margin:auto; /* центрирование */
  color:var(--ink);
 
  overflow:auto;
}
.modal__close{
  position:absolute; top:14px; right:16px;
  width:32px; height:32px; border-radius:50%;
  border:none; background:#fff; color:#233; font-size:22px; line-height:32px;
  cursor:pointer; 
}
.modal__close:focus-visible{outline:2px solid #233}

/* ШАПКА */
.modal__title{
    font-weight: 700;
    font-size: 70px;
    line-height: 63px;
    letter-spacing: 0%;
    text-transform: lowercase;

  font-feature-settings: "ss06" 1;
}
.modal__subtitle{
  margin:0 0 18px; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.modal__subtitle a{color:#233; text-decoration:underline}

/* ФОРМА */
.modal__form{display:grid; gap:14px;}
.field{display:grid; gap:6px}
.field__input{
  width:100%;
  border:none;
  padding:18px 50px;
  border-radius: 999px;
 background: rgba(217, 220, 227, 0.5);
    background-blend-mode: multiply;

  color:#222248;
}
.field__input::placeholder{color:rgba(31,39,66,.65)}
.field__input:focus{outline:2px solid rgba(6,105,178,.45)}
.field--textarea .field__input{resize:vertical; min-height:146px; border-radius:30px}

/* СОГЛАСИЕ */
.agree{display:flex; align-items:flex-start; gap:10px; margin-top:4px}
.agree__check{appearance:none; width:18px; height:18px; border-radius:4px; border:1.5px solid #5F81AE; background:#fff; margin-top:3px; flex:0 0 auto; cursor:pointer}
.agree__check:checked{background:#5F81AE; box-shadow:inset 0 0 0 3px #fff}
.agree__text{font:14px/1.35 system-ui,Arial}
.agree__text a{color:#233; text-decoration:underline}

/* КНОПКА ОТПРАВКИ */
.submit{
  display:inline-flex; align-items:center; gap:14px;
  border:none; cursor:pointer;
  background:#fff; color:var(--ink);
  padding:14px 22px 14px 12px;
  border-radius: 999px;
  font:600 14px/1.1 system-ui,Arial;
  letter-spacing:.5px;
}
.submit__icon{
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:999px;
  background:rgba(6,105,178,.14);
}
.submit:hover .submit__icon{background:rgba(6,105,178,.22)}
.submit:focus-visible{outline:2px solid rgba(6,105,178,.45)}

@media (max-width:720px){
  .modal__title{font-size:36px}
  .modal__window{padding:22px}
}

/* Контейнер модалки — центрирование окна */
.modal{
  position: fixed;
  inset: 0;
  display: none;            /* по умолчанию скрыто */
  z-index: 1000;
  padding: 16px;            /* чтобы окно не прилипало к краям на маленьких экранах */
}
.modal.is-open{
  display: grid;            /* включаем грид */
  place-items: center;      /* идеальный центр по X и Y */
}

/* Подложка остаётся как была */
.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
}

/* Окно */
.modal__window{
  position: relative;
  z-index: 1;               /* поверх подложки */
  width: 647px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;           /* прокрутка, если контента много */
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);

  padding: 72px 58px 50px 58px;
}

/* Свайп-кнопка */
.swipe{
  position: relative;
  user-select: none;
  height: 71px;
  border-radius: 999px;
  background: #D9DCE380;              /* полупрозрачный трек */
  display: grid;
  align-items: center;
  overflow: hidden;
  cursor: grab;
}
.swipe:active{cursor: grabbing;}
.swipe__label{
  pointer-events: none;
  text-align: center;
  font: 600 14px/1 system-ui, Arial, sans-serif;
  letter-spacing: .5px;
  color: #1F2742;
  opacity: .95;
}
.swipe__knob{
  position: absolute;
  top: 50%; transform: translate(0,-50%);
  left: 8px;                           /* старт у левого края */
  width: 55px; height: 55px;
  border-radius: 999px;
  background: #ADC0D8;                 /* круг */
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: background .2s ease;
  touch-action: none;          /* даёт drag без скролла на тачах */
  will-change: transform;      /* плавность */
  user-select: none;
}
.swipe__knob svg{display:block}
.swipe--success{background: #ADC0D8;}   /* короткий фидбек после отправки */
.swipe--disabled{opacity:.6; pointer-events:none}

/* На маленьких экранах чуть меньше отступ слева */
@media (max-width: 480px){
  .swipe__knob{left:6px}
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.modal__window .swipe-btn__track{
    background: #D9DCE380;
}
.modal__window  .swipe-btn__handle {
    background: #ADC0D8;
    color: #fff;
}
.modal__window .swipe-btn__label {
    padding-top: 24px;
    color: #222248;
    font-weight: 300;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
}

.modal__window .qcheck-flex .wpcf7-list-item-label {
    color: #222248;
}
.modal__window .qcheck-flex .wpcf7-list-item-label a {
    color: #222248;
    text-decoration: underline;
}
.modal__window  .qcheck-flex input[type=checkbox] {
        border: 1px solid #222248;
}
.modal__window .qcheck-flex input[type=checkbox]::before {
    background: #222248;;
}

.modal__window .qcheck-flex input[type=checkbox] {
    width: 28px;
}

.modal__window .qcheck-flex {
    margin-top: -10px;
    margin-bottom: -30px;
}

@media (max-width:720px){
  .modal__window {
    padding: 20px 15px;
    width: calc(100% - 20px);
  }
  .modal__window .swipe-btn__label {
    font-size: 13px;
  }
  .modal__window .qcheck-flex input[type=checkbox] {
    width: 42px;
  }
  .modal__window .swipe-btn__label {
    padding-inline: 84px;
  }
  .modal__form  {
    gap: 5px;
  }
}