/*
 * Global product features + configurator info popup.
 * Brand-neutral on purpose (the plugin ships to several sites): neutral grays,
 * system fonts, one restrained accent driven by --oled-feat-accent so a host
 * theme can override it. No brand colors baked in.
 */
.oled-features {
	--oled-feat-accent: #33383d;
	--oled-feat-ink: #24272b;
	--oled-feat-muted: #4a4f55;   /* neutral gray — not slate/blue (looked like a link) */
	--oled-feat-line: #e6e7e9;
	--oled-feat-bg: #f5f6f7;
	--oled-feat-card: #ffffff;
	--oled-feat-radius: 14px;
	color: var(--oled-feat-ink);
	font-size: 15px;
	line-height: 1.6;
}

/* ---- feature rows (image + text, alternating) ---- */
.oled-features .mirror-feature-section { display: grid; gap: 28px; }
.oled-features .feature-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 28px;
	align-items: center;
	padding: 20px;
	background: var(--oled-feat-card);
	border: 1px solid var(--oled-feat-line);
	border-radius: var(--oled-feat-radius);
}
.oled-features .feature-row.reverse .feature-image { order: 2; }
.oled-features .feature-image img {
	width: 100%; height: auto; display: block;
	border-radius: 10px; background: var(--oled-feat-bg);
}
.oled-features .feature-text h3 {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 8px; font-size: 19px; font-weight: 600; color: var(--oled-feat-ink);
}
.oled-features .feature-text h3 .icon { width: 26px; height: 26px; object-fit: contain; flex: none; }
.oled-features .feature-text p { margin: 0 0 10px; color: var(--oled-feat-muted); }
.oled-features .feature-text ul { margin: 0; padding-left: 18px; }
.oled-features .feature-text li { margin: 4px 0; color: var(--oled-feat-ink); }
/* Stray empty paragraphs (if any host still wpautop's the content) never become grid rows. */
.oled-features .mirror-feature-section > p:empty { display: none; }

/* ---- description + spec block ---- */
.oled-features .mirror-description { margin-top: 28px; }
.oled-features .mirror-description h4 { font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
.oled-features .mirror-description ul { padding-left: 18px; margin: 0 0 12px; }
.oled-features .mirror-description li { margin: 4px 0; color: var(--oled-feat-muted); }

@media (max-width: 640px) {
	.oled-features .feature-row { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
	.oled-features .feature-row.reverse .feature-image { order: 0; }
	.oled-features .feature-text h3 { font-size: 17px; }
}

/* =========================================================================
   Configurator info button + popup (injected by features.js)
   ========================================================================= */
.oled-info {
	all: unset;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; margin-left: auto;
	border: 1px solid currentColor; border-radius: 50%;
	font: 600 11px/1 system-ui, -apple-system, sans-serif;
	color: #545a61;
	opacity: .7; cursor: pointer; flex: none;
	vertical-align: -0.28em;
	transition: opacity .15s ease, box-shadow .15s ease;
}
.oled-info:hover, .oled-info:focus-visible { opacity: 1; outline: none; }
.oled-info:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.15); }

/* Modal overlay — one shared node, works on desktop and mobile. */
.oled-fmodal {
	position: fixed; inset: 0; z-index: 100000;
	display: none; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(15, 18, 22, .55);
	-webkit-tap-highlight-color: transparent;
}
.oled-fmodal.is-open { display: flex; }
.oled-fmodal__card {
	position: relative;
	width: 100%; max-width: 720px; max-height: 84vh; overflow: auto;
	background: #fff; color: #24272b;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0,0,0,.28);
	-webkit-overflow-scrolling: touch;
}
.oled-fmodal__close {
	position: sticky; top: 0; float: right;
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; margin: 10px 10px -46px auto;
	border: 0; border-radius: 50%;
	background: rgba(0,0,0,.06); color: #1f2328;
	font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}
.oled-fmodal__close:hover { background: rgba(0,0,0,.12); }
.oled-fmodal__body { padding: 22px; }
/* Feature block inside the modal — desktop: image left, text right. */
.oled-fmodal__body .feature-row {
	display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
	gap: 20px; align-items: start;
	padding: 0; border: 0; border-radius: 0; margin: 0 0 24px;
}
.oled-fmodal__body .feature-row:last-child { margin-bottom: 0; }
.oled-fmodal__body .feature-row.reverse .feature-image { order: 0; } /* always image-left in the popup */
.oled-fmodal__body .feature-image { margin: 0; }
.oled-fmodal__body .feature-image img { width: 100%; max-height: 290px; object-fit: cover; border-radius: 12px; display: block; }
.oled-fmodal__body h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.oled-fmodal__body h3 .icon { width: 24px; height: 24px; object-fit: contain; }
.oled-fmodal__body p { margin: 0 0 10px; color: #4a4f55; }
.oled-fmodal__body ul { margin: 0; padding-left: 18px; }
.oled-fmodal__body li { margin: 5px 0; }

@media (max-width: 640px) {
	/* Mobile: dock the card to the bottom as a sheet and stack image over text. */
	.oled-fmodal { align-items: flex-end; padding: 0; }
	.oled-fmodal__card { max-width: none; max-height: 78vh; border-radius: 18px 18px 0 0; }
	.oled-fmodal__body { padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
	.oled-fmodal__body .feature-row { display: block; }
	.oled-fmodal__body .feature-image { margin-bottom: 14px; }
	.oled-fmodal__body .feature-image img { max-height: 41vh; }
}
@media (prefers-reduced-motion: no-preference) {
	.oled-fmodal.is-open .oled-fmodal__card { animation: oled-fmodal-in .22s ease; }
	@keyframes oled-fmodal-in { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
}