/* Page tours (docs/ONBOARDING.md, the five tour boards). Engine: tour.js. */
.ss-tour { position: fixed; inset: 0; z-index: 2000; font-family: inherit; }
/* clicks on the dimmed page do nothing */
.ss-tour-catcher { position: fixed; inset: 0; background: transparent; }
.ss-tour-spot {
  position: fixed; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #005bd3, 0 0 0 100vmax rgba(26, 26, 26, .5);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.ss-tour-tip {
  position: fixed; box-sizing: border-box; width: 320px; max-width: calc(100vw - 32px);
  background: #fff; color: #303030; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: left .2s ease, top .2s ease;
}
.ss-tour-arrow { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.ss-tour-tip[data-side="right"] .ss-tour-arrow { left: -7px; }
.ss-tour-tip[data-side="below"] .ss-tour-arrow { top: -7px; }
.ss-tour-tip[data-side="above"] .ss-tour-arrow { bottom: -7px; top: auto !important; }
.ss-tour-tip[data-noarrow="1"] .ss-tour-arrow, .ss-tour-phone .ss-tour-arrow { display: none; }
.ss-tour-count { font-size: 12px; font-weight: 600; color: #616161; }
.ss-tour-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ss-tour-body { margin: 0; font-size: 13px; color: #616161; line-height: 1.5; }
.ss-tour-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ss-tour-list[hidden] { display: none; }
.ss-tour-list li { font-size: 13px; line-height: 1.45; }
.ss-tour-list li span { color: #616161; }
.ss-tour-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.ss-tour-btns { display: flex; gap: 8px; }
/* phone: a bottom card, no arrow; it sits above Shopify's Sidekick prompt (BOTTOM_SAFE in tour.js) so its buttons stay clickable */
.ss-tour-phone { left: 12px !important; right: 12px; bottom: 96px; top: auto !important; width: auto !important; max-width: none; max-height: calc(100vh - 108px); overflow: auto; }
@media (prefers-reduced-motion: reduce) {
  .ss-tour-spot, .ss-tour-tip { transition: none; }
}

/* the offer after a skipped tour: top-left, slides in from the left edge; the page stays usable */
.ss-tour-offer {
  position: fixed; left: 16px; top: 16px; z-index: 2000; animation: ss-tour-offer-in .7s cubic-bezier(.2, .8, .2, 1) both; box-sizing: border-box; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px;
  background: #fff; color: #303030; border-radius: 12px; font-family: inherit; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
@keyframes ss-tour-offer-in { from { transform: translateX(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
/* Take the tour / Dismiss: back out to the left (the reverse of the entrance); no clicks while it leaves */
.ss-tour-offer.ss-tour-offer-out { animation: ss-tour-offer-out .4s ease-in both; pointer-events: none; }
@keyframes ss-tour-offer-out { from { transform: none; opacity: 1; } to { transform: translateX(-120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ss-tour-offer, .ss-tour-offer.ss-tour-offer-out { animation: none; } }
.ss-tour-offer-text { font-weight: 600; }
.ss-tour-offer-x { border: 0; background: transparent; color: #616161; font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.ss-tour-offer-x:hover { background: #f1f1f1; }
@media (max-width: 599px) {
  .ss-tour-offer { left: 16px; right: 16px; max-width: none; }
  .ss-tour-offer-text { flex: 1; }
}