.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  text-decoration: none;
  font-weight: 400;
  border-radius: 28px;  
  padding: 10px 25px;
  margin: 10px 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-width: 150px;
}
.btn img{
  width: 14px;
}



.btn.primary {
  background: var(--bg-primary-gradient);
  color: var(--text-inverse);
  border: var(--border-primary);
}

.btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-secondary);
}

.btn.border {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-primary);
}

.btn.fullwidth{
  width: 100%;
  margin-inline: auto;
}

.btn.gradient {
  background: var(--bg-primary-gradient);
  color: var(--text-inverse);
  border: var(--border-tertiary);
}

.btn.gradient:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-primary);
}

.btn.variant{
  width: 125px;
  font-size: 12px;
  padding: 8px 12px;
}



.btn.variant-primary{
  background: #192E81;
  color: #fff;
}
.btn.variant-secondary{
  background: #FFF7ED;
  color: #FF7B4C;
}

.btn.variant-tertiary{
  background: #F1F0FC;
  color: #785ECC;
}

.btn.variant-quaternary{
  background: #EBF0F3;
  color: #5A899D;
}

.btn.variant-success{
  background: var(--text-success);
  color: var(--text-inverse);
}

.btn.variant-danger{
  background: var(--text-danger);
  color: var(--text-inverse);
}


.btn.disabled{
  background: #ececec;
  color: var(--text-secondary);  
  border: var(--border-secondary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1; /* keep visual consistency */
  box-shadow: none;
}

.btn.login{
  padding: 8px 25px;
  margin-block: 20px;
  background: var(--bg-accent-1);
  transition: all 0.5s ease;
  min-width: fit-content;
}

.btn.login:hover{
  background: #1E40AF;
  color: var(--text-inverse);
}





/* Ripple circle */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.35);
  animation: ripple 600ms ease-out;
}

/* Better contrast on light buttons */
.btn.secondary .ripple,
.btn.border .ripple,
.btn.variant .ripple,
.btn.gradient .ripple {
  background: rgba(0, 0, 0, 0.15);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce) {
  .btn .ripple {
    animation: none;
  }
}




@media (max-width: 460px){
  .btn.gradient {
    margin: 10px 0;
    padding: 6px 15px;    
  }
}


/* Touch-friendly buttons */
@media (pointer: coarse) {
  .btn {
    min-height: 20px;
    min-width: 40px;
  }
}