/* ========================= HEADER STYLES ========================= */
/* Страница воронки: шапка и подвал сайта на ней не нужны — человек пришёл
   по рекламе и должен дойти до конца, а не уйти в разделы. Гасятся тем же
   приёмом, что на /checkout/. */
.page-get-my-store #navbar,
.page-get-my-store footer {
  display:none;
}
/* ========================= /HEADER STYLES ======================== */

/* ========================= PAGE STYLES =========================== */
/* Шрифт воронки — системный Arial, как на чекауте: страница должна
   рисоваться мгновенно, а не ждать веб-шрифта. Исключения два — знак и
   заголовок, они дисплейные. */
.page-get-my-store {
  font-family:Arial,Helvetica,sans-serif;
}

/* Подложка. У чекаута она белая, здесь — холодный отлив сверху, как на
   образце: на нём белая карточка читается предметом, а не куском фона.
   Тон взят у панели счёта чекаута (#F0F8FF), чтобы две страницы одной
   воронки были одной семьи. */
#getstore {
  min-height:100vh;
  padding:32px 0 48px;
  background:linear-gradient(180deg,#F0F8FF 0%,#FFF 420px);
}

#getstore .content {
  max-width:670px;
}

/* --- Знак ----------------------------------------------------------------- */
#getstore .gs-logo {
  margin-bottom:28px;
  text-align:center;
}

#getstore .gs-logo a {
  display:inline-block;
  font-family:Fraunces,Georgia,serif;
  font-size:32px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:#000;
  text-decoration:none;
}

#getstore .gs-logo span {
  color:#14B8A6;
}

/* --- Карточка ------------------------------------------------------------- */
#getstore .gs-card {
  padding:40px 60px 36px;
  border-radius:20px;
  background:#FFF;
  box-shadow:0 6px 20px rgba(0,23,44,.10);
}

/* Кегль 30 — как на образце. Было 26, по заголовку чекаута, но там над
   строкой стоит знак и список включённого, а здесь заголовок один на
   весь экран и держать его должен он. */
#getstore .gs-card h1 {
  margin:0 0 22px;
  font-family:"Georgia Bold",Georgia,Arial,sans-serif;
  font-size:30px;
  font-weight:normal;
  line-height:40px;
  color:#1A1E25;
  text-align:center;
}

/* --- Прогресс ------------------------------------------------------------- */
/* Полоса и подпись под ней — единственное, что говорит человеку, сколько
   ещё осталось. Заливка ровно половина: шага два, первый идёт сейчас. */
#getstore .gs-progress {
  height:6px;
  border-radius:100px;
  background:#E5E5E5;
  overflow:hidden;
}

#getstore .gs-progress-fill {
  display:block;
  width:50%;
  height:100%;
  border-radius:100px;
  background:#14B8A6;
}

#getstore .gs-step {
  margin:10px 0 26px;
  font-size:13px;
  line-height:18px;
  color:#636363;
  text-align:center;
}

/* --- Поля ----------------------------------------------------------------- */
/* Значения ровно те же, что у полей чекаута: кегль 19/28, скругление 11,
   кромка #B5B5B5, поля 19/35. Два шага одной воронки не должны
   отличаться на ощупь. */
#getstore input[type="email"],
#getstore input[type="tel"] {
  width:100%;
  padding:19px 35px;
  border:1px solid #B5B5B5;
  border-radius:11px;
  background-color:#FFF;
  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  line-height:28px;
  color:#636363;
  box-sizing:border-box;
}

#getstore input::placeholder {
  color:#C4C4C4;
  font-family:Arial,Helvetica,sans-serif;
}

#getstore input:focus,
#getstore select:focus {
  border-color:#313131;
  outline:none;
}

/* --- Почта и слот под кнопку Google ---------------------------------------
   Кнопку рисует сама библиотека Google: она вставляет в слот свой iframe,
   и ни вид, ни размеры её мы не задаём. Наше дело — место.

   На широком экране слот прижат к правому краю поля, как на образце.
   Отступ справа полю даётся не всегда, а только когда в слоте правда
   что-то появилось: класс has-google ставит скрипт. Пока библиотека не
   подключена, слот пустой — и поле занимает всю ширину, а не держит
   двести тридцать восемь точек пустоты. */
#getstore .gs-email-wrap {
  position:relative;
}

/* Селектор с #getstore не для красоты: базовое правило поля записано как
   «#getstore input[type=email]» и весит идентификатор. Без него эта
   строка не перебила бы отступ в 35 и кнопка легла бы на текст. */
#getstore .gs-email-wrap.has-google input[type="email"] {
  padding-right:238px;
}

#getstore .gs-google-slot {
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  line-height:0;
}

#getstore .gs-email-wrap:not(.has-google) .gs-google-slot {
  display:none;
}

/* --- Код страны и телефон -------------------------------------------------- */
/* Одна коробка на двоих: селект слева без правой кромки, поле справа
   подхватывает скругления. Разметка и числа — с чекаута. */
#getstore .phone-group {
  display:flex;
  margin-top:20px;
}

#getstore .phone-group .code {
  flex:0 0 155px;
  width:155px;
  padding:19px 35px 19px 24px;
  border:1px solid #B5B5B5;
  border-right:none;
  border-radius:11px 0 0 11px;
  background-color:#FFF;
  background-image:url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:20px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  color:#636363;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  box-sizing:border-box;
}

#getstore .phone-group .phone {
  border-radius:0 11px 11px 0;
}

/* Поле с ошибкой: краснеет кромка, а не фон — поле остаётся читаемым, а
   причина написана строкой под ним.

   Блок стоит ПОСЛЕ правил поля и группы телефона, а не рядом с полями:
   у «#getstore .phone-group .code» и у «#getstore .is-invalid .code» сила
   одинаковая, и при обратном порядке побеждало бы серое — у кода кромка
   оставалась бы серой, а у телефона краснела, и общая коробка читалась
   бы поломанной. */
#getstore input.is-invalid,
#getstore .phone-group.is-invalid .code,
#getstore .phone-group.is-invalid .phone {
  border-color:#F80000;
}

/* Шрифт как у подсказки об опечатке в email (js/email-typo.js): ошибки и
   подсказка стоят под полями рядом и должны читаться одинаково. */
#getstore .gs-error {
  margin:6px 0 0;
  font-size:13px;
  line-height:1.4;
  color:#F80000;
}

/* --- Кнопка --------------------------------------------------------------- */
/* Пилюля чекаута: тот же радиус 42, тот же бирюзовый, тот же вес. */
#getstore .gs-submit {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:28px;
  padding:20px 32px;
  border:0;
  border-radius:42px;
  background-color:#14B8A6;
  font-family:'Open Sans Bold',Helvetica,Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:25px;
  color:#FFF;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s;
}

#getstore .gs-submit:hover {
  background-color:#0F9B8C;
}

#getstore .gs-submit:disabled {
  background-color:#CACACA;
  cursor:default;
}

/* --- Согласия -------------------------------------------------------------- */
#getstore .agree {
  display:flex;
  align-items:flex-start;
  gap:15px;
  margin-top:18px;
  font-size:12px;
  line-height:20px;
  color:#636363;
  cursor:pointer;
}

/* Галочка нарисована своя, а не браузерная. Браузерная заливается
   бирюзовым только отмеченной (accent-color), а пустая остаётся голой
   белой рамкой — рядом с бирюзовой кнопкой и ссылками она читалась не
   частью страницы, а недогруженным элементом.

   Пустая: тот же холодный тон, что у подложки страницы, с кромкой полей.
   Отмеченная: сплошной бирюзовый с белой птицей. Разница между ними —
   и цвет, и знак внутри, то есть состояние видно, даже если человек не
   различает бирюзовый. */
#getstore .agree input[type="checkbox"] {
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin:0;
  padding:0;
  border:1px solid #B5B5B5;
  border-radius:4px;
  background-color:#F0F8FF;
  background-repeat:no-repeat;
  background-position:center;
  background-size:13px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  transition:background-color .15s,border-color .15s;
}

#getstore .agree input[type="checkbox"]:hover {
  border-color:#14B8A6;
}

#getstore .agree input[type="checkbox"]:checked {
  border-color:#14B8A6;
  background-color:#14B8A6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Обводка по клавиатуре: своя галочка теряет браузерную, а дойти до
   согласия табом человек должен. */
#getstore .agree input[type="checkbox"]:focus-visible {
  outline:2px solid #14B8A6;
  outline-offset:2px;
}

/* Заблокированное согласие. Галочка отмечена и снять её нельзя — так
   попросил заказчик, разбор и риск записаны в заметке внизу index.php.

   pointer-events снимает клик по самой галочке, но подпись рядом —
   это <label>, и клик по ней браузер переадресует на вход. Поэтому
   события гасятся у всей строки, а ссылкам на условия они возвращаются:
   уйти читать документы человек должен мочь. Курсор обычный, а не
   указательный: нажимать тут нечего, и вид не должен обещать обратное. */
#getstore .agree--locked {
  cursor:default;
  pointer-events:none;
}

#getstore .agree--locked a {
  pointer-events:auto;
  cursor:pointer;
}

#getstore .agree a {
  color:#14B8A6;
}

/* Причина под обязательной галочкой. Отступ слева тот же, что у подписи
   самой галочки (20 на квадрат + 15 на зазор), — строка встаёт под
   текстом согласия, а не под квадратом. */
#getstore .gs-error-agree {
  margin-left:35px;
}

#getstore .gs-address {
  margin:28px 0 0;
  font-size:12px;
  line-height:18px;
  color:#636363;
  text-align:center;
}

/* --- Планшет --------------------------------------------------------------- */
@media (max-width:768px) {
  #getstore {
    padding:24px 0 40px;
  }

  #getstore .gs-card {
    padding:32px 24px 28px;
  }

  #getstore .gs-card h1 {
    font-size:24px;
    line-height:32px;
  }
}

/* --- Телефон --------------------------------------------------------------- */
/* Кнопка Google уходит из поля под него во всю ширину: внутри поля ей
   остаётся меньше сотни точек, подпись туда не влезает. Так же устроен
   образец. */
@media (max-width:640px) {
  /* Слот уходит из поля под него во всю ширину: внутри поля кнопке
     остаётся меньше сотни точек. Так же устроен образец. */
  #getstore .gs-email-wrap.has-google input[type="email"] {
    padding-right:20px;
  }

  #getstore .gs-google-slot {
    position:static;
    transform:none;
    justify-content:center;
    width:100%;
    margin-top:12px;
  }

  #getstore input[type="email"],
  #getstore input[type="tel"],
  #getstore .phone-group .code {
    padding-left:20px;
    padding-right:20px;
    font-size:17px;
  }

  #getstore .phone-group .code {
    flex:0 0 118px;
    width:118px;
    padding-right:30px;
  }

  #getstore .gs-submit {
    padding-left:20px;
    padding-right:20px;
    font-size:17px;
  }
}
/* ========================= /PAGE STYLES ========================== */

/* ========================= FOOTER STYLES ========================= */
/* Подвал на этой странице не показывается — см. блок HEADER STYLES выше. */
/* ========================= /FOOTER STYLES ======================== */