/**
 * Amati 360 Spin Viewer — styles
 *
 * Namespaced under .asp- so nothing here can collide with nw-theme, Slick or
 * Featherlight, all of which are loaded on maker pages.
 *
 * @package amati-spin
 */

.asp{position:relative;width:100%}
.asp-stage{position:relative;overflow:hidden;background:#fff;touch-action:pan-y}
.asp-stage canvas{display:block;width:100%;height:auto;cursor:grab;
  -webkit-user-select:none;user-select:none}
.asp-stage.is-drag canvas{cursor:grabbing}

.asp-veil{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.72);transition:opacity .35s ease}
.asp-veil.is-gone{opacity:0;pointer-events:none;visibility:hidden}
.asp-bar{width:110px;height:2px;background:rgba(0,0,0,.12);border-radius:2px;overflow:hidden}
.asp-bar i{display:block;height:100%;width:0;background:#a8834e;transition:width .12s linear}

/* Badge sits on the image so the viewer reads as interactive before
   anyone touches it. Fades away once the visitor starts dragging. */
.asp-badge{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;pointer-events:none;
  background:rgba(255,255,255,.93);border:1px solid rgba(0,0,0,.09);
  border-radius:100px;padding:6px 13px;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:#4a453c;white-space:nowrap;
  box-shadow:0 1px 6px rgba(0,0,0,.07);transition:opacity .4s ease}
.asp-badge.is-gone{opacity:0}
.asp-badge svg{width:13px;height:13px;fill:none;stroke:#a8834e;stroke-width:1.7}

.asp-ui{margin-top:9px;display:flex;align-items:center;gap:8px}
.asp-btn{width:29px;height:29px;flex:0 0 auto;border:1px solid rgba(0,0,0,.14);
  background:#fff;border-radius:50%;cursor:pointer;color:#3a352e;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.asp-btn:hover{border-color:#a8834e;color:#a8834e}
.asp-btn:focus-visible{outline:2px solid #a8834e;outline-offset:2px}
.asp-btn svg{width:12px;height:12px;fill:currentColor}
.asp-track{flex:1 1 auto;height:29px;position:relative;cursor:pointer;
  border:1px solid rgba(0,0,0,.12);border-radius:3px;background:#fff;
  overflow:hidden;touch-action:none}
.asp-car{position:absolute;top:0;bottom:0;width:3px;background:#a8834e;
  opacity:.85;transform:translateX(-50%);pointer-events:none}

dialog.asp-full{border:0;padding:0;width:100vw;height:100vh;max-width:100vw;
  max-height:100vh;background:#fff;overflow:hidden}
dialog.asp-full::backdrop{background:rgba(24,22,19,.92)}
.asp-full-in{position:absolute;inset:0}
.asp-full-in canvas{display:block;touch-action:none;-webkit-user-select:none;user-select:none}
.asp-close{position:fixed;top:15px;right:15px;z-index:3;font-size:17px;line-height:1}
.asp-zoomui{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.1);border-radius:100px;padding:7px 15px;
  box-shadow:0 2px 13px rgba(0,0,0,.14)}
.asp-zoomui input[type=range]{width:155px;accent-color:#a8834e}
.asp-zlab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#6f6a60;min-width:36px;text-align:right}
@media (max-width:640px){ .asp-zoomui input[type=range]{width:92px} }

/* Respect the visitor's motion preference for the idle nudge only;
   dragging is always available. */
@media (prefers-reduced-motion:reduce){ .asp-badge{transition:none} }