/* ===== AFFILIATE LINK STYLES ===== */

/* AliExpress: product or search link — not necessarily Portals commission */
.affiliate-note {
	display: inline-block;
	color: #aaa;
	font-size: 0.72rem;
	font-weight: normal;
	margin-left: 6px;
	text-transform: none;
	letter-spacing: normal;
}

/* Affiliate badge/indicator */
.affiliate {
	display: inline-block;
	background-color: #ffd700;
	color: #000;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 0.8rem;
	font-weight: bold;
	margin-left: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Alternative: Subtle affiliate label */
.affiliate-subtle {
	display: inline;
	color: #999;
	font-size: 0.85rem;
	font-style: italic;
	margin-left: 5px;
}

/* Product link with affiliate styling */
.affiliate-link {
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
}

.affiliate-link:hover {
	text-decoration: underline;
}

/* Product card container */
.product-card {
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 15px;
	margin: 10px 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
	transition: all 0.3s ease;
}

.product-card:hover {
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	transform: translateY(-2px);
}

/* Product comparison container */
.product-links-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 0.65rem;
	padding: 0.35rem;
	background: linear-gradient(180deg, rgba(8, 12, 10, 0.88) 0%, rgba(3, 5, 4, 0.92) 100%);
	border: 1px solid rgba(74, 222, 128, 0.14);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Individual link in group */
.affiliate-button {
	--retailer-accent: #4ade80;
	--retailer-accent-soft: rgba(74, 222, 128, 0.16);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.42rem;
	min-height: 36px;
	box-sizing: border-box;
	padding: 8px 12px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(15, 21, 18, 0.98) 0%, rgba(3, 5, 4, 0.98) 100%);
	color: #f4fff7 !important;
	border: 1px solid rgba(74, 222, 128, 0.2);
	border-radius: 7px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 6px 14px rgba(0, 0, 0, 0.2);
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-shadow: none !important;
	white-space: nowrap;
	transition:
		transform 0.16s ease,
		border-color 0.16s ease,
		background 0.16s ease,
		box-shadow 0.16s ease;
}

.affiliate-button::before {
	content: '';
	display: block;
	width: 0.42rem;
	align-self: stretch;
	min-height: 1.25rem;
	margin: -2px 0 -2px -3px;
	background: var(--retailer-accent);
	border-radius: 999px;
	box-shadow: 0 0 14px var(--retailer-accent-soft);
}

.affiliate-button::after {
	content: '\2197';
	margin-left: -0.06rem;
	color: rgba(159, 255, 194, 0.7);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}

.affiliate-button:hover,
.affiliate-button:focus-visible,
body.site-card-ui .affiliate-button:hover,
body.site-card-ui .affiliate-button:focus-visible {
	background:
		linear-gradient(180deg, rgba(20, 34, 26, 0.98) 0%, rgba(5, 8, 7, 0.98) 100%),
		var(--retailer-accent-soft) !important;
	color: #ffffff !important;
	border-color: var(--retailer-accent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 18px rgba(0, 0, 0, 0.28),
		0 0 0 1px var(--retailer-accent-soft),
		0 0 22px rgba(74, 222, 128, 0.14);
	text-decoration: none;
	text-shadow: none !important;
	transform: translateY(-1px);
}

.affiliate-button:visited,
body.site-card-ui .affiliate-button:visited {
	color: #c084fc !important;
}

.affiliate-button:visited::after,
body.site-card-ui .affiliate-button:visited::after {
	color: rgba(216, 180, 254, 0.76);
}

.affiliate-button:visited:hover,
.affiliate-button:visited:focus-visible,
body.site-card-ui .affiliate-button:visited:hover,
body.site-card-ui .affiliate-button:visited:focus-visible {
	color: #d8b4fe !important;
	border-color: rgba(192, 132, 252, 0.72);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 18px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(192, 132, 252, 0.18),
		0 0 22px rgba(192, 132, 252, 0.14);
}

.affiliate-button:focus-visible {
	outline: 2px solid var(--retailer-accent);
	outline-offset: 2px;
}

.affiliate-button.amazon {
	--retailer-accent: #4ade80;
	--retailer-accent-soft: rgba(74, 222, 128, 0.16);
	background: linear-gradient(180deg, rgba(15, 21, 18, 0.98) 0%, rgba(3, 5, 4, 0.98) 100%);
	border-color: rgba(74, 222, 128, 0.2);
}

.affiliate-button.amazon-search::before {
	background: linear-gradient(180deg, #95f5b8 0%, #4ade80 100%);
}

.affiliate-button.aliexpress {
	--retailer-accent: #22c55e;
	--retailer-accent-soft: rgba(34, 197, 94, 0.15);
	background: linear-gradient(180deg, rgba(13, 19, 16, 0.98) 0%, rgba(3, 5, 4, 0.98) 100%);
	border-color: rgba(34, 197, 94, 0.2);
}

.affiliate-button.aliexpress-search::before {
	background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
}

/* Keep affiliate badge readable on dark buttons */
.affiliate-button .affiliate {
	display: inline-flex;
	align-items: center;
	height: 1.2rem;
	margin-left: 0.04rem;
	padding: 0 0.38rem;
	background-color: rgba(74, 222, 128, 0.12);
	color: rgba(201, 255, 221, 0.82);
	border: 1px solid rgba(74, 222, 128, 0.18);
	border-radius: 999px;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: none;
}

/* Inline title row: h4 + affiliate button side-by-side */
.item-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.1rem;
}

.item-title-row h4 {
	margin: 0;
	flex: 1;
	min-width: 0;
}

.item-title-row .affiliate-inline {
	margin: 0;
	flex-shrink: 0;
}

.item-title-row .affiliate-inline .product-links-group {
	margin: 0;
	padding: 2px 4px;
	background: none;
}

.item-title-row .affiliate-inline .affiliate-button {
	font-size: 0.78rem;
	padding: 4px 10px;
	white-space: nowrap;
}

.affiliate-button.newegg {
	background: #e4002b;
	border: none;
}

.affiliate-button.bestbuy {
	background: #0046be;
	border: none;
}

.affiliate-button.official {
	background: #333;
	border: 1px solid #ffd700;
}

.affiliate-button.direct {
	background: linear-gradient(135deg, #1f1f1f 0%, #2b2b2b 100%);
	border-color: transparent;
}

/* Disclosure box */
.affiliate-disclosure {
	background-color: #fffacd;
	border-left: 4px solid #ffd700;
	padding: 12px 15px;
	margin: 20px 0;
	border-radius: 4px;
	font-size: 0.95rem;
	color: #333;
}

.affiliate-disclosure strong {
	color: #000;
}

/* For existing itemlink class enhancement */
.itemlink.has-affiliate {
	position: relative;
}

.itemlink.has-affiliate::after {
	content: ' (affiliate)';
	color: #ffd700;
	font-weight: bold;
	font-size: 0.85rem;
}

/* Disclaimer/Transparency notice */
.transparency-notice {
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px dashed #666;
	padding: 10px;
	margin: 10px 0;
	font-size: 0.85rem;
	border-radius: 4px;
}

/* Price highlight for affiliate products */
.price-highlight {
	background-color: #fffacd;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: bold;
}

.product-price {
	margin: 0.25rem 0;
}

/* Link indicator for multiple retailers */
.multi-retailer {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.retailer-badge {
	font-size: 0.75rem;
	padding: 2px 6px;
	background: #ddd;
	border-radius: 12px;
	white-space: nowrap;
}

/* Responsive layout for affiliate links on mobile */
@media (max-width: 768px) {
	.product-links-group {
		flex-direction: column;
	}

	.affiliate-button {
		width: 100%;
		text-align: center;
	}

	.affiliate-price-row .affiliate-button {
		width: auto;
	}

	.affiliate {
		display: block;
		margin: 5px 0 0 0;
	}
}

/* Animation for affiliate link cards */
@keyframes pulse-affiliate {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}

.affiliate-highlight {
	animation: pulse-affiliate 2s infinite;
}

/* Bigfoot's Jungle / long-form pages: retailer row under primary link */
.affiliate-inline {
	margin: 0.35rem 0 1rem;
}

/* PC build list + Setup cards: extra retailer row under primary link */
.pc-build-affiliate {
	margin: 0.35rem 0 1.05rem;
	padding-left: 0;
}

.pc-build-affiliate .product-links-group {
	margin-top: 0.35rem;
	padding: 0.35rem;
}

.keep-card__affiliate-more {
	margin-top: 0.35rem;
}

.keep-card__affiliate-more .product-links-group {
	padding: 6px 8px;
	margin-top: 4px;
}

.keep-card__affiliate-more .affiliate-button {
	font-size: 0.75rem;
	padding: 6px 8px;
}

.affiliate-price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.25rem 0 0.55rem;
}

.affiliate-price-row .affiliate-price-host {
	margin: 0 !important;
}

.affiliate-price-row .product-links-group {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0.22rem;
	background: rgba(255, 255, 255, 0.025);
}

.affiliate-price-row .affiliate-button {
	width: auto;
	min-height: 30px;
	font-size: 0.72rem;
	line-height: 1.15;
	padding: 5px 8px;
	white-space: nowrap;
}

body.site-card-ui .keep-card__affiliate h4 > a,
body.site-card-ui .item-title-row h4 > a,
body.site-card-ui .setup-detail-page h4 > a,
body.site-card-ui .affiliate-price-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	padding: 2px 5px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.34);
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

body.site-card-ui .item-title-row h4 > a,
body.site-card-ui .setup-detail-page h4 > a {
	justify-content: flex-start;
}

.affiliate-inline-button {
	display: inline-flex;
	align-items: center;
	gap: 0.12rem;
	padding: 1px 5px;
	background: #000;
	color: #fff;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 0.82em;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.affiliate-price-link:hover .affiliate-inline-button,
.affiliate-price-link:focus-visible .affiliate-inline-button {
	background: #333;
}

body.site-card-ui .keep-card__affiliate h4 a:hover,
body.site-card-ui .keep-card__affiliate h4 a:focus-visible,
body.site-card-ui .item-title-row h4 a:hover,
body.site-card-ui .item-title-row h4 a:focus-visible,
body.site-card-ui .setup-detail-page h4 a:hover,
body.site-card-ui .setup-detail-page h4 a:focus-visible,
body.site-card-ui .affiliate-price-link:hover,
body.site-card-ui .affiliate-price-link:focus-visible {
	border-color: transparent;
	background: rgba(88, 166, 255, 0.12) !important;
	box-shadow: 0 0 14px rgba(88, 166, 255, 0.16);
}

.affiliate-price-row .affiliate {
	display: inline-block;
	margin: 0 0 0 4px;
}

.affiliate-inline-button .affiliate {
	background-color: #fff;
	color: #000;
	font-size: 0.78em;
	padding: 0 3px;
}

.keep-card__affiliate .affiliate-price-row {
	margin: 0;
}

[data-theme='light'] body.site-card-ui .keep-card__affiliate h4 > a,
[data-theme='light'] body.site-card-ui .item-title-row h4 > a,
[data-theme='light'] body.site-card-ui .setup-detail-page h4 > a,
[data-theme='light'] body.site-card-ui .affiliate-price-link {
	border-color: transparent;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: none;
}

.setup-detail-page .affiliate-inline {
	margin: 0.5rem 0 1.25rem;
}

.setup-detail-page .affiliate-inline .product-links-group {
	padding: 8px 10px;
}

.affiliate-keyboard-hub .product-links-group {
	margin-bottom: 0.75rem;
}

/* Live price badge — shown when price is fetched in real time from Amazon */
.price-live-badge {
	display: inline-block;
	background: #1a7a1a;
	color: #fff;
	font-size: 0.65rem;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 5px;
	vertical-align: middle;
	line-height: 1.4;
}

.price-live-badge::before {
	content: '● ';
	font-size: 0.55rem;
	opacity: 0.85;
}

/* ===== END AFFILIATE LINK STYLES ===== */