/* =====================================================
   Бриф на перенос Битрикс24 — /local/brief-form/
   Самодостаточные стили: форма встраивается и в лендинг, и в статьи блога.
   Цвета берутся из переменных лендинга, если они есть (--purple и т.д.).
   ===================================================== */

/* ---------------- ФОРМА ---------------- */
.brief-form {
   font-family: 'Golos Text', 'Open Sans', Arial, sans-serif;
   color: var(--text, #0d0a14);
   line-height: 1.6;
   text-align: left;
   box-sizing: border-box;
}

.brief-form *,
.brief-form *::before,
.brief-form *::after { box-sizing: border-box; }

.brief-form .brief-form__group {
   margin: 22px 0 12px;
   padding-top: 18px;
   border-top: 1px solid #ece7f5;
   font-family: var(--font-heading, 'Manrope', 'Golos Text', Arial, sans-serif);
   font-size: 16px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--text, #0d0a14);
}

.brief-form .brief-form__group:first-of-type {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
}

.brief-form .brief-form__intro {
   margin: 0 0 22px;
   font-size: 15px;
   line-height: 1.6;
   color: var(--text-muted, #4a4459);
}

.brief-form .brief-form__intro a {
   color: var(--purple, #7048b8);
   text-decoration: underline;
}

.brief-form .brief-form__hint {
   margin: -4px 0 14px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-muted, #4a4459);
}

.brief-form .brief-form__row,
.brief-form .brief-form__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 16px;
}

/* Подписи разной длины: поле прижимаем к низу ячейки, чтобы поля в строке были на одном уровне */
.brief-form .brief-form__grid .brief-form__field {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.brief-form .brief-form__field {
   display: block;
   margin: 0 0 16px;
}

.brief-form .brief-form__field label {
   display: block;
   margin: 0 0 6px;
   font-family: var(--font-heading, 'Manrope', 'Golos Text', Arial, sans-serif) !important;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.4;
   color: var(--text-muted, #4a4459);
}

.brief-form .brief-form__field input {
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
   border: 1px solid #ded5ef;
   border-radius: 10px;
   background: #fff;
   box-shadow: none;
   padding: 12px 14px;
   font-family: inherit !important;
   font-size: 15px;
   line-height: 1.4;
   color: var(--text, #0d0a14);
   outline: none;
   transition: border-color 0.2s;
}

.brief-form .brief-form__field input:focus { border-color: var(--purple, #7048b8); }

.brief-form .brief-form__field input::placeholder {
   /* Шаблон сайта глобально красит ::placeholder в белый */
   color: #9a93a8;
   opacity: 1;
}

.brief-form .brief-form__field input.error { border-color: var(--red, #e2483d); }

.brief-form .brief-form__req {
   color: var(--red, #e2483d);
   font-weight: 700;
}

.brief-form .brief-form__agree {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   margin: 0 0 18px;
   font-size: 12.5px;
   font-weight: 400;
   line-height: 1.5;
   color: var(--text-muted, #4a4459);
   cursor: pointer;
}

.brief-form .brief-form__agree.error { color: var(--red, #e2483d); }
.brief-form .brief-form__agree.error input[type="checkbox"] { border-color: var(--red, #e2483d); }
/* Галочка согласия — как «Я не робот» у капчи: квадрат с рамкой, после клика зелёная галочка на белом */
.brief-form .brief-form__agree input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
   position: static;
   display: block;
   flex-shrink: 0;
   width: 22px;
   height: 22px;
   margin: 0;
   padding: 0;
   border: 2px solid #b9aed0;
   border-radius: 4px;
   background: #fff center / 14px 11px no-repeat;
   box-shadow: none;
   opacity: 1;
   cursor: pointer;
   transition: border-color 0.2s, background-image 0.2s;
}

.brief-form .brief-form__agree input[type="checkbox"]:hover { border-color: var(--purple, #7048b8); }

.brief-form .brief-form__agree input[type="checkbox"]:focus-visible {
   outline: 2px solid var(--purple, #7048b8);
   outline-offset: 2px;
}

.brief-form .brief-form__agree input[type="checkbox"]:checked {
   border-color: var(--green, #1a9b5c);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpolyline points='1 5 4 8 11 1' fill='none' stroke='%231a9b5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.brief-form .brief-form__agree a { color: var(--purple, #7048b8); }

/* Кнопка без класса .btn: у шаблона сайта есть свой глобальный .btn */
.brief-form .brief-form__submit {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: auto;
   margin: 0;
   padding: 15px 30px;
   border: 2px solid var(--accent, #fba802);
   border-radius: 999px;
   background: var(--accent, #fba802);
   box-shadow: 0 14px 30px rgba(251, 168, 2, 0.32);
   font-family: var(--font-heading, 'Manrope', 'Golos Text', Arial, sans-serif) !important;
   font-size: 15px;
   font-weight: 800;
   line-height: 1.2;
   color: var(--accent-text, #2a1c06);
   text-transform: none;
   cursor: pointer;
   transition: all 0.25s ease;
}

.brief-form .brief-form__submit:hover {
   background: var(--accent-dark, #e89700);
   border-color: var(--accent-dark, #e89700);
   box-shadow: 0 16px 34px rgba(251, 168, 2, 0.4);
   transform: translateY(-1px);
}

.brief-form .brief-form__submit:disabled {
   opacity: 0.7;
   cursor: default;
   transform: none;
}

.brief-form .brief-form__result:empty { display: none; }

.brief-form .brief-form__result {
   margin-top: 14px;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
}

.brief-form .brief-form__result--ok    { color: var(--green, #1a9b5c); }
.brief-form .brief-form__result--error { color: var(--red, #e2483d); }

/* Форма прямо в статье блога — в карточке */
[data-brief-form] > .brief-form {
   max-width: 720px;
   margin: 24px 0;
   padding: 28px;
   background: #fff;
   border: 1px solid #ece7f5;
   border-radius: var(--radius, 16px);
   box-shadow: 0 10px 30px rgba(49, 15, 80, 0.07);
}

@media (max-width: 560px) {
   .brief-form .brief-form__row,
   .brief-form .brief-form__grid { grid-template-columns: 1fr; }
   [data-brief-form] > .brief-form { padding: 20px 16px; }
}

/* ---------------- МОДАЛКА ---------------- */
.brief-modal {
   position: fixed;
   inset: 0;
   z-index: 10000; /* выше cookie-баннера шаблона (9999) */
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 24px 16px;
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
   background: rgba(20, 12, 36, 0.45);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   opacity: 0;
   transition: opacity 0.2s ease;
}

.brief-modal[hidden] { display: none; }
.brief-modal.is-open { opacity: 1; }

.brief-modal__dialog {
   position: relative;
   width: 100%;
   max-width: 640px;
   margin: auto;
   padding: 36px 32px 32px;
   box-sizing: border-box;
   background: #fff;
   border-radius: var(--radius, 16px);
   box-shadow: 0 30px 80px rgba(49, 15, 80, 0.25);
   transform: translateY(12px) scale(0.98);
   transition: transform 0.2s ease;
}

.brief-modal.is-open .brief-modal__dialog { transform: none; }

.brief-modal__title {
   margin: 0 40px 8px 0;
   font-family: var(--font-heading, 'Manrope', 'Golos Text', Arial, sans-serif);
   font-size: 24px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--text, #0d0a14);
}

.brief-modal__text {
   margin: 0 0 22px;
   font-family: 'Golos Text', 'Open Sans', Arial, sans-serif;
   font-size: 15px;
   line-height: 1.6;
   color: var(--text-muted, #4a4459);
}

.brief-modal__close {
   position: absolute;
   top: 14px;
   right: 14px;
   width: 40px;
   height: 40px;
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: var(--purple-pale, #ece7f5);
   color: var(--purple, #7048b8);
   font-size: 26px;
   line-height: 40px;
   text-align: center;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
}

.brief-modal__close:hover {
   background: var(--purple, #7048b8);
   color: #fff;
}

@media (max-width: 560px) {
   .brief-modal { padding: 12px 8px; }
   .brief-modal__dialog { padding: 28px 18px 22px; }
   .brief-modal__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
   .brief-modal,
   .brief-modal__dialog { transition: none; }
}