/* Component Loading States - Add to main CSS */

#header-placeholder,
#footer-placeholder,
#contact-form-placeholder {
    min-height: 0;
    transition: min-height 0.3s ease;
}

#header-placeholder {
    min-height: 80px;
    /* Reserve space for header to prevent layout shift */
}

#footer-placeholder {
    min-height: 200px;
    /* Reserve space for footer */
}

/* Loading state */
.component-loading {
    position: relative;
    opacity: 0.6;
}

.component-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-cyan, #00d4ff);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Loaded state */
.component-loaded {
    opacity: 1;
    min-height: auto;
}

/* Error state - hidden by default for production */
.component-error {
    min-height: auto;
}