/* ========================================
   CSS Import Order - BELANGRIJK!
   1. Variables (design tokens) EERST
   2. Reset en base styles
   3. Layout
   4. Components
   5. Page-specific overrides
   ======================================== */

/* 1. Core - Variables EERST zodat ze overal beschikbaar zijn */
@import 'core/variables.css';
@import 'core/reset.css';
@import 'core/typography.css';

/* 2. Layout */
@import 'layout/grid.css';
@import 'layout/containers.css';
@import 'layout/responsive.css';

/* 3. Components */
@import 'components/buttons.css';
@import 'components/cards.css';  /* Oude cards terug - clean versie was te agressief */
@import 'components/dropdowns.css';
@import 'components/forms.css';
@import 'components/loading.css';
@import 'components/media.css';
@import 'components/navbar.css';
@import 'components/phase2-alerts.css';
@import 'components/phase3-competition.css';
@import 'components/progress.css';
@import 'components/tags.css';

/* 4. Utilities (na components zodat ze kunnen overriden) */
@import 'core/utilities.css';

/* 5. Page-specific styles */
@import 'phase4.css';

/* General logo styling - NOT for navbar */
.logo {
	max-width: 100px;
	height: auto;
	display: block;
}

/* Center logos in specific containers (not navbar) */
.ai-home-center .logo,
.card-body .logo,
.text-center .logo {
	margin-left: auto;
	margin-right: auto;
}

/* Navbar logo should NOT be centered */
.navbar-brand .logo {
	margin-left: 0;
	margin-right: 0;
}

/* Empty keyframes removed - were unused */

[id$="-content-display"] {
	display: block;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

[id$="-content-display"].d-none {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

[id$="-content-display"].rendered {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
	transition: opacity 0.2s ease-in-out;
}

[id$="-content-display"].rendering {
	visibility: hidden !important;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

[id$="-error-display"] {
	display: block;
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	margin: 0;
	z-index: 2;
	position: relative;
	width: 100%;
}

[id$="-error-display"] .alert {
	position: relative;
	z-index: 3;
	margin: 0.75rem 1rem;
	display: block;
	visibility: visible;
	border-radius: var(--radius-sm);
}

[id$="-error-display"].d-none {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

[id$="-error-display"].d-none [id$="-specific-error-component"] {
	display: none !important;
	visibility: hidden !important;
}

/* Override: When error is explicitly shown, always make it visible */
[id$="-specific-error-component"].error-visible {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
}

[id$="-progress-display"] {
	display: block;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

[id$="-progress-display"].d-none {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* ENTERPRISE FIX: Override d-none when progress is explicitly forced visible */
[id$="-progress-display"][data-force-visible="true"],
[id$="-progress-display"][data-loading-active="true"] {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Phase-specific progress element overrides */
[id*="inline-progress"][data-force-visible="true"],
[id*="inline-progress"][data-loading-active="true"],
[id*="progress-bar"][data-force-visible="true"],
[id*="progress-bar"][data-loading-active="true"],
[id*="progress-step"][data-force-visible="true"],
[id*="progress-step"][data-loading-active="true"],
[id*="progress-percentage"][data-force-visible="true"],
[id*="progress-percentage"][data-loading-active="true"] {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
}

[id$="-specific-error-component"] {
	display: block;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

[id$="-start-block"] {
	display: block;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

[id$="-start-block"].d-none {
	display: none;
	visibility: hidden;
	opacity: 0;
}

body {
	padding-top: 1rem;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	line-height: 1.6;
	position: relative;
}

/* 1. Base Reset */
html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    width: 100% !important;
    scrollbar-gutter: stable both-edges !important; /* CRITICAL: Perfect centering on all pages */
}

body, 
body.homepage-body, 
body.dashboard-body, 
body.admin-body, 
body.analysis-page-body {
	background-attachment: fixed;
	box-sizing: border-box !important;
	min-height: 100vh;
	overflow-x: hidden !important;
	overflow-y: visible !important; /* Prevents double scrollbars */
	width: 100%;
	line-height: 1.6;
	position: relative;
	background-color: transparent !important;
}

/* Scrollbar behaviors for specific pages */
/* Scrollbar behaviors for specific pages - CONSISTENT AUTHORITY */
/* Consolidated in Section 4 at end of file */

/* Homepage background is defined once in the .homepage-body section below */

body::before {
	display: none;
}

div, p, span {
	color: #495057;
	font-weight: 400;
	line-height: 1.65;
}

footer a, .footer a {
	color: #F0F0F0 !important;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
	opacity: 1;
}

footer a:hover, .footer a:hover {
	color: var(--accent-turquoise, #00D4AA) !important;
	text-decoration: underline;
	opacity: 1;
}

.homepage-body footer a:hover {
	color: var(--accent-turquoise, #00D4AA) !important;
}

footer, .footer,
footer span, 
.footer span {
	background: transparent;
	border-radius: 0;
	border-top: none;
	box-shadow: none;
	color: #F0F0F0 !important;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	margin-top: 2rem;
	padding: 1rem 0.5rem;
	text-align: center;
	width: 100%;
	z-index: 1; /* Lowered so card shadow (1001) wins */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	opacity: 1;
}

/* Consistently handle typography */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

#inline-progress {
	opacity: 1 !important;
	visibility: visible !important;
	display: block;
	position: relative;
	z-index: 9999;
}

/* ENTERPRISE FIX: Ensure all inline progress components are visible when active */
[id*="inline-progress"]:not(.d-none),
[id*="inline-progress"].active,
[id*="inline-progress"][data-force-visible="true"],
[id*="inline-progress"][data-loading-active="true"] {
	opacity: 1 !important;
	visibility: visible !important;
	display: block;
	position: relative;
	z-index: 9999;
}

/* Ensure progress containers are visible */
.inline-progress-container:not(.d-none),
.inline-progress-container.active,
.inline-progress-container[data-force-visible="true"],
.inline-progress-container[data-loading-active="true"] {
	opacity: 1 !important;
	visibility: visible !important;
	display: block;
}

/* Override any hiding for progress elements during active loading */
.progress-card,
.progress-container,
.progress {
	opacity: 1 !important;
	visibility: visible !important;
	display: block;
}

/* ENTERPRISE FIX: Hide navigation buttons during progress */
[id$="-progress-display"]:not(.d-none) ~ .card-footer,
[id$="-progress-display"][data-loading-active="true"] ~ .card-footer,
.card-body:has([id*="inline-progress"]:not(.d-none)) ~ .card-footer,
.card-body:has([id*="inline-progress"][data-loading-active="true"]) ~ .card-footer {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Alternative: Hide navigation buttons when any progress is visible */
[id*="previous-button"][data-hidden-during-loading="true"],
[id*="next-button"][data-hidden-during-loading="true"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Hide card footer (contains navigation buttons) when progress is active */
.phase-card:has([id*="progress-display"]:not(.d-none)) .card-footer,
.phase-card:has([id*="inline-progress"]:not(.d-none)) .card-footer,
.phase-card:has([data-loading-active="true"]) .card-footer {
	display: none !important;
}

/* OVERRIDE: Show card footer when content is visible (higher specificity) */
.phase-card:has([id*="content-area"]:not(.d-none)) .card-footer:not([data-hidden-during-loading="true"]),
.phase-card:has([id*="start-block"]:not(.d-none)) .card-footer:not([data-hidden-during-loading="true"]),
.phase-card:has([id*="error-display"]:not(.d-none)) .card-footer:not([data-hidden-during-loading="true"]) {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure the progress display takes full space when navigation is hidden */
[id$="-progress-display"]:not(.d-none) {
	margin-bottom: 1rem;
}

/* Force hide card footer when marked as hidden during loading */
.card-footer[data-hidden-during-loading="true"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
}

/* Phase 3 - Competitor URL Styling */
.competitor-url {
	transition: all 0.2s ease;
	padding: 2px 0;
	border-radius: 4px;
}

.competitor-url:hover {
	color: var(--bs-primary) !important;
	background-color: rgba(13, 110, 253, 0.05);
	padding: 2px 6px;
}

.competitor-url i {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.competitor-url:hover i {
	opacity: 1;
}

/* Phase 3 - Inline Text Links (in analysis summary) */
.inline-text-link {
	color: var(--bs-primary);
	text-decoration: none;
	border: none !important;
	outline: none !important;
	border-bottom: 1px solid rgba(13, 110, 253, 0.3);
	transition: all 0.2s ease;
	padding: 0 2px;
}

.inline-text-link:hover {
	color: var(--bs-primary);
	background-color: rgba(13, 110, 253, 0.08);
	border-bottom-color: var(--bs-primary);
	text-decoration: none;
}

/* ZenWave Tooltip Styling - Premium Dark Theme with Teal Accent */
.tooltip {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	z-index: 1080 !important;
}

.tooltip-inner {
	background: linear-gradient(135deg, rgba(10, 15, 20, 0.98) 0%, rgba(15, 25, 35, 0.98) 100%) !important;
	color: rgba(255, 255, 255, 0.95) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(20, 242, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	max-width: 260px !important;
	text-align: center !important;
	letter-spacing: 0.01em !important;
	border: 1px solid rgba(20, 242, 200, 0.2) !important;
}

/* Tooltip offset */
.tooltip.bs-tooltip-bottom,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] {
	margin-top: 15px; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] {
	margin-bottom: 15px; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-left,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] {
	margin-right: 15px !important; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-right,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] {
	margin-left: 15px !important; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
	border-bottom-color: rgba(10, 15, 20, 0.98) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
	border-top-color: rgba(10, 15, 20, 0.98) !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
	border-left-color: rgba(10, 15, 20, 0.98) !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
	border-right-color: rgba(10, 15, 20, 0.98) !important;
}

/* Force tooltips for progress steps to always appear below the icon */
.progress-steps.homepage .step[data-bs-toggle="tooltip"] {
	position: relative;
}

/* Ensure tooltips are positioned relative to the step-circle icon, not the entire step container */
.progress-steps.homepage .step .tooltip {
	position: absolute !important;
}

/* Force bottom placement for progress step tooltips - center horizontally */
.progress-steps.homepage .step[data-bs-toggle="tooltip"][data-bs-placement="bottom"] ~ .tooltip,
.progress-steps.homepage .step[data-bs-toggle="tooltip"][data-bs-placement="bottom"] + .tooltip,
.progress-steps.homepage .step .tooltip.bs-tooltip-bottom {
	transform: translateX(-50%) !important;
	left: 50% !important;
	top: calc(100% + 15px) !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
}

/* Premium tooltip class for enhanced styling */
.premium-tooltip .tooltip-inner {
	background-color: rgba(0, 0, 0, 0.85) !important;
	border-radius: var(--radius-md) !important;
	padding: 12px 16px !important;
	font-size: 0.875rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.ai-home-btn {
	width: 100%;
	min-width: 100%;
	justify-content: center;
}

.ai-home-btn {
	align-items: center;
	background: var(--color-primary) !important; /* Primary turquoise */
	border-radius: var(--radius-md);
	border: none !important;
	box-shadow: 0 4px 16px var(--color-primary-glow), 0 0 0 0 rgba(20, 242, 200, 0) !important;
	color: #0A0F14 !important; /* Dark text on turquoise */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	font-weight: 700;
	height: 54px !important;
	gap: 0.6rem;
	letter-spacing: 0.02em !important;
	padding: 0.8rem 2rem !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: auto;
	width: auto;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	text-shadow: none !important;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.ai-home-btn {
		min-width: 180px;
	}
}

.ai-home-btn::before {
	display: none;
}

.ai-home-btn:focus, .ai-home-btn:hover {
	background: #4FFFF0 !important; /* Glow-lighter variant on hover */
	background-color: #4FFFF0 !important;
	border: none !important;
	color: #0A0F14 !important; /* Dark text */
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px var(--border-strong), 0 0 0 0 rgba(20, 242, 200, 0) !important;
	box-shadow: 0 6px 24px rgba(0, 212, 170, 0.5), 0 0 30px rgba(0, 212, 170, 0.3) !important;
}

.ai-home-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 8px var(--border-strong) !important;
}

.ai-home-center {
	align-items: center;
	background: var(--bg-card) !important;
	border-radius: 22px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 2rem auto 0 auto;
	max-width: 550px;
	padding: 2.5rem 2rem;
	transition: all 0.2s ease;
	border: 1px solid rgba(0, 255, 200, 0.15) !important;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

.ai-home-center:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}

.ai-home-form {
	width: 100%;
	max-width: 100%;
	position: relative;
}

.ai-home-input {
	background: rgba(255, 255, 255, 0.08) !important;
	border-radius: var(--radius-md);
	border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 212, 170, 0) !important;
	font-size: clamp(0.95rem, 2vw, 1.05rem);
	font-family: 'Inter', sans-serif;
	outline: none;
	padding: 1rem 1.25rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	color: #ffffff;
	font-weight: 400;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	flex: 1;
}

.homepage-body .ai-home-input {
	color: #ffffff !important;
}

.homepage-body .ai-home-input::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
	font-size: clamp(0.85rem, 1.8vw, 0.95rem) !important;
}

.ai-home-input {
	width: 100%;
	margin-bottom: 0;
}

.ai-home-input-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	align-items: stretch;
}

@media (min-width: 768px) {
	.ai-home-input-group {
		flex-direction: row;
		gap: 1rem;
		align-items: stretch;
	}
	
	.ai-home-input {
		max-width: 580px;
		flex: 1 1 auto;
	}
	
	.ai-home-btn {
		flex-shrink: 0;
	}
}

@media (max-width: 767px) {
	.homepage-body .ai-home-input-group {
		flex-direction: column;
		gap: 1rem;
		width: 100% !important;
	}
	
	.homepage-body .ai-home-input {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 1rem;
		padding: 0.875rem 1rem !important;
	}
	
	.homepage-body .ai-home-btn {
		width: 100% !important;
		height: 50px !important;
		font-size: 1rem;
		padding: 0.75rem 1.5rem !important;
	}
	
	.homepage-body .ai-home-title {
		font-size: 1.75rem;
		margin-bottom: 0.75rem;
	}
	
	.homepage-body .ai-home-subtitle {
		font-size: 0.95rem;
		margin-bottom: 1.5rem;
		line-height: 1.6;
	}
}

.ai-home-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
	font-size: clamp(0.85rem, 1.8vw, 0.95rem);
}

.ai-home-input:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: var(--color-primary) !important; /* Primary turquoise */
	box-shadow: 0 0 0 3px rgba(20, 242, 200, 0.8), 0 0 20px var(--border-subtle), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important; /* Focus ring with 0.8 opacity */
	transform: none;
	outline: none;
}

.ai-home-subtitle {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 0.95rem !important;
	font-weight: 400;
	line-height: 1.5 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 0 !important;
	max-width: 85%;
	text-align: center;
	letter-spacing: 0.01em;
	opacity: 0.7;
}

.homepage-body .ai-home-subtitle {
	color: rgba(255, 255, 255, 0.6) !important;
}

.ai-home-title {
	color: #ffffff;
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.2;
	margin-bottom: 1.5rem !important;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.homepage-body .ai-home-title {
	color: #ffffff !important;
}

/* Remove key icon from general .ai-home-title on homepage content area */
.homepage-body .ai-home-center .ai-home-title::before {
    content: none !important;
}

.ai-home-title::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f084";
	margin-right: 0.75rem;
	font-size: 0.9em;
}

.alert-primary {
	background-color: #e8f5f5 !important;
	border-color: #b8d9db !important;
	color: var(--primary) !important;
}

.analysis-row:hover {
	cursor: pointer;
}

.apa-source-list {
	background: none;
	border-radius: 0;
	color: #222;
	font-size: 0.98em;
	list-style-type: decimal;
	margin: 0;
	padding-left: 1.5em;
	padding: 0.5em 0 0.5em 2em;
}

.apa-source-list a {
	color: #1a4e8a;
	text-decoration: underline;
	word-break: break-all;
}

.apa-source-list i {
	font-style: italic;
}

.apa-source-list li {
	background: none;
	border-radius: 0;
	line-height: 1.6;
	margin-bottom: 0.7em;
	padding: 0.2em 0;
}

.badge-primary, .badge.bg-primary {
	background-color: var(--primary) !important;
	color: #fff !important;
}

/* ============================================
   CUSTOM BADGE CLASSES - Product & Audience
   These override Bootstrap's default badge styling
   Used in Phase 2, 4, and 5 for consistent look
   HIGH SPECIFICITY to override Bootstrap and other CSS
   ============================================ */
.badge.badge-product,
.analysis-page-body .badge.badge-product,
.analysis-page-body .phase-card .badge.badge-product,
.analysis-page-body .card-body .badge.badge-product {
	background: var(--border-subtle) !important;
	color: var(--color-primary) !important;
	border: 1px solid rgba(20, 242, 200, 0.3) !important;
	font-size: 0.75em;
	font-weight: 500;
	padding: 0.35em 0.65em !important;
}

.badge.badge-audience,
.analysis-page-body .badge.badge-audience,
.analysis-page-body .phase-card .badge.badge-audience,
.analysis-page-body .card-body .badge.badge-audience {
	background: rgba(79, 195, 247, 0.15) !important;
	color: #4FC3F7 !important;
	border: 1px solid rgba(79, 195, 247, 0.3) !important;
	font-size: 0.75em;
	font-weight: 500;
	padding: 0.35em 0.65em !important;
}

.btn {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	border-radius: var(--radius-sm);
	padding: 0.65rem 1.3rem;
	font-size: 0.9rem;
	transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
}

/* NOTE: .btn-outline-primary is now in components/buttons.css */

.btn::before {
	display: none;
}

.container {
	max-width: 1150px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.container.flex-grow-1.main-content {
	padding-top: 0 !important;
}

/* Master container reset moved to end of file */

/* Login page: ensure container doesn't limit width */
.homepage-body .container.main-content:has(.login-page-wrapper) {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.credits-info-card .card-body.compact-credits {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
	padding: 0 !important;
}

.credits-info-card .credits-header {
	gap: 0.7rem;
	margin-bottom: 2.2rem;
	position: relative; /* For absolute positioned popup */
}

.credits-info-card .credits-list {
	margin-top: 1.7rem;
	align-self: flex-start;
	width: 100%;
}

.credits-info-card .dashboard-credits-action-list {
	gap: 0.5rem;
	text-align: left;
}

.credits-info-card .dashboard-credits-amount {
	color: var(--primary);
	font-size: 4.2rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.1;
	margin-bottom: 0.2rem;
	margin-bottom: 0.4rem;
}

.credits-info-card .dashboard-credits-buy {
	/* background: #2456a2 !important; */ /* Removed to use ai-home-btn background */
	/* border-radius: 100px; */ /* Removed to use ai-home-btn border-radius */
	border: none; /* Retained as it's compatible with ai-home-btn */
	/* box-shadow: none; */ /* Removed to use ai-home-btn box-shadow */
	color: #0A0F14 !important; /* Donkere tekst zoals homepage button */
	/* font-size: 1.13rem; */ /* Removed to use ai-home-btn font-size */
	/* font-weight: 700; */ /* Removed to use ai-home-btn font-weight */
	margin-top: 1.1rem; /* Consolidating margin-top, was duplicated */
	min-width: 0;
	/* padding: 0.48rem 1.5rem; */ /* Removed to use ai-home-btn padding */
	transition: background 0.15s, color 0.15s; /* This can be aligned later if needed */
}

.credits-info-card .dashboard-credits-buy:focus, .credits-info-card .dashboard-credits-buy:hover {
	/* background: #176072 !important; */ /* Removed to use ai-home-btn hover background */
	color: #0A0F14 !important; /* Donkere tekst behouden zoals homepage button */
}

.credits-info-card .dashboard-credits-label {
	color: var(--text-dark, #1e293b);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	margin-bottom: 0.7rem;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
}

/* Dashboard: Light text for credits label on dark background */
.dashboard-body .credits-info-card .dashboard-credits-label {
	color: var(--text-light) !important;
}

.dashboard-body .dashboard-credits-per-action-label {
	color: var(--text-secondary) !important;
}

.dashboard-body h6 {
	color: var(--text-secondary) !important;
}

.credits-info-card .dashboard-credits-per-action-label {
	margin-bottom: 1.2rem;
}

.dashboard-action-btn {
	border-radius: 50%;
	width: 2.4rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.dashboard-body, .homepage-body {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
	/* Add these for sticky footer */
	display: flex;
	flex-direction: column;
	min-height: 100vh !important;
	overflow-y: auto !important;
}

/* Dashboard and Analysis behavior unified below */

/* Unify Dashboard and Analysis body styles */
.analysis-page-body,
.dashboard-body {
	min-height: 100vh !important;
	height: auto !important;
	overflow-y: auto !important; /* Enable scrolling */
	position: relative;
	background: 
		var(--background-radial-highlight, radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%)),
		var(--homepage-background-gradient, linear-gradient(to bottom, #1a2832, #1e2d38, #243442)) !important;
	background-color: #1a2832 !important;
    background-attachment: fixed !important;
}

/* Ensure navigation buttons are always at the bottom of the card */
.analysis-page-body .phase-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Ensure html and body also have dark background when analysis-page-body is present */
html.admin-body,
html:has(.analysis-page-body),
html:has(.admin-body),
body.analysis-page-body,
body.admin-body {
	background: 
		var(--background-radial-highlight, radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%)),
		var(--homepage-background-gradient, linear-gradient(to bottom, #1a2832, #1e2d38, #243442)) !important;
	background-color: #1a2832 !important; /* Fallback - lighter anthracite */
}

/* Alternative selector for browsers that don't support :has() */
body.analysis-page-body,
body.analysis-page-body html,
body.admin-body,
html.admin-body {
	background: 
		var(--background-radial-highlight, radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%)),
		var(--homepage-background-gradient, linear-gradient(to bottom, #1a2832, #1e2d38, #243442)) !important;
	background-color: #1a2832 !important;
}

/* Override any Bootstrap or other CSS that might set white background - highest priority */
html.admin-body,
html body.analysis-page-body,
html body.admin-body,
body.analysis-page-body,
body.admin-body,
html:has(body.analysis-page-body),
html:has(body.admin-body) {
	background: 
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%),
		linear-gradient(to bottom, #1a2832, #1e2d38, #243442) !important;
	background-color: #1a2832 !important;
}

/* Ensure html and body also have dark background when dashboard-body is present */
html:has(.dashboard-body),
body.dashboard-body {
	background: 
		var(--background-radial-highlight, radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%)),
		var(--homepage-background-gradient, linear-gradient(to bottom, #1a2832, #1e2d38, #243442)) !important;
	background-color: #1a2832 !important; /* Fallback - lighter anthracite */
}

/* Alternative selector for browsers that don't support :has() */
body.dashboard-body,
body.dashboard-body html {
	background: 
		var(--background-radial-highlight, radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%)),
		var(--homepage-background-gradient, linear-gradient(to bottom, #1a2832, #1e2d38, #243442)) !important;
	background-color: #1a2832 !important;
}

/* Override any Bootstrap or other CSS that might set white background - highest priority */
html body.dashboard-body,
body.dashboard-body,
html:has(body.dashboard-body) {
	background: 
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%),
		linear-gradient(to bottom, #1a2832, #1e2d38, #243442) !important;
	background-color: #1a2832 !important;
}

.dashboard-card-tabs .card-body {
	padding: 0 !important;
}

.dashboard-card.credits-info-card {
	flex: 0 0 340px;
	max-width: 340px;
	min-width: 260px;
	order: 1;
}

.dashboard-card.dashboard-card-tabs {
	flex: 1 1 0;
	max-width: 900px;
	min-width: 320px;
	order: 2;
}

.dashboard-flex-row {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: flex-start;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}

.element-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

.element-visible {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Homepage body - CONSOLIDATED (was duplicated 4 times) */
.homepage-body,
html:has(.homepage-body),
html body.homepage-body {
	min-height: 100vh;
	overflow-y: auto;
	position: relative;
	background: 
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(36, 48, 60, 0.6) 0%, transparent 60%),
		linear-gradient(to bottom, #1a2832, #1e2d38, #243442);
	background-color: #1a2832;
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	color: #ffffff;
}

/* CONSOLIDATED: Navbar white text for all dark-background pages */
.homepage-body .navbar,
.homepage-body .navbar-brand,
.homepage-body .navbar-title,
.homepage-body .navbar-title-main,
.homepage-body .navbar-nav .nav-link,
.homepage-body .navbar .dropdown-toggle,
.homepage-body .navbar a,
.dashboard-body .navbar,
.dashboard-body .navbar-brand,
.dashboard-body .navbar-title,
.dashboard-body .navbar-title-main,
.dashboard-body .navbar-nav .nav-link,
.dashboard-body .navbar .dropdown-toggle,
.dashboard-body .navbar a,
.analysis-page-body .navbar,
.analysis-page-body .navbar-brand,
.analysis-page-body .navbar-title,
.analysis-page-body .navbar-title-main,
.analysis-page-body .navbar-nav .nav-link,
.analysis-page-body .navbar .dropdown-toggle,
.analysis-page-body .navbar a {
	color: #ffffff;
}

.homepage-body .navbar-title-sub,
.dashboard-body .navbar-title-sub,
.analysis-page-body .navbar-title-sub {
	color: var(--text-light);
}

.homepage-body .navbar-nav .nav-link:hover,
.homepage-body .navbar-nav .nav-link:focus,
.dashboard-body .navbar-nav .nav-link:hover,
.dashboard-body .navbar-nav .nav-link:focus,
.analysis-page-body .navbar-nav .nav-link:hover,
.analysis-page-body .navbar-nav .nav-link:focus {
	color: var(--color-primary);
	background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure icons also change color on hover */
.homepage-body .navbar-nav .nav-link:hover i,
.homepage-body .navbar-nav .nav-link:hover svg,
.homepage-body .navbar-nav .nav-link:focus i,
.homepage-body .navbar-nav .nav-link:focus svg,
.dashboard-body .navbar-nav .nav-link:hover i,
.dashboard-body .navbar-nav .nav-link:hover svg,
.dashboard-body .navbar-nav .nav-link:focus i,
.dashboard-body .navbar-nav .nav-link:focus svg,
.analysis-page-body .navbar-nav .nav-link:hover i,
.analysis-page-body .navbar-nav .nav-link:hover svg,
.analysis-page-body .navbar-nav .nav-link:focus i,
.analysis-page-body .navbar-nav .nav-link:focus svg {
	color: var(--color-primary) !important;
}

/* Dropdown menu styling for dashboard-body */
.dashboard-body .navbar .dropdown-menu {
	background-color: rgba(20, 24, 36, 0.95);
	border: 1px solid rgba(0, 255, 200, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(20, 242, 200, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--radius-md);
	padding: 0.5rem 0;
}

.dashboard-body .navbar .dropdown-menu .dropdown-item {
	color: var(--text-secondary);
	padding: 0.75rem 1.25rem;
	transition: all 0.2s ease;
}

.dashboard-body .navbar .dropdown-menu .dropdown-item:hover,
.dashboard-body .navbar .dropdown-menu .dropdown-item:focus {
	background-color: var(--border-subtle);
	color: var(--color-primary);
}

.dashboard-body .navbar .dropdown-menu .dropdown-item:hover i,
.dashboard-body .navbar .dropdown-menu .dropdown-item:focus i {
	color: var(--color-primary) !important;
}

.dashboard-body .navbar .dropdown-menu .dropdown-item.active,
.homepage-body .navbar .dropdown-menu .dropdown-item.active,
.analysis-page-body .navbar .dropdown-menu .dropdown-item.active {
	background-color: rgba(20, 242, 200, 0.2);
	color: var(--color-primary);
}

.dashboard-body .navbar .dropdown-menu .dropdown-item.active i,
.homepage-body .navbar .dropdown-menu .dropdown-item.active i,
.analysis-page-body .navbar .dropdown-menu .dropdown-item.active i {
	color: var(--color-primary) !important;
}

.dashboard-body .navbar .dropdown-divider,
.homepage-body .navbar .dropdown-divider,
.analysis-page-body .navbar .dropdown-divider {
	border-top-color: rgba(0, 255, 200, 0.15);
	margin: 0.5rem 0;
}

/* Dropdown menu styling for homepage-body and analysis-page-body */
.homepage-body .navbar .dropdown-menu,
.analysis-page-body .navbar .dropdown-menu {
	background-color: rgba(20, 24, 36, 0.95);
	border: 1px solid rgba(0, 255, 200, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(20, 242, 200, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--radius-md);
	padding: 0.5rem 0;
}

.homepage-body .navbar .dropdown-menu .dropdown-item,
.analysis-page-body .navbar .dropdown-menu .dropdown-item {
	color: var(--text-secondary);
	padding: 0.75rem 1.25rem;
	transition: all 0.2s ease;
}

.homepage-body .navbar .dropdown-menu .dropdown-item:hover,
.homepage-body .navbar .dropdown-menu .dropdown-item:focus,
.analysis-page-body .navbar .dropdown-menu .dropdown-item:hover,
.analysis-page-body .navbar .dropdown-menu .dropdown-item:focus {
	background-color: var(--border-subtle);
	color: var(--color-primary);
}

.homepage-body .navbar .dropdown-menu .dropdown-item:hover i,
.homepage-body .navbar .dropdown-menu .dropdown-item:focus i,
.analysis-page-body .navbar .dropdown-menu .dropdown-item:hover i,
.analysis-page-body .navbar .dropdown-menu .dropdown-item:focus i {
	color: var(--color-primary) !important;
}

/* Hamburger icon color */
.homepage-body .navbar-toggler-icon span {
	background: #ffffff;
}

/* CONSOLIDATED: Footer styling for dark-background pages */
.homepage-body .footer,
.homepage-body .footer a,
.homepage-body .footer span,
.dashboard-body .footer,
.dashboard-body .footer a,
.dashboard-body .footer span {
	color: var(--text-muted);
}

.homepage-body .footer a:hover,
.dashboard-body .footer a:hover {
	color: var(--color-primary);
}

.dashboard-body .footer a:hover {
	color: var(--color-primary) !important; /* Primary turquoise */
}

/* Analysis page footer - same white text styling as homepage */
.analysis-page-body .footer,
.analysis-page-body .footer a,
.analysis-page-body .footer span {
	color: var(--text-muted) !important;
}

.analysis-page-body .footer a:hover {
	color: var(--color-primary) !important; /* Primary turquoise */
}

.homepage-body .ai-home-center {
	background: var(--bg-card) !important; /* Slightly lighter for better contrast with new bg */
	border: 1px solid rgba(0, 255, 200, 0.15) !important; /* Subtle turquoise edge-highlight */
	border-radius: 22px !important; /* Increased border-radius for premium look */
	box-shadow: 
		0 25px 70px rgba(0, 0, 0, 0.25), 
		0 12px 40px rgba(0, 0, 0, 0.18),
		0 0 0 1px rgba(255, 255, 255, 0.04),
		0 0 60px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.06); /* More spread, softer shadow for "lift" */
	padding: 2.5rem 2.5rem; /* Reduced from 3.5rem 3rem */
	width: 100%;
	max-width: 680px !important;
	text-align: center;
	position: relative;
	z-index: 1001; /* Higher than footer (1000) to show shadow over footer */
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	color: #f0f0f0;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	margin-top: 0 !important; /* Reset shift since bar is at top */
	margin-bottom: 2rem; /* Reduced from 4rem */
}

/* Ensure login page card uses standard width - override base .ai-home-center */
body.homepage-body .ai-home-center.login-page-card,
.homepage-body .login-page-wrapper .ai-home-center.login-page-card {
	max-width: 500px !important;
	width: 100% !important;
	margin-top: 0 !important; /* Prevent negative margin from overlapping logo */
}


@media (max-width: 767px) {
	.homepage-body .ai-home-center {
		padding: 2rem 1.5rem !important; /* Reduced padding on mobile */
		border-radius: var(--radius-lg) !important; /* Slightly smaller radius on mobile */
		margin-left: auto !important; /* Center horizontally */
		margin-right: auto !important; /* Center horizontally */
		max-width: 93% !important; /* 92-94% max-width for better shadow visibility */
		margin-top: -30px !important; /* Maintain upward shift */
		margin-bottom: 3rem;
	}
	
}

.homepage-body .ai-home-center > * {
	position: relative;
	z-index: 1;
}

.homepage-body .ai-home-center::before {
	display: none;
}

.homepage-body .ai-home-center:hover {
	box-shadow: 
		0 30px 90px rgba(0, 0, 0, 0.32), 
		0 16px 50px rgba(0, 0, 0, 0.24),
		0 0 0 1px rgba(255, 255, 255, 0.06),
		0 0 40px rgba(0, 255, 200, 0.18), /* Subtle turquoise glow-shadow on hover */
		0 0 80px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Enhanced ambient glow on hover */
	transform: translateY(-4px);
	border-color: rgba(0, 255, 200, 0.22) !important; /* Slightly brighter turquoise border on hover */
}

/*
.homepage-body .navbar .container {
	padding-left: 0 !important; 
	padding-right: 0 !important; 
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1200px !important; 
}
*/

.homepage-body::after {
	display: none;
}

.homepage-body::before {
	display: none;
}

.main-content {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	position: relative;
}

/* Scrollbars handled by Master Scrollbar Control */

/* ==========================================================================
   MASTER SCROLLBAR CONTROL - Visible turquoise for Dashboard/Analysis
   ========================================================================== */

/* 1. Base Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(20, 242, 200, 0.4) !important; /* Muted turquoise with transparency */
    border-radius: 20px !important;
    border: 3px solid transparent !important; /* Slightly more border for a thinner look */
    background-clip: content-box !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(20, 242, 200, 0.7) !important; /* Slightly brighter on hover for feedback */
}

/* 2. Page Specific Visibility */
/* Dashboard & Analysis: Always show when content overflows on HTML only */
html:has(.dashboard-body),
html:has(.analysis-page-body),
html:has(.admin-body),
html.admin-body {
    overflow-y: auto !important;
}

/* 3. Homepage: VISUALLY hide scrollbar but keep for stability */
.homepage-body::-webkit-scrollbar-thumb {
    background-color: transparent !important;
}

.homepage-body::-webkit-scrollbar-track {
    background-color: transparent !important;
}

.homepage-body {
    scrollbar-width: none !important; /* Firefox */
    scrollbar-color: transparent transparent !important; /* Firefox */
}

/* 4. Ensure internal scrollbars also follow the theme */
.main-content::-webkit-scrollbar,
.container::-webkit-scrollbar {
    width: 8px !important;
}

.dashboard-body .main-content,
.analysis-page-body .main-content {
	min-height: auto !important;
	display: block !important;
	padding-top: 0.25rem !important; 
	padding-bottom: 2rem !important;
	overflow: visible !important; 
}

.admin-body .main-content,
.admin-body main {
	min-height: auto !important;
	display: block !important;
	padding-top: 0 !important; /* Admin specific: body padding handles it */
	padding-bottom: 2rem !important;
	overflow: visible !important; 
}

.homepage-body .main-content {
	min-height: auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important; 
	align-items: center !important;
	padding-top: 1rem !important;
	padding-bottom: 2rem !important;
	overflow: visible !important; 
}

@media (min-resolution: 1.25dppx) {
	.homepage-body .main-content,
    .dashboard-body .main-content,
    .analysis-page-body .main-content {
		padding-top: 1.5rem !important;
	}
}

@media (min-resolution: 1.5dppx) {
	.homepage-body .main-content,
    .dashboard-body .main-content,
    .analysis-page-body .main-content {
		padding-top: 2rem !important;
	}
}

@media (max-width: 767px) {
	.homepage-body .main-content {
		padding-top: 2.5rem !important; /* Increased from 1rem to add ~24px extra space between header and progress bar */
		padding-bottom: 3rem !important; /* Less padding on mobile */
		min-height: auto !important; /* Allow natural height on mobile */
	}
}

@media (min-width: 992px) {
	.homepage-body .main-content {
		padding-bottom: 4rem; /* Reduced from 8rem */
	}
}

.homepage-body .main-content .row {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.homepage-body .main-content .row .col-lg-11 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Progress bar wrapper styling for homepage (NOT for homepage-secondary) */
.homepage-body .progress-bar-analysis-wrapper:not(.homepage-secondary) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: 1.5rem;
	margin-top: -18px; /* Lower the progress bar 15-20px relative to header */
	overflow: visible;
	position: relative;
	z-index: 1;
}

/* Desktop-only adjustments (min-width: 1025px) */
@media (min-width: 1025px) {
	/* NOTE: Homepage secondary progress bar uses different margins defined later in this file */
	/* These rules apply to the main analysis page progress bar only */
	.homepage-body .progress-bar-analysis-wrapper:not(.homepage-secondary) {
		margin-top: 2px;
		margin-bottom: 0.25rem;
	}
	
	/* 3) Card-shadow subtieler maken: softer spread for "lift" effect */
	.homepage-body .ai-home-center {
		box-shadow: 
			0 25px 70px rgba(0, 0, 0, 0.2), 
			0 12px 40px rgba(0, 0, 0, 0.14),
			0 0 0 1px rgba(255, 255, 255, 0.03),
			0 0 60px rgba(0, 0, 0, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.05);
		margin-bottom: 1.5rem !important; /* Force reduction on desktop */
	}
	
	.homepage-body .ai-home-center:hover {
		box-shadow: 
			0 30px 90px rgba(0, 0, 0, 0.26), 
			0 16px 50px rgba(0, 0, 0, 0.2),
			0 0 0 1px rgba(255, 255, 255, 0.05),
			0 0 40px rgba(0, 255, 200, 0.14),
			0 0 80px rgba(0, 0, 0, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}
	
	/* 4) Spacing tussen input en CTA-knop: +8px extra gap */
	.homepage-body .ai-home-input-group {
		gap: 1.5rem; /* Increased from 1rem (16px) to 1.5rem (24px) = +8px */
	}
}

@media (max-width: 767px) {
	.homepage-body .progress-bar-analysis-wrapper:not(.homepage-secondary) {
		margin-top: -15px; /* Less negative margin on mobile */
		margin-bottom: 2.5rem;
		padding: 0 0.5rem;
	}
}

.homepage-body .progress-steps-bar-wrapper {
	background: transparent !important;
}

/* Progress bar line styling for homepage - more visible */
.homepage-body .progress-bar-bg {
	background: linear-gradient(to right, 
		transparent 0%, 
		rgba(255, 255, 255, 0.5) 3%, 
		rgba(255, 255, 255, 0.6) 50%, 
		rgba(255, 255, 255, 0.5) 97%, 
		transparent 100%) !important;
	height: 2.5px !important;
	opacity: 1 !important;
	border-radius: 1.5px !important;
}

.homepage-body .progress-bar-fg {
	background: linear-gradient(to right, 
		transparent 0%, 
		rgba(20, 242, 200, 0.8) 3%, 
		rgba(20, 242, 200, 0.85) 50%, 
		rgba(20, 242, 200, 0.8) 97%, 
		transparent 100%) !important; /* ZenWave official turquoise var(--color-primary) */
	height: 2.5px !important;
	box-shadow: 0 0 12px rgba(20, 242, 200, 0.5), 0 0 6px var(--border-strong); /* ZenWave turquoise glow */
	opacity: 1 !important;
	border-radius: 1.5px !important;
}

.nav-tabs#dashboardTabs .nav-link {
	color: var(--primary) !important;
}

.nav-tabs#dashboardTabs .nav-link.active, .nav-tabs#dashboardTabs .nav-link:focus, .nav-tabs#dashboardTabs .nav-link:hover {
	background-color: var(--bg-card) !important;
	border-color: var(--primary) var(--primary) var(--bg-card) !important;
	color: var(--primary) !important;
}

/* Dashboard nav-tabs: light text on dark background */
.dashboard-body .nav-tabs#dashboardTabs .nav-link {
	color: var(--text-muted) !important;
}

.dashboard-body .nav-tabs#dashboardTabs .nav-link.active, 
.dashboard-body .nav-tabs#dashboardTabs .nav-link:focus, 
.dashboard-body .nav-tabs#dashboardTabs .nav-link:hover {
	background-color: var(--bg-card) !important;
	border-color: var(--primary) var(--primary) var(--bg-card) !important;
	color: var(--primary) !important;
}

.nav-tabs#dashboardTabs .nav-link i { /* Ensure tab icons are also colored correctly */
	color: inherit !important;
}

.pagination .page-item.active .page-link {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: #fff !important;
}

.pagination .page-link {
	color: var(--primary) !important;
}

.pagination.dashboard-pagination .page-link {
	background-color: transparent !important;
	color: var(--primary) !important; /* Changed to primary color */
	border: 1px solid var(--border) !important; /* Light grey border */
}
.pagination.dashboard-pagination .page-item.active .page-link {
	background-color: var(--primary) !important; /* Primary background for active */
	border-color: var(--primary) !important;    /* Primary border for active */
	color: #ffffff !important;
}
.pagination.dashboard-pagination .page-item.disabled .page-link {
	color: #6c757d !important; /* Standard Bootstrap disabled color */
	background-color: transparent !important;
	border-color: var(--border) !important; /* Light grey border */
}

/* General button styling on dashboard - Matching homepage button */
body.dashboard-body .btn-primary {
	background-color: var(--color-primary) !important; /* Turquoise zoals homepage */
	border-color: var(--color-primary) !important;
	color: #0A0F14 !important; /* Donkere tekst zoals homepage */
	box-shadow: 0 4px 16px var(--color-primary-glow) !important;
	opacity: 1 !important;
	font-weight: 700; /* Bold zoals homepage */
}
body.dashboard-body .btn-primary:hover {
	background-color: #4FFFF0 !important; /* Lichtere turquoise zoals homepage */
	border-color: #4FFFF0 !important;
	color: #0A0F14 !important; /* Donkere tekst behouden */
	opacity: 1 !important;
	box-shadow: 0 6px 24px rgba(0, 212, 170, 0.5), 0 0 30px rgba(0, 212, 170, 0.3) !important;
	transform: translateY(-2px) !important; /* Hover lift effect */
}
body.dashboard-body .btn-primary:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 8px var(--border-strong) !important;
}
body.dashboard-body .btn-outline-secondary {
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: var(--text-secondary) !important;
	background-color: transparent !important;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	font-size: 1rem;
	transition: all 0.3s ease !important;
}

body.dashboard-body .btn-outline-secondary:hover {
	border-color: rgba(20, 242, 200, 0.5) !important;
	color: var(--color-primary) !important;
	background-color: rgba(20, 242, 200, 0.1) !important;
}

.homepage-body .ai-home-center .btn-outline-secondary#google-login:hover {
	border-color: #495057;
	background-color: rgba(0, 0, 0, 0.05);
	color: #212529;
}

/* Override icon for login page title - Remove icon */
.login-page-title.ai-home-title::before {
	content: none !important;
}

/* Logo in ai-home-center - logo.png is already WHITE, no invert needed */
.homepage-body .ai-home-center .logo {
	filter: none !important; /* Logo is already white */
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}

/* Reduce top margin of the login card (ai-home-center) on the login page */
.homepage-body .main-content > .ai-home-center {
	margin-top: 1rem;
}

/* Custom styling for login/signup status/error messages - Generalized */
.homepage-body .ai-home-center .alert {
	background-color: transparent;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--radius-sm);
	padding: 0.8rem 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center;
	font-size: 0.9rem;
	width: 100%;
}

.homepage-body .ai-home-center .alert-danger {
	color: #ff6b6b; /* Light red */
	border-color: rgba(255, 107, 107, 0.5);
}

.homepage-body .ai-home-center .alert-info {
	color: #4FFFF0; /* Primary light turquoise */
	border-color: rgba(79, 255, 240, 0.5);
}

.homepage-body .ai-home-center .alert-success {
	color: #2ecc71; /* Bright green */
	border-color: rgba(46, 204, 113, 0.5);
}

/* Pagination styling */
.pagination.dashboard-pagination .page-link {
    background-color: transparent !important;
    color: var(--primary) !important; /* Changed to primary color */
    border: 1px solid var(--border) !important; /* Light grey border */
}
.pagination.dashboard-pagination .page-item.active .page-link {
    background-color: var(--primary) !important; /* Primary background for active */
    border-color: var(--primary) !important;    /* Primary border for active */
    color: #ffffff !important;
}
.pagination.dashboard-pagination .page-item.disabled .page-link {
    color: #6c757d !important; /* Standard Bootstrap disabled color */
    background-color: transparent !important;
    border-color: var(--border) !important; /* Light grey border */
}

/* NOTE: Dashboard button styling moved to line ~1529 */

.homepage-body .ai-home-center .btn-outline-secondary#google-login:hover {
    border-color: #495057;
    background-color: rgba(0, 0, 0, 0.05);
    color: #212529;
}

/* Override icon for login page title - Remove icon */
.login-page-title.ai-home-title::before {
    content: none !important;
}

/* Logo in ai-home-center (duplicate rule - keeping for specificity) */
.homepage-body .ai-home-center .logo {
    filter: none !important; /* Logo is already white */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Reduce top margin of the login card (ai-home-center) on the login page */
.homepage-body .main-content > .ai-home-center {
    margin-top: 1rem; /* Reduce space above the card, use !important to override base .ai-home-center margin */
}

/* Custom styling for login status/error messages */
.homepage-body .ai-home-center #login-error.alert {
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.9rem;
    width: 100%;
}

.homepage-body .ai-home-center #login-error.alert-danger {
    color: #93212d;
    border-color: #f5c2c7;
}

.homepage-body .ai-home-center #login-error.alert-info {
    color: #002b58;
    border-color: #b8daff;
}

/* Standardized Content Section Titles */
.content-section-title {
  font-size: 1.75rem; /* Bootstrap's h2 size */
  font-weight: 600;
  color: var(--bs-heading-color, inherit);
  margin-top: 2rem;    /* Space above a new main section */
  margin-bottom: 1.25rem; /* Space below title, before content */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e6);
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Space between icon and text */
}

.content-section-title i {
  font-size: 1.35rem; /* Slightly smaller than title text */
  color: var(--primary); /* Or a consistent icon color */
  opacity: 0.9;
}

.content-subsection-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--neutral-800);
  text-shadow: none;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.content-subsection-title i {
  font-size: 1rem;
  color: var(--primary-blue);
  background: rgba(14, 165, 233, 0.1);
  padding: 0.4rem;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Analysis page: Light content-subsection-title with turquoise icon */
.analysis-page-body .content-subsection-title {
  color: var(--text-secondary) !important;
}

.analysis-page-body .content-subsection-title i {
  color: var(--color-primary) !important; /* ZenWave turquoise */
  background: var(--border-subtle) !important;
}

/* Remove bottom border for the last section title if needed, or manage spacing differently */
.analysis-section:last-child .content-section-title {
 /* border-bottom: none; */
}

/* Phase 4 - Content Strategy Workflow Steps */
#phase4-content-display .workflow-step-content {
  min-height: 300px; /* Default minimum height for workflow steps */
}

#phase4-content-display #article-results.workflow-step-content {
  min-height: 500px; /* Specific minimum height for the article results step */
}

/* Example of a utility class if many elements need this, though direct targeting is fine here */
/*
.min-h-300 { min-height: 300px !important; }
.min-h-500 { min-height: 500px !important; }
*/

/* Standardized Content Highlight Box - Dark theme */
.content-highlight-box {
  background-color: rgba(20, 242, 200, 0.05);
  padding: 1.5rem;
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  border: 1px solid rgba(20, 242, 200, 0.15);
  margin-bottom: 1.5rem;
}

/* Standardized Analysis Section margin */
.analysis-section {
  margin-bottom: 2.5rem;
}

.analysis-section:last-child {
  margin-bottom: 1rem; /* Smaller margin for the very last section on the page */
}

/* Standardized Structured List for Tips, Feedback, QA Issues etc. */
.structured-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.structured-list-item {
  padding: 0.85rem 0.25rem; /* Adjusted padding slightly */
  border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e6);
  display: flex;
  align-items: flex-start; /* Align icon with the start of the text block */
  gap: 0.85rem; /* Restored gap for spacing */
  font-size: 0.95rem;
  line-height: 1.6;
  background-color: transparent !important; /* Ensure no unwanted background */
}

.structured-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0.1rem; /* Reduce padding if no border */
}

.structured-list-item i {
  /*margin-top: 0.25rem; */ /* Adjust if needed based on icon size and line-height */
  color: var(--primary) !important; /* Use primary color variable */
  font-size: 1.1em; /* Relative to item text */
  width: 1.25em; /* Give icon a bit of fixed space for text-align to work */
  text-align: center;
  /* margin-right: 0.85rem; */ /* Removed */
  /* flex-shrink: 0; */ /* Removed for now, will re-evaluate */
}

/* Quality Score Display */
.quality-score-container {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.quality-score {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(20, 242, 200, 0.05);
  padding: 1rem 1.25rem;
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  border: 1px solid rgba(20, 242, 200, 0.15);
  border: 1px solid var(--bs-border-color-translucent, #dee2e6);
}

.quality-score i {
  font-size: 1.75rem;
  color: var(--bs-success); /* Default, kan JS aanpassen */
}

.quality-score span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bs-heading-color);
}

.quality-score.score-high i { color: var(--bs-success); }
.quality-score.score-medium i { color: var(--bs-warning); }
.quality-score.score-low i { color: var(--bs-danger); }

.structured-list-item .fas {
  color: var(--primary);
}
.structured-list-item .fab {
  color: var(--primary);
}

/* Force icon color for structured list items - Targeting Font Awesome SVG */
.structured-list-item svg.svg-inline--fa {
  color: var(--primary);
}

/* Specific color for lightbulb icons in structured lists */
.structured-list-item svg.fa-lightbulb {
  color: var(--bs-orange);
}

/* Logo on homepage/login page - logo.png is already WHITE, so NO invert needed */
.homepage-body .logo,
.homepage-body .text-center .logo,
body.homepage-body .logo {
  filter: none;
  display: block;
  visibility: visible;
  opacity: 1;
  max-width: 120px;
  height: auto;
}

.homepage-body .footer, 
.dashboard-body .footer {
	margin-top: 0.5rem;
	padding: 0.5rem 0.5rem;
	background: transparent;
}


/* Login page form spacing */
.homepage-body .ai-home-center.login-page-card .ai-home-title {
    margin-bottom: 1.5rem;
}

.homepage-body .ai-home-center.login-page-card .ai-home-form {
    margin-top: 0.5rem;
}

.homepage-body .ai-home-center.login-page-card .ai-home-input-group {
    margin-bottom: 1rem;
}

.homepage-body .ai-home-center.login-page-card .btn-primary {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.homepage-body .ai-home-center.login-page-card .divider-text {
    margin: 1.25rem 0;
}

.homepage-body .ai-home-center.login-page-card .btn-google {
    margin-bottom: 1.5rem;
}

.homepage-body .ai-home-center.login-page-card .login-links {
    margin-top: 1rem;
}

/* Login page bottom text and links - make readable on dark background */
.homepage-body .ai-home-center.login-page-card p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
}

.homepage-body .ai-home-center.login-page-card p a {
    color: var(--color-primary);
    text-decoration: none;
}

.homepage-body .ai-home-center.login-page-card p a:hover {
    color: var(--color-primary-hover, #4FFFF0);
    text-decoration: underline;
}

.homepage-body .ai-home-center.login-page-card .small {
    color: var(--text-muted);
}

.homepage-body .ai-home-center > * {
    position: relative;
    z-index: 1;
}

/* Fullscreen Mobile Menu Styles */
.fullscreen-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(26, 40, 50, 0.97); /* Updated to match new lighter anthracite bg */
    z-index: 1055; 
    display: none; 
    flex-direction: column;
    align-items: flex-start; 
    justify-content: flex-start; 
    padding: 20px; /* Reduced overall padding, specific spacing for brand below */
    overflow-y: auto; 
}

.fullscreen-menu-overlay.active {
    display: flex;
    padding: 0;
    margin: 0;
    text-align: left; /* Align text of list container to left */
}

.btn-close-fullscreen-menu {
    position: absolute;
    top: 20px; /* Adjusted to align with new padding */
    right: 20px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
}

.navbar-nav-fullscreen {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Ensure overall list alignment is left */
    margin-top: 110px; /* Provide space for the absolute positioned brand - INCREASED from 85px */
    padding-left: 20px; /* Indent menu items from the left edge */
    width: 100%; /* Ensure the UL takes full width for its padding to be effective */
}

.navbar-nav-fullscreen .nav-item {
    margin-bottom: 0.5rem; /* Reduced space between main items */
}

.navbar-nav-fullscreen .nav-item-separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 1rem auto; /* Reduced space around separator */
    width: 60%;
}

div.fullscreen-menu-overlay ul.navbar-nav-fullscreen li.nav-item a.nav-link {
    display: block;
    padding: 0.4rem 1rem;
    font-size: 1.3rem; 
    color: #f0f0f0; 
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: var(--radius-sm);
    line-height: 1.4; 
    height: auto !important; /* Override navbar.css height: 100% */
}

div.fullscreen-menu-overlay ul.navbar-nav-fullscreen li.nav-item a.nav-link:hover,
div.fullscreen-menu-overlay ul.navbar-nav-fullscreen li.nav-item a.nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

div.fullscreen-menu-overlay ul.navbar-nav-fullscreen li.nav-item a.nav-link i {
    margin-right: 0.75rem; 
    width: 20px; 
    text-align: center;
    font-size: 1em; /* Make icon size relative to link font size */
    line-height: 1; /* Try to make icon line height very compact */
    vertical-align: middle; /* Align icon with the middle of the text */
}

/* Keep navbar toggler visible and styled - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-toggler {
        z-index: 1060; /* Ensure toggler is above overlay when menu is closed, but can be clicked */
        border: none;
        padding: 0.5rem;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler-icon {
        background-image: none; /* Remove default Bootstrap icon */
        position: relative;
        width: 24px;
        height: 18px; 
        display: inline-block;
    }

    .navbar-toggler-icon span {
        display: block;
        background-color: #ffffff; /* White color for hamburger bars on dark background */
        height: 2px;
        width: 100%;
        border-radius: 1px;
        position: absolute;
        left: 0;
        transition: all 0.3s ease;
    }

    .navbar-toggler-icon span:nth-child(1) {
        top: 0;
    }

    .navbar-toggler-icon span:nth-child(2) {
        top: 8px;
    }

    .navbar-toggler-icon span:nth-child(3) {
        top: 16px;
    }
}

/* Optional: Animate hamburger to X when menu is active - needs JS to toggle a class on toggler */
.navbar-toggler.active .navbar-toggler-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.navbar-toggler.active .navbar-toggler-icon span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.active .navbar-toggler-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Hide default Bootstrap collapse behavior on mobile as we are using fullscreen */
@media (max-width: 991.98px) { 
    .navbar-collapse {
        display: none !important; /* Ensure Bootstrap's JS doesn't interfere */
    }
    .language-switcher {
        display: none; /* Hide desktop language switcher if it was visible on mobile */
    }
}

/* Ensure original navbar and its contents (logo, title) remain visible - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar {
        position: relative; /* Or sticky/fixed depending on your design */
        z-index: 1030; /* Standard Bootstrap navbar z-index */
    }
}

body.fullscreen-menu-open {
    overflow: hidden; /* Prevent scrolling of the background content */
}

/* Hide the original navbar-toggler (animated X) when fullscreen menu is open */
body.fullscreen-menu-open .navbar-toggler {
    z-index: 1050; /* Lower than the overlay's z-index of 1055, effectively hiding it */
}

div.fullscreen-menu-overlay ul.navbar-nav-fullscreen li.nav-item {
    width: 100%; /* Ensure list items take full width */
    text-align: left; /* Align text to the left */
    /* padding: 5px 0; */ /* Reduced padding */
    margin-bottom: 0; /* Remove bottom margin */
    height: auto !important; /* Override conflicting height styles */
}

.fullscreen-menu-overlay .navbar-brand-overlay { /* This was previously .navbar-brand-o, ensure it's correct in HTML */
    display: flex;
    align-items: center;
    /* color: #f8f9fa !important; */ /* Text color for parent, individual elements will override */
    padding: 4px 8px; /* Reduced top/bottom padding, explicit L/R padding */
    position: absolute;
    top: 12px; /* Match navbar top padding */
    left: 10px; /* Match navbar .container left padding - MOVED 5px LEFT */
    right: auto; /* Explicitly ensure no pull to the right */
    z-index: 1051;
    height: 50px; /* Match original .navbar-brand height - REDUCED from 56px */
}

.fullscreen-menu-overlay .navbar-brand-overlay .logo {
    filter: none !important; /* Ensure logo is not inverted, original is dark */
    height: 32px; /* Match original logo height from navbar.css - REDUCED from 36px */
    width: 32px;  /* Match original logo width - REDUCED from 36px */
    margin-right: 0.5rem; /* Slightly less than 1.5rem, as overall brand height reduced - ADJUSTED from 0.6rem */
    object-fit: contain;
}

.fullscreen-menu-overlay .navbar-brand-overlay .navbar-title-main,
.fullscreen-menu-overlay .navbar-brand-overlay .navbar-title-sub {
    color: #f0f0f0 !important; /* Keep Light color for text on dark overlay */
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
}

.fullscreen-menu-overlay .navbar-brand-overlay .navbar-title-main {
    font-size: 1.0rem; /* Adjusted from 2.15rem for better fit with logo - REDUCED from 1.1rem */
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.fullscreen-menu-overlay .navbar-brand-overlay .navbar-title-sub {
    font-size: 0.6rem; /* Adjusted from 1.1rem - REDUCED from 0.65rem */
    font-weight: 400;
    letter-spacing: 0.15em;
    opacity: 0.85;
    margin-top: 1px; /* Adjusted from 4px - ADJUSTED from 2px */
}

.dashboard-container-outer /* Specific for dashboard */ {
    flex-grow: 1 !important;
}

.nav-tabs#dashboardTabs .nav-link {
// ... existing code ...
}

/* Card selection styling - base card is in cards.css */
/* NOTE: .analysis-page-body .card is nu in cards.css (regel 799) */

/* Dashboard cards - premium dark styling matching homepage hero card */
.dashboard-body .card {
  background: var(--bg-card) !important; /* Slightly lighter for better contrast */
  border: 1px solid rgba(0, 255, 200, 0.15) !important; /* Subtle turquoise edge-highlight */
  border-radius: var(--radius-lg) !important;
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.2), 
    0 12px 40px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 60px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #f0f0f0 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dashboard-body .card:hover {
  box-shadow: 
    0 30px 90px rgba(0, 0, 0, 0.26), 
    0 16px 50px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 40px rgba(0, 255, 200, 0.14),
    0 0 80px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-4px);
  border-color: rgba(0, 255, 200, 0.22) !important;
}

.dashboard-body .card-body {
  color: #f0f0f0 !important;
  background: transparent !important;
}

.dashboard-body .dashboard-card-tabs .card-body {
  background: transparent !important;
}

.dashboard-body .card-title,
.dashboard-body .card-header {
	color: #ffffff !important;
}

.dashboard-body .card-header.bg-light {
	background: rgba(20, 24, 36, 0.95) !important;
	border-bottom: 1px solid rgba(0, 255, 200, 0.15) !important;
	color: #ffffff !important;
}

.dashboard-body .card-header .text-dark {
	color: #ffffff !important;
}

/* Dashboard alert-info styling */
.dashboard-body .alert-info {
	background-color: var(--bg-card) !important;
	border: 1px solid rgba(20, 242, 200, 0.3) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text-secondary) !important;
	padding: 1.5rem;
}

.dashboard-body .alert-info i {
	color: var(--color-primary) !important; /* Turquoise icon */
}

/* Dashboard form elements */
.dashboard-body .form-control-plaintext {
	color: var(--text-secondary) !important;
}

.dashboard-body .col-form-label {
	color: var(--text-muted) !important;
}

.dashboard-body h4 {
	color: rgba(255, 255, 255, 0.95) !important;
}

.dashboard-body h4.text-dark {
	color: rgba(255, 255, 255, 0.95) !important;
}

/* Dashboard hr styling */
.dashboard-body hr {
	border-color: rgba(0, 255, 200, 0.15) !important;
	opacity: 0.3;
}

/* Dashboard btn-outline-primary */
.dashboard-body .btn-outline-primary {
	border-color: rgba(20, 242, 200, 0.5) !important;
	color: rgba(20, 242, 200, 0.9) !important;
	background: transparent !important;
}

.dashboard-body .btn-outline-primary:hover:not(:disabled) {
	background: rgba(20, 242, 200, 0.1) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}

.dashboard-body .btn-outline-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dashboard-body .form-text.text-muted {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Dashboard tab content - dark background */
.dashboard-body .tab-content {
	background: transparent !important;
}

.dashboard-body .tab-pane {
	background: transparent !important;
}

.dashboard-body .table-container {
	background: transparent !important;
}

/* Dashboard tables - light text on dark background */
.dashboard-body .table {
	color: var(--text-secondary) !important;
	background: transparent !important;
}

.dashboard-body .table thead {
	background-color: rgba(20, 24, 36, 0.6) !important;
	border-color: rgba(0, 255, 200, 0.15) !important;
}

.dashboard-body .table thead.bg-light {
	background-color: rgba(20, 24, 36, 0.6) !important;
}

.dashboard-body .table thead th {
	color: var(--text-secondary) !important;
	border-color: rgba(0, 255, 200, 0.15) !important;
	background-color: rgba(20, 24, 36, 0.6) !important;
}

.dashboard-body .table tbody {
	background: transparent !important;
}

.dashboard-body .table tbody tr {
	border-color: rgba(255, 255, 255, 0.1) !important;
	background: transparent !important;
}

.dashboard-body .table tbody td {
	color: rgba(255, 255, 255, 0.85) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	background: transparent !important;
}

.dashboard-body .table tbody tr:hover {
	background-color: rgba(20, 242, 200, 0.08) !important;
}

.dashboard-body .text-muted {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Analysis page: text-muted should be readable */
.analysis-page-body .text-muted {
	color: rgba(255, 255, 255, 0.7) !important;
}

.analysis-page-body small.text-muted,
.analysis-page-body .small.text-muted {
	color: rgba(255, 255, 255, 0.65) !important;
}

.dashboard-body .url-link {
	color: var(--text-muted) !important;
}

/* Dashboard phase icons - smaller size and turquoise colors */
.dashboard-body .phase-icon {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.3) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.dashboard-body .phase-icon i {
	font-size: 9px !important;
	color: inherit !important;
}

.dashboard-body .phase-icon.completed {
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.dashboard-body .phase-icon.completed i {
	color: var(--color-primary) !important;
}

.dashboard-body .phase-icon.completed:hover {
	color: #4FFFF0 !important;
	border-color: #4FFFF0 !important;
	transform: scale(1.1);
}

/* Override phase-specific colors for dashboard - all same turquoise */
.dashboard-body .phase-icon.phase-1,
.dashboard-body .phase-icon.phase-2,
.dashboard-body .phase-icon.phase-3,
.dashboard-body .phase-icon.phase-4,
.dashboard-body .phase-icon.phase-5 {
	background-color: transparent !important;
}

.dashboard-body .phase-icon.completed.phase-1,
.dashboard-body .phase-icon.completed.phase-2,
.dashboard-body .phase-icon.completed.phase-3,
.dashboard-body .phase-icon.completed.phase-4,
.dashboard-body .phase-icon.completed.phase-5 {
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.dashboard-body .phase-icon.completed.phase-1 i,
.dashboard-body .phase-icon.completed.phase-2 i,
.dashboard-body .phase-icon.completed.phase-3 i,
.dashboard-body .phase-icon.completed.phase-4 i,
.dashboard-body .phase-icon.completed.phase-5 i {
	color: var(--color-primary) !important;
}

/* Dashboard: Remove any white backgrounds from Bootstrap components */
.dashboard-body .table-responsive {
	background: transparent !important;
}

.dashboard-body input[type="checkbox"] {
	accent-color: var(--color-primary) !important; /* Turquoise checkbox */
}

.dashboard-body .btn-danger {
	background-color: #e31837 !important;
	border-color: #e31837 !important;
}

.dashboard-body .btn-danger:hover {
	background-color: #c4162f !important;
	border-color: #c4162f !important;
}

/* Dashboard action/delete buttons - consolidated */
.dashboard-body .dashboard-action-btn,
.dashboard-body .dashboard-action-icon,
.dashboard-body .delete-btn {
	color: #ffffff !important;
	background: transparent !important;
	border: none !important;
	transition: color 0.2s ease, background 0.2s ease;
}

.dashboard-body .dashboard-action-btn i,
.dashboard-body .dashboard-action-icon i,
.dashboard-body .delete-btn i {
	color: #ffffff !important;
	font-size: 1.1rem;
}

.dashboard-body .dashboard-action-btn:hover,
.dashboard-body .dashboard-action-icon:hover,
.dashboard-body .delete-btn:hover {
	color: #ffffff !important;
	background: rgba(227, 24, 55, 0.2) !important;
}

.card.selected {
  background-color: var(--bs-primary);
  color: white;
  border: none;
}

.card.selected .card-title,
.card.selected .card-body {
  color: white;
}

/* Phase 4 container styling moved to phase4.css to avoid conflicts */

/* Article Content Styling */
#article-results {
    padding: 0;
    background: transparent;
}

.content-highlight-box {
    background-color: rgba(20, 242, 200, 0.05);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    margin: 0;
    border: 1px solid rgba(20, 242, 200, 0.15);
    position: relative;
}

.article-content-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

#article-title {
    font-size: 2.8rem;
    margin: 0 0 1.5rem 0;
    color: #333;
    text-align: left;
    background: transparent !important;
    padding: 0;
    line-height: 1.2;
    font-weight: 700;
}

.article-text-content {
    max-width: 100%;
}

.article-image-container {
    float: right;
    width: 45%;
    margin-left: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    margin-top: -1rem; /* Pull the image up slightly to align with text start */
}

.article-image-styled {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#article-introduction {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
    font-style: italic;
    font-family: Georgia, serif;
    clear: left; /* Ensure text starts after the title */
}

#article-body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1rem;
}

#article-conclusion {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1rem;
}

#article-cta {
    font-size: 1.2rem;
    font-weight: 500;
    color: #007bff;
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(0,123,255,0.1);
    border-radius: var(--radius-sm);
    clear: both; /* Ensure CTA appears below the image */
    transition: none !important;
}

#article-cta:hover {
    background: rgba(0,123,255,0.1) !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* Responsive adjustments - CONSOLIDATED for max-width: 768px */
@media (max-width: 768px) {
    /* Article styling */
    .article-image-container {
        float: none;
        width: 100%;
        margin: 1.5rem 0;
        margin-top: 0;
    }
    #article-title { font-size: 2rem; margin-bottom: 1.5rem; }
    .content-highlight-box { padding: 1.5rem; border-radius: var(--radius-sm); }

    /* Transactions */
    .transaction-item .col-md-2,
    .transaction-item .col-md-6,
    .transaction-item .col-md-4 {
        text-align: center;
        margin-bottom: 1rem;
    }
    .transaction-item .col-md-4:last-child { margin-bottom: 0; }
    .icon-circle { width: 40px; height: 40px; font-size: 1rem; }
}

/* Ensure error displays in phase cards are properly contained */
.phase-card [id$="-error-display"] {
    order: 2; /* Place after header */
    margin: 0;
    padding: 0;
}

.phase-card .card-body {
    display: flex;
    flex-direction: column;
}

/* Competition Strategy Advice Styling - Phase 3 */
.advice-category {
  margin-bottom: 1.5rem;
}

.advice-category-title {
  color: #6f42c1;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.advice-content {
  padding: 0.5rem 0;
}

.advice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.advice-item {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: rgba(20, 242, 200, 0.05);
  border: 1px solid rgba(20, 242, 200, 0.15);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.advice-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: #6f42c1;
}

.advice-item i {
  color: #6f42c1;
  margin-right: 0.75rem;
  font-size: 1.1em;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.advice-item div {
  flex: 1;
  line-height: 1.4;
  font-weight: 500;
}

.advice-item.text-muted {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.advice-item.text-muted:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #dee2e6;
}

/* Removed duplicate light theme .content-highlight-box - dark theme defined above */

.content-highlight-box p {
  margin: 0;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Analysis page: Dark theme for content-highlight-box */
.analysis-page-body .content-highlight-box {
  background: var(--bg-card) !important; /* Slightly lighter for better contrast */
  border: 1px solid rgba(0, 255, 200, 0.12) !important; /* Very subtle turquoise border */
  border-radius: var(--radius-md) !important; /* Matching other cards */
  padding: 2rem; /* Generous padding */
  margin: 0 !important; /* Remove any default margins */
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.15),
    0 0 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  outline: none !important; /* Remove any outline */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.analysis-page-body .content-highlight-box h4,
.analysis-page-body .content-highlight-box h3,
.analysis-page-body .content-highlight-box h5 {
  color: rgba(255, 255, 255, 0.95) !important; /* White text */
}

.analysis-page-body .content-highlight-box p,
.analysis-page-body .content-highlight-box .text-muted {
  color: rgba(255, 255, 255, 0.85) !important; /* Light gray text instead of muted */
}

.analysis-page-body .content-highlight-box small,
.analysis-page-body .content-highlight-box .text-muted small {
  color: var(--text-muted) !important; /* Slightly lighter gray for small text */
}

/* Competitor Card Styling Enhancements - Now handled by phase3-competition.css */
/* Removed old styling to avoid conflicts with new dark ZenWave theme */

/* Competition Analysis Summary */
#analysis-summary-section {
  border-left: 4px solid #6f42c1;
  padding-left: 1rem;
}

/* Improved Transactions Interface Styling */
.transaction-list {
    max-height: 600px;
    overflow-y: auto;
}

.transaction-item {
    transition: background-color 0.2s ease;
}

.transaction-item:hover {
    background-color: rgba(20, 242, 200, 0.05) !important;
}

.transaction-item:last-child {
    border-bottom: none !important;
}

.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.2rem;
}

.transaction-icon {
    text-align: center;
}

.transaction-content h6 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.transaction-amount .badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
}

/* Credit summary cards */
.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.text-white-75 {
    color: var(--text-secondary) !important;
}

/* Empty state styling */
.transaction-list .text-center {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Mobile responsiveness - moved to consolidated @media block */

/* Force hide card footer when marked as hidden during loading */
.card-footer[data-hidden-during-loading="true"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
}

/* Phase 3 - Competitor URL Styling */
.competitor-url {
	transition: all 0.2s ease;
	padding: 2px 0;
	border-radius: 4px;
}

.competitor-url:hover {
	color: var(--bs-primary) !important;
	background-color: rgba(13, 110, 253, 0.05);
	padding: 2px 6px;
}

.competitor-url i {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.competitor-url:hover i {
	opacity: 1;
}

/* Phase 3 - Inline Text Links (in analysis summary) */
.inline-text-link {
	color: var(--bs-primary);
	text-decoration: none;
	border: none !important;
	outline: none !important;
	border-bottom: 1px solid rgba(13, 110, 253, 0.3);
	transition: all 0.2s ease;
	padding: 0 2px;
}

.inline-text-link:hover {
	color: var(--bs-primary);
	background-color: rgba(13, 110, 253, 0.08);
	border-bottom-color: var(--bs-primary);
	text-decoration: none;
}

/* ZenWave Tooltip Styling - Premium Dark Theme with Teal Accent */
.tooltip {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	z-index: 1080 !important;
}

.tooltip-inner {
	background: linear-gradient(135deg, rgba(10, 15, 20, 0.98) 0%, rgba(15, 25, 35, 0.98) 100%) !important;
	color: rgba(255, 255, 255, 0.95) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(20, 242, 200, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	max-width: 260px !important;
	text-align: center !important;
	letter-spacing: 0.01em !important;
	border: 1px solid rgba(20, 242, 200, 0.2) !important;
}

/* Tooltip offset */
.tooltip.bs-tooltip-bottom,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] {
	margin-top: 15px; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] {
	margin-bottom: 15px; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-left,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] {
	margin-right: 15px !important; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-right,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] {
	margin-left: 15px !important; /* Increased from 7px to 15px for better floating effect */
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
	border-bottom-color: rgba(10, 15, 20, 0.98) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
	border-top-color: rgba(10, 15, 20, 0.98) !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
	border-left-color: rgba(10, 15, 20, 0.98) !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
	border-right-color: rgba(10, 15, 20, 0.98) !important;
}

/* Premium tooltip class for enhanced styling */
.premium-tooltip .tooltip-inner {
	background-color: rgba(0, 0, 0, 0.85) !important;
	border-radius: var(--radius-md) !important;
	padding: 12px 16px !important;
	font-size: 0.875rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* -------------------------------------------------------------------------- */
/* MASTER WIDTH & ALIGNMENT OVERRIDES - UNIFY ALL PHASES (1-5) */
/* -------------------------------------------------------------------------- */

/* 1. Force everything to the exact same max-width and center it */
.analysis-page-body .main-content .col-lg-11,
.analysis-page-body .analysis-container,
.analysis-page-body .phase-container,
.analysis-page-body .progress-bar-analysis-wrapper,
.analysis-page-body .phase-card,
.analysis-page-body .card,
.analysis-page-body #phase1-card,
.analysis-page-body #phase2-card,
.analysis-page-body #phase3-card,
.analysis-page-body #phase4-card,
.analysis-page-body #phase5-card,
.dashboard-body .main-content .col-lg-11,
.dashboard-body .dashboard-container-outer,
.dashboard-body .dashboard-flex-row {
    width: 100% !important;
    max-width: 1150px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 1b. SPA Visibility Fix: Only force display when NOT hidden by d-none */
.analysis-page-body .analysis-container:not(.d-none),
.analysis-page-body .phase-container:not(.d-none),
.analysis-page-body .phase-card:not(.d-none),
.analysis-page-body .card:not(.d-none),
.analysis-page-body #phase1-card:not(.d-none),
.analysis-page-body #phase2-card:not(.d-none),
.analysis-page-body #phase3-card:not(.d-none),
.analysis-page-body #phase4-card:not(.d-none),
.analysis-page-body #phase5-card:not(.d-none) {
    display: block !important;
}

/* 1c. Ensure progress bar is always block but respects d-none if applied */
.analysis-page-body .progress-bar-analysis-wrapper:not(.d-none) {
    display: block !important;
}

/* 2. Apply PREMIUM CARD styling ONLY to main phase cards (NOT the progress bar) */
.analysis-page-body .phase-card,
.analysis-page-body .card,
.analysis-page-body #phase1-card,
.analysis-page-body #phase2-card,
.analysis-page-body #phase3-card,
.analysis-page-body #phase4-card,
.analysis-page-body #phase5-card {
    background: var(--bg-card) !important;
    border: 1px solid rgba(0, 255, 200, 0.15) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Specific fixes for the Progress Bar on Analysis Pages */
.analysis-page-body .progress-bar-analysis-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 1.5rem !important;
}

.analysis-page-body .progress-bar-bg {
    width: auto !important;
    left: 10% !important; /* Start in middle of 1st circle (1/5th steps = 20% each) */
    right: 10% !important; /* End in middle of last circle */
    top: 18px !important; /* Centered for 36px circles */
}

.analysis-page-body .progress-bar-fg {
    left: 10% !important;
    top: 18px !important; /* Centered for 36px circles */
    /* width is dynamic (10%, 30%, 50%, 70%, 90%) */
}

/* 4. Specific fixes for actual inner cards/blocks to prevent visual clutter */
.analysis-page-body .card .card,
.analysis-page-body .card .analysis-card,
.analysis-page-body .card .content-highlight-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    margin-bottom: 1.25rem !important;
    border-radius: 16px !important;
    width: 100% !important;
}

/* 5. Keep standard info containers transparent to avoid "box-in-box" for simple text */
.analysis-page-body .card .info-container,
.analysis-page-body #phase1-card .info-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 2rem !important; /* Standard spacing between sections */
}

/* 6. Unified Phase Start Blocks & Primary Action Buttons - More compact & consistent */
[id$="-start-block"] .content-highlight-box,
.action-button-container {
    padding: 1.5rem 2rem !important; /* REDUCED further */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
}

[id$="-start-block"] .content-highlight-box p,
.action-button-container p {
    margin-bottom: 0.75rem !important; /* REDUCED */
    font-size: 1.0rem !important;
    line-height: 1.4 !important;
    max-width: 800px !important;
}

[id$="-start-cost-info"],
.action-cost-info {
    margin-top: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    font-size: 0.9rem !important;
    opacity: 0.85 !important;
    display: block !important;
}

.btn-lg.px-5,
[id$="-start-block"] .btn-lg,
#generate-article.btn-lg {
    padding: 0.6rem 2.5rem !important; /* More compact button */
    font-size: 1.0rem !important;
    min-width: 220px !important;
}

/* 5b. Specific overrides for tighter spacing in Phase 3 */
.analysis-page-body #analysis-summary-section {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}

.analysis-page-body #analysis-summary-section .structured-list,
.analysis-page-body #analysis-summary-section .analysis-summary-item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Target the container immediately following the summary */
.analysis-page-body #analysis-summary-section + .info-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.analysis-page-body #competitors-container {
    margin-top: 0 !important;
}

/* 3. Footer alignment - Glue buttons to the main card */
.analysis-page-body .card-footer {
    width: 100% !important;
    background: transparent !important; /* SEAMLESS: Inherit card background */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.5rem 2.5rem !important;
    margin-top: 0 !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.analysis-page-body .card-footer > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* 4. MASTER NAVIGATION BUTTONS UNIFICATION - Force 12px radius and ZenWave style */
.analysis-page-body .card-footer .btn,
.analysis-page-body .card-footer a.btn,
.analysis-page-body .card-footer button.btn,
.analysis-page-body #phase2-card .card-footer .btn,
.analysis-page-body #phase1-next-button,
.analysis-page-body #phase2-next-button,
.analysis-page-body #phase3-next-button,
.analysis-page-body #phase4-next-button,
.analysis-page-body #phase5-next-button {
    padding: 0.75rem 1.75rem !important;
    border-radius: 12px !important; /* FIXED: No more pills */
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid transparent !important;
}

/* Volgende / Primary style */
.analysis-page-body .card-footer .btn-primary,
.analysis-page-body .card-footer #phase1-next-button,
.analysis-page-body .card-footer #phase2-next-button,
.analysis-page-body .card-footer #phase3-next-button {
    background: var(--color-primary) !important;
    color: #0A0F14 !important;
    box-shadow: 0 4px 15px rgba(20, 242, 200, 0.25) !important;
}

.analysis-page-body .card-footer .btn-primary:hover:not(:disabled) {
    background: #4FFFF0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(20, 242, 200, 0.4) !important;
}

/* Vorige / Outline style */
.analysis-page-body .card-footer .btn-outline-secondary,
.analysis-page-body .card-footer #phase2-previous-button,
.analysis-page-body .card-footer #phase3-previous-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.analysis-page-body .card-footer .btn-outline-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* 2. Fix nested column issues that cause shrinking in Phase 3, 4, 5 */
.analysis-page-body .analysis-container .col-lg-11 {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 3. Unify Card Body Padding - identical internal spacing for all phases (NOT nested cards) */
.analysis-page-body .phase-card > .card-body,
.analysis-page-body #phase1-card > .card-body,
.analysis-page-body #phase2-card > .card-body,
.analysis-page-body #phase3-card > .card-body,
.analysis-page-body #phase4-card > .card-body,
.analysis-page-body #phase5-card > .card-body {
    padding: 2.5rem !important; /* Fixed broad padding for main cards only */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3b. Nested containers inside Phase 4/5 should NOT add extra padding */
.analysis-page-body #article-display-container,
.analysis-page-body #phase5-content-area,
.analysis-page-body #phase1-content-area,
.analysis-page-body #phase2-content-area,
.analysis-page-body #phase3-content-area,
.analysis-page-body #phase4-content-area .step-content {
    padding: 0 !important;
    margin-top: 0.75rem !important; /* REDUCED: Half of the previous spacing */
}

/* 4. Progress bar specific layout - Ensure full spread to 1150px and compact height */
.analysis-page-body .progress-bar-analysis-wrapper {
    width: 100% !important;
    max-width: 1150px !important;
    display: block !important;
    margin-top: 0 !important; /* Back to neutral 0 */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0.75rem !important;
    padding: 0 20px !important;
    flex: none !important;
}

.analysis-page-body .progress-steps {
    width: 100% !important;
    max-width: 1150px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 0.25rem 0 !important; /* Minimal vertical padding */
    gap: 0 !important; 
}

.analysis-page-body .step-circle {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important; /* Center vertically */
    background: #111d27 !important; /* Solid background to block the line */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    z-index: 10 !important; /* Above the line */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
}

.analysis-page-body .step-circle i {
    font-size: 13px !important; /* Explicitly force smaller icons */
    color: rgba(255, 255, 255, 0.8) !important;
    display: block !important;
    line-height: 1 !important;
}

.analysis-page-body .step.active .step-circle i {
    color: #000000 !important; /* Icon must be black on turquoise background */
}

.analysis-page-body .step.active .step-circle {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 15px rgba(20, 242, 200, 0.4) !important;
}

/* HOVER: Turquoise glow effect - consistent with homepage */
.analysis-page-body .step:hover .step-circle {
    background: #111d27 !important;
    border-color: #14F2C8 !important;
    box-shadow: 
        0 0 15px rgba(20, 242, 200, 0.8),
        0 0 30px rgba(20, 242, 200, 0.5),
        0 0 45px rgba(20, 242, 200, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.1) !important;
}

.analysis-page-body .step:hover .step-circle i {
    color: #14F2C8 !important;
}

.analysis-page-body .step:hover .step-text {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(20, 242, 200, 0.4) !important;
}

/* Don't change active step on hover - it's already turquoise */
.analysis-page-body .step.active:hover .step-circle {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 
        0 0 20px rgba(20, 242, 200, 0.6),
        0 0 40px rgba(20, 242, 200, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.analysis-page-body .step.active:hover .step-circle i {
    color: #000000 !important;
}

.analysis-page-body .step-text {
    font-size: 0.76rem !important;
    margin-top: 2px !important; /* Minimal gap */
}

.analysis-page-body .progress-bar-bg {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 18px !important; /* Centered for 36px circles */
    height: 1px !important; /* Thinner line */
}

.analysis-page-body .progress-bar-fg {
    left: 0 !important;
    top: 18px !important; /* Centered for 36px circles */
    height: 1px !important; /* Thinner line */
    /* width is handled by progress-width-X classes */
}

/* 5. Fix for SPA visibility */
.analysis-page-body .phase-container:not(.d-none) {
    display: block !important; /* Back to block for natural width */
}

/* Ensure main phase cards have a consistent height but nested list cards don't */
.analysis-page-body #phase1-card,
.analysis-page-body #phase2-card,
.analysis-page-body #phase3-card,
.analysis-page-body #phase4-card,
.analysis-page-body #phase5-card {
    min-height: 250px; 
}

.analysis-page-body .phase-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(0, 255, 200, 0.15) !important;
    border-radius: 22px !important;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.25), 
        0 12px 40px rgba(0, 0, 0, 0.18),
        0 0 60px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important; 
    overflow: hidden !important; 
}

/* Unify Background for phase card body/footer */
/* Rules consolidated in Master Overrides Section */


/* Ensure the colored phase header is visible and properly rounded */
.analysis-page-body .card-header {
    border: none !important;
    border-bottom: 1px solid rgba(0, 255, 200, 0.1) !important;
    padding: 1.25rem 2.5rem !important; /* Unified header padding */
}

.analysis-page-body .phase-card:hover,
.analysis-page-body .card:hover {
    border-color: rgba(0, 255, 200, 0.3) !important; /* Brighter border on hover */
    box-shadow: 
        0 30px 90px rgba(0, 0, 0, 0.26), 
        0 16px 50px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(0, 255, 200, 0.14), /* Turquoise glow */
        0 0 80px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 6. Footer and Navigation alignment */
/* Rules moved to Master Overrides Section for consistency */


/* -------------------------------------------------------------------------- */
/* OTHER OVERRIDES */
/* -------------------------------------------------------------------------- */

/* ==========================================================================
   FINAL SCROLLBAR MASTER CONTROL - Fixed for Dashboard & Homepage
   ========================================================================== */

/* Master Scrollbar Control handles all page specific scrollbar logic */

/* ==========================================================================
   MASTER NAVBAR UNIFICATION - Prevents "jumping" and inconsistent sizing
   ========================================================================== */

/* ==========================================================================
   ULTIMATE NAVBAR AUTHORITY - Unified Floating Pill Shape
   DESKTOP ONLY - Mobile styles are in mobile-navbar.css
   ========================================================================== */

/* 1. Global Reset & Base Structure - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar,
    .homepage-body .navbar,
    .dashboard-body .navbar,
    .admin-body .navbar,
    .analysis-page-body .navbar {
        position: fixed !important;
        top: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 40px) !important;
        max-width: 1150px !important;
        height: 70px !important;
        min-height: 70px !important;
        padding: 0 20px !important; /* MATCH CONTENT PADDING */
        margin: 0 !important;
        border-radius: 50px !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: all 0.3s ease !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* 2. Page-Specific Backgrounds & Resets - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar, 
    .navbar-pill-shape,
    .homepage-body .navbar,
    .homepage-body .navbar-pill-shape {
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .dashboard-body .navbar,
    .dashboard-body .navbar-pill-shape,
    .admin-body .navbar,
    .admin-body .navbar-pill-shape,
    .analysis-page-body .navbar,
    .analysis-page-body .navbar-pill-shape {
        background: rgba(0, 0, 0, 0.2) !important;
        background-color: transparent !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
}

/* 3. Typography & Elements - White for dark-background pages - already defined earlier */

/* 4. Body compensation - Ensure content doesn't hide behind fixed navbar (DESKTOP ONLY) */
@media (min-width: 992px) {
    body, .homepage-body, .dashboard-body, .analysis-page-body {
        padding-top: 95px; /* navbar height 70px + top 15px + 10px buffer */
    }
}

/* Auth Pages (Login/Signup) - Remove header space and hide navbar */
body.auth-page {
    padding-top: 0;
}

body.auth-page .navbar {
    display: none;
}

.admin-body {
    padding-top: 65px; /* Admin specific compact spacing */
}

/* ==========================================================================
   MASTER ALIGNMENT AUTHORITY - Final Unification of Width & Position
   ========================================================================== */

/* 1. Reset ALL containers to be transparent wrappers first */
.container,
.container-fluid,
.analysis-container,
.dashboard-container-outer {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* 2. Force the 1150px grid on the absolute outermost layers ONLY */
.main-content,
body .main-content,
body.admin-body main .container,
body.admin-body footer .container {
    max-width: 1150px;
    width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Ensure the main container in admin doesn't get doubled padding if it's the 1150px grid */
body.admin-body main .container .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* Navbar specific grid - Inside the pill - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar .container,
    body .navbar .container {
        max-width: 100%;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* 1c. FORCED: Always keep scrollbar area to prevent layout shift */
/* html { overflow-y: scroll; } is already handled above */

/* 2. Neutralize all Bootstrap row/column shifts that expand the width */
.row, 
.analysis-container .row,
.dashboard-container-outer .row,
.main-content .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* 3. Ensure Logo & Navbar content align with the 1150px grid edge - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-brand {
        margin-left: 0;
        padding-left: 0;
    }

    .navbar-nav {
        margin-right: 0;
        padding-right: 0;
    }
}

/* Ensure all layout columns DONT add double padding */
.col-12,
.col-lg-11,
.analysis-container .col-12,
.analysis-container .col-lg-11,
.dashboard-container-outer .col-12,
.dashboard-container-outer .col-lg-11,
.main-content .col-12,
.main-content .col-lg-11 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* 2b. RE-ENABLE standard gutters for nested content rows (like inside cards) */
.phase-card .card-body .row,
.info-container .row,
.insights-grid .row,
#article-display-container .row,
#phase1-card .info-container .row.g-4,
body.admin-body main .admin-card .row,
body.admin-body main .dashboard-card .row,
body.admin-body main > .container > .row,
body.admin-body main > .container > .admin-container > .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    width: calc(100% + 1.5rem);
}

body.admin-body main .col-md-3,
body.admin-body main .col-md-4,
body.admin-body main .col-md-6,
body.admin-body main .col-md-8,
body.admin-body main .col-lg-3,
body.admin-body main .col-lg-9 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    flex: none; /* Allow Bootstrap to determine width based on col- class */
    width: auto; /* Allow Bootstrap to determine width based on col- class */
}

/* Specific overrides for admin grid columns to prevent the 100% width force */
body.admin-body main .col-md-3 { width: 25%; max-width: 25%; flex: 0 0 25%; }
body.admin-body main .col-md-4 { width: 33.333333%; max-width: 33.333333%; flex: 0 0 33.333333%; }
body.admin-body main .col-md-6 { width: 50%; max-width: 50%; flex: 0 0 50%; }
body.admin-body main .col-md-8 { width: 66.666667%; max-width: 66.666667%; flex: 0 0 66.666667%; }
body.admin-body main .col-lg-3 { width: 25%; max-width: 25%; flex: 0 0 25%; }
body.admin-body main .col-lg-9 { width: 75%; max-width: 75%; flex: 0 0 75%; }

.phase-card .card-body .col-md-4,
.info-container .col-md-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* 5. Add a small safety margin for smaller laptops (below 1200px) */
@media (max-width: 1200px) {
    .navbar .container,
    .main-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Ensure inner containers NEVER add double padding */
    .analysis-container,
    .dashboard-container-outer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 2. Unified Brand and Logo Sizing - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-brand,
    .homepage-body .navbar-brand,
    .dashboard-body .navbar-brand,
    .admin-body .navbar-brand,
    .analysis-page-body .navbar-brand {
        height: 70px;
        display: flex;
        align-items: center;
        margin-right: 2rem;
        margin-left: 0;
        padding: 0;
        flex-shrink: 0;
    }

    .navbar-brand .logo,
    .homepage-body .navbar-brand .logo,
    .dashboard-body .navbar-brand .logo,
    .admin-body .navbar-brand .logo,
    .analysis-page-body .navbar-brand .logo {
        width: 55px;
        height: 55px;
        margin-right: 15px;
        filter: none;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
    }
}

/* 3. Unified Title Typography - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-title,
    .homepage-body .navbar-title,
    .dashboard-body .navbar-title,
    .analysis-page-body .navbar-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 70px;
        padding: 0;
        margin: 0;
        width: 320px;
        min-width: 320px;
        max-width: 320px;
    }
}

/* Navbar title color already defined in consolidated section above */

/* Title typography - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-title-main,
    .navbar-title span:first-child {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin: 0;
        display: block;
    }

    .navbar-title-sub,
    .navbar-title span:last-child {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.72rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.8;
        margin-top: 2px;
        display: block;
    }
}

/* 4. Unified Nav Link Sizing and Spacing - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-nav .nav-link,
    .homepage-body .navbar-nav .nav-link,
    .dashboard-body .navbar-nav .nav-link,
    .analysis-page-body .navbar-nav .nav-link {
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.5rem 0.5rem;
        height: 44px;
        display: flex;
        align-items: center;
        border-radius: 50px;
        margin: 0 4px;
        transition: all 0.2s ease;
        white-space: nowrap;
        width: 155px;
        min-width: 155px;
        max-width: 155px;
        justify-content: center;
    }

    .navbar-nav .nav-link.active,
    .homepage-body .navbar-nav .nav-link.active,
    .dashboard-body .navbar-nav .nav-link.active,
    .admin-body .navbar-nav .nav-link.active,
    .analysis-page-body .navbar-nav .nav-link.active {
        background: rgba(20, 242, 200, 0.2);
        color: #14F2C8;
    }

    .navbar .nav-item.dropdown .nav-link {
        width: 170px;
        min-width: 170px;
        max-width: 170px;
    }
}

/* Nav link icons - DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar-nav .nav-link i,
    .navbar-nav .nav-link svg {
        font-size: 1.1rem;
        width: 1.1rem;
        height: 1.1rem;
        margin-right: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #ffffff;
    }

    .navbar-nav .nav-link.active i,
    .navbar-nav .nav-link.active svg {
        color: inherit;
    }
}

/* 5. Mobile Adjustments - REMOVED: All mobile navbar styles are now in mobile-navbar.css */

/* Homepage Secondary Phase Bar Mobile Fix */
@media (max-width: 767px) {
    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary {
        max-width: 100%;
        padding: 0 5px;
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }

    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-labels {
        display: block;
        padding-top: 30px;
    }

    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text,
    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text-line1,
    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text-line2 {
        font-size: 0.55rem;
        line-height: 1;
        width: 55px;
        text-align: center;
        display: block;
        margin: 0 auto;
        white-space: normal;
        color: rgba(255, 255, 255, 0.8) !important;
        font-weight: 500;
    }

    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-content {
        min-height: 65px;
    }

    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-circle {
        width: 28px;
        height: 28px;
        line-height: 28px;
    }

    .homepage-body .progress-bar-analysis-wrapper.homepage-secondary .progress-bar-bg {
        top: 20px !important; /* Center of 26px circles + container padding */
        left: 20px;
        right: 20px;
    }

    /* Main Action Card Mobile Fix */
    .homepage-body .ai-home-center {
        padding: 1.5rem 1.25rem;
        margin-top: 0.5rem;
        width: 94%;
        max-width: 94%;
    }

    .homepage-body .ai-home-title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }
}

/* Secondary Phase Bar for Homepage - Refined for compact spacing */
.homepage-body .progress-bar-analysis-wrapper.homepage-secondary {
    max-width: 650px;
    margin: 3rem auto 1rem auto; /* More space above */
    opacity: 0.8;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .progress-steps {
    padding: 0.1rem 1.5rem;
    display: flex;
    align-items: flex-start;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .progress-bar-bg {
    height: 1.5px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    top: 16px !important; /* Centered for 32px circles */
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-circle {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    background: #1a2832 !important; /* Solid dark background to hide the line */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease;
    transform: translateX(-50%) !important;
    margin-bottom: 0 !important;
    z-index: 10 !important; /* Ensure circles are above the line layer */
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-circle i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-content {
    gap: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .progress-steps.homepage .step-labels {
    padding-top: 30px !important; /* 32px circle - 2px (tighter spacing) */
    margin: 0 !important;
    min-height: auto !important;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text {
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    margin-top: 0 !important;
    line-height: 1.1 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text-line1,
.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text-line2 {
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.1 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .step-text br {
    line-height: 0.7 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: 0.4em !important;
}

/* Hover effect for secondary phase bar - glow only, no shift */
.progress-bar-analysis-wrapper.homepage-secondary .step:hover {
    transform: none; /* Prevent parent container shift */
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .progress-steps.homepage .step:hover .step-circle {
    transform: translateX(-50%) !important;
    background: #1a2832 !important;
    border-color: #14F2C8 !important;
    box-shadow: 
        0 0 15px rgba(20, 242, 200, 0.9),
        0 0 30px rgba(20, 242, 200, 0.7),
        0 0 50px rgba(20, 242, 200, 0.5),
        0 2px 8px rgba(0,0,0,0.2) !important;
}

.homepage-body .progress-bar-analysis-wrapper.homepage-secondary .progress-steps.homepage .step:hover .step-circle i {
    color: #14F2C8 !important;
}

.progress-bar-analysis-wrapper.homepage-secondary .step:hover .step-text {
    color: #ffffff;
    opacity: 1;
}


/* ==========================================================================
   PHASE 5 - VIDEO GENERATION STYLES
   ========================================================================== */

/* Script Selection Header */
.script-selection-header {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
}

.script-selection-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
}

/* Script Option Cards */
.script-option-card {
    background: rgba(20, 24, 36, 0.85);
    border: 2px solid rgba(20, 242, 200, 0.15);
    border-radius: 12px;
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.script-option-card:hover {
    border-color: rgba(20, 242, 200, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(20, 242, 200, 0.15);
}

.script-option-card .script-header {
    text-align: center;
    margin-bottom: 1rem;
}

.script-option-card .script-emoji {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.script-option-card .script-style-name {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.script-option-card .script-style-desc {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.script-option-card .script-preview {
    flex-grow: 1;
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    line-height: 1.7;
    padding: 1.25rem;
    background: rgba(20, 242, 200, 0.05);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.script-option-card .select-script-btn {
    width: 100%;
}

/* Script card recommended styling */
.script-option-card.recommended {
    position: relative;
    border-color: rgba(20, 242, 200, 0.4);
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.08), rgba(20, 24, 36, 0.85));
}

.script-option-card.recommended::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.05), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Cards Container Grid */
#phase5-card .cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #phase5-card .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Video Result Container - Article Layout */
#video-result-container .article-section {
    margin-bottom: 0.8rem;
    clear: none !important;
    display: block !important;
    position: static !important;
}

#video-result-container .article-section:first-child {
    margin-top: 0;
}

#video-result-container .article-text {
    clear: none !important;
    display: block !important;
}

#video-result-container .article-content {
    position: relative;
    overflow: visible;
    display: block;
}

#video-result-container .article-content::after {
    content: "";
    display: table;
    clear: both;
}

#video-result-container .video-container {
    display: block !important;
}

#video-article-cta:hover {
    background: rgba(0,123,255,0.1) !important;
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    #video-result-container .video-container {
        float: none !important;
        width: 100% !important;
        min-width: auto !important;
        margin: 1.5rem 0 !important;
    }
}

/* Selection Card */
.selection-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.selection-card:hover:not(.card-disabled) {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.selection-card.selected {
    border: 2px solid #14F2C8;
}

/* Recommended Badge - consistent across all phases */
/* Inline badge version (with text) */
.recommended-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #14F2C8, #10d4af);
    color: #0a0e17;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(20, 242, 200, 0.3);
    cursor: help;
    white-space: nowrap;
    vertical-align: middle;
}

.recommended-badge i {
    font-size: 9px;
}

/* Circle badge version (icon only) - for cards with position:relative */
.recommended-badge-circle {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #14F2C8, #10d4af);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0e17;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(20, 242, 200, 0.4);
    cursor: help;
    z-index: 10;
    /* pointer-events: auto - badge is hoverable for tooltip */
}

.recommended-badge-circle i {
    font-size: 11px;
}

/* Mobile tooltip for recommended badge */
.recommended-badge-circle[data-tooltip] {
    position: absolute;
}

.recommended-badge-circle .mobile-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #1a1f2e;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: normal;
    white-space: normal;
    width: 200px;
    max-width: 80vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-align: left;
    line-height: 1.4;
}

.recommended-badge-circle .mobile-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1a1f2e;
}

.recommended-badge-circle.tooltip-active .mobile-tooltip {
    display: block;
}

/* Mobile: larger touch target and show tooltip on tap */
@media (max-width: 768px) {
    .recommended-badge-circle {
        width: 32px;
        height: 32px;
        top: -10px;
        right: -10px;
        font-size: 14px;
    }
    
    .recommended-badge-circle i {
        font-size: 14px;
    }
}

.selection-card.recommended {
    position: relative;
    border-color: rgba(20, 242, 200, 0.3);
}

.selection-card.recommended::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.05), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Script card recommended styling */
.script-card.recommended {
    position: relative;
    border-color: rgba(20, 242, 200, 0.3);
}

.script-card.recommended::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.05), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Title card recommended styling */
.title-option.recommended {
    position: relative;
    border-color: rgba(20, 242, 200, 0.3);
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.08), transparent);
}

/* Insight card recommended styling (Phase 2) */
.insight-card.recommended {
    position: relative;
    border-color: rgba(20, 242, 200, 0.4) !important;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.08), rgba(20, 24, 36, 0.85)) !important;
}

.insight-card.recommended::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.05), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Insight item compact recommended styling (Phase 4) */
.insight-item-compact.recommended {
    position: relative;
    border-color: rgba(20, 242, 200, 0.4) !important;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.08), rgba(20, 24, 36, 0.85)) !important;
}

.insight-item-compact.recommended::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 242, 200, 0.05), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Source chip recommended styling */
.source-chip.recommended {
    border-color: rgba(20, 242, 200, 0.5) !important;
    background: rgba(20, 242, 200, 0.15) !important;
}

.card-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* Video Card */
.video-card {
    transition: transform 0.2s;
}

.video-card:hover {
    transform: translateY(-2px);
}

.video-player-wrapper video {
    border-radius: 8px;
}

/* Stat Card */
.stat-card {
    background: rgba(20, 24, 36, 0.85);
    transition: background 0.2s;
}

.stat-card:hover {
    background: rgba(20, 24, 36, 0.95);
}

/* Phase 5 Instruction Text */
.phase5-instruction-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Video Article Card */
.video-article-card {
    background: rgba(20, 24, 36, 0.85);
    border: 1px solid rgba(20, 242, 200, 0.18);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    transition: all 0.25s ease;
    position: relative;
}

.video-article-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 242, 200, 0.4);
    box-shadow: 0 6px 24px rgba(20, 242, 200, 0.12);
    background: rgba(25, 30, 45, 0.9);
}

/* Article Card Title */
.article-card-title {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
}

/* Video Start Action */
.video-start-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Video Action Icon */
.video-action-icon {
    width: 48px;
    height: 48px;
    background: rgba(20, 242, 200, 0.12);
    border: 2px solid rgba(20, 242, 200, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.video-action-icon i {
    font-size: 1.1rem;
    color: #14F2C8;
    margin-left: 3px;
    transition: transform 0.25s ease;
}

.video-start-label {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #14F2C8;
    white-space: nowrap;
}

.video-article-card:hover .video-action-icon {
    background: rgba(20, 242, 200, 0.2);
    border-color: #14F2C8;
    box-shadow: 0 0 16px rgba(20, 242, 200, 0.25);
}

.video-article-card:hover .video-action-icon i {
    transform: scale(1.15);
}

/* Cost Info Text */
.cost-info-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 0;
}

.cost-info-text i {
    color: #fbbf24;
    margin-right: 0.5rem;
}

.cost-info-text strong {
    color: #ffffff;
}

.cost-info-text .user-credit-balance {
    color: #14F2C8 !important;
}

/* Cost Badge */
.cost-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(20, 24, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.cost-badge .separator {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
}

.cost-badge i {
    color: #fbbf24;
}

/* Count Badge */
.count-badge {
    background: rgba(20, 242, 200, 0.12);
    color: #14F2C8;
    border: 1px solid rgba(20, 242, 200, 0.25);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Article Context Banner */
.article-context-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(20, 24, 36, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
}

.article-context-banner i {
    color: #14F2C8;
    font-size: 1rem;
}

.article-context-banner .label {
    color: rgba(255, 255, 255, 0.6);
}

.article-context-banner strong {
    color: #fff;
}

/* Video Exists Badge */
.video-exists-badge {
    font-size: 0.85rem;
}

/* Phase 5 Container Overrides */
#phase5-container .info-container {
    margin-bottom: 2rem;
}

#phase5-container .content-subsection-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0;
}

#phase5-container .content-subsection-title i {
    margin-right: 0.5rem;
    color: #14F2C8;
}

/* Generated Videos List Cards */
#generated-videos-list-container .card {
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid rgba(20, 242, 200, 0.18);
    background: rgba(20, 24, 36, 0.85);
}

#generated-videos-list-container .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 242, 200, 0.2), 0 0 20px rgba(20, 242, 200, 0.1);
    border-color: rgba(20, 242, 200, 0.35);
}

#generated-videos-list-container .card-body {
    padding: 1rem;
}

#generated-videos-list-container .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

#generated-videos-list-container .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

#generated-videos-list-container small {
    font-size: 0.875rem;
}

/* Generate Another Video Container */
#generate-another-video-container {
    text-align: center;
}

/* Last Phase Indicator */
.last-phase-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.last-phase-indicator i {
    color: #14F2C8;
    opacity: 0.7;
}

/* =====================================================
   CREDITS INFO POPUP (Mobile)
   ===================================================== */
/* Info button - hidden on desktop, visible on mobile */
.credits-info-btn {
    display: none;
    background: transparent;
    border: none;
    color: #14F2C8;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.credits-info-btn:hover {
    opacity: 1;
}

/* Popup - hidden by default */
.credits-info-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #0d1b2a !important; /* Solid dark background - not transparent */
    border: 1px solid rgba(20, 242, 200, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    min-width: 220px;
    max-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 9999;
}
.credits-info-popup.show {
    display: block;
}

.credits-info-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #ffffff;
}
.credits-info-popup-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}
.credits-info-popup-close:hover {
    opacity: 1;
}

.credits-info-popup-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.credits-info-popup-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.credits-info-popup-list li:last-child {
    border-bottom: none;
}
.credits-info-popup-list li i {
    width: 20px;
    color: #14F2C8;
    margin-right: 0.5rem;
}
.credits-info-popup-list li span {
    color: #14F2C8;
    font-weight: 600;
}

/* =====================================================
   MOBILE DASHBOARD IMPROVEMENTS
   ===================================================== */
@media (max-width: 1000px) {
    /* Show info button on mobile */
    .credits-info-btn {
        display: inline-block;
    }
    
    /* Override fixed width for credits card - make it full width like analyses card */
    .dashboard-card.credits-info-card {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible !important; /* Allow popup to overflow */
        position: relative !important;
        z-index: 100 !important; /* Higher than analyses card so popup shows on top */
    }
    
    .dashboard-card.credits-info-card .card-body,
    .dashboard-card.credits-info-card .credits-header {
        overflow: visible !important;
    }
    
    /* Hide credits per action list on mobile */
    .credits-info-card .credits-list {
        display: none !important;
    }
    
    /* Hide checkbox column (1st) and Phases column (4th) - keep Actions column (5th) visible */
    .dashboard-table th:nth-child(1),
    .dashboard-table td:nth-child(1),
    .dashboard-table th:nth-child(4),
    .dashboard-table td:nth-child(4) {
        display: none !important;
    }
    
    /* Date column - compact */
    .dashboard-table th:nth-child(2),
    .dashboard-table td:nth-child(2) {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 80px !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    
    /* Company column - take remaining space */
    .dashboard-table th:nth-child(3),
    .dashboard-table td:nth-child(3) {
        width: auto !important;
    }
    
    /* Company name - allow wrapping */
    .dashboard-table .dashboard-company-name {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    
    .dashboard-table .url-link {
        font-size: 0.75rem !important;
        word-break: break-all !important;
    }
    
    /* === TRANSACTIONS TABLE MOBILE IMPROVEMENTS === */
    /* Prevent horizontal scroll */
    #credits .table-responsive,
    #credits .table-container {
        overflow-x: hidden !important;
    }
    
    #credits .dashboard-table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    
    /* Hide header row on mobile - use card-style layout instead */
    #credits .dashboard-table thead {
        display: none !important;
    }
    
    /* Hide Actie column (2) and Credits column (4) */
    #credits-transaction-list .transaction-row td:nth-child(2),
    #credits-transaction-list .transaction-row td:nth-child(4) {
        display: none !important;
    }
    
    /* Make rows flex containers */
    #credits-transaction-list .transaction-row {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Date column - inline with URL */
    #credits-transaction-list td[data-label="Datum"] {
        order: 1 !important;
        width: auto !important;
        padding: 0 0.5rem 0 0 !important;
        display: inline-block !important;
    }
    
    #credits-transaction-list td[data-label="Datum"] .small {
        font-size: 0.7rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Details column - main content */
    #credits-transaction-list td[data-label="Details / URL"] {
        order: 2 !important;
        flex: 1 !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: inline-block !important;
    }
    
    #credits-transaction-list .transaction-url {
        font-size: 0.75rem !important;
        color: #14F2C8 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline !important;
    }
    
    #credits-transaction-list .transaction-description {
        display: block !important;
        width: 100% !important;
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        color: rgba(255, 255, 255, 0.5) !important;
        margin-top: 3px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* =====================================================
   CONSISTENT MOBILE TEXT SIZES ACROSS ALL PHASES
   Match Phase 1 text styling (0.85rem) in all other phases
   ===================================================== */
@media (max-width: 767px) {
    /* Base content text - match Phase 1 (0.85rem) */
    .phase-card .structured-list-item,
    .phase-card .insight-text,
    .phase-card .selection-card-title,
    .phase-card p,
    .phase-card li,
    .phase-card .card-text,
    #phase2-card .structured-list-item,
    #phase3-card .structured-list-item,
    #phase4-card .structured-list-item,
    #phase5-card .structured-list-item,
    #phase2-card p,
    #phase3-card p,
    #phase4-card p,
    #phase5-card p,
    .insights-grid .insight-text,
    .insight-item-compact span,
    .trend-item span,
    .pain-point-item span,
    .selection-card-title,
    /* Phase 3 specific elements */
    .advice-text,
    .analysis-summary-text,
    .advice-category-title,
    #competition-advice-section .structured-list-item,
    .competition-advice-item .advice-text,
    .conclusion-item .conclusion-text {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    /* Slightly smaller for meta info and secondary text */
    .phase-card .small,
    .phase-card .text-muted,
    .phase-card .badge,
    .source-chip {
        font-size: 0.75rem !important;
    }
}

/* =====================================================
   MOBILE BUTTONS - PREVENT TEXT CUTOFF IN PHASE 4 & 5
   ===================================================== */
@media (max-width: 767px) {
    /* Article action buttons - allow text to fit */
    .article-actions .btn,
    .article-actions .btn-outline-secondary,
    .article-actions .btn-outline-primary,
    #copy-article-btn,
    #copy-image-btn,
    #copy-video-article-btn,
    #download-video-link,
    .video-article-card .btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    
    /* Stack buttons vertically on small screens */
    .article-actions .d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* Generated articles list - view button */
    #generated-articles-list-container .article-view-link {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap !important;
    }
    
    /* Video article card buttons */
    .video-article-card .btn,
    .video-article-card a.btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Phase 5 - View full article alert - stack vertically */
    #phase5-card .alert.d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    #phase5-card .alert.d-flex .btn,
    #view-full-article-btn {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Phase 5 video article card - smaller title */
    #phase5-card .video-article-card h5,
    #phase5-card .article-card-title {
        font-size: 0.9rem !important;
    }
}

/* =====================================================
   MOBILE ARTICLE SECTIONS - CONSISTENT SPACING & PADDING
   ===================================================== */
@media (max-width: 767px) {
    /* Reduce margins between article sections on mobile */
    #article-body,
    #article-introduction,
    #article-conclusion,
    #article-cta {
        margin-bottom: 0.75rem !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Article section titles - tighter spacing */
    .article-section .section-title,
    #phase4-card .article-section h4 {
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Article sections - consistent spacing and no padding */
    .article-section.mb-4 {
        margin-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure all article text has no extra padding */
    .article-text,
    .article-content,
    .article-section,
    #article-body,
    #article-introduction,
    #article-conclusion,
    #article-cta,
    .article-conclusion {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* =====================================================
   MOBILE PROGRESS BAR - CENTER LINE THROUGH ICONS
   ===================================================== */
@media (max-width: 767px) {
    .homepage-body .progress-bar-bg,
    .homepage-body .progress-bar-fg {
        top: 19px !important; /* Center of 38px circles */
    }
}

@media (max-width: 480px) {
    .homepage-body .progress-bar-bg,
    .homepage-body .progress-bar-fg {
        top: 16px !important; /* Center of 32px circles */
    }
}