/** TS Design System: narrowly scoped Elementor Form adapters. */

/*
 * Elementor places custom CSS classes on .elementor-widget-form while the
 * visible submit button is a direct child of the form's submit field group.
 * Variant tokens inherit from the widget root; only that submit button is
 * allowed to consume the complete TSDS button geometry and states.
 */
.elementor .elementor-widget-form.btn-primary {
  --tsds-button-bg: var(--btn-primary-bg, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-color: var(--btn-primary-color, var(--ts-color-on-primary, #fff));
  --tsds-button-border: var(--btn-primary-border, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-bg-hover: var(--btn-primary-bg-hover, var(--tsds-button-bg));
  --tsds-button-color-hover: var(--btn-primary-color-hover, var(--tsds-button-color));
  --tsds-button-border-hover: var(--btn-primary-border-hover, var(--tsds-button-border));
  --tsds-button-focus: var(--btn-primary-focus, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-variant-radius: var(--btn-primary-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.9;
  --tsds-button-active-opacity: 0.8;
}

.elementor .elementor-widget-form.btn-secondary {
  --tsds-button-bg: var(--btn-secondary-bg, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))));
  --tsds-button-color: var(--btn-secondary-color, var(--ts-color-on-secondary, #fff));
  --tsds-button-border: var(--btn-secondary-border, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))));
  --tsds-button-bg-hover: var(--btn-secondary-bg-hover, var(--tsds-button-bg));
  --tsds-button-color-hover: var(--btn-secondary-color-hover, var(--tsds-button-color));
  --tsds-button-border-hover: var(--btn-secondary-border-hover, var(--tsds-button-border));
  --tsds-button-focus: var(--btn-secondary-focus, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))));
  --tsds-button-variant-radius: var(--btn-secondary-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.9;
  --tsds-button-active-opacity: 0.8;
}

.elementor .elementor-widget-form.btn-outline {
  --tsds-button-bg: var(--btn-outline-bg, transparent);
  --tsds-button-color: var(--btn-outline-color, var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))));
  --tsds-button-border: var(--btn-outline-border, var(--ts-color-border, rgba(18, 20, 23, 0.18)));
  --tsds-button-bg-hover: var(--btn-outline-bg-hover, transparent);
  --tsds-button-color-hover: var(--btn-outline-color-hover, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-border-hover: var(--btn-outline-border-hover, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-focus: var(--btn-outline-focus, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-variant-radius: var(--btn-outline-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.9;
  --tsds-button-active-opacity: 0.8;
}

.elementor .elementor-widget-form.btn-outline-primary {
  --tsds-button-bg: transparent;
  --tsds-button-color: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-border: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-bg-hover: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-color-hover: var(--ts-color-on-primary, #fff);
  --tsds-button-border-hover: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-focus: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-button-variant-radius: var(--btn-radius);
  --tsds-button-hover-opacity: 1;
  --tsds-button-active-opacity: 0.8;
}

.elementor .elementor-widget-form.btn-outline-secondary {
  --tsds-button-bg: transparent;
  --tsds-button-color: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-border: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-bg-hover: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-color-hover: var(--ts-color-on-secondary, #fff);
  --tsds-button-border-hover: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-focus: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
  --tsds-button-variant-radius: var(--btn-radius);
  --tsds-button-hover-opacity: 1;
  --tsds-button-active-opacity: 0.8;
}

.elementor .elementor-widget-form.btn-ghost {
  --tsds-button-bg: var(--btn-ghost-bg, transparent);
  --tsds-button-color: var(--btn-ghost-color, var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))));
  --tsds-button-border: var(--btn-ghost-border, transparent);
  --tsds-button-bg-hover: var(--btn-ghost-bg-hover, transparent);
  --tsds-button-color-hover: var(--btn-ghost-color-hover, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-border-hover: var(--btn-ghost-border-hover, transparent);
  --tsds-button-focus: var(--btn-ghost-focus, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))));
  --tsds-button-variant-radius: var(--btn-ghost-radius, var(--btn-radius));
  --tsds-button-hover-opacity: 0.82;
  --tsds-button-active-opacity: 0.7;
}

/* Size precedence follows the generic Button component: XXS through XXL. */
.elementor .elementor-widget-form.btn-xxs { --tsds-button-py: var(--btn-py-xxs); --tsds-button-px: var(--btn-px-xxs); --tsds-button-size-icon-gap: var(--btn-ig-xxs); }
.elementor .elementor-widget-form.btn-xs { --tsds-button-py: var(--btn-py-xs); --tsds-button-px: var(--btn-px-xs); --tsds-button-size-icon-gap: var(--btn-ig-xs); }
.elementor .elementor-widget-form.btn-s { --tsds-button-py: var(--btn-py-s); --tsds-button-px: var(--btn-px-s); --tsds-button-size-icon-gap: var(--btn-ig-s); }
.elementor .elementor-widget-form.btn-m { --tsds-button-py: var(--btn-py-m); --tsds-button-px: var(--btn-px-m); --tsds-button-size-icon-gap: var(--btn-ig-m); }
.elementor .elementor-widget-form.btn-l { --tsds-button-py: var(--btn-py-l); --tsds-button-px: var(--btn-px-l); --tsds-button-size-icon-gap: var(--btn-ig-l); }
.elementor .elementor-widget-form.btn-xl { --tsds-button-py: var(--btn-py-xl); --tsds-button-px: var(--btn-px-xl); --tsds-button-size-icon-gap: var(--btn-ig-xl); }
.elementor .elementor-widget-form.btn-xxl { --tsds-button-py: var(--btn-py-xxl); --tsds-button-px: var(--btn-px-xxl); --tsds-button-size-icon-gap: var(--btn-ig-xxl); }

.elementor .elementor-widget-form:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  column-gap: var(--tsds-button-size-icon-gap, var(--btn-ig-s)) !important;
  min-height: 0 !important;
  padding-block: var(--tsds-button-py, var(--btn-py-s)) !important;
  padding-inline: var(--tsds-button-px, var(--btn-px-s)) !important;
  border: var(--btn-border-width) solid var(--tsds-button-border) !important;
  border-radius: var(--tsds-button-radius-override, var(--tsds-button-variant-radius, var(--btn-radius))) !important;
  background: var(--tsds-button-bg) !important;
  color: var(--tsds-button-color) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  cursor: pointer;
  opacity: 1;
  transition:
    background-color var(--btn-transition-duration) var(--btn-transition-easing),
    border-color var(--btn-transition-duration) var(--btn-transition-easing),
    color var(--btn-transition-duration) var(--btn-transition-easing),
    opacity var(--btn-transition-duration) var(--btn-transition-easing),
    box-shadow var(--btn-transition-duration) var(--btn-transition-easing),
    transform var(--btn-transition-duration) var(--btn-transition-easing);
}

.elementor .elementor-widget-form:is(.btn-xxs, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl, .btn-xxl) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button {
  min-height: 0 !important;
  padding-block: var(--tsds-button-py) !important;
  padding-inline: var(--tsds-button-px) !important;
}

.elementor .elementor-widget-form.btn-pill {
  --tsds-button-radius-override: 9999px;
}

.elementor .elementor-widget-form.btn-pill > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button {
  border-radius: var(--tsds-button-radius-override, 9999px) !important;
}

.elementor .elementor-widget-form.btn-block > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

.elementor .elementor-widget-form.btn-block > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button {
  display: flex !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor .elementor-widget-form:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button:hover {
  background: var(--tsds-button-bg-hover) !important;
  color: var(--tsds-button-color-hover) !important;
  border-color: var(--tsds-button-border-hover) !important;
  opacity: var(--tsds-button-hover-opacity) !important;
}

.elementor .elementor-widget-form:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button:active {
  opacity: var(--tsds-button-active-opacity) !important;
}

.elementor .elementor-widget-form:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button:focus-visible {
  outline: 2px solid var(--tsds-button-focus) !important;
  outline-offset: 3px !important;
}

.elementor .elementor-widget-form:is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-type-submit > .elementor-button:is(:disabled, [disabled], [aria-disabled="true"]) {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/*
 * Elementor's percentage-based field columns cannot safely consume native
 * flex gap: two 50% fields plus a column-gap would wrap. Reuse Elementor's
 * own half-padding/negative-wrapper model so gap-* owns both axes without
 * changing field widths or label/control spacing inside a field group.
 */
.elementor .elementor-widget-form:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-form > .elementor-form-fields-wrapper {
  margin-inline: calc(var(--tsds-gap) / -2) !important;
  margin-bottom: calc(var(--tsds-gap) * -1) !important;
}

.elementor .elementor-widget-form:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-group {
  margin-bottom: var(--tsds-gap) !important;
  padding-inline: calc(var(--tsds-gap) / 2) !important;
}

/* Stack owns only the direct field-group rhythm and leaves inner fields alone. */
.elementor .elementor-widget-form:is(.stack-0, .stack-xxxs, .stack-xxs, .stack-xs, .stack-s, .stack-m, .stack-l, .stack-xl, .stack-xxl, .stack-xxxl) > .elementor-form > .elementor-form-fields-wrapper {
  margin-bottom: 0 !important;
}

.elementor .elementor-widget-form:is(.stack-0, .stack-xxxs, .stack-xxs, .stack-xs, .stack-s, .stack-m, .stack-l, .stack-xl, .stack-xxl, .stack-xxxl) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-group {
  margin-block: 0 !important;
}

.elementor .elementor-widget-form:is(.stack-0, .stack-xxxs, .stack-xxs, .stack-xs, .stack-s, .stack-m, .stack-l, .stack-xl, .stack-xxl, .stack-xxxl) > .elementor-form > .elementor-form-fields-wrapper > .elementor-field-group + .elementor-field-group {
  margin-top: var(--tsds-stack) !important;
}