/**
 * Prisna WP Translate Floating Style - CSS
 * Version: 2.3.0
 * Author: Joyn
 */

/* 4각형 국기 아이콘 기본 스타일 */
#prisna-floating-wrapper .prisna-flag-icon {
    display: inline-block;
    width: 30px !important;
    height: 22px !important;
    background-repeat: no-repeat !important;
    background-image: var(--prisna-flag-image) !important;
    background-size: auto !important;
    vertical-align: middle;
    /* 국기 변경 시 부드러운 전환 (깜빡임 방지) */
    transition: background-position 0.1s ease-out;
}

/* Prisna CSS sprite background-position 값들 */
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-en { background-position: 0 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-fr { background-position: -30px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-nl { background-position: -60px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-el { background-position: -90px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-de { background-position: -120px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-es { background-position: -150px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-zh-cn { background-position: -180px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-zh { background-position: -180px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-zh-tw { background-position: -210px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-pl { background-position: -240px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-pt { background-position: -270px 0 !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-th { background-position: 0 -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-pa { background-position: -30px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ur { background-position: -30px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ro { background-position: -60px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ru { background-position: -90px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-no { background-position: -120px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-da { background-position: -150px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-fi { background-position: -180px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-hi { background-position: -210px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-in { background-position: -210px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-it { background-position: -240px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ja { background-position: -270px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-af { background-position: 0 -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-sw { background-position: 0 -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-sq { background-position: -30px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ar { background-position: -60px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-hy { background-position: -90px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-az { background-position: -120px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-eu { background-position: -150px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-be { background-position: -180px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-tr { background-position: -180px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-bn { background-position: -210px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-bs { background-position: -240px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-bg { background-position: -270px -44px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ca { background-position: 0 -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ceb { background-position: -30px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-tl { background-position: -30px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ny { background-position: -60px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-hr { background-position: -90px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-cs { background-position: -120px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-et { background-position: -150px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-gl { background-position: -180px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ka { background-position: -210px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ht { background-position: -240px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ha { background-position: -270px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ig { background-position: -270px -66px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-iw { background-position: 0 -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-yi { background-position: 0 -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-he { background-position: 0 -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-hmn { background-position: -30px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-vi { background-position: -30px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-hu { background-position: -60px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-is { background-position: -90px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-id { background-position: -120px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-jw { background-position: -120px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ga { background-position: -150px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-kk { background-position: -180px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-km { background-position: -210px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ko { background-position: -240px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-lo { background-position: -270px -88px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-lv { background-position: 0 -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-lt { background-position: -30px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-mk { background-position: -60px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-mg { background-position: -90px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ms { background-position: -120px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-mt { background-position: -150px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-mi { background-position: -180px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-mn { background-position: -210px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-my { background-position: -240px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ne { background-position: -270px -110px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-ml { background-position: -210px -22px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-uk { background-position: -240px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-uz { background-position: -270px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-sv { background-position: -180px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-sk { background-position: -90px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-sl { background-position: -120px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-sr { background-position: -30px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-si { background-position: -60px -132px !important; }
#prisna-floating-wrapper .prisna-flag-icon.prisna-flag-tg { background-position: 0 -132px !important; }

/* 기존 Prisna 위젯 숨기기 (시각적으로만, 기능은 유지) */
body > .prisna-wp-translate-top,
body > .prisna-wp-translate-container,
body > .prisna-translator,
.prisna-wp-translate-container,
.prisna-wp-translate-layout-bar,
.prisna-wp-translate-layout-dropdown,
.prisna-wp-translate-top,
.prisna-translator,
[class*="prisna-wp-translate-container"],
[class*="prisna-wp-translate-layout"] {
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    /* pointer-events는 유지하여 클릭 기능 작동 */
}

/* 플로팅 래퍼 */
#prisna-floating-wrapper {
    position: fixed;
    bottom: var(--prisna-position-bottom, 90px);
    right: var(--prisna-position-right, 20px);
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 모바일에서 위치 확실히 고정 - joyn-chat과 세로로 정렬 */
@media (max-width: 768px) {
    #prisna-floating-wrapper {
        right: 20px !important;
        bottom: 140px !important;
    }
}

/* 플로팅 버튼 */
#prisna-floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1a1a2e;
    border: 3px solid rgba(255,255,255,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    overflow: hidden;
    /* 버튼 기본 스타일 리셋 */
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    user-select: none;
}

#prisna-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
}

#prisna-floating-btn:active {
    transform: scale(0.95);
}

.prisna-flag-icon {
    display: inline-block;
    width: 30px;
    height: 22px;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    pointer-events: none;
}

/* 언어 선택 팝업 */
#prisna-lang-popup {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 320px;
    background: rgba(30, 30, 45, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    pointer-events: none;
}

#prisna-lang-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 팝업 헤더 */
.prisna-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.prisna-popup-header span {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

#prisna-popup-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#prisna-popup-close:hover,
#prisna-popup-close:active {
    opacity: 1;
}

/* 언어 그리드 */
.prisna-lang-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

/* 언어 버튼 */
.prisna-lang-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    user-select: none;
}

.prisna-lang-btn:hover,
.prisna-lang-btn:active {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.prisna-lang-btn.active {
    background: rgba(100, 149, 237, 0.3);
    border: 1px solid rgba(100, 149, 237, 0.5);
}

.prisna-lang-btn .prisna-flag-icon {
    width: 30px;
    height: 22px;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    pointer-events: none;
}

.prisna-lang-code {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
}