/* Recordo app-store badges
   Two variants: default (dark on light bg) and --invert (light on dark bg).
   Compact modifier for tight spaces like the header. */

.recordo-stores {
	display: inline-flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.recordo-store-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	background: #253B83;
	color: #FFFFFF;
	border: 1.5px solid #253B83;
	border-radius: 0.6rem;
	padding: 0.55rem 1.15rem;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	line-height: 1.15;
	font-family: Inter, system-ui, sans-serif;
}
.recordo-store-btn:hover {
	background: #1B2C66;
	border-color: #1B2C66;
	transform: translateY(-1px);
}

.recordo-store-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.recordo-store-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.recordo-store-small {
	font-size: 0.65rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	opacity: 0.85;
}
.recordo-store-big {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Invert variant for use on dark backgrounds */
.recordo-stores--invert .recordo-store-btn {
	background: #FFFFFF;
	color: #0A0A0A;
	border-color: #FFFFFF;
}
.recordo-stores--invert .recordo-store-btn:hover {
	background: #F1F3F9;
	border-color: #F1F3F9;
	color: #0A0A0A;
}

/* Compact (for header) */
.recordo-stores--compact { gap: 0.35rem; }
.recordo-stores--compact .recordo-store-btn {
	padding: 0.4rem 0.7rem;
	gap: 0.45rem;
	border-radius: 0.5rem;
}
.recordo-stores--compact .recordo-store-icon { width: 18px; height: 18px; }
.recordo-stores--compact .recordo-store-small { font-size: 0.55rem; }
.recordo-stores--compact .recordo-store-big { font-size: 0.825rem; }