/* ==========================================================
   /assets/ui/ljh-gadgets.css
   LJH GADGETS – BUTTON SYSTEM
   Version 3.1 – CLEAN CORE

   Ansvar:
   - Klickbara UI-element (buttons)
   - Ingen layout
   - Inga formulär
   - Inga komponent-specifika lösningar

   Filosofi:
   Gadgets ÄGER knappar
========================================================== */


/* ==========================================================
   1. BUTTON BASE
========================================================== */

.ljh-btn,
.ljh-btn:link,
.ljh-btn:visited {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.7rem 1.6rem;
  border-radius: 999px;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  font-family: inherit;      /* ← tillagt, saknades */

  border: 1px solid transparent;
  background: transparent;
  color: #f1f6ff;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease;        /* ← filter tillagt för brightness-hover */
}


/* ----------------------------------------------------------
   Hover / Active (NEUTRAL BASE)
---------------------------------------------------------- */

.ljh-btn:hover {

  transform: translateY(-1px);

  box-shadow:
    0 0 0 1px rgba(160,210,255,0.25),
    0 8px 20px rgba(0,0,0,0.4);
}

.ljh-btn:active {

  transform: translateY(0);

  box-shadow:
    0 0 0 1px rgba(160,210,255,0.35),
    0 0 18px rgba(140,200,255,0.35),
    0 12px 28px rgba(0,0,0,0.55);

  filter: brightness(1.05);
}


/* ----------------------------------------------------------
   Disabled
---------------------------------------------------------- */

.ljh-btn:disabled,
.ljh-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}


/* ----------------------------------------------------------
   ✅ BUGG 2 FIXAD – ersätt "all: unset" med selektiv reset
---------------------------------------------------------- */

button.ljh-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font: inherit;
  /* INTE all:unset – det raderar allt ovanstående */
}


/* ==========================================================
   2. PRIMARY ACTION (CTA)
========================================================== */

.ljh-btn-primary {

  background: linear-gradient(
    135deg,
    #3aa0ff,
    #1f6ed4
  );

  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;

  padding: 12px 26px;
  min-width: 200px;

  font-weight: 600;
  letter-spacing: 0.02em;

  box-shadow:
    0 10px 26px rgba(0,0,0,0.45),
    0 0 14px rgba(120,190,255,0.35);
}

/* Hover */
.ljh-btn-primary:hover {

  transform: translateY(-1px);
  filter: brightness(1.08);  /* ← ersätter den korrupta raden */

  /* ✅ BUGG 1 FIXAD – filter: none borttaget ur box-shadow */
  box-shadow:
    0 0 0 1px rgba(160,210,255,0.35),
    0 0 20px rgba(140,200,255,0.5),
    0 14px 30px rgba(0,0,0,0.55);
}

/* Active */
.ljh-btn-primary:active {

  transform: translateY(0);
  filter: brightness(1.0);

  box-shadow:
    0 0 10px rgba(120,180,255,0.45);
}

/* Disabled */
.ljh-btn-primary:disabled {
  opacity: 0.45;
  filter: grayscale(25%) brightness(0.9);
  box-shadow: none;
}


/* ==========================================================
   3. SECONDARY ACTION
========================================================== */

.ljh-btn-secondary {

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.06)
  );

  color: #e5edff;

  border: 1px solid rgba(255,255,255,0.28);

  backdrop-filter: blur(10px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 20px rgba(0,0,0,0.45);
}


/* ==========================================================
   4. POSITIVE ACTION
========================================================== */

.ljh-btn-positive {

  background: linear-gradient(
    180deg,
    rgba(60,200,140,0.55),
    rgba(20,160,100,0.55)
  );

  color: #ecfdf5;

  border: 1px solid rgba(255,255,255,0.35);

  box-shadow:
    inset 0 0 16px rgba(255,255,255,0.15),
    0 10px 26px rgba(20,120,80,0.45);
}


/* ==========================================================
   5. FROZEN / LOCKED
========================================================== */

.ljh-btn-frozen {

  background: rgba(255,255,255,0.12);
  color: #cbd5f5;

  border: 1px solid rgba(255,255,255,0.25);

  box-shadow:
    inset 0 0 14px rgba(255,255,255,0.2);

  cursor: not-allowed;
}


/* ==========================================================
   6. CLOSE / EXIT
========================================================== */

.ljh-btn-close {

  background: rgba(15,23,42,0.85);
  color: #ffffff;

  border: 1px solid rgba(255,90,90,0.45);

  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.06),
    0 0 10px rgba(255,60,60,0.35);
}

.ljh-btn-close:hover {

  box-shadow:
    0 0 18px rgba(255,60,60,0.6),
    0 0 32px rgba(255,40,40,0.4);
}


/* ==========================================================
   7. CAMPAIGN CTA (OPTIONAL)
========================================================== */

.ljh-btn-campaign {

  background: linear-gradient(
    180deg,
    rgba(255,215,120,0.85),
    rgba(200,140,40,0.85)
  );

  color: #2a1a00;

  border: 1px solid rgba(255,230,150,0.6);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 0 18px rgba(255,200,80,0.55),
    0 10px 28px rgba(0,0,0,0.55);

  font-weight: 700;
}

.ljh-btn-campaign:hover {

  transform: translateY(-2px);

  box-shadow:
    0 0 28px rgba(255,210,100,0.85),
    0 18px 36px rgba(0,0,0,0.65);
}