:root {
    --swish-primary-color: #f44336;
    --swish-input-shadow: #EA4C8980;
    --swish-border-radius: 10px;
    --swish-box-shadow: 0 8px 40px -12px var(--swish-primary-color)
}

#auth-page {
    font-family: open sans, Helvetica, "sans-serif"
}

#auth-page .h1,
#auth-page .h2,
#auth-page .h3,
#auth-page .h4,
#auth-page .h5,
#auth-page .h6,
#auth-page h1,
#auth-page h2,
#auth-page h3,
#auth-page h4,
#auth-page h5,
#auth-page h6 {
    color: #32325d
}

#auth-page .text-main {
    color: #5d5c5d
}

#auth-page .text-neutral {
    color: var(--swish-primary-color)
}

#auth-page .btn-main {
    color: #fff;
    border: none;
    font-size: 16px;
    height: calc(1.5em + 1.25rem + 2px);
    background: var(--swish-primary-color)
}

#auth-page .btn-facebook {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08)
}

#auth-page .btn-facebook,
#auth-page .btn-facebook:hover {
    color: #fff;
    background-color: #3b5999;
    border-color: #3b5999
}

#auth-page .btn-facebook:focus {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(59, 89, 153, .5)
}

#auth-page .btn-twitter {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08)
}

#auth-page .btn-twitter,
#auth-page .btn-twitter:hover {
    color: #fff;
    background-color: #1da1f2;
    border-color: #1da1f2
}

#auth-page .btn-twitter.focus,
#auth-page .btn-twitter:focus {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(29, 161, 242, .5)
}

#auth-page .btn-pinterest {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08)
}

#auth-page .btn-pinterest,
#auth-page .btn-pinterest:hover {
    color: #fff;
    background-color: #bd081c;
    border-color: #bd081c
}

#auth-page .btn-pinterest.focus,
#auth-page .btn-pinterest:focus {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(189, 8, 28, .5)
}

#auth-page .btn:hover {
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    transform: translateY(-1px)
}

#auth-page .btn-group-sm>.btn,
#auth-page .btn-sm {
    font-size: .75rem
}

#auth-page input[type=checkbox],
#auth-page .checkbox input[type=checkbox],
#auth-page .checkbox-inline input[type=checkbox] {
    position: relative;
    border: none;
    margin-bottom: -2px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer
}

#auth-page input[type=checkbox]:focus,
#auth-page .checkbox input[type=checkbox]:focus,
#auth-page .checkbox-inline input[type=checkbox]:focus {
    outline: none
}

#auth-page input[type=checkbox]:after,
#auth-page .checkbox input[type=checkbox]:after,
#auth-page .checkbox-inline input[type=checkbox]:after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-top: -10px;
    margin-right: 5px;
    border: 1px solid #686868;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
    border-radius: 3px
}

#auth-page input[type=checkbox]:checked:after,
#auth-page .checkbox input[type=checkbox]:checked:after,
#auth-page .checkbox-inline input[type=checkbox]:checked:after {
    border-color: var(--swish-primary-color)
}

#auth-page input[type=checkbox]:checked:before,
#auth-page .checkbox input[type=checkbox]:checked:before,
#auth-page .checkbox-inline input[type=checkbox]:checked:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 6px;
    display: table;
    width: 4px;
    height: 10px;
    border: 2px solid var(--swish-primary-color);
    border-top-width: 0;
    border-left-width: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg)
}

#auth-page .form-check .form-check-label,
#auth-page .form-check .form-check-input:hover {
    cursor: pointer;
    font-size: .9em
}

#auth-page .form-control:focus {
    border: 1px solid var(--swish-primary-color);
    box-shadow: 0 0 0 .2rem var(--swish-input-shadow);
    -webkit-box-shadow: 0 0 0 .2rem var(--swish-input-shadow);
    -moz-box-shadow: 0 0 0 .2rem var(--swish-input-shadow)
}

#auth-page .form-control {
    background: #f7f8f9;
    border: 1px solid #ebeff6
}

#auth-page .box-rounded {
    border-radius: var(--swish-border-radius) !important;
    -moz-border-radius: var(--swish-border-radius) !important;
    -webkit-border-radius: var(--swish-border-radius) !important
}

#auth-page .overlay-background {
    background: url("../image/overlay.jpg") center/cover no-repeat;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0
}

#auth-page .form-group>label {
    color: var(--swish-primary-color);
    font-size: .9em;
    font-weight: 700
}

#auth-page .labelred {
    color: var(--swish-primary-color);
    font-size: .9em;
    font-weight: 700
}

#auth-page .sign-in {
    width: 100%;
    max-width: 550px
}

#auth-page .logo-image {
    max-height: 80px
}

#auth-page .logo {
    z-index: 2
}

#auth-page .forgot-password-text {
    font-size: .9em;
    font-weight: 700
}

#auth-page .form-control-lg {
    font-size: 1rem;
    height: calc(1.5em + 1.25rem + 2px)
}

#auth-page .message-box {
    z-index: 2;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#auth-page .overlay-background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: .94;
    background: var(--swish-primary-color)
}

/* 电脑版响应式：宽度大于 991px 时高度为 100vh */
@media (min-width: 992px) {
    #auth-page {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    #auth-page .container-fluid {
        height: 100% !important;
    }
    #auth-page .vh-100 {
        height: 100vh !important;
        min-height: 100vh !important;
    }
}

/* 手机响应式：高度调整为60%，布局改为垂直 */
@media (max-width: 991px) {
    #auth-page {
        height: 60vh !important;
        min-height: 60vh !important;
    }
    #auth-page .container-fluid {
        height: 100% !important;
    }
    #auth-page .vh-100 {
        height: 100% !important;
        min-height: 100% !important;
    }
    #auth-page .message-box {
        position: relative;
        left: 0;
        top: 0;
        transform: initial
    }
    /* 小于 992px 时改为垂直布局 */
    #auth-page .col-md-6,
    #auth-page .col-lg-4,
    #auth-page .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 小屏手机响应式 */
@media (max-width: 767px) {
    #auth-page {
        height: 60vh !important;
        min-height: 60vh !important;
    }
    #auth-page .container-fluid {
        height: 100% !important;
    }
    #auth-page .vh-100 {
        height: 100% !important;
        min-height: 100% !important;
    }
    #auth-page .message-box {
        position: relative;
        left: 0;
        top: 0;
        transform: initial
    }
    /* 小于 768px 时也保持垂直布局 */
    #auth-page .col-md-6,
    #auth-page .col-lg-4,
    #auth-page .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* 语言切换样式 */
.language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-switcher .dropdown {
    position: relative;
}

.language-switcher .lang-dropdown-btn {
    padding: 6px 12px;
    background-color: transparent;
    color: white;
    border-radius: var(--swish-border-radius);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    min-width: 100px;
    text-align: left;
}

.language-switcher .lang-dropdown-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.language-switcher .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: var(--swish-primary-color);
    border-radius: var(--swish-border-radius);
    box-shadow: var(--swish-box-shadow);
    min-width: 100px;
    z-index: 1001;
    padding: 4px 0;
}

.language-switcher .dropdown-item {
    padding: 8px 16px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
    display: block;
    text-decoration: none;
}

/* 下拉菜单显示状态 */
.language-switcher .dropdown-menu.show {
    display: block;
}

/* 下拉菜单项样式 */
.language-switcher .dropdown-item {
    white-space: nowrap;
}

/* 下拉菜单项悬停效果 */
.language-switcher .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* 下拉菜单项激活效果 */
.language-switcher .dropdown-item.active {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* 下拉菜单项点击效果 */
.language-switcher .dropdown-item:active {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Validation styles */
#auth-page .form-control.is-invalid {
    border-color: #dc3545;
    background-color: #f8d7da;
}

#auth-page .form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.25);
}

#auth-page .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: .25rem;
    font-size: .875rem;
    color: #dc3545;
}

/* Error message styles */
#auth-page .error-message {
    margin-left: 10px;
    color: red;
    font-size: 14px;
    display: block !important;
    visibility: visible !important;
}

#auth-page .error-message.sms-info {
    display: inline-block !important;
}

/* 密码输入框和眼睛图标样式 */
.password-input-wrapper {
    position: relative;
}
.password-input-wrapper .form-control {
    padding-right: 48px;
}
.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-toggle-btn:hover {
    color: #495057;
}
.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}
.eye-icon {
    width: 16px;
    height: 16px;
    display: block;
}

/* 闭眼图标 */
.eye-closed {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E") center/contain no-repeat;
    width: 16px;
    height: 16px;
    display: block;
}

/* 睁眼图标 */
.eye-open {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E") center/contain no-repeat;
    width: 16px;
    height: 16px;
    display: block;
}

/* 缩小 message-box 间距到 60% */
#auth-page .message-box h4 {
    margin-bottom: 0.9rem !important; /* 原来 1.5rem 的 60% */
}
#auth-page .message-box p {
    margin-bottom: 0.9rem !important; /* 原来 1.5rem 的 60% */
}
#auth-page .message-box .btn {
    margin-bottom: 1.5rem !important; /* 原来 1.5rem 的 60% */
}
/* 缩小 logo 区域的垂直间距 */
#auth-page .logo {
    padding-top: 1.5rem !important; /* 原来 py-4 的 60% */
    padding-bottom: 1.5rem !important;
}