/* 設定頁面的整體樣式 */
body {
    font-family: Arial, sans-serif;  /* 設定頁面文字使用 Arial 字型，若無則使用無襯線字型 */
    background-color: #f4f4f4;  /* 設定頁面背景顏色為淺灰色 */
    display: flex;  /* 使用彈性佈局（Flexbox）來排列元素 */
    justify-content: center;  /* 水平居中對齊容器中的元素 */
    align-items: center;  /* 垂直居中對齊容器中的元素 */
    height: 100vh;  /* 設定頁面高度為視窗高度的 100% */
    margin: 0;  /* 移除頁面預設的邊距，確保頁面佈局正確 */
}

/* 圖片樣式 */
.header-image {
    display: block;
    margin: 0 auto 20px auto;  /* 使圖片居中並設定下方間距 */
    width: 250px;  /* 設定圖片的寬度，根據需求調整 */
    height: auto;  /* 高度自動調整 */
}

/* 登入容器的樣式 */
.login-container {
    background-color: #feeede;  /* 設定容器背景為白色 */
    padding: 20px;  /* 為容器內部內容添加 20px 的內邊距 */
    border-radius: 8px;  /* 設定圓角效果，讓容器邊角圓滑 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 設定陰影效果，提升層次感 */
    width: 300px;  /* 設定容器的寬度為 300px */
}

/* 手機號碼輸入框的樣式 */
input[type="text"], input[type="password"]  {
    width: 90%;  /* 設定輸入框寬度為 100%，填滿父容器 */
    padding: 10px;  /* 為輸入框添加 10px 的內邊距 */
    margin: 10px auto;  /* 設定上下的外邊距為 10px，左右自動調整居中 */
    border: 1px solid #ccc;  /* 設定邊框為 1px 寬的灰色實線 */
    border-radius: 4px;  /* 設定圓角效果，讓輸入框邊角圓滑 */
    display: block;  /* 使輸入框顯示為塊級元素，以便居中 */
}

/* 按鈕容器的樣式 */
.button-group {
    display: flex;
    justify-content: space-between;  /* 使按鈕左右對齊 */
    gap: 10px;  /* 設定按鈕之間的間隔為 10px */
}

/* 登入按鈕的樣式 */
button {
    width: 100%;  /* 設定按鈕寬度為 100%，填滿父容器 */
    padding: 10px;  /* 為按鈕添加 10px 的內邊距 */
    background-color: #4CAF50;  /* 設定按鈕背景顏色為綠色 */
    color: white;  /* 設定按鈕文字顏色為白色 */
    border: none;  /* 移除按鈕邊框 */
    border-radius: 4px;  /* 設定圓角效果，讓按鈕邊角圓滑 */
    font-size: 16px;  /* 設定按鈕文字字體大小為 16px */
    cursor: pointer;  /* 設定當鼠標懸停在按鈕上時顯示為手指形狀 */
}

/* 當鼠標懸停在按鈕上時，改變背景顏色 */
button:hover {
    background-color: #45a049;  /* 改變背景顏色為較深的綠色 */
}

/* 錯誤訊息的樣式 */
.error {
    color: red;  /* 設定錯誤訊息的文字顏色為紅色 */
    font-size: 14px;  /* 設定錯誤訊息的字體大小為 14px */
    text-align: center;  /* 使錯誤訊息文字在水平方向居中 */
}

/* 忘記密碼連結樣式 */
.forgot-password {
    text-align: center;  /* 使連結文字在水平方向居中 */
    margin-top: 15px;  /* 設定上方間距為 15px */
}

.forgot-password a {
    color: #4CAF50;  /* 設定連結文字顏色為綠色，與按鈕顏色一致 */
    text-decoration: none;  /* 移除下劃線 */
    font-size: 14px;  /* 設定字體大小為 14px */
}

.forgot-password a:hover {
    text-decoration: underline;  /* 鼠標懸停時顯示下劃線 */
}

/* 成功訊息的樣式 */
.success {
    color: #4CAF50;  /* 設定成功訊息的文字顏色為綠色 */
    font-size: 14px;  /* 設定成功訊息的字體大小為 14px */
    text-align: center;  /* 使成功訊息文字在水平方向居中 */
    margin: 10px 0;  /* 設定上下邊距 */
    padding: 5px;  /* 設定內邊距 */
    background-color: rgba(76, 175, 80, 0.1);  /* 設定成功訊息的背景色為淺綠色 */
    border-radius: 4px;  /* 設定圓角效果 */
}

/* 調整form表單在忘記密碼頁面的高度 */
.login-container form {
    max-height: 500px;  /* 設定最大高度 */
    overflow-y: auto;  /* 如果內容過多，顯示垂直滾動條 */
}

/* 必填項標記 */
.required:after {
    content: " *";  /* 在元素後面添加星號 */
    color: red;  /* 設定星號的顏色為紅色 */
}

/* 額外提示文字樣式 */
.form-hint {
    font-size: 12px;  /* 設定提示文字的字體大小為 12px */
    color: #777;  /* 設定提示文字的顏色為灰色 */
    margin-top: -5px;  /* 設定上邊距，將提示文字靠近輸入框 */
    margin-bottom: 10px;  /* 設定下邊距 */
    text-align: left;  /* 使提示文字在水平方向左對齊 */
    padding-left: 5px;  /* 設定左邊內邊距 */
}

.password-wrapper {
    position: relative;
}
.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}