html, body {
  font-family: "Poppins", sans-serif;
}

  .brand{
  max-height: 40px !important;
}

.small-icon .mud-nav-link-icon {
  font-size: 1.2rem; /* Change this to your desired size */
}

/* HOVER EXPAND */
.expand-hover {
  transition: all .3s ease-in-out;
}
  .expand-hover:hover {
    transform: scale(1.05);
  }
/* ************ */


/* OBSERVE */
.observed-item {
  opacity: 0; /* Initially hidden */
  transform: translateY(20px); /* Start slightly below its final position */
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

  .observed-item.in-view {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to its original position */
  }

/* Define a base style for dimming */
.lowqty {
  position: relative;
  filter: brightness(0.6); /* Dim the image */
}

  .lowqty::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 223, 0, 0.2); /* Dim yellow overlay */
    z-index: 1;
    pointer-events: none; /* Allows clicks to pass through the overlay */
  }

/* Add hover effect */
.btn-hover:hover {
  background-color: var(--mud-palette-primary);
  color: white;
  border-color: var(--mud-palette-primary);
}

.blurred-background-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

  .blurred-background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    z-index: 1;
    background-image: inherit;
  }

  .blurred-background-image img {
    width: 50%;
    max-height: 200px;
    border-radius: 4px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 10; /* Above the blurred background */
  }

/* WAIT CURSOR FOR waitcursor.js */
html.hh-wait, html.hh-wait * {
  cursor: wait !important;
}


/* ****************** */
/* Ensure page content never tucks under the MudAppBar (mobile wrap-safe) */
.hh-main-content {
  /* MudBlazor exposes the current appbar height as a CSS var in most themes */
  padding-top: calc(var(--mud-appbar-height, 56px) + 8px);
}

/* Optional: slightly more breathing room on larger screens */
@media (min-width: 960px) {
  .hh-main-content {
    padding-top: calc(var(--mud-appbar-height, 64px) + 16px);
  }
}

/* Optional: iOS notch safe-area support */
@supports (padding: max(0px)) {
  .hh-main-content {
    padding-top: max(calc(var(--mud-appbar-height, 56px) + 8px), env(safe-area-inset-top));
  }
}
/* ****************** */