/**
 * Discover Metric — Meta Box & Analysis Panel Styles
 *
 * Professional design matching the Analyze URL page on discovermetric.com.
 * Includes preloader, animated gauge, criteria table, Discover Probability,
 * AEO Score, E-E-A-T badges, fix UI, and credits popup.
 *
 * @package Discover_Metric
 * @since   1.0.0
 */

/* ── Animations ───────────────────────────────────── */
@keyframes discm-spin {
	to { transform: rotate(360deg); }
}

@keyframes discm-dots {
	0%   { content: ''; }
	25%  { content: '.'; }
	50%  { content: '..'; }
	75%  { content: '...'; }
	100% { content: ''; }
}

@keyframes discm-fadeInUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes discm-scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes discm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

@keyframes discm-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* ── Container ─────────────────────────────────────── */
.discm-analysis-container {
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	color: #1f2937;
	line-height: 1.5;
}

/* ── Header with logo ──────────────────────────────── */
.discm-panel-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 50%, #46308c 100%);
	border-radius: 8px;
	margin: -6px -12px 16px;
}

.discm-panel-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	flex-shrink: 0;
}

.discm-panel-title {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.2;
}

.discm-panel-subtitle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
	font-weight: 400;
	margin-top: 1px;
}

/* ── Check Button (prominent, full-width) ──────────── */
.discm-actions {
	padding: 0 0 4px;
}

.discm-btn-check {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 100%);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 4px 14px rgba(99, 70, 192, 0.35);
	letter-spacing: 0.3px;
	line-height: 1.4;
}

.discm-btn-check:hover {
	background: linear-gradient(135deg, #5438a6 0%, #46308c 100%);
	box-shadow: 0 6px 20px rgba(99, 70, 192, 0.45);
	transform: translateY(-1px);
}

.discm-btn-check:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(99, 70, 192, 0.3);
}

.discm-btn-check:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 70, 192, 0.3), 0 4px 14px rgba(99, 70, 192, 0.35);
}

.discm-btn-check .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Recheck variant */
.discm-btn-recheck {
	background: #fff;
	color: #6346c0;
	border: 2px solid #6346c0;
	box-shadow: 0 2px 8px rgba(99, 70, 192, 0.12);
}

.discm-btn-recheck:hover {
	background: #f3f1fa;
	color: #5438a6;
	border-color: #5438a6;
	box-shadow: 0 4px 12px rgba(99, 70, 192, 0.2);
}

/* ── Loading Overlay (Preloader) ───────────────────── */
.discm-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.96);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	z-index: 100;
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

.discm-preloader {
	position: relative;
	width: 64px;
	height: 64px;
}

.discm-preloader-ring {
	width: 64px;
	height: 64px;
	border: 4px solid #e5e7eb;
	border-top-color: #6346c0;
	border-right-color: #6346c0;
	border-radius: 50%;
	animation: discm-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.discm-preloader-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	opacity: 0.8;
	border-radius: 4px;
}

.discm-loading-text {
	font-size: 13px;
	color: #6b7280;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.discm-loading-dots::after {
	content: '';
	animation: discm-dots 1.5s steps(4, end) infinite;
}

/* ── Score Section ─────────────────────────────────── */
.discm-score-section {
	text-align: center;
	padding: 16px 0 12px;
	animation: discm-fadeInUp 0.6s ease-out;
}

.discm-gauge-wrapper {
	position: relative;
	display: inline-block;
	width: 150px;
	height: 150px;
}

.discm-gauge {
	transform: rotate(-90deg);
}

.discm-gauge-bg {
	fill: none;
	stroke: #e0dfea;
	stroke-width: 8;
}

.discm-gauge-fill {
	fill: none;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.discm-gauge-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.discm-score-value {
	display: block;
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	color: #1f2937;
}

.discm-score-max {
	display: block;
	font-size: 12px;
	color: #9ca3af;
	font-weight: 500;
	margin-top: 2px;
}

/* Score color classes */
.discm-gauge-fill.discm-score-excellent { stroke: #00c781; }
.discm-gauge-fill.discm-score-good { stroke: #00c781; }
.discm-gauge-fill.discm-score-warning { stroke: #eea730; }
.discm-gauge-fill.discm-score-poor { stroke: #f92333; }

/* Stroke classes (used by JS) */
.discm-gauge-fill.discm-stroke-excellent,
.discm-prob-fill.discm-stroke-excellent { stroke: #00c781; }
.discm-gauge-fill.discm-stroke-good,
.discm-prob-fill.discm-stroke-good { stroke: #00c781; }
.discm-gauge-fill.discm-stroke-warning,
.discm-prob-fill.discm-stroke-warning { stroke: #eea730; }
.discm-gauge-fill.discm-stroke-poor,
.discm-prob-fill.discm-stroke-poor { stroke: #f92333; }

.discm-score-value.discm-color-excellent { color: #00864f; }
.discm-score-value.discm-color-good { color: #00864f; }
.discm-score-value.discm-color-warning { color: #b66d00; }
.discm-score-value.discm-color-poor { color: #d30824; }

/* Text color classes (used by JS) */
.discm-text-excellent { color: #00864f; }
.discm-text-good { color: #00864f; }
.discm-text-warning { color: #b66d00; }
.discm-text-poor { color: #d30824; }

/* Verdict badge */
.discm-verdict {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 10px;
	animation: discm-scaleIn 0.4s ease-out 0.3s both;
}

.discm-verdict::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.discm-verdict-excellent {
	background: #ecfdf5;
	color: #00864f;
}
.discm-verdict-excellent::before { background: #00c781; }

.discm-verdict-good {
	background: #ecfdf5;
	color: #00864f;
}
.discm-verdict-good::before { background: #00c781; }

.discm-verdict-warning {
	background: #fffbeb;
	color: #b66d00;
}
.discm-verdict-warning::before { background: #eea730; }

.discm-verdict-poor {
	background: #fef2f2;
	color: #d30824;
}
.discm-verdict-poor::before { background: #f92333; }

/* Credits info */
.discm-credits-info {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 8px;
}

/* ── Criteria Table ────────────────────────────────── */
.discm-criteria-section {
	margin-top: 4px;
	animation: discm-fadeInUp 0.6s ease-out 0.2s both;
}

.discm-criteria-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0 8px;
	border-bottom: 2px solid #f3f4f6;
	margin-bottom: 0;
}

.discm-criteria-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #6b7280;
}

.discm-criteria-count {
	font-size: 11px;
	color: #9ca3af;
	font-weight: 500;
}

.discm-criteria-count .discm-count-pass { color: #00864f; font-weight: 700; }
.discm-criteria-count .discm-count-warn { color: #f59e0b; font-weight: 700; }
.discm-criteria-count .discm-count-fail { color: #d30824; font-weight: 700; }
.discm-count-separator { color: #d1d5db; margin: 0 3px; }

/* Criteria list */
.discm-criteria-list {
	max-height: 500px;
	overflow-y: auto;
}

/* Table header row */
.discm-criteria-table-header {
	display: grid;
	grid-template-columns: 24px 1fr 52px;
	gap: 6px;
	padding: 8px 0 6px;
	border-bottom: 1px solid #e5e7eb;
}

.discm-th {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #9ca3af;
}

/* Criterion row */
.discm-criterion {
	display: grid;
	grid-template-columns: 24px 1fr 52px;
	gap: 6px;
	align-items: start;
	padding: 10px 0;
	border-bottom: 1px solid #f5f5f5;
	transition: all 0.2s ease;
}

.discm-criterion:last-child {
	border-bottom: none;
}

.discm-criterion:hover {
	background: #fafbfc;
	margin: 0 -8px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 6px;
}

/* Pass/Fail/Warning row backgrounds */
.discm-criterion-passed {
	border-left: 3px solid #00c781;
	padding-left: 8px;
	margin-left: -4px;
}

.discm-criterion-warning {
	border-left: 3px solid #f59e0b;
	padding-left: 8px;
	margin-left: -4px;
}

.discm-criterion-failed {
	border-left: 3px solid #f92333;
	padding-left: 8px;
	margin-left: -4px;
}

/* Status icon */
.discm-criterion-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	margin-top: 1px;
	flex-shrink: 0;
}

.discm-criterion-icon.discm-pass {
	background: #ecfdf5;
	color: #00c781;
}

.discm-criterion-icon.discm-warn {
	background: #fffbeb;
	color: #f59e0b;
}

.discm-criterion-icon.discm-fail {
	background: #fef2f2;
	color: #f92333;
}

/* Criterion body */
.discm-criterion-body {
	min-width: 0;
}

.discm-criterion-name {
	font-size: 12px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.35;
	word-break: break-word;
}

.discm-criterion-name.discm-name-pass {
	color: #00864f;
}

.discm-criterion-name.discm-name-warn {
	color: #d97706;
}

.discm-criterion-name.discm-name-fail {
	color: #d30824;
}

.discm-criterion-ok {
	color: #00c781;
	font-size: 14px;
	font-weight: 700;
}

.discm-criterion-finding {
	font-size: 11px;
	color: #6b7280;
	margin-top: 2px;
	line-height: 1.4;
}

.discm-criterion-suggestion {
	font-size: 11px;
	margin-top: 3px;
	line-height: 1.4;
	font-style: italic;
}

.discm-criterion-suggestion.discm-suggestion-pass {
	color: #10b981;
	font-style: normal;
	font-weight: 600;
}

.discm-criterion-suggestion.discm-suggestion-warn {
	color: #d97706;
}

.discm-criterion-suggestion.discm-suggestion-fail {
	color: #b45309;
}

/* Fix button */
.discm-fix-btn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 100%);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-top: 1px;
}

.discm-fix-btn:hover {
	background: linear-gradient(135deg, #5438a6 0%, #46308c 100%);
	box-shadow: 0 2px 6px rgba(99, 70, 192, 0.3);
	transform: translateY(-1px);
}

.discm-fix-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* ── Fix Results Section ───────────────────────────── */
.discm-fix-section {
	margin-top: 4px;
	animation: discm-fadeInUp 0.4s ease-out;
}

.discm-fix-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0 8px;
	border-bottom: 2px solid #f3f4f6;
}

.discm-fix-header-icon {
	font-size: 14px;
}

.discm-fix-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #6b7280;
}

.discm-fix-criterion-name {
	font-size: 12px;
	color: #6346c0;
	font-weight: 600;
	margin: 8px 0 6px;
}

.discm-fix-results {
	padding: 0;
}

.discm-fix-option {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 10px;
	transition: all 0.25s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	animation: discm-fadeInUp 0.4s ease-out;
}

.discm-fix-option:hover {
	border-color: #6346c0;
	box-shadow: 0 4px 12px rgba(99, 70, 192, 0.12);
	transform: translateY(-1px);
}

.discm-fix-option-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.discm-fix-option-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 100%);
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.discm-fix-option-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
}

.discm-fix-option-text {
	font-size: 14px;
	color: #111827;
	line-height: 1.6;
	margin-bottom: 10px;
	font-weight: 600;
	padding: 10px 14px;
	background: #f3f1fa;
	border-radius: 8px;
	border-left: 3px solid #6346c0;
}

.discm-fix-option-explanation {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 12px;
	background: #fefce8;
	border-radius: 8px;
	margin-bottom: 12px;
	border: 1px solid #fde68a;
}

.discm-fix-explanation-icon {
	font-size: 14px;
	line-height: 1.5;
	flex-shrink: 0;
}

.discm-fix-explanation-text {
	font-size: 12px;
	color: #92400e;
	line-height: 1.5;
	font-style: italic;
}

.discm-fix-option-actions {
	display: flex;
	gap: 8px;
}

.discm-btn-copy,
.discm-btn-apply {
	font-size: 12px;
	padding: 7px 16px;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #374151;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	line-height: 1;
}

.discm-btn-copy:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}

.discm-btn-apply {
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 100%);
	border-color: transparent;
	color: #fff;
}

.discm-btn-apply:hover {
	background: linear-gradient(135deg, #5438a6 0%, #46308c 100%);
	box-shadow: 0 3px 8px rgba(99, 70, 192, 0.3);
}

.discm-btn-applied {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	border-color: transparent;
	color: #fff;
	cursor: default;
}

/* ── Discover Probability Section ─────────────────── */
.discm-probability-section {
	margin-top: 16px;
	padding: 14px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	animation: discm-fadeInUp 0.6s ease-out 0.4s both;
}

.discm-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.discm-section-icon {
	font-size: 16px;
	line-height: 1;
}

.discm-section-title {
	font-size: 13px;
	font-weight: 700;
	color: #1f2937;
}

.discm-probability-bar-wrapper {
	background: #e5e7eb;
	border-radius: 8px;
	height: 10px;
	overflow: hidden;
	margin-bottom: 8px;
}

.discm-probability-bar {
	height: 100%;
	border-radius: 8px;
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.discm-probability-bar.discm-prob-high { background: linear-gradient(90deg, #10b981, #059669); }
.discm-probability-bar.discm-prob-medium { background: linear-gradient(90deg, #f59e0b, #d97706); }
.discm-probability-bar.discm-prob-low { background: linear-gradient(90deg, #ef4444, #dc2626); }

.discm-probability-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.discm-probability-percentage {
	font-size: 20px;
	font-weight: 800;
}

.discm-probability-percentage.discm-prob-high { color: #059669; }
.discm-probability-percentage.discm-prob-medium { color: #d97706; }
.discm-probability-percentage.discm-prob-low { color: #dc2626; }

.discm-probability-confidence {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 12px;
}

.discm-confidence-high {
	background: #ecfdf5;
	color: #059669;
}

.discm-confidence-medium {
	background: #fffbeb;
	color: #d97706;
}

.discm-confidence-low {
	background: #fef2f2;
	color: #dc2626;
}

.discm-probability-explanation {
	font-size: 11px;
	color: #6b7280;
	line-height: 1.5;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #e5e7eb;
}

/* ── AEO Score Section ────────────────────────────── */
.discm-aeo-section {
	margin-top: 12px;
	padding: 14px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	animation: discm-fadeInUp 0.6s ease-out 0.5s both;
}

.discm-aeo-score-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.discm-aeo-score-value {
	font-size: 22px;
	font-weight: 800;
}

.discm-aeo-checks {
	font-size: 11px;
	color: #6b7280;
	font-weight: 500;
}

.discm-aeo-bar-wrapper {
	background: #e5e7eb;
	border-radius: 8px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}

.discm-aeo-bar {
	height: 100%;
	border-radius: 8px;
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── E-E-A-T Section ──────────────────────────────── */
.discm-eeat-section {
	margin-top: 12px;
	padding: 14px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	animation: discm-fadeInUp 0.6s ease-out 0.6s both;
}

.discm-eeat-badge-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.discm-eeat-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 700;
}

.discm-eeat-badge.discm-eeat-excellent {
	background: #ecfdf5;
	color: #00864f;
}

.discm-eeat-badge.discm-eeat-good {
	background: #eff6ff;
	color: #2563eb;
}

.discm-eeat-badge.discm-eeat-average {
	background: #fffbeb;
	color: #d97706;
}

.discm-eeat-badge.discm-eeat-poor {
	background: #fef2f2;
	color: #d30824;
}

.discm-eeat-score-text {
	font-size: 11px;
	color: #6b7280;
}

.discm-eeat-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 8px;
}

.discm-eeat-detail-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.discm-eeat-detail-label {
	font-size: 10px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.discm-eeat-detail-score {
	font-size: 11px;
	font-weight: 700;
	margin-left: auto;
}

/* ── Show Details Toggle ──────────────────────────── */
.discm-show-details-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: #6346c0;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
	margin-top: 6px;
	transition: color 0.2s ease;
}

.discm-show-details-btn:hover {
	color: #46308c;
}

.discm-show-details-btn .discm-chevron {
	transition: transform 0.3s ease;
	font-size: 14px;
}

.discm-show-details-btn.discm-expanded .discm-chevron {
	transform: rotate(180deg);
}

.discm-details-content {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.4s ease, opacity 0.3s ease;
}

.discm-details-content.discm-visible {
	max-height: 600px;
	opacity: 1;
}

/* ── Credits Popup (Fix with AI confirmation) ─────── */
.discm-credits-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	animation: discm-fadeInUp 0.2s ease-out;
}

.discm-credits-popup {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	max-width: 360px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	animation: discm-scaleIn 0.3s ease-out;
}

.discm-credits-popup-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e5e7eb;
}

.discm-credits-popup-icon {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
}

.discm-credits-popup-header-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.discm-credits-popup-title {
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
}

.discm-credits-popup-subtitle {
	font-size: 12px;
	color: #6b7280;
	margin: 0;
}

.discm-credits-popup-body {
	margin-bottom: 16px;
}

.discm-credits-cost-section {
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px;
}

.discm-credits-cost-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
}

.discm-credits-cost-icon {
	color: #f59e0b;
	font-size: 14px;
}

.discm-credits-cost-label {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
}

.discm-credits-cost-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
}

.discm-credits-cost-text {
	font-size: 13px;
	color: #6b7280;
}

.discm-credits-cost-value {
	font-size: 17px;
	font-weight: 700;
	color: #f59e0b;
}

.discm-credits-refund-note {
	font-size: 11px;
	color: #9ca3af;
	margin: 8px 0 0 0;
	line-height: 1.4;
}

.discm-credits-remaining-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
}

.discm-credits-remaining-label {
	font-size: 12px;
	color: #6b7280;
}

.discm-credits-remaining-value {
	font-size: 14px;
	font-weight: 700;
	color: #00864f;
}

.discm-credits-popup-actions {
	display: flex;
	gap: 10px;
}

.discm-credits-popup-cancel {
	flex: 1;
	padding: 10px;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all 0.2s ease;
}

.discm-credits-popup-cancel:hover {
	background: #e5e7eb;
}

.discm-credits-popup-confirm {
	flex: 1;
	padding: 10px;
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 100%);
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.discm-credits-popup-confirm:hover {
	background: linear-gradient(135deg, #5438a6 0%, #46308c 100%);
	box-shadow: 0 4px 12px rgba(99, 70, 192, 0.3);
}

/* ── Upgrade Banner ────────────────────────────────── */
.discm-upgrade-banner {
	background: linear-gradient(135deg, #6346c0 0%, #5438a6 50%, #46308c 100%);
	color: #fff;
	padding: 16px;
	border-radius: 10px;
	text-align: center;
	margin: 8px 0;
}

.discm-upgrade-banner p {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.discm-upgrade-banner .discm-btn-upgrade {
	display: inline-block;
	background: #fff;
	color: #6346c0;
	padding: 6px 20px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.discm-upgrade-banner .discm-btn-upgrade:hover {
	background: #f3f1fa;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Upgrade Popup (0 credits) ─────────────────────── */
.discm-upgrade-popup {
	max-width: 420px;
}

.discm-upgrade-popup-header {
	background: #ffffff;
}

.discm-upgrade-popup-icon-large {
	font-size: 40px;
	text-align: center;
	margin: 0 0 12px;
	line-height: 1;
}

.discm-upgrade-popup-message {
	font-size: 13px;
	color: #4b5563;
	text-align: center;
	line-height: 1.6;
	margin: 0 0 16px;
}

.discm-upgrade-popup-features {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 12px 16px;
	margin: 0 0 4px;
}

.discm-upgrade-feature {
	padding: 6px 0;
	font-size: 13px;
	color: #374151;
	line-height: 1.4;
}

.discm-upgrade-feature-icon {
	color: #00c781;
	font-weight: 700;
	margin-right: 8px;
}

.discm-btn-upgrade-popup {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 10px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 1;
	text-align: center;
}

.discm-btn-upgrade-popup:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
	color: #fff;
	text-decoration: none;
}

/* ── Notices ───────────────────────────────────────── */
.discm-notice {
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.5;
	margin: 8px 0;
}

.discm-notice-warning {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}

.discm-notice-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.discm-notice-success {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.discm-notice .button {
	margin-top: 8px;
}

/* ── Scrollbar ─────────────────────────────────────── */
.discm-criteria-list::-webkit-scrollbar {
	width: 4px;
}

.discm-criteria-list::-webkit-scrollbar-track {
	background: transparent;
}

.discm-criteria-list::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 4px;
}

.discm-criteria-list::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* ── Criteria Table Rows (generated by JS) ────────── */
.discm-criterion-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid #f3f4f6;
	align-items: start;
	animation: discm-fadeInUp 0.3s ease-out;
}

.discm-criterion-row:last-child {
	border-bottom: none;
}

.discm-criterion-row:hover {
	background: #fafbfc;
	margin: 0 -8px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 6px;
}

.discm-row-pass {
	border-left: 3px solid #00c781;
	padding-left: 8px;
}

.discm-row-fail {
	border-left: 3px solid #f92333;
	padding-left: 8px;
}

.discm-col-checkpoint {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.discm-col-finding {
	font-size: 11px;
	color: #6b7280;
	line-height: 1.4;
	word-break: break-word;
}

.discm-col-suggestion {
	font-size: 11px;
	line-height: 1.4;
	word-break: break-word;
}

.discm-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
	line-height: 1;
}

.discm-status-pass {
	background: #ecfdf5;
	color: #00c781;
}

.discm-status-fail {
	background: #fef2f2;
	color: #f92333;
}

.discm-suggestion-pass {
	color: #00864f;
	font-weight: 600;
}

.discm-suggestion-fail {
	color: #b45309;
	font-style: italic;
}

/* Criteria header row */
.discm-criteria-header-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #9ca3af;
}

/* ── Confidence Badges ────────────────────────────── */
.discm-confidence-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
}

.discm-conf-high {
	background: #ecfdf5;
	color: #00864f;
}

.discm-conf-medium {
	background: #fffbeb;
	color: #d97706;
}

.discm-conf-low {
	background: #fef2f2;
	color: #dc2626;
}

/* ── E-E-A-T Overall Badge ────────────────────────── */
.discm-eeat-overall {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-radius: 10px;
	margin-bottom: 8px;
}

.discm-eeat-overall-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: capitalize;
}

.discm-eeat-overall-score {
	font-size: 12px;
	font-weight: 600;
}

.discm-eeat-overall.discm-eeat-excellent,
.discm-eeat-overall.discm-eeat-strong {
	background: #ecfdf5;
	color: #00864f;
}

.discm-eeat-overall.discm-eeat-good,
.discm-eeat-overall.discm-eeat-moderate {
	background: #eff6ff;
	color: #2563eb;
}

.discm-eeat-overall.discm-eeat-average,
.discm-eeat-overall.discm-eeat-developing {
	background: #fffbeb;
	color: #d97706;
}

.discm-eeat-overall.discm-eeat-poor,
.discm-eeat-overall.discm-eeat-weak {
	background: #fef2f2;
	color: #d30824;
}

/* E-E-A-T Individual Badges */
.discm-badge-found {
	background: #ecfdf5;
	color: #00864f;
}

.discm-badge-missing {
	background: #fef2f2;
	color: #d30824;
}

.discm-badge-icon {
	font-size: 10px;
	font-weight: 700;
}

.discm-badge-label {
	font-size: 11px;
	font-weight: 600;
}

/* E-E-A-T Detail Rows */
.discm-eeat-detail-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f3f4f6;
}

.discm-eeat-detail-row:last-child {
	border-bottom: none;
}

.discm-detail-icon {
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	width: 18px;
	text-align: center;
}

.discm-icon-pass {
	color: #00c781;
}

.discm-icon-fail {
	color: #f92333;
}

.discm-detail-content strong {
	font-size: 12px;
	color: #1f2937;
}

.discm-detail-content p {
	font-size: 11px;
	color: #6b7280;
	margin: 2px 0 0;
	line-height: 1.4;
}

/* ── AEO Check Items ──────────────────────────────── */
.discm-aeo-check-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-size: 11px;
}

.discm-check-pass {
	color: #00864f;
}

.discm-check-fail {
	color: #d30824;
}

.discm-aeo-passed {
	font-weight: 700;
	color: #6346c0;
}

.discm-aeo-check-detail {
	color: #9ca3af;
	font-size: 10px;
}

/* ── Toggle Details Button ────────────────────────── */
.discm-toggle-details-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: #6346c0;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
	margin-top: 6px;
	transition: color 0.2s ease;
}

.discm-toggle-details-btn:hover {
	color: #46308c;
}

/* ── Section Labels ───────────────────────────────── */
.discm-section-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #6b7280;
	margin-bottom: 10px;
}

/* ── Probability Section (mini gauge) ─────────────── */
.discm-probability-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.discm-probability-gauge-wrapper {
	position: relative;
	display: inline-block;
}

.discm-probability-gauge {
	transform: rotate(-90deg);
}

.discm-prob-bg {
	fill: none;
	stroke: #e0dfea;
}

.discm-prob-fill {
	fill: none;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.discm-prob-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16px;
	font-weight: 800;
}

.discm-prob-confidence {
	margin-bottom: 4px;
}

.discm-prob-explanation {
	font-size: 11px;
	color: #6b7280;
	line-height: 1.4;
}

/* ── AEO Score Section ────────────────────────────── */
.discm-aeo-content {
	padding: 0;
}

.discm-aeo-score-wrapper {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin-bottom: 6px;
}

.discm-aeo-score-max {
	font-size: 12px;
	color: #9ca3af;
	font-weight: 500;
}

.discm-aeo-description {
	font-size: 11px;
	color: #6b7280;
	margin-bottom: 8px;
}

/* ── No Suggestions ───────────────────────────────── */
.discm-no-suggestions {
	font-size: 12px;
	color: #9ca3af;
	text-align: center;
	padding: 16px 0;
}

/* ── Responsive adjustments for WP sidebar ─────────── */
@media (max-width: 782px) {
	.discm-criterion {
		grid-template-columns: 20px 1fr 44px;
	}

	.discm-eeat-details {
		grid-template-columns: 1fr;
	}

	.discm-credits-popup {
		max-width: 300px;
		padding: 18px;
	}
}

/* ── Meta Description Field ──────────────────────── */
.discm-meta-desc-section {
	margin-top: 12px;
	padding: 14px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
}

.discm-meta-desc-field-wrapper {
	position: relative;
}

.discm-meta-desc-textarea {
	width: 100%;
	min-height: 70px;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #1f2937;
	background: #fff;
	resize: vertical;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.discm-meta-desc-textarea:focus {
	outline: none;
	border-color: #6346c0;
	box-shadow: 0 0 0 3px rgba(99, 70, 192, 0.15);
}

.discm-meta-desc-textarea::placeholder {
	color: #9ca3af;
	font-style: italic;
}

.discm-meta-desc-counter {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 6px;
	font-size: 11px;
	color: #9ca3af;
}

.discm-meta-desc-separator {
	color: #d1d5db;
}

.discm-meta-desc-target {
	font-weight: 600;
}

.discm-meta-desc-chars {
	margin-left: 2px;
}

#discm-meta-desc-count {
	font-weight: 700;
	transition: color 0.2s ease;
}

.discm-count-good {
	color: #00864f !important;
}

.discm-count-warning {
	color: #d97706 !important;
}

.discm-count-bad {
	color: #d30824 !important;
}

.discm-meta-desc-status {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	transition: opacity 0.3s ease;
}

.discm-status-success {
	color: #00864f;
}

.discm-status-error {
	color: #d30824;
}

.discm-meta-desc-note {
	font-size: 10px;
	color: #9ca3af;
	margin: 6px 0 0;
	line-height: 1.4;
	font-style: italic;
}

/* ── Save to Post Button ─────────────────────────── */
.discm-btn-save-post {
	font-size: 12px;
	padding: 7px 16px;
	border-radius: 8px;
	border: 1px solid #10b981;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	line-height: 1;
}

.discm-btn-save-post:hover {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}

.discm-btn-save-post:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.discm-btn-error {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
	border-color: #ef4444 !important;
	color: #fff !important;
}

/* ── Code Block in Fix Options ───────────────────── */
.discm-fix-code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 11px !important;
	line-height: 1.5 !important;
	white-space: pre-wrap;
	word-break: break-all;
}

.discm-fix-code pre {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ── Confirm Icon in Popup ───────────────────────── */
.discm-confirm-icon {
	margin-right: 4px;
}

/* ── Image Popup (inside discm-credits-popup) ─────────────── */
.discm-image-popup {
	max-width: 520px;
}

.discm-image-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 0;
}

.discm-image-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid #e5e7eb;
	border-top-color: #6346c0;
	border-radius: 50%;
	animation: discm-spin 0.8s linear infinite;
}

.discm-image-loading-text {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

.discm-image-loading-hint {
	font-size: 12px;
	color: #9ca3af;
	margin: 0;
}

.discm-image-error {
	color: #dc2626;
	font-size: 13px;
	text-align: center;
}

.discm-image-result {
	text-align: center;
}

.discm-generated-image {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-bottom: 16px;
}

.discm-image-result-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.discm-btn-save-featured {
	padding: 8px 18px;
	background: linear-gradient(135deg, #059669, #10b981);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.discm-btn-save-featured:hover {
	background: linear-gradient(135deg, #047857, #059669);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.discm-btn-save-featured:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.discm-btn-save-featured.discm-btn-applied {
	background: #059669;
}

.discm-btn-regenerate {
	padding: 8px 18px;
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
}

.discm-btn-regenerate:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}

.discm-image-spinner-small {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: discm-spin 0.6s linear infinite;
	vertical-align: middle;
}

/* ── Responsive adjustments for popups ───────────────────── */
@media (max-width: 782px) {
	.discm-credits-popup {
		max-width: 95%;
		width: 95%;
	}

	.discm-upgrade-popup {
		max-width: 95%;
	}

	.discm-image-popup {
		max-width: 95%;
	}

	.discm-credits-popup-actions {
		flex-direction: column;
	}

	.discm-image-result-actions {
		flex-direction: column;
		align-items: center;
	}
}