/**
 * components/buttons.css
 * Dedicated stylesheet for all button components, variants, active/focus states,
 * disabled behavior, and loaders.
 */

/* ==========================================================================
   1. Base Button Configuration
   ========================================================================== */
.btn {
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn .spinner-border-sm {
  vertical-align: middle;
}

/* ==========================================================================
   2. Primary Button (.btn-primary) - Deep Wine / Maroon
   ========================================================================== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: 46, 26, 71;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-color: rgba(255, 255, 255, 0.8);
  --bs-btn-disabled-bg: var(--color-primary-disabled);
  --bs-btn-disabled-border-color: var(--color-primary-disabled);
  --bs-btn-disabled-opacity: 1;

  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

.btn-primary:active,
.btn-primary.active,
:not(.btn-check) + .btn-primary:active,
.btn-primary:first-child:active {
  background-color: var(--color-primary-active) !important;
  border-color: var(--color-primary-active) !important;
  color: #fff !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--color-primary-disabled) !important;
  border-color: var(--color-primary-disabled) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* ==========================================================================
   3. Accent Button (.btn-accent) - Rose / Crimson Accent
   ========================================================================== */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-focus-shadow-rgb: 106, 27, 47;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
  --bs-btn-disabled-opacity: 0.85;

  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.btn-accent:active,
.btn-accent.active,
:not(.btn-check) + .btn-accent:active,
.btn-accent:first-child:active {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #fff !important;
}

.btn-accent:disabled,
.btn-accent.disabled {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  opacity: 0.85 !important;
  pointer-events: none;
}

/* ==========================================================================
   4. Outline Primary Button (.btn-outline-primary)
   ========================================================================== */
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: 46, 26, 71;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-opacity: 0.7;

  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
:not(.btn-check) + .btn-outline-primary:active,
.btn-outline-primary:first-child:active {
  color: #fff !important;
  background-color: var(--color-primary-active) !important;
  border-color: var(--color-primary-active) !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  opacity: 0.7 !important;
  pointer-events: none;
}

/* ==========================================================================
   5. Outline Accent Button (.btn-outline-accent)
   ========================================================================== */
.btn-outline-accent {
  --bs-btn-color: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-focus-shadow-rgb: 106, 27, 47;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
  --bs-btn-disabled-color: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-opacity: 0.7;

  color: var(--color-accent);
  border-color: var(--color-accent);
  background-color: transparent;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
  color: #fff;
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-outline-accent:active,
.btn-outline-accent.active,
:not(.btn-check) + .btn-outline-accent:active,
.btn-outline-accent:first-child:active {
  color: #fff !important;
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

.btn-outline-accent:disabled,
.btn-outline-accent.disabled {
  background-color: transparent !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  opacity: 0.7 !important;
  pointer-events: none;
}