/*
 * KBWC Exchange Plugin - Custom CSS Variables
 *
 * You can override these CSS variables in your theme to customize the appearance
 * of the exchange product interface.
 *
 * Example usage in your theme's style.css:
 *
 * :root {
 *   --kbwc-primary-color: #28a745;        Change primary color to green
 *   --kbwc-primary-hover-color: #1e7e34;  Change hover color
 * }
 */

:root {
  /* Primary theme colors */
  --kbwc-primary-color: #0073aa;
  --kbwc-primary-hover-color: #005a87;

  /* You can also customize these optional colors if needed */
  --kbwc-background-color: #ffffff;
  --kbwc-text-color: #333333;
  --kbwc-border-color: #dddddd;
  --kbwc-secondary-text-color: #666666;
  --kbwc-success-color: #28a745;
  --kbwc-error-color: #dc3545;
  --kbwc-warning-color: #ffc107;
}

/* State item styling */
.kbwc-state-console {
  font-weight: normal;
  font-size: 0.9em;
  color: var(--kbwc-secondary-text-color);
}

.kbwc-state-name {
  font-weight: bold;
  font-size: 1em;
  color: var(--kbwc-text-color);
}