/*
 * 康盈中英文幼稚園幼兒中心 - 簡化樣式表
 * 來源於提供的 style.css 和 header.css 資訊
 */

/* -------------------- 共通樣式 -------------------- */
*{
    /* 根據 style.css 設定字體 */
    font-family: "Microsoft YaHei", "微軟雅黑", "PingFang TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    list-style-type: none;
    font-weight: normal;
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* RWD 關鍵：確保 padding/border 不增加元素總寬度 */
}

body {
    /* 模擬網站的輕盈背景 */
    background-color: #f9f9f9; 
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

.clear:after {
    content: "";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

.left{ float: left; }
.right{ float: right; }

/* -------------------- 網站標頭 (Header) 樣式 -------------------- */
.header {
    /* 根據 style.css 設定高度和顏色 */
    color: #fefba7; /* 黃色標題文字 */
    height: 150px;
    position: relative;
    background-color: #004c8c; /* 模擬深藍色背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top {
    height: 84px;
    position: relative;
    z-index: 20;
    padding: 0 20px;
}

.top_logo {
    width: 130px; /* 假設 Logo 佔用空間 */
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

.name {
    font-size: 20pt;
    line-height: 84px;
    margin-left: 15px;
}

.name span {
    vertical-align: middle;
}

/* -------------------- 內文及表單容器 -------------------- */
.content_body {
    max-width: 900px; /* 限制內容寬度 */
    margin: 20px auto;
    padding: 0 15px;
}

/* 通用表單容器 */
.form-container {
    padding: 20px;
    background-color: #ffffff; /* 確保表單內容區有白色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

h1 {
    font-size: 24pt;
    color: #004c8c;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

h2 {
    font-size: 18pt;
    color: #004c8c;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #004c8c;
}

/* 表單組 (用於分組標籤和輸入欄位) */
.form-group {
    margin-bottom: 15px; 
}

/* 標籤樣式 */
.form-group label {
    display: block; /* 讓 label 獨佔一行 */
    margin-bottom: 5px;
    font-weight: bold;
    color: #333333; /* 標準文字顏色 */
}

/* 輸入框和下拉選單樣式 */
.form-group input[type="text"], 
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group input[type="file"], /* 讓檔案選擇欄位也有基礎寬度 */
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-sizing: border-box; /* 確保 padding 不會增加整體寬度 */
    font-size: 11pt;
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

.form-group label {
    line-height: 1.5;
}

/* -------------------- 步驟指示器 (Step Indicator) -------------------- */
.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    text-align: center;
}

.step-box {
    flex-basis: 33%;
    position: relative;
    padding: 0 5px; 
}

/* 步驟之間的連接線 */
.step-box:not(:last-child):after {
    content: '';
    position: absolute;
    top: 15px;
    /* 計算線的起點：從圓心 (50%) 偏移圓半徑 (15px) */
    left: calc(50% + 15px); 
    /* 計算線的長度 */
    width: calc(100% - 30px);
    height: 2px;
    background-color: #ccc;
    z-index: 0;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    color: white;
    line-height: 30px;
    margin: 0 auto 5px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
    border: 3px solid #ccc;
    position: relative; /* 確保在連接線之上 */
    z-index: 1;
}

/* 活躍步驟的樣式 */
.step-box.active .step-circle {
    background-color: #004c8c; /* 使用網站主色調 */
    border-color: #004c8c;
}

/* 已完成步驟的樣式 */
.step-box.done .step-circle {
    background-color: #2ecc71; /* 成功綠色 */
    border-color: #2ecc71;
}

.step-title {
    font-size: 10pt;
    color: #888;
    transition: color 0.3s;
}

.step-box.active .step-title {
    color: #004c8c;
    font-weight: bold;
}

/* -------------------- 導航按鈕 -------------------- */
.form-navigation {
    margin-top: 30px;
    text-align: right;
}

.form-navigation button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11pt;
    font-weight: bold;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.prev-btn {
    background-color: #f39c12; /* 橘色 */
    color: white;
}

.prev-btn:hover {
    background-color: #e67e22;
}

.next-btn, .submit-btn {
    background-color: #004c8c; /* 主色調深藍 */
    color: white;
}

.next-btn:hover, .submit-btn:hover {
    background-color: #003d73;
}


/* -------------------- 整合自 HTML 內聯樣式 (錯誤/證件) -------------------- */
/* 新增：欄位下方即時錯誤訊息的樣式 */
.field-error {
    color: #e74c3c; /* 紅色 */
    font-size: 10pt;
    display: none; /* 預設隱藏 */
    margin-top: 5px;
    font-weight: bold;
}

/* 讓輸入框在驗證失敗時有紅色邊框 */
.form-group input.invalid, 
.form-group select.invalid, 
.form-group textarea.invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

/* 修正總錯誤訊息排版，確保中英排版正確 */
#error-message {
    color: white;
    background-color: #e74c3c; 
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 12pt;
    display: none; /* 確保初始隱藏 */
}

#error-message strong {
    font-weight: bold;
}

/* 隱藏/顯示區塊的過渡動畫 (選用) */
.id-input-group {
     transition: all 0.3s ease-in-out;
     overflow: hidden;
}

/* 成功訊息的綠色背景 */
#error-message.success { 
     background-color: #2ecc71; 
}

/* 針對 HK 證件號碼的 flex 容器樣式 */
.hk-cert-inputs {
    display: flex;
    align-items: center;
}

.hk-cert-inputs input {
    flex-grow: 1; /* 主號碼佔大部分空間 */
    max-width: 250px; /* 限制主號碼寬度 */
}

/* **校驗碼輸入框寬度修正** */
.hk-cert-inputs .check-digit {
    flex-grow: 0;
    width: 30px !important; /* 已縮短 */
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

/* ... (原有的 CSS 內容) ... */


/* -------------------- 響應式佈局調整 (RWD - 手機尺寸) -------------------- */

@media (max-width: 768px) {
    /* 調整主要容器以更好地適應手機寬度 */
    .application-container {
        padding: 15px;
    }

    /* 確保輸入框在手機上佔滿寬度 */
    .form-group input:not([type="checkbox"]):not([type="radio"]), 
    .form-group select, 
    .form-group textarea {
        width: 100%;
        max-width: none;
    }

    /* 根據使用者要求：手機尺寸時，導航按鈕固定寬度為 120px */
    .form-navigation button {
        width: 100%;
    }
    
    /* 可選：確保上一步 (left) 按鈕和下一步/提交 (right) 按鈕在手機上都能正確顯示 */
    .form-navigation .left {
        float: none;
        margin-right: 10px; /* 增加按鈕之間的間距 */
        margin-bottom: 10px;
        margin-left: 0px;
    }

    .form-navigation .right {
        float: none;
        margin-bottom: 10px;
        margin-left: 0px;
    }
}