/* ===== Event Booking - Purple Buttons ===== */
/* Tweak the shades here to match your brand */
:root {
  --eb-purple: #5A2D82;     /* primary */
  --eb-purple-hover: #4a236d; /* hover/active */
  --eb-purple-outline: #6c3a9e; /* focus ring */
  --eb-text-on-purple: #ffffff;
}

/* Scope to Event Booking pages only */
body.com_eventbooking {

/* Bootstrap & generic buttons inside the component */
  .btn,
  .btn-primary,
  .btn-success,
  .btn-outline-primary,
  .button,
  button,
  a.button,
  input[type="submit"],
  input[type="button"],
  .eb-button,
  .eb-register-button,
  .eb-event-register-button {
    background-color: var(--eb-purple) !important;
    border-color: var(--eb-purple) !important;
    color: var(--eb-text-on-purple) !important;
    border-radius: .5rem;      /* softer corners */
    padding: .55rem 1rem;      /* comfy touch target */
    transition: background-color .15s ease, border-color .15s ease, transform .04s ease;
    text-shadow: none;
  }

  /* Remove outline variant look so everything is purple */
  .btn-outline-primary,
  .btn-outline-success {
    background-color: var(--eb-purple) !important;
    color: var(--eb-text-on-purple) !important;
  }

  /* Hover / active */
  .btn:hover,
  .button:hover,
  button:hover,
  a.button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  .eb-button:hover,
  .eb-register-button:hover,
  .eb-event-register-button:hover,
  .btn:active,
  .button:active {
    background-color: var(--eb-purple-hover) !important;
    border-color: var(--eb-purple-hover) !important;
    color: var(--eb-text-on-purple) !important;
    transform: translateY(-1px);
  }

  /* Focus visible (keyboard accessibility) */
  .btn:focus,
  .button:focus,
  button:focus,
  a.button:focus,
  input[type="submit"]:focus,
  input[type="button"]:focus,
  .eb-button:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--eb-purple-outline) 35%, transparent) !important;
  }

  /* Disabled */
  .btn:disabled,
  .button:disabled,
  button:disabled,
  input[type="submit"]:disabled,
  input[type="button"]:disabled,
  .disabled,
  [disabled] {
    background-color: color-mix(in srgb, var(--eb-purple) 60%, #999) !important;
    border-color: color-mix(in srgb, var(--eb-purple) 60%, #999) !important;
    opacity: .75;
    cursor: not-allowed;
    transform: none;
  }

  /* Links styled as buttons in Event Booking lists/cards */
  a[class*="btn"],
  a[class*="button"],
  a.eb-register-button,
  a.eb-event-register-button {
    text-decoration: none !important;
  }
}

/* Optional: Make the primary button everywhere inside the component purple */
body.com_eventbooking .btn-primary {
  --bs-btn-bg: var(--eb-purple);
  --bs-btn-border-color: var(--eb-purple);
  --bs-btn-hover-bg: var(--eb-purple-hover);
  --bs-btn-hover-border-color: var(--eb-purple-hover);
  --bs-btn-active-bg: var(--eb-purple-hover);
  --bs-btn-active-border-color: var(--eb-purple-hover);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--eb-purple) 60%, #999);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--eb-purple) 60%, #999);
  --bs-btn-color: var(--eb-text-on-purple);
  --bs-btn-hover-color: var(--eb-text-on-purple);
}