/**
 * Block: Member MV-Anmeldung
 *
 * Anmeldeformular zur Mitgliederversammlung + Summer Lounge.
 * Drei Render-States (logged-out / deadline-passed / form). Form mit
 * zwei Card-Sektionen (MV + Summer Lounge), optional dritte Sektion
 * (Stimmrechtsübertragung) conditional eingeblendet.
 *
 * @package DTVP
 * @since   1.16.0
 */

/* ==========================================================================
   Block Wrapper – Color Schemes (analog zu anderen Member-Blöcken)
   ========================================================================== */

.member-mv-anmeldung--green        { --mva-gradient-primary: #1a6b4a; --mva-gradient-mid: #0a2e1e; --mva-gradient-dark: var(--color-hero-dark, #0d0d0d); --mva-bloom-color: rgba(0,180,120,0.22); }
.member-mv-anmeldung--purple       { --mva-gradient-primary: #8a5cf5; --mva-gradient-mid: #3a0e52; --mva-gradient-dark: var(--color-hero-dark, #0d0d0d); --mva-bloom-color: rgba(138,92,245,0.25); }
.member-mv-anmeldung--magenta      { --mva-gradient-primary: var(--color-hero-purple, #7a1580); --mva-gradient-mid: var(--color-hero-mid, #2e0a3e); --mva-gradient-dark: var(--color-hero-dark, #0d0d0d); --mva-bloom-color: rgba(220,0,110,0.32); }
.member-mv-anmeldung--lime-green   { --mva-gradient-primary: #A6BF17; --mva-gradient-mid: #10977C; --mva-gradient-dark: var(--color-hero-dark, #0d0d0d); --mva-bloom-color: rgba(166,191,23,0.28); }
.member-mv-anmeldung--beige        { --mva-gradient-primary: #e1dbcb; --mva-gradient-mid: #a89e8a; --mva-gradient-dark: #6b6152; --mva-bloom-color: rgba(225,219,203,0.3); }
.member-mv-anmeldung--pink-dark    { --mva-gradient-primary: #E4006F; --mva-gradient-mid: #92003F; --mva-gradient-dark: #500022; --mva-bloom-color: rgba(228,0,111,0.28); }
.member-mv-anmeldung--orange-dark  { --mva-gradient-primary: #F4911C; --mva-gradient-mid: #B86516; --mva-gradient-dark: #7C3A10; --mva-bloom-color: rgba(244,145,28,0.28); }
.member-mv-anmeldung--blue-dark    { --mva-gradient-primary: #02AECD; --mva-gradient-mid: #01628D; --mva-gradient-dark: #00154E; --mva-bloom-color: rgba(2,174,205,0.28); }

.member-mv-anmeldung--solid {
    background-color: var(--color-white, #ffffff);
}

@keyframes mva-gradient-shift {
    0%   { background-position: 40% 55%; filter: hue-rotate(0deg) brightness(1); }
    33%  { background-position: 48% 45%; filter: hue-rotate(20deg) brightness(1.1); }
    66%  { background-position: 35% 58%; filter: hue-rotate(-12deg) brightness(0.92); }
    100% { background-position: 40% 55%; filter: hue-rotate(0deg) brightness(1); }
}

@keyframes mva-bloom {
    0%   { opacity: 0.3; transform: scale(1); }
    50%  { opacity: 0.9; transform: scale(1.12); }
    100% { opacity: 0.3; transform: scale(1); }
}

/* ==========================================================================
   Block Wrapper
   ========================================================================== */

.member-mv-anmeldung {
    position: relative;
    z-index: var(--z-base, 1);
    width: 100%;
    overflow: hidden;
}

.member-mv-anmeldung--gradient {
    background: var(--mva-gradient-dark);
}

.member-mv-anmeldung__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.member-mv-anmeldung__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 65%, var(--mva-gradient-primary) 0%, var(--mva-gradient-mid) 36%, var(--mva-gradient-dark) 68%);
    background-size: 200% 200%;
    animation: mva-gradient-shift 14s ease-in-out infinite;
}

.member-mv-anmeldung__gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 40%, var(--mva-bloom-color) 0%, transparent 55%);
    animation: mva-bloom 14s ease-in-out infinite alternate;
}

/* ==========================================================================
   Inner / Header
   ========================================================================== */

.member-mv-anmeldung__inner {
    position: relative;
    z-index: var(--z-raised, 10);
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--container-padding, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
}

.member-mv-anmeldung__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    text-align: center;
}

.member-mv-anmeldung__eyebrow {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.3;
}

.member-mv-anmeldung__heading {
    margin: 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: var(--leading-tight, 1.2);
    letter-spacing: -0.02em;
}

.member-mv-anmeldung__intro {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-loose, 1.6);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Notice (Success / Login-Hint / Deadline)
   ========================================================================== */

.mva-notice {
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-radius: 12px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-normal, 1.5);
}

.mva-notice--success {
    background-color: #ecf7ed;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* ==========================================================================
   Card (Notice + Form-Sektionen)
   ========================================================================== */

.mva-card {
    border-radius: 20px;
    padding: var(--space-6, 1.5rem) var(--space-7, 1.75rem);
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    /* background-color + color werden inline gesetzt */
}

.mva-card--notice {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4, 1rem);
}

.mva-card__notice-text {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-normal, 1.5);
}

.mva-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.mva-card__title {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.2);
    letter-spacing: -0.01em;
}

.mva-card__meta {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    opacity: 0.85;
}

.mva-card__hint {
    opacity: 0.7;
    font-size: var(--text-xs, 0.75rem);
}

.mva-card__address {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    opacity: 0.85;
}

.mva-card__separator {
    margin: var(--space-4, 1rem) 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.2;
}

.mva-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

/* ==========================================================================
   Form / Toggles / Empfänger
   ========================================================================== */

.mva-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 1.25rem);
}

.mva-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    cursor: pointer;
    padding: var(--space-2, 0.5rem) 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-normal, 1.5);
}

.mva-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 2px 0 0;
    accent-color: var(--color-magenta, #e4006f);
    cursor: pointer;
}

.mva-toggle__label {
    flex: 1;
}

.mva-empfaenger {
    margin-top: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem);
    border-radius: 12px;
    background-color: color-mix(in srgb, currentColor 5%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.mva-empfaenger__title {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.mva-empfaenger__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
}

@media (max-width: 480px) {
    .mva-empfaenger__grid {
        grid-template-columns: 1fr;
    }
}

.mva-empfaenger__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.mva-empfaenger__field--full {
    grid-column: 1 / -1;
}

.mva-empfaenger__label {
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    opacity: 0.8;
}

.mva-empfaenger__input {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 8px;
    background-color: color-mix(in srgb, currentColor 3%, transparent);
    color: inherit;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: 1.4;
}

.mva-empfaenger__input:focus {
    outline: 2px solid var(--color-magenta, #e4006f);
    outline-offset: 2px;
    border-color: var(--color-magenta, #e4006f);
}

.mva-empfaenger__hint {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--leading-normal, 1.5);
    opacity: 0.75;
}

/* ==========================================================================
   User-Info-Sektion (Vorname / Nachname / Firma des eingeloggten Users)
   ========================================================================== */

.mva-card--user-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.mva-userinfo__eyebrow {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.85;
}

.mva-userinfo__list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
}

@media (max-width: 480px) {
    .mva-userinfo__list {
        grid-template-columns: 1fr;
    }
}

.mva-userinfo__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    min-width: 0;
}

.mva-userinfo__label {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
    opacity: 0.7;
}

.mva-userinfo__value {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-snug, 1.3);
    word-break: break-word;
}

.mva-userinfo__hint {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--leading-normal, 1.5);
    color: #c62828;
}

.mva-userinfo__hint a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Submit-Action
   ========================================================================== */

.mva-form__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2, 0.5rem);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .member-mv-anmeldung__gradient,
    .member-mv-anmeldung__gradient::after {
        animation: none !important;
    }
}

/* ==========================================================================
   Editor Preview
   ========================================================================== */

.acf-block-preview .member-mv-anmeldung__gradient,
.acf-block-preview .member-mv-anmeldung__gradient::after {
    animation: none;
}