/* =============================================
   Buttons Component
   ============================================= */

.btn {
  padding: 16px 24px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #00b894);
  color: var(--bg-primary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

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

.btn-secondary:hover {
  border-color: var(--accent);
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-danger:hover {
  opacity: 0.9;
}

/* Translucent button variants */
.btn-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-info:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

.btn-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

.btn-danger.translucent {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger.translucent:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.btn-full {
  width: 100%;
}

/* Button loading state */
.btn .spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.btn.loading .btn-text {
  display: none;
}

.btn.loading .spinner {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive button styles for small screens */
@media (max-width: 480px) {
  .btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .btn .spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (360x740) - specific optimizations */
@media (width: 360px) and (height: 740px) and (orientation: portrait) {
  .btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (375x667) - specific optimizations */
@media (width: 375px) and (height: 667px) and (orientation: portrait) {
  .btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (375x812) - specific optimizations */
@media (width: 375px) and (height: 812px) and (orientation: portrait) {
  .btn {
    padding: 9px 13px !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (380x706) - specific optimizations */
@media (width: 380px) and (height: 706px) and (orientation: portrait) {
  .btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (380x754) and (380x810) - specific optimizations */
@media (min-width: 375px) and (max-width: 385px) and (min-height: 750px) and (max-height: 820px) and (orientation: portrait),
       (width: 380px) and (height: 754px) and (orientation: portrait),
       (width: 380px) and (height: 810px) and (orientation: portrait) {
  .btn {
    padding: 9px 13px !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (390x844) - specific optimizations */
@media (width: 390px) and (height: 844px) and (orientation: portrait) {
  .btn {
    padding: 9px 13px !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (411x823) - specific optimizations */
@media (width: 411px) and (height: 823px) and (orientation: portrait) {
  .btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .btn .spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (412x892) - specific optimizations */
@media (width: 412px) and (height: 892px) and (orientation: portrait) {
  .btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .btn .spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (412x915) - specific optimizations */
@media (width: 412px) and (height: 915px) and (orientation: portrait) {
  .btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .btn .spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (414x736) - specific optimizations */
@media (width: 414px) and (height: 736px) and (orientation: portrait) {
  .btn {
    padding: 9px 13px !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    border-radius: 7px !important;
    gap: 5px !important;
  }

  .btn .spinner {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (414x896) - specific optimizations */
@media (width: 414px) and (height: 896px) and (orientation: portrait) {
  .btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .btn .spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
}

/* Phone portrait (430x932) - specific optimizations */
@media (width: 430px) and (height: 932px) and (orientation: portrait) {
  .btn {
    padding: 10px 15px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .btn .spinner {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
  }
}