/* ═══════════════════════════════════════════════════════════════════════════
   Glass-эффекты: scroll-to-top, glass-card, AuthModal
   [ВЫДЕЛЕНО В: task-2026-06-27-admin-cms-audit (Фаза 5) — из community-cards.css]
   [РЕАЛИЗОВАНО В: task-2026-06-01-015] — glass-card
   [РЕАЛИЗОВАНО В: task-2026-06-02-001] — AuthModal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll-to-top кнопка ───────────────────────────────────────────── */
.scroll-to-top-btn {
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px var(--ps-shadow-subtle);
    animation: fadeInUp 0.5s ease-out 0.5s both;
}
.scroll-to-top-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Glass-стиль для карточек на странице /content
   ═══════════════════════════════════════════════════════════════════════════ */
.ps-glass-card {
    background: var(--card-glass) !important;
    backdrop-filter: blur(6px);
    border: 1px solid var(--ps-glass-border);
    transition: background 0.3s ease, box-shadow var(--transition-smooth), transform var(--transition-smooth);
}
.ps-glass-card:hover {
    background: var(--card-glass) !important;
    transform: var(--effect-hover-lift-sm);
    box-shadow: var(--effect-glow-green);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AuthModal — стили для модального окна входа/регистрации
   ═══════════════════════════════════════════════════════════════════════════ */

/* Карточка модалки */
.auth-modal-card {
    background: var(--card-glass-heavy) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px var(--ps-shadow-hover) !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* Ряд с двумя колонками */
.auth-modal-row {
    min-height: 480px;
    align-items: stretch;
}

/* Левая колонка — преимущества */
.auth-modal-benefits {
    border-radius: 16px 0 0 16px;
    align-self: stretch;
    overflow-y: auto;
}

/* Каждый benefit */
.auth-modal-benefit {
    padding: 4px 2px;
    border-radius: 8px;
    transition: transform 0.2s ease, background 0.2s ease;
}
.auth-modal-benefit:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Правая колонка — форма */
.auth-modal-form {
    background: transparent;
}

/* Поля ввода в модалке */
.auth-modal-form .q-field {
    font-size: 0.9rem;
}

/* Кнопки в модалке */
.auth-modal-form .q-btn {
    text-transform: none;
    font-weight: 600;
}

/* ── Responsive: на мобильных benefits сверху, форма снизу ──────────────── */
/* [ОБНОВЛЕНО В: task-2026-06-13-auth-benefits-fix] */
@media (max-width: 768px) {
    /* ── Ряд становится колонкой: benefits сверху, форма снизу ────────── */
    .auth-modal-row {
        flex-direction: column !important;
        min-height: auto;
    }

    /* ── Benefits: полная ширина, компактный strip ────────────────────── */
    .auth-modal-benefits {
        display: flex !important;
        width: 100% !important;
        padding: 10px 8px !important;
        border-radius: 16px 16px 0 0 !important;
        gap: 4px !important;
    }

    /* Скрываем заголовок "Преимущества" на мобильных для экономии места */
    .auth-modal-benefits > :first-child {
        display: none !important;
    }

    /* Каждый benefit: flex-wrap для двух строк (иконка+заголовок | описание) */
    /* [ОБНОВЛЕНО В: task-2026-06-13-auth-height-fix (итерация 7 — compact mobile)] */
    .auth-modal-benefit {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px 8px !important;
        padding: 4px 6px !important;
        text-align: left !important;
        width: 100% !important;
        border-radius: 8px !important;
    }

    /* Иконки меньше на мобильных, фиксированная ширина */
    .auth-modal-benefit .text-2xl {
        font-size: 1rem !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
        width: 22px !important;
        text-align: center !important;
    }

    /* Заголовок benefit: компактный, рядом с иконкой */
    .auth-modal-benefit .text-sm {
        font-size: 0.75rem !important;
        line-height: 1.15 !important;
        flex: 0 1 auto !important;
    }

    /* Описание benefit: на всю ширину, с отступом под иконку */
    .auth-modal-benefit .text-xs {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        flex: 1 1 100% !important;
        padding-left: 30px !important;
    }

    /* ── Форма: полная ширина ─────────────────────────────────────────── */
    .auth-modal-form {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* ── Ultra-compact mobile для невысоких экранов (≤600px) ──────────────── */
/* [ДОБАВЛЕНО В: task-2026-06-13-auth-mobile-compact-v2] */
/* Активируется ТОЛЬКО при width ≤768px И height ≤600px.                   */
/* Высокие мобильные (iPhone 12+ 430×932) не затрагиваются.              */
@media (max-width: 768px) and (max-height: 600px) {
    /* Скрываем separator + social proof для экономии ~52px */
    .auth-modal-benefits .q-separator {
        display: none !important;
    }
    /* Скрываем блок social proof (следует сразу за separator) */
    .auth-modal-benefits .q-separator + .items-center.gap-1 {
        display: none !important;
    }

    /* Скрываем описания benefits — оставляем иконку + заголовок */
    .auth-modal-benefit .text-xs {
        display: none !important;
        padding-left: 0 !important;
    }

    /* Login mode: скрываем левую колонку benefits (отличается justify-center) */
    /* Register mode (justify-start) не затрагивается */
    .auth-modal-benefits.justify-center {
        display: none !important;
    }
    /* Когда левая колонка скрыта — форма на всю ширину */
    .auth-modal-benefits.justify-center ~ .auth-modal-form {
        width: 100% !important;
    }

    /* Убираем gap в форме для максимальной компактности */
    .auth-modal-form {
        gap: 0 !important;
        padding: 8px !important;
    }
}

/* ── Инлайн-элементы в форме ──────────────────────────────────────────── */
.auth-modal-form .inline {
    display: inline !important;
}