/**
 * Datei: wp-content/plugins/fanclub-core/modules/members/assets/beitritt.css
 * Beitrittsantrag [fc_beitritt] — Erweiterung von profile.css
 */

/* ── PAGE WRAPPER ──────────────────────────────────────────────────────────── */
.fc-bf-page {
    padding: 60px 0 120px;
}
.fc-bf-form-wrap {
    max-width: 860px;
    margin:    0 auto;
}

/* ── FEHLER-BLOCK ──────────────────────────────────────────────────────────── */
.fc-bf-errors {
    margin:      0 32px 28px;
    border-left: 3px solid var(--fc-danger);
    padding:     16px 20px;
}
.fc-bf-error-item {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      1rem;
    font-weight:    700;
    color:          var(--fc-danger);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height:    1.7;
}

/* ── FELD-WRAP MIT PINSELSTRICH ────────────────────────────────────────────── */
.fc-bf-field-wrap {
    position:   relative;
    margin-top: 4px;
}
.fc-bf-field-wrap::before {
    content:        '';
    position:       absolute;
    bottom:         -5px;
    left:           0;
    right:          10%;
    height:         14px;
    background:     var(--fc-bf-line, none) no-repeat center / 100% 100%;
    opacity:        1;
    pointer-events: none;
    z-index:        0;
}
.fc-bf-field-wrap:focus-within::before {
    opacity: 1;
}
[data-theme="neon"] .fc-bf-field-wrap::before {
    filter: hue-rotate(18deg);
}

/* ── INPUTS & SELECTS ──────────────────────────────────────────────────────── */
.fc-bf-field-wrap input,
.fc-bf-field-wrap select {
    position:       relative;
    z-index:        1;
    width:          90%;
    background:     #232323;
    border:         none;
    border-bottom:  none;
    color:          var(--fc-text-primary);
    padding:        8px 10px;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      clamp(1.4rem, 3vw, 1.9rem);
    font-weight:    700;
    font-style:     italic;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    outline:        none;
    box-sizing:     border-box;
    transition:     border-color 0.2s;
    appearance:          none;
    -webkit-appearance:  none;
}
.fc-bf-field-wrap input:focus,
.fc-bf-field-wrap select:focus { outline: none; }

.fc-bf-field-wrap input::placeholder {
    color:       var(--fc-text-dim);
    font-weight: 700;
    font-style:  italic;
}
.fc-bf-field-wrap select {
    cursor:                  pointer;
    background-color:        #232323;
    background-image:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FFD900' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat:       no-repeat;
    background-position:     right 10px center;
    padding-right:           32px;
}
.fc-bf-field-wrap select option { background: #0d0d0d; color: #fff; font-style: normal; text-transform: none; }

/* Datums-Feld: Icon im Feld */
.fc-bf-field--date .fc-bf-field-wrap { display: block; }
.fc-bf-field--date .fc-bf-field-wrap input { width: 90%; padding-right: 36px; box-sizing: border-box; }
.fc-bf-field--date .fc-dp-icon {
    position:  absolute;
    right:     calc(10% + 2px);
    top:       50%;
    transform: translateY(-50%);
    background: none;
    border:    none;
    padding:   4px 6px;
    color:     var(--fc-yellow);
    cursor:    pointer;
    display:   flex;
    align-items: center;
    z-index:   2;
}

/* Datepicker-Position */
.fc-bf-field-wrap .fc-datepicker {
    position: absolute;
    top:      calc(100% + 4px);
    left:     0;
    z-index:  999;
}

/* ── SUBMIT-ZEILE ──────────────────────────────────────────────────────────── */
.fc-bf-submit-row {
    padding:        36px 32px 56px;
    display:        flex;
    flex-direction: column;
    gap:            28px;
}

.fc-bf-privacy {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    cursor:      pointer;
}
.fc-bf-privacy input[type="checkbox"] {
    flex-shrink:   0;
    width:         18px;
    height:        18px;
    margin-top:    3px;
    accent-color:  var(--fc-yellow);
    cursor:        pointer;
}
.fc-bf-privacy span {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      1rem;
    font-weight:    500;
    color:          var(--fc-text-secondary, #a5a5a5);
    line-height:    1.55;
    letter-spacing: 0.04em;
}
.fc-bf-privacy a            { color: var(--fc-yellow); text-decoration: none; }
.fc-bf-privacy a:hover      { opacity: 0.75; }

/* ── RADIO-BUTTONS ─────────────────────────────────────────────────────────── */
.fc-bf-radio-row {
    display:    flex;
    gap:        32px;
    padding:    10px 0 4px;
}
.fc-bf-radio {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
}
.fc-bf-radio input[type="radio"] {
    width:        18px;
    height:       18px;
    accent-color: var(--fc-yellow);
    cursor:       pointer;
    flex-shrink:  0;
}
.fc-bf-radio span {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      clamp(1.4rem, 3vw, 1.9rem);
    font-weight:    700;
    font-style:     italic;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color:          var(--fc-text-primary);
}

/* ── FANCLUB-DETAILS (conditional) ────────────────────────────────────────── */
.fc-bf-fanclub-details {
    display:        contents;
    visibility:     hidden;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.2s;
}
.fc-bf-fanclub-details--visible {
    visibility:     visible;
    opacity:        1;
    pointer-events: auto;
}

.fc-bf-submit {
    display:        inline-flex;
    align-items:    center;
    gap:            14px;
    background:     var(--fc-yellow);
    color:          #000;
    border:         none;
    padding:        14px 28px;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      1.1rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor:         pointer;
    align-self:     flex-start;
    transition:     opacity 0.15s;
}
.fc-bf-submit:hover    { opacity: 0.85; }
.fc-bf-submit svg      { flex-shrink: 0; }

/* ── ERFOLG ────────────────────────────────────────────────────────────────── */
.fc-bf-success { max-width: 860px; margin: 0 auto; }
.fc-bf-success-body {
    padding: 28px 32px 48px;
}
.fc-bf-success-body p {
    font-family:   'Barlow Condensed', sans-serif;
    font-size:     clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight:   500;
    color:         #fff;
    line-height:   1.65;
    margin-bottom: 16px;
}


/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media ( max-width: 680px ) {
    .fc-bf-submit-row,
    .fc-bf-errors { padding-left: 20px; padding-right: 20px; }
    .fc-bf-submit { width: 100%; justify-content: center; }
}