/* ============================================================
   SIGNAL PACK — MY ACCOUNT, REQUEST QUOTE, WHATSAPP
   ============================================================ */

/* ================= MY ACCOUNT ================= */
.sp-account-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
@media (max-width:880px){ .sp-account-layout{ grid-template-columns:1fr; } }

.sp-account-menu{ background:var(--grey-bg); border-radius:var(--radius-2xl); padding:12px; }
.sp-account-menu a{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-md);
  font-size:13.5px; font-weight:600; color:var(--ink); transition:background var(--duration-fast) var(--ease);
}
.sp-account-menu a:hover{ background:var(--grey-alt); }
.sp-account-menu a.is-active{ background:var(--navy); color:#fff; }
.sp-account-menu a.sp-logout{ color:var(--color-error); margin-top:8px; border-top:1px solid var(--line); border-radius:0; padding-top:16px; }

.sp-account-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .sp-account-card-grid{ grid-template-columns:1fr; } }
.sp-dashboard-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:22px; }
.sp-dashboard-card h4{ margin-bottom:14px; }
.sp-dashboard-card .sp-dcard-row{ display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
.sp-dashboard-card .sp-dcard-row:last-of-type{ border-bottom:none; }
.sp-dashboard-card .sp-view-all{ margin-top:14px; display:inline-block; }
.sp-b2b-tag{ font-size:10px; text-transform:uppercase; font-weight:700; background:var(--ink); color:#fff; padding:2px 7px; border-radius:var(--radius-sm); margin-left:6px; }
.sp-b2c-tag{ font-size:10px; text-transform:uppercase; font-weight:700; border:1px solid var(--navy); color:var(--navy); padding:2px 7px; border-radius:var(--radius-sm); margin-left:6px; }

/* Auth screens */
.sp-auth-card{ max-width:420px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:36px; }
.sp-auth-card .sp-eyebrow{ display:block; margin-bottom:8px; }
.sp-auth-card h2{ font-size:24px; margin-bottom:8px; }
.sp-auth-card .sp-auth-sub{ font-size:13.5px; color:var(--grey-text); margin-bottom:24px; }
.sp-auth-switch{ text-align:center; font-size:13px; color:var(--grey-text); margin-top:20px; }
.sp-auth-success{ text-align:center; padding:20px 0; }
.sp-auth-success .sp-check-circle{ width:56px; height:56px; border-radius:50%; background:var(--color-success-bg); color:var(--color-success); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:26px; }

/* ================= REQUEST QUOTE ================= */
.sp-quote-progress{ display:flex; align-items:center; gap:6px; margin-bottom:28px; }
.sp-quote-progress .sp-step{ flex:1; height:4px; border-radius:var(--radius-pill); background:var(--line); }
.sp-quote-progress .sp-step.is-complete, .sp-quote-progress .sp-step.is-active{ background:var(--red); }
.sp-quote-progress-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--grey-text); margin-bottom:8px; }

.sp-quote-form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:32px; max-width:720px; }
.sp-quote-step{ display:none; }
.sp-quote-step.is-active{ display:block; }
.sp-quote-nav-row{ display:flex; justify-content:space-between; margin-top:24px; }

.sp-quote-product-preview{ display:flex; gap:14px; align-items:center; background:var(--grey-bg); border-radius:var(--radius-md); padding:14px; margin-bottom:20px; }
.sp-quote-product-preview img{ width:56px; height:56px; border-radius:var(--radius-sm); object-fit:cover; }
.sp-quote-product-preview h5{ font-size:13.5px; }
.sp-quote-product-preview p{ font-size:11.5px; color:var(--grey-text); }

.sp-quote-success-panel{ text-align:center; padding:40px 20px; }
.sp-quote-success-panel .sp-check-circle{ width:64px; height:64px; border-radius:50%; background:var(--color-success-bg); color:var(--color-success); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:30px; }
.sp-quote-success-panel h3{ margin-bottom:8px; }
.sp-quote-success-panel p{ color:var(--grey-text); max-width:420px; margin:0 auto; }

/* Mobile sticky quote trigger (product page context) — see 11-mobile-sticky.css */

/* ================= WHATSAPP ================= */
.sp-wa-floating{
  position:fixed; right:24px; bottom:24px; z-index:calc(var(--z-sticky-bar) - 1);
  width:56px; height:56px; border-radius:50%; background:var(--color-whatsapp); display:flex;
  align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  transition:background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.sp-wa-floating:hover{ background:var(--color-whatsapp-hover); transform:scale(1.05); }
.sp-wa-floating svg{ width:28px; height:28px; fill:#fff; }
@media (max-width:880px){ .sp-wa-floating{ right:16px; bottom:82px; width:50px; height:50px; } .sp-wa-floating svg{ width:24px; height:24px; } }

.sp-wa-inline{ display:inline-flex; align-items:center; gap:8px; }