/**
 * Pro Badge Component Styles
 * WooCommerce to Shopify Sync Plugin
 * 
 * Enhanced Pro badge styling for feature indicators.
 */

/* Pro Badge Base */
.w2ssyn-pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  font-size: var(--w2ssyn-font-size-xs);
  font-weight: var(--w2ssyn-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--w2ssyn-radius-sm);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  cursor: pointer;
  transition: all var(--w2ssyn-transition-base);
  position: relative;
  z-index: 10;
}

.w2ssyn-pro-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

.w2ssyn-pro-badge:active {
  transform: translateY(0);
}

/* Pro Badge Variants */
.w2ssyn-pro-badge--small {
  padding: 2px 6px;
  font-size: 10px;
}

.w2ssyn-pro-badge--large {
  padding: var(--w2ssyn-spacing-sm) var(--w2ssyn-spacing-md);
  font-size: var(--w2ssyn-font-size-sm);
}

/* Pro Badge with Icon */
.w2ssyn-pro-badge--with-icon {
  gap: var(--w2ssyn-spacing-xs);
}

.w2ssyn-pro-badge__icon {
  font-size: 12px;
  line-height: 1;
}

/* Pro Badge Positions */
.w2ssyn-pro-badge--top-right {
  position: absolute;
  top: var(--w2ssyn-spacing-sm);
  right: var(--w2ssyn-spacing-sm);
}

.w2ssyn-pro-badge--top-left {
  position: absolute;
  top: var(--w2ssyn-spacing-sm);
  left: var(--w2ssyn-spacing-sm);
}

.w2ssyn-pro-badge--inline {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--w2ssyn-spacing-xs);
}

/* Pro Badge on Cards */
.w2ssyn-module-card .w2ssyn-pro-badge,
.w2ssyn-card .w2ssyn-pro-badge {
  position: absolute;
  top: var(--w2ssyn-spacing-sm);
  right: var(--w2ssyn-spacing-sm);
  z-index: 20;
}

/* Pro Badge Animation */
@keyframes w2ssyn-pro-badge-pulse {

  0%,
  100% {
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  }

  50% {
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.6);
  }
}

.w2ssyn-pro-badge--pulse {
  animation: w2ssyn-pro-badge-pulse 2s ease-in-out infinite;
}

/* Pro Feature Indicator */
.w2ssyn-pro-feature {
  position: relative;
}

.w2ssyn-pro-feature--locked {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.w2ssyn-pro-feature--locked::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--w2ssyn-radius-md);
  z-index: 5;
}

.w2ssyn-pro-feature--locked .w2ssyn-pro-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
}

/* Legacy Support */
.pro-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  font-size: var(--w2ssyn-font-size-xs);
  font-weight: var(--w2ssyn-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--w2ssyn-radius-sm);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  cursor: pointer;
  transition: all var(--w2ssyn-transition-base);
}

/* .pro-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
} */

/* Responsive */
@media (max-width: 767px) {
  .w2ssyn-pro-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .w2ssyn-pro-badge--large {
    font-size: var(--w2ssyn-font-size-xs);
    padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm);
  }
}