/**
 * ═════════════════════════════════════════════════════════════════════════════
 * PLIK: auth_user.css - Style paneli logowania i rejestracji dla użytkowników
 * ═════════════════════════════════════════════════════════════════════════════
 *
 * 📍 STRONY UŻYWAJĄCE TYCH STYLÓW:
 * ────────────────────────────────
 * • /login - Panel logowania
 * • /register - Panel rejestracji (dokładnie te same style)
 * • /forgot-password - Reset hasła
 * • /reset-password - Nowe hasło
 *
 * 🎯 STRUKTURA:
 * ─────────────
 * [Logo na środku]
 *
 *       ┌─────────────────────────────────┐
 *       │  Welcome Back!                  │  ← Header
 *       │  Sign in to your account        │
 *       │                                 │
 *       │  ╔═══════════════════════════╗  │
 *       │  ║ [Username or Email    ]  ║  │  ← Szklany box
 *       │  ║ [Password            ]   ║  │
 *       │  ║ [x] Remember  Forgot?    ║  │
 *       │  ║ [    Sign In    ]        ║  │
 *       │  ╚═══════════════════════════╝  │
 *       │                                 │
 *       │  Don't have account? Sign up   │
 *       └─────────────────────────────────┘
 *
 * 🎨 NAJWAŻNIEJSZE USTAWIENIA:
 * ───────────────────────────
 * • Szerokość panelu: max-width w .auth-form-container
 * • Tło szklane: background w .auth-form-box
 * • Blur: backdrop-filter w .auth-form-box
 * • Padding wewnętrzny: padding w .auth-form-box
 * • Zaokrąglenie: border-radius
 *
 * ═════════════════════════════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────────────────────────────────────────
   KONTENER FORMULARZA
   ────────────────────────────────────────────────────────────────────────── */

.auth-form-container {
    max-width: 480px;                     /* SZEROKOŚĆ PANELU - zwiększ dla szerszego */
    width: 100%;
    margin: 0 auto;                       /* Wyśrodkowanie */
    padding: 20px;                        /* Padding zewnętrzny */
}

/* ──────────────────────────────────────────────────────────────────────────
   NAGŁÓWEK (Welcome Back! / Join Us Today!)
   ────────────────────────────────────────────────────────────────────────── */

.auth-form-header {
    text-align: center;
    margin-bottom: 20px;                  /* ODSTĘP OD FORMULARZA */
}

.auth-form-header h1 {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-size: 42px;                      /* ROZMIAR TYTUŁU - powiększony z 38px na 42px */
    color: #fff;
    margin-bottom: 0px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* CIEŃ TEKSTU */
    font-weight: 600;
}

.auth-form-header p {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-size: 28px;                      /* ROZMIAR PODTYTUŁU - powiększony z 25px na 28px */
    color: rgba(255, 255, 255, 0.8);      /* 80% przezroczystości */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* CIEŃ TEKSTU */
    font-weight: 400;
}

/* ──────────────────────────────────────────────────────────────────────────
   SZKLANY BOX - Główny panel z formularzem
   ──────────────────────────────────────────────────────────────────────────

   🎨 TUTAJ ZMIENIASZ WYGLĄD PANELU LOGOWANIA/REJESTRACJI:
   ───────────────────────────────────────────────────────
   • Przezroczystość tła: rgba(0, 0, 0, 0.4) → zmień 0.4
   • Rozmycie: blur(10px) → zwiększ wartość
   • Ramka: border (kolor i grubość)
   • Zaokrąglenie rogów: border-radius
   • Padding wewnętrzny: padding (góra-dół lewo-prawo)
*/

.auth-form-box {
    /* TŁO - Glassmorphism */
    background: rgba(0, 0, 0, 0.4) !important; /* 40% czarne
                                                  ZWIĘKSZ 0.4 → 0.6 dla ciemniejszego
                                                  ZMNIEJSZ 0.4 → 0.2 dla jaśniejszego */

    /* BLUR (rozmycie tła za panelem) */
    backdrop-filter: blur(6px) !important; /* 6px blur
                                               ZWIĘKSZ dla większego rozmycia */
    -webkit-backdrop-filter: blur(10px) !important;

    /* RAMKA */
    border: 1px solid rgba(68, 68, 68, 0.7) !important; /* Szara 70% przezroczysta
                                                              ZWIĘKSZ przezroczystość dla jaśniejszej */

    /* CIEŃ */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important; /* Cień pod panelem */

    /* ZAOKRĄGLENIE ROGÓW */
    border-radius: 16px;                  /* ZAOKRĄGLENIE - zwiększ dla bardziej zaokrąglonych */

    /* PADDING (odstęp wewnętrzny) */
    padding: 40px 35px;                   /* 40px góra-dół, 35px lewo-prawo
                                             ZWIĘKSZ dla większego panelu */
}

/* ──────────────────────────────────────────────────────────────────────────
   POLA FORMULARZA (Username, Email, Password)
   ──────────────────────────────────────────────────────────────────────────

   🎨 DOSTOSOWANIE PÓL INPUT:
   ─────────────────────────
   • Tło: background (domyślnie i po focus)
   • Blur: backdrop-filter
   • Ramka domyślnie: rgba(68, 68, 68, 0.7) - szara
   • Ramka po kliknięciu: #808000 (oliwkowa)
   • Mgielka dookoła (box-shadow): rgba(153, 117, 33, 0.3) = #997521 (brązowo-żółta)
   • Wysokość: padding pionowy
   • Kolor placeholder: color w ::placeholder
*/

.auth-form-box .form-group {
    margin-bottom: 20px;                  /* ODSTĘP MIĘDZY POLAMI */
}

.auth-form-box .form-group label {
    display: block;
    margin-bottom: 8px;                   /* ODSTĘP OD INPUTA */
    font-weight: bold;
    color: #ddd;                          /* KOLOR LABELA */
    font-size: 16px;                      /* ROZMIAR LABELA - powiększony z 14px na 16px */
}

.auth-form-box .form-group input,
.auth-form-box .form-group select,
.auth-form-box .form-group textarea {
    width: 100%;
    padding: 12px 16px;                   /* PADDING (wysokość pola) - zwiększ dla wyższego */

    /* RAMKA */
    border: 1px solid rgba(68, 68, 68, 0.7); /* Szara 70% przezroczysta
                                                   ZMIEŃ przezroczystość dla jaśniejszej */
    border-radius: 8px;                   /* ZAOKRĄGLENIE */

    /* TEKST */
    font-size: 1em;                       /* ROZMIAR CZCIONKI */
    color: white;

    /* TŁO */
    background: rgba(0, 0, 0, 0.1);       /* 10% czarne
                                             ZWIĘKSZ dla ciemniejszego */
    backdrop-filter: blur(3px);           /* BLUR - zwiększ wartość */
    -webkit-backdrop-filter: blur(5px);

    transition: all 0.3s;
}

/* STAN PO KLIKNIĘCIU (focus) */
.auth-form-box .form-group input:focus,
.auth-form-box .form-group select:focus,
.auth-form-box .form-group textarea:focus {
    border-color: #ff8c00;                /* KOLOR RAMKI FOCUS (pomarańczowy) */
    outline: none;
    background: rgba(0, 0, 0, 0.4);       /* Ciemniejsze tło */
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.3); /* ŚWIECENIE (mgielka pomarańczowa) */
}

/* PLACEHOLDER (tekst w pustym polu) */
.auth-form-box .form-group input::placeholder,
.auth-form-box .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);      /* 50% biały przezroczysty */
}

.auth-form-box .form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.auth-form-box .form-group select {
    cursor: pointer;
}

.form-btn {
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-btn-primary {
    background: rgba(128, 128, 0, 0.3);
    color: #808000;
    border-color: rgba(128, 128, 0, 0.5);
}

.form-btn-primary:hover {
    background: rgba(128, 128, 0, 0.5);
    border-color: #808000;
    box-shadow: 0 0 20px rgba(153, 117, 33, 0.3);
}

.form-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.form-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Password Toggle Icon Styles */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    padding-right: 40px;
    flex-grow: 1;
}

.password-toggle-icon {
    position: absolute;
    right: 15px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8em;
    z-index: 10;
}

.password-toggle-icon:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* ──────────────────────────────────────────────────────────────────────────
   REMEMBER ME & FORGOT PASSWORD
   ────────────────────────────────────────────────────────────────────────── */

.auth-options-row {
    display: flex;
    justify-content: space-between;       /* Rozciągnięcie na lewo i prawo */
    align-items: center;
    margin: 15px 0;                       /* ODSTĘP GÓRA-DÓŁ */
    font-size: 16px;                      /* Powiększony z 14px na 16px */
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;                             /* ODSTĘP między checkbox a tekstem */
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.auth-remember input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.auth-forgot-link {
    color: #997521;                       /* KOLOR LINKU (brązowo-żółty) - ZMIEŃ TUTAJ */
    text-decoration: none;
    font-weight: 500;
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    transition: all 0.3s;
}

.auth-forgot-link:hover {
    color: #808000;                       /* KOLOR HOVER (oliwkowy) */
    text-shadow: 0 0 10px rgba(153, 117, 33, 0.5); /* ŚWIECENIE */
}

/* ──────────────────────────────────────────────────────────────────────────
   PRZYCISK SIGN IN / CREATE ACCOUNT
   ──────────────────────────────────────────────────────────────────────────

   🎨 DOSTOSOWANIE PRZYCISKU:
   ─────────────────────────
   • Kolor tła: background (czerwony przezroczysty)
   • Kolor ramki: border (czerwony)
   • Wysokość: padding
   • Świecenie hover: box-shadow
   • Uniesienie hover: transform
*/

.auth-form-box .btn,
.auth-form-box button[type="submit"] {
    width: 100%;                          /* Szerokość 100% */
    padding: 14px;                        /* WYSOKOŚĆ PRZYCISKU - zwiększ dla wyższego */

    /* TŁO */
    background: rgba(239, 68, 68, 0.15);  /* Przezroczyste czerwone
                                             ZWIĘKSZ 0.15 → 0.3 dla ciemniejszego */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* RAMKA */
    border: 1px solid rgba(239, 68, 68, 0.4); /* Czerwona ramka
                                                ZWIĘKSZ przezroczystość dla jaśniejszej */
    border-radius: 10px;                  /* ZAOKRĄGLENIE */

    /* TEKST */
    color: #fff;
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-size: 22px;                      /* ROZMIAR TEKSTU - powiększony z 18px na 22px */
    font-weight: 600;

    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

/* HOVER NA PRZYCISKU */
.auth-form-box .btn:hover,
.auth-form-box button[type="submit"]:hover {
    background: rgba(239, 68, 68, 0.15);  /* Ciemniejsze tło */
    border-color: #CC0000;                /* Pełny kolor ramki */
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4); /* ŚWIECENIE - zwiększ blur */
    transform: translateY(-2px);          /* UNIESIENIE O 2px */
}

.auth-form-box .admin-login-btn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(196, 2, 51, 0.3) 100%);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ffffff;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.auth-form-box .admin-login-btn:hover {
    background: linear-gradient(135deg, rgba(196, 2, 51, 0.3) 0%, rgba(196, 2, 51, 0.5) 100%);
    border-color: #CC0000;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
}

.auth-form-box .form-group small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;                      /* Powiększony z 12px na 14px */
}

/* ──────────────────────────────────────────────────────────────────────────
   LINK DO REJESTRACJI (Don't have account? Sign up)
   ────────────────────────────────────────────────────────────────────────── */

.auth-link-section {
    text-align: center;
    margin-top: 20px;                     /* ODSTĘP OD PRZYCISKU */
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linia oddzielająca */
}

.auth-link-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;                      /* Powiększony z 14px na 16px */
    margin: 0;
}

.auth-link-section a {
    color: #997521;                       /* KOLOR LINKU (brązowo-żółty) - ZMIEŃ TUTAJ */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.auth-link-section a:hover {
    color: #808000;                       /* KOLOR HOVER (oliwkowy) */
    text-shadow: 0 0 10px rgba(153, 117, 33, 0.5); /* ŚWIECENIE */
}


/* ═════════════════════════════════════════════════════════════════════════════
   PANEL REJESTRACJI
   ═════════════════════════════════════════════════════════════════════════════

   ✅ UWAGA: Panel rejestracji używa DOKŁADNIE TYCH SAMYCH STYLÓW co panel logowania!

   📍 Różnice to tylko HTML:
   ────────────────────────
   • Więcej pól (Username, Email, Password, Confirm Password)
   • Checkbox "Terms & Conditions"
   • Inny nagłówek ("Join Us Today!")
   • Link "Already have account? Sign in"

   🎨 Aby zmienić wygląd rejestracji - edytuj powyższe style
*/


/* ═════════════════════════════════════════════════════════════════════════════
   POPRAWKI AUTOFILL (wypełnienie automatyczne przez przeglądarkę)
   ═════════════════════════════════════════════════════════════════════════════ */

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active,
.form-group select:-webkit-autofill,
.form-group select:-webkit-autofill:hover,
.form-group select:-webkit-autofill:focus,
.form-group select:-webkit-autofill:active,
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill:active {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.3) inset !important;
    box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.3) inset !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transition: background-color 5000s ease-in-out 0s;
    font-family: 'Teko', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
}

.auth-form-box .form-group input:-webkit-autofill,
.auth-form-box .form-group input:-webkit-autofill:hover,
.auth-form-box .form-group input:-webkit-autofill:focus,
.auth-form-box .form-group input:-webkit-autofill:active {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.4) inset !important;
    box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.4) inset !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    font-family: 'Teko', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
}

/* Nagłówek strony auth (tylko logo) */
.user-header.auth-page-header {
    /* Używa tych samych stylów co .user-header */
}

/* Formularze auth - czcionka Teko */
.auth-form-box .form-group label {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;                      /* Powiększony z 18px na 20px */
}

.auth-form-box .form-group input,
.auth-form-box .form-group select,
.auth-form-box .form-group textarea {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-size: 20px;                      /* Powiększony z 18px na 20px */
    font-weight: 400;
}

.auth-form-box .form-group input::placeholder,
.auth-form-box .form-group textarea::placeholder {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.auth-form-box .form-group small {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.auth-remember,
.auth-remember span {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
}

.auth-link-section p,
.auth-link-section a {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
}

/* Pole ostrzegawcze logowania administratora */
.admin-warning-box {
    background: rgba(239, 68, 68, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px 0 rgba(239, 68, 68, 0.2);
}

.admin-warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ff6b6b;
    margin-bottom: 10px;
}

.admin-warning-header i {
    font-size: 18px;
    color: #ef4444;
}

.admin-warning-header strong {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admin-warning-text {
    margin: 0;
    padding-left: 28px;
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.admin-info-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-info-footer p {
    font-family: 'Teko', Helvetica, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;                      /* Powiększony z 14px na 16px */
    font-weight: 400;
    margin: 0;
}

.admin-info-footer i {
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.5);
}

/* ═════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Media Queries
   ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    .auth-form-container {
        padding: 10px;
    }

    .auth-form-box {
        padding: 30px 25px;
    }

    .auth-form-header h1 {
        font-size: 26px;
    }

    .auth-options-row {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   KONIEC PLIKU auth_user.css
   ═════════════════════════════════════════════════════════════════════════════ */

.auth-form-box .form-group input:-webkit-autofill,
.auth-form-box .form-group input:-webkit-autofill:hover,
.auth-form-box .form-group input:-webkit-autofill:focus,
.auth-form-box .form-group input:-webkit-autofill:active {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.4) inset !important;
    box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.4) inset !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    font-family: 'Teko', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
}