/*
 * Плашка и оверлей установки на экран «Домой».
 * Логика — static/js/pwa-install.js, разметку строит он же.
 *
 * Стили держатся отдельным файлом, потому что партиал подключается в трёх
 * разных оформлениях сразу: кабинет и страницы входа на Bootstrap,
 * маркетинговый сайт — на своих токенах. Ни на один из них здесь нельзя
 * опираться, поэтому все значения заданы явно.
 *
 * Кнопка — оранжевая заливка и ТЁМНЫЙ текст: белый по #FF7A1A даёт 2.6:1 и
 * не проходит WCAG AA (правило проекта, см. static/marketing/css/tokens.css).
 */

.bronme-pwa-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 40px 12px 16px;
    border-radius: 14px;
    background: #212529;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.bronme-pwa-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.bronme-pwa-banner-text strong { font-size: 15px; }
.bronme-pwa-banner-text span { color: #ced4da; }

.bronme-pwa-btn {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    background: var(--bronme-accent, #FF7A1A);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 10px;
    padding: 10px 16px;
    white-space: nowrap;
}

.bronme-pwa-btn:hover { filter: brightness(1.08); }

.bronme-pwa-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

/* --- Оверлей с инструкцией --- */

.bronme-pwa-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.bronme-pwa-card {
    max-width: 420px;
    width: 100%;
    background: #fff;
    color: #212529;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.bronme-pwa-card h2 { font-size: 18px; margin: 0 0 16px; }
.bronme-pwa-card .bronme-pwa-btn { width: 100%; margin-top: 20px; padding: 12px; font-size: 15px; }

.bronme-pwa-steps { margin: 0; padding-left: 22px; }
.bronme-pwa-steps li { margin-bottom: 10px; }
.bronme-pwa-steps li:last-child { margin-bottom: 0; }

.bronme-pwa-hint {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff3e6;
    color: #663000;
}

@media (max-width: 420px) {
    .bronme-pwa-banner { flex-wrap: wrap; }
    .bronme-pwa-btn { width: 100%; }
}

/* --- Порядок способов входа в установленном приложении -------------------
 *
 * Приложение с экрана «Домой» на iOS не делит сессию с Safari. Уход на
 * чужой домен за авторизацией (Google, oauth.telegram.org) — тот случай, где
 * пользователь рискует получить цикл «войти → снова форма входа». Поэтому в
 * standalone первыми идут способы, которые НЕ покидают наш домен: пароль по
 * email и код в WhatsApp (он тоже свой — телефон и код принимает сам сайт).
 *
 * В обычном браузере порядок прежний: соцвход первым. Именно он даёт
 * основную долю входов, и трогать его без нужды нельзя.
 *
 * Признак standalone ставит инлайновый скрипт в partials/_pwa_head.html —
 * до первой отрисовки, иначе блоки успевают мигнуть в другом порядке.
 */
/* Flex включается ТОЛЬКО в standalone. В обычном браузере контейнер остаётся
 * блочным, и вертикальные отступы Bootstrap (mb-3 у кнопок, my-3 у
 * разделителя) схлопываются ровно как до этой правки — иначе форма входа,
 * самая посещаемая страница, молча разъехалась бы на лишний сантиметр. */
/* Видимостью обоих разделителей распоряжается только этот файл. Класс
 * Bootstrap d-flex на них не вешать: его `display: flex !important`
 * перебивает скрытие, и в приложении оставались бы видны оба. */
.auth-divider-browser { display: flex; }
.auth-divider-standalone { display: none; }

html.bronme-standalone .auth-methods { display: flex; flex-direction: column; }
html.bronme-standalone .auth-divider-browser { display: none; }
html.bronme-standalone .auth-divider-standalone { display: flex; order: 2; }
html.bronme-standalone .auth-email { order: 1; }
html.bronme-standalone .auth-social { order: 3; }