/* Edit Profile Modal Styles - angepasst an bestehendes Design */
#edit-profile-modal .modal-card {
    width: 90%;
    max-width: 500px;
    background-color: #333;
    color: white;
}

#edit-profile-modal .modal-card-head {
    background-color: #333;
    border-bottom: 2px solid #C0392B;
}

#edit-profile-modal .modal-card-title {
    color: white;
    font-family: 'Titillium Web', sans-serif;
    font-size: 1.5rem;
}

#edit-profile-modal .modal-card-body {
    background-color: #333;
    color: white;
}

#edit-profile-modal .modal-card-foot {
    justify-content: space-between;
    background-color: #333;
    border-top: 2px solid #C0392B;
}

#edit-profile-modal .label {
    color: white;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: bold;
}

#edit-profile-modal .input {
    background-color: #252525;
    border: 2px solid #C0392B;
    color: white;
    border-radius: 6px;
}

#edit-profile-modal .input:focus {
    border-color: #C0392B !important;
    box-shadow: 0 0 0 0.125em rgb(192 57 43 / 25%);
    background-color: #37414e;
    color: white;
}

#edit-profile-modal .input::placeholder {
    color: #bbb;
}

#edit-profile-modal .field {
    margin-bottom: 1.5rem;
}

#edit-profile-modal .button.is-success {
    width: auto;
    background-color: #C0392B;
    border-color: #C0392B;
    color: white;
    border-radius: 6px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: bold;
}

#edit-profile-modal .button.is-success:hover {
    background-color: #a0321f;
    border-color: #a0321f;
}

#edit-profile-modal .button:not(.is-success) {
    width: auto;
    background-color: #37414e;
    color: white;
    border: 2px solid #C0392B;
    border-radius: 6px;
    font-family: 'Open Sans', Arial, sans-serif;
}

#edit-profile-modal .button:not(.is-success):hover {
    background-color: #404040;
}

#edit-profile-modal .delete {
    background-color: transparent;
    border: none;
    color: white;
}

#edit-profile-modal .delete:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* Responsive */
@media screen and (width <= 768px) {
    #edit-profile-modal .modal-card {
        width: 95%;
        margin: 1rem;
    }
}