/**
 * Flip Icon Box - Simple & Working
 */

.flip-icon-box {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

a.flip-icon-box:hover {
    text-decoration: none;
}

/* Icon Container */
.flip-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Front icon - visible by default */
.flip-icon-front {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Back icon - hidden by default, positioned on top of front */
.flip-icon-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: rotateY(90deg);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* HOVER: Hide front, show back */
.flip-icon-box:hover .flip-icon-wrapper.has-flip .flip-icon-front {
    opacity: 0;
    transform: rotateY(-90deg);
}

.flip-icon-box:hover .flip-icon-wrapper.has-flip .flip-icon-back {
    opacity: 1;
    transform: rotateY(0deg);
}

/* Images */
.flip-icon-wrapper img.flip-icon-img {
    display: block;
    object-fit: contain;
}

.flip-icon-wrapper i {
    line-height: 1;
}

/* Title & Description */
.flip-icon-box-title {
    margin: 0;
    padding: 0;
}

.flip-icon-box-description {
    margin: 0;
    padding: 0;
}

/* No flip mode */
.flip-icon-wrapper:not(.has-flip) .flip-icon-back {
    display: none !important;
}