/* =============================================================================
 * ux.css — scroll progress, toast, ripple, success checkmark, back-to-top,
 * active nav pill, confetti canvas layering.
 * ========================================================================== */

/* ---- Scroll progress bar (top) ---- */
.dss-scroll-progress{
	position:fixed;top:0;left:0;right:0;
	height:3px;z-index:1001;pointer-events:none;
	background:transparent;
}
.dss-scroll-progress__bar{
	height:100%;width:100%;
	background:linear-gradient(90deg,var(--orange) 0%,#FFB347 100%);
	transform-origin:left center;transform:scaleX(0);
	transition:transform .08s linear;
	box-shadow:0 0 12px rgba(242,92,5,.55);
}

/* ---- Active-section nav pill highlight ---- */
.nb-links a.is-active{
	background:var(--orange-lite);
	color:var(--orange);
	box-shadow:inset 0 -2px 0 var(--orange);
}

/* ---- Global toast stack ---- */
.dss-toasts{
	position:fixed;
	bottom:28px;left:50%;transform:translateX(-50%);
	z-index:1100;display:flex;flex-direction:column-reverse;gap:10px;
	pointer-events:none;
	max-width:min(92vw,420px);
}
.toast{
	display:flex;align-items:center;gap:10px;
	padding:12px 14px 12px 14px;border-radius:100px;
	background:var(--ink);color:#fff;
	font-size:.88rem;font-weight:600;
	box-shadow:0 16px 40px rgba(0,0,0,.18);
	pointer-events:all;
	opacity:0;transform:translateY(12px) scale(.96);
	transition:opacity .22s ease,transform .22s ease;
}
.toast.is-visible{opacity:1;transform:translateY(0) scale(1);}
.toast__icon{
	width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.2);border-radius:50%;
	font-size:.85rem;flex-shrink:0;
}
.toast__msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.toast__close{
	background:transparent;color:rgba(255,255,255,.7);
	padding:0 4px;margin-left:4px;font-size:1.25rem;line-height:1;
	cursor:pointer;border-radius:50%;
}
.toast__close:hover{color:#fff;}
.toast--success{background:#16a34a;}
.toast--success .toast__icon{background:rgba(255,255,255,.22);}
.toast--error{background:#dc2626;}
.toast--info{background:var(--orange);}

/* ---- Confetti canvas (above everything, no pointer) ---- */
.dss-confetti-canvas{
	position:fixed;inset:0;width:100vw;height:100vh;
	z-index:1200;pointer-events:none;
}

/* ---- Button ripple ---- */
.btn,.wl-sub,.nl-btn,.fab-btn,.day-tab,.schedule__tab{position:relative;overflow:hidden;}
.dss-ripple{
	position:absolute;border-radius:50%;
	background:rgba(255,255,255,.4);
	transform:scale(0);
	animation:dss-ripple-anim .6s ease-out forwards;
	pointer-events:none;
}
.btn-ol .dss-ripple,.nl-btn .dss-ripple,.day-tab .dss-ripple{background:rgba(242,92,5,.22);}
@keyframes dss-ripple-anim{
	to{transform:scale(2.4);opacity:0;}
}

/* ---- Form field success checkmark ---- */
.fg{position:relative;}
.fg input.is-valid,.fg textarea.is-valid,.fg select.is-valid{
	border-color:#16a34a !important;
	background:#F0FDF4;
	padding-right:38px;
}
.fg input.is-valid + .fg__check,
.fg textarea.is-valid ~ .fg__check,
.fg select.is-valid ~ .fg__check{display:flex;}
.fg input.is-valid::after{content:'';}
.fg input.is-valid,.fg textarea.is-valid{background-image:
	url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%2316a34a' d='M7.6 13.2 4 9.6l1.4-1.4 2.2 2.2 6-6L15 5.8z'/></svg>");
	background-repeat:no-repeat;background-position:right 12px center;background-size:18px;}

/* ---- Back-to-top FAB (bottom-left; existing #waitlist FAB is bottom-right) ---- */
.dss-back-to-top{
	position:fixed;bottom:28px;left:28px;z-index:900;
	width:44px;height:44px;border-radius:50%;
	background:var(--white);color:var(--ink-2);
	border:1px solid var(--border);
	box-shadow:var(--shadow-md);
	display:inline-flex;align-items:center;justify-content:center;
	font-size:1rem;font-weight:800;cursor:pointer;
	opacity:0;transform:translateY(20px);transition:all .3s;
	pointer-events:none;
}
.dss-back-to-top:hover{background:var(--orange);color:#fff;border-color:var(--orange);}
.dss-back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:all;}
@media(max-width:768px){
	.dss-back-to-top{left:16px;bottom:72px;width:40px;height:40px;}
}

/* ---- prefers-reduced-motion safeguards ---- */
@media(prefers-reduced-motion:reduce){
	.dss-ripple,.dss-confetti-canvas{display:none !important;}
	.dss-back-to-top{transition:opacity .2s ease;}
}