/* SimplyPWPage - frontend.css */

/* Grund-Wrapper – eher neutral, damit Templates ihn leicht überschreiben können */
.simplypwpage-frontend {
    margin: 20px 0 30px;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 0.95em;
    background-color: transparent;
}

/* Gemeinsame Basis für beide Zustände */
.simplypwpage-status {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* =========================================
   GESPERRT: großer Hinweis mit rotem Rahmen
   ========================================= */

.simplypwpage-status-locked {
    display: block;
    margin: 20px 0;
    padding: 15px 20px;

    border: 3px solid #e08a8a;   /* kräftiger, roter Rahmen */
    border-radius: 3px;
    background: #fff8f8;         /* leicht rötlicher Hintergrund */
}

.simplypwpage-status-locked .simplypwpage-text {
    margin: 0 0 10px;
}

/* =========================================
   EINGELOGGT: kleine grüne Box rechts
   ========================================= */

.simplypwpage-status-logged-in {
    display: flex;
    justify-content: flex-end;   /* rechtsbündig innerhalb des Wrappers */
    align-items: center;
    margin: 0 0 10px;
}

.simplypwpage-status-logged-in .simplypwpage-label {
    display: inline-block;
    font-weight: bold;
    margin-right: 8px;

    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid #c2e2a2;
    background: #f5ffe9;
}

/* Formular im Logged-in-Status direkt daneben */
.simplypwpage-form-logout {
    display: inline-block;
    margin: 0 0 0 4px;
}

/* =========================================
   Formulare & Eingabefelder
   ========================================= */

.simplypwpage-form {
    margin: 0;
}

.simplypwpage-form-login,
.simplypwpage-form-logout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

.simplypwpage-row {
    margin: 0.25em 0;
}

.simplypwpage-input-password {
    padding: 0.4em 0.6em;
    border: 1px solid #d0b57a;
    border-radius: 3px;
    min-width: 200px;
    max-width: 100%;
    box-sizing: border-box;
    background: #fffbe0; /* leicht gelblicher Hintergrund */
}

/* =========================================
   Buttons
   ========================================= */

.simplypwpage-button {
    display: inline-block;
    padding: 0.4em 0.8em;
    border-radius: 3px;
    border: 1px solid #888;
    background-color: #f4f4f4;
    cursor: pointer;
    font-size: 0.95em;

    /* Safari / iOS: eigenes Button-Theme abschalten */
    -webkit-appearance: none;
    appearance: none;
    color: #333;
    font-weight: bold;
    opacity: 1;
}

.simplypwpage-button:hover,
.simplypwpage-button:focus {
    background-color: #e0e0e0;
}

.simplypwpage-button:active {
    background-color: #d5d5d5;
}

/* Logout-Button darf ein bisschen dezenter sein */
.simplypwpage-button-logout {
    opacity: 0.9;
}

/* =========================================
   Meldungen (Fehler / Erfolg)
   ========================================= */

.simplypwpage-message {
    padding: 0.4em 0.6em;
    border-radius: 3px;
    margin: 0.25em 0;
    font-size: 0.9em;
}

.simplypwpage-error {
    background-color: #ffeaea;
    border: 1px solid #e0a0a0;
    color: #b00000;
}

.simplypwpage-success {
    background-color: #eaffea;
    border: 1px solid #a0e0a0;
    color: #006600;
}

/* =========================================
   Mobile – kleine Bildschirme
   ========================================= */

@media screen and (max-width: 480px) {

    .simplypwpage-status-logged-in {
        justify-content: flex-start; /* auf sehr schmalen Screens nach links */
    }

    .simplypwpage-form-login {
        flex-direction: column;
        align-items: flex-start;
    }

    .simplypwpage-input-password {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}