/**
 * Kosmetix Button Component
 * Reusable button styling with design system
 *
 * @package Kosmetix
 */

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

.kosmetix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2xs);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  transition: all var(--wp--custom--transition--normal);
  box-sizing: border-box;
  white-space: nowrap;
}

.kosmetix-btn:focus {
  outline: 2px solid var(--wp--preset--color--rose-gold);
  outline-offset: 2px;
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

/* Small - 36px */
.kosmetix-btn--sm {
  height: 36px;
  padding: 0 var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  border-radius: var(--wp--custom--radius--sm);
}

.kosmetix-btn--sm .kosmetix-btn__icon {
  font-size: 18px;
}

/* Medium - 44px (default) */
.kosmetix-btn--md {
  height: 44px;
  padding: 0 var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--base);
  border-radius: var(--wp--custom--radius--md);
}

.kosmetix-btn--md .kosmetix-btn__icon {
  font-size: 20px;
}

/* Large - 52px */
.kosmetix-btn--lg {
  height: 52px;
  padding: 0 var(--wp--preset--spacing--lg);
  font-size: var(--wp--preset--font-size--lg);
  border-radius: var(--wp--custom--radius--lg);
}

.kosmetix-btn--lg .kosmetix-btn__icon {
  font-size: 24px;
}

/* ============================================
   VARIANT STYLES
   ============================================ */

/* Primary - Rose gold filled */
.kosmetix-btn--primary {
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  box-shadow: var(--wp--custom--shadow--sm);
}

.kosmetix-btn--primary:hover {
  background: var(--wp--preset--color--rose-gold-dark);
  color: var(--wp--preset--color--white);
  box-shadow: var(--wp--custom--shadow--glow);
  transform: translateY(-2px);
}

/* ... */

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

.kosmetix-btn--loading::after,
.kosmetix-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid var(--wp--preset--color--white); /* Fixed color */
  border-radius: var(--wp--custom--radius--pill);
  border-top-color: transparent;
  animation: kosmetix-btn-spin 0.6s linear infinite;
}
.kosmetix-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--wp--custom--shadow--xs);
}

/* Secondary - Champagne filled */
.kosmetix-btn--secondary {
  background: var(--wp--preset--color--champagne);
  color: var(--wp--preset--color--charcoal);
  box-shadow: var(--wp--custom--shadow--sm);
}

.kosmetix-btn--secondary:hover {
  background: var(--wp--preset--color--champagne-gold);
  box-shadow: var(--wp--custom--shadow--md);
  transform: translateY(-2px);
}

.kosmetix-btn--secondary:active {
  transform: translateY(0);
  box-shadow: var(--wp--custom--shadow--xs);
}

/* Outline - Transparent with border */
.kosmetix-btn--outline {
  background: transparent;
  color: var(--wp--preset--color--rose-gold);
  border: 2px solid var(--wp--preset--color--rose-gold);
  padding: 0 calc(var(--wp--preset--spacing--md) - 2px);
}

.kosmetix-btn--outline:hover {
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  box-shadow: var(--wp--custom--shadow--glow);
}

.kosmetix-btn--outline:active {
  box-shadow: var(--wp--custom--shadow--xs);
}

/* Hero - White on gradient background */
.kosmetix-btn--hero {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--rose-gold-dark);
  box-shadow: var(--wp--custom--shadow--md);
}

.kosmetix-btn--hero:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--custom--shadow--xl);
}

.kosmetix-btn--hero:active {
  transform: translateY(-1px);
  box-shadow: var(--wp--custom--shadow--md);
}

/* Ghost - Transparent, minimal */
.kosmetix-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--charcoal);
  box-shadow: none;
}

.kosmetix-btn--ghost:hover {
  background: var(--wp--preset--color--blush-light);
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-btn--ghost:active {
  background: var(--wp--preset--color--blush);
}

/* Instagram - White on dark, inverts on hover */
.kosmetix-btn--instagram {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--rose-gold-dark);
  box-shadow: var(--wp--custom--shadow--sm);
}

.kosmetix-btn--instagram:hover {
  background: var(--wp--preset--color--rose-gold-dark);
  color: var(--wp--preset--color--white);
  box-shadow: var(--wp--custom--shadow--glow);
  transform: translateY(-2px);
}

.kosmetix-btn--instagram:active {
  transform: translateY(0);
}
/* ============================================
   ICON POSITIONING
   ============================================ */

.kosmetix-btn--has-icon .kosmetix-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--wp--custom--transition--fast);
}

.kosmetix-btn--icon-right {
  /* flex-direction: row-reverse; - Removed: PHP component handles DOM order */
}

.kosmetix-btn:hover .kosmetix-btn__icon {
  transform: scale(1.1);
}

/* Icon-only buttons (no text) */
.kosmetix-btn--has-icon:not(:has(.kosmetix-btn__text)) {
  aspect-ratio: 1;
  padding: 0;
}

/* ============================================
   MODIFIERS
   ============================================ */

/* Full width */
.kosmetix-btn--full-width {
  width: 100%;
}

/* Disabled state */
.kosmetix-btn--disabled,
.kosmetix-btn:disabled,
.kosmetix-btn[aria-disabled='true'] {
  background: var(--wp--preset--color--mist);
  color: var(--wp--preset--color--slate);
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
  box-shadow: none;
  transform: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  /* Increase touch targets on mobile */
  .kosmetix-btn--sm {
    height: 40px;
  }

  .kosmetix-btn--md {
    height: 48px;
  }

  .kosmetix-btn--lg {
    height: 56px;
  }

  /* Make buttons more prominent on mobile */
  .kosmetix-btn {
    letter-spacing: var(--wp--custom--letter-spacing--normal);
  }
}

/* ============================================
   LOADING STATE (optional enhancement)
   ============================================ */

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

.kosmetix-btn--loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid currentColor;
  border-radius: var(--wp--custom--radius--pill);
  border-top-color: transparent;
  animation: kosmetix-btn-spin 0.6s linear infinite;
}

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