/* =========================================================
   VEIL BOOK — MODAL BACKDROP
   ========================================================= */

#veilBuyModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(6, 6, 10, 0.88);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}

/* =========================================================
   MODAL PANEL
   ========================================================= */

.veil-buy-panel {
  position: relative;
  max-width: 520px;
  width: calc(100% - 2rem);
  padding: 2rem 2.25rem 1.75rem;
  border-radius: 18px;

  background:
    radial-gradient(
      circle at top,
      rgba(161, 42, 42, 0.18),
      rgba(6, 6, 10, 0.96) 65%
    );

  border: 1px solid rgba(161, 42, 42, 0.45);

  box-shadow:
    0 0 0 1px rgba(161, 42, 42, 0.25),
    0 14px 50px rgba(0, 0, 0, 0.85);

  animation: veilFadeIn 220ms ease-out;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.veil-buy-close {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;

  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, transform 0.15s ease;
}

.veil-buy-close:hover {
  color: #ffffff;
  transform: scale(1.12);
}

/* =========================================================
   HEADINGS
   ========================================================= */

.veil-buy-panel .lv-title {
  text-align: center;
  margin-bottom: 0.75rem;
}

.veil-buy-panel .lv-sub {
  text-align: center;
  opacity: 0.85;
}

/* =========================================================
   BUTTON GROUPS
   ========================================================= */

.veil-buy-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.15rem 0;
}

/* =========================================================
   BUTTON STATES (EXTENDS veil-btn / veil-btn-outline)
   ========================================================= */

.veil-buy-options .veil-btn {
  min-width: 140px;
  text-align: center;
  position: relative;
}

/* Auto-highlight Hardcover */
.veil-btn.veil-hb-default {
  border-color: rgba(161, 42, 42, 0.85);
  box-shadow:
    0 0 0 1px rgba(161, 42, 42, 0.55),
    0 0 12px rgba(161, 42, 42, 0.35);
}

/* =========================================================
   SIGNED EDITION BADGE
   ========================================================= */

.veil-btn.veil-signed::after {
  content: "Signed";
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;

  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  padding: 0.15rem 0.45rem;
  border-radius: 999px;

  color: #ffffff;
  background: rgba(161, 42, 42, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(161, 42, 42, 0.6);
}

/* =========================================================
   HARD COVER STEP
   ========================================================= */

#veilHBStep {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================
   DISCLAIMER
   ========================================================= */

.veil-buy-disclaimer {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0.92;
}

.veil-buy-disclaimer .veil-asterisk {
  color: #c0162b;
  font-weight: 800;
  margin-right: 0.2rem;
}

/* =========================================================
   DISABLED / HIDDEN STATES (JS-CONTROLLED)
   ========================================================= */

.veil-btn[style*="display: none"] {
  pointer-events: none;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes veilFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 420px) {
  .veil-buy-panel {
    padding: 1.6rem 1.4rem 1.4rem;
  }

  .veil-buy-options .veil-btn {
    min-width: 100%;
  }
}
/* =========================================================
   SIGIL: Glow pulse
   ========================================================= */
.veil-sigil {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  margin-right: .45rem;
  vertical-align: middle;
  transform: translateY(1px);
}

.veil-sigil svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}

/* Pulse the sigil subtly (not neon) */
.veil-btn:hover .veil-sigil,
.veil-btn:focus-visible .veil-sigil,
.veil-buy-panel .veil-sigil {
  animation: veilSigiPulse 1.8s ease-in-out infinite;
}

@keyframes veilSigiPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(161,42,42,0));
    opacity: .92;
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(161,42,42,.35));
    opacity: 1;
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .veil-btn:hover .veil-sigil,
  .veil-btn:focus-visible .veil-sigil,
  .veil-buy-panel .veil-sigil {
    animation: none !important;
  }
}
/* =========================================================
   SIGIL: Glow pulse
   ========================================================= */
.veil-sigil {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  margin-right: .45rem;
  vertical-align: middle;
  transform: translateY(1px);
}

.veil-sigil svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}

/* Pulse the sigil subtly (not neon) */
.veil-btn:hover .veil-sigil,
.veil-btn:focus-visible .veil-sigil,
.veil-buy-panel .veil-sigil {
  animation: veilSigiPulse 1.8s ease-in-out infinite;
}

@keyframes veilSigiPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(161,42,42,0));
    opacity: .92;
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(161,42,42,.35));
    opacity: 1;
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .veil-btn:hover .veil-sigil,
  .veil-btn:focus-visible .veil-sigil,
  .veil-buy-panel .veil-sigil {
    animation: none !important;
  }
}
/* =========================================================
   SIGIL: CSS Mask mode (recommended for perfect coloring)
   ========================================================= */
.veil-sigil-mask {
  width: 1.05em;
  height: 1.05em;
  margin-right: .45rem;
  display: inline-block;
  vertical-align: middle;
  background: currentColor;
  opacity: .92;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Use book classes to point to the correct file */
.veil-book-awakening .veil-sigil-mask {
  -webkit-mask-image: url("../sigils/awakening-mono.svg");
  mask-image: url("../sigils/awakening-mono.svg");
}

.veil-book-descent .veil-sigil-mask {
  -webkit-mask-image: url("../sigils/descent-mono.svg");
  mask-image: url("../sigils/descent-mono.svg");
}

.veil-book-bloodmoon .veil-sigil-mask {
  -webkit-mask-image: url("../sigils/bloodmoon-mono.svg");
  mask-image: url("../sigils/bloodmoon-mono.svg");
}

/* Limited editions */
.veil-sigil-signed {
  -webkit-mask-image: url("../sigils/signed-mono.svg");
  mask-image: url("../sigils/signed-mono.svg");
}

.veil-sigil-ascendant {
  -webkit-mask-image: url("../sigils/ascendant-mono.svg");
  mask-image: url("../sigils/ascendant-mono.svg");
}
/* Normalize Veil buttons for <button> elements */
button.veil-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Re-apply Veil button layout */
button.veil-btn.veil-btn-outline,
button.veil-btn.veil-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
}
/* Veil unavailable state */
.veil-btn.veil-unavailable {
  opacity: 0.45;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* Keep hover animation but muted */
.veil-btn.veil-unavailable:hover {
  transform: none;
  box-shadow: none;
}

/* Optional: subtle sigil fade if present */
.veil-btn.veil-unavailable .veil-sigil,
.veil-btn.veil-unavailable .veil-sigil-slot {
  opacity: 0.35;
}

/* ===============================
   Veil Book — Modal Disclaimer
   =============================== */

.veil-buy-disclaimer {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82); /* readable on dark veil */
  text-align: center;
}

.veil-buy-disclaimer strong {
  font-weight: 600;
}

.veil-buy-disclaimer em {
  font-style: italic;
}

.veil-buy-disclaimer .veil-asterisk {
  color: var(--veil-crimson, #d72c2c);
  font-weight: 700;
  margin-right: 0.15em;
}

/* Optional: subtle glow so it never disappears */
.veil-buy-disclaimer {
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}