/*
 * nz-glow.css -- "cursor edge glow" primary buttons (pairs with js/nz-glow.js).
 * Ported from the open component "cursor-edge-glow-button" (microkit, by henriquegpb): a spring-tracked pill of light inside the
 * button plus two mirrored edge glows that cross-fade as the pointer moves between the left and right edge.
 * Re-drawn for plain HTML (no React/Tailwind) and re-coloured from the theme's --primary, so a colour changed in the settings
 * panel recolours the glow too. Purely decorative: without the JS/CSS the buttons are the normal red buttons.
 */
.nzg {
  --nzg-deep: var(--primary, #c8102e);
  --nzg-hot: color-mix(in srgb, var(--nzg-deep) 55%, #ff9aa8);
  --nzg-soft: color-mix(in srgb, var(--nzg-deep) 30%, #fff);
  --nzg-a20: color-mix(in srgb, var(--nzg-soft) 20%, transparent);
  --nzg-r: 16px;
  position: relative; isolation: isolate; overflow: visible !important;
}

/* mirrored edge glows (behind the button face, larger than it by 9px) */
.nzg__glow { position: absolute; left: 50%; top: 50%; z-index: -1; box-sizing: border-box; width: calc(100% + 9px); height: calc(100% + 9px);
  border: 3px solid transparent; border-radius: calc(var(--nzg-r) + 5px); pointer-events: none; will-change: opacity, filter; transform: translate(-50%, -50%); }
.nzg__glow--l { opacity: 0; transform: translate(-50%, -50%) scaleX(-1); }
.nzg__glow i, .nzg__glow b { position: absolute; display: block; box-sizing: content-box; width: 100%; height: 100%; border-radius: inherit; border: 2px solid transparent; }
.nzg__glow .a { left: -3px; top: -3px; z-index: 2; border-width: 3px; filter: blur(15px);
  background: linear-gradient(transparent, transparent) padding-box, linear-gradient(91.88deg, var(--nzg-a20) 46.45%, var(--nzg-deep) 98.59%) border-box; }
.nzg__glow .b { left: -2px; top: -2px; z-index: 1; filter: blur(2px);
  background: linear-gradient(transparent, transparent) padding-box, linear-gradient(97.68deg, transparent 38.1%, var(--nzg-a20) 82.47%, var(--nzg-hot) 93.3%) border-box; }
.nzg__glow .c { position: relative; box-sizing: border-box; border-width: 1px; font-weight: 400;
  background: linear-gradient(transparent, transparent) padding-box,
    linear-gradient(103.7deg, color-mix(in srgb, var(--nzg-soft) 10%, transparent) 38.66%, color-mix(in srgb, var(--nzg-hot) 12%, transparent) 68.55%, var(--nzg-hot) 85.01%, #fff 92.12%) border-box; }
.nzg__glow .c i { left: -2px; top: -2px; z-index: 3; filter: blur(7px);
  background: linear-gradient(transparent, transparent) padding-box, linear-gradient(91.96deg, transparent 6.11%, var(--nzg-a20) 53.57%, var(--nzg-hot) 93.6%) border-box; }

/* the pill of light that follows the cursor inside the button (clipped to the button's own radius) */
.nzg { background: none !important; }
.nzg__face { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.nzg__clip { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.nzg__track { position: absolute; left: 50%; top: 0; width: 204px; height: 100%; margin-left: -102px; display: flex; align-items: center; justify-content: center;
  transform: translateX(var(--light-x, 120px)) scale(var(--nzg-k, 1)) translateZ(0); }
.nzg__track i { position: absolute; top: 50%; display: block; transform: translateY(-50%); }
.nzg__track .l1 { width: 121px; height: 121px; opacity: .6;
  background: radial-gradient(50% 50% at 50% 50%, #ffe9e6 3.5%, var(--nzg-hot) 26.5%, color-mix(in srgb, var(--nzg-hot) 60%, #ffe3c4) 37.5%, color-mix(in srgb, var(--nzg-hot) 50%, transparent) 49%, transparent 92.5%); }
.nzg__track .l2 { width: 204px; height: 103px; filter: blur(5px); opacity: .6;
  background: radial-gradient(43.3% 44.23% at 50% 49.51%, #ffd6d0 29%, color-mix(in srgb, var(--nzg-hot) 75%, #ffc9c0) 48.5%, color-mix(in srgb, var(--nzg-hot) 60%, transparent) 60.71%, transparent 100%); }

/* white label stays legible while the light passes under it */
.nzg { text-shadow: 0 1px 2px rgba(110, 0, 20, .35); }
.nzg:focus-visible { outline: 2px solid var(--nzg-hot); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) { .nzg__glow { transition: none; } }

/* primary buttons: the label is white. (`.nz button { color: inherit }` was out-ranking `.nz-btn--primary`, so red buttons had dark text.) */
.nz .nz-btn.nz-btn--primary, .nz .nzc-btn.nzc-btn--primary, .bz-modal .nzc-btn.nzc-btn--primary, .bz-consent .nzc-btn.nzc-btn--primary, .bz-pwa .nzc-btn.nzc-btn--primary { color: #fff; }
.nz .nz-btn.nz-btn--primary .nz-ic, .nz .nzc-btn.nzc-btn--primary .nzc-i { color: inherit; }

/* --- calmer, flatter finish: one solid ruby (no gloss), a hairline of light on top, a small soft shadow; the glow only shows on hover/focus --- */
.nzg__face { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 93%, #fff), var(--primary)) !important; }
.nz .nzg, .nz-search .nzg, .bz-modal .nzg { text-shadow: none; letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 1px 2px rgba(70, 10, 25, .18), 0 10px 18px -12px color-mix(in srgb, var(--primary) 70%, transparent) !important;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
.nz .nzg:hover, .nz-search .nzg:hover { transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 2px 4px rgba(70, 10, 25, .2), 0 14px 22px -12px color-mix(in srgb, var(--primary) 75%, transparent) !important; }
.nz .nzg:active { transform: translateY(0); }
.nzg__glow .a { filter: blur(11px); }