/* ==========================================================================
   Дополнения к вёрстке макета.

   Правило: assets/css/style.css — это стили макета, их НЕ правим,
   чтобы можно было принять обновлённую вёрстку от дизайнера.
   Всё, чего в макете не было, живёт здесь.

   Исходник стилей макета — assets/css/style.scss.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Тариф VIP.

   В макете описаны только три бейджа (assets/css/style.css):
     .section__post-img-status.super-queen  #ffa800
     .section__post-img-status.queen        #ec1936
     .section__post-img-status.elite        #f00e88
   Тариф vip есть в ТЗ, но в вёрстке его нет — добавляем четвёртый стиль
   в той же логике. Цвет взят из палитры макета (синий из блока телеграма).
   -------------------------------------------------------------------------- */
.section__post-img-status.vip {
    background: #6486FF;
}

/* Те же бейджи на детальной странице — отдельные плашки. В макете описана
   только .super-queen (style.css), «Королева» и «Элитная» выводились
   простым текстом. Оформление — как у .super-queen, цвета — как в карточке. */
.section__postDetail__block .queen,
.section__postDetail__block .elite,
.section__postDetail__block .vip {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
}

.section__postDetail__block .queen { background: #EC1936; }
.section__postDetail__block .elite { background: #F00E88; }
.section__postDetail__block .vip   { background: #6486FF; }


/* --------------------------------------------------------------------------
   Хлебные крошки: последний пункт — текущая страница.
   В макете это ссылка, и стиль .section__breadcrumbs a:last-child делал её
   бледной. Компонент выводит текущую страницу тегом <span> — без этого
   правила она была крупной и тёмной.
   -------------------------------------------------------------------------- */
.section__breadcrumbs span {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #BFA7AB;
    opacity: .45;
}


/* Число анкет у варианта в фильтре: «Адлерский 10» — цифра бледнее названия */
.container-box .count {
    margin-left: 4px;
    color: #BFA7AB;
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   Переключатель городов.

   Блока с выбором города в макете нет вообще — город был зашит строкой.
   Стилизуем под соседние элементы шапки: тот же кегль и цвет, что у «Меню».
   Шапка белая — до 02.10.2026 здесь стоял белый текст, и название города
   было не видно.
   -------------------------------------------------------------------------- */
.header__city {
    color: #2A2C36;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.header__city:hover {
    color: #EC1936;
}

.header__city-name {
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px dashed rgba(42, 44, 54, .4);
    line-height: 1.2;
}

.header__city--mobile .header__city-name {
    font-size: 13px;
}

/* Логотип не сжимается, когда в первой колонке шапки тесно */
.header__logoLink {
    flex-shrink: 0;
}

.header__city-title {
    font-size: 20px;
    font-weight: 700;
    color: #2A2C36;
}

.header__city-list a {
    color: #2A2C36;
    text-decoration: none;
}

.header__city-list a:hover {
    color: #FF2241;
}

/* Текущий город — не ссылка, выделен цветом акцента */
.header__city-list .active {
    color: #FF2241;
    font-weight: 700;
}

/* Город без домена (заведён в обход мастера) — кликать некуда */
.header__city-list .disabled {
    color: #BFA7AB;
}

/* На мобильной шапке переключатель встаёт под логотип */
@media (max-width: 991px) {
    .header__city {
        margin-left: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   Служебные состояния, которых в макете не было.
   -------------------------------------------------------------------------- */

/* Пустой результат фильтра */
.section__post-empty {
    padding: 40px 20px;
    text-align: center;
    color: #BFA7AB;
    font-size: 16px;
}

/* Индикатор загрузки для кнопки «Показать еще» */
.section__post__loadMore.is-loading {
    pointer-events: none;
    opacity: .6;
}

/* Сообщение ядра на входе и восстановлении пароля, ошибка сохранения профиля.
   В макете такого блока нет; цвета — красный и зелёный бейджей макета. */
.section__login__block-error {
    padding: 12px 16px;
    border-radius: 5px;
    background: #FDECEE;
    color: #EC1936;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    line-height: 140%;
}

.section__login__block-error.is-ok {
    background: #EAF8EA;
    color: #1F8C1D;
}

/* --------------------------------------------------------------------------
   Поля кабинета.

   В макете ширина поля фиксированная — 330px (style.css), так выглядит
   профиль. В форме анкеты поля стоят в колонках col-lg-4, которые уже 330px:
   там поле растягиваем ровно на колонку, иначе оно налезает на соседнее.
   Раньше вместо этого в style.css ширину заменили на auto — и все поля
   сжались по содержимому («Возр», «Не указан» под стрелкой).
   -------------------------------------------------------------------------- */
.section__personal [class*="col-"] > .section__personal__block-value,
.section__personal [class*="col-"] > .section__personal__block-value input,
.section__personal [class*="col-"] > .section__personal__block-value select {
    width: 100%;
}

/* Без стрелок у числовых полей (возраст, цены) */
.section__personal__block-value input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* Капча под полем отзыва — на месте «Google Recaptcha» из макета.
   Поле — в стиле полей формы отзыва. */
.review-captcha img {
    border-radius: 5px;
    background: #FCF6F7;
}

.review-captcha input[type="text"] {
    width: 220px;
    max-width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(191, 167, 171, 0.2);
    border-radius: 5px;
    background: #FCF6F7;
    outline: 0;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    color: #2A2C36;
}

.review-captcha__refresh {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: #BFA7AB;
    text-decoration: none;
}

.review-captcha__refresh:hover {
    color: #EC1936;
}

/* Подпись вместо контактов у карточки в архиве (/archive/) */
.section__post-archive {
    padding: 6px 0;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: #BFA7AB;
}

/* Поле регистрации с ошибкой */
.section__login__block input.is-invalid {
    border-color: #EC1936;
    background: #FDECEE;
}

/* Открытый раздел каталога в красном меню. В макете состояния нет —
   подчёркивание в цвет текста, чтобы не спорить с наведением. */
.section__nav a.active {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* Страница /uslugi/ — список услуг в разметке блока услуг детальной */
.services-index a {
    text-decoration: none;
}

.services-index a.section__postDetail__services__block-title,
.services-index a.name {
    color: #2A2C36;
}

.services-index a:hover,
.services-index a:hover .name {
    color: #EC1936;
}


/* ==========================================================================
   Личный кабинет (раздел 3 аудита, 03.10.2026)
   ========================================================================== */

/* Сообщения кабинета: «Изменения сохранены», «Настройки сохранены», ошибки
   AJAX. В макете их нет; цвета — как у плашек входа (.section__login__block-error). */
.section__personal-saved,
.section__personal-media-errors {
    padding: 12px 16px;
    border-radius: 5px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    line-height: 140%;
}

.section__personal-saved {
    background: #EAF8EA;
    color: #1F8C1D;
}

.section__personal-media-errors {
    background: #FDECEE;
    color: #EC1936;
}

/* Аватар: загруженное фото заполняет квадрат 150×150 */
.section__personal__leftMenu-logo .image .section__personal-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Мобильный аватар над формой профиля — по центру, как в макете */
.section__personal > .section__personal__leftMenu-logo .image,
.section__personal form ~ .section__personal__leftMenu-logo .image {
    margin: 0 auto;
}

/* Кнопка загрузки фото, к которой ведёт карандаш из бокового меню */
#avatar.is-highlighted {
    outline: 2px solid #EC1936;
    outline-offset: 6px;
    border-radius: 5px;
}

/* Подпись над полем формы анкеты (блок «Фигура») */
.section__personal-fieldLabel {
    margin-bottom: 4px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 13px;
    color: #BFA7AB;
}

/* Поля «Расценки» с иконкой слева — отступ под иконку, как в макете */
.section__personal [class*="col-"] > .section__personal__block-value .price-svg ~ input,
.section__personal__block-value:has(.price-svg) input {
    padding-left: 55px;
}

/* Мои анкеты: продвижение недоступно, пока анкета не в каталоге */
.section__myPosts-freedom.is-disabled,
.section__myPosts-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Комментарий модератора (было: инлайн color:#c00) */
.section__myPosts-comment {
    color: #EC1936;
}

/* Кнопка «Отменить» рядом с «Сохранить» в «Моих ответах» */
.section__myPosts-cancel {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: #BFA7AB;
    text-decoration: none;
}

.section__myPosts-cancel:hover {
    color: #EC1936;
}

/* Отзывы на мои анкеты: ещё не опубликован — серый, кликабельный */
.section__reviews__block .posted.is-pending {
    color: #BFA7AB;
    cursor: pointer;
}

.section__reviews__block .posted.is-pending svg path {
    fill: #BFA7AB;
}

.section__reviews__block .posted.is-pending:hover {
    color: #29BA26;
}

/* Кнопки «В избранное» / «В черный список» на детальной: анкета уже в списке */
.section__postDetail__block-whitelist.active {
    background: #EC1936;
    color: #fff;
}

.section__postDetail__block-whitelist.active svg path {
    fill: #fff;
}

/* Видео в разделе фото: первый кадр вместо слова «видео» */
.section__personal-videoThumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background: #2A2C36;
}

/* Заблокированная кнопка «Пополнить»: платежи не подключены */
.section__login__block button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Окно подтверждения (LocalApp.confirm): пояснение под заголовком */
#modalQuest [data-confirm-text] {
    color: #2A2C36;
}

/* Всплывающее сообщение (LocalApp.toast) */
.local-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 2000;
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    border-radius: 8px;
    background: #2A2C36;
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    transform: translateX(-50%);
    transition: opacity .4s;
}

.local-toast.is-error {
    background: #EC1936;
}

.local-toast.is-hidden {
    opacity: 0;
}

/* Крестик «Удалить анкету» в «Моих анкетах». Стиль макета написан как
   .section__myPosts .deleteBtn, а строка анкеты — .section__myPosts__block */
.section__myPosts__block .deleteBtn {
    position: absolute;
    top: 12px;
    right: 12px;
    line-height: 0;
}

.section__myPosts__block .deleteBtn:hover svg path {
    fill: #EC1936;
}

/* Кнопка загрузки фото профиля — по ширине текста */
#avatar .section__myPosts-edit {
    width: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Фото анкеты у отзыва в кабинете — квадрат, как в макете
   (у настоящих фото пропорции портретные, w-100 растягивал их) */
.section__reviews__block-photo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 5px;
}

/* «Мои ответы» на телефоне: дата не налезает на иконки правки.
   Только в кабинете: на детальной тот же блок, и nowrap выталкивал
   дату за край экрана */
.section__personal .section__postDetail__reviews__block-author .date {
    margin-left: 12px;
    white-space: nowrap;
}

/* «Ваши отзывы» посетителя: анкета у отзыва — ссылка на неё. Цвет текста
   как в макете, а не цвет ссылки; фото — квадрат, как в макете (у настоящих
   фото пропорции портретные) */
.section__personal__reviewBlock a {
    color: inherit;
}

.section__personal__reviewBlock-status {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: #2A2C36;
}

.section__personal__reviewBlock-img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 7px;
}

/* «Удалить отзыв» на телефоне. Стиль макета прячет ссылку до 992px
   (на её месте в макете имя автора), и посетитель с телефона не мог
   удалить свой отзыв */
@media (max-width: 992px) {
    .section__personal__reviewBlock-delete {
        display: flex;
    }
}