/**
 * Advanced Progress Bar — Common base CSS ( loads for every style ).
 *
 * Owns the shared skeleton: the bars container, head row ( label + percent ),
 * the linear track / fill and the circular conic ring. Per-style files paint
 * the fill and chrome. CSS variables drive theme and sizing:
 *   --captwiki-pb-accent / --captwiki-pb-accent-2  → fill colours
 *   --captwiki-pb-track                            → track colour
 *   --captwiki-pb-height                           → linear bar height
 *   --captwiki-pb-csize / --captwiki-pb-thick      → circle size / ring width
 *   --captwiki-pb-segments                         → segmented block count
 *   --captwiki-pb-p                                → live circular value ( JS )
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-progress {
	--captwiki-pb-accent: #6d5efc;
	--captwiki-pb-accent-2: #00d4ff;
	--captwiki-pb-track: #eceef4;
	--captwiki-pb-height: 12px;
	--captwiki-pb-csize: 160px;
	--captwiki-pb-thick: 12px;
	--captwiki-pb-segments: 20;
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	box-sizing: border-box;
}

.captwiki-progress *,
.captwiki-progress *::before,
.captwiki-progress *::after {
	box-sizing: border-box;
}

.captwiki-progress--circular {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

/* ── Item ──────────────────────────────────────────────── */
.captwiki-progress__item {
	position: relative;
}

.captwiki-progress--linear .captwiki-progress__item {
	width: 100%;
}

/* ── Head ──────────────────────────────────────────────── */
.captwiki-progress__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.captwiki-progress__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #1f2937;
}

.captwiki-progress__icon {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	line-height: 1;
	color: var( --captwiki-pb-accent );
}

.captwiki-progress__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-progress__icon i {
	font-style: normal;
}

.captwiki-progress__percent {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #4b5563;
	font-variant-numeric: tabular-nums;
}

/* ── Linear track + fill ───────────────────────────────── */
.captwiki-progress__track {
	position: relative;
	width: 100%;
	height: var( --captwiki-pb-height );
	background: var( --captwiki-pb-track );
	border-radius: 99px;
	overflow: hidden;
}

.captwiki-progress__fill {
	position: relative;
	height: 100%;
	width: 0;
	max-width: 100%;
	background: var( --captwiki-pb-accent );
	border-radius: 99px;
	transition: none;
}

.captwiki-progress__fill-glow {
	display: none;
}

/* ── Circular ──────────────────────────────────────────── */
.captwiki-progress__item--circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: auto;
}

.captwiki-progress__circle-wrap {
	position: relative;
	width: var( --captwiki-pb-csize );
	height: var( --captwiki-pb-csize );
}

.captwiki-progress__circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient( var( --captwiki-pb-accent ) calc( var( --captwiki-pb-p, 0 ) * 1% ), var( --captwiki-pb-track ) 0 );
	-webkit-mask: radial-gradient( farthest-side, transparent calc( 100% - var( --captwiki-pb-thick ) ), #000 calc( 100% - var( --captwiki-pb-thick ) ) );
	mask: radial-gradient( farthest-side, transparent calc( 100% - var( --captwiki-pb-thick ) ), #000 calc( 100% - var( --captwiki-pb-thick ) ) );
}

.captwiki-progress__circle-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.captwiki-progress__item--circle .captwiki-progress__percent {
	font-size: 26px;
	font-weight: 800;
	color: #111827;
}

.captwiki-progress__item--circle .captwiki-progress__icon {
	font-size: 22px;
}

.captwiki-progress__item--circle .captwiki-progress__label {
	justify-content: center;
}