/* ==========================================================
   Block-AI theme: dark surface, lime accent, outlined pill buttons
   (all buttons mirror the "Welcome to Block-AI" pill)
   ========================================================== */
.qve-widget, .qve-viz {
	--qve-bg: #121212;
	--qve-surface: #1c1c1c;
	--qve-surface-2: #262626;
	--qve-border: #2f2f2f;
	--qve-text: #ffffff;
	--qve-muted: #a6a6a6;
	--qve-accent: #c8f560;
	--qve-accent-dark: #8fc400;
	--qve-on-accent: #0d0d0d;
	--qve-danger: #ff6b6b;
}

/* ---------- Shared ---------- */
.qve-widget, .qve-viz {
	max-width: 680px;
	margin: 0 auto;
	padding: 2em 1.5em;
	font-family: inherit;
	color: var(--qve-text);
	background: var(--qve-bg);
	border: 1px solid var(--qve-border);
	border-radius: 20px;
}

/* Recognizer sits directly on the page (e.g. hero): no boxed card */
.qve-widget {
	background: transparent;
	border: none;
	padding: 1em 0;
}

.qve-widget h2, .qve-widget h3, .qve-widget h4,
.qve-viz h2, .qve-viz h3, .qve-viz h4 { color: var(--qve-text); }
.qve-viz h2 { font-weight: 700; }
.qve-viz p { color: var(--qve-muted); }

.qve-status {
	margin-top: 0.75em;
	font-size: 0.95rem;
	color: var(--qve-muted);
	min-height: 1.2em;
}

.qve-error {
	margin-top: 1em;
	padding: 0.9em 1.1em;
	border-radius: 8px;
	background: rgba( 255, 107, 107, 0.08 );
	border: 1px solid rgba( 255, 107, 107, 0.45 );
	color: var(--qve-danger);
	font-size: 1rem;
}

.qve-audio {
	width: 100%;
	margin-top: 0.5em;
}

/* ---------- Recognizer widget ---------- */
.qve-widget {
	text-align: center;
}

/* Shared pill button: transparent, 1px lime outline, white text.
   Selectors are doubled-up and key properties use !important so theme /
   Elementor button styles (blue text, square corners) cannot override them. */
.qve-widget .qve-record-btn,
.qve-viz .qve-viz-lang-btn,
.qve-viz .qve-btn,
button.qve-record-btn,
button.qve-viz-lang-btn,
button.qve-btn,
.qve-trigger {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.7em 2em !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--qve-text, #fff) !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid var(--qve-accent, #c8f560) !important;
	border-radius: 999px !important;
	box-shadow: none;
	text-shadow: none;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.qve-widget .qve-record-btn:hover,
.qve-widget .qve-record-btn:focus,
.qve-viz .qve-viz-lang-btn:hover,
.qve-viz .qve-viz-lang-btn:focus,
.qve-viz .qve-btn:hover,
.qve-viz .qve-btn:focus,
button.qve-record-btn:hover,
button.qve-viz-lang-btn:hover,
button.qve-btn:hover,
.qve-trigger:hover,
.qve-trigger:focus {
	color: var(--qve-on-accent, #0d0d0d) !important;
	background: var(--qve-accent, #c8f560) !important;
	border-color: var(--qve-accent, #c8f560) !important;
	outline: none;
}

.qve-btn:active,
.qve-record-btn:active,
.qve-viz-lang-btn:active { transform: scale( 0.98 ); }

button.qve-btn:disabled,
button.qve-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.qve-widget .qve-record-btn.is-recording,
.qve-trigger.is-recording,
a.is-recording[href="#qve-speak"],
.elementor-button.is-recording {
	color: var(--qve-on-accent, #0d0d0d) !important;
	background: var(--qve-accent, #c8f560) !important;
	animation: qve-pulse 1.4s infinite;
}

.qve-mic-icon { width: 12px; height: 12px; border-radius: 50%; background: var(--qve-accent); display: inline-block; transition: background 0.2s ease; }
.qve-record-btn:hover .qve-mic-icon,
.qve-record-btn.is-recording .qve-mic-icon { background: var(--qve-on-accent); }

@keyframes qve-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 200, 245, 96, 0.5 ); }
	70% { box-shadow: 0 0 0 12px rgba( 200, 245, 96, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 200, 245, 96, 0 ); }
}

.qve-result {
	margin-top: 2em;
	text-align: left;
	border-top: 1px solid var(--qve-border);
	padding-top: 1.5em;
}

.qve-transcript-label, .qve-section-label {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--qve-accent);
	margin: 1.2em 0 0.3em;
}

.qve-transcript { font-size: 1.2rem; margin-top: 0; color: var(--qve-muted); }
.qve-arabic-ayah { font-size: 1.5rem; line-height: 2; margin-top: 0; color: var(--qve-text); }
.qve-translation { font-size: 1.05rem; margin-top: 0; color: var(--qve-text); }

.qve-reference { margin-top: 1em; font-size: 1rem; color: var(--qve-accent); }

.qve-tafsir-tabs { display: grid; grid-template-columns: 1fr; gap: 1em; margin-top: 0.5em; }
.qve-tafsir-block { padding: 1em; border: 1px solid var(--qve-border); border-radius: 14px; background: var(--qve-surface-2); }
.qve-tafsir-block h4 { margin: 0 0 0.4em; font-size: 0.85rem; text-transform: uppercase; color: var(--qve-accent); }
.qve-tafsir-text p { margin: 0 0 0.6em; line-height: 1.6; color: var(--qve-text); }

@media ( min-width: 640px ) {
	.qve-tafsir-tabs { grid-template-columns: 1fr 1fr; }
}

/* ---------- Visualization page ---------- */
.qve-viz { text-align: center; }
.qve-viz-select {
	font-size: 1.05rem;
	padding: 0.5em 0.8em;
	font-family: inherit;
	color: var(--qve-text);
	background: var(--qve-surface-2);
	border-radius: 999px;
	border: 1px solid var(--qve-accent);
	min-width: 280px;
	max-width: 100%;
	margin-top: 0.5em;
	padding: 0.7em 1.4em;
	cursor: pointer;
}
.qve-viz-select:focus { outline: none; box-shadow: 0 0 0 3px rgba( 200, 245, 96, 0.25 ); }
.qve-viz-select option { background: var(--qve-surface-2); color: var(--qve-text); }

.qve-viz-back:hover { text-decoration: underline; }
.qve-viz-back {
	background: none;
	border: none;
	color: var(--qve-accent);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0;
	margin-bottom: 0.75em;
	display: inline-block;
}

.qve-viz-lang-buttons { display: flex; gap: 1em; justify-content: center; margin-top: 1em; flex-wrap: wrap; }

.qve-viz-stage { text-align: left; margin-top: 1em; }
.qve-viz-image-wrap {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 1em;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--qve-border);
	background: var(--qve-surface-2);
}
.qve-viz-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale( 1 );
}
.qve-viz-image.qve-ken-burns {
	animation: qve-ken-burns 6s ease-in-out forwards;
}
@keyframes qve-ken-burns {
	0%   { transform: scale( 1 ) translate( 0, 0 ); }
	100% { transform: scale( 1.12 ) translate( -1.5%, -1.5% ); }
}

.qve-viz-caption-wrap { max-width: 600px; margin: 0 auto; text-align: center; }
#qve-viz-scene-title { font-size: 1.15rem; margin-bottom: 0.5em; color: var(--qve-accent); }
.qve-viz-caption { font-size: 1.3rem; line-height: 1.9; min-height: 2.4em; color: var(--qve-text); }
.qve-viz-caption-wrap .qve-audio { color-scheme: dark; }
.qve-widget .qve-audio { color-scheme: dark; }

.qve-viz-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1em;
	gap: 1em;
}
#qve-viz-progress { font-size: 0.9rem; color: var(--qve-muted); }