/* ================================================================
   AI Translate — 前台語言切換器樣式
   ================================================================ */

/* ── 浮動按鈕定位 ── */
.ait-floater {
    position: fixed;
    z-index: 9999;
}
.ait-pos-bottom-right { bottom: 24px; right: 24px; }
.ait-pos-bottom-left  { bottom: 24px; left: 24px; }
.ait-pos-top-right    { top: 90px;    right: 24px; }
.ait-pos-top-left     { top: 90px;    left: 24px; }

/* ── 切換器按鈕 ── */
.ait-switcher {
    position: relative;
    display: inline-block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}
.ait-lang-flag {
    display: inline-block;
    width: 1.15em;
    height: 0.8em;
    vertical-align: -0.08em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 auto;
}
.ait-flag-hk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Crect width='32' height='20' fill='%23de2910'/%3E%3Cg fill='%23fff' transform='translate(16 10)'%3E%3Cellipse cx='0' cy='-4.5' rx='2' ry='3.2'/%3E%3Cellipse cx='4.3' cy='-1.4' rx='2' ry='3.2' transform='rotate(72)'/%3E%3Cellipse cx='2.7' cy='3.6' rx='2' ry='3.2' transform='rotate(144)'/%3E%3Cellipse cx='-2.7' cy='3.6' rx='2' ry='3.2' transform='rotate(216)'/%3E%3Cellipse cx='-4.3' cy='-1.4' rx='2' ry='3.2' transform='rotate(288)'/%3E%3Ccircle r='1.2' fill='%23de2910'/%3E%3C/g%3E%3C/svg%3E");
}
.ait-flag-us {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Crect width='19' height='10' fill='%23b22234'/%3E%3Cpath d='M0 1h19M0 3h19M0 5h19M0 7h19M0 9h19' stroke='%23fff' stroke-width='1'/%3E%3Crect width='8' height='5.4' fill='%2300357a'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1' cy='1' r='.18'/%3E%3Ccircle cx='2.2' cy='1' r='.18'/%3E%3Ccircle cx='3.4' cy='1' r='.18'/%3E%3Ccircle cx='4.6' cy='1' r='.18'/%3E%3Ccircle cx='5.8' cy='1' r='.18'/%3E%3Ccircle cx='7' cy='1' r='.18'/%3E%3Ccircle cx='1.6' cy='2' r='.18'/%3E%3Ccircle cx='2.8' cy='2' r='.18'/%3E%3Ccircle cx='4' cy='2' r='.18'/%3E%3Ccircle cx='5.2' cy='2' r='.18'/%3E%3Ccircle cx='6.4' cy='2' r='.18'/%3E%3Ccircle cx='1' cy='3' r='.18'/%3E%3Ccircle cx='2.2' cy='3' r='.18'/%3E%3Ccircle cx='3.4' cy='3' r='.18'/%3E%3Ccircle cx='4.6' cy='3' r='.18'/%3E%3Ccircle cx='5.8' cy='3' r='.18'/%3E%3Ccircle cx='7' cy='3' r='.18'/%3E%3Ccircle cx='1.6' cy='4' r='.18'/%3E%3Ccircle cx='2.8' cy='4' r='.18'/%3E%3Ccircle cx='4' cy='4' r='.18'/%3E%3Ccircle cx='5.2' cy='4' r='.18'/%3E%3Ccircle cx='6.4' cy='4' r='.18'/%3E%3C/g%3E%3C/svg%3E");
}
.ait-flag-cn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23de2910'/%3E%3Cg fill='%23ffde00'%3E%3Cpolygon points='4,2.2 5.1,4.8 7.8,4.8 5.6,6.4 6.5,8.9 4,7.4 1.5,8.9 2.4,6.4 0.2,4.8 2.9,4.8'/%3E%3Cpolygon points='10,1.5 10.6,2.8 12,2.8 10.9,3.6 11.3,5 10,4.2 8.7,5 9.1,3.6 8,2.8 9.4,2.8'/%3E%3Cpolygon points='13,4 13.6,5.3 15,5.3 13.9,6.1 14.3,7.5 13,6.7 11.7,7.5 12.1,6.1 11,5.3 12.4,5.3'/%3E%3Cpolygon points='13,8 13.6,9.3 15,9.3 13.9,10.1 14.3,11.5 13,10.7 11.7,11.5 12.1,10.1 11,9.3 12.4,9.3'/%3E%3Cpolygon points='10,11.5 10.6,12.8 12,12.8 10.9,13.6 11.3,15 10,14.2 8.7,15 9.1,13.6 8,12.8 9.4,12.8'/%3E%3C/g%3E%3C/svg%3E");
}
.ait-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #1d2327;
    color: #fff;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: background .15s, box-shadow .15s;
    line-height: 1.4;
}
.ait-switcher-btn:hover {
    background: #2c3338;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.ait-switcher-btn:focus {
    outline: 2px solid #4a9eff;
    outline-offset: 2px;
}
.ait-switcher-btn::after {
    content: '▾';
    font-size: 14px;
    opacity: .7;
}

/* ── 下拉選單 ── */
.ait-dropdown {
    display: none;
    position: absolute;
    min-width: 150px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 10000;
    animation: aitFadeIn .15s ease;
}
@keyframes aitFadeIn {
    from { opacity:0; transform: translateY(4px); }
    to   { opacity:1; transform: translateY(0); }
}

/* 浮動按鈕：底部定位 → 選單往上 / 頂部定位 → 選單往下 */
.ait-pos-bottom-right .ait-dropdown,
.ait-pos-bottom-left  .ait-dropdown {
    bottom: calc(100% + 6px);
    top: auto;
}
.ait-pos-top-right .ait-dropdown,
.ait-pos-top-left  .ait-dropdown {
    top: calc(100% + 6px);
    bottom: auto;
}
/* 左右對齊 */
.ait-pos-bottom-right .ait-dropdown,
.ait-pos-top-right    .ait-dropdown {
    right: 0;
    left: auto;
}
.ait-pos-bottom-left .ait-dropdown,
.ait-pos-top-left    .ait-dropdown {
    left: 0;
    right: auto;
}

/* Inline / Shortcode / Widget 預設往下展開 */
.ait-inline .ait-dropdown,
.ait-widget .ait-dropdown {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
}

.ait-dropdown.ait-open {
    display: block;
}
.ait-dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ait-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: #1d2327;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: background .1s;
}
.ait-dropdown li a:hover {
    background: #f6f7f7;
    color: #2271b1;
}
.ait-dropdown li.ait-active a {
    background: #f0f6fc;
    color: #2271b1;
    font-weight: 600;
}

/* ── Inline 變體（Shortcode / Widget） ── */
.ait-inline .ait-switcher-btn,
.ait-widget .ait-switcher-btn {
    background: #2271b1;
    border-radius: 4px;
    box-shadow: none;
    font-size: 13px;
    padding: 6px 12px;
}
.ait-inline .ait-switcher-btn:hover,
.ait-widget .ait-switcher-btn:hover {
    background: #135e96;
}

/* ── Widget ── */
.widget .ait-switcher {
    margin: 4px 0;
}

/* ── 響應式 ── */
@media (max-width: 480px) {
    .ait-pos-bottom-right { bottom: 16px; right: 16px; }
    .ait-pos-bottom-left  { bottom: 16px; left: 16px; }
    .ait-pos-top-right    { top: 70px; right: 16px; }
    .ait-pos-top-left     { top: 70px; left: 16px; }
    .ait-switcher-btn {
        padding: 7px 12px;
        font-size: 13px;
    }
}