/*
 * Vikinger Favorites System Stylesheet (Light Theme)
 * Version: 4.0
 */

/* --- Favorite Button Styles --- */
.vikinger-favorite-button {
    background: #f0f2f5; 
    color: #333; 
    border: 1px solid #dcdfe6; 
    padding: 6px 12px;
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 12px;
    font-weight: 600; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    transition: all 0.3s ease; 
    text-decoration: none !important; 
    line-height: 1;
    white-space: nowrap;
    width: auto;
    min-width: auto;
    flex-shrink: 0;
}

.vikinger-favorite-button:hover { 
    background: #e4e6eb; 
}

/* Style for when the button is clicked and waiting for server response */
.vikinger-favorite-button.processing { 
    opacity: 0.6; 
    cursor: wait; 
}

/* Style for a post that is favorited */
.vikinger-favorite-button.favorited { 
    background: #23d2e2; 
    color: #fff; 
    border-color: #23d2e2; 
}

.vikinger-favorite-button.favorited:hover { 
    background: #1eb9c8; 
}

/* Star icon styling */
.vikinger-favorite-button .fa-star { 
    font-size: 12px; 
}

/* Default (unfavorited) star color */
.vikinger-favorite-button .far.fa-star {
    color: #888c9b;
}

/* Favorited star color */
.vikinger-favorite-button.favorited .fas.fa-star { 
    color: #fff; 
}

/* Container for actions at the bottom of a post card */
.post-preview-actions { 
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 32px; /* Ensures consistent height */
}

/* Container for post buttons (status and favorite) */
.post-buttons-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
    min-width: auto;
    flex-shrink: 0; /* Prevents container from shrinking */
}

/* Post status indicator styles */
.vikinger-post-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: auto;
    min-width: auto;
    flex-shrink: 0;
}

.vikinger-post-status.active {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.vikinger-post-status.inactive {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.vikinger-post-status .fa-circle {
    font-size: 8px;
}

.vikinger-post-status.active .fa-circle {
    color: #28a745;
}

.vikinger-post-status.inactive .fa-circle {
    color: #dc3545;
}

/* This rule hides the "Read More..." link text, making space for the button. */
/* You can remove this if you want the "Read More" link to be visible. */
.post-preview-link {
    color: transparent !important;
}

/* --- Badge Animations & Styles --- */
@keyframes shine {
  0% { transform: translateX(-100%) skewX(-25deg); }
  100% { transform: translateX(100%) skewX(-25deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.vikinger-post-badge {
    position: absolute; 
    z-index: 2; 
    color: #fff; 
    padding: 6px 12px;
    border-radius: 8px; 
    font-size: 13px; 
    font-weight: 700; 
    line-height: 1; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    text-transform: uppercase; 
    overflow: hidden;
    transition: transform 0.3s ease;
}

.vikinger-post-badge:hover { 
    animation: wiggle 0.4s ease-in-out; 
}

.vikinger-post-badge::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0;
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shine 3s infinite;
}

/* --- Favorite Section Shortcode Styles (LIGHT THEME) --- */
.vikinger-favorites-container {
    background-color: #f7f8fa; 
    border: 1px solid #e0e4e8;
    border-radius: 12px; 
    padding: 24px; 
    margin: 30px 0;
}

.vikinger-favorites-header {
    padding-bottom: 16px; 
    margin-bottom: 24px; 
    border-bottom: 1px solid #e0e4e8;
}

.vikinger-favorites-container .section-title {
    color: #1a1a1a; 
    font-size: 1.5rem; 
    font-weight: 700; 
    margin: 0;
}

.vikinger-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* More responsive grid */
    gap: 24px;
}

.vikinger-favorites-grid .post-preview {
    background-color: #ffffff; 
    border-radius: 12px; 
    overflow: hidden;
    display: flex; 
    flex-direction: column; 
    border: 1px solid #e7eaf3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vikinger-favorites-grid .post-preview:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.vikinger-favorites-grid .post-preview-image { 
    position: relative; 
    height: 180px; 
    background-size: cover; 
    background-position: center; 
}

.vikinger-favorites-grid .post-preview-info { 
    padding: 16px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.vikinger-favorites-grid .post-preview-info-top { 
    flex-grow: 1; 
}

.vikinger-favorites-grid .post-preview-timestamp { 
    font-size: 0.75rem; 
    color: #888c9b; 
    margin-bottom: 8px; 
}

.vikinger-favorites-grid .post-preview-title a { 
    font-size: 1.125rem; 
    font-weight: 600; 
    color: #1e2125; 
    text-decoration: none; 
    line-height: 1.3; 
}

.vikinger-favorites-grid .post-preview-title a:hover { 
    color: #23d2e2; 
}

.vikinger-favorites-grid .post-preview-text { 
    font-size: 0.875rem; 
    color: #5d616f; 
    line-height: 1.5; 
    margin-top: 12px; 
}

/* Specific button style for favorites grid */
.vikinger-favorites-grid .vikinger-favorite-button {
    padding: 5px 10px;
    font-size: 11px;
}

.vikinger-favorites-grid .vikinger-post-status {
    padding: 5px 8px;
    font-size: 10px;
}

.favorites-empty-message, 
.vikinger-favorites-container > p {
    color: #5d616f; 
    text-align: center; 
    padding: 40px; 
    background-color: #fff;
    border: 2px dashed #e0e4e8; 
    border-radius: 8px; 
    grid-column: 1 / -1;
}

/* --- Responsive Design --- */
@media (max-width: 768px) { 
    .vikinger-favorites-grid { 
        grid-template-columns: 1fr;
    } 
    .vikinger-favorites-container { 
        padding: 16px; 
    } 
    .vikinger-favorites-container .section-title { 
        font-size: 1.25rem; 
    }
    
    /* Keep buttons in same row on mobile but allow wrap if needed */
    .post-buttons-container {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .vikinger-post-status,
    .vikinger-favorite-button {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .vikinger-post-status {
        gap: 3px;
    }
    
    .vikinger-favorite-button {
        gap: 4px;
    }
}