/* ── ZH Script Switcher — Frontend Styles ── */

/* ── Container ── */
.zh-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    vertical-align: middle;
    line-height: 1;
}

/* ── Shared button base ── */
.zh-btn {
    all: unset;                     /* reset browser / theme defaults */
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    -webkit-font-smoothing: antialiased;
    outline: none;
}

.zh-btn:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
    border-radius: 4px;
}

/* ─────────────────────────
   STYLE 1 — TEXT  (繁體 / 简体)
   ───────────────────────── */
.zh-switcher--text .zh-btn {
    font-size: 0.85em;
    font-weight: 600;
    color: inherit;
    padding: 2px 4px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    opacity: 0.65;
}
.zh-switcher--text .zh-btn:hover {
    opacity: 1;
}
.zh-switcher--text .zh-btn.zh-active {
    opacity: 1;
    color: #fff;
    text-decoration: none;
}
.zh-switcher--text .zh-sep {
    font-size: 0.75em;
    opacity: 0.4;
    user-select: none;
}

/* ─────────────────────────
   STYLE 2 — ICON  (繁 | 简)
   ───────────────────────── */
.zh-switcher--icon .zh-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: inherit;
    opacity: 0.6;
    border: 1.5px solid transparent;
}
.zh-switcher--icon .zh-icon-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.12);
}
.zh-switcher--icon .zh-icon-btn.zh-active {
    opacity: 1;
    background: var(--zh-accent, #c0392b);
    color: #fff;
    border-color: var(--zh-accent, #c0392b);
}

/* ─────────────────────────
   STYLE 3 — BOTH  (badge + label)
   ───────────────────────── */
.zh-switcher--both {
    gap: 6px;
}
.zh-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 5px;
    border-radius: 20px;
    font-size: 0.8em;
    background: rgba(0,0,0,0.05);
    color: inherit;
    opacity: 0.6;
    border: 1.5px solid transparent;
    line-height: 1.2;
}
.zh-badge-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.10);
}
.zh-badge-btn.zh-active {
    opacity: 1;
    background: var(--zh-accent, #c0392b);
    color: #fff;
    border-color: var(--zh-accent, #c0392b);
}
.zh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.zh-badge-btn.zh-active .zh-badge {
    background: rgba(0,0,0,0.2);
}
.zh-label {
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ─────────────────────────
   Customify header positioning helper
   Wrap with .zh-header-right if you need
   extra spacing in the header builder.
   ───────────────────────── */
.zh-header-right {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
}

/* ─────────────────────────
   Transition: page-level script swap flash suppression
   ───────────────────────── */
.zh-converting * {
    transition: none !important;
}