.editor-container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 20px;
    overflow: hidden; /* Ensures rounded corners on children */
}

.editor-content {
    min-height: 200px;
    padding: 1rem;
    outline: none;
    overflow-y: auto;
    color: #343a40;
    line-height: 1.6;
}

.toolbar {
    padding: 0.75rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #e9ecef;
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 0.5rem; /* Space between buttons */
}

    .toolbar button {
        background-color: #0d6efd; /* Bootstrap primary blue */
        color: white;
        border: none;
        border-radius: 0.3rem;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
        display: flex; /* For icon and text alignment */
        align-items: center;
        justify-content: center;
    }

        .toolbar button:hover {
            background-color: #0b5ed7; /* Darker blue on hover */
            transform: translateY(-1px);
        }

        .toolbar button:active {
            background-color: #0a58ca; /* Even darker on active */
            transform: translateY(0);
        }

        .toolbar button i {
            margin-right: 0.25rem;
        }