/* ============================================================================
   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-white);
   /* --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: 500;
   /* --fn-label-margin-bottom: 0; */

   /* 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: block;
   --fn-label-display-radio: block;
   /* --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(--color-blue);
   --fn-radio-bg-checked: var(--color-white);
   /* --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-radio-bg-checked: transparent; */
   --fn-checkbox-bg: var(--color-white);
   --fn-checkbox-bg-checked: var(--color-blue);
   /* --fn-checkbox-check-color: var(--fn-color-primary); */
   /* --fn-checkbox-icon-color-checked: var(--color-white); */
   --fn-checkbox-border-width: 1px;
   /* --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);

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

   /* Feedback */
   /* --fn-color-danger: #c62828; */
   --fn-error-bg: transparent;
   /* --fn-error-border: #ffd2d2; */
   --fn-error-text: var(--fn-color-danger);
   /* --fn-error-font-size: var(--fn-font-size-sm); */

   /* 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 */
   /* --fn-button-margin-left: 0; */
   /* --fn-button-margin-right: auto; */
   /* --fn-button-margin-top: 0; */

   /* Submit Button */
   --fn-submit-bg: transparent;
   --fn-submit-bg-hover: transparent;
   --fn-submit-color: var(--color-black);
   --fn-submit-color-hover: var(--color-blue);
   /* --fn-submit-border-color: var(--button-border-color); */
   /* --fn-submit-border-color-hover: var(--button-border-color-hover); */
   --fn-submit-border-width: 0;
   /* --fn-submit-border-style: var(--button-border-style); */
   /* --fn-submit-border-radius: var(--button-border-radius); */
   --fn-submit-padding-v: 0;
   --fn-submit-padding-h: 0;
   --fn-submit-font-size: var(--wp--preset--font-size--2-5-xl);
   --fn-submit-font-weight: 700;
   /* --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-small); */
   /* --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--small); */
   /* --fn-pagination-next-padding-h: var(--button-padding-horizontal--small); */
   /* --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-small); */
   /* --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--small); */
   /* --fn-pagination-back-padding-h: var(--button-padding-horizontal--small); */
   /* --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; */
}

.forminator-field-radio {
   margin-top: 10px;
   margin-bottom: 10px;
}

.forminator-button-submit {
   text-transform: uppercase;
   gap: 3px;
}

.forminator-button-submit::before {
   content: ">";
}

.forminator-radio-bullet {
   border: var(--fn-checkbox-border-width) solid var(--fn-radio-border-color);
}

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

.forminator-radio-bullet::after {
   width: 6px;
   height: 6px;
}

.forminator-is_checked .forminator-radio-bullet {
   background: var(--color-blue);
}


.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: 0;
   border: 0;
   font-weight: 500;
}