/* =========================================================================
   ONE BOOST — buttons.css
   Button variants (primary with shine sweep, ghost).
   ========================================================================= */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: transform .18s var(--ease), box-shadow .25s ease, background .2s, border-color .2s;
}
html[lang="ar"] .btn { font-family: var(--font-ar); }
.btn svg { width: 18px; height: 18px; }
.btn-lg { padding: 16px 30px; font-size: 16.5px; }

.btn-primary {
  background: linear-gradient(180deg, var(--red-bright), var(--red));
  color: #fff;
  box-shadow: 0 10px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -8px var(--glow); }
.btn-primary::before {
  content: ""; position: absolute; top: 0; inset-inline-start: -120%;
  width: 60%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: inset-inline-start .6s ease;
}
.btn-primary:hover::before { inset-inline-start: 130%; }

.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--red); background: var(--surface-3); }