.custom-meta-info {
    background-color: #e5f1f5; /* Light purple background */
    border: 1px solid #197faf; /* Darker purple border */
    padding: 15px; /* Space between content and border */
    margin-bottom: 1em;
    font-size: 14px;
    border-radius: 10px; /* Optional rounded corners */
    color: #146da0; /* Purple text */
}

.custom-meta-info span {
    display: inline-flex; /* Use flex for icon and text alignment */
    align-items: center; /* Center the icon and text vertically */
    margin-right: 0.5em; /* Space between items */
    line-height: 1.4; /* Ensure consistent line height for vertical alignment */
}

.custom-meta-info span:after {
    content: "|";
    margin-left: 0.5em;
    color: #1967af;
}

.custom-meta-info span:last-child:after {
    content: ""; /* Remove the "|" after the last item */
}

/* Mobile adjustments - Hide icons */
@media screen and (max-width: 768px) {
    .custom-meta-info span {
        display: block; /* Stack elements vertically */
        margin-right: 0; /* Remove right margin */
        line-height: 1.6; /* Maintain line height */
    }

    .custom-meta-info span i {
        display: none; /* Hide icons on mobile */
    }

    .custom-meta-info span:after {
        content: ""; /* Remove the "|" on mobile */
    }
}

/* Icon styling */
.custom-meta-info span i {
    margin-right: 8px; /* Space between icon and text */
    color: #1466a0; /* Purple icon color */
    font-size: 1.1rem; /* Slightly larger icons */
    vertical-align: middle; /* Ensure the icon aligns with text */
}

/* Hover effect for links */
.custom-meta-info span a:hover {
    text-decoration: underline;
}