/*
 * forms.css · Phase 15.3 (B6, B10). Blueprint Section 22's input atoms
 * applied to the markup UsersWP and GeoDirectory/AUI print, under .oad-form.
 * 44 tall, 2px Ink hairline on Ground, Speak values, Meter labels above the
 * field, Meter Muted help, 2px Warning error, Ink submit that turns Action
 * on hover. Bootstrap's row/col grid is collapsed to one stacked column so
 * no layout depends on the plugins' own grid. !important where the plugin's
 * Bootstrap rule ties on specificity and loads later, as modals.css does.
 */

/* Aside kicker on the submit page. */
.oad-submit .oad-kicker {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.oad-submit .oad-split__intro p {
	font-family: var(--wp--preset--font-family--speak);
	margin: 0;
}

/* One stacked column. Rows GeoDirectory hides (d-none, e.g. the map-zoom
   input) stay hidden, or their 24px margin doubles the gap around them.
   The map's loading, no-results and failed overlays are absolutely placed
   .row elements GeoDirectory shows and hides with inline display; forcing
   them to block showed all three over the map at once. */
.oad-form .row {
	margin: 0 !important;
}

.oad-form .row:not(.d-none):not(.position-absolute) {
	display: block !important;
}

.oad-form [class*="col-"],
.oad-form .col {
	display: block;
	flex: none;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

.oad-form .mb-3,
.oad-form .geodir_form_row {
	margin-bottom: var(--wp--preset--spacing--24) !important;
}

/* Labels sit above the field. */
.oad-form label,
.oad-form .form-label,
.oad-form .col-form-label {
	display: block;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	padding: 0 !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* Required marker: a small Warning asterisk beside the label, nothing more.
   This used to carry the same 4px left bar as a genuine error message
   (Section 32's kind marker), which is what read as "a red line next to
   every field name" -- the bar was never about validity here, just a
   required flag, so every field looked like it had already failed. */
.oad-form .text-danger,
.oad-form .required {
	color: var(--wp--preset--color--warning) !important;
}

/* A genuine invalid-feedback message keeps a marker, but the Section 22 one:
   Meter, Warning, a small square "!" -- the same shape forms.css already
   error-borders the field itself (.is-invalid below), not a coloured bar. */
.oad-form .invalid-feedback {
	color: var(--wp--preset--color--warning) !important;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.oad-form .invalid-feedback::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	border: 2px solid var(--wp--preset--color--warning);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 10px;
}

/* Fields. */
.oad-form input[type="text"],
.oad-form input[type="email"],
.oad-form input[type="password"],
.oad-form input[type="url"],
.oad-form input[type="tel"],
.oad-form input[type="number"],
.oad-form input[type="date"],
.oad-form input[type="time"],
.oad-form input[type="search"],
.oad-form select,
.oad-form textarea,
.oad-form .form-control,
.oad-form .form-select,
.oad-form .select2-selection {
	background-color: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	min-height: 44px;
	padding: 8px 16px !important;
	width: 100%;
}

.oad-form textarea {
	min-height: 96px;
	resize: vertical;
}

.oad-form input[readonly],
.oad-form input:disabled {
	border-color: var(--wp--preset--color--muted) !important;
	color: var(--wp--preset--color--muted) !important;
}

.oad-form .is-invalid,
.oad-form .has-error input {
	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- form error state, the named exception */
	border: 2px solid var(--wp--preset--color--warning) !important;
}

/* Help text: Meter, Muted, below the field. */
.oad-form .form-text,
.oad-form small,
.oad-form .text-muted {
	color: var(--wp--preset--color--muted) !important;
	display: block;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	margin-top: 8px;
}

/* Checkboxes and radios: Ink when checked. */
/* The whole row is the target: 44px tall, the label fills it, and the box
   itself is 24px so it reads as a control rather than a full-stop. */
.oad-form .form-check {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--8);
	min-height: 44px;
	padding: 0;
}

/* A help line under a checkbox takes its own row, lined up with the label. */
.oad-form .form-check .form-text {
	flex: 0 0 100%;
	margin: 0 0 var(--wp--preset--spacing--8);
	padding-left: var(--wp--preset--spacing--32);
}

.oad-form input[type="checkbox"],
.oad-form input[type="radio"] {
	accent-color: var(--wp--preset--color--ink);
	flex: none;
	height: 24px;
	margin: 0;
	width: 24px;
}

.oad-form .form-check-label {
	display: block;
	flex: 1;
	min-height: 44px;
	margin: 0;
	padding: var(--wp--preset--spacing--8) 0 !important;
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px;
}

/* UsersWP prints some checkboxes as bare <input> + text in a div. */
.oad-form .uwp_hide_from_listing,
.oad-form [class*="uwp_"] > input[type="checkbox"] {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
}

/* WP 2FA's own buttons. */
.oad-form .wp2fa-profile__totp-toggle,
.oad-form .wp2fa-profile button {
	min-height: 44px;
}

/* GeoDirectory add-listing: quick-add venue link, TinyMCE's toolbar
   buttons and the map's zoom controls are all 44px. */
.oad-form .oad-qav-open {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
	min-width: 44px;
}

.oad-form .mce-toolbar .mce-btn,
.oad-form .mce-toolbar .mce-btn button {
	min-height: 44px;
	min-width: 44px;
}

.oad-form .leaflet-control-zoom a {
	height: 44px !important;
	line-height: 44px !important;
	width: 44px !important;
}

/* GeoDirectory fieldset headings. AyeCode UI's own `.bsui h3, .bsui .h3`
   rule (two classes) outranks the three-selector list above on plain
   specificity, so the section-gap/head-gap rhythm silently collapsed to
   its 0/1rem default and every heading sat exactly as close to the
   previous section as to its own fields. !important forces this rule to
   win regardless of AUI's own class specificity, same reasoning as the
   rest of this file. */
.oad-form .geodir-fieldset-row,
.oad-form h5.geodir-fieldset-row,
.oad-form .geodir_form_row h3,
.oad-form h3 {
	font-family: var(--wp--preset--font-family--shout);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 800;
	line-height: 1;
	margin: var(--oad-section-gap) 0 var(--oad-head-gap) !important;
	text-transform: uppercase;
}

/* Buttons: Ink at rest, Action on hover. */
.oad-form .btn,
.oad-form button[type="submit"],
.oad-form input[type="submit"] {
	background: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--shout) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	height: 44px;
	letter-spacing: 0.04em;
	padding: 0 var(--wp--preset--spacing--24) !important;
	text-transform: uppercase;
	transition-duration: 100ms;
	transition-property: background-color, color;
}

.oad-form .btn:hover,
.oad-form button[type="submit"]:hover,
.oad-form input[type="submit"]:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.oad-form .btn-outline-secondary,
.oad-form .btn-secondary {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Upload area and map box. */
.oad-form .dropzone,
.oad-form .plupload-upload-ui,
.oad-form .geodir-add-img-wrap,
.oad-form .geodir_form_row .plupload-upload-ui {
	background: var(--wp--preset--color--ground) !important;
	border: 2px dashed var(--wp--preset--color--ink) !important;
}

.oad-form .geodir-map-canvas,
.oad-form .geodir_map_container {
	border: 2px solid var(--wp--preset--color--ink);
}

/* Account page: aside avatar, handle, menu. */
.oad-account__avatar {
	position: relative;
	width: 80px;
}

.oad-account__avatar .card,
.oad-account__avatar .card-body {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

.oad-account__avatar .row,
.oad-account__avatar [class*="col"] {
	display: block;
	margin: 0;
	padding: 0;
	width: auto;
}

.oad-account__avatar img {
	border: 2px solid var(--wp--preset--color--ink) !important;
	display: block;
	height: 80px !important;
	object-fit: cover;
	width: 80px !important;
}

.oad-account__avatar .card-img-overlay {
	inset: auto 0 0 auto;
	padding: 0;
	position: absolute;
}

.oad-account__avatar .uwp-banner-change-icon {
	align-items: center;
	background: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	color: var(--wp--preset--color--white) !important;
	display: flex;
	height: 44px !important;
	justify-content: center;
	margin: 0 !important;
	min-width: 44px !important;
	padding: 0 !important;
	width: 44px !important;
}

.oad-account__avatar .uwp-banner-change-icon:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.oad-account__handle {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
	text-decoration: none;
}

.oad-account__menu ul {
	display: block !important;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.bsui .oad-account__menu li {
	margin: 0 !important;
	padding: 0;
}

/* .bsui in front: AyeCode's .bsui .nav-link(.active) rules (0,3,0) otherwise
   win, leaving the active row black on black and every label off Barlow 13. */
.bsui .oad-account__menu a {
	border-top: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--shout);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: var(--wp--preset--spacing--16) 0 !important;
	text-decoration: none;
	text-transform: uppercase;
}


.bsui .oad-account__menu ul li a.active {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	padding-left: var(--wp--preset--spacing--16) !important;
	padding-right: var(--wp--preset--spacing--16) !important;
}


.oad-account__menu i {
	display: none;
}

.oad-form > h1 {
	font-size: var(--wp--preset--font-size--display-l);
	margin: 0;
}

/* Notices and button pairs (logged-out prompt: Login / Register). */
.oad-form .input-group-text {
	border-left: 0 !important;
}

.oad-form .alert {
	box-sizing: border-box;
	width: 100%;
}

.oad-form .btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	margin: 0 var(--wp--preset--spacing--8) var(--wp--preset--spacing--8) 0 !important;
}

.oad-account .oad-split__list > h1 {
	font-family: var(--wp--preset--font-family--shout);
	font-size: var(--wp--preset--font-size--display-l);
	font-weight: 800;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Phase 2 · the menu's last link closes the list with a line. */
.oad-account__menu li:last-child a {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

/* Links inside plugin tables (invoice numbers, actions). */
.oad-account table a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

/* Wide plugin tables (GetPaid invoices, WP 2FA) scroll inside the cell, never
   the page. */
.oad-account .oad-split__list {
	min-width: 0;
	overflow-x: auto;
}

/* The list's 40px left padding makes room for an event card's category tab.
   A form has no tab, so it sits on the plain 24 gutter. */
@media (max-width: 1023px) {
	.oad-split__list.oad-form {
		padding-left: var(--wp--preset--spacing--24);
	}
}

/* ================================================================== */
/* Phase 6 · every plugin-drawn form and table onto Section 22's atoms  */
/* ================================================================== */

/* Placeholder-as-label. UsersWP's login and register forms hide every label
   and let the placeholder do the job. Section 07: a label sits above the
   field and is always visible, so the label comes back and the placeholder
   goes quiet. Bootstrap's .visually-hidden is !important, so this is too. */
.oad-form label.visually-hidden {
	clip: auto !important;
	display: block;
	height: auto !important;
	margin: 0 0 8px !important;
	overflow: visible !important;
	position: static !important;
	white-space: normal !important;
	width: auto !important;
}

.oad-form label.visually-hidden ~ input::placeholder,
.oad-form label.visually-hidden ~ .input-group input::placeholder {
	color: transparent;
}

/* The card's own heading repeats the page's h1. */
.oad-form .uwp_page .card-title {
	display: none;
}

.oad-form .uwp_page .card {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	max-width: 48ch;
	padding: 0 !important;
}

.oad-form .uwp_page .card-body {
	padding: 0 !important;
}

/* Login and register footer links: two 44px targets on one line. */
.oad-form .uwp-footer-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--16);
}

.oad-form .uwp-footer-links .float-end {
	float: none !important;
}

.oad-form .uwp_page a.d-block {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.oad-form .uwp-footer-links a {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
	min-height: 44px;
	text-decoration: underline;
}


/* Full-width submit on the auth forms. */
.oad-form .uwp_page button[type="submit"] {
	margin: 0 !important;
	width: 100%;
}

/* Password field: the show/hide toggle is the input's own right-hand cell. */
.oad-form .input-group {
	display: flex;
	flex-wrap: nowrap;
}

.oad-form .input-group .form-control {
	flex: 1;
	min-width: 0;
	width: auto;
}

.oad-form .input-group-text {
	align-items: center;
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	border-left: 0 !important;
	color: var(--wp--preset--color--ink) !important;
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 !important;
}

/* Checkboxes and radios: a square 2px Ink box that fills Ink when checked.
   Bootstrap draws a 2px grey box with a blue tick. */
.oad-form .form-check-input {
	appearance: none;
	background-color: var(--wp--preset--color--ground) !important;
	background-image: none !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	cursor: pointer;
	flex: none;
	float: none;
	height: 24px;
	margin: 0 !important;
	position: relative;
	width: 24px;
}

.oad-form .form-check-input:checked {
	background-color: var(--wp--preset--color--ink) !important;
}

.oad-form .form-check-input:checked::after {
	align-items: center;
	color: var(--wp--preset--color--white);
	content: "\2713";
	display: flex;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 16px;
	inset: 0;
	justify-content: center;
	line-height: 1;
	position: absolute;
}

.oad-form .form-check-input[type="radio"]:checked::after {
	content: "\25CF";
	font-size: 13px;
}

/* Ground controls turn Ink on hover; only Ink-resting buttons turn Action. */
.oad-form .btn-outline-secondary:hover,
.oad-form .btn-outline-primary:hover,
.oad-form .btn-secondary:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

.oad-form .btn-outline-primary {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Ninja Forms (the contact page). */
.oad-form .nf-form-cont .nf-field-container {
	margin-bottom: var(--wp--preset--spacing--24);
}

.oad-form .nf-form-cont .nf-field-label label {
	margin: 0 0 8px;
}

.oad-form .nf-form-cont .ninja-forms-req-symbol,
.oad-form .nf-form-cont .nf-form-fields-required {
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
}

.oad-form .nf-form-cont input[type="button"],
.oad-form .nf-form-cont input[type="submit"] {
	background: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--shout) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	height: 44px;
	letter-spacing: 0.04em;
	padding: 0 var(--wp--preset--spacing--24) !important;
	text-transform: uppercase;
	width: auto;
}

.oad-form .nf-form-cont input[type="button"]:hover,
.oad-form .nf-form-cont input[type="submit"]:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.oad-form .nf-form-cont .nf-error .ninja-forms-field {
	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- form error state, the named exception */
	border: 2px solid var(--wp--preset--color--warning) !important;
}

.oad-form .nf-form-cont .nf-error-msg,
.oad-form .nf-form-cont .nf-response-msg {
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
	border-left-width: 4px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px;
	margin-top: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}

.oad-form .nf-form-cont .nf-error-msg {
	border-left-color: var(--wp--preset--color--warning);
}

/* Avatar. AyeCode's utility classes (.rounded-circle, .border-width-4,
   .shadow, .border-white) all carry more specificity than the base guards,
   so the square 2px Ink avatar has to say so itself. */
.bsui .oad-account__avatar img.avatar {
	border: 2px solid var(--wp--preset--color--ink) !important;
	height: 80px !important;
	width: 80px !important;
}

/* GetPaid wallet card: Ground, one hairline, Shout balance, Meter caption. */
.bsui .getpaid-wallet .card {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	margin: 0 0 var(--wp--preset--spacing--24) !important;
}

.bsui .getpaid-wallet .card-body {
	padding: var(--wp--preset--spacing--24) !important;
}

.bsui .getpaid-wallet .text-primary {
	color: var(--wp--preset--color--ink) !important;
}

.bsui .getpaid-wallet .wpinv-wallet-balance {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 800;
	margin: 0;
}

.bsui .getpaid-wallet .text-muted {
	color: var(--wp--preset--color--muted) !important;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsui .getpaid-wallet .wpinv-wallet-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	justify-content: center;
}

.bsui .getpaid-wallet .btn {
	align-items: center;
	border: 2px solid var(--wp--preset--color--ink) !important;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--shout) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	gap: var(--wp--preset--spacing--8);
	height: 44px;
	letter-spacing: 0.04em;
	margin: 0 !important;
	padding: 0 var(--wp--preset--spacing--24) !important;
	text-transform: uppercase;
}

.bsui .getpaid-wallet .btn-primary {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

.bsui .getpaid-wallet .btn-primary:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.bsui .getpaid-wallet .btn-outline-primary {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

.bsui .getpaid-wallet .btn-outline-primary:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Tables (GetPaid invoices, subscriptions, transactions). One hairline
   under every row, an Ink header, the outer line on the table itself so
   the wrapper never doubles it. Bootstrap's .table-bordered draws all four
   sides on every cell. */
.bsui table.table {
	border: 2px solid var(--wp--preset--color--ink);
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}

.bsui .table-responsive {
	border: 0;
}

/* Bootstrap also draws a top and bottom line on every <tr>, which stacks on
   the cell lines below. Only the cells draw. */
.bsui table.table > :not(caption) > * {
	border-width: 0 !important;
}

.bsui table.table > :not(caption) > * > * {
	background: transparent !important;
	border-color: var(--wp--preset--color--ink) !important;
	border-style: solid !important;
	border-width: 0 !important;
	border-bottom-width: 2px !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak);
	font-size: 13px;
	font-weight: 500;
	padding: var(--wp--preset--spacing--16) !important;
}

.bsui table.table > thead > tr > th {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--shout);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bsui table.table > tbody > tr:last-child > * {
	border-bottom-width: 0 !important;
}

.bsui table.table a {
	color: var(--wp--preset--color--ink);
}

/* Status badge: a hairline chip, labelled, never a colour. */
.bsui table.table .badge {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink) !important;
	display: inline-block;
	font-family: var(--wp--preset--font-family--shout);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 24px;
	padding: 0 var(--wp--preset--spacing--8);
	text-transform: uppercase;
}

/* WP 2FA. The plugin styles itself in WordPress admin blue on White cards
   and system-ui. Its own heading repeats the page's h1, so it goes; the two
   cards keep the one hairline and the buttons are the blueprint's. */
.oad-account .wp2fa-profile {
	background: transparent !important;
	border: 0 !important;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	padding: 0 !important;
}

.oad-account .wp2fa-profile__title {
	display: none;
}

.oad-account .wp2fa-profile__summary,
.oad-account .wp2fa-profile__totp-details {
	border-color: var(--wp--preset--color--ink) !important;
}

.oad-account .wp2fa-profile__desc,
.oad-account .wp2fa-profile__summary-value,
.oad-account .wp2fa-profile__status-text {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px;
	font-weight: 500;
}

.oad-account .wp2fa-profile__summary-label {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oad-account .wp2fa-profile__cards {
	display: grid;
	gap: var(--wp--preset--spacing--24);
}

.oad-account .wp2fa-profile__card {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	padding: var(--wp--preset--spacing--24) !important;
}

.oad-account .wp2fa-profile__card-title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 800;
	margin: 0 0 var(--wp--preset--spacing--16);
	text-transform: uppercase;
}

.oad-account .wp2fa-profile__btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
}

.oad-account .wp2fa-profile__btn,
.oad-account .wp2fa-profile__totp-toggle {
	align-items: center;
	background: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--shout) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--24) !important;
	text-transform: uppercase;
}

.oad-account .wp2fa-profile__btn:hover,
.oad-account .wp2fa-profile__totp-toggle:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.oad-account .wp2fa-profile__btn--secondary {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-account .wp2fa-profile__btn--secondary:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* GeoDirectory add-listing: TinyMCE, Leaflet and the date picker onto
   Ground. The editor is one bordered box: the outer frame, a line under the
   toolbar and a line above the status bar. Every nested TinyMCE panel draws
   its own border by default, which stacks. */
.oad-form .wp-editor-container {
	border: 0;
}

.oad-form .mce-tinymce,
.oad-form .mce-tinymce .mce-container,
.oad-form .mce-tinymce .mce-panel,
.oad-form .mce-tinymce .mce-btn,
.oad-form .mce-tinymce .mce-btn-group {
	background: var(--wp--preset--color--ground) !important;
	border-width: 0 !important;
}

.oad-form .mce-tinymce {
	border: 2px solid var(--wp--preset--color--ink) !important;
	box-sizing: border-box;
}

.oad-form .mce-tinymce .mce-toolbar-grp {
	border-bottom: 2px solid var(--wp--preset--color--ink) !important;
}

.oad-form .mce-tinymce .mce-statusbar {
	border-top: 2px solid var(--wp--preset--color--ink) !important;
}

/* The photo drop area drew a 4px dashed frame. */
.oad-form .geodir-add-files {
	border: 2px dashed var(--wp--preset--color--ink) !important;
}

.oad-form .leaflet-control-zoom a,
.oad-form .leaflet-bar a {
	background: var(--wp--preset--color--ground) !important;
	border-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-form .leaflet-bar {
	border: 2px solid var(--wp--preset--color--ink) !important;
}

/* The sticky map wrapper and the canvas inside it drew one line each. */
.oad-form .geodir_map_container {
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-form .geodir_map_container .geodir-map-canvas {
	border: 0;
}

.oad-form .gd-locate-me-btn {
	background: var(--wp--preset--color--ground) !important;
}

/* flatpickr is appended to <body>, outside .oad-form. */
.flatpickr-calendar {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak);
	width: 336px;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	align-items: center;
	display: flex;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: var(--wp--preset--color--ink);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	fill: var(--wp--preset--color--ink);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--wp--preset--color--white);
}

span.flatpickr-weekday {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	font-weight: 500;
}

.flatpickr-day {
	border: 2px solid transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-size: 13px;
	line-height: 44px;
	height: 44px;
	max-width: none;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.flatpickr-day.today {
	border-color: var(--wp--preset--color--ink);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: var(--wp--preset--color--muted);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--meter);
}

/* Profile page: the account tab nests the whole account layout inside the
   profile's list column, so it stacks instead of splitting a second time. */
.uwp-profile-content .oad-account {
	display: block;
}

.uwp-profile-content .oad-account > .oad-split__aside {
	height: auto;
	position: static;
}

.uwp-profile-content .oad-account .oad-split__intro {
	padding: 0 0 var(--wp--preset--spacing--24);
}

.uwp-profile-content .oad-account > .oad-split__list {
	border-left: 0;
	padding: 0;
}

/* Segmented choice (register: Guest user / Event organiser). Two cells that
   share one line: Ground at rest and when chosen, Ink on hover. Bootstrap turns the chosen
   label's text White and the button rule above then painted it Ground. */
.oad-form .btn-group {
	display: flex;
	width: 100%;
}

.oad-form .btn-group .btn {
	flex: 1;
	margin: 0 !important;
}

.oad-form .btn-group .btn + .btn {
	border-left: 0 !important;
}

.oad-form .btn-check + .btn,
.oad-form .btn-group .btn {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-form .btn-check + .btn:hover,
.oad-form .btn-group .btn:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Select2 (GeoDirectory's category, audience, tag and country pickers).
   The base field rule above also matches the search box select2 puts inside
   a multiple select, which drew a second bordered box in the first. The
   frame is the container's; what is inside it is bare. */
.oad-form .select2-container {
	width: 100% !important;
}

.oad-form .select2-container .select2-selection--multiple .select2-selection__rendered {
	align-items: center;
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
}

.oad-form .select2-container .select2-search--inline {
	flex: 1;
	margin: 0;
	min-width: 16ch;
}

.oad-form .select2-container .select2-search__field {
	background: transparent !important;
	border: 0 !important;
	font-size: 16px !important;
	height: 24px !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

/* A chosen value is the blueprint's filter chip: Ink, Shout, a 44px target
   for the remove control. */
.oad-form .select2-container .select2-selection__choice {
	align-items: center;
	background: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	display: flex;
	font-family: var(--wp--preset--font-family--shout);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin: 0 !important;
	min-height: 32px;
	padding: 0 0 0 var(--wp--preset--spacing--8) !important;
	text-transform: uppercase;
}

.oad-form .select2-container .select2-selection__choice__remove {
	align-items: center;
	color: var(--wp--preset--color--white) !important;
	display: flex;
	height: 44px;
	justify-content: center;
	margin: 0 !important;
	width: 44px;
}

.oad-form .select2-container .select2-selection__choice__remove:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

/* The chevron on a single select. */
.oad-form .select2-container .select2-selection--single {
	align-items: center;
	display: flex;
}

/* The list opens on <body>, outside .oad-form. */
.select2-dropdown {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak);
}

.select2-container--open .select2-dropdown--below {
	border-top: 0 !important;
}

.select2-search--dropdown {
	padding: var(--wp--preset--spacing--8) !important;
}

.select2-search--dropdown .select2-search__field {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px !important;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16) !important;
}

.select2-results__option {
	align-items: center;
	background: transparent !important;
	border-top: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink) !important;
	display: flex;
	font-size: 16px;
	min-height: 44px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16) !important;
}

.select2-results__option:first-child {
	border-top: 0;
}

.select2-results__option--highlighted {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ================================================================== */
/* Submission page redesign · templates/gd-add-listing.html            */
/* ================================================================== */
/* Everything below is scoped to .oad-submit, so it touches nothing on
   the account, login, register or contact pages that share forms.css.
   Selectors are GeoDirectory's own `data-argument` attributes and ids,
   read off a real render of /add-listing/?listing_type=gd_event as a
   non-admin user (2026-09-27) -- not guessed from the field table. See
   the [[outanddown-event-submission-form]] memory for what that render
   found: the address block is Street/Country/Region/City/Zip (no
   Neighbourhood, no Address line 2 -- both exist in the field's own
   extra_fields but a separate, unrelated "neighbourhood_is_active"
   setting is false, and street2 is never rendered at all); GeoDirectory
   already prints a fieldset-level note on Tickets explaining that price
   and a ticket link are added after review, before this page's own
   Free-or-Ticketed help text says the same thing a second way. */

/* GD always prints a generic "Enter Listing Details" fieldset ahead of
   the site's own field groups (class-geodir-post-data.php) -- harmless
   on the old wizard, but on a numbered page it would count as section
   00 with no fields of its own. It carries no content past its own
   heading, so hiding it removes nothing. */
.oad-submit #geodir_fieldset_details {
	display: none;
}

/* ---- Section headings: numbered, smaller than the blueprint's Section
   tier (Section 04 is 32-48px; a fieldset title here is one notch down,
   24-32px, so six of them read as a contents list rather than six page
   sections -- logged as a deviation, not an oversight).

   The number is submit.js's own -- .oad-submit-heading__i, inserted into
   each heading from the same fieldset walk that numbers the aside's nav,
   not a CSS counter. A counter-reset on .oad-form / counter-increment on
   each h3 read correctly in an isolated test but measured wrong on this
   exact page -- every fieldset showed 01, never a running count, and
   nothing in the cascade (only one .oad-form, no nested reset anywhere
   in the chain) explained it. With no JS the numbers are simply absent;
   the headings and their order are still correct, so the page degrades
   to unnumbered sections rather than wrong ones. ----

   The margin is scaled down to match: seven fieldsets sit in one dense
   card, not spread across a page, so the generic .oad-form h3 rule's
   page-level --oad-section-gap/--oad-head-gap tokens (96px/32px desktop
   -- meant for separating hero/band-scale sections) read as an enormous,
   disproportionate gap here once they actually applied (see
   [[outanddown-bsui-heading-specificity]] for why they hadn't been).
   48px/16px keeps the same bigger-above/smaller-below rhythm at a scale
   that suits seven stacked fieldsets: 2x the 24px field-to-field gap
   above, 16px (tighter than a field gap) below. ---- */
.oad-submit .oad-form h3 {
	font-size: clamp(24px, 2.6vw, 32px);
	margin: var(--wp--preset--spacing--48) 0 var(--wp--preset--spacing--16) !important;
}

.oad-submit-heading__i {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	margin-right: var(--wp--preset--spacing--8);
}

/* ---- Two-column grid on the form itself. Every row spans both columns
   by default; only the pairs confirmed adjacent AND always shown or
   hidden together in the real render are left to fall into one row.
   Everything else (venue, address street, the map, images, the two
   Organiser rows) stays full width, same as a fieldset heading. ---- */
@media (min-width: 1024px) {
	.oad-submit #geodirectory-add-post {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--wp--preset--spacing--24);
	}

	.oad-submit #geodirectory-add-post > * {
		grid-column: 1 / -1;
	}

	/* Start/end time: only ever hidden as a pair, by "All day". */
	.oad-submit #geodirectory-add-post [data-argument="event_start_time"],
	.oad-submit #geodirectory-add-post [data-argument="event_end_time"],
	/* Country/Region: GeoDirectory's own location cascade. */
	.oad-submit #geodirectory-add-post [data-argument="address_country"],
	.oad-submit #geodirectory-add-post [data-argument="address_region"],
	/* City/Zip: the cascade's last two, always rendered together. */
	.oad-submit #geodirectory-add-post [data-argument="address_city"],
	.oad-submit #geodirectory-add-post [data-argument="address_zip"] {
		grid-column: auto;
	}
}

/* ---- Recurring Event?: Yes/No on one line, not stacked radios. ---- */
.oad-submit [data-argument="recurring"] .form-check-inline {
	display: inline-flex;
	margin-right: var(--wp--preset--spacing--24);
}

/* The map row holds two field rows; the last one's 24px margin sat inside
   the row on top of the row's own, so the gap below the map was 48. */
.oad-submit #geodir_address_map_row > .mb-3:last-child {
	margin-bottom: 0 !important;
}

/* ---- Map: a 2px Ink frame at a wide, shallow ratio instead of the
   plugin's own 350px fixed box; "Set Address On Map" reads as the
   Ground secondary button already defined above. ---- */
/* One frame and one ratio, both on the outer wrap. Every box inside fills
   it: a ratio or border on each nested box drew a double top line and
   pushed the inner ones past the wrap, clipping the right and bottom. */
.oad-submit .geodir-map-wrap {
	aspect-ratio: 16 / 7;
	border: 2px solid var(--wp--preset--color--ink);
	overflow: hidden;
}

.oad-submit .geodir-map-wrap .stick_trigger_container,
.oad-submit .geodir-map-wrap .geodir_map_container,
.oad-submit .geodir-map-wrap .map_background,
.oad-submit .geodir-map-wrap .top_banner_section_in,
.oad-submit .geodir-map-wrap .main_map_wrapper,
.oad-submit .geodir-map-wrap .iprelative,
.oad-submit .geodir-map-wrap .geodir-map-canvas,
.oad-submit .geodir-map-wrap .loading_div {
	border: 0;
	height: 100% !important;
	min-height: 0 !important;
}

.oad-submit #address_set_address_button {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-submit #address_set_address_button:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ---- Images: the plupload dropzone gets the site's own diagonal
   placeholder texture (poster.css's no-poster fill, repeated verbatim --
   it is written inline everywhere else too, never a token) and a solid
   frame instead of the plugin's dashed one. ---- */
.oad-submit .geodir-add-files {
	border: 0 !important;
}

.oad-submit .geodir-add-files .geodir-files-dropbox {
	background-color: var(--wp--preset--color--ground) !important;
	background-image: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.20) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
}

/* ---- Venue: the quick-add link (oad-site's snippet 268, injected by
   JS after #gd_place) reads as a Shout text link; the fill-from-venue
   button (GeoDirectory's own .geodir-fill-data, icon only until
   submit.js appends a label) reads as a small Ground secondary button
   rather than a bare icon. ---- */
.oad-submit .oad-qav-open {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: uppercase;
}

.oad-submit .geodir-fill-data {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
	display: inline-flex !important;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	float: none !important;
	margin-top: var(--wp--preset--spacing--8);
	padding: 0 var(--wp--preset--spacing--16) !important;
}

.oad-submit .geodir-fill-data:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

.oad-submit .oad-fill-label {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* ---- Submit + Preview, side by side. ---- */
.oad-submit #geodir-add-listing-submit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	align-items: center;
}

.oad-submit .geodir_preview_button {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-submit .geodir_preview_button:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ---- Aside: "On this page" nav (submit.js) and the two note boxes. ---- */
.oad-submit-contents {
	display: flex;
	flex-direction: column;
}

.oad-submit-contents a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 40px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.oad-submit-contents a:hover {
	color: var(--wp--preset--color--muted);
}

.oad-submit-contents__i {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.oad-submit-contents a.is-done .oad-submit-contents__i {
	color: var(--wp--preset--color--ink);
}

.oad-submit-contents a.is-done .oad-submit-contents__i::after {
	content: " \2713";
}

.oad-submit-note {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding-top: var(--wp--preset--spacing--16);
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-submit-note + .oad-submit-note {
	border-top: 0;
	padding-top: 0;
}

.oad-submit-note__h {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.oad-submit-note ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.oad-submit-note li {
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 13px;
	padding-left: var(--wp--preset--spacing--16);
	position: relative;
}

.oad-submit-note li::before {
	content: "\2014";
	color: var(--wp--preset--color--muted);
	position: absolute;
	left: 0;
}