/* Variables */
:root{
  --brand-red: #FF070B;
  --brand-red-2: #ff9597;
  --light-red-bg: #FEE2E2;
  --button-radius: 11px;
  --btn-font-weight: 600;
  --btn-transition: 220ms cubic-bezier(.2,.9,.3,1);
}

/* Base buttons */
.outline-btn,
.filled-btn{
  font-weight: var(--btn-font-weight);
  border-radius: var(--button-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  line-height: 1;
  text-decoration: none;
  user-select: none;
  border-width: 2px;
  border-style: solid;
  transition: transform var(--btn-transition), box-shadow var(--btn-transition), opacity var(--btn-transition);
  /* responsive padding with clamp */
  padding: clamp(8px, 2.2vw, 12px) clamp(12px, 3.5vw, 24px);
  font-size: clamp(12px, 1.6vw, 16px);
}

/* Outline */
.outline-btn{
  color: var(--brand-red);
  background: transparent;
  border-color: var(--brand-red);
}

/* Filled with animated gradient */
.filled-btn{
  color: #fff;
  border-color: var(--brand-red);
  background: linear-gradient(90deg, var(--brand-red), var(--brand-red-2));
  /* create clipping for smoother gradient movement */
  background-size: 200% 200%;
  box-shadow: 0 6px 18px rgba(255,7,11,0.18);
  position: relative;
  overflow: hidden;
}

/* Hover / Active states */
.outline-btn:hover,
.outline-btn:focus{
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  opacity: 0.98;
}

.filled-btn:hover,
.filled-btn:focus{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 28px rgba(255,7,11,0.18);
  filter: saturate(1.03);
  /* shift gradient on hover via background-position */
  background-position: 100% 0%;
}

/* Focus outline (keyboard accessible) */
.outline-btn:focus-visible,
.filled-btn:focus-visible{
  outline: 3px solid rgba(255,7,11,0.18);
  outline-offset: 4px;
}

/* Active (press) */
.outline-btn:active,
.filled-btn:active{
  transform: translateY(-1px) scale(.995);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Gradient animation keyframes */
@keyframes gradientShift {
  0%{ background-position: 0% 50%;}
  50%{ background-position: 100% 50%;}
  100%{ background-position: 0% 50%;}
}

/* Apply slow movement on filled button (non-intrusive) */
.filled-btn.animate-gradient{
  animation: gradientShift 8s ease-in-out infinite;
}

/* Badges */
.badge-red,
.badge-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: 12px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  padding: clamp(6px, 1.6vw, 8px) clamp(12px, 3vw, 20px);
}

/* Solid red badge with subtle pulse */
.badge-red{
  background: var(--brand-red);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform var(--btn-transition), box-shadow var(--btn-transition);
}

/* Small pulse keyframes */
@keyframes pulseBadge {
  0% { transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
  50% { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.14); }
  100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
}

.badge-red.pulse{
  animation: pulseBadge 3.6s ease-in-out infinite;
}

/* Outline badge */
.badge-outline{
  background: var(--light-red-bg);
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
}

/* Layout helpers (optional) */
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* Responsive tweaks */
@media (max-width: 420px){
  .outline-btn, .filled-btn{
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
  }
  .badge-red, .badge-outline{
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* Accessibility: respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .filled-btn.animate-gradient,
  .badge-red.pulse{
    animation: none !important;
  }
  .outline-btn,
  .filled-btn,
  .badge-red,
  .badge-outline{
    transition: none !important;
  }
}
/* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #380303;
        }
        ::-webkit-scrollbar-thumb {
            background: #ff3333;
            border-radius: 4px;
        }
        
        /* Loader Styles */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #380303;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .gear-spinner {
            font-size: 4rem;
            color: #ff3333;
        }