/*
 * Party Gate – Login-Formular Styles
 * ====================================
 * Diese Datei steuert das Aussehen der Passwort-Eingabemaske.
 *
 * Wichtige Variablen:
 *   --pg-bg          Hintergrundfarbe der Seite
 *   --pg-accent      Akzentfarbe (Input-Hintergrund, Button)
 *   --pg-text        Textfarbe
 *   --pg-radius      Border-Radius für Felder / Buttons
 */

/* ── PWRFont aus dem Theme laden ───────────────────────── */
@font-face {
    font-family: 'PWRFont';
    src: url('/wp-content/themes/knappetheme/fonts/PWRFontVF.ttf') format('truetype'),
         url('/wp-content/themes/knappetheme/fonts/PWRFontVF.woff') format('woff');
    font-weight: 500 900;
    font-style: normal;
}

/* ── Variablen ─────────────────────────────────────────── */
:root {
    --pg-bg:          #000000;
    --pg-accent:      #ff3200;
    --pg-accent-dark: #cc2800;
    --pg-text:        #ffffff;
    --pg-radius:      1rem;
    --pg-font:        'PWRFont', system-ui, -apple-system, sans-serif;
}

/* ── Reset / Base ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Body ──────────────────────────────────────────────── */
.party-gate-body {
    min-height:      100vh;
    background:      var(--pg-bg);
    color:           var(--pg-text);
    font-family:     var(--pg-font);
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
}

/* ── Wrapper ───────────────────────────────────────────── */
.party-gate-wrap {
    position:         relative;
    z-index:          10;
    width:            100%;
    max-width:        420px;
    padding:          2rem 1.5rem;
}

/* ── Formular ──────────────────────────────────────────── */
.party-gate-form {
    display:         flex;
    flex-direction:  column;
    gap:             1rem;
}

/* ── Eingabefeld ───────────────────────────────────────── */
.party-gate-field input[type="password"] {
    width:            100%;
    padding:          1.5rem 1.2rem;
    background:       var(--pg-accent);
    color:            var(--pg-text);
    border:           none;
    text-align: center;
    border-radius:    var(--pg-radius);
    font-size:        1.8rem;
    font-family:      var(--pg-font);
    outline:          none;
    letter-spacing:   0.08em;
    transition:       box-shadow 0.2s ease, background 0.2s ease,
                      font-size 0.15s ease, letter-spacing 0.15s ease;
                        box-shadow: 0 0 20px red;
}

/*
 * Passwort-Punkte größer: greift nur wenn Inhalt vorhanden (:not(:placeholder-shown))
 * Der Placeholder-Text selbst bleibt durch ::placeholder klein.
 */


/* Placeholder bleibt normal groß – font-size via inherit würde den Wert von :not()
   übernehmen, daher explizit zurücksetzen */
.party-gate-field input[type="password"]::placeholder {
    color:          rgba(255, 255, 255, 0.6);
    letter-spacing: 0.08em;
}

.party-gate-field input[type="password"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 50, 0, 0.45),
                0 0 24px rgba(255, 50, 0, 0.25);
    background: var(--pg-accent-dark);
}

/* ── Button ────────────────────────────────────────────── */
.party-gate-btn {
    padding:          0.85rem 1.2rem;
    background:       transparent;
    color:            var(--pg-text);
    border:           4px solid var(--pg-accent);
    border-radius:    var(--pg-radius);
    font-size:        1rem;
    font-family:      var(--pg-font);
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    cursor:           pointer;
    transition:       background 0.2s ease, color 0.2s ease;
        box-shadow: 0 0 20px red;
}

.party-gate-btn:hover,
.party-gate-btn:focus {
    background: var(--pg-accent);
    color:      var(--pg-text);
    outline:    none;
}

.party-gate-btn:active {
    background: var(--pg-accent-dark);
}

/* ── Fehlermeldung ─────────────────────────────────────── */
.party-gate-error {
    color:       var(--pg-accent);
    font-size:   0.875rem;
    text-align:  center;
    animation:   pg-shake 0.4s ease;
}

@keyframes pg-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
    .party-gate-wrap {
        padding: 1.5rem 1rem;
    }
}