/* ==========================================================================
   Universal Image Converter & Compressor v2 — Emblus theme, horizontal layout
   Palette sampled from emblus.com:
     ink #02021E · ink-soft #0A102F · primary #3147FF · primary-dark #052F99
     primary-soft #416FF4 · surface-alt #ECEFF5 · border #D7DBDE
   Colours are driven by CSS variables (injected by the plugin, filterable via
   `uicc_theme_colors`) with hard-coded fallbacks for safety.
   ========================================================================== */

.uicc-shortcode-container {
	--uicc-ink: #02021E;
	--uicc-ink-soft: #0A102F;
	/* Button colours measured from the live emblus.com buttons:
	   solid #052F99 with white text, 3px radius, Poppins 700, and #2789FF as
	   the bright accent used on the site's secondary/hover treatment. */
	--uicc-primary: #052F99;
	--uicc-primary-dark: #021F6B;
	--uicc-primary-accent: #2789FF;
	--uicc-primary-soft: #416FF4;
	--uicc-btn-radius: 3px;
	--uicc-surface: #FFFFFF;
	--uicc-surface-alt: #ECEFF5;
	--uicc-border: #D7DBDE;
	--uicc-muted: #3B3F59;
	--uicc-success: #0E9F6E;
	--uicc-danger: #CF2E2E;
	--uicc-warning: #B45309;
	--uicc-radius: 16px;
}

.uicc-shortcode-container,
.uicc-shortcode-container * {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------- card shell */
.uicc-shortcode-container .uicc-card {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	background: var(--uicc-surface, #FFFFFF) !important;
	color: var(--uicc-ink, #02021E) !important;
	border: 1px solid var(--uicc-border, #D7DBDE) !important;
	border-radius: var(--uicc-radius, 10px) !important;
	box-shadow: 0 18px 48px -18px rgba(2, 2, 30, 0.28) !important;
	padding: 28px !important;
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

/* thin brand accent along the top edge */
.uicc-shortcode-container .uicc-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--uicc-primary-dark, #021F6B), var(--uicc-primary, #052F99) 55%, var(--uicc-primary-soft, #416FF4));
}

.uicc-card-header {
	margin-bottom: 22px;
	text-align: left;
}

.uicc-title {
	color: var(--uicc-ink, #02021E) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.25 !important;
}

.uicc-subtitle {
	color: var(--uicc-muted, #3B3F59) !important;
	font-size: 14.5px !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* ------------------------------------------------- HORIZONTAL LAYOUT */
.uicc-hstack {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.uicc-layout-vertical .uicc-hstack {
	grid-template-columns: minmax(0, 1fr);
}

.uicc-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.uicc-col-options {
	background: var(--uicc-surface-alt, #ECEFF5);
	border: 1px solid var(--uicc-border, #D7DBDE);
	border-radius: 14px;
	padding: 20px;
}

/* ------------------------------------------------------------ dropzone */
.uicc-dropzone {
	background: linear-gradient(160deg, rgba(49, 71, 255, 0.05), rgba(2, 2, 30, 0.03)) !important;
	border: 2px dashed rgba(49, 71, 255, 0.35) !important;
	border-radius: 14px !important;
	padding: 34px 20px !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.22s ease !important;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 230px;
}

.uicc-dropzone:hover,
.uicc-dropzone.dragover {
	border-color: var(--uicc-primary, #052F99) !important;
	background: rgba(49, 71, 255, 0.08) !important;
	box-shadow: 0 0 0 4px rgba(49, 71, 255, 0.12) !important;
}

.uicc-dropzone-icon {
	color: var(--uicc-primary, #052F99) !important;
	margin-bottom: 10px !important;
	line-height: 0;
}

.uicc-drop-title {
	color: var(--uicc-ink, #02021E) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	margin: 0 0 6px !important;
}

.uicc-drop-desc {
	color: var(--uicc-muted, #3B3F59) !important;
	font-size: 13px !important;
	margin: 0 0 16px !important;
}

/* ------------------------------------------------------- URL importer */
.uicc-url-section {
	background: var(--uicc-surface-alt, #ECEFF5);
	border: 1px solid var(--uicc-border, #D7DBDE);
	border-radius: 12px;
	padding: 14px 16px;
}

.uicc-url-row {
	display: flex;
	gap: 10px;
}

.uicc-url-row .uicc-select {
	flex: 1 1 auto;
}

.uicc-label {
	display: block;
	color: var(--uicc-ink, #02021E) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 7px !important;
}

.uicc-select {
	width: 100%;
	background: var(--uicc-surface, #FFFFFF) !important;
	color: var(--uicc-ink, #02021E) !important;
	border: 1px solid var(--uicc-border, #D7DBDE) !important;
	border-radius: 10px !important;
	padding: 11px 13px !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.uicc-select:focus {
	outline: none !important;
	border-color: var(--uicc-primary, #052F99) !important;
	box-shadow: 0 0 0 3px rgba(49, 71, 255, 0.16) !important;
}

.uicc-option-box + .uicc-option-box {
	margin-top: 4px;
}

/* ------------------------------------------------------ size presets */
.uicc-size-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.uicc-preset-btn {
	background: var(--uicc-surface, #FFFFFF) !important;
	color: var(--uicc-ink, #02021E) !important;
	border: 1px solid var(--uicc-border, #D7DBDE) !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.18s ease !important;
}

.uicc-preset-btn:hover {
	border-color: var(--uicc-primary, #052F99) !important;
	color: var(--uicc-primary-dark, #021F6B) !important;
}

.uicc-preset-btn.active {
	background: var(--uicc-primary, #052F99) !important;
	border-color: var(--uicc-primary, #052F99) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px -6px rgba(49, 71, 255, 0.7) !important;
}

/* ------------------------------------------------------------ buttons */
.uicc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent !important;
	border-radius: var(--uicc-btn-radius, 3px) !important;
	padding: 12px 22px !important;
	font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: capitalize;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.18s ease !important;
}

.uicc-btn:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
}

.uicc-btn-primary {
	background: var(--uicc-primary, #052F99) !important;
	color: #fff !important;
}

.uicc-btn-primary:hover {
	background: var(--uicc-primary-accent, #2789FF) !important;
	color: #fff !important;
}

.uicc-btn-outline {
	background: transparent !important;
	color: var(--uicc-primary-dark, #021F6B) !important;
	border-color: var(--uicc-primary, #052F99) !important;
	white-space: nowrap;
}

.uicc-btn-outline:hover {
	background: rgba(5, 47, 153, 0.08) !important;
}

/* Main CTA: flat brand navy with the site's bright blue on hover — matching
   the "Get Your Free Audit" button on emblus.com rather than inventing a gradient. */
.uicc-btn-success {
	background: var(--uicc-primary, #052F99) !important;
	color: #fff !important;
	box-shadow: 0 10px 22px -14px rgba(5, 47, 153, 0.9) !important;
}

.uicc-btn-success:hover {
	background: var(--uicc-primary-accent, #2789FF) !important;
	color: #fff !important;
}

.uicc-btn-secondary {
	background: var(--uicc-primary-accent, #2789FF) !important;
	color: #fff !important;
}

.uicc-btn-secondary:hover {
	background: var(--uicc-primary, #052F99) !important;
	color: #fff !important;
}

/* Remove All is destructive, so it reads red rather than as a quiet default. */
.uicc-btn-danger {
	background: var(--uicc-danger, #CF2E2E) !important;
	color: #fff !important;
	border-color: var(--uicc-danger, #CF2E2E) !important;
}

.uicc-btn-danger:hover {
	background: #A82121 !important;
	color: #fff !important;
	border-color: #A82121 !important;
}

.uicc-btn-lg {
	width: 100%;
	padding: 15px 20px !important;
	font-size: 15.5px !important;
}

/* ---------------------------------------------------------- action bar */
.uicc-action-bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.uicc-action-secondary {
	display: flex;
	gap: 10px;
}

.uicc-action-secondary .uicc-btn {
	flex: 1 1 0;
	padding: 10px 12px !important;
	font-size: 13px !important;
}

.uicc-note {
	margin: 4px 0 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--uicc-warning, #B45309) !important;
	background: rgba(180, 83, 9, 0.08);
	border-radius: 8px;
	padding: 9px 11px;
}

.uicc-note code {
	background: rgba(2, 2, 30, 0.08);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 12px;
}

/* ------------------------------------------------------- results list */
.uicc-file-list {
	display: none;
	margin-top: 22px;
	border-top: 1px solid var(--uicc-border, #D7DBDE);
	padding-top: 18px;
}

.uicc-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--uicc-surface-alt, #ECEFF5);
	border: 1px solid var(--uicc-border, #D7DBDE);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.uicc-file-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1 1 240px;
}

/* No wrapping here: a long status message used to push the remove button onto
   its own line, leaving the cross visually detached from its row. The status
   text now wraps inside its own column and the button stays pinned beside it. */
.uicc-file-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	flex: 1 1 260px;
	justify-content: flex-end;
	min-width: 0;
}

.uicc-file-status {
	min-width: 0;
	text-align: right;
}

.uicc-file-status .uicc-badge {
	white-space: normal;
	display: inline-block;
	text-align: left;
}

.uicc-thumb-img {
	width: 46px !important;
	height: 46px !important;
	object-fit: cover !important;
	border-radius: 8px !important;
	border: 1px solid var(--uicc-border, #D7DBDE) !important;
	background: #fff;
	flex: 0 0 auto;
}

.uicc-thumb-fallback {
	width: 46px;
	height: 46px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background: linear-gradient(140deg, var(--uicc-ink, #02021E), var(--uicc-primary-dark, #021F6B));
	flex: 0 0 auto;
}

.uicc-file-name {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--uicc-ink, #02021E) !important;
	word-break: break-word;
}

.uicc-badge {
	display: inline-block;
	border-radius: var(--uicc-btn-radius, 3px);
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.uicc-badge-success {
	background: rgba(14, 159, 110, 0.14);
	color: #096B4A;
}

.uicc-badge-warning {
	background: rgba(49, 71, 255, 0.12);
	color: var(--uicc-primary-dark, #021F6B);
}

.uicc-badge-danger {
	background: rgba(207, 46, 46, 0.12);
	color: var(--uicc-danger, #CF2E2E);
}

.uicc-badge-disabled {
	background: rgba(2, 2, 30, 0.08);
	color: var(--uicc-muted, #3B3F59);
}

/* Fixed size and flex centering: the glyph used to sit off-centre, and the
   button stretched or dropped to its own line when the status text wrapped. */
/* Compact in-row action (per-image Convert, Download). */
.uicc-btn-mini {
	padding: 5px 11px !important;
	font-size: 11px !important;
	flex: 0 0 auto;
	white-space: nowrap;
}

.uicc-remove-file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: center;
	box-sizing: border-box;
	padding: 0;
	background: transparent;
	border: 1px solid var(--uicc-border, #D7DBDE);
	color: var(--uicc-muted, #3B3F59);
	width: 28px;
	min-width: 28px;
	height: 28px;
	border-radius: var(--uicc-btn-radius, 3px);
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: all 0.18s ease;
}

.uicc-remove-file-btn:hover {
	border-color: var(--uicc-danger, #CF2E2E);
	color: var(--uicc-danger, #CF2E2E);
	background: rgba(207, 46, 46, 0.08);
}

/* Light banner: the old dark-navy fill put navy-ish text on a navy background,
   which made the savings line unreadable. */
.uicc-savings-banner {
	background: rgba(14, 159, 110, 0.10);
	border: 1px solid rgba(14, 159, 110, 0.35);
	border-left: 4px solid var(--uicc-success, #0E9F6E);
	color: #0B5D45;
	border-radius: 6px;
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 14px;
}

.uicc-savings-banner strong {
	color: #084533;
}

.uicc-hidden {
	display: none !important;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
	.uicc-hstack {
		grid-template-columns: minmax(0, 1fr);
	}

	.uicc-dropzone {
		min-height: 180px;
	}
}

@media (max-width: 560px) {
	.uicc-shortcode-container .uicc-card {
		padding: 20px !important;
	}

	.uicc-url-row {
		flex-direction: column;
	}

	.uicc-action-secondary {
		flex-direction: column;
	}
}

/* Marker on rows whose HEIC was decoded in the browser */
.uicc-tag-heic {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: var(--uicc-btn-radius, 3px);
	background: rgba(39, 137, 255, 0.14);
	color: var(--uicc-primary, #052F99) !important;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	vertical-align: middle;
	text-transform: uppercase;
}