.info-box {
    background-color: #e8f4ff;
    border: 1px solid #dae4ff;
    border-left: 5px solid #4da3ff;
    padding: 10px 5px 10px 5px;
    border-radius: 6px;
    color: #044a75;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    text-align: left;
    align-items: center; /* keeps icon aligned to top */
    gap: 8px;
    width: 96%;
    margin-bottom: 8px;
    cursor: default;
    box-shadow: 2px 6px 8px rgba(18, 26, 40, 0.06);
}

.info-box::before {
    content: "ℹ️";
    font-size: 20px;
    flex-shrink: 0; /* keeps icon from resizing */
    line-height: 1.2;
}

.warning-box {
    background-color: #fff8e5;
    border: 1px solid #f1eed0;
    border-left: 5px solid #f5c542;
    padding: 10px 5px 10px 5px;
    border-radius: 6px;
    color: #6b4e00;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    text-align: left;
    align-items: center;
    gap: 8px;
    width: 96%;
    margin-bottom: 8px;
    cursor: default;
}

.warning-box::before {
    content: "⚠️";
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.2;
}


.error-box {
    background-color: #ffecec;
    border-left: 5px solid #ff6b6b;
    padding: 10px 5px 10px 5px;
    border-radius: 6px;
    color: #7a1a1a;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    text-align: left;
    align-items: center;
    gap: 8px;
    width: 96%;
    margin-bottom: 8px;
    cursor: default;
}

.error-box::before {
    content: "❌ ";
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.2;
}