/* ==========================================
   🔐 STYLE AUTORYZACJI (LOGOWANIE/REJESTRACJA/RESET)
   ========================================== */

/* Variables moved to assets/css/variables.css */

/* ==========================================
   WYCENTROWANIE DLA WSZYSTKICH STRON AUTH
   ========================================== */

/* Reset dla stron autoryzacji */
body.page-template-logowanie,
body.page-template-rejestracja,
body.page-template-reset-hasla,
body.page-template-templatesreset-hasla-php {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ==========================================
   🎯 PORTAL AUTH - DEDYKOWANE KLASY
   ========================================== */

/* Główny kontener dla stron autoryzacji */
.portal-auth-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Reset Astry - używamy dedykowanych klas */
.portal-auth-page .site-content,
.portal-auth-page .content-area,
.portal-auth-page .entry-content {
    flex-grow: 1; /* Kontener wypełni dostępną przestrzeń, wypychając stopkę w dół */
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: 100%;
    margin: 0;
    background: transparent;
}

.portal-auth-page .ast-container,
.portal-auth-page .site-main {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.portal-auth-page.ast-plain-container .ast-container {
    max-width: 100%;
    padding: 0;
}

.portal-auth-page .ast-separate-container .ast-article-post,
.portal-auth-page .ast-separate-container .ast-article-single {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

/* Ukryj footer i sidebar na stronach auth */
.portal-auth-page .site-footer {
    display: none;
}

.portal-auth-page #secondary,
.portal-auth-page .widget-area,
.portal-auth-page .sidebar {
    display: none;
}

/* Pełna szerokość dla głównej zawartości */
.portal-auth-page #primary {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 auto;
}

/* ==========================================
   SPECJALNE STYLE DLA RESET HASŁA
   ========================================== */

/* Reset hasła ma pokazywać header/footer ale z białym tłem */
/* body.page-template-templatesreset-hasla-php - tło dziedziczone z body */

html body.page-template-templatesreset-hasla-php .site-content {
    background: transparent;
}

/* Dostosuj kontener dla reset hasła gdy jest header */
body.page-template-templatesreset-hasla-php .auth-container {
    min-height: calc(100vh - 200px); /* Odejmij wysokość header i footer */
    padding: 40px 20px;
}

/* ==========================================
   WSPÓLNE STYLE DLA WSZYSTKICH STRON AUTH
   ========================================== */

/* Ujednolicony wrapper dla logowania i rejestracji */
.auth-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 20px 40px 20px; /* Zmniejszono dolny odstęp z 80px do 40px */
    background: transparent; /* Kluczowe: wrapper musi być przezroczysty */
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Base styles dziedziczone z .portal-page-container */
/* Margin-top automatycznie zarządzany przez Page Container System v1.0 */
/* Margin-bottom automatycznie zarządzany przez Footer Spacing System v1.0 (60px → responsive) */

/* Karta autoryzacji */
.auth-card {
    background: white;
    width: 100%;
    max-width: var(--container-lg); /* 512px - Shape & Sizing System v4.0 */
    padding: var(--card-padding-xl); /* 40px */
    border-radius: var(--radius-card); /* 12px */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    animation: fadeIn 0.5s ease;
    margin: 0 auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nagłówek karty */
.auth-header {
    text-align: center;
    margin-bottom: 35px;
}

.auth-logo {
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1;
}

.auth-title {
    font-size: 28px;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    font-weight: 600;
}

.auth-subtitle {
    color: var(--text-light);
    font-size: var(--fs-base);
    margin: 0;
}

/* ==========================================
   FORMULARZ
   ========================================== */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px; /* Zwiększony odstęp między polami */
}

.form-group label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--input-padding); /* 10px 15px - Shape & Sizing System v4.0 */
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-input); /* 4px */
    font-size: var(--fs-base);
    transition: var(--transition);
    background: white;
    font-family: inherit;
    min-height: var(--input-height-md); /* 44px - WCAG compliant */
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,115,170,0.1);
}

.form-group input::placeholder {
    color: #999;
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: #888;
    font-size: var(--fs-xs);
}

/* Podpowiedź hasła (nad inputem) */
.password-hint {
    display: block;
    margin-top: -5px;       /* Odstęp od labela */
    margin-bottom: -5px;    /* Odstęp od inputa - TUTAJ możesz regulować */
    color: #888;
    font-size: 13px;
}

/* Błędy formularza */
.form-group input.error,
.form-group input.has-error {
    border-color: var(--danger-color);
}

.form-error,
.field-error {
    color: var(--danger-color);
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

/* Pole hasła z przyciskiem */
.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 45px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: var(--fs-md);
    color: #666;
    transition: var(--transition);
}

.toggle-password:hover {
    color: #333;
}

/* Checkbox */
.remember-me,
.checkbox-label,
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.remember-me input[type="checkbox"],
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.remember-me label,
.checkbox-group label {
    font-weight: normal;
    cursor: pointer;
    margin: 0;
    font-size: var(--fs-sm);
}

.checkbox-group {
    margin: 20px 0;
}

.checkbox-group a {
    color: var(--primary-color);
    text-decoration: none;
}

.checkbox-group a:hover {
    text-decoration: underline;
}

/* Remember & Forgot dla logowania */
.remember-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Link zapomniałeś hasła */
.forgot-password {
    text-align: right;
}

.forgot-password a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: var(--transition);
}

.forgot-password a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ==========================================
   PRZYCISKI
   ========================================== */

/* Globalne .btn i .btn-primary - używamy z components.css */

/* Specyficzne przyciski dla formularzy auth */
.auth-submit,
.btn-submit {
    width: 100%;
    padding: var(--btn-padding-lg); /* 16px 32px - Shape & Sizing System v4.0 */
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-button); /* 8px */
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: var(--input-padding-y); /* 10px */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm); /* 8px */
    min-height: var(--btn-height-lg); /* 52px */
}

.auth-submit:hover,
.btn-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,115,170,0.3);
}

.auth-submit:disabled,
.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Przycisk alternatywny */
.btn-alt {
    width: 100%;
    padding: var(--btn-padding-md); /* 12px 24px - Shape & Sizing System v4.0 */
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: white;
    text-decoration: none;
    border-radius: var(--radius-button); /* 8px */
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm); /* 8px */
    min-height: var(--btn-height-md); /* 44px - WCAG compliant */
}

.btn-alt:hover {
    background: var(--primary-color);
    color: white;
}

/* Loading state */
.auth-loading,
.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================
   KOMUNIKATY
   ========================================== */

#auth-messages {
    margin-bottom: 20px;
}

.auth-message,
.alert {
    padding: var(--input-padding-x); /* 15px - Shape & Sizing System v4.0 */
    border-radius: var(--radius-md); /* 8px */
    margin-bottom: var(--card-padding-md); /* 20px */
    text-align: left;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: var(--gap-sm); /* 8px */
}

.auth-message.success,
.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.auth-message.error,
.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.auth-message.info,
.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.auth-message.warning,
.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* ==========================================
   SEPARATOR I FOOTER
   ========================================== */

.auth-divider,
.divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
    gap: 15px;
    position: relative;
}

.auth-divider::before,
.auth-divider::after,
.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.auth-divider span,
.divider span {
    color: var(--text-light);
    font-size: var(--fs-sm);
    background: white;
    padding: 0 10px;
}

.auth-footer,
.form-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.auth-footer p,
.form-footer p {
    color: var(--text-light);
    margin-bottom: 5px;
}

.auth-footer a,
.form-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.auth-footer a:hover,
.form-footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Alternatywne opcje */
.auth-alternatives {
    background: white;
    padding: 2rem;
    border-radius: 10px; /* Custom - pomiędzy button (8px) a card (12px) */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-top: 1.5rem;
}

/* Demo konto */
.demo-account {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 10px; /* Custom - pomiędzy button (8px) a card (12px) */
    padding: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

.demo-account p {
    color: #666;
    margin: 0.25rem 0;
}

.demo-account strong {
    color: #333;
}

/* ==========================================
   🔐 GOOGLE AUTH - PRZYCISK REJESTRACJI
   ========================================== */

/* Sekcja Google Auth */
.google-auth-section {
    margin-bottom: 30px;
}

/* Przycisk Google */
.btn-google-auth {
    width: 100%;
    padding: 14px 20px;
    background: #ffffff;
    border: 2px solid #dadce0;
    border-radius: var(--radius-button); /* 8px - Shape & Sizing System v5.0 */
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #3c4043;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-google-auth:hover {
    background: #f8f9fa;
    border-color: #d2d5d9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-google-auth:active {
    background: #f1f3f4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-google-auth svg {
    flex-shrink: 0;
}

.btn-google-auth span {
    font-weight: 500;
}

/* ==========================================
   REJESTRACJA - SPECYFICZNE STYLE
   ========================================== */

/* Wrapper rejestracji - USUNIĘTY, używamy .auth-wrapper */

.registration-container {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: var(--radius-card); /* 12px - Shape & Sizing System v5.0 */
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    padding: 40px;
}

.registration-title,
.registration-container .hero-title {
    text-align: center;
    margin-bottom: 40px; /* Zwiększone z 30px */
    color: var(--text-dark);
    font-size: 32px;
    font-weight: 600;
}

/* Wybór typu konta */
.account-type-selector {
    margin-bottom: 40px;
}

.account-type-selector h3 {
    text-align: center;
    font-size: var(--fs-sm); /* Zmniejszone z 16px */
    color: #888; /* Ciemniejszy szary */
    margin-bottom: 20px;
    font-weight: normal;
}

.account-type-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto 30px;
}

.account-type-btn {
    flex: 1;
    max-width: 160px; /* Zmniejszone z 200px */
    min-height: 110px; /* Zmniejszone z 140px */
    padding: 20px 15px; /* Custom - Responsive button padding (compact horizontal) */
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-card); /* 12px - Shape & Sizing System v5.0 */
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Zmniejszone z 10px */
    font-family: inherit;
}

button.account-type-btn {
    font: inherit;
    color: inherit;
}

.account-type-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 115, 170, 0.2);
}

.account-type-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 115, 170, 0.3);
}

.account-type-btn i {
    font-size: 28px; /* Zmniejszone z 36px */
    line-height: 1;
    display: block;
    margin: 0 0 8px 0; /* Zmniejszone z 10px */
    color: var(--primary-color);
    font-style: normal;
}

.account-type-btn.active i {
    color: #ffffff;
}

.account-type-btn span {
    display: block;
    font-size: 15px; /* Zmniejszone z 18px */
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--text-dark);
}

.account-type-btn.active span {
    color: #ffffff;
}

.account-type-btn small {
    display: block;
    font-size: 11px; /* Zmniejszone z 12px */
    line-height: 1.3;
    color: var(--text-light);
    margin: 3px 0 0 0; /* Zmniejszone z 5px */
}

.account-type-btn.active small {
    color: rgba(255, 255, 255, 0.9);
}

/* Formularze rejestracji */
.registration-form {
    display: none;
}

.registration-form.active {
    display: block;
}

.registration-form h3 {
    margin-bottom: 25px;
    color: var(--text-dark);
    font-size: var(--fs-h3);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

/* Większe odstępy między polami w formularzach rejestracji */
.registration-form .form-group {
    margin-bottom: 24px; /* Zwiększony odstęp */
}

.form-section {
    margin-bottom: 30px;
}

.form-section h4 {
    margin-bottom: 20px;
    color: #555;
    font-size: var(--fs-md);
    font-weight: 600;
}

/* ==========================================
   📱 RESPONSYWNOŚĆ - ZUNIFIKOWANE BREAKPOINTY
   ========================================== */

/* Desktop (1200px and below) */
@media (max-width: 1200px) {
    .auth-page {
        padding: 30px 20px;
    }
    
    .auth-wrapper,
    .registration-container {
        max-width: calc(100% - 60px);  /* 30px margin */
        padding: 40px 35px;
    }
    
    .auth-title {
        font-size: 30px;
    }
    
    .registration-title {
        font-size: 30px;
    }
}

/* Tablet Landscape (1024px and below) */
@media (max-width: 1024px) {
    .auth-page {
        padding: 25px 15px;
    }
    
    .auth-wrapper,
    .registration-container {
        max-width: calc(100% - 100px); /* 50px margin */
        padding: 35px 30px;
    }
    
    .auth-logo {
        font-size: 42px;
    }
    
    .auth-title {
        font-size: 26px;
    }
    
    .registration-title {
        font-size: 28px;
    }
    
    .auth-subtitle {
        font-size: 15px;
    }
    
    .account-type-buttons {
        gap: 15px;
    }
    
    .account-type-btn {
        min-height: 120px;
        padding: 20px 15px; /* Custom - Responsive mobile padding */
    }
    
    .account-type-btn i {
        font-size: 32px;
    }
    
    .account-type-btn span {
        font-size: var(--fs-base);
    }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    .auth-page {
        padding: 20px 15px; /* Custom - Responsive mobile page padding */
    }
    
    .auth-wrapper {
        padding: var(--card-padding-md); /* 20px - Shape & Sizing System v5.0 */
    }
    
    .auth-card,
    .registration-container {
        max-width: calc(100% - 80px);  /* 40px margin */
        padding: 30px 25px;
    }
    
    .auth-title {
        font-size: var(--fs-h3);
    }
    
    .registration-title {
        font-size: 28px;
    }
    
    .account-type-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .account-type-btn {
        max-width: 100%;
        min-height: auto;
    }
    
    .remember-group {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .forgot-password {
        text-align: left;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .auth-page {
        padding: 10px;
    }
    
    .auth-wrapper,
    .auth-card,
    .registration-container {
        max-width: calc(100% - 40px);  /* 20px margin */
        padding: 25px 20px;
    }
    
    .auth-logo {
        font-size: 40px;
        margin-bottom: 15px;
    }
    
    .auth-title {
        font-size: 22px;
    }
    
    .auth-subtitle {
        font-size: var(--fs-sm);
    }
    
    .registration-title {
        font-size: var(--fs-h3);
    }
    
    .auth-form input,
    .form-group input {
        font-size: var(--fs-base); /* Zapobiega zoomowaniu na iOS */
        padding: 13px 15px;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .auth-submit,
    .btn-submit,
    .btn-primary {
        padding: 14px;
        font-size: 15px;
        min-height: 44px; /* Touch target accessibility */
    }
    
    .account-type-btn {
        padding: 20px 15px; /* Custom - Responsive mobile compact */
        min-height: 100px;
    }
    
    .account-type-btn i {
        font-size: 28px;
    }
    
    .account-type-btn span {
        font-size: 15px;
    }
    
    .remember-group {
        gap: 12px;
    }
    
    .auth-divider,
    .divider {
        margin: 20px 0;
    }
}

/* Sekcje AGGRESSIVE OVERRIDES zostaną usunięte, aby uprościć kod */
/* Nowa, uporządkowana sekcja DARK MODE zastąpi wszystkie poprzednie reguły */

/* ==========================================
   DARK MODE - WYSOKA SPECYFICZNOŚĆ
   ========================================== */

/* Jednolite tło dla całej strony */
html[data-theme="dark"] body.portal-auth-page {
    background: #1a1a1a;
}

/* Upewnij się, że wszystkie kontenery-wrappery są przezroczyste */
/* ✅ Zwiększona specyficzność, aby nadpisać regułę z dark-mode.css */
html[data-theme="dark"] .portal-auth-page .site-content,
html[data-theme="dark"] .portal-auth-page .content-area,
html[data-theme="dark"] .portal-auth-page .entry-content {
    background: transparent;
}

/* ✅ Osobne, jeszcze bardziej specyficzne reguły dla kontenerów auth */
html[data-theme="dark"] .portal-auth-page .auth-wrapper {
    background: transparent;
}

/* Karta formularza - dedykowane tło */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .registration-container {
    background: #2c2c2c;
}

/* Nagłówki, podtytuły i tekst w trybie ciemnym */
html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .registration-title,
html[data-theme="dark"] .registration-container .hero-title,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .account-type-btn span {
    color: #f0f0f0;
}

html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .account-type-selector h3,
html[data-theme="dark"] .account-type-btn small,
html[data-theme="dark"] .forgot-password a,
html[data-theme="dark"] .remember-me label,
html[data-theme="dark"] .checkbox-group label {
    color: #a0a0a0;
}

/* Pola formularza w trybie ciemnym */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea {
    background: #3a3a3a;
    border-color: #555;
    color: #f0f0f0;
}

html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,115,170,0.2);
}

html[data-theme="dark"] .form-group input::placeholder {
    color: #888;
}

/* Separator "lub" w trybie ciemnym */
html[data-theme="dark"] .auth-divider span,
html[data-theme="dark"] .divider span {
    background: #2c2c2c;
    color: #a0a0a0;
}

html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after,
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after {
    background: #555;
}

/* Przyciski wyboru typu konta w trybie ciemnym */
html[data-theme="dark"] .account-type-btn {
    background: #3a3a3a;
    border-color: #555;
}

html[data-theme="dark"] .account-type-btn:hover {
    border-color: var(--primary-color);
}

html[data-theme="dark"] .account-type-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

html[data-theme="dark"] .account-type-btn.active i,
html[data-theme="dark"] .account-type-btn.active span,
html[data-theme="dark"] .account-type-btn.active small {
    color: white;
}