/* ================================================================
   FEF POPUP WIDGET
   ================================================================ */
.fef-popup-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s;display:flex;align-items:center;justify-content:center}
.fef-popup-overlay.fef-popup-visible{opacity:1;visibility:visible}
.fef-popup-overlay.fef-popup-closing{opacity:0}

/* ── Placement ── */
.fef-popup-pos-center{align-items:center;justify-content:center}
.fef-popup-pos-top{align-items:flex-start;justify-content:center}
.fef-popup-pos-bottom{align-items:flex-end;justify-content:center}
.fef-popup-pos-left{align-items:center;justify-content:flex-start}
.fef-popup-pos-right{align-items:center;justify-content:flex-end}
.fef-popup-pos-top-left{align-items:flex-start;justify-content:flex-start}
.fef-popup-pos-top-right{align-items:flex-start;justify-content:flex-end}
.fef-popup-pos-bottom-left{align-items:flex-end;justify-content:flex-start}
.fef-popup-pos-bottom-right{align-items:flex-end;justify-content:flex-end}
.fef-popup-pos-fullscreen .fef-popup-box{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;border-radius:0!important;margin:0!important}

/* ── Panel Mode (edge-attached) ── */
.fef-popup-panel{justify-content:flex-end;align-items:stretch}
.fef-popup-panel .fef-popup-box{max-width:none;max-height:100vh;height:100vh;border-radius:0;margin:0}
.fef-popup-panel-left{justify-content:flex-start}
.fef-popup-panel-right{justify-content:flex-end}
.fef-popup-panel-top{align-items:flex-start;justify-content:stretch}
.fef-popup-panel-top .fef-popup-box{width:100%;height:auto;max-height:80vh}
.fef-popup-panel-bottom{align-items:flex-end;justify-content:stretch}
.fef-popup-panel-bottom .fef-popup-box{width:100%;height:auto;max-height:80vh}

/* ── Sticky Mode (fixed, no overlay) ── */
.fef-popup-sticky{position:fixed;z-index:9998;--popup-offset-x:16px;--popup-offset-y:16px}
.fef-popup-sticky .fef-popup-box-sticky{opacity:1;box-shadow:0 8px 32px rgba(0,0,0,0.15)}
.fef-popup-sticky-top-left{top:var(--popup-offset-y);left:var(--popup-offset-x)}
.fef-popup-sticky-top-center{top:var(--popup-offset-y);left:50%;transform:translateX(-50%)}
.fef-popup-sticky-top-right{top:var(--popup-offset-y);right:var(--popup-offset-x)}
.fef-popup-sticky-center-left{top:50%;left:var(--popup-offset-x);transform:translateY(-50%)}
.fef-popup-sticky-center-right{top:50%;right:var(--popup-offset-x);transform:translateY(-50%)}
.fef-popup-sticky-bottom-left{bottom:var(--popup-offset-y);left:var(--popup-offset-x)}
.fef-popup-sticky-bottom-center{bottom:var(--popup-offset-y);left:50%;transform:translateX(-50%)}
.fef-popup-sticky-bottom-right{bottom:var(--popup-offset-y);right:var(--popup-offset-x)}

/* ── Popup Box ── */
.fef-popup-box{position:relative;z-index:9999;background:#fff;border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,0.2);max-width:90vw;max-height:90vh;overflow:auto;box-sizing:border-box;opacity:0;transition:none}
.fef-popup-visible .fef-popup-box{opacity:1}
.fef-popup-content{padding:24px}

/* ── Close Button ── */
.fef-popup-close{position:absolute;top:8px;right:8px;z-index:10;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(0,0,0,0.06);color:#64748b;font-size:16px;cursor:pointer;transition:all 0.2s ease;line-height:1}
.fef-popup-close:hover{background:rgba(0,0,0,0.12);color:#1e293b}

/* ── Trigger Button ── */
.fef-popup-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all 0.3s ease}

/* ══════════════════════════════════════════════════
   ANIMATION IN KEYFRAMES
   ══════════════════════════════════════════════════ */
@keyframes fefFadeIn{from{opacity:0}to{opacity:1}}
@keyframes fefSlideInDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fefSlideInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fefSlideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fefSlideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fefZoomIn{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}
@keyframes fefBounceIn{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}
@keyframes fefFlipIn{from{opacity:0;transform:perspective(600px) rotateX(-20deg)}to{opacity:1;transform:perspective(600px) rotateX(0)}}

/* ══════════════════════════════════════════════════
   ANIMATION OUT KEYFRAMES
   ══════════════════════════════════════════════════ */
@keyframes fefFadeOut{from{opacity:1}to{opacity:0}}
@keyframes fefSlideOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-40px)}}
@keyframes fefSlideOutDown{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(40px)}}
@keyframes fefSlideOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-40px)}}
@keyframes fefSlideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}
@keyframes fefZoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.7)}}