/**
 * Mechanc — Contact Form 7 file field as a drop zone.
 *
 * The component itself (`.file-dropzone`, `.dropzone-*`, `.dfi-*`, `.fmt-pill`)
 * already exists in design-system.css, generated from the mockup. This sheet
 * only does the two things that file cannot: bridge CF7's own markup onto it,
 * and correct the handful of declarations the mockup wrote as literal colours.
 *
 * Those corrections are token swaps rather than a `body.light` block. The
 * mockup assumed a permanently dark page, so it used `rgba(255,255,255,.02)`
 * for the zone's fill and `#fff` for the browse link's hover — both of which
 * disappear against a light background. Re-pointing them at tokens fixes both
 * themes with one declaration each, which is the same approach product-table.css
 * and quote.css take.
 *
 * @package HelloElementorChild
 */

/* ── CF7 bridge ──
   The real <input type="file"> stays in the form and still carries the file;
   it is only removed from view. Nothing here may set `display: none` on the
   wrap, because CF7 prints its validation tip inside it. */
.file-dropzone .wpcf7-form-control-wrap {
	display: block;
}

.file-dropzone input.wpcf7-file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* CF7's own per-field error, printed inside the wrap. */
.file-dropzone .wpcf7-not-valid-tip {
	display: block;
	margin: 10px 0 0;
	font-size: 12px;
	color: #ff4444;
}

/* wpautop puts the label in its own paragraph; without this it inherits the
   theme's paragraph spacing and floats away from the zone it names. */
.form-group.full > p:has( > label.form-label ) {
	margin: 0;
}

/* ── Corrections to the generated component ── */

/* Literal `rgba(255,255,255,.02)` in design-system.css — invisible on a light
   page. A neutral grey tint reads the same amount against either ground. */
.file-dropzone {
	background: rgba(127, 127, 127, .05);
}

/* Literal `#fff` on hover — white on white in the light theme. */
.dropzone-browse:hover {
	color: var(--t1);
}

/* The mockup showed three formats; this field accepts nine, so the row has to
   be allowed to wrap rather than squeeze. */
.dropzone-formats {
	flex-wrap: wrap;
}

/* The zone is a real control now: it takes focus and opens the file picker. */
.file-dropzone:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}

/* Once a file is attached the dashed invitation is over — a solid border says
   "this holds something" the way the drag-over state does. */
.file-dropzone.has-file {
	padding: 14px;
	border-style: solid;
	border-color: var(--br);
	cursor: default;
	text-align: left;
}

.file-dropzone.has-file:hover {
	border-color: var(--bra);
	background: rgba(127, 127, 127, .05);
}

/* The mockup built the file row out of <div>s. These are <span>s so that the
   name can be set with textContent without any block-level markup coming from
   a file name the visitor chose — which means the stacking has to be restated. */
.dropzone-file-item .dfi-name,
.dropzone-file-item .dfi-size {
	display: block;
}

/* The theme's own button padding widens this past the 22px square the design
   gives it, which pushes the file name off-centre against the icon. */
.dropzone-file-item .dfi-remove {
	padding: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1;
}

/* Elementor's button styling paints a filled accent box on :focus, which sticks
   after a mouse click and reads as a selected state on a control that has just
   finished its job. Keyboard focus still gets a ring, via :focus-visible. */
.dropzone-file-item .dfi-remove:focus {
	background: none;
	color: var(--t3);
	outline: none;
}

.dropzone-file-item .dfi-remove:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 1px;
}

.dropzone-file-item .dfi-remove:hover,
.dropzone-file-item .dfi-remove:focus:hover {
	background: rgba(255, 68, 68, .1);
	color: #ff4444;
}

/* Client-side rejection: wrong type, or over the limit CF7 is configured with.
   The server still validates; this only saves the visitor a round trip. */
.dropzone-error {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #ff4444;
}

.dropzone-error[hidden] {
	display: none;
}

.dropzone-file-list[hidden],
.dropzone-idle[hidden] {
	display: none;
}