/* ============================================================
 * Button Styles - Ported from Divi
 * Divi equivalents:
 *   .et_pb_button           → .button, .btn
 *   .et_pb_button:hover     → .button:hover
 *   .et_pb_custom_button_icon → (icon support)
 * ============================================================ */

/* -----------------------------------------------
   Base Button
   ----------------------------------------------- */
.button,
.btn,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  padding: 12px 30px;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-on-dark);
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  color: var(--color-text-on-dark);
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(245, 130, 32, 0.3);
}

.button:focus,
.btn:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* -----------------------------------------------
   Button Variants
   ----------------------------------------------- */

/* Primary / Accent button (Divi default) */
.button--primary,
.btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.button--primary:hover,
.btn-primary:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* Secondary / Outline button (Divi et_pb_button with border) */
.button--secondary,
.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.button--secondary:hover,
.btn-secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-text-on-dark);
}

/* Large button */
.button--large,
.btn-lg {
  padding: 16px 40px;
  font-size: 1.1rem;
}

/* Disabled button */
.button:disabled,
.btn:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}