/* 註冊 & 登入頁面 */
.auth-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    margin: auto;
}

.auth-section h2 {
    color: #0e067f;
    border-bottom: 2px solid #0e067f;
    padding-bottom: 5px;
}

.auth-section form {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.auth-section label {
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
}

/*
.auth-section input {
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
    */

.auth-section .btn {
    background: #0e067f;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.auth-section .btn:hover {
    background: #1E706D;
}

.auth-section p {
    margin-top: 10px;
}

.auth-section a {
    color: #E76F51;
    text-decoration: none;
}

.auth-section a:hover {
    text-decoration: underline;
}


/* 美化下拉選單 */
.auth-section select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: white;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: 0.3s;
    appearance: none;
    /* 隱藏默認樣式 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="gray"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

.auth-section select:focus {
    border-color: #E76F51;
    outline: none;
    box-shadow: 0 0 5px rgba(231, 111, 81, 0.5);
}

.auth-section option {
    padding: 10px;
}

/* 適配小屏幕 */
@media (max-width: 400px) {
    .auth-section select {
        font-size: 14px;
    }
}

/* 錯誤訊息 */
.error-msg {
    color: #E63946;
    background: #FFE5E5;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px;
}

/* 成功訊息 */
.success-msg {
    color: #2A9D8F;
    background: #E5F7F0;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px;
}

/* 驗證碼欄位 */
.auth-section label[for="captcha"] {
    font-weight: bold;
    margin-top: 10px;
    display: block;
}

.auth-section input#captcha {
    width: 100%;
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.radio-group {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    accent-color: #2A9D8F;
    /* 修改 radio 選中顏色 */
}

.auth-section input {
    width: 100%;
    /* 確保所有輸入框佔滿容器 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    /* 讓 padding 內縮不影響總寬度 */
}

.password-container {
    position: relative;
    width: 100%;
    /* 確保與帳號欄位等寬 */
}

.password-container input {
    width: 100%;
    padding: 10px;
    padding-right: 40px;
    /* 給眼睛圖示留空間 */
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    /* 讓 padding 內縮不影響總寬度 */
}

/* 眼睛圖示 */
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #aaa;
}

.toggle-password:hover {
    color: #555;
}

/* 記住我 Checkbox 樣式 */
.remember-me-container {
    display: flex;
    align-items: center;
    gap: 5px;
    /* 讓 Checkbox 和文字有點間距 */
    margin-top: 10px;
    /* 與上方的密碼輸入框保持距離 */
}

/* 確保 Checkbox 正確對齊 */
.remember-me-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}