/* Retrieval queue panel — header strip plus progress rows.
   Every colour and size is a CSS variable so the Elementor controls own them. */

.ifd-rq {
	font-family: var(--ifd-font, "Work Sans", sans-serif);
	background: var(--ifd-rq-bg, #ffffff);
	border: var(--ifd-rq-bw, 1px) solid var(--ifd-rq-bc, #e2e5e8);
	border-radius: var(--ifd-rq-radius, 16px);
	box-shadow: 0 24px 48px -28px var(--ifd-rq-shadow, rgba(15, 77, 120, .3));
	overflow: hidden;
	max-width: 100%;
	transition: transform .35s ease, box-shadow .35s ease;
}

.ifd-rq--lift:hover {
	transform: translateY(var(--ifd-rq-lift, -4px));
	box-shadow: 0 32px 60px -26px var(--ifd-rq-shadow-hover, rgba(15, 77, 120, .4));
}

/* ---------- Header ---------- */

.ifd-rq__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: var(--ifd-rq-head-pad, 14px 20px);
	border-bottom: 1px solid var(--ifd-rq-head-line, #eef1f3);
	background: var(--ifd-rq-head-bg, #fbfcfd);
}

.ifd-rq__title {
	font-family: inherit;
	font-size: var(--ifd-rq-title-size, 11px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ifd-rq-title, #525860);
	font-weight: 600;
	line-height: 1.4;
}

.ifd-rq__meta {
	margin-left: auto;
	font-family: inherit;
	font-size: var(--ifd-rq-meta-size, 11px);
	letter-spacing: 0.04em;
	color: var(--ifd-rq-meta, #9aa0a4);
	line-height: 1.4;
	text-align: right;
}

/* ---------- Rows ---------- */

.ifd-rq__rows {
	display: flex;
	flex-direction: column;
}

.ifd-rq__row {
	display: flex;
	flex-direction: column;
	gap: var(--ifd-rq-row-gap, 8px);
	padding: var(--ifd-rq-row-pad, 16px 20px);
	border-bottom: 1px solid var(--ifd-rq-row-line, #f2f4f6);
}

.ifd-rq__row:last-child {
	border-bottom: 0;
}

.ifd-rq__line {
	display: flex;
	align-items: baseline;
	gap: var(--ifd-rq-line-gap, 10px);
}

.ifd-rq__code {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: inherit;
	font-size: var(--ifd-rq-code-size, 11.5px);
	letter-spacing: 0.04em;
	color: var(--ifd-rq-code, #0f4d78);
	font-weight: 600;
	line-height: 1.4;
}

.ifd-rq__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: inherit;
	font-size: var(--ifd-rq-label-size, 13px);
	color: var(--ifd-rq-label, #525860);
	line-height: 1.4;
}

.ifd-rq__value {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: inherit;
	font-size: var(--ifd-rq-value-size, 12px);
	font-weight: 600;
	color: var(--ifd-rq-value, #1f8a63);
	line-height: 1.4;
	animation: ifdRqAppear var(--ifd-rq-value-speed, .4s) ease both;
}

@keyframes ifdRqAppear {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Progress bar ---------- */

.ifd-rq__track {
	height: var(--ifd-rq-track-h, 6px);
	border-radius: var(--ifd-rq-track-radius, 3px);
	background: var(--ifd-rq-track, #eef1f3);
	overflow: hidden;
}

.ifd-rq__fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ifd-rq-fill-from, #1c77b7), var(--ifd-rq-fill-to, #3fbf8a));
	transform-origin: left center;
	animation: ifdRqFill var(--ifd-rq-fill-speed, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ifd-rq__fill--flat {
	background: var(--ifd-rq-fill-from, #1c77b7);
}

@keyframes ifdRqFill {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	/* Three items on one line leaves no room for the exam name, so it drops to
	   its own line and is allowed to wrap instead of being clipped. */
	.ifd-rq__line {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.ifd-rq__label {
		order: 3;
		flex: 1 0 100%;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.ifd-rq__head {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.ifd-rq__meta {
		margin-left: 0;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifd-rq,
	.ifd-rq__value,
	.ifd-rq__fill {
		transition: none;
		animation: none;
	}
}