/**
 * Like Widget Styles
 *
 * @package Comments_Everywhere
 */

.ce-like-wrapper {
    display: inline-block;
}

.ce-like-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
}

.ce-like-button:hover {
    /* Scale is controlled via Elementor widget options */
}

.ce-like-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ce-like-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Icon wrapper – fixed square, size driven by CSS custom properties */
.ce-like-icon {
    --ce-icon-size: 24px;
    --ce-icon-ratio: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:  calc(var(--ce-icon-size) * var(--ce-icon-ratio));
    height: calc(var(--ce-icon-size) * var(--ce-icon-ratio));
    transition: all 0.3s ease;
    /* Needed for framed view – set to transparent so it never shows uninvited */
    border: 2px solid transparent;
    box-sizing: border-box;
}

.ce-like-icon i,
.ce-like-icon svg {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* SVG icon color – let Elementor color controls work via currentColor.
   The !important overrides Elementor's own icon SVG defaults. */
.ce-like-icon svg {
    fill: currentColor !important;
}

.ce-like-icon svg path,
.ce-like-icon svg circle,
.ce-like-icon svg rect,
.ce-like-icon svg polygon,
.ce-like-icon svg ellipse {
    fill: currentColor !important;
}

/* Elementor wraps SVG icons in an extra <span> – normalize it */
.ce-like-icon > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* ── View: Gestapelt (stacked) ───────────────────────────────────────── */
.ce-like-icon--stacked {
    background-color: #e0e0e0; /* Fallback; overridden by Elementor color control */
}

/* ── View: Umrandet (framed) ─────────────────────────────────────────── */
.ce-like-icon--framed {
    border-color: currentColor; /* Fallback; overridden by Elementor color control */
}

/* ── Shape: Kreis ────────────────────────────────────────────────────── */
.ce-like-icon--circle {
    border-radius: 50%;
}

/* ── Shape: Quadrat – no extra rule needed (default = 0 radius) ──────── */

/* Hide active icon by default */
.ce-like-button:not(.is-liked) .ce-like-icon-active {
    display: none;
}

/* Hide normal icon when liked */
.ce-like-button.is-liked .ce-like-icon-normal {
    display: none;
}

/* Show active icon when liked */
.ce-like-button.is-liked .ce-like-icon-active {
    display: inline-flex;
}

/* Like animation */
.ce-like-icon--animated {
    animation: ce-like-bounce 0.6s ease-out;
}

@keyframes ce-like-bounce {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Loading state */
.ce-like-button.is-loading {
    pointer-events: none;
}

.ce-like-button.is-loading .ce-like-icon {
    opacity: 0.5;
    animation: ce-like-pulse 1.5s ease-in-out infinite;
}

@keyframes ce-like-pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Count */
.ce-like-count {
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Elementor editor fixes */
.elementor-editor-active .ce-like-button {
    pointer-events: none;
}

/* ── Liked Posts List Widget ───────────────────────────────────────────────── */

.ce-liked-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ce-liked-posts-item {
    margin: 0;
}

.ce-liked-posts-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ce-liked-posts-thumbnail {
    flex-shrink: 0;
}

.ce-liked-posts-thumbnail img {
    display: block;
}

.ce-liked-posts-content {
    flex: 1;
    min-width: 0;
}

.ce-liked-posts-title a {
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.ce-liked-posts-title a:hover {
    text-decoration: underline;
}

.ce-liked-posts-meta {
    margin-top: 4px;
    font-size: 0.85em;
}

.ce-liked-posts-excerpt {
    margin-top: 6px;
    font-size: 0.9em;
}

.ce-liked-posts-empty {
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* padding is intentionally 0 – controlled via Elementor padding controls */
}

/* RTL Support */
[dir="rtl"] .ce-like-button {
    flex-direction: row-reverse;
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .ce-like-button {
        border: 2px solid currentColor;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .ce-like-button,
    .ce-like-icon,
    .ce-like-count {
        transition: none;
    }

    .ce-like-icon--animated {
        animation: none;
    }

    .ce-like-button:hover {
        transform: none;
    }
}