/* 補充樣式 */
.redFont {
	color: #ff0000 !important;
	font-weight: 600;
}

.greenFont {
	color: #00754a !important;
	font-weight: 600;
}

.blueFont {
	color: #0026ff !important;
	font-weight: 600;
}

.grayFont {
	color: #555555 !important;
	font-weight: 600;
}

.warningText,
.field-validation-error {
	color: #ff0000 !important;
	font-size: 14px;
	font-weight: 600;
	margin-left: 5px;
	display: inline-block;
}

/* --客製化提示的CSS--------------------------------- */
.customAlertUI {
	border-radius: 8px;
	display: block;
	font-size: 16px !important;
	font-weight: 500;
	margin: 0 auto 24px;
	max-width: 300px;
	padding: 16px 17px 19px;
	text-align: center;
}

.customAlertUI.failureAlertUI {
	background: rgba(255, 0, 0, 0.12);
	border: 1px solid #ff0000;
}

.customAlertUI.failureAlertUI p {
	color: #ff0000;
}

.customAlertUI.successAlertUI {
	background: rgba(0, 117, 74, 0.12);
	border: 1px solid #00754a;
}

.customAlertUI.successAlertUI p {
	color: #00754a;
}

/* 當標籤內沒有內容，或 ASP.NET 標記為 Valid 時，徹底隱藏不佔位 */
.warningText:empty,
.field-validation-valid {
	display: none !important;
}


.floating-alert.show {
	opacity: 1;
}

.alert-icon {
	margin-right: 6px;
	font-size: 20px;
	font-weight: bold;
}

.floating-alert p {
	margin: 0;
}


/* ==========================================================================
   共用設計變數 (Design Tokens)
   ※ 注意：style.css 有 * { color: #353b39 }，文字顏色不會自動繼承，
     元件內需要繼承父層顏色時請用 color: inherit 明確指定。
   ========================================================================== */
:root {
	--rc-brand: #00754a;
	--rc-brand-2: #42a280;
	--rc-brand-soft: #eef7f3;
	--rc-grad: linear-gradient(90deg, #6bc564 0%, #42a280 50%, #02774f 100%);
	--rc-grad-v: linear-gradient(180deg, #6bc564 0%, #02774f 100%);

	--rc-text: #353b39;
	--rc-muted: #66717a;
	--rc-faint: #7f8a93;
	--rc-line: #e6e9ee;
	--rc-line-strong: #d4d4d4;
	--rc-bg-soft: #f7f8fa;

	--rc-price: #e11d48;
	--rc-danger: #dc3545;

	--rc-radius-sm: 8px;
	--rc-radius-md: 12px;
	--rc-radius-pill: 999px;

	--rc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
	--rc-shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
	--rc-focus: 0 0 0 3px rgba(0, 117, 74, 0.16);

	--rc-font-num: "Myriad Pro", Myriad, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* 圖示 (以 mask 上色，顏色跟著 color 走) */
	--rc-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
	--rc-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* 僅供螢幕閱讀器讀取、視覺上隱藏 */
.visuallyHidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ==========================================================================
   共用元件：按鈕 (.uiBtn)
   用法：<button class="uiBtn uiBtn--primary">…</button>
         <a class="uiBtn uiBtn--outline uiBtn--block">…</a>
   ========================================================================== */
.uiBtn {
	align-items: center;
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--rc-radius-pill);
	color: var(--rc-text);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 0 28px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s, filter 0.2s;
	white-space: nowrap;
}

.uiBtn * {
	color: inherit;
}

.uiBtn:focus-visible,
.uiIconBtn:focus-visible {
	outline: 3px solid rgba(17, 153, 143, 0.45);
	outline-offset: 2px;
}

.uiBtn--primary {
	background: var(--rc-grad);
	box-shadow: 0 6px 14px rgba(0, 117, 74, 0.25);
	color: #fff;
}

.uiBtn--primary:hover {
	box-shadow: 0 8px 18px rgba(0, 117, 74, 0.32);
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.uiBtn--primary:active {
	transform: translateY(0);
}

.uiBtn--outline {
	background: #fff;
	border-color: var(--rc-brand);
	color: var(--rc-brand);
}

.uiBtn--outline:hover {
	background: var(--rc-brand-soft);
}

.uiBtn--sm {
	font-size: 15px;
	min-height: 40px;
	padding: 0 18px;
}

.uiBtn--lg {
	font-size: 18px;
	min-height: 56px;
}

.uiBtn--block {
	display: flex;
	width: 100%;
}

.uiBtn--next::after {
	background: currentColor;
	content: "";
	height: 16px;
	-webkit-mask: var(--rc-icon-arrow) center / contain no-repeat;
	mask: var(--rc-icon-arrow) center / contain no-repeat;
	width: 16px;
}

.uiBtn:disabled,
.uiBtn.is-loading {
	cursor: not-allowed;
	filter: none;
	opacity: 0.6;
	pointer-events: none;
	transform: none;
}

/* ==========================================================================
   共用元件：圖示按鈕 (.uiIconBtn)
   用法：<button class="uiIconBtn uiIconBtn--trash" aria-label="移除"></button>
   ========================================================================== */
.uiIconBtn {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--rc-faint);
	cursor: pointer;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	transition: background-color 0.2s, color 0.2s;
	width: 38px;
}

.uiIconBtn:hover {
	background: #fff1f0;
	color: var(--rc-danger);
}

.uiIconBtn--trash::before {
	background: currentColor;
	content: "";
	height: 18px;
	-webkit-mask: var(--rc-icon-trash) center / contain no-repeat;
	mask: var(--rc-icon-trash) center / contain no-repeat;
	width: 18px;
}

/* ==========================================================================
   共用元件：輸入框 (.uiInput)
   ========================================================================== */
.uiInput {
	background: #fff;
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--rc-radius-sm);
	color: var(--rc-text);
	font-family: inherit;
	font-size: 16px;
	height: 48px;
	outline: none;
	padding: 0 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
	width: 100%;
}

.uiInput:focus {
	border-color: var(--rc-brand);
	box-shadow: var(--rc-focus);
}

/* ==========================================================================
   共用元件：卡片 (.uiCard)、標籤 (.uiTag)、提示訊息 (.uiAlert)
   ========================================================================== */
.uiCard {
	background: #fff;
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius-md);
	box-shadow: var(--rc-shadow-sm);
}

.uiTag {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--rc-radius-pill);
	display: inline-flex;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	line-height: 1.5;
	padding: 2px 10px;
}

.uiTag * {
	color: inherit;
}

.uiTag--coupon {
	background: #fffbe6;
	border-color: #ffe58f;
	color: #ad4e00;
}

.uiTag--danger {
	background: #fff1f0;
	border-radius: 6px;
	color: #cf1322;
}

.uiAlert {
	align-items: flex-start;
	border: 1px solid transparent;
	border-radius: var(--rc-radius-sm);
	display: flex;
	font-size: 15px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.5;
	padding: 10px 14px;
}

.uiAlert * {
	color: inherit;
}

.uiAlert--success {
	background: #f6ffed;
	border-color: #b7eb8f;
	color: #237804;
}

.uiAlert--error {
	background: #fff2f0;
	border-color: #ffccc7;
	color: #cf1322;
}

.uiAlert--warn {
	background: #fffbe6;
	border-color: #ffe58f;
	color: #ad4e00;
}

/* ==========================================================================
   共用元件：內頁標題橫幅精簡版 (.pageBanner.pageBannerSm)
   用法：<div class="pageBanner pageBannerSm"><h2>標題</h2></div>
         <main class="paddingLR pLR0"><div class="tableContent">…</div></main>
   ※ 原 .pageBanner 高 402px，內容框 .tableContent 以負的 margin-top 疊在橫幅上
     (一般 -156px；.shoppingCart 為 -256px；≤1350px 一律 -154px !important)。
     精簡版縮短橫幅高度，並把緊接在後的內容框統一為疊 156px，避免內容框被版頭蓋住。
   ========================================================================== */
.pageBanner.pageBannerSm {
	height: 250px;
}

.pageBanner.pageBannerSm h2 {
	font-size: 32px;
	letter-spacing: 6px;
	padding-top: 26px;
}

.pageBanner.pageBannerSm + main .tableContent {
	margin-top: -156px;
}

/* 手機 / 平板：版頭改為 54px 且橫幅上移 18px，標題需避開版頭 */
@media screen and (max-width: 1350px) {
	.pageBanner.pageBannerSm {
		height: 290px;
	}

	.pageBanner.pageBannerSm h2 {
		font-size: 28px;
		letter-spacing: 4px;
		padding: 80px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.uiBtn,
	.uiIconBtn {
		transition: none;
	}

	.uiBtn--primary:hover {
		transform: none;
	}
}


/* ==========================================================================
   課程行事曆 LessonCalendar（比照後台 LessonCalendar 樣式）
   註：_Layout 在 style2.css 之後還載入 style.min.css，
       因此以下選擇器刻意提高權重，避免被覆蓋
   ========================================================================== */

/* 鎖定日曆佈局 */
.calendarWrapper table.calendarTable {
	table-layout: fixed;
	width: 100%;
}

/* 表頭比照後台（取消前台首尾欄的額外內距） */
.calendarWrapper table.calendarTable th,
.calendarWrapper table.calendarTable th:nth-child(n) {
	font-weight: 600;
	line-height: 25px;
	padding: 20px 14px;
}

/* 單日格子 */
.calendarWrapper table.calendarTable td,
.calendarWrapper table.calendarTable td:nth-child(n) {
	border: 1px solid #d4d4d4;
	height: 140px; /* 提高單日格子高度 */
	line-height: 36px;
	padding: 14px;
	transition: background 0.2s;
	vertical-align: top; /* 內容靠上對齊 */
}

.calendarWrapper table.calendarTable td:hover {
	background: #f0f7f4; /* 聯聖綠系列的淺色背景 */
}

/* 事件摘要文字處理 */
.event-summary-item {
	font-size: 13px;
	line-height: 1.6;
	white-space: nowrap; /* 不換行 */
	overflow: hidden; /* 超出隱藏 */
	text-overflow: ellipsis; /* 顯示省略號 */
	margin-bottom: 2px;
}

/* 事件摘要：第一行課題名、第二行上課時間，各自超出顯示省略號 */
.event-summary-item .event-time,
.event-summary-item .event-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.event-summary-item .event-time {
	font-size: 12px;
	padding-left: 0.9em; /* 與課題名的「•」後文字對齊 */
}

.event-summary-item .event-name {
	font-weight: 500;
}

.event-summary-item + .event-summary-item {
	margin-top: 4px;
}

.more-indicator {
	font-size: 12px;
	color: #9ba6ab;
	text-align: center;
	margin-top: 5px;
	font-weight: 500;
}

/* 移動月份按鈕高度鎖定與對齊 */
.monthBtnContent .smallBtnUI {
	cursor: pointer;
	height: 48px !important; /* 強制與左側 selectUI 高度一致 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.monthBtnContent .smallBtnUI .scrollBtnIcon {
	border-top: 2px solid !important;
	border-left: 2px solid !important;
	position: static; /* 移除原本的絕對定位 */
	margin: 0;
}

/* --行事曆彈窗（前台原本沒有 .modalMaskLayer / .modalBoxWrapper 基礎樣式）-- */
.modalMaskLayer {
	background: rgba(0, 0, 0, 0.5);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1100;
}

.modalBoxWrapper {
	background: #fff;
	border-radius: 12px;
	box-shadow: none;
	display: none;
	left: 50%;
	max-width: 900px;
	overflow: hidden;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 1200;
}

.modalBoxWrapper.smallSize {
	max-width: 582px;
}

/* 還原前台 .modalContent 的卡片定位，改由外層 .modalBoxWrapper 呈現 */
.modalBoxWrapper .modalContent {
	background: transparent;
	border-radius: 0;
	margin: 0;
	max-width: none;
	padding: 0;
	position: static;
	transform: none;
}

.modalBoxWrapper .modalContent h3 {
	background-image: url(../images/modalPattern1.png), url(../images/modalPattern2.png), linear-gradient(-270deg, rgb(107, 197, 100) 0%, rgb(36, 145, 120) 32%, rgb(8, 123, 93) 64%, rgb(0, 118, 74) 100%);
	background-repeat: no-repeat;
	background-position: left top, right top;
	background-size: auto;
	color: #fff;
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 32px;
	margin: 0;
	padding: 11px 18px 18px;
	position: relative;
	text-align: left;
}

.modalBoxWrapper .modalContent p {
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 27px;
	margin-bottom: 17px;
	text-align: justify;
}

.modalBoxWrapper .oneBtnBox {
	display: flex;
	justify-content: center;
	margin: 28px auto 14px;
	width: 100%;
}

.modalBoxWrapper .smallBtnUI {
	cursor: pointer;
}

.modalBoxWrapper a.smallBtnUI {
	color: #fff !important;
	display: block;
	max-width: 92px;
	padding: 10px 14px 14px;
	text-decoration: none !important;
}

.modalBoxWrapper .modalContent button.cancelBtn {
	background: #efefef;
	border: 1px solid #b5b5b6;
	color: #898989 !important;
}

.modalBoxWrapper .modalContent button.cancelBtn:active,
.modalBoxWrapper .modalContent button.cancelBtn:hover {
	background: #b5b5b6;
	color: #fff !important;
}

/* 修正按鈕間距在手機版可能產生的偏移 */
@media screen and (max-width: 1024px) {
	.filterFrame .monthBtnContent {
		justify-content: flex-start;
		margin-bottom: 22px;
	}
}

@media screen and (max-width: 615px) {
	.modalBoxWrapper.smallSize {
		max-width: 92vw;
	}
}

/* ==========================================================================
   課程點數標籤 (_CoursePriceBox：獨立一行放在價格上面，首頁 / 課程列表 / 課程詳情共用)
   配色採網站主色系的墨綠，與紅色售價區隔，避免被誤認為價格
   ========================================================================== */
/* 有點數時允許換行，點數佔滿第一行，價格與折數換到下一行 */
.priceBox.hasPoint {
	flex-wrap: wrap;
}

/* 用 width 佔滿整行 (不用 flex-basis)，價格區塊在手機版改為直排時也不受影響 */
.priceBox .pricePoint {
	flex: 0 0 auto;
	margin-bottom: 4px;
	width: 100%;
}

.priceBox .pricePoint p {
	display: inline-flex;
	align-items: baseline;
	background: #e6f2f0;
	border-radius: 999px;
	color: #00796b;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	padding: 1px 10px 2px;
	white-space: nowrap;
}

.priceBox .pricePoint span.points {
	color: #00796b;
	font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 0 3px;
}