/**
 * Frontend Styles for License Portal
 * Uses cfloinc Design System
 * Version: 1.0.0
 */

/* Ensure design system variables are available */
@import url('../../../themes/hello-theme-child-master/assets/css/cfloinc-design-system.css');

/* Additional frontend-specific styles */

/* License Section Container */
.cfloinc-licenses-section {
  margin: var(--space-6) 0;
}

/* Grid adjustments for license cards */
.cfloinc-grid--1 {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

/* Success/Error message animations */
.cfloinc-license-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: cfloinc-fade-in 0.3s ease;
}

.cfloinc-license-message--success {
  background: var(--cfloinc-success-50);
  color: var(--cfloinc-success-700);
  border: 1px solid var(--cfloinc-success-200);
}

.cfloinc-license-message--error {
  background: var(--cfloinc-error-50);
  color: var(--cfloinc-error-700);
  border: 1px solid var(--cfloinc-error-200);
}

@keyframes cfloinc-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button loading state */
.cfloinc-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.cfloinc-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: cfloinc-spin 0.6s linear infinite;
}

.cfloinc-btn--ghost.cfloinc-btn--loading::after,
.cfloinc-btn--secondary.cfloinc-btn--loading::after {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--cfloinc-blue-500);
}

/* Copy button feedback */
.cfloinc_licenses_copy_button.copied {
  background: var(--cfloinc-success-500) !important;
  color: var(--cfloinc-white) !important;
  border-color: var(--cfloinc-success-500) !important;
}

/* Machine removal confirmation */
.cfloinc-machine-item--removing {
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .cfloinc-license-card__footer {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .cfloinc-license-card__footer .cfloinc-btn,
  .cfloinc-license-card__footer .cfloinc-flex {
    width: 100%;
  }
  
  .cfloinc-license-card__footer .cfloinc-flex {
    flex-direction: column;
  }
}

/* WooCommerce My Account integration */
.woocommerce-MyAccount-content .cfloinc-licenses-section {
  margin-top: 0;
}

.woocommerce-MyAccount-content .cfloinc-page-header {
  margin-bottom: var(--space-6);
}

/* Print styles for licenses */
@media print {
  .cfloinc-btn,
  .cfloinc-license-card__footer {
    display: none !important;
  }
  
  .cfloinc-license-card:hover {
    transform: none !important;
  }
}