/* Translate Switcher - Frontend Styles */

.ts-switcher { display: inline-block; font-size: var(--ts-font-size, 14px); position: relative; }

/* ── Dropdown ── */
.ts-dropdown {
    position: relative;
    min-width: var(--ts-min-width, 120px);
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--ts-border, #ddd);
    border-radius: var(--ts-radius, 4px);
    background: var(--ts-bg, #fff);
    color: var(--ts-color, #333);
}
.ts-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ts-py, 8px) var(--ts-px, 12px);
    gap: 6px;
}
.ts-arrow { font-size: 10px; opacity: .6; transition: transform .2s; }
.ts-dropdown[aria-expanded="true"] .ts-arrow { transform: rotate(180deg); }
.ts-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin: 2px 0 0;
    padding: 4px 0;
    background: var(--ts-bg, #fff);
    border: 1px solid var(--ts-border, #ddd);
    border-radius: var(--ts-radius, 4px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 9999;
    list-style: none;
}
.ts-dropdown[aria-expanded="true"] .ts-menu { display: block; }
.ts-option {
    display: flex;
    align-items: center;
    padding: var(--ts-py, 8px) var(--ts-px, 12px);
    cursor: pointer;
    transition: background .15s;
}
.ts-option:hover { background: var(--ts-hover-bg, #f0f0f0); color: var(--ts-hover-color, #000); }
.ts-option.ts-active { background: var(--ts-active-bg, #0073aa); color: var(--ts-active-color, #fff); }

/* ── Flags only ── */
.ts-flags-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-flag-item {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--ts-radius, 4px);
    text-decoration: none;
    opacity: .65;
    transition: opacity .2s, transform .15s;
}
.ts-flag-item:hover { opacity: 1; transform: scale(1.1); }
.ts-flag-item.ts-active { opacity: 1; }

/* ── Pills ── */
.ts-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--ts-py, 6px) var(--ts-px, 12px);
    border: 1px solid var(--ts-border, #ddd);
    border-radius: 999px;
    background: var(--ts-bg, #fff);
    color: var(--ts-color, #333);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ts-pill:hover { background: var(--ts-hover-bg, #f0f0f0); color: var(--ts-hover-color, #000); }
.ts-pill.ts-active { background: var(--ts-active-bg, #0073aa); color: var(--ts-active-color, #fff); border-color: var(--ts-active-bg, #0073aa); }

/* ── Minimal ── */
.ts-minimal { display: flex; align-items: center; gap: 4px; }
.ts-minimal-item {
    text-decoration: none;
    color: var(--ts-color, #333);
    font-weight: 500;
    opacity: .6;
    transition: opacity .15s;
}
.ts-minimal-item:hover { opacity: 1; }
.ts-minimal-item.ts-active { opacity: 1; color: var(--ts-active-bg, #0073aa); }
.ts-sep { color: var(--ts-border, #ccc); }

/* ── Flag element ── */
.ts-flag { display: inline-block; font-size: var(--ts-flag-size, 20px); line-height: 1; vertical-align: middle; }
.ts-flag-circle { border-radius: 50%; overflow: hidden; }
.ts-flag-square  { border-radius: 2px; }

/* ── Label ── */
.ts-label { display: inline-flex; align-items: center; gap: 6px; }
.ts-text  { line-height: 1.3; }
.ts-code-badge { font-size: .8em; opacity: .7; }

/* ── Floating ── */
.ts-floating { box-shadow: 0 2px 12px rgba(0,0,0,.2); border-radius: var(--ts-radius, 4px); }

/* ── RTL ── */
.ts-rtl .ts-switcher { direction: rtl; }

/* ── Switching state ── */
.ts-switcher.ts-switching { opacity: .6; pointer-events: none; }