/* =========================================================
   Message Box Component
   Centered icon + message for status/info pages
   ========================================================= */

.message-box {
    text-align: center;
    margin-bottom: var(--cf-space-6);
}

.message-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: var(--cf-space-4);
}

.message-box__icon--info {
    background: var(--cf-color-gray-100);
    color: var(--cf-color-text-muted);
}

.message-box__icon--error {
    background: rgba(220, 38, 38, 0.1);
    color: var(--cf-color-danger);
}

.message-box__icon--success {
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
}

.message-box__icon--warning {
    background: rgba(234, 179, 8, 0.1);
    color: #a16207;
}

.message-box__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cf-color-text-primary);
    margin-bottom: var(--cf-space-2);
}

.message-box__description {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-muted);
}

/* Info Box - supplementary information panel */
.info-box {
    background: rgba(91, 115, 255, 0.04);
    border: 1px solid var(--cf-color-border-subtle);
    border-radius: var(--cf-radius-md);
    padding: var(--cf-space-4);
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-primary);
}

.info-box--error {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.2);
}

.info-box--success {
    background: rgba(34, 197, 94, 0.04);
    border-color: rgba(34, 197, 94, 0.2);
}

.info-box--warning {
    background: rgba(234, 179, 8, 0.04);
    border-color: rgba(234, 179, 8, 0.2);
}

.info-box__muted {
    color: var(--cf-color-text-muted);
    margin-top: var(--cf-space-2);
    margin-bottom: 0;
}