/* Feed Styles for Craft Review */
:root {
    --primary-color: #8b4513;
    --secondary-color: #d2691e;
    --accent-color: #f4a460;
    --light-color: #f5f5f5;
    --dark-color: #333;
    --error-color: #cc0000;
    --success-color: #009900;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Feed Container */
.feed-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}

/* Loading Indicator */
.feed-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--light-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* End of Feed */
.end-of-feed {
    text-align: center;
    padding: 32px 0;
    color: #777;
}

.refresh-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 8px;
}

    .refresh-button:hover {
        background-color: var(--secondary-color);
    }

/* Feed Items */
.feed-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feed-item {
    background-color: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.feed-item-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.2s;
    cursor: pointer;
}

    .user-info:hover {
        opacity: 0.8;
    }

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ddd;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.username {
    font-weight: bold;
    font-size: 0.9rem;
}

.timestamp {
    font-size: 0.8rem;
    color: #777;
}

.venue-info {
    text-align: right;
    transition: opacity 0.2s;
    cursor: pointer;
}

    .venue-info:hover {
        opacity: 0.8;
    }

.venue-name {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.venue-location {
    font-size: 0.8rem;
    color: #777;
}

.feed-item-venue-photo {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    overflow: hidden;
}

    .feed-item-venue-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.feed-item-actions {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

    .feed-item-actions button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        margin-right: 16px;
    }

        .feed-item-actions button svg {
            width: 24px;
            height: 24px;
            stroke: var(--dark-color);
            transition: all 0.2s ease;
        }

        .feed-item-actions button:hover svg {
            stroke: var(--primary-color);
        }

.action-like.active svg {
    fill: var(--primary-color);
    stroke: var(--primary-color);
}

.feed-item-content {
    padding: 16px;
}

.venue-rating {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

    .venue-rating::before {
        content: "★";
        margin-right: 4px;
    }

.venue-review {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.feed-item-products {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-review {
    display: flex;
    background-color: #f9f9f9;
    border-radius: var(--radius);
    overflow: hidden;
}

.product-photo {
    width: 80px;
    height: 80px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #eee;
}

    .product-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.product-details {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.product-category {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 4px;
}

.product-rating {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

    .product-rating::before {
        content: "★";
        margin-right: 4px;
    }

.product-quick-take {
    font-size: 0.85rem;
    font-style: italic;
    color: #555;
    margin-top: 4px;
}

.feed-item-comments {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}

.comment-count {
    font-size: 0.85rem;
    color: #777;
    cursor: pointer;
}

    .comment-count:hover {
        color: var(--primary-color);
    }

/* Comment Form Styles */
.comment-form {
    margin-top: 10px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

.comment-input {
    width: 100%;
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 8px;
    font-size: 0.9rem;
    resize: none;
    height: 60px;
    margin-bottom: 8px;
    font-family: inherit;
}

    .comment-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

.comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-counter {
    font-size: 0.8rem;
    color: #777;
}

    .char-counter.near-limit {
        color: #ff6b6b;
    }

.comment-submit {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .comment-submit:hover {
        background-color: var(--secondary-color);
    }

    .comment-submit:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

/* Comments Display */
.comments-container {
    margin-top: 12px;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
}

.comment-item {
    margin-bottom: 10px;
    font-size: 0.9rem;
    padding: 6px 0;
    border-bottom: 1px solid #f9f9f9;
}

.comment-user {
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
    margin-right: 5px;
}

    .comment-user:hover {
        text-decoration: underline;
    }

.comment-text {
    color: #333;
}

.comment-timestamp {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-top: 3px;
}

/* Notification Styles */
.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: var(--radius);
    color: white;
    font-weight: bold;
    z-index: 1000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
}

    .notification.info {
        background-color: #3498db;
    }

    .notification.success {
        background-color: #2ecc71;
    }

    .notification.error {
        background-color: #e74c3c;
    }

    .notification.warning {
        background-color: #f39c12;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
}

/* Checkin Badge Style */
.checkin-badge {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    font-weight: bold;
}

.checkin-item .venue-review {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Floating Action Button */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    text-decoration: none;
}

    .fab:hover {
        transform: scale(1.05);
        background-color: var(--secondary-color);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    }

    .fab:active {
        transform: scale(0.95);
    }

    .fab svg {
        width: 24px;
        height: 24px;
    }

/* Responsive Adjustments */
@media (max-width: 600px) {
    .feed-container {
        padding: 8px;
    }

    .feed-item-venue-photo {
        height: 250px;
    }

    .feed-item-actions button {
        padding: 6px;
        margin-right: 12px;
    }

    .fab {
        bottom: 16px;
        right: 16px;
    }
}

@media (max-width: 400px) {
    .feed-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .venue-info {
        text-align: left;
    }

    .feed-item-venue-photo {
        height: 200px;
    }
}
/* Product detail pills */
.product-details-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.product-detail-pill {
    background-color: #f0f0f0;
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 0.8rem;
    color: #555;
}

.detail-label {
    font-weight: bold;
    color: #333;
}

.product-style {
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
    margin-left: 6px;
}
/* Product Review Styling */
.product-review-item {
    border-left: 3px solid var(--primary-color);
}

.product-review-badge {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.product-name-section {
    margin-bottom: 8px;
}

.product-label {
    font-weight: bold;
    color: #444;
}

.product-name-link {
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.05rem;
}

    .product-name-link:hover {
        text-decoration: underline;
    }

.product-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding: 6px 10px;
    background-color: #f8f8f8;
    border-radius: var(--radius);
}

.product-detail {
    font-size: 0.9rem;
    color: #555;
}

.detail-label {
    font-weight: bold;
    color: #333;
}

.product-description-section {
    margin: 10px 0;
    padding: 6px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.product-description {
    font-size: 0.95rem;
    font-style: italic;
    color: #555;
}

.user-review-section {
    margin: 10px 0;
}

.rating-label {
    font-weight: bold;
    color: #444;
    margin-right: 4px;
}

.venue-rating {
    align-items: center;
    display: flex;
}
/* Venue Review Styling */
.venue-review-item {
    border-left: 3px solid #2980b9; /* Different color than product reviews */
}

.venue-review-badge {
    display: inline-block;
    background-color: #2980b9;
    color: white;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.venue-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding: 6px 10px;
    background-color: #f0f7fb; /* Light blue background */
    border-radius: var(--radius);
}

.venue-detail {
    font-size: 0.9rem;
    color: #555;
}

.venue-label {
    font-weight: bold;
    color: #444;
}

.venue-review-text {
    font-size: 0.95rem;
    color: #333;
}

.venue-link {
    color: #2980b9;
    text-decoration: none;
}

    .venue-link:hover {
        text-decoration: underline;
    }

/* Common styling for both review types */
.user-review-section {
    margin: 10px 0;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.rating-label {
    font-weight: bold;
    color: #444;
    margin-right: 4px;
}

.venue-rating {
    align-items: center;
    display: flex;
}

/* Make sure detail labels are consistent */
.detail-label {
    font-weight: bold;
    color: #333;
}
/* Check-in Styling */
.checkin-item {
    border-left: 3px solid #27ae60; /* Green to indicate check-in */
}

.checkin-badge-large {
    display: inline-block;
    background-color: #27ae60;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: bold;
}

.checkin-details {
    background-color: #f0fbf6; /* Light green background */
}

.checkin-message-section {
    margin: 12px 0;
    padding: 8px 0;
    border-top: 1px solid #e8e8e8;
}

.checkin-message-text {
    font-size: 1rem;
    color: #333;
}

.checkin-timestamp-section {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #777;
    font-size: 0.85rem;
}

.checkin-timestamp-icon {
    display: flex;
    align-items: center;
    color: #27ae60;
}

.checkin-timestamp-text {
    font-style: italic;
}
/* Check-in Styling */
.checkin-item {
    border-left: 3px solid #27ae60; /* Green to indicate check-in */
}

.checkin-badge-large {
    display: inline-block;
    background-color: #27ae60;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px; /* Increased spacing */
    font-weight: bold;
}

.checkin-details {
    background-color: #f0fbf6; /* Light green background */
    margin-bottom: 12px; /* Add spacing below details */
}

.checkin-message-section {
    display: block; /* Ensure block display */
    margin: 12px 0;
    padding: 8px 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.venue-label {
    display: block; /* Make label a block element */
    font-weight: bold;
    color: #444;
    margin-bottom: 4px;
}

.checkin-message-text {
    display: block; /* Ensure block display */
    font-size: 1rem;
    color: #333;
    margin-top: 4px;
    margin-bottom: 4px;
}

.checkin-timestamp-section {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #777;
    font-size: 0.85rem;
}

.checkin-timestamp-icon {
    display: flex;
    align-items: center;
    color: #27ae60;
}

.checkin-timestamp-text {
    font-style: italic;
}
/* Venue Details Row */
.checkin-details {
    background-color: #f0fbf6; /* Light green background */
    padding: 10px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.venue-detail {
    display: block; /* Ensure each detail is on its own line */
    margin-bottom: 4px;
    font-size: 0.9rem;
}
/* Add these styles to fix the checkin formatting */
.checkin-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.checkin-badge-section {
    margin-bottom: 8px;
}

.checkin-message-section {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: var(--radius);
    margin: 8px 0;
}

.checkin-timestamp-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
/* Tour Post Styling */
.tour-post-item {
    border-left: 3px solid #8b4513; /* Primary color for tours */
}

.tour-badge {
    display: inline-block;
    background-color: #8b4513;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: bold;
}

.tour-details {
    background-color: #f9f6f2; /* Light primary color background */
    padding: 10px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tour-start-location,
.tour-stops-count {
    font-size: 0.9rem;
    color: #333;
}

.tour-stops-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.tour-stop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: #fff;
    border-radius: var(--radius);
    border: 1px solid #eee;
}

.tour-stop-number {
    background-color: #8b4513;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.tour-stop-details {
    flex: 1;
}

.tour-stop-name {
    font-weight: bold;
    font-size: 0.95rem;
    color: #333;
}

.tour-stop-location {
    font-size: 0.85rem;
    color: #666;
}
/* Premium Post Styling */
.premium-post-item {
    border-left: 3px solid #e67e22; /* Orange to indicate premium content */
    position: relative;
    overflow: visible;
}

   .premium-post-badge {
    display: inline-block;
    background-color: #e67e22;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: bold;
    position: relative;
}

    .premium-post-badge.featured {
        background-color: #f39c12;
    }

        .premium-post-badge.featured::after {
            content: "★";
            margin-left: 5px;
        }

.premium-post-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    line-height: 1.3;
}

.premium-post-event-date {
    background-color: #f9f2e9;
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #555;
}

.event-label {
    font-weight: bold;
    color: #333;
    margin-right: 4px;
}

.premium-post-content {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 16px;
    white-space: pre-line; /* Preserve line breaks in the content */
}

.premium-post-type-badge {
    display: inline-block;
    background-color: #f5f5f5;
    color: #555;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 8px;
}

.premium-post-view-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #777;
    margin-top: 8px;
}

/* Special styles for featured posts */
.premium-post-item.featured {
    border-left-color: #f39c12;
    box-shadow: 0 2px 12px rgba(243, 156, 18, 0.15);
}

    .premium-post-item.featured::after {
        content: "Featured";
        background-color: rgba(243, 156, 18, 0.8);
    }

/* Add these style overrides to make premium posts stand out */
.premium-post-item .feed-item-header {
    background-color: #fff9f1;
}

/* Add a subtle pattern to premium posts */
.premium-post-item .feed-item-content {
    background-image: linear-gradient(45deg, rgba(230, 126, 34, 0.03) 25%, transparent 25%, transparent 50%, rgba(230, 126, 34, 0.03) 50%, rgba(230, 126, 34, 0.03) 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

/* Styles for different post types */
.premium-post-item[data-post-type="event"] .premium-post-type-badge {
    background-color: #3498db;
    color: white;
}

.premium-post-item[data-post-type="promotion"] .premium-post-type-badge {
    background-color: #e74c3c;
    color: white;
}

.premium-post-item[data-post-type="announcement"] .premium-post-type-badge {
    background-color: #2ecc71;
    color: white;
}

.premium-post-item[data-post-type="release"] .premium-post-type-badge {
    background-color: #9b59b6;
    color: white;
}
/* Style for the sponsored badge in the venue info */
.sponsored-badge {
    display: inline-block;
    background-color: #e67e22;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 4px;
}

/* Adjust for sponsored badge placement */
.premium-post-item .venue-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
/* Producer Post Styling */
.producer-post-item {
    border-left: 3px solid #8b4513; /* Primary color for producer posts */
    position: relative;
}

.producer-post-badge {
    display: inline-block;
    background-color: #8b4513;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: bold;
}

    .producer-post-badge.featured {
        background-color: #d2691e;
    }

        .producer-post-badge.featured::after {
            content: "★";
            margin-left: 5px;
        }

.producer-post-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    line-height: 1.3;
}

.producer-post-event-date {
    background-color: #f9f6f2;
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #555;
}

.event-label {
    font-weight: bold;
    color: #333;
    margin-right: 4px;
}

.producer-post-content {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 16px;
    white-space: pre-line; /* Preserve line breaks in the content */
}

.producer-post-link {
    margin-bottom: 12px;
}

    .producer-post-link a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #8b4513;
        text-decoration: none;
        font-weight: 500;
        padding: 6px 12px;
        background-color: rgba(139, 69, 19, 0.1);
        border-radius: var(--radius);
        transition: background-color 0.2s;
    }

        .producer-post-link a:hover {
            background-color: rgba(139, 69, 19, 0.2);
        }

.producer-post-type-badge {
    display: inline-block;
    background-color: #f5f5f5;
    color: #555;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 8px;
}

.producer-post-view-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #777;
    margin-top: 8px;
}

/* Badge for producer in venue info */
.producer-badge {
    display: inline-block;
    background-color: #8b4513;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 4px;
}

/* Adjust for producer badge placement */
.producer-post-item .venue-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Make producer posts stand out */
.producer-post-item .feed-item-header {
    background-color: #faf8f5;
}

/* Styles for different post types */
.producer-post-item[data-post-type="event"] .producer-post-type-badge {
    background-color: #3498db;
    color: white;
}

.producer-post-item[data-post-type="promotion"] .producer-post-type-badge {
    background-color: #e74c3c;
    color: white;
}

.producer-post-item[data-post-type="announcement"] .producer-post-type-badge {
    background-color: #2ecc71;
    color: white;
}

.producer-post-item[data-post-type="release"] .producer-post-type-badge {
    background-color: #9b59b6;
    color: white;
}
.premium-post-link {
    margin-top: 12px;
}

    .premium-post-link a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #e67e22;
        text-decoration: none;
        font-weight: 500;
        padding: 6px 12px;
        background-color: rgba(230, 126, 34, 0.1);
        border-radius: var(--radius);
        transition: background-color 0.2s;
    }

        .premium-post-link a:hover {
            background-color: rgba(230, 126, 34, 0.2);
        }
/* Premium Check-in Styling */
.premium-checkin-item {
    border-left: 3px solid #9b59b6; /* Purple to indicate premium */
}

.premium-checkin-badge-large {
    display: inline-block;
    background-color: #9b59b6;
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: bold;
}

.premium-checkin-details {
    background-color: #f5f0fb; /* Light purple background */
    padding: 10px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.premium-checkin-container {
    position: relative;
}

/* Premium partner badge */
.premium-partner-badge {
    display: inline-block;
    background-color: #9b59b6;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 4px;
}

/* Adjust for premium badge placement */
.premium-checkin-item .venue-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Premium timestamp icon color */
.checkin-timestamp-icon.premium {
    color: #9b59b6;
}

/* Add subtle pattern to premium checkins */
.premium-checkin-item .feed-item-content {
    background-image: linear-gradient(45deg, rgba(155, 89, 182, 0.03) 25%, transparent 25%, transparent 50%, rgba(155, 89, 182, 0.03) 50%, rgba(155, 89, 182, 0.03) 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

/* Premium checkin header background */
.premium-checkin-item .feed-item-header {
    background-color: #faf7fc;
}

/* Hover effect for premium venue info */
.premium-checkin-item .venue-info:hover {
    opacity: 0.8;
}

/* Media queries for responsive design */
@media (max-width: 600px) {
    .premium-partner-badge {
        font-size: 0.65rem;
        padding: 2px 4px;
    }
}
/* Shared post indicator */
.shared-post-indicator {
    padding: 12px 16px;
    margin-bottom: -24px;
    position: relative;
    z-index: 1;
}

.shared-post-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f0f8ff;
    color: #2980b9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .shared-post-badge svg {
        width: 16px;
        height: 16px;
    }

/* Divider after shared post */
.shared-post-divider {
    text-align: center;
    padding: 20px 0;
    margin: 20px 0;
    position: relative;
}

    .shared-post-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background-color: #e0e0e0;
    }

    .shared-post-divider span {
        background-color: white;
        padding: 0 16px;
        position: relative;
        color: #666;
        font-size: 0.9rem;
        font-weight: 500;
    }

/* Make shared post stand out slightly */
.shared-post-indicator + .feed-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e3f2fd;
}
}