/**
 * DANCE SOUL 課表系統 — 前台／後台預覽共用樣式
 *
 * 全數使用原生 CSS，不依賴任何框架。課程卡片顏色以 inline CSS variable
 * (--ds-card-color) 逐卡片帶入，後台修改等級顏色設定後前台立即反映。
 */

:root {
	--ds-card-radius: var(--ds-radius-sm, 8px);
	--ds-card-gap: var(--ds-gap-sm, 8px);
}

.ds-schedule-app,
.ds-schedule-wrap {
	font-family: inherit;
	color: var(--ds-text, inherit);
}

/* 超寬螢幕時不無限延伸；左右間距由頁面（主題內容區）負責，外掛不自帶 */
.ds-schedule-app {
	max-width: var(--ds-maxw-wide, 1280px);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------
 * 工具列：月/週/日 tab ＋ 搜尋框 ＋ 老師/等級下拉
 * --------------------------------------------------------------- */
.ds-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--ds-text) 8%, transparent);
}

.ds-tabs {
	display: inline-flex;
	gap: 4px;
	background: color-mix(in srgb, var(--ds-text) 4%, transparent);
	padding: 4px;
	border-radius: 8px;
}

.ds-tab {
	appearance: none;
	border: none;
	background: transparent;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
	transition: background var(--ds-transition, 0.2s ease), opacity var(--ds-transition, 0.2s ease);
}

.ds-tab:hover {
	opacity: 0.9;
}

.ds-tab.is-active {
	background: var(--ds-surface);
	opacity: 1;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-text) 8%, transparent);
}

.ds-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ds-search-input,
.ds-filter-select {
	font-size: 13px;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 15%, transparent);
	background: var(--ds-surface);
	color: inherit;
}

.ds-search-input {
	min-width: 200px;
}

.ds-filter-clear {
	appearance: none;
	border: 1px solid color-mix(in srgb, var(--ds-text) 15%, transparent);
	background: var(--ds-surface);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
}

.ds-filter-clear:hover {
	opacity: 1;
}

/* ---------------------------------------------------------------
 * 上一頁／今天／下一頁 導覽列
 * --------------------------------------------------------------- */
.ds-period-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ds-period-label {
	font-size: 14px;
}

.ds-nav-btn {
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 15%, transparent);
	text-decoration: none;
	color: inherit;
	background: var(--ds-surface);
}

.ds-nav-btn:hover {
	background: color-mix(in srgb, var(--ds-text) 4%, transparent);
}

.ds-nav-today {
	opacity: 0.7;
}

/* ---------------------------------------------------------------
 * 週檢視：時間軸固定左側的表格（功課表感）
 * --------------------------------------------------------------- */
.ds-timetable-scroll {
	overflow-x: auto;
}

.ds-timetable {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.ds-timetable th,
.ds-timetable td {
	border: 1px solid color-mix(in srgb, var(--ds-text) 6%, transparent);
	padding: 6px;
	vertical-align: top;
}

.ds-timetable thead th {
	text-align: center;
	padding: 10px 6px;
	background: color-mix(in srgb, var(--ds-text) 2%, transparent);
}

.ds-timetable-time-col {
	width: 64px;
	white-space: nowrap;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	background: color-mix(in srgb, var(--ds-text) 2%, transparent);
}

.ds-timetable tbody td {
	min-width: 100px;
}

/* ---------------------------------------------------------------
 * 今日課表：卡片瀑布流（單欄）
 * --------------------------------------------------------------- */
.ds-schedule-today {
	display: flex;
	flex-direction: column;
	gap: var(--ds-card-gap);
	max-width: 480px;
}

/* ---------------------------------------------------------------
 * 課程卡片
 * --------------------------------------------------------------- */
.ds-course-card {
	background: var(--ds-surface);
	border: 1px solid color-mix(in srgb, var(--ds-text) 8%, transparent);
	border-left: 4px solid var(--ds-card-color, var(--ds-text-subtle));
	border-radius: var(--ds-card-radius);
	padding: 8px 10px;
	margin-bottom: 4px;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-text) 4%, transparent);
	transition: opacity var(--ds-transition, 0.2s ease), filter var(--ds-transition, 0.2s ease);
}

.ds-course-card:last-child {
	margin-bottom: 0;
}

.ds-course-card.is-cancelled {
	opacity: 0.55;
}

.ds-course-time {
	font-size: 11px;
	opacity: 0.55;
	margin-bottom: 2px;
}

.ds-course-name {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 2px;
}

.ds-course-teacher {
	font-size: 12px;
	opacity: 0.75;
}

.ds-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	padding: 1px 7px;
	border-radius: 10px;
	margin-left: 5px;
	vertical-align: middle;
	white-space: nowrap;
}

.ds-badge-sub {
	background: var(--ds-warn-bg);
	color: var(--ds-warn);
}

.ds-badge-cancelled {
	background: var(--ds-danger-bg);
	color: var(--ds-danger);
}

.ds-empty-day {
	text-align: center;
	font-size: 12px;
	opacity: 0.45;
	padding: 24px 0;
}

/* 搜尋／篩選：不符合條件的卡片淡化 */
.ds-course-card.is-dimmed {
	opacity: 0.15;
	filter: grayscale(100%);
}

/* ---------------------------------------------------------------
 * 月檢視：日曆網格
 * --------------------------------------------------------------- */
.ds-month-calendar {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.ds-month-calendar th {
	padding: 8px 4px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.6;
	border-bottom: 1px solid color-mix(in srgb, var(--ds-text) 8%, transparent);
}

.ds-month-cell {
	border: 1px solid color-mix(in srgb, var(--ds-text) 6%, transparent);
	height: 84px;
	vertical-align: top;
	transition: opacity var(--ds-transition, 0.2s ease);
}

.ds-month-cell.is-outside-month {
	background: color-mix(in srgb, var(--ds-text) 1.5%, transparent);
	opacity: 0.4;
}

.ds-month-cell.is-dimmed {
	opacity: 0.25;
}

.ds-month-cell-link {
	display: block;
	height: 100%;
	padding: 6px;
	text-decoration: none;
	color: inherit;
}

.ds-month-cell-link:hover {
	background: color-mix(in srgb, var(--ds-text) 3%, transparent);
}

.ds-month-daynum {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 4px;
}

.ds-month-dots {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	margin-bottom: 3px;
}

.ds-month-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}

.ds-month-count {
	font-size: 10px;
	opacity: 0.5;
}

/* ---------------------------------------------------------------
 * 響應式：行動裝置
 * --------------------------------------------------------------- */
@media (max-width: 782px) {
	.ds-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.ds-filters {
		width: 100%;
	}
	.ds-search-input {
		flex: 1;
		min-width: 0;
	}
	.ds-month-cell {
		height: 64px;
	}
}

/* ---------------------------------------------------------------
 * 等級顏色圖例
 * --------------------------------------------------------------- */
.ds-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 16px;
	padding: 10px 14px;
	background: color-mix(in srgb, var(--ds-text) 2.5%, transparent);
	border: 1px solid color-mix(in srgb, var(--ds-text) 6%, transparent);
	border-radius: 8px;
}

.ds-legend-title {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.55;
	margin-right: 4px;
}

.ds-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: 0.85;
}

.ds-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-text) 6%, transparent);
}

/* ---------------------------------------------------------------
 * 課程名稱過長時自動縮小字級（而非硬截斷），title 屬性提供完整提示
 * --------------------------------------------------------------- */
.ds-course-name {
	overflow-wrap: break-word;
}

.ds-course-name.is-name-long {
	font-size: 12px;
}

.ds-course-name.is-name-xlong {
	font-size: 11px;
	line-height: 1.3;
}

.ds-course-teacher {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 週檢視表格欄位較窄，長名稱情況更常見，字級再收斂一階 */
.ds-timetable .ds-course-name.is-name-long {
	font-size: 11px;
}

.ds-timetable .ds-course-name.is-name-xlong {
	font-size: 10px;
}

/* ---------------------------------------------------------------
 * 單堂課編輯器（後台「單堂課編輯」頁 ＋ 前台 [ds_schedule_editor] 短碼共用）
 * --------------------------------------------------------------- */
.ds-session-editor {
	font-size: 13px;
}

.ds-editor-permission-notice {
	padding: 16px;
	background: var(--ds-warn-bg);
	color: var(--ds-warn);
	border-radius: 8px;
	font-size: 13px;
}

.ds-editor-notice {
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 14px;
	font-size: 13px;
}

.ds-editor-notice-success {
	background: var(--ds-success-bg);
	color: var(--ds-success-fg);
}

.ds-editor-notice-error {
	background: var(--ds-danger-bg);
	color: var(--ds-danger);
}

.ds-editor-date-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ds-editor-btn {
	display: inline-block;
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 15%, transparent);
	background: var(--ds-surface);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.ds-editor-btn:hover {
	background: color-mix(in srgb, var(--ds-text) 4%, transparent);
}

.ds-editor-btn-primary {
	background: var(--ds-accent);
	color: var(--ds-on-accent);
	border-color: var(--ds-accent);
}

.ds-editor-btn-primary:hover {
	background: var(--ds-accent-hover);
	color: var(--ds-on-accent);
}

.ds-editor-btn-danger {
	color: var(--ds-danger);
	border-color: color-mix(in srgb, var(--ds-danger) 40%, var(--ds-surface));
}

.ds-editor-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.ds-editor-table th,
.ds-editor-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid color-mix(in srgb, var(--ds-text) 6%, transparent);
	font-size: 12px;
	vertical-align: middle;
}

.ds-editor-table thead th {
	font-weight: 600;
	opacity: 0.6;
	border-bottom: 2px solid color-mix(in srgb, var(--ds-text) 10%, transparent);
}

.ds-editor-level-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
}

.ds-editor-tag {
	display: inline-block;
	font-size: 10px;
	padding: 1px 7px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ds-text) 6%, transparent);
	margin-right: 4px;
}

.ds-editor-tag-sub {
	background: var(--ds-warn-bg);
	color: var(--ds-warn);
}

.ds-editor-tag-cancel {
	background: var(--ds-danger-bg);
	color: var(--ds-danger);
}

.ds-editor-form-box {
	background: color-mix(in srgb, var(--ds-text) 2%, transparent);
	border: 1px solid color-mix(in srgb, var(--ds-text) 8%, transparent);
	border-radius: 8px;
	padding: 18px;
	max-width: 640px;
}

.ds-editor-hint {
	font-size: 12px;
	opacity: 0.7;
	margin-top: -6px;
}

.ds-editor-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}

.ds-editor-form-grid label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
}

.ds-editor-form-grid input[type="text"],
.ds-editor-form-grid input[type="time"],
.ds-editor-form-grid select {
	font-size: 13px;
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 18%, transparent);
}

.ds-editor-checkbox-label {
	flex-direction: row !important;
	align-items: center;
	gap: 6px !important;
}

.ds-editor-form-actions {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

@media (max-width: 600px) {
	.ds-editor-form-grid {
		grid-template-columns: 1fr;
	}
}

.ds-course-location {
	font-size: 11px;
	opacity: 0.55;
	margin-top: 2px;
}

/* ---------------------------------------------------------------
 * 防禦性隱藏規則：某些佈景主題的全域 CSS 可能覆蓋原生 [hidden] 屬性
 * 的預設行為（例如 .entry-content div { display:block } 這類寫法），
 * 導致「月/週/日」視圖切換失效、多個視圖同時顯示。這裡強制加上
 * !important 確保視圖切換一定正常運作，不受佈景主題影響。
 * --------------------------------------------------------------- */
.ds-view-panel[hidden] {
	display: none !important;
}

.ds-schedule-app {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.ds-schedule-app *,
.ds-schedule-app *::before,
.ds-schedule-app *::after {
	box-sizing: border-box;
}

.ds-view-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	opacity: 0.8;
}

/* ---------------------------------------------------------------
 * 週檢視表頭：星期文字縮小一號、跟日期分開固定兩行，避免忽上忽下跑版
 * --------------------------------------------------------------- */
.ds-timetable thead .ds-day-weekday {
	display: block;
	font-size: 11px;
	font-weight: 500;
	opacity: 0.6;
	white-space: nowrap;
}

.ds-timetable thead .ds-day-date {
	display: block;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
 * 週檢視：桌面時間軸表格欄位縮窄，讓桌面能完整塞進去不用捲動
 * --------------------------------------------------------------- */
.ds-timetable {
	min-width: 0;
	table-layout: fixed;
}

.ds-timetable-time-col {
	width: 46px;
}

.ds-timetable th,
.ds-timetable td {
	padding: 4px;
}

.ds-timetable td {
	min-width: 0;
}

.ds-timetable .ds-course-card {
	padding: 6px 7px;
}

.ds-timetable .ds-course-name {
	font-size: 11px;
}

.ds-timetable .ds-course-teacher {
	font-size: 10px;
}

/* 桌面版預設顯示時間軸表格、隱藏手機直式清單。 */
.ds-week-mobile-list {
	display: none;
}

@media (max-width: 782px) {
	/* 手機版反過來：隱藏表格（避免被截斷看不全），顯示直式堆疊清單。 */
	.ds-timetable-scroll {
		display: none;
	}
	.ds-week-mobile-list {
		display: block;
	}
	.ds-week-mobile-day {
		margin-bottom: 20px;
	}
	.ds-week-mobile-day-heading {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin-bottom: 8px;
		padding-bottom: 6px;
		border-bottom: 1px solid color-mix(in srgb, var(--ds-text) 8%, transparent);
	}
	.ds-week-mobile-day-heading .ds-day-weekday {
		font-size: 12px;
		opacity: 0.6;
	}
	.ds-week-mobile-day-heading .ds-day-date {
		font-size: 15px;
		font-weight: 700;
	}
}

/* ---------------------------------------------------------------
 * 月檢視：完整列表（一天一區塊），取代原本的小色點日曆格
 * --------------------------------------------------------------- */
.ds-month-agenda {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ds-month-day-block {
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ds-text) 6%, transparent);
}

.ds-month-day-block.is-empty-day-block {
	padding: 8px 0;
	opacity: 0.4;
}

.ds-month-day-heading {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

.ds-month-day-date {
	font-size: 16px;
	font-weight: 700;
}

.ds-month-day-weekday {
	font-size: 12px;
	opacity: 0.6;
}

.ds-month-day-count {
	font-size: 11px;
	opacity: 0.45;
	margin-left: auto;
}

.ds-month-day-empty {
	font-size: 12px;
	opacity: 0.5;
}

.ds-month-day-courses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

/* ---------------------------------------------------------------
 * 老師照片：三層防禦（本人照片 → 預設頭像 → 文字色塊首字圓圈）
 * --------------------------------------------------------------- */
.ds-course-card.has-photo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	overflow: hidden;
}

/* 老師照片一律是「左側小圓形頭像＋右側文字」：手機、桌機、放在首頁的單日課表都一樣緊湊，
   不會再把直式人像硬塞進整排寬橫幅而只露出頭頂。 */
.ds-course-photo {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, var(--ds-text) 6%, transparent);
}

.ds-course-photo img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* 人像照片的臉通常在上方 1/5～1/3 處：取頭到肩，而不是只切到頭頂。 */
	object-position: 50% 22%;
	display: block;
	border-radius: 0;
}

.ds-course-photo-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ds-on-accent);
	font-size: 26px;
	font-weight: 700;
}

.ds-course-card.has-photo .ds-course-card-body {
	flex: 1;
	min-width: 0;
	padding: 0;
}

.ds-schedule-error-fallback {
	padding: 24px;
	text-align: center;
	font-size: 13px;
	opacity: 0.6;
	border: 1px dashed color-mix(in srgb, var(--ds-text) 15%, transparent);
	border-radius: 8px;
}

/* ------------------------------------------------------------------
   預約課程按鈕（喚醒 APP／導向商店）
   ------------------------------------------------------------------ */
.ds-book-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	border: 1px solid var(--ds-card-color, var(--ds-text-subtle));
	border-radius: 999px;
	color: var(--ds-card-color, var(--ds-text-muted));
	font-size: 11px;
	line-height: 1.6;
	text-decoration: none;
	background: transparent;
	transition: background var(--ds-transition, 0.2s ease), color var(--ds-transition, 0.2s ease);
}

.ds-book-btn:hover,
.ds-book-btn:focus-visible {
	background: var(--ds-card-color, var(--ds-text-muted));
	color: var(--ds-on-accent);
}

/* ------------------------------------------------------------------
   0.6.0：等級小標籤、按鈕列、舞碼影片 Lightbox、本週異動、更新時間
   ------------------------------------------------------------------ */
.ds-level-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid var(--ds-card-color, var(--ds-text-subtle));
	border-radius: 999px;
	color: var(--ds-card-color, var(--ds-text-muted));
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	vertical-align: middle;
	white-space: nowrap;
}

.ds-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-top: 6px;
}

.ds-card-actions .ds-book-btn {
	margin-top: 0;
}

.ds-video-btn {
	padding: 3px 10px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 25%, transparent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 11px;
	line-height: 1.6;
	cursor: pointer;
	transition: background var(--ds-transition, 0.2s ease), color var(--ds-transition, 0.2s ease);
}

.ds-video-btn:hover,
.ds-video-btn:focus-visible {
	background: var(--ds-accent);
	color: var(--ds-on-accent);
}

html.ds-modal-open {
	overflow: hidden;
}

.ds-video-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: color-mix(in srgb, var(--ds-text) 80%, transparent);
}

.ds-video-box {
	position: relative;
	width: min(960px, 100%);
}

.ds-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--ds-accent);
	border-radius: 8px;
	overflow: hidden;
}

.ds-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ds-video-close {
	position: absolute;
	top: -40px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--ds-on-accent);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.ds-video-external {
	display: inline-block;
	margin-top: 10px;
	color: var(--ds-on-accent);
	font-size: 13px;
	opacity: 0.8;
}

.ds-changes {
	margin: 12px 0;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 10%, transparent);
	border-left: 4px solid var(--ds-highlight);
	border-radius: var(--ds-card-radius);
	font-size: 14px;
}

.ds-changes summary {
	cursor: pointer;
	font-weight: 600;
}

.ds-changes-list {
	margin: 8px 0 0;
	padding-left: 18px;
}

.ds-changes-list li {
	margin: 4px 0;
	line-height: 1.6;
}

.ds-changes-when {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.ds-updated-at {
	margin: 16px 0 0;
	font-size: 12px;
	opacity: 0.55;
	text-align: center;
}

.ds-admin-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	opacity: 0.6;
}

.ds-empty-day a {
	text-decoration: underline;
}

.ds-more-videos {
	margin: 16px 0 0;
	font-size: 13px;
	text-align: center;
}

.ds-more-videos a {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   0.9.0：「想預約？請下載 APP」提示（與師資目錄外掛的老師課程頁同一套說法）
   ------------------------------------------------------------------ */
.ds-cta {
	margin: 12px 0;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--ds-text) 10%, transparent);
	border-left: 4px solid var(--ds-success);
	border-radius: var(--ds-card-radius);
	font-size: 14px;
	line-height: 1.6;
}

.ds-cta p {
	margin: 0 0 6px;
}

.ds-cta-title {
	font-weight: 600;
}

.ds-cta-text {
	opacity: 0.75;
}

.ds-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ds-cta-store {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--ds-accent);
	color: var(--ds-on-accent);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.ds-cta-store:hover,
.ds-cta-store:focus-visible {
	background: var(--ds-success);
	color: var(--ds-on-accent);
}

.ds-cta-desktop {
	font-size: 13px;
	color: var(--ds-warn);
}

.ds-cta-inquiry {
	margin-bottom: 0 !important;
	font-size: 12px;
	opacity: 0.75;
}

.ds-cta-inquiry a {
	text-decoration: underline;
}

.ds-cta--compact {
	padding: 10px 14px;
}

.ds-cta.is-flash {
	animation: ds-cta-flash 1.2s ease;
}

@keyframes ds-cta-flash {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-success) 0%, transparent); }
	30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ds-success) 35%, transparent); }
}

/* 0.10.1：頁面最上面只放一句話提醒，完整下載區塊放在最下面 */
.ds-cta-hint {
	margin: 8px 0;
	font-size: 13px;
	opacity: 0.85;
}

.ds-cta-hint a {
	text-decoration: underline;
	white-space: nowrap;
}

.ds-schedule-app > .ds-cta {
	margin-top: 20px;
}