/* Word Counter specific styles */

/* Example: Add a gradient background to the body */
body {
    background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 50%, #fce7f3 100%); /* Light Indigo -> Light Purple -> Light Pink */
}

/* Style the result display area */
.result-display-area {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    backdrop-filter: blur(5px); /* Add a subtle blur effect */
    border: 1px solid rgba(209, 213, 219, 0.5); /* Light border */
    padding: 1.5rem; /* 24px */
}

/* Style for the gradient text title */
.gradient-text {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem; /* Add slight space below for visual balance */
}

/* Specific overrides or additions for the word counter */
#textInput {
    font-size: 1rem;
    line-height: 1.6;
}

#wordCount,
#charCount,
#lineCount {
    /* Add specific styles if needed, e.g., transitions */
    transition: color 0.3s ease;
}

/* Style for the clear button (if using .btn-secondary) */
.btn-secondary {
    background-color: #e5e7eb; /* Gray-200 */
    color: #374151; /* Gray-700 */
    border: 1px solid #d1d5db; /* Gray-300 */
}

.btn-secondary:hover {
    background-color: #d1d5db; /* Gray-300 */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .result-display-area {
        padding: 1rem; /* Smaller padding */
        flex-direction: column; /* Stack results vertically */
        align-items: stretch; /* Stretch items */
    }

    .result-display-area > div {
        padding: 0.5rem 0;
        border-bottom: 1px solid #e5e7eb; /* Add separators on mobile */
    }
    .result-display-area > div:last-child {
        border-bottom: none;
    }

    #wordCount, #charCount, #lineCount {
        font-size: 2.25rem; /* Slightly smaller font size for counts */
    }
}