/**
 * PokeStasch - Sticky "Till kassan"-rad (mobil)
 *
 * Doljs helt pa bredare skarmar (default display:none) - detta ar en
 * medveten mobil-enbart atgard, se bar.js. Botten-positionen satts
 * dynamiskt via CSS-variabeln --pokestasch-checkout-bar-bottom for att
 * inte overlappa cookie-samtyckesbannern (samma monster som
 * pokestasch-added-to-cart-toast/toast.css).
 */

.pokestasch-checkout-bar {
	display: none;
}

/* Summariedelen ar numera en riktig <button> (oppnar minivarukorgs-drawern)
   - nollstall webblasarens knapputseende sa den ser ut som forut. */
.pokestasch-checkout-bar__summary {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.pokestasch-checkout-bar__button {
	text-decoration: none;
	cursor: pointer;
}

@media (max-width: 768px) {
	.pokestasch-checkout-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		bottom: calc(var(--pokestasch-checkout-bar-bottom, 0px) + env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		padding: 10px 14px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
		z-index: 999997; /* under toast (999998) och drawer-overlayen (999999) */
		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
		text-decoration: none;
		color: inherit;
	}

	.pokestasch-checkout-bar.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.pokestasch-checkout-bar__summary {
		font-size: 13px;
		font-weight: 600;
		color: #1a1a1a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pokestasch-checkout-bar__button {
		flex-shrink: 0;
		background: #381d92;
		color: #ffffff;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		padding: 10px 20px;
		border-radius: 999px;
		white-space: nowrap;
	}
}

/* DESKTOP (tillagt 2026-07-18 pa Alejandros onskemal att korgen ska "folja
   med ner" aven pa dator): kompakt flytande pill nere till hoger istallet
   for mobilens fullbreddsrad. Samma element och JS, bara annan kostym. */
@media (min-width: 769px) {
	.pokestasch-checkout-bar {
		display: flex;
		align-items: center;
		gap: 14px;
		position: fixed;
		left: auto;
		right: 20px;
		bottom: calc(20px + var(--pokestasch-checkout-bar-bottom, 0px));
		background: #ffffff;
		padding: 8px 8px 8px 18px;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 999px;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
		z-index: 999997;
		opacity: 0;
		transform: translateY(12px);
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
		text-decoration: none;
		color: inherit;
	}

	.pokestasch-checkout-bar.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.pokestasch-checkout-bar__summary {
		font-size: 13px;
		font-weight: 600;
		color: #1a1a1a;
		white-space: nowrap;
	}

	.pokestasch-checkout-bar__button {
		flex-shrink: 0;
		background: #381d92;
		color: #ffffff;
		font-size: 13px;
		font-weight: 700;
		text-decoration: none;
		padding: 9px 18px;
		border-radius: 999px;
		white-space: nowrap;
	}

	.pokestasch-checkout-bar:hover {
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pokestasch-checkout-bar {
		transition: opacity 0.15s ease;
		transform: none;
	}
}