/**
 * Frontend Styles for Advanced Auto Product Information (AAP Info Box)
 * Step 1: Desktop-only single-column card.
 */

:root {
	--aap-primary: #22a35d;
	--aap-secondary: #3b7ddb;
	--aap-accent: #e8720f;
	--aap-bg-card: #ffffff;
	--aap-bg-soft: #f6f8fb;
	--aap-text-main: #10172a;
	--aap-text-muted: #6b7280;
	--aap-border: #e7eaf0;
	--aap-radius: 16px;
	--aap-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}

.aap-wrap {
	margin: 8px 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	box-sizing: border-box !important;
	color-scheme: light !important;
}

.aap-wrap *, .aap-wrap *::before, .aap-wrap *::after {
	box-sizing: border-box !important;
}

.aap-main-card {
	background: var(--aap-bg-card) !important;
	border: 1px solid var(--aap-border) !important;
	border-radius: var(--aap-radius) !important;
	padding: 2px !important;
	box-shadow: var(--aap-shadow) !important;
	max-width: 100% !important;
}

/* Header row: logo | title+tagline | rating/downloads */
.aap-box-header {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 5px !important;
	flex-wrap: wrap !important;
}

.aap-box-logo-wrapper {
	width: 92px !important;
	height: 92px !important;
	max-width: 92px !important;
	max-height: 92px !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	background: #eef2fb !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	position: relative !important;
}

.aap-box-logo {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Fallback icon is hidden by default - shown ONLY when the wrapper has
   .aap-no-logo (no featured image, or the image failed to load). This is
   class-based on purpose: the previous inline style="display:none" was
   being overridden by this stylesheet's !important rules, which made the
   SVG render beside the real logo and squeeze it. */
.aap-box-logo-fallback {
	display: none !important;
}

.aap-box-logo-wrapper.aap-no-logo .aap-box-logo-fallback {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.aap-box-logo-fallback svg {
	width: 60px !important;
	height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
}

.aap-box-title-details {
	min-width: 0 !important;
	flex: 1 1 80px !important;
}

.aap-box-title-details h2 {
	margin: 0 0 6px 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--aap-text-main) !important;
	line-height: 1.25 !important;
}

.aap-box-tagline {
	margin: 0 !important;
	font-size: 14.5px !important;
	color: var(--aap-text-muted) !important;
	line-height: 1.55 !important;
	max-width: 55ch !important;
}

.aap-box-side-stats {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 8px !important;
	flex-shrink: 0;
	margin-left: auto !important;
}

/* Rating stars + value grouped so the live-stats JS can show/hide the
   whole rating unit atomically. Keeps the previous stacked layout. */
.aap-stat-rating {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 6px !important;
}

/* Stat blocks rendered without data yet - revealed by live-stats JS the
   moment real numbers exist (works even on fully page-cached HTML). */
.aap-stat-hidden {
	display: none !important;
}

.aap-rating-stars {
	display: flex !important;
	gap: 2px !important;
}

.aap-star {
	fill: #e2e8f0 !important;
	flex-shrink: 0;
}

.aap-star.is-filled {
	fill: #f5b800 !important;
}

.aap-rating-line {
	display: flex !important;
	align-items: baseline !important;
	gap: 5px !important;
	font-size: 14px !important;
	background: var(--aap-bg-soft) !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
}

.aap-rating-val {
	font-weight: 700 !important;
	color: var(--aap-text-main) !important;
}

.aap-rating-count {
	color: var(--aap-text-muted) !important;
	font-size: 12.5px !important;
}

.aap-download-counter {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: var(--aap-secondary) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	white-space: nowrap !important;
	background: rgba(59, 130, 246, 0.1) !important;
	background: color-mix(in srgb, var(--aap-secondary) 10%, transparent) !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
}

.aap-download-counter svg {
	color: var(--aap-secondary) !important;
	flex-shrink: 0;
}

/* Highlight strip: File Size / Category / Updated / OS */
.aap-highlights-grid {
	display: flex !important;
	background: var(--aap-bg-soft) !important;
	border-radius: 12px !important;
	border: 1px solid var(--aap-border) !important;
	margin-bottom: 10px !important;
	overflow: hidden !important;
}

.aap-highlight-cell {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
	padding: 2px 2px !important;
	flex: 1 1 0 !important;
	border-right: 1px solid var(--aap-border) !important;
}

.aap-highlight-cell:last-child {
	border-right: none !important;
}

.aap-cell-icon {
	color: var(--aap-text-muted) !important;
	flex-shrink: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.aap-cell-icon svg {
	display: block !important;
}

.aap-cell-meta {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	gap: 2px !important;
}

.aap-meta-lbl {
	font-size: 13px !important;
	color: var(--aap-text-muted) !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.aap-meta-val {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--aap-text-main) !important;
	overflow-wrap: break-word;
	line-height: 1.3 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
}

/* Action buttons */
.aap-action-buttons-wrapper {
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}

.aap-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	padding: 8px 8px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	transition: filter 0.15s ease, transform 0.15s ease;
	cursor: pointer;
	border: none !important;
	flex: 1 1 0 !important;
	white-space: nowrap !important;
	color-scheme: light !important;
	filter: none !important;
	-webkit-filter: none !important;
	opacity: 1 !important;
}

.aap-btn,
.aap-btn:link,
.aap-btn:visited,
.aap-btn:hover,
.aap-btn:active,
.aap-btn:focus {
	text-decoration: none !important;
}

.aap-btn svg {
	flex-shrink: 0;
}

.aap-btn-download,
.aap-btn-download:link,
.aap-btn-download:visited,
.aap-btn-download:hover,
.aap-btn-download:active {
	background: var(--aap-primary) !important;
	color: #ffffff !important;
}
.aap-btn-trial,
.aap-btn-trial:link,
.aap-btn-trial:visited,
.aap-btn-trial:hover,
.aap-btn-trial:active {
	background: var(--aap-secondary) !important;
	color: #ffffff !important;
}
.aap-btn-buy,
.aap-btn-buy:link,
.aap-btn-buy:visited,
.aap-btn-buy:hover,
.aap-btn-buy:active {
	background: var(--aap-accent) !important;
	color: #ffffff !important;
}

.aap-btn:hover {
	filter: brightness(0.93);
	transform: translateY(-1px) !important;
}

/* Desktop-first: no responsive rules yet - added in the next step. */

/* ==========================================================================
   Sidebar Widget: Product Information / Compatibility / Security + Buttons
   ========================================================================== */

.aap-sidebar-wrap {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	box-sizing: border-box !important;
}

.aap-sidebar-wrap *, .aap-sidebar-wrap *::before, .aap-sidebar-wrap *::after {
	box-sizing: border-box !important;
}

.aap-sidebar-card {
	background: var(--aap-bg-card) !important;
	border: 1px solid var(--aap-border) !important;
	border-radius: var(--aap-radius) !important;
	padding: 16px !important;
	box-shadow: var(--aap-shadow) !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.aap-sidebar-card:hover {
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

.aap-sidebar-heading {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	padding-bottom: 12px !important;
	margin-bottom: 10px !important;
	border-bottom: 1px solid var(--aap-border) !important;
}

.aap-sidebar-heading svg {
	color: #ffffff !important;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--aap-secondary), #2563eb) !important;
	padding: 6px !important;
	border-radius: 8px !important;
	width: 28px !important;
	height: 28px !important;
	box-sizing: border-box !important;
}

.aap-sidebar-heading h4 {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--aap-text-main) !important;
}

.aap-sidebar-table {
	width: 100% !important;
	border-collapse: collapse !important;
}

.aap-sidebar-table tr {
	border-bottom: 1px solid #f1f5f9 !important;
}

.aap-sidebar-table tr:last-child {
	border-bottom: none !important;
}

.aap-sidebar-table th, .aap-sidebar-table td {
	padding: 9px 0 !important;
	font-size: 13px !important;
	text-align: left !important;
	vertical-align: top !important;
}

.aap-sidebar-table th {
	font-weight: 400 !important;
	color: var(--aap-text-muted) !important;
	width: 40% !important;
	white-space: nowrap !important;
}

.aap-sidebar-table td {
	color: var(--aap-text-main) !important;
	font-weight: 700 !important;
	text-align: left !important;
	overflow-wrap: anywhere;
	padding: 5px !important;
}

.aap-sidebar-table td a {
	color: var(--aap-secondary) !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

.aap-sidebar-compat-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.aap-sidebar-compat-list li {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--aap-text-main) !important;
	font-weight: 600 !important;
}

.aap-sidebar-compat-list li svg {
	color: var(--aap-primary) !important;
	flex-shrink: 0;
}

.aap-sidebar-hash-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin-bottom: 10px !important;
	font-size: 12.5px !important;
}

.aap-sidebar-hash-lbl {
	color: var(--aap-text-muted) !important;
	flex-shrink: 0;
}

.aap-sidebar-hash-val {
	font-family: Consolas, Monaco, monospace !important;
	font-size: 11.5px !important;
	background: var(--aap-bg-soft) !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	color: var(--aap-text-main) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.aap-sidebar-status-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 13px !important;
}

.aap-sidebar-status-lbl {
	color: var(--aap-text-muted) !important;
}

.aap-sidebar-status-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	color: #16a34a !important;
	font-weight: 700 !important;
}

.aap-sidebar-status-badge svg {
	flex-shrink: 0;
}

.aap-sidebar-buttons {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.aap-sidebar-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	padding: 13px 16px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: filter 0.15s ease, transform 0.15s ease;
	cursor: pointer;
	border: none !important;
	width: 100% !important;
}

.aap-sidebar-btn svg {
	flex-shrink: 0;
}

.aap-sidebar-btn-download {
	background: var(--aap-primary) !important;
	color: #ffffff !important;
}
.aap-sidebar-btn-trial {
	background: var(--aap-secondary) !important;
	color: #ffffff !important;
}
.aap-sidebar-btn-buy {
	background: var(--aap-accent) !important;
	color: #ffffff !important;
}
.aap-sidebar-btn-official {
	background: #ffffff !important;
	border: 1px solid var(--aap-border) !important;
	color: var(--aap-text-main) !important;
}

.aap-sidebar-btn:hover {
	filter: brightness(0.93);
	transform: translateY(-1px) !important;
}
.aap-sidebar-btn-official:hover {
	background: var(--aap-bg-soft) !important;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

@media (max-width: 640px) {
	.aap-main-card {
		padding: 14px !important;
		border-radius: 14px !important;
	}

	/* Header: SAME structure as desktop - logo left, title starting
	   beside the logo's top corner, tagline under the title. Only the
	   rating/downloads stats drop to their own full-width row below. */
	.aap-box-header {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 10px !important;
		flex-wrap: wrap !important;
	}

	.aap-box-logo-wrapper {
		width: 64px !important;
		height: 64px !important;
		max-width: 64px !important;
		max-height: 64px !important;
		border-radius: 12px !important;
	}

	.aap-box-title-details {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	.aap-box-title-details h2 {
		font-size: 17px !important;
		line-height: 1.3 !important;
	}

	.aap-box-tagline {
		font-size: 12.5px !important;
		max-width: 100% !important;
	}

	.aap-box-side-stats {
		flex-direction: row !important;
		align-items: center !important;
		width: 100% !important;
		justify-content: flex-start !important;
		margin-left: 0 !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.aap-rating-line {
		font-size: 12px !important;
	}

	.aap-download-counter {
		font-size: 11.5px !important;
	}

	/* Highlight strip: 4 columns is too tight on mobile - drop to a
	   modern rounded 2x2 grid instead of a flat flush strip. */
	.aap-highlights-grid {
		flex-wrap: wrap !important;
		border-radius: 12px !important;
		gap: 1px !important;
		background: var(--aap-border) !important;
		border: none !important;
		overflow: hidden !important;
	}

	.aap-highlight-cell {
		flex: 1 1 50% !important;
		min-width: 50% !important;
		padding: 12px !important;
		border: none !important;
		background: var(--aap-bg-card) !important;
	}

	.aap-cell-icon {
		background: var(--aap-bg-soft) !important;
		border-radius: 8px !important;
		width: 26px !important;
		height: 26px !important;
	}

	.aap-meta-lbl {
		font-size: 10.5px !important;
	}

	.aap-meta-val {
		font-size: 13px !important;
	}

	/* Buttons: stack full-width instead of a cramped 3-up row */
	.aap-action-buttons-wrapper {
		flex-direction: column !important;
		gap: 10px !important;
	}

	.aap-btn {
		width: 100% !important;
		padding: 13px 16px !important;
		font-size: 14px !important;
		border-radius: 10px !important;
	}
}

/* Highlight strip stays as a 2x2 grid at all mobile widths (see the
   640px breakpoint above) - a single-column layout looked too sparse. */

/* Sidebar widget: stays single-column at any width already, but tighten
   spacing slightly on narrow columns (common in mobile-optimizer themes
   that shrink the sidebar into a narrow strip). */
@media (max-width: 480px) {
	.aap-sidebar-card {
		padding: 12px !important;
	}

	.aap-sidebar-heading h4 {
		font-size: 14px !important;
	}

	.aap-sidebar-table th,
	.aap-sidebar-table td {
		font-size: 12px !important;
	}

	.aap-sidebar-btn {
		font-size: 13px !important;
		padding: 11px 14px !important;
	}
}

/* ==========================================================================
   Dark/Night Mode Compatibility (WP Mobile Optimizer Pro)
   ========================================================================== */

/* WP Mobile Optimizer Pro adds a "wao-dark" class to <html> when dark mode
   is active, and forces text colors inside ".wao-content" (the post-content
   wrapper our box is injected into) via broad selectors like
   ".wao-dark .wao-content a { color: #8ab4f8 !important }" and
   ".wao-dark .wao-content div/span/... { color: #e8eaed !important }".
   That's what was washing out our solid buttons and dark text. We pin our
   own colors back with matching specificity/!important so they always win
   regardless of dark mode state. */

html.wao-dark .aap-wrap {
	color-scheme: light !important;
}

html.wao-dark .aap-main-card {
	background: #ffffff !important;
	border-color: var(--aap-border) !important;
}

html.wao-dark .aap-box-title-details h2 {
	color: var(--aap-text-main) !important;
}

html.wao-dark .aap-box-tagline {
	color: var(--aap-text-muted) !important;
}

html.wao-dark .aap-meta-lbl {
	color: var(--aap-text-muted) !important;
}

html.wao-dark .aap-meta-val {
	color: var(--aap-text-main) !important;
}

html.wao-dark .aap-highlights-grid {
	background: var(--aap-bg-soft) !important;
	border-color: var(--aap-border) !important;
}

html.wao-dark .aap-highlight-cell {
	background: var(--aap-bg-card) !important;
}

html.wao-dark .aap-cell-icon {
	color: var(--aap-text-muted) !important;
	background: var(--aap-bg-soft) !important;
}

/* Buttons: .wao-content a { color: #8ab4f8 } was overriding our white
   button text - force it back on every link state. */
html.wao-dark .aap-btn,
html.wao-dark .aap-btn:link,
html.wao-dark .aap-btn:visited,
html.wao-dark .aap-btn:hover,
html.wao-dark .aap-btn:active {
	text-decoration: none !important;
}

html.wao-dark .aap-btn-download,
html.wao-dark .aap-btn-download:link,
html.wao-dark .aap-btn-download:visited {
	background: var(--aap-primary) !important;
	color: #ffffff !important;
}

html.wao-dark .aap-btn-trial,
html.wao-dark .aap-btn-trial:link,
html.wao-dark .aap-btn-trial:visited {
	background: var(--aap-secondary) !important;
	color: #ffffff !important;
}

html.wao-dark .aap-btn-buy,
html.wao-dark .aap-btn-buy:link,
html.wao-dark .aap-btn-buy:visited {
	background: var(--aap-accent) !important;
	color: #ffffff !important;
}

html.wao-dark .aap-rating-val,
html.wao-dark .aap-rating-count,
html.wao-dark .aap-download-counter {
	color: var(--aap-text-main) !important;
}

/* Sidebar widget coverage (also rendered inside .wao-content on archive/
   sidebar contexts, or directly in a theme sidebar outside .wao-content -
   covering both is safe since the selector is scoped to our own classes). */
html.wao-dark .aap-sidebar-wrap {
	color-scheme: light !important;
}

html.wao-dark .aap-sidebar-card {
	background: #ffffff !important;
	border-color: var(--aap-border) !important;
}

html.wao-dark .aap-sidebar-table th {
	color: var(--aap-text-muted) !important;
}

html.wao-dark .aap-sidebar-table td {
	color: var(--aap-text-main) !important;
}

html.wao-dark .aap-sidebar-btn-download,
html.wao-dark .aap-sidebar-btn-download:link,
html.wao-dark .aap-sidebar-btn-download:visited {
	background: var(--aap-primary) !important;
	color: #ffffff !important;
}

html.wao-dark .aap-sidebar-btn-trial,
html.wao-dark .aap-sidebar-btn-trial:link,
html.wao-dark .aap-sidebar-btn-trial:visited {
	background: var(--aap-secondary) !important;
	color: #ffffff !important;
}

html.wao-dark .aap-sidebar-btn-buy,
html.wao-dark .aap-sidebar-btn-buy:link,
html.wao-dark .aap-sidebar-btn-buy:visited {
	background: var(--aap-accent) !important;
	color: #ffffff !important;
}

html.wao-dark .aap-sidebar-btn-official,
html.wao-dark .aap-sidebar-btn-official:link,
html.wao-dark .aap-sidebar-btn-official:visited {
	background: #ffffff !important;
	color: var(--aap-text-main) !important;
	border-color: var(--aap-border) !important;
}

/* ==========================================================================
   Content Intro Section (Featured Image + First Paragraph)
   ========================================================================== */

.aap-content-intro {
	margin: 24px 0 !important;
	color-scheme: light !important;
	overflow: visible;
}

.aap-content-intro::after {
	content: "";
	display: table;
	clear: both;
}

.aap-content-intro-image {
	float: left !important;
	width: 280px !important;
	max-width: 40% !important;
	margin: 0 24px 12px 0 !important;
	border-radius: var(--aap-radius, 16px) !important;
	overflow: hidden !important;
}

.aap-content-intro-image img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: var(--aap-radius, 16px) !important;
	object-fit: cover !important;
}

.aap-content-intro-text {
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--aap-text-main, #10172a) !important;
}

.aap-content-intro-text p {
	margin: 0 !important;
}

@media (max-width: 640px) {
	.aap-content-intro-image {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 14px 0 !important;
	}
}

/* ==========================================================================
   Auto-Generated Content Tabs
   ========================================================================== */

.aap-content-tabs-container {
	margin: 24px 0 !important;
	color-scheme: light !important;
}

.aap-content-tabs-nav {
	display: flex !important;
	margin: 0 0 20px 0 !important;
	padding: 6px !important;
	list-style: none !important;
	border: none !important;
	background: var(--aap-bg-soft, #f6f8fb) !important;
	border-radius: 12px !important;
	gap: 4px !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}

.aap-content-tabs-nav li {
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	list-style: none !important;
	background: none !important;
}

/* Kill the bullet/dot the theme paints on list items (via list-style,
   ::marker, or decorative ::before/::after content) - these were the
   stray dots showing after every tab label. Applied to BOTH tab navs. */
.aap-content-tabs-nav li::marker,
.aap-info-tabs-nav li::marker {
	content: none !important;
}

.aap-content-tabs-nav li::before,
.aap-content-tabs-nav li::after,
.aap-info-tabs-nav li::before,
.aap-info-tabs-nav li::after {
	content: none !important;
	display: none !important;
}

.aap-info-tabs-nav,
.aap-info-tabs-nav li {
	list-style: none !important;
}

/* Thin, unobtrusive scrollbar for the horizontally scrolling tab nav
   (the default chunky scrollbar was overwhelming the nav on mobile). */
.aap-content-tabs-nav {
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}

.aap-content-tabs-nav::-webkit-scrollbar {
	height: 4px !important;
}

.aap-content-tabs-nav::-webkit-scrollbar-track {
	background: transparent !important;
}

.aap-content-tabs-nav::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, 0.4) !important;
	border-radius: 999px !important;
}

.aap-content-tabs-nav li a {
	display: block !important;
	padding: 10px 18px !important;
	color: var(--aap-text-muted, #6b7280) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	white-space: nowrap !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.aap-content-tabs-nav li a:hover {
	color: var(--aap-text-main, #10172a) !important;
}

.aap-content-tabs-nav li.active a {
	color: var(--aap-text-main, #10172a) !important;
	background: #ffffff !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
	font-weight: 700 !important;
}

.aap-content-tab-panel {
	display: none;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--aap-text-main, #10172a) !important;
}

.aap-content-tab-panel.active {
	display: block;
}

.aap-content-tab-panel img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 10px !important;
}

.aap-content-tab-panel table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 1em 0 !important;
}

.aap-content-tab-panel table th,
.aap-content-tab-panel table td {
	padding: 10px 12px !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	text-align: left !important;
}

@media (max-width: 640px) {
	.aap-content-tabs-nav {
		gap: 2px !important;
		padding: 4px !important;
	}

	.aap-content-tabs-nav li a {
		padding: 9px 12px !important;
		font-size: 13px !important;
	}

	.aap-content-tab-panel {
		font-size: 15px !important;
		overflow-wrap: break-word !important;
	}

	.aap-content-tab-panel table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* Dark-mode coverage for the intro section + tabs. BUG FIX: the previous
   rules pinned var(--aap-text-main) (= dark navy #10172a) in dark mode
   too, which rendered the intro/tab text BLACK on the dark background.
   Dark mode must use light text. Covers WP Mobile Optimizer Pro
   (html.wao-dark) plus the common dark-mode conventions. */
html.wao-dark .aap-content-intro-text,
html.wao-dark .aap-content-intro-text p,
html.dark .aap-content-intro-text,
html.dark .aap-content-intro-text p,
body.dark-mode .aap-content-intro-text,
body.dark-mode .aap-content-intro-text p,
[data-theme="dark"] .aap-content-intro-text,
[data-theme="dark"] .aap-content-intro-text p {
	color: #e2e8f0 !important;
}

html.wao-dark .aap-content-tabs-nav,
html.dark .aap-content-tabs-nav,
body.dark-mode .aap-content-tabs-nav,
[data-theme="dark"] .aap-content-tabs-nav {
	background: #1e293b !important;
}

html.wao-dark .aap-content-tabs-nav li a,
html.dark .aap-content-tabs-nav li a,
body.dark-mode .aap-content-tabs-nav li a,
[data-theme="dark"] .aap-content-tabs-nav li a {
	color: #94a3b8 !important;
}

html.wao-dark .aap-content-tabs-nav li.active a,
html.dark .aap-content-tabs-nav li.active a,
body.dark-mode .aap-content-tabs-nav li.active a,
[data-theme="dark"] .aap-content-tabs-nav li.active a {
	color: #f1f5f9 !important;
	background: #334155 !important;
}

html.wao-dark .aap-content-tab-panel,
html.wao-dark .aap-content-tab-panel p,
html.wao-dark .aap-content-tab-panel li,
html.wao-dark .aap-content-tab-panel td,
html.wao-dark .aap-content-tab-panel th,
html.dark .aap-content-tab-panel,
html.dark .aap-content-tab-panel p,
html.dark .aap-content-tab-panel li,
body.dark-mode .aap-content-tab-panel,
body.dark-mode .aap-content-tab-panel p,
body.dark-mode .aap-content-tab-panel li,
[data-theme="dark"] .aap-content-tab-panel,
[data-theme="dark"] .aap-content-tab-panel p,
[data-theme="dark"] .aap-content-tab-panel li {
	color: #e2e8f0 !important;
}

html.wao-dark .aap-content-tabs-nav li a {
	color: #94a3b8 !important;
}

html.wao-dark .aap-content-tabs-nav li.active a {
	color: #f1f5f9 !important;
	background: #334155 !important;
}

html.wao-dark .aap-content-tab-panel {
	color: #e2e8f0 !important;
}

/* ==========================================================================
   Screenshot Slider (auto-generated inside Screenshots-type tabs)
   ========================================================================== */

.aap-image-slider {
	position: relative !important;
	width: 100% !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: var(--aap-bg-soft, #f1f5f9) !important;
}

/* Smooth sliding: the track holds ALL slides side-by-side and slides
   horizontally via transform (animated), instead of the old hard
   display:none/block swap. */
.aap-slider-track {
	display: flex !important;
	width: 100% !important;
	/* Fixed frame height so EVERY image - small or large, portrait or
	   landscape - is shown at the exact same size. aspect-ratio drives
	   modern browsers; the explicit height is the fallback for older
	   mobile webviews (some Android WebView / in-app browsers) where
	   aspect-ratio on a flex container isn't honoured, which would
	   otherwise let a tall image blow the frame out. */
	aspect-ratio: 16 / 9 !important;
	height: clamp(200px, 56vw, 420px) !important;
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.35, 1);
	will-change: transform;
}

/* Browsers that DO support aspect-ratio: let it win and drop the fixed
   height so the frame stays a clean 16:9 at every width. */
@supports (aspect-ratio: 1) {
	.aap-slider-track {
		height: auto !important;
	}
}

.aap-slider-slide {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	/* Centering box: the image is placed inside at its own size rather
	   than being stretched to the box. */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	padding: 8px !important;
	box-sizing: border-box !important;
}

/* Every slide is the same fixed frame; the image inside is shown at its
   OWN natural size and only shrunk if it's bigger than the frame.
   Previously `width/height: 100%` + object-fit:cover force-filled the
   frame, so a small square logo (e.g. 940x965) was blown up into a wide
   16:9 box until only its middle strip was visible - that's the "zoomed"
   look. Now: nothing is ever enlarged past its real pixels, nothing is
   cropped, and the frame stays identical across all slides on mobile
   and desktop. */
.aap-slider-slide img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 auto !important;
	border-radius: 6px !important;
	background: transparent !important;
}

.aap-slider-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: rgba(255, 255, 255, 0.95) !important;
	color: #10172a !important;
	border: 1px solid rgba(15, 23, 42, 0.12) !important;
	border-radius: 8px !important;
	width: auto !important;
	min-width: 96px !important;
	height: auto !important;
	padding: 8px 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.2px !important;
	cursor: pointer !important;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.28) !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

.aap-slider-nav svg {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	stroke: #10172a !important;
}

.aap-slider-nav-label {
	color: #10172a !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.aap-slider-nav:hover {
	background: #ffffff !important;
	transform: translateY(-50%) scale(1.04) !important;
}

.aap-slider-prev {
	left: 12px !important;
}

.aap-slider-next {
	right: 12px !important;
}

/* Single-image slider: navigation and dots add nothing - hide them. */
.aap-image-slider.aap-slider-single .aap-slider-nav,
.aap-image-slider.aap-slider-single .aap-slider-dots {
	display: none !important;
}

.aap-slider-dots {
	position: absolute !important;
	bottom: 12px !important;
	left: 0 !important;
	right: 0 !important;
	display: flex !important;
	justify-content: center !important;
	gap: 6px !important;
}

.aap-slider-dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 999px !important;
	background: rgba(15, 23, 42, 0.3) !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

.aap-slider-dot.active {
	background: #10172a !important;
	transform: scale(1.2);
}

@media (max-width: 640px) {
	.aap-slider-nav {
		min-width: 0 !important;
		padding: 8px !important;
		font-size: 12px !important;
		gap: 0 !important;
	}

	/* On a phone the labelled pills sat right across the middle of the
	   screenshot. Icon-only buttons pinned tight to the edges keep the
	   image readable while staying easy to tap (36px hit area). */
	.aap-slider-nav-label {
		display: none !important;
	}

	.aap-slider-nav svg {
		width: 20px !important;
		height: 20px !important;
	}

	.aap-slider-prev {
		left: 6px !important;
	}

	.aap-slider-next {
		right: 6px !important;
	}

	.aap-slider-slide {
		padding: 6px !important;
	}

	/* A 16:9 frame on a ~360px phone is only ~200px tall, which shrinks
	   square/portrait screenshots to a sliver. A 4:3 frame gives them
	   usable height while staying identical for every slide. */
	.aap-slider-track {
		aspect-ratio: 4 / 3 !important;
		height: clamp(220px, 72vw, 340px) !important;
	}
}

@supports (aspect-ratio: 1) {
	@media (max-width: 640px) {
		.aap-slider-track {
			height: auto !important;
		}
	}
}

/* ==========================================================================
   "Meta Bar" Layout (Settings > Box Layout > Meta Bar)
   Slim gradient-topped strip: VERSION | CATEGORY | UPDATED | DOWNLOADS
   ========================================================================== */

.aap-layout-metabar {
	margin: 18px 0 !important;
}

.aap-metabar {
	position: relative !important;
	background: var(--aap-bg-soft, #f6f8fb) !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
}

/* Colorful top border built from the plugin's theme color settings, so
   changing colors in the plugin settings re-themes the bar too. */
.aap-metabar-gradient {
	height: 4px !important;
	background: linear-gradient(
		90deg,
		var(--aap-accent, #f97316) 0%,
		var(--aap-primary, #10b981) 35%,
		var(--aap-secondary, #3b82f6) 70%,
		#a855f7 100%
	) !important;
}

.aap-metabar-grid {
	display: flex !important;
}

.aap-metabar-cell {
	flex: 1 1 0 !important;
	padding: 14px 10px !important;
	text-align: center !important;
	border-left: 1px solid var(--aap-border, #e7eaf0) !important;
	min-width: 0 !important;
}

.aap-metabar-cell:first-child {
	border-left: none !important;
}

.aap-metabar-lbl {
	display: block !important;
	font-size: 11px !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: var(--aap-text-muted, #6b7280) !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}

.aap-metabar-val {
	display: block !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--aap-text-main, #10172a) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.aap-metabar-val a {
	color: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

.aap-metabar-actions {
	display: flex !important;
	gap: 10px !important;
	margin-top: 12px !important;
	flex-wrap: wrap !important;
}

.aap-metabar-actions .aap-btn {
	flex: 1 1 160px !important;
}

/* Mobile: 2x2 grid instead of a cramped 4-across strip. */
@media (max-width: 640px) {
	.aap-metabar-grid {
		flex-wrap: wrap !important;
	}

	.aap-metabar-cell {
		flex: 1 1 50% !important;
		max-width: 50% !important;
	}

	.aap-metabar-cell:nth-child(odd) {
		border-left: none !important;
	}

	.aap-metabar-cell:nth-child(n+3) {
		border-top: 1px solid var(--aap-border, #e7eaf0) !important;
	}

	.aap-metabar-actions .aap-btn {
		flex: 1 1 100% !important;
	}
}

/* Dark mode - covers WP Mobile Optimizer Pro (html.wao-dark) plus the
   common dark-mode conventions other themes/plugins use. */
html.wao-dark .aap-metabar,
html.dark .aap-metabar,
body.dark-mode .aap-metabar,
[data-theme="dark"] .aap-metabar {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html.wao-dark .aap-metabar-cell,
html.dark .aap-metabar-cell,
body.dark-mode .aap-metabar-cell,
[data-theme="dark"] .aap-metabar-cell {
	border-color: #334155 !important;
}

html.wao-dark .aap-metabar-lbl,
html.dark .aap-metabar-lbl,
body.dark-mode .aap-metabar-lbl,
[data-theme="dark"] .aap-metabar-lbl {
	color: #94a3b8 !important;
}

html.wao-dark .aap-metabar-val,
html.dark .aap-metabar-val,
body.dark-mode .aap-metabar-val,
[data-theme="dark"] .aap-metabar-val {
	color: #e2e8f0 !important;
}

/* ==========================================================================
   Stacked Intro (used with the Meta Bar layout): featured image centered
   at its ORIGINAL size on its own row, first paragraph full-width below.
   NOTE: the base intro is float-based (image floats left, text wraps),
   so the float must be explicitly cleared here - a flex-direction rule
   alone does nothing against a float.
   ========================================================================== */

.aap-content-intro.aap-intro-stacked .aap-content-intro-image {
	float: none !important;
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 auto 16px auto !important;
	text-align: center !important;
}

.aap-content-intro.aap-intro-stacked .aap-content-intro-image img {
	/* Width comes from Settings > Intro Image Width (default 560px) and
	   is honoured as set - it's an explicit choice, so a small source
	   image IS scaled up to it. (An earlier build silently capped this
	   at the file's natural width, which made the setting look broken:
	   you'd set 560 and still get a ~290px image with no explanation.)
	   Enable "Never enlarge small images" in settings to get the cap
	   back; that adds .aap-no-upscale below. */
	width: var(--aap-intro-img-w, 560px) !important;
	max-width: 100% !important;
	height: auto !important;
	display: inline-block !important;
	margin: 0 auto !important;
	border-radius: 12px !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	object-fit: unset !important;
}

/* Opt-in: never render wider than the source file really is, so a small
   upload stays sharp instead of being stretched. */
.aap-content-intro.aap-intro-stacked.aap-no-upscale .aap-content-intro-image img {
	width: min( var(--aap-intro-img-w, 560px), var(--aap-img-natural-w, 9999px) ) !important;
}

.aap-content-intro.aap-intro-stacked .aap-content-intro-text {
	width: 100% !important;
	max-width: 100% !important;
	clear: both !important;
}

html.wao-dark .aap-content-intro.aap-intro-stacked .aap-content-intro-image img,
html.dark .aap-content-intro.aap-intro-stacked .aap-content-intro-image img,
body.dark-mode .aap-content-intro.aap-intro-stacked .aap-content-intro-image img,
[data-theme="dark"] .aap-content-intro.aap-intro-stacked .aap-content-intro-image img {
	border-color: #334155 !important;
}

/* Meta Bar rating cell: stars + value stacked inside the cell. */
.aap-metabar-rating .aap-metabar-val {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	white-space: normal !important;
	overflow: visible !important;
}

.aap-metabar-rating .aap-rating-stars {
	display: flex !important;
	gap: 2px !important;
	justify-content: center !important;
}

.aap-metabar-rating .aap-rating-line {
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

.aap-metabar-rating .aap-rating-count {
	color: var(--aap-text-muted, #6b7280) !important;
	font-weight: 500 !important;
}

html.wao-dark .aap-metabar-rating .aap-rating-count,
html.dark .aap-metabar-rating .aap-rating-count,
body.dark-mode .aap-metabar-rating .aap-rating-count,
[data-theme="dark"] .aap-metabar-rating .aap-rating-count {
	color: #94a3b8 !important;
}

/* Mobile: with 5 cells, the rating cell takes its own full-width row. */
@media (max-width: 640px) {
	.aap-metabar-cell.aap-metabar-rating {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		border-left: none !important;
		border-top: 1px solid var(--aap-border, #e7eaf0) !important;
	}
}

/* ==========================================================================
   CLS guards: reserve layout space for elements the live-stats JS
   reveals after load, so the reveal never shifts surrounding content
   (Google PSI "Cumulative Layout Shift").
   ========================================================================== */

.aap-box-side-stats {
	min-width: 104px !important;
	min-height: 52px !important;
}

@media (max-width: 640px) {
	.aap-box-side-stats {
		min-width: 0 !important;
		min-height: 34px !important;
	}
}

/* The metabar rating cell participates in the grid: when hidden it
   collapses a full column, so reserve nothing there on desktop (the
   remaining 4 cells simply flex wider - no vertical shift occurs). */

/* ==========================================================================
   Sidebar Rating (top of the sidebar widget)
   ========================================================================== */

.aap-sidebar-rating {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 12px 10px !important;
	margin-bottom: 12px !important;
	background: var(--aap-bg-soft, #f6f8fb) !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	border-radius: 12px !important;
}

.aap-sidebar-rating .aap-rating-stars {
	display: flex !important;
	gap: 2px !important;
}

.aap-sidebar-rating .aap-rating-line {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--aap-text-main, #10172a) !important;
}

.aap-sidebar-rating .aap-rating-count {
	color: var(--aap-text-muted, #6b7280) !important;
	font-weight: 500 !important;
}

html.wao-dark .aap-sidebar-rating,
html.dark .aap-sidebar-rating,
body.dark-mode .aap-sidebar-rating,
[data-theme="dark"] .aap-sidebar-rating {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html.wao-dark .aap-sidebar-rating .aap-rating-line,
html.dark .aap-sidebar-rating .aap-rating-line,
body.dark-mode .aap-sidebar-rating .aap-rating-line,
[data-theme="dark"] .aap-sidebar-rating .aap-rating-line {
	color: #e2e8f0 !important;
}

/* Sidebar stats strip (rating + downloads, directly below the Product
   Information card). */
.aap-sidebar-stats {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin: 12px 0 !important;
}

.aap-sidebar-stats .aap-sidebar-rating {
	margin-bottom: 0 !important;
}

.aap-sidebar-downloads {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 10px !important;
	background: var(--aap-bg-soft, #f6f8fb) !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	border-radius: 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--aap-text-main, #10172a) !important;
}

.aap-sidebar-downloads svg {
	stroke: var(--aap-primary, #10b981) !important;
	flex-shrink: 0 !important;
}

html.wao-dark .aap-sidebar-downloads,
html.dark .aap-sidebar-downloads,
body.dark-mode .aap-sidebar-downloads,
[data-theme="dark"] .aap-sidebar-downloads {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e2e8f0 !important;
}

/* Meta Bar mobile-only companion cell: hidden on desktop (the 5-across
   strip is already balanced there); on mobile it fills the empty half-
   row that used to sit beside the Rating cell. */
.aap-metabar-mobile-cell {
	display: none !important;
}

@media (max-width: 640px) {
	.aap-metabar-mobile-cell {
		display: block !important;
		flex: 1 1 50% !important;
		max-width: 50% !important;
		border-left: none !important;
		border-top: 1px solid var(--aap-border, #e7eaf0) !important;
	}

	/* When the companion cell exists, Rating shares the row 50/50
	   (with a divider); otherwise Rating keeps its full-width row. */
	.aap-metabar-grid.aap-has-mobile-cell .aap-metabar-cell.aap-metabar-rating {
		flex: 1 1 50% !important;
		max-width: 50% !important;
		border-left: 1px solid var(--aap-border, #e7eaf0) !important;
	}

	.aap-metabar-rating .aap-metabar-val {
		align-items: center !important;
	}
}

html.wao-dark .aap-metabar-mobile-cell,
html.dark .aap-metabar-mobile-cell,
body.dark-mode .aap-metabar-mobile-cell,
[data-theme="dark"] .aap-metabar-mobile-cell {
	border-color: #334155 !important;
}

/* Intro body: the pre-heading paragraphs when the Overview tab is
   replaced by normal article content (Settings > Content Tabs >
   Intro Layout). Matches the tab panel's reading style so the article
   flows continuously into the tab strip below it. */
.aap-content-intro-body {
	margin: 0 0 18px !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--aap-text-main, #10172a) !important;
	clear: both !important;
}

.aap-content-intro-body p {
	margin: 0 0 14px !important;
}

.aap-content-intro-body p:last-child {
	margin-bottom: 0 !important;
}

html.wao-dark .aap-content-intro-body,
html.wao-dark .aap-content-intro-body p,
html.dark .aap-content-intro-body,
html.dark .aap-content-intro-body p,
body.dark-mode .aap-content-intro-body,
body.dark-mode .aap-content-intro-body p,
[data-theme="dark"] .aap-content-intro-body,
[data-theme="dark"] .aap-content-intro-body p {
	color: #e2e8f0 !important;
}

/* ==========================================================================
   Update Requests widget - deliberately quiet: a small muted text link
   under the action buttons. The form only exists after a click, so it
   never competes with the download CTAs on mobile or desktop.
   ========================================================================== */

.aap-request-wrap {
	margin: 12px 0 0 !important;
	text-align: center !important;
}

.aap-request-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: none !important;
	border: none !important;
	padding: 6px 4px !important;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: var(--aap-text-muted, #6b7280) !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

.aap-request-toggle:hover {
	color: var(--aap-text-main, #10172a) !important;
}

.aap-request-toggle svg {
	flex-shrink: 0 !important;
	opacity: 0.8 !important;
}

.aap-request-form {
	margin-top: 10px !important;
	padding: 14px !important;
	background: var(--aap-bg-soft, #f6f8fb) !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	border-radius: 12px !important;
	text-align: left !important;
}

.aap-request-form[hidden] {
	display: none !important;
}

.aap-request-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
	margin-bottom: 10px !important;
}

.aap-request-row label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--aap-text-main, #10172a) !important;
	cursor: pointer !important;
	margin: 0 !important;
}

.aap-request-form input[type="email"],
.aap-request-form input[type="text"] {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 10px 12px !important;
	margin-bottom: 8px !important;
	font-size: 14px !important;
	border: 1px solid var(--aap-border, #e7eaf0) !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #10172a !important;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.aap-request-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.aap-request-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.aap-request-submit {
	background: var(--aap-secondary, #3b82f6) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.aap-request-submit:disabled {
	opacity: 0.6 !important;
	cursor: default !important;
}

.aap-request-msg {
	font-size: 13px !important;
	color: var(--aap-text-muted, #6b7280) !important;
}

.aap-request-msg.is-error {
	color: #dc2626 !important;
}

.aap-request-done {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--aap-text-main, #10172a) !important;
}

@media (max-width: 640px) {
	.aap-request-row {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.aap-request-submit {
		width: 100% !important;
	}
}

html.wao-dark .aap-request-form,
html.dark .aap-request-form,
body.dark-mode .aap-request-form,
[data-theme="dark"] .aap-request-form {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html.wao-dark .aap-request-row label,
html.wao-dark .aap-request-done,
html.dark .aap-request-row label,
html.dark .aap-request-done,
body.dark-mode .aap-request-row label,
body.dark-mode .aap-request-done,
[data-theme="dark"] .aap-request-row label,
[data-theme="dark"] .aap-request-done {
	color: #e2e8f0 !important;
}

html.wao-dark .aap-request-form input[type="email"],
html.wao-dark .aap-request-form input[type="text"],
html.dark .aap-request-form input[type="email"],
html.dark .aap-request-form input[type="text"],
body.dark-mode .aap-request-form input[type="email"],
body.dark-mode .aap-request-form input[type="text"],
[data-theme="dark"] .aap-request-form input[type="email"],
[data-theme="dark"] .aap-request-form input[type="text"] {
	background: #0f172a !important;
	border-color: #334155 !important;
	color: #e2e8f0 !important;
}

/* Spam-folder hint under the email field in the request form. */
.aap-request-hint {
	margin: -2px 0 10px !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--aap-text-muted, #6b7280) !important;
}

html.wao-dark .aap-request-hint,
html.dark .aap-request-hint,
body.dark-mode .aap-request-hint,
[data-theme="dark"] .aap-request-hint {
	color: #94a3b8 !important;
}