/* Plan Builder — Step Wizard */

.dtec-plan-builder {
	max-width: 1700px;
	margin: 0 auto;
	padding: 0 var(--space-m) 60px;
}

.dtec-plan-builder,
.dtec-plan-builder input,
.dtec-plan-builder button,
.dtec-plan-builder select,
.dtec-plan-builder textarea {
	font-family: var(--body-family, var(--dtec-font-family));
}

/* Progress bar — shared base */
.dtec-progress__step {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-shrink: 0;
	text-decoration: none;
}

.dtec-progress__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(46, 40, 38, 0.75);
	flex-shrink: 0;
}

.dtec-progress__icon svg {
	display: block;
}

.dtec-progress__label {
	font-size: 18px;
	color: rgba(46, 40, 38, 0.75);
	white-space: nowrap;
	font-weight: 600;
}

.dtec-progress__step--active .dtec-progress__icon,
.dtec-progress__step--active .dtec-progress__label,
.dtec-progress__step--done .dtec-progress__icon,
.dtec-progress__step--done .dtec-progress__label {
	color: var(--dtec-primary);
}

.dtec-progress__line {
	width: 100%;
	max-width: 52px;
	min-width: 1em;
	height: 1px;
	background: rgba(46, 40, 38, 0.3);
}

/* Header progress bar — inline in site header */
.dtec-header-progress {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2%;
}

/* In-page progress bar — fallback when no header version */
.dtec-plan-builder__progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 31px;
	padding: var(--space-xl) var(--space-m);
	max-width: 900px;
	margin: 0 auto;
}

/* Steps container */
.dtec-plan-builder__steps {
	min-height: 300px;
	max-width: 1700px;
	margin: 0 auto;
	overflow-x: clip;
}

#dtec-plan-builder.dtec-plan-builder--sticky-active .dtec-plan-builder__steps {
	padding-bottom: clamp(140px, 16svh, 220px);
}

.dtec-plan-builder__promo-notice {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	max-width: 900px;
	margin: 0 auto var(--space-l);
	padding: var(--space-s) var(--space-m);
	border: 1px solid rgba(143, 56, 93, 0.2);
	border-radius: 16px;
	background: rgba(143, 56, 93, 0.08);
	color: var(--dark-gray, #2E2826);
}

.dtec-plan-builder__promo-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--aubergine-gleam-500, #8F385D);
	color: var(--white, #FFF);
	font-size: var(--text-s);
	font-weight: var(--dtec-font-semibold);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.dtec-plan-builder__promo-copy {
	font-size: var(--text-s);
	font-weight: var(--dtec-font-semibold);
	line-height: 1.5;
}

/* Step layout */
.dtec-step {
	text-align: center;
}

.dtec-step h2 {
	font-family: var(--heading-2-family, var(--dtec-font-family));
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: var(--heading-1-weight, var(--dtec-font-bold));
	color: var(--dtec-text);
	margin-bottom: var(--space-s);
	line-height: var(--heading-2-leading, var(--dtec-leading-tight));
	letter-spacing: var(--heading-2-spacing, normal);
	text-wrap: balance;
}

.dtec-step p {
	font-family: var(--body-family, var(--dtec-font-family));
	color: rgba(46, 40, 38, 0.75);
	margin-bottom: var(--space-m);
	font-size: var(--text-m);
	line-height: 1.6;
}

.dtec-step p:last-child {
	margin-bottom: 0;
}

.dtec-step-header__eyebrow {
	font-family: var(--small-family, var(--dtec-font-family));
}

.dtec-step-header__heading {
	font-family: var(--heading-2-family, var(--dtec-font-family));
	font-weight: var(--heading-1-weight, var(--dtec-font-bold));
	line-height: var(--heading-2-leading, var(--dtec-leading-tight));
	letter-spacing: var(--heading-2-spacing, normal);
	margin: 0 0 var(--space-s);
}

.dtec-step-header__description {
	font-family: var(--body-family, var(--dtec-font-family));
	font-size: 20px;
	font-style: normal;
	font-weight: var(--dtec-font-semibold);
	line-height: 160%;
	text-align: center;
	color: var(--medium-gray, rgba(46, 40, 38, 0.75));
}

.dtec-step-header__commitment {
	font-family: var(--heading-2-family, var(--dtec-font-family));
	font-size: clamp(1.75rem, 3vw, 2rem);
	font-weight: var(--heading-2-weight, var(--dtec-font-semibold));
	line-height: normal;
}

/* Buttons */
.dtec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-m) var(--space-xl);
	border: none;
	border-radius: var(--dtec-radius-full);
	font-size: 1.125rem;
	font-weight: var(--dtec-font-bold);
	cursor: pointer;
	transition: background var(--dtec-duration-fast), opacity var(--dtec-duration-fast), transform var(--dtec-duration-fast);
	letter-spacing: 0.01em;
}

.dtec-btn:hover:not(:disabled) {
	transform: translateY(-1px);
}

.dtec-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dtec-btn--primary {
	background: var(--dtec-cta);
	color: var(--dtec-bg);
}

.dtec-btn--primary:hover:not(:disabled) {
	background: var(--dtec-cta-hover);
}

.dtec-btn--secondary {
	background: var(--dtec-bg);
	color: var(--dtec-text);
	border: 1px solid var(--dtec-border);
}

.dtec-btn--secondary:hover:not(:disabled) {
	background: var(--dtec-bg-subtle);
}

.dtec-btn--cta {
	background: var(--dtec-cta);
	color: var(--dtec-bg);
	border: none;
	border-radius: var(--dtec-radius-full);
	padding: var(--space-m) var(--space-xl);
	font-size: 1.125rem;
	font-weight: var(--dtec-font-bold);
	cursor: pointer;
	transition: background var(--dtec-duration-fast), transform var(--dtec-duration-fast);
}

.dtec-btn--cta:hover:not(:disabled) {
	background: var(--dtec-cta-hover);
	transform: translateY(-1px);
}

.dtec-btn--cta:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dtec-btn:focus-visible,
.dtec-toggle__btn:focus-visible,
.dtec-meal-count__btn:focus-visible,
.dtec-day__btn:focus-visible,
.dtec-charity__btn:focus-visible,
.dtec-qty-btn:focus-visible {
	outline: 2px solid var(--dtec-primary);
	outline-offset: 2px;
}

.dtec-error { color: var(--dtec-error); }
.dtec-success { color: var(--dtec-cta); }

/* Shared step actions — back + continue side by side */
.dtec-step__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: var(--space-l, 27px);
}

/* Shared continue button — used across all steps */
.dtec-btn-continue {
	display: flex;
	width: 100%;
	max-width: 268px;
	height: 64px;
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
	background: var(--dtec-cta);
	color: #fff;
	border: none;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	cursor: pointer;
	transition: background var(--dtec-duration-fast), transform var(--dtec-duration-fast);
}

.dtec-step__actions .dtec-btn-continue {
	margin: 0;
}

.dtec-btn-continue:hover:not(:disabled) {
	background: var(--dtec-cta-hover);
	transform: translateY(-1px);
}

.dtec-btn-continue:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Underline back button — hidden for now */
.dtec-btn-back {
	display: none !important;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--aubergine-gleam-500, #6C2C47);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-bottom: 1px solid var(--aubergine-gleam-500, #6C2C47);
	padding: 0 0 var(--space-xs);
	background: none;
	cursor: pointer;
	transition: opacity var(--dtec-duration-fast);
}

.dtec-btn-back:hover {
	opacity: 0.85;
}

/* Nav — hidden for now */
.dtec-plan-builder__nav {
	display: none;
	justify-content: flex-start;
	margin-top: var(--space-l);
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Sticky bar */
.dtec-sticky-bar {
	--bar-btn-size: 64px;
	--bar-btn-icon: 14px;
	--bar-label-fs: var(--text-2xl);
	--bar-price-fs: var(--text-2xl);
	--bar-freq-fs: var(--text-m);

	position: fixed;
	bottom: 20px;
	left: 20px;
	right: 20px;
	border-radius: 30px;
	border: 3px solid var(--aubergine-gleam-800, #452431);
	background: conic-gradient(from 9deg at 50% 50%, #6C2C47 0deg, #8F385D 360deg);
	color: #fff;
	padding: 24px 40px;
	display: flex;
	align-items: center;
	z-index: var(--dtec-z-sticky);
}

.dtec-sticky-bar__info {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

/* Left column: meals count + frequency */
.dtec-sticky-bar__left {
	display: flex;
	flex-direction: column;
	padding-right: 30px;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.dtec-sticky-bar__label {
	font-size: var(--bar-label-fs);
	font-weight: 600;
	line-height: normal;
	color: #fff;
}

.dtec-sticky-bar__freq {
	font-size: var(--bar-freq-fs);
	font-weight: 700;
	line-height: 160%;
	color: #fff;
}

/* Right column: price + total label */
.dtec-sticky-bar__right {
	display: flex;
	flex-direction: column;
	padding-left: 30px;
}

.dtec-sticky-bar__price {
	color: var(--dtec-cta);
	font-size: var(--bar-price-fs);
	font-weight: 600;
	line-height: normal;
}

.dtec-sticky-bar__total-label {
	font-size: var(--bar-freq-fs);
	font-weight: 700;
	line-height: 160%;
	color: #fff;
}

.dtec-sticky-bar__addon {
	font-size: var(--text-s);
	color: var(--dtec-cta);
}

.dtec-sticky-bar__promo,
.dtec-sticky-bar__discount {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dtec-sticky-bar__promo {
	color: #fff;
}

.dtec-sticky-bar__discount {
	color: var(--dtec-cta);
}

.dtec-sticky-bar__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
	flex: 0 1 auto;
	min-width: 280px;
}

.dtec-sticky-bar__back {
	display: flex;
	width: auto;
	min-width: 0;
	height: var(--bar-btn-size);
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
	border: 2px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dtec-duration-fast), transform var(--dtec-duration-fast), border-color var(--dtec-duration-fast);
	flex-shrink: 1;
}

.dtec-sticky-bar__back:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}

.dtec-sticky-bar__continue {
	display: flex;
	width: auto;
	max-width: 268px;
	min-width: 0;
	height: var(--bar-btn-size);
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
	background: var(--dtec-cta);
	color: #fff;
	border: none;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--dtec-duration-fast), transform var(--dtec-duration-fast);
	flex-shrink: 1;
}

.dtec-sticky-bar__continue:hover:not(:disabled) {
	background: var(--dtec-cta-hover);
	transform: translateY(-1px);
}

.dtec-sticky-bar__continue:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 1366px) and (min-width: 769px) {
	.dtec-sticky-bar {
		--bar-btn-size: 56px;
		--bar-label-fs: var(--text-xl);
		--bar-price-fs: var(--text-xl);
		--bar-freq-fs: var(--text-s);

		position: fixed;
		bottom: 16px;
		left: 16px;
		right: 16px;
		padding: 20px 24px;
		border-radius: 24px;
		flex-wrap: wrap;
		gap: 16px;
	}

	.dtec-sticky-bar__info {
		width: 100%;
	}

	.dtec-sticky-bar__left {
		padding-right: 20px;
	}

	.dtec-sticky-bar__right {
		padding-left: 20px;
	}

	.dtec-sticky-bar__actions {
		min-width: 0;
		margin-left: 0;
		justify-content: flex-end;
		gap: 14px;
	}

	.dtec-sticky-bar__back,
	.dtec-sticky-bar__continue {
		font-size: 18px;
	}
}

/* ============ Mobile ============ */
@media (max-width: 768px) {

	/* Progress bar — icons only, no labels */
	.dtec-header-progress,
	.dtec-plan-builder__progress {
		gap: 12px;
		padding: var(--space-m) var(--space-s);
	}

	.dtec-progress__label {
		display: none;
	}

	.dtec-progress__step {
		gap: 0;
		flex-shrink: 1;
	}

	.dtec-progress__icon svg {
		width: 32px;
		height: 32px;
	}

	.dtec-progress__line {
		width: 24px;
	}
}

@media (max-width: 450px) {
	.dtec-progress__icon svg {
		width: 24px;
		height: 24px;
	}

	.dtec-progress__line {
		min-width: .5em !important;
		width: .5em;
	}
}

@media (max-width: 768px) {
	#dtec-plan-builder.dtec-plan-builder--sticky-active .dtec-plan-builder__steps {
		padding-bottom: clamp(104px, 14svh, 150px);
	}

	/* Sticky bar — single row: info left, icon buttons right */
	.dtec-sticky-bar {
		--bar-btn-size: 48px;
		--bar-btn-icon: 12px;
		--bar-label-fs: 18px;
		--bar-price-fs: var(--text-l);
		--bar-freq-fs: 14px;

		position: fixed;
		flex-wrap: nowrap;
		padding: 12px 14px;
		bottom: 8px;
		left: 8px;
		right: 8px;
		border-width: 2px;
		border-radius: 16px;
		gap: 12px;
		align-items: center;
	}

	.dtec-sticky-bar__info {
		flex: 1;
		min-width: 0;
		flex-wrap: nowrap;
	}

	.dtec-sticky-bar__left,
	.dtec-sticky-bar__right {
		min-width: 0;
	}

	.dtec-sticky-bar__left {
		padding-right: 12px;
	}

	.dtec-sticky-bar__label {
		line-height: 1.2;
	}

	.dtec-sticky-bar__freq {
		line-height: 1.3;
	}

	.dtec-sticky-bar__right {
		padding-left: 12px;
	}

	.dtec-sticky-bar__price {
		line-height: 1.2;
	}

	.dtec-sticky-bar__total-label {
		line-height: 1.3;
	}

	.dtec-sticky-bar__addon {
		font-size: 13px;
	}

	.dtec-sticky-bar__actions {
		margin-left: 0;
		min-width: 0;
		gap: 8px;
		flex-shrink: 0;
	}

	.dtec-sticky-bar__continue,
	.dtec-sticky-bar__back {
		width: var(--bar-btn-size);
		height: var(--bar-btn-size);
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
	}

	.dtec-sticky-bar__continue span,
	.dtec-sticky-bar__back span {
		display: none;
	}

	.dtec-sticky-bar__continue svg,
	.dtec-sticky-bar__back svg {
		width: var(--bar-btn-icon);
		height: var(--bar-btn-icon);
	}
}

@media (max-width: 450px) {
	.dtec-sticky-bar {
		--bar-btn-size: 40px;
	}
}

@media (max-width: 500px) {
	.dtec-sticky-bar__right {
		padding-left: 0 !important;
	}
}

@media (max-width: 410px) {
	#dtec-plan-builder.dtec-plan-builder--sticky-active .dtec-plan-builder__steps {
		padding-bottom: clamp(88px, 12svh, 120px);
	}

	.dtec-sticky-bar {
		--bar-btn-size: 28px;
		--bar-btn-icon: 10px;
		--bar-price-fs: var(--text-m);
		--bar-freq-fs: var(--text-s);
	}

	.dtec-sticky-bar__info {
		gap: var(--space-s);
	}

	.dtec-sticky-bar__continue,
	.dtec-sticky-bar__back {
		border-width: 1px;
	}
}

@media (max-width: 359px) {
	.dtec-sticky-bar__info {
		flex-direction: column-reverse;
		display: flex;
		align-items: flex-start;
		gap: .5em;
	}

	.dtec-sticky-bar__left {
		padding-right: 0;
		border-right: 0;
	}
}
