/*
 * Like System CSS
 * Styles for the like button and icon.
 */

.yct-like-button {
    display: flex;
	flex-direction: column;
    align-items: center;
	align-self: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: #888;
    user-select: none;
    transition: transform 0.2s ease-in-out;
}

.yct-like-button:hover {
    color: #e74c3c;
}

.yct-like-button.yct-loading {
    opacity: 0.6;
    pointer-events: none;
}

.yct-like-button[data-liked="true"] {
    color: #e74c3c;
}

/* Default SVG Heart Icon */
.yct-heart-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>') no-repeat center center;
    background-size: contain;
    transition: transform 0.2s ease-in-out;
}
.yct-like-button[data-liked="true"] .yct-heart-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e74c3c" stroke="%23e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>') no-repeat center center;
    background-size: contain;
    animation: heart-pop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Custom Image Icon */
.yct-image-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease-in-out;
}
.yct-like-button[data-liked="true"] .yct-image-icon {
    animation: heart-pop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Custom Font Icon */
.yct-font-icon {
    font-size: 20px; /* Adjust size as needed */
    line-height: 1;
}
.yct-font-icon:before {
    /* Styles are now handled by PHP and injected via data attributes */
    content: attr(data-icon-content);
    font-family: attr(data-icon-class) !important;
}

.yct-like-button[data-liked="true"] .yct-font-icon {
    animation: heart-pop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* User Liked Posts List Styles */
.yct-user-liked-posts-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.yct-liked-post-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}