/* ==========================================================================
   StarBorder Component - React Bits (https://reactbits.dev/animations/star-border)
   Vanilla CSS & JS Implementation
   ========================================================================== */

:root {
  --star-color-cyan: #00FFFF;
  --star-color-cyan-glow: #00C3CF;
  --star-color-gold: #F7A91B;
  --star-color-gold-light: #FFE082;
  --star-color-white: #FFFFFF;
  --star-speed: 4.5s;
}

/* Base Star Border Container */
.star-border {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px;
  border-radius: 9px;
  overflow: hidden;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.star-border:hover, .star-border:focus, .star-border:active {
  transform: translateY(-2px);
  text-decoration: none !important;
}

.star-border:active {
  transform: translateY(0);
}

/* Star Moving Gradient Layers */
.star-movement-bottom,
.star-movement-top {
  position: absolute;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

.star-movement-bottom {
  background: radial-gradient(circle, var(--star-color-1, #00FFFF) 0%, #00C3CF 25%, rgba(0, 195, 207, 0.5) 45%, transparent 65%);
  animation: star-movement-bottom-anim var(--star-speed) linear infinite;
}

.star-movement-top {
  background: radial-gradient(circle, var(--star-color-2, #FFFFFF) 0%, #FFE082 25%, #F7A91B 50%, transparent 65%);
  animation: star-movement-top-anim var(--star-speed) linear infinite;
}

@keyframes star-movement-bottom-anim {
  0% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(50%, 50%);
  }
}

@keyframes star-movement-top-anim {
  0% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

/* Inner Content Surface */
.star-border-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  border-radius: 6.5px;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.2s ease, color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Variant: Primary CTA Buttons (.btn-primary, .btn-gold, .btn-landing-primary)
   -------------------------------------------------------------------------- */
.btn-primary.star-border,
.btn-gold.star-border,
.btn-landing-primary.star-border,
.submit-btn.star-border,
.form-grid button.star-border {
  padding: 2.5px;
  border-radius: 9px;
  box-shadow: 0 0 20px rgba(0, 195, 207, 0.4), 0 8px 28px rgba(247, 169, 27, 0.35);
  --star-color-1: #00FFFF;
  --star-color-2: #FFFFFF;
  box-sizing: border-box;
}

.submit-btn.star-border,
.form-grid button.star-border {
  display: flex;
  width: 100%;
}

.btn-primary.star-border:hover,
.btn-gold.star-border:hover,
.btn-landing-primary.star-border:hover,
.submit-btn.star-border:hover,
.form-grid button.star-border:hover {
  box-shadow: 0 0 26px rgba(0, 195, 207, 0.6), 0 10px 36px rgba(247, 169, 27, 0.55);
}

.btn-primary .star-border-content,
.btn-gold .star-border-content,
.btn-landing-primary .star-border-content,
.submit-btn .star-border-content,
.form-grid button .star-border-content {
  background: var(--gold, #F7A91B);
  color: var(--ink, #0E3846) !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 0 22px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  box-sizing: border-box;
  white-space: nowrap;
}

.form-grid button .star-border-content {
  padding: 0 20px;
  font-size: 14.5px;
  height: 44px;
}

.btn-primary.star-border:hover .star-border-content,
.btn-gold.star-border:hover .star-border-content,
.btn-landing-primary.star-border:hover .star-border-content,
.submit-btn.star-border:hover .star-border-content,
.form-grid button.star-border:hover .star-border-content {
  background: #f8b433;
}

/* --------------------------------------------------------------------------
   Variant: Secondary / Ghost Buttons (.btn-secondary, .btn-ghost, .btn-landing-secondary)
   -------------------------------------------------------------------------- */
.btn-secondary.star-border,
.btn-ghost.star-border,
.btn-landing-secondary.star-border {
  padding: 1.5px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  --star-color-1: var(--star-color-cyan);
  --star-color-2: var(--star-color-gold);
}

.btn-secondary.star-border:hover,
.btn-ghost.star-border:hover,
.btn-landing-secondary.star-border:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 195, 207, 0.3);
}

.btn-secondary .star-border-content,
.btn-ghost .star-border-content,
.btn-landing-secondary .star-border-content {
  background: rgba(14, 56, 70, 0.88);
  color: #FFFFFF !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-secondary.star-border:hover .star-border-content,
.btn-ghost.star-border:hover .star-border-content,
.btn-landing-secondary.star-border:hover .star-border-content {
  background: rgba(0, 108, 128, 0.7);
  color: #FFFFFF !important;
}

/* Compact button overrides */
.star-border-compact {
  padding: 1.5px !important;
}
.star-border-compact .star-border-content {
  padding: 9px 18px !important;
  font-size: 13.5px !important;
}