/**
 * Forklife Chat Embed – Styles
 *
 * Sichtbare, unaufdringliche Platzhalter-Notiz an der Shortcode-Position.
 * Das eigentliche Widget wird per JS ans Ende von #boxed-wrapper verschoben.
 */

.forklife-placeholder {
    /* Standardmäßig sichtbar: deckt das Loading-Fenster ab (bevor embed.js
     * .forklife-embed--inline mountet) UND den Fokusmodus (wenn das Inline-
     * Widget zum Fullscreen-Overlay wird und seinen Platz verliert).
     * Im Fokusmodus liegt es hinter dem Modal-Overlay.
     * Reserviert via margin-bottom die Höhe des Widgets => kein Layout-Sprung. */
    display: block;
    padding: 0.75em 1em;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.875em;
    line-height: 1.4;
    margin-bottom: calc(587px + 4%);
}

/* JS setzt diese Klasse, sobald das Embed inline gemountet ist
 * (nicht im Loading-Zustand und nicht im Fokusmodus). */
.forklife-placeholder.is-hidden {
    display: none;
}

/* Passwort-Gate (Demo) – visuell nahe an WordPress' .post-password-form. */
.forklife-password-form {
    margin: 1.5em 0 500px;
}

.forklife-password-form > p {
    margin: 0.75em 0;
}

/* Zweite <p> (Label + Input + Submit) als Flex-Zeile, damit nichts überlappt. */
.forklife-password-form > p:last-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.75em;
}

/* Label umschliesst Text + Passwort-Input; bleibt zusammen. */
.forklife-password-form label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
    hyphens: none;
    word-break: keep-all;
}

/* Fusion-Theme erzwingt width:100% auf form-Inputs – hier fester Wert. */
.forklife-password-form input[type="password"] {
    width: 14em;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 0.4em 0.6em;
    box-sizing: border-box;
    vertical-align: middle;
    border: 1px solid lightgrey;
}

.forklife-password-form input[type="submit"] {
    flex: 0 0 auto;
    vertical-align: middle;
}

.forklife-embed--inline {
    margin: 0 auto 4% auto;
}

.forklife-placeholder__label::before {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.5em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    vertical-align: baseline;
}