/* Buttons, icons, dropdowns: consistent UI (no palette changes) */

/* --- Buttons --- */
.btn {
  font-weight: 600;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  letter-spacing: 0.1px;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* Keep special button types unchanged */
.btn.btn-link,
.navbar-toggler,
.btn-close {
  border-radius: inherit;
  transition: none;
}

.btn:not(.btn-link):not(.navbar-toggler):not(.btn-close):hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.btn:not(.btn-link):not(.navbar-toggler):not(.btn-close):active {
  transform: translateY(0) scale(0.99);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 128, 128, 0.18);
}

/* Ensure icon + text alignment inside buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn i,
.btn svg,
.btn .bi {
  line-height: 1;
  font-size: 1em;
  vertical-align: -0.12em;
}

/* --- Icons (global normalization) --- */
.fas,
.far,
.fab,
.bi,
.fa,
[class^="bi-"] {
  line-height: 1;
}

a i,
a .bi,
button i,
button .bi {
  vertical-align: -0.12em;
}

/* Reduce random oversized icons in nav/dropdowns */
.dropdown-toggle i,
.dropdown-toggle .bi {
  font-size: 0.95em;
}

/* --- Dropdowns --- */
.dropdown-toggle::after {
  /* Bootstrap caret: make it clearly visible */
  margin-left: 0.5rem;
  vertical-align: 0.12em;
  border-top-width: 0.38em;
  border-right-width: 0.38em;
  border-left-width: 0.38em;
}

.dropdown-menu {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
  padding: 10px;
  min-width: 14rem;
}

.dropdown-item {
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 500;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-item i,
.dropdown-item .bi {
  font-size: 1em;
  width: 1.25em;
  text-align: center;
  opacity: 0.9;
}

/* Smooth open/close animation (works with Bootstrap .show) */
.dropdown-menu {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  display: block; /* keep layout predictable; Bootstrap controls visibility */
  visibility: hidden;
  pointer-events: none;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.dropdown-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .dropdown-menu {
    transition: none !important;
  }
}