/* ============================================================
   Elementor Flip Card v6 – flip-card.css
   ============================================================ */

.efc-outer {
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    perspective: 1000px;
}
.efc-outer.efc-trig-click { cursor: pointer; }

.efc-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 600ms ease;
}

.efc-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

/* Child content fills the face */
.efc-face > *,
.efc-face .elementor,
.efc-face .e-con {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

.efc-front { z-index: 2; transform: rotateY(0deg); }
.efc-back  { transform: rotateY(180deg); }

.efc-dir-vertical .efc-front { transform: rotateX(0deg); }
.efc-dir-vertical .efc-back  { transform: rotateX(180deg); }

/* Hover trigger */
.efc-dir-horizontal.efc-trig-hover:hover        .efc-inner,
.efc-dir-horizontal.efc-trig-hover:focus-within  .efc-inner { transform: rotateY(180deg); }
.efc-dir-vertical.efc-trig-hover:hover           .efc-inner,
.efc-dir-vertical.efc-trig-hover:focus-within    .efc-inner { transform: rotateX(180deg); }

/* Click trigger (JS adds .efc-flipped) */
.efc-dir-horizontal.efc-trig-click.efc-flipped .efc-inner { transform: rotateY(180deg); }
.efc-dir-vertical.efc-trig-click.efc-flipped   .efc-inner { transform: rotateX(180deg); }

/* Empty placeholder */
.efc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    border: 2px dashed #ccc;
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* ============================================================
   Editor: unstack faces so both are visible
   ============================================================ */
.elementor-editor-active .efc-outer {
    height: auto !important;
    perspective: none !important;
}
.elementor-editor-active .efc-inner {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    transform: none !important;
    transition: none !important;
    height: auto !important;
}
.elementor-editor-active .efc-face {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 160px !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
            backface-visibility: visible !important;
    overflow: visible !important;
    outline: 2px dashed rgba(109,40,217,.4);
    outline-offset: -2px;
}
.elementor-editor-active .efc-face > *,
.elementor-editor-active .efc-face .elementor,
.elementor-editor-active .efc-face .e-con {
    height: auto !important;
    min-height: 120px !important;
}
.elementor-editor-active .efc-face::before {
    position: absolute;
    top: 0; left: 0;
    z-index: 9999;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
    border-radius: 0 0 4px 0;
}
.elementor-editor-active .efc-front::before {
    content: "▶  Front Face";
    background: #2563eb;
}
.elementor-editor-active .efc-back::before {
    content: "▶  Back Face";
    background: #7c3aed;
}