/* ============================================================
   Product Tour — hotspot tour over a screenshot, stepped with
   Back / Next. Ported from the DiviMerc home page tour; every rule
   is scoped to .wprio-tour so the short class names (.tip, .shot,
   .wrap …) can't clash with the theme or other sections.
   ============================================================ */

.wprio-tour{
  --leaf-900:#1c2b12; --leaf-700:#3f6229; --leaf-500:#5e8e3e; --leaf-400:#7ea565;
  --leaf-bright:#95bf47; --leaf-200:#b5cba6; --leaf-100:#cddcc3; --leaf-50:#eff4ec;
  --ground:#fafafa; --surface:#ffffff; --sunk:#f2f4f0;
  --ink:#0b0c0f; --ink-2:#3d423a; --ink-3:#6c6f68; --ink-4:#9a9d95;
  --line:#e3e8de; --line-2:#cfd6c9;
  --r-md:12px; --r-lg:24px; --r-pill:100px;
  --sh-2:0 2px 4px rgba(11,12,15,.05), 0 24px 48px -20px rgba(28,43,18,.22);
  --display:"Inter","Helvetica Neue",Arial,sans-serif;
  --ui:"Instrument Sans","Inter",Arial,sans-serif;
}
.wprio-tour,
.wprio-tour *{box-sizing:border-box}

.wprio-tour.tour{padding:52px 0;border-radius:32px;background:transparent;border:none}
.wprio-tour .wrap{width:100%;max-width:100%;margin-inline:auto;padding-inline:24px}
.wprio-tour .num{font-variant-numeric:tabular-nums}
.wprio-tour svg{display:block}
.wprio-tour .arrow{flex:none;display:none} /* hidden on the DiviMerc site too */

.wprio-tour .tour-stage{position:relative;max-width:100%;margin-inline:auto}
.wprio-tour .tour-stage[hidden]{display:none}

/* scene change: the old screenshot fades out with a slight zoom-out and blur
   while the new one settles in from a gentle zoom; the stage height glides
   between the two. Duration must match DURATION in tour.js. */
.wprio-tour{--tour-swap:560ms;--tour-ease:cubic-bezier(.22,.61,.36,1)}
.wprio-tour .tour-stages{position:relative}
.wprio-tour .tour-stages.is-moving{transition:height var(--tour-swap) var(--tour-ease);overflow:hidden;border-radius:var(--r-md)}
.wprio-tour .tour-stage.is-leaving{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;will-change:opacity,transform,filter;animation:wprio-tour-out var(--tour-swap) var(--tour-ease) both}
.wprio-tour .tour-stage.is-entering{will-change:opacity,transform,filter;animation:wprio-tour-in var(--tour-swap) var(--tour-ease) both}
@keyframes wprio-tour-out{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes wprio-tour-in{from{opacity:0;transform:scale(1.02);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* the step itself: marker pops in, tooltip fades up */
.wprio-tour .mk.is-on{animation:wprio-tour-pop .34s cubic-bezier(.34,1.56,.64,1) both}
.wprio-tour .tip.is-on{animation:wprio-tour-tip .26s ease-out both}
@keyframes wprio-tour-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wprio-tour-tip{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* optional fixed-height frame: a tall screenshot scrolls to the active hotspot */
.wprio-tour .tour-frame[style*="height"]{overflow-y:auto;overflow-x:hidden;border-radius:var(--r-md);overscroll-behavior:contain;scrollbar-width:thin}
.wprio-tour .tour-frame[style*="height"] .tip{z-index:30}
.wprio-tour .shot{position:relative}
.wprio-tour .shot img{display:block;width:100%;height:auto;max-width:none;margin:0}

/* markers */
.wprio-tour .hs{position:absolute;width:0;height:0}
.wprio-tour .mk{display:none;position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:50%;background:var(--leaf-500);place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 4px 12px -3px rgba(28,43,18,.5);z-index:4}
.wprio-tour .mk::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.92)}
.wprio-tour .mk::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(94,142,62,.6);animation:wprio-tour-pulse 2.4s ease-out infinite}
@keyframes wprio-tour-pulse{0%{transform:scale(.62);opacity:.85}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}

/* tooltips — side classes: rt / lt (+ up), bl / br (below), al / ar (above) */
.wprio-tour .tip{position:absolute;display:none;flex-direction:column;gap:8px;width:262px;background:var(--surface);border:1px solid var(--leaf-200);border-radius:var(--r-md);box-shadow:var(--sh-2);padding:16px;z-index:30;top:-20px;text-align:left}
.wprio-tour .tip::after{content:"";position:absolute;top:22px;width:9px;height:9px;background:var(--surface);border:1px solid var(--leaf-200);transform:rotate(45deg)}
.wprio-tour .tip.lt{right:26px}
.wprio-tour .tip.lt::after{right:-5.5px;border-left:none;border-bottom:none}
.wprio-tour .tip.rt{left:26px}
.wprio-tour .tip.rt::after{left:-5.5px;border-right:none;border-top:none}
.wprio-tour .tip.up{top:auto;bottom:-20px}
.wprio-tour .tip.up::after{top:auto;bottom:22px}
.wprio-tour .tip.bl,.wprio-tour .tip.br{top:26px;bottom:auto}
.wprio-tour .tip.bl{left:-20px;right:auto}
.wprio-tour .tip.br{right:-20px;left:auto}
.wprio-tour .tip.al,.wprio-tour .tip.ar{bottom:26px;top:auto}
.wprio-tour .tip.al{left:-20px;right:auto}
.wprio-tour .tip.ar{right:-20px;left:auto}
.wprio-tour .tip.bl::after,.wprio-tour .tip.br::after{top:-5.5px;bottom:auto;border-right:none;border-bottom:none}
.wprio-tour .tip.bl::after{left:24px;right:auto}
.wprio-tour .tip.br::after{right:24px;left:auto}
.wprio-tour .tip.al::after,.wprio-tour .tip.ar::after{bottom:-5.5px;top:auto;border-left:none;border-top:none}
.wprio-tour .tip.al::after{left:24px;right:auto}
.wprio-tour .tip.ar::after{right:24px;left:auto}

.wprio-tour .tip-top{display:flex;align-items:center;gap:10px}
.wprio-tour .tip-n{font-family:var(--ui);font-size:.6875rem;font-weight:700;letter-spacing:.11em;color:var(--leaf-700)}
.wprio-tour .tip-x{border:0;background:none;margin:0 0 0 auto;padding:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-4);font-size:1.0625rem;line-height:1;font-family:var(--display);box-shadow:none}
.wprio-tour .tip-x:hover{background:var(--sunk);color:var(--ink)}
.wprio-tour .tip-name{font-family:var(--display);font-size:1rem;font-weight:650;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.wprio-tour .tip-p{font-family:var(--display);font-size:.8125rem;line-height:1.55;color:var(--ink-3)}
.wprio-tour .tip-nav{display:flex;align-items:center;gap:8px;margin-top:2px;padding-top:11px;border-top:1px solid var(--line)}
.wprio-tour .tip-b{border:0;background:none;color:inherit;font-family:var(--ui);font-size:.75rem;font-weight:600;padding:7px 13px;margin:0;border-radius:var(--r-pill);cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:32px;line-height:1.2;box-shadow:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
.wprio-tour .tip-back{color:var(--ink-3);border:1px solid var(--line-2)}
.wprio-tour .tip-back:hover{color:var(--ink);border-color:var(--ink-4)}
.wprio-tour .tip-next,.wprio-tour .tip-done{margin-left:auto;background:var(--leaf-500);color:#fff}
.wprio-tour .tip-next:hover,.wprio-tour .tip-done:hover{background:var(--leaf-700);color:#fff}

/* closed state */
.wprio-tour .tour-hint{display:none;align-items:center;justify-content:center;gap:12px;margin:26px 0 0;font-family:var(--ui);font-size:.8125rem;color:var(--ink-3)}
.wprio-tour .tour-hint .dot{width:9px;height:9px;border-radius:50%;background:var(--leaf-500);flex:none}
.wprio-tour .tour-restart{border:0;margin:0;font-family:var(--ui);font-size:.75rem;font-weight:600;color:#fff;background:var(--leaf-500);border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;min-height:32px;display:inline-flex;align-items:center;gap:6px;box-shadow:none}
.wprio-tour .tour-restart:hover{background:var(--leaf-700)}

.wprio-tour .mk.is-on{display:grid}
.wprio-tour .tip.is-on{display:flex}
.wprio-tour .tour-hint.is-on{display:flex}

@media (max-width:900px){
  .wprio-tour .tip{width:230px}
}
@media (max-width:700px){
  .wprio-tour .mk,.wprio-tour .tip{display:none !important}
  .wprio-tour .tour-hint{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .wprio-tour .mk::before,
  .wprio-tour .mk.is-on,
  .wprio-tour .tip.is-on,
  .wprio-tour .tour-stage.is-leaving,
  .wprio-tour .tour-stage.is-entering{animation:none}
  .wprio-tour .tour-stages.is-moving{transition:none}
}