/* ═══════════════════════════════════════════════════════════════
   RAMSI ALIANI — Fluent Forms Dark Theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Formular Container ── */
.fluentform {
    color: var(--ra-text) !important;
}

/* ── Input / Select / Textarea ── */
.fluentform .ff-el-group input[type="text"],
.fluentform .ff-el-group input[type="email"],
.fluentform .ff-el-group input[type="tel"],
.fluentform .ff-el-group input[type="number"],
.fluentform .ff-el-group input[type="date"],
.fluentform .ff-el-group select,
.fluentform .ff-el-group textarea {
    background-color: var(--ra-bg3)    !important;
    border:           1px solid var(--ra-border) !important;
    color:            var(--ra-text)   !important;
    border-radius:    4px              !important;
    padding:          0.85rem 1rem     !important;
    font-family:      'Space Grotesk', sans-serif !important;
    font-size:        0.95rem          !important;
    line-height:      1.5              !important;
    transition:       border-color 0.2s, box-shadow 0.2s !important;
    width:            100%             !important;
}

/* ── Focus State ── */
.fluentform .ff-el-group input:focus,
.fluentform .ff-el-group select:focus,
.fluentform .ff-el-group textarea:focus {
    border-color: var(--ra-cyan)                   !important;
    box-shadow:   0 0 0 2px var(--ra-cyan-dim)     !important;
    outline:      none                             !important;
}

/* ── Placeholder ── */
.fluentform .ff-el-group input::placeholder,
.fluentform .ff-el-group textarea::placeholder {
    color: var(--ra-text-dim) !important;
}

/* ── Labels ── */
.fluentform .ff-el-group label,
.fluentform .ff-el-group .ff-el-form-control label {
    color:          var(--ra-text-muted) !important;
    font-size:      0.72rem              !important;
    font-weight:    500                  !important;
    letter-spacing: 0.10em              !important;
    text-transform: uppercase            !important;
    font-family:    'Space Grotesk', sans-serif !important;
    margin-bottom:  6px                  !important;
    display:        block                !important;
}

/* ── Select Dropdown ── */
.fluentform .ff-el-group select {
    appearance:         none            !important;
    -webkit-appearance: none           !important;
    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 fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat:  no-repeat      !important;
    background-position: right 14px center !important;
    padding-right:      2.5rem         !important;
    cursor:             pointer        !important;
}

select option {
    background-color: #111 !important;
    color:            #fff !important;
}

/* ── Textarea ── */
.fluentform .ff-el-group textarea {
    min-height:  140px     !important;
    resize:      vertical  !important;
}

/* ── Submit Button ── */
.fluentform .ff_submit_btn_wrapper button,
.fluentform button[type="submit"] {
    background-color: var(--ra-cyan)     !important;
    color:            #000000            !important;
    font-weight:      700                !important;
    font-size:        0.88rem            !important;
    letter-spacing:   0.06em             !important;
    text-transform:   uppercase          !important;
    padding:          0.9rem 2.5rem      !important;
    border:           none               !important;
    border-radius:    4px                !important;
    cursor:           pointer            !important;
    font-family:      'Space Grotesk', sans-serif !important;
    transition:       opacity 0.2s, transform 0.2s !important;
    width:            auto               !important;
    display:          inline-block       !important;
}

.fluentform .ff_submit_btn_wrapper button:hover,
.fluentform button[type="submit"]:hover {
    opacity:   0.82            !important;
    transform: translateY(-1px) !important;
}

/* ── Fehlermeldungen ── */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea {
    border-color: #ff5252 !important;
}

.fluentform .error,
.fluentform .ff-el-is-error .error {
    color:     #ff5252 !important;
    font-size: 0.78rem !important;
    margin-top: 4px    !important;
}

/* ── Erfolgs-Nachricht ── */
.fluentform .ff-message-success {
    background-color: rgba(0, 229, 255, 0.06) !important;
    border:           1px solid var(--ra-cyan-border) !important;
    border-radius:    4px    !important;
    padding:          1rem   !important;
    color:            var(--ra-cyan) !important;
    font-size:        0.95rem !important;
}

/* ── Datum-Feld ── */
.fluentform input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* ── Light Mode Anpassungen für Formulare ── */
[data-theme="light"] .fluentform .ff-el-group input,
[data-theme="light"] .fluentform .ff-el-group select,
[data-theme="light"] .fluentform .ff-el-group textarea {
    background-color: #ffffff !important;
    border-color:     rgba(0,0,0,0.15) !important;
    color:            #111 !important;
}

[data-theme="light"] .fluentform .ff-el-group input::placeholder,
[data-theme="light"] .fluentform .ff-el-group textarea::placeholder {
    color: #aaa !important;
}

[data-theme="light"] select option {
    background-color: #fff !important;
    color:            #111 !important;
}

[data-theme="light"] .fluentform input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}