/*
 * QuickMonster Button Components
 */

/* ========================================
   BASE BUTTON
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qm-space-sm);
  padding: var(--qm-space-sm) var(--qm-space-lg);
  font-family: var(--qm-font-ui);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: none;
  border-radius: var(--qm-radius-sm);
  cursor: pointer;
  transition: all var(--qm-transition-fast);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.btn:active::after {
  width: 200%;
  height: 200%;
}

/* ========================================
   PRIMARY BUTTON - Crimson
   ======================================== */

.btn-primary {
  background: linear-gradient(180deg,
    var(--qm-crimson-light) 0%,
    var(--qm-crimson) 50%,
    var(--qm-crimson-dark) 100%
  );
  color: var(--qm-text-light);
  border: 2px solid var(--qm-blood);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    var(--qm-coral) 0%,
    var(--qm-crimson-light) 50%,
    var(--qm-crimson) 100%
  );
  box-shadow:
    var(--qm-shadow-lg),
    var(--qm-shadow-glow-crimson),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    var(--qm-shadow-sm),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   SECONDARY BUTTON - Gold
   ======================================== */

.btn-secondary {
  background: linear-gradient(180deg,
    var(--qm-gold-light) 0%,
    var(--qm-gold) 50%,
    var(--qm-gold-dark) 100%
  );
  color: var(--qm-obsidian);
  border: 2px solid var(--qm-bronze);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #FFE066 0%,
    var(--qm-gold-light) 50%,
    var(--qm-gold) 100%
  );
  box-shadow:
    var(--qm-shadow-lg),
    var(--qm-shadow-glow-gold),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    var(--qm-shadow-sm),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========================================
   OUTLINE BUTTON
   ======================================== */

.btn-outline {
  background: transparent;
  color: var(--qm-text-light);
  border: 2px solid var(--qm-granite);
  box-shadow: var(--qm-shadow-sm);
}

.btn-outline:hover:not(:disabled) {
  background: var(--qm-granite);
  border-color: var(--qm-crimson);
  box-shadow: var(--qm-shadow-md);
}

.btn-outline:active:not(:disabled) {
  background: var(--qm-stone);
}

/* Outline color variants */
.btn-outline-crimson {
  border-color: var(--qm-crimson);
  color: var(--qm-crimson);
}

.btn-outline-crimson:hover:not(:disabled) {
  background: var(--qm-crimson);
  color: var(--qm-text-light);
}

.btn-outline-gold {
  border-color: var(--qm-gold);
  color: var(--qm-gold);
}

.btn-outline-gold:hover:not(:disabled) {
  background: var(--qm-gold);
  color: var(--qm-obsidian);
}

/* ========================================
   SUCCESS BUTTON
   ======================================== */

.btn-success {
  background: linear-gradient(180deg,
    var(--qm-success-light) 0%,
    var(--qm-success) 100%
  );
  color: var(--qm-text-light);
  border: 2px solid var(--qm-success-dark);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-success:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #5A9E52 0%,
    var(--qm-success-light) 100%
  );
  transform: translateY(-2px);
  box-shadow:
    var(--qm-shadow-lg),
    0 0 20px rgba(74, 140, 66, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* ========================================
   DANGER BUTTON
   ======================================== */

.btn-danger {
  background: linear-gradient(180deg,
    var(--qm-danger-light) 0%,
    var(--qm-danger) 100%
  );
  color: var(--qm-text-light);
  border: 2px solid var(--qm-blood-dark);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #E63950 0%,
    var(--qm-danger-light) 100%
  );
  transform: translateY(-2px);
  box-shadow:
    var(--qm-shadow-lg),
    0 0 20px rgba(139, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* ========================================
   WARNING BUTTON
   ======================================== */

.btn-warning {
  background: linear-gradient(180deg,
    var(--qm-warning-light) 0%,
    var(--qm-warning) 100%
  );
  color: var(--qm-obsidian);
  border: 2px solid var(--qm-warning-dark);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.btn-warning:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #EEB822 0%,
    var(--qm-warning-light) 100%
  );
  transform: translateY(-2px);
}

/* ========================================
   INFO BUTTON
   ======================================== */

.btn-info {
  background: linear-gradient(180deg,
    var(--qm-info-light) 0%,
    var(--qm-info) 100%
  );
  color: var(--qm-text-light);
  border: 2px solid var(--qm-info-dark);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-info:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #3E8ABE 0%,
    var(--qm-info-light) 100%
  );
  transform: translateY(-2px);
}

/* ========================================
   GHOST BUTTON
   ======================================== */

.btn-ghost {
  background: transparent;
  color: var(--qm-coral);
  border: none;
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(196, 30, 58, 0.15);
  color: var(--qm-coral-light);
}

.btn-ghost:active:not(:disabled) {
  background: rgba(196, 30, 58, 0.25);
}

/* ========================================
   LINK BUTTON
   ======================================== */

.btn-link {
  background: transparent;
  color: var(--qm-coral);
  border: none;
  box-shadow: none;
  padding: var(--qm-space-xs) var(--qm-space-sm);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

.btn-link:hover:not(:disabled) {
  color: var(--qm-coral-light);
  text-decoration: underline;
}

/* ========================================
   BUTTON SIZES
   ======================================== */

.btn-xs {
  padding: var(--qm-space-xs) var(--qm-space-sm);
  font-size: var(--qm-text-xs);
}

.btn-sm {
  padding: var(--qm-space-xs) var(--qm-space-md);
  font-size: var(--qm-text-sm);
}

.btn-lg {
  padding: var(--qm-space-md) var(--qm-space-xl);
  font-size: var(--qm-text-lg);
}

.btn-xl {
  padding: var(--qm-space-lg) var(--qm-space-2xl);
  font-size: var(--qm-text-xl);
}

/* ========================================
   ICON BUTTONS
   ======================================== */

.btn-icon {
  padding: var(--qm-space-sm);
  aspect-ratio: 1;
}

.btn-icon-sm {
  padding: var(--qm-space-xs);
  font-size: var(--qm-text-sm);
}

.btn-icon-lg {
  padding: var(--qm-space-md);
  font-size: var(--qm-text-xl);
}

/* ========================================
   FULL WIDTH BUTTON
   ======================================== */

.btn-block {
  display: flex;
  width: 100%;
}

/* ========================================
   BUTTON GROUP
   ======================================== */

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--qm-radius-sm) 0 0 var(--qm-radius-sm);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--qm-radius-sm) var(--qm-radius-sm) 0;
}

.btn-group .btn:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* ========================================
   LOADING STATE
   ======================================== */

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2em;
  height: 1.2em;
  margin: -0.6em 0 0 -0.6em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.75s linear infinite;
}

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

/* ========================================
   SPECIAL FANTASY BUTTONS
   ======================================== */

/* Ornate button with decorative edges */
.btn-ornate {
  position: relative;
  background: linear-gradient(180deg,
    var(--qm-crimson-light) 0%,
    var(--qm-crimson) 50%,
    var(--qm-crimson-dark) 100%
  );
  color: var(--qm-text-light);
  border: 3px solid var(--qm-gold-dark);
  border-radius: var(--qm-radius-md);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 0 0 2px var(--qm-blood),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  padding: var(--qm-space-md) var(--qm-space-xl);
}

.btn-ornate::before,
.btn-ornate::after {
  content: '\2726';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--qm-gold);
  font-size: 0.8em;
}

.btn-ornate::before {
  left: var(--qm-space-sm);
}

.btn-ornate::after {
  right: var(--qm-space-sm);
}

.btn-ornate:hover:not(:disabled) {
  border-color: var(--qm-gold);
  box-shadow:
    var(--qm-shadow-lg),
    var(--qm-shadow-glow-gold),
    inset 0 0 0 2px var(--qm-blood),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Stone/carved button */
.btn-stone {
  background: linear-gradient(180deg,
    var(--qm-ash) 0%,
    var(--qm-granite) 50%,
    var(--qm-stone) 100%
  );
  color: var(--qm-text-light);
  border: 2px solid var(--qm-charcoal);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-stone:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #5A5A62 0%,
    var(--qm-ash) 50%,
    var(--qm-granite) 100%
  );
  transform: translateY(-2px);
}

/* ========================================
   ARCANE BUTTON - Blood Magic Effect
   ======================================== */

.btn-arcane {
  background: linear-gradient(180deg,
    var(--qm-arcane-light) 0%,
    var(--qm-arcane) 50%,
    var(--qm-arcane-dark) 100%
  );
  color: var(--qm-text-bright);
  border: 2px solid var(--qm-blood);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  position: relative;
}

.btn-arcane::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg,
    transparent 20%,
    rgba(255, 90, 110, 0.3) 40%,
    rgba(212, 175, 55, 0.2) 60%,
    transparent 80%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--qm-transition-normal);
  z-index: -1;
}

.btn-arcane:hover:not(:disabled) {
  background: linear-gradient(180deg,
    var(--qm-ether) 0%,
    var(--qm-arcane-light) 50%,
    var(--qm-arcane) 100%
  );
  box-shadow:
    var(--qm-shadow-lg),
    var(--qm-shadow-glow-arcane),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.btn-arcane:hover:not(:disabled)::before {
  opacity: 1;
  animation: arcaneShimmer 2s linear infinite;
}

.btn-arcane:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    var(--qm-shadow-sm),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes arcaneShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Mystic Button Variant - Deeper Blood Magic */
.btn-mystic {
  background: linear-gradient(180deg,
    var(--qm-mystic-light) 0%,
    var(--qm-mystic) 50%,
    var(--qm-mystic-dark) 100%
  );
  color: var(--qm-text-bright);
  border: 2px solid var(--qm-mystic-dark);
  box-shadow:
    var(--qm-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-mystic:hover:not(:disabled) {
  background: linear-gradient(180deg,
    #FF8090 0%,
    var(--qm-mystic-light) 50%,
    var(--qm-mystic) 100%
  );
  box-shadow:
    var(--qm-shadow-lg),
    var(--qm-shadow-glow-mystic),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}