/* ==========================================
   1. 全域變數與基礎設定
   ========================================== */
:root { 
    --brand-orange: #ff6b00; 
    --brand-light-orange: #fff5ed; 
    --error-red: #dc3545; 
}

body { 
    background-color: #f8f9fa; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    color: #333;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

/* --- 通用按鈕樣式 --- */
.btn-brand { background-color: var(--brand-orange); color: white; border: none; transition: 0.2s; }
.btn-brand:hover, .btn-brand:active { background-color: #e66000; color: white; }
.btn-brand:disabled { background-color: #e9ecef; color: #adb5bd; cursor: not-allowed; }

.btn-cancel { 
    background-color: #fff0f0; 
    color: var(--error-red); 
    border: none; 
    border-top: 1px solid #ffe0e0; 
    transition: 0.2s; 
}
.btn-cancel:hover { background-color: var(--error-red); color: white; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ==========================================
   2. 登入頁面與輸入框 (login.php)
   ========================================== */
.login-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 400px; border-radius: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); background: white; padding: 40px 30px; border: none; }
.login-icon-wrapper { width: 80px; height: 80px; background-color: var(--brand-light-orange); color: var(--brand-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 20px auto; box-shadow: 0 4px 10px rgba(255, 107, 0, 0.1); }

.custom-input-group { border: 1px solid #ced4da; border-radius: 0.375rem; overflow: hidden; background-color: white; display: flex; align-items: center; height: 50px; }
.custom-input-group .input-group-text,
.custom-input-group .form-control { border: none !important; background: transparent; box-shadow: none !important; height: 100%; }
.custom-input-group .input-group-text { color: var(--brand-orange); padding-left: 12px; }
.custom-input-group:focus-within { border-color: var(--brand-orange); box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25); }
.custom-input-group.is-invalid { border-color: var(--error-red) !important; }

label.error { display: block; color: var(--error-red); font-size: 12px; margin-top: 5px; margin-left: 5px; font-weight: bold; width: 100%; }

.captcha-box { cursor: pointer; border-radius: 0.375rem; overflow: hidden; height: 50px; border: 1px solid #ced4da; transition: 0.2s; }
.captcha-box:hover { border-color: var(--brand-orange); opacity: 0.9; }
.captcha-box img { height: 100%; width: auto; display: block; }


/* ==========================================
   3. 底部導覽列 (Bottom Navigation)
   ========================================== */
.bottom-nav { position: fixed; bottom: 0; width: 100%; background: white; border-top: 1px solid #eee; z-index: 1050; padding-bottom: env(safe-area-inset-bottom); }
.nav-item { cursor: pointer; color: #adb5bd; padding: 8px 0; font-size: 12px; text-decoration: none; display: block; text-align: center; }
.nav-item .icon { font-size: 1.5rem; line-height: 1.2; margin-bottom: 2px; }
.nav-item.active { color: var(--brand-orange); font-weight: bold; }


/* ==========================================
   4. 預訂頁面樣式 (index.php)
   ========================================== */
.vendor-tab { background-color: #eee; color: #666; border-radius: 50px; border: none; padding: 8px 20px; transition: 0.3s; white-space: nowrap; }
.vendor-tab.active { background-color: var(--brand-orange); color: white; }

/* 區塊化文字資訊 (對應菜單內容/備註) */
.info-section { background-color: #fcfcfc; border: 1px solid #f0f0f0; border-radius: 12px; padding: 12px 15px; margin-bottom: 15px; }
.info-title { font-size: 11px; font-weight: bold; color: #999; margin-bottom: 4px; letter-spacing: 0.5px; }
.info-body { font-size: 14px; color: #444; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.note-text { color: #777; font-size: 13px; font-style: italic; }


/* ==========================================
   5. 訂單紀錄與日期方塊 (orders.php)
   ========================================== */
.timeline-card { 
    display: flex; align-items: center; background: white; border-radius: 15px; 
    padding: 15px; margin-bottom: 12px; border: 1px solid #f0f0f0; transition: 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

/* [核心修正] 等大均勻版日期設計 */
.date-box { 
    background-color: var(--brand-light-orange); 
    color: var(--brand-orange); 
    border-radius: 12px; 
    width: 65px; 
    height: 62px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    margin-right: 15px; 
    flex-shrink: 0; 
}

.date-box .day { 
    font-size: 1.15rem; 
    font-weight: 800;   
    line-height: 1.2; 
    display: flex;
    letter-spacing: -0.2px;
}

.date-box .month { 
    font-size: 1.15rem; 
    font-weight: 800;
}

.date-box .weekday { 
    font-size: 0.75rem; 
    font-weight: bold;
    margin-top: 2px;
    opacity: 0.7;
}

/* 歷史紀錄灰階處理 */
.history-item { background-color: #fdfdfd; opacity: 0.85; }
.history-item .date-box { background-color: #f1f3f5; color: #868e96; }


/* ==========================================
   6. 帳號設定頁面 (settings.php)
   ========================================= */
.student-card { background: linear-gradient(135deg, #ff6b00 0%, #ff9500 100%); color: white; border-radius: 16px; box-shadow: 0 8px 20px rgba(255, 107, 0, 0.2); position: relative; overflow: hidden; }
.student-card::before { content: ''; position: absolute; top: -50px; left: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; }

/* 學生證內文字樣式 - 修復白色融合 */
.info-label { font-size: 0.75rem; opacity: 0.9; color: white !important; display: block; margin-bottom: 2px; }
.info-value { font-size: 1.1rem; font-weight: bold; color: white !important; }
.name-value { font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; color: white !important; }

.settings-list .list-group-item { border: none; padding: 16px 20px; border-radius: 12px !important; background-color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.03); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #555; }