/* =====================================================================
 * Chroma — plugin override skin
 * Targets HARDCODED colors inside the GeekPress plugin's
 * `source/assets/ui/css/style.css` (and a handful of context CSS files)
 * that don't use `var(--geekui-*)`. We hit them inside the plugin's
 * SPA wrap `[id^="geekui-root"]` so we never touch the wp-admin chrome.
 *
 * Loaded LAST in the cascade — see chroma_enqueue() in functions.php.
 * ===================================================================== */

/* ── LOADER / SPINNER ────────────────────────────────────────────────
 * Plugin defines `.geekfp-spinner { color: #619184 }` and rotates
 * `.geekfp-rotating`. Re-tint to Chroma's ice-cyan + holo-violet so
 * spinners blend with the rest of the SPA. */
.geekfp-spinner,
[id^="geekui-root"] .geekfp-spinner {
	color: var(--geekui-accent, #5cf0ff) !important;
}
.geekfp-rotating {
	filter: drop-shadow(0 0 8px rgba(92, 240, 255, 0.45));
}
/* A subtle outer halo while loading so it reads as "Chroma busy" */
[id^="geekui-root"] .geekfp-spinner::before {
	content: '';
	position: absolute; inset: 50% auto auto 50%;
	width: 90px; height: 90px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(92, 240, 255, 0.25),
		0 0 38px rgba(160, 107, 255, 0.30),
		inset 0 0 22px rgba(92, 240, 255, 0.18);
	pointer-events: none;
}

/* ── PLUGIN BASE TEXT / SURFACES ──────────────────────────────────── */
[id^="geekui-root"] {
	color: var(--geekui-text);
	background: transparent;
}
[id^="geekui-root"] a {
	color: var(--geekui-accent);
}
[id^="geekui-root"] a:hover {
	color: var(--geekui-accent-2);
}
[id^="geekui-root"] img { border-radius: var(--geekui-card-radius, 4px); }

/* ── PLUGIN HARDCODED-COLOR HOT SPOTS ─────────────────────────────── */
/* Red error / required-field accent (#fd0622 → cool-spectrum poor tone) */
[id^="geekui-root"] [style*="#fd0622"],
[id^="geekui-root"] .geekui-required,
[id^="geekui-root"] .geekui-error {
	color: var(--geekui-tone-poor, #ff6b9a) !important;
}
/* Gray text (#817f7f → muted text) */
[id^="geekui-root"] [style*="#817f7f"] {
	color: var(--geekui-text-mute) !important;
}
/* Movie-purple chip (#a22cc2 → chroma-violet) */
[id^="geekui-root"] [style*="#a22cc2"] {
	color: var(--chroma-violet, #a06bff) !important;
}
/* Yellow rating star (#fcc203 → mixed tone) */
[id^="geekui-root"] [style*="#fcc203"] {
	color: var(--geekui-tone-mixed, #f0c674) !important;
}

/* ── BUTTONS / FORM CONTROLS ─────────────────────────────────────── */
[id^="geekui-root"] .geekui-btn,
[id^="geekui-root"] button.geekui-primary,
[id^="geekui-root"] .geekui-btn-primary {
	background: var(--geekui-accent) !important;
	color: #06121d !important;
	border: 1px solid var(--geekui-accent) !important;
	box-shadow: 0 0 18px rgba(92, 240, 255, 0.30);
	border-radius: var(--geekui-card-radius, 4px) !important;
	letter-spacing: 0.04em;
	font-family: var(--geekui-font-title, "Chakra Petch", sans-serif);
}
[id^="geekui-root"] .geekui-btn:hover,
[id^="geekui-root"] button.geekui-primary:hover,
[id^="geekui-root"] .geekui-btn-primary:hover {
	background: var(--geekui-accent-2) !important;
	border-color: var(--geekui-accent-2) !important;
	box-shadow: 0 0 26px rgba(92, 240, 255, 0.45);
}
[id^="geekui-root"] .geekui-danger,
[id^="geekui-root"] .geekui-btn-danger {
	background: transparent !important;
	color: var(--chroma-violet, #a06bff) !important;
	border: 1px solid rgba(160, 107, 255, 0.55) !important;
	box-shadow: none;
}
[id^="geekui-root"] .geekui-danger:hover {
	background: rgba(160, 107, 255, 0.14) !important;
	color: var(--chroma-violet-2, #c39bff) !important;
}

/* ── MODAL / ZINKAT MODAL ────────────────────────────────────────── */
.zinkat-modal,
.zinkat-modal-overlay,
[id^="geekui-root"] .react-modal-bcz {
	background: var(--geekui-modal-bg, #0e1224) !important;
	color: var(--geekui-modal-text, #ecf0ff) !important;
	border: 1px solid var(--geekui-border-strong) !important;
}
.zinkat-modal-overlay { background: rgba(7, 9, 18, 0.72) !important; backdrop-filter: blur(4px); }

/* ── REACT-SELECT THEMING ─────────────────────────────────────────── */
[id^="geekui-root"] .geekui-select__control,
[id^="geekui-root"] [class*="-control"] {
	background: var(--geekui-surface) !important;
	border-color: var(--geekui-border) !important;
	color: var(--geekui-text) !important;
}
[id^="geekui-root"] [class*="-menu"] {
	background: var(--geekui-modal-bg) !important;
	border: 1px solid var(--geekui-border-strong) !important;
}
[id^="geekui-root"] [class*="-option"]:hover,
[id^="geekui-root"] [class*="-option--is-focused"] {
	background: var(--geekui-surface-2) !important;
}

/* ── TOAST / TOOLTIP ───────────────────────────────────────────── */
.Toastify__toast,
.react-tooltip {
	background: var(--geekui-modal-bg, #0e1224) !important;
	color: var(--geekui-text, #ecf0ff) !important;
	border: 1px solid var(--geekui-border-strong) !important;
}

/* ── LIGHT THEME — ensure plugin text is readable on the cream surface
 * Chroma's geekui-vars.css already swaps tokens for [data-theme="light"];
 * this just nudges a few hot-spot selectors that hard-code dark text. */
body[data-theme="light"] [id^="geekui-root"] .geekfp-spinner,
body[data-theme="light"] .geekfp-spinner {
	color: var(--geekui-accent, #066b80) !important;
}
body[data-theme="light"] .Toastify__toast,
body[data-theme="light"] .react-tooltip {
	background: #ffffff !important;
	color: #0a0e1a !important;
}