/**
 * Answer Engine Optimizer AI Unified Meta Box Styles
 *
 * @package AEO_Ranking
 * @since 1.0.0
 */

/* Main Wrapper */
.aeo-meta-box-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

/* Section Styles */
.aeo-section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.aeo-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-bottom: 1px solid #f0f0f1;
	background: #f9f9f9;
}

.aeo-section-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.aeo-section-content {
	padding: 20px;
}

/* Badges */
.aeo-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aeo-badge-manual {
	background: #00a32a;
	color: #fff;
}

.aeo-badge-auto {
	background: #2271b1;
	color: #fff;
}

.aeo-badge-none {
	background: #dcdcde;
	color: #50575e;
}

/* Summary Editor */
.aeo-summary-editor {
	margin-bottom: 20px;
}

.aeo-summary-editor label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #1d2327;
}

.aeo-char-counter {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	padding: 8px 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	font-size: 13px;
}

.aeo-char-count {
	font-weight: 700;
	font-size: 16px;
	color: #1d2327;
}

.aeo-char-count.aeo-char-optimal {
	color: #00a32a;
}

.aeo-char-count.aeo-char-warning {
	color: #dba617;
}

.aeo-char-count.aeo-char-error {
	color: #d63638;
}

.aeo-char-label {
	color: #646970;
}

.aeo-char-optimal {
	margin-left: auto;
	color: #646970;
	font-style: italic;
}

/* Auto Summary Preview */
.aeo-auto-summary-preview {
	background: #e7f5fe;
	border: 1px solid #72aee6;
	border-radius: 4px;
	padding: 15px;
	margin-top: 15px;
}

.aeo-auto-summary-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: #135e96;
}

.aeo-auto-summary-header .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.aeo-auto-summary-content {
	color: #1d2327;
	line-height: 1.6;
}

.aeo-auto-summary-content p {
	margin: 0;
}

.aeo-auto-summary-preview .description {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 12px;
	color: #646970;
}

/* Score & Warnings Grid */
.aeo-score-warnings-grid {
	display: block;
	width: 100%;
}

/* Score Display */
.aeo-score-display {
	text-align: center;
}

.aeo-score-circle {
	width: 90px;
	height: 90px;
	margin: 0 auto 10px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 5px solid;
	background: #fff;
}

.aeo-score-circle.aeo-score-green {
	border-color: #00a32a;
	background: #e7f7ed;
}

.aeo-score-circle.aeo-score-yellow {
	border-color: #dba617;
	background: #fcf8e3;
}

.aeo-score-circle.aeo-score-red {
	border-color: #d63638;
	background: #f8d7da;
}

.aeo-score-number {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.aeo-score-green .aeo-score-number {
	color: #00a32a;
}

.aeo-score-yellow .aeo-score-number {
	color: #dba617;
}

.aeo-score-red .aeo-score-number {
	color: #d63638;
}

.aeo-score-max {
	font-size: 11px;
	font-weight: 400;
	color: #646970;
}

.aeo-score-label {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aeo-score-green .aeo-score-label {
	color: #00a32a;
}

.aeo-score-yellow .aeo-score-label {
	color: #dba617;
}

.aeo-score-red .aeo-score-label {
	color: #d63638;
}

/* Score Breakdown */
.aeo-score-breakdown {
	margin-top: 15px;
}

.aeo-breakdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	font-size: 12px;
	color: #2271b1;
	cursor: pointer;
	transition: all 0.2s;
}

.aeo-breakdown-toggle:hover {
	background: #fff;
	border-color: #2271b1;
}

.aeo-breakdown-toggle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.aeo-breakdown-content {
	margin-top: 10px;
	padding: 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
}

.aeo-breakdown-content table {
	width: 100%;
	font-size: 12px;
}

.aeo-breakdown-content td {
	padding: 4px 0;
}

.aeo-breakdown-content td:last-child {
	text-align: right;
}

/* Warnings Display */
.aeo-warnings-display {
	flex: 1;
}

.aeo-warnings-list h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 15px 0;
	font-size: 14px;
	font-weight: 600;
	color: #d63638;
}

.aeo-warnings-list h4 .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.aeo-warnings-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aeo-warning-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	margin-bottom: 8px;
	background: #fff;
	border-left: 4px solid;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.aeo-warning-item.aeo-warning-error {
	border-left-color: #d63638;
	background: #f8d7da;
}

.aeo-warning-item.aeo-warning-warning {
	border-left-color: #dba617;
	background: #fcf8e3;
}

.aeo-warning-icon {
	flex-shrink: 0;
}

.aeo-warning-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.aeo-warning-error .dashicons {
	color: #d63638;
}

.aeo-warning-warning .dashicons {
	color: #dba617;
}

.aeo-warning-text {
	flex: 1;
	font-size: 13px;
	line-height: 1.5;
	color: #1d2327;
}

/* Warnings Success */
.aeo-warnings-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background: #e7f7ed;
	border: 2px solid #00a32a;
	border-radius: 4px;
	text-align: center;
}

.aeo-warnings-success .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #00a32a;
	margin-bottom: 10px;
}

.aeo-warnings-success strong {
	display: block;
	font-size: 16px;
	color: #00a32a;
	margin-bottom: 5px;
}

.aeo-warnings-success p {
	margin: 0;
	font-size: 13px;
	color: #646970;
}

/* Stats Grid */
.aeo-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
}

.aeo-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: #f9f9f9;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	text-align: center;
}

.aeo-stat-item .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #2271b1;
	margin-bottom: 10px;
}

.aeo-stat-value {
	font-size: 28px;
	font-weight: 700;
	color: #1d2327;
	line-height: 1;
	margin-bottom: 5px;
}

.aeo-stat-label {
	font-size: 12px;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aeo-stat-success {
	color: #00a32a;
	font-size: 32px;
}

.aeo-stat-error {
	color: #d63638;
	font-size: 32px;
}

/* AI Suggestions */
.aeo-ai-suggestions {
	margin-top: 20px;
}

.aeo-suggest-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.aeo-suggest-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: #ffffff;
    margin-top: 9px;
}
.aeo-ai-suggestions .aeo-suggest-btn {
    border-radius: 4px;
    background: linear-gradient(316deg, #96C6EA -0.37%, #B597F6 88.88%);
    border: none;
    padding: 4px 14px;
    font-size: 14px;
    font-weight: 600;
    color: white;
	transition: all 0.3s ease;
}
.aeo-ai-suggestions .aeo-suggest-btn:focus,
.aeo-ai-suggestions .aeo-suggest-btn:active,
.aeo-ai-suggestions .aeo-suggest-btn:hover:not(:disabled){
    color: white;
	background: linear-gradient(316deg, #B597F6 -0.37%, #96C6EA 88.88%);
}

/* Disabled button state */
.aeo-ai-suggestions .aeo-suggest-btn:disabled,
.aeo-ai-suggestions .aeo-suggest-btn.aeo-btn-disabled {
	background: #ccc;
	color: #666;
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}

.aeo-ai-suggestions .aeo-suggest-btn:disabled .dashicons,
.aeo-ai-suggestions .aeo-suggest-btn.aeo-btn-disabled .dashicons {
	color: #666;
}
.aeo-ai-suggestions-panel {
	margin-top: 15px;
	background: #f0f6fc;
	border: 2px solid #96C6EA;
	border-radius: 4px;
	overflow: hidden;
}

.aeo-ai-suggestions-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	background: linear-gradient(316deg, #96C6EA -0.37%, #B597F6 88.88%);
	color: #fff;
}

.aeo-ai-suggestions-header strong {
	flex: 1;
	font-size: 14px;
}

.aeo-ai-suggestions-header .aeo-spinner {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.aeo-close-suggestions {
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.aeo-close-suggestions:hover {
	opacity: 0.8;
}

.aeo-close-suggestions .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.aeo-ai-suggestions-content {
	padding: 15px;
}

.aeo-loading,
.aeo-error {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px;
	text-align: center;
	justify-content: center;
	font-size: 14px;
}

.aeo-loading .dashicons {
	animation: spin 1s linear infinite;
}

.aeo-error {
	color: #d63638;
}

.aeo-error .dashicons {
	color: #d63638;
}

.aeo-spin {
	animation: spin 1s linear infinite;
}

.aeo-suggestions-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aeo-suggestion-item {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 15px;
	transition: all 0.2s;
}

.aeo-suggestion-item:hover {
	border-color: #0073aa;
	box-shadow: 0 2px 4px rgba(0, 115, 170, 0.1);
}

.aeo-suggestion-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.aeo-suggestion-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: #0073aa;
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

.aeo-suggestion-badge {
	display: inline-block;
	padding: 3px 8px;
	background: #f0f0f1;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aeo-suggestion-text {
	font-size: 14px;
	line-height: 1.6;
	color: #1d2327;
	margin-bottom: 12px;
}

.aeo-suggestion-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.aeo-suggestion-length {
	font-size: 12px;
	color: #646970;
}

.aeo-no-suggestions {
	text-align: center;
	padding: 20px;
	color: #646970;
	font-style: italic;
}

/* Improvement Hints */
.aeo-hints-list {
	margin-bottom: 20px;
}

.aeo-hints-list h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 15px 0;
	font-size: 14px;
	font-weight: 600;
	color: #0073aa;
}

.aeo-hints-list h4 .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #dba617;
}

.aeo-hints-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aeo-hint-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	margin-bottom: 8px;
	background: #fff;
	border-left: 4px solid;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.aeo-hint-item.aeo-hint-critical {
	border-left-color: #d63638;
	background: #fef7f7;
}

.aeo-hint-item.aeo-hint-warning {
	border-left-color: #dba617;
	background: #fcf8e3;
}

.aeo-hint-item.aeo-hint-info {
	border-left-color: #2271b1;
	background: #f0f6fc;
}

.aeo-hint-item.aeo-hint-success {
	border-left-color: #00a32a;
	background: #e7f7ed;
}

.aeo-hint-icon {
	flex-shrink: 0;
}

.aeo-hint-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.aeo-hint-critical .dashicons {
	color: #d63638;
}

.aeo-hint-warning .dashicons {
	color: #dba617;
}

.aeo-hint-info .dashicons {
	color: #2271b1;
}

.aeo-hint-success .dashicons {
	color: #00a32a;
}

.aeo-hint-text {
	flex: 1;
	font-size: 13px;
	line-height: 1.5;
	color: #1d2327;
}

/* Responsive */
@media screen and (max-width: 782px) {
	.aeo-meta-box-wrapper {
		max-width: 100%;
	}

	.aeo-section-content {
		padding: 15px;
	}

	.aeo-score-warnings-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.aeo-score-circle {
		width: 120px;
		height: 120px;
		border-width: 6px;
	}

	.aeo-score-number {
		font-size: 36px;
	}

	.aeo-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.aeo-stat-item {
		padding: 15px;
	}

	.aeo-stat-item .dashicons {
		font-size: 24px;
		width: 24px;
		height: 24px;
	}

	.aeo-stat-value {
		font-size: 24px;
	}
}

@media screen and (max-width: 600px) {
	.aeo-char-counter {
		flex-wrap: wrap;
	}

	.aeo-char-optimal {
		margin-left: 0;
		width: 100%;
		margin-top: 5px;
	}

	.aeo-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   Tab Navigation
   ============================================ */

.aeo-tabs-nav {
	display: flex;
	gap: 0;
	border-bottom: 1px solid #dcdcde;
	margin-bottom: 20px;
	background: #f9f9f9;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}

.aeo-tab-button {
	flex: 1;
	padding: 12px 20px;
	background: #f9f9f9;
	border: none;
	border-right: 1px solid #dcdcde;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #646970;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.aeo-tab-button:last-child {
	border-right: none;
}

.aeo-tab-button:hover {
	background: #fff;
	color: #2271b1;
}

.aeo-tab-button.active {
	background: #fff;
	color: #2271b1;
	border-bottom: 2px solid #2271b1;
	margin-bottom: -1px;
}

.aeo-tab-button .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Tab Panels */
.aeo-tabs-content {
	position: relative;
}

.aeo-tab-panel {
	display: none;
}

.aeo-tab-panel.active {
	display: block;
}

/* ============================================
   AI Crawler Visibility Tab
   ============================================ */

.aeo-visibility-content {
	max-width: 800px;
}

/* Visibility Score Section */
.aeo-visibility-score-section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 30px;
	margin-bottom: 20px;
	text-align: center;
}

.aeo-visibility-score-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.aeo-visibility-score-display .aeo-score-circle {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 8px solid #dcdcde;
	margin-bottom: 10px;
}

.aeo-visibility-score-display .aeo-score-circle.aeo-score-green {
	border-color: #00a32a;
	background: #e7f7ed;
}

.aeo-visibility-score-display .aeo-score-circle.aeo-score-yellow {
	border-color: #dba617;
	background: #fcf8e3;
}

.aeo-visibility-score-display .aeo-score-circle.aeo-score-red {
	border-color: #d63638;
	background: #f8d7da;
}

.aeo-visibility-score-display .aeo-score-number {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: #1d2327;
}

.aeo-visibility-score-display .aeo-score-max {
	font-size: 14px;
	color: #646970;
}

.aeo-score-info {
	text-align: center;
}

.aeo-score-info .aeo-score-label {
	font-size: 18px;
	font-weight: 600;
	color: #1d2327;
	display: block;
	margin-bottom: 5px;
}

.aeo-score-description {
	font-size: 13px;
	color: #646970;
	margin: 0;
}

/* Visibility Checks Section */
.aeo-visibility-checks-section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
}

.aeo-visibility-checks-section h4 {
	margin: 0 0 15px;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.aeo-checks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.aeo-check-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px;
	background: #f9f9f9;
	border-radius: 4px;
	border-left: 3px solid #dcdcde;
}

.aeo-check-item.aeo-check-pass {
	border-left-color: #00a32a;
	background: #e7f7ed;
}

.aeo-check-item.aeo-check-warning {
	border-left-color: #dba617;
	background: #fcf8e3;
}

.aeo-check-item.aeo-check-fail {
	border-left-color: #d63638;
	background: #f8d7da;
}

.aeo-check-icon {
	flex-shrink: 0;
}

.aeo-check-icon .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.aeo-check-pass .aeo-check-icon .dashicons {
	color: #00a32a;
}

.aeo-check-warning .aeo-check-icon .dashicons {
	color: #dba617;
}

.aeo-check-fail .aeo-check-icon .dashicons {
	color: #d63638;
}

.aeo-check-content {
	flex: 1;
}

.aeo-check-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 4px;
}

.aeo-check-message {
	display: block;
	font-size: 12px;
	color: #646970;
	line-height: 1.4;
}

/* Visibility Warnings Section */
.aeo-visibility-warnings-section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
}

.aeo-visibility-warnings-section h4 {
	margin: 0 0 15px;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	display: flex;
	align-items: center;
	gap: 8px;
}

.aeo-warnings-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aeo-warning-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: #f9f9f9;
	border-radius: 4px;
	border-left: 3px solid #dcdcde;
}

.aeo-warning-item.aeo-warning-error {
	border-left-color: #d63638;
	background: #f8d7da;
}

.aeo-warning-item.aeo-warning-warning {
	border-left-color: #dba617;
	background: #fcf8e3;
}

.aeo-warning-item .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: #646970;
}

.aeo-warning-item.aeo-warning-error .dashicons {
	color: #d63638;
}

.aeo-warning-item.aeo-warning-warning .dashicons {
	color: #dba617;
}

.aeo-warning-message {
	font-size: 13px;
	color: #1d2327;
	line-height: 1.4;
}

/* Visibility Success */
.aeo-visibility-success {
	background: #e7f7ed;
	border: 1px solid #00a32a;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.aeo-visibility-success .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #00a32a;
	margin-bottom: 10px;
}

.aeo-visibility-success strong {
	display: block;
	font-size: 16px;
	color: #1d2327;
	margin-bottom: 5px;
}

.aeo-visibility-success p {
	font-size: 13px;
	color: #646970;
	margin: 0;
}

/* AI Preview Section */
.aeo-visibility-preview-section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 20px;
}

.aeo-visibility-preview-section h4 {
	margin: 0 0 15px;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	display: flex;
	align-items: center;
	gap: 8px;
}

.aeo-preview-box {
	background: #f9f9f9;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 10px;
}

.aeo-ai-preview {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aeo-preview-title {
	display: block;
	font-size: 16px;
	color: #1a0dab;
	margin-bottom: 8px;
	line-height: 1.3;
}

.aeo-preview-excerpt {
	font-size: 13px;
	color: #545454;
	line-height: 1.5;
	margin: 0;
}

.aeo-preview-note {
	font-size: 12px;
	color: #646970;
	font-style: italic;
	margin: 0;
}

/* ============================================
   Unified Score Components
   ============================================ */

/* Unified Score Header */
.aeo-unified-score-header {
	text-align: center;
	padding: 20px 0;
	margin-bottom: 30px;
	border-bottom: 1px solid #f0f0f1;
}

.aeo-unified-score-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.aeo-score-status {
	font-size: 14px;
	color: #646970;
	margin: 5px 0 0;
	max-width: 400px;
}

/* Score Badge in Header */
.aeo-score-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aeo-score-badge-green {
	background: #e7f7ed;
	color: #00a32a;
	border: 1px solid #00a32a;
}

.aeo-score-badge-yellow {
	background: #fcf8e3;
	color: #dba617;
	border: 1px solid #dba617;
}

.aeo-score-badge-red {
	background: #f8d7da;
	color: #d63638;
	border: 1px solid #d63638;
}

/* Score Components Grid */
.aeo-score-components {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

.aeo-score-component {
	background: #f9f9f9;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 20px;
}

.aeo-component-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.aeo-component-header .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #2271b1;
}

.aeo-component-header strong {
	flex: 1;
	font-size: 14px;
	color: #1d2327;
}

.aeo-component-weight {
	font-size: 12px;
	color: #646970;
	background: #fff;
	padding: 3px 8px;
	border-radius: 3px;
	border: 1px solid #dcdcde;
}

.aeo-component-score-inline {
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
	background: #fff;
	padding: 4px 10px;
	border-radius: 3px;
	border: 1px solid #dcdcde;
}

/* Progress Bar */
.aeo-component-bar {
	height: 8px;
	background: #f0f0f1;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
}

.aeo-component-progress {
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s ease;
}

.aeo-component-progress.aeo-progress-green {
	background: linear-gradient(90deg, #00a32a 0%, #7ad03a 100%);
}

.aeo-component-progress.aeo-progress-yellow {
	background: linear-gradient(90deg, #dba617 0%, #ffba00 100%);
}

.aeo-component-progress.aeo-progress-red {
	background: linear-gradient(90deg, #d63638 0%, #ee7c1b 100%);
}

.aeo-component-score {
	font-size: 13px;
	font-weight: 600;
	color: #646970;
	text-align: right;
}

.aeo-component-description {
	font-size: 12px;
	color: #646970;
	line-height: 1.5;
	margin: 10px 0 0;
	font-style: italic;
}

/* Visibility Component Detail */
.aeo-visibility-component-detail {
	background: #f9f9f9;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Responsive - Visibility Tab */
@media screen and (max-width: 782px) {
	.aeo-tabs-nav {
		flex-direction: column;
	}

	.aeo-tab-button {
		border-right: none;
		border-bottom: 1px solid #dcdcde;
	}

	.aeo-tab-button:last-child {
		border-bottom: none;
	}

	.aeo-checks-grid {
		grid-template-columns: 1fr;
	}

	.aeo-visibility-score-display .aeo-score-circle {
		width: 100px;
		height: 100px;
	}

	.aeo-visibility-score-display .aeo-score-number {
		font-size: 28px;
	}

	.aeo-score-components {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   Content Structuring & Guidance Tab Styles
   ============================================ */

.aeo-content-guidance-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

/* Empty State Styling */
.aeo-guidance-empty-state {
	text-align: center;
	padding: 60px 40px;
	background: linear-gradient(135deg, #f0f6fc 0%, #f8fafc 100%);
	border: 2px dashed #96C6EA;
	border-radius: 8px;
	margin: 20px 0;
}

.aeo-guidance-empty-icon {
	margin-bottom: 20px;
}

.aeo-guidance-empty-icon .dashicons {
	font-size: 64px;
	width: 64px;
	height: 64px;
	color: #96C6EA;
	opacity: 0.6;
}

.aeo-guidance-empty-state h3 {
	font-size: 20px;
	font-weight: 600;
	color: #1d2327;
	margin: 15px 0;
}

.aeo-guidance-empty-state p {
	color: #646970;
	font-size: 14px;
	line-height: 1.6;
	margin: 10px 0;
}

.aeo-guidance-empty-hint {
	font-weight: 600;
	color: #1d2327;
	margin-top: 20px !important;
}

.aeo-guidance-empty-list {
	list-style: none;
	padding: 0;
	margin: 15px 0 0 0;
	text-align: left;
	display: inline-block;
}

.aeo-guidance-empty-list li {
	padding: 8px 0;
	padding-left: 28px;
	position: relative;
	color: #646970;
	font-size: 13px;
}

.aeo-guidance-empty-list li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #96C6EA;
	font-weight: bold;
}

.aeo-guidance-intro {
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
	padding: 15px 20px;
	margin-bottom: 25px;
	border-radius: 4px;
}

.aeo-guidance-intro p {
	margin: 0;
	color: #1d2327;
	font-size: 14px;
	line-height: 1.6;
}

.aeo-guidance-section {
	margin-bottom: 30px;
}

.aeo-guidance-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 15px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #dcdcde;
}

.aeo-guidance-title .dashicons {
	color: #2271b1;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* Guidance Cards */
.aeo-guidance-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aeo-guidance-card {
	display: flex;
	gap: 15px;
	padding: 15px;
	border-radius: 4px;
	border: 1px solid;
	background: #fff;
}

.aeo-guidance-card.aeo-guidance-success {
	border-color: #00a32a;
	background: #f0f6fc;
}

.aeo-guidance-card.aeo-guidance-warning {
	border-color: #dba617;
	background: #fcf9e8;
}

.aeo-guidance-icon {
	flex-shrink: 0;
}

.aeo-guidance-icon .dashicons {
	width: 24px;
	height: 24px;
	font-size: 24px;
}

.aeo-guidance-success .aeo-guidance-icon .dashicons {
	color: #00a32a;
}

.aeo-guidance-warning .aeo-guidance-icon .dashicons {
	color: #dba617;
}

.aeo-guidance-content {
	flex: 1;
}

.aeo-guidance-message {
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 5px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.aeo-guidance-help {
	color: #646970;
	font-size: 13px;
	line-height: 1.5;
}

/* Tooltip Styles */
.aeo-guidance-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: help;
	margin-left: 4px;
}

.aeo-guidance-tooltip .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: #2271b1;
	transition: color 0.2s ease;
}

.aeo-guidance-tooltip:hover .dashicons {
	color: #135e96;
}

.aeo-guidance-tooltip::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	background: #1d2327;
	color: #fff;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.6;
	white-space: normal;
	width: 320px;
	max-width: 90vw;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	font-weight: 400;
	text-align: left;
}

.aeo-guidance-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	border: 6px solid transparent;
	border-top-color: #1d2327;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 1001;
}

.aeo-guidance-tooltip:hover::after,
.aeo-guidance-tooltip:hover::before {
	opacity: 1;
	visibility: visible;
}

.aeo-guidance-tooltip:hover::after {
	transform: translateX(-50%) translateY(-12px);
}

/* Checklist Style for Section Coverage */
.aeo-guidance-checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px;
}

.aeo-guidance-check-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	border-radius: 4px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
}

.aeo-guidance-check-item.aeo-guidance-success {
	background: #f0f6fc;
	border-color: #00a32a;
}

.aeo-guidance-check-item.aeo-guidance-warning {
	background: #fcf9e8;
	border-color: #dba617;
}

.aeo-guidance-check-icon {
	flex-shrink: 0;
}

.aeo-guidance-check-icon .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.aeo-guidance-success .aeo-guidance-check-icon .dashicons {
	color: #00a32a;
}

.aeo-guidance-warning .aeo-guidance-check-icon .dashicons {
	color: #dba617;
}

.aeo-guidance-check-label {
	flex: 1;
	font-size: 14px;
	color: #1d2327;
	font-weight: 500;
}

.aeo-guidance-missing {
	color: #dba617;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
}

.aeo-guidance-help-text {
	padding: 12px 15px;
	background: #f0f6fc;
	border-left: 3px solid #2271b1;
	border-radius: 4px;
	color: #646970;
	font-size: 13px;
	line-height: 1.5;
}

/* ============================================
   Improved Tips Guidance Engine Styles
   ============================================ */

.aeo-hints-list.aeo-hints-guidance {
	max-width: 800px;
	margin-top: 32px;
}

.aeo-hints-categories {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow: hidden;
}

.aeo-hints-category {
	border: 1px solid #dcdcde;
	border-radius: 0;
	background: #fff;
	overflow: hidden;
	margin-bottom: -1px;
}

.aeo-hints-category:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.aeo-hints-category:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.aeo-hints-category-toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #dcdcde;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	color: #1d2327;
	transition: background-color 0.15s ease;
}

.aeo-hints-category-toggle:hover {
	background: #f9f9f9;
}

.aeo-hints-category.is-collapsed .aeo-hints-category-toggle {
	border-bottom: none;
}

.aeo-hints-category-toggle .aeo-hints-category-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Circular Progress Indicator */
.aeo-category-progress {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.aeo-progress-circle {
	display: block;
	transform: rotate(-90deg);
}

.aeo-progress-bg {
	stroke: #e0e0e0;
}

.aeo-progress-fill {
	stroke: #46b450;
	transition: stroke-dasharray 0.3s ease;
}

.aeo-hints-category-toggle .dashicons {
	color: #50575e;
	transition: transform 0.2s ease;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.aeo-hints-category.is-collapsed .aeo-hints-category-toggle .dashicons {
	transform: rotate(-90deg);
}

.aeo-hints-category-body {
	padding: 16px 20px;
	background: #fff;
}

.aeo-hints-category.is-collapsed .aeo-hints-category-body {
	display: none;
}

.aeo-tip-card {
	border: 1px solid #dcdcde;
	border-left-width: 4px;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 10px;
	background: #fff;
}

.aeo-tip-card:last-child {
	margin-bottom: 0;
}

.aeo-tip-main {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.aeo-tip-icon {
	flex-shrink: 0;
}

.aeo-tip-icon .dashicons {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.aeo-tip-text {
	flex: 1;
}

.aeo-tip-message {
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 4px;
}

.aeo-tip-impact {
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
	margin-bottom: 4px;
}

.aeo-tip-why {
	font-size: 12px;
	color: #646970;
	line-height: 1.4;
}

.aeo-tip-fix {
	flex-shrink: 0;
	margin-left: 10px;
}

/* Severity colors */
.aeo-tip-critical {
	border-left-color: #d63638;
}

.aeo-tip-critical .aeo-tip-icon .dashicons {
	color: #d63638;
}

.aeo-tip-warning {
	border-left-color: #dba617;
}

.aeo-tip-warning .aeo-tip-icon .dashicons {
	color: #dba617;
}

.aeo-tip-info {
	border-left-color: #2271b1;
}

.aeo-tip-info .aeo-tip-icon .dashicons {
	color: #2271b1;
}

.aeo-tip-success {
	border-left-color: #00a32a;
}

.aeo-tip-success .aeo-tip-icon .dashicons {
	color: #00a32a;
}

/* Scroll target highlight */
.aeo-highlight-target {
	outline: 2px solid #2271b1;
	outline-offset: 4px;
	border-radius: 6px;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
	.aeo-content-guidance-wrapper {
		max-width: 100%;
	}

	.aeo-guidance-card {
		flex-direction: column;
		gap: 10px;
	}

	.aeo-guidance-icon {
		align-self: flex-start;
	}

	.aeo-tip-main {
		flex-direction: column;
	}

	.aeo-tip-fix {
		margin-left: 0;
		margin-top: 8px;
		align-self: flex-start;
	}
}

/* ========================================
   Real-Time Update Engine Styles
   ======================================== */

/* Loading States */
.aeo-score-circle.aeo-loading {
	position: relative;
	opacity: 0.7;
}

.aeo-score-circle.aeo-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: aeo-spin 0.8s linear infinite;
}

/* Pulse Animation for Score Updates */
.aeo-score-circle.aeo-pulse {
	animation: aeo-pulse 0.6s ease-out;
}

@keyframes aeo-pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

/* Spin Animation for Loading */
@keyframes aeo-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Fade-in Animation for Content Updates */
.aeo-fade-in {
	animation: aeo-fade-in 0.3s ease-in;
}

@keyframes aeo-fade-in {
	0% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

/* Update Error Indicator */
.aeo-update-error {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background: #d63638;
	color: #fff;
	padding: 12px 20px;
	border-radius: 4px;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	z-index: 999999;
	animation: aeo-slide-in 0.3s ease-out;
}

@keyframes aeo-slide-in {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Manual Refresh Button */
.aeo-manual-refresh {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	color: #2271b1;
	background: #f0f6fc;
	border: 1px solid #2271b1;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.aeo-manual-refresh:hover {
	background: #2271b1;
	color: #fff;
}

.aeo-manual-refresh .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Loading Overlay for Sections */
.aeo-section-loading {
	position: relative;
	pointer-events: none;
}

.aeo-section-loading::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 10;
}

/* Smooth Transitions */
.aeo-improvement-hints-wrapper,
.aeo-visibility-checks-section,
.aeo-content-guidance-wrapper {
	transition: opacity 0.3s ease;
}

/* Real-Time Status Indicator */
.aeo-realtime-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #50575e;
	padding: 4px 8px;
	background: #f0f0f1;
	border-radius: 3px;
	margin-left: 10px;
}

.aeo-realtime-status .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #00a32a;
	animation: aeo-pulse-dot 2s ease-in-out infinite;
}

@keyframes aeo-pulse-dot {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

/* Highlight Target Animation */
.aeo-highlight-target {
	animation: aeo-highlight 1.2s ease-out;
}

@keyframes aeo-highlight {
	0%, 100% {
		background-color: transparent;
	}
	50% {
		background-color: rgba(255, 193, 7, 0.3);
	}
}

/* No Tips Message */
.aeo-no-tips {
	padding: 20px;
	text-align: center;
	color: #50575e;
	font-style: italic;
}

/* ============================================
   New List-Based Improvement Tips Styles
   ============================================ */

/* Tips List Container */
.aeo-tips-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Individual Tip Item */
.aeo-tip-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	margin: 0;
	border-bottom: 1px solid #f0f0f1;
}

.aeo-tip-item:last-child {
	border-bottom: none;
}

/* Checkbox Icon - 16px max size */
.aeo-tip-checkbox {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.aeo-tip-checkbox .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* Green check for passed items */
.aeo-tip-checkbox.aeo-checkbox-passed .dashicons {
	color: #fff;
}

/* Red circle (dashicons-marker) for pending items */
.aeo-tip-checkbox.aeo-checkbox-pending .dashicons {
	color: #d63638;
}

span.aeo-tip-checkbox.aeo-checkbox-passed {
    background: #00a32a;
    border-radius: 33px;
}


/* Tip Content */
.aeo-tip-content {
	flex: 1;
	font-size: 13px;
	line-height: 1.5;
	color: #1d2327;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Info Icon with Tooltip - 16px max */
.aeo-tip-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	cursor: help;
	position: relative;
	flex-shrink: 0;
	vertical-align: middle;
}

.aeo-tip-info .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #2271b1;
	transition: color 0.2s ease;
}

.aeo-tip-info:hover .dashicons {
	color: #135e96;
}

/* Hide the data-tooltip attribute content from rendering */
.aeo-tip-info::before,
.aeo-tip-info::after {
	display: none !important;
	content: none !important;
}

/* Tooltip - JavaScript-based */
.aeo-tooltip {
	position: fixed;
	background: #1d2327;
	color: #fff;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-wrap;
	max-width: 320px;
	z-index: 999999;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	display: none;
}

.aeo-tooltip.aeo-tooltip-bottom {
	margin-top: 8px;
}

/* Ensure no pseudo-elements try to display tooltip content */
*[data-tooltip]::before,
*[data-tooltip]::after {
	content: none !important;
	display: none !important;
}

/* Fix Now Button */
.aeo-tip-fix {
	flex-shrink: 0;
	margin-left: auto;
	padding: 3px 10px;
	height: auto;
	line-height: 1.4;
	font-size: 12px;
}

/* Accordion Body Padding Adjustment */
.aeo-hints-list .aeo-hints-category-body {
	padding: 16px 20px;
	background: #fff;
}

/* Remove old card-based styles for tips inside accordion */
.aeo-hints-category-body .aeo-tip-card {
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
	background: transparent;
	box-shadow: none;
}

/* Severity-based styling for list items */
.aeo-tip-item.aeo-severity-critical .aeo-tip-content {
	font-weight: 600;
}

.aeo-tip-item.aeo-severity-success .aeo-tip-content {
	color: #1d2327;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
	.aeo-tip-item {
		flex-wrap: wrap;
	}

	.aeo-tip-content {
		flex-basis: calc(100% - 32px);
	}

	.aeo-tip-item .aeo-tip-fix {
		margin-left: 32px;
		margin-top: 8px;
		width: calc(100% - 32px);
	}

	.aeo-tip-info::before {
		left: auto;
		right: 0;
		transform: none;
		max-width: 250px;
	}

	.aeo-tip-info::after {
		left: auto;
		right: 10px;
		transform: none;
	}
}