/**
 * Button Component Styles
 *
 * Primary interactive element for CTAs, form submissions, and navigation.
 * Based on design patterns from front-page.php
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

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

.hub-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  
  /* Spacing */
  padding: 16px 32px;
  
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.025em;
  
  /* Visual */
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  
  /* Interaction */
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  
  /* Prevents button from shrinking */
  flex-shrink: 0;
}

/* Remove default button styles */
.hub-btn:focus {
  outline: none;
}

/* Focus visible for accessibility */
.hub-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ============================================
   VARIANT: PRIMARY (Gradient)
   ============================================ */

.hub-btn--primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: 0 4px 15px var(--color-primary-transparent-20);
}

.hub-btn--primary:hover,
.hub-btn--primary:hover:not(.hub-btn--disabled) {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 7px 20px var(--color-primary-transparent-30);
}

.hub-btn--primary:active:not(.hub-btn--disabled) {
  color: var(--color-white);
  transform: translateY(0);
  box-shadow: 0 4px 15px var(--color-primary-transparent-20);
}


/* ============================================
   VARIANT: SECONDARY (White on Teal Background)
   ============================================ */

.hub-btn--secondary {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.hub-btn--secondary:hover,
.hub-btn--secondary:hover:not(.hub-btn--disabled) {
  background: var(--color-white);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.hub-btn--secondary:active:not(.hub-btn--disabled) {
  transform: translateY(0);
}

.hub-btn--secondary:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* ============================================
   VARIANT: OUTLINE (Gray Border)
   ============================================ */

.hub-btn--outline {
  background: transparent;
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

.hub-btn--outline:hover,
.hub-btn--outline:hover:not(.hub-btn--disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

.hub-btn--outline:active:not(.hub-btn--disabled) {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}


/* ============================================
   VARIANT: GHOST (Transparent)
   ============================================ */

.hub-btn--ghost {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.hub-btn--ghost:hover,
.hub-btn--ghost:hover:not(.hub-btn--disabled) {
  background: var(--color-gray-50);
  color: var(--color-primary-dark);
}

.hub-btn--ghost:active:not(.hub-btn--disabled) {
  background: var(--color-gray-100);
  color: var(--color-primary-dark);
}


/* ============================================
   VARIANT: DANGER (Red - for destructive actions)
   ============================================ */

.hub-btn--danger {
  background: var(--color-error);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}

.hub-btn--danger:hover,
.hub-btn--danger:hover:not(.hub-btn--disabled) {
  background: #dc2626;
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(239, 68, 68, 0.35);
}

.hub-btn--danger:active:not(.hub-btn--disabled) {
  background: #b91c1c;
  color: var(--color-white);
  transform: translateY(0);
}


/* ============================================
   VARIANT: SUCCESS (Green - for confirmation)
   ============================================ */

.hub-btn--success {
  background: var(--gradient-success);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}

.hub-btn--success:hover,
.hub-btn--success:hover:not(.hub-btn--disabled) {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(16, 185, 129, 0.35);
}

.hub-btn--success:active:not(.hub-btn--disabled) {
  color: var(--color-white);
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}


/* ============================================
   VARIANT: TERTIARY (Gray - for secondary actions)
   ============================================ */

.hub-btn--tertiary {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  border: 1px solid var(--color-gray-200);
  box-shadow: none;
}

.hub-btn--tertiary:hover,
.hub-btn--tertiary:hover:not(.hub-btn--disabled) {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.hub-btn--tertiary:active:not(.hub-btn--disabled) {
  background: var(--color-gray-300);
  color: var(--color-gray-700);
}


/* ============================================
   SIZE: X-SMALL (Compact actions)
   ============================================ */

.hub-btn--x-small {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  gap: var(--spacing-1);
  border-radius: var(--radius-base);
}

.hub-btn--x-small .hub-btn__icon {
  width: 14px;
  height: 14px;
}


/* ============================================
   SIZE: SMALL
   ============================================ */

.hub-btn--small {
  padding: 12px 20px;
  font-size: var(--font-size-sm);
  gap: var(--spacing-2);
}

.hub-btn--small .hub-btn__icon {
  width: 16px;
  height: 16px;
}

/* ============================================
   SIZE: MEDIUM (Default - already in base)
   ============================================ */

/* Medium is the default size with:
   padding: 16px 32px
   font-size: 16px
   gap: 12px
*/


/* ============================================
   SIZE: LARGE
   ============================================ */

.hub-btn--large {
  padding: 20px 40px;
  font-size: var(--font-size-lg);
  gap: var(--spacing-3);
}

.hub-btn--large .hub-btn__icon {
  width: 24px;
  height: 24px;
}


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

/* Full Width */
.hub-btn--full-width {
  width: 100%;
  display: flex;
}

/* Disabled State */
.hub-btn--disabled {
  background: var(--color-gray-200) !important;
  color: var(--color-gray-400) !important;
  font-weight: 400 !important;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
  border-color: var(--color-gray-200) !important;
}


/* ============================================
   BUTTON ELEMENTS
   ============================================ */

/* Button Text */
.hub-btn__text {
  display: inline-block;
}

/* Button Icon */
.hub-btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hub-btn__icon--before {
  order: -1;
}

.hub-btn__icon--after {
  order: 1;
}


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

@media (max-width: 768px) {
  .hub-btn {
    font-size: var(--font-size-sm);
    padding: 14px 28px;
  }
  
  .hub-btn--large {
    padding: 18px 36px;
    font-size: var(--font-size-base);
  }
  
  .hub-btn--small {
    padding: 10px 18px;
    font-size: var(--font-size-xs);
  }
  
  .hub-btn--x-small {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .hub-btn {
    font-size: var(--font-size-sm);
    padding: 12px 24px;
  }
  
  .hub-btn--large {
    padding: 16px 32px;
    font-size: var(--font-size-base);
  }
  
  .hub-btn--small {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
  }
  
  .hub-btn--x-small {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
  }
  
  /* Stack buttons vertically on very small screens */
  .hub-btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .hub-btn-group .hub-btn {
    width: 100%;
  }
}


/* ============================================
   BUTTON GROUPS
   ============================================ */

.hub-btn-group {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.hub-btn-group--center {
  justify-content: center;
}

.hub-btn-group--end {
  justify-content: flex-end;
}


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

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

.hub-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hub-btn-spin 0.6s linear infinite;
}

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

/* Spinner SVG Icon */
.hub-btn__icon.spinner {
  animation: hub-btn-spin 1s linear infinite;
}


/* ============================================
   ICON ANIMATIONS
   ============================================ */

/* Icon rotation for expandable elements */
.hub-btn__icon {
  transition: transform 0.3s ease;
}

.hub-btn--expanded .hub-btn__icon,
.hub-btn[aria-expanded="true"] .hub-btn__icon {
  transform: rotate(180deg);
}

/* Icon pulse animation */
@keyframes hub-btn-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.hub-btn__icon--pulse {
  animation: hub-btn-pulse 2s ease-in-out infinite;
}