/**
 * PCFG Support Portal V2 - Fallback Styles
 *
 * This file provides minimal styling for the shortcode's outer shell.
 * It acts as a placeholder while the main JavaScript application is loading.
 * The actual styling of the portal component is handled within the JavaScript file (Shadow DOM).
 */

@keyframes pcfg-pulse {
  50% {
    opacity: 0.7;
  }
}

.pcfg-shortcode-v2-shell {
  background-color: #f9fafb; /* A very light grey */
  border: 1px solid #f3f4f6; /* A slightly darker grey border */
  border-radius: 16px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  animation: pcfg-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: background-color 0.3s ease;
}

/* When the component has loaded and populated, the shell becomes transparent */
.pcfg-shortcode-v2-shell:not(:empty) {
  background-color: transparent;
  border-color: transparent;
  min-height: 0;
  padding: 0;
  animation: none;
}

.pcfg-shortcode-v2-shell:empty::before {
  content: 'Loading Support Portal...';
  color: #9ca3af; /* Muted grey text */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/*
 * Force the Web Component to be visible.
 * Some themes aggressively hide unknown elements, this rule prevents that.
 */
pcfg-support-portal-v2 {
    display: block !important;
    width: 100%;
}