/*
 * Ayah Video Maker inside the Quran Media theme: the maker's surroundings follow the theme colours
 * and light/dark mode. Only the interface around the video changes; the video itself (Quran text,
 * font, colours chosen in the maker) is untouched.
 * Rules are scoped under .avm-maker so they win over the plugin's own stylesheet, which loads later in the page.
 */

/* "body" outranks the plugin's own .avm-maker rule, which loads later and would otherwise reset these. */
body .avm-maker {
	--avm-accent: var(--qm-primary);
	--avm-border: var(--qm-border);
	--avm-muted: var(--qm-muted);
	font-family: var(--qm-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--qm-text);
	max-width: none;
}

.avm-maker .avm-canvas-wrap { background: var(--qm-maker-stage); border-radius: var(--qm-radius); }
.avm-maker .avm-stage { top: calc(var(--qm-header-h) + 16px); }

.avm-maker .avm-controls {
	background: var(--qm-maker-panel);
	border: 1px solid var(--qm-border);
	border-radius: var(--qm-radius);
	padding: 20px;
}
.avm-maker .avm-controls h3 { color: var(--qm-muted); letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 700; }

.avm-maker .avm-field select,
.avm-maker .avm-field input[type="color"],
.avm-maker .avm-btn {
	background: var(--qm-surface);
	color: var(--qm-text);
	border-color: var(--qm-border);
}
.avm-maker .avm-field select { padding: 8px 10px; border-radius: var(--qm-radius-sm); }

.avm-maker .avm-seg { border-color: var(--qm-border); border-radius: var(--qm-radius-sm); }
.avm-maker .avm-seg button + button { border-left: 0; border-inline-start: 1px solid var(--qm-border); }
.avm-maker .avm-seg button.is-active { background: var(--qm-primary); color: var(--qm-primary-text); }

.avm-maker .avm-btn { border-radius: var(--qm-radius-sm); }
.avm-maker .avm-btn:hover:not(:disabled) { border-color: var(--qm-primary); }
.avm-maker .avm-btn-primary,
.avm-maker .avm-play,
.avm-maker .avm-seek-fill { background: var(--qm-button); color: var(--qm-button-text); border-color: var(--qm-button); }
.avm-maker .avm-btn-primary:hover:not(:disabled) { background: var(--qm-button-hover); border-color: var(--qm-button-hover); }

.avm-maker .avm-bg.is-active { border-color: var(--qm-accent); box-shadow: 0 0 0 2px var(--qm-maker-panel) inset; }
.avm-maker .avm-status.is-error { color: var(--qm-danger); }

/* Save to account (quran-media-core), in the maker's extra-buttons slot. */
.avm-maker .qm-save { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.avm-maker .qm-save .avm-btn { flex: 1 1 auto; }
.avm-maker .qm-save-video.is-ready { background: var(--qm-accent); border-color: var(--qm-accent); color: #1a1405; font-weight: 700; }
.avm-maker .qm-save-msg { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--qm-muted); min-height: 1.2em; }
.avm-maker .qm-save-msg.is-success { color: var(--qm-success); }
.avm-maker .qm-save-msg.is-error { color: var(--qm-danger); }
.avm-maker .qm-save-hint { margin: 4px 0 0; font-size: 13px; color: var(--qm-muted); }

/* Ready-made templates, share, problem report (quran-media-core). */
.avm-maker .qm-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin-bottom: 4px; }
.avm-maker .qm-templates-label { font-size: 13px; color: var(--qm-muted); }
.avm-maker .qm-template {
	padding: 5px 10px;
	border: 1px solid var(--qm-border);
	border-radius: 999px;
	background: var(--qm-t-bg);
	color: var(--qm-t-fg);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.avm-maker .qm-template:hover { border-color: var(--qm-accent); }
.avm-maker .qm-share-made { flex: 1 1 100%; }
.avm-maker .qm-report { flex-basis: 100%; font-size: 12px; color: var(--qm-muted); }
.avm-maker .qm-style-reset { flex-basis: 100%; justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--qm-muted); text-decoration: underline; cursor: pointer; text-align: start; }
.avm-maker .qm-style-reset[hidden] { display: none; }