/**
 * LearnDash focus-mode comments — BuddyBoss Platform look.
 * Child theme: /assets/css/ld-comments.css
 */

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

.learndash-wrapper .ld-focus-comments {
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: 32px;
}

/* Strip the box LearnDash draws around the form wrapper. The class is added
   by the relocation script in ld-comments.php. */
.learndash-wrapper .ld-focus-comments .bbc-form-wrap,
.learndash-wrapper .ld-focus-comments #respond,
.learndash-wrapper .ld-focus-comments .comment-respond {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.learndash-wrapper .ld-focus-comments .bbc-form-wrap {
	margin: 0 0 30px !important;
}

/* The "4 Comments" count LearnDash prints above the thread. */
.learndash-wrapper .ld-focus-comments .ld-comment-count,
.learndash-wrapper .ld-focus-comments .comments-title,
.learndash-wrapper .ld-focus-comments h2,
.learndash-wrapper .ld-focus-comments h3 {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--bb-alternate-text-color, #939597);
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

/* ---------------------------------------------------------------
 * Form
 * ------------------------------------------------------------- */

.learndash-wrapper .ld-focus-comments #reply-title,
.learndash-wrapper .ld-focus-comments .comment-reply-title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--bb-headings-color, #122b46);
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.learndash-wrapper .ld-focus-comments .comment-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.learndash-wrapper .ld-focus-comments .bbc-form__field {
	flex: 1 1 100%;
	margin: 0;
}

.learndash-wrapper .ld-focus-comments .comment-form textarea#comment {
	display: block;
	width: 100%;
	min-height: 58px;
	padding: 17px 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bb-body-text-color, #4d5c6d);
	background: var(--bb-content-background-color, #fff);
	border: 1px solid var(--bb-content-border-color, #e3e5e8);
	border-radius: 10px;
	box-shadow: none;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.learndash-wrapper .ld-focus-comments .comment-form textarea#comment::placeholder {
	color: var(--bb-alternate-text-color, #a3a5a7);
}

.learndash-wrapper .ld-focus-comments .comment-form textarea#comment:focus {
	border-color: var(--bb-primary-color, #f0803c);
	box-shadow: 0 0 0 3px rgba(var(--bb-primary-color-rgb, 240, 128, 60), .12);
	outline: 0;
}

/* Leftovers we don't need in the compact layout. */
.learndash-wrapper .ld-focus-comments .comment-form .comment-form-comment label,
.learndash-wrapper .ld-focus-comments .comment-form .required-field-message,
.learndash-wrapper .ld-focus-comments .comment-notes,
.learndash-wrapper .ld-focus-comments .logged-in-as,
.learndash-wrapper .ld-focus-comments .comment-form-cookies-consent {
	display: none;
}

.learndash-wrapper .ld-focus-comments .form-submit {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin: 0;
}

.learndash-wrapper .ld-focus-comments .form-submit .submit {
	min-width: 148px;
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bb-primary-button-text-regular, #fff);
	background: var(--bb-primary-button-background-regular, #f0803c);
	border: 1px solid var(--bb-primary-button-border-regular, transparent);
	border-radius: 100px;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.learndash-wrapper .ld-focus-comments .form-submit .submit:hover:not(:disabled) {
	background: var(--bb-primary-button-background-hover, #d96c2c);
	color: var(--bb-primary-button-text-hover, #fff);
}

.learndash-wrapper .ld-focus-comments .form-submit .submit:disabled {
	opacity: .45;
	cursor: default;
}

.learndash-wrapper .ld-focus-comments #cancel-comment-reply-link {
	margin-right: auto;
	font-size: 13px;
	color: var(--bb-alternate-text-color, #939597);
}

/* ---------------------------------------------------------------
 * Nesting
 *
 * Driven by the bbc-depth-N class the callback emits, not by .children —
 * LearnDash's own .children rules flatten the thread otherwise.
 * ------------------------------------------------------------- */

.learndash-wrapper .ld-focus-comments .children {
	list-style: none;
	margin-left: 0 !important;
	padding-left: 0 !important;
	border: 0;
}

.learndash-wrapper .ld-focus-comments .bbc-depth-2 { padding-left: 52px; }
.learndash-wrapper .ld-focus-comments .bbc-depth-3 { padding-left: 104px; }
.learndash-wrapper .ld-focus-comments .bbc-depth-4 { padding-left: 156px; }
.learndash-wrapper .ld-focus-comments .bbc-depth-5 { padding-left: 208px; }

/* ---------------------------------------------------------------
 * Comment
 * ------------------------------------------------------------- */

.learndash-wrapper .ld-focus-comments .bbc-comment {
	list-style: none;
	margin: 0 0 20px;
	background: none;
	border: 0;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* Avatar */
.learndash-wrapper .ld-focus-comments .bbc-comment__avatar {
	flex: 0 0 38px;
	width: 38px;
	padding-top: 2px;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__avatar img,
.learndash-wrapper .ld-focus-comments .bbc-comment__initials {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-body-text-color, #4d5c6d);
	background: var(--bb-content-alternate-background-color, #eef0f3);
}

.learndash-wrapper .ld-focus-comments .bbc-comment__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* The card — soft fill, no border. */
.learndash-wrapper .ld-focus-comments .bbc-comment__card {
	padding: 14px 20px 16px;
	background: var(--bb-content-alternate-background-color, #f6f7f8);
	border: 0;
	border-radius: 14px;
	box-shadow: none;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 9px;
	margin: 0 0 5px;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__author {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bb-headings-color, #122b46);
}

.learndash-wrapper .ld-focus-comments .bbc-comment__badge {
	align-self: center;
	padding: 2px 9px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--bb-primary-button-text-regular, #fff);
	background: var(--bb-primary-color, #f0803c);
	border-radius: 100px;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__time,
.learndash-wrapper .ld-focus-comments .bbc-comment__time:hover,
.learndash-wrapper .ld-focus-comments .bbc-comment__time:focus {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bb-alternate-text-color, #939597);
	text-decoration: none;
	border: 0;
}

/* Body */
.learndash-wrapper .ld-focus-comments .bbc-comment__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bb-body-text-color, #4d5c6d);
	overflow-wrap: break-word;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__text > *:first-child { margin-top: 0; }
.learndash-wrapper .ld-focus-comments .bbc-comment__text > *:last-child  { margin-bottom: 0; }

.learndash-wrapper .ld-focus-comments .bbc-comment__text p {
	margin: 0 0 10px;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__text ol,
.learndash-wrapper .ld-focus-comments .bbc-comment__text ul {
	margin: 0 0 10px 20px;
	padding: 0;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__text li {
	margin: 0 0 4px;
}

/* Reply row, outside the card */
.learndash-wrapper .ld-focus-comments .bbc-comment__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 7px 0 0;
	padding: 0 0 0 20px;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__actions a,
.learndash-wrapper .ld-focus-comments .bbc-comment__actions .comment-reply-link {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--bb-alternate-text-color, #939597);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
}

.learndash-wrapper .ld-focus-comments .bbc-comment__actions a:hover {
	color: var(--bb-primary-color, #f0803c);
}

.learndash-wrapper .ld-focus-comments .bbc-comment__pending {
	font-size: 12px;
	font-style: italic;
	color: var(--bb-alternate-text-color, #939597);
}

.learndash-wrapper .ld-focus-comments .bbc-comment--pending .bbc-comment__card {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--bb-content-border-color, #e3e5e8);
}

/* Inline reply form, once WP moves #respond into a comment. */
.learndash-wrapper .ld-focus-comments .bbc-comment #respond {
	margin: 14px 0 20px 50px !important;
}

.learndash-wrapper .ld-focus-comments .bbc-comment #respond #reply-title {
	font-size: 16px;
	margin-bottom: 10px;
}

/* ---------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------- */

@media screen and (max-width: 544px) {
	.learndash-wrapper .ld-focus-comments .bbc-depth-2 { padding-left: 22px; }
	.learndash-wrapper .ld-focus-comments .bbc-depth-3 { padding-left: 44px; }
	.learndash-wrapper .ld-focus-comments .bbc-depth-4,
	.learndash-wrapper .ld-focus-comments .bbc-depth-5 { padding-left: 60px; }

	.learndash-wrapper .ld-focus-comments .bbc-comment #respond {
		margin-left: 22px !important;
	}

	.learndash-wrapper .ld-focus-comments .bbc-comment__card {
		padding: 12px 15px 14px;
		border-radius: 12px;
	}

	.learndash-wrapper .ld-focus-comments .bbc-comment__actions {
		padding-left: 15px;
	}

	.learndash-wrapper .ld-focus-comments #reply-title {
		font-size: 21px;
	}

	.learndash-wrapper .ld-focus-comments .form-submit .submit {
		width: 100%;
	}
}