/**
 * 登入/註冊視窗專用樣式
 * 用於覆蓋原有配色，使所有頁面的登入/註冊視窗與 VIP 頁面一致
 */

/* Modal 背景 */
#loginModal .reg-log-modal {
    background-color: #222121 !important;
    border-radius: 20px;
}

@media (max-width: 768px) {
    #loginModal .reg-log-modal {
        border-radius: 0;
        height: 100%;
    }
}

/* 輸入框樣式 */
#loginModal .o-input,
#loginModal .k-input {
    background-color: #121212 !important;
    border-color: #303030 !important;
    color: #f4f4f5 !important;
}

#loginModal .o-input:focus,
#loginModal .k-input:focus,
#loginModal .o-input.focus,
#loginModal .k-input.focus {
    background-color: #121212 !important;
    border-color: #3c4363 !important;
}

/* 輸入框 autofill 樣式 */
#loginModal .o-input:-webkit-autofill,
#loginModal .o-input:-webkit-autofill:hover,
#loginModal .o-input:-webkit-autofill:focus,
#loginModal .o-input:-webkit-autofill:active,
#loginModal .k-input:-webkit-autofill,
#loginModal .k-input:-webkit-autofill:hover,
#loginModal .k-input:-webkit-autofill:focus,
#loginModal .k-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f4f4f5 !important;
    -webkit-box-shadow: 0 0 0 30px #121212 inset !important;
}

/* 輸入框 placeholder 顏色 */
#loginModal .o-input::placeholder,
#loginModal .k-input::placeholder {
    color: #a1a1a9 !important;
}

/* 輸入框前的 icon 顏色 */
#loginModal .new-reg-input-wrapper i:before {
    color: #a1a1a9 !important;
}

/* 密碼顯示/隱藏 icon */
#loginModal .password_icon,
#loginModal .o-input-wrapper .o-icon {
    color: #a1a1a9 !important;
}

#loginModal .password-eye-icon:before {
    color: #a1a1a9 !important;
}

/* Modal 標題 */
#loginModal .modal_title,
#loginModal .text-auth-title {
    color: #f4f4f5 !important;
}

/* 忘記密碼按鈕 */
#loginModal .new_btn_modal_forgot_password {
    color: #a1a1a9 !important;
}

#loginModal .new_btn_modal_forgot_password:hover {
    color: #f4f4f5 !important;
}

/* 沒有帳號 文字 */
#loginModal .dont-have-account-text,
#loginModal .dont-have-account-text div {
    color: #a1a1a9 !important;
}

/* 創建帳戶 連結 */
#loginModal .create-account-text {
    color: var(--primary) !important;
}

/* 一般文字顏色 */
#loginModal .reg-log-modal,
#loginModal .reg-log-modal div,
#loginModal .reg-log-modal span,
#loginModal .reg-log-modal label {
    color: #f4f4f5;
}

/* 星號必填標記 */
#loginModal .star-danger {
    color: var(--danger) !important;
}

/* 登入按鈕 - 橘黃色 */
#loginModal .btn.primary {
    background: #f7a41b !important;
    border: 1.5px solid #f7a41b !important;
    color: #222121 !important;
}

#loginModal .btn.primary:hover {
    background: #e5950f !important;
    border-color: #e5950f !important;
}

/**
 * 註冊視窗樣式 - 與登入視窗一致
 */

/* Modal 背景 */
#registerModal .reg-log-modal {
    background-color: #222121 !important;
    border-radius: 20px;
}

@media (max-width: 768px) {
    #registerModal .reg-log-modal {
        border-radius: 0;
        height: 100%;
    }
}

/* 輸入框樣式 */
#registerModal .o-input,
#registerModal .k-input {
    background-color: #121212 !important;
    border-color: #303030 !important;
    color: #f4f4f5 !important;
}

#registerModal .o-input:focus,
#registerModal .k-input:focus,
#registerModal .o-input.focus,
#registerModal .k-input.focus {
    background-color: #121212 !important;
    border-color: #3c4363 !important;
}

/* 輸入框 autofill 樣式 */
#registerModal .o-input:-webkit-autofill,
#registerModal .o-input:-webkit-autofill:hover,
#registerModal .o-input:-webkit-autofill:focus,
#registerModal .o-input:-webkit-autofill:active,
#registerModal .k-input:-webkit-autofill,
#registerModal .k-input:-webkit-autofill:hover,
#registerModal .k-input:-webkit-autofill:focus,
#registerModal .k-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f4f4f5 !important;
    -webkit-box-shadow: 0 0 0 30px #121212 inset !important;
}

/* 輸入框 placeholder 顏色 */
#registerModal .o-input::placeholder,
#registerModal .k-input::placeholder {
    color: #a1a1a9 !important;
}

/* 輸入框前的 icon 顏色 */
#registerModal .new-reg-input-wrapper i:before {
    color: #a1a1a9 !important;
}

/* 密碼顯示/隱藏 icon */
#registerModal .password_icon,
#registerModal .o-input-wrapper .o-icon {
    color: #a1a1a9 !important;
}

#registerModal .password-eye-icon:before {
    color: #a1a1a9 !important;
}

/* Modal 標題 */
#registerModal .text-auth-title {
    color: #f4f4f5 !important;
}

/* 一般文字顏色 */
#registerModal .reg-log-modal,
#registerModal .reg-log-modal div,
#registerModal .reg-log-modal span,
#registerModal .reg-log-modal label {
    color: #f4f4f5;
}

/* 星號必填標記 */
#registerModal .star-danger {
    color: var(--danger) !important;
}

/* checkbox 文字 */
#registerModal .o-checkbox-wrapper,
#registerModal .o-checkbox-label {
    color: #f4f4f5 !important;
}

/* 已有帳戶 文字 */
#registerModal .flex.justify-center.gap-2 div {
    color: #a1a1a9 !important;
}

/* 登入 連結 */
#registerModal .flex.justify-center.gap-2 a {
    color: var(--primary) !important;
}

/* 註冊按鈕 - 橘黃色 */
#registerModal .btn.primary {
    background: #f7a41b !important;
    border: 1.5px solid #f7a41b !important;
    color: #222121 !important;
}

#registerModal .btn.primary:hover {
    background: #e5950f !important;
    border-color: #e5950f !important;
}