/* ==========================================================
   Extra-large Bootstrap 5.3 button styles
   Load this file AFTER bootstrap.min.css
   ========================================================== */

/* Larger than Bootstrap's .btn-lg */
.btn-xl {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-size: 1.35rem;
  --bs-btn-border-radius: 0.75rem;
z-index: 999;
  font-weight: 600;
  line-height: 1.35;
}

/* Even larger optional size */
.btn-xxl {
  --bs-btn-padding-y: 1.25rem;
  --bs-btn-padding-x: 2.75rem;
  --bs-btn-font-size: 1.65rem;
  --bs-btn-border-radius: 0.9rem;
z-index: 999;
  font-weight: 700;
  line-height: 1.35;
}

/* ==========================================================
   Custom color buttons
   These use Bootstrap 5 CSS variables, so hover/focus/active
   states remain Bootstrap-compatible.
   ========================================================== */

/* Deep blue */
.btn-cobalt {
  --bs-btn-color: #fff;
  --bs-btn-bg: #174ea6;
  --bs-btn-border-color: #174ea6;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #123f86;
  --bs-btn-hover-border-color: #123f86;

  --bs-btn-focus-shadow-rgb: 23, 78, 166;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0f346e;
  --bs-btn-active-border-color: #0f346e;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #174ea6;
  --bs-btn-disabled-border-color: #174ea6;
}

/* Keep custom button text white on hover/focus/active */
.btn-cobalt,
.btn-cobalt:hover,
.btn-cobalt:focus,
.btn-cobalt:active,
.btn-cobalt.active,
.btn-cobalt:visited {
  color: #fff;
}

/* Warm orange */
.btn-sunset {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d95f02;
  --bs-btn-border-color: #d95f02;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b94f02;
  --bs-btn-hover-border-color: #b94f02;

  --bs-btn-focus-shadow-rgb: 217, 95, 2;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9e4301;
  --bs-btn-active-border-color: #9e4301;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d95f02;
  --bs-btn-disabled-border-color: #d95f02;
}

/* Historic / sepia brown */
.btn-sepia {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6f4e37;
  --bs-btn-border-color: #6f4e37;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5d412e;
  --bs-btn-hover-border-color: #5d412e;

  --bs-btn-focus-shadow-rgb: 111, 78, 55;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4f3727;
  --bs-btn-active-border-color: #4f3727;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6f4e37;
  --bs-btn-disabled-border-color: #6f4e37;
}

/* Dark green */
.btn-evergreen {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1f6f43;
  --bs-btn-border-color: #1f6f43;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #195a36;
  --bs-btn-hover-border-color: #195a36;

  --bs-btn-focus-shadow-rgb: 31, 111, 67;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #14492c;
  --bs-btn-active-border-color: #14492c;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1f6f43;
  --bs-btn-disabled-border-color: #1f6f43;
}

/* Charcoal */
.btn-charcoal {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2b2f33;
  --bs-btn-border-color: #2b2f33;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1f2326;
  --bs-btn-hover-border-color: #1f2326;

  --bs-btn-focus-shadow-rgb: 43, 47, 51;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #151719;
  --bs-btn-active-border-color: #151719;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2b2f33;
  --bs-btn-disabled-border-color: #2b2f33;
}

/* Optional full-width mobile behavior */
@media (max-width: 575.98px) {
  .btn-xl-mobile-full, {
    width: 100%;
  }
}