/* 定義全域變數：Thomas Dance 品牌配色 */
:root { --brand-orange: #d85d2b; --brand-blue: #001f3f; --soft-gray: #f8f9fa; 
	--prog-action: 100px; 
        --primary-orange: #d85d2b; --deep-blue: #001f3f; --bg-color: #f0f2f5;
        --text-main: #2c3e50; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
	Roboto, sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; }
/* app form專用皮膚-放在這邊比較優先(後面) */
div.debug { display:flex; position:sticky; width:98%; top:0; margin: 0 auto; 
	min-height:72px; border-radius:8px; font-size:15px; } /* #e53e00 */
/* 1.top css */
.topouter { display: flex; position: sticky; top: 0; width: 100%;
	background: linear-gradient(135deg, var(--brand-blue) 0%, #003366 100%);
	color: white; min-height: 55px; align-items: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; }
.topleft { width: 25%; padding-left: 8px; }
.topleft a { color: white; text-decoration: none; font-size: 14px; }
.topmiddle { display: flex; width: 50%; flex-direction: column; 
	align-items: center; text-align: center; }
.topright { width: 25%; padding-right: 8px; align-items: center; text-align: right; justify-content:right; }
.top-main { font-size: 18px; font-weight: bold; letter-spacing: 1px; }
.top-sub { font-size: 12px; } /* opacity: 0.8; */
.topgolink { font-size:15px; color: white; }
.topgolink:hover { color:darkblue; font-weight:bold; background-color:#ffe8e0; } /* #ffc7b2 */ 
.redbold { color:red; font-weight:bold; }
.lineinterval { width:100%; height:6px; color:#F5F5F5; }

/* program 內容顯示定義 */
.prog-info { display: flex; width: 100%; height: 100%; 	
	background-color: white; text-decoration: none; 
	border-radius: 15px 0px 0px 15px; box-sizing: border-box; 
	text-align:left; justify-content:left; align-items:flex-start; }
.prog-info1 { width: 75%; height: 100%; padding: 0px 0px 0px 3px; }
.prog-info2 { width: 25%; height: 100%; padding: 0px 8px 0px 0px; 
 	display: flex; flex-direction: column; justify-content: center; /* 垂直置中 */
    	align-items: flex-end; font-size: 15px; font-weight: 600;  
    	line-height: 1.4; color: #444; text-align: right; }
/* 針對「未報到」紅字加強 */
.prog-info2 font[style*="color:red"] { font-weight: 800; margin-bottom: 2px; } 
.prog-name { display: block; font-size: 18px; font-weight: 800;
	color: var(--brand-blue); margin: 3px 0px 3px 14px; } 
.prog-meta { font-size: 15px; color: #666; line-height: 1.5; margin: 0px 0px 3px 14px; }
.prog-meta i { color: var(--brand-orange); width: 20px; }
.prog-action { display: flex; flex-direction: column; width: 100%; height: 100%; 	
	background-color: white; text-decoration: none; 
	border-radius: 0px 15px 15px 0px; box-sizing: border-box; text-align:center; 
	justify-content:center; align-items:center; color: var(--brand-blue); 
	font-size: 15px; font-weight: 600; } 

/* 頁碼導覽 */
.pagenation { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.page-node { display: flex; width: 38px; height: 38px; line-height: 38px; 
	text-align: center; justify-content: center; border-radius: 50%; background: #ddd;
 	color: darkblue; font-size: 18px; cursor: pointer; }
.page-node.active { background: var(--deep-blue); color: white; }

/* 備註說明區 */
.notice { display: block; background-color: #ffffff; border-radius: 12px; 	
	padding: 16px; width: 96%; margin: 15px auto; 
	box-sizing: border-box; border-left: 5px solid var(--brand-blue);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	line-height: 1.8; font-size: 16px; color: #666; }
.notice-title { font-weight: bold; color: var(--brand-blue); margin-bottom: 8px; 
	display: flex; align-items: center; }
.notice-title i { margin-right: 8px; }/* 底部按鈕區 */
.notice-card { background: linear-gradient(135deg, #002d5b 0%, #001f3f 100%);
	color: white; border-radius: 16px; padding: 18px;
	margin-bottom: 25px; box-shadow: 0 6px 15px rgba(0,31,63,0.2); }
.notice-card h3 { margin: 0 0 10px 0; font-size: 16px; color: #ffeb3b; }
.notice-card p { margin: 5px 0; font-size: 13px; line-height: 1.5; opacity: 0.9; }
.newline { white-space: pre-line; }

/* 底部動態結帳列 */
.bottomouter { display: flex; position: fixed; bottom: 0; left: 0; right: 0; 
	background-color: #f0f2f5; justify-content: center; align-items: center;
	border-top: 1px solid #eee; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); 
	width: 100%; box-sizing: border-box; }
.bottom-bar { display: flex; justify-content: center; align-items: center; 
    	width: 96%; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
	background: rgba(0, 31, 63, 0.95); padding: 6px 0px; 
	backdrop-filter: blur(10px); border-radius: 20px; box-sizing: border-box; }
/* 訂課小計區 */
.summary-text { line-height: 1.5; width: 35%; font-size: 13px; box-sizing: border-box; padding: 0 0 0 6px; }
.summary-mid { line-height: 1.5; width: 30%; text-align:center; justify-content:center; box-sizing: border-box; }
.summary-right { line-height: 1.5; width: 35%; text-align:right; justify-content:right; 	align-items:center; box-sizing: border-box; padding: 0 6px 0 0; }
.total-price { font-size: 24px; font-weight: 800; color: #ffcc00; }
.btn-checkout { background: var(--brand-orange); color: white; 
	padding: 10px 20px; border-radius: 12px;
	text-decoration: none; font-weight: bold;
	box-shadow: 0 4px 10px rgba(216, 93, 43, 0.4); }

/* 處理後訊息回覆格式 */
div.outer { display:flex; position:fixed; top:30%; width:100%; text-align:center; 
	justify-content:center; }
div.message { display:flex; width:180px; min-height:60px; background-color:#f0f0f0; 
	border:1px solid #d4d4d4; border-radius:8px; box-shadow: 2px 2px 2px gray;
 	text-align:center; justify-content:center; 	align-items:center; font-size:16px; 
	font-weight: bold; color:red; }
div.response { display:flex; width:180px; min-height:60px; background-color:#f0f0f0; 
	border:1px solid #d4d4d4; border-radius:8px; box-shadow: 2px 2px 2px gray;
 	text-align:center; justify-content:center; 	align-items:center; font-size:16px; 
	font-weight: bold; color:red; }

/* a:link { color:black; } */
a { font-style:normal; font-variant:normal; font-weight:normal; 	text-decoration:none; }
/* a:link { color:black; } */
a:hover { color:darkblue; font-weight:bold; background-color:#dce5f9; }
a:active { color:#FFFF66; }
a:visited { color:black; font-weight:bold; }