/*
 * DPPBuilder - Button Components
 * 
 * This file contains all button styles used throughout the DPPBuilder plugin.
 * Includes primary, secondary, danger, success, and utility button variants.
 */

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

.dppb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dppb-space-2);
  padding: var(--dppb-space-2) var(--dppb-space-4);
  font-size: var(--dppb-text-sm);
  font-weight: var(--dppb-font-medium);
  line-height: var(--dppb-leading-normal);
  text-decoration: none;
  border: var(--dppb-border-thin) solid transparent;
  border-radius: var(--dppb-radius-sm);
  cursor: pointer;
  transition: all var(--dppb-transition-normal);
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  min-height: 32px;
}

.dppb-button:focus {
  outline: var(--dppb-border-normal) solid var(--dppb-primary);
  outline-offset: 2px;
}

.dppb-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* Primary Button */
.dppb-button--primary {
  background-color: var(--dppb-primary);
  border-color: var(--dppb-primary);
  color: var(--dppb-white);
}

.dppb-button--primary:hover {
  background-color: var(--dppb-primary-hover);
  border-color: var(--dppb-primary-hover);
  color: var(--dppb-white);
}

.dppb-button--primary:active {
  background-color: var(--dppb-primary-dark);
  border-color: var(--dppb-primary-dark);
}

/* Secondary Button */
.dppb-button--secondary {
  background-color: var(--dppb-white);
  border-color: var(--dppb-gray-300);
  color: var(--dppb-gray-700);
}

.dppb-button--secondary:hover {
  background-color: var(--dppb-gray-50);
  border-color: var(--dppb-gray-400);
  color: var(--dppb-gray-800);
}

.dppb-button--secondary:active {
  background-color: var(--dppb-gray-100);
  border-color: var(--dppb-gray-500);
}

/* Success Button */
.dppb-button--success {
  background-color: var(--dppb-success);
  border-color: var(--dppb-success);
  color: var(--dppb-white);
}

.dppb-button--success:hover {
  background-color: var(--dppb-success-dark);
  border-color: var(--dppb-success-dark);
  color: var(--dppb-white);
}

/* Danger Button */
.dppb-button--danger {
  background-color: var(--dppb-error);
  border-color: var(--dppb-error);
  color: var(--dppb-white);
}

.dppb-button--danger:hover {
  background-color: var(--dppb-error-dark);
  border-color: var(--dppb-error-dark);
  color: var(--dppb-white);
}

/* Warning Button */
.dppb-button--warning {
  background-color: var(--dppb-warning);
  border-color: var(--dppb-warning);
  color: var(--dppb-gray-900);
}

.dppb-button--warning:hover {
  background-color: var(--dppb-warning-dark);
  border-color: var(--dppb-warning-dark);
  color: var(--dppb-white);
}

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

.dppb-button--small {
  padding: var(--dppb-space-1) var(--dppb-space-3);
  font-size: var(--dppb-text-xs);
  min-height: 24px;
}

.dppb-button--large {
  padding: var(--dppb-space-3) var(--dppb-space-6);
  font-size: var(--dppb-text-lg);
  min-height: 40px;
}

/* ========================================
   BUTTON STATES
   ======================================== */

.dppb-button--loading {
  position: relative;
  color: transparent;
}

.dppb-button--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: dppb-spin 1s linear infinite;
}

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

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

.dppb-button-group {
  display: inline-flex;
  border-radius: var(--dppb-radius-sm);
  overflow: hidden;
}

.dppb-button-group .dppb-button {
  border-radius: 0;
  border-right-width: 0;
}

.dppb-button-group .dppb-button:first-child {
  border-top-left-radius: var(--dppb-radius-sm);
  border-bottom-left-radius: var(--dppb-radius-sm);
}

.dppb-button-group .dppb-button:last-child {
  border-top-right-radius: var(--dppb-radius-sm);
  border-bottom-right-radius: var(--dppb-radius-sm);
  border-right-width: var(--dppb-border-thin);
}

/* ========================================
   WOOCOMMERCE INTEGRATION
   ======================================== */

/* WooCommerce Button Overrides */
.dppb-settings-wrap .button,
.dppb-settings-wrap .button-primary,
.dppb-settings-wrap .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dppb-space-2);
  padding: var(--dppb-space-2) var(--dppb-space-4);
  font-size: var(--dppb-text-sm);
  font-weight: var(--dppb-font-medium);
  line-height: var(--dppb-leading-normal);
  text-decoration: none;
  border: var(--dppb-border-thin) solid transparent;
  border-radius: var(--dppb-radius-sm);
  cursor: pointer;
  transition: all var(--dppb-transition-normal);
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  min-height: 32px;
  background-color: var(--dppb-primary);
  border-color: var(--dppb-primary);
  color: var(--dppb-white);
}

.dppb-settings-wrap .button:hover,
.dppb-settings-wrap .button-primary:hover {
  background-color: var(--dppb-primary-hover);
  border-color: var(--dppb-primary-hover);
  color: var(--dppb-white);
}

.dppb-settings-wrap .button-secondary {
  background-color: var(--dppb-white);
  border-color: var(--dppb-gray-300);
  color: var(--dppb-gray-700);
}

.dppb-settings-wrap .button-secondary:hover {
  background-color: var(--dppb-gray-50);
  border-color: var(--dppb-gray-400);
  color: var(--dppb-gray-800);
}

/* ========================================
   SPECIFIC BUTTON COMPONENTS
   ======================================== */

/* Add Manufacturer Button */
.add_manufacturer_btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dppb-space-2);
  padding: var(--dppb-space-2) var(--dppb-space-4);
  background-color: var(--dppb-success);
  border: var(--dppb-border-thin) solid var(--dppb-success);
  color: var(--dppb-white);
  border-radius: var(--dppb-radius-sm);
  font-size: var(--dppb-text-sm);
  font-weight: var(--dppb-font-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dppb-transition-normal);
}

.add_manufacturer_btn:hover {
  background-color: var(--dppb-success-dark);
  border-color: var(--dppb-success-dark);
  color: var(--dppb-white);
}

.add_manufacturer_btn:active {
  transform: translateY(1px);
}

/* Remove Manufacturer Button */
#remove_manufacturer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: var(--dppb-error);
  border: var(--dppb-border-thin) solid var(--dppb-error);
  color: var(--dppb-white);
  border-radius: var(--dppb-radius-full);
  font-size: var(--dppb-text-xs);
  cursor: pointer;
  transition: all var(--dppb-transition-fast);
}

#remove_manufacturer:hover {
  background-color: var(--dppb-error-dark);
  border-color: var(--dppb-error-dark);
  transform: scale(1.1);
}

/* View Passport Button */
.dppb-view-passport-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dppb-space-2);
  padding: var(--dppb-space-2) var(--dppb-space-4);
  background-color: var(--dppb-primary);
  border: var(--dppb-border-thin) solid var(--dppb-primary);
  color: var(--dppb-white);
  border-radius: var(--dppb-radius-sm);
  font-size: var(--dppb-text-sm);
  font-weight: var(--dppb-font-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dppb-transition-normal);
}

.dppb-view-passport-btn:hover {
  background-color: var(--dppb-primary-hover);
  border-color: var(--dppb-primary-hover);
  color: var(--dppb-white);
}

.dppb-view-passport-btn .dashicons {
  font-size: var(--dppb-text-base);
  width: auto;
  height: auto;
}

/* Add Material Button */
.add-material-button .button {
  display: inline-flex;
  align-items: center;
  gap: var(--dppb-space-2);
  padding: var(--dppb-space-2) var(--dppb-space-4);
  background-color: var(--dppb-primary);
  border: var(--dppb-border-thin) solid var(--dppb-primary);
  color: var(--dppb-white);
  border-radius: var(--dppb-radius-sm);
  font-size: var(--dppb-text-sm);
  font-weight: var(--dppb-font-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dppb-transition-normal);
}

.add-material-button .button::before {
  content: '+';
  font-size: var(--dppb-text-lg);
  font-weight: var(--dppb-font-bold);
  line-height: 1;
}

.add-material-button .button:hover {
  background-color: var(--dppb-primary-hover);
  border-color: var(--dppb-primary-hover);
  color: var(--dppb-white);
}

.add-material-button .button:active {
  transform: translateY(1px);
}

/* Remove Material Button */
.remove-material {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: var(--dppb-error);
  border: var(--dppb-border-thin) solid var(--dppb-error);
  color: var(--dppb-white);
  border-radius: var(--dppb-radius-full);
  font-size: var(--dppb-text-xs);
  cursor: pointer;
  transition: all var(--dppb-transition-fast);
}

.remove-material:hover {
  background-color: var(--dppb-error-dark);
  border-color: var(--dppb-error-dark);
  transform: scale(1.1);
}

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

@media (max-width: 768px) {
  .dppb-button {
    padding: var(--dppb-space-3) var(--dppb-space-4);
    font-size: var(--dppb-text-base);
    min-height: 36px;
  }
  
  .dppb-button--small {
    padding: var(--dppb-space-2) var(--dppb-space-3);
    font-size: var(--dppb-text-sm);
    min-height: 28px;
  }
  
  .dppb-button--large {
    padding: var(--dppb-space-4) var(--dppb-space-6);
    font-size: var(--dppb-text-xl);
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .dppb-button {
    width: 100%;
    justify-content: center;
  }
  
  .dppb-button-group {
    flex-direction: column;
    width: 100%;
  }
  
  .dppb-button-group .dppb-button {
    border-radius: var(--dppb-radius-sm);
    border-right-width: var(--dppb-border-thin);
    border-bottom-width: 0;
  }
  
  .dppb-button-group .dppb-button:first-child {
    border-top-left-radius: var(--dppb-radius-sm);
    border-top-right-radius: var(--dppb-radius-sm);
    border-bottom-left-radius: 0;
  }
  
  .dppb-button-group .dppb-button:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--dppb-radius-sm);
    border-bottom-right-radius: var(--dppb-radius-sm);
    border-bottom-width: var(--dppb-border-thin);
  }
}