/**
 * Elibrary Test — Phase 4.7 Category-Specific Premium Theme
 * Visual-only theme layer. Five category experiences share one engine but
 * receive distinct, lightweight visual DNA through CSS variables.
 * No images, external fonts, libraries, AJAX, or engine logic.
 */

/* Shared premium surface. The category panel remains the structural parent;
 * the launcher receives a matching class from category navigation JS. */
.eltax-app .eltax-panel {
	--eltax-theme-accent: #2563eb;
	--eltax-theme-accent-2: #4f46e5;
	--eltax-theme-soft: rgba(37, 99, 235, .08);
	--eltax-theme-border: rgba(37, 99, 235, .18);
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 92% 2%, var(--eltax-theme-soft), transparent 24%),
		linear-gradient(145deg, #ffffff 0%, #fbfdff 58%, #f8f7ff 100%);
	border-color: var(--eltax-theme-border);
	box-shadow: 0 18px 42px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.98);
}

.eltax-app .eltax-panel::before {
	content: '';
	position: absolute;
	width: 180px;
	height: 180px;
	right: -95px;
	top: -105px;
	border-radius: 50%;
	border: 1px solid var(--eltax-theme-border);
	box-shadow: 0 0 0 15px rgba(255,255,255,.22), 0 0 0 32px rgba(255,255,255,.12);
	pointer-events: none;
}

.eltax-app .eltax-panel > * {
	position: relative;
	z-index: 1;
}

/* Category 01 — Psychology: introspective indigo / violet */
.eltax-app .eltax-panel[data-eltax-panel="01"] {
	--eltax-theme-accent: #5b4ce2;
	--eltax-theme-accent-2: #7c3aed;
	--eltax-theme-soft: rgba(91, 76, 226, .10);
	--eltax-theme-border: rgba(91, 76, 226, .20);
	background:
		radial-gradient(circle at 94% 3%, rgba(124,58,237,.13), transparent 25%),
		radial-gradient(circle at 3% 96%, rgba(99,102,241,.07), transparent 28%),
		linear-gradient(145deg, #ffffff, #faf9ff 58%, #f5f3ff);
}

/* Category 02 — Academic: clean blue with a restrained gold signal */
.eltax-app .eltax-panel[data-eltax-panel="02"] {
	--eltax-theme-accent: #2563eb;
	--eltax-theme-accent-2: #d97706;
	--eltax-theme-soft: rgba(37, 99, 235, .09);
	--eltax-theme-border: rgba(37, 99, 235, .19);
	background:
		radial-gradient(circle at 94% 3%, rgba(37,99,235,.13), transparent 25%),
		radial-gradient(circle at 4% 96%, rgba(245,158,11,.07), transparent 27%),
		linear-gradient(145deg, #ffffff, #f8fbff 58%, #fffaf2);
}

/* Category 03 — Career: executive navy / cyan */
.eltax-app .eltax-panel[data-eltax-panel="03"] {
	--eltax-theme-accent: #0b74c9;
	--eltax-theme-accent-2: #0891b2;
	--eltax-theme-soft: rgba(11, 116, 201, .09);
	--eltax-theme-border: rgba(11, 116, 201, .19);
	background:
		radial-gradient(circle at 94% 3%, rgba(8,145,178,.12), transparent 25%),
		radial-gradient(circle at 4% 96%, rgba(11,116,201,.07), transparent 27%),
		linear-gradient(145deg, #ffffff, #f7fbff 58%, #f2fbfd);
}

/* Category 04 — Language: teal / cyan with a light global feel */
.eltax-app .eltax-panel[data-eltax-panel="04"] {
	--eltax-theme-accent: #0f8b8d;
	--eltax-theme-accent-2: #0891b2;
	--eltax-theme-soft: rgba(15, 139, 141, .09);
	--eltax-theme-border: rgba(15, 139, 141, .20);
	background:
		radial-gradient(circle at 94% 3%, rgba(6,182,212,.12), transparent 25%),
		radial-gradient(circle at 4% 96%, rgba(15,139,141,.07), transparent 27%),
		linear-gradient(145deg, #ffffff, #f6fffe 58%, #f2fbff);
}

/* Category 05 — Islamic: deep teal / refined gold */
.eltax-app .eltax-panel[data-eltax-panel="05"] {
	--eltax-theme-accent: #0b6670;
	--eltax-theme-accent-2: #b58a35;
	--eltax-theme-soft: rgba(11, 102, 112, .10);
	--eltax-theme-border: rgba(181, 138, 53, .24);
	background:
		radial-gradient(circle at 94% 3%, rgba(181,138,53,.12), transparent 25%),
		radial-gradient(circle at 4% 96%, rgba(11,102,112,.07), transparent 27%),
		linear-gradient(145deg, #ffffff, #f7fcfc 58%, #fffaf1);
}

/* Premium panel title / active subcategory accents. */
.eltax-app .eltax-panel .eltax-panel-title {
	color: var(--eltax-theme-accent);
	letter-spacing: -.02em;
}

.eltax-app .eltax-panel a.eltax-subitem.is-active {
	border-color: var(--eltax-theme-border);
	background: linear-gradient(145deg, rgba(255,255,255,.98), var(--eltax-theme-soft));
	box-shadow: 0 8px 20px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.98);
}

.eltax-app .eltax-panel a.eltax-subitem.is-active:hover {
	border-color: var(--eltax-theme-accent);
	box-shadow: 0 11px 24px rgba(15,23,42,.08), 0 0 0 3px var(--eltax-theme-soft), inset 0 1px 0 #fff;
}

.eltax-app .eltax-panel .eltax-subitem-cta {
	color: var(--eltax-theme-accent);
}

/* Launcher receives the exact category DNA once moved into its host. */
.eltest-app[class*="eltest-category-theme-"] {
	--category-accent: #2563eb;
	--category-accent-2: #4f46e5;
	--category-soft: rgba(37,99,235,.09);
	--category-border: rgba(37,99,235,.19);
	--category-depth: #1e3a8a;
}

.eltest-app.eltest-category-theme-01 {
	--category-accent: #5b4ce2;
	--category-accent-2: #7c3aed;
	--category-soft: rgba(91,76,226,.10);
	--category-border: rgba(91,76,226,.20);
	--category-depth: #3f348f;
}

.eltest-app.eltest-category-theme-02 {
	--category-accent: #2563eb;
	--category-accent-2: #d97706;
	--category-soft: rgba(37,99,235,.09);
	--category-border: rgba(37,99,235,.19);
	--category-depth: #1e3a8a;
}

.eltest-app.eltest-category-theme-03 {
	--category-accent: #0b74c9;
	--category-accent-2: #0891b2;
	--category-soft: rgba(11,116,201,.09);
	--category-border: rgba(11,116,201,.19);
	--category-depth: #075985;
}

.eltest-app.eltest-category-theme-04 {
	--category-accent: #0f8b8d;
	--category-accent-2: #0891b2;
	--category-soft: rgba(15,139,141,.09);
	--category-border: rgba(15,139,141,.20);
	--category-depth: #0f5f61;
}

.eltest-app.eltest-category-theme-05 {
	--category-accent: #0b6670;
	--category-accent-2: #b58a35;
	--category-soft: rgba(11,102,112,.10);
	--category-border: rgba(181,138,53,.24);
	--category-depth: #07545c;
}

/* Gateway surface follows the category without replacing its structure. */
.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-card {
	background:
		radial-gradient(circle at 94% 4%, var(--category-soft), transparent 27%),
		radial-gradient(circle at 4% 82%, rgba(255,255,255,.55), transparent 30%),
		linear-gradient(145deg, #ffffff 0%, #fbfdff 54%, var(--category-soft) 100%);
	border-color: var(--category-border);
	box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 18px 38px rgba(15,23,42,.08), inset 0 1px 0 #fff;
}

.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-hero-icon {
	background: linear-gradient(145deg, #ffffff 0%, var(--category-soft) 100%);
	border-color: var(--category-border);
	box-shadow: inset 0 2px 5px rgba(255,255,255,.95), 0 9px 20px var(--category-soft), 0 3px 0 var(--category-soft);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-eyebrow {
	color: var(--category-accent);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-title {
	background: linear-gradient(100deg, #0f274a, var(--category-accent) 48%, var(--category-accent-2) 90%);
	-webkit-background-clip: text;
	background-clip: text;
}

.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-test-row {
	background: linear-gradient(135deg, var(--category-soft), rgba(255,255,255,.96));
	border-color: var(--category-border);
	box-shadow: 0 12px 30px var(--category-soft), inset 0 1px 0 #fff;
}

.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-test-row .eltest-form-label {
	color: var(--category-accent);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-test-row .eltest-select {
	border-color: var(--category-border);
	box-shadow: 0 7px 0 var(--category-soft), 0 12px 25px var(--category-soft), inset 0 1px 0 #fff;
}

/* Selected Test Card — category-specific 3D edge + CTA. */
.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo {
	border-color: var(--category-border);
	background:
		radial-gradient(circle at 94% 4%, var(--category-soft), transparent 26%),
		linear-gradient(145deg, #ffffff 0%, #fbfdff 52%, var(--category-soft) 100%);
	box-shadow: 0 20px 44px rgba(15,23,42,.10), 0 6px 14px var(--category-soft), inset 0 1px 0 #fff;
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-icon {
	background: linear-gradient(145deg, #fff, var(--category-soft));
	border-color: var(--category-border);
	box-shadow: 0 9px 19px var(--category-soft), 0 3px 0 var(--category-soft), inset 0 2px 4px #fff;
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-kicker,
.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-path {
	color: var(--category-accent);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-badge {
	background: linear-gradient(135deg, var(--category-soft), rgba(255,255,255,.95));
	border-color: var(--category-border);
	color: var(--category-accent);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-path {
	background: var(--category-soft);
	border-color: var(--category-border);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-chip b {
	color: var(--category-accent);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-cta {
	background: linear-gradient(135deg, var(--category-accent) 0%, var(--category-accent-2) 100%);
	box-shadow: 0 5px 0 var(--category-depth), 0 15px 30px var(--category-soft), inset 0 1px 0 rgba(255,255,255,.34);
}

.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-cta:hover,
.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo-cta:focus-visible {
	box-shadow: 0 7px 0 var(--category-depth), 0 19px 36px var(--category-soft), inset 0 1px 0 rgba(255,255,255,.38);
}

/* Gold should read as an accent, not as the dominant surface. */
.eltest-app.eltest-category-theme-05 .eltest-testinfo-cta {
	background: linear-gradient(135deg, #0b6670 0%, #0d7c7b 62%, #b58a35 100%);
}

@media (max-width: 640px) {
	.eltax-app .eltax-panel::before { width: 130px; height: 130px; right: -75px; top: -75px; }
}

@media (prefers-reduced-motion: reduce) {
	.eltax-app .eltax-panel,
	.eltest-app[class*="eltest-category-theme-"] .eltest-testinfo,
	.eltest-app[class*="eltest-category-theme-"] .eltest-gateway-card {
		transition: none;
	}
}