#ftf-wrapper { position: fixed; z-index: 999999; font-family: Arial, sans-serif; }
#ftf-wrapper.bottom-right { bottom: 20px; right: 20px; }
#ftf-wrapper.bottom-left { bottom: 20px; left: 20px; }
#ftf-wrapper.top-right { top: 20px; right: 20px; }
#ftf-wrapper.top-left { top: 20px; left: 20px; }

/* if custom position, allow inline placement (no fixed positioning) */
.ftf-wrapper.custom { position: relative; display: inline-block; }

.ftf-btn { width:56px; height:56px; border-radius:50%; background:#222; color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; box-shadow:0 8px 26px rgba(0,0,0,0.18); overflow:hidden; }
.ftf-main-icon { width:40px; height:40px; object-fit:cover; border-radius:50%; }

/* popup */
.ftf-popup { display:none; position:absolute; right:0; background:#fff; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,0.12); padding:10px; min-width:160px; }
.ftf-popup .ftf-lang { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:transparent; border:none; cursor:pointer; width:100%; text-align:left; }
.ftf-popup .ftf-lang:hover { background:#f6f7f9; }
.ftf-flag { width:34px; height:24px; background-size:cover; background-position:center; border-radius:4px; display:inline-block; flex-shrink:0; }
.ftf-label { font-size:14px; color:#333; }

/* direction helpers */
.ftf-wrapper.dir-up .ftf-popup { bottom: 100%; top: auto; margin-bottom: 8px; }
.ftf-wrapper.dir-down .ftf-popup { top: 100%; bottom: auto; margin-top: 8px; }