/* WPM Login Theme CSS */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Zmienne CSS są teraz generowane dynamicznie przez PHP */

/* Tło strony logowania */
body.login {
    background: var(--wpm-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Animowane tło */
body.login::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(233, 30, 99, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(66, 133, 244, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Kontener formularza logowania */
#login {
    width: 400px !important;
    padding: 2rem !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Formularz logowania */
.login form {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--wpm-radius) !important;
    box-shadow: var(--wpm-shadow) !important;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    overflow: hidden !important;
}

.login #loginform::before,.login #lostpasswordform::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wpm-primary);
}

.login .language-switcher::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wpm-primary);
}

/* Logo/nagłówek */
.login h1 {
    text-align: center !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

/* Ukryj kompletnie wszystkie teksty logo i wyświetl tylko obraz */
.login h1 a {
    display: block !important;
    width: 200px !important;
    height: 80px !important;
    margin: 0 auto !important;
    position: relative !important;
    text-decoration: none !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    /* Ukryj wszelkie teksty kompletnie */
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    color: transparent !important;
}

/* Ukryj wszelkie pseudo-elementy z tekstami */
.login h1 a:before,
.login h1 a:after {
    content: "" !important;
    display: none !important;
}

/* Efekt hover dla logo */
.login h1 a:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 5px 15px rgba(66, 133, 244, 0.3)) !important;
}

/* Pola formularza */
.login form .input {
    background: white !important;
    border: 2px solid var(--wpm-border) !important;
    border-radius: var(--wpm-radius) !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.login form .input:focus {
    border-color: var(--wpm-primary) !important;
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* Etykiety */
.login form label {
    color: var(--wpm-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* Przycisk logowania */
.login form .button-primary {
    background: var(--wpm-primary) !important;
    border: none !important;
    border-radius: var(--wpm-radius) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 16px 24px !important;
    width: 100% !important;
    margin-top: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-shadow: none !important;
    box-shadow: var(--wpm-shadow) !important;
}

.login form .button-primary:hover,
.login form .button-primary:focus {
    background: var(--wpm-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px rgba(66, 133, 244, 0.3) !important;
}

/* Checkbox "Zapamiętaj mnie" */
.login form .forgetmenot {
    margin: 1.5rem 0 !important;
    display: flex !important;
    align-items: center !important;
}

.login form .forgetmenot input[type="checkbox"] {
    margin-right: 0.75rem !important;
    transform: scale(1.3) !important;
    accent-color: var(--wpm-primary) !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.login form .forgetmenot label {
    color: var(--wpm-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin: 0 !important;
    user-select: none !important;
}

/* Linki - polityka prywatności na końcu */
.login #nav, .login #backtoblog {
    text-align: center !important;
    margin: 1rem 0 !important;
}

/* Link do polityki prywatności */
.login .privacy-policy-link {
    text-align: center !important;
    margin: 1rem 0 2rem 0 !important;
}

.login .privacy-policy-link a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--wpm-radius) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.login .privacy-policy-link a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.login #nav a, .login #backtoblog a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--wpm-radius) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin: 0 0.5rem !important;
}

.login #nav a:hover, .login #backtoblog a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Komunikaty błędów */
.login #login_error, .login .message {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    border-left: 4px solid #f56565 !important;
    border-radius: var(--wpm-radius) !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 2rem !important;
    box-shadow: var(--wpm-shadow) !important;
}

.login .message {
    border-left-color: #48bb78 !important;
}

/* Responsywność */
@media (max-width: 480px) {
    #login {
        width: 90% !important;
        padding: 1rem !important;
    }
    
    .login form {
        padding: 2rem 1.5rem !important;
    }
    
    .login h1 a {
        width: 150px !important;
        height: 60px !important;
    }
}

/* Animacja pojawienia się formularza */
.login form {
    animation: slideUp 0.6s ease-out;
}

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

/* Dodatkowe ulepszenia dla loading */
.login form .button-primary:active {
    transform: translateY(0) !important;
}

/* Kontener logowania z flexbox dla porządku elementów */
#login {
    width: 400px !important;
    padding: 2rem !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Style dla wersji językowych - czyste tło jak formularz */
.login .language-switcher {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 74vh !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--wpm-radius) !important;
    box-shadow: var(--wpm-shadow) !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    width: 360px !important;
    max-width: 90vw !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

/* Kontener inline dla ikony, selecta i przycisku - czyste tło */
.login .language-switcher form {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    backdrop-filter: none !important;
}

/* Ikona języka */
.login .language-switcher .dashicons {
    color: var(--wpm-text) !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Label ukryj ale zostaw dla accessibility */
.login .language-switcher label {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Select językowy ze strzałką */
.login .language-switcher select {
    background: var(--wpm-primary) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    color: white !important;
    border: none !important;
    border-radius: var(--wpm-radius) !important;
    padding: 8px 40px 8px 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2) !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.login .language-switcher select:hover {
    background: var(--wpm-hover) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    transform: translateY(-1px) !important;
}

/* Przycisk "Zmień" - jednolity styl */
.login .language-switcher input[type="submit"],
.login .language-switcher .button {
    background: var(--wpm-secondary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--wpm-radius) !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.2) !important;
    text-shadow: none !important;
}

.login .language-switcher input[type="submit"]:hover,
.login .language-switcher .button:hover {
    background: #C2185B !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.3) !important;
}

/* Polityka prywatności - dodaj margin żeby nie była zasłonięta */
.login .privacy-policy-page-link {
    margin-top: 8rem !important;
    margin-bottom: 2rem !important;
}

/* Responsywność na mobile */
@media (max-width: 480px) {
    .login .language-switcher form {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .login .language-switcher select {
        min-width: 200px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    .login .language-switcher input[type="submit"],
    .login .language-switcher .button {
        padding: 12px 24px !important;
        font-size: 16px !important;
        width: 100px !important;
    }
}

/* Dodatkowe nadpisania dla wszystkich elementów formularza */
.login input[type="text"],
.login input[type="email"], 
.login input[type="password"],
.login input[type="search"],
.login input[type="url"],
.login input[type="submit"],
.login button,
.login .button,
.login .button-primary,
.login .button-secondary,
.login select {
    border-radius: var(--wpm-radius) !important;
}

/* Nadpisania dla wszystkich linków i kontenerów */
.login a,
.login .notice,
.login .message,
.login #login_error,
.login .language-switcher,
.login form {
    border-radius: var(--wpm-radius) !important;
}