/* =========================================================================
   Emalahleni — tender pack
   The closing countdown and document list on a single tender / RFQ page.
   Uses the theme's existing tokens so it sits inside the current design.
   ========================================================================= */

.tender-pack-panel {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 2rem;
}

/* ---------------------------------- Countdown --------------------------- */

.tender-cd {
	position: relative;
	overflow: hidden;
	padding: 1.6rem clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #06352c 0%, var(--c-primary-dark) 55%, var(--c-primary) 100%);
	color: #fff;
	box-shadow: 0 18px 44px rgba(4, 30, 24, .22);
}
.tender-cd::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(620px 300px at 88% -30%, rgba(240, 165, 0, .22), transparent 62%);
}
.tender-cd > * { position: relative; z-index: 1; }

.tender-cd__label {
	margin: 0 0 .9rem;
	font-family: var(--font-head);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--c-accent);
	display: flex;
	align-items: center;
	gap: .6rem;
}
.tender-cd__label::before {
	content: "";
	width: 26px; height: 2px;
	border-radius: 2px;
	background: var(--c-accent);
	flex: none;
}

.tender-cd__clock {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.tender-cd__unit {
	flex: 1 1 92px;
	min-width: 82px;
	padding: .85rem .5rem .7rem;
	text-align: center;
	border-radius: 14px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.tender-cd__unit strong {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(1.9rem, 4.4vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: #fff;
	/* Tabular figures stop the row jittering as the seconds tick. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.tender-cd__unit span {
	display: block;
	margin-top: .4rem;
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, .68);
}

.tender-cd__deadline {
	margin: .95rem 0 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .8);
}

/* Under two days: the numerals go gold. */
.tender-cd.is-urgent .tender-cd__unit {
	background: rgba(240, 165, 0, .16);
	border-color: rgba(240, 165, 0, .5);
}
.tender-cd.is-urgent .tender-cd__unit strong { color: var(--c-accent); }

/* Closed: the panel goes quiet rather than shouting a dead deadline. */
.tender-cd.is-closed {
	background: linear-gradient(135deg, #2b3733 0%, #3c4a45 100%);
	box-shadow: var(--shadow-sm);
}
.tender-cd.is-closed::before { display: none; }
.tender-cd.is-closed .tender-cd__label { color: rgba(255, 255, 255, .75); }
.tender-cd.is-closed .tender-cd__label::before { background: rgba(255, 255, 255, .45); }
/* A row of zeros says nothing — a closed tender shows its date instead. */
.tender-cd.is-closed .tender-cd__clock { display: none; }
.tender-cd.is-closed .tender-cd__label { margin-bottom: 0; font-size: .95rem; letter-spacing: .02em; text-transform: none; }
.tender-cd.is-closed .tender-cd__deadline { margin-top: .45rem; }

/* ---------------------------------- Documents --------------------------- */

.tender-docs {
	padding: 1.4rem clamp(1.1rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.tender-docs__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.tender-docs__title {
	margin: 0;
	font-size: 1.2rem;
	letter-spacing: -.015em;
}
.tender-docs__count {
	font-size: .8rem;
	font-weight: 600;
	color: var(--c-muted);
	white-space: nowrap;
}

.tender-docs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.tender-doc {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .75rem .9rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-bg-soft);
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.tender-doc:hover {
	background: #fff;
	border-color: var(--c-primary);
	box-shadow: var(--shadow-sm);
}

/* Extension chip, colour-keyed by file type. */
.tender-doc__ext {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	font-family: var(--font-head);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	background: #6b7771;
	overflow: hidden;
}
.tender-doc__ext[data-ext="PDF"] { background: #c0392b; }
.tender-doc__ext[data-ext="ZIP"],
.tender-doc__ext[data-ext="RAR"],
.tender-doc__ext[data-ext="7Z"]  { background: #b8860b; }
.tender-doc__ext[data-ext="DOC"],
.tender-doc__ext[data-ext="DOCX"] { background: #1d6fa5; }
.tender-doc__ext[data-ext="XLS"],
.tender-doc__ext[data-ext="XLSX"],
.tender-doc__ext[data-ext="CSV"] { background: #1e7e45; }
.tender-doc__ext[data-ext="PNG"],
.tender-doc__ext[data-ext="JPG"],
.tender-doc__ext[data-ext="JPEG"],
.tender-doc__ext[data-ext="DWG"] { background: #6b4fa0; }

.tender-doc__body { flex: 1; min-width: 0; }
.tender-doc__name {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.35;
	/* Long specification names wrap rather than stretching the row. */
	overflow-wrap: anywhere;
}
.tender-doc__meta {
	display: block;
	margin-top: .15rem;
	font-size: .78rem;
	color: var(--c-muted);
	font-weight: 600;
	letter-spacing: .02em;
}

.tender-doc__get {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.05rem;
	border-radius: 999px;
	border: 2px solid var(--c-line);
	background: #fff;
	font-family: var(--font-head);
	font-size: .85rem;
	font-weight: 600;
	color: var(--c-primary);
	transition: all var(--transition);
}
.tender-doc__get::after { content: "↓"; font-weight: 700; }
.tender-doc:hover .tender-doc__get {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

@media (max-width: 600px) {
	.tender-cd__unit { flex-basis: calc(50% - .3rem); }
	.tender-doc { flex-wrap: wrap; }
	.tender-doc__body { flex-basis: calc(100% - 3.5rem); }
	.tender-doc__get { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.tender-doc, .tender-doc__get { transition: none; }
}