/* ============================================================
   SIGNAL PACK — BUTTON SYSTEM
   Variants: primary (red), secondary (navy), outline, text,
   whatsapp, icon. Sizes: sm / md / lg / full. States: default,
   hover, active, focus, disabled, loading, success.
   ============================================================ */

.sp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-button);
  letter-spacing:0.02em; text-transform:uppercase; border-radius:var(--radius-md);
  height:var(--control-height-md); padding:0 26px; border:2px solid transparent;
  transition:background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
  white-space:nowrap; line-height:1;
}
.sp-btn:disabled, .sp-btn.is-disabled{ opacity:0.5; cursor:not-allowed; pointer-events:none; }

/* Primary — Signal Pack Red */
.sp-btn-primary{ background:var(--red); color:#fff; border-color:var(--red); }
.sp-btn-primary:hover{ background:#c8151f; border-color:#c8151f; }
.sp-btn-primary:active{ background:#a91119; border-color:#a91119; }

/* Secondary — Signal Pack Blue */
.sp-btn-secondary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.sp-btn-secondary:hover{ background:var(--red); border-color:var(--red); }
.sp-btn-secondary:active{ background:#c8151f; border-color:#c8151f; }

/* Outline */
.sp-btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.sp-btn-outline:hover{ background:var(--navy); color:#fff; }
.sp-btn-outline.on-dark{ border-color:rgba(255,255,255,0.65); color:#fff; }
.sp-btn-outline.on-dark:hover{ background:#fff; color:var(--navy); border-color:#fff; }

/* Text button — low priority actions */
.sp-btn-text{ background:none; border:none; color:var(--navy); height:auto; padding:4px 2px; text-transform:none; font-weight:600; letter-spacing:0; }
.sp-btn-text:hover{ color:var(--red); text-decoration:underline; }

/* WhatsApp */
.sp-btn-whatsapp{ background:var(--color-whatsapp); color:#fff; border-color:var(--color-whatsapp); }
.sp-btn-whatsapp:hover{ background:var(--color-whatsapp-hover); border-color:var(--color-whatsapp-hover); }
.sp-btn-whatsapp svg{ width:16px; height:16px; fill:#fff; }

/* Sizes */
.sp-btn-sm{ height:var(--control-height-sm); padding:0 16px; font-size:11px; }
.sp-btn-md{ height:var(--control-height-md); padding:0 26px; }
.sp-btn-lg{ height:var(--control-height-lg); padding:0 32px; font-size:13.5px; }
.sp-btn-full{ width:100%; }

/* Focus state (in addition to global focus-visible ring) */
.sp-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.sp-btn-primary:focus-visible, .sp-btn-whatsapp:focus-visible{ outline-color:var(--ink); }

/* Loading state */
.sp-btn.is-loading{ color:transparent !important; position:relative; pointer-events:none; }
.sp-btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:sp-spin .7s linear infinite;
}
.sp-btn-outline.is-loading::after{ border-color:rgba(44,42,120,0.3); border-top-color:var(--navy); }
@keyframes sp-spin{ to{ transform:rotate(360deg); } }

/* Success state (e.g. "Added ✓") */
.sp-btn.is-success{ background:var(--color-success); border-color:var(--color-success); color:#fff; }

/* ---------- Icon buttons ---------- */
.sp-icon-btn-standalone{
  width:var(--icon-btn-size); height:var(--icon-btn-size); border-radius:var(--radius-circle);
  border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.sp-icon-btn-standalone:hover{ border-color:var(--navy); background:var(--grey-bg); }
.sp-icon-btn-standalone:active{ background:var(--grey-alt); }
.sp-icon-btn-standalone svg{ width:16px; height:16px; stroke:var(--ink); }
.sp-icon-btn-standalone:disabled{ opacity:0.4; pointer-events:none; }

/* Quantity stepper buttons */
.sp-qty-btn{
  width:32px; height:32px; border:1px solid var(--line); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--navy);
  transition:background var(--duration-fast) var(--ease);
}
.sp-qty-btn:hover{ background:var(--grey-bg); }
.sp-qty-btn:disabled{ opacity:0.35; pointer-events:none; }