/* Ships To Country */

/* Optional alignment wrapper (only output when align= is left/center/right). */
.sto-wrap { display: block; }
.sto-align-left   { text-align: left; }
.sto-align-center { text-align: center; }
.sto-align-right  { text-align: right; }

.sto-badge {
	--sto-accent: #22c55e;
	--sto-accent-rgb: 34, 197, 94;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	max-width: 100%;
	padding: .6em 1.1em;
	border: 1px solid rgba(var(--sto-accent-rgb), .35);
	border-radius: 999px;
	background: rgba(var(--sto-accent-rgb), .09);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 3px rgba(var(--sto-accent-rgb), .06);
	font-size: 1em;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	vertical-align: middle;
	box-sizing: border-box;
}

/* Full width — matches the Add to cart / Buy now buttons above it. */
.sto-badge--full {
	display: flex;
	width: 100%;
	border-radius: 8px;
	padding: .75em 1em;
}

.sto-badge--plain {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	font-weight: inherit;
}

/* ---------- The live dot ---------- */
.sto-dot {
	position: relative;
	flex: 0 0 auto;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background: var(--sto-accent);
	box-shadow: 0 0 6px 1px rgba(var(--sto-accent-rgb), .85);
}

/* Expanding halo. */
.sto-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(var(--sto-accent-rgb), .55);
	animation: sto-pulse 2s cubic-bezier(.25, .6, .35, 1) infinite;
}

@keyframes sto-pulse {
	0%   { transform: scale(1);   opacity: .75; }
	70%  { transform: scale(2.8); opacity: 0; }
	100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- Text bits ---------- */
.sto-badge .sto-emoji,
.sto-badge .sto-flag {
	font-size: 1.15em;
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

.sto-badge .sto-flag:empty { display: none; }

.sto-badge .sto-country {
	font-weight: 700;
}

/* Loading placeholder — keeps the layout from jumping. */
.sto-badge .sto-skeleton {
	display: inline-block;
	width: 5.5em;
	height: .85em;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(0,0,0,.08) 25%, rgba(0,0,0,.14) 37%, rgba(0,0,0,.08) 63%);
	background-size: 400% 100%;
	animation: sto-shimmer 1.4s ease infinite;
	vertical-align: middle;
}

.sto-badge.sto-ready .sto-skeleton { display: none; }

@keyframes sto-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.sto-badge .sto-skeleton,
	.sto-dot::after { animation: none; }
	.sto-dot::after { opacity: 0; }
}

/* Dark backgrounds */
@media (prefers-color-scheme: dark) {
	.sto-badge:not(.sto-badge--plain) {
		background: rgba(var(--sto-accent-rgb), .14);
		border-color: rgba(var(--sto-accent-rgb), .4);
	}
	.sto-badge .sto-skeleton {
		background: linear-gradient(90deg, rgba(255,255,255,.10) 25%, rgba(255,255,255,.18) 37%, rgba(255,255,255,.10) 63%);
		background-size: 400% 100%;
	}
}

/* Narrow screens: let a long country name wrap instead of overflowing. */
@media (max-width: 420px) {
	.sto-badge { white-space: normal; text-align: center; }
}