/* Button Wrappers
 * .btn-border-wrapper  — static border on hover (for any button)
 * .btn-animated-wrapper — animated glow + border on hover (canvas-based)
 *
 * Border color is customizable via --btn-border-color CSS variable:
 *   <div class="btn-border-wrapper" style="--btn-border-color: rgba(255,255,255,0.25)">
 *   <div class="btn-animated-wrapper" style="--btn-border-color: #e74c3c">
 */

/* Shared base for all button wrappers */
.btn-border-wrapper,
.btn-animated-wrapper {
  --btn-border-color: rgba(65, 89, 206, 0.85);
  position: relative;
  display: block;
  padding: 5px;
  border-radius: 17px;
  box-sizing: border-box;
}

.btn-border-wrapper::before,
.btn-animated-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 17px;
  pointer-events: none;
  transition: border-color 0.15s ease;
}

.btn-border-wrapper:hover::before,
.btn-animated-wrapper:hover::before {
  border-color: var(--btn-border-color);
}

.btn-border-wrapper .btn,
.btn-border-wrapper .admin-btn,
.btn-animated-wrapper .btn,
.btn-animated-wrapper .admin-btn {
  margin-bottom: 0 !important;
  display: block;
}

/* Canvas overlay — only for animated variant */
.btn-animated-wrapper .border-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 17px;
}