/*
 * Upload control (markup in common/upload_field.html, behaviour in
 * js/epla-uploader.js).
 *
 * Same family as the shop directory and the review photos: slate ink, teal
 * accent, hairline borders, 4px corners. The dashed edge is the one place
 * it departs from the rest of the site's forms, because a drop target has
 * to read as somewhere you can drop something.
 *
 * .eup--js is set by the component once it is running. Everything the
 * styled control needs is inside that class, so a browser that never runs
 * the script keeps the plain file input the server rendered.
 */

.eup {
	--eup-ink: #34495e;
	--eup-accent: #16a085;
	--eup-muted: #8d959c;
	--eup-hairline: #bdc3c7;
	--eup-surface: #fff;

	/* Sits in the row exactly where a text input would: the forms float
	   their label into a 150px column and let an inline-block control
	   follow it. 401px and the 10px gap under it are the site's own input
	   metrics (2px border + 387px content), so this lines up with every
	   field above and below it rather than starting its own column. */
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 401px;
	max-width: 100%;
	margin: 0 0 10px;
}

[x-cloak] {
	display: none !important;
}

/* The two halves swap over when the component starts. */
.eup-ui {
	display: none;
}

.eup--js .eup-ui {
	display: block;
}

.eup--js .eup-native {
	/* Not display:none - a hidden input cannot be opened by .click() in
	   every browser, and the field must stay submittable. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

.eup--js .eup-ui {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 14px;
	/* Same 2px edge as the inputs around it, dashed rather than solid
	   because this one takes a drop as well as a click. */
	border: 2px dashed var(--eup-hairline);
	background: var(--eup-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.eup-ui:hover {
	border-color: var(--eup-accent);
}

/* The focusable thing is the input inside, so the ring goes on the box. */
.eup-ui:focus-within {
	border-color: var(--eup-accent);
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.12);
}

.eup.is-dragging .eup-ui {
	border-color: var(--eup-accent);
	border-style: solid;
	background: rgba(22, 160, 133, 0.06);
}

.eup.is-uploading .eup-ui {
	cursor: default;
	opacity: 0.6;
}

/* ----------------------------------------------------------- empty state */

.eup-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	color: var(--eup-muted);
}

.eup-mark {
	color: var(--eup-accent);
	margin-bottom: 2px;
}

.eup-lead {
	font-family: Lato, Arial, sans-serif;
	font-size: 14px;
	color: var(--eup-ink);
}

.eup-hint {
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	color: var(--eup-muted);
}

/* -------------------------------------------------------------- previews */

.eup-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eup-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.eup-thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--eup-hairline);
}

.eup-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	text-align: left;
}

.eup-name {
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	color: var(--eup-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eup-size {
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	color: var(--eup-muted);
	font-variant-numeric: tabular-nums;
}

.eup-remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--eup-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.eup-remove:hover {
	background: #fff;
	color: #c0392b;
	box-shadow: 0 0 0 1px var(--eup-hairline);
}

/* Stays in view under the previews, because the drop zone it replaced is
   the only thing that said where to click. Dashed, like the zone, so it
   reads as the same target rather than as a caption. */
.eup-add {
	display: block;
	margin-top: 2px;
	padding: 7px 8px;
	border: 1px dashed var(--eup-hairline);
	background: #fff;
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	color: var(--eup-accent);
	text-align: center;
}

.eup-ui:hover .eup-add {
	border-color: var(--eup-accent);
}

/* --------------------------------------------------------------- errors */

.eup-error {
	margin: 6px 0 0;
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	color: #c0392b;
}

/* ------------------------------------------------------------- progress */

.eup-bar {
	position: relative;
	width: 100%;
	height: 18px;
	margin-top: 8px;
	border-radius: 9px;
	background: #e9edf0;
	overflow: hidden;
}

.eup-bar-fill {
	height: 100%;
	width: 0;
	background: var(--eup-accent);
	transition: width 0.2s ease;
}

.eup-bar-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	line-height: 18px;
	text-align: center;
	font-family: Lato, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: var(--eup-ink);
	font-variant-numeric: tabular-nums;
}