/**
 * Branded file input for the Email Advertiser (Jobs) contact form.
 *
 * Shared styling for both upload fields (Resume + Document). The two fields
 * are wrapped in a single .djru-upload-section so they read as one
 * "attachments" group with a single shared hint line — not two independent
 * form elements with duplicated rules.
 *
 * Native <input type="file"> is visually hidden (still keyboard/a11y
 * accessible) and replaced by a label-as-trigger button + filename display
 * that match TurfNet's token system and Directorist's .directorist-form-element.
 */

.djru-upload-section {
	margin-bottom: 15px; /* match Directorist's .directorist-form-group spacing */
	padding: 14px 16px 16px;
	border: 1px solid var(--community-border-color, #e5e7eb);
	border-radius: var(--community-border-radius-base, 6px);
	/* No background — lets Directorist's card show through so the section
	   doesn't read as a panel-within-a-panel. */
}

.djru-upload-group {
	margin-bottom: 12px; /* inter-field spacing — each group has its own label on top so needs a bit of air */
}

.djru-upload-group:last-of-type {
	margin-bottom: 0; /* hint provides its own top margin; no double-gap */
}

.djru-upload-label {
	display: block;
	margin-bottom: 5px;
	font-size: var(--community-font-size-sm, 14px);
	font-weight: var(--community-font-weight-medium, 500);
	color: var(--community-color-text-primary, #111827);
	line-height: 1.3;
}

.djru-upload-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	/* Subtle border anchors the button+filename as one input-like component under its label. */
	border: 1px solid var(--community-border-color, #e5e7eb);
	border-radius: var(--community-border-radius-base, 6px);
	background: var(--community-color-surface, #ffffff);
}

/* Focus-within gives the border a subtle primary-tint when the trigger is keyboard-focused. */
.djru-upload-field:focus-within {
	border-color: var(--community-color-primary, #7e0000);
}

/* Visually hide the native input but keep it interactive via the label trigger. */
.djru-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Specificity note: community-pro theme ships
   `body:not(.community-pro-homepage) label { display: block }` (0,1,2).
   We use `.djru-upload-field .djru-upload-trigger` (0,2,0) to beat it. */
.djru-upload-field .djru-upload-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px;
	margin: 0;
	background: var(--community-color-primary, #7e0000);
	color: #ffffff !important; /* !important: theme may apply link-color rules inside cards */
	border: 1px solid var(--community-color-primary, #7e0000);
	border-radius: var(--community-border-radius-base, 6px);
	font-family: inherit;
	font-size: var(--community-font-size-sm, 14px);
	font-weight: var(--community-font-weight-semibold, 600);
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease;
	user-select: none;
}

.djru-upload-field .djru-upload-trigger:hover,
.djru-upload-input:focus ~ .djru-upload-field .djru-upload-trigger,
.djru-upload-field:focus-within .djru-upload-trigger {
	background: var(--community-color-primary-dark, #6a0000);
	border-color: var(--community-color-primary-dark, #6a0000);
	color: #ffffff !important;
}

.djru-upload-field .djru-upload-trigger:active {
	transform: translateY(1px);
}

.djru-upload-icon {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	line-height: 1;
}

.djru-upload-filename {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--community-color-text-muted, #9ca3af);
	font-size: var(--community-font-size-sm, 14px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.djru-upload-field.djru-has-file .djru-upload-filename {
	color: var(--community-color-text-primary, #111827);
	font-weight: var(--community-font-weight-medium, 500);
}

.djru-upload-clear {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--community-color-text-muted, #9ca3af);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.djru-upload-field.djru-has-file .djru-upload-clear {
	display: inline-flex;
}

.djru-upload-clear:hover,
.djru-upload-clear:focus {
	background: rgba(239, 68, 68, 0.1);
	color: var(--community-color-error, #ef4444);
	outline: none;
}

.djru-upload-hint {
	display: block;
	margin-top: 10px; /* breathe away from the second upload row */
	margin-left: 6px; /* align with .djru-upload-field's left padding → hint starts at the button's left edge */
	font-size: var(--community-font-size-xs, 12px);
	color: var(--community-color-text-muted, #9ca3af);
	line-height: 1.4;
}

/* Disabled state (while submitting) */
.djru-upload-field.djru-is-disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* Mobile: stack button above filename, full-width button with centered text. */
@media (max-width: 480px) {
	.djru-upload-field {
		flex-wrap: wrap;
	}

	.djru-upload-field .djru-upload-trigger {
		width: 100%;
		justify-content: center;
	}

	.djru-upload-filename {
		flex-basis: 100%;
		order: 3;
		padding-left: 4px;
	}

	.djru-upload-clear {
		order: 2;
	}
}