/**
 * Content Icons Styles
 * Styles for displaying icons in message and practical info cards
 */

/* Icon container and circle */
.content-icon {
    display: inline-block;
    margin-right: 12px;
    flex-shrink: 0;
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.icon-circle svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

/* Color classes matching icon-config.js */
.icon-circle.color-blue {
    background-color: #E3F2FD;
    color: #1976D2;
}

.icon-circle.color-orange {
    background-color: #FFF3E0;
    color: #F57C00;
}

.icon-circle.color-green {
    background-color: #E8F5E9;
    color: #388E3C;
}

.icon-circle.color-purple {
    background-color: #F3E5F5;
    color: #7B1FA2;
}

.icon-circle.color-teal {
    background-color: #E0F2F1;
    color: #00796B;
}

.icon-circle.color-red {
    background-color: #FFEBEE;
    color: #C62828;
}

/* Message card header layout with icon */
.message-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.message-header-text {
    flex: 1;
    min-width: 0; /* Allow text to shrink */
}

.message-header-text h3 {
    margin: 0 0 4px 0;
}

.message-header-text .date {
    margin: 0;
}

/* Practical info card header layout with icon (matching message structure) */
.info-card-header-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.info-card-header-text {
    flex: 1;
    min-width: 0; /* Allow text to shrink */
}

.info-card-header-text .info-card-header {
    margin: 0;
}

/* Practical info card content section */
.info-card-content {
    /* Content flows normally below the header */
}

/* Mobile responsive sizing */
@media (max-width: 768px) {
    .icon-circle {
        width: 50px;
        height: 50px;
    }
    
    .icon-circle svg {
        width: 28px;
        height: 28px;
    }
    
    .content-icon {
        margin-right: 10px;
    }
    
    .info-card .content-icon {
        margin-right: 12px;
        margin-bottom: 10px;
    }
}

/* Hover effect for interactive elements */
.message-card:hover .icon-circle,
.info-card:hover .icon-circle {
    transform: scale(1.05);
}