/* DN2 Buttons — mirrored from resources/scss/classes/_buttons.scss + mixins/_buttons.scss */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--blue2);
  padding: var(--btn-vertical-padding) var(--btn-horizontal-padding);
  background: transparent;
  color: var(--blue2);
  transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
  white-space: nowrap;
  min-height: 3.4rem;
}

.btn:hover {
  border-color: var(--blue7);
  color: var(--blue7);
  background: var(--greyE);
}

/* ----- Solid blue (primary) ----- */
.btn.color {
  background: var(--blue2);
  color: #fff;
  border-color: var(--blue2);
}
.btn.color:hover {
  background: var(--blue7);
  border-color: var(--blue7);
  color: #fff;
}

/* ----- Light blue ----- */
.btn.light-blue {
  background: var(--blue7);
  color: #fff;
  border-color: var(--blue7);
}
.btn.light-blue:hover {
  background: var(--blue5);
  border-color: var(--blue5);
}

/* ----- Red ----- */
.btn.red {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn.red:hover {
  background: var(--dark-red);
  border-color: var(--dark-red);
}

/* ----- White / inverted ----- */
.btn.white {
  background: #fff;
  color: var(--blue2);
  border-color: #fff;
}
.btn.white:hover {
  background: var(--greyE);
  border-color: var(--greyE);
  color: var(--blue7);
}

/* ----- Grey ----- */
.btn.grey {
  background: var(--greyE);
  color: var(--grey3);
  border-color: var(--greyE);
}
.btn.grey:hover {
  background: var(--greyC);
  border-color: var(--greyC);
}

/* ----- Link (no border) ----- */
.btn.link {
  border-color: transparent;
  background: transparent;
  color: var(--blue2);
}
.btn.link:hover {
  background: transparent;
  color: var(--blue7);
  border-color: transparent;
}

/* ----- Profile / fixed-height variants ----- */
.btn.profile {
  height: 4rem;
  padding: 0 1.6rem;
}
.btn.edit-profile {
  height: 4rem;
  padding: 0 3rem;
}
.btn.settings {
  height: 4rem;
  padding: 0 2.4rem;
  font-size: 1.2rem;
}

/* ----- Big ----- */
.btn.big {
  padding: var(--btn-full-vertical-padding) var(--btn-full-horizontal-padding);
  font-size: 1.4rem;
  min-height: 5.4rem;
}

/* ----- Width modifiers ----- */
.btn.full-width { width: 100%; }
@media (max-width: 719px) {
  .btn.mobile-full-width { width: 100%; }
}

/* ----- Disabled ----- */
.btn:disabled,
.btn.disabled {
  border-color: var(--greyA) !important;
  background: var(--greyA) !important;
  color: #fff !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* Default (outline) disabled keeps a softer look */
.btn:not(.color):not(.light-blue):not(.red):not(.white):not(.grey):not(.link).disabled {
  background: transparent !important;
  color: var(--greyA) !important;
}