/* =========================================
   ARNOREX BUTTON SYSTEM
   Premium Marketplace Action Engine
========================================= */

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

.btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  min-height: 54px;

  padding-inline: 28px;

  border-radius: var(--radius-pill);

  font-size: 0.96rem;
  font-weight: 700;

  letter-spacing: -0.02em;

  overflow: hidden;

  cursor: pointer;

  transition:
    transform var(--transition-normal),
    background var(--transition-normal),
    border var(--transition-normal),
    box-shadow var(--transition-normal),
    opacity var(--transition-normal);

  will-change:
    transform;
}

/* =========================================
   BUTTON ACTIVE EFFECT
========================================= */

.btn:active {
  transform:
    scale(0.97);
}

/* =========================================
   GOLD PRIMARY BUTTON
========================================= */

.btn-primary {
  background:
    var(--gradient-gold);

  color:
    #000000;

  border:
    1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 10px 30px rgba(255,184,0,0.22);
}

.btn-primary:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 18px 40px rgba(255,184,0,0.35);
}

/* =========================================
   RED BUTTON
========================================= */

.btn-danger {
  background:
    var(--gradient-red);

  color:
    white;

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 30px rgba(196,0,0,0.22);
}

.btn-danger:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 18px 40px rgba(196,0,0,0.35);
}

/* =========================================
   BLUE BUTTON
========================================= */

.btn-blue {
  background:
    var(--gradient-blue);

  color:
    white;

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 30px rgba(0,31,122,0.22);
}

.btn-blue:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 18px 40px rgba(0,31,122,0.35);
}

/* =========================================
   GLASS BUTTON
========================================= */

.btn-glass {
  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    var(--text-primary);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

.btn-glass:hover {
  transform:
    translateY(-4px);

  background:
    rgba(255,255,255,0.1);

  border:
    1px solid rgba(255,184,0,0.2);

  box-shadow:
    var(--shadow-gold);
}

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

.btn-outline {
  background:
    transparent;

  border:
    1.5px solid rgba(255,184,0,0.4);

  color:
    var(--color-gold-primary);
}

.btn-outline:hover {
  transform:
    translateY(-4px);

  background:
    rgba(255,184,0,0.08);

  border:
    1.5px solid rgba(255,184,0,0.7);

  box-shadow:
    var(--shadow-gold);
}

/* =========================================
   ICON BUTTON
========================================= */

.btn-icon {
  width: 54px;
  height: 54px;

  padding: 0;

  border-radius:
    50%;
}

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

.btn-sm {
  min-height: 42px;

  padding-inline: 18px;

  font-size: 0.84rem;
}

.btn-lg {
  min-height: 64px;

  padding-inline: 36px;

  font-size: 1rem;
}

.btn-xl {
  min-height: 74px;

  padding-inline: 46px;

  font-size: 1.08rem;
}

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

.btn-block {
  width: 100%;
}

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

.btn-loading {
  pointer-events: none;

  opacity: 0.8;
}

.btn-spinner {
  width: 18px;
  height: 18px;

  border-radius:
    50%;

  border:
    2px solid rgba(255,255,255,0.25);

  border-top-color:
    currentColor;

  animation:
    spin 0.7s linear infinite;
}

/* =========================================
   RIPPLE EFFECT
========================================= */

.btn-ripple {
  position: relative;

  overflow: hidden;
}

.btn-ripple::after {
  content: '';

  position: absolute;

  width: 20px;
  height: 20px;

  background:
    rgba(255,255,255,0.4);

  border-radius:
    50%;

  transform:
    scale(0);

  opacity: 0;

  pointer-events: none;
}

.btn-ripple:active::after {
  animation:
    ripple 0.6s ease-out;
}

/* =========================================
   BUTTON GLOW EFFECT
========================================= */

.btn-glow {
  animation:
    pulseGlow 3s ease-in-out infinite;
}

/* =========================================
   PREMIUM HOVER SHINE
========================================= */

.btn-shine {
  position: relative;

  isolation: isolate;
}

.btn-shine::before {
  content: '';

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.35),
      transparent
    );

  transform:
    skewX(-20deg);

  transition:
    left 0.9s ease;

  z-index: 1;
}

.btn-shine:hover::before {
  left: 140%;
}

/* =========================================
   CART BUTTON
========================================= */

.btn-cart {
  background:
    linear-gradient(
      135deg,
      #ffb800 0%,
      #ffdd74 100%
    );

  color:
    #000000;

  font-weight:
    800;

  box-shadow:
    0 12px 35px rgba(255,184,0,0.28);
}

.btn-cart:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 20px 45px rgba(255,184,0,0.4);
}

/* =========================================
   CHECKOUT BUTTON
========================================= */

.btn-checkout {
  background:
    linear-gradient(
      135deg,
      #00b85c 0%,
      #00d96d 100%
    );

  color:
    white;

  font-weight:
    800;

  box-shadow:
    0 12px 35px rgba(0,217,109,0.24);
}

.btn-checkout:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 20px 45px rgba(0,217,109,0.35);
}

/* =========================================
   DISABLED STATE
========================================= */

.btn:disabled {
  opacity: 0.5;

  cursor: not-allowed;

  transform: none !important;

  box-shadow: none !important;
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 768px) {

  .btn {
    min-height: 50px;

    padding-inline: 22px;
  }

  .btn-lg {
    min-height: 58px;
  }

  .btn-xl {
    min-height: 64px;
  }

}

@media (max-width: 540px) {

  .btn {
    width: 100%;
  }

      }