/* Fluent Forms Custom Styles for Forum Leverkusen */

/* --- General Form Container --- */
.fluentform {
    color: var(--text-light, #fff);
    font-family: inherit;
}

/* --- Labels --- */
.fluentform .ff-el-input--label label {
    color: var(--text-light, #fff);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.fluentform .ff-el-input--label.asterisk-right label:after {
    color: var(--accent-pink, #cf0f5a);
}

/* --- Input Fields (Text, Email, Textarea, Datepicker) --- */
.fluentform .ff-el-form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-light, #fff) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
}

/* Focus State & Active State (for Flatpickr & General) */
body .fluentform .ff-el-form-control:focus,
body .fluentform .ff-el-form-control.active,
body .fluentform .flatpickr-input.active,
body .fluentform .flatpickr-input:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--accent-pink, #cf0f5a) !important; /* Force border color */
    outline: none !important; /* Single line focus */
    box-shadow: 0 0 0 1px var(--accent-pink, #cf0f5a) !important; /* Simulates 2px thickness with border */
}

/* Placeholder */
.fluentform .ff-el-form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* --- Checkboxes & Radio Buttons --- */
.fluentform .ff-el-form-check-label {
    color: var(--text-light, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between input and label text */
}

.fluentform .ff-el-form-check-input {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 1.25em; /* Visible size options */
    height: 1.25em;
    min-width: 1.25em; /* Prevent shrinking in flex container */
    margin-right: 0; /* Handled by gap on parent */
    border-radius: 4px; /* Default for checkbox */
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Specific selector for Radio inputs to ensure they are round */
.fluentform input[type="radio"].ff-el-form-check-input {
    border-radius: 50% !important;
}

/* Checked State */
.fluentform .ff-el-form-check-input:checked {
    background-color: var(--accent-pink, #cf0f5a);
    border-color: var(--accent-pink, #cf0f5a);
}

/* Checkmark/Dot */
.fluentform .ff-el-form-check-input:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.6em;
    height: 0.6em;
    background-color: #fff;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* Radio Dot */
.fluentform input[type="radio"].ff-el-form-check-input:checked::before {
    mask-image: none;
    -webkit-mask-image: none;
    border-radius: 50%;
    background-color: #fff;
    width: 0.5em; /* Slightly smaller dot for radios */
    height: 0.5em;
}

/* Focus for Checkboxes/Radios */
.fluentform .ff-el-form-check-input:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--accent-pink, #cf0f5a) !important; /* Ring around */
    border-color: var(--accent-pink, #cf0f5a) !important;
}

/* --- Choices.js Dropdowns --- */
.fluentform .choices__inner {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: var(--text-light, #fff) !important;
    min-height: auto !important;
    padding: 8px 16px !important;
}

.fluentform .choices__list--single {
    padding: 0 !important;
}

.fluentform .choices__item {
    color: var(--text-light, #fff) !important;
}

.fluentform .choices__placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}

/* Choices Focus & Open State */
/* Choices Focus & Open State */
.fluentform .choices.is-focused .choices__inner,
.fluentform .choices.is-open .choices__inner {
    border: 1px solid var(--accent-pink, #cf0f5a) !important;
    box-shadow: 0 0 0 1px var(--accent-pink, #cf0f5a) !important; /* Simulate 2px border without layout shift */
    outline: 0px !important;
}

/* Choices Remove Button (X) */
.fluentform .choices__button {
    filter: invert(1) brightness(100); /* Make black icon white */
}

.fluentform .choices__button:focus {
    box-shadow: 0 0 0 2px var(--accent-pink, #cf0f5a) !important; /* Pink focus ring */
    outline: none !important;
    background-color: transparent !important; /* Prevent default hover bg change if any */
}

/* Dropdown Menu */
.fluentform .choices__list--dropdown {
    background-color: color-mix(in srgb, var(--glass-bg, #1e1e1e) 95%, transparent) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    margin-top: 5px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    /* Fix double scrollbar */
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    backdrop-filter: blur(2px) !important; /* Blur effect */
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Custom Scrollbar for Dropdown */
.fluentform .choices__list--dropdown .choices__list {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
}

.fluentform .choices__list--dropdown .choices__list::-webkit-scrollbar {
    width: 6px;
}

.fluentform .choices__list--dropdown .choices__list::-webkit-scrollbar-track {
    background: transparent;
}

.fluentform .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.fluentform .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.fluentform .choices__list--dropdown .choices__item {
    color: var(--text-light, #fff) !important;
    padding: 10px 15px !important;
}

/* Hover/Select State in Dropdown */
.fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted,
.fluentform .choices__list--dropdown .choices__item--selectable:hover {
    background-color: var(--accent-pink, #cf0f5a) !important; /* Pink Background */
    color: #fff !important; /* White text for contrast */
}

/* Remove default arrow to style if needed, or keep default */
.fluentform .choices[data-type*="select-one"]::after {
    border-color: #fff transparent transparent transparent;
}

/* --- Choices Search Input (inside dropdown) --- */
.fluentform .choices__list--dropdown .choices__input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-light, #fff) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important; /* Rounded corners */
    margin-bottom: 10px !important;
    padding: 8px 12px !important; /* Slightly more padding */
    outline: none !important; /* No double border */
    box-shadow: none !important;
}

body .fluentform .choices__list--dropdown .choices__input:focus {
     background-color: rgba(255, 255, 255, 0.08) !important;
     outline: none !important;
     border: 1px solid var(--accent-pink, #cf0f5a) !important;
     box-shadow: 0 0 0 1px var(--accent-pink, #cf0f5a) !important; /* Single line focus */
}

.fluentform .choices__list--dropdown .choices__input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* --- Standard Select (Fallback for simple dropdowns) --- */
select.ff-el-form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.5em !important;
    padding-right: 2.5rem !important; /* Space for arrow */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    /* Match Choices.js height/style */
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

/* Options within Standard Select */
select.ff-el-form-control option {
    background-color: #1e1e1e !important;
    color: #fff !important;
    padding: 10px !important;
}

/* Dim Placeholder Option (Empty Value) in List */
select.ff-el-form-control option[value=""] {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Dim Select Text when Placeholder is Selected */
select.ff-el-form-control:has(option[value=""]:checked) {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Attempt to Style Selection Highlight (Browser Dependent) */
select.ff-el-form-control option:checked,
select.ff-el-form-control option:hover {
    background-color: var(--accent-pink, #cf0f5a) !important;
    color: #fff !important;
    box-shadow: 0 0 0 100px var(--accent-pink, #cf0f5a) inset !important; /* Force bg change */
}


/* --- Submit Button --- */
.fluentform .ff-btn-submit {
    background-color: var(--accent-blue, #4d92cf) !important;
    color: var(--text-light, #fff) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Ensure it behaves like other buttons */
    display: inline-block;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

/* --- Error & Required Styles --- */
.fluentform .text-danger,
.fluentform .ff-el-error-msg {
    color: var(--accent-orange, #faa05a) !important; /* Fallback orange if var not valid */
}

/* Input Border on Error */
.fluentform .ff-el-is-error .ff-el-form-control {
    border-color: var(--accent-orange, #faa05a) !important;
}

/* Required Asterisk */
.fluentform .ff-el-required,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--accent-pink, #cf0f5a) !important;
}

/* GDPR & Checkbox Error Label */
.fluentform .ff-el-is-error .ff-el-form-check-label,
.fluentform .ff-el-is-error .ff-el-form-check-label a {
    color: var(--accent-orange, #faa05a) !important;
}

/* --- GDPR Checkbox Specifics --- */
.fluentform .ff_tc_label {
    display: flex !important;
    align-items: flex-start !important; /* Ensure text wraps correctly next to box */
    gap: 10px !important;
}

.fluentform .ff-el-tc label.ff_tc_label > span {
    padding-top: 0px !important;
}

.fluentform .ff_tc_checkbox {
    margin-top: 0 !important; /* Reset margin */
}

/* --- Flatpickr (Date & Time) Customization --- */

/* Main Container */
.flatpickr-calendar {
    background: color-mix(in srgb, var(--glass-bg, #1e1e1e) 95%, transparent) !important; /* Glassmorphism background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    color: #fff !important;
    backdrop-filter: blur(2px) !important; /* Blur effect */
    -webkit-backdrop-filter: blur(2px) !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #1e1e1e !important;
}

/* Header (Months/Years) */
.flatpickr-months {
    background: transparent !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #fff !important; /* Arrows white */
    color: #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent-pink, #cf0f5a) !important;
}

.flatpickr-current-month {
    color: #fff !important;
    padding-top: 5px !important; /* adjust alignment - reduced from 15px */
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: color-mix(in srgb, var(--glass-bg, #1e1e1e) 95%, transparent) !important;
    color: #fff !important;
}

.flatpickr-current-month input.cur-year {
    color: #fff !important;
}

/* Fix Year Arrows Visibility */
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #fff !important;
}

/* Weekdays */
.flatpickr-weekdays {
    background: rgba(255,255,255,0.05) !important;
}
.flatpickr-weekday {
    color: rgba(255,255,255,0.7) !important;
    font-weight: 600 !important;
}

/* Days */
.flatpickr-day {
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: var(--accent-pink, #cf0f5a) !important;
}
.flatpickr-day.today:hover,
.flatpickr-day:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--accent-pink, #cf0f5a) !important;
    border-color: var(--accent-pink, #cf0f5a) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Time Picker inside Datepicker */
.flatpickr-time {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.flatpickr-time .numInputWrapper input.numInput {
    background: transparent !important;
    color: #fff !important;
}
.flatpickr-time .numInputWrapper input.numInput:hover,
.flatpickr-time .numInputWrapper input.numInput:focus {
    background: rgba(255,255,255,0.05) !important;
}

.flatpickr-time .flatpickr-time-separator {
    color: #fff !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff !important;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #fff !important;
}


/* Break */
.ff-el-section-break {
    margin-top: 10px;
}
.ff-el-section-break hr {
    display: none;
}

.fluentform .no-search .choices__list--dropdown .choices__input {
    display: none !important; /* Force hide since equal specificity failed */
}