/* Challenge Coins – Metal Finish Dashboard */

.cc-metal-finish-card {
	margin: 0 0 12px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.cc-metal-finish-button {
	--cc-metal-bg: linear-gradient(135deg, #edf1f4 0%, #aeb8c1 38%, #f9fbfc 66%, #7d8892 100%);
	--cc-metal-text: #111820;
	--cc-metal-edge: rgba(255, 255, 255, 0.48);
	--cc-metal-shadow: rgba(11, 22, 33, 0.24);
	--cc-metal-swatch: linear-gradient(135deg, #f9fbfc, #8a969f);

	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	width: 100% !important;
	min-height: 64px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 14px 54px 14px 18px !important;
	border: 1px solid var(--cc-metal-edge) !important;
	border-radius: 16px !important;
	background: var(--cc-metal-bg) !important;
	background-size: 165% 165% !important;
	background-position: 0% 50% !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.62),
		inset 0 -1px 0 rgba(0, 0, 0, 0.16),
		0 8px 20px var(--cc-metal-shadow) !important;
	color: var(--cc-metal-text) !important;
	font-size: clamp(14px, 2.2vw, 17px) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) !important;
	cursor: pointer !important;
	overflow: hidden !important;
	isolation: isolate !important;
	transition: transform 180ms ease, box-shadow 180ms ease, background-position 320ms ease, filter 180ms ease !important;
}

.cc-metal-finish-button::before {
	content: "" !important;
	position: relative !important;
	z-index: 2 !important;
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: var(--cc-metal-swatch) !important;
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.72),
		inset 0 -2px 4px rgba(0, 0, 0, 0.24),
		0 0 0 2px rgba(255, 255, 255, 0.34),
		0 3px 8px rgba(0, 0, 0, 0.24) !important;
}

.cc-metal-finish-button::after {
	content: "›" !important;
	position: absolute !important;
	right: 20px !important;
	top: 50% !important;
	z-index: 3 !important;
	transform: translateY(-50%) rotate(90deg) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: currentColor !important;
	opacity: 0.74 !important;
	transition: transform 180ms ease !important;
}

.cc-metal-finish-button:hover,
.cc-metal-finish-button:focus-visible {
	transform: translateY(-2px) !important;
	background-position: 100% 50% !important;
	filter: saturate(1.05) contrast(1.04) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.74),
		inset 0 -1px 0 rgba(0, 0, 0, 0.16),
		0 12px 26px var(--cc-metal-shadow) !important;
	outline: 3px solid rgba(35, 100, 176, 0.24) !important;
	outline-offset: 2px !important;
}

.cc-metal-finish-button:active {
	transform: translateY(0) scale(0.995) !important;
}

details[open] > .cc-metal-finish-button::after,
.cc-metal-finish-button[aria-expanded="true"]::after,
.cc-metal-finish-button.elementor-active::after,
.cc-metal-finish-button.ui-state-active::after {
	transform: translateY(-50%) rotate(-90deg) !important;
}

/* Remove browser disclosure marker from summary; the modern caret remains. */
summary.cc-metal-finish-button {
	list-style: none !important;
}
summary.cc-metal-finish-button::-webkit-details-marker {
	display: none !important;
}

/* Bronze */
.cc-metal-finish-button[data-cc-finish="antique-bronze"] {
	--cc-metal-bg: linear-gradient(135deg, #2f2114 0%, #7b5831 22%, #b68a4e 48%, #5d4024 70%, #c29a60 100%);
	--cc-metal-text: #fff8e8;
	--cc-metal-edge: rgba(255, 220, 159, 0.42);
	--cc-metal-shadow: rgba(74, 47, 18, 0.38);
	--cc-metal-swatch: radial-gradient(circle at 30% 24%, #d2a963, #8b6336 48%, #3f2a17 100%);
	text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}
.cc-metal-finish-button[data-cc-finish="shiny-bronze"] {
	--cc-metal-bg: linear-gradient(115deg, #5e3b1e 0%, #d5a45f 24%, #fff0c5 43%, #9b652f 62%, #e3b875 82%, #60401f 100%);
	--cc-metal-text: #2b1a0d;
	--cc-metal-edge: rgba(255, 242, 209, 0.76);
	--cc-metal-shadow: rgba(94, 59, 30, 0.34);
	--cc-metal-swatch: linear-gradient(135deg, #fff1c5, #bb7b39 48%, #5e3b1e);
}

/* Copper */
.cc-metal-finish-button[data-cc-finish="antique-copper"] {
	--cc-metal-bg: linear-gradient(135deg, #3b1e16 0%, #7f3d2a 25%, #bd7651 48%, #5a2a20 72%, #a85d3e 100%);
	--cc-metal-text: #fff2ea;
	--cc-metal-edge: rgba(255, 190, 157, 0.43);
	--cc-metal-shadow: rgba(79, 34, 22, 0.4);
	--cc-metal-swatch: radial-gradient(circle at 30% 25%, #d98e64, #8d472f 50%, #3b1e16 100%);
	text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}
.cc-metal-finish-button[data-cc-finish="shiny-copper"] {
	--cc-metal-bg: linear-gradient(115deg, #71331f 0%, #e49a6b 24%, #ffe2d0 43%, #b95e39 62%, #efaa7f 82%, #6b301e 100%);
	--cc-metal-text: #31140b;
	--cc-metal-edge: rgba(255, 228, 211, 0.78);
	--cc-metal-shadow: rgba(113, 51, 31, 0.33);
	--cc-metal-swatch: linear-gradient(135deg, #ffe3d2, #ca6841 48%, #6b301e);
}

/* Gold */
.cc-metal-finish-button[data-cc-finish="antique-gold"] {
	--cc-metal-bg: linear-gradient(135deg, #4d3a12 0%, #8a6a20 25%, #c4a34f 48%, #6a5018 72%, #d0b260 100%);
	--cc-metal-text: #fff9de;
	--cc-metal-edge: rgba(255, 231, 139, 0.5);
	--cc-metal-shadow: rgba(88, 68, 18, 0.38);
	--cc-metal-swatch: radial-gradient(circle at 30% 24%, #e4c86f, #9b7a27 50%, #47340f 100%);
	text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}
.cc-metal-finish-button[data-cc-finish="matte-gold"] {
	--cc-metal-bg: linear-gradient(135deg, #aa8432 0%, #d0ad59 45%, #b08a36 100%);
	--cc-metal-text: #241b08;
	--cc-metal-edge: rgba(255, 235, 174, 0.48);
	--cc-metal-shadow: rgba(97, 70, 15, 0.28);
	--cc-metal-swatch: linear-gradient(135deg, #d8b961, #a67e2c);
}
.cc-metal-finish-button[data-cc-finish="shiny-gold"] {
	--cc-metal-bg: linear-gradient(115deg, #765510 0%, #e6be4c 22%, #fff7c5 42%, #c38e17 60%, #f2d56c 80%, #72500b 100%);
	--cc-metal-text: #2b2106;
	--cc-metal-edge: rgba(255, 249, 199, 0.8);
	--cc-metal-shadow: rgba(107, 78, 10, 0.34);
	--cc-metal-swatch: linear-gradient(135deg, #fff9ca, #d7a51f 48%, #765510);
}
.cc-metal-finish-button[data-cc-finish="24k-gold"] {
	--cc-metal-bg: linear-gradient(110deg, #8a5d00 0%, #f3c635 20%, #fff6a6 39%, #d59b00 57%, #ffdc4f 76%, #8b5e00 100%);
	--cc-metal-text: #231600;
	--cc-metal-edge: rgba(255, 248, 163, 0.9);
	--cc-metal-shadow: rgba(124, 83, 0, 0.38);
	--cc-metal-swatch: linear-gradient(135deg, #fff8aa, #e8ae00 48%, #865900);
}

/* Silver, nickel, chromium and rhodium */
.cc-metal-finish-button[data-cc-finish="shiny-silver"],
.cc-metal-finish-button[data-cc-finish="chromium"],
.cc-metal-finish-button[data-cc-finish="rhodium"],
.cc-metal-finish-button[data-cc-finish="imitation-rhodium"] {
	--cc-metal-bg: linear-gradient(115deg, #5f6972 0%, #d5dde3 21%, #ffffff 41%, #9aa5ad 59%, #eff3f5 79%, #66717a 100%);
	--cc-metal-text: #10171d;
	--cc-metal-edge: rgba(255, 255, 255, 0.9);
	--cc-metal-shadow: rgba(38, 50, 60, 0.3);
	--cc-metal-swatch: linear-gradient(135deg, #ffffff, #aab4bc 48%, #59636c);
}
.cc-metal-finish-button[data-cc-finish="antique-silver"] {
	--cc-metal-bg: linear-gradient(135deg, #34383b 0%, #737b80 25%, #b9c0c3 48%, #555c60 72%, #c4c9cc 100%);
	--cc-metal-text: #ffffff;
	--cc-metal-edge: rgba(236, 242, 245, 0.48);
	--cc-metal-shadow: rgba(35, 42, 47, 0.4);
	--cc-metal-swatch: radial-gradient(circle at 30% 24%, #d3d9dc, #7b8388 50%, #303437 100%);
	text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}
.cc-metal-finish-button[data-cc-finish="matte-silver"] {
	--cc-metal-bg: linear-gradient(135deg, #8c969d 0%, #c7ced2 45%, #929ca2 100%);
	--cc-metal-text: #172027;
	--cc-metal-edge: rgba(255, 255, 255, 0.55);
	--cc-metal-shadow: rgba(51, 62, 70, 0.26);
	--cc-metal-swatch: linear-gradient(135deg, #d0d6d9, #8d979e);
}
.cc-metal-finish-button[data-cc-finish="nickel"] {
	--cc-metal-bg: linear-gradient(115deg, #69736f 0%, #cbd2ce 24%, #f7faf8 43%, #98a19d 62%, #dbe1dd 82%, #68716e 100%);
	--cc-metal-text: #14201c;
	--cc-metal-edge: rgba(255,255,255,.72);
	--cc-metal-shadow: rgba(50, 65, 59, 0.28);
	--cc-metal-swatch: linear-gradient(135deg, #f1f5f2, #a2aca7 48%, #65706b);
}
.cc-metal-finish-button[data-cc-finish="matte-nickel"] {
	--cc-metal-bg: linear-gradient(135deg, #76807b 0%, #b9c1bd 47%, #7b8580 100%);
	--cc-metal-text: #13201b;
	--cc-metal-edge: rgba(239,245,242,.5);
	--cc-metal-shadow: rgba(46, 59, 54, 0.27);
	--cc-metal-swatch: linear-gradient(135deg, #c3cac6, #78827d);
}
.cc-metal-finish-button[data-cc-finish="antique-nickel"] {
	--cc-metal-bg: linear-gradient(135deg, #303733 0%, #68736d 26%, #a7b0ab 49%, #4e5852 72%, #9da7a1 100%);
	--cc-metal-text: #ffffff;
	--cc-metal-edge: rgba(225,235,230,.42);
	--cc-metal-shadow: rgba(34, 44, 39, 0.4);
	--cc-metal-swatch: radial-gradient(circle at 30% 24%, #b9c2bd, #6f7973 50%, #303733 100%);
	text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;
}

/* Dark finishes */
.cc-metal-finish-button[data-cc-finish="black-nickel"] {
	--cc-metal-bg: linear-gradient(120deg, #050607 0%, #30363a 25%, #737b80 43%, #16191b 62%, #3c4347 81%, #070809 100%);
	--cc-metal-text: #ffffff;
	--cc-metal-edge: rgba(210, 222, 229, 0.35);
	--cc-metal-shadow: rgba(0, 0, 0, 0.5);
	--cc-metal-swatch: linear-gradient(135deg, #6f777c, #171a1c 55%, #020303);
	text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
}
.cc-metal-finish-button[data-cc-finish="dyed-black"] {
	--cc-metal-bg: linear-gradient(135deg, #020202 0%, #171717 48%, #050505 100%);
	--cc-metal-text: #ffffff;
	--cc-metal-edge: rgba(255, 255, 255, 0.24);
	--cc-metal-shadow: rgba(0, 0, 0, 0.56);
	--cc-metal-swatch: radial-gradient(circle at 35% 30%, #333, #090909 58%, #000);
	text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
}

/* Color finishes */
.cc-metal-finish-button[data-cc-finish="rainbow"] {
	--cc-metal-bg: linear-gradient(115deg, #f25c54 0%, #f5c85b 18%, #6bd88d 36%, #5cc9e8 54%, #7f7ce8 72%, #d46bd4 88%, #f25c54 100%);
	--cc-metal-text: #11151b;
	--cc-metal-edge: rgba(255,255,255,.78);
	--cc-metal-shadow: rgba(54, 62, 102, 0.3);
	--cc-metal-swatch: conic-gradient(#f25c54, #f5c85b, #6bd88d, #5cc9e8, #7f7ce8, #d46bd4, #f25c54);
}
.cc-metal-finish-button[data-cc-finish="pms-match"] {
	--cc-metal-bg: linear-gradient(115deg, #ef476f 0%, #ffd166 23%, #06d6a0 47%, #118ab2 70%, #6a4c93 100%);
	--cc-metal-text: #ffffff;
	--cc-metal-edge: rgba(255,255,255,.72);
	--cc-metal-shadow: rgba(41, 49, 91, 0.32);
	--cc-metal-swatch: conic-gradient(#ef476f, #ffd166, #06d6a0, #118ab2, #6a4c93, #ef476f);
	text-shadow: 0 1px 2px rgba(0,0,0,.48) !important;
}

/* Keep accordion contents readable below the new header. */
.cc-metal-finish-card > :not(.cc-metal-finish-button),
.cc-metal-finish-card .elementor-tab-content,
.cc-metal-finish-card .accordion-content,
.cc-metal-finish-card .toggle-content {
	border-radius: 0 0 14px 14px !important;
}

@media (max-width: 767px) {
	.cc-metal-finish-card {
		margin-bottom: 10px !important;
	}

	.cc-metal-finish-button {
		min-height: 58px !important;
		padding: 12px 46px 12px 14px !important;
		border-radius: 14px !important;
		font-size: 14px !important;
	}

	.cc-metal-finish-button::before {
		flex-basis: 26px !important;
		width: 26px !important;
		height: 26px !important;
	}

	.cc-metal-finish-button::after {
		right: 16px !important;
		font-size: 24px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-metal-finish-button,
	.cc-metal-finish-button::after {
		transition: none !important;
	}
}

/* v1.1.0: Force every finish button label, icon, and nested link to white. */
html body .cc-metal-finish-button,
html body .cc-metal-finish-button:link,
html body .cc-metal-finish-button:visited,
html body .cc-metal-finish-button:hover,
html body .cc-metal-finish-button:focus,
html body .cc-metal-finish-button:active,
html body .cc-metal-finish-button *,
html body .cc-metal-finish-button *:link,
html body .cc-metal-finish-button *:visited,
html body .cc-metal-finish-button *:hover,
html body .cc-metal-finish-button *:focus,
html body .cc-metal-finish-button *:active {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-decoration-color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82) !important;
}

html body .cc-metal-finish-button::after {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82) !important;
	opacity: 1 !important;
}

/* Prevent theme and dark-mode plugins from repainting the decorated controls. */
html body .cc-metal-finish-button {
	color-scheme: dark !important;
}