/* CP_UPLOAD_V1 - print-file upload zone.
   Kit 24821 tokens only. Mobile-first: every rule below is the 375px rule, and the
   only media query widens it. Controls are 44px minimum everywhere. */

.cp-up {
	--cp-up-primary: #C25000;
	--cp-up-ink: #1A1A1A;
	--cp-up-muted: #5F5E5E;
	--cp-up-line: #E9ECEF;
	--cp-up-band: #F8F9FA;
	--cp-up-pass: #1E6B3A;
	--cp-up-warn: #A56A00;
	--cp-up-fail: #B3261E;

	box-sizing: border-box;
	width: 100%;
	margin: 18px 0;
	padding: 14px;
	border: 1px solid var(--cp-up-line);
	border-radius: 10px;
	background: #FFFFFF;
	font-family: "Work Sans", system-ui, -apple-system, sans-serif;
	color: var(--cp-up-ink);
	text-align: left;
}

.cp-up *,
.cp-up *::before,
.cp-up *::after { box-sizing: border-box; }

.cp-up-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.cp-up-title {
	font-family: "Hanken Grotesk", "Work Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--cp-up-ink);
}

.cp-up-optional {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cp-up-muted);
	background: #F3F4F5;
	border-radius: 99px;
	padding: 2px 8px;
}

.cp-up-sub {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cp-up-muted);
}

/* ---- drop zone ---- */

.cp-up-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 108px;
	padding: 16px 12px;
	border: 1.5px dashed #CBD2D9;
	border-radius: 8px;
	background: var(--cp-up-band);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	text-align: center;
}

.cp-up-drop:hover,
.cp-up-drop:focus-visible,
.cp-up-drop.is-over {
	border-color: var(--cp-up-primary);
	background: #FFF7F2;
	outline: none;
}

.cp-up-drop:focus-visible { box-shadow: 0 0 0 3px rgba(194, 80, 0, .25); }

.cp-up-ico { width: 26px; height: 26px; color: var(--cp-up-primary); }

.cp-up-cta {
	font-family: "Hanken Grotesk", "Work Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--cp-up-primary);
}

.cp-up-hint { font-size: 12px; color: var(--cp-up-muted); }

.cp-up-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* ---- file rows ---- */

.cp-up-list { list-style: none; margin: 12px 0 0; padding: 0; }

.cp-up-item {
	border: 1px solid var(--cp-up-line);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 10px;
	background: #FFFFFF;
}

.cp-up-item-top {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cp-up-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	word-break: break-word;
}

.cp-up-size { display: block; font-weight: 400; font-size: 12px; color: var(--cp-up-muted); }

.cp-up-x {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: -10px -8px 0 0;
	border: 0;
	background: none;
	color: var(--cp-up-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
}

.cp-up-x:hover { color: var(--cp-up-fail); background: #F8F9FA; }

/* progress */

.cp-up-bar {
	height: 6px;
	margin-top: 10px;
	border-radius: 99px;
	background: #EDEFF2;
	overflow: hidden;
}

.cp-up-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--cp-up-primary);
	transition: width .2s ease;
}

.cp-up-status {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--cp-up-muted);
}

.cp-up-item.is-done .cp-up-bar { display: none; }

/* verdict */

.cp-up-verdict {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 6px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.cp-up-v-pass { background: #E6F4EA; color: var(--cp-up-pass); }
.cp-up-v-warn { background: #FFF4E5; color: var(--cp-up-warn); }
.cp-up-v-fail { background: #FDECEA; color: var(--cp-up-fail); }
.cp-up-v-unverified { background: #EEF1F4; color: #41474D; }

.cp-up-checks { list-style: none; margin: 10px 0 0; padding: 0; }

.cp-up-checks li {
	position: relative;
	padding: 5px 0 5px 22px;
	font-size: 13px;
	line-height: 1.5;
	color: #2E3132;
}

.cp-up-checks li::before {
	position: absolute;
	left: 0;
	top: 5px;
	font-weight: 700;
	font-size: 13px;
}

.cp-up-c-pass::before    { content: "\2713"; color: var(--cp-up-pass); }
.cp-up-c-warn::before    { content: "!";     color: var(--cp-up-warn); }
.cp-up-c-fail::before    { content: "\2715"; color: var(--cp-up-fail); }
.cp-up-c-unverified::before { content: "?";  color: var(--cp-up-muted); }

/* Passing checks are noise once everything passed - keep them one tap away. */
.cp-up-item:not(.is-open) .cp-up-checks li.cp-up-c-pass { display: none; }

.cp-up-toggle {
	margin-top: 8px;
	padding: 10px 0;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--cp-up-primary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.cp-up-esc {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #FFF4E5;
	font-size: 13px;
	line-height: 1.5;
	color: #5F4300;
}

.cp-up-esc a { color: #7A4A00; font-weight: 600; }

.cp-up-esc .cp-up-keep {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: #7A4A00;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.cp-up-err {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #FDECEA;
	color: #8A1C12;
	font-size: 13px;
	line-height: 1.5;
}

.cp-up-retry {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	margin-left: 6px;
	border: 0;
	background: none;
	color: #8A1C12;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.cp-up-wa {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cp-up-muted);
}

.cp-up-wa a { color: var(--cp-up-primary); font-weight: 600; }

/* Cart chip - same vocabulary as the product page. */
.cp-up-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
}

.cp-up-chip-pass { background: #E6F4EA; color: #1E6B3A; }
.cp-up-chip-warn { background: #FFF4E5; color: #A56A00; }
.cp-up-chip-fail { background: #FDECEA; color: #B3261E; }
.cp-up-chip-unverified { background: #EEF1F4; color: #41474D; }

@media (min-width: 768px) {
	.cp-up { padding: 18px; }
	.cp-up-drop { min-height: 128px; }
	.cp-up-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.cp-up-bar span,
	.cp-up-drop { transition: none; }
}