/* 通用容器樣式 (與其他頁面樣式一致) */
/* HTML 中的外部容器，提供基本結構 */

/* 頁面容器，用於內容居中 (與其他頁面樣式一致) */
/* 此元素將處理垂直和水平居中 */
.login-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 80vh;*/ /* 確保足夠的高度來居中 */
    /* max-width: 800px; 移除外部容器的最大寬度 */
    width: 100%; /* 如果容器更寬，允許它佔據全部寬度 */
    /* padding: 20px; 內邊距已移至內部容器 */
    /* background-color: #f8f9fa; 可選：如果需要，添加背景色 */
}

/* 表單容器樣式 (卡片效果，與其他頁面樣式一致) */
/* 這就是 "卡片" 元素 */
.login-container {
    background-color: #fff; /* 白色背景 */
    border-radius: 8px; /* 較柔和的圓角 (原為 12px, 統一為 8px) */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 較柔和的陰影 (原為 0 4px 20px) */
    padding: 40px; /* 更寬裕的內邊距 (原為 30px) */
    width: 100%;
   /* max-width: 700px;*/ /* 登入頁通常需要更寬，因為是兩欄 */
    text-align: center; /* 內部文本居中對齊 */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; 移除卡片懸停效果 */
}

/* 移除卡片懸停效果 */
/*.login-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    }*/

/* 頁面標題樣式 */
.login-title {
    display: none; /* 隱藏，與其他頁面風格一致，使用 section-title 作為可見標題 */
    /*font-size: 1.8em;*/ /* 原樣式保留，但因 display: none 故不顯示 */
    /*font-weight: 600;*/
    /*color: #2c3e50;*/
    /*text-align: center;*/
    /*margin-bottom: 30px;*/
    /*letter-spacing: 0.5px;*/
}

/* 兩欄佈局 */
.login-columns {
    display: flex;
    align-items: stretch; /* 使兩列等高 */
    gap: 40px; /* 增加列之間的間隙 */
}

.local-login,
.external-logins {
    flex: 1;
    min-width: 0; /* 防止內容溢出 Flex 項目 */
}

/* 垂直分隔線 */
.separator {
    width: 1px;
    background: #ced4da; /* 與輸入框邊框顏色一致 */
    margin: 0 20px; /* 調整分隔線的左右邊距 */
}

/* 區塊標題樣式 (與其他頁面樣式一致) */
.section-title {
    font-size: 1.8rem; /* 與其他頁面標題大小一致 */
    font-weight: 600; /* 與其他頁面標題字重一致 */
    color: #007bff; /* 與其他頁面主色調一致 */
    margin-bottom: 25px; /* 調整標題下方邊距 */
    text-align: center; /* 區塊標題居中 */
    /* font-size: 1.2em; 移除原樣式 */
    /* font-weight: 500; 移除原樣式 */
    /* color: #34495e; 移除原樣式 */
}

/* 本地登入表單 */
/* .local-login 保留 flex: 1; min-width: 0; */


/* 表單組樣式 (與其他頁面樣式一致) */
.form-group {
    margin-bottom: 20px; /* 與其他頁面表單組邊距一致 */
    text-align: left; /* 標籤和輸入框靠左對齊 */
}

/* 標籤樣式 (與其他頁面樣式一致) */
.form-label {
    display: block;
    margin-bottom: 8px; /* 與其他頁面標籤邊距一致 */
    color: #495057; /* 與其他頁面標籤顏色一致 */
    font-size: 1rem; /* 與其他頁面標籤大小一致 */
    font-weight: 500; /* 與其他頁面標籤字重一致 */
    /* font-size: 0.95em; 移除原樣式 */
    /* color: #34495e; 移除原樣式 */
}

/* 輸入框樣式 (與其他頁面樣式一致) */
.form-control {
    width: 100%;
    padding: 12px 15px; /* 與其他頁面輸入框內邊距一致 (原為 12px) */
    border: 1px solid #ced4da; /* 與其他頁面邊框顏色一致 (原為 #dfe6e9) */
    border-radius: 4px; /* 與其他頁面圓角一致 (原為 8px) */
    font-size: 1.1rem; /* 與其他頁面輸入框大小一致 (原為 1em) */
    color: #333; /* 與其他頁面文本顏色一致 (原為 #2c3e50) */
    background: #fff; /* 與其他頁面背景一致 (原為 #f9fbfc) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 與其他頁面過渡效果一致 */
}

    .form-control:focus {
        outline: none;
        border-color: #007bff; /* 與其他頁面焦點邊框顏色一致 (原為 #3498db) */
        box-shadow: 0 0 0.25rem rgba(0, 123, 255, 0.25); /* 與其他頁面焦點陰影一致 (原為 0 0 8px rgba(52, 152, 219, 0.2)) */
    }

/* 複選框樣式 */
.checkbox {
    margin-bottom: 20px; /* 與其他表單組邊距一致 */
}

    .checkbox label {
        color: #6c757d; /* 與其他頁面灰色文本顏色一致 (原為 #34495e) */
        font-size: 0.95rem; /* 與其他頁面較小文本大小一致 (原為 0.9em) */
        cursor: pointer;
    }

/* 本地登入按鈕樣式 (與其他頁面主要按鈕風格一致) */
.local-login-button {
    width: 100%;
    padding: 12px; /* 與其他頁面按鈕內邊距一致 */
    border: none;
    border-radius: 4px; /* 與其他頁面圓角一致 (原為 8px) */
    background: #007bff; /* 主要按鈕使用藍色 (原為漸變色) */
    color: #ffffff;
    font-size: 1.2rem; /* 與其他頁面按鈕大小一致 (原為 1em) */
    font-weight: 600; /* 與其他頁面按鈕字重一致 (原為 500) */
    cursor: pointer;
    transition: background-color 0.3s ease; /* 過渡效果 (原為 background 0.3s ease, transform 0.2s ease) */
    /* background: linear-gradient(90deg, #3498db 0%, #2980b9 100%); 移除原漸變色 */
}

    .local-login-button:hover {
        background-color: #0056b3; /* 與其他頁面按鈕懸停顏色一致 (原為另一種漸變色並帶 transform) */
        /* background: linear-gradient(90deg, #2980b9 0%, #2c3e50 100%); 移除原懸停樣式 */
        /* transform: translateY(-2px); 移除原懸停效果 */
    }

/* 錯誤文字樣式 (與其他頁面樣式一致) */
.text-danger {
    color: #dc3545; /* 與其他頁面錯誤文本顏色一致 (原為 #e74c3c) */
    font-size: 0.875rem; /* 與其他頁面錯誤文本大小一致 (原為 0.85em) */
    margin-top: 5px;
    display: block;
}

/* 連結群組樣式 (與其他頁面樣式一致) */
.links-group {
    text-align: center; /* 連結群組居中 (原為 center) */
    margin-top: 25px; /* 與其他頁面連結群組邊距一致 (原為 無特定定義) */
    font-size: 0.95rem; /* 與其他頁面連結群組字體大小一致 */
}

    .links-group p {
        margin: 10px 0; /* 與其他頁面段落邊距一致 (原為 8px 0) */
        font-size: 0.95rem; /* 確保段落字體大小一致 */
        color: #6c757d; /* 與其他頁面灰色調一致 */
    }

    .links-group a {
        color: #007bff; /* 與其他頁面連結顏色一致 (原為 #3498db) */
        text-decoration: none;
        font-weight: 500; /* 與其他頁面連結字重一致 */
        transition: color 0.2s ease;
        /* font-size: 0.9em; 移除原樣式 */
    }

        .links-group a:hover {
            color: #0056b3; /* 與其他頁面連結懸停顏色一致 (原為 #2980b9) */
            text-decoration: underline;
        }

/* 第三方登入區塊 */
/* .external-logins 保留 flex: 1; min-width: 0; */

/* 第三方登入按鈕容器 */
.external-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 保持按鈕間距 */
}

/* 第三方登入按鈕樣式 (與其他頁面輸入框/通用按鈕風格一致) */
.external-login-button {
    width: 100%;
    padding: 12px 15px; /* 與其他頁面輸入框內邊距一致 (原為 12px) */
    border: 1px solid #ced4da; /* 與其他頁面邊框顏色一致 (原為 #dfe6e9) */
    border-radius: 4px; /* 與其他頁面圓角一致 (原為 8px) */
    text-decoration: none;
    font-size: 1.1rem; /* 與其他頁面輸入框/按鈕大小一致 (原為 0.95em) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057; /* 與其他頁面標籤/文本顏色一致 (原為 #2c3e50) */
    background: #fff; /* 與其他頁面背景一致 */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* 過渡效果 (移除 transform) */
    box-shadow: none; /* 移除陰影，與其他頁面卡片內元素風格一致 (原為 0 2px 5px rgba(0, 0, 0, 0.05)) */
    /* transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease; 移除原過渡 */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 移除原陰影 */
}

    .external-login-button:hover {
        background: #f8f9fa; /* 懸停背景色 */
        border-color: #b0c4de; /* 懸停邊框顏色 */
        /* transform: translateY(-2px); 移除懸停效果 */
    }

    .external-login-button i,
    .external-login-button svg {
        margin-right: 10px; /* 保持圖標間距 */
        flex-shrink: 0;
        flex-grow: 0;
    }

    .external-login-button svg {
        width: 24px; /* 保持 SVG 大小 */
        height: 24px;
    }

    /* 保持特定第三方圖標的顏色 */
    .external-login-button i.fab.fa-apple,
    .external-login-button i.fab.fa-x-twitter {
        color: #000000;
    }

    .external-login-button i.fab.fa-facebook-f {
        color: #1877F2;
    }

    .external-login-button i.fas {
        color: #7f8c8d;
    }

/* 警告框樣式 (與其他頁面樣式一致) */
.alert {
    padding: 12px 20px; /* 調整內邊距 (原為 10px) */
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95rem; /* 調整字體大小 (原為 0.9em) */
    text-align: left; /* 警告框通常靠左對齊 */
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success { /* 添加成功警告框樣式，與其他頁面一致 */
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}


/* 響應式設計 (與其他頁面樣式一致) */
@media (max-width: 768px) { /* 使用 768px 斷點 */
    .login-columns {
        flex-direction: column; /* 在小螢幕上改為垂直堆疊 */
        gap: 20px; /* 調整堆疊時的間距 */
    }

    .separator {
        display: none; /* 在堆疊時隱藏分隔線 */
    }

    .local-login,
    .external-logins {
        width: 100%; /* 佔滿寬度 */
        /* flex: 1; 可以在堆疊時移除或調整 */
    }

    .login-container {
        padding: 30px; /* 調整內邊距 */
        max-width: 95%; /* 在較小螢幕上允許更寬 */
    }

    /*.login-title {*/ /* 如果沒有隱藏，可以在這裡調整 */
    /*font-size: 2rem;*/
    /*}*/

    .section-title {
        font-size: 1.6rem; /* 調整標題大小 */
        margin-bottom: 20px; /* 調整下方邊距 */
    }

    /*.instructions {*/ /* 如果有說明文字，可以在這裡調整 */
    /*font-size: 1rem;*/
    /*}*/

    .form-control {
        padding: 10px 12px; /* 調整輸入框內邊距 */
        font-size: 1rem; /* 調整輸入框大小 */
    }

    .local-login-button,
    .external-login-button {
        font-size: 1.1rem; /* 調整按鈕大小 */
        padding: 10px; /* 調整按鈕內邊距 */
    }

        .external-login-button i,
        .external-login-button svg {
            margin-right: 8px; /* 調整圖標間距 */
        }

        .external-login-button svg {
            width: 20px; /* 調整 SVG 大小 */
            height: 20px;
        }

    .links-group {
        margin-top: 20px; /* 調整連結群組邊距 */
    }

    .alert { /* 調整警告框內邊距 */
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}

/* 可選：針對非常小螢幕的額外調整 */
@media (max-width: 400px) {
    .login-container {
        padding: 20px;
    }
    /*login-title {*/ /* 如果沒有隱藏，可以在這裡調整 */
    /*font-size: 1.8rem;*/
    /*}*/
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    /*.instructions {*/ /* 如果有說明文字，可以在這裡調整 */
    /*font-size: 0.95rem;*/
    /*}*/
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        padding: 8px 10px;
        font-size: 0.95rem;
    }

    .local-login-button,
    .external-login-button {
        padding: 8px;
        font-size: 1rem;
    }

    .links-group {
        margin-top: 15px;
    }

        .links-group p {
            margin: 8px 0;
            font-size: 0.9rem;
        }

    .alert { /* 調整警告框內邊距 */
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}