/* ==========================================================================
   BuddyBoss "Profile Completion" widget — Thought Labs skin.

   This restyles BuddyBoss's own Elementor widget (bbp-profile-completion).
   It does NOT replace it — keep using the BuddyBoss widget so profile field
   groups, avatar and cover detection stay in sync with BuddyBoss itself.

   Several colours in that widget are Elementor controls with hard-coded
   defaults (#1CD991 completion, #EF3E46 incomplete, #DEDFE2 ring). Elementor
   prints those inline against .elementor-element-{id}, which outranks a plain
   stylesheet — hence the !important flags below. Set the controls in the
   widget's Style tab instead and you can delete those rules; the table in the
   README lists which control maps to which hex.
   ========================================================================== */

.elementor-widget-bbp-profile-completion {
	--tl-ink: #161a18;
	--tl-accent: #f47b20;
	--tl-accent-2: #b4460f;
	--tl-accent-soft: #fdeadb;
	--tl-green: #276954;
	--tl-green-soft: #e6efe9;
	--tl-card: #ffffff;
	--tl-card-2: #faf7f2;
	--tl-border: #e2ded5;
	--tl-border-2: #eae7e0;
	--tl-text: #1c1b19;
	--tl-muted: #6e675c;
}

/* ------------------------------------------------------------- Container */

.elementor-widget-bbp-profile-completion .profile_bit .progress_container,
.elementor-widget-bbp-profile-completion .profile_bit .profile_bit__details {
	background-color: var(--tl-card) !important;
	border-color: var(--tl-border) !important;
}

.elementor-widget-bbp-profile-completion .profile_bit.skin-linear .progress_container,
.elementor-widget-bbp-profile-completion .profile_bit.skin-semicircle .progress_container {
	border-radius: 12px 12px 0 0;
	padding: 20px;
}

.elementor-widget-bbp-profile-completion .profile_bit:not(.active) .progress_container {
	border-radius: 12px;
}

.elementor-widget-bbp-profile-completion .profile_bit__details {
	border-radius: 0 0 12px 12px;
	box-shadow: 0 10px 28px rgba(22, 26, 24, 0.1);
}

/* ------------------------------------------------------------- Typography */

.elementor-widget-bbp-profile-completion .progress_bit__heading h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 17px;
	color: var(--tl-text);
	letter-spacing: 0;
}

.elementor-widget-bbp-profile-completion .progress_bit__data-num {
	font-family: "Playfair Display", Georgia, serif;
	color: var(--tl-text);
}

.elementor-widget-bbp-profile-completion .progress_bit__data-remark,
.elementor-widget-bbp-profile-completion .progress_bit__data-num > span {
	font-family: "DM Sans", sans-serif;
	color: var(--tl-muted);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li .section_name a {
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--tl-text);
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li .section_name a:hover {
	color: var(--tl-accent-2);
}

/* ------------------------------------------------- Progress ring / bar --
   Ring (circle + semicircle skins) and the linear bar. Filled = orange
   while in progress; the widget swaps to .bb-completed at 100%. */

.elementor-widget-bbp-profile-completion .progress-bit__ring .progress-bit__disc {
	border-color: var(--tl-accent) !important;
}

.elementor-widget-bbp-profile-completion .progress-bit__ring.bb-completed .progress-bit__disc {
	border-color: var(--tl-green) !important;
}

.elementor-widget-bbp-profile-completion .progress-bit__ring:after {
	border-color: var(--tl-border-2) !important;
}

.elementor-widget-bbp-profile-completion .progress_bit__line {
	background-color: var(--tl-border-2) !important;
	border-radius: 99px;
	overflow: hidden;
}

.elementor-widget-bbp-profile-completion .progress_bit__scale {
	background-color: var(--tl-accent) !important;
	border-radius: 99px;
	transition: width 0.4s ease;
}

.elementor-widget-bbp-profile-completion .progress_bit__line.bb-completed .progress_bit__scale {
	background-color: var(--tl-green) !important;
}

/* Semicircle SVG arc. */
.elementor-widget-bbp-profile-completion .pc_progress_graph path {
	stroke: var(--tl-border-2) !important;
}

.elementor-widget-bbp-profile-completion .pc_progress_wrap .pc_progress_rate {
	stroke: var(--tl-accent) !important;
	transition: stroke-dasharray 0.4s ease;
}

/* ------------------------------------------------------------- Checklist */

.elementor-widget-bbp-profile-completion ul.profile_bit__list li {
	padding: 9px 0;
	border-bottom: 1px solid var(--tl-border-2);
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li:last-child {
	border-bottom: 0;
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li .section_number:before {
	border-color: var(--tl-border) !important;
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li.completed .section_number:before {
	background-color: var(--tl-green) !important;
	border-color: var(--tl-green) !important;
}

/* Incomplete steps: BuddyBoss defaults to alarm red. Muted here — an
   unfinished profile is a nudge, not an error. */
.elementor-widget-bbp-profile-completion ul.profile_bit__list li.incomplete .section_name a {
	color: var(--tl-text) !important;
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li.completed .completed_staus {
	background: var(--tl-green-soft) !important;
	border-color: var(--tl-green-soft) !important;
	color: var(--tl-green) !important;
}

.elementor-widget-bbp-profile-completion ul.profile_bit__list li.incomplete .completed_staus {
	background: var(--tl-accent-soft) !important;
	border-color: var(--tl-accent-soft) !important;
	color: var(--tl-accent-2) !important;
}

.elementor-widget-bbp-profile-completion .completed_staus {
	font-size: 11px;
	font-weight: 700;
	border-radius: 99px;
	padding: 2px 9px;
}

/* --------------------------------------------------------------- Button */

.elementor-widget-bbp-profile-completion .profile_bit_action a.profile_bit_action__link {
	background-color: var(--tl-accent);
	border-color: var(--tl-accent);
	color: var(--tl-ink);
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	font-weight: 800;
	border-radius: 9px;
	padding: 10px 18px;
	transition: background-color 0.2s ease;
}

.elementor-widget-bbp-profile-completion .profile_bit_action a.profile_bit_action__link:hover {
	background-color: #f68a3a;
	border-color: #f68a3a;
	color: var(--tl-ink);
}

/* Sits next to the Thought Labs cards in the dashboard sidebar. */
.elementor-widget-bbp-profile-completion .profile_bit_wrapper--linear .profile_bit,
.elementor-widget-bbp-profile-completion .profile_bit_wrapper--semicircle .profile_bit {
	width: 100%;
}