/*
 * Comenta Post Max — Frontend CSS
 * Sistema de comentários clean, responsivo e moderno.
 * Autor: Roi Máximo | roimaximo.top
 */

/* ── Variáveis ────────────────────────────────────────────────────────────── */
.cpm-wrapper {
	--cpm-bg:          #f8f9fb;
	--cpm-surface:     #ffffff;
	--cpm-border:      #e5e8ef;
	--cpm-accent:      #4f6ef7;
	--cpm-accent-soft: rgba(79,110,247,.08);
	--cpm-accent2:     #34d4a0;
	--cpm-text:        #1a1d2e;
	--cpm-muted:       #6b7280;
	--cpm-success:     #16a34a;
	--cpm-error:       #dc2626;
	--cpm-radius:      12px;
	--cpm-radius-sm:   8px;
	--cpm-shadow:      0 2px 16px rgba(0,0,0,.08);
	--cpm-font:        'Segoe UI', system-ui, -apple-system, sans-serif;

	font-family: var(--cpm-font);
	color: var(--cpm-text);
	max-width: 760px;
	margin: 40px auto;
	padding: 0 16px;
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

.cpm-comment-footer {
	display: flex;
	align-items: center;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--cpm-border);
}

/* Botão de like no comentário */
.cpm-comment-like-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 1px solid var(--cpm-border);
	border-radius: 99px;
	padding: 4px 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	color: var(--cpm-muted);
	transition: border-color .15s, color .15s, background .15s, transform .1s;
	line-height: 1;
}

.cpm-comment-like-btn:hover:not(:disabled) {
	border-color: #e05252;
	color: #e05252;
	background: rgba(224,82,82,.05);
	transform: scale(1.04);
}

.cpm-comment-like-btn:active:not(:disabled) {
	transform: scale(.97);
}

.cpm-comment-like-btn:disabled { cursor: not-allowed; opacity: .6; }

.cpm-comment-like-btn--active {
	border-color: #e05252;
	color: #e05252;
	background: rgba(224,82,82,.06);
}

.cpm-clk-icon {
	font-size: 14px;
	line-height: 1;
	transition: transform .2s;
}

.cpm-comment-like-btn:not(:disabled):hover .cpm-clk-icon {
	transform: scale(1.25);
}

@keyframes cpm-clk-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.5); }
	70%  { transform: scale(.9); }
	100% { transform: scale(1); }
}

.cpm-clk-icon--pop { animation: cpm-clk-pop .3s ease forwards; }

.cpm-clk-count {
	font-size: 12px;
	font-weight: 600;
	min-width: 14px;
	text-align: left;
}

/* ── Barra de engajamento: views + likes ──────────────────────────────────── */
.cpm-engage-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--cpm-surface);
	border: 1px solid var(--cpm-border);
	border-radius: var(--cpm-radius);
	padding: 14px 20px;
	margin-bottom: 28px;
	box-shadow: var(--cpm-shadow);
}

.cpm-engage-item {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cpm-engage-icon { font-size: 18px; line-height: 1; }

.cpm-engage-value {
	font-size: 18px;
	font-weight: 800;
	color: var(--cpm-text);
	line-height: 1;
}

.cpm-engage-label {
	font-size: 12px;
	color: var(--cpm-muted);
	font-weight: 500;
}

.cpm-engage-sep {
	width: 1px;
	height: 32px;
	background: var(--cpm-border);
	flex-shrink: 0;
}

/* Botão de like */
.cpm-like-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	padding: 6px 12px;
	border-radius: var(--cpm-radius-sm);
	cursor: pointer;
	transition: background .15s, transform .1s;
	font-family: inherit;
}

.cpm-like-btn:hover:not(:disabled) {
	background: rgba(239,68,68,.07);
	transform: scale(1.04);
}

.cpm-like-btn:active:not(:disabled) { transform: scale(.97); }

.cpm-like-btn:disabled { cursor: not-allowed; opacity: .6; }

.cpm-like-btn--active .cpm-engage-value { color: #e05252; }

.cpm-like-icon {
	font-size: 20px;
	line-height: 1;
	transition: transform .2s;
}

.cpm-like-btn:not(:disabled):hover .cpm-like-icon { transform: scale(1.2); }

/* Animação de like */
@keyframes cpm-like-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.5); }
	70%  { transform: scale(.9); }
	100% { transform: scale(1); }
}

.cpm-like-icon--pop { animation: cpm-like-pop .35s ease forwards; }

/* ── Cabeçalho da seção ───────────────────────────────────────────────────── */
.cpm-section-header {
	margin-bottom: 24px;
}

.cpm-section-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--cpm-text);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cpm-icon { font-size: 22px; line-height: 1; }

.cpm-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cpm-accent-soft);
	color: var(--cpm-accent);
	border: 1px solid var(--cpm-accent);
	font-size: 12px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 99px;
}

/* ── Lista de comentários ─────────────────────────────────────────────────── */
.cpm-comments-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.cpm-no-comments {
	text-align: center;
	padding: 40px 20px;
	background: var(--cpm-surface);
	border: 2px dashed var(--cpm-border);
	border-radius: var(--cpm-radius);
	color: var(--cpm-muted);
}

.cpm-no-comments-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.cpm-no-comments p    { margin: 0; font-size: 14px; }

.cpm-comment-item {
	display: flex;
	gap: 14px;
	background: var(--cpm-surface);
	border: 1px solid var(--cpm-border);
	border-radius: var(--cpm-radius);
	padding: 18px;
	box-shadow: var(--cpm-shadow);
	transition: border-color .2s;
}

.cpm-comment-item:hover { border-color: var(--cpm-accent); }

.cpm-comment-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--cpm-accent-soft);
	border: 2px solid var(--cpm-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 800;
	color: var(--cpm-accent);
	flex-shrink: 0;
}

.cpm-comment-body { flex: 1; min-width: 0; }

.cpm-comment-meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.cpm-comment-author {
	font-size: 14px;
	font-weight: 700;
	color: var(--cpm-text);
}

.cpm-comment-date {
	font-size: 11px;
	color: var(--cpm-muted);
}

.cpm-comment-content {
	font-size: 14px;
	color: var(--cpm-text);
	line-height: 1.65;
	word-break: break-word;
}

/* ── Boxes de formulário ──────────────────────────────────────────────────── */
.cpm-register-box,
.cpm-comment-box {
	background: var(--cpm-surface);
	border: 1px solid var(--cpm-border);
	border-radius: var(--cpm-radius);
	padding: 28px;
	box-shadow: var(--cpm-shadow);
}

.cpm-form-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--cpm-text);
}

.cpm-form-subtitle {
	font-size: 13px;
	color: var(--cpm-muted);
	margin: 0 0 22px;
}

.cpm-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
	position: relative;
}

.cpm-form-group label {
	font-size: 12px;
	font-weight: 600;
	color: var(--cpm-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.cpm-input,
.cpm-textarea {
	width: 100%;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--cpm-text);
	background: var(--cpm-bg);
	border: 1.5px solid var(--cpm-border);
	border-radius: var(--cpm-radius-sm);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
}

.cpm-input:focus,
.cpm-textarea:focus {
	border-color: var(--cpm-accent);
	box-shadow: 0 0 0 3px var(--cpm-accent-soft);
}

.cpm-textarea { resize: vertical; min-height: 100px; }

.cpm-char-count {
	position: absolute;
	bottom: -20px;
	right: 0;
	font-size: 11px;
	color: var(--cpm-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.cpm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--cpm-radius-sm);
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: opacity .2s, transform .1s, box-shadow .2s;
}

.cpm-btn:active { transform: scale(.98); }

.cpm-btn-primary {
	background: var(--cpm-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(79,110,247,.35);
	width: 100%;
	margin-top: 8px;
}

.cpm-btn-primary:hover { opacity: .9; box-shadow: 0 6px 20px rgba(79,110,247,.45); }

.cpm-btn-primary:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* ── Greeting ─────────────────────────────────────────────────────────────── */
.cpm-greeting {
	background: var(--cpm-accent-soft);
	border: 1px solid var(--cpm-accent);
	border-radius: var(--cpm-radius-sm);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--cpm-accent);
	font-weight: 600;
	margin-bottom: 18px;
}

/* ── Mensagens ────────────────────────────────────────────────────────────── */
.cpm-msg {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	min-height: 18px;
	border-radius: var(--cpm-radius-sm);
	padding: 0;
	transition: padding .2s;
}

.cpm-msg:not(:empty) { padding: 10px 14px; }

.cpm-msg--success { background: rgba(22,163,74,.08); color: var(--cpm-success); }
.cpm-msg--error   { background: rgba(220,38,38,.08); color: var(--cpm-error); }

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.cpm-loading {
	display: flex;
	justify-content: center;
	padding: 24px 0;
}

.cpm-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--cpm-border);
	border-top-color: var(--cpm-accent);
	border-radius: 50%;
	animation: cpm-spin .7s linear infinite;
}

@keyframes cpm-spin {
	to { transform: rotate(360deg); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.cpm-wrapper {
		padding: 0 10px;
		margin: 24px auto;
	}

	.cpm-engage-bar {
		gap: 12px;
		padding: 12px 14px;
	}

	.cpm-engage-value { font-size: 15px; }

	.cpm-comment-item {
		flex-direction: column;
		gap: 10px;
		padding: 14px;
	}

	.cpm-register-box,
	.cpm-comment-box {
		padding: 20px 16px;
	}

	.cpm-section-title { font-size: 17px; }
}

@media (max-width: 380px) {
	.cpm-comment-meta { flex-direction: column; gap: 2px; }
}