/* Fix for iOS background-attachment: fixed issue */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

/* Style for color badges */
.badge {
  transition: all 0.2s ease;
  white-space: normal; /* Allow text wrapping */
  padding: 0.5em 0.6em;
}

.badge:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Fabric swatch animation */
.swatch-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Smooth transitions */
a,
.btn {
  transition: all 0.2s ease;
}

/* Enhanced link styling */
a:not(.btn):not(.badge):not(.navbar-brand) {
  text-decoration: none;
  border-bottom: 1px dotted;
}

a:not(.btn):not(.badge):not(.navbar-brand):hover {
  border-bottom: 1px solid;
}

/* Better navigation on small screens */
@media (max-width: 576px) {
  .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Animation for background image loading */
.bg-loaded {
  animation: fadeInBackground 0.5s ease-in;
}

@keyframes fadeInBackground {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}