/* Bootstrap Icons CSS */

/* Icon base styles */
.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  fill: currentColor;
}

/* Icon sizes */
.icon-sm {
  width: 0.875em;
  height: 0.875em;
}

.icon-lg {
  width: 1.33em;
  height: 1.33em;
}

.icon-xl {
  width: 1.5em;
  height: 1.5em;
}

/* Icon colors */
.icon-white {
  filter: brightness(0) invert(1);
}

.icon-brand {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.icon-brand-1 {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.icon-brand-2 {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

/* Rotate support */
.rotate-45 {
  transform: rotate(45deg);
}

/* Ensure arrow icons display properly */
img[src*="arrow-right-circle.svg"] {
  display: inline-block;
  vertical-align: middle;
}

/* Force arrow colors to work */
img[src*="arrow-right-circle.svg"].color-white {
  filter: brightness(0) invert(1);
}

img[src*="arrow-right-circle.svg"].color-brand-1 {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(162deg) brightness(118%) contrast(119%);
}

/* Force rotation for arrow icons */
img[src*="arrow-right-circle.svg"].rotate-45 {
  transform: rotate(45deg) !important;
}

/* Combined color and rotation */
img[src*="arrow-right-circle.svg"].color-white.rotate-45 {
  filter: brightness(0) invert(1);
  transform: rotate(45deg) !important;
}

img[src*="arrow-right-circle.svg"].color-brand-1.rotate-45 {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(162deg) brightness(118%) contrast(119%);
  transform: rotate(45deg) !important;
}

/* Override any existing SVG fill rules to use brand color */
/* Only apply to specific icon classes to avoid conflicts */
.icon-brand svg path,
.icon-brand svg {
  fill: rgba(var(--brand-color-rgb), 1) !important;
}

.icon-brand-1 svg path,
.icon-brand-1 svg {
  fill: rgba(var(--brand-color-rgb-1), 1) !important;
}

.icon-brand-2 svg path,
.icon-brand-2 svg {
  fill: rgba(var(--brand-color-rgb-2), 1) !important;
}

/* Map marker icons - ensure they use brand color */
.bi-geo-alt,
.bi-geo-alt-fill,
.map-marker-icon,
img[src*="geo-alt.svg"],
img[src*="map-marker.svg"] {
  color: rgba(var(--brand-color-rgb-1), 1) !important;
}

/* SVG map markers */
svg.bi-geo-alt,
svg.bi-geo-alt-fill,
svg.map-marker-icon {
  fill: rgba(var(--brand-color-rgb-1), 1) !important;
}

/* Location pin icons in location listings */
.color-brand-1 .bi-geo-alt,
.color-brand-1 .bi-geo-alt-fill,
.color-brand-1 .map-marker-icon {
  color: rgba(var(--brand-color-rgb-1), 1) !important;
  fill: rgba(var(--brand-color-rgb-1), 1) !important;
}

/* Leaflet map marker icons - force brand color */
.leaflet-marker-icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* Custom marker icon class for Leaflet */
.custom-marker-icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}