/* ============================================================================
   2011-login-language.css   —  the "Idioma" language picker box
   ----------------------------------------------------------------------------
   Loads AFTER 2011-login-base.css. Shared chrome (window shell, flat teal
   title bar, Volter 9px, hard 1px borders) already comes from base; this file
   only fixes THIS box's internals:
       * shrink the 180px modern box to a tight 2011 window
       * kill the native <select> look (appearance:none, square, Volter 9px)
       * move the dropdown arrow OUTSIDE the field, as a real pixel triangle,
         which is exactly how the 2011 client drew its chat-style dropdown
         (see the bubble-style selector bottom-left in Example1.jpg)
       * turn the modern rounded/glossy flag icon into a 16x12 pixel flag
         chip with a hard 1px frame (cover-crop kills the rounded corners)

   ART: /skin/2011ui/language_arrow_down.png is a 7x4 pixel triangle authored
   pixel-for-pixel from the dropdown arrow in Example1.jpg (genuine
   63-BUILD406 screenshot). Sampled there as a ~6x3 solid #1a1a1a triangle
   sitting on the panel to the RIGHT of the field, not inside it.

   CASCADE: bundle rules for this box live at (0,2,0)-(0,3,0) with no
   !important; every rule here is (1,2,0)+ via the #root prefix and doubles
   the class on chrome elements, so it wins. Verified with getComputedStyle.
   ========================================================================= */

/* ---- the window: tight 2011 proportions -------------------------------- */
#root .nitro-login-view .login-language-picker.login-language-picker {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 136px !important;
    padding: 0 !important;
    top: 18px !important;
    right: 22px !important;
    resize: none !important;
}

/* ---- title bar: base gives the 21px flat teal bar; just pin the label --- */
#root .nitro-login-view .login-language-picker .login-language-header.login-language-header {
    min-height: 21px !important;
    height: 21px !important;
    max-height: 21px !important;
    padding: 0 5px !important;
}

#root .nitro-login-view .login-language-header .nitro-card-title.nitro-card-title {
    display: block !important;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 700 !important;
    color: var(--c11-title-fg) !important;
    text-shadow: 1px 1px 0 var(--c11-title-sh) !important;
    text-align: center !important;
    cursor: default !important;
}

/* ---- content panel: 2011 windows are padded 4-5px, not 8 --------------- */
#root .nitro-login-view .login-language-content.login-language-content {
    box-sizing: border-box !important;
    height: auto !important;
    padding: 5px !important;
    overflow: visible !important;
    background: var(--c11-panel-bg) !important;
    box-shadow: inset 0 1px 0 0 var(--c11-panel-hi) !important;
}

/* ---- row: [flag] [field] [pixel arrow] -------------------------------- */
#root .nitro-login-view .login-language-select-wrap.login-language-select-wrap {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    /* 16px row: the flag chip is 14px tall and the field 16px, so both land
       on WHOLE pixels when flex-centred. A 17px row put the flag at y+1.5
       and half-pixel offsets blur bitmap art. */
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The genuine 2011 pixel triangle, on the panel to the right of the field. */
#root .nitro-login-view .login-language-select-wrap.login-language-select-wrap::after {
    content: '' !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 4px !important;
    margin: 1px 1px 0 0 !important;
    background: url('/skin/2011ui/language_arrow_down.png') 0 0 / 7px 4px no-repeat !important;
    image-rendering: pixelated !important;
    pointer-events: none !important;
}

/* ---- the flag icon ----------------------------------------------------
   The <img> is a 158x164 MODERN icon: rounded corners, a glossy top-left
   highlight and a soft drop shadow. Its src is a runtime base64 data URI
   that changes with the selected language, so CSS cannot swap it for 2011
   art without breaking the picker (see remainingTells).

   What CSS *can* do is make it read like a 2011 web flag chip:
     * 16x12 landscape box + 1px hard dark frame (the 2011 flag-chip shape)
     * object-fit:cover crops the top/bottom bands, which is also what
       removes the icon's rounded corners and its drop shadow
     * image-rendering:pixelated keeps the 9x downscale hard-edged instead
       of blurring it - the colours stay saturated and it reads as pixel art
   content-box sizing is deliberate so the 1px frame sits OUTSIDE the 16x12
   flag, exactly like the bordered flag chips on the 2011 site.           */
#root .nitro-login-view .login-language-select-wrap img,
#root .nitro-login-view .login-language-picker img {
    box-sizing: content-box !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 12px !important;
    min-width: 0 !important;
    max-width: 16px !important;
    max-height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--c11-btn-bd) !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    clip-path: none !important;
    image-rendering: pixelated !important;
    filter: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* ---- the <select>: the single biggest modern tell, flattened ----------
   appearance:none removes the OS chrome (native arrow, rounded frame,
   focus ring). What is left is a 2011 white field: square, 1px #4a5a60
   border, 1px hard sunken inner line, black Volter 9px, no radius, no
   transition, no gradient. The popup LIST itself is drawn by the OS and
   is not styleable - that is a known, unavoidable tell.                 */
#root .nitro-login-view .login-language-select-wrap select.form-select,
#root .nitro-login-view .login-language-select-wrap select {
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 3px !important;
    margin: 0 !important;
    border: 1px solid var(--c11-btn-bd) !important;
    border-radius: 0 !important;
    background: var(--c11-field-bg) !important;
    background-image: none !important;
    color: var(--c11-fg) !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    transition: none !important;
    filter: none !important;
    outline: none !important;
    box-shadow: inset 1px 1px 0 0 var(--c11-panel-lo) !important;
    -webkit-font-smoothing: none !important;
}

#root .nitro-login-view .login-language-select-wrap select:hover {
    background: var(--c11-field-bg) !important;
}

#root .nitro-login-view .login-language-select-wrap select:focus,
#root .nitro-login-view .login-language-select-wrap select:focus-visible {
    border-color: var(--c11-btn-bd) !important;
    box-shadow: inset 1px 1px 0 0 var(--c11-panel-lo) !important;
    outline: none !important;
}

#root .nitro-login-view .login-language-select-wrap select:disabled {
    opacity: 1 !important;
    color: var(--c11-fg-dim) !important;
    background: #eef1f2 !important;
    cursor: default !important;
}

/* The OS paints the option list; we can at least ask for the right face. */
#root .nitro-login-view .login-language-select-wrap select option {
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    background: var(--c11-field-bg) !important;
    color: var(--c11-fg) !important;
}

/* ---- error line ------------------------------------------------------- */
#root .nitro-login-view .login-language-picker .language-error {
    box-sizing: border-box !important;
    max-width: 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 3px 0 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--c11-rule) !important;
    background: none !important;
    color: #8a1712 !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}