/* ==========================================================================
   custom-overrides.css
   Everything in this file is ADDED on top of the real custom.css (untouched,
   verbatim, in custom.css). Nothing here edits the original rules — this
   only fills gaps that come from base-bundle CSS/assets we weren't given
   (iconfont, button base styles) and layers in the two features requested:
   a gradient login box, and a working language switcher.
   ========================================================================== */

/* ---------- basic reset (normally shipped in the base bundle CSS) ---------- */
* { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- button base (u-btn / u-btn-primary aren't defined in custom.css
   — they come from the base bundle, so we supply a matching version) ---------- */
.u-btn {
    display: inline-block;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity .2s ease, background-color .2s ease;
}
.u-btn-primary {
    background-color: #3598db;  /* facade_custom.submit_button_color */
    color: #fff;                 /* facade_custom.submit_button_font_color */
}
.u-btn-primary:hover { opacity: .9; }
.u-btn-primary:active { opacity: .8; }

/* ---------- icon substitutes ----------
   The real iconfont (assets/111a3b85/css/iconfont/iconfont.css) wasn't part
   of what was uploaded, so each iconfont-xxx glyph is rebuilt here as a small
   inline SVG applied via mask-image + background-color:currentColor. Using
   currentColor means every existing color rule in custom.css — the default
   #ccc, the .actived #555, the .error #ff0000 — still drives the icon color
   automatically, with no changes to custom.css itself. */
.iconfont {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -0.15em;
}
.iconhead {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");
}
.iconlock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
}
.icondown {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.iconrevocation {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4v6h6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.6 15a8 8 0 1 0 1.5-10.2L5 10' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4v6h6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.6 15a8 8 0 1 0 1.5-10.2L5 10' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.iconmobile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='2' width='10' height='20' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='18.5' r='1.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='2' width='10' height='20' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='18.5' r='1.1'/%3E%3C/svg%3E");
}
.iconverification {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3C/svg%3E");
}
.iconleft {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icontabclose {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- feature: gradient login box ----------
   Real product ships .loginArea with flat background:#fff. Requested addition:
   a soft top-to-bottom gradient instead, kept light enough that the existing
   #555/#aaa text and #e3e4e5 borders from custom.css still read correctly. */
.loginArea {
    background: linear-gradient(165deg, #ffffff 0%, #f4f9fd 55%, #e9f2fb 100%);
}
.loginArea .u-form-item-1 .wrapper {
    background: transparent; /* let the card gradient show through the field rows */
}

/* ---------- language dropdown open state ---------- */
.u-menu.is-open { display: block; }
.u-menu li a.is-current { color: #0079BD; font-weight: bold; }

/* ---------- real checkbox wiring (check.png / check_hover.png /
   check_on.png / check_on_hover.png, all shipped in img/) ---------- */
.cbWrapper label { cursor: pointer; display: inline-flex; align-items: center; }

/* ---------- small-screen fallback ----------
   custom.css's media queries only go down to 481px (it assumes the desktop
   template is never served narrower than that — SYS_CONST.enableMobileLogin
   is false in the supplied config, meaning phones normally get a separate
   mobile bundle we don't have). This block is an addition, not a fidelity
   fix, so the page degrades reasonably if it's opened on a narrow viewport. */
@media (max-width: 480px) {
    .aside, .aside-blur, .aside-blur2 { width: 100%; min-width: 0; }
    .loginArea {
        position: relative;
        top: auto; left: auto; margin-left: 0;
        width: 92%;
        margin: 18vh auto 0;
    }
    .top-content .top-left-content { margin-left: 20px; }
    .top-content .top-right-content { margin-right: 20px; }
    .version { display: none; }
    .copyright, .hotline { left: 20px; font-size: 11px; }
}