/* =========================================
   ФАЙЛ: static/css/modules/auth.css
   МОДУЛЬ АВТОРИЗАЦІЇ ТА РЕЄСТРАЦІЇ
========================================= */

.auth-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    padding: 40px 30px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-main);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-title {
    font-size: var(--text-xl);
    font-weight: 400;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 30px 0;
    color: var(--text-primary);
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

/* Іконки всередині інпутів (око, чарівна паличка) */
.pwd-icon {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); cursor: pointer; transition: color 0.2s ease, transform 0.2s ease;
}
.pwd-icon:hover { color: var(--text-primary); }

.pwd-generate { right: 50px; }
.pwd-generate:hover {
    color: var(--color-primary); 
    transform: translateY(-50%) scale(1.1);
}

/* Блок правил пароля */
.pwd-rules {
    list-style: none; padding: 0; margin: -10px 0 20px 10px; font-size: var(--text-xs); color: var(--text-secondary);
}
.pwd-rules li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; transition: color 0.3s ease; }
.pwd-rules li i { font-size: 10px; }
.pwd-rules li.valid { color: var(--color-success); }

/* Головна кнопка (Стиль Material Blue) */
.btn-action {
    width: 100%;
    padding: 14px;
    border-radius: var(--border-radius-sm);
    border: none !important; 
    background-color: var(--color-primary) !important; 
    color: var(--text-on-primary) !important; 
    font-weight: 600;
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-action:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    box-shadow: none;
}

/* Посилання внизу картки */
.auth-switch { text-align: center; margin-top: 25px; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.auth-switch span { color: var(--color-primary); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
.auth-switch span:hover { text-decoration: underline; filter: brightness(1.2); }

/* Поля вводу (глобальний стиль для форм авторизації) */
.input-pill {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-main);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-pill:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(126, 168, 248, 0.15);
}

.input-pill::placeholder {
    color: var(--text-secondary);
}