/* =====================================================================
   VMM Live Sanctuary — Vespers design system
   ---------------------------------------------------------------------
   Every colour, easing and shadow below reads a VMM_theme token first and
   only falls back to a literal when the theme is absent, so the modal stays
   in step with the design system while the plugin remains self-contained.
   ===================================================================== */
:root {
  --vmm-live-ink:            var(--ink-900, #1B1E3D);
  --vmm-live-ink-deep:       var(--ink-950, #14162E);
  --vmm-live-ink-soft:       var(--ink-800, #262A52);
  --vmm-live-gold:           var(--gilt-500, #C6A45C);
  --vmm-live-gold-strong:    var(--gilt-700, #A8842F);
  --vmm-live-gold-deep:      var(--gilt-800, #8A6A22);
  --vmm-live-gold-light:     var(--gilt-300, #E2CB94);
  --vmm-live-gold-pale:      var(--gilt-100, #F3E8CC);
  --vmm-live-paper:          var(--parchment-50, #FBF8F0);
  --vmm-live-paper-warm:     var(--parchment-100, #F6F1E4);
  --vmm-live-paper-sunken:   var(--parchment-200, #EDE5D2);
  --vmm-live-surface:        var(--surface, #fff);
  --vmm-live-fg1:            var(--fg1, #1B1E3D);
  --vmm-live-fg2:            var(--fg2, #54515f);
  --vmm-live-fg3:            var(--fg3, #7c7569);
  --vmm-live-on-dark-1:      var(--on-dark-1, #FBF8F0);
  --vmm-live-on-dark-2:      var(--on-dark-2, rgba(251,248,240,.80));
  --vmm-live-on-dark-3:      var(--on-dark-3, rgba(251,248,240,.58));
  --vmm-live-sage:           var(--sage-600, #5F7257);
  --vmm-live-sage-soft:      var(--sage-400, #8D9A7E);
  --vmm-live-border:         var(--border, rgba(27,30,61,.13));
  --vmm-live-border-strong:  var(--border-strong, rgba(27,30,61,.20));
  --vmm-live-border-dark:    var(--border-on-dark, rgba(251,248,240,.16));
  --vmm-live-hairline-gold:  var(--hairline-gold, rgba(198,164,92,.5));
  --vmm-live-body-font:      var(--font-body, Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --vmm-live-display-font:   var(--font-display, "Cormorant Garamond", "Hoefler Text", Georgia, serif);
  --vmm-live-shadow-xl:      var(--shadow-xl, 0 40px 90px -30px rgba(27,30,61,.40));
  --vmm-live-glow-gold:      var(--glow-gold, 0 0 0 1px rgba(198,164,92,.28), 0 12px 38px -12px rgba(198,164,92,.42));
  --vmm-live-ease:           var(--ease, cubic-bezier(.22,.61,.36,1));
  --vmm-live-ease-veil:      var(--ease-veil, cubic-bezier(.4,0,.2,1));
  --vmm-live-arch:           var(--arch, 46% 46% 9px 9px / 31% 31% 8px 8px);
}

html.vmm-live-modal-open,
html.vmm-live-modal-open body { overflow: hidden !important; }

/* No-JS only. VMM_theme stamps `js` on <html>, so with JavaScript the script's
   own lock owns this and releases it on close; without it, the page behind a
   server-rendered-open modal must not scroll. */
html:not(.js) body.vmm-live-entry { overflow: hidden; }

/* ── Shell ─────────────────────────────────────────────────────────────
   z-index 1260 places the dialog on the theme's overlay tier: above the
   cookie-consent bar (1200), which is injected at wp_footer and would
   otherwise paint over the action row, and below the consent preferences
   dialog (1300) and the feedback modal (1400). */
.vmm-live-modal[hidden] { display: none !important; }
.vmm-live-modal {
  position: fixed; inset: 0; z-index: 1260;
  display: grid; place-items: center; padding: 24px;
  font-family: var(--vmm-live-body-font); color: var(--vmm-live-fg1);
}
.vmm-live-backdrop {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: rgba(20,22,46,.68);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: vmmLiveFade .3s var(--vmm-live-ease-veil) both;
}
.vmm-live-dialog {
  position: relative; width: min(660px, 100%);
  max-height: min(88dvh, 880px); overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--vmm-live-paper);
  border: 1px solid var(--vmm-live-hairline-gold);
  border-radius: 22px;
  box-shadow: var(--vmm-live-shadow-xl), 0 0 0 1px rgba(198,164,92,.10);
  animation: vmmLiveSettle .42s var(--vmm-live-ease-veil) both;
  outline: none;
}
.vmm-live-modal.is-closing .vmm-live-backdrop { animation: vmmLiveFadeOut .3s var(--vmm-live-ease-veil) both; }
.vmm-live-modal.is-closing .vmm-live-dialog   { animation: vmmLiveSettleOut .3s var(--vmm-live-ease-veil) both; }

/* Grab handle: mobile sheet only. */
.vmm-live-grab { display: none; }

.vmm-live-close {
  position: absolute; z-index: 4; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vmm-live-border-dark);
  background: rgba(251,248,240,.08);
  color: var(--vmm-live-on-dark-1); cursor: pointer;
  transition: background-color .2s var(--vmm-live-ease), transform .16s var(--vmm-live-ease);
}
.vmm-live-close:hover  { background: rgba(251,248,240,.18); }
.vmm-live-close:active { transform: scale(.94); }
.vmm-live-close:focus-visible,
.vmm-live-dialog a:focus-visible,
.vmm-live-dialog button:focus-visible,
.vmm-live-dialog input:focus-visible,
.vmm-live-choices input:focus-visible + .vmm-live-tick {
  outline: 2.5px solid var(--vmm-live-gold-strong); outline-offset: 3px;
}
.vmm-live-close:focus-visible { outline-color: var(--vmm-live-gold-light); }

/* ── Header band: candle glow + chapel arch ────────────────────────── */
.vmm-live-head {
  position: relative; overflow: hidden;
  padding: 26px 68px 24px 34px; min-height: 88px;
  display: flex; align-items: center;
  color: var(--vmm-live-on-dark-1);
  background:
    radial-gradient(72% 165% at 24% 0%, rgba(198,164,92,.16), transparent 68%),
    linear-gradient(145deg, var(--vmm-live-ink), var(--vmm-live-ink-deep));
  border-radius: 21px 21px 0 0;
  border-bottom: 1px solid rgba(198,164,92,.30);
}
/* Sanctuary arch motif, drawn from the theme's --arch mask. */
.vmm-live-arch {
  position: absolute; right: 26px; bottom: -46px;
  width: 128px; height: 128px; pointer-events: none;
  border-radius: var(--vmm-live-arch);
  border: 1px solid rgba(198,164,92,.26);
  background: radial-gradient(60% 60% at 50% 24%, rgba(198,164,92,.14), transparent 70%);
}
.vmm-live-head-row {
  position: relative; z-index: 1; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.vmm-live-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 .7rem/1 var(--vmm-live-body-font);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--vmm-live-gold-light);
}
.vmm-live-dia { width: 7px; height: 7px; flex: 0 0 7px; background: var(--vmm-live-gold); transform: rotate(45deg); }
.vmm-live-state {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--vmm-live-border-dark);
  background: rgba(251,248,240,.07);
  font: 700 .71rem/1 var(--vmm-live-body-font); letter-spacing: .05em;
  color: var(--vmm-live-on-dark-2); white-space: nowrap;
}
.vmm-live-pip { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--vmm-live-on-dark-3); }
.vmm-live-state--upcoming .vmm-live-pip { background: var(--vmm-live-gold-light); box-shadow: 0 0 0 4px rgba(226,203,148,.14); }
.vmm-live-state--open     .vmm-live-pip { background: var(--vmm-live-sage-soft); box-shadow: 0 0 0 4px rgba(141,154,126,.18); animation: vmmLivePulse 2.4s var(--vmm-live-ease-veil) infinite; }
.vmm-live-state--ended    .vmm-live-pip { background: var(--vmm-live-on-dark-3); }

/* ── Body ──────────────────────────────────────────────────────────── */
.vmm-live-body { padding: clamp(28px, 5.6vw, 46px); }
.vmm-live-kicker {
  margin: 0 0 10px;
  font: italic 500 clamp(1.05rem, 2.3vw, 1.22rem)/1.4 var(--vmm-live-display-font);
  color: var(--vmm-live-gold-deep);
}
.vmm-live-body h2 {
  margin: 0; max-width: 17ch;
  font: 600 clamp(2rem, 5.4vw, 3.1rem)/1.02 var(--vmm-live-display-font);
  letter-spacing: -.022em; color: var(--vmm-live-fg1); text-wrap: balance;
}
.vmm-live-lead {
  max-width: 56ch; margin: 16px 0 0;
  font: 400 1rem/1.7 var(--vmm-live-body-font); color: var(--vmm-live-fg2);
}
.vmm-live-meta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 26px; }
.vmm-live-metacard {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px;
  background: var(--vmm-live-surface);
  border: 1px solid var(--vmm-live-border-soft, rgba(27,30,61,.07));
  border-radius: 14px;
}
.vmm-live-metacard > vm-icon { flex: 0 0 auto; margin-top: 2px; color: var(--vmm-live-gold-strong); }
.vmm-live-metacard span {
  display: block; margin-bottom: 4px;
  font: 700 .66rem/1 var(--vmm-live-body-font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--vmm-live-fg3);
}
.vmm-live-metacard strong { display: block; font: 700 .92rem/1.45 var(--vmm-live-body-font); color: var(--vmm-live-fg1); }
.vmm-live-rule { height: 1px; margin: 30px 0; background: linear-gradient(90deg, var(--vmm-live-hairline-gold), rgba(198,164,92,.06)); }

/* ── Buttons — Vespers pill geometry ───────────────────────────────── */
.vmm-live-actions { margin-top: 26px; }
.vmm-live-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 24px; border: 0; border-radius: 999px;
  font: 700 .9rem/1 var(--vmm-live-body-font); white-space: nowrap;
  text-decoration: none !important; cursor: pointer;
  transition: transform .16s var(--vmm-live-ease), background-color .25s var(--vmm-live-ease),
              border-color .25s var(--vmm-live-ease), box-shadow .25s var(--vmm-live-ease);
}
.vmm-live-btn:active { transform: scale(.972); }
.vmm-live-btn--gold  { background: var(--vmm-live-gold); color: var(--vmm-live-ink) !important; box-shadow: var(--vmm-live-glow-gold); }
.vmm-live-btn--gold:hover  { background: var(--vmm-live-gold-light); }
.vmm-live-btn--ink   { background: var(--vmm-live-ink); color: var(--vmm-live-on-dark-1) !important; }
.vmm-live-btn--ink:hover   { background: var(--vmm-live-ink-soft); }
.vmm-live-btn--ghost { border: 1.5px solid var(--vmm-live-border-strong); background: var(--vmm-live-surface); color: var(--vmm-live-fg1) !important; }
.vmm-live-btn--ghost:hover { border-color: var(--vmm-live-gold); }
.vmm-live-btn:disabled { cursor: wait; opacity: .62; }
.vmm-live-btn:disabled:active { transform: none; }

.vmm-live-notice {
  display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 14px 17px; border-radius: 14px;
  border: 1px solid rgba(198,164,92,.38); background: var(--vmm-live-gold-pale);
  font: 500 .93rem/1.55 var(--vmm-live-body-font); color: var(--vmm-live-ink);
}
.vmm-live-notice vm-icon { flex: 0 0 auto; color: var(--vmm-live-gold-deep); }

/* ── Email blocks ──────────────────────────────────────────────────── */
.vmm-live-seal {
  width: 50px; height: 50px; border-radius: 50%; margin-bottom: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vmm-live-paper-sunken); color: var(--vmm-live-gold-strong);
  box-shadow: 0 0 0 6px rgba(198,164,92,.13);
}
.vmm-live-form-title { margin: 0; font: 600 clamp(1.4rem, 3.4vw, 1.8rem)/1.12 var(--vmm-live-display-font); color: var(--vmm-live-fg1); }
.vmm-live-form-copy  { margin: 8px 0 18px; font: 400 .94rem/1.62 var(--vmm-live-body-font); color: var(--vmm-live-fg2); }
.vmm-live-form { position: relative; }
.vmm-live-email-label {
  display: block; margin: 0 0 8px;
  font: 700 .69rem/1 var(--vmm-live-body-font); letter-spacing: .12em;
  text-transform: uppercase; color: var(--vmm-live-fg2);
}
.vmm-live-email-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.vmm-live-form input[type="email"] {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--vmm-live-border); border-radius: 12px;
  background: var(--vmm-live-surface); color: var(--vmm-live-fg1);
  font: 500 .96rem/1.2 var(--vmm-live-body-font);
  box-shadow: var(--shadow-sm, 0 2px 6px -1px rgba(27,30,61,.08));
  transition: border-color .2s var(--vmm-live-ease), box-shadow .2s var(--vmm-live-ease);
}
.vmm-live-form input[type="email"]:hover { border-color: var(--vmm-live-border-strong); }
.vmm-live-form input[type="email"]::placeholder { color: var(--vmm-live-fg3); opacity: .82; }
.vmm-live-email-full { display: block; }

/* Choice rows — gilt tick, matching the VMM admin/checkout checkbox language. */
.vmm-live-choices { display: grid; gap: 10px; margin: 16px 0 18px; }
.vmm-live-choices label {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--vmm-live-border-soft, rgba(27,30,61,.07));
  border-radius: 12px; background: var(--vmm-live-surface);
  font: 500 .9rem/1.5 var(--vmm-live-body-font); color: var(--vmm-live-fg2);
  cursor: pointer; transition: border-color .2s var(--vmm-live-ease), background-color .2s var(--vmm-live-ease);
}
.vmm-live-choices label:hover { border-color: rgba(198,164,92,.42); }
.vmm-live-choices input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.vmm-live-tick {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--vmm-live-border-strong); border-radius: 6px;
  background: var(--vmm-live-surface); color: transparent;
  transition: background-color .18s var(--vmm-live-ease), border-color .18s var(--vmm-live-ease), color .18s var(--vmm-live-ease);
}
.vmm-live-choices input:checked + .vmm-live-tick {
  background: var(--vmm-live-gold-strong); border-color: var(--vmm-live-gold-strong);
  color: var(--vmm-live-paper);
}
.vmm-live-choices input:checked ~ span:last-child { color: var(--vmm-live-fg1); }
.vmm-live-save { width: 100%; }

.vmm-live-consent { margin: 12px 0 0; font: 500 .75rem/1.58 var(--vmm-live-body-font); color: var(--vmm-live-fg3); }
.vmm-live-form-status {
  min-height: 1.4em; margin-top: 10px;
  font: 700 .81rem/1.45 var(--vmm-live-body-font); color: var(--vmm-live-fg2);
}
.vmm-live-form-status.is-busy  { color: var(--vmm-live-fg3); }
.vmm-live-form-status.is-done  { color: var(--vmm-live-sage); }
.vmm-live-form-status.is-error { color: #9A3B2F; }
.vmm-live-form.is-saved .vmm-live-form-status { padding-left: 11px; border-left: 2px solid var(--vmm-live-sage); }
.vmm-live-hp {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important;
}

/* ── Injected theme nav link ───────────────────────────────────────── */
.vmm-live-nav-link { display: inline-flex !important; align-items: center; gap: 7px; }
.vmm-live-nav-indicator {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .34; vertical-align: 1px; flex: 0 0 7px;
}
.vmm-live-nav-link.is-upcoming .vmm-live-nav-indicator { background: var(--vmm-live-gold); opacity: 1; box-shadow: 0 0 0 3px rgba(198,164,92,.15); }
.vmm-live-nav-link.is-open .vmm-live-nav-indicator {
  background: var(--vmm-live-sage-soft); opacity: 1; box-shadow: 0 0 0 3px rgba(141,154,126,.20);
  animation: vmmLivePulse 2.4s var(--vmm-live-ease-veil) infinite;
}
.mm-panel nav .vmm-live-nav-link > span:first-child { display: inline-flex; align-items: center; gap: 9px; }

@keyframes vmmLiveFade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmmLiveFadeOut   { to { opacity: 0; } }
@keyframes vmmLiveSettle    { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vmmLiveSettleOut { to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes vmmLiveSheetIn   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes vmmLiveSheetOut  { to { transform: translateY(100%); } }
@keyframes vmmLivePulse     { 0%,100% { box-shadow: 0 0 0 3px rgba(141,154,126,.20); } 50% { box-shadow: 0 0 0 7px rgba(141,154,126,0); } }

/* ── Mobile: a true bottom sheet, like every other VMM overlay ─────── */
@media (max-width: 620px) {
  .vmm-live-modal { padding: 0; align-items: end; place-items: end stretch; }
  .vmm-live-dialog {
    width: 100%; max-height: 92dvh;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    padding-top: 10px;
    animation: vmmLiveSheetIn .38s var(--vmm-live-ease-veil) both;
  }
  .vmm-live-modal.is-closing .vmm-live-dialog { animation: vmmLiveSheetOut .3s var(--vmm-live-ease-veil) both; }
  .vmm-live-grab {
    display: block; width: 44px; height: 4px; border-radius: 999px;
    background: var(--vmm-live-border); margin: 0 auto 8px;
  }
  .vmm-live-head { padding: 22px 60px 20px 24px; border-radius: 0; }
  .vmm-live-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vmm-live-arch { right: 14px; bottom: -54px; width: 106px; height: 106px; }
  .vmm-live-close { top: 18px; right: 12px; }
  .vmm-live-body { padding: 26px 22px 30px; }
  .vmm-live-body h2 { font-size: clamp(1.9rem, 9.5vw, 2.5rem); }
  .vmm-live-meta { grid-template-columns: 1fr; }
  .vmm-live-email-row { grid-template-columns: 1fr; }
  .vmm-live-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vmm-live-backdrop, .vmm-live-dialog,
  .vmm-live-modal.is-closing .vmm-live-backdrop,
  .vmm-live-modal.is-closing .vmm-live-dialog { animation: none !important; }
  .vmm-live-btn, .vmm-live-close, .vmm-live-tick,
  .vmm-live-form input[type="email"], .vmm-live-choices label { transition: none !important; }
  .vmm-live-state--open .vmm-live-pip,
  .vmm-live-nav-link.is-open .vmm-live-nav-indicator { animation: none !important; }
}