/**
 * DailyStep Course Selector — by-level view.
 *
 * Same palette and the same step-riser idea as the original view, but arranged
 * the other way round: choose a level, then read its four plans down the page.
 * Scoped under .dscsl so the two views cannot interfere with each other even if
 * both appear on one page.
 */

.dscsl {
	--dscs-accent: #2e75b6;
	--dscs-accent-deep: #1f5688;
	--dscs-canvas: #eef3fc;
	--dscs-surface: #ffffff;
	--dscs-ink: #16283d;
	--dscs-ink-soft: #5b6a85;
	--dscs-line: #d6e0ee;
	--dscs-go: #0e8a5f;
	--dscs-go-deep: #0a6e4c;
	--dscs-go-wash: #e6f5ee;
	--dscs-buy: #e8720c;
	--dscs-buy-deep: #c65e05;
	--dscs-gold: #b47c07;
	--dscs-gold-wash: #fdf3dd;

	--dscs-radius: 14px;
	--dscs-shadow: 0 1px 2px rgba( 22, 40, 61, 0.05 ), 0 8px 24px -16px rgba( 22, 40, 61, 0.25 );

	max-width: 760px;
	margin: 0 auto;
	padding: 18px;
	background: var( --dscs-canvas );
	border-radius: calc( var( --dscs-radius ) + 4px );
	color: var( --dscs-ink );
	line-height: 1.45;
}

.dscsl *:focus-visible {
	outline: 2px solid var( --dscs-accent );
	outline-offset: 2px;
	border-radius: 6px;
}

/* ----------------------------------------------------------------- level bar */

.dscsl__sentinel {
	height: 1px;
	margin-bottom: -1px;
}

.dscsl__levelbar {
	margin-bottom: 16px;
}

.dscsl__question {
	margin: 0 0 10px;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dscsl__tabs {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 0, 1fr ) );
	gap: 8px;
}

/* High specificity throughout: a theme's generic button rules were repainting
   the selected state in the other view, and there is no reason to assume this
   one is safe from the same thing. Every state is claimed here. */
.dscsl .dscsl__tabs button.dscsl__tab {
	min-width: 0;
	padding: 11px 6px;
	border: 2px solid var( --dscs-accent );
	border-radius: 10px;
	background: var( --dscs-surface );
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --dscs-ink );
	cursor: pointer;
	text-align: center;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dscsl .dscsl__tabs button.dscsl__tab:hover,
.dscsl .dscsl__tabs button.dscsl__tab:focus {
	background: var( --dscs-canvas );
	color: var( --dscs-ink );
	border-color: var( --dscs-accent-deep );
}

.dscsl .dscsl__tabs button.dscsl__tab.is-on,
.dscsl .dscsl__tabs button.dscsl__tab.is-on:hover,
.dscsl .dscsl__tabs button.dscsl__tab.is-on:focus,
.dscsl .dscsl__tabs button.dscsl__tab.is-on:active {
	background: var( --dscs-accent );
	border-color: var( --dscs-accent );
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba( 46, 117, 182, 0.6 );
}

.dscsl .dscsl__levelbar button.dscsl__viewall {
	margin-top: 8px;
	padding: 7px 14px;
	border: 1px solid var( --dscs-line );
	border-radius: 20px;
	background: var( --dscs-surface );
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --dscs-accent );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dscsl .dscsl__levelbar button.dscsl__viewall:hover {
	border-color: var( --dscs-accent );
	background: var( --dscs-canvas );
}

.dscsl .dscsl__levelbar button.dscsl__viewall.is-on,
.dscsl .dscsl__levelbar button.dscsl__viewall.is-on:hover {
	background: var( --dscs-ink );
	border-color: var( --dscs-ink );
	color: #fff;
}

/* ------------------------------------------------------------ sticky level bar

   z-index 1000000 clears the child theme's
   `#masthead { z-index: 999999 !important; }`, so this bar covers the site
   header rather than sliding under the logo.

   --dscs-stack-top is 0 in the standalone shortcode; the combined view sets it
   to its Levels/Plans toggle height so this bar rests just below that toggle. */

.dscsl--sticky .dscsl__levelbar {
	position: sticky;
	top: calc( var( --dscs-sticky-top, 0px ) + var( --dscs-adminbar, 0px ) + var( --dscs-stack-top, 0px ) );
	z-index: 1000000;
	margin: -18px -18px 16px;
	padding: 14px 18px 12px;
	background: var( --dscs-canvas );
	border-radius: var( --dscs-radius ) var( --dscs-radius ) 0 0;
	transition: box-shadow 0.2s ease;
}

.dscsl--sticky.is-stuck .dscsl__levelbar {
	border-radius: 0 0 var( --dscs-radius ) var( --dscs-radius );
	box-shadow: 0 10px 24px -12px rgba( 22, 40, 61, 0.35 );
}

/* Fallback for themes that block position: sticky (see dscs-levels.js). */
.dscsl--fixed .dscsl__levelbar {
	position: static;
}

.dscsl--fixed.is-pinned .dscsl__levelbar {
	position: fixed;
	z-index: 1000000;
	margin: 0;
	border-radius: 0 0 var( --dscs-radius ) var( --dscs-radius );
	box-shadow: 0 10px 24px -12px rgba( 22, 40, 61, 0.35 );
}

.dscsl__barspacer {
	display: none;
}

.dscsl--fixed.is-pinned .dscsl__barspacer {
	display: block;
}

/* ------------------------------------------------------------------- sections */

.dscsl__section {
	margin-bottom: 22px;
}

.dscsl__section[hidden] {
	display: none;
}

.dscsl__level-head {
	margin: 0 0 10px 2px;
}

.dscsl__level-name {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --dscs-ink );
}

.dscsl__level-desc {
	margin: 2px 0 0;
	font-size: 0.82rem;
	color: var( --dscs-ink-soft );
}

/* In "view all", each level gets a rule above it so the eye can find the
   boundaries in a long list. The first needs none. */
.dscsl.is-viewall .dscsl__section + .dscsl__section {
	padding-top: 20px;
	border-top: 1px solid var( --dscs-line );
}

/* ------------------------------------------------------------------- plan cards */

.dscsl__plans {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dscsl__plan {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 16px 14px 22px;
	background: var( --dscs-surface );
	border: 1px solid var( --dscs-line );
	border-radius: var( --dscs-radius );
	box-shadow: var( --dscs-shadow );
	transition: border-color 0.15s ease;
}

.dscsl__plan:hover {
	border-color: var( --dscs-accent );
}

/* The step riser again — but here it grows with the length of the plan, which is
   what the four cards actually differ by. Same idea, honest to this arrangement. */
.dscsl__plan::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 14px;
	width: 4px;
	height: 26%;
	background: var( --dscs-accent );
	border-radius: 0 4px 4px 0;
	opacity: 0.35;
}

.dscsl__plan:nth-child( 2 )::before { height: 46%; opacity: 0.55; }
.dscsl__plan:nth-child( 3 )::before { height: 68%; opacity: 0.8; }
.dscsl__plan:nth-child( n + 4 )::before { height: 90%; opacity: 1; }

.dscsl__plan.is-featured {
	border-color: var( --dscs-accent );
}

.dscsl__plan.is-added {
	border-color: var( --dscs-go );
	background: linear-gradient( var( --dscs-go-wash ), var( --dscs-surface ) 60% );
	box-shadow: 0 0 0 1px var( --dscs-go );
}

.dscsl__plan.is-added::before {
	background: var( --dscs-go );
	opacity: 1;
}

.dscsl__plan-main {
	flex: 1 1 auto;
	min-width: 0;
}

.dscsl__plan-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dscsl__length {
	font-size: 1rem;
	font-weight: 700;
}

.dscsl__badge {
	padding: 2px 8px;
	border-radius: 20px;
	background: var( --dscs-gold-wash );
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --dscs-gold );
}

/* Room for "60 lessons", "includes all audio", and so on. */
.dscsl__note {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var( --dscs-ink-soft );
}

.dscsl__plan-buy {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.dscsl__price {
	min-width: 68px;
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var( --dscs-accent-deep );
}

/* --------------------------------------------------- add-to-basket button
   Same technique and states as the other view: FluentCart's own button turned
   into a coloured pill, its label collapsed to nothing and an icon painted on.
   Orange to add, a spinner while it lands, green with a white tick once it is
   really in the basket. States are keyed off .dscsl__plan classes this plugin
   owns, so FluentCart re-rendering its button cannot disturb them. */

.dscsl__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	min-height: 46px;
	padding: 0 4px;
	background: var( --dscs-buy );
	border-radius: 12px;
	box-shadow: 0 6px 14px -8px var( --dscs-buy );
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

.dscsl__action:hover {
	background: var( --dscs-buy-deep );
	transform: translateY( -1px );
}

.dscsl__action:active {
	transform: translateY( 0 );
}

.dscsl__action > * {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.14em;
	width: 100%;
	min-width: 3.2em;
	padding: 10px 12px !important;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0;
	cursor: pointer;
}

.dscsl__action > *::before {
	content: "+";
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
}

.dscsl__action > *::after {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2a1 1 0 0 0 0 2h2.3l3.36 8.87-1.2 2.17A1.5 1.5 0 0 0 6.78 17.5H19a1 1 0 0 0 0-2H7.2l.83-1.5h8.4a1.5 1.5 0 0 0 1.36-.87l3.1-6.5A1 1 0 0 0 20 4.5H5.6l-.72-1.9A1 1 0 0 0 3.95 2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2a1 1 0 0 0 0 2h2.3l3.36 8.87-1.2 2.17A1.5 1.5 0 0 0 6.78 17.5H19a1 1 0 0 0 0-2H7.2l.83-1.5h8.4a1.5 1.5 0 0 0 1.36-.87l3.1-6.5A1 1 0 0 0 20 4.5H5.6l-.72-1.9A1 1 0 0 0 3.95 2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* while adding: no clicks, drop the plus, spin */
.dscsl__plan.is-adding .dscsl__action {
	pointer-events: none;
	background: var( --dscs-buy-deep );
}

.dscsl__plan.is-adding .dscsl__action > *::before {
	content: "";
}

.dscsl__plan.is-adding .dscsl__action > *::after {
	width: 1.15rem;
	height: 1.15rem;
	background: none;
	-webkit-mask: none;
	mask: none;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: dscsl-spin 0.6s linear infinite;
}

/* once really added: green pill, white tick */
.dscsl__plan.is-added .dscsl__action {
	background: var( --dscs-go );
	box-shadow: 0 6px 14px -8px var( --dscs-go );
}

.dscsl__plan.is-added .dscsl__action:hover {
	background: var( --dscs-go-deep );
}

.dscsl__plan.is-added .dscsl__action > *::before {
	content: "";
}

.dscsl__plan.is-added .dscsl__action > *::after {
	width: 1.25rem;
	height: 1.25rem;
	background-color: #fff;
	border: 0;
	animation: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@keyframes dscsl-spin {
	to { transform: rotate( 360deg ); }
}

.dscsl__placeholder {
	padding: 10px 14px;
	border: 1px dashed var( --dscs-line );
	border-radius: 10px;
	background: var( --dscs-canvas );
	font: inherit;
	color: var( --dscs-ink-soft );
	cursor: not-allowed;
}

.dscsl__placeholder:hover {
	transform: none;
}

.dscsl__status {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --dscs-go );
}

.dscsl__status:empty {
	display: none;
}

.dscsl__plan.is-added .dscsl__status::before {
	content: "\2713\00a0";
}

.dscsl__plan.is-adding .dscsl__status {
	color: var( --dscs-ink-soft );
}

/* --------------------------------------------------------------- basket bar */

.dscsl__basket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
	padding: 14px 16px;
	background: var( --dscs-surface );
	border: 1px solid var( --dscs-line );
	border-radius: var( --dscs-radius );
	box-shadow: var( --dscs-shadow );
}

.dscsl__basket-count {
	margin: 0;
	font-size: 0.85rem;
	color: var( --dscs-ink-soft );
	font-variant-numeric: tabular-nums;
}

.dscsl__checkout-btn {
	flex: 0 0 auto;
	padding: 12px 22px;
	border-radius: 10px;
	background: var( --dscs-go );
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 16px -8px rgba( 14, 138, 95, 0.9 );
}

.dscsl__checkout-btn:hover,
.dscsl__checkout-btn:focus {
	color: #fff;
	filter: brightness( 0.94 );
}

/* Greyed until something is added, but still clickable — a visitor may have
   items in the FluentCart basket from an earlier session. */
.dscsl__checkout-btn.is-disabled {
	background: #93a2b6;
	box-shadow: none;
}

.dscsl__hint {
	margin: 0;
	font-size: 0.8rem;
	color: var( --dscs-ink-soft );
}

/* --------------------------------------------------------------- small screens */

@media ( max-width: 600px ) {
	.dscsl {
		padding: 14px;
	}

	.dscsl--sticky .dscsl__levelbar {
		margin: -14px -14px 14px;
		padding: 12px 14px 10px;
	}

	.dscsl__tabs {
		grid-template-columns: repeat( 3, 1fr );
		gap: 6px;
	}

	.dscsl .dscsl__tabs button.dscsl__tab {
		font-size: 0.82rem;
		padding: 10px 2px;
	}

	.dscsl--sticky.is-stuck .dscsl__question,
	.dscsl--fixed.is-pinned .dscsl__question {
		display: none;
	}

	.dscsl__plan {
		align-items: flex-start;
	}

	.dscsl__plan-buy {
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.dscsl__price {
		text-align: left;
	}

	.dscsl__basket {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dscsl *,
	.dscsl *::before,
	.dscsl *::after {
		transition: none !important;
	}
}

/* ------------------------------------------------------- yielding to overlays

   See dscs.css for the reasoning: the bar drops back to an ordinary layer while
   a drawer or modal is open, so FluentCart's slide-out cart is never covered.
   !important is needed to beat both the sticky and fixed-fallback rules. */

.dscsl--yield .dscsl__levelbar {
	z-index: 5 !important;
}