/*
 * Theme-native button bridge.
 *
 * ERB keeps its functional classes, but also exposes the standard WordPress
 * button hook. The values below come from the active theme/page builder when
 * available, with conservative fallbacks for themes that expose no variables.
 * This file never targets every button on the site; it only styles ERB output.
 */
.erb-add.wp-element-button,
.erb-submit.wp-element-button,
.erb-sticky-build.wp-element-button,
.erb-sticky-call.wp-element-button,
.erb-sticky-message.wp-element-button,
.erb-builder-sticky-reserve.wp-element-button,
.erb-login-button.wp-element-button,
.erb-portal-button.wp-element-button {
  background: var(--erb-theme-button-bg,
    var(--theme-button-background-initial-color,
      var(--theme-palette-color-1,
        var(--e-global-color-primary,
          var(--wp--preset--color--primary, #c99a3d)))));
  color: var(--erb-theme-button-text,
    var(--theme-button-text-initial-color,
      var(--e-global-color-text, #ffffff)));
  border-radius: var(--erb-theme-button-radius,
    var(--theme-button-border-radius,
      var(--theme-border-radius, 8px)));
  font-family: var(--erb-theme-button-font-family, inherit);
  font-weight: var(--erb-theme-button-font-weight, inherit);
  box-shadow: var(--erb-theme-button-shadow, inherit);
}

/* Secondary ERB controls follow the theme's secondary/light button tokens. */
.erb-sticky-call.wp-element-button,
.erb-sticky-message.wp-element-button,
.erb-portal-button-light.wp-element-button {
  background: var(--theme-button-background-initial-color,
    var(--e-global-color-secondary,
      var(--wp--preset--color--secondary, #ffffff)));
  color: var(--theme-button-text-initial-color,
    var(--e-global-color-text, #21170d));
}

/* Use the theme's hover state instead of ERB inventing one. */
.erb-add.wp-element-button:hover,
.erb-submit.wp-element-button:hover,
.erb-sticky-build.wp-element-button:hover,
.erb-builder-sticky-reserve.wp-element-button:hover,
.erb-login-button.wp-element-button:hover,
.erb-portal-button.wp-element-button:hover {
  background: var(--theme-button-background-hover-color,
    var(--theme-button-background-initial-color,
      var(--theme-palette-color-1, #c99a3d)));
  color: var(--theme-button-text-hover-color,
    var(--theme-button-text-initial-color, #ffffff));
}