/* SPRCLB pay now + thanks page. Built on the storefront tokens in sprclb.css (paper, cream, ink, olive, pimento). */

/* ---------- the pay block under "Order on WhatsApp" ---------- */
.sp-pay{display:flex;flex-direction:column;gap:12px;width:100%}
.sp-or{display:flex;align-items:center;gap:14px;margin:0;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute,#6E5D4E)}
.sp-or::before,.sp-or::after{content:"";flex:1 1 auto;border-top:1px solid var(--line,rgba(53,41,31,.14))}

.sp-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:6px 8px 6px 24px;border-radius:999px;border:1px solid var(--ink,#35291F);background:transparent;color:var(--ink,#35291F);font-family:var(--sans,sans-serif);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s ease}
.sp-toggle:hover,.sp-toggle[aria-expanded="true"]{background:var(--cream2,#F1E6D4)}
.sp-toggle:disabled{opacity:.5;cursor:not-allowed}
.sp-toggle-l{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.sp-lock{width:14px;height:14px;flex:0 0 auto;color:var(--olive,#5A6436)}
.sp-marks{display:inline-flex;gap:5px;flex:0 1 auto;min-width:0}
.sp-mark{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:999px;background:var(--paper,#FFFDF8);border:1px solid rgba(53,41,31,.22);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;white-space:nowrap;color:var(--ink,#35291F)}
.sp-toggle-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.sp-toggle-sub{display:none;margin-top:3px;font-size:11.5px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink2,#5C4D3E)}
/* narrow column (phones, the 1001-1180px product layout): the marks become a line inside the button */
.sp-pay{container-type:inline-size;container-name:sp-pay}
@container sp-pay (max-width:440px){
  .sp-marks{display:none}
  .sp-toggle-sub{display:block}
  .sp-toggle{min-height:60px;padding:8px 22px;justify-content:center}
}
@supports not (container-type:inline-size){
  @media (max-width:520px){.sp-marks{display:none}.sp-toggle-sub{display:block}.sp-toggle{min-height:60px;padding:8px 22px;justify-content:center}}
}

.sp-panel{display:flex;flex-direction:column;gap:16px;background:var(--cream2,#F1E6D4);border-radius:20px;padding:20px 20px 22px}
.sp-panel[hidden]{display:none}
.sp-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}
.sp-f{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-f.sp-wide{grid-column:1 / -1}
.sp-l{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink,#35291F)}
.sp-f .input[aria-invalid="true"]{border-bottom-color:var(--pimento,#C04B33);box-shadow:inset 0 -1px 0 var(--pimento,#C04B33)}
@media (max-width:520px){.sp-fields{grid-template-columns:minmax(0,1fr)}.sp-panel{padding:16px 16px 18px}}
.sp-note,.sp-fine{margin:0}
.sp-fine{text-align:center}
.sp-err{margin:0;padding:12px 14px;border-radius:14px;background:#F7E3DD;color:#7A2E1F;font-size:14px;line-height:1.45}
.sp-err[hidden]{display:none}
.sp-err a{color:inherit;font-weight:500;text-underline-offset:3px;white-space:nowrap}
.sp-go[aria-busy="true"]{opacity:.75;cursor:progress}
.sp-go:disabled{cursor:progress}
.sp-status{margin:0;padding:12px 16px;border-radius:14px;background:var(--cream2,#F1E6D4);font-size:14px;line-height:1.45;color:var(--ink2,#5C4D3E)}
.sp-test{margin:0;padding:8px 12px;border-radius:10px;border:1px dashed var(--brass,#AE8A50);font-size:12.5px;line-height:1.4;color:var(--ink2,#5C4D3E)}

/* ---------- thanks.html and pay.html ---------- */
.sp-page .sp-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.sp-page .sp-block[hidden]{display:none}
.sp-page h1:focus{outline:none}
.sp-page .lede{margin-left:auto;margin-right:auto}
.sp-ref{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--paper,#FFFDF8);border:1px solid var(--line,rgba(53,41,31,.14));font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.sp-ref b{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.14em}
.sp-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sp-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px;width:100%;max-width:520px;text-align:left;counter-reset:sp}
.sp-steps li{counter-increment:sp;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:18px;background:var(--paper,#FFFDF8);color:var(--ink2,#5C4D3E);font-size:15px;line-height:1.5}
.sp-steps li::before{content:counter(sp);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent,#EABBB7);color:var(--ink,#35291F);font-family:var(--serif,serif);font-size:19px;line-height:1}
.sp-steps b{color:var(--ink,#35291F);font-weight:500}
.sp-banner{margin:0;padding:8px 16px;border-radius:999px;border:1px dashed var(--brass,#AE8A50);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.sp-banner[hidden]{display:none}
.sp-dots{display:inline-flex;gap:8px}
.sp-dots i{width:9px;height:9px;border-radius:50%;background:var(--olive2,#9AA74B)}
@media (prefers-reduced-motion:no-preference){
  .sp-dots i{animation:sp-dot 1.2s ease-in-out infinite}
  .sp-dots i:nth-child(2){animation-delay:.15s}
  .sp-dots i:nth-child(3){animation-delay:.3s}
}
@keyframes sp-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.sp-aside{margin:6px 0 0;max-width:46ch}
@media (forced-colors:active){.sp-toggle,.sp-mark,.sp-ref,.sp-err,.sp-status{border:1px solid CanvasText}}