/* Alignment wrapper */
.ar-button-block-outer.align-left   { text-align: left; }
.ar-button-block-outer.align-center { text-align: center; }
.ar-button-block-outer.align-right  { text-align: right; }

/* Base button (colors come from CSS variables) */
.ar-theme-elements-btn {
  --btn-text: inherit;
  --btn-bg: transparent;
  --btn-border: currentColor;
  --btn-hover-text: var(--btn-text);
  --btn-hover-bg: var(--btn-bg);
  --btn-hover-border: var(--btn-border);

  color: var(--btn-text);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);

  font-size: 1.1em;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(44,139,230,0.03);
  outline: none;
  border-radius: 25px;
  text-align: center;
  cursor: pointer;
  margin: 0 6px 10px 0;
  display: inline-block;
  padding: 10px 28px;

  transition:
    background-color 0.3s ease-in-out,
    color            0.3s ease-in-out,
    border-color     0.3s ease-in-out,
    box-shadow       0.3s ease-in-out;
}

/* Hover uses the hover vars */
.ar-theme-elements-btn:hover {
  color: var(--btn-hover-text);
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  box-shadow: 0 4px 16px rgba(44,139,230,0.1);
}

/* Sizes */
.ar-theme-elements-btn.size-small { font-size: 0.875rem; padding: 6px 18px; }
.ar-theme-elements-btn.size-large { font-size: 1rem;     padding: 10px 28px; }
.ar-theme-elements-btn.size-full  { display: block; width: 100%; text-align: center; }