#doboz {
    background: transparent;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
}

html,
body {
    height: 100%;
    width: 100%;
    user-select: none;
}

.email {
    background: rgba(255, 255, 255, 0.075);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.email::placeholder {
    color: white;
}

.email:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.jelszo {
    background: rgba(255, 255, 255, 0.075);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.jelszo::placeholder {
    color: white;
}

.jelszo:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body {
    font-family: Verdana;
}

.btn-link {
    text-decoration: none;
}

.btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.red {
    background: transparent;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-image: radial-gradient(black 1px, transparent 0);
    max-width: 450px;
}

.error-icon {
    fill: rgba(255, 0, 0, 0.6);
}

/* ===== RESZPONZIVITÁS ===== */

/* Asztali: az eredeti position:absolute helyett flexbox centering */
.login-center {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

/* Tablet / kis képernyő */
@media screen and (max-width: 842px) {
    #doboz {
        width: 420.58px;
    }
}

/* Kis telefon */
@media screen and (max-width: 450px) {
    #doboz {
        width: 100%;
    }

    .red {
        width: 100%;
    }
}

/* Nagyon kis telefon */
@media screen and (max-width: 360px) {
    #doboz .p-4 {
        padding: 16px !important;
    }

    #doboz .ps-4,
    #doboz .pe-4 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Landscape mód – hogy ne kelljen görgetni */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .login-center {
        justify-content: flex-start;
        padding: 12px 0;
    }
}



/* ─── ANIMATED BACKGROUND ─── */
.background {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 15% 25%, #4a8fd4 0%, transparent 45%),
        radial-gradient(circle at 85% 20%, #2a6fbb 0%, transparent 45%),
        radial-gradient(circle at 70% 75%, #8a7abf 0%, transparent 50%),
        linear-gradient(135deg, #3a7fd0, #7a6ab8);
    animation: bgShift 12s ease-in-out infinite alternate;
}

@keyframes bgShift {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    100% {
        filter: hue-rotate(15deg) brightness(1.05);
    }
}