/* Блок бесплатной подписки на категорию.
   Раньше стилей у него не было вовсе: на телефоне поле выбора и кнопка
   вылезали за край страницы, а сам блок висел голым текстом рядом с
   оформленной карточкой платного тарифа — и читался как чужой кусок.

   Отдельный файл, а не правка main-new.sass: собранный css лежит в
   репозитории минифицированным, и пересборка sass тянет за собой всю
   сборку фронта. Соседний блок public-profile.css
   подключены тем же способом. */

.subscribe-box {
    box-sizing: border-box;
    max-width: 100%;
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid #e6e6e6;
    border-radius: 0.5rem;
    background: #fff;
}

/* Поля наследуют размеры коробки и не выходят за карточку: именно из-за
   этого на телефоне «ехала» вёрстка — select и кнопка считали ширину без
   учёта отступов родителя. */
.subscribe-box *,
.subscribe-box *::before,
.subscribe-box *::after {
    box-sizing: border-box;
}

/* Индикатор шага мастера создания запроса («Шаг 2 из 3»). Скромно — это
   не заголовок и не предупреждение, просто ориентир, где человек находится
   в цепочке из трёх экранов (request-details -> published -> expiry). */
.subscribe-box__step {
    margin: 0 0 0.375rem;
    color: #adb5bd;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.subscribe-box__title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.subscribe-box__note {
    margin: 0 0 1rem;
    color: #6c757d;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.subscribe-box__done {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    background: #e8f7ee;
    color: #1c7c43;
}

.subscribe-box__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 26rem;
}

.subscribe-box__label {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.subscribe-box__category,
.subscribe-box__email {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

.subscribe-box__category:focus,
.subscribe-box__email:focus {
    outline: none;
    border-color: #4bc48a;
    box-shadow: 0 0 0 0.15rem rgba(75, 196, 138, 0.25);
}

/* Кнопка занимает всю ширину формы, а не ширину своей подписи.
   align-self: flex-start оставлял её прижатой влево и обрезанной по тексту:
   в карточке, где всё остальное тянется на всю ширину, она читалась как
   недоделанная — владелец прислал снимок. Форма и так ограничена 26rem,
   так что «на всю ширину» здесь не значит «через весь экран».

   Медиазапрос на 575px, который делал это только на узких экранах, стал
   ненужен: телефон владельца сообщает ширину больше 575px, и правило до
   него не доходило. */
.subscribe-box__submit {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}

.subscribe-box__error {
    margin: 0;
    color: #c0392b;
    font-size: 0.875rem;
}

/* На узком экране карточка жмётся отступами, а форма перестаёт держать
   максимум по ширине: места и так мало. */
@media (max-width: 575px) {
    .subscribe-box {
        padding: 1rem;
    }

    .subscribe-box__form {
        max-width: none;
    }

}

/* Список тем. Галочки, а не выпадающий список: выбрать несколько строк в
   списке можно только с зажатой клавишей, о которой человек не догадывается,
   а на телефоне это не работает вовсе. */
.subscribe-box__choices {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.subscribe-box__choice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    color: #212529;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

/* Цвет задан на самом тексте, а не на подписи: правило сайта красит span
   внутри label зелёным, и строки списка выглядели ссылками, по которым
   хочется кликнуть. */
.subscribe-box__choice span {
    color: #212529;
}

.subscribe-box__choice input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

/* Отмеченные сверх предела гасим, а не прячем: человек должен видеть, что
   выбор кончился, а не гадать, куда делись остальные темы. */
.subscribe-box__choice input:disabled + span {
    color: #adb5bd;
}

.subscribe-box__hint {
    color: #6c757d;
    font-weight: 400;
}