/* ============================================================
   MyTrafficBuzz — Buttons

   The button component and its modifiers (primary, accent,
   outline).

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 27px;border-radius:12px;font-weight:600;font-size:15px;font-family:'DM Sans',sans-serif;transition:var(--t);cursor:pointer;border:none;line-height:1.4;position:relative}
.btn--primary{background:var(--g2);color:var(--wh);box-shadow:0 4px 18px rgba(226,58,78,.32);overflow:hidden}
.btn--primary::before{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(226,58,78,.42)}
.btn--primary:hover::before{left:125%}
.btn--outline{border:1.5px solid rgba(255,255,255,.55);color:var(--wh);background:rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:12px 26px}
.btn--outline:hover{background:var(--wh);color:var(--pri);border-color:var(--wh)}
.btn--accent{background:var(--acc);color:var(--wh)}
.btn--accent:hover{background:var(--acc-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,58,78,.35)}