/* =====================================================
   buttons-unified.css
   Ger ALLA knappar på sajten samma färg, form och hover-beteende som
   "Om oss"-sidans hero-knappar (den rosa/lila gradienten). Laddas sist i
   <head> så den vinner över style.css utan att behöva !important överallt.
   Täcker de klassnamn/element som redan används runt om i koden:
   .btn-primary, .btn-secondary, .sign-up, .sign-in, header-search-btn,
   samt vanliga <button type="submit"> i formulär.
===================================================== */

:root {
  --btn-pink: #f28b93;
  --btn-purple: #4a3f66;
}

.btn-primary,
.sign-up,
a.sign-up,
.oo-btn-primary,
button[type="submit"]:not(.header-search-btn):not(.addon-dropdown__trigger),
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--btn-pink), var(--btn-purple)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 12px 28px -12px rgba(74, 63, 102, 0.6);
}

.btn-primary:hover,
.sign-up:hover,
a.sign-up:hover,
.oo-btn-primary:hover,
button[type="submit"]:not(.header-search-btn):not(.addon-dropdown__trigger):hover,
input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(74, 63, 102, 0.75);
  filter: brightness(1.03);
}

.btn-primary:active,
.sign-up:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(-1px);
}

/* Sekundära knappar: outline i samma färgfamilj istället för fylld yta,
   för visuell hierarki (matchar oo-btn-ghost på Om oss-sidan). */
.btn-secondary,
.sign-in,
a.sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent !important;
  color: var(--btn-purple) !important;
  border: 2px solid var(--btn-purple) !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.4rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btn-secondary:hover,
.sign-in:hover,
a.sign-in:hover {
  background: var(--btn-purple) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Ljus kontext (t.ex. mörk header) – sign-in-länken i huvudmenyn ligger på
   en mörk bakgrund, så den ska vara ljus-outline där istället. */
.header .auth .sign-in {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
}
.header .auth .sign-in:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .sign-up, .btn-secondary, .sign-in, button[type="submit"], input[type="submit"] {
    transition: none;
  }
}