/**
 * Стили модуля «Личный кабинет» (Profile). Взяты из легаси
 * (frontend/modules/profile/style.css + foundation .progress + .context-v-menu):
 * карточка профиля, статистика, рейтинг, синее контекст-меню.
 * Внешняя раскладка (grid из 3 колонок) — адаптация под layout движка (одна колонка контента,
 * без отдельного aside-региона легаси).
 */

/* Раскладка: summary | content | menu (в легаси — float + aside; здесь grid). */
.profile { display: grid; grid-template-columns: 250px 1fr 230px; gap: 30px; align-items: start; font-size: 1.071rem; }
.profile_content { min-width: 0; }

/* ── Аватар (avatar-xl) ── */
.avatar-xl { position: relative; width: 250px; height: 250px; overflow: hidden; border-radius: 3px; background: #dfe6eb; }
.avatar-xl_image { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-xl_upload-hint { position: absolute; left: 0; right: 0; bottom: -30px; height: 30px; line-height: 30px; font-size: 12px; color: #fff; text-align: center; background: rgba(0,0,0,.65); cursor: pointer; transition: all .2s; }
.avatar-xl_delete { position: absolute; right: 0; top: 0; width: 30px; height: 30px; opacity: 0; line-height: 30px; color: #fff; text-align: center; background: rgba(0,0,0,.65); border-radius: 3px; cursor: pointer; }
.avatar-xl.__upload { cursor: pointer; }
.avatar-xl.__upload::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.1); transition: all .2s; opacity: 0; }
.avatar-xl.__upload:hover::before { opacity: 1; }
.avatar-xl.__upload:hover .avatar-xl_delete { opacity: 1; }
.avatar-xl.__upload:hover .avatar-xl_upload-hint { bottom: 0; }
.avatar-xl.__none .avatar-xl_delete { display: none; }
/* Владелец без фото — пустой серый бокс (без дефолтного силуэта), как в легаси. */
.avatar-xl.__upload.__none .avatar-xl_image { display: none; }
.avatar-xl_msg { position: absolute; left: 0; right: 0; top: 0; padding: 4px 8px; font-size: 12px; color: #fff; background: rgba(0,0,0,.6); }
.avatar-xl_msg:empty { display: none; }

/* ── Левая колонка: статистика + рейтинг ── */
.user-summary_avatar { margin-bottom: 20px; }
.user-summary_statistics { margin: 0; padding: 0; list-style: none; color: #333; }
.user-summary_statistics_i { margin-bottom: 15px; padding: 0 20px; }
.user-summary_statistics_i::after { content: ""; display: block; clear: both; }
.user-summary_statistics_i_label { float: left; }
.user-summary_statistics_i_value { float: right; font-weight: bold; color: #0093dd; }
.user-summary_statistics_i_rating { margin-top: -6px; float: right; }

.user-rating { display: inline-block; }
.user-rating_help { margin-right: 10px; position: relative; display: inline-block; vertical-align: top; width: 26px; height: 26px; color: #798388; background: #e5e5e5; cursor: pointer; }
.user-rating_help::after { content: ""; margin-top: -5px; position: absolute; top: 50%; right: -8px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #e5e5e5; }
.user-rating_help_icon { position: absolute; right: 0; top: 0; width: 26px; height: 26px; line-height: 26px; text-align: center; background: #e5e5e5; transition: all .5s ease .2s; }
.user-rating_help_text { position: absolute; right: 0; top: 0; width: 180px; max-width: 0; max-height: 0; overflow: hidden; font-size: 1rem; background: #e5e5e5; transition: all .5s ease .2s; z-index: 5; }
.user-rating_help_text_inner { padding: 10px; width: 180px; box-sizing: border-box; line-height: 1.25; transition: all .5s ease .2s; opacity: 0; }
.user-rating_help:hover .user-rating_help_text { max-width: 200px; max-height: 200px; }
.user-rating_help:hover .user-rating_help_text_inner { opacity: 1; }
.user-rating_help:hover .user-rating_help_icon { opacity: 0; }
.user-rating_value { padding: 0 10px; display: inline-block; vertical-align: top; height: 26px; line-height: 26px; font-weight: bold; color: #fff; background: #0093dd; border-radius: 3px; }

/* ── Центр: имя + анкета ── */
.profile_total { padding: 0 20px; }
.profile_total_name { margin-bottom: 15px; position: relative; font-size: 22px; font-weight: bold; color: #4d4d4d; }
.profile_total_name::before { content: ""; margin-top: -5px; position: absolute; left: -20px; top: 50%; width: 10px; height: 10px; background: #999; border-radius: 10px; }
.profile_total_name.__online::before { background-color: #0093dd; }
.user-info { margin-bottom: 20px; line-height: 1.45; list-style: none; padding: 0; }
.user-info_i { margin-bottom: 10px; overflow: hidden; }
.user-info_i_label { margin-right: 20px; float: left; width: 150px; color: #798388; }
.user-info_i_value { padding-bottom: 3px; display: block; overflow: hidden; border-bottom: 1px dotted #ccc; }

/* Прогресс «анкета заполнена» (foundation .progress + легаси-лейблы). */
.progress { position: relative; width: 100%; height: 26px; overflow: hidden; line-height: 26px; background: #ebedef; border-radius: 13px; }
.progress_bar { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; background: #0093dd; }
.progress_label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 12px; color: #000; text-align: center; text-transform: uppercase; }
/* Прогресс анкеты: фиксированная ширина, чтобы верхний (белый, обрезаемый заливкой)
   и нижний (тёмный) лейблы совпадали по центру независимо от процента. */
.profile_total_progress { width: 370px; max-width: 100%; }
.profile_total_progress_label { color: #4d4d4d; }
.profile_total_progress_bar_label { width: 370px; color: #fff; }

/* ── Правое синее меню (context-v-menu) ── */
.context-v-menu { margin: 0; padding: 30px 0; list-style: none; font-size: 14px; background: radial-gradient(circle farthest-corner at right 60px, #38bbfd 15%, #0093dd 83%); border-radius: 3px; }
.context-v-menu_i { margin: 0; padding: 0; text-align: left; }
.context-v-menu_i_link { margin: 0; padding: 0 30px; position: relative; display: block; height: 33px; overflow: hidden; line-height: 33px; color: #fff; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; transition: all .2s; cursor: pointer; }
.context-v-menu_i_link::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: #fff; }
a.context-v-menu_i_link:hover, .context-v-menu_i_link.__active { color: #fff; background: #4ec4ff; }
.context-v-menu_i_link.__active { box-shadow: inset 5px 0 0 0 hsla(0,0%,100%,.5); }
.context-v-menu_i_link.__soon { cursor: default; opacity: .9; }
.context-v-menu_i_link.__soon:hover { background: none; }
.context-v-menu_i:last-child .context-v-menu_i_link::after { display: none; }

/* Форма настроек (оставляем компактный движковый вид). */
.cabinet { max-width: 760px; }
.cabinet__title { font-size: 24px; margin: 8px 0 16px; }
.cabinet-menu { display: flex; gap: 6px; border-bottom: 1px solid #e5e8ee; margin-bottom: 18px; }
.cabinet-menu__i { padding: 9px 16px; color: #6b7280; text-decoration: none; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cabinet-menu__i.__on { color: #0093dd; border-bottom-color: #0093dd; }
.cabinet-menu__i--exit { margin-left: auto; color: #dc2626; }
.cabinet-flash, .cab-flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.cabinet-flash--success, .cab-flash--success { background: #eaf7ee; border: 1px solid #bfe6cb; color: #216e39; }
.cabinet-flash--error, .cab-flash--error { background: #fdecea; border: 1px solid #f5c6c2; color: #a12a21; }
.cabinet-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; padding: 22px; }
.cabinet-settings__hint a { color: #0093dd; }
.cabinet-form { display: flex; flex-direction: column; gap: 14px; }
.cabinet-form__row { display: flex; gap: 14px; }
.cabinet-form__row .cabinet-fld { flex: 1; }
.cabinet-form__sub { font-size: 15px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid #eef0f3; }
.cabinet-fld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #6b7280; font-weight: 500; }
.cabinet-fld input:not([type=checkbox]), .cabinet-fld select, .cabinet-fld textarea { border: 1px solid #e5e8ee; border-radius: 8px; padding: 9px 11px; font-size: 14px; color: #111827; font-weight: 400; }
.cabinet-fld input:not([type=checkbox]):focus, .cabinet-fld select:focus, .cabinet-fld textarea:focus { border-color: #0093dd; outline: none; }
.cabinet-fld--check { flex-direction: row; align-items: center; gap: 8px; color: #111827; font-weight: 400; }
.cabinet-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1px solid #e5e8ee; background: #fff; color: #111827; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.cabinet-btn--primary { background: #0093dd; border-color: #0093dd; color: #fff; }

@media (max-width: 900px) {
    .profile { grid-template-columns: 1fr; }
    .avatar-xl { width: 100%; height: auto; aspect-ratio: 1/1; }
    .cabinet-form__row { flex-direction: column; }
}

/* ── Настройки: ряды user-settings + поля формы (foundation form_field/caption/btn) ── */
.user-settings { margin-bottom: 30px; list-style: none; padding: 0; }
.user-settings_i { margin-bottom: 17px; overflow: hidden; }
.user-settings_i_label { float: left; width: 130px; line-height: 28px; color: #798388; }
.user-settings_i_value { margin-left: 150px; display: block; }
.form_field { padding: 0 10px; height: 28px; box-sizing: border-box; line-height: 26px; font-size: 1.071rem; border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0,0,0,.1); transition: all .3s; }
.form_field.__wide { width: 100%; }
.form_field.__multiline-l { height: 154px; line-height: 18px; padding-top: 4px; padding-bottom: 4px; }
.form_field:focus { border-color: #0093dd; outline: none; }
.form_caption { margin: 15px 0 20px; position: relative; font-size: 14px; font-weight: bold; color: #0495df; text-transform: uppercase; border-bottom: 1px solid #e5e8ee; line-height: 0; }
.form_caption_label { padding-right: 10px; position: relative; display: inline-block; vertical-align: middle; background: #fff; line-height: normal; }
.profile .btn { padding: 0 15px; display: inline-block; height: 30px; line-height: 30px; box-sizing: content-box; text-transform: uppercase; font-size: .9286rem; color: #fff; text-align: center; background: #3aaee8; border: none; outline: none; border-radius: 3px; transition: background-color .2s; cursor: pointer; }
.profile .btn:hover { background: #2b9fd9; }
.settings-fld--check { line-height: 28px; color: #4d4d4d; }

.profile .text-center { text-align: center; margin-top: 6px; }

/* Последний визит (оффлайн) — из легаси. */
.profile_total_last-visit { margin: -10px 0 15px; position: relative; color: #798388; }
.profile_total_last-visit_icon { margin-top: -10px; position: absolute; left: -20px; top: 50%; height: 20px; line-height: 20px; }

/* Современный тост уведомления о сохранении (Vue). */
.profile-toast {
    position: fixed; top: 20px; right: 20px; z-index: 1000;
    display: flex; align-items: center; gap: 10px; max-width: 380px;
    padding: 13px 18px; border-radius: 10px; background: #fff; color: #1f2933;
    font-size: 14px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0,0,0,.16);
    border-left: 4px solid #16a34a;
}
.profile-toast--error { border-left-color: #dc2626; }
.profile-toast__icon { font-size: 18px; color: #16a34a; flex-shrink: 0; }
.profile-toast--error .profile-toast__icon { color: #dc2626; }
.profile-toast-fade-enter-active, .profile-toast-fade-leave-active { transition: opacity .25s ease, transform .25s ease; }
.profile-toast-fade-enter-from, .profile-toast-fade-leave-to { opacity: 0; transform: translateY(-10px); }

/* Бейдж «проверено» у имени. */
.profile_total_name_verify { display: inline-block; position: relative; top: -2px; margin-left: 6px; cursor: help; }
.profile_total_name_verify_icon { font-size: 20px; color: #0093dd; }
/* Подчекбокс «скрывать возраст» под датой. */
.settings-fld--sub { display: block; margin-top: 6px; font-size: 13px; color: #4d4d4d; font-weight: normal; }

/* Модалка смены аватара (файл/камера). */
.pf-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.5); }
.pf-modal__box { position: relative; width: 420px; max-width: 92vw; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); text-align: center; }
.pf-modal__title { margin: 0 0 18px; font-size: 18px; color: #1f2933; }
.pf-modal__close { position: absolute; top: 8px; right: 12px; border: none; background: none; font-size: 24px; line-height: 1; color: #98a2b3; cursor: pointer; }
.pf-modal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pf-modal__actions .btn { float: none; margin: 0; }
.pf-modal__actions label.btn { display: inline-flex; align-items: center; }
.pf-modal__msg { margin-top: 14px; font-size: 13px; color: #a12a21; }
.pf-cam__wrap { margin-bottom: 16px; }
.pf-cam { width: 100%; max-width: 360px; border-radius: 8px; background: #000; transform: scaleX(-1); }