html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* görgetés tiltása */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: url('../assets/images/backgroundRP1.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: flex-start; /* balra igazítás */
    align-items: center;          /* függőleges középre igazítás */
}

.whitelist-form {
    background: rgba(255, 255, 255, 0.38);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    max-width: 700px;
    width: 100%;
    position: fixed; /* fix pozíció a képernyőn */
    left: 50px;      /* bal oldali távolság a képernyő szélétől */
    max-height: 90vh;  /* belső görgetés ha kell */
    overflow-y: auto;
}

h2{text-align:center;margin-bottom:20px;color:#1a73e8;}
label{display:block;margin-top:15px;font-weight:600;color:#333;}
input,textarea,select{width:100%;padding:12px;margin-top:5px;border-radius:8px;border:1px solid #ccc;font-size:14px;transition:border 0.3s,box-shadow 0.3s;}
input:focus,textarea:focus,select:focus{outline:none;border-color: #330a75ff;box-shadow:0 0 5px rgba(33, 7, 68, 0.66);}
button{padding:14px;width:48%;border:none;border-radius:8px;background:#63369ec7;color:white;cursor:pointer;font-size:16px;transition:0.3s;margin-top:20px;}
button:hover{background: #592fa7ff;transform:scale(1.02);}
.progress-container{display:flex;margin-bottom:20px;}
.progress-step{flex:1;height:8px;background:#ccc;margin:0 5px;border-radius:4px;transition:background 0.3s;}
.progress-step.active{background:#1a73e8;}
.form-step{display:none;animation:fadeIn 0.5s;}
.form-step.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.personality-options{display:flex;justify-content:space-between;margin-top:10px;}
/* Karakter személyiség gombok */
.personality-options button {
    width:48%;
    color:white;
    font-weight:600;
    padding:12px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    position: relative; /* kell a ::before-hoz */
    transition:all 0.3s;
}

/* Utcai élet gomb – piros/alvilági gradient */
.personality-options button[data-value="Utcai élet"] {
    background: linear-gradient(135deg, #ff0000, #800000);
}

/* Törvény embere gomb – kék/jó világ gradient */
.personality-options button[data-value="Törvény embere"] {
    background: linear-gradient(135deg, #00bfff, #004080);
}

/* Kiválasztott állapot */
.personality-options button.selected {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Emotikon megjelenítése a kiválasztott gomb bal felső sarkában */
.personality-options button.selected::before {
    content: attr(data-icon);
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 18px;
}

@media(max-width:700px){button{width:100%;margin-top:15px;}.personality-options{flex-direction:column;gap:10px;}.personality-options button{width:100%;}}