/**
 * Cosplay Pro: Size VA chart popup — override plugin partial inline “light theme” styles
 * so AJAX-loaded tables match dark UI + main.css tokens.
 *
 * @package Cosplay_Pro
 */

/* —— Popup shell (already uses --sva-*; reinforce backdrop) —— */
.cosplay-pro-body #size-va-popup-overlay {
	background-color: rgba(7, 10, 24, 0.78) !important;
	backdrop-filter: blur(3px);
}

.cosplay-pro-body #size-va-popup-overlay .size-va-popup {
	border: 1px solid var(--color-border, #2b2b49);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
	border-radius: 12px !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-popup-close {
	border-color: var(--color-border, #2b2b49);
	color: var(--color-text-muted, rgba(255, 255, 255, 0.65));
	background: var(--color-surface-hover, #252540) !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-popup-close:hover {
	color: var(--color-text-heading, #fff);
	border-color: var(--color-primary-light, #bb77d6);
}

/* —— AJAX chart: kill inline light greys / whites —— */
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-description,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-description[style] {
	color: var(--color-text-muted, rgba(255, 255, 255, 0.7)) !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-table-wrapper,
.cosplay-pro-body #size-va-popup-overlay .size-va-table-wrapper[style] {
	background-color: var(--color-surface, #1a1a2e) !important;
	box-shadow: none !important;
	border-radius: 10px !important;
	border: 1px solid var(--color-border, #2b2b49);
}

.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table[style] {
	border-color: var(--color-border, #2b2b49) !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table th,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table th[style] {
	background-color: var(--color-surface-hover, #252540) !important;
	color: var(--color-text-heading, rgba(255, 255, 255, 0.92)) !important;
	border-color: var(--color-border, #2b2b49) !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table td,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table td[style] {
	border-color: var(--color-border, #2b2b49) !important;
	color: var(--color-text, rgba(255, 255, 255, 0.88)) !important;
	background-color: transparent !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table td[style*="background-color: #f8f9fa"],
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-table td[style*="background-color:#f8f9fa"] {
	background-color: var(--color-bg-alt, #16162b) !important;
}

.cosplay-pro-body #size-va-popup-overlay .size-va-section-notes,
.cosplay-pro-body #size-va-popup-overlay .size-va-section-notes[style],
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-notes,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-notes[style] {
	color: var(--color-text-muted, rgba(255, 255, 255, 0.65)) !important;
	background-color: var(--color-bg-alt, #16162b) !important;
	border-left-color: var(--color-primary, #9b59b6) !important;
	border-top-color: var(--color-border, #2b2b49) !important;
}

/* Inch / cm toggle row */
.cosplay-pro-body #size-va-popup-overlay label[style*="color: #555"],
.cosplay-pro-body #size-va-popup-overlay .size-va-unit-switch-inline label {
	color: var(--color-text, rgba(255, 255, 255, 0.88)) !important;
}

.cosplay-pro-body #size-va-popup-overlay input[name="size-va-unit-inline"] {
	accent-color: var(--color-primary, #9b59b6);
}

/* Section titles inside chart HTML */
.cosplay-pro-body #size-va-popup-overlay .size-va-chart-title,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart h3,
.cosplay-pro-body #size-va-popup-overlay .size-va-chart h4 {
	color: var(--color-text-heading, #fff) !important;
	border-bottom-color: var(--color-primary, #9b59b6) !important;
}

/* “How to measure” diagram area if wrapped */
.cosplay-pro-body #size-va-popup-overlay .size-va-chart img {
	border-radius: 8px;
}