/* ============================================================================
   FORMINATOR.CSS
   Forminator Plugin Custom Styling - Clean Card UI Design
   
   - Nutzt base.css Tokens (z.B. --color-primary)
   - Keine Modul-IDs, kein !important (wo möglich)
   - Klare Struktur, geringe Spezifität
   ============================================================================ */

/* ============================================================================
   DESIGN TOKENS
   Zentrale CSS-Variablen für Forminator-Komponenten
   ============================================================================ */
:root {
  /* Farb-Palette (aus base.css gemappt) */
  --fn-color-text: var(--color-font, var(--color-black, #000000));
  --fn-color-muted: rgba(27, 18, 18, 0.40);
  --fn-color-surface: var(--color-black-20);
  --fn-color-bg: #fff;
  --fn-color-border: transparent;
  --fn-color-border-strong: #d1d1d1;
  --fn-border-width: 2px;
  --fn-shadow-focus-ring: 0 2px 6px rgba(17, 17, 17, .12),
    0 10px 24px rgba(17, 17, 17, .10);
  --fn-color-primary: var(--color-primary, #F10019);
  --fn-color-primary-contrast: #fff;

  /* Typo */
  --fn-font-size-sm: var(--wp--preset--font-size--sm);
  --fn-font-size-md: var(--wp--preset--font-size--md);
  --fn-font-size-base: var(--fn-font-size-md);

  /* Labels */
  --fn-color-label: var(--fn-color-text);
  --fn-label-font-size: var(--fn-font-size-base);
  --fn-label-font-size-lg: var(--wp--preset--font-size--3-xl);
  --fn-label-font-weight: 700;
  --fn-label-margin-bottom: var(--wp--preset--spacing--2);

  /* Global Label Display - Default für alle Felder */
  --fn-label-display: none;

  /* Individuelle Label-Display-Variablen pro Feldtyp (fallen zurück auf globale) */
  --fn-label-display-checkbox: var(--fn-label-display);
  --fn-label-display-radio: var(--fn-label-display);
  --fn-label-display-date: var(--fn-label-display);
  --fn-label-display-name: var(--fn-label-display);
  --fn-label-display-email: var(--fn-label-display);
  --fn-label-display-phone: var(--fn-label-display);
  --fn-label-display-address: var(--fn-label-display);
  --fn-label-display-url: var(--fn-label-display);
  --fn-label-display-number: var(--fn-label-display);
  --fn-label-display-textarea: var(--fn-label-display);
  --fn-label-display-text: var(--fn-label-display);
  --fn-label-display-select: var(--fn-label-display);
  --fn-label-display-time: var(--fn-label-display);
  --fn-label-display-upload: var(--fn-label-display);
  --fn-label-display-consent: var(--fn-label-display);
  --fn-label-display-html: var(--fn-label-display);

  /* Radios */
  --fn-radio-border-color: var(--fn-color-border);
  --fn-radio-border-color-checked: var(--fn-color-primary);
  --fn-radio-bg-checked: var(--fn-color-primary);
  --fn-radio-label-gap: var(--fn-space-6);
  --fn-radio-item-margin: var(--fn-space-8);
  --fn-radio-label-color: var(--fn-color-text);
  --fn-radio-label-font-size: var(--fn-font-size-base);

  /* Checkbox */
  --fn-checkbox-border-color: var(--fn-color-border);
  --fn-checkbox-border-color-checked: var(--fn-color-primary);
  --fn-checkbox-bg: transparent;
  --fn-checkbox-bg-checked: var(--fn-color-primary);
  --fn-checkbox-check-color: var(--fn-color-primary);
  --fn-checkbox-icon-color-checked: var(--color-white);
  --fn-checkbox-border-width: var(--fn-border-width);
  --fn-checkbox-border-radius: var(--fn-radius-xs);
  --fn-checkbox-label-gap: var(--fn-space-6);
  --fn-checkbox-item-margin: var(--fn-space-8);
  --fn-checkbox-label-color: var(--fn-color-text);
  --fn-checkbox-label-font-size: var(--fn-font-size-base);
  --fn-checkbox-wrapper-margin-top: calc(var(--wp--preset--spacing--4) - 14px);

  /* Icons */
  --fn-chevron-color: var(--fn-color-primary);
  --fn-icon-font-family: "Rocket Block Theme Icons";
  --fn-calendar-color: var(--fn-color-text);
  --fn-calendar-icon: "\f121";
  --fn-calendar-icon-font-size: var(--wp--preset--font-size--xl);
  --fn-calendar-icon-font-weight: bold;
  --fn-input-icon-position-left: auto;
  --fn-input-icon-position-right: var(--fn-field-px);
  --fn-input-icon-padding-left: var(--fn-field-px);

  /* Placeholder */
  --fn-placeholder-font-size: var(--fn-label-font-size);
  --fn-placeholder-color: var(--color-black-60);

  /* Description */
  --fn-description-color: var(--color-black-60);
  --fn-description-font-size: var(--fn-font-size-base);

  /* Feedback */
  --fn-color-danger: #F10019;
  --fn-error-bg: #ffecec;
  --fn-error-border: #ffd2d2;
  --fn-error-text: var(--fn-color-text);
  --fn-error-font-size: var(--fn-font-size-sm);
  --fn-error-padding: var(--fn-space-6) var(--fn-space-10);
  --fn-error-margin-top: var(--fn-space-6);
  --fn-error-border-shorthand: var(--fn-border-width) solid var(--fn-error-border);

  /* Response Message (Success) */
  --fn-response-font-size: var(--fn-font-size-md);
  --fn-response-bg: #BCEEE6;
  --fn-response-text: #067963;
  --fn-response-border-width: var(--fn-border-width);

  /* Layout / Spacing / Radii */
  --fn-field-height: clamp(44px, 5vw, 54px);
  --fn-field-px: var(--fn-space-10);
  --fn-field-py: 0;
  --fn-radius-xs: 6px;
  --fn-radius-sm: 8px;
  --fn-radius-md: 12px;
  --fn-radius-theme: var(--global-border-radius, 8px);
  --fn-radius-pill: 999px;

  --fn-space-4: var(--wp--preset--spacing--0-5);
  --fn-space-5: var(--wp--preset--spacing--1);
  --fn-space-6: var(--wp--preset--spacing--1-5);
  --fn-space-8: var(--wp--preset--spacing--2);
  --fn-space-10: var(--wp--preset--spacing--2-5);
  --fn-space-12: var(--wp--preset--spacing--3);
  --fn-space-16: var(--wp--preset--spacing--4);
  --fn-space-20: var(--wp--preset--spacing--5);
  --fn-space-24: var(--wp--preset--spacing--6);
  --fn-space-32: var(--wp--preset--spacing--8);
  --fn-space-40: var(--wp--preset--spacing--10);
  --fn-gutter: var(--theme-spacing-responsive-gutter, var(--wp--preset--spacing--20, 24px));

  /* Elevation / Motion */
  --fn-shadow-none: none;
  --fn-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --fn-shadow-md: 0 2px 6px rgba(17, 17, 17, .12),
    0 10px 24px rgba(17, 17, 17, .10);
  --fn-transition: .18s ease;

  /* Input Focus State */
  --fn-field-focus-outline: none;
  --fn-field-focus-border-color: var(--fn-color-border);
  --fn-field-focus-box-shadow: var(--fn-shadow-md);
  --fn-field-focus-bg: var(--fn-color-surface);

  /* Input Hover State */
  --fn-field-hover-border-color: var(--fn-color-border);
  --fn-field-hover-box-shadow: var(--fn-shadow-none);
  --fn-field-hover-bg: var(--fn-color-surface);

  /* Komponenten */
  --fn-select-chevron-space: 46px;
  --fn-checkbox-size: 22px;

  /* Button Alignment */
  /* Linksbündig: --fn-button-margin-left: 0; --fn-button-margin-right: auto; */
  /* Zentriert: --fn-button-margin-left: auto; --fn-button-margin-right: auto; */
  /* Rechtsbündig: --fn-button-margin-left: auto; --fn-button-margin-right: 0; */
  --fn-button-margin-left: 0;
  --fn-button-margin-right: auto;
  --fn-button-margin-top: 0;

  /* Submit Button */
  --fn-submit-bg: var(--button-background-color);
  --fn-submit-bg-hover: var(--button-background-color-hover);
  --fn-submit-color: var(--button-color);
  --fn-submit-color-hover: var(--button-color-hover);
  --fn-submit-border-color: var(--button-border-color);
  --fn-submit-border-color-hover: var(--button-border-color-hover);
  --fn-submit-border-width: var(--button-border-width);
  --fn-submit-border-style: var(--button-border-style);
  --fn-submit-border-radius: var(--button-border-radius);
  --fn-submit-padding-v: var(--button-padding-vertical);
  --fn-submit-padding-h: var(--button-padding-horizontal);
  --fn-submit-font-size: var(--button-font-size);
  --fn-submit-font-weight: var(--button-font-weight);
  --fn-submit-box-shadow: var(--button-box-shadow, none);
  --fn-submit-box-shadow-hover: var(--button-box-shadow-hover, none);

  /* Upload Field */
  --fn-upload-bg: var(--fn-color-surface);
  --fn-upload-border-color: var(--fn-color-border);
  --fn-upload-border-width: 2px;
  --fn-upload-border-style: solid;
  --fn-upload-border-radius: var(--fn-radius-theme);
  --fn-upload-padding: var(--fn-space-40);
  --fn-upload-icon: var(--icon-upload-to-cloud);
  --fn-upload-icon-color: var(--fn-color-text);
  --fn-upload-icon-size: var(--wp--preset--font-size--6-xl);
  --fn-upload-text-color: var(--fn-color-text);
  --fn-upload-text-size: var(--fn-font-size-base);
  --fn-upload-subtext-color: var(--fn-color-muted);
  --fn-upload-subtext-size: var(--fn-font-size-sm);
  --fn-upload-link-color: var(--color-link);

  --fn-upload-gap: var(--fn-space-20);
  --fn-upload-single-icon-display: block;

  /* Upload Card (nach Upload) */
  --fn-upload-card-bg: var(--fn-color-border-strong);
  --fn-upload-card-border-color: var(--fn-color-border-strong);
  --fn-upload-card-border-radius: var(--fn-radius-sm);
  --fn-upload-card-padding: var(--fn-space-12);
  --fn-upload-card-font-size: var(--fn-font-size-base);
  --fn-upload-card-font-weight: 500;
  --fn-upload-card-color: var(--fn-color-text);
  --fn-upload-card-icon-color: var(--fn-color-muted);

  /* Pagination */
  --fn-pagination-dot-bg: var(--fn-color-surface);
  --fn-pagination-dot-bg-active: var(--fn-color-primary);
  --fn-pagination-dot-bg-done: var(--fn-color-primary);
  --fn-pagination-dot-border-color: var(--fn-color-border-strong);
  --fn-pagination-dot-border-color-active: var(--fn-color-primary);
  --fn-pagination-dot-border-width: var(--fn-border-width);
  --fn-pagination-break-color: var(--fn-color-primary);
  --fn-pagination-break-height: 2px;
  --fn-pagination-label-color: var(--fn-color-muted);
  --fn-pagination-label-color-active: var(--fn-color-primary);
  --fn-pagination-label-font-size: var(--fn-font-size-sm);

  /* Pagination Progress Bar */
  --fn-progress-height: 8px;
  --fn-progress-bg: var(--fn-color-surface);
  --fn-progress-fill: var(--fn-color-primary);
  --fn-progress-border-radius: var(--fn-radius-pill);
  --fn-progress-label-color: var(--fn-color-muted);
  --fn-progress-label-font-size: var(--fn-font-size-sm);
  --fn-progress-gap: var(--fn-space-8);
  --fn-progress-transition: width 0.4s ease;

  /* Pagination Buttons (Next / Back) */
  /* Next → Primary-Button */
  --fn-pagination-next-bg: var(--button-background-color);
  --fn-pagination-next-bg-hover: var(--button-background-color-hover);
  --fn-pagination-next-color: var(--button-color);
  --fn-pagination-next-color-hover: var(--button-color-hover);
  --fn-pagination-next-border-color: var(--button-border-color);
  --fn-pagination-next-border-color-hover: var(--button-border-color-hover);
  --fn-pagination-next-border-width: var(--button-border-width);
  --fn-pagination-next-border-style: var(--button-border-style);
  --fn-pagination-next-border-radius: var(--button-border-radius);
  --fn-pagination-next-padding-v: var(--button-padding-vertical);
  --fn-pagination-next-padding-h: var(--button-padding-horizontal);
  --fn-pagination-next-font-size: var(--button-font-size);
  --fn-pagination-next-font-weight: var(--button-font-weight);

  /* Back → Outline-Button */
  --fn-pagination-back-bg: var(--button-outline-background-color);
  --fn-pagination-back-bg-hover: var(--button-outline-background-color-hover);
  --fn-pagination-back-color: var(--button-outline-color);
  --fn-pagination-back-color-hover: var(--button-outline-color-hover);
  --fn-pagination-back-border-color: var(--button-outline-border-color);
  --fn-pagination-back-border-color-hover: var(--button-outline-border-color-hover);
  --fn-pagination-back-border-width: var(--button-border-width);
  --fn-pagination-back-border-style: var(--button-border-style);
  --fn-pagination-back-border-radius: var(--button-border-radius);
  --fn-pagination-back-padding-v: var(--button-padding-vertical);
  --fn-pagination-back-padding-h: var(--button-padding-horizontal);
  --fn-pagination-back-font-size: var(--button-font-size);
  --fn-pagination-back-font-weight: var(--button-font-weight);

  /* Datepicker / Calendar */
  --fn-cal-bg: var(--fn-color-bg);
  --fn-cal-border-color: var(--fn-color-border-strong);
  --fn-cal-border-radius: var(--fn-radius-theme);
  --fn-cal-shadow: var(--fn-shadow-md);
  --fn-cal-padding: var(--fn-space-16);
  --fn-cal-z-index: 9999;

  /* Kalender Header */
  --fn-cal-header-bg: var(--fn-color-surface);
  --fn-cal-header-color: var(--fn-color-text);
  --fn-cal-header-padding: var(--fn-space-10) var(--fn-space-12);
  --fn-cal-header-border-radius: var(--fn-radius-theme) var(--fn-radius-theme) 0 0;

  /* Monat/Jahr-Selects im Header */
  --fn-cal-select-bg: transparent;
  --fn-cal-select-color: var(--fn-color-text);
  --fn-cal-select-font-size: var(--fn-font-size-base);
  --fn-cal-select-border: none;

  /* Nav-Arrows (Prev/Next) */
  --fn-cal-nav-color: var(--fn-color-text);
  --fn-cal-nav-color-hover: var(--fn-color-primary);

  /* Wochentag-Header */
  --fn-cal-th-color: var(--fn-color-muted);
  --fn-cal-th-font-size: var(--fn-font-size-sm);
  --fn-cal-th-padding: var(--fn-space-6) var(--fn-space-4);

  /* Tages-Zellen */
  --fn-cal-day-color: var(--fn-color-text);
  --fn-cal-day-bg-hover: var(--fn-color-surface);
  --fn-cal-day-color-hover: var(--fn-color-primary);
  --fn-cal-day-border-radius: var(--fn-radius-xs);
  --fn-cal-day-padding: var(--fn-space-6) var(--fn-space-8);
  --fn-cal-day-font-size: var(--fn-font-size-base);

  /* Heute */
  --fn-cal-today-bg: var(--color-secondary);
  --fn-cal-today-color: var(--fn-color-text);
  --fn-cal-today-border-color: var(--color-secondary);

  /* Ausgewählter Tag */
  --fn-cal-selected-bg: var(--fn-color-primary);
  --fn-cal-selected-color: var(--fn-color-primary-contrast);

  /* Wochenende */
  --fn-cal-weekend-color: var(--fn-color-muted);

  /* Deaktivierte Tage */
  --fn-cal-disabled-color: var(--fn-color-muted);
  --fn-cal-disabled-opacity: 0.4;
}

/* ============================================================================
   BASE STYLES & RESETS
   ============================================================================ */
.forminator-ui.forminator-custom-form p a {
  color: var(--color-link);
  transition: color var(--fn-transition);
  text-decoration: underline;
}

.forminator-ui.forminator-custom-form p a:hover {
  color: var(--color-link-hover);
}

.forminator-ui.forminator-custom-form p:first-child {
  margin-top: 0;
}

/* Shared Label Styles (font-size, color) */
.forminator-ui.forminator-custom-form .forminator-label {
  font-size: var(--fn-label-font-size);
  color: var(--fn-color-label);
  font-weight: var(--fn-label-font-weight);
  margin-bottom: var(--fn-label-margin-bottom) !important;
}

/* Individuelle Label-Sichtbarkeit pro Feldtyp */
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-label {
  display: var(--fn-label-display-checkbox) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-label {
  display: var(--fn-label-display-radio) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-date .forminator-label {
  display: var(--fn-label-display-date) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-name .forminator-label {
  display: var(--fn-label-display-name) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-email .forminator-label {
  display: var(--fn-label-display-email) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-phone .forminator-label {
  display: var(--fn-label-display-phone) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-address .forminator-label {
  display: var(--fn-label-display-address) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-url .forminator-label {
  display: var(--fn-label-display-url) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-number .forminator-label {
  display: var(--fn-label-display-number) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-textarea .forminator-label {
  display: var(--fn-label-display-textarea) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-text .forminator-label {
  display: var(--fn-label-display-text) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-select .forminator-label {
  display: var(--fn-label-display-select) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-time .forminator-label {
  display: var(--fn-label-display-time) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-upload .forminator-label {
  display: var(--fn-label-display-upload) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-label {
  display: var(--fn-label-display-consent) !important;
}

.forminator-ui.forminator-custom-form .forminator-field-html .forminator-label {
  display: var(--fn-label-display-html) !important;
}

/* Section Heading + Desc (Repeater-Optik der Gruppen-Labels) */
.forminator-ui.forminator-custom-form .forminator-repeater-label {
  font-weight: 700;
  font-size: var(--fn-label-font-size-lg);
  margin: var(--fn-space-40) 0 var(--fn-space-20);
  display: block !important;
}

.forminator-ui.forminator-custom-form .mt-0 .forminator-repeater-label {
  margin-top: 0;
}

/* Section Heading + Desc (Repeater-Optik der Gruppen-Labels) */
.forminator-ui.forminator-custom-form .forminator-repeater-description {
  font-size: var(--fn-font-size-base);
  color: var(--fn-color-text);
}

.forminator-ui.forminator-custom-form .forminator-description {
  color: var(--fn-description-color);
  font-size: var(--fn-description-font-size);
}

.forminator-ui.forminator-custom-form .forminator-all-group-copies.forminator-repeater-field {
  border-radius: 0;
  padding: 0;
  background: none !important;
  box-shadow: none !important;
}

/* ============================================================================
   FIELD WRAPPERS
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-field,
.forminator-ui.forminator-custom-form .forminator-field .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea {
  font-size: var(--fn-font-size-base);
  font-family: inherit;
}

/* ============================================================================
   INPUT FIELDS (Text, Textarea, Tel)
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input {
  background: var(--fn-color-surface);
  border: var(--fn-border-width) solid var(--fn-color-border);
  border-radius: var(--fn-radius-theme);
  color: var(--fn-color-text);
  transition: border-color var(--fn-transition), box-shadow var(--fn-transition), background-color var(--fn-transition);
  box-shadow: var(--fn-shadow-none);
}

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input {
  height: var(--fn-field-height);
}

.forminator-ui.forminator-custom-form .forminator-input {
  padding: var(--fn-field-py) var(--fn-field-px);
}

.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input {
  padding-left: calc(var(--fn-field-px) * 2);
}

.forminator-iti-input.iti .iti__country-container {
  left: 0;
  right: auto !important;
}

span.select2-selection__placeholder {
  color: var(--fn-placeholder-color);
}

.forminator-ui.forminator-custom-form .forminator-textarea {
  padding: var(--fn-field-px);
  resize: vertical;
}

.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder,
.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input::placeholder {
  color: var(--fn-placeholder-color);
  opacity: 1;
}

/* Focus / Hover */
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input:focus {
  outline: var(--fn-field-focus-outline);
  border-color: var(--fn-field-focus-border-color);
  box-shadow: var(--fn-field-focus-box-shadow);
  background-color: var(--fn-field-focus-bg);
}

.forminator-ui.forminator-custom-form .forminator-input:hover,
.forminator-ui.forminator-custom-form .forminator-textarea:hover,
.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input:hover {
  border-color: var(--fn-field-hover-border-color);
  box-shadow: var(--fn-field-hover-box-shadow);
  background-color: var(--fn-field-hover-bg);
}

/* ============================================================================
   NATIVE SELECT FIELDS (Time Picker, etc.)
   ============================================================================ */
.forminator-ui.forminator-custom-form select:not(.forminator-select2) {
  background-color: var(--fn-color-surface);
  border: var(--fn-border-width) solid var(--fn-color-border);
  border-radius: var(--fn-radius-theme);
  color: var(--fn-color-text);
  height: var(--fn-field-height);
  padding: var(--fn-field-py) var(--fn-field-px);
  font-size: var(--fn-font-size-base);
}

.forminator-ui.forminator-custom-form select:not(.forminator-select2):hover {
  border-color: var(--fn-field-hover-border-color);
  box-shadow: var(--fn-field-hover-box-shadow);
  background-color: var(--fn-field-hover-bg);
}

.forminator-ui.forminator-custom-form select:not(.forminator-select2):focus {
  outline: var(--fn-field-focus-outline);
  border-color: var(--fn-field-focus-border-color);
  box-shadow: var(--fn-field-focus-box-shadow);
  background-color: var(--fn-field-focus-bg);
}

/* ============================================================================
   SELECT2 DROPDOWN
   ============================================================================ */
.forminator-select.forminator-select-dropdown-container--open {
  z-index: 9999999999 !important;
}

.forminator-ui .forminator-icon-chevron-down:before {
  font-family: var(--rocket-font-family);
  content: var(--rocket-icon-chevron-down);
  color: var(--fn-chevron-color);
  display: inline-block;
}

.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--multiple,
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single {
  border: var(--fn-border-width) solid var(--fn-color-border) !important;
  background-color: var(--fn-color-surface) !important;
  border-radius: var(--fn-radius-theme);
  height: var(--fn-field-height);
  padding: 0 var(--fn-field-px);
  box-shadow: var(--fn-shadow-none);
  color: var(--fn-color-text);
  transition: border-color var(--fn-transition), box-shadow var(--fn-transition), background-color var(--fn-transition);
}

.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--multiple:hover,
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single:hover {
  border-color: var(--fn-field-hover-border-color) !important;
  box-shadow: var(--fn-field-hover-box-shadow);
  background-color: var(--fn-field-hover-bg) !important;
}

/* Focus State for Select */
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select.select2-container--focus .selection span[role=combobox].select2-selection--multiple,
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select.select2-container--focus .selection span[role=combobox].select2-selection--single,
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select.select2-container--open .selection span[role=combobox].select2-selection--multiple,
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select.select2-container--open .selection span[role=combobox].select2-selection--single {
  outline: var(--fn-field-focus-outline);
  border-color: var(--fn-field-focus-border-color) !important;
  box-shadow: var(--fn-field-focus-box-shadow);
  background-color: var(--fn-field-focus-bg) !important;
}

.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--multiple .select2-selection__rendered,
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single .select2-selection__rendered {
  padding: 0;
}

.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single[aria-expanded=true] .select2-selection__arrow [class*=forminator-icon-],
.forminator-ui.forminator-custom-form[data-design=basic] select.forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"]:hover .select2-selection__arrow {
  color: var(--fn-chevron-color) !important;
}

.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--basic {
  margin-top: var(--fn-space-6);
  padding: 0;
  border: var(--fn-border-width) solid var(--fn-color-border-strong);
  border-radius: var(--fn-radius-theme);
  overflow: hidden;
  box-shadow: var(--fn-shadow-md);
}

.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--basic .select2-results .select2-results__options .select2-results__option {
  padding: var(--fn-space-4) var(--fn-field-px);
  font-size: var(--fn-font-size-base);
  color: var(--fn-color-text);
  background-color: var(--fn-color-surface);
  transition: background-color var(--fn-transition), color var(--fn-transition);
}

.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--basic .select2-results .select2-results__options .select2-results__option.select2-results__option--selected {
  background-color: var(--fn-color-primary);
  color: var(--fn-color-primary-contrast);
}

.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-search input {
  margin-top: var(--fn-space-10);
  height: var(--fn-field-height);
  padding: var(--fn-field-py) var(--fn-field-px);
  border: var(--fn-border-width) solid var(--fn-color-border);
  border-radius: var(--fn-radius-theme);
  box-shadow: var(--fn-shadow-none);
  transition: border-color var(--fn-transition), box-shadow var(--fn-transition), background-color var(--fn-transition);
}

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-input-with-icon [class*=forminator-icon-] {
  color: var(--fn-calendar-color);
  left: var(--fn-input-icon-position-left);
  right: var(--fn-input-icon-position-right);
}

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-input-with-icon .forminator-input {
  padding-left: var(--fn-input-icon-padding-left);
}


/* ============================================================================
   VALIDATION & ERROR MESSAGES
   ============================================================================ */

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-response-message {
  margin: 0 0 20px;
  padding: var(--wp--preset--spacing--2);
  text-align: left;
  font-size: var(--fn-response-font-size);
  background-color: var(--fn-response-bg);
  color: var(--fn-response-text);
  border-left: var(--fn-response-border-width) solid var(--fn-response-text);
}

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-response-message.forminator-error,
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-error-message {
  padding: var(--fn-error-padding);
  margin-top: var(--fn-error-margin-top);
  border-radius: var(--fn-radius-sm);
  border: var(--fn-error-border-shorthand);
  font-size: var(--fn-error-font-size) !important;
  background-color: var(--fn-error-bg) !important;
  color: var(--fn-error-text) !important;
}

.forminator-ui.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-has_error .select2-container .select2-selection--single,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-phone .iti__tel-input {
  border-color: var(--fn-color-danger);
  box-shadow: 0 0 0 1px rgba(198, 40, 40, .08);
}

/* ============================================================================
   CHECKBOX & CONSENT
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-checkbox__wrapper .forminator-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--fn-space-10);
}

.forminator-ui.forminator-custom-form .forminator-checkbox-box {
  width: var(--fn-checkbox-size);
  height: var(--fn-checkbox-size);
  border: var(--fn-checkbox-border-width) solid var(--fn-checkbox-border-color);
  border-radius: var(--fn-checkbox-border-radius);
  background: var(--fn-checkbox-bg);
  box-shadow: var(--fn-shadow-none);
  transition: all var(--fn-transition);
}

.forminator-ui.forminator-custom-form .forminator-checkbox input:checked+.forminator-checkbox-box {
  border-color: var(--fn-checkbox-border-color-checked);
  box-shadow: none;
  background: var(--fn-checkbox-bg-checked);
}

/* ============================================================================
   RADIO BUTTONS
   ============================================================================ */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-radio .forminator-radio-bullet,
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox .forminator-checkbox-box {
  display: inherit;
}

/* Radio-Input unsichtbar machen */
.forminator-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Der Kreis vor dem Label-Text */
.forminator-radio-bullet {
  position: relative;
  width: 20px;
  height: 20px;
  border: var(--fn-border-width) solid var(--fn-radio-border-color);
  border-radius: 50%;
  background: var(--fn-color-surface);
  margin-right: var(--fn-radio-label-gap);
  transition: border-color var(--fn-transition);
}

/* Der "aktive Punkt" via ::after */
.forminator-radio-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--fn-space-10);
  height: var(--fn-space-10);
  background: var(--fn-radio-bg-checked);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--fn-transition);
}

/* Aktiv: Punkt einblenden und Rahmen einfärben */
.forminator-is_checked .forminator-radio-bullet {
  border-color: var(--fn-radio-border-color-checked);
}

.forminator-is_checked .forminator-radio-bullet::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Fokus-Effekt für Tastaturnavigation */
.forminator-radio input[type="radio"]:focus+.forminator-radio-bullet {
  box-shadow: var(--fn-shadow-focus-ring);
}

/* Radio Label Text */
.forminator-ui.forminator-custom-form .forminator-radio-label {
  color: var(--fn-radio-label-color);
  font-size: var(--fn-radio-label-font-size);
}

/* Radio Label Spacing */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-radio .forminator-radio-bullet~span {
  margin-left: 0;
}

/* Radio Item Margin */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-radio:not(.forminator-radio-inline) {
  margin: var(--fn-radio-item-margin) 0;
}

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-radio.forminator-radio-inline {
  margin-top: 0;
}


/* ============================================================================
   CHECKBOX (Detailliertes Styling)
   ============================================================================ */

/* Checkbox-Input unsichtbar machen */
.forminator-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Box der Checkbox */
.forminator-checkbox-box {
  position: relative;
  width: 20px;
  height: 20px;
  border: var(--fn-border-width) solid var(--fn-checkbox-border-color, var(--fn-radio-border-color));
  border-radius: 4px;
  background: var(--fn-color-surface);
  margin-right: var(--fn-checkbox-label-gap);
  transition: border-color var(--fn-transition), background-color var(--fn-transition);
}

/* Der Haken via ::after */
.forminator-checkbox-box::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 25%;
  height: 70%;
  border-right: var(--fn-checkbox-border-width) solid var(--fn-checkbox-check-color, var(--fn-radio-bg-checked));
  border-bottom: var(--fn-checkbox-border-width) solid var(--fn-checkbox-check-color, var(--fn-radio-bg-checked));
  transform: translate(-50%, -50%) scale(0) rotate(45deg);
  transform-origin: center;
  transition: transform var(--fn-transition);
}

/* Aktiv: Haken einblenden und Rahmen einfärben */
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked+.forminator-checkbox-box {
  border-color: var(--fn-color-primary);
  background-color: var(--fn-color-primary);
}

.forminator-ui.forminator-custom-form .forminator-checkbox input:checked+.forminator-checkbox-box::after {
  border-right-color: var(--fn-checkbox-icon-color-checked);
  border-bottom-color: var(--fn-checkbox-icon-color-checked);
  transform: translate(-50%, -50%) scale(1) rotate(45deg);
}

/* Fokus-Effekt für Tastaturnavigation */
.forminator-checkbox input[type="checkbox"]:focus+.forminator-checkbox-box {
  box-shadow: var(--fn-shadow-focus-ring);
}

/* Checkbox-Wrapper: Flexbox für vertikale Zentrierung */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox__wrapper {
  align-items: center;
  margin-top: var(--fn-checkbox-wrapper-margin-top);
}

/* Checkbox Label Text */
.forminator-ui.forminator-custom-form .forminator-checkbox-label {
  color: var(--fn-checkbox-label-color);
  font-size: var(--fn-checkbox-label-font-size);
}

/* Checkbox Label Spacing */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox .forminator-checkbox-box~span,
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox__label {
  margin-left: 0;
}

/* Checkbox Item Margin */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-checkbox:not(.forminator-checkbox-inline) {
  margin: var(--fn-checkbox-item-margin) 0;
}


/* ============================================================================
   SUBMIT BUTTON
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit {
  background: var(--fn-submit-bg);
  color: var(--fn-submit-color);
  border: var(--fn-submit-border-width) var(--fn-submit-border-style) var(--fn-submit-border-color);
  border-radius: var(--fn-submit-border-radius);
  box-shadow: var(--fn-submit-box-shadow);
  padding: var(--fn-submit-padding-v) var(--fn-submit-padding-h);
  cursor: pointer;
  font-size: var(--fn-submit-font-size);
  font-weight: var(--fn-submit-font-weight);
  font-family: inherit;
  margin-top: var(--fn-button-margin-top);
  margin-left: var(--fn-button-margin-left);
  margin-right: var(--fn-button-margin-right);
  display: flex;
  transition: background-color var(--fn-transition), color var(--fn-transition), border-color var(--fn-transition), box-shadow var(--fn-transition);
}

.forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit:hover {
  background: var(--fn-submit-bg-hover);
  color: var(--fn-submit-color-hover);
  border-color: var(--fn-submit-border-color-hover);
  box-shadow: var(--fn-submit-box-shadow-hover);
}

.forminator-ui.forminator-custom-form .forminator-button[disabled],
.forminator-ui.forminator-custom-form .forminator-button[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

/* ============================================================================
   FILE UPLOAD FIELD
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-field-upload {
  height: 100%;
}

.forminator-ui.forminator-custom-form .forminator-field-upload .forminator-field {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.forminator-ui.forminator-custom-form .forminator-multi-upload,
.forminator-ui.forminator-custom-form .forminator-file-upload {
  position: relative;
  background: var(--fn-upload-bg);
  border: var(--fn-upload-border-width) var(--fn-upload-border-style) var(--fn-upload-border-color);
  border-radius: var(--fn-upload-border-radius);
  padding: var(--fn-upload-padding);
  text-align: center;
  transition: border-color var(--fn-transition), background-color var(--fn-transition);
  flex: 1;
  justify-content: center;
  font-size: var(--fn-upload-text-size);
}

.forminator-ui.forminator-custom-form .forminator-multi-upload span.forminator-icon-upload,
.forminator-ui.forminator-custom-form .forminator-file-upload span.forminator-icon-upload {
  font-size: var(--fn-upload-icon-size);
}

.forminator-ui.forminator-custom-form .forminator-multi-upload:hover,
.forminator-ui.forminator-custom-form .forminator-file-upload:hover {
  border-color: var(--fn-color-border-strong);
}

.forminator-ui.forminator-custom-form .forminator-multi-upload input[type="file"],
.forminator-ui.forminator-custom-form .forminator-file-upload input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* Upload Field – Flex Layout */
.forminator-ui.forminator-custom-form .forminator-multi-upload-message,
.forminator-ui.forminator-custom-form .forminator-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fn-upload-gap);
}

.forminator-ui.forminator-custom-form .forminator-multi-upload-message {
  pointer-events: none;
}

.forminator-ui.forminator-custom-form .forminator-multi-upload-message p {
  margin: 0;
  color: var(--fn-upload-text-color);
  font-size: var(--fn-upload-text-size);
  line-height: 1.5;
}

.forminator-ui.forminator-custom-form .forminator-multi-upload-message a {
  color: var(--fn-upload-link-color);
  text-decoration: underline;
  pointer-events: none;
}

/* Single-Upload mit Icon-Font */
.forminator-ui.forminator-custom-form [class*=forminator-icon-]:not(.forminator-icon-calendar):before,
.forminator-ui.forminator-custom-form [class^=forminator-icon-]:not(.forminator-icon-calendar):before {
  font-family: var(--fn-icon-font-family) !important;
}

.forminator-ui.forminator-custom-form .forminator-icon-upload:before {
  content: var(--fn-upload-icon);
}

/* Kalender-Icon: Forminator-eigenen Font verwenden (\'Forminator Icons\' hat das Glyph, Rocket Block Theme Icons nicht) */
.forminator-ui .forminator-icon-calendar:before {
  font-size: var(--fn-calendar-icon-font-size);
  font-weight: var(--fn-calendar-icon-font-weight);
  color: var(--fn-calendar-color);
}



.forminator-ui.forminator-custom-form .forminator-file-upload .forminator-button-upload,
.forminator-ui.forminator-custom-form .forminator-file-upload>span {
  color: var(--fn-upload-text-color);
  font-size: var(--fn-upload-text-size);
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Single-Upload: Verstecke Upload-Button wenn Datei hochgeladen */
.forminator-ui.forminator-custom-form .forminator-file-upload>span:not([data-empty-text=""])~.forminator-button-upload {
  display: none;
}

/* Single-Upload: Nach Upload Card-Ansicht */
.forminator-ui.forminator-custom-form .forminator-file-upload>span:not([data-empty-text=""]) {
  display: flex;
  align-items: center;
  gap: var(--fn-space-12);
  background: var(--fn-upload-card-bg);
  border: var(--fn-border-width) solid var(--fn-upload-card-border-color);
  border-radius: var(--fn-upload-card-border-radius);
  padding: var(--fn-upload-card-padding);
  width: 100%;
  margin-top: 0;
  font-size: var(--fn-upload-card-font-size);
  font-weight: var(--fn-upload-card-font-weight);
  color: var(--fn-upload-card-color);
  transition: border-color var(--fn-transition), box-shadow var(--fn-transition);
  flex: 1;
}

.forminator-ui.forminator-custom-form .forminator-file-upload>span:not([data-empty-text=""]):hover {
  box-shadow: var(--fn-shadow-sm);
}

.forminator-ui.forminator-custom-form .forminator-file-upload>span:not([data-empty-text=""])::before {
  flex-shrink: 0;
  width: var(--fn-space-40);
  height: var(--fn-space-40);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fn-color-surface);
  border-radius: var(--fn-radius-xs);
  font-size: var(--fn-space-20);
  color: var(--fn-upload-card-icon-color);
  line-height: 1;
}

/* Single-Upload: Delete-Button innerhalb der Card */
.forminator-ui.forminator-custom-form .forminator-file-upload>span:not([data-empty-text=""])~.forminator-button-delete {
  position: absolute;
  right: var(--fn-space-8);
  top: var(--fn-space-8);
}

.forminator-ui.forminator-custom-form .forminator-file-upload .forminator-button-delete {
  flex-shrink: 0;
  width: var(--fn-space-32);
  height: var(--fn-space-32);
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--fn-radius-xs);
  color: var(--fn-color-muted);
  cursor: pointer;
  transition: background-color var(--fn-transition), color var(--fn-transition);
  padding: 0;
}

.forminator-ui.forminator-custom-form .forminator-file-upload>span:not([data-empty-text=""])~.forminator-button-delete {
  display: flex;
}

.forminator-ui.forminator-custom-form .forminator-file-upload .forminator-button-delete:hover {
  background: var(--fn-color-surface);
  color: var(--fn-color-danger);
}

.forminator-ui.forminator-custom-form .forminator-file-upload .forminator-button-delete .forminator-icon-close {
  font-size: var(--fn-space-16);
}

/* Uploaded Files List */
.forminator-ui.forminator-custom-form .forminator-uploaded-files {
  margin-top: var(--fn-space-16);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--fn-space-12);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file {
  background: var(--fn-color-bg);
  border: var(--fn-border-width) solid var(--fn-color-border-strong);
  border-radius: var(--fn-radius-sm);
  padding: var(--fn-space-12);
  transition: border-color var(--fn-transition), box-shadow var(--fn-transition);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file:hover {
  box-shadow: var(--fn-shadow-sm);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file.forminator-has_error {
  border-color: var(--fn-color-danger);
  background: var(--fn-error-bg);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--content {
  display: flex;
  align-items: center;
  gap: var(--fn-space-12);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--preview {
  flex-shrink: 0;
  width: var(--fn-space-40);
  height: var(--fn-space-40);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fn-color-surface);
  border-radius: var(--fn-radius-xs);
  color: var(--fn-color-muted);
  font-size: var(--fn-space-20);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--text {
  flex: 1;
  min-width: 0;
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--title {
  margin: 0 0 var(--fn-space-4);
  font-size: var(--fn-font-size-base);
  font-weight: 500;
  color: var(--fn-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--size {
  margin: 0;
  font-size: var(--fn-font-size-sm);
  color: var(--fn-color-muted);
  display: flex;
  align-items: center;
  gap: var(--fn-space-4);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file.forminator-has_error .forminator-uploaded-file--size {
  color: var(--fn-color-danger);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--size .forminator-icon-warning {
  font-size: var(--fn-font-size-sm);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--delete {
  flex-shrink: 0;
  width: var(--fn-space-32);
  height: var(--fn-space-32);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--fn-radius-xs);
  color: var(--fn-color-muted);
  cursor: pointer;
  transition: background-color var(--fn-transition), color var(--fn-transition);
  padding: 0;
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--delete:hover {
  background: var(--fn-color-surface);
  color: var(--fn-color-danger);
}

.forminator-ui.forminator-custom-form .forminator-uploaded-file--delete .forminator-icon-close {
  font-size: var(--fn-space-16);
}



.forminator-file-upload {
  position: relative;
}

/* ============================================================================
   PAGINATION STEPS
   ============================================================================ */

.forminator-ui.forminator-custom-form .forminator-pagination-steps {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: var(--fn-space-32);
}

/* Verbindungslinie zwischen Steps */
.forminator-ui.forminator-custom-form .forminator-pagination-steps .forminator-break {
  flex: 1;
  height: var(--fn-pagination-break-height);
}

.forminator-ui.forminator-custom-form .forminator-pagination-steps .forminator-break::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--fn-pagination-break-height);
  background-color: var(--fn-pagination-break-color) !important;
}

/* Step Button */
.forminator-ui.forminator-custom-form .forminator-pagination-steps .forminator-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fn-space-6);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

/* Step Label */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step .forminator-step-label {
  font-size: var(--fn-pagination-label-font-size);
  color: var(--fn-pagination-label-color) !important;
  white-space: nowrap;
  transition: color var(--fn-transition);
  min-width: max-content;
}

/* Step Dot */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step .forminator-step-dot {
  border-radius: 50%;
  background-color: var(--fn-pagination-dot-bg) !important;
  border: var(--fn-pagination-dot-border-width) solid var(--fn-pagination-dot-border-color) !important;
  transition: background-color var(--fn-transition), border-color var(--fn-transition);
  display: block;
}

/* Aktiver Step */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot,
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step[aria-selected="true"] .forminator-step-dot {
  background-color: var(--fn-pagination-dot-bg-active) !important;
  border-color: var(--fn-pagination-dot-border-color-active) !important;
}

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-label,
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step[aria-selected="true"] .forminator-step-label {
  color: var(--fn-pagination-label-color-active) !important;
}

/* Erledigte Steps */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-steps .forminator-step.forminator-done .forminator-step-dot {
  background-color: var(--fn-pagination-dot-bg-done) !important;
  border-color: var(--fn-pagination-dot-bg-done) !important;
}

/* ============================================================================
   PAGINATION FOOTER (Next / Back Buttons)
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-pagination-footer {
  display: flex;
  gap: var(--fn-space-12);
  margin-top: var(--fn-space-32);
}

/* Next Button – Primary */
.forminator-ui.forminator-custom-form .forminator-button-next {
  background-color: var(--fn-pagination-next-bg);
  color: var(--fn-pagination-next-color);
  border: var(--fn-pagination-next-border-width) var(--fn-pagination-next-border-style) var(--fn-pagination-next-border-color);
  border-radius: var(--fn-pagination-next-border-radius);
  padding: var(--fn-pagination-next-padding-v) var(--fn-pagination-next-padding-h);
  font-size: var(--fn-pagination-next-font-size);
  font-weight: var(--fn-pagination-next-font-weight);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--fn-transition), color var(--fn-transition), border-color var(--fn-transition);
}

.forminator-ui.forminator-custom-form .forminator-button-next:hover {
  background-color: var(--fn-pagination-next-bg-hover);
  color: var(--fn-pagination-next-color-hover);
  border-color: var(--fn-pagination-next-border-color-hover);
}

/* Back Button – Outline */
.forminator-ui.forminator-custom-form .forminator-button-back {
  background-color: var(--fn-pagination-back-bg);
  color: var(--fn-pagination-back-color);
  border: var(--fn-pagination-back-border-width) var(--fn-pagination-back-border-style) var(--fn-pagination-back-border-color);
  border-radius: var(--fn-pagination-back-border-radius);
  padding: var(--fn-pagination-back-padding-v) var(--fn-pagination-back-padding-h);
  font-size: var(--fn-pagination-back-font-size);
  font-weight: var(--fn-pagination-back-font-weight);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--fn-transition), color var(--fn-transition), border-color var(--fn-transition);
}

.forminator-ui.forminator-custom-form .forminator-button-back:hover {
  background-color: var(--fn-pagination-back-bg-hover);
  color: var(--fn-pagination-back-color-hover);
  border-color: var(--fn-pagination-back-border-color-hover);
}

.forminator-ui.forminator-custom-form[data-design=basic] .forminator-pagination-footer .forminator-button {
  display: flex;
  width: auto;
}

.forminator-ui.forminator-custom-form .forminator-file-upload .forminator-button-upload {
  position: static;
  opacity: 1;
  inset: unset;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: var(--fn-upload-single-icon-display);
}

.forminator-ui.forminator-custom-form .forminator-file-upload .forminator-button-upload::before {
  font-family: var(--fn-icon-font-family) !important;
  content: var(--fn-upload-icon);
  font-size: var(--fn-upload-icon-size);
  color: var(--fn-upload-icon-color);
  display: block;
  line-height: 1;
}

/* ============================================================================
   PAGINATION PROGRESS BAR
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-pagination-progress {
  display: flex;
  align-items: center;
  gap: var(--fn-progress-gap);
  margin-bottom: var(--fn-space-32);
}

.forminator-ui.forminator-custom-form .forminator-progress-label {
  font-size: var(--fn-progress-label-font-size);
  color: var(--fn-progress-label-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.forminator-ui.forminator-custom-form .forminator-progress-bar {
  flex: 1;
  height: var(--fn-progress-height);
  background-color: var(--fn-progress-bg);
  border-radius: var(--fn-progress-border-radius);
  overflow: hidden;
}

.forminator-ui.forminator-custom-form .forminator-progress-bar span {
  display: block;
  height: 100%;
  background-color: var(--fn-progress-fill);
  border-radius: var(--fn-progress-border-radius);
  transition: var(--fn-progress-transition);
}

/* ============================================================================
   DATEPICKER / CALENDAR
   ============================================================================ */

/* Wrapper */
.forminator-calendar--basic.ui-datepicker {
  background: var(--fn-cal-bg);
  border: 1px solid var(--fn-cal-border-color);
  border-radius: var(--fn-cal-border-radius);
  box-shadow: var(--fn-cal-shadow);
  padding: 0;
  z-index: var(--fn-cal-z-index) !important;
  width: auto !important;
  min-width: 300px;
  font-family: inherit;
  font-size: var(--fn-cal-day-font-size);
  overflow: visible;
}

/* Header */
.forminator-calendar--basic .ui-datepicker-header {
  background: var(--fn-cal-header-bg);
  color: var(--fn-cal-header-color);
  border: none;
  border-bottom: 1px solid var(--fn-cal-border-color);
  border-radius: var(--fn-cal-header-border-radius);
  padding: var(--fn-cal-header-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Titel (Monat/Jahr) */
.forminator-calendar--basic .ui-datepicker-title {
  display: flex;
  align-items: center;
  gap: var(--fn-space-6);
  flex: 1;
  justify-content: center;
}

.forminator-calendar--basic .ui-datepicker-title select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--fn-cal-select-bg);
  background-image: none;
  color: var(--fn-cal-select-color);
  font-size: var(--fn-cal-select-font-size);
  border: var(--fn-cal-select-border);
  font-weight: 600;
  cursor: pointer;
  padding: 0 var(--fn-space-4);
  height: auto;
  box-shadow: none;
  outline: none;
  font-family: inherit;
}

/* Prev/Next Buttons */
.forminator-calendar--basic .ui-datepicker-prev,
.forminator-calendar--basic .ui-datepicker-next {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fn-space-20);
  height: var(--fn-space-20);
  border-radius: var(--fn-radius-xs);
  cursor: pointer;
  color: var(--fn-cal-nav-color);
  transition: color var(--fn-transition), background-color var(--fn-transition);
  top: auto;
  flex-shrink: 0;
}

.forminator-calendar--basic .ui-datepicker-prev:hover,
.forminator-calendar--basic .ui-datepicker-next:hover {
  color: var(--fn-cal-nav-color-hover);
  background: var(--fn-color-surface);
}

/* .ui-icon komplett verstecken – Ikone direkt auf den Button-Wrapper */
.forminator-calendar--basic .ui-datepicker-prev .ui-icon,
.forminator-calendar--basic .ui-datepicker-next .ui-icon {
  display: none !important;
}

.forminator-calendar--basic .ui-datepicker-prev::before,
.forminator-calendar--basic .ui-datepicker-next::before {
  font-family: var(--fn-icon-font-family) !important;
  font-size: var(--fn-font-size-base);
  font-weight: 300;
  line-height: 1;
  speak: never;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.forminator-calendar--basic .ui-datepicker-prev::before {
  content: '\f120';
}

.forminator-calendar--basic .ui-datepicker-next::before {
  content: '\f11f';
}

/* Kalender-Tabelle */
.forminator-calendar--basic .ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
  padding: var(--fn-cal-padding);
  display: table;
}

/* Wochentag-Header */
.forminator-calendar--basic .ui-datepicker-calendar thead th {
  color: var(--fn-cal-th-color);
  font-size: var(--fn-cal-th-font-size);
  font-weight: 600;
  padding: var(--fn-cal-th-padding);
  text-align: center;
  border: none;
}

/* Zellen */
.forminator-calendar--basic .ui-datepicker-calendar tbody td {
  padding: 2px;
  border: none;
  text-align: center;
}

/* jQuery UI Hover/Focus-Border-Reset */
.forminator-calendar--basic .ui-state-hover,
.forminator-calendar--basic .ui-state-focus,
.forminator-calendar--basic .ui-button:hover,
.forminator-calendar--basic .ui-button:focus {
  border: none;
}

/* Tages-Links */
.forminator-calendar--basic .ui-datepicker-calendar tbody td a.ui-state-default {
  display: block;
  padding: var(--fn-cal-day-padding);
  border-radius: var(--fn-cal-day-border-radius);
  color: var(--fn-cal-day-color);
  text-decoration: none;
  text-align: center;
  border: none;
  background: transparent;
  transition: background-color var(--fn-transition), color var(--fn-transition);
  line-height: 1.4;
}

.forminator-calendar--basic .ui-datepicker-calendar tbody td a.ui-state-default:hover {
  background-color: var(--fn-cal-day-bg-hover);
  color: var(--fn-cal-day-color-hover);
}

/* Heute */
.forminator-calendar--basic .ui-datepicker-calendar tbody td a.ui-state-highlight {
  background-color: var(--fn-cal-today-bg) !important;
  color: var(--fn-cal-today-color) !important;
  border: 1px solid var(--fn-cal-today-border-color) !important;
}

/* Ausgewählt */
.forminator-calendar--basic .ui-datepicker-calendar tbody td a.ui-state-active,
.forminator-calendar--basic .ui-datepicker-calendar tbody td a.ui-state-highlight.ui-state-active {
  background-color: var(--fn-cal-selected-bg) !important;
  color: var(--fn-cal-selected-color) !important;
  border-color: var(--fn-cal-selected-bg) !important;
}

/* Wochenende */
.forminator-calendar--basic .ui-datepicker-calendar tbody td.ui-datepicker-week-end a.ui-state-default {
  color: var(--fn-cal-weekend-color);
}

/* Deaktivierte / andere-Monats-Tage */
.forminator-calendar--basic .ui-datepicker-calendar tbody td.ui-state-disabled,
.forminator-calendar--basic .ui-datepicker-calendar tbody td.ui-datepicker-unselectable {
  opacity: var(--fn-cal-disabled-opacity);
}

.forminator-calendar--basic .ui-datepicker-calendar tbody td.ui-state-disabled span,
.forminator-calendar--basic .ui-datepicker-calendar tbody td.ui-datepicker-unselectable span {
  display: block;
  padding: var(--fn-cal-day-padding);
  color: var(--fn-cal-disabled-color);
  text-align: center;
  line-height: 1.4;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-hidden {
  display: none;
  visibility: hidden;
}

/* ============================================================================
   DISABLED STATES
   ============================================================================ */
.forminator-ui.forminator-custom-form .forminator-input:disabled,
.forminator-ui.forminator-custom-form .forminator-textarea:disabled,
.forminator-ui.forminator-custom-form .forminator-phone .iti__tel-input:disabled,
.forminator-ui.forminator-custom-form select:not(.forminator-select2):disabled,
.forminator-ui.forminator-custom-form .select2-container--disabled .select2-selection--single {
  background: #f7f7f7;
  color: #9aa0a6;
  cursor: not-allowed;
}

/* ============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .forminator-ui.forminator-custom-form * {
    transition: none;
    animation: none;
  }
}