/* feed.css */

#feedListContainer {
    background-color: #2b2b2b; /* Dark background for the feed container */
    margin-top: 10px;
    display: flex; /* Enable flex layout */
    flex-direction: column; /* Stack children vertically */
}

#updatingIndicatorContainer {
    background-color: #333; /* Slightly lighter background for indicator */
    color: #eee;
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 10px; /* Space between indicator and feed items */
    text-align: center;
    font-size: 0.9em;
}

#updatingIndicatorContainer.UpdatingIndicator {
    /* Add any specific styling if needed, class name added via setClass */
}


#feedItemsContainer {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    gap: 10px; /* Spacing between feed cards */
    padding: 10px;
}

.feed-card {
    position: relative; /* For positioning icons */
    background-color: #444; /* Card background color */
    color: white;
    padding: 15px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover effect */
    overflow: hidden; /* Ensure content stays within rounded borders */
}

.feed-card:hover {
    background-color: #555; /* Slightly lighter on hover */
}

.feed-card-content {
    margin-bottom: 20px; /* Space for the date at the bottom */
    word-wrap: break-word; /* Prevent long words from breaking layout */
}

.feed-delete-icon, .feed-edit-icon {
    position: absolute;
    top: 5px;
    right: 5px; /* Default right position, adjusted for edit icon */
    color: #aaa;
    font-size: 12px; /* Reduced font size for pencil icon */
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5); /* Dark background for better visibility */
    border-radius: 50%; /* Make it round */
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0; /* Vertically center the icon */
}

.feed-edit-icon {
    right: 30px; /* Position edit icon to the left of delete icon */
}


.feed-card:hover .feed-delete-icon,
.feed-card:hover .feed-edit-icon {
    opacity: 1; /* Show icons on card hover */
}

.feed-delete-icon:hover {
    color: white; /* Highlight on icon hover */
    background-color: rgba(255, 0, 0, 0.7); /* Reddish on delete icon hover */
}

.feed-edit-icon:hover {
    color: white; /* Highlight on icon hover */
    background-color: rgba(0, 128, 255, 0.7); /* Blueish on edit icon hover */
}


.feed-date {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.8em;
    color: #aaa; /* Light grey for date */
}

.neo-orange-text {
	color: #ff914d; /* Orange color for "Neo" text */
}

.feed-card-button {
    background-color: #ff914d; /* Orange background */
    color: #000; /* Black text */
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
}

.feed-card-button:hover {
    background-color: #f07026; /* Darker orange on hover */
}

.feed-card-button.signup-button {
	/* Add specific styles for signup button if needed */
}

.feed-card-button.login-button {
	/* Add specific styles for login button if needed */
}

.feed-card-name-input {
	background-color: #555; /* Slightly lighter than card background */
	color: white;
	border: none;
	padding: 8px;
	border-radius: 5px;
	font-size: 1em; /* Inherit or adjust as needed */
	width: calc(100% - 16px); /* Adjust width to account for padding */
	box-sizing: border-box; /* Make padding part of width */
	margin-bottom: 10px; /* Add a little space below the input */
}

.feed-card-name-input:focus {
	outline: none; /* Remove default focus outline */
	box-shadow: 0 0 0 2px rgba(0, 128, 255, 0.5); /* Add a subtle focus indicator */
	background-color: #666; /* Even lighter on focus */
}