/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Error Illustration Styles
 * Styles for AI-generated error illustrations
 */

/* Error Container */
.error-with-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 2rem);
    min-height: 400px;
    text-align: center;
    gap: var(--spacing-lg, 1.5rem);

/* Illustration Container */
.error-illustration {
    width: 100%;
    max-width: 504px;
    height: auto;
    margin-bottom: var(--spacing-md, 1rem);
    opacity: 0.8;
    transition: opacity 0.3s ease;

.error-with-illustration:hover .error-illustration {
    opacity: 1;

.error-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, var(--radius-md));
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
    filter: drop-shadow(0 0 20px rgba(231, 76, 60, 0.2));
    object-fit: contain;

/* Content Container */
.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    max-width: 600px;

.error-title {
    font-size: var(--font-size-2xl, 2rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-danger, var(--color-error));
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);

.error-message {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-secondary, var(--color-text-secondary));
    margin: 0;
    line-height: 1.6;

.error-action {
    margin-top: var(--spacing-lg, 1.5rem);

/* Loading State */
.error-illustration-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 2rem);
    min-height: 400px;

.error-illustration-spinner {
    width: calc(var(--spacing-3xl) * 1.042);
    height: calc(var(--spacing-3xl) * 1.042);
    border: 4px solid var(--color-border, #333);
    border-top-color: var(--color-danger, var(--color-error));
    border-radius: var(--radius-full);
    animation: errorSpin 1s linear infinite;

@keyframes errorSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

/* Error Type Specific Styles */
.error-404 .error-image {
    filter: drop-shadow(0 0 20px rgba(var(--color-info-rgb, 91, 192, 222), 0.3));

.error-500 .error-image {
    filter: drop-shadow(0 0 20px rgba(231, 76, 60, 0.4));

.error-403 .error-image,
.error-permission-denied .error-image {
    filter: drop-shadow(0 0 20px rgba(var(--color-warning-rgb, 255, 193, 7), 0.3));

.error-connection-lost .error-image,
.error-connection-failed .error-image {
    filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.3));

/* Responsive */
@media (max-width: 768px) {
    .error-with-illustration {
        padding: var(--spacing-md, 1rem);
        min-height: 304px;

    .error-illustration {
        max-width: 352px;

    .error-title {
        font-size: var(--font-size-xl, 1.5rem);

    .error-message {
        font-size: var(--font-size-base, 1rem);

}}}}}}}}}}}}}}}}}}}}