/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================
   
   Reusable loading spinner and error container components.
   Used throughout the application for async operations.
   
   ============================================================================ */

/* ============================================================================
   CONTAINERS
   ============================================================================ */

.loading-container,
.error-container {
    text-align: center;
    padding: 60px 20px;
}


/* ============================================================================
   LOADING SPINNER
   ============================================================================ */

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-gray-light);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* ============================================================================
   ERROR CONTAINER
   ============================================================================ */

.error-container {
    color: #e74c3c;  /* TODO: Add --color-error-red to variables */
}

.error-container h2 {
    margin-bottom: 15px;
}