/* Village Smart Popups — front end + admin preview */
.vsp-root{--vsp-font:inherit;position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--vsp-font,inherit);opacity:0;transition:opacity .25s ease}
.vsp-root.vsp-in{opacity:1}
.vsp-root *{box-sizing:border-box}
.vsp-backdrop{position:absolute;inset:0;background:rgba(11,11,13,.62);backdrop-filter:blur(2px)}
.vsp-card{position:relative;width:100%;max-width:760px;max-height:calc(100vh - 48px);overflow:auto;background:var(--vsp-bg);color:var(--vsp-text);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.vsp-in .vsp-card{transform:none}
.vsp-card:focus{outline:none}
.vsp--text .vsp-card{max-width:540px}

.vsp-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.vsp-x:hover{background:rgba(0,0,0,.7)}
.vsp-x:focus-visible,.vsp-btn:focus-visible{outline:3px solid var(--vsp-accent);outline-offset:3px}

.vsp-media{position:relative;overflow:hidden}
.vsp-media img{display:block;width:100%;height:100%;object-fit:cover}
.vsp--image-top .vsp-media{height:260px}
.vsp--background .vsp-card{min-height:460px;display:flex;align-items:flex-end}
.vsp--background .vsp-media{position:absolute;inset:0}
.vsp-scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--vsp-scrim-strong) 0%,var(--vsp-scrim-strong) 38%,var(--vsp-scrim-soft) 100%)}

.vsp-content{position:relative;z-index:2;padding:30px 32px 28px}
.vsp--background .vsp-content{max-width:66%;padding:44px 40px 36px}
.vsp-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid var(--vsp-line);margin-bottom:16px}
.vsp-dot{width:8px;height:8px;border-radius:50%;background:var(--vsp-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--vsp-accent) 25%,transparent)}
.vsp-h{font-family:var(--fd,inherit);font-size:clamp(28px,3.4vw,40px);line-height:1.04;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:var(--vsp-text);text-transform:none}
.vsp-body{font-size:16px;line-height:1.55;color:var(--vsp-muted);margin:0 0 22px}
.vsp-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.vsp-actions{display:flex;flex-wrap:wrap;gap:10px}
.vsp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none!important;transition:transform .15s ease,filter .15s ease;cursor:pointer}
.vsp-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.vsp-btn--primary{background:var(--vsp-accent);color:var(--vsp-btn-text)!important}
.vsp-btn--ghost{background:transparent;color:var(--vsp-text)!important;border:1.5px solid var(--vsp-line)}
/* QR "ticket stub": its own column down the right edge, separated by a perforated line with notches. */
.vsp--has-qr .vsp-card{display:grid;grid-template-columns:minmax(0,1fr) 176px;align-items:stretch}
.vsp--has-qr.vsp--background .vsp-card{min-height:460px}
.vsp--has-qr.vsp--background .vsp-content{max-width:none;align-self:end;padding-right:32px}
.vsp--has-qr.vsp--image-top .vsp-media{grid-column:1/-1}
.vsp-qr{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:52px 18px 26px;background:var(--vsp-bg);background:color-mix(in srgb,var(--vsp-bg) 86%,var(--vsp-text));color:var(--vsp-text);border-left:2px dashed var(--vsp-line)}
.vsp-qr:before,.vsp-qr:after{content:"";position:absolute;left:-15px;width:28px;height:28px;border-radius:50%;background:#0b0b0d;opacity:.85}
.vsp-qr:before{top:-14px}.vsp-qr:after{bottom:-14px}
.vsp--contained .vsp-qr:before,.vsp--contained .vsp-qr:after{background:#e6e6e8}
.vsp-qr-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vsp-accent)}
.vsp-qr-code{width:128px;height:128px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.vsp-qr-code svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.vsp-qr-label{font-size:12px;line-height:1.3;max-width:130px;color:var(--vsp-muted);font-weight:600}
.vsp--has-qr .vsp-x{background:rgba(0,0,0,.35)}
.vsp-fine{font-size:12px;line-height:1.45;color:var(--vsp-muted);opacity:.85;margin:18px 0 0}

html.vsp-open{overflow:hidden}

/* Phones: bottom sheet (Google-friendly), no QR (they're already on their phone). */
@media (max-width:640px){
.vsp-root{padding:0;align-items:flex-end}
.vsp-card{max-width:none;border-radius:20px 20px 0 0;max-height:88vh;transform:translateY(40px)}
.vsp--background .vsp-card{min-height:0;display:block}
.vsp--background .vsp-media,.vsp--image-top .vsp-media{position:relative;height:190px}
.vsp--background .vsp-scrim{background:linear-gradient(180deg,var(--vsp-scrim-soft) 40%,var(--vsp-bg) 100%)}
.vsp--background .vsp-content,.vsp-content{max-width:none;padding:18px 20px 22px}
.vsp-h{font-size:27px}
.vsp-body{font-size:15px;margin-bottom:16px}
.vsp-actions{width:100%}
.vsp-btn{flex:1 1 100%}
.vsp-qr{display:none}
.vsp--has-qr .vsp-card{display:block}
}
/* Same rules for the admin's forced-mobile preview. */
.vsp--mobile{padding:0;align-items:flex-end}
.vsp--mobile .vsp-card{max-width:none;border-radius:20px 20px 0 0;max-height:88%}
.vsp--mobile.vsp--background .vsp-card{min-height:0;display:block}
.vsp--mobile.vsp--background .vsp-media,.vsp--mobile.vsp--image-top .vsp-media{position:relative;height:190px}
.vsp--mobile.vsp--background .vsp-scrim{background:linear-gradient(180deg,var(--vsp-scrim-soft) 40%,var(--vsp-bg) 100%)}
.vsp--mobile .vsp-content,.vsp--mobile.vsp--background .vsp-content{max-width:none;padding:18px 20px 22px}
.vsp--mobile .vsp-h{font-size:27px}
.vsp--mobile .vsp-body{font-size:15px;margin-bottom:16px}
.vsp--mobile .vsp-actions{width:100%}
.vsp--mobile .vsp-btn{flex:1 1 100%}
.vsp--mobile .vsp-qr{display:none}

/* Admin preview: live inside a frame instead of the window. */
.vsp--contained{position:absolute;opacity:1}
.vsp--contained .vsp-card{transform:none;max-height:100%}

@media (prefers-reduced-motion:reduce){.vsp-root,.vsp-card{transition:none!important}}

.vsp-preview-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:100000;background:#111;color:#fff;font:600 13px/1.2 system-ui,sans-serif;padding:10px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.vsp-preview-bar button{background:#E02B20;color:#fff;border:0;border-radius:999px;padding:5px 10px;font:inherit;cursor:pointer}