/* login-view.css */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #050a15;
}

.display-none{
    display:none;
}

/* Native Loading Spinner Overlay */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #DFF8FF;
    font-family: inherit;
    backdrop-filter: blur(5px);
}
.loading-overlay .spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #5cd9ff;
    border-radius: 50%;
    width: 40px; height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Native Confirm Overlay */
.custom-confirm-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}
.custom-confirm-box {
    background: #0A0F1E;
    /*border: 1px solid #3a4f7c;*/
    border-radius: 16px;
    padding: 25px 30px;
    width: 320px;
    color: #fff;
    box-shadow: 0 0 20px rgba(40, 100, 255, 0.3);
    text-align: center;
    position: relative;
}
.custom-confirm-box::before {
    content: '';
    position: absolute;
    inset: -1px; /* Expand exactly 1px outside the panel */
    border-radius: 13px; /* Match inner radius (12) + 1px */
    padding: 2px; /* The thickness of our glow border */
    background: conic-gradient(from var(--border-angle), #3552FF 0%, #9FD7FF 34.62%, #6D53FD 50%, #9FD7FF 84.62%, #3552FF 100% );
    /* Mask to carve out the inner area completely */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    animation: rotateBorderAngle 6s linear infinite;
}
/*.custom-confirm-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #3552FF, #5cd9ff);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}*/
.custom-confirm-box h3 { margin-top: 0; margin-bottom: 15px; font-size: 18px; color: #DFF8FF; font-weight: bold; }
    .custom-confirm-box p {
        font-size: 14px;
        margin-bottom: 25px;
        color: #a0b0d0;
        line-height: 1.5;
        white-space: pre-line;
    }
.confirm-actions { display: flex; justify-content: center; gap: 15px; }
.confirm-btn {
    padding: 8px 25px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.3s, box-shadow 0.3s;
}
.btn-yes { background: #255CD7; color: #fff; }
.btn-yes:hover { background: #3e6cff; box-shadow: 0 0 10px rgba(43, 92, 255, 0.5); }
.btn-no { background: transparent; border: 1px solid #3a4f7c; color: #a0b0d0; }
.btn-no:hover { background: rgba(255,255,255,0.1); color: #fff; }

.login-view-wrap {
    width: 100%;
    height: 100vh;
    background: url('/images/new_login/Login_BG_2880.jpg') center center / cover no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 6%; /* Right side positioning */
    box-sizing: border-box;
}

/* Define the angle property for the rotating border */
@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Panel styling */
.login-panel {
    width: 600px;
    background: rgba(3, 17, 46, 0.7);
    border-radius: 20px;
    padding: 8vh 6% 8vh;
    box-sizing: border-box;
    /*backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);*/
    box-shadow: 0 0 25px rgba(40, 100, 255, 0.2);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(2px)
}

.login-panel::before {
    content: '';
    position: absolute;
    inset: -1px; /* Expand exactly 1px outside the panel */
    border-radius: 13px; /* Match inner radius (12) + 1px */
    padding: 2px; /* The thickness of our glow border */
    background: conic-gradient(from var(--border-angle),
        #3552FF 0%,
        #9FD7FF 34.62%,
        #6D53FD 50%,
        #9FD7FF 84.62%,
        #3552FF 100%
    );
    /* Mask to carve out the inner area completely */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    animation: rotateBorderAngle 6s linear infinite;
}

@keyframes rotateBorderAngle {
    0% {
        --border-angle: 0deg;
    }
    100% {
        --border-angle: 360deg;
    }
}

/* Header */
.login-header {
    margin-bottom: 30px;
}

.logo-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.logo-img {
    width: 45px;
    height: 45px;
    margin-right: 15px;
}

.logo-text h1 {
    font-weight: bold;
    color: #DFF8FF;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 1px;
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 28px;
    leading-trim: none;
}

.logo-text h2 {
    /*    font-size: 14px;
    color: #5cd9ff;
    margin: 0;
    font-weight: normal;*/
    font-family: Noto Sans;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: none;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #00D4FF;
}

.subtitle {
    font-size: 13px;
    color: #AEB9E1;
    line-height: 1.6;
    margin: 0;
}

/* Tabs */
.login-tabs {
    display: flex;
    border-bottom: 1px solid rgba(80, 120, 220, 0.3);
    margin-bottom: 25px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    color: #7D8388;
    transition: all 0.3s ease;
    position: relative;
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 14px;
    leading-trim: none;
    line-height: 20px;
    letter-spacing: 0.5px;
}

.tab:hover {
    color: #a0b0d0;
}

.tab.active {
    color: #00A9FF;
}

.tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #5cd9ff;
    box-shadow: 0 0 5px #5cd9ff;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.tab.active::after {
    width: 80%;
}

.login-form-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    display: none; /* fallback */
}

.login-form-container.active {
    opacity: 1;
    visibility: visible;
    display: block; /* fallback */
}

/* SSO QR Code Styling */
.sso-qrcode-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    padding: 20px 0;
}
.sso-qrcode-wrapper .sso-qrcode {
    text-align: center;
    color: #fff;
}
.sso-qrcode-wrapper .sso-qrcode label {
    color: #a0b0d0;
    font-size: 14px;
    margin-top: 10px;
    display: block;
}
.sso-qrcode-wrapper .qrcode {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
}

.sso-qrcode .qrcode,
.sso-qrcode #qrcode-timeout {
    width: 160px !important;
    height: 165px !important;
}

.sso-qrcode #qrcode-timeout .refresh {
    width: 30px !important;
    height: 30px !important;
    left: 50% !important;
    margin-left: -15px;
}

/* Form */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #a0b0d0;
    margin-bottom: 8px;
}

.verification-code-wrap .txtCheckCode-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.verification-code-wrap .txtCheckCode-wrap #txtCheckCode {
    flex: 1;
}

.verification-code-wrap .txtCheckCode-wrap img {
    height: 38px;
    cursor: pointer;
}

.verification-code-wrap .txtCheckCode-wrap .change-code-link {
    font-size: 12px;
    color: #0056b3;
    white-space: nowrap;
    text-decoration: none;
}

.input-wrapper {
    position: relative;
}

.form-control {
    width: 100%;
    height: 44px;
    padding: 0 10px;
    background: #1D293D;
    border: 1px solid #3a4f7c;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

.form-control:focus {
    border-color: #5cd9ff;
    box-shadow: 0 0 8px rgba(92, 217, 255, 0.4);
    background: #25344d;
}

.form-control::placeholder {
    color: #B3B8BA;
    transition: opacity 0.3s ease;
}

.form-control:focus::placeholder {
    opacity: 0.5;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.toggle-password:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Alert Message (Toast) */
.alert-message {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    min-width: 300px;
    max-width: 80%;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    animation: fadeInDown 0.3s ease-out forwards;
    backdrop-filter: blur(10px);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Button */
.btn-login {
    width: 100%;
    height: 40px;
    background: #255CD7;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 20px;
    transition: background 0.3s, box-shadow 0.3s;
}

.btn-login:hover {
    background: #3e6cff;
    box-shadow: 0 0 10px rgba(43, 92, 255, 0.5);
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px; /* Reduced space before secondary actions */
}

/* Secondary Actions */
.secondary-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 40px; /* Space before footer */
}

.remember-me {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #a0b0d0;
}

.remember-me input {
    display: none;
}

.custom-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #3a4f7c;
    border-radius: 3px;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.custom-checkbox .check-mark {
    width: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.remember-me input:checked + .custom-checkbox {
    background-color: #255CD7;
    border-color: #255CD7;
}

.remember-me input:checked + .custom-checkbox .check-mark {
    opacity: 1;
}

.forgot-password-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
    .forgot-password-wrap .label {
        margin-bottom: 0;
    }

#privacyPolicyDoc,
#labelRefreshValidateCode,
#forgot-password {
    color: #5cd9ff;
    cursor: pointer;
}

.forgot-password {
    color: #5cd9ff;
    text-decoration: none;
    font-size:14px;
}

.forgot-password:hover {
    text-decoration: underline;
}

/* Language and Footer */
.login-footer {
    border-top: 1px solid rgba(80, 120, 220, 0.2);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lang-selector-wrap {
    position: relative;
    width: 120px;
}

.lang-selector {
    display: flex;
    align-items: center;
    color: #5cd9ff;
    font-size: 14px;
    cursor: pointer;
}

.arrow-down {
    display: inline-block;
    margin-left: 8px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #5cd9ff;
    transition: transform 0.3s;
}

.lang-selector-wrap.open .arrow-down {
    transform: rotate(180deg);
}

.lang-selector .lang-icon {
    width:16px;
    margin-right:8px;
}

.lang-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 10px;
    background: #03112EB2;
    border: 1px solid #7D8388;
    border-radius: 4px;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    width: 130px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    z-index: 10;
    transition: all 0.3s ease;
}

.lang-selector-wrap.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li {
    padding: 8px 12px;
    font-size: 14px;
    color: #a0b0d0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.lang-dropdown li:hover {
    background: rgba(43, 92, 255, 0.2);
    color: #fff;
}

.lang-dropdown li.active {
    background: rgba(43, 92, 255, 0.4);
    color: #fff;
}

.lang-dropdown li .check-icon {
    width: 12px;
    opacity: 0;
}

.lang-dropdown li.active .check-icon {
    opacity: 1;
}

.contact-info {
    font-size: 12px;
    color: #B3B8BA;
    line-height: 1.6;
    text-align:center;
}
.contact-info p {
    margin: 0;
}

.coming-soon {
    color: #AEB9E1;
    text-align: center;
    padding: 40px 0;
}

#beian-wrap{
    text-decoration:underline;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .login-view-wrap {
        padding-right: 5%;
    }
}

@media (max-width: 992px) {
    .login-view-wrap {
        justify-content: center;
        padding: 20px;
        background-position: center;
    }
    
    .login-panel {
        width: 100%;
        max-width: 480px;
    }
}

@media (max-width: 480px) {
    .login-panel {
        padding: 10px;
    }
    
    .logo-text h1 {
        font-size: 20px;
    }
    
    .form-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .forgot-password {
        align-self: flex-start;
    }
}