@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

/* Nylash theme based on provided design */
.loyalty-card.nylash-theme {
	background: #ffe8f0; /* light pink */
	border-radius: 20px;
	padding: 28px 22px 24px 22px;
	box-shadow: 0 4px 22px rgba(0,0,0,0.06);
	width: 520px; /* fixed width: less wide */
	height: 350px; /* fixed height */
	box-sizing: border-box;
	margin: 0 auto 32px auto;
	text-align: center;
	font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
	color: #c07194; /* muted pink text */
	display: flex;
	flex-direction: column;
	align-items: center; /* horizontal center of children */
	justify-content: center; /* vertical center of children */
}
.nylash-top-rule {
	height: 2px;
	background: #ecb4c8; /* thin top divider */
	width: 85%;
	margin: 4px auto 28px auto;
	opacity: 0.7;
}
.nylash-slots {
	display: flex;
	justify-content: center; /* horizontally center the row */
	align-items: flex-start;
	gap: 12px;
	padding: 0 6px 6px 6px;
}
.slot-wrap { display: flex; flex-direction: column; align-items: center; }
.loyalty-slot {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: transparent;
	border: 3px solid #f48fb1; /* pink */
	display: flex;
	align-items: center;
	justify-content: center;
}
.loyalty-slot.filled { background: #f48fb1; border-color: #f48fb1; }
.loyalty-slot-label { color: #ffffff; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; }
.slot-base {
	width: 58px;
	height: 12px;
	background: #ffffff;
	border-radius: 6px;
	margin-top: 12px;
}
.nylash-desc {
	margin: 20px auto 10px auto;
	font-size: 16px;
	line-height: 1.6;
	max-width: 90%;
}
.nylash-desc .nylash-highlight { color: #e54c87; font-weight: 700; }
.nylash-socials { margin-top: 8px; display: flex; gap: 36px; justify-content: center; font-weight: 600; color: #c07194; }

/* Mobile fallback to avoid overflow on small screens */
@media (max-width: 560px) {
	.loyalty-card.nylash-theme { width: 100%; height: auto; padding: 22px 16px 20px 16px; border-radius: 16px; }
	/* Keep dots inline like desktop; shrink to fit phones */
	.loyalty-card.nylash-theme .nylash-slots {
		flex-wrap: nowrap !important;
		justify-content: center;
		gap: 6px;
		padding: 0 2px 4px 2px;
		overflow-x: hidden;
	}
	.slot-wrap { flex: 0 0 auto; }
	.loyalty-card.nylash-theme .loyalty-slot { width: 36px; height: 36px; border-width: 2px; }
	.loyalty-card.nylash-theme .slot-base { width: 38px; height: 9px; margin-top: 9px; }
	.loyalty-slot-label { font-size: 11px; }
	.nylash-desc { font-size: 14px; margin: 16px auto 8px auto; }
	.nylash-socials { gap: 18px; flex-wrap: wrap; font-size: 13px; }
}

@media (max-width: 420px) {
	.loyalty-card.nylash-theme .nylash-slots { gap: 5px; }
	.loyalty-card.nylash-theme .loyalty-slot { width: 32px; height: 32px; }
	.loyalty-card.nylash-theme .slot-base { width: 34px; height: 8px; margin-top: 8px; }
	.loyalty-slot-label { font-size: 10px; }
}

@media (max-width: 360px) {
	.loyalty-card.nylash-theme .nylash-slots { gap: 4px; }
	.loyalty-card.nylash-theme .loyalty-slot { width: 28px; height: 28px; }
	.loyalty-card.nylash-theme .slot-base { width: 30px; height: 8px; }
}