/* High-Vis Pure Custom Styles for Full Draw Archery */

/* High-Vis Primary Button (Teal to Purple to Hot Pink Gradient) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff !important;
  font-weight: 700;
  background: linear-gradient(135deg, #00f2fe 0%, #a855f7 50%, #ff007f 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #c084fc 50%, #fb7185 100%);
  box-shadow: 0 0 28px rgba(255, 0, 127, 0.45);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: scale(0.98);
}

/* High-Vis Secondary Button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e2e8f0;
  background-color: #111723;
  border: 1px solid #2c3b5a;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover {
  background-color: #192234;
  color: #00f2fe;
  border-color: #00f2fe;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.25);
  transform: translateY(-1px);
}
.btn-secondary:active {
  transform: scale(0.98);
}

/* High-Vis Teal Accent Button */
.btn-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #06080d;
  font-weight: 700;
  background-color: #00f2fe;
  border: 1px solid #67e8f9;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}
.btn-teal:hover {
  background-color: #38bdf8;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.6);
}

/* High-Vis Pink Accent Button */
.btn-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  background-color: #ff007f;
  border: 1px solid #f472b6;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.4);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}
.btn-pink:hover {
  background-color: #ff2a85;
  box-shadow: 0 0 25px rgba(255, 0, 127, 0.6);
}

/* Configurator Option Buttons */
.spine-btn, .insert-btn, .point-btn, .fletch-count-btn, .helical-btn, .nock-btn {
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #111723;
  border: 1px solid #2c3b5a;
  color: #cbd5e1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.spine-btn:hover, .insert-btn:hover, .point-btn:hover, .fletch-count-btn:hover, .helical-btn:hover, .nock-btn:hover {
  border-color: #00f2fe;
  color: #ffffff;
}

.spine-btn.active, .insert-btn.active, .point-btn.active, .fletch-count-btn.active, .helical-btn.active, .nock-btn.active {
  background-color: rgba(0, 242, 254, 0.15) !important;
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.35);
}

/* Wrap Preset Buttons */
.wrap-preset-btn {
  padding: 0.625rem;
  border-radius: 0.75rem;
  border: 1px solid #2c3b5a;
  background-color: #111723;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.2s ease-in-out;
}
.wrap-preset-btn:hover {
  border-color: #ff007f;
}
.wrap-preset-btn.active {
  border-color: #ff007f !important;
  background-color: rgba(255, 0, 127, 0.12) !important;
  box-shadow: 0 0 16px rgba(255, 0, 127, 0.35);
}

/* Pro Shop & Showcase Cards */
.service-card {
  background-color: rgba(17, 23, 35, 0.85);
  border: 1px solid #2c3b5a;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  border-color: #00f2fe;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 242, 254, 0.2);
  transform: translateY(-3px);
}

.design-showcase-card {
  background-color: rgba(17, 23, 35, 0.9);
  border: 1px solid #2c3b5a;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}
.design-showcase-card:hover {
  border-color: #ff007f;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 0, 127, 0.25);
  transform: translateY(-3px);
}

/* Custom High-Vis Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #06080d;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00f2fe 0%, #a855f7 50%, #ff007f 100%);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #c084fc 50%, #f43f5e 100%);
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(17, 23, 35, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Animated gradient text helper */
.gradient-text-hivis {
  background: linear-gradient(135deg, #00f2fe 0%, #c084fc 45%, #ff007f 80%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}