/* Rex customizable-belt — customer input fields.
   Markup is schema-driven (see belt-customization/render.php), so these styles
   are keyed to field TYPE rather than to any particular belt zone. */

.rex-cust-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* No own margin: the WooCommerce variations form is display:flex with
	   gap:14px, and every other child (.rex-attributes, .single_variation_wrap)
	   relies on that gap. Adding 18px here stacked on top of it and left a 32px
	   hole above the panel where the attribute rows sit only 8px apart. */
	margin: 0;
	padding: 16px;
	border: 1px solid var(--line-2, #e2e6ee);
	border-radius: 14px;
	background: var(--surface-2, #f7f9fc);
}

.rex-cust-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rex-cust-field[hidden],
.rex-cust-field.rex-cust-hidden {
	display: none;
}

.rex-cust-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink, #14181f);
	letter-spacing: 0.01em;
}

.rex-cust-label .required {
	color: #c0392b;
}

.rex-cust-optional {
	font-weight: 500;
	color: #6b7383;
}

.rex-cust-help {
	margin: 0;
	font-size: 12px;
	color: #6b7383;
}

.rex-cust-field input[type="text"],
.rex-cust-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line, #d7dce6);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: var(--ink, #14181f);
	box-sizing: border-box;
}

.rex-cust-field textarea {
	resize: vertical;
	min-height: 90px;
	line-height: 1.45;
}

.rex-cust-field input[type="text"]:focus,
.rex-cust-field textarea:focus {
	outline: 2px solid var(--navy, #233a77);
	outline-offset: 1px;
}

.rex-cust-count {
	margin: 0;
	font-size: 11px;
	color: #8a93a3;
	text-align: right;
}

/* ---- checkbox (Need Design Help) ---- */
.rex-cust-check {
	display: flex;
	align-items: center;
	gap: 9px;
}

.rex-cust-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--navy, #233a77);
}

.rex-cust-check .rex-cust-label {
	margin: 0;
	cursor: pointer;
}

.rex-cust-ndh {
	padding: 10px 12px;
	border: 1px dashed var(--line, #d7dce6);
	border-radius: 10px;
	background: #fff;
}

/* ---- file ---- */
.rex-cust-upload {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Visually hidden but still focusable, so the label acts as the button without
   breaking keyboard users or the browser's own required-field messaging. */
.rex-cust-file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rex-cust-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1px solid var(--line, #d7dce6);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--navy, #233a77);
	cursor: pointer;
}

.rex-cust-upload-btn:hover {
	border-color: var(--navy, #233a77);
}

.rex-cust-file:focus-visible + .rex-cust-upload-btn {
	outline: 2px solid var(--navy, #233a77);
	outline-offset: 2px;
}

.rex-cust-preview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px 5px 5px;
	border: 1px solid var(--line, #d7dce6);
	border-radius: 10px;
	background: #fff;
	max-width: 100%;
}

.rex-cust-preview[hidden] {
	display: none;
}

.rex-cust-preview-img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #f2f4f8;
}

.rex-cust-preview-name {
	font-size: 12px;
	color: #4a5265;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 150px;
}

.rex-cust-remove {
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: #8a93a3;
	cursor: pointer;
	padding: 0 4px;
}

.rex-cust-remove:hover {
	color: #c0392b;
}

/* ---- errors ---- */
.rex-cust-error {
	margin: 0;
	font-size: 12px;
	color: #c0392b;
	min-height: 0;
}

.rex-cust-error:empty {
	display: none;
}

.rex-cust-field.has-error input[type="text"],
.rex-cust-field.has-error textarea {
	border-color: #c0392b;
}

/* ---- admin order screen: artwork download ---- */
.rex-cust-dl {
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.rex-cust-fields {
		padding: 13px;
		gap: 12px;
	}

	.rex-cust-upload {
		gap: 8px;
	}

	.rex-cust-upload-btn {
		width: 100%;
		justify-content: center;
	}

	.rex-cust-preview {
		width: 100%;
	}

	.rex-cust-preview-name {
		max-width: none;
		flex: 1;
	}
}

/* Customization summary lines in the bespoke side cart and cart page. */
.rex-cust-lines {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px 0 0;
}

.rex-cust-line {
	display: flex;
	gap: 6px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #6b7383;
}

.rex-cust-line-k {
	font-weight: 600;
	color: #4a5265;
	flex: none;
}

.rex-cust-line-k::after {
	content: ":";
}

.rex-cust-line-v {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rex-cust-lines-mini .rex-cust-line {
	font-size: 11px;
}