/* =============================================
   DESAIN FLIP BOX[B] - Elementor Widget CSS
   ============================================= */

.desainwidget-flip-box {
    --desain-flip-duration: 600ms;
    position: relative;
    width: 100%;
    height: 340px;
}

.desainwidget-flip-box * {
    box-sizing: border-box;
}

.desainwidget-flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.desainwidget-flip-box.is-3d .desainwidget-flip-box-inner {
    perspective: 1400px;
}

/* ==================== SIDES (shared) ==================== */
.desainwidget-flip-box-side {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f4f4f4;
    transition: transform var(--desain-flip-duration) cubic-bezier(0.65, 0, 0.35, 1);
}

.desainwidget-flip-box-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: transparent;
}

.desainwidget-flip-box-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.desainwidget-flip-box-icon,
.desainwidget-flip-box-image {
    display: inline-block;
    line-height: 1;
}

.desainwidget-flip-box-title {
    margin: 0;
    line-height: 1.3;
}

.desainwidget-flip-box-text {
    margin: 0;
    line-height: 1.6;
}

.desainwidget-flip-box-button,
.desainwidget-flip-box-flip-trigger {
    display: inline-block;
    margin-top: 16px;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid currentColor;
    background: transparent;
    font: inherit;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==================== FLIP FAMILY (3D rotation) ==================== */
.desainwidget-flip-box-anim-flip-left .desainwidget-flip-box-side,
.desainwidget-flip-box-anim-flip-right .desainwidget-flip-box-side,
.desainwidget-flip-box-anim-flip-up .desainwidget-flip-box-side,
.desainwidget-flip-box-anim-flip-down .desainwidget-flip-box-side {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.desainwidget-flip-box-anim-flip-left .desainwidget-flip-box-back {
    transform: rotateY(180deg);
}

.desainwidget-flip-box-anim-flip-left.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-left:hover .desainwidget-flip-box-front {
    transform: rotateY(-180deg);
}

.desainwidget-flip-box-anim-flip-left.is-flipped .desainwidget-flip-box-back,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-left:hover .desainwidget-flip-box-back {
    transform: rotateY(0deg);
}

.desainwidget-flip-box-anim-flip-right .desainwidget-flip-box-back {
    transform: rotateY(-180deg);
}

.desainwidget-flip-box-anim-flip-right.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-right:hover .desainwidget-flip-box-front {
    transform: rotateY(180deg);
}

.desainwidget-flip-box-anim-flip-right.is-flipped .desainwidget-flip-box-back,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-right:hover .desainwidget-flip-box-back {
    transform: rotateY(0deg);
}

.desainwidget-flip-box-anim-flip-up .desainwidget-flip-box-back {
    transform: rotateX(-180deg);
}

.desainwidget-flip-box-anim-flip-up.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-up:hover .desainwidget-flip-box-front {
    transform: rotateX(180deg);
}

.desainwidget-flip-box-anim-flip-up.is-flipped .desainwidget-flip-box-back,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-up:hover .desainwidget-flip-box-back {
    transform: rotateX(0deg);
}

.desainwidget-flip-box-anim-flip-down .desainwidget-flip-box-back {
    transform: rotateX(180deg);
}

.desainwidget-flip-box-anim-flip-down.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-down:hover .desainwidget-flip-box-front {
    transform: rotateX(-180deg);
}

.desainwidget-flip-box-anim-flip-down.is-flipped .desainwidget-flip-box-back,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-flip-down:hover .desainwidget-flip-box-back {
    transform: rotateX(0deg);
}

/* Non-3D flip: skip the perspective rotation feel and simply cross
   fade + flatten the rotation amount, still using the same rotateX/Y
   transforms so the direction reads the same way without depth. */
.desainwidget-flip-box:not(.is-3d) .desainwidget-flip-box-side {
    transition: transform var(--desain-flip-duration) cubic-bezier(0.65, 0, 0.35, 1), opacity var(--desain-flip-duration) ease;
}

/* ==================== SLIDE FAMILY (flat reveal) ==================== */
.desainwidget-flip-box-anim-slide-left .desainwidget-flip-box-front,
.desainwidget-flip-box-anim-slide-right .desainwidget-flip-box-front,
.desainwidget-flip-box-anim-slide-up .desainwidget-flip-box-front,
.desainwidget-flip-box-anim-slide-down .desainwidget-flip-box-front {
    z-index: 2;
}

.desainwidget-flip-box-anim-slide-left .desainwidget-flip-box-back,
.desainwidget-flip-box-anim-slide-right .desainwidget-flip-box-back,
.desainwidget-flip-box-anim-slide-up .desainwidget-flip-box-back,
.desainwidget-flip-box-anim-slide-down .desainwidget-flip-box-back {
    z-index: 1;
    transform: none;
}

.desainwidget-flip-box-anim-slide-left.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-slide-left:hover .desainwidget-flip-box-front {
    transform: translateX(-100%);
}

.desainwidget-flip-box-anim-slide-right.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-slide-right:hover .desainwidget-flip-box-front {
    transform: translateX(100%);
}

.desainwidget-flip-box-anim-slide-up.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-slide-up:hover .desainwidget-flip-box-front {
    transform: translateY(-100%);
}

.desainwidget-flip-box-anim-slide-down.is-flipped .desainwidget-flip-box-front,
.desainwidget-flip-box-trigger-hover.desainwidget-flip-box-anim-slide-down:hover .desainwidget-flip-box-front {
    transform: translateY(100%);
}

/* ==================== TRIGGER BUTTON (front side) ==================== */
.desainwidget-flip-box-trigger-button .desainwidget-flip-box-back {
    pointer-events: none;
}

.desainwidget-flip-box-trigger-button.is-flipped .desainwidget-flip-box-back {
    pointer-events: auto;
}

.desainwidget-flip-box-flip-trigger {
    position: relative;
    z-index: 3;
}