.transition-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .transition-icon.fade-out {
    opacity: 0;
    transform: rotate(180deg) scale(0.8);
  }

.active-link {
  color: red !important;
  font-weight: bold;
}
  
  /* Dropdown on hover for large screens */
  @media (min-width: 992px) {
    .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
    }
  }

  #mobileServices .nav-link {
    padding-left: 1rem;
    font-size: 0.95rem;
  }

/* add routes menu */
@media (min-width: 992px) {
  .flex-grow-1.gap-2 > .btn {
    min-width: 100px;
    text-align: center;
  }
}
@media (max-width: 991.98px) {
  .topnav-btn {
    padding: 0.75rem 1rem;
    font-size: 1.3rem;
  }

  .topnav-btn i {
    font-size: 1.75rem;
  }
}
/* category btn active*/
.btn-outline-secondary.active {
  background-color: #dc3545; /* red */
  color: white;
  border-color: #dc3545;
}

.avatar-glow {
  width: 80%;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  object-fit: cover;
}

.avatar-active {
  box-shadow: 0 0 20px rgba(0, 200, 0, 0.5); /* green glow */
}

.avatar-inactive {
  box-shadow: 0 0 20px rgba(200, 0, 0, 0.5); /* red glow */
}

.avatar-unknown {
  box-shadow: 0 0 20px rgba(128, 128, 128, 0.4); /* gray glow */
}

.option-block {
  position: relative;
  padding-top: 2.5rem;
}

.option-block .delete-block-btn {
  z-index: 1;
}
/* General font settings for better readability */


/* Mobile navbar adjustments TOPNAV*/
@media (max-width: 991.98px) {
  nav.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  nav.navbar .navbar-brand img {
    height: 70px;
  }

  .nav-link,
  .dropdown-item,
  .offcanvas-title,
  .btn,
  #toggleThemeBtn,
  .bi {
    font-size: 1.2rem !important;
  }

  .btn,
  .dropdown-toggle,
  #toggleThemeBtn {
    padding: 0.6rem 1rem !important;
  }

  .offcanvas {
    padding: 1.5rem 1rem !important;
  }

  .offcanvas .nav-link {
    padding: 0.75rem 0.5rem;
  }

  .offcanvas .navbar-nav {
    gap: 0.5rem;
  }
}

/* === Typography === */
body {
  font-family: 'Segoe UI', sans-serif; /* clean default body font */
}

.navbar, .nav-link, .dropdown-item {
  font-family: 'Montserrat', sans-serif; /* more modern/stylish nav font */
  font-weight: 600;
}

.btn {
  font-family: 'Roboto', sans-serif; /* button font that's bold and sharp */
  font-weight: 500;
}

.navbar-nav .nav-link,
.offcanvas-body .nav-link,
.dropdown-menu .dropdown-item {
  font-family: 'Rubik', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
}

button, .btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}

/* === Navbar buttons/icons === */
.navbar .btn,
.navbar .dropdown-toggle {
  padding: 0.55rem 0.8rem;
  font-size: 1.1rem;
}

.navbar .bi,
.navbar .btn .bi,
.navbar .dropdown-toggle .bi {
  font-size: 1.4rem;
}

/* === Offcanvas mobile nav === */
.offcanvas-body .nav-link {
  padding: 0.6rem 0;
  font-size: 1.15rem;
}

/* Optional: style dropdown menu for consistency */
.dropdown-menu {
  font-size: 1rem;
}

#themeIcon.transition-icon {
  transition: transform 0.3s ease;
}

#toggleThemeBtn:hover #themeIcon {
  transform: rotate(20deg);
}

#sMenuTgl {
  transition: all 0.3s ease;
}

.shop-block.slide-left {
  animation: slideOutLeft 0.6s forwards;
}

@keyframes slideOutLeft {
  to {
    transform: translateX(-100%);
    opacity: 0;
    display: none;
  }
}


.admin-card-body {
  justify-content: center;
  min-height: 180px;
}

.admin-card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
}

.admin-card-text {
  font-size: 1.05rem;
}

.admin-card-link {
  display: block;
  height: 100%;
  text-decoration: none !important;
  color: inherit;
}

.admin-card-link:hover,
.admin-card-link:focus {
  text-decoration: none !important;
}

.admin-card-link .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-card-link:hover .card,
.admin-card-link:focus .card {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.admin-card-title i {
  font-size: 2rem;
  color: #f8f9fa;
}