/* SIS Course Non-Degree — Subject Booking (front end)
   Reads the base plugin's tokens when they are present (.cnd root) and falls
   back to the same values, so the standalone shortcode looks identical on a
   page where the base stylesheet is not loaded. Every selector is cndx-
   prefixed; nothing here restyles the base plugin's own components except
   the board head we replace. */

.cndx-board,
.cndx-modal,
.cndx-toast,
.cndx-cart,
.cndx-cartbar,
.cndx-swal {
	--x-ink: var(--ink, #101828);
	--x-ink-2: var(--ink-2, #344054);
	--x-mute: var(--mute, #667085);
	--x-faint: var(--faint, #98a2b3);
	--x-line: var(--line, #e4e7ec);
	--x-line-2: var(--line-2, #eef0f3);
	--x-soft: var(--soft, #f7f8fa);
	--x-paper: var(--paper, #ffffff);
	--x-brand: var(--brand, #0b3d2e);
	--x-brand-2: var(--brand-2, #12715a);
	--x-brand-soft: var(--brand-soft, #e9f2ef);
	--x-accent: var(--accent, #f7ab39);
	--x-accent-ink: var(--accent-ink, #bd832c);
	--x-accent-soft: var(--accent-soft, #fdf3e2);
	--x-hot: var(--hot, #d92d20);
	--x-ok: var(--ok, #12b76a);
	--x-r-sm: var(--r-sm, 10px);
	--x-r: var(--r, 14px);
	--x-r-lg: var(--r-lg, 20px);
	--x-pill: 999px;
	--x-sh-1: 0 1px 2px rgba(16, 24, 40, .05);
	--x-sh-2: 0 12px 30px -10px rgba(16, 24, 40, .18);
	--x-ring: 0 0 0 3px rgba(18, 113, 90, .2);
	--x-font: var(--font, "Sis-Reg", "Sarabun", system-ui, -apple-system, sans-serif);
	--x-display: var(--display, var(--x-font));
	--x-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
	--x-ease: cubic-bezier(.16, 1, .3, 1);
	--x-t-2xs: var(--t-2xs, .875rem);
	--x-t-xs: var(--t-xs, .9375rem);
	--x-t-sm: var(--t-sm, 1rem);
	--x-t-base: var(--t-base, 1.0625rem);
	--x-t-md: var(--t-md, 1.1875rem);
	--x-t-lg: var(--t-lg, 1.375rem);
}
.cndx-board *, .cndx-modal *, .cndx-modal *::before, .cndx-modal *::after, .cndx-cart *, .cndx-cartbar *,
.cndx-board *::before, .cndx-board *::after { box-sizing: border-box; }
.cndx-board [hidden], .cndx-modal [hidden], .cndx-board[hidden] { display: none !important; }

.cndx-standalone { font-family: var(--x-font); color: var(--x-ink); max-width: 1140px; margin: 0 auto; padding: 1.5rem clamp(14px, 4vw, 20px) 2rem; }
.cndx-standalone__head { margin-bottom: 1.1rem; }
.cndx-standalone__head h3 { margin: 0; font-size: var(--x-t-lg); }
.cndx-standalone__head p { margin: .25rem 0 0; color: var(--x-mute); }

.cndx-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -.12em;
}
.cndx-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.cndx-board :where(p), .cndx-modal :where(p) { font-size: inherit; line-height: inherit !important; }
.cndx-board :where(h3, h4), .cndx-modal :where(h2, h3, h4) { line-height: 1.3 !important; font-weight: 700 !important; font-family: var(--x-display); color: var(--x-ink); letter-spacing: -.01em; }
.cndx-board :where(button, input, select, textarea), .cndx-modal :where(button, input, select, textarea) { font-family: inherit; }

/* ---------------------------------------------------------- buttons */
.cndx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 2.75rem;
	padding: .55rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--x-pill);
	background: var(--x-accent);
	color: #fff;
	font-family: var(--x-display);
	font-size: var(--x-t-base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.cndx-btn:hover { background: #c97a04; color: #fff; box-shadow: 0 8px 18px -8px rgba(224, 140, 7, .75); }
.cndx-btn:active { transform: translateY(1px); }
.cndx-btn:focus-visible { outline: 2px solid var(--x-brand-2); outline-offset: 2px; }
.cndx-btn .cndx-icon { width: 1.05em; height: 1.05em; }
.cndx-btn--sm { min-height: 2.35rem; padding: .4rem 1rem; font-size: var(--x-t-sm); }
.cndx-btn--ghost { background: var(--x-paper); color: var(--x-brand); border-color: var(--x-line); }
.cndx-btn--ghost:hover { background: var(--x-soft); color: var(--x-brand); border-color: #cfd6dd; box-shadow: none; }
.cndx-btn--muted, .cndx-btn--muted:hover { background: var(--x-soft); color: var(--x-faint); border-color: var(--x-line); cursor: not-allowed; box-shadow: none; }
.cndx-btn.is-booked { background: var(--x-brand-soft); color: var(--x-brand-2); border-color: transparent; }
.cndx-btn.is-booked:hover { background: #dcebe6; color: var(--x-brand); box-shadow: none; }
.cndx-btn.is-busy { pointer-events: none; opacity: .85; }
.cndx-btn.is-busy::after {
	content: "";
	width: 1em; height: 1em;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cndx-spin .7s linear infinite;
}
.cndx-btn.is-busy .cndx-icon { display: none; }
.cndx-btn.is-submit { background: var(--x-brand-2); }
.cndx-btn.is-submit:hover { background: var(--x-brand); box-shadow: 0 8px 18px -8px rgba(11, 61, 46, .6); }
@keyframes cndx-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------ board head / switch */
.cndx-head.cnd-board__head {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: .9rem 1.5rem;
	margin-bottom: 1.25rem;
}
.cndx-switch {
	position: relative;
	display: inline-grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .25rem;
	padding: .3rem;
	border-radius: calc(var(--x-r) + .3rem);
	background: var(--x-soft);
	border: 1px solid var(--x-line);
	isolation: isolate;
}
.cndx-switch__glider {
	position: absolute;
	left: 0; top: 0;
	width: 0; height: 0;
	border-radius: var(--x-r);
	background: var(--x-paper);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(11, 61, 46, .28);
	border: 1px solid rgba(18, 113, 90, .18);
	transition: transform .38s var(--x-ease), width .38s var(--x-ease), height .38s var(--x-ease);
	z-index: -1;
}
.cndx-switch__btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 12.5rem;
	margin: 0;
	padding: .65rem 1rem .65rem .8rem;
	border: 0;
	border-radius: var(--x-r);
	background: transparent;
	color: var(--x-mute);
	text-align: left;
	cursor: pointer;
	transition: color .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.cndx-switch__btn:hover { color: var(--x-ink-2); }
.cndx-switch__btn:focus-visible { outline: 2px solid var(--x-brand-2); outline-offset: 1px; }
.cndx-switch__btn > .cndx-icon {
	width: 2.4rem;
	height: 2.4rem;
	padding: .55rem;
	border-radius: .8rem;
	background: var(--x-paper);
	border: 1px solid var(--x-line);
	color: var(--x-faint);
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cndx-switch__btn.is-on { color: var(--x-ink); }
.cndx-switch__btn.is-on > .cndx-icon { background: var(--x-brand); border-color: var(--x-brand); color: #fff; }
.cndx-switch__text { display: grid; min-width: 0; line-height: 1.25; }
.cndx-switch__text b { font-family: var(--x-display); font-size: var(--x-t-md); font-weight: 700; color: inherit; }
.cndx-switch__text small { font-size: var(--x-t-2xs); color: var(--x-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cndx-switch__btn.is-on .cndx-switch__text small { color: var(--x-mute); }
.cndx-switch__btn > i {
	margin-left: auto;
	padding: .1rem .5rem;
	border-radius: var(--x-pill);
	background: var(--x-line-2);
	color: var(--x-mute);
	font-style: normal;
	font-family: var(--x-display);
	font-size: var(--x-t-xs);
	font-weight: 700;
	transition: background .25s ease, color .25s ease;
}
.cndx-switch__btn.is-on > i { background: var(--x-accent-soft); color: var(--x-accent-ink); }

.cndx-head__meta { min-width: 0; }
.cndx-head__for h3 { margin: 0; font-size: var(--x-t-lg); }
.cndx-head__for p { margin: .15rem 0 0; color: var(--x-mute); font-size: var(--x-t-sm); }
.cndx-head__for { animation: cndx-fade-up .35s var(--x-ease) both; }

.cndx-board > .cnd-tabs[data-cndx-panel],
.cndx-board > .cndx-subjects { animation: cndx-fade-up .35s var(--x-ease) both; }

@keyframes cndx-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cndx-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ notice */
.cndx-notice {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border-radius: var(--x-r);
	background: var(--x-accent-soft);
	color: #7a4d06;
	font-size: var(--x-t-sm);
}
.cndx-notice .cndx-icon { width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--x-accent-ink); }

/* ----------------------------------------------------------- toolbar */
.cndx-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-bottom: .9rem;
}
.cndx-searchbox {
	position: relative;
	display: flex;
	align-items: center;
	gap: .55rem;
	flex: 1 1 22rem;
	min-width: 0;
	height: 3rem;
	padding: 0 .5rem 0 1rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	box-shadow: var(--x-sh-1);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cndx-searchbox:focus-within { border-color: var(--x-brand-2); box-shadow: var(--x-ring); }
.cndx-searchbox > .cndx-icon { width: 1.2rem; height: 1.2rem; color: var(--x-faint); }
.cndx-searchbox:focus-within > .cndx-icon { color: var(--x-brand-2); }
.cndx-searchbox input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	color: var(--x-ink);
	font-size: 16px; /* >=16px keeps iOS from zooming on focus */
}
.cndx-searchbox input::placeholder { color: var(--x-faint); }
.cndx-searchbox input::-webkit-search-cancel-button { display: none; }
.cndx-searchbox__clear {
	display: none;
	place-items: center;
	width: 2rem; height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--x-soft);
	color: var(--x-mute);
	cursor: pointer;
}
.cndx-searchbox__clear:hover { background: var(--x-line); color: var(--x-ink); }
.cndx-searchbox__clear .cndx-icon { width: .9rem; height: .9rem; }
.cndx-searchbox.has-value .cndx-searchbox__clear { display: grid; }
.cndx-spinner {
	display: none;
	width: 1rem; height: 1rem;
	border: 2px solid var(--x-line);
	border-top-color: var(--x-brand-2);
	border-radius: 50%;
	animation: cndx-spin .7s linear infinite;
}
.cndx-searchbox.is-busy .cndx-spinner { display: block; }

.cndx-filterbtn {
	display: none;
	align-items: center;
	gap: .45rem;
	height: 3rem;
	padding: 0 1rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	color: var(--x-ink-2);
	font-family: var(--x-display);
	font-size: var(--x-t-sm);
	font-weight: 700;
	cursor: pointer;
}
.cndx-filterbtn .cndx-icon { width: 1.1rem; height: 1.1rem; }
.cndx-filterbtn i {
	min-width: 1.35rem;
	padding: 0 .35rem;
	border-radius: var(--x-pill);
	background: var(--x-brand-2);
	color: #fff;
	font-style: normal;
	font-size: var(--x-t-2xs);
	line-height: 1.35rem;
	text-align: center;
}
.cndx-subjects.is-filters-open .cndx-filterbtn { border-color: var(--x-brand-2); color: var(--x-brand); }

.cndx-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.cndx-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.cndx-select select, .cndx-selectwrap select {
	-webkit-appearance: none;
	appearance: none;
	height: 3rem;
	max-width: 15rem;
	margin: 0;
	padding: 0 2.4rem 0 1rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	color: var(--x-ink-2);
	font-size: var(--x-t-sm);
	text-overflow: ellipsis;
	cursor: pointer;
	box-shadow: var(--x-sh-1);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cndx-select select:hover { border-color: #cfd6dd; }
.cndx-select select:focus, .cndx-selectwrap select:focus { outline: none; border-color: var(--x-brand-2); box-shadow: var(--x-ring); }
.cndx-select.is-set select { border-color: rgba(18, 113, 90, .45); background: var(--x-brand-soft); color: var(--x-brand); font-weight: 700; }
.cndx-select__chev {
	position: absolute;
	right: .95rem;
	width: 1rem; height: 1rem;
	color: var(--x-faint);
	pointer-events: none;
}
.cndx-select--sort select { padding-left: 3.4rem; }
.cndx-select__pre {
	position: absolute;
	left: 1rem;
	color: var(--x-faint);
	font-size: var(--x-t-2xs);
	pointer-events: none;
}

/* ------------------------------------------------------- result bar */
.cndx-resultbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	min-height: 2rem;
	margin: 0 0 1rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--x-line);
}
.cndx-resultbar__count { margin: 0; color: var(--x-mute); font-size: var(--x-t-sm); font-family: var(--x-display); font-weight: 700; }
.cndx-chipset { display: flex; flex-wrap: wrap; gap: .4rem; }
.cndx-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	padding: .3rem .55rem .3rem .75rem;
	border: 1px solid rgba(18, 113, 90, .25);
	border-radius: var(--x-pill);
	background: var(--x-brand-soft);
	color: var(--x-brand);
	font-size: var(--x-t-2xs);
	font-weight: 700;
	cursor: pointer;
	animation: cndx-fade .2s ease both;
}
.cndx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.cndx-chip .cndx-icon { width: .85rem; height: .85rem; opacity: .7; }
.cndx-chip:hover { background: #dcebe6; }
.cndx-chip:hover .cndx-icon { opacity: 1; }
.cndx-chip--clear { background: transparent; border-color: transparent; color: var(--x-mute); text-decoration: underline; text-underline-offset: 3px; padding-left: .3rem; }
.cndx-chip--clear:hover { background: transparent; color: var(--x-hot); }

/* ------------------------------------------------------------- list */
.cndx-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .9rem;
	transition: opacity .2s ease;
}
.cndx-list.is-loading { opacity: .45; pointer-events: none; }
@media (min-width: 860px) {
	.cndx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

.cndx-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.1rem 1.15rem 1rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r);
	background: var(--x-paper);
	box-shadow: var(--x-sh-1);
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--x-ease);
	animation: cndx-fade-up .4s var(--x-ease) both;
}
.cndx-item:hover { border-color: #cfd6dd; box-shadow: var(--x-sh-2); transform: translateY(-2px); }
.cndx-item.is-featured { border-color: rgba(247, 171, 57, .55); background: linear-gradient(180deg, #fffaf1, var(--x-paper) 40%); }
.cndx-item__top { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.cndx-code {
	display: inline-flex;
	align-items: center;
	padding: .15rem .55rem;
	border: 0;
	border-radius: .45rem;
	background: var(--x-brand-soft);
	color: var(--x-brand);
	font-family: var(--x-mono);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}
button.cndx-code { cursor: copy; }
.cndx-code mark, .cndx-item mark { background: #fff1c7; color: inherit; border-radius: 3px; padding: 0 1px; }
.cndx-flag {
	padding: .1rem .5rem;
	border-radius: var(--x-pill);
	background: var(--x-accent);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.cndx-credit {
	margin-left: auto;
	padding: .1rem .6rem;
	border-radius: var(--x-pill);
	background: var(--x-soft);
	color: var(--x-mute);
	font-size: var(--x-t-2xs);
	white-space: nowrap;
}
.cndx-credit b { color: var(--x-ink); font-family: var(--x-display); }
.cndx-item__title { margin: 0; font-size: var(--x-t-md); }
.cndx-item__link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--x-ink);
	font: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}
.cndx-item__link:hover { color: var(--x-brand-2); }
.cndx-item__link:focus-visible { outline: 2px solid var(--x-brand-2); outline-offset: 2px; border-radius: 4px; }
/* whole card is the click target for the detail view */
.cndx-item__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.cndx-item__actions, .cndx-item__meta { position: relative; z-index: 1; }
.cndx-item__alt {
	margin: .15rem 0 0;
	color: var(--x-mute);
	font-size: var(--x-t-sm);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.cndx-item__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: .55rem 0 0;
	color: var(--x-ink-2);
	font-size: var(--x-t-sm);
	line-height: 1.55 !important;
}
.cndx-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .9rem;
	margin: .7rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--x-mute);
	font-size: var(--x-t-2xs);
	pointer-events: none;
}
.cndx-item__meta li { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0; min-width: 0; font-size: var(--x-t-2xs); line-height: 1.5; list-style: none; }
.cndx-item__meta li::before, .cndx-clos li::marker, .cndx-steps li::marker { content: none; }
.cndx-item__meta .cndx-icon { color: var(--x-faint); }
.cndx-item__interest { color: var(--x-accent-ink); font-weight: 700; }
.cndx-item__interest .cndx-icon { color: var(--x-accent-ink) !important; }
.cndx-item__actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: auto;
	padding-top: .9rem;
}

/* skeleton */
.cndx-item--ghost { min-height: 12rem; gap: .6rem; pointer-events: none; box-shadow: none; animation: none; }
.cndx-item--ghost:hover { transform: none; box-shadow: none; border-color: var(--x-line); }
.cndx-item--ghost span {
	display: block;
	height: .9rem;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--x-line-2) 0%, #f8f9fb 50%, var(--x-line-2) 100%);
	background-size: 200% 100%;
	animation: cndx-shimmer 1.3s ease-in-out infinite;
}
.cndx-item--ghost span:nth-child(1) { width: 5rem; }
.cndx-item--ghost span:nth-child(2) { width: 80%; height: 1.2rem; }
.cndx-item--ghost span:nth-child(3) { width: 95%; height: 2.4rem; }
@keyframes cndx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.cndx-empty {
	grid-column: 1 / -1;
	display: grid;
	justify-items: center;
	gap: .35rem;
	padding: 3rem 1rem;
	border: 1px dashed var(--x-line);
	border-radius: var(--x-r);
	background: var(--x-soft);
	color: var(--x-mute);
	text-align: center;
}
.cndx-empty > .cndx-icon { width: 2.2rem; height: 2.2rem; color: var(--x-faint); margin-bottom: .3rem; }
.cndx-empty b { color: var(--x-ink); font-size: var(--x-t-md); font-family: var(--x-display); }
.cndx-empty .cndx-btn { margin-top: .6rem; }
.cndx-empty--error > .cndx-icon { color: var(--x-hot); }

/* ------------------------------------------------------------ pager */
.cndx-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35rem;
	margin: 1.6rem 0 0;
}
.cndx-pg {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .6rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	color: var(--x-ink-2);
	font-family: var(--x-display);
	font-size: var(--x-t-sm);
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cndx-pg:hover:not(:disabled) { border-color: var(--x-brand-2); color: var(--x-brand-2); }
.cndx-pg.is-on { background: var(--x-brand-2); border-color: var(--x-brand-2); color: #fff; }
.cndx-pg:disabled { opacity: .4; cursor: default; }
.cndx-pg .cndx-icon { width: 1.05rem; height: 1.05rem; }
.cndx-pg__gap { color: var(--x-faint); padding: 0 .15rem; }
.cndx-pg__info { flex-basis: 100%; text-align: center; color: var(--x-faint); font-size: var(--x-t-2xs); margin-top: .25rem; }

/* ------------------------------------------------------ responsive */
@media (max-width: 899px) {
	.cndx-head.cnd-board__head { grid-template-columns: minmax(0, 1fr); }
	.cndx-switch { display: grid; width: 100%; }
	.cndx-switch__btn { min-width: 0; }
}
@media (max-width: 719px) {
	.cndx-toolbar { gap: .5rem; }
	.cndx-searchbox { flex: 1 1 0; }
	.cndx-filterbtn { display: inline-flex; }
	.cndx-filters {
		display: none;
		flex: 1 1 100%;
		grid-template-columns: minmax(0, 1fr);
		gap: .5rem;
		padding: .75rem;
		border: 1px solid var(--x-line);
		border-radius: var(--x-r);
		background: var(--x-soft);
		animation: cndx-fade-up .25s var(--x-ease) both;
	}
	.cndx-subjects.is-filters-open .cndx-filters { display: grid; }
	.cndx-select, .cndx-select select { width: 100%; max-width: none; }
	.cndx-item { padding: 1rem; }
	.cndx-item:hover { transform: none; }
	.cndx-item__actions .cndx-btn { flex: 1 1 0; }
	.cndx-pg__gap + .cndx-pg, .cndx-pg { min-width: 2.3rem; height: 2.3rem; }
}
@media (max-width: 479px) {
	.cndx-switch__btn { gap: .5rem; padding: .55rem .6rem; }
	.cndx-switch__btn > .cndx-icon { width: 2rem; height: 2rem; padding: .45rem; }
	.cndx-switch__text small { display: none; }
	.cndx-switch__btn > i { padding: .05rem .4rem; font-size: .75rem; }
	.cndx-filterbtn span { display: none; }
	.cndx-filterbtn { padding: 0 .9rem; }
	.cndx-searchbox { padding-left: .85rem; }
}

/* ------------------------------------------------------------ modal */
/* stable gutter: hiding the scrollbar must not reflow the page mid-animation */
html.cndx-lock { overflow: hidden; scrollbar-gutter: stable; }
.cndx-modal.cnd, .cndx-modal {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: grid;
	place-items: center;
	max-width: none;
	margin: 0;
	padding: 1.25rem;
	font-family: var(--x-font);
	color: var(--x-ink);
	font-size: 17px;
	line-height: 1.55;
}
.cndx-modal__bg {
	position: absolute;
	inset: 0;
	background: rgba(11, 34, 27, .6);
	/* no backdrop-filter: see .cndx-cart__bg */
	animation: cndx-fade .22s ease both;
}
.cndx-modal__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(92vh, 56rem);
	max-height: min(92dvh, 56rem);
	border-radius: var(--x-r-lg);
	background: var(--x-paper);
	box-shadow: 0 32px 64px -12px rgba(11, 34, 27, .45);
	overflow: hidden;
	outline: none;
	animation: cndx-pop .3s var(--x-ease) both;
}
.cndx-modal.is-closing .cndx-modal__panel { animation: cndx-pop-out .18s ease both; }
.cndx-modal.is-closing .cndx-modal__bg { animation: cndx-fade .18s ease reverse both; }
@keyframes cndx-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cndx-pop-out { to { opacity: 0; transform: translateY(10px) scale(.985); } }

.cndx-modal__head {
	position: relative;
	flex: 0 0 auto;
	padding: 1.3rem 3.6rem 1.1rem 1.5rem;
	background: linear-gradient(135deg, var(--x-brand-2), var(--x-brand) 72%);
	color: #fff;
	overflow: hidden;
}
.cndx-modal__head::after {
	content: "";
	position: absolute;
	right: -3rem; top: -4.5rem;
	width: 11rem; height: 11rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	pointer-events: none;
	animation: cnd-head-drift 10s ease-in-out infinite;
}
.cndx-modal__x {
	position: absolute;
	top: .9rem; right: .9rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.25rem; height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.cndx-modal__x:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.cndx-modal__x .cndx-icon { width: 1.05rem; height: 1.05rem; }
.cndx-modal__tags { position: relative; display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.cndx-code--light { background: rgba(255, 255, 255, .16); color: #fff; }
.cndx-code--light:hover { background: rgba(255, 255, 255, .26); }
.cndx-modal__credit { color: rgba(255, 255, 255, .8); font-size: var(--x-t-2xs); font-weight: 700; }
.cndx-modal__head h2 { position: relative; margin: 0; color: #fff !important; font-size: var(--x-t-lg); }
.cndx-modal__sub { position: relative; margin: .2rem 0 0 !important; color: rgba(255, 255, 255, .78); font-size: var(--x-t-sm); }

.cndx-steps {
	position: relative;
	display: none;
	gap: .4rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.cndx-modal__panel[data-stage="form"] .cndx-steps { display: flex; }
.cndx-steps li {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: .45rem;
	min-width: 0;
	margin: 0;
	padding-top: .55rem;
	border-top: 3px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .6);
	font-size: var(--x-t-2xs);
	transition: border-color .3s ease, color .3s ease;
}
.cndx-steps li span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.4rem; height: 1.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: .75rem;
	font-weight: 700;
}
.cndx-steps li b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.cndx-steps li.is-on { border-color: var(--x-accent); color: #fff; }
.cndx-steps li.is-on span { background: var(--x-accent); color: #fff; }
.cndx-steps li.is-done { border-color: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .9); }
.cndx-steps li.is-done span { background: #fff; color: var(--x-brand); }

.cndx-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.35rem 1.5rem 1.5rem;
	-webkit-overflow-scrolling: touch;
}
.cndx-stage { animation: cndx-fade-up .3s var(--x-ease) both; }

.cndx-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
	margin: 0 0 1.3rem;
}
.cndx-facts > div {
	min-width: 0;
	padding: .7rem .85rem;
	border-radius: var(--x-r-sm);
	background: var(--x-soft);
	border: 1px solid var(--x-line-2);
}
.cndx-facts dt {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	color: var(--x-mute);
	font-size: var(--x-t-2xs);
}
.cndx-facts dt .cndx-icon { color: var(--x-brand-2); }
.cndx-facts dd { margin: .15rem 0 0; color: var(--x-ink); font-family: var(--x-display); font-weight: 700; font-size: var(--x-t-sm); overflow-wrap: anywhere; }
@media (min-width: 620px) { .cndx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cndx-block { margin: 0 0 1.35rem; }
.cndx-block__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.cndx-block__head h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: var(--x-t-md); }
.cndx-block__head h3 .cndx-icon { color: var(--x-brand-2); }
.cndx-langswitch { display: inline-flex; padding: .2rem; border-radius: var(--x-pill); background: var(--x-soft); border: 1px solid var(--x-line); }
.cndx-langswitch button {
	min-width: 2.6rem;
	padding: .2rem .6rem;
	border: 0;
	border-radius: var(--x-pill);
	background: transparent;
	color: var(--x-mute);
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
}
.cndx-langswitch button[aria-pressed="true"] { background: var(--x-paper); color: var(--x-brand); box-shadow: var(--x-sh-1); }
.cndx-langswitch button:disabled { opacity: .35; cursor: not-allowed; }
.cndx-desc { margin: 0; color: var(--x-ink-2); font-size: var(--x-t-base); line-height: 1.75 !important; white-space: pre-line; }
.cndx-desc.is-empty, .cndx-clos__none { color: var(--x-faint) !important; font-style: italic; }
.cndx-clos { margin: 0; padding: 0; list-style: none; counter-reset: clo; display: grid; gap: .5rem; }
.cndx-clos li {
	position: relative;
	margin: 0;
	padding: .65rem .85rem .65rem 2.8rem;
	border-radius: var(--x-r-sm);
	background: var(--x-paper);
	border: 1px solid var(--x-line);
	color: var(--x-ink-2);
	font-size: var(--x-t-sm);
	line-height: 1.6;
	counter-increment: clo;
	list-style: none;
}
.cndx-clos li::before {
	content: "CLO" counter(clo);
	position: absolute;
	left: .6rem; top: .72rem;
	padding: 0 .3rem;
	border-radius: .35rem;
	background: var(--x-brand-soft);
	color: var(--x-brand-2);
	font-family: var(--x-mono);
	font-size: .625rem;
	font-weight: 700;
	line-height: 1.6;
}
.cndx-clos li.cndx-clos__none { padding-left: .85rem; background: var(--x-soft); border-style: dashed; }
.cndx-clos li.cndx-clos__none::before { display: none; }
.cndx-interest { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--x-accent-ink); font-weight: 700; font-size: var(--x-t-sm); }

.cndx-modal__foot {
	flex: 0 0 auto;
	padding: .85rem 1.5rem;
	padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--x-line);
	background: var(--x-paper);
}
.cndx-foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.cndx-foot__step { margin-right: auto; order: -1; color: var(--x-faint); font-size: var(--x-t-2xs); display: none; }
.cndx-foot[data-cndx-foot="form"] .cndx-btn--ghost { margin-right: auto; }

/* ------------------------------------------------------------- form */
.cndx-form { margin: 0; }
.cndx-step { margin: 0; padding: 0; border: 0; min-width: 0; animation: cndx-fade-up .3s var(--x-ease) both; }
.cndx-step__title { padding: 0; margin: 0; font-family: var(--x-display); font-weight: 700; font-size: var(--x-t-md); color: var(--x-ink); }
.cndx-step__lead { margin: .15rem 0 1rem !important; color: var(--x-mute); font-size: var(--x-t-sm); }
.cndx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .95rem 1rem; }
@media (min-width: 600px) {
	.cndx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cndx-fld--wide { grid-column: 1 / -1; }
	/* prefix (+ its "other" box) get their own row; names always start a new row */
	.cndx-fld--first_name_th, .cndx-fld--first_name_en { grid-column: 1; }
	.cndx-fld--line_id { grid-column: auto; }
}
.cndx-fld { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cndx-fld__label, .cndx-fld > label {
	margin: 0;
	color: var(--x-ink-2);
	font-family: var(--x-display);
	font-weight: 700;
	font-size: var(--x-t-sm);
	line-height: 1.35;
}
.cndx-fld__label em, .cndx-check em { color: var(--x-hot); font-style: normal; }
.cndx-fld__label small { color: var(--x-faint); font-weight: 400; font-family: var(--x-font); font-size: var(--x-t-2xs); }
.cndx-form input[type="text"],
.cndx-form input[type="email"],
.cndx-form input[type="tel"],
.cndx-form select,
.cndx-form textarea {
	width: 100%;
	max-width: none;
	height: 3rem;
	margin: 0;
	padding: 0 .95rem;
	border: 1px solid #d0d5dd;
	border-radius: var(--x-r-sm);
	background: var(--x-paper);
	color: var(--x-ink);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: var(--x-sh-1);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cndx-form textarea { height: auto; min-height: 6.5rem; padding: .7rem .95rem; resize: vertical; }
.cndx-form select { padding-right: 2.4rem; border-radius: var(--x-r-sm); box-shadow: var(--x-sh-1); }
.cndx-selectwrap { position: relative; display: flex; align-items: center; }
.cndx-selectwrap select { max-width: none; height: 3rem; color: var(--x-ink); font-size: 16px; }
.cndx-form input:hover, .cndx-form select:hover, .cndx-form textarea:hover { border-color: #b8c0cc; }
.cndx-form input:focus, .cndx-form select:focus, .cndx-form textarea:focus { outline: none; border-color: var(--x-brand-2); box-shadow: var(--x-ring); }
.cndx-form ::placeholder { color: var(--x-faint); }
.cndx-fld__hint { color: var(--x-faint); font-size: var(--x-t-2xs); line-height: 1.4; }
.cndx-fld__err { display: none; color: var(--x-hot); font-size: var(--x-t-2xs); line-height: 1.4; }
.cndx-fld.is-invalid .cndx-fld__err, .cndx-fld__err:not(:empty) { display: flex; align-items: center; gap: .3rem; }
.cndx-fld.is-invalid input, .cndx-fld.is-invalid select, .cndx-fld.is-invalid textarea { border-color: var(--x-hot); background: #fffbfa; }
.cndx-fld.is-invalid input:focus, .cndx-fld.is-invalid select:focus, .cndx-fld.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .15); }
.cndx-fld.is-invalid .cndx-fld__hint { display: none; }
.cndx-fld--other { animation: cndx-fade-up .25s var(--x-ease) both; }

.cndx-seg { display: flex; flex-wrap: wrap; gap: .45rem; }
.cndx-seg__opt { position: relative; margin: 0; cursor: pointer; }
.cndx-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cndx-seg__opt span {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: .45rem 1.05rem;
	border: 1px solid #d0d5dd;
	border-radius: var(--x-pill);
	background: var(--x-paper);
	color: var(--x-ink-2);
	font-size: var(--x-t-sm);
	font-weight: 700;
	transition: all .15s ease;
	user-select: none;
}
.cndx-seg__opt:hover span { border-color: var(--x-brand-2); }
.cndx-seg__opt input:checked + span { background: var(--x-brand); border-color: var(--x-brand); color: #fff; box-shadow: 0 6px 14px -8px rgba(11, 61, 46, .8); }
.cndx-seg__opt input:focus-visible + span { box-shadow: var(--x-ring); }
.cndx-fld.is-invalid .cndx-seg__opt span { border-color: rgba(217, 45, 32, .55); }

.cndx-restore {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1rem;
	padding: .6rem .85rem;
	border-radius: var(--x-r-sm);
	background: var(--x-brand-soft);
	color: var(--x-brand);
	font-size: var(--x-t-2xs);
}
.cndx-restore .cndx-icon { width: 1rem; height: 1rem; }
.cndx-restore button { margin-left: auto; padding: 0; border: 0; background: none; color: var(--x-brand-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

.cndx-review {
	margin: 1.2rem 0 .9rem;
	padding: .85rem 1rem;
	border-radius: var(--x-r-sm);
	background: var(--x-soft);
	border: 1px solid var(--x-line);
	font-size: var(--x-t-sm);
}
.cndx-review:empty { display: none; }
.cndx-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.cndx-review__head b { font-family: var(--x-display); color: var(--x-ink); }
.cndx-review ul { margin: 0; padding: 0; list-style: none; color: var(--x-ink-2); }
.cndx-review li { margin: .1rem 0; }

.cndx-check {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin: .7rem 0 0;
	padding: .8rem .9rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-sm);
	background: var(--x-paper);
	color: var(--x-ink-2);
	font-size: var(--x-t-2xs);
	line-height: 1.55;
	cursor: pointer;
}
.cndx-check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--x-brand-2); cursor: pointer; }
.cndx-check.is-invalid { border-color: var(--x-hot); background: #fffbfa; }
.cndx-check--quiet { border: 0; padding: .2rem .1rem; background: transparent; color: var(--x-mute); }
.cndx-form > .cndx-step > .cndx-fld__err { margin-top: .35rem; }

.cndx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cndx-formerr {
	display: flex;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: .75rem .95rem;
	border-radius: var(--x-r-sm);
	background: #fef3f2;
	border: 1px solid #fecdca;
	color: #b42318;
	font-size: var(--x-t-sm);
	animation: cndx-shake .35s ease both;
}
@keyframes cndx-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ------------------------------------------------------------- done */
.cndx-done { text-align: center; padding: 1rem 0 .5rem; }
.cndx-done__icon {
	display: grid;
	place-items: center;
	width: 4.5rem; height: 4.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--x-brand-soft);
	color: var(--x-brand-2);
	animation: cndx-pop .45s var(--x-ease) both;
}
.cndx-done__icon .cndx-icon { width: 2.2rem; height: 2.2rem; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: cndx-draw .5s .2s ease forwards; }
@keyframes cndx-draw { to { stroke-dashoffset: 0; } }
.cndx-done h3 { margin: 0 0 .35rem; font-size: var(--x-t-lg); outline: none; }
.cndx-done > p { max-width: 32rem; margin: 0 auto; color: var(--x-ink-2); }
.cndx-ticket {
	display: grid;
	justify-items: center;
	gap: .2rem;
	max-width: 22rem;
	margin: 1.3rem auto 0;
	padding: 1rem 1.2rem;
	border: 1px dashed rgba(18, 113, 90, .4);
	border-radius: var(--x-r);
	background: var(--x-brand-soft);
}
.cndx-ticket > span { color: var(--x-mute); font-size: var(--x-t-2xs); }
.cndx-ticket__ref {
	padding: 0;
	border: 0;
	background: none;
	color: var(--x-brand);
	font-family: var(--x-mono);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: copy;
}
.cndx-ticket small { color: var(--x-ink-2); font-size: var(--x-t-2xs); }
.cndx-done__hint { margin-top: 1rem !important; color: var(--x-faint) !important; font-size: var(--x-t-2xs); }

/* ------------------------------------------------------------ toast */
.cndx-toast.cnd, .cndx-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1.5rem + env(safe-area-inset-bottom));
	z-index: 100020;
	max-width: calc(100vw - 2rem);
	margin: 0;
	padding: .6rem 1.1rem;
	border-radius: var(--x-pill);
	background: var(--x-ink);
	color: #fff;
	font-family: var(--x-font);
	font-size: .9375rem;
	box-shadow: var(--x-sh-2);
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .2s ease, transform .25s var(--x-ease);
	pointer-events: none;
}
.cndx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* cart toasts (toast( msg, kind ) in frontend.js): springy pop, a tinted
   icon that acts out the action, the n/max chip and a countdown line */
.cndx-toast.is-add, .cndx-toast.is-remove, .cndx-toast.is-clear, .cndx-toast.is-warn {
	--tc: var(--x-accent, #f7ab39);
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .4rem .5rem .4rem .4rem;
	overflow: hidden;
	transform: translate(-50%, 16px) scale(.86);
	transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.cndx-toast.is-remove { --tc: #f97066; }
.cndx-toast.is-clear  { --tc: #f97066; }
.cndx-toast.is-warn   { --tc: #fdb022; }
.cndx-toast.is-on:is(.is-add, .is-remove, .is-clear, .is-warn) { transform: translate(-50%, 0) scale(1); }
.cndx-toast__ic {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--tc);
	color: #fff;
}
.cndx-toast__ic .cndx-icon { width: 1.05rem; height: 1.05rem; }
.cndx-toast__msg { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cndx-toast__n {
	flex: 0 0 auto;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .85);
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cndx-toast__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--tc);
	opacity: .8;
	transform-origin: left center;
}
.cndx-toast.is-on .cndx-toast__bar { animation: cndx-toast-bar 1.8s linear both; }
@keyframes cndx-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* add: the cart drops in and bounces; the chip ticks up */
.cndx-toast.is-on.is-add .cndx-toast__ic { animation: cndx-toast-drop .6s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes cndx-toast-drop {
	0%   { transform: translateY(-140%) rotate(-25deg); }
	55%  { transform: translateY(0) rotate(0) scale(1.2, .82); }
	75%  { transform: translateY(-12%) scale(.95, 1.06); }
	100% { transform: none; }
}
.cndx-toast.is-on:is(.is-add, .is-remove) .cndx-toast__n { animation: cndx-toast-tick .45s .2s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes cndx-toast-tick { from { transform: translateY(70%) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* remove: the bin wiggles like something just went in */
.cndx-toast.is-on.is-remove .cndx-toast__ic { animation: cndx-toast-wiggle .6s .1s ease both; }
@keyframes cndx-toast-wiggle {
	0%, 100% { transform: none; }
	20% { transform: rotate(-16deg) scale(1.1); }
	40% { transform: rotate(12deg); }
	60% { transform: rotate(-8deg); }
	80% { transform: rotate(4deg); }
}
/* clear: the bin spins a full turn, flipping everything out */
.cndx-toast.is-on.is-clear .cndx-toast__ic { animation: cndx-toast-dump .7s cubic-bezier(.5, -.4, .3, 1.4) both; }
@keyframes cndx-toast-dump {
	0%   { transform: none; }
	35%  { transform: rotate(-30deg) scale(.9); }
	100% { transform: rotate(360deg); }
}
/* warn: the whole toast shakes its head */
.cndx-toast.is-on.is-warn { animation: cndx-toast-no .45s .15s ease both; }
@keyframes cndx-toast-no {
	0%, 100% { margin-left: 0; }
	20% { margin-left: -8px; }
	40% { margin-left: 7px; }
	60% { margin-left: -5px; }
	80% { margin-left: 3px; }
}
.cndx-toast.is-on.is-warn .cndx-toast__ic { animation: cndx-toast-pulse .9s ease-out both; }
@keyframes cndx-toast-pulse { 0% { box-shadow: 0 0 0 0 rgba(253, 176, 34, .6); } 100% { box-shadow: 0 0 0 10px rgba(253, 176, 34, 0); } }

/* ----------------------------------------------- modal: mobile sheet */
@media (max-width: 639px) {
	.cndx-modal.cnd, .cndx-modal { padding: 0; place-items: end stretch; }
	.cndx-modal__panel {
		width: 100%;
		max-height: 94vh;
		max-height: 94dvh;
		border-radius: 1.25rem 1.25rem 0 0;
		animation: cndx-sheet .34s var(--x-ease) both;
	}
	.cndx-modal.is-closing .cndx-modal__panel { animation: cndx-sheet-out .2s ease both; }
	.cndx-modal__panel[data-stage="form"] { height: 94vh; height: 94dvh; }
	.cndx-modal__head { padding: 1.4rem 3.4rem 1rem 1.1rem; }
	.cndx-modal__head::before {
		content: "";
		position: absolute;
		top: .45rem; left: 50%;
		width: 2.5rem; height: 4px;
		margin-left: -1.25rem;
		border-radius: 4px;
		background: rgba(255, 255, 255, .35);
	}
	.cndx-modal__head h2 { font-size: var(--x-t-md); }
	.cndx-modal__panel[data-stage="form"] .cndx-modal__sub { display: none; }
	.cndx-steps li b { display: none; }
	.cndx-steps li { justify-content: center; }
	.cndx-steps li.is-on b { display: block; }
	.cndx-steps li.is-on { flex: 2.2 1 0; justify-content: flex-start; }
	.cndx-modal__body { padding: 1.1rem 1.1rem 1.3rem; }
	.cndx-modal__foot { padding-left: 1.1rem; padding-right: 1.1rem; }
	.cndx-foot .cndx-btn { flex: 1 1 0; padding-left: .8rem; padding-right: .8rem; }
	.cndx-foot[data-cndx-foot="form"] .cndx-btn--ghost { flex: 0 0 auto; margin-right: 0; }
	.cndx-foot[data-cndx-foot="form"] .cndx-btn--ghost span { display: none; }
	.cndx-foot[data-cndx-foot="form"] .cndx-btn--ghost .cndx-icon { width: 1.2rem; height: 1.2rem; }
	.cndx-seg__opt span { padding: .45rem .9rem; }
}
@keyframes cndx-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cndx-sheet-out { to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
	.cndx-board *, .cndx-modal *, .cndx-modal, .cndx-toast, .cndx-toast * { animation: none !important; transition: none !important; }
	.cndx-done__icon .cndx-icon { stroke-dashoffset: 0; }
}

.cndx-modal[hidden], .cndx-toast[hidden] { display: none !important; }
.cndx-board { scroll-margin-top: 7rem; }

/* ================================================================ cart */

/* card button states */
.cndx-cartbtn.is-in { background: var(--x-brand-soft); color: var(--x-brand); border-color: rgba(18, 113, 90, .35); }
.cndx-cartbtn.is-in:hover { background: #fef3f2; color: var(--x-hot); border-color: #fecdca; box-shadow: none; }
.cndx-cartbtn.is-booked { background: var(--x-soft); color: var(--x-mute); border-color: var(--x-line); cursor: default; }
.cndx-cartbtn.is-booked:hover { background: var(--x-soft); color: var(--x-mute); box-shadow: none; }
.cndx-item.is-in-cart { border-color: rgba(18, 113, 90, .55); box-shadow: 0 0 0 3px rgba(18, 113, 90, .1); }
.cndx-btn--cart .cndx-icon { width: 1.15em; height: 1.15em; }
.cndx-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* floating bar: bottom centre so it never sits on a corner chat widget */
.cndx-cartbar.cnd, .cndx-cartbar {
	--x-ink: var(--ink, #101828);
	--x-accent: var(--accent, #f7ab39);
	--x-pill: 999px;
	--x-font: var(--font, "Sis-Reg", "Sarabun", system-ui, -apple-system, sans-serif);
	--x-display: var(--display, var(--x-font));
	--x-t-sm: var(--t-sm, 1rem);
	--x-ease: cubic-bezier(.16, 1, .3, 1);
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 100005;
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: calc(100vw - 1.5rem);
	margin: 0;
	padding: .4rem .4rem .4rem .5rem;
	border-radius: var(--x-pill);
	background: var(--x-ink);
	color: #fff;
	font-family: var(--x-font);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
	transform: translateX(-50%);
	transform-origin: center bottom;
}
/* the big soft shadow lives on ::before so the entrance fades it with opacity
   (compositor only) instead of animating box-shadow, which repaints every frame */
.cndx-cartbar::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .55);
	pointer-events: none;
	transition: opacity .32s ease-out;
}
.cndx-cartbar.is-bare::before { opacity: 0; transition: none; }
.cndx-cartbar.is-fx { will-change: transform, opacity, clip-path; }
.cndx-cartbar[hidden] { display: none !important; }
.cndx-cartbar__open {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
	margin: 0;
	padding: .2rem .8rem .2rem .2rem;
	border: 0;
	border-radius: var(--x-pill);
	background: transparent;
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.cndx-cartbar__open:hover { background: rgba(255, 255, 255, .08); }
.cndx-cartbar__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
}
.cndx-cartbar__icon .cndx-icon { width: 1.3rem; height: 1.3rem; }
.cndx-cartbar__icon i {
	position: absolute;
	top: -.2rem;
	right: -.25rem;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 .3rem;
	border-radius: var(--x-pill);
	background: var(--x-accent);
	color: #fff;
	font-style: normal;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3rem;
	text-align: center;
	box-shadow: 0 0 0 2px var(--x-ink);
}
.cndx-cartbar__icon.is-bump { animation: cndx-bump .45s var(--x-ease); }
@keyframes cndx-bump { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.cndx-cartbar__text { display: grid; min-width: 0; line-height: 1.25; }
.cndx-cartbar__text b { color: #fff; font-family: var(--x-display); font-weight: 700; font-size: var(--x-t-sm); white-space: nowrap; }
.cndx-cartbar__text small { color: rgba(255, 255, 255, .65); font-size: .8125rem; white-space: nowrap; }
.cndx-cartbar__cta { min-height: 2.6rem; }

/* add-to-cart flight (frontend.js flyToCart): the subject-code chip, the
   glitter it sheds and the "+1" off the badge. left/top are the centre
   point; the WAAPI transforms carry the -50% offset themselves. */
.cndx-fly {
	position: fixed;
	z-index: 100030;
	min-width: 18px;
	height: 1.6rem;
	padding: 0 .6rem;
	border-radius: 999px;
	background: #f7ab39;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0));
	color: #fff;
	font: 700 .8125rem/1.6rem system-ui, sans-serif;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 6px 16px -4px rgba(247, 171, 57, .7), 0 0 0 3px rgba(255, 255, 255, .9);
	transform: translate(-50%, -50%);
	pointer-events: none;
	will-change: transform, opacity;
}
/* removed: the chip the cart spits out, and its "-1" */
.cndx-fly.is-out {
	background-color: #f04438;
	box-shadow: 0 6px 16px -4px rgba(240, 68, 56, .6), 0 0 0 3px rgba(255, 255, 255, .9);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}
.cndx-plus.is-minus { color: #f04438; }
.cndx-spark {
	position: fixed;
	z-index: 100029;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.cndx-spark:nth-of-type(3n) { border-radius: 1px; }
.cndx-plus {
	position: fixed;
	z-index: 100031;
	color: #f7ab39;
	font: 800 1rem/1 system-ui, sans-serif;
	text-shadow: 0 1px 0 #fff, 0 2px 8px rgba(16, 24, 40, .35);
	transform: translate(-50%, 0);
	opacity: 0;
	pointer-events: none;
}

/* bar entrance / exit (frontend.js initCartUI): a zero-size layer pinned to
   the bar's centre holding the ball, its ground shadow and the landing burst.
   --d is the bar's height, so the ball matches the pill's ends exactly. */
.cndx-bounce {
	position: fixed;
	z-index: 100006;
	width: 0;
	height: 0;
	pointer-events: none;
}
.cndx-bounce > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.cndx-bounce__ball {
	display: grid;
	place-items: center;
	width: var(--d);
	height: var(--d);
	margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
	border-radius: 50%;
	background: var(--ink, #101828);
	color: #fff;
	/* a touch of gloss so it reads as a ball, not a flat dot */
	background-image: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 -6px 12px rgba(0, 0, 0, .25) inset;
}
.cndx-bounce__ball svg { width: calc(var(--d) * .38); height: calc(var(--d) * .38); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cndx-bounce__ball i {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 .28rem;
	border-radius: 999px;
	background: #f7ab39;
	color: #fff;
	font: 700 .72rem/1.2rem system-ui, sans-serif;
	font-style: normal;
	text-align: center;
	box-shadow: 0 0 0 2px var(--ink, #101828);
}
.cndx-bounce__shadow {
	width: calc(var(--d) * .9);
	height: 10px;
	margin: calc(var(--d) / 2 - 6px) 0 0 calc(var(--d) * -.45);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(16, 24, 40, .55), rgba(16, 24, 40, 0));
	opacity: 0;
}
.cndx-bounce__ring {
	width: var(--d);
	height: 14px;
	margin: calc(var(--d) / 2 - 7px) 0 0 calc(var(--d) / -2);
	border: 2px solid #f7ab39;
	border-radius: 50%;
	opacity: 0;
}
.cndx-bounce__bit {
	width: 7px;
	height: 7px;
	margin: calc(var(--d) / 2 - 6px) 0 0 -3.5px;
	border-radius: 2px;
	opacity: 0;
}
.cndx-bounce__bit:nth-child(odd) { border-radius: 50%; }
.cndx-bounce__bit.is-dust { width: 9px; height: 9px; border-radius: 50%; background: rgba(152, 162, 179, .55); }

/* keep the last row and the pager clear of the bar */
html.cndx-has-cart .cndx-subjects { padding-bottom: 5.5rem; }
@media (max-width: 719px) {
	.cndx-cartbar.cnd, .cndx-cartbar { left: .75rem; right: .75rem; transform: none; max-width: none; }
	.cndx-cartbar__open { flex: 1 1 auto; }
	.cndx-cartbar__cta { flex: 0 0 auto; }
	/* lift corner chat widgets above the bar, as the base plugin does for its CTA */
	html.cndx-has-cart [id*="gb-widget"], html.cndx-has-cart [class*="gb-widget"] { bottom: calc(5.4rem + env(safe-area-inset-bottom)) !important; }
}

/* cart panel */
.cndx-cart.cnd, .cndx-cart {
	position: fixed;
	inset: 0;
	z-index: 100008;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--x-font);
	color: var(--x-ink);
	font-size: 17px;
	line-height: 1.55;
}
.cndx-cart[hidden] { display: none !important; }
.cndx-cart :where(p) { font-size: inherit; line-height: inherit !important; }
.cndx-cart :where(h2) { line-height: 1.3 !important; font-weight: 700 !important; font-family: var(--x-display); }
/* no backdrop-filter: re-blurring the whole page every frame of the fade is what made the slide stutter */
.cndx-cart__bg { position: absolute; inset: 0; background: rgba(11, 34, 27, .55); opacity: 0; transition: opacity .22s ease; }
.cndx-cart__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(440px, 100%);
	background: var(--x-paper);
	box-shadow: -24px 0 48px -16px rgba(16, 24, 40, .35);
	transform: translateX(100%);
	transition: transform .32s var(--x-ease);
	outline: none;
	will-change: transform;
	backface-visibility: hidden;
}
.cndx-cart.is-open .cndx-cart__bg { opacity: 1; }
.cndx-cart.is-open .cndx-cart__panel { transform: none; }
.cndx-cart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem 1rem; border-bottom: 1px solid var(--x-line); }
.cndx-cart__head h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--x-t-lg); color: var(--x-ink); }
.cndx-cart__head h2 .cndx-icon { color: var(--x-brand-2); }
.cndx-cart__head p { margin: .1rem 0 0 !important; color: var(--x-mute); font-size: var(--x-t-sm); }
.cndx-modal__x--dark { position: static; flex: 0 0 auto; background: var(--x-soft); color: var(--x-ink-2); }
.cndx-modal__x--dark:hover { background: var(--x-line); transform: rotate(90deg); }
.cndx-cart__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1.25rem; }
.cndx-cart__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.cndx-cart__item {
	display: flex;
	align-items: stretch;
	gap: .4rem;
	margin: 0;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r);
	background: var(--x-paper);
	list-style: none;
	transition: opacity .18s ease, transform .18s ease;
}
/* only the fresh item animates: display:none -> block replays CSS animations, so animating every row would restart the whole list on each open, on top of the slide */
.cndx-cart__item.is-new { border-color: rgba(18, 113, 90, .5); background: #f6fbf9; animation: cndx-fade-up .3s var(--x-ease) both; }
.cndx-cart__item.is-leaving { opacity: 0; transform: translateX(16px); }
.cndx-cart__info { flex: 1 1 auto; display: grid; gap: .15rem; min-width: 0; margin: 0; padding: .75rem .85rem; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font-family: inherit; border-radius: var(--x-r) 0 0 var(--x-r); }
.cndx-cart__info:hover b { color: var(--x-brand-2); }
.cndx-cart__top { display: flex; align-items: center; gap: .5rem; }
.cndx-cart__top small { color: var(--x-mute); font-size: .8125rem; }
.cndx-cart__info b { font-family: var(--x-display); font-weight: 700; font-size: var(--x-t-sm); line-height: 1.35; color: var(--x-ink); }
.cndx-cart__where { color: var(--x-faint); font-size: .8125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cndx-cart__rm { flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--x-line-2); border-radius: 0 var(--x-r) var(--x-r) 0; background: none; color: var(--x-faint); cursor: pointer; }
.cndx-cart__rm:hover { background: #fef3f2; color: var(--x-hot); }
.cndx-cart__rm .cndx-icon { width: 1.1rem; height: 1.1rem; }
.cndx-cart__empty { display: grid; justify-items: center; gap: .35rem; padding: 2.5rem 1rem; text-align: center; color: var(--x-mute); font-size: var(--x-t-sm); }
.cndx-cart__empty > .cndx-icon { width: 2.4rem; height: 2.4rem; color: var(--x-faint); }
.cndx-cart__empty b { color: var(--x-ink); font-size: var(--x-t-md); font-family: var(--x-display); }
.cndx-cart__note { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 0 !important; color: var(--x-faint); font-size: .8125rem; }
.cndx-cart__foot { padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--x-line); background: var(--x-soft); }
.cndx-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; color: var(--x-mute); font-size: var(--x-t-sm); }
.cndx-cart__total b { color: var(--x-ink); font-family: var(--x-display); font-size: var(--x-t-md); }
.cndx-cart__actions { display: flex; gap: .5rem; }
.cndx-cart__actions .cndx-btn:last-child { flex: 1 1 auto; }
@media (max-width: 639px) {
	.cndx-cart__panel { top: auto; left: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 1.25rem 1.25rem 0 0; transform: translateY(100%); }
}

/* checkout header code strip */
.cndx-modal__codes { position: relative; display: flex; flex-wrap: wrap; gap: .3rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.cndx-modal__codes li { margin: 0; padding: .05rem .5rem; border-radius: .4rem; background: rgba(255, 255, 255, .16); color: #fff; font-family: var(--x-mono); font-size: .75rem; font-weight: 700; list-style: none; }

/* duplicate notice */
.cndx-dup { display: flex; gap: .65rem; margin: 0 0 1.1rem; padding: .85rem 1rem; border-radius: var(--x-r-sm); background: var(--x-accent-soft); border: 1px solid #f5d9a8; color: #7a4d06; font-size: var(--x-t-sm); animation: cndx-fade-up .3s var(--x-ease) both; }
.cndx-dup > .cndx-icon { width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--x-accent-ink); }
.cndx-dup b { display: block; color: #5c3a05; font-family: var(--x-display); }
.cndx-dup ul { margin: .4rem 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.cndx-dup li { margin: 0; font-size: var(--x-t-2xs); list-style: none; }
.cndx-dup span[data-cndx-dup-hint] { display: block; font-size: var(--x-t-2xs); }
.cndx-dup--quiet { margin: 1rem auto 0; max-width: 32rem; text-align: left; }

/* review: subjects list */
.cndx-review__label { margin: 0 0 .35rem !important; color: var(--x-mute); font-size: var(--x-t-2xs); font-weight: 700; }
.cndx-review__subjects { display: grid; gap: .35rem; margin: 0 0 .8rem !important; padding: 0; list-style: none; }
.cndx-review__subjects li { display: flex; align-items: baseline; gap: .5rem; margin: 0; list-style: none; }
.cndx-review__subjects b { font-family: var(--x-display); color: var(--x-ink); font-size: var(--x-t-sm); }

/* done: receipt */
.cndx-receipt { max-width: 32rem; margin: 1.2rem auto 0; border: 1px dashed rgba(18, 113, 90, .45); border-radius: var(--x-r); background: var(--x-brand-soft); text-align: left; overflow: hidden; }
.cndx-receipt__head { display: flex; justify-content: space-between; padding: .55rem 1rem; color: var(--x-mute); font-size: var(--x-t-2xs); border-bottom: 1px dashed rgba(18, 113, 90, .3); }
.cndx-receipt__list { margin: 0; padding: .3rem 0; list-style: none; }
.cndx-receipt__list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0; padding: .5rem 1rem; list-style: none; }
.cndx-receipt__name { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.cndx-receipt__name b { font-family: var(--x-display); font-size: var(--x-t-sm); color: var(--x-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cndx-receipt__ref { flex: 0 0 auto; padding: .15rem .45rem; border: 0; border-radius: .4rem; background: var(--x-paper); color: var(--x-brand); font-family: var(--x-mono); font-weight: 700; font-size: .875rem; cursor: copy; }
.cndx-receipt__ref:hover { background: #fff7e6; }
@media (max-width: 480px) {
	.cndx-receipt__list li { flex-direction: column; align-items: flex-start; gap: .25rem; }
	.cndx-receipt__name b { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.cndx-cartbar, .cndx-cart *, .cndx-fly, .cndx-bounce * { animation: none !important; transition: none !important; }
}
.cndx-cart [hidden], .cndx-cartbar [hidden] { display: none !important; }
html.cndx-has-cart .cndx-toast { bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
/* corner chat widgets would sit on top of the cart sheet / booking dialog */
html.cndx-lock [id*="gb-widget"], html.cndx-lock [class*="gb-widget"] { visibility: hidden !important; }

/* ====================================================== v1.1 refinements */

/* ---- switch: one easing, one duration for every moving part */
.cndx-switch { --x-sw: .42s cubic-bezier(.22, 1, .36, 1); }
.cndx-switch__glider {
	transition: transform var(--x-sw), width var(--x-sw), height var(--x-sw);
	will-change: transform;
}
.cndx-switch__btn { transition: color var(--x-sw); }
.cndx-switch__btn > .cndx-icon { transition: background-color var(--x-sw), color var(--x-sw), border-color var(--x-sw), transform var(--x-sw); }
.cndx-switch__btn.is-on > .cndx-icon { transform: scale(1.04); }
.cndx-switch__btn > i { transition: background-color var(--x-sw), color var(--x-sw); }
.cndx-switch__text small { transition: color var(--x-sw); }
.cndx-switch__btn:active > .cndx-icon { transform: scale(.94); }
/* incoming panel + head text fade in on the same curve as the glider */
.cndx-board > .cnd-tabs[data-cndx-panel],
.cndx-board > .cndx-subjects,
.cndx-head__for { animation: cndx-panel-in .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes cndx-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- search: the pill is the focus ring; the input inside draws nothing */
.cndx-searchbox input,
.cndx-searchbox input:hover,
.cndx-searchbox input:focus,
.cndx-searchbox input:focus-visible,
.cndx-searchbox input:active {
	outline: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}
.cndx-searchbox:focus-within { border-color: var(--x-brand-2); box-shadow: var(--x-ring); }

/* ---- custom dropdown */
.cndx-select.has-dd { display: inline-flex; }
.cndx-dd { position: relative; }
.cndx-dd__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 3rem;
	max-width: 16rem;
	margin: 0;
	padding: 0 .95rem 0 1rem;
	border: 1px solid var(--x-line);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	color: var(--x-ink-2);
	font: inherit;
	font-size: var(--x-t-sm);
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--x-sh-1);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.cndx-dd__btn:hover { border-color: #cfd6dd; }
.cndx-dd__btn:focus { outline: none; }
.cndx-dd__btn:focus-visible, .cndx-dd.is-open .cndx-dd__btn { border-color: var(--x-brand-2); box-shadow: var(--x-ring); outline: none; }
.cndx-dd__pre { color: var(--x-faint); font-size: var(--x-t-2xs); }
.cndx-dd__val { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cndx-dd__chev { width: 1rem; height: 1rem; margin-left: auto; color: var(--x-faint); transition: transform .25s var(--x-ease); }
.cndx-dd.is-open .cndx-dd__chev { transform: rotate(180deg); color: var(--x-brand-2); }
.cndx-select.is-set .cndx-dd__btn { border-color: rgba(18, 113, 90, .45); background: var(--x-brand-soft); color: var(--x-brand); font-weight: 700; }
.cndx-select.is-set .cndx-dd__chev { color: var(--x-brand-2); }

@media (max-width: 719px) {
	.cndx-select.has-dd, .cndx-select.has-dd .cndx-dd, .cndx-select.has-dd .cndx-dd__btn { width: 100%; max-width: none; }
}
/* booking-form field variant: looks like the text inputs next to it */
.cndx-selectwrap.has-dd { display: block; }
.cndx-dd--field, .cndx-dd--field .cndx-dd__btn { width: 100%; max-width: none; }
.cndx-dd--field .cndx-dd__btn { height: 3rem; padding: 0 .9rem 0 .95rem; border-color: #d0d5dd; border-radius: var(--x-r-sm); color: var(--x-ink); font-size: 16px; }
.cndx-dd--field.is-empty .cndx-dd__val { color: var(--x-faint); }
.cndx-dd--field .cndx-dd__btn:hover { border-color: #b8c0cc; }
.cndx-fld.is-invalid .cndx-dd--field .cndx-dd__btn { border-color: var(--x-hot); background: #fffbfa; }
.cndx-fld.is-invalid .cndx-dd--field .cndx-dd__btn:focus-visible { box-shadow: 0 0 0 3px rgba(217, 45, 32, .15); }

@media (max-width: 719px) {
	.cndx-subjects.is-filters-closing .cndx-filters { animation: cndx-filters-out .18s ease both; }
	@keyframes cndx-filters-out { to { opacity: 0; transform: translateY(-6px); } }
}

/* ---- result bar: layout toggle */
.cndx-resultbar { align-items: center; }
.cndx-viewtoggle { display: inline-flex; margin-left: auto; padding: .2rem; border-radius: var(--x-pill); background: var(--x-soft); border: 1px solid var(--x-line); }
.cndx-viewtoggle button { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .75rem; border: 0; border-radius: var(--x-pill); background: transparent; color: var(--x-mute); font: inherit; font-size: var(--x-t-2xs); font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.cndx-viewtoggle button .cndx-icon { width: 1rem; height: 1rem; }
.cndx-viewtoggle button:hover { color: var(--x-ink-2); }
.cndx-viewtoggle button.is-on { background: var(--x-paper); color: var(--x-brand); box-shadow: var(--x-sh-1); }
@media (max-width: 479px) { .cndx-viewtoggle button span { display: none; } }

/* ---- list (table-like) layout */
.cndx-subjects.is-rows .cndx-resultbar { border-bottom: 0; margin-bottom: .6rem; padding-bottom: 0; }
.cndx-row, .cndx-listhead {
	/* every track fixed except the name: header and rows are separate grids,
	   so an auto/minmax track would size differently in each and skew them */
	--row-cols: 7.25rem minmax(0, 1fr) 13rem 6.25rem 11.25rem;
	display: grid;
	grid-template-columns: var(--row-cols);
	align-items: center;
	gap: 0 1.1rem;
}
.cndx-listhead {
	padding: .6rem 1rem;
	border: 1px solid var(--x-line);
	border-bottom: 0;
	border-radius: var(--x-r) var(--x-r) 0 0;
	background: var(--x-soft);
	color: var(--x-mute);
	font-size: var(--x-t-2xs);
	font-weight: 700;
}
.cndx-listhead button { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; justify-self: start; }
.cndx-listhead button.is-num { justify-self: center; }
.cndx-listhead > :last-child { justify-self: end; }
.cndx-listhead button:hover, .cndx-listhead button.is-on { color: var(--x-brand); }
.cndx-listhead button i { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; opacity: .35; }
.cndx-listhead button.is-on i { opacity: 1; }

.cndx-list.cndx-list--rows {
	display: block;
	border: 1px solid var(--x-line);
	border-radius: 0 0 var(--x-r) var(--x-r);
	background: var(--x-paper);
	overflow: hidden;
}
.cndx-list--rows .cndx-row {
	position: relative;
	min-height: 4.25rem;
	padding: .7rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--x-line-2);
	border-radius: 0;
	background: var(--x-paper);
	box-shadow: none;
	animation: cndx-fade .25s ease both;
	transition: background .15s ease;
}
.cndx-list--rows .cndx-row:last-child { border-bottom: 0; }
.cndx-list--rows .cndx-row:hover { background: #fafbfc; transform: none; box-shadow: none; border-color: var(--x-line-2); }
.cndx-list--rows .cndx-row.is-in-cart { background: #f6fbf9; box-shadow: inset 3px 0 0 var(--x-brand-2); }
.cndx-list--rows .cndx-row.is-featured { background: linear-gradient(90deg, #fffaf1, var(--x-paper) 50%); }
.cndx-row__code { display: flex; flex-direction: row; align-items: center; gap: .25rem; }
.cndx-row__code .cndx-flag { font-size: .6875rem; padding: 0 .4rem; }
.cndx-row__main { display: grid; gap: .1rem; min-width: 0; }
.cndx-row__crm { display: none; padding: .05rem .5rem; border-radius: 999px; background: var(--x-soft); color: var(--x-mute); font-size: .75rem; }
.cndx-row__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--x-ink);
	font-family: var(--x-display);
	font-size: var(--x-t-base);
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.cndx-row__name:hover { color: var(--x-brand-2); }
.cndx-row__name:focus-visible { outline: 2px solid var(--x-brand-2); outline-offset: 2px; border-radius: 4px; }
.cndx-row__alt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--x-mute); font-size: var(--x-t-2xs); }
.cndx-row__fac { display: grid; min-width: 0; line-height: 1.35; }
.cndx-row__fac span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--x-ink-2); font-size: var(--x-t-2xs); }
.cndx-row__fac small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--x-faint); font-size: .8125rem; }
.cndx-row__interest { color: var(--x-accent-ink) !important; font-weight: 700; }
.cndx-row__cr { display: grid; justify-content: center; justify-items: center; line-height: 1.2; grid-auto-flow: column; align-items: baseline; gap: .3rem; white-space: nowrap; }
.cndx-row__cr b { color: var(--x-ink); font-family: var(--x-display); font-size: var(--x-t-md); }
.cndx-row__cr small { color: var(--x-faint); font-size: .75rem; font-family: var(--x-mono); }
.cndx-row__act { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.cndx-row__act .cndx-cartbtn { min-width: 8.5rem; }
.cndx-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--x-mute);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cndx-iconbtn:hover { background: var(--x-soft); border-color: var(--x-line); color: var(--x-brand); }
.cndx-iconbtn .cndx-icon { width: 1.15rem; height: 1.15rem; }
.cndx-list--rows .cndx-item--ghost { display: grid; grid-template-columns: 6rem 1fr 10rem; gap: 1rem; min-height: 4.25rem; padding: .9rem 1rem; border: 0; border-bottom: 1px solid var(--x-line-2); border-radius: 0; }
.cndx-list--rows .cndx-item--ghost span:nth-child(1) { width: 5rem; }
.cndx-list--rows .cndx-item--ghost span:nth-child(2) { width: 70%; height: 1rem; }
.cndx-list--rows .cndx-item--ghost span:nth-child(3) { width: 80%; height: .9rem; }
.cndx-list--rows .cndx-empty { border: 0; border-radius: 0; }
.cndx-list--rows .cndx-row mark { background: #fff1c7; color: inherit; border-radius: 3px; padding: 0 1px; }

@media (max-width: 1023px) {
	.cndx-row, .cndx-listhead { --row-cols: 6.5rem minmax(0, 1fr) 10rem 6rem 5.5rem; gap: 0 .8rem; }
	/* tablet: cart button becomes an icon so the name keeps its room */
	.cndx-row__act .cndx-cartbtn { min-width: 0; width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; border-radius: 50%; }
	.cndx-row__act .cndx-cartbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* phones/tablets: compact two-line rows, header hidden */
@media (max-width: 767px) {
	.cndx-listhead { display: none !important; }
	.cndx-list.cndx-list--rows { border-radius: var(--x-r); }
	.cndx-list--rows .cndx-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "code act" "main act" "fac act";
		gap: .15rem .75rem;
		padding: .8rem .9rem;
	}
	.cndx-row__code { grid-area: code; flex-direction: row; align-items: center; gap: .4rem; }
	.cndx-row__main { grid-area: main; }
	.cndx-row__fac { grid-area: fac; display: flex; gap: .35rem; }
	.cndx-row__fac small::before { content: "· "; }
	.cndx-row__cr { display: none; }
	.cndx-row__crm { display: inline-block !important; }
	.cndx-row__act { grid-area: act; flex-direction: column; justify-content: center; }
	.cndx-row__act .cndx-iconbtn { display: none; }
	.cndx-row__act .cndx-cartbtn { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border-radius: 50%; }
	.cndx-row__act .cndx-cartbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cndx-row__act .cndx-cartbtn .cndx-icon { width: 1.25rem; height: 1.25rem; }
	.cndx-row__name { font-size: var(--x-t-sm); }
}

/* ---- danger button */
.cndx-btn--danger { background: var(--x-hot); }
.cndx-btn--danger:hover { background: #b42318; box-shadow: 0 8px 18px -8px rgba(217, 45, 32, .6); }

/* ---- SweetAlert2 theme */
.cndx-swal.swal2-container { z-index: 100060 !important; padding: 1rem; }
.cndx-swal.swal2-container.swal2-backdrop-show { background: rgba(11, 34, 27, .6) !important; }
.cndx-swal .cndx-swal__popup {
	width: min(26rem, 100%);
	padding: 1.6rem 1.5rem 1.3rem;
	border-radius: 1.25rem;
	font-family: "Sis-Reg", "Sarabun", system-ui, sans-serif;
	box-shadow: 0 32px 64px -16px rgba(11, 34, 27, .45);
}
.cndx-swal .cndx-swal__icon { margin: .25rem auto 1rem; transform: scale(.8); }
.cndx-swal .swal2-icon.swal2-warning { border-color: #f5c16c; color: #d98a0a; }
.cndx-swal .swal2-icon.swal2-question { border-color: #9fd3c2; color: #12715a; }
.cndx-swal .cndx-swal__title { padding: 0; color: #101828; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.cndx-swal .cndx-swal__text { margin: .5rem 0 0; padding: 0; color: #475467; font-size: 1rem; line-height: 1.6; }
.cndx-swal .cndx-swal__actions { width: 100%; gap: .5rem; margin: 1.35rem 0 0; flex-wrap: nowrap; }
.cndx-swal .cndx-swal__actions .cndx-btn { flex: 1 1 0; margin: 0; }
.cndx-swal-in { animation: cndx-pop .28s cubic-bezier(.16, 1, .3, 1) both; }
.cndx-swal-out { animation: cndx-pop-out .16s ease both; }
@media (max-width: 480px) { .cndx-swal .cndx-swal__actions { flex-direction: column-reverse; } .cndx-swal .cndx-swal__actions .cndx-btn { width: 100%; } }

/* ---- TH / EN description switch: one pill slides between the two buttons */
.cndx-langswitch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.cndx-langswitch::before {
	content: "";
	position: absolute;
	top: .2rem; bottom: .2rem; left: .2rem;
	width: calc(50% - .2rem);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	box-shadow: var(--x-sh-1);
	transition: transform .32s cubic-bezier(.22, 1, .36, 1);
	z-index: -1;
}
.cndx-langswitch:has(button[data-cndx-desc-lang="en"][aria-pressed="true"])::before { transform: translateX(100%); }
.cndx-langswitch button { position: relative; transition: color .25s ease, opacity .2s ease; }
.cndx-langswitch button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.cndx-langswitch button:not(:disabled):not([aria-pressed="true"]):hover { color: var(--x-ink-2); }
.cndx-desc.is-swap { animation: cndx-desc-swap .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes cndx-desc-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cndx-langswitch::before, .cndx-desc.is-swap { transition: none; animation: none; } }

/* ================================================= transitions everywhere */

/* list / cards toggle: sliding pill, same curve as the other switches */
.cndx-viewtoggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.cndx-viewtoggle::before {
	content: "";
	position: absolute;
	top: .2rem; bottom: .2rem; left: .2rem;
	width: calc(50% - .2rem);
	border-radius: var(--x-pill);
	background: var(--x-paper);
	box-shadow: var(--x-sh-1);
	transition: transform .32s cubic-bezier(.22, 1, .36, 1);
	z-index: -1;
}
.cndx-viewtoggle:has(button[data-cndx-mode="cards"].is-on)::before { transform: translateX(100%); }
.cndx-viewtoggle button { justify-content: center; transition: color .25s ease; }
.cndx-viewtoggle button.is-on { background: transparent; box-shadow: none; }
.cndx-viewtoggle button .cndx-icon { transition: transform .32s cubic-bezier(.22, 1, .36, 1); }
.cndx-viewtoggle button.is-on .cndx-icon { transform: scale(1.08); }

/* things that appear: fade/rise in (animations replay whenever display:none is lifted) */
.cndx-listhead, .cndx-notice, .cndx-empty, .cndx-resultbar__count, .cndx-restore, .cndx-review, .cndx-formerr {
	animation: cndx-appear .3s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cndx-appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* small controls that changed state without easing */
.cndx-filterbtn { transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; }
.cndx-filterbtn:hover { border-color: #cfd6dd; }
.cndx-filterbtn i { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.cndx-filterbtn i:not([hidden]) { animation: cndx-bump .35s cubic-bezier(.22, 1, .36, 1); }
.cndx-searchbox__clear { transition: background .15s ease, color .15s ease, transform .2s ease; }
.cndx-searchbox.has-value .cndx-searchbox__clear { animation: cndx-appear .2s ease both; }
.cndx-listhead button { transition: color .2s ease; }
.cndx-listhead button i { transition: opacity .2s ease, transform .25s ease; }
.cndx-chip { transition: background .2s ease, border-color .2s ease, color .2s ease; }
.cndx-code, .cndx-credit, .cndx-flag { transition: background .2s ease, color .2s ease; }
.cndx-item__link, .cndx-row__name, .cndx-cart__info b { transition: color .2s ease; }
.cndx-clos li { transition: border-color .2s ease, background .2s ease; }
.cndx-clos li:hover { border-color: rgba(18, 113, 90, .35); }
.cndx-facts > div { transition: border-color .2s ease, background .2s ease; }
.cndx-modal__codes li { animation: cndx-appear .3s cubic-bezier(.22, 1, .36, 1) both; }
.cndx-fld__err:not(:empty) { animation: cndx-appear .2s ease both; }
.cndx-form input, .cndx-form textarea, .cndx-dd__btn { transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease, color .15s ease; }

@media (prefers-reduced-motion: reduce) {
	.cndx-viewtoggle::before, .cndx-viewtoggle button .cndx-icon { transition: none; }
	.cndx-listhead, .cndx-notice, .cndx-empty, .cndx-resultbar__count, .cndx-restore, .cndx-review, .cndx-formerr,
	.cndx-modal__codes li, .cndx-fld__err, .cndx-filterbtn i, .cndx-searchbox__clear { animation: none !important; }
}

/* dim the rows, not the list: opacity on the list would fade the loader inside it too */
.cndx-list.is-loading { opacity: 1; }
.cndx-list.is-loading > :not(.cndx-ld-overlay) { filter: opacity(.38) saturate(.5); transition: filter .2s ease; } /* filter: the rows' fill-mode animation pins opacity */
.cndx-list .cndx-ld-overlay { background: rgba(255, 255, 255, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* search hit outside the visible text: "พบในคำอธิบาย / พบใน CLO" + that bit */
.cndx-hit__tag {
	display: inline-block;
	margin-right: .4rem;
	padding: 0 .45rem;
	border-radius: 999px;
	background: var(--x-brand-soft);
	color: var(--x-brand-2);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 1px;
	white-space: nowrap;
}
.cndx-item__desc.cndx-hit { -webkit-line-clamp: 3; }
.cndx-row__hit {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: .2rem 0 0;
	color: var(--x-ink-2);
	font-size: var(--x-t-2xs);
	line-height: 1.5;
}

/* ------------------------------------------------------------ KU GIFT
   Only rendered in KU GIFT mode (?app=kugift with the KU GIFT add-on).
   Colours match the add-on's badge so modules and subjects read as one
   campaign. */
.cndx-kg {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1rem .5rem;
	border-radius: var(--x-pill);
	background: linear-gradient(135deg, #b0126a, #6a1b9a);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
}
.cndx-kg .cndx-icon { width: 1em; height: 1em; color: #ffd166; }
.cndx-kg.is-full { background: var(--x-soft); color: var(--x-mute); }
.cndx-kg.is-full .cndx-icon { color: currentColor; }
.cndx-row__main .cndx-kg { justify-self: start; margin-bottom: .15rem; font-size: .6875rem; padding: 0 .45rem; }
/* KU GIFT subjects stand out: tinted, a gradient edge, a shining badge and
   a benefit line, in the add-on's colours */
.cndx-item.is-kugift {
	border: 1.5px solid #e9a8cb;
	background: linear-gradient(180deg, #fdf1f8, var(--x-paper) 55%);
	box-shadow: 0 10px 24px -16px rgba(176, 18, 106, .55);
	overflow: hidden;
}
.cndx-item.is-kugift::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, #b0126a, #6a1b9a);
}
.cndx-item.is-kugift:hover { border-color: #d9529b; box-shadow: 0 14px 28px -14px rgba(176, 18, 106, .6); }
.cndx-list--rows .cndx-row.is-kugift {
	border: 0;
	border-bottom: 1px solid #f3d3e5;
	background: linear-gradient(90deg, #fbeaf4, #fdf6fa 45%, var(--x-paper));
	box-shadow: none;
}
.cndx-list--rows .cndx-row.is-kugift::before { top: 0; bottom: 0; right: auto; width: 4px; height: auto; background: linear-gradient(180deg, #b0126a, #6a1b9a); }
.cndx-list--rows .cndx-row.is-kugift:hover { background: linear-gradient(90deg, #f8dcec, #fbeef6 45%, var(--x-paper)); box-shadow: none; }

/* shining badge, same sweep as the add-on's */
.cndx-kg { position: relative; overflow: hidden; box-shadow: 0 4px 10px -4px rgba(106, 27, 154, .6); }
.cndx-kg::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	animation: cndx-kg-shine 3.2s ease-in-out infinite;
	pointer-events: none;
}
.cndx-kg.is-full::after { display: none; }
@keyframes cndx-kg-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .cndx-kg::after { animation: none; display: none; } }

/* benefit line: row (under the name) and card (above the buttons) */
.cndx-kg-note, .cndx-kg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; color: #7a0f4b; }
.cndx-kg-note { margin-top: .2rem; font-size: var(--x-t-2xs); }
.cndx-kg-note b, .cndx-kg-strip b { display: inline-flex; align-items: center; gap: .25rem; color: #b0126a; font-weight: 700; }
.cndx-kg-note .cndx-icon, .cndx-kg-strip .cndx-icon { width: 1em; height: 1em; }
.cndx-kg-strip {
	justify-content: space-between;
	margin: .25rem 0 .75rem;
	padding: .45rem .7rem;
	border-radius: 10px;
	background: #fbeef6;
	font-size: var(--x-t-xs);
}
.cndx-kg-note.is-full b, .cndx-kg-strip.is-full b { color: var(--x-mute); }
.cndx-kg-note__seats, .cndx-kg-strip__seats { color: #7a0f4b; font-weight: 600; }
.cndx-kg-note__seats::before { content: "· "; }
.cndx-kg-strip b { font-size: var(--x-t-sm); }
.cndx-kg-strip__seats { flex-basis: 100%; text-align: right; font-size: var(--x-t-2xs); }
/* subject's KU GIFT note: its own line, 2 lines max (full text in the dialog);
   in the card strip it sits above the right-aligned seats line */
.cndx-kg-note__text, .cndx-kg-strip__text {
	flex-basis: 100%;
	min-width: 0;
	color: var(--x-ink-2);
	font-size: var(--x-t-2xs);
	font-weight: 400;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cndx-kg-strip__seats { order: 2; }
.cndx-kg-callout__deal {
	display: inline-block;
	margin-left: .35rem;
	padding: 0 .55rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #b0126a, #6a1b9a);
	color: #fff;
	font-size: .8125rem;
	vertical-align: 1px;
}
.cndx-kg-callout__deal[hidden] { display: none; }

/* group headings: KU GIFT subjects first, then the rest */
.cndx-kg-group {
	display: flex;
	align-items: center;
	gap: .45rem;
	grid-column: 1 / -1;
	padding: .55rem 1rem;
	color: var(--x-mute);
	font-size: var(--x-t-xs);
	font-weight: 700;
	letter-spacing: .02em;
	background: var(--x-soft);
	border-bottom: 1px solid var(--x-line-2);
}
.cndx-kg-group.is-kg { color: #fff; background: linear-gradient(90deg, #b0126a, #6a1b9a); border-bottom: 0; }
.cndx-kg-group .cndx-icon { width: 1.05em; height: 1.05em; color: #ffd166; }
.cndx-list:not(.cndx-list--rows) .cndx-kg-group { border-radius: 10px; border-bottom: 0; }

/* Banner: the add-on's .cnd-kg-banner look (its stylesheet loads in KU GIFT
   mode); these only fit it into the subject tab. The add-on's module banner
   gets [hidden] while the subject tab shows, which its display:flex would
   otherwise override. */
.cnd-kg-banner[hidden] { display: none !important; }
.cndx-subjects .cndx-kg-banner { margin: 0 0 1rem; } /* [cndx_subjects] shortcode */
.cndx-kg-banner .cnd-kg-banner__icon .cndx-icon { width: 1.6rem; height: 1.6rem; }
.cndx-kg-only {
	margin-top: .35rem;
	padding: .3rem .8rem;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
	position: relative;
	z-index: 1; /* above the banner's light sweep */
}
.cndx-kg-only:hover, .cndx-kg-only:focus-visible { background: rgba(255, 255, 255, .24); border-color: #fff; outline: none; }
.cndx-kg-only[aria-pressed="true"] { background: #ffd166; border-color: #ffd166; color: #6a1b9a; }
/* The switch sits beside the count, not under it, so this banner is as tall
   as the module one and the tabs below do not move when switching views. */
@media (min-width: 641px) {
	.cndx-kg-banner .cnd-kg-banner__side { grid-template-columns: auto auto; column-gap: 1rem; align-items: center; }
	.cndx-kg-banner .cnd-kg-banner__side > b,
	.cndx-kg-banner .cnd-kg-banner__side > span { grid-column: 2; }
	.cndx-kg-only { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 640px) {
	.cndx-kg-only { margin: 0 0 0 auto; padding: 0 .65rem; font-size: .75rem; line-height: 1.6; } /* no taller than the count row */
}
/* receipt row with a KU GIFT badge: [code][badge] on top, the name below,
   so neither the badge nor the code gets squeezed */
.cndx-receipt__name .cndx-code { flex: none; white-space: nowrap; }
.cndx-receipt__name.has-kg { flex-wrap: wrap; align-items: center; row-gap: .2rem; }
.cndx-receipt__name.has-kg b { order: 3; flex: 1 0 100%; min-width: 0; }
.cndx-receipt__name .cndx-kg { flex: none; }

.cndx-cartbtn.is-full,
.cndx-cartbtn.is-full:hover { background: var(--x-soft); color: var(--x-mute); border-color: var(--x-line); box-shadow: none; cursor: not-allowed; }

.cndx-kg-callout {
	display: flex;
	gap: .75rem;
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border: 1px solid #f3c6de;
	border-radius: 12px;
	background: #fbeef6;
	color: #7a0f4b;
}
.cndx-kg-callout[hidden] { display: none; }
.cndx-kg-callout__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #b0126a, #6a1b9a);
	color: #ffd166;
}
.cndx-kg-callout b { display: block; margin-bottom: .15rem; }
.cndx-kg-callout p { margin: 0; font-size: var(--x-t-sm); line-height: 1.5; }
.cndx-kg-callout__seats { margin-top: .3rem !important; font-weight: 700; }
.cndx-kg-callout__note { margin-top: .3rem !important; color: var(--x-ink-2); white-space: pre-line; }
.cndx-kg-callout__note[hidden], .cndx-kg-callout__seats[hidden] { display: none; }
.cndx-kg-callout.is-full { border-color: var(--x-line); background: var(--x-soft); color: var(--x-mute); }