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

/* ── Shared base: NO transforms, NO 3D, NO transitions here ── */
.efc-outer {
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
}
.efc-outer.efc-trig-click { cursor: pointer; }

.efc-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

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

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

/* ============================================================
   FLIP effect  –  ALL 3D rules scoped under .efc-effect-flip
   ============================================================ */
.efc-effect-flip {
    perspective: 1000px;
}
.efc-effect-flip .efc-inner {
    transform-style: preserve-3d;
    transition: transform 600ms ease;
}
.efc-effect-flip .efc-face {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.efc-effect-flip .efc-front { z-index: 2; transform: rotateY(0deg); }
.efc-effect-flip .efc-back  { transform: rotateY(180deg); }

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

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

/* click */
.efc-effect-flip.efc-dir-horizontal.efc-trig-click.efc-flipped .efc-inner { transform: rotateY(180deg); }
.efc-effect-flip.efc-dir-vertical.efc-trig-click.efc-flipped   .efc-inner { transform: rotateX(180deg); }

/* ============================================================
   FADE effect  –  pure opacity, zero 3D
   ============================================================ */
.efc-effect-fade .efc-inner {
    transform-style: flat;
    transform: none;
    transition: none;
}
.efc-effect-fade .efc-face {
    transform: none;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    transition: opacity 600ms ease, visibility 600ms ease;
}
.efc-effect-fade .efc-front { z-index: 2; opacity: 1; visibility: visible; }
.efc-effect-fade .efc-back  { z-index: 1; opacity: 0; visibility: hidden; }

/* hover */
.efc-effect-fade.efc-trig-hover:hover        .efc-front,
.efc-effect-fade.efc-trig-hover:focus-within  .efc-front { opacity: 0; visibility: hidden; }
.efc-effect-fade.efc-trig-hover:hover        .efc-back,
.efc-effect-fade.efc-trig-hover:focus-within  .efc-back  { opacity: 1; visibility: visible; }

/* click */
.efc-effect-fade.efc-trig-click.efc-flipped .efc-front { opacity: 0; visibility: hidden; }
.efc-effect-fade.efc-trig-click.efc-flipped .efc-back  { opacity: 1; visibility: visible; }

/* ============================================================
   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 both faces so both are visible & editable
   ============================================================ */
.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;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-backface-visibility: visible !important;
            backface-visibility: visible !important;
    overflow: visible !important;
    transition: none !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; }