/* ============================================================
   SANETER Login — Language Dropdown (v3)
   v3 vs v2: 触发器位置从"卡片右上角外部"改到"与 Welcome back
             标题中线垂直对齐"。
   .sn-lang 现在嵌套在 .sn-card__head 内,与 <h2> 同级。
   ============================================================ */

/* 防御性声明 — .sn-card__head 在 v5.css 里默认无 position,我们要 relative 锚定 */
.sn-card__head{
    position: relative;
}

/* 给标题留右侧空间,避免长文本(如 Restablece tu contraseña)被触发器盖 */
.sn-card__title{
    padding-right: 50px;
}

/* lang dropdown — 默认大屏标题 48px line-height 1.1 (v5)
   标题中线 = 48 * 1.1 / 2 = 26.4px → top: 26px + translateY(-50%) */
.sn-lang{
    position: absolute;
    top: 26px;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
}

/* 大屏 1600+: v5.css 没有自动放大标题,但我们的 padding 已 96px 一致;
   实际 .sn-card__title 仍是 48px → top 不变 */

/* 平板/小桌面 ≤ 1024px: v5 的 .sn-card 切单列布局,标题字号不变 */

/* 手机端 ≤ 480px: v5.css 第 811 行明确把 .sn-card__title 缩到 28px
   28 * 1.1 / 2 = 15.4 → top: 15px */
@media (max-width: 480px){
    .sn-card__title{
        padding-right: 48px;
    }
    .sn-lang{
        top: 15px;
    }
}

/* ============================================================
   触发器 / dropdown / option 视觉 — 完全继承 v2,无变化
   ============================================================ */
.sn-lang__btn{
    height: 38px;
    width: auto;
    min-width: 38px;
    padding: 0 8px;
    gap: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
.sn-lang__btn:hover,
.sn-lang__btn[aria-expanded="true"]{
    background: #F3F4F6;
    color: #111827;
}
.sn-lang__btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20);
}

.sn-lang__flag{
    display: block;
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: #f0f0f0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sn-lang__flag.is-loaded{ opacity: 1; }

.sn-lang__menu{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
    padding: 6px;
    z-index: 51;
    scrollbar-gutter: stable;
    animation: sn-lang-in 0.15s ease;
}
.sn-lang__menu[hidden]{ display: none; }

@keyframes sn-lang-in{
    from{ opacity: 0; transform: translateY(-4px); }
    to  { opacity: 1; transform: translateY(0);    }
}

.sn-lang__menu::-webkit-scrollbar{ width: 6px; }
.sn-lang__menu::-webkit-scrollbar-track{ background: transparent; }
.sn-lang__menu::-webkit-scrollbar-thumb{ background: #E5E7EB; border-radius: 3px; }
.sn-lang__menu::-webkit-scrollbar-thumb:hover{ background: #D1D5DB; }

.sn-lang__option{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: background 0.15s ease, color 0.15s ease;
}
.sn-lang__option:hover,
.sn-lang__option:focus-visible{
    background: #F3F4F6;
    color: #111827;
    outline: none;
}
.sn-lang__option.is-active{
    background: #F3F4F6;
    font-weight: 600;
    color: #111827;
}

.sn-lang__option-flag{
    display: block;
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: #f0f0f0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sn-lang__option-flag.is-loaded{ opacity: 1; }

.sn-lang__option-name{
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px){
    .sn-lang__menu{
        min-width: 200px;
        max-width: calc(100vw - 16px);
    }
}