/**
 * Base look of every gym page (Staff Login, Front Desk, dashboard, the
 * registration and records pages): dark page, the design-system font, no
 * theme header/footer, and dark JetFormBuilder forms.
 *
 * The <body> of those pages gets the class "ofg-app" (includes/assets.php).
 * Colors and sizes are the design-system variables (CrocoBuilder →
 * Variables, --ofg-*), which CrocoBuilder prints on every page.
 */

body.ofg-app {
	color: var(--ofg-ink);
	background: var(--ofg-bg);
	font-family: var(--ofg-font-sans);
	-webkit-font-smoothing: antialiased;
	color-scheme: dark;
}

/* The blank theme's "OFG Management System" title bar and © line. */
body.ofg-app .site-header,
body.ofg-app .site-footer {
	display: none;
}

body.ofg-app ::selection {
	color: var(--ofg-on-brand);
	background: var(--ofg-brand);
}

/* ------------------------------------------------------------------
   JetFormBuilder forms (walk-in and monthly registration)
   ------------------------------------------------------------------ */
body.ofg-app .jet-form-builder {
	font-family: var(--ofg-font-sans);
	color: var(--ofg-ink);
}

body.ofg-app .jet-form-builder__label-text,
body.ofg-app .jet-form-builder__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ofg-ink-muted);
}

body.ofg-app .jet-form-builder__required {
	color: var(--ofg-brand-text);
}

body.ofg-app .jet-form-builder__desc {
	font-size: 12px;
	color: var(--ofg-ink-muted);
}

body.ofg-app .jet-form-builder input.jet-form-builder__field:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
body.ofg-app .jet-form-builder select.jet-form-builder__field {
	min-height: 48px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 16px;
	color: var(--ofg-ink);
	background-color: var(--ofg-surface-raised);
	border: 1px solid var(--ofg-line-strong);
	border-radius: var(--ofg-radius-md);
	box-shadow: none;
}

body.ofg-app .jet-form-builder input.jet-form-builder__field:focus,
body.ofg-app .jet-form-builder select.jet-form-builder__field:focus {
	outline: none;
	border-color: var(--ofg-brand);
	box-shadow: 0 0 0 3px var(--ofg-brand-tint);
}

body.ofg-app .jet-form-builder select.jet-form-builder__field option {
	color: var(--ofg-ink);
	background: var(--ofg-surface);
}

body.ofg-app .jet-form-builder .radio-field,
body.ofg-app .jet-form-builder .checkradio-field {
	accent-color: var(--ofg-brand);
}

body.ofg-app .jet-form-builder__field-label {
	color: var(--ofg-ink);
}

/* Calculated fields (End date, Total): read-only values. */
body.ofg-app .jet-form-builder__calculated-field {
	font-size: 18px;
	font-weight: 700;
	color: var(--ofg-ink);
}

body.ofg-app .jet-form-builder__calculated-field-prefix {
	color: var(--ofg-ink-muted);
}

/* Submit button: red pill with glow. */
body.ofg-app .jet-form-builder__submit-wrap .jet-form-builder__action-button,
body.ofg-app .jet-form-builder__submit {
	min-height: 52px;
	padding: 0 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--ofg-on-brand);
	background: var(--ofg-brand);
	border: 0;
	border-radius: var(--ofg-radius-pill);
	box-shadow: 0 8px 28px rgba(229, 23, 47, .35);
	cursor: pointer;
}

body.ofg-app .jet-form-builder__submit:hover {
	color: var(--ofg-on-brand);
	background: var(--ofg-brand-hover);
}

body.ofg-app .jet-form-builder__submit:focus-visible {
	outline: 2px solid var(--ofg-brand-text);
	outline-offset: 3px;
}

/* Success / error messages under the form. */
body.ofg-app .jet-form-builder-messages-wrap .jet-form-builder-message {
	padding: 12px 16px;
	color: var(--ofg-ink);
	background: var(--ofg-surface-raised);
	border: 1px solid var(--ofg-line-strong);
	border-radius: var(--ofg-radius-md);
}

body.ofg-app .jet-form-builder-message--error {
	color: var(--ofg-brand-text) !important;
	border-color: var(--ofg-brand-line) !important;
}