/* ==================================================
   Event-Anmeldung – Frontend
   Modern Dark × Community
   Hintergrund & Hero 1:1 wie Event-Details
   Datei: frontend-event-register.css
================================================== */

/* =========================
   HERO (IDENTISCH)
========================= */

.frontend-event-details-hero {
    position: relative;
    padding: 3rem 1.5rem 2.5rem;

    background:
        radial-gradient(
            700px 260px at 50% 0%,
            rgba(120, 64, 255, 0.28),
            transparent 70%
        );

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================
   Content Wrapper
========================= */

.frontend-event-details-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* =========================
   Formular-Card (Glass)
========================= */

.frontend-event-register-card {
    background: linear-gradient(
        180deg,
        rgba(22, 26, 42, 0.85),
        rgba(14, 16, 24, 0.85)
    );

    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    padding: 22px 24px;
}

/* =========================
   Formular
========================= */

.frontend-event-register {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* =========================
   Section-Überschriften
========================= */

.frontend-event-register h3 {
    margin-top: 10px;
    margin-bottom: 6px;

    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2px;

    color: #ffffff;
    opacity: 0.95;
}

.frontend-event-register h3:not(:first-of-type) {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================
   Formularfelder
========================= */

.frontend-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.frontend-form-field label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
}

.frontend-form-field small {
    font-size: 0.8rem;
    opacity: 0.75;
    line-height: 1.4;
}

.frontend-form-field input[type="text"],
.frontend-form-field input[type="email"],
.frontend-form-field select,
.frontend-form-field textarea {
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-size: 1rem;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.frontend-form-field textarea {
    resize: vertical;
    min-height: 60px;
}

.frontend-form-field input:focus,
.frontend-form-field select:focus,
.frontend-form-field textarea:focus {
    outline: none;
    border-color: rgba(120, 64, 255, 0.8);
    background: rgba(255, 255, 255, 0.09);
}

/* =========================
   SELECT / DROPDOWN
========================= */

.frontend-form-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.frontend-form-field select option {
    background-color: #141625;
    color: #ffffff;
}

/* =========================
   ROLLEN-AUSWAHL (Checkbox-Kacheln)
========================= */

.frontend-form-field input[type="checkbox"] {
    accent-color: rgb(120, 64, 255);
}

.frontend-form-field > label input[type="checkbox"] {
    margin-right: 6px;
}

.frontend-form-field
label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);

    cursor: pointer;
    font-weight: 500;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.frontend-form-field
label:has(input[type="checkbox"]):hover {
    background: rgba(255, 255, 255, 0.1);
}

.frontend-form-field
label:has(input[type="checkbox"]:checked) {
    border-color: rgba(120, 64, 255, 0.7);
    background: rgba(120, 64, 255, 0.15);
}

/* =========================
   Event-Tage
========================= */

.frontend-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;

    font-size: 0.95rem;
    transition: background 0.15s ease;
}

.frontend-checkbox:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =========================
   Helfer-Textfeld
========================= */

.frontend-form-field textarea[name="helper_note"] {
    margin-top: 6px;
    font-size: 0.95rem;
}

/* =========================
   Sichtbarkeit (Ja / Nein)
========================= */

#showPublicYes,
#showPublicNo {
    transform: scale(1.05);
}

/* =========================
   Aktionen / CTA
========================= */

.frontend-event-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* =========================
   Teilnahmebedingungen
========================= */

.frontend-event-registration-terms {
    margin-top: 28px;
    padding: 18px 20px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.frontend-event-registration-terms a {
    color: rgb(150, 120, 255);
    text-decoration: underline;
}

.frontend-event-registration-terms a:hover {
    text-decoration: none;
}

/* =========================
   Responsive
========================= */

@media (max-width: 600px) {
    .frontend-event-details-hero {
        padding: 2.5rem 1rem 2rem;
    }

    .frontend-event-register-card {
        padding: 18px;
    }
}


/* =========================
   Teilnahmebedingungen – klappbar
========================= */

.frontend-event-registration-terms.is-collapsible {
    margin-top: 2.2rem;

    background: linear-gradient(
        180deg,
        rgba(22, 26, 42, 0.75),
        rgba(14, 16, 24, 0.75)
    );

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

/* Klickbarer Kopf */
.frontend-event-registration-terms summary {
    cursor: pointer;
    padding: 18px 22px;

    font-weight: 600;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    list-style: none;
}

/* Pfeil */
.frontend-event-registration-terms summary::after {
    content: "▾";
    font-size: 1.2rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.frontend-event-registration-terms[open] summary::after {
    transform: rotate(180deg);
}

/* Textbereich */
.registration-terms-content {
    padding: 0 22px 22px;

    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(230, 231, 238, 0.9);
}

/* =========================
   Teilnahmebedingungen – Hinweis wenn nicht akzeptiert
========================= */

.frontend-event-registration-terms.needs-accept {
    border-color: rgba(255, 200, 80, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 200, 80, 0.35);
}

.frontend-event-registration-terms.needs-accept summary {
    color: #ffd966;
}

.frontend-event-registration-terms.needs-accept summary::after {
    opacity: 1;
}

.age-check-result {
    margin-top: 6px;
    font-size: 0.85rem;
}

.age-check-result.ok {
    color: #4dffb3;
}

.age-check-result.error {
    color: #ff8c8c;
}