/* ============================================================
   СТИЛИ ПОП-АПОВ И ФОРМ — MEBEL LITE
   Вставить в: Настройки сайта → Вставка кода → Пользовательские
   CSS-стили → «Редактировать CSS». Копировать целиком, как есть.
   Формы остаются нативными формами Тильды — меняется только вид.
   ============================================================ */

/* ===================== ПЕРЕМЕННЫЕ ===================== */
:root{
  --ml-o:#FFAD45;      /* акцент */
  --ml-oh:#FF9B1F;     /* акцент при наведении */
  --ml-tint:#FFF6EA;   /* светлая заливка акцента */
  --ml-ink:#000;       /* заголовки */
  --ml-txt:#4A4A4A;    /* основной текст */
  --ml-mut:#8C8579;    /* подписи */
  --ml-line:#E6E1DA;   /* рамки */
  --ml-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

/* ===================== ОКНО ПОП-АПА ===================== */
.t-popup__container{
  border-radius:20px!important;
  padding:40px 40px 34px!important;
  max-width:520px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
}
.t-popup{background:rgba(22,21,19,.55)!important}

/* крестик закрытия */
.t-popup__close-icon,.t-popup__close{opacity:.75}
.t-popup__close-icon:hover{opacity:1}

/* ===================== ЗАГОЛОВОК И ПОДВОДКА ===================== */
.t-popup .t-name_xl,.t-popup .t-title,.t-popup .t-heading{
  font-family:var(--ml-font)!important;
  font-size:26px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  color:var(--ml-ink)!important;
  margin-bottom:10px!important;
}
.t-popup .t-descr,.t-popup .t-text{
  font-family:var(--ml-font)!important;
  font-size:15.5px!important;
  line-height:1.6!important;
  color:var(--ml-mut)!important;
}

/* ===================== ПОЛЯ ВВОДА ===================== */
.t-popup .t-input,
.t-popup input.t-input,
.t-popup textarea.t-input,
.t-popup select.t-input{
  font-family:var(--ml-font)!important;
  font-size:16px!important;
  color:var(--ml-ink)!important;
  background:#fff!important;
  border:1.5px solid var(--ml-line)!important;
  border-radius:10px!important;
  height:56px!important;
  padding:0 16px!important;
  box-shadow:none!important;
  transition:border-color .16s ease, box-shadow .16s ease!important;
}
.t-popup textarea.t-input{height:auto!important;min-height:104px!important;padding:15px 16px!important}
.t-popup .t-input::placeholder{color:#A8A196!important;opacity:1!important}
.t-popup .t-input:focus{
  outline:none!important;
  border-color:var(--ml-o)!important;
  box-shadow:0 0 0 3px rgba(255,173,69,.18)!important;
}
.t-popup .t-input-group{margin-bottom:12px!important}
.t-popup .t-input-title{
  font-family:var(--ml-font)!important;
  font-size:13.5px!important;font-weight:600!important;
  color:var(--ml-mut)!important;margin-bottom:6px!important;
}

/* подсветка ошибки */
.t-popup .t-input-block .t-input_error,
.t-popup .t-input.t-input_error{border-color:#C0492F!important;box-shadow:none!important}
.t-popup .t-input-error{
  font-family:var(--ml-font)!important;font-size:13px!important;
  color:#C0492F!important;margin-top:5px!important;
}

/* ===================== ЗАГРУЗКА ФАЙЛА ===================== */
.t-popup .t-form__inputsbox .t-inputfile,
.t-popup .t-input-group_uc .t-input,
.t-popup .t-form__uploadfilelabel{
  border:1.5px dashed var(--ml-line)!important;
  border-radius:10px!important;
  min-height:56px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-family:var(--ml-font)!important;font-size:15px!important;font-weight:500!important;
  color:var(--ml-mut)!important;background:#fff!important;cursor:pointer!important;
  transition:border-color .16s ease, color .16s ease!important;
}
.t-popup .t-form__uploadfilelabel:hover{border-color:var(--ml-o)!important;color:var(--ml-ink)!important}

/* ===================== ПЕРЕКЛЮЧАТЕЛИ И ЧЕКБОКСЫ ===================== */
.t-popup .t-checkbox__control,.t-popup .t-radio__control{
  font-family:var(--ml-font)!important;
  font-size:14.5px!important;line-height:1.55!important;color:var(--ml-mut)!important;
}
.t-popup .t-checkbox__indicator,.t-popup .t-radio__indicator{
  border:1.5px solid var(--ml-line)!important;border-radius:5px!important;
  width:20px!important;height:20px!important;top:1px!important;
}
.t-popup .t-checkbox:checked ~ .t-checkbox__indicator,
.t-popup .t-radio:checked ~ .t-radio__indicator{
  background:var(--ml-o)!important;border-color:var(--ml-o)!important;
}
.t-popup .t-checkbox__control a,.t-popup .t-radio__control a{
  color:var(--ml-ink)!important;text-decoration:none!important;
  border-bottom:1px solid var(--ml-o)!important;
}
/* варианты «Позвонить / Telegram / WhatsApp» карточками, а не радиокнопками */
.t-popup .t-radio__wrapper-item{
  border:1.5px solid var(--ml-line)!important;border-radius:10px!important;
  padding:13px 16px!important;margin:0 8px 8px 0!important;
  transition:border-color .16s ease, background .16s ease!important;
}
.t-popup .t-radio__wrapper-item:hover{border-color:var(--ml-o)!important;background:var(--ml-tint)!important}

/* ===================== КНОПКА ОТПРАВКИ ===================== */
.t-popup .t-submit,
.t-popup input.t-submit,
.t-popup button.t-submit{
  font-family:var(--ml-font)!important;
  font-size:16.5px!important;font-weight:800!important;letter-spacing:-.012em!important;
  color:#1A1206!important;
  background:var(--ml-o)!important;
  border:0!important;border-radius:12px!important;
  height:62px!important;width:100%!important;
  box-shadow:0 1px 2px rgba(120,72,10,.14),0 6px 16px -6px rgba(214,138,40,.5)!important;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease!important;
  cursor:pointer!important;
}
.t-popup .t-submit:hover{
  background:var(--ml-oh)!important;
  box-shadow:0 1px 2px rgba(120,72,10,.16),0 10px 24px -8px rgba(214,138,40,.62)!important;
}
.t-popup .t-submit:active{transform:translateY(1px)!important}

/* ===================== ЭКРАН «СПАСИБО» ===================== */
.t-popup .t-form__successbox{
  background:var(--ml-tint)!important;
  border:1px solid #F3D9B0!important;
  border-radius:12px!important;
  padding:22px 24px!important;
  font-family:var(--ml-font)!important;
  font-size:16px!important;line-height:1.6!important;color:var(--ml-ink)!important;
}

/* ===================== МОБИЛЬНЫЕ ===================== */
@media screen and (max-width:640px){
  .t-popup__container{
    padding:28px 20px 24px!important;
    border-radius:16px!important;
    max-width:calc(100vw - 24px)!important;
  }
  .t-popup .t-name_xl,.t-popup .t-title,.t-popup .t-heading{font-size:22px!important}
  .t-popup .t-input{height:54px!important;font-size:16px!important} /* 16px — иначе iOS зумит */
  .t-popup .t-submit{height:58px!important;font-size:16px!important}
}

/* ============================================================
   ГАЛОЧКА СОГЛАСИЯ И КНОПКА ЗАГРУЗКИ ФАЙЛА
   ============================================================ */

/* --- Галочка в чекбоксе --- */
.t-popup .t-checkbox__indicator{
  position:relative!important;
  background:#fff!important;
  border:1.5px solid var(--ml-line)!important;
  border-radius:5px!important;
  width:20px!important;height:20px!important;
  transition:background .14s ease, border-color .14s ease!important;
}
.t-popup .t-checkbox__indicator::after{
  content:""!important;
  position:absolute!important;
  left:6px!important;top:2.5px!important;
  width:5px!important;height:10px!important;
  border:solid #1A1206!important;
  border-width:0 2.5px 2.5px 0!important;
  transform:rotate(45deg)!important;
  opacity:0!important;
  background:none!important;
  transition:opacity .12s ease!important;
}
.t-popup .t-checkbox:checked ~ .t-checkbox__indicator{
  background:var(--ml-o)!important;
  border-color:var(--ml-o)!important;
}
.t-popup .t-checkbox:checked ~ .t-checkbox__indicator::after{opacity:1!important}
.t-popup .t-checkbox__control{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  text-align:left!important;
}

/* --- Кнопка загрузки файла ---
   Тильда красит её правилом с #rec..., перебить обычным border нельзя,
   поэтому рамка рисуется через outline. */
.t-popup .t-upwidget,
.t-popup .t-upwidget-container{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.t-popup .t-upwidget-container__button,
.t-upwidget .t-upwidget-container__button{
  box-sizing:border-box!important;
  background-color:#fff!important;
  outline:1.5px dashed var(--ml-line)!important;
  outline-offset:-1.5px!important;
  border-radius:10px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 16px!important;
  line-height:1!important;
  font-size:0!important;
  overflow:visible!important;
  transition:outline-color .16s ease, background-color .16s ease!important;
}
.t-popup .t-upwidget-container__button::before,
.t-upwidget .t-upwidget-container__button::before{
  content:"";
  width:18px;height:18px;flex:0 0 auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>") center/contain no-repeat;
}
.t-popup .t-upwidget-container__button::after,
.t-upwidget .t-upwidget-container__button::after{
  content:"Прикрепить файл";
  font-family:var(--ml-font);
  font-size:15.5px;
  font-weight:600;
  color:var(--ml-txt);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.t-popup .t-upwidget-container__button:hover,
.t-upwidget .t-upwidget-container__button:hover{
  outline-color:var(--ml-o)!important;
  background-color:var(--ml-tint)!important;
}
.t-popup .t-upwidget-container__data,
.t-upwidget .t-upwidget-container__data{
  font-family:var(--ml-font)!important;
  font-size:14px!important;
  color:var(--ml-ink)!important;
  margin-top:8px!important;
}

/* ============================================================
   ЗВЁЗДОЧКА У ОБЯЗАТЕЛЬНЫХ ПОЛЕЙ
   Ставится скриптом (см. HTML-код внутрь HEAD), здесь только вид.
   ============================================================ */
.t-popup .ml-req{
  color:var(--ml-o)!important;
  font-weight:800!important;
  font-size:1em!important;
  line-height:1!important;
  vertical-align:top!important;
  margin-left:3px!important;
}

/* ============================================================
   СОСТОЯНИЕ ОШИБКИ — идёт последним, перебивает фокус
   ============================================================ */
/* поле с ошибкой: красная рамка вместо оранжевой, без свечения фокуса */
.t-popup .t-input-group:has(.t-input-error:not(:empty)) .t-input,
.t-popup .t-input-group:has(.t-input-error:not(:empty)) .t-input:focus,
.t-popup .t-input_error,
.t-popup .t-input.t-input_error,
.t-popup .t-input_error:focus{
  border-color:#C0492F!important;
  box-shadow:none!important;
  outline:none!important;
}
/* телефон: рамка на обёртке, внутреннее поле без своей */
.t-popup .t-input-group_ph:has(.t-input-error:not(:empty)) .t-input-phonemask__wrap,
.t-popup .t-input-group_ph:has(.t-input-error:not(:empty)) .t-inputphone__wrap{
  border-color:#C0492F!important;
  box-shadow:none!important;
}
.t-popup .t-input-group_ph:has(.t-input-error:not(:empty)) .t-input{
  border-color:transparent!important;
  box-shadow:none!important;
  background:transparent!important;
}
/* поле телефона должно занимать всю обёртку, без зазоров */
.t-popup .t-input-phonemask__wrap,
.t-popup .t-inputphone__wrap{
  display:flex!important;
  align-items:stretch!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.t-popup .t-input-phonemask__wrap .t-input,
.t-popup .t-inputphone__wrap .t-input{
  flex:1 1 auto!important;
  width:100%!important;
  height:100%!important;
  min-height:53px!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding-left:8px!important;
}
/* подпись под полем */
.t-popup .t-input-error{
  font-family:var(--ml-font)!important;
  font-size:13px!important;
  line-height:1.4!important;
  color:#C0492F!important;
  margin-top:6px!important;
  padding:0!important;
  background:none!important;
}
/* --- Общая красная плашка «заполните все обязательные поля» ---
   Она дублирует подписи под самими полями и только пугает. Убираем. */
.t-popup .t-form__errorbox-middle,
.t-popup .t-form__errorbox-bottom,
.t-popup .t-form__errorbox-wrapper,
.t-popup .t-form__errorbox-item,
.t-popup .js-errorbox-all,
.t-popup .js-rules-error,
.t-form .t-form__errorbox-middle,
.t-form .t-form__errorbox-bottom{
  display:none!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  background:none!important;
}