.auth-container { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
/* Внешний вид самой карточки (фон/рамка/тень/отступы) теперь задаётся
   через редактируемый стиль блока "form" (см. renderAuthFormOpenTag()
   в auth.php) — здесь остаётся только раскладка. */
.auth-box { min-width: 250px; flex: 1; margin-bottom: 20px; }
.auth-box h3 { margin-top: 0; }
.auth-box .forgot-link { margin-top: 10px; display: block; }

.auth-box input[type="password"] { width: 50% !important; box-sizing: border-box; }
.auth-box .register-link { font-size: 2.5em !important; font-weight: bold; display: block; margin-top: 10px; }
.auth-link { font-size: 2.125em; font-weight: bold; display: block; margin-top: 10px; }

/* ===== Регистрация с тарифами справа от формы ===== */
.auth-container.register-with-packages { align-items: flex-start; }
.package-panel {
    /* Ширину панели задаёт flex-basis из auth.php (flex:1 1 560px), а не
       min-width: у .auth-container стоит flex-wrap, и когда 380 + 20 + 560
       не влезают, панель сама уходит на свою строку во всю ширину.
       min-width: 520px тут стоял «чтобы 3 карточки были в ряд», но в ряд
       их ставит basis, а 520px на телефоне становились шире экрана —
       и горизонтально ехала ВСЯ страница, не только эта панель. */
    min-width: 0;
    padding: 15px;
}
.package-panel .form-label { display: block; margin-bottom: 10px; font-weight: 600; }

/* ===== Стили для выбора пакетов при регистрации ===== */
.package-selector { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.package-card-reg { flex: 1 1 180px; min-width: 140px; max-width: 220px; border: 2px solid #dee2e6; border-radius: 12px; padding: 15px 10px; text-align: center; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
/* Увеличение по наведению — только там, где есть мышь. На тапе :hover
   залипает до касания в другом месте, и карточка остаётся раздутой,
   перекрывая соседнюю: выбранный тариф видно по рамке, а не по размеру. */
@media (hover: hover) {
    .package-card-reg:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-color: #0d6efd; z-index: 5; }
}
.package-card-reg.selected { border-color: #0d6efd; background: #f0f7ff; }
.package-card-reg .pkg-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.package-card-reg .pkg-desc { font-size: 0.9rem; color: #555; margin-bottom: 8px; }
.package-card-reg .pkg-desc * { list-style: none !important; margin: 0; padding: 0; }
.package-card-reg .pkg-price { font-weight: 600; color: #28a745; font-size: 1.05rem; }
.package-card-reg .pkg-duration { font-size: 0.85rem; color: #6c757d; }
#registerBtn.active { background: #28a745 !important; border-color: #28a745 !important; color: #fff !important; }
#registerBtn.active:hover { background: #218838 !important; border-color: #218838 !important; }

/* ===== Телефон: форма и тарифы в одну колонку =====
   Блок идёт последним в файле намеренно: он перебивает .package-card-reg
   выше, а специфичность у них одинаковая — переносить его вверх нельзя. */
@media (max-width: 700px) {
    .auth-container.register-with-packages { flex-direction: column; }
    /* В колонке flex-basis задаёт ВЫСОТУ, а не ширину. Инлайновые
       flex:0 1 380px и flex:1 1 560px из auth.php (строки с
       renderAuthFormOpenTag() и <div class="package-panel">) из-за этого
       оставляли 37px пустоты под формой и 124px под тарифами.
       Перебить инлайн можно только !important; в редакторе стилей блока
       flex не настраивается, так что настройку администратора это
       правило не съедает (см. claude/conventions.md). */
       Ширина здесь тоже нужна явная: align-items: flex-start ужимает
       элементы колонки по содержимому, и форма (284px на экране в 338px)
       получалась уже панели тарифов. */
    .auth-container.register-with-packages > .auth-box,
    .auth-container.register-with-packages > .package-panel {
        flex-basis: auto !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    /* Панель — не карточка, своя рамка ей не нужна: боковые отступы
       только отнимают у тарифов ширину, которой на телефоне и так мало. */
    .auth-container.register-with-packages > .package-panel {
        padding-left: 0;
        padding-right: 0;
    }
    /* Один тариф в строку. Два по 140px на телефоне рвут длинные названия
       («Сны с интерпретацией (год)») и дают мелкую цель для пальца. */
    .package-card-reg { flex: 1 1 200px; max-width: none; }
}