/* 前台「选择语言」页：按国家/地区展示 + 搜索
   ⚠ 本文件是页面级样式，模板里放在 responsive.css 之后加载（body 底部），
      优先级高于响应式基础样式 —— 所以只写 .lang-* 作用域内的类，别写全局标签选择器 */

/* ---------- 搜索框 ---------- */
.lang-search {
    position: relative;
    margin-bottom: 10px;
}

.lang-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #9e9e9e;
    pointer-events: none;
}

.lang-search-input {
    width: 100%;
    height: 42px;
    padding: 0 40px;
    border: 1px solid #e6e6e6;
    border-radius: 21px;
    background: #fff;
    font-size: 14px;
    color: #333;
    outline: none;
    -webkit-appearance: none;
}

.lang-search-input:focus {
    border-color: #b9a5e8;
}

.lang-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #bdbdbd;
    cursor: pointer;
}

/* ---------- 概览条：当前语言 / 可选国家数 ---------- */
.lang-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px;
    font-size: 12px;
    color: #9e9e9e;
}

.lang-summary-cur {
    color: #7a5fd0;
}

/* ---------- 洲分组 ---------- */
.lang-group-title {
    padding: 8px 16px;
    background: #f6f5fa;
    font-size: 12px;
    font-weight: 600;
    color: #8a8a8a;
    letter-spacing: 1px;
    border-bottom: 1px solid #eee;
}

/* ---------- 国家条目 ---------- */
.lang-item {
    color: #333;
    text-decoration: none;
}

.lang-item:active,
.lang-item:hover {
    background: #faf9fe;
    color: #333;
}

.lang-group .lang-item:last-child {
    border-bottom: 0;
}

.lang-flag {
    font-size: 26px;
    line-height: 1;
    width: 34px;
    text-align: center;
    flex: 0 0 34px;
}

.lang-text {
    min-width: 0;
}

/* 第一行 = 国名（服务端按当前界面语言输出，非中文语言下不会出现中文串），
   第二行 = 语言本地名（该语言的自称：Français / 日本語 / हिन्दी）。
   本地名必须显示：用户往往只认自己语言的写法。 */
.lang-name {
    display: block;
    font-size: 15px;
    color: #2b2b2b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-native {
    display: block;
    font-size: 12px;
    color: #9e9e9e;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-check {
    font-size: 20px;
    color: #7a5fd0;
    margin-left: 8px;
}

/* ---------- 空状态 ---------- */
.lang-empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 13px;
    color: #bdbdbd;
}

/* 搜索过滤用的隐藏类
   ⚠ 必须 !important：条目带 Bootstrap 4 的 .d-flex（display:flex !important），
      内联样式和普通规则都压不住它，搜索会「点了没反应」。 */
.lang-item.is-hidden,
.lang-group.is-hidden,
.lang-empty.is-hidden,
.lang-search-clear.is-hidden {
    display: none !important;
}