/*
 * Site Toolkit: Elementor extras, styled file upload field of Elementor Pro forms.
 * Pro's own <input type="file"> stays in the page, visually hidden but focusable (keyboard and screen readers); the
 * <label class="stk-upload__btn"> is the button. Colours, radius and font size are CSS variables (defaults = the look of the
 * theme code this replaces): --stk-upload-color, --stk-upload-bg, --stk-upload-hover, --stk-upload-hover-color,
 * --stk-upload-ring, --stk-upload-error, --stk-upload-radius, --stk-upload-size, --stk-upload-padding, --stk-upload-mt,
 * --stk-upload-mb, --stk-upload-weight, --stk-upload-icon.
 *
 * Contrast check (WCAG 2.2 AA, text needs 4.5:1, focus ring 3:1):
 *   default  #1F2C43 on #FFFFFF             = 14.6:1
 *   hover    #FFFFFF on #C8202B (default)   =  5.7:1
 *   the owner's red #F4343F as hover background: #1F2C43 on it is only 3.6:1 and white 3.9:1, so it passes with black
 *   text (5.4:1); the settings page output picks such a text colour automatically (--stk-upload-hover-color).
 *   #F4343F is kept for the focus ring (against white 3.9:1, as a non-text indicator it needs 3:1).
 *   error #B32D2E on white = 6.3:1 (change --stk-upload-error on dark backgrounds).
 */

/* Before the script runs (button printed by the server) and after (class added by the script). */
.elementor-field-group:has(> .stk-upload__btn) {
	position: relative;
}

.elementor-field-group:has(> .stk-upload__btn) > input[type="file"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.elementor-field-group.stk-upload {
	position: relative;
}

.elementor-field-group.stk-upload > input[type="file"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.elementor-field-group > .stk-upload__btn,
.stk-upload__btn {
	display: inline-block;
	box-sizing: border-box;
	margin: var(--stk-upload-mt, 0) 0 var(--stk-upload-mb, 0);
	margin-inline-end: 15px;
	/* !important: Pro's "Label spacing" (body .elementor-labels-above .elementor-field-group > label) sets padding on every label. */
	padding: var(--stk-upload-padding, 0.525rem 1.05rem) !important;
	border: 1px solid transparent; /* forced-colors mode draws it, so the button keeps its shape */
	border-radius: var(--stk-upload-radius, 4px);
	background: var(--stk-upload-bg, #fff);
	color: var(--stk-upload-color, #1f2c43);
	font-size: var(--stk-upload-size, 0.8em);
	font-weight: var(--stk-upload-weight, 800);
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease;
}

.stk-upload__btn.is-drag,
.stk-upload > input[type="file"]:focus-visible + .stk-upload__btn,
.elementor-field-group > input[type="file"]:focus-visible + .stk-upload__btn {
	background: var(--stk-upload-hover, #c8202b);
	color: var(--stk-upload-hover-color, #fff);
}

@media (hover: hover) {
	.stk-upload__btn:hover {
		background: var(--stk-upload-hover, #c8202b);
		color: var(--stk-upload-hover-color, #fff);
	}
}

.stk-upload > input[type="file"]:focus-visible + .stk-upload__btn,
.elementor-field-group > input[type="file"]:focus-visible + .stk-upload__btn {
	outline: 2px solid var(--stk-upload-ring, #f4343f);
	outline-offset: 2px;
}

.stk-upload__btn.is-drag {
	outline: 2px dashed currentcolor;
	outline-offset: 2px;
}

.stk-upload__icon {
	display: inline-block;
	margin-inline-start: 0.6em;
	vertical-align: -0.125em;
	color: var(--stk-upload-icon, inherit);
}

/* On the hover / focus / drag background the icon takes the readable text colour, like the label. */
.stk-upload__btn.is-drag .stk-upload__icon,
.stk-upload > input[type="file"]:focus-visible + .stk-upload__btn .stk-upload__icon,
.elementor-field-group > input[type="file"]:focus-visible + .stk-upload__btn .stk-upload__icon {
	color: inherit;
}

@media (hover: hover) {
	.stk-upload__btn:hover .stk-upload__icon {
		color: inherit;
	}
}

.stk-upload__panel {
	flex: 0 0 100%;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-top: 0.6em;
	font-size: 0.875em;
	line-height: 1.4;
	text-align: start;
}

.stk-upload [hidden] {
	display: none !important;
}

.stk-upload__count {
	margin: 0 0 0.25em;
	font-weight: 600;
}

.stk-upload__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stk-upload__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.6em;
	align-items: center;
	margin: 0;
	padding: 0.15em 0;
}

.stk-upload__name {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.stk-upload__size {
	opacity: 0.75;
	white-space: nowrap;
}

.elementor-field-group.stk-upload button.stk-upload__remove,
.elementor-field-group.stk-upload button.stk-upload__clear {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	border-radius: 3px;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.elementor-field-group.stk-upload button.stk-upload__remove {
	padding: 0 0.4em;
	font-size: 1.25em;
	line-height: 1.2;
}

.elementor-field-group.stk-upload button.stk-upload__clear {
	margin-top: 0.35em;
	padding: 0 0.25em;
	text-decoration: underline;
}

@media (hover: hover) {
	.elementor-field-group.stk-upload button.stk-upload__remove:hover,
	.elementor-field-group.stk-upload button.stk-upload__clear:hover {
		background: rgba(128, 128, 128, 0.2);
	}
}

.elementor-field-group.stk-upload button.stk-upload__remove:focus-visible,
.elementor-field-group.stk-upload button.stk-upload__clear:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.stk-upload__errors {
	margin: 0.35em 0 0;
}

.stk-upload__error {
	margin: 0.15em 0 0;
	color: var(--stk-upload-error, #b32d2e);
	font-weight: 600;
}

.stk-upload__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.stk-upload__btn {
		transition: none;
	}
}

@media (forced-colors: active) {
	.stk-upload__btn {
		border: 1px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}

	.stk-upload__btn:hover,
	.stk-upload__btn.is-drag {
		background: Highlight;
		color: HighlightText;
	}
}