/**
 * Comments Display & Form Styles
 *
 * Glassmorphism styling for comment cards, compact mode,
 * comment form, and recent comments widget.
 *
 * Loaded conditionally on singular pages only.
 *
 * @package Tamoza
 * @since 1.1.0
 */

/* ============================================
   COMMENTS TOOLBAR — Reply button + Sort dropdown
   ============================================ */
.tamoza-comments-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.tamoza-reply-scroll-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(0, 229, 255, 0.15));
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: 10px;
	color: #00e5ff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s ease;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.tamoza-reply-scroll-btn:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(0, 229, 255, 0.25));
	border-color: rgba(0, 229, 255, 0.4);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0, 229, 255, 0.15);
}
.tamoza-reply-scroll-btn svg {
	flex-shrink: 0;
}
.tamoza-sort-dropdown {
	position: relative;
	display: inline-block;
}
.tamoza-sort-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--glass-bg, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s ease;
	backdrop-filter: blur(var(--glass-blur, 12px));
	-webkit-backdrop-filter: blur(var(--glass-blur, 12px));
	outline: none;
}
.tamoza-sort-trigger:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}
.tamoza-sort-trigger:focus-visible {
	border-color: #00e5ff;
	box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2);
}
.tamoza-sort-trigger .tamoza-sort-icon {
	opacity: 0.6;
	flex-shrink: 0;
}
.tamoza-sort-trigger .tamoza-sort-chevron {
	opacity: 0.4;
	transition: transform 0.25s ease;
	flex-shrink: 0;
}
.tamoza-sort-dropdown.open .tamoza-sort-chevron {
	transform: rotate(180deg);
}
.tamoza-sort-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 180px;
	padding: 6px;
	background: rgba(30, 30, 50, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.96);
	transition: all 0.2s ease;
	z-index: 100;
}
.tamoza-sort-dropdown.open .tamoza-sort-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}
.tamoza-sort-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	outline: none;
}
.tamoza-sort-option:hover {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.9);
}
.tamoza-sort-option.selected {
	color: #00e5ff;
	background: rgba(0, 229, 255, 0.06);
}
.tamoza-sort-option .tamoza-sort-check {
	margin-left: auto;
	color: #00e5ff;
	flex-shrink: 0;
}

/* ============================================
   COMMENT CARDS — Improved spacing & reply indicator
   ============================================ */

/* Comment card: ensure proper padding on all depths */
.tamoza-comment-glass,
#comments .comment,
.comment.depth-1,
.comment.depth-2,
.comment.depth-3,
.children .comment {
	padding: 20px !important;
	margin-bottom: 16px !important;
	box-sizing: border-box !important;
}
/* Comment body: add left padding to push content right */
.tamoza-comment-body {
	padding-left: 16px !important;
}
/* Content wrapper: ensure text doesn't touch edges */
.tamoza-comment-content-wrapper {
	flex: 1 !important;
	min-width: 0 !important;
	padding: 0 4px !important;
}
/* Comment header: more gap between author and date */
.tamoza-comment-header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
	flex-wrap: wrap !important;
}
.tamoza-comment-author {
	font-weight: 600 !important;
	color: #ffffff !important;
	font-size: 14px !important;
}
.tamoza-comment-time {
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.35) !important;
}
/* Comment text: more top margin to separate from header */
.tamoza-comment-text {
	margin-top: 12px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
}
.tamoza-comment-text p {
	margin: 0 0 8px 0 !important;
}
.tamoza-comment-text p:last-child {
	margin-bottom: 0 !important;
}
/* Reply/Edit buttons: more top margin */
.tamoza-comment-actions {
	margin-top: 16px !important;
	display: flex !important;
	gap: 16px !important;
}
.tamoza-comment-actions a,
.comment-reply-link,
.comment-edit-link {
	color: #22D3EE !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	padding: 4px 12px !important;
	border-radius: 9999px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	transition: all 0.2s ease !important;
}
.tamoza-comment-actions a:hover,
.comment-reply-link:hover,
.comment-edit-link:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}
/* Threaded replies: left border + indent + top gap */
.comment .children,
.tamoza-comment-glass .children {
	margin-top: 24px !important;
	margin-left: 32px !important;
	padding-left: 0 !important;
	list-style: none !important;
}
.comment .children li,
.tamoza-comment-glass .children li {
	position: relative !important;
	padding-left: 0 !important;
}
.comment .children li::before,
.tamoza-comment-glass .children li::before {
	content: '' !important;
	position: absolute !important;
	left: -16px !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 2px !important;
	background: linear-gradient(180deg, #6366F1, #22D3EE) !important;
	border-radius: 2px !important;
	opacity: 0.4 !important;
}
/* Reply comment card slightly different */
.children .tamoza-comment-glass,
.children .comment {
	background: rgba(255, 255, 255, 0.03) !important;
	border-color: rgba(99, 102, 241, 0.15) !important;
}

/* ============================================
   COMPACT COMMENT MODE
   ============================================ */

.tamoza-comment-compact.tamoza-comment-glass {
	padding: 12px !important;
	margin-bottom: 8px !important;
}
.tamoza-comment-compact .tamoza-comment-body {
	display: flex !important;
	gap: 10px !important;
	align-items: flex-start !important;
}
.tamoza-comment-compact .tamoza-comment-avatar img {
	width: 32px !important;
	height: 32px !important;
}
.tamoza-comment-compact .tamoza-comment-header {
	gap: 8px !important;
	margin-bottom: 6px !important;
}
.tamoza-comment-compact .tamoza-comment-author {
	font-size: 13px !important;
}
.tamoza-comment-compact .tamoza-comment-time {
	font-size: 11px !important;
}
.tamoza-comment-compact .tamoza-comment-text {
	margin-top: 6px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}
.tamoza-comment-compact .tamoza-comment-actions {
	margin-top: 8px !important;
	gap: 10px !important;
}
.tamoza-comment-compact .tamoza-comment-actions a,
.tamoza-comment-compact .comment-reply-link,
.tamoza-comment-compact .comment-edit-link {
	font-size: 11px !important;
	padding: 3px 8px !important;
}
.tamoza-comment-compact .children {
	margin-top: 12px !important;
	margin-left: 20px !important;
}
/* Load More Comments button */
.tamoza-load-more-comments {
	padding: 10px 24px !important;
	font-size: 13px !important;
}

/* ============================================
   COMMENT FORM — Glassmorphism styling
   ============================================ */

/* Form wrapper */
.tamoza-comment-form {
	padding: 32px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 16px !important;
	margin-top: 24px !important;
}
/* Reply title */
.tamoza-comment-reply-title {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	margin-bottom: 16px !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.tamoza-comment-reply-title small {
	font-size: 13px !important;
	font-weight: 400 !important;
}
.tamoza-comment-reply-title small a {
	color: #22D3EE !important;
	text-decoration: none !important;
}
/* Notes */
.tamoza-comment-notes {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	margin-bottom: 20px !important;
}
/* Textarea */
.tamoza-comment-form-textarea textarea {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
	color: rgba(255, 255, 255, 0.87) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	resize: vertical !important;
	min-height: 120px !important;
	outline: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-sizing: border-box !important;
}
.tamoza-comment-form-textarea textarea::placeholder {
	color: rgba(255, 255, 255, 0.3) !important;
}
.tamoza-comment-form-textarea textarea:focus {
	border-color: #6366F1 !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.1) !important;
	background: rgba(255, 255, 255, 0.07) !important;
}
/* Fields row (author, email) */
.tamoza-comment-form-fields {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 12px !important;
	margin-top: 16px !important;
}
.tamoza-comment-form-field input {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	color: rgba(255, 255, 255, 0.87) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 14px !important;
	outline: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-sizing: border-box !important;
}
.tamoza-comment-form-field input::placeholder {
	color: rgba(255, 255, 255, 0.3) !important;
}
.tamoza-comment-form-field input:focus {
	border-color: #6366F1 !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.1) !important;
	background: rgba(255, 255, 255, 0.07) !important;
}
/* Cookies consent */
.comment-form-cookies-consent {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 16px !important;
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.5) !important;
}
.comment-form-cookies-consent input[type="checkbox"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	cursor: pointer !important;
	position: relative !important;
	transition: all 0.2s ease !important;
}
.comment-form-cookies-consent input[type="checkbox"]:checked {
	background: linear-gradient(135deg, #6366F1, #22D3EE) !important;
	border-color: #6366F1 !important;
}
.comment-form-cookies-consent input[type="checkbox"]:checked::after {
	content: '✓' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}
.comment-form-cookies-consent input[type="checkbox"]:hover {
	border-color: rgba(255, 255, 255, 0.4) !important;
}
.comment-form-cookies-consent label {
	cursor: pointer !important;
	line-height: 1.4 !important;
}
/* Submit button */
.tamoza-comment-form .form-submit {
	margin-top: 20px !important;
	margin-bottom: 0 !important;
	display: flex !important;
	justify-content: flex-end !important;
}
.tamoza-comment-form .tamoza-btn-gradient {
	padding: 12px 28px !important;
	font-size: 14px !important;
	border-radius: 9999px !important;
}
/* Responsive: stack fields */
@media (max-width: 768px) {
	.tamoza-comment-form-fields {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================
   RECENT COMMENTS WIDGET
   ============================================ */

.tamoza-recent-comments {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.tamoza-recent-comments li {
	padding: 10px 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.tamoza-recent-comments li:last-child {
	border-bottom: none !important;
}
.tamoza-recent-comments .comment-header {
	display: flex !important;
	align-items: center !important;
	font-size: 13px !important;
	margin-bottom: 2px !important;
}
.tamoza-recent-comments .comment-author {
	color: #22D3EE !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}
.tamoza-recent-comments .comment-on {
	color: rgba(255, 255, 255, 0.35) !important;
	margin: 0 4px !important;
	font-size: 12px !important;
}
.tamoza-recent-comments .comment-post {
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 150px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}
.tamoza-recent-comments .comment-post:hover {
	color: #ffffff !important;
}
.tamoza-recent-comments .comment-excerpt {
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	line-height: 1.5 !important;
	margin-top: 4px !important;
	font-style: italic !important;
}
.tamoza-recent-comments .comment-excerpt a {
	color: rgba(255, 255, 255, 0.45) !important;
	text-decoration: none !important;
}
.tamoza-recent-comments .comment-excerpt a:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}