/*
 * VirtualRun Core - frontend access CSS.
 * Covers: login form, register form, dashboard shell cards, notices,
 * buttons. Loaded ONLY on the login/register/dashboard pages (see
 * VR_Frontend_Access::maybe_enqueue_frontend_assets()), never
 * sitewide. Uses its own "vrc-" prefixed classes and its own small
 * set of CSS variables so this plugin never depends on any specific
 * theme's classes - it must look reasonable under any lightweight
 * theme, including the fallback WordPress default themes.
 *
 * No Bootstrap, no Tailwind, no page builder, no external fonts.
 */
.vrc-auth-wrap,
.vrc-dashboard,
.vrc-reg-box {
	--vrc-navy: #071B33;
	--vrc-blue: #1266F1;
	--vrc-blue-dark: #0B4BC4;
	--vrc-blue-soft: #EAF2FF;
	--vrc-bg: #F5F8FC;
	--vrc-white: #FFFFFF;
	--vrc-border: #D9E3F0;
	--vrc-text: #102033;
	--vrc-muted: #667085;
	--vrc-green: #13B981;
	--vrc-red: #DC2626;
	--vrc-radius: 14px;
	--vrc-radius-sm: 8px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--vrc-text);
}

/* ==========================================================
   VirtualRun UI/UX 2.0 shared design system (v0.6.33, Part 1)
   Deliberately a SEPARATE, globally-scoped :root block using the
   --vr- prefix (not --vrc-) rather than renaming the existing
   scoped --vrc-* system above - that system is used throughout this
   file already, is deliberately SCOPED to .vrc-auth-wrap/
   .vrc-dashboard/.vrc-reg-box, and renaming it risked breaking
   everything using it for no real benefit. This new block matches
   virtualrun-theme's own --vr-* root block value-for-value, so the
   same design tokens mean the same colors/radii/shadows whether
   read from the plugin or the theme. Powers only the new
   .vr-ui-* classes below - existing plugin markup and its --vrc-*
   variables are completely untouched.
   ========================================================== */
:root {
	--vr-navy: #071B33;
	--vr-blue: #1266F1;
	--vr-blue-dark: #0B4BC4;
	--vr-blue-soft: #EAF2FF;
	--vr-cyan: #28D4FF;
	--vr-orange: #FF8A1F;
	--vr-green: #13B981;
	--vr-red: #EF4444;
	--vr-text: #102033;
	--vr-muted: #667085;
	--vr-bg: #F5F8FC;
	--vr-white: #FFFFFF;
	--vr-border: #D9E3F0;
	--vr-radius-sm: 10px;
	--vr-radius-md: 16px;
	--vr-radius-lg: 24px;
	--vr-shadow-sm: 0 8px 24px rgba(7, 27, 51, 0.08);
	--vr-shadow-md: 0 16px 44px rgba(7, 27, 51, 0.12);
}

.vr-ui-card {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-md);
	box-shadow: var(--vr-shadow-sm);
	padding: 20px;
}

.vr-ui-panel {
	background: var(--vr-bg);
	border-radius: var(--vr-radius-md);
	padding: 24px;
}

.vr-ui-section {
	padding: 40px 0;
}

.vr-ui-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.vr-ui-kpi {
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-md);
	box-shadow: var(--vr-shadow-sm);
	padding: 18px 20px;
}

.vr-ui-kpi-value {
	font-size: 26px;
	font-weight: 800;
	color: var(--vr-navy);
	line-height: 1.1;
}

.vr-ui-kpi-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vr-muted);
	margin-top: 4px;
}

/* ---------- Buttons ---------- */
.vr-ui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 20px;
	border-radius: var(--vr-radius-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	line-height: 1;
}

.vr-ui-button-primary {
	background: var(--vr-blue);
	color: var(--vr-white);
}

.vr-ui-button-primary:hover {
	background: var(--vr-blue-dark);
	color: var(--vr-white);
}

.vr-ui-button-secondary {
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
}

.vr-ui-button-secondary:hover {
	background: var(--vr-border);
}

.vr-ui-button-ghost {
	background: transparent;
	color: var(--vr-navy);
	border-color: var(--vr-border);
}

.vr-ui-button-ghost:hover {
	background: var(--vr-bg);
}

.vr-ui-button-danger {
	background: var(--vr-red);
	color: var(--vr-white);
}

.vr-ui-button-small {
	height: 32px;
	padding: 0 14px;
	font-size: 12.5px;
}

/* ---------- Badges ---------- */
.vr-ui-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--vr-bg);
	color: var(--vr-text);
	white-space: nowrap;
}

.vr-ui-badge-success {
	background: rgba(19, 185, 129, 0.12);
	color: #0e8f64;
}

.vr-ui-badge-warning {
	background: rgba(255, 138, 31, 0.14);
	color: #b35e0f;
}

.vr-ui-badge-danger {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

.vr-ui-badge-info {
	background: var(--vr-blue-soft);
	color: var(--vr-blue-dark);
}

/* ---------- Alerts / empty states ---------- */
.vr-ui-alert {
	border-radius: var(--vr-radius-sm);
	padding: 12px 16px;
	font-size: 13.5px;
	border: 1px solid var(--vr-border);
	background: var(--vr-bg);
	color: var(--vr-text);
}

.vr-ui-empty {
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed var(--vr-border);
	border-radius: var(--vr-radius-md);
	background: var(--vr-bg);
}

.vr-ui-empty-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--vr-navy);
	margin: 0 0 6px;
}

.vr-ui-empty-description {
	font-size: 13.5px;
	color: var(--vr-muted);
	margin: 0 0 16px;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Forms ---------- */
.vr-ui-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vr-ui-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vr-ui-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--vr-text);
}

.vr-ui-input,
.vr-ui-select {
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-sm);
	font-size: 14px;
	color: var(--vr-text);
	background: var(--vr-white);
	box-sizing: border-box;
}

.vr-ui-input:focus,
.vr-ui-select:focus {
	outline: none;
	border-color: var(--vr-blue);
	box-shadow: 0 0 0 3px var(--vr-blue-soft);
}

/* ---------- Tables ---------- */
.vr-ui-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--vr-white);
	border: 1px solid var(--vr-border);
	border-radius: var(--vr-radius-md);
	overflow: hidden;
}

.vr-ui-table th {
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--vr-muted);
	background: var(--vr-bg);
	padding: 12px 16px;
}

.vr-ui-table td {
	padding: 14px 16px;
	font-size: 13.5px;
	color: var(--vr-text);
	border-top: 1px solid var(--vr-border);
}

.vr-ui-table tbody tr:hover {
	background: var(--vr-blue-soft);
}

/* ---------- Auth forms (login/register) ---------- */
.vrc-auth-wrap {
	max-width: 420px;
	margin: 40px auto;
	background: var(--vrc-white);
	border: 1px solid var(--vrc-border);
	border-radius: var(--vrc-radius);
	padding: 28px;
	box-shadow: 0 1px 2px rgba(7, 27, 51, 0.06);
}

.vrc-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vrc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}

.vrc-field label {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--vrc-navy);
}

.vrc-field input[type="text"],
.vrc-field input[type="email"],
.vrc-field input[type="password"],
.vrc-field select {
	padding: 11px 12px;
	border: 1px solid var(--vrc-border);
	border-radius: var(--vrc-radius-sm);
	font-size: 14.5px;
	font-family: inherit;
	background: var(--vrc-white);
	color: var(--vrc-text);
}

.vrc-field input:focus-visible,
.vrc-field select:focus-visible {
	outline: 3px solid var(--vrc-blue);
	outline-offset: 1px;
}

.vrc-field-inline label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.vrc-field-note {
	font-size: 12.5px;
	color: var(--vrc-muted);
	margin: -6px 0 14px;
}

.vrc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: var(--vrc-radius-sm);
	font-weight: 700;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.vrc-btn-primary {
	background: var(--vrc-blue);
	color: var(--vrc-white);
	width: 100%;
}

.vrc-btn-primary:hover {
	background: var(--vrc-blue-dark);
}

.vrc-auth-links {
	margin-top: 16px;
	text-align: center;
	font-size: 13.5px;
}

.vrc-auth-links a {
	color: var(--vrc-blue);
	text-decoration: none;
}

.vrc-auth-links a:hover {
	color: var(--vrc-blue-dark);
}

/* ---------- Notices ---------- */
.vrc-notice {
	border-radius: var(--vrc-radius-sm);
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 600;
	margin: 0 0 16px;
}

.vrc-notice-error {
	background: rgba(220, 38, 38, 0.08);
	color: var(--vrc-red);
	border: 1px solid rgba(220, 38, 38, 0.25);
}

.vrc-notice-success {
	background: rgba(19, 185, 129, 0.1);
	color: var(--vrc-green);
	border: 1px solid rgba(19, 185, 129, 0.3);
}

.vrc-notice-info {
	background: var(--vrc-blue-soft);
	color: var(--vrc-blue-dark);
	border: 1px solid var(--vrc-border);
}

/* ---------- Dashboard shell ---------- */
.vrc-dashboard {
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px;
}

.vrc-dashboard-header {
	margin-bottom: 24px;
}

.vrc-dashboard-title {
	font-size: 26px;
	color: var(--vrc-navy);
	margin: 0 0 6px;
	font-weight: 700;
}

.vrc-dashboard-welcome {
	color: var(--vrc-muted);
	font-size: 14px;
	margin: 0;
}

/* v0.6.37 (Part A): the legacy .vrc-dashboard-title/-welcome classes
   (dark navy/muted text, meant for a plain white background) can
   land on the SAME element as the newer .vr-dashboard-title/
   -subtitle classes (white/soft-white text, meant for the dark
   navy-to-blue gradient header) - see
   includes/shortcodes/class-vr-dashboard-shortcodes.php, which
   applies both class names together. Whichever rule happens to load
   last in the cascade wins on equal specificity, which is fragile
   and exactly the kind of thing that can silently regress after an
   unrelated CSS edit. Forcing the readable treatment with
   !important here is the sanctioned exception for overriding an old
   conflicting style, not decorative use - a dark, low-contrast
   title on a dark gradient is a real readability problem, not a
   preference. */
.vr-dashboard-header .vrc-dashboard-title,
.vr-dashboard-header .vr-dashboard-title {
	color: #ffffff !important;
}

.vr-dashboard-header .vrc-dashboard-welcome,
.vr-dashboard-header .vr-dashboard-subtitle {
	color: rgba(255, 255, 255, 0.82) !important;
}

.vrc-dashboard-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.vrc-dashboard-card {
	background: var(--vrc-white);
	border: 1px solid var(--vrc-border);
	border-radius: var(--vrc-radius);
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vrc-dashboard-card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--vrc-navy);
	margin: 0;
}

.vrc-dashboard-card-badge {
	display: inline-block;
	background: var(--vrc-blue-soft);
	color: var(--vrc-blue-dark);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.vrc-dashboard-logout {
	margin-top: 28px;
}

.vrc-dashboard-logout a {
	color: var(--vrc-muted);
	font-size: 13.5px;
	text-decoration: underline;
}

@media (min-width: 640px) {
	.vrc-dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.vrc-dashboard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Event registration box (v0.5.0) ---------- */
.vrc-reg-box {
	max-width: 560px;
	margin: 32px auto;
	background: var(--vrc-white, #ffffff);
	border: 1px solid var(--vrc-border, #d9e3f0);
	border-radius: var(--vrc-radius, 14px);
	padding: 24px;
}

.vrc-registration-form .vrc-field {
	margin-bottom: 14px;
}

.vrc-payment-methods {
	display: block;
}

.vrc-radio-label {
	display: block;
	font-weight: 500;
	padding: 6px 0;
}

.vrc-conditional-fields {
	background: #f5f8fc;
	border: 1px solid #d9e3f0;
	border-radius: 8px;
	padding: 12px 14px;
	margin: 8px 0 14px;
}

.vrc-field-note {
	font-size: 13px;
	color: #667085;
	margin: 0 0 6px;
}

/* ---------- Participant "My Events" (v0.5.0) ---------- */
.vrc-my-events {
	margin-top: 32px;
}

.vrc-dashboard-section-title {
	font-size: 20px;
	color: #071b33;
	margin-bottom: 14px;
}

.vrc-my-events-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vrc-my-event-row {
	background: var(--vrc-white, #ffffff);
	border: 1px solid var(--vrc-border, #d9e3f0);
	border-radius: var(--vr-radius-md, 14px);
	box-shadow: var(--vr-shadow-sm, 0 8px 24px rgba(7, 27, 51, 0.06));
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vrc-my-event-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vr-my-event-title {
	font-size: 17px;
	color: var(--vrc-navy, #0b1c33);
}

.vrc-my-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.vrc-meta-item {
	font-size: 12.5px;
	color: var(--vrc-muted, #667085);
}

.vrc-badge-status {
	display: inline-block;
	background: #eaf2ff;
	color: #0b4bc4;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
}

/* ---------- Progress strip (v0.6.41, Part B.2) ---------- */
.vr-my-event-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vr-progress-step {
	flex: 1;
	min-width: 84px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	padding: 7px 6px;
	border-radius: var(--vr-radius-sm, 8px);
	white-space: nowrap;
	background: var(--vrc-bg, #f5f8fc);
	color: var(--vrc-muted, #98a2b3);
	border: 1px solid var(--vrc-border, #eef1f6);
}

.vr-progress-step-complete {
	background: rgba(19, 185, 129, 0.12);
	color: #0e8f64;
	border-color: rgba(19, 185, 129, 0.25);
}

.vr-progress-step-pending {
	background: rgba(255, 138, 31, 0.12);
	color: #a35a00;
	border-color: rgba(255, 138, 31, 0.25);
}

.vr-progress-step-locked {
	background: var(--vrc-bg, #f5f8fc);
	color: #c4cdd9;
	border-color: var(--vrc-border, #eef1f6);
}

/* ---------- Details grid (v0.6.42, Part B) ---------- */
.vr-my-event-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px 16px;
	padding: 14px 16px;
	background: var(--vrc-bg, #f5f8fc);
	border-radius: var(--vr-radius-sm, 10px);
}

.vr-my-event-detail {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.vr-my-event-detail-label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vrc-muted, #98a2b3);
}

.vr-my-event-detail-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--vrc-navy, #0b1c33);
	overflow-wrap: break-word;
}

.vr-my-event-detail-value.vr-my-event-detail-status {
	display: inline-flex;
	width: fit-content;
	font-weight: 700;
}

/* ---------- Action area ---------- */
.vr-my-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 4px;
	border-top: 1px solid var(--vrc-border, #eef1f6);
}

.vrc-btn-disabled {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

/* ---------- Empty state ---------- */
.vr-my-events-empty {
	text-align: center;
}

.vr-my-events-empty .vr-empty-title strong {
	font-size: 16px;
	color: var(--vrc-navy, #0b1c33);
}

.vr-my-events-empty .vr-empty-description {
	font-size: 13.5px;
	color: var(--vrc-muted, #667085);
	margin: 6px 0 16px;
}

/* ---------- Participant dashboard + quick actions (v0.6.41, Part A) ---------- */
.vr-participant-dashboard {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.vr-participant-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.vr-participant-action-card {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--vrc-white, #ffffff);
	border: 1px solid var(--vrc-border, #d9e3f0);
	border-radius: var(--vr-radius-sm, 10px);
	padding: 14px 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--vrc-navy, #0b1c33);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.1s ease;
}

.vr-participant-action-card:hover {
	border-color: var(--vrc-blue, #1266f1);
	color: var(--vrc-blue, #1266f1);
}

/* ---------- Mobile (Part H) ---------- */
@media (max-width: 640px) {
	.vrc-my-event-row {
		padding: 16px;
	}
	.vr-my-event-progress {
		flex-wrap: wrap;
	}
	.vr-progress-step {
		min-width: calc(33% - 6px);
	}
	.vr-my-event-actions {
		flex-direction: column;
	}
	.vr-my-event-actions .vrc-btn,
	.vr-my-event-actions .vr-btn {
		width: 100%;
		text-align: center;
	}
	.vr-participant-quick-actions {
		grid-template-columns: 1fr 1fr;
	}
	.vr-my-event-details-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Leaderboard table (v0.6.0) ---------- */
.vrc-leaderboard-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.vrc-leaderboard-table th,
.vrc-leaderboard-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #d9e3f0;
	font-size: 14px;
}

.vrc-leaderboard-table th {
	background: #f5f8fc;
	font-weight: 700;
	color: #071b33;
}

.vrc-empty {
	background: #f5f8fc;
	border: 1px dashed #d9e3f0;
	border-radius: 10px;
	padding: 24px;
	text-align: center;
	color: #667085;
}

/* ---------- Certificate (v0.6.0) ---------- */
.vrc-certificate-actions {
	margin: 16px 0;
	display: flex;
	gap: 10px;
}

.vrc-certificate {
	max-width: 900px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #d9e3f0;
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(7, 27, 51, 0.14);
	padding: 48px;
}

.vrc-certificate-inner {
	border: 2px solid #1266f1;
	border-radius: 8px;
	padding: 48px;
	text-align: center;
}

.vrc-certificate-brand {
	font-weight: 800;
	color: #1266f1;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 13px;
}

.vrc-certificate-title {
	font-size: 30px;
	color: #071b33;
	margin: 10px 0 20px;
}

.vrc-certificate-line {
	font-size: 15px;
	color: #667085;
	margin: 6px 0;
}

.vrc-certificate-name {
	font-size: 26px;
	font-weight: 800;
	color: #071b33;
	margin: 12px 0;
}

.vrc-certificate-meta {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin: 20px 0;
	font-size: 14px;
	color: #071b33;
}

.vrc-certificate-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 40px;
	text-align: left;
	font-size: 13px;
}

.vrc-certificate-sign-line {
	display: block;
	width: 160px;
	border-bottom: 1px solid #071b33;
	margin-bottom: 6px;
}

.vrc-certificate-number span,
.vrc-certificate-signatory span {
	display: block;
}

.vrc-certificate-disclaimer {
	margin-top: 30px;
	font-size: 11px;
	color: #667085;
}

@media print {
	.vrc-certificate-actions,
	.vrc-dashboard,
	header,
	footer {
		display: none !important;
	}
	.vrc-certificate {
		box-shadow: none;
		border: none;
	}
}

/* ---------- Achievement share card (v0.6.0) ---------- */
.vrc-achievement-card-wrap {
	max-width: 480px;
	margin: 16px auto;
	text-align: center;
}

.vrc-achievement-card-image {
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(7, 27, 51, 0.14);
	margin-bottom: 12px;
}

.vrc-achievement-card-html {
	background: linear-gradient(150deg, #071b33, #0b4bc4 70%, #28d4ff 140%);
	color: #ffffff;
	border-radius: 12px;
	padding: 40px 30px;
	margin-bottom: 12px;
}

.vrc-achievement-card-brand {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
}

.vrc-achievement-card-headline {
	font-size: 18px;
	margin: 12px 0 4px;
}

.vrc-achievement-card-name {
	font-size: 24px;
	font-weight: 800;
	margin: 4px 0 12px;
}

.vrc-achievement-card-meta {
	font-size: 13px;
	opacity: 0.85;
	margin: 2px 0;
}

.vrc-achievement-card-footer {
	margin-top: 16px;
	font-size: 12px;
	opacity: 0.7;
}

/* ---------- Organizer dashboard (v0.6.0) ---------- */
.vrc-organizer-dashboard {
	max-width: 900px;
	margin: 0 auto;
}

.vrc-organizer-event-card {
	background: #ffffff;
	border: 1px solid #d9e3f0;
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 14px;
}

.vrc-organizer-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 10px 0;
	font-size: 13px;
	color: #667085;
}

.vrc-organizer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.vrc-organizer-links a {
	font-size: 13px;
	font-weight: 600;
	color: #0b4bc4;
}

/* ---------- My Events progress row + shipping form (v0.6.0) ---------- */
.vrc-my-event-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0;
	width: 100%;
}

.vrc-my-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	width: 100%;
}

.vrc-shipping-form-wrap {
	margin-top: 32px;
	max-width: 720px;
}

/* ---------- My Profile + Add Event Form UI 2.0 (v0.6.38) ---------- */
.vr-form-card {
	background: var(--vrc-white, #ffffff);
	border: 1px solid var(--vrc-border, #d9e3f0);
	border-radius: var(--vr-radius-md, 16px);
	box-shadow: var(--vr-shadow-sm, 0 8px 24px rgba(7, 27, 51, 0.06));
	padding: 24px 28px;
}

.vr-profile-header {
	margin-bottom: 20px;
}

.vr-profile-title {
	margin: 0 0 4px;
}

.vr-profile-description,
.vr-profile-section-description,
.vr-add-event-description,
.vr-add-event-section-description {
	color: var(--vrc-muted, #667085);
	font-size: 13.5px;
	margin: 0 0 16px;
}

.vr-profile-section,
.vr-add-event-section {
	padding: 20px 0;
	border-top: 1px solid var(--vrc-border, #eef1f6);
}

.vr-profile-section:first-of-type,
.vr-add-event-section:first-of-type {
	border-top: none;
	padding-top: 4px;
}

.vr-profile-section-title,
.vr-add-event-section-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vrc-navy, #071b33);
}

.vr-form-grid,
.vr-add-event-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 20px;
	margin: 0;
}

.vr-form-field p,
.vrc-field.vr-form-field {
	margin: 0;
}

.vr-form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vrc-text, #102033);
	margin-bottom: 6px;
}

.vr-form-input,
.vr-form-select,
.vr-form-textarea {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vrc-border, #d9e3f0);
	border-radius: var(--vr-radius-sm, 10px);
	font-size: 14px;
	color: var(--vrc-text, #102033);
	background: var(--vrc-white, #ffffff);
	box-sizing: border-box;
}

.vr-form-textarea {
	height: auto;
	min-height: 110px;
	padding: 12px 14px;
	resize: vertical;
	font-family: inherit;
}

.vr-form-input:focus,
.vr-form-select:focus,
.vr-form-textarea:focus {
	outline: none;
	border-color: var(--vrc-blue, #1266f1);
	box-shadow: 0 0 0 3px var(--vrc-blue-soft, #eaf2ff);
}

.vr-form-input[readonly],
.vr-form-input:disabled {
	background: var(--vrc-bg, #f5f8fc);
	color: var(--vrc-muted, #667085);
	cursor: not-allowed;
}

.vr-form-help {
	display: block;
	font-size: 12px;
	color: var(--vrc-muted, #667085);
	margin-top: 5px;
}

.vr-form-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

.vr-form-actions,
.vr-add-event-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--vrc-border, #eef1f6);
}

.vr-profile-save-button,
.vr-create-event-button {
	min-width: 180px;
}

.vr-cancel-button {
	background: transparent;
	color: var(--vrc-muted, #475467);
	border: 1px solid var(--vrc-border, #d9e3f0);
}

.vr-form-notice {
	border-radius: var(--vr-radius-sm, 10px);
	padding: 12px 16px;
	font-size: 13.5px;
	margin-bottom: 16px;
}

.vr-form-notice-success {
	background: rgba(19, 185, 129, 0.1);
	color: #0e8f64;
	border: 1px solid rgba(19, 185, 129, 0.25);
}

.vr-form-notice-error {
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
	border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ---------- Add Event image upload area ---------- */
.vr-image-upload-box {
	border: 1px dashed var(--vrc-border, #d9e3f0);
	border-radius: var(--vr-radius-md, 14px);
	padding: 20px;
	background: var(--vrc-bg, #f7f9fc);
	text-align: center;
}

.vr-image-upload-preview {
	max-width: 320px;
	margin: 0 auto 14px;
	border-radius: var(--vr-radius-sm, 10px);
	overflow: hidden;
}

.vr-image-upload-preview img {
	width: 100%;
	display: block;
}

.vr-image-upload-help {
	font-size: 12px;
	color: var(--vrc-muted, #667085);
	margin-top: 10px;
}

/* ---------- Payment method selectable cards ---------- */
.vr-payment-method-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.vr-form-card {
		padding: 20px 18px;
	}
	.vr-form-grid,
	.vr-add-event-grid {
		grid-template-columns: 1fr;
	}
	.vr-form-actions,
	.vr-add-event-actions {
		flex-direction: column;
		align-items: stretch;
	}
}

.vrc-btn-disabled {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid #d9e3f0;
	color: #98a2b3;
	font-size: 12.5px;
	cursor: default;
}

/* ---------- Registration form final polish (v0.6.16, Module A/B) ---------- */
.vr-payment-method-card {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--vrc-border);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13.5px;
	transition: border-color 0.15s, background 0.15s;
}

.vr-payment-method-card:hover {
	border-color: var(--vrc-blue);
}

.vr-payment-method-card:has(input:checked) {
	border-color: var(--vrc-blue);
	background: var(--vrc-blue-soft);
}

.vr-upi-reference-field .vr-form-input,
.vr-upi-reference-field input[type="text"] {
	border: 1px solid var(--vrc-border);
	border-radius: 8px;
	padding: 11px 12px;
	font-size: 14.5px;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
}

.vr-upi-reference-field .vr-form-input:focus,
.vr-upi-reference-field input[type="text"]:focus {
	outline: none;
	border-color: var(--vrc-blue);
	box-shadow: 0 0 0 3px var(--vrc-blue-soft);
}

.vr-form-help {
	display: block;
	font-size: 12px;
	color: var(--vrc-muted);
	margin-top: 4px;
}

.vr-submit-button {
	background: var(--vrc-blue);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 24px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.vr-submit-button:hover,
.vr-submit-button:focus-visible {
	background: var(--vrc-blue-dark);
	outline: 3px solid var(--vrc-blue-soft);
	outline-offset: 2px;
}

/* Price display - strikethrough original, highlighted current,
   Early Bird badge, limited-period note (never shown for a plain
   Regular Price / Free label - see build_price_html()). */
.vr-price-box {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 10px 0;
}

.vr-price-original {
	text-decoration: line-through;
	color: var(--vrc-muted);
	font-size: 15px;
}

.vr-price-current {
	color: var(--vrc-navy);
	font-size: 22px;
	font-weight: 800;
}

.vr-price-badge {
	background: var(--vrc-blue);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 9px;
	border-radius: 999px;
}

.vr-price-note {
	flex-basis: 100%;
	font-size: 12px;
	color: var(--vrc-muted);
}

@media (max-width: 480px) {
	.vr-submit-button {
		width: 100%;
	}
	.vr-upi-reference-field .vr-form-input,
	.vr-upi-reference-field input[type="text"] {
		max-width: 100%;
	}
}

.vrc-proof-approved-links {
	margin-top: 10px;
}

/* ---------- Frontend dashboard shell (v0.6.13, modernized v0.6.34) ---------- */
.vr-dashboard-shell {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.vr-dashboard-header {
	margin-bottom: 24px;
	padding: 22px 24px;
	background: linear-gradient(120deg, var(--vr-navy, #071b33), var(--vr-blue-dark, #0b4bc4));
	border-radius: var(--vr-radius-md, 16px);
	box-shadow: var(--vr-shadow-sm, 0 8px 24px rgba(7, 27, 51, 0.08));
}

.vr-dashboard-title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 800;
	color: #ffffff;
}

.vr-dashboard-subtitle {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13.5px;
}

/* Clean SaaS tab bar - pill style, horizontal on desktop, scrollable
   on mobile, no bullets (this is a flat row of <a> tags, not a
   <ul><li> list, so there is nothing for a browser to add bullet
   markers to in the first place - see
   VR_Frontend_Dashboard_Menu::render()). Never includes Logout or
   WordPress Admin (v0.6.13 Part 1/3). */
.vr-dashboard-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 6px;
	margin: 0 0 20px;
	padding: 6px;
	background: var(--vr-bg, #f5f8fc);
	border-radius: var(--vr-radius-sm, 10px);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.vr-dashboard-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vr-muted, #667085);
	white-space: nowrap;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.vr-dashboard-tab:hover {
	color: var(--vr-blue, #1266f1);
	background: rgba(255, 255, 255, 0.6);
}

.vr-dashboard-tab-active {
	color: #ffffff;
	background: var(--vr-blue, #1266f1);
}

.vr-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--vr-red, #ef4444);
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
}

.vr-dashboard-tab-active .vr-tab-badge {
	background: #ffffff;
	color: var(--vr-blue, #1266f1);
}

.vr-dashboard-content {
	background: #ffffff;
	border: 1px solid var(--vr-border, #e2e8f2);
	border-radius: var(--vr-radius-md, 14px);
	padding: 22px;
	box-shadow: var(--vr-shadow-sm, 0 1px 3px rgba(11, 28, 51, 0.04));
}

/* ---------- KPI grid ---------- */
.vr-dashboard-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.vr-dashboard-kpi {
	background: #ffffff;
	border: 1px solid var(--vr-border, #e2e8f2);
	border-radius: var(--vr-radius-md, 14px);
	padding: 18px 20px;
	box-shadow: var(--vr-shadow-sm, 0 1px 3px rgba(11, 28, 51, 0.04));
}

.vr-dashboard-kpi-value {
	display: block;
	font-size: 28px;
	font-weight: 800;
	color: var(--vr-navy, #0b1c33);
	line-height: 1.1;
}

.vr-dashboard-kpi-label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--vr-muted, #667085);
}

/* ---------- Panels ---------- */
.vr-dashboard-panel {
	background: #ffffff;
	border: 1px solid var(--vr-border, #e2e8f2);
	border-radius: var(--vr-radius-md, 14px);
	padding: 20px;
	margin-bottom: 20px;
}

.vr-dashboard-panel-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vr-navy, #0b1c33);
}

/* ---------- Buttons: alias set for dashboard actions ---------- */
.vr-action-primary,
.vr-action-secondary,
.vr-action-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	border-radius: var(--vr-radius-sm, 8px);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vr-action-primary {
	background: var(--vr-blue, #1266f1);
	color: #ffffff;
}

.vr-action-primary:hover {
	background: var(--vr-blue-dark, #0b4bc4);
	color: #ffffff;
}

.vr-action-secondary {
	background: var(--vr-blue-soft, #eef4ff);
	color: var(--vr-blue-dark, #1266f1);
}

.vr-action-danger {
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
	border-color: rgba(239, 68, 68, 0.2);
}

.vr-action-danger:hover {
	background: var(--vr-red, #ef4444);
	color: #ffffff;
}

/* ---------- Notifications: see the full Notifications UI 2.0 block
   further down this file (v0.6.40) for .vr-notification-card and
   related rules - this used to be a separate, now-superseded
   duplicate from the earlier Dashboard Shell patch. ---------- */

/* ---------- My Profile two-column layout ---------- */
.vr-profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}

.vr-profile-grid .vrc-field,
.vr-profile-grid .vr-form-field {
	margin: 0;
}

/* ---------- Add Event field grouping ---------- */
.vr-form-group {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--vr-border, #e2e8f2);
}

.vr-form-group:last-of-type {
	border-bottom: none;
}

.vr-form-group-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--vr-muted, #667085);
}

@media (max-width: 900px) {
	.vr-dashboard-kpis {
		grid-template-columns: repeat(2, 1fr);
	}
	.vr-profile-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.vr-dashboard-shell {
		padding: 16px 12px 32px;
	}
	.vr-dashboard-header {
		padding: 18px;
	}
	.vr-dashboard-content {
		padding: 14px;
		border-radius: 10px;
	}
	.vr-dashboard-kpis {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.vr-dashboard-kpi {
		padding: 14px 16px;
	}
	.vr-dashboard-kpi-value {
		font-size: 22px;
	}
}


/* ---------- Stats cards (v0.6.13) ---------- */
.vr-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.vr-dashboard-card {
	background: #ffffff;
	border: 1px solid #e2e8f2;
	border-left: 3px solid #1266f1;
	border-radius: 10px;
	padding: 14px 16px;
	min-height: 76px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.vr-dashboard-card-count {
	font-size: 24px;
	font-weight: 700;
	color: #0b1c33;
	line-height: 1.1;
}

.vr-dashboard-card-label {
	font-size: 12px;
	color: #667085;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

@media (max-width: 640px) {
	.vr-dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vr-dashboard-panel {
	margin-bottom: 24px;
}

.vr-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 20px;
}

.vr-dashboard-empty {
	text-align: center;
	padding: 48px 24px;
	background: var(--vr-bg, #f7f9fc);
	border: 1px dashed var(--vr-border, #d9e3f0);
	border-radius: var(--vr-radius-md, 14px);
	color: #667085;
}

.vr-dashboard-empty::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--vr-blue-soft, #eaf2ff);
}

.vr-dashboard-empty p {
	margin: 0 0 12px;
	font-size: 13.5px;
}

/* ---------- Frontend tables (v0.6.13) ---------- */
.vr-table-wrap {
	overflow-x: auto;
	background: var(--vr-white, #ffffff);
	border: 1px solid var(--vr-border, #e2e8f2);
	border-radius: var(--vr-radius-md, 14px);
	box-shadow: var(--vr-shadow-sm, 0 8px 24px rgba(7, 27, 51, 0.05));
	-webkit-overflow-scrolling: touch;
}

.vr-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.vr-dashboard-table thead,
.vr-table-header {
	background: var(--vr-bg, #f5f8fd);
}

.vr-dashboard-table th {
	text-align: left;
	padding: 13px 14px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--vr-muted, #475467);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	/* v0.6.37 (Part C): was white-space:nowrap - forcing every
	   header label onto one line meant the browser's table layout
	   sized each column to its unwrapped label width, and with 8-10
	   columns that easily exceeded the viewport on a normal desktop
	   width, triggering horizontal scroll that had nothing to do
	   with the actual row data being wide. Allowing a 2-line wrap on
	   longer labels lets the browser size columns to their more
	   compact wrapped width instead. */
	white-space: normal;
	max-width: 160px;
}

.vr-dashboard-table td {
	padding: 14px 16px;
	border-top: 1px solid var(--vr-border, #eef1f6);
	vertical-align: middle;
}

.vr-dashboard-table tbody tr,
.vr-table-row {
	transition: background-color 0.12s ease;
}

.vr-dashboard-table tbody tr:hover,
.vr-table-row:hover {
	background: var(--vr-blue-soft, #f5f8fd);
}

.vr-table-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.vr-table-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--vr-muted, #667085);
	font-size: 13.5px;
}

.vr-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	background: #eef1f6;
	color: #475467;
}

.vr-status-badge-confirmed,
.vr-status-badge-approved,
.vr-status-badge-issued {
	background: #e7f7ee;
	color: #0f7a3d;
}

.vr-status-badge-cancelled,
.vr-status-badge-rejected,
.vr-status-badge-revoked {
	background: #fdecec;
	color: #b3261e;
}

.vr-status-badge-pending_upi_verification,
.vr-status-badge-upi_pending_verification,
.vr-status-badge-pending_cash_payment,
.vr-status-badge-cash_pending,
.vr-status-badge-under_review {
	background: #fff4e0;
	color: #a35a00;
}

.vr-status-badge-pending_online_payment,
.vr-status-badge-submitted {
	background: #eaf1ff;
	color: #1266f1;
}

/* ---------- Buttons (v0.6.13) ---------- */
.vr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 700;
	border-radius: var(--vr-radius-sm, 10px);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.vr-btn:active {
	transform: translateY(1px);
}

.vr-btn-primary {
	background: var(--vr-blue, #1266f1);
	color: #ffffff;
	border-color: var(--vr-blue, #1266f1);
}

.vr-btn-primary:hover {
	background: var(--vr-blue-dark, #0b4bc4);
	border-color: var(--vr-blue-dark, #0b4bc4);
	color: #ffffff;
}

.vr-btn-secondary {
	background: var(--vr-blue-soft, #eef4ff);
	color: var(--vr-blue-dark, #1266f1);
	border-color: var(--vr-blue-soft, #eef4ff);
}

.vr-btn-secondary:hover {
	background: var(--vr-border, #dce8fe);
}

.vr-btn-outline {
	background: transparent;
	color: #344054;
	border-color: var(--vr-border, #d9e3f0);
}

.vr-btn-outline:hover {
	background: #f5f8fd;
	border-color: #1266f1;
	color: #1266f1;
}

.vr-btn-danger {
	background: #fdecec;
	color: #b3261e;
	border-color: #fdecec;
}

.vr-btn-danger:hover {
	background: #f9d5d5;
}

.vr-btn-small {
	height: 30px;
	padding: 0 10px;
	font-size: 12px;
	border-radius: 6px;
}

.vr-btn-disabled,
.vr-btn[disabled] {
	background: #f1f3f7;
	color: #98a2b3;
	border-color: #f1f3f7;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------- Filters (v0.6.13, converted to grid in v0.6.23 Part D,
   elevated to a "control card" look in v0.6.36 Part A) ---------- */
.vr-dashboard .vr-filter-bar,
.virtualrun-dashboard .vr-filter-bar,
.vr-filter-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	align-items: end;
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #f7f9fc;
	border: 1px solid #e2e8f2;
	border-radius: 10px;
}

.vr-filter-panel {
	background: var(--vr-white, #ffffff);
	border: 1px solid var(--vr-border, #e2e8f2);
	border-radius: var(--vr-radius-md, 16px);
	box-shadow: var(--vr-shadow-sm, 0 8px 24px rgba(7, 27, 51, 0.06));
	padding: 18px 20px;
}

.vr-filter-bar label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: #667085;
}

.vr-filter-bar,
.vr-filter-field {
	box-sizing: border-box;
}

.vr-filter-bar * {
	box-sizing: border-box;
}

.vr-filter-bar input[type="search"],
.vr-filter-bar input[type="text"],
.vr-filter-bar input[type="date"],
.vr-filter-bar select,
.vr-filter-input,
.vr-filter-select,
.vr-dashboard .vr-filter-bar input[type="search"],
.vr-dashboard .vr-filter-bar input[type="text"],
.vr-dashboard .vr-filter-bar input[type="date"],
.vr-dashboard .vr-filter-bar select,
.virtualrun-dashboard .vr-filter-bar input[type="search"],
.virtualrun-dashboard .vr-filter-bar input[type="text"],
.virtualrun-dashboard .vr-filter-bar input[type="date"],
.virtualrun-dashboard .vr-filter-bar select {
	height: 42px;
	min-height: 42px;
	max-height: 42px;
	line-height: 1.2;
	padding: 0 12px;
	box-sizing: border-box;
	font-size: 13px;
	border: 1px solid #d9e3f0;
	border-radius: 6px;
	background: #ffffff;
	max-width: 100%;
	display: flex;
	align-items: center;
}

/* select/input aren't flex containers by default in every browser -
   the line-height + explicit height above already vertically centers
   text/placeholder without needing the flex declaration to take
   effect, so this degrades safely either way. Also appears with
   .vr-dashboard/.virtualrun-dashboard ancestor-scoped duplicates
   above so this always wins regardless of which wrapper class a
   given dashboard context actually uses. */

.vr-filter-bar input[name="vr_f_search"] {
	min-width: 0;
}

.vr-filter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vr-filter-label {
	font-size: 11.5px;
	font-weight: 600;
	color: #667085;
}

.vr-filter-actions {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.vr-filter-button,
.vr-reset-button {
	height: 42px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
}

.vr-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #475467;
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #f5f8fd;
	border-radius: 10px;
}

.vr-active-filters strong {
	color: #0b1c33;
}

.vr-active-filter-pill {
	display: inline-flex;
	align-items: center;
	background: #ffffff;
	border: 1px solid #d9e3f0;
	color: #0b1c33;
	font-weight: 600;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.vr-filter-button {
	background: #1266f1;
	color: #ffffff;
	border: 1px solid #1266f1;
}

.vr-filter-button:hover {
	background: #0b4bc4;
}

.vr-reset-button {
	background: #ffffff;
	color: #475467;
	border: 1px solid #d9e3f0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.vr-reset-button:hover {
	border-color: #1266f1;
	color: #1266f1;
}

@media (max-width: 640px) {
	.vr-filter-bar {
		grid-template-columns: 1fr;
	}
	.vr-filter-bar input[name="vr_f_search"] {
		min-width: 0;
	}
	.vr-filter-field,
	.vr-filter-actions {
		width: 100%;
	}
	.vr-filter-bar input[type="text"],
	.vr-filter-bar input[type="date"],
	.vr-filter-bar select {
		width: 100%;
	}
}

/* ---------- Notifications (v0.6.17, Module A) ---------- */
/* ---------- Notifications UI 2.0 (v0.6.40) ---------- */
.vr-notification-panel {
	display: block;
}

.vr-notifications-header,
.vr-notification-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.vr-notifications-list,
.vr-notification-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vr-notification-item,
.vr-notification-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--vrc-border, #e2e8f2);
	border-radius: var(--vr-radius-md, 14px);
	background: var(--vrc-white, #ffffff);
	box-shadow: var(--vr-shadow-sm, 0 4px 12px rgba(7, 27, 51, 0.04));
}

.vr-notification-icon {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vrc-border, #d9e3f0);
	flex-shrink: 0;
	margin-top: 6px;
}

.vr-notification-unread,
.vr-notification-card-unread {
	border-left: 3px solid var(--vrc-blue, #1266f1);
	background: var(--vrc-blue-soft, #f7faff);
	box-shadow: var(--vr-shadow-sm, 0 4px 12px rgba(18, 102, 241, 0.08));
}

.vr-notification-card-unread .vr-notification-icon {
	background: var(--vrc-blue, #1266f1);
}

.vr-notification-card-read {
	opacity: 0.72;
}

.vr-notification-body,
.vr-notification-content {
	flex: 1;
	min-width: 0;
}

.vr-notification-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 3px;
}

.vr-notification-body strong,
.vr-notification-title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vrc-navy, #0b1c33);
}

.vr-notification-type {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--vrc-bg, #f5f8fc);
	color: var(--vrc-muted, #667085);
	white-space: nowrap;
}

.vr-notification-type-payment_verified,
.vr-notification-type-proof_approved,
.vr-notification-type-certificate_issued {
	background: rgba(19, 185, 129, 0.12);
	color: #0e8f64;
}

.vr-notification-type-payment_pending,
.vr-notification-type-new_registration {
	background: rgba(255, 138, 31, 0.14);
	color: #a35a00;
}

.vr-notification-type-payment_cancelled,
.vr-notification-type-proof_rejected {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

.vr-notification-type-proof_submitted,
.vr-notification-type-medal_status_updated {
	background: var(--vrc-blue-soft, #eaf2ff);
	color: var(--vrc-blue-dark, #0b4bc4);
}

.vr-notification-body p,
.vr-notification-message {
	margin: 2px 0 6px;
	font-size: 13px;
	color: var(--vrc-muted, #475467);
	line-height: 1.5;
}

.vr-notification-time,
.vr-notification-meta {
	font-size: 11.5px;
	color: var(--vrc-muted, #98a2b3);
}

.vr-notification-actions {
	flex-shrink: 0;
}

.vr-notification-empty p {
	margin: 0 0 4px;
}

@media (max-width: 640px) {
	.vr-notification-item,
	.vr-notification-card {
		flex-direction: column;
	}
	.vr-notification-actions {
		width: 100%;
	}
	.vr-notification-actions .vr-btn {
		width: 100%;
	}
}


/* ---------- Add Event media picker (v0.6.23, Part F) ---------- */
.vr-media-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vr-media-picker-preview img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #d9e3f0;
}

/* ---------- Action Modal UI 2.0 (v0.6.40) ---------- */
.vr-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(7, 27, 51, 0.55);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.vr-modal-overlay.vr-modal-open {
	display: flex;
}

.vr-modal {
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
}

.vr-modal-dialog {
	background: var(--vrc-white, #ffffff);
	border-radius: var(--vr-radius-md, 16px);
	box-shadow: 0 24px 64px rgba(7, 27, 51, 0.3);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
	overflow: hidden;
}

.vr-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--vrc-border, #eef1f6);
}

.vr-modal-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 800;
	color: var(--vrc-navy, #0b1c33);
}

.vr-modal-subtitle {
	margin: 0;
	font-size: 13px;
	color: var(--vrc-muted, #475467);
}

.vr-modal-close {
	background: transparent;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--vrc-muted, #98a2b3);
	cursor: pointer;
	padding: 2px 6px;
	flex-shrink: 0;
}

.vr-modal-close:hover {
	color: var(--vrc-navy, #0b1c33);
}

.vr-modal-body {
	padding: 18px 24px;
	overflow-y: auto;
}

.vr-modal-warning {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--vr-radius-sm, 10px);
	font-size: 12.5px;
	background: rgba(255, 138, 31, 0.1);
	color: #a35a00;
}

.vr-modal-type-danger .vr-modal-warning {
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
}

.vr-modal-type-success .vr-modal-warning {
	background: rgba(19, 185, 129, 0.1);
	color: #0e8f64;
}

.vr-modal-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--vrc-bg, #f7f9fc);
	border-radius: var(--vr-radius-sm, 10px);
}

.vr-modal-detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vr-modal-detail-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vrc-muted, #98a2b3);
}

.vr-modal-detail-value {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vrc-navy, #0b1c33);
	overflow-wrap: break-word;
}

.vr-modal-remark-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vrc-text, #344054);
}

.vr-modal-remark {
	width: 100%;
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid var(--vrc-border, #d9e3f0);
	border-radius: var(--vr-radius-sm, 10px);
	font-family: inherit;
	font-size: 13.5px;
	resize: vertical;
	box-sizing: border-box;
}

.vr-modal-remark:focus {
	outline: none;
	border-color: var(--vrc-blue, #1266f1);
	box-shadow: 0 0 0 3px var(--vrc-blue-soft, #eaf2ff);
}

.vr-modal-footer,
.vr-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid var(--vrc-border, #eef1f6);
	flex-shrink: 0;
}

.vr-modal-primary {
	background: var(--vrc-blue, #1266f1);
	border-color: var(--vrc-blue, #1266f1);
}

.vr-modal-type-danger .vr-modal-primary {
	background: #ef4444;
	border-color: #ef4444;
}

.vr-modal-type-danger .vr-modal-primary:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

.vr-modal-type-success .vr-modal-primary {
	background: #13b981;
	border-color: #13b981;
}

.vr-modal-type-success .vr-modal-primary:hover {
	background: #0e8f64;
	border-color: #0e8f64;
}

.vr-modal-secondary {
	background: transparent;
}

.vr-modal-danger {
	background: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.vr-modal-details-grid {
		grid-template-columns: 1fr;
	}
	.vr-modal-header,
	.vr-modal-body,
	.vr-modal-footer,
	.vr-modal-actions {
		padding-left: 18px;
		padding-right: 18px;
	}
	.vr-modal-footer,
	.vr-modal-actions {
		flex-direction: column-reverse;
	}
	.vr-modal-footer .vr-btn,
	.vr-modal-actions .vr-btn {
		width: 100%;
	}
}

.vr-advanced-admin-tools {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px dashed #e2e8f2;
}

.vr-advanced-admin-tools-title {
	font-size: 12px;
	font-weight: 700;
	color: #98a2b3;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
}

.vrc-dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	margin: 16px 0 28px;
}

.vrc-dash-card {
	background: #ffffff;
	border: 1px solid #d9e3f0;
	border-left: 4px solid #1266f1;
	border-radius: 8px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vrc-dash-card-count {
	font-size: 22px;
	font-weight: 700;
	color: #071b33;
}

.vrc-dash-card-label {
	font-size: 12px;
	color: #667085;
	font-weight: 600;
}

.vrc-dashboard-table-wrap {
	overflow-x: auto;
	margin: 12px 0 24px;
}

.vrc-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
}

.vrc-dashboard-table th,
.vrc-dashboard-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #d9e3f0;
	font-size: 13.5px;
}

.vrc-dashboard-table th {
	background: #f5f8fc;
	font-weight: 700;
	color: #071b33;
}

.vrc-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 24px;
}

/* ---------- Frontend account menu (v0.6.9) ---------- */
.vr-account-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* v0.6.24 (Part D): the account menu is now always rendered via the
   theme calling [vr_frontend_account_menu] directly - these
   additional class names are the ones the theme integration was
   specified against. Purely additive to the existing vr-account-menu
   family above, never position:fixed or position:absolute, and
   never display:none. */
.vr-account-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.vr-account-link {
	display: inline-flex;
}

/* v0.6.40 (Part F): small unread-count pill inside the header
   account menu's Notifications link - never rendered at all when
   count is 0 (handled in PHP, not just hidden here), so there is no
   "0" state to style. */
.vr-notification-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ef4444;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
}

.vr-account-menu-item {
	margin: 0;
}


.vr-account-menu-item a {
	display: inline-block;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	color: #0b4bc4;
	background: transparent;
	border: 1px solid transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vr-account-menu-item a:hover {
	background: #eef4ff;
	color: #0b4bc4;
}

/* Only the single most important action per menu state (Register
   when logged out; My Certificates / My Events / Proof Review /
   WordPress Admin when logged in) gets the solid brand-blue
   treatment - every other link stays a quiet outline/text link so
   the header never reads as "too much blue". */
.vr-account-menu-primary a {
	background: #1266f1;
	color: #ffffff;
	border-color: #1266f1;
}

.vr-account-menu-primary a:hover {
	background: #0b4bc4;
	color: #ffffff;
}

.vr-account-menu-logout a {
	color: #667085;
	border: 1px solid #d9e3f0;
}

.vr-account-menu-logout a:hover {
	background: #f5f8fc;
	color: #071b33;
}

/* v0.6.25 (Part A): defensive fallback so a theme's own link-color or
   visibility rules can never accidentally hide the Logout text -
   this is deliberately more specific/forceful than the rule above,
   which some themes could otherwise still win against by specificity
   alone. */
.vr-account-logout-link a {
	color: #667085 !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: inline-block !important;
}

.vr-account-logout-link a:hover {
	color: #071b33 !important;
}

/* ---------- Theme fallback placement (v0.6.22: no fixed
   positioning at any breakpoint - normal document/header flow only,
   which is what actually caused the reported header overlap. The
   fallback only ever fires when the shortcode/auto-inject paths did
   not already render the menu, so it renders inline wherever
   wp_footer places it - never floating over other content.) ---------- */
.vr-account-menu-fallback {
	position: static;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #d9e3f0;
	border-radius: 12px;
	padding: 6px;
	margin: 10px 0;
	box-shadow: 0 2px 8px rgba(7, 27, 51, 0.06);
	display: flex;
	flex-wrap: wrap;
}

.vr-account-menu-fallback .vr-account-menu {
	flex-wrap: wrap;
}

/* v0.6.10 (Part 5): when auto-injected as an extra <li> into the
   theme's existing primary nav, keep it visually separated from the
   theme's own nav items (e.g. a "Find Events" CTA) rather than
   crowding directly against them - flex-based nav layouts push it
   to the far end via margin-left:auto; non-flex layouts simply get
   a left margin/wrap allowance instead. */
.vr-account-menu-inject {
	margin-left: auto;
	list-style: none;
}

@media (max-width: 782px) {
	.vr-account-menu-inject {
		margin-left: 0;
		flex-basis: 100%;
		margin-top: 8px;
	}
}

@media (max-width: 640px) {
	.vr-account-menu {
		flex-direction: column;
		align-items: stretch;
	}
	.vr-account-menu-item a {
		text-align: center;
	}

	.vr-account-menu-fallback {
		width: 100%;
		border-radius: 12px;
		margin: 10px 0;
	}

	.vr-account-menu-fallback .vr-account-menu {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.vr-account-menu-fallback .vr-account-menu-item {
		flex: 1 1 auto;
	}

	.vr-account-menu-fallback .vr-account-menu-item a {
		display: block;
		padding: 8px 10px;
		font-size: 12px;
	}
}