.flip-container {
    perspective: 1000px;
    display: inline-block;
    cursor: pointer;
    margin-right: 32px;
    margin-bottom: 24px;
    max-width: 100vw;
    overflow: visible;
    z-index: 1;
}

.flipper {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 5 / 3; /* Maintains 500x300 ratio */
    transition: transform 0.6s;
    transform-style: preserve-3d;
    margin: 0 auto;
    overflow: visible;
}

/*
.flipper img {
    width: 500px; // Match container width 
    height: 300px; // Match container height 
    object-fit: cover; // Fill area, crop if needed 
    display: block;
    background: #eee;
    border-radius: 8px;
}
*/

.flip-container.flipped-container {
    position: relative;
}

.flip-container img {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    border-radius: 8px; /* optional for rounded corners */
}

.flipper.flipped {
    transform: rotateY(180deg);
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
}

.back {
    transform: rotateY(180deg);
    background: #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Optional: match card rounding */
    z-index: 1000;
    overflow: visible;
}

.flip-text {
    text-align: center;
    background: #ddddddff; /* Match the .back background */
    padding: 1rem; /* Optional: add padding for better appearance */
    border-radius: 8px; /* Optional: match card rounding */
    overflow: visible;
}

    .flip-text, .flip-text * {
        background: #ddddddff !important;
    }

.position-relative {
    position: relative;
}

.keyword-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 0.5rem 1rem;
    font-weight: normal;
    font-size: 1.0rem;
    z-index: 2;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-sizing: border-box;
}

.keyword-overlay-text {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    white-space: pre-line;
}

.flip-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    padding: 0.7em 1.5em;
    font-size: 1.2em;
    pointer-events: none;
    z-index: 10;
    text-align: center;
    animation: fadeIn 0.5s;
}

    .flip-overlay-text img {
        opacity: 0.7; /* 0 is fully transparent, 1 is fully opaque */
        box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* horizontal, vertical, blur, color */
        border-radius: 1em; /* optional: matches card rounding */
    }

    @keyframes wiggle {
        0% { transform: rotate(0deg); }
        10% { transform: rotate(-8deg); }
        20% { transform: rotate(8deg); }
        30% { transform: rotate(-6deg); }
        40% { transform: rotate(6deg); }
        50% { transform: rotate(-4deg); }
        60% { transform: rotate(4deg); }
        70% { transform: rotate(-2deg); }
        80% { transform: rotate(2deg); }
        90% { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
    }

    .flip-overlay-text img.wiggle {
        animation: wiggle 1.5s ease;
    }

    .rating-heart-corner {
        position: absolute;
        right: 5px;
        bottom: 1px;
        z-index: 2;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}