/**
 * Standalone Image Resizer — styles.
 * Depends on tool.css + compressor.css (reuses dropzone + result cards).
 */

.idl-resizer {
	max-width: 920px;
	margin: 0 auto;
}

.idl-resize-controls {
	align-items: flex-end;
}

.idl-resize-controls-2 {
	margin-top: -6px;
}

.idl-dim-field {
	max-width: 130px;
}

.idl-dim-field input[type="number"] {
	font-family: inherit;
	font-size: 15px;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1.5px solid var(--idl-color-border);
	background: var(--idl-color-bg);
	color: var(--idl-color-text);
	width: 100%;
}

.idl-dim-x {
	font-weight: 700;
	color: var(--idl-color-muted);
	padding-bottom: 10px;
}

.idl-cc-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--idl-color-muted);
	cursor: pointer;
	padding-bottom: 8px;
}

.idl-cc-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--idl-color-primary);
	cursor: pointer;
}

.idl-resizer .idl-comp-new {
	color: var(--idl-color-primary);
	font-weight: 700;
}

.idl-resizer .idl-comp-orig {
	text-decoration: none;
}

@media ( max-width: 560px ) {
	.idl-resize-controls,
	.idl-resize-controls-2 {
		flex-direction: column;
		align-items: stretch;
	}
	.idl-dim-field {
		max-width: none;
	}
	.idl-dim-x {
		display: none;
	}
}