/**
 * Flip Card Widget Styles
 */

.wml-flip-card {
    overflow: visible;
    width: 300px;
    /* height is handled by control or defaults to auto */
    perspective: 1000px;
}

.wml-card-content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 300ms;
    /* box-shadow and border-radius handled by controls */
    position: relative;
    display: grid;
    /* Use Grid for overlap */
}

.wml-card-front,
.wml-card-back {
    background-color: #151515;
    /* position: absolute; Removed for Grid */
    grid-area: 1 / 1;
    /* Overlap in first cell */
    width: 100%;
    height: 100%;
    /* Fill the grid cell */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* border-radius handled by controls */
    overflow: hidden;
    /* top: 0; left: 0; Removed */
    position: relative;
    /* Ensure they are in flow */
}

/* Back (Initial View) */
.wml-card-back {
    justify-content: center;
    display: flex;
    align-items: center;
    z-index: 2;
    transform: rotateY(0deg);
    /* Explicitly set */
}

.wml-card-back::before {
    position: absolute;
    content: ' ';
    display: block;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg, transparent 40%, var(--wml-flip-border-color, #ff9966) 45%, var(--wml-flip-border-color, #ff9966) 55%, transparent 60%);
    animation: wml_rotation_481 5000ms infinite linear;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center the gradient */
}

.wml-card-back-content {
    position: relative;
    /* Changed from absolute */
    width: 99%;
    height: 99%;
    /* Or min-height */
    min-height: 99%;
    /* Ensure it fills */
    background-color: #151515;
    border-radius: 5px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 1;
    box-sizing: border-box;
    margin: auto;
    /* Center in flex container */
}

/* Hover Effect */
.wml-flip-card:hover .wml-card-content {
    transform: rotateY(180deg);
}

@keyframes wml_rotation_481 {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}

/* Front (Revealed View) */
.wml-card-front {
    transform: rotateY(180deg);
    color: white;
    z-index: 1;
}

.wml-card-front-content {
    position: relative;
    /* Changed from absolute */
    width: 100%;
    min-height: 100%;
    /* Ensure it fills */
    /* padding: 10px; Removed hardcoded padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.wml-description {
    width: 100%;
    /* padding: 10px; */
    border-radius: 5px;
}

.wml-title {
    font-size: 11px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
}

.wml-card-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    /* Let clicks pass through */
}

.wml-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--wml-blob-color-1, #ffbb66);
    position: relative;
    filter: blur(15px);
    animation: wml_floating 2600ms infinite linear;
}

#wml-bottom {
    background-color: var(--wml-blob-color-2, #ff8866);
    left: 50px;
    top: 0px;
    width: 150px;
    height: 150px;
    animation-delay: -800ms;
}

#wml-right {
    background-color: var(--wml-blob-color-3, #ff2233);
    left: 160px;
    top: -80px;
    width: 30px;
    height: 30px;
    animation-delay: -1800ms;
}

@keyframes wml_floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}