/* ==========================================================================
   2meet Bookings — Service Booking Module CSS
   v0.1.0
   ========================================================================== */

/* ── Design Tokens (Morandi Muse v2.5 mapping) ────────────────────── */
:root {
	--tmb-primary:       var(--color-green-primary, #A8B9A4);
	--tmb-accent:        var(--color-terra-primary, #C4897A);
	--tmb-bg:            var(--color-bg-primary, #FFFEFA);
	--tmb-surface:       var(--color-bg-secondary, #FAF9F6);
	--tmb-text:          var(--color-text-primary, #3A3530);
	--tmb-muted:         var(--color-text-tertiary, #7A736A);
	--tmb-border:        var(--color-bg-divider, #E8E3D9);
	--tmb-success:       var(--color-success, #A8B9A4);
	--tmb-warning:       var(--color-warning, #D9C4AA);
	--tmb-danger:        var(--color-error, #C4897A);
	--tmb-space-xs:      var(--space-2, 8px);
	--tmb-space-sm:      var(--space-4, 16px);
	--tmb-space-md:      var(--space-6, 24px);
	--tmb-space-lg:      var(--space-12, 48px);
	--tmb-radius-card:   var(--radius-lg, 14px);
	--tmb-radius-btn:    var(--radius-md, 10px);
}

/* ── Base Containers ──────────────────────────────────────────────── */
.tmb-market-wrap,
.tmb-single-wrap,
.tmb-form-wrap,
.tmb-success-wrap,
.tmb-cancel-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--tmb-space-md);
	color: var(--tmb-text);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.tmb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: opacity 0.15s, box-shadow 0.15s;
}
.tmb-btn:hover { opacity: 0.88; }
.tmb-btn-primary   { background: var(--tmb-primary); color: var(--color-text-inverse, #FAF3E3); }
.tmb-btn-secondary  { background: var(--tmb-surface); color: var(--tmb-text); border: 1px solid var(--tmb-border); }
.tmb-btn-danger     { background: var(--tmb-danger); color: var(--color-text-inverse, #FAF3E3); }
.tmb-btn-block      { display: flex; width: 100%; }
.tmb-btn:disabled   { background: var(--tmb-border); color: var(--tmb-muted); cursor: not-allowed; pointer-events: none; }

/* ── Market Header ────────────────────────────────────────────────── */
.tmb-market-header { text-align: center; margin-bottom: var(--tmb-space-md); }
.tmb-market-header h1 { font-size: 28px; margin-bottom: 8px; }
.tmb-market-subtitle { color: var(--tmb-muted); font-size: 15px; }

/* ── Market Layout (Sidebar + Main) ──────────────────────────────── */
.tmb-market-wrap:has(.tmb-market-layout) { max-width: 1200px; }
.tmb-market-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--tmb-space-md);
	align-items: start;
}
.tmb-market-sidebar {
	position: sticky;
	top: 16px;
}
.tmb-filter-sidebar {
	background: var(--tmb-surface);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tmb-filter-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.tmb-filter-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tmb-text);
	padding: 0;
}
.tmb-filter-input {
	padding: 8px 10px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	background: var(--tmb-bg);
	color: var(--tmb-text);
	width: 100%;
	box-sizing: border-box;
}
.tmb-filter-radio {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
	padding: 2px 0;
}
.tmb-filter-radio input[type="radio"] { margin: 0; }
.tmb-filter-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.tmb-market-main { min-width: 0; }

/* ── Sort Bar（主內容頂部） ───────────────────────────────────── */
.tmb-sort-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: var(--tmb-space-sm);
	padding: 8px 0;
	border-bottom: 1px solid var(--tmb-border);
	flex-wrap: wrap;
}
.tmb-sort-total {
	font-size: 14px;
	color: var(--tmb-muted);
}
.tmb-sort-field {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

/* ── Filter Bar (legacy)──────────────────────────────────────────── */
.tmb-filter-bar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: var(--tmb-space-md);
	flex-wrap: wrap;
}
.tmb-search-input {
	flex: 1;
	min-width: 180px;
	padding: 10px 14px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
}
.tmb-sort-select {
	padding: 10px 14px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	background: var(--tmb-bg);
}

/* ── Service Card Grid ────────────────────────────────────────────── */
.tmb-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--tmb-space-sm);
}
.tmb-service-card {
	display: block;
	color: var(--tmb-text);
	background: var(--tmb-bg);
	border-radius: var(--tmb-radius-card);
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}
.tmb-service-card:hover {
	box-shadow: var(--shadow-md, 0 4px 16px color-mix(in oklch, var(--color-apricot-dark, #8A6A3F) 12%, transparent));
	transform: translateY(-2px);
}
.tmb-card-image-link {
	display: block;
	text-decoration: none;
}
.tmb-card-image {
	width: 100%;
	height: 180px;
	background-color: var(--tmb-surface);
	overflow: hidden;
}
.tmb-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.25s ease-out;
}
.tmb-service-card:hover .tmb-card-img { transform: scale(1.05); }
.tmb-card-body { padding: var(--tmb-space-sm); border: none; }
.tmb-card-title {
	font-size: 16px;
	margin: 0 0 6px;
	font-weight: 600;
}
.tmb-card-title a {
	color: var(--tmb-text);
	text-decoration: none;
}
.tmb-card-title a:hover { color: var(--tmb-primary); }

/* Vendor + category meta row */
.tmb-card-details {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 8px;
	color: var(--tmb-muted);
	line-height: 1.4;
}
.tmb-card-vendor,
.tmb-card-category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--tmb-muted);
}
.tmb-card-category {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tmb-card-vendor__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.tmb-card-vendor + .tmb-card-category::before {
	content: '·';
	margin-right: 8px;
	color: var(--tmb-border);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.tmb-card-vendor a,
.tmb-card-category a {
	color: var(--tmb-muted);
	text-decoration: none;
	transition: color 0.15s ease-out;
}
.tmb-card-vendor a:hover,
.tmb-card-category a:hover { color: var(--tmb-primary); }


.tmb-card-created {
	font-size: 11px;
	color: var(--tmb-muted);
	margin: 0 0 8px;
}

.tmb-card-meta { display: flex; gap: 12px; font-size: 13px; color: var(--tmb-muted); margin-bottom: 8px; }
.tmb-card-rating { color: var(--tmb-accent); }
.tmb-card-price { font-size: 16px; font-weight: 700; color: var(--tmb-primary); }
.tmb-price-free { color: var(--tmb-success); font-weight: 700; }

/* ── Pagination ───────────────────────────────────────────────────── */
.tmb-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--tmb-space-md);
}
.tmb-page-current,
.tmb-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	text-decoration: none;
}
.tmb-page-current {
	background: var(--tmb-primary);
	color: var(--color-text-inverse, #FAF3E3);
	font-weight: 600;
}
.tmb-page-link {
	background: var(--tmb-surface);
	color: var(--tmb-text);
	border: 1px solid var(--tmb-border);
}
.tmb-page-link:hover { background: var(--tmb-border); }

/* ── Empty State ──────────────────────────────────────────────────── */
.tmb-empty-state {
	text-align: center;
	padding: var(--tmb-space-lg) var(--tmb-space-md);
	color: var(--tmb-muted);
}

/* ── Service Single ───────────────────────────────────────────────── */
.tmb-cover {
	height: 280px;
	border-radius: var(--tmb-radius-card);
	margin-bottom: var(--tmb-space-md);
	overflow: hidden;
}
.tmb-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.tmb-single-content {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--tmb-space-md);
	align-items: start;
}
.tmb-single-title { font-size: 24px; margin: 0 0 12px; }
.tmb-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 14px;
	color: var(--tmb-muted);
	margin-bottom: var(--tmb-space-sm);
}
.tmb-meta-rating { color: var(--tmb-accent); }
.tmb-single-description { line-height: 1.7; margin-bottom: var(--tmb-space-sm); }
.tmb-single-section-heading { font-size: 18px; font-weight: 600; margin: var(--tmb-space-md) 0 var(--tmb-space-xs); color: var(--tmb-heading); }
.tmb-info-section { margin-bottom: var(--tmb-space-sm); }
.tmb-info-section h3 { font-size: 16px; margin-bottom: 8px; color: var(--tmb-primary); }

/* ── Sidebar Booking Card ─────────────────────────────────────────── */
.tmb-booking-card {
	background: var(--tmb-bg);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-md);
	position: sticky;
	top: 20px;
}
.tmb-booking-price {
	text-align: center;
	margin-bottom: var(--tmb-space-sm);
}
.tmb-booking-price .tmb-price,
.tmb-booking-price .tmb-price-free {
	font-size: 28px;
	font-weight: 700;
	color: var(--tmb-primary);
}
.tmb-booking-price small {
	display: block;
	font-size: 13px;
	color: var(--tmb-muted);
	margin-top: 4px;
}
.tmb-booking-info {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--tmb-space-sm);
	border-top: 1px solid var(--tmb-border);
	border-bottom: 1px solid var(--tmb-border);
}
.tmb-booking-info li {
	padding: 10px 0;
	border-bottom: 1px solid var(--tmb-surface);
	font-size: 14px;
	color: var(--tmb-muted);
}
.tmb-booking-info li:last-child { border-bottom: none; }

/* ── Reviews ──────────────────────────────────────────────────────── */
.tmb-reviews-section { margin-top: var(--tmb-space-md); }
.tmb-reviews-section h3 { font-size: 18px; margin-bottom: var(--tmb-space-sm); }
.tmb-review-item {
	padding: var(--tmb-space-sm) 0;
	border-bottom: 1px solid var(--tmb-border);
}
.tmb-review-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
	font-size: 14px;
}
.tmb-review-rating { color: var(--tmb-accent); }
.tmb-review-date { color: var(--tmb-muted); }
.tmb-review-text { font-size: 14px; line-height: 1.6; margin: 0; }
.tmb-vendor-reply {
	margin-top: 8px;
	padding: 10px 14px;
	background: var(--tmb-surface);
	border-radius: var(--tmb-radius-btn);
	font-size: 13px;
}

/* ── Booking Form ─────────────────────────────────────────────────── */
.tmb-form-wrap { max-width: 720px; }
.tmb-form-title { font-size: 22px; margin-bottom: 4px; }
.tmb-form-subtitle { color: var(--tmb-muted); font-size: 14px; margin-bottom: var(--tmb-space-md); }

.tmb-step { margin-bottom: var(--tmb-space-md); }
.tmb-step h2 { font-size: 18px; margin-bottom: var(--tmb-space-sm); color: var(--tmb-primary); }

/* Calendar */
.tmb-calendar {
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	overflow: hidden;
}
.tmb-cal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px var(--tmb-space-sm);
	background: var(--tmb-surface);
}
.tmb-cal-header button {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}
.tmb-cal-header button:hover { background: var(--tmb-border); }
.tmb-cal-month { font-weight: 600; font-size: 16px; }
.tmb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
}
.tmb-cal-dow {
	padding: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tmb-muted);
	background: var(--tmb-surface);
}
.tmb-cal-day {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 4px;
	font-size: 14px;
	cursor: default;
	border: 1px solid transparent;
}
.tmb-cal-day--empty { background: none; }
.tmb-cal-day--disabled { color: var(--tmb-border); }
.tmb-cal-day--available {
	cursor: pointer;
	font-weight: 600;
	color: var(--tmb-primary);
}
.tmb-cal-day--available:hover {
	background: var(--tmb-surface);
	border-radius: var(--radius-sm);
}
.tmb-cal-day--selected {
	background: var(--tmb-primary);
	color: var(--color-text-inverse, #FAF3E3);
	border-radius: var(--radius-sm);
}

/* Slot Grid */
.tmb-slots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}
.tmb-slot {
	min-height: 44px;
	padding: 12px 8px;
	text-align: center;
	border: 2px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	font-size: 14px;
}
.tmb-slot:hover {
	border-color: var(--tmb-primary);
	background: color-mix(in oklch, var(--tmb-primary) 8%, var(--tmb-bg));
}
.tmb-slot--selected {
	border-color: var(--tmb-primary);
	background: var(--tmb-primary);
	color: var(--color-text-inverse, #FAF3E3);
}
.tmb-slot-time { font-weight: 600; }
.tmb-slot-cap { font-size: 11px; color: var(--tmb-muted); margin-top: 2px; }
.tmb-slot--selected .tmb-slot-cap { color: color-mix(in oklch, var(--color-text-inverse, #FAF3E3) 80%, transparent); }
.tmb-slots-empty,
.tmb-slots-loading {
	text-align: center;
	padding: var(--tmb-space-md);
	color: var(--tmb-muted);
}

/* Form Fields */
.tmb-field { margin-bottom: var(--tmb-space-sm); }
.tmb-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}
.tmb-field input,
.tmb-field textarea,
.tmb-field select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	box-sizing: border-box;
}
.tmb-field input:focus,
.tmb-field textarea:focus,
.tmb-field select:focus {
	border-color: var(--tmb-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--tmb-primary) 18%, transparent);
}
.tmb-questionnaire {
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-sm);
	margin-bottom: var(--tmb-space-sm);
}
.tmb-questionnaire legend {
	font-size: 15px;
	font-weight: 600;
	padding: 0 8px;
}
.tmb-form-summary {
	background: var(--tmb-surface);
	border-radius: var(--tmb-radius-btn);
	padding: var(--tmb-space-sm);
	margin-bottom: var(--tmb-space-sm);
	font-size: 14px;
	display: none;
}
.tmb-form-summary.tmb-visible { display: block; }

.tmb-payment-summary {
	background: var(--color-apricot-lightest);
	border: 1px solid var(--color-apricot-light);
	border-radius: var(--tmb-radius-btn);
	padding: var(--tmb-space-sm) var(--tmb-space-md);
	margin-bottom: var(--tmb-space-sm);
	font-size: 14px;
}
.tmb-payment-summary h3 { margin: 0 0 8px; font-size: 15px; }
.tmb-payment-summary p { margin: 4px 0; }
.tmb-pay-note { color: var(--tmb-muted); font-size: 13px; }

/* ── Success Page ─────────────────────────────────────────────────── */
.tmb-success-wrap { max-width: 640px; text-align: center; }
.tmb-success-icon {
	width: 72px;
	height: 72px;
	line-height: 72px;
	font-size: 36px;
	background: var(--tmb-success);
	color: var(--color-text-inverse, #FAF3E3);
	border-radius: 50%;
	margin: 0 auto var(--tmb-space-sm);
}
.tmb-success-title { font-size: 24px; margin-bottom: 8px; }
.tmb-success-note { color: var(--tmb-muted); margin-bottom: var(--tmb-space-md); }
.tmb-note-pending { color: var(--tmb-accent); }

.tmb-success-card {
	background: var(--tmb-bg);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-md);
	text-align: left;
	margin-bottom: var(--tmb-space-md);
}
.tmb-success-card h2 { font-size: 18px; margin-bottom: var(--tmb-space-sm); }
.tmb-success-details {
	list-style: none;
	padding: 0;
	margin: 0;
}
.tmb-success-details li {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--tmb-surface);
	font-size: 14px;
}
.tmb-success-details li:last-child { border-bottom: none; }
.tmb-success-payment { border-top: 1px solid var(--tmb-border); padding-top: var(--tmb-space-sm); margin-top: var(--tmb-space-sm); }
.tmb-success-payment h3 { font-size: 15px; margin-bottom: 8px; }
.tmb-success-fee { font-size: 18px; font-weight: 700; color: var(--tmb-primary); }
.tmb-payment-note { font-size: 13px; color: var(--tmb-muted); }
.tmb-success-actions { display: flex; gap: 12px; justify-content: center; }

/* ── Cancel Page ──────────────────────────────────────────────────── */
.tmb-cancel-wrap { max-width: 640px; }
.tmb-cancel-title { font-size: 22px; margin-bottom: var(--tmb-space-md); }

.tmb-cancel-card {
	background: var(--tmb-bg);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-md);
	margin-bottom: var(--tmb-space-md);
}
.tmb-cancel-card h2 { font-size: 18px; margin-bottom: var(--tmb-space-sm); }
.tmb-cancel-details {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--tmb-space-sm);
}
.tmb-cancel-details li {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--tmb-surface);
	font-size: 14px;
}
.tmb-cancel-details li:last-child { border-bottom: none; }

.tmb-cancel-notice {
	padding: 14px var(--tmb-space-sm);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	margin-bottom: var(--tmb-space-sm);
}
.tmb-notice-warning { background: var(--color-apricot-lightest); color: var(--color-apricot-dark); }
.tmb-notice-info { background: var(--tmb-surface); color: var(--tmb-muted); }

.tmb-cancel-form .tmb-field { margin-bottom: var(--tmb-space-sm); }
.tmb-cancel-form .tmb-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.tmb-cancel-form .tmb-field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	box-sizing: border-box;
}
.tmb-cancel-actions { text-align: center; }

/* ── Status Badge ─────────────────────────────────────────────────── */
.tmb-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--radius-md);
	font-size: 12px;
	font-weight: 600;
}
.tmb-status-pending   { background: var(--color-apricot-lightest); color: var(--color-apricot-dark); }
.tmb-status-confirmed { background: var(--color-green-lightest); color: var(--color-green-dark); }
.tmb-status-cancelled { background: var(--color-pink-lightest); color: var(--color-pink-dark); }
.tmb-status-completed { background: var(--color-purple-lightest); color: var(--color-purple-dark); }
.tmb-status-no_show   { background: var(--tmb-surface); color: var(--tmb-muted); }

/* Payment status badges */
.tmb-pay, .tmb-pay-free {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	font-weight: 600;
}
.tmb-pay-free    { background: var(--tmb-surface); color: var(--tmb-muted); }
.tmb-pay-unpaid  { background: var(--color-pink-lightest); color: var(--color-pink-dark); }
.tmb-pay-deposit { background: var(--color-apricot-lightest); color: var(--color-apricot-dark); }
.tmb-pay-paid    { background: var(--color-green-lightest); color: var(--color-green-dark); }

/* ── Vendor Dashboard ─────────────────────────────────────────────── */
.tmb-dashboard-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--tmb-space-md);
	color: var(--tmb-text);
}
.tmb-dash-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--tmb-space-md);
	flex-wrap: wrap;
	gap: 12px;
}
.tmb-dash-header h1 { margin: 0; font-size: 22px; }
.tmb-dash-nav { display: flex; gap: 8px; }

.tmb-notice {
	padding: 12px var(--tmb-space-sm);
	border-radius: var(--tmb-radius-btn);
	margin-bottom: var(--tmb-space-sm);
	font-size: 14px;
}
.tmb-notice-success { background: var(--color-green-lightest); color: var(--color-green-dark); }

.tmb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.tmb-table th,
.tmb-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--tmb-border);
}
.tmb-table th {
	font-weight: 600;
	background: var(--tmb-surface);
	font-size: 13px;
	color: var(--tmb-muted);
}
.tmb-table td { vertical-align: top; }

.tmb-actions { white-space: nowrap; }
.tmb-actions a,
.tmb-actions button { margin-right: 8px; }

.tmb-btn-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--tmb-primary);
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
}
.tmb-btn-link--danger { color: var(--tmb-danger); }
.tmb-btn-sm { padding: 6px 12px; font-size: 12px; }
.tmb-btn-group { display: flex; gap: 8px; }

.tmb-filter-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: var(--tmb-space-sm);
	flex-wrap: wrap;
}
.tmb-filter-tab {
	padding: 6px 14px;
	border-radius: var(--radius-xl);
	font-size: 13px;
	text-decoration: none;
	color: var(--tmb-muted);
	background: var(--tmb-surface);
	border: 1px solid var(--tmb-border);
}
.tmb-filter-tab:hover { background: var(--tmb-border); }
.tmb-filter-tab--active {
	background: var(--tmb-primary);
	color: var(--color-text-inverse, #FAF3E3);
	border-color: var(--tmb-primary);
}

.tmb-fieldset {
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-sm);
	margin-bottom: var(--tmb-space-sm);
}
.tmb-fieldset legend {
	font-size: 15px;
	font-weight: 600;
	padding: 0 8px;
}

.tmb-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.tmb-section {
	margin-bottom: var(--tmb-space-lg);
	padding-bottom: var(--tmb-space-md);
	border-bottom: 1px solid var(--tmb-border);
}
.tmb-section:last-child { border-bottom: none; }
.tmb-section h2 { font-size: 18px; margin-bottom: var(--tmb-space-sm); }

.tmb-note { font-size: 13px; color: var(--tmb-muted); margin-bottom: var(--tmb-space-sm); }

.tmb-input-wide { width: 100%; font-family: monospace; font-size: 12px; }

.tmb-form-inline {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.tmb-review-card {
	padding: var(--tmb-space-sm);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	margin-bottom: var(--tmb-space-sm);
}

.tmb-reply-form { margin-top: 8px; }
.tmb-reply-form textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 13px;
	box-sizing: border-box;
	margin-bottom: 8px;
}

/* service status badges (dashboard) */
.tmb-status-pending_review { background: var(--color-apricot-lightest); color: var(--color-apricot-dark); }
.tmb-status-active    { background: var(--color-green-lightest); color: var(--color-green-dark); }
.tmb-status-paused    { background: var(--tmb-surface); color: var(--tmb-muted); }
.tmb-status-rejected  { background: var(--color-pink-lightest); color: var(--color-pink-dark); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.tmb-single-content {
		grid-template-columns: 1fr;
	}
	.tmb-booking-card {
		position: static;
	}
	.tmb-filter-bar {
		flex-direction: column;
	}
	.tmb-search-input {
		min-width: 100%;
	}
	/* 市集雙欄 → mobile 單欄（側邊欄在上） */
	.tmb-market-layout {
		grid-template-columns: 1fr;
	}
	.tmb-market-sidebar {
		position: static;
	}
	.tmb-sort-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.tmb-success-actions {
		flex-direction: column;
	}
	/* 預約設定雙欄表單 → 單欄 */
	.tmb-field-row {
		grid-template-columns: 1fr;
	}
}

/* ── Waitlist Styles ─────────────────────────────────────────────── */

/* Slot: waitlist available (full but can join waitlist) */
.tmb-slot--waitlist {
	background: var(--color-apricot-lightest);
	border-color: var(--color-apricot-light);
	cursor: pointer;
}
.tmb-slot--waitlist:hover {
	background: var(--color-apricot-lightest);
	border-color: var(--color-apricot-medium);
}
.tmb-slot--waitlist.tmb-slot--selected {
	background: var(--color-apricot-medium);
	color: var(--color-text-inverse, #FAF3E3);
	border-color: var(--color-apricot-medium);
}
.tmb-slot-waitlist-label {
	color: var(--color-apricot-dark);
	font-size: 12px;
}
.tmb-slot--waitlist.tmb-slot--selected .tmb-slot-waitlist-label {
	color: var(--color-text-inverse, #FAF3E3);
}

/* Slot: fully closed (no waitlist or waitlist full) */
.tmb-slot--full {
	background: var(--tmb-surface);
	border-color: var(--tmb-border);
	opacity: 0.5;
	cursor: not-allowed;
}
.tmb-slot--full .tmb-slot-cap {
	color: var(--tmb-danger);
	font-size: 12px;
}

/* Waitlist notice in summary */
.tmb-waitlist-notice {
	color: var(--color-apricot-dark);
	font-size: 13px;
	font-weight: 600;
}

/* Status badge: waitlisted */
.tmb-status-waitlisted {
	background: var(--color-apricot-lightest);
	color: var(--color-apricot-dark);
	border: 1px solid var(--color-apricot-light);
}

/* Success page: waitlist icon */
.tmb-success-icon--waitlist {
	background: var(--color-apricot-medium);
}

/* Success page: waitlisted note */
.tmb-note-waitlisted {
	background: var(--color-apricot-lightest);
	border: 1px solid var(--color-apricot-light);
	border-radius: var(--tmb-radius-btn);
	padding: var(--tmb-space-xs) var(--tmb-space-sm);
	color: var(--color-apricot-dark);
}

/* ── 資格等級徽章 (v0.3.0) ─────────────────────────────────── */
.tmb-tier-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-xl);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.tmb-tier-L1     { background: var(--color-blue-lightest); color: var(--color-blue-dark); }
.tmb-tier-L2     { background: var(--color-green-lightest); color: var(--color-green-dark); }
.tmb-tier-L3     { background: var(--color-apricot-lightest); color: var(--color-apricot-dark); }
.tmb-tier-L4     { background: var(--color-apricot-light); color: var(--color-apricot-dark); }
.tmb-tier-L5     { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
.tmb-tier-failed { background: var(--color-pink-lightest); color: var(--color-pink-dark); }
.tmb-tier-pending { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); border: 1px solid var(--color-bg-divider); }

/* 調查表提示框（成功頁）*/
.tmb-questionnaire-prompt {
	background: var(--color-apricot-lightest);
	border: 1px solid var(--color-apricot-light);
	border-radius: var(--tmb-radius-btn);
	padding: var(--tmb-space-sm) var(--tmb-space-md);
	margin: var(--tmb-space-md) 0;
	text-align: center;
}
.tmb-questionnaire-prompt p { margin: 0 0 8px; }

/* 調查表頁（questionnaire-form.php） */
.tmb-questionnaire-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--tmb-space-md);
}
.tmb-questionnaire-header { margin-bottom: var(--tmb-space-md); text-align: center; }
.tmb-questionnaire-title  { font-size: 24px; margin: 0 0 4px; }
.tmb-questionnaire-service { color: var(--tmb-text-muted); margin: 0; }
.tmb-questionnaire-meta {
	display: flex;
	gap: var(--tmb-space-sm);
	flex-wrap: wrap;
	background: var(--tmb-surface);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-sm) var(--tmb-space-md);
	margin-bottom: var(--tmb-space-md);
	font-size: 13px;
	color: var(--tmb-text-muted);
}
.tmb-questionnaire-reviewed-notice,
.tmb-questionnaire-pending-notice,
.tmb-questionnaire-intro {
	background: var(--tmb-surface);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-sm) var(--tmb-space-md);
	margin-bottom: var(--tmb-space-md);
}
.tmb-questionnaire-reviewed-notice { border-color: var(--color-green-light); background: var(--color-green-lightest); }
.tmb-questionnaire-pending-notice  { border-color: var(--color-apricot-light); background: var(--color-apricot-lightest); }
.tmb-questionnaire-notes { font-size: 13px; color: var(--tmb-text-muted); }
.tmb-questionnaire-resubmit-hint   { font-size: 13px; color: var(--tmb-text-muted); margin: 4px 0 0; }
.tmb-questionnaire-form-wrap { margin-top: var(--tmb-space-md); }

/* ── Analytics Dashboard ─────────────────────────────────────────── */

.tmb-analytics-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--tmb-space-sm);
	margin-bottom: var(--tmb-space-md);
}
.tmb-kpi-card {
	--tmb-kpi-tint: var(--color-blue-primary, #9EB3C2);
	--tmb-kpi-strong: var(--color-blue-dark, #4A6B82);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 96px;
	padding: var(--tmb-space-md);
	border-radius: var(--tmb-radius-card);
	background: color-mix(in oklch, var(--tmb-kpi-tint) 28%, var(--tmb-bg, #fff));
	border: 1px solid color-mix(in oklch, var(--tmb-kpi-tint) 38%, transparent);
	text-align: center;
}
.tmb-kpi-card--blue    { --tmb-kpi-tint: var(--color-blue-primary, #9EB3C2);    --tmb-kpi-strong: var(--color-blue-dark, #4A6B82); }
.tmb-kpi-card--green   { --tmb-kpi-tint: var(--color-green-primary, #A8B9A4);   --tmb-kpi-strong: var(--color-green-dark, #5A7551); }
.tmb-kpi-card--apricot { --tmb-kpi-tint: var(--color-apricot-primary, #D9C4AA); --tmb-kpi-strong: var(--color-apricot-dark, #8A6A3F); }
.tmb-kpi-card--pink    { --tmb-kpi-tint: var(--color-pink-primary, #D4AFAB);    --tmb-kpi-strong: var(--color-pink-dark, #8B5A55); }
.tmb-kpi-value {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
	color: var(--tmb-kpi-strong);
	line-height: 1.1;
	font-variant-numeric: tabular-nums lining-nums;
}
.tmb-kpi-label {
	font-size: 13px;
	color: color-mix(in oklch, var(--tmb-text, #2b1d12) 55%, transparent);
}
@media (max-width: 640px) {
	.tmb-analytics-kpis { grid-template-columns: repeat(2, 1fr); }
}
.tmb-chart-wrap {
	position: relative;
	max-height: 360px;
	overflow: hidden;
}
.tmb-analytics-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--tmb-space-sm);
	font-size: 14px;
}
.tmb-analytics-table th,
.tmb-analytics-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid var(--tmb-border);
}
.tmb-analytics-table th {
	font-weight: 600;
	color: var(--tmb-text-muted);
	font-size: 13px;
}

/* ── 候補資格審核面板 (waitlist-review.php, v0.3.0) ────────────────── */

.tmb-waitlist-review-wrap {
	max-width: 800px;
}

.tmb-wlr-card {
	background: var(--tmb-bg);
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-card);
	padding: var(--tmb-space-md);
	margin-bottom: var(--tmb-space-md);
}

.tmb-wlr-card-title {
	margin: 0 0 var(--tmb-space-sm);
	font-size: 16px;
	font-weight: 600;
}

.tmb-wlr-card-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--tmb-space-sm);
}
.tmb-wlr-card-title-row .tmb-wlr-card-title { margin: 0; }

.tmb-wlr-badge-rev {
	display: inline-block;
	background: var(--color-blue-lightest);
	color: var(--color-blue-dark);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--radius-md);
	margin-left: 8px;
	vertical-align: middle;
}

.tmb-wlr-submit-time {
	font-size: 12px;
	color: var(--tmb-muted);
	white-space: nowrap;
}

/* 申請資訊 grid */
.tmb-wlr-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px var(--tmb-space-md);
}

.tmb-wlr-info-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tmb-wlr-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tmb-muted);
}

.tmb-wlr-value {
	font-size: 14px;
	color: var(--tmb-text);
}

.tmb-wlr-email {
	display: block;
	font-size: 12px;
	color: var(--tmb-muted);
}

.tmb-wlr-position {
	font-weight: 700;
	color: var(--tmb-primary);
}

/* Fluent Forms 連結 */
.tmb-wlr-ff-link {
	margin: 0 0 var(--tmb-space-sm);
	font-size: 13px;
}

/* 調查表答案列表 */
.tmb-wlr-answers {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tmb-wlr-answer-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 8px var(--tmb-space-sm);
	padding: 10px 0;
	border-bottom: 1px solid var(--tmb-border);
	font-size: 13px;
}
.tmb-wlr-answer-row:last-child { border-bottom: none; }

.tmb-wlr-answer-q {
	color: var(--tmb-muted);
	font-weight: 500;
	word-break: break-word;
}

.tmb-wlr-answer-a {
	color: var(--tmb-text);
	word-break: break-word;
}

.tmb-wlr-empty {
	font-size: 13px;
	color: var(--tmb-muted);
	margin: 0;
}

/* 空白狀態 */
.tmb-wlr-empty-state {
	text-align: center;
	padding: var(--tmb-space-md) 0;
}
.tmb-wlr-empty-icon { font-size: 36px; display: block; margin-bottom: 8px; }
.tmb-wlr-empty-state p { color: var(--tmb-muted); margin: 0; }

/* 審核表單 */
.tmb-wlr-field {
	margin-bottom: var(--tmb-space-md);
}

.tmb-wlr-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.tmb-wlr-required {
	color: var(--tmb-danger);
	margin-left: 2px;
}

.tmb-wlr-optional {
	font-size: 12px;
	font-weight: 400;
	color: var(--tmb-muted);
	margin-left: 4px;
}

.tmb-wlr-select,
.tmb-wlr-textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--tmb-border);
	border-radius: var(--tmb-radius-btn);
	font-size: 14px;
	font-family: inherit;
	color: var(--tmb-text);
	background: var(--color-bg-secondary, #FAF9F6);
	box-sizing: border-box;
	transition: border-color .15s;
}
.tmb-wlr-select:focus,
.tmb-wlr-textarea:focus {
	outline: none;
	border-color: var(--tmb-primary);
	box-shadow: 0 0 0 2px color-mix(in oklch, var(--tmb-primary) 18%, transparent);
}
.tmb-wlr-select { max-width: 320px; }
.tmb-wlr-textarea { resize: vertical; }

.tmb-wlr-hint {
	font-size: 12px;
	color: var(--tmb-muted);
	margin: 4px 0 0;
}

.tmb-wlr-form-footer {
	display: flex;
	align-items: center;
	gap: var(--tmb-space-sm);
}

.tmb-wlr-saving {
	font-size: 13px;
	color: var(--tmb-muted);
}

/* notice-error（補充，notice-success 已在上方定義）*/
.tmb-notice-error { background: var(--color-pink-lightest); color: var(--color-pink-dark); }

/* ── RWD — Tablet ≤768px ─────────────────────────────────────────── */

@media (max-width: 768px) {
	.tmb-service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tmb-analytics-kpis {
		grid-template-columns: repeat(2, 1fr);
	}
	.tmb-chart-wrap {
		max-height: 240px;
	}
}

/* ── RWD — Mobile ≤480px ─────────────────────────────────────────── */

@media (max-width: 480px) {
	.tmb-service-grid {
		grid-template-columns: 1fr;
	}
	.tmb-slots-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.tmb-dashboard-wrap h1 {
		font-size: 20px;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * WCAG 2.1 AA + 手機端 UX 增強補丁（v0.9.9）
 * ═══════════════════════════════════════════════════════════════ */

/* ─ 1. 鍵盤焦點 ─────────────────────────────────────────────── */
.tmb-btn:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tmb-primary, #A8B9A4) !important;
	outline-offset: 2px !important;
}

.tmb-btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
	outline: none;
}

/* ─ 2. 觸控目標最小高度 44px ───────────────────────────────── */
.tmb-btn {
	min-height: 44px;
}

/* ─ 3. 表單送出錯誤訊息 ────────────────────────────────────── */
.tmb-form-error {
	min-height: 0;
	font-size: 14px;
	color: var(--color-error, #C4897A);
	padding: 0;
	margin-top: var(--tmb-space-xs, 8px);
	border-radius: var(--radius-sm);
}
.tmb-form-error:not(:empty) {
	padding: 10px 14px;
	background: color-mix(in oklch, var(--color-error, #C4897A) 8%, transparent);
	border: 1px solid color-mix(in oklch, var(--color-error, #C4897A) 25%, transparent);
}

/* ─ 3. 必填欄位視覺指示 ────────────────────────────────────── */
.tmb-required {
	color: var(--color-pink-dark, #8B5A55);
	font-weight: 700;
	margin-left: 2px;
}

@media (max-width: 768px) {
	.tmb-btn-sm {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ─ 3. touch-action ─────────────────────────────────────────── */
button, a, label, input, select, textarea, [role="button"] {
	touch-action: manipulation;
}

/* ─ 4. prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}