/* ─── Шрифт Bounded (кнопка) ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Bounded';
  src: url('../assets/fonts/Bounded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bounded';
  src: url('../assets/fonts/Bounded-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bounded';
  src: url('../assets/fonts/Bounded-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Переменные — меняй под свой дизайн ─────────────────────────────────── */
:root {
  --color-primary:       #617CF6;
  --color-primary-hover: #8b9ff5;
  --color-primary-press: #495fbf;
  --color-error:         #F04949;
  --color-text:          #2A2A37;
  --color-text-soft:     #91949B;
  --color-border:        #C7C7C7;
  --color-link:          #007CFF;
  --MTS-gray:            #969FA8;

  --font-display:        'Bounded', 'Manrope', sans-serif;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html {
  min-height: 100%;
  height: 100%;
  height: -webkit-fill-available;
  font-size: 16px;
  background-color: #fff;
  font-variant-numeric: lining-nums;
}

*, *::before, *::after {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

a, img { outline: none; border: 0; }
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease-out;
}
a:hover { color: var(--color-primary); }
a, button { -webkit-tap-highlight-color: transparent; }
p { margin: 0; }

body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  line-height: 1.5;
  padding: 32px 16px 0px 16px;
  min-width: 320px;
  font-size: 14px;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  scroll-behavior: smooth;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 343px;
  max-width: 100%;
  margin: 0 auto;
}

/* ─── Logo ───────────────────────────────────────────────────────────────── */
.logo-wrap {
  text-align: center;
  margin-bottom: 50px;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  object-fit: cover;
  display: block;
  margin-bottom: 28px;
  max-width: 138px;
}

.logo-signature {
  font-size: 16px;
  color: var(--Text-Icons-Content-Primary, #1D1D1D);
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* ─── Form ───────────────────────────────────────────────────────────────── */
.form { width: 100%; }

.form-field-wrap { margin-bottom: 20px; }

.form-field {
  position: relative;
  margin-bottom: 4px;
  display: flex;
  align-items: stretch;
  height: 52px;
  border: 1px solid var(--MTS-gray, #969FA8);
  padding: 0;
  border-radius: 12px;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  font-size: 18px;
  font-weight: 700;
  color: #2E2E40;
  transition: border-color .15s ease-in-out;
}

.form-field--error { border-color: var(--color-error); }

.form-field-prefix {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #F2F3F7;
  color: var(--MTS-Black, #1D1D1D);
  font-family: 'Bounded', sans-serif;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.form-input {
  border: none;
  background-color: #fff;
  padding: 0 12px;
  font-family: 'Bounded', sans-serif;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: var(--Text-Icons-Content-Primary, #2A2A37);
  outline: none;
  width: 100%;
  min-width: 0;
}

.form-input::placeholder { color: var(--MTS-gray, #969FA8); opacity: 1; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  background: #F0022C;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  border-radius: 12px;
  padding: 16px;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
  margin-bottom: 8px;
}

.btn:not(:disabled):not(.btn-unactive):hover  { background: #d40227; }
.btn:not(:disabled):not(.btn-unactive):active { background: #b80221; }

.btn-unactive {
  cursor: default;
}

.btn:disabled {
  cursor: not-allowed;
  background: #F2F3F7;
  color: #969FA8;
}

/* Во время отправки (.btn-unactive = !submitBtnEnabled) кнопка остаётся красной:
   лоадер белый и на сером #F2F3F7 его не видно */
.btn.btn-unactive:disabled {
  background: #F0022C;
  color: #fff;
  cursor: progress;
}

.btn-secondary {
  width: 100%;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s ease-in-out;
  margin-bottom: 8px;
}

.btn-secondary:hover { border-color: var(--color-primary); }

.btn-text {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.error-label {
  color: var(--color-error);
  width: 100%;
  font-size: 14px;
}

.resend-wrap {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-soft);
  margin-top: 4px;
}

/* ─── Agreement / Footer ─────────────────────────────────────────────────── */
.footer {
  max-width: 343px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0 auto 48px;
  color: #969FA8;
}

.custom-checkbox {
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  display: inline-block;
  min-width: 20px;
  min-height: 20px;
  background-color: transparent;
  border: 1px solid var(--MTS-gray, #969FA8);
  border-radius: 4px;
  position: relative;
  top: 4px;
  margin-right: 10px;
  opacity: 0.5;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, opacity .15s ease-in-out;
}

/* Отмечен, но номер ещё не заполнен (состояние при заходе на страницу): серая заливка + белая галка */
.custom-checkbox input:checked ~ .checkmark {
  background-color: var(--MTS-gray, #969FA8);
  border-color: var(--MTS-gray, #969FA8);
  opacity: 1;
}

/* Тёмный вид — когда номер заполнен (как активная кнопка «Продолжить»); галка видна всегда при отметке */
.custom-checkbox input:checked ~ .checkmark.is-ready { background-color: #1D1D1D; border-color: #1D1D1D; }

.checkmark::after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark::after { display: block; }

.custom-checkbox-link {
  color: #007CFF;
  text-decoration: underline;
  text-decoration-color: #007CFF;
  text-underline-offset: 1px;
  transition: color .15s ease-in-out;
}

.custom-checkbox-link:hover { color: #007CFF; text-decoration-color: #007CFF; }

/* ─── Features ───────────────────────────────────────────────────────────── */
.features-list {
  padding: 0;
  list-style: none;
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 34px;
}

.features-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.features-item-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.features-item-sign {
  color: var(--Text-Tcell-Color, #141414);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Bounded', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 13px */
}

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.loader {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media screen and (max-height: 660px) {
  .logo-wrap { margin-bottom: 32px; }
  .footer    { margin-bottom: 24px; }
  .features-item-img  { width: 52px; height: 52px; }
}

@media screen and (max-height: 520px) {
  .content { justify-content: flex-start; }
}