/* Sprayvue Spraying Visualiser
   Inherits the site's typography; only the brand purple is pinned here. */
.svv{--svv-purple:#64009e;--svv-ink:#2b2b2b;--svv-line:#e3e3e8;--svv-radius:12px;
     max-width:960px;margin:0 auto;color:var(--svv-ink)}
.svv *,.svv *::before,.svv *::after{box-sizing:border-box}
.svv-step{display:none}
.svv-step.is-active{display:block}

/* upload */
.svv-dropzone{border:2px dashed var(--svv-line);border-radius:var(--svv-radius);padding:48px 24px;
  text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;background:#fcfcfd}
.svv-dropzone:hover,.svv-dropzone:focus-visible,.svv-dropzone.is-over{
  border-color:var(--svv-purple);background:#faf5ff;outline:none}
.svv-dz-icon{width:44px;height:44px;color:var(--svv-purple);margin-bottom:10px}
.svv-dz-title{margin:0 0 6px;font-weight:600}
.svv-dz-hint{margin:0;font-size:.85em;opacity:.7}

.svv-preview{position:relative;margin-top:18px}
.svv-preview-img{display:block;width:100%;height:auto;border-radius:var(--svv-radius)}
.svv-remove{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.svv-remove:hover{background:rgba(0,0,0,.8)}

/* choices */
.svv-targets,.svv-colours{border:0;padding:0;margin:28px 0 0}
.svv-targets legend,.svv-colours legend{font-weight:600;font-size:1.05em;padding:0;margin-bottom:12px}
.svv-target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.svv-target{display:flex;align-items:center;gap:10px;border:1px solid var(--svv-line);
  border-radius:var(--svv-radius);padding:12px 14px;cursor:pointer;transition:border-color .2s,background-color .2s}
.svv-target:hover{border-color:var(--svv-purple)}
.svv-target input{accent-color:var(--svv-purple);margin:0}
.svv-target:has(input:checked){border-color:var(--svv-purple);background:#faf5ff}
.svv-help{font-size:.85em;opacity:.75;margin:10px 0 0}

.svv-colour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px}
.svv-colour{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;
  border:1px solid var(--svv-line);border-radius:var(--svv-radius);padding:12px 6px;cursor:pointer;
  font:inherit;color:inherit;transition:border-color .2s,transform .15s}
.svv-colour:hover{border-color:var(--svv-purple);transform:translateY(-2px)}
.svv-colour[aria-pressed="true"]{border-color:var(--svv-purple);box-shadow:0 0 0 2px rgba(100,0,158,.15)}
/* the swatch is the only thing carrying the colour, so it must never collapse */
.svv-swatch{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:0 0 46px}
.svv-colour-name{font-size:.8em;text-align:center;line-height:1.3}

.svv-consent{display:flex;gap:10px;align-items:flex-start;margin:24px 0 0;font-size:.9em}
.svv-consent input{accent-color:var(--svv-purple);margin-top:3px}

.svv-error{color:#b3261e;margin:16px 0 0;font-size:.92em}

.svv-btn{display:inline-block;border:2px solid var(--svv-purple);border-radius:50px;
  padding:13px 32px;font-weight:600;cursor:pointer;text-decoration:none;font:inherit;
  font-weight:600;transition:background-color .2s,color .2s}
.svv-btn-primary{background:var(--svv-purple);color:#fff;margin-top:24px}
.svv-btn-primary:hover{background:#4d0079;border-color:#4d0079;color:#fff}
.svv-btn-secondary{background:transparent;color:var(--svv-purple)}
.svv-btn-secondary:hover{background:var(--svv-purple);color:#fff}
.svv-btn[disabled]{opacity:.5;cursor:not-allowed}

/* working */
.svv-step-processing{text-align:center;padding:56px 20px}
.svv-spinner{width:46px;height:46px;margin:0 auto 18px;border:4px solid var(--svv-line);
  border-top-color:var(--svv-purple);border-radius:50%;animation:svv-spin 1s linear infinite}
@keyframes svv-spin{to{transform:rotate(360deg)}}
.svv-processing-text{font-weight:600;margin:0 0 6px}
.svv-processing-hint{font-size:.88em;opacity:.7;margin:0 0 20px}
.svv-progress{height:6px;border-radius:3px;background:var(--svv-line);overflow:hidden;max-width:420px;margin:0 auto}
.svv-progress-fill{height:100%;width:0;background:var(--svv-purple);transition:width .4s ease}
@media (prefers-reduced-motion:reduce){
  .svv-spinner{animation-duration:3s}
  .svv-progress-fill{transition:none}
}

/* result */
.svv-result-title{margin:0 0 16px}
.svv-compare{position:relative;overflow:hidden;border-radius:var(--svv-radius);line-height:0;
  user-select:none;touch-action:pan-y}
.svv-compare img{display:block;width:100%;height:auto}
.svv-compare-after-wrap{position:absolute;inset:0;width:50%;overflow:hidden}
.svv-compare-after-wrap img{width:auto;max-width:none;height:100%}
.svv-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.svv-handle::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.svv-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.svv-range:focus-visible{opacity:.001;outline:3px solid var(--svv-purple);outline-offset:2px}
.svv-tag{position:absolute;bottom:14px;padding:5px 12px;border-radius:50px;background:rgba(0,0,0,.6);
  color:#fff;font-size:.75em;line-height:1.6;letter-spacing:.04em;text-transform:uppercase}
.svv-tag-before{left:14px}
.svv-tag-after{right:14px}
.svv-disclaimer{font-size:.85em;opacity:.75;margin:16px 0 0}
.svv-result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.svv-result-actions .svv-btn{margin-top:0}

.svv-step-error{text-align:center;padding:40px 20px}
.svv-error-message{color:#b3261e;font-weight:600;margin:0 0 18px}

@media (max-width:600px){
  .svv-dropzone{padding:32px 16px}
  .svv-result-actions{flex-direction:column}
  .svv-result-actions .svv-btn{width:100%;text-align:center}
}