:root {
  /* Monochrome Bootstrap defaults */
  --bs-primary: #1a1a1a !important;
  --bs-primary-rgb: 26, 26, 26 !important;
  --bs-secondary: #4a4a4a !important;
  --bs-secondary-rgb: 74, 74, 74 !important;
}

/* Primary button styles (monochrome) */
.btn-primary {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: #0d0d0d !important;
  border-color: #0d0d0d !important;
  color: #fff !important;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.5) !important;
}

/* Secondary button styles */
.btn-secondary {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #fff !important;
}

.btn-secondary:hover {
  background-color: #373737 !important;
  border-color: #373737 !important;
}

/* Text and background utilities */
.text-primary {
  color: #1a1a1a !important;
}

.text-secondary {
  color: #4a4a4a !important;
}

.bg-primary {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

.bg-secondary {
  background-color: #4a4a4a !important;
  color: #fff !important;
}

.border-primary {
  border-color: #1a1a1a !important;
}

.border-secondary {
  border-color: #4a4a4a !important;
}

/* Swiper component overrides */
.swiper-button-next,
.swiper-button-prev {
  color: #1a1a1a !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: #1a1a1a !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  color: rgba(26, 26, 26, 0.35) !important;
}

.swiper-pagination-bullet {
  background: rgba(26, 26, 26, 0.2) !important;
}

.swiper-pagination-bullet-active {
  background: #1a1a1a !important;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #1a1a1a !important;
}

.swiper-pagination-fraction {
  color: #1a1a1a !important;
}

/* Additional Swiper states */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #0d0d0d !important;
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
  color: #0d0d0d !important;
}

/* Dynamic Hero Image Component Styles */
.dynamic-hero-image {
  position: relative;
  transition: background-image 0.5s ease-in-out;
}

.dynamic-hero-image.loading {
  position: relative;
}

.dynamic-hero-image.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.dynamic-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(196, 32, 50, 0.1), rgba(196, 32, 50, 0.05));
  pointer-events: none;
}