/* =========================================
   LEAD FORM
   ========================================= */

.mb-lead {
  width: min(760px, 100%);

  padding: 52px 54px 46px;

  border: 1px solid rgba(223, 183, 105, 0.66);
  border-radius: 12px;

  color: #f5e7ca;

  background:
    radial-gradient(
      circle at 82% 0%,
      rgba(166, 39, 53, 0.38),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #5d0b16 0%,
      #39070e 56%,
      #240408 100%
    );

  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.62);
}

.mb-lead::before {
  inset: 9px;
  border: 1px solid rgba(230, 194, 126, 0.14);
  border-radius: 8px;
}

.mb-lead__top {
  max-width: 610px;
  margin-bottom: 34px;
}

.mb-lead__eyebrow {
  margin-bottom: 10px;

  color: #d5ae63;

  font-family: var(--mb-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.mb-lead__title {
  margin: 0;

  font-family: var(--mb-serif);
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 400;
  line-height: 0.93;
  text-transform: uppercase;

  color: #f4e2bd;
}

.mb-lead__intro {
  max-width: 580px;
  margin: 17px 0 0;

  font-family: var(--mb-serif);
  font-size: 18px;
  line-height: 1.4;

  color: rgba(244, 226, 190, 0.70);
}


/* FORM */

.mb-lead-form {
  position: relative;
  z-index: 1;

  display: grid;
  gap: 25px;
}

.mb-lead-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.mb-lead-field {
  position: relative;

  display: grid;
  gap: 8px;
}

.mb-lead-field__label,
.mb-lead-group__title {
  color: rgba(244, 225, 187, 0.76);

  font-family: var(--mb-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mb-lead-field__optional {
  position: absolute;
  top: 0;
  right: 0;

  color: rgba(244, 225, 187, 0.34);

  font-family: var(--mb-sans);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.mb-lead-field__input {
  width: 100%;
  height: 54px;

  padding: 0 15px;

  border: 1px solid rgba(224, 184, 108, 0.27);
  border-radius: 5px;
  outline: none;

  color: #fff7e8;
  background: rgba(255,255,255,0.045);

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.mb-lead-field__input::placeholder {
  color: rgba(255,255,255,0.29);
}

.mb-lead-field__input:focus {
  border-color: rgba(229, 194, 125, 0.72);
  background: rgba(255,255,255,0.065);

  box-shadow:
    0 0 0 3px rgba(210, 168, 88, 0.055);
}


/* GROUPS */

.mb-lead-group {
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
}

.mb-lead-group__title {
  padding: 0;
}

.mb-lead-group__hint {
  margin-top: 5px;

  color: rgba(244, 225, 187, 0.35);

  font-family: var(--mb-serif);
  font-size: 13px;
}


/* DATE CHIPS */

.mb-lead-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 13px;
}

.mb-lead-choice {
  position: relative;
  cursor: pointer;
}

.mb-lead-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mb-lead-choice span {
  min-height: 39px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 14px;

  border: 1px solid rgba(219, 178, 99, 0.24);
  border-radius: 999px;

  color: rgba(246, 230, 198, 0.69);
  background: rgba(255,255,255,0.025);

  font-family: var(--mb-serif);
  font-size: 15px;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.mb-lead-choice input:checked + span {
  color: #2a170c;

  border-color: rgba(242, 212, 151, 0.90);

  background:
    linear-gradient(
      135deg,
      #efd69c,
      #c9974a
    );
}


/* CONTACT METHODS */

.mb-lead-methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;

  margin-top: 13px;
}

.mb-lead-method {
  position: relative;
  cursor: pointer;
}

.mb-lead-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mb-lead-method span {
  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(219, 178, 99, 0.24);
  border-radius: 5px;

  color: rgba(246, 230, 198, 0.65);
  background: rgba(255,255,255,0.025);

  font-family: var(--mb-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.mb-lead-method input:checked + span {
  color: #f5dfb1;

  border-color: rgba(218, 175, 94, 0.72);
  background: rgba(181, 126, 49, 0.15);
}


/* SUBMIT */

.mb-lead-submit {
  min-height: 57px;
  width: 100%;

  margin-top: 2px;

  border: 1px solid rgba(245, 216, 157, 0.85);
  border-radius: 5px;

  color: #29170d;

  background:
    linear-gradient(
      135deg,
      #f2dca6 0%,
      #c99b4e 50%,
      #efd397 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 10px 30px rgba(171, 119, 43, 0.17);

  font-family: var(--mb-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  cursor: pointer;
}

.mb-lead-legal {
  margin: -13px 0 0;

  text-align: center;

  color: rgba(244, 226, 190, 0.32);

  font-family: var(--mb-sans);
  font-size: 9px;
  line-height: 1.4;
}

.mb-lead-message {
  min-height: 0;

  text-align: center;

  color: #e8c982;

  font-family: var(--mb-serif);
  font-size: 15px;
}


/* MOBILE */

@media (max-width: 700px) {

  .mb-modal {
    align-items: flex-end;
  }

  .mb-lead {
    width: 100%;
    max-height: 94svh;

    padding:
      43px
      18px
      calc(25px + env(safe-area-inset-bottom));

    border-radius: 12px 12px 0 0;
  }

  .mb-lead__top {
    margin-bottom: 28px;
  }

  .mb-lead__title {
    font-size: 43px;
  }

  .mb-lead__intro {
    font-size: 16px;
  }

  .mb-lead-form {
    gap: 22px;
  }

  .mb-lead-form__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mb-lead-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .mb-lead-choice span {
    width: 100%;
    min-height: 42px;

    padding: 0 8px;

    font-size: 15px;
  }

  .mb-lead-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mb-lead-method span {
    min-height: 45px;
  }

}

@media (max-width: 380px) {

  .mb-lead__title {
    font-size: 39px;
  }

  .mb-lead {
    padding-left: 15px;
    padding-right: 15px;
  }

}


/* =========================================
   LEAD FORM MODAL SAFETY
   ========================================= */

body.mb-modal-open {
  overflow: hidden;
}

.mb-lead {
  overflow-y: auto;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(218, 175, 94, 0.44)
    transparent;
}

.mb-lead::-webkit-scrollbar {
  width: 5px;
}

.mb-lead::-webkit-scrollbar-track {
  background: transparent;
}

.mb-lead::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(218, 175, 94, 0.38);
}

.mb-lead-message:not(:empty) {
  margin-top: -5px;

  padding: 11px 14px;

  border:
    1px solid rgba(218, 175, 94, 0.22);

  border-radius: 5px;

  background:
    rgba(255,255,255,0.035);
}



/* =========================================
   LEAD FORM COMPACT V2
   ========================================= */

.mb-lead {
  width: min(640px, calc(100% - 28px));

  padding:
    38px
    40px
    34px;
}


/* HEADER */

.mb-lead__top {
  max-width: 535px;

  margin-bottom: 24px;
}

.mb-lead__eyebrow {
  margin-bottom: 8px;

  font-size: 9px;
  letter-spacing: 0.19em;
}

.mb-lead__title {
  font-size: clamp(38px, 4vw, 48px);
  line-height: 0.95;
}

.mb-lead__intro {
  max-width: 520px;

  margin-top: 12px;

  font-size: 15px;
  line-height: 1.38;
}


/* FORM RHYTHM */

.mb-lead-form {
  gap: 17px;
}

.mb-lead-form__grid {
  gap: 12px;
}

.mb-lead-field {
  gap: 6px;
}

.mb-lead-field__label,
.mb-lead-group__title {
  font-size: 9px;
  letter-spacing: 0.12em;
}

.mb-lead-field__optional {
  font-size: 8px;
}

.mb-lead-field__input {
  height: 46px;

  padding:
    0
    13px;

  font-size: 14px;
}

.mb-lead-group__hint {
  margin-top: 3px;

  font-size: 12px;
}


/* =========================================
   DATE CIRCLES
   ========================================= */

.mb-lead-dates {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 10px;
}

.mb-lead-choice {
  flex: 0 0 auto;
}

.mb-lead-choice span {
  width: 42px;
  height: 42px;
  min-height: 42px;

  padding: 0;

  border:
    1px solid rgba(219, 178, 99, 0.36);

  border-radius: 50%;

  color:
    rgba(246, 230, 198, 0.78);

  background:
    rgba(255,255,255,0.025);

  font-family: var(--mb-serif);
  font-size: 16px;
  line-height: 1;
}

.mb-lead-choice input:checked + span {
  color: #27150b;

  border-color:
    rgba(247, 220, 161, 0.95);

  background:
    linear-gradient(
      135deg,
      #f4dda5 0%,
      #c99749 100%
    );

  box-shadow:
    0 5px 16px rgba(190, 136, 57, 0.16);
}


/* =========================================
   CONTACT METHOD — COMPACT SINGLE ROW
   ========================================= */

.mb-lead-methods {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 6px;

  margin-top: 9px;
}

.mb-lead-method span {
  min-height: 36px;

  padding:
    0
    8px;

  border-radius: 4px;

  font-size: 9px;
  letter-spacing: 0.045em;
}

.mb-lead-method input:checked + span {
  color: #251309;

  border-color:
    rgba(244, 216, 157, 0.88);

  background:
    linear-gradient(
      135deg,
      #ecd08f 0%,
      #c28e3e 100%
    );
}


/* SUBMIT */

.mb-lead-submit {
  min-height: 48px;

  font-size: 11px;
}

.mb-lead-legal {
  margin-top: -9px;

  font-size: 8px;
}


/* MODAL CLOSE */

.mb-modal__close {
  top: 16px;
  right: 18px;
}


/* =========================================
   MOBILE COMPACT
   ========================================= */

@media (max-width: 700px) {

  .mb-lead {
    width: calc(100% - 16px);

    max-height: 95svh;

    padding:
      30px
      17px
      calc(20px + env(safe-area-inset-bottom));

    border-radius:
      11px
      11px
      0
      0;
  }

  .mb-lead__top {
    margin-bottom: 20px;
  }

  .mb-lead__eyebrow {
    padding-right: 34px;

    font-size: 8px;
  }

  .mb-lead__title {
    font-size: 36px;
  }

  .mb-lead__intro {
    margin-top: 9px;

    font-size: 14px;
    line-height: 1.33;
  }

  .mb-lead-form {
    gap: 16px;
  }

  .mb-lead-form__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .mb-lead-field__input {
    height: 45px;
  }


  /* Даты — компактная строка кружков */

  .mb-lead-dates {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
  }

  .mb-lead-choice span {
    width: 39px;
    height: 39px;
    min-height: 39px;

    font-size: 15px;
  }


  /* Все четыре канала — строго в один ряд */

  .mb-lead-methods {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 5px;
  }

  .mb-lead-method span {
    min-height: 36px;

    padding:
      0
      3px;

    font-size: 8px;
    letter-spacing: 0.025em;
  }

  .mb-lead-submit {
    min-height: 48px;
  }

}


@media (max-width: 380px) {

  .mb-lead {
    width: calc(100% - 10px);

    padding-left: 14px;
    padding-right: 14px;
  }

  .mb-lead__title {
    font-size: 33px;
  }

  .mb-lead-choice span {
    width: 37px;
    height: 37px;
    min-height: 37px;

    font-size: 14px;
  }

  .mb-lead-method span {
    font-size: 7.5px;
  }

}

/* =========================================
   MOBILE KEYBOARD / VISUAL VIEWPORT FIX
   ========================================= */

@media (max-width: 700px) {

  /*
   * Высоту и положение сюда передаёт
   * window.visualViewport из JS.
   *
   * Это реальная видимая область экрана
   * ПОСЛЕ появления мобильной клавиатуры.
   */
  .mb-modal {
    inset: auto 0 auto 0;

    top: var(--mb-vv-top, 0px);

    width: 100%;

    height:
      var(
        --mb-vv-height,
        100dvh
      );

    min-height: 0;

    align-items: flex-end;

    overflow: hidden;
  }


  .mb-lead {
    width: calc(100% - 12px);

    max-height:
      calc(
        var(
          --mb-vv-height,
          100dvh
        )
        - 8px
      );

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    /*
     * Когда браузер прокручивает поле
     * в область видимости, оставляем
     * запас над клавиатурой.
     */
    scroll-padding-top: 25px;
    scroll-padding-bottom: 110px;
  }


  /*
   * Убираем возможный конфликт с
   * прежним max-height: 95svh
   */
  .mb-lead {
    max-height:
      calc(
        var(
          --mb-vv-height,
          100dvh
        )
        - 8px
      ) !important;
  }

}

/* =========================================
   MODAL / STICKY CTA INTERACTION
   ========================================= */

/*
 * Sticky CTA никогда не должна лежать
 * поверх открытой формы.
 */
body.mb-modal-open .mb-sticky-cta {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(20px) !important;
}


/* Нативная ошибка браузера + состояние поля */
.mb-lead-field__input:invalid:not(:placeholder-shown) {
  border-color: rgba(231, 126, 107, 0.64);
}