/* ===========================================================
   LOG.CSS — LOGOWANIE / REJESTRACJA / RESET HASŁA
   Wspólny design system: boardsvg.css > :root.
   Wszystkie nowe style strony autoryzacji są ograniczone do
   body.auth-page, żeby nie zmieniać profilu ani innych stron.
=========================================================== */

/* ===========================================================
   01. STYLE WSPÓLNE — ZACHOWANE DLA PROFILU
=========================================================== */
.hidden { display: none !important; }

input.valid { border: 2px solid #2ecc71 !important; }
input.invalid { border: 2px solid #e74c3c !important; }

.input-desc {
    display: block;
    font-size: 0.70rem;
    color: #666;
    margin-bottom: 5px;
}

.password-wrapper,
.login-wrapper {
    position: relative;
    text-align: center;
}

.password-wrapper input,
.login-wrapper input {
    width: 95%;
}

.toggle-password,
.profile-password {
    position: absolute;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #777;
}
.toggle-password { top: 50%; }
.profile-password { top: 40%; }

.toggle-password:hover,
.profile-password:hover { color: #000; }

/* ===========================================================
   02. PANEL AUTORYZACJI — JAK SEKCJE HOME
=========================================================== */

body.auth-page .login-container {
    width: min(600px, calc(100% - 40px));
    max-width: 600px;
    min-width: 0;
    margin: clamp(16px, 3vw, 36px) auto 44px;
    padding: clamp(18px, 3vw, 32px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--home-panel-border, rgba(248, 234, 207, .15));
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .23);
    color: var(--tx, #f8eacf);
    font-family: var(--font-family-system, system-ui, sans-serif);
}

body.auth-page .login-container #formTitle {
    margin: 0;
    text-align: center;
    color: var(--tx, #f8eacf);
    font-size: clamp(23px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.25;
}

/* ===========================================================
   03. TRZY ZAKŁADKI
=========================================================== */

body.auth-page .login-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--home-panel-border, rgba(248, 234, 207, .15));
    border-radius: 16px;
}

body.auth-page .login-tabs .login-tab {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 48px;
    padding: 10px 8px;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--gold-tx, #584017);
    background: var(--tx, #f8eacf);
    font: inherit;
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.auth-page .login-tabs .login-tab:hover {
    border-color: var(--home-gold, #b19015);
    background: #fff3d8;
}

body.auth-page .login-tabs .login-tab.is-active {
    color: var(--home-bg, #0b1424);
    background: var(--home-gold-bright, #f7cb30);
    border-color: var(--home-gold, #b19015);
}

body.auth-page .login-tabs .login-tab:focus-visible {
    outline: 3px solid var(--home-gold-bright, #f7cb30);
    outline-offset: 2px;
}

/* ===========================================================
   04. FORMULARZE I POLA
=========================================================== */

body.auth-page .login-container #loginForm,
body.auth-page .login-container #registerForm,
body.auth-page .login-container #resetForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    min-width: 0;
}

body.auth-page .login-container form.hidden { display: none !important; }

body.auth-page .login-container form > label {
    display: block;
    margin: 2px 0 0;
    color: var(--tx, #f8eacf);
    font-weight: 750;
    line-height: 1.4;
}

body.auth-page .login-container .input-desc {
    margin: -5px 0 0;
    color: var(--footer-text, #a9b6cc);
    font-size: 12px;
    line-height: 1.5;
}

body.auth-page .login-container .password-wrapper,
body.auth-page .login-container .login-wrapper {
    position: relative;
    text-align: left;
    width: 100%;
    min-width: 0;
}

body.auth-page .login-container input:not([type="checkbox"]) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 2px solid var(--gold-tx, #584017);
    border-radius: 12px;
    outline: none;
    color: var(--gold-tx, #584017);
    background: var(--tx, #f8eacf);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.auth-page .login-container input:not([type="checkbox"]):focus-visible {
    border-color: var(--home-gold, #b19015);
    box-shadow: 0 0 0 3px rgba(247, 203, 48, .22);
}

body.auth-page .login-container input::placeholder {
    color: var(--home-text-muted, #665044);
    opacity: .78;
}

body.auth-page .login-container .password-wrapper input {
    padding-right: 44px;
}

body.auth-page .login-container .toggle-password {
    right: 14px;
    color: var(--gold-tx, #584017);
    font-size: 17px;
    line-height: 1;
    z-index: 1;
}

body.auth-page .login-container .toggle-password:hover {
    color: var(--home-gold, #b19015);
}

body.auth-page .login-container form > button[type="submit"] {
    width: 200px;
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 18px;
    box-sizing: border-box;
    border: 2px solid var(--gold-tx, #584017);
    border-radius: 12px;
    color: var(--gold-tx, #584017);
    background: var(--tx, #f8eacf);
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: normal;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

body.auth-page .login-container form > button[type="submit"]:hover:not(:disabled) {
    background: var(--home-gold-bright, #f7cb30);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}

body.auth-page .login-container form > button[type="submit"]:disabled {
    opacity: .6;
    cursor: wait;
}

body.auth-page .login-container form > button[type="submit"]:focus-visible {
    outline: 3px solid var(--home-gold-bright, #f7cb30);
    outline-offset: 3px;
}

body.auth-page .login-container #loginMessage {
    margin: 0;
    color: var(--home-gold-bright, #f7cb30);
    font-size: 14px;
    text-align: center;
}

body.auth-page .login-container .auth-reset-description {
    margin: 0 0 4px;
    color: var(--home-text-secondary, #e4ddce);
    line-height: 1.65;
    font-size: 14px;
}

body.auth-page .login-container .reset-message {
    margin: 4px 0 0;
    min-height: 1.2em;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.auth-page .login-container .reset-message.is-error {
    color: #ffb2ab;
}

body.auth-page .login-container .reset-message.is-success {
    color: #a6edb7;
}

/* ===========================================================
   05. REJESTRACJA — ZGODY I REGULAMIN
   Reguły bazowe .checkbox-container są poniżej dla kompatybilności.
=========================================================== */

body.auth-page .login-container .checkbox-container {
    margin: 10px 0 2px;
    background: var(--home-bg, #0b1424);
    border: 1px solid var(--home-panel-border, rgba(248, 234, 207, .15));
    border-radius: 14px;
}

body.auth-page .login-container .checkbox-container .terms-label {
    color: var(--tx, #f8eacf);
    font-size: 13px;
}

body.auth-page .login-container .checkbox-container input[type="checkbox"] {
    accent-color: var(--home-gold-bright, #f7cb30);
}

body.auth-page .login-container .checkbox-container .terms-link {
    color: var(--home-gold-bright, #f7cb30);
}

body.auth-page .login-container .checkbox-container .terms-link:hover {
    color: var(--tx, #f8eacf);
    text-shadow: none;
}

/* ===========================================================
   06. AUTH TOAST — JASNY DYMek JAK NA HOME
   Nadpisuje tylko stronę login.php; reszta nav.css bez zmian.
=========================================================== */

body.auth-page #authToast {
    --toast-color: var(--home-danger, #c62828);
    --toast-soft: #fdeae8;
    color: var(--gold-tx, #584017);
    background: var(--tx, #f8eacf);
    border: 2px solid var(--gold-tx, #584017);
    border-left: 6px solid var(--toast-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
    font-family: var(--font-family-system, system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.5;
}

body.auth-page #authToast.success {
    --toast-color: #166534;
    --toast-soft: #e7f8ed;
}

body.auth-page #authToastIcon {
    color: var(--toast-color);
    background: var(--toast-soft);
    border-color: var(--toast-color);
}

body.auth-page #authToastText {
    color: var(--gold-tx, #584017);
    font-weight: 800;
}

body.auth-page #authToastClose,
body.auth-page #authToastClose:hover,
body.auth-page #authToastClose:focus {
    color: var(--gold-tx, #584017);
    border-color: rgba(88, 64, 23, .25);
    background: rgba(88, 64, 23, .07);
}

body.auth-page #authToastClose:hover {
    background: rgba(88, 64, 23, .17);
}

body.auth-page #authToastClose::before,
body.auth-page #authToastClose::after {
    background: var(--gold-tx, #584017);
}

body.auth-page #authToastClose:focus-visible {
    outline-color: var(--home-gold, #b19015);
}

/* Pasek odliczający czas pozostaje z nav.css. */

/* ===========================================================
   07. RESPONSYWNOŚĆ
=========================================================== */

@media (max-width: 600px) {
    body.auth-page .login-container {
        width: calc(100% - 24px);
        margin: 12px auto 28px;
        padding: 16px;
        gap: 16px;
        border-radius: 16px;
    }

    body.auth-page .login-tabs {
        gap: 4px;
        padding: 4px;
    }

    body.auth-page .login-tabs .login-tab {
        padding: 8px 4px;
        min-height: 54px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    body.auth-page #authToast {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-page .login-container button,
    body.auth-page .login-container input {
        transition: none;
    }
}

/* ===========================================================
   08. REGULAMIN — ISTNIEJĄCE STYLE WSPÓLNE
   Zachowane, bo log.css jest także wczytywany przez profil.
=========================================================== */

/* Akceptacja regulaminu i polityki prywatności */

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--hairline, rgba(255,255,255,.08));
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    box-sizing: border-box;
}

.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 2px 0 0;
    accent-color: var(--accent, #00e1ff);
    cursor: pointer;
}

.checkbox-container .terms-label {
    display: block;
    flex: 1;
    margin: 0;
    color: var(--text-primary, #ffeeee);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    cursor: pointer;
}

.checkbox-container .terms-link {
    display: inline;
    color: var(--accent, #00e1ff);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color .2s ease, text-shadow .2s ease;
}

.checkbox-container .terms-link:hover {
    color: #FCF9EE;
    text-shadow: 0 0 8px rgba(0,225,255,.5);
}

.checkbox-container .terms-link:focus-visible {
    outline: 2px solid var(--accent, #00e1ff);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Mobile */
@media (max-width: 767px) {
    .checkbox-container {
        padding: 12px;
        gap: 10px;
        margin: 16px 0;
    }

    .checkbox-container .terms-label {
        font-size: 13px;
        line-height: 1.7;
    }
}