/* Button styles */
nav a,
button {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-light);
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}

nav a:hover,
button:hover {
  background: var(--gold);
  color: var(--black);
}

body button[type="submit"],
body button[type="delete"],
body button[type="cancel"],
body button[type="stylea"],
body button[type="styleb"],
body button[type="stylec"],
body .card button,
.btn-type-delete,
.btn-type-cancel,
.btn-type-styleA,
.btn-type-styleB,
.btn-type-styleC {
  background: var(--crimson);
  color: var(--ink);
  border: 1px solid var(--gold);
  cursor: pointer;
  border-radius: 0.35rem;
  transition: background 0.15s;
}

body button[type="submit"]:hover,
body button[type="delete"]:hover,
body button[type="cancel"]:hover,
body button[type="stylea"]:hover,
body button[type="styleb"]:hover,
body button[type="stylec"]:hover,
body .card button:hover,
.btn-type-delete:hover,
.btn-type-cancel:hover,
.btn-type-styleA:hover,
.btn-type-styleB:hover,
.btn-type-styleC:hover {
  background: #a0241a;
}

.btn-type-toggle,
body button[type="toggle"] {
  background: rgba(38, 48, 49, 0.92);
  color: var(--ink);
  border: 1px solid var(--gold);
}

.btn-type-toggle:hover,
body button[type="toggle"]:hover {
  background: rgba(58, 72, 73, 0.96);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 0.3rem;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-icon img {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  filter: invert(80%) sepia(20%) saturate(400%) hue-rotate(5deg);
}

.btn-icon:hover {
  background: var(--crimson);
}

@media (max-width: 767px) {
  .btn-icon {
    width: 100%;
    height: 2.2rem;
    border-radius: 0.3rem;
    justify-content: flex-start;
    padding: 0 0.6rem;
    gap: 0.5rem;
  }

  .btn-icon::after {
    content: "Logout";
    color: var(--gold-light);
    font-size: 0.9rem;
  }
}

.btn-link {
  color: var(--gold-light);
  text-decoration: underline;
  font-size: 0.9rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.btn-link:hover {
  color: var(--gold);
}

.btn-sm {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--gold);
  border-radius: 0.3rem;
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.12s;
  white-space: nowrap;
}

.btn-sm:hover {
  background: var(--gold);
  color: var(--black);
}

.btn-sm-active {
  background: var(--gold);
  color: var(--black);
}

.users-delete-btn {
  padding: 0 0;
  min-width: auto;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.users-delete-btn:hover {
  opacity: 0.8;
}