/* Container width: 80% on tablet+, full bleed on mobile */
.login-prices {
	width: 80%;
}

/* Soften the left/right edges of the ticker so prices fade in/out. */
.login-prices-ticker {
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}

/* iOS Safari: suppress text-selection / callout AND native scroll/zoom on every
   descendant. Heavy-hammer with `*` because some descendants (like the empty
   price spans) seem to engage iOS selection mode independently of ancestor rules. */
.login-prices-ticker,
.login-prices-ticker * {
	touch-action: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	-webkit-touch-callout: none;
}

/* Animation is driven by Web Animations API in pages/login.js so the ticker
   can be paused, dragged, and seeked from touch events. Compositor-thread
   animation, same battery profile as CSS @keyframes — but seekable. */
.ticker-track.ticker-animated {
	will-change: transform;
}

@media (max-width: 768px) {
	.login-prices {
		width: 100%;
		margin-bottom: 0.5rem !important;
	}

	.login-content {
		margin-top: 0.5rem !important;
	}

	.login-box {
		margin-top: 0.5rem !important;
	}

	.login-prices-ticker .is-size-5 {
		font-size: 1.05rem !important;
	}

	.login-prices-ticker .is-size-6 {
		font-size: 0.85rem !important;
	}
}