/* Ensure Alpine-hidden blocks don't flash on the admin form before init. */
[x-cloak]{display:none !important}

/* Store Guru — dashboard mascot styles. Scoped under .sg-* to avoid clashes. */
.sg-wrap{
  position:fixed;bottom:0;z-index:2147483647;display:flex;flex-direction:column;
  align-items:flex-end;pointer-events:none;--sg-accent:#6d5efc;font-family:inherit;
}
/* Inside the admin live-preview stage the mascot is contained, not fixed. */
.sg-stage{position:relative;overflow:hidden}
.sg-stage .sg-wrap{position:absolute}
.sg-wrap.sg-left{align-items:flex-start;left:-320px}
.sg-wrap.sg-right{right:-320px}
/* The resting offset is real CSS, not just the animation fill, so the mascot
   is placed correctly even if the walk-in animation never runs. */
.sg-wrap.sg-show.sg-right{right:24px;animation:sgWalkR 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.sg-wrap.sg-show.sg-left{left:24px;animation:sgWalkL 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sgWalkR{0%{right:-320px}100%{right:24px}}
@keyframes sgWalkL{0%{left:-320px}100%{left:24px}}

.sg-bubble{
  pointer-events:auto;opacity:0;transform:translateY(14px) scale(.9);transform-origin:bottom right;
  margin:0 22px 10px 0;background:#fff;border-radius:20px;padding:18px;width:290px;max-width:82vw;
  box-shadow:0 18px 50px rgba(31,35,64,.22);position:relative;color:#1f2340;direction:inherit;text-align:start;
}
.sg-left .sg-bubble{margin:0 0 10px 22px;transform-origin:bottom left}
.sg-wrap.sg-show .sg-bubble{animation:sgPop .5s ease .9s forwards}
@keyframes sgPop{to{opacity:1;transform:translateY(0) scale(1)}}
.sg-bubble::after{content:"";position:absolute;bottom:-9px;right:52px;width:18px;height:18px;
  background:#fff;transform:rotate(45deg);box-shadow:6px 6px 12px rgba(31,35,64,.06)}
.sg-left .sg-bubble::after{right:auto;left:52px}
/* Close sits in the inline-END corner (top-left in RTL, top-right in LTR) — the
   opposite side from where the heading text starts, so it never sits on the copy.
   z-index keeps it clickable above the text; the body reserves matching room. */
.sg-close{position:absolute;top:10px;inset-inline-end:12px;inset-inline-start:auto;z-index:2;
  width:26px;height:26px;border-radius:50%;
  border:none;background:#f1f2f8;color:#8a8fb0;cursor:pointer;font-size:15px;line-height:1;padding:0}
.sg-bubble-body{padding-inline-end:24px}
.sg-emoji{font-size:24px;line-height:1}
.sg-bubble h5{font-size:16px;margin:6px 0 4px;font-weight:800}
.sg-bubble p{font-size:13.5px;color:#6b6f8c;line-height:1.7;margin:0}
.sg-cta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:var(--sg-accent);
  color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:10px 16px;border-radius:12px;
  cursor:pointer;border:none}
.sg-cta:hover{filter:brightness(.92)}
.sg-coupon{margin-top:12px;border:2px dashed var(--sg-accent);border-radius:12px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(109,94,252,.06)}
.sg-coupon code{font-weight:800;letter-spacing:1px;color:var(--sg-accent);font-size:16px}
.sg-coupon button{border:none;background:var(--sg-accent);color:#fff;border-radius:8px;padding:6px 12px;
  font-weight:700;cursor:pointer;font-size:12px}

.sg-character{width:170px;filter:drop-shadow(0 14px 20px rgba(31,35,64,.25))}
.sg-wrap.sg-show .sg-character{animation:sgBob 2.2s ease-in-out .1s infinite}
@keyframes sgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sg-leg{transform-box:fill-box;transform-origin:top center}
.sg-wrap.sg-show .sg-leg-l{animation:sgStepL .45s ease-in-out 3}
.sg-wrap.sg-show .sg-leg-r{animation:sgStepR .45s ease-in-out 3}
@keyframes sgStepL{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes sgStepR{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.sg-arm{transform-box:fill-box;transform-origin:bottom center}
.sg-wrap.sg-show .sg-arm{animation:sgWave .6s ease-in-out 1.4s 3}
@keyframes sgWave{0%,100%{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-14deg)}}
.sg-eye{animation:sgBlink 4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes sgBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.sg-float{transform-box:fill-box;transform-origin:center;animation:sgSpin 6s linear infinite}
@keyframes sgSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .sg-wrap.sg-show.sg-right,.sg-wrap.sg-show.sg-left{animation-duration:.01s}
  .sg-wrap.sg-show .sg-character,.sg-eye,.sg-float,.sg-wrap.sg-show .sg-arm,
  .sg-wrap.sg-show .sg-leg-l,.sg-wrap.sg-show .sg-leg-r{animation:none}
}

/* Admin form: live-preview stage (moved from an inline style attribute) */
#sg-preview-stage{height:360px}

/* ── Modal display mode ────────────────────────────────────────────────
   Layout only: the shell (.admin-modal, .admin-modal-card…) comes from the
   panel's unified modal styles, so this mode inherits its theming for free. */
.sg-modal{z-index:2147483647}
.sg-modal-card{text-align:center}
.sg-modal-close{position:absolute;top:14px;inset-inline-end:16px;z-index:2;
  width:30px;height:30px;border-radius:50%;border:none;background:transparent;
  color:currentColor;opacity:.5;cursor:pointer;font-size:20px;line-height:1;padding:0}
.sg-modal-close:hover{opacity:1}
.sg-modal-figure{display:flex;justify-content:center;margin-bottom:-6px}
.sg-modal-figure .sg-character{width:150px;animation:sgBob 2.2s ease-in-out infinite}
.sg-modal-body{padding:0}
.sg-modal-body h5{font-size:17px;margin:8px 0 6px;font-weight:900}
.sg-modal-body p{font-size:13.5px;line-height:1.75;margin:0;opacity:.72}
.sg-modal-body .sg-emoji{display:block}
.sg-modal-body .sg-coupon{justify-content:center}
.sg-modal-body .sg-cta{justify-content:center}

@media (prefers-reduced-motion: reduce){
  .sg-modal-figure .sg-character{animation:none}
}

/* Admin preview: the modal mode is shown contained inside the stage. */
.sg-stage-modal{display:flex;align-items:center;justify-content:center;padding:16px}
.sg-modal-preview{width:100%;display:flex;justify-content:center;transform:scale(.82)}
.sg-modal-preview .admin-modal-card{max-width:22rem}

/* ── Standalone modal shell ────────────────────────────────────────────
   Only applied when the panel's modal stylesheet (app.css) is absent —
   i.e. on the public marketing site. Same class names, so the markup and
   the dashboard look stay identical. */
.sg-modal-standalone{position:fixed;inset:0;z-index:2147483647;display:flex;
  align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.sg-modal-standalone .admin-modal-backdrop{position:fixed;inset:0;
  background:rgba(9,9,11,.7);backdrop-filter:blur(3px)}
.sg-modal-standalone .admin-modal-card{position:relative;width:100%;max-width:27rem;
  max-height:calc(100vh - 3rem);overflow:auto;background:#fff;color:#1f2340;
  border-radius:28px;padding:28px;text-align:center;font-family:inherit;
  box-shadow:0 32px 80px -24px rgba(24,10,55,.45);
  animation:sgModalIn 220ms cubic-bezier(.16,1,.3,1) both}
@keyframes sgModalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.sg-modal-standalone .sg-modal-body p{color:#6b6f8c;opacity:1}

@media (prefers-reduced-motion: reduce){
  .sg-modal-standalone .admin-modal-card{animation:none}
}