/**
 * MSAD Event Submission 2026 -- styles for Events Manager's native
 * [event_form] shortcode (templates/forms/event-editor.php and its
 * forms/event/* sub-templates) on the "Event Submission" page (291726,
 * /event-submission/).
 *
 * Events Manager renders its own markup server-side (bare, unscoped class
 * names -- .event-form-*, .em-*, plain <input>/<select> etc.) -- this file
 * is what actually paints it to match the 2026 design system, the same
 * approach used for the News Submission form's Meta Box markup
 * (news-submit-2026.css) and the events list pages.
 */

/* The card shell: Events Manager always wraps the whole form in this div
   when "dbem_css_editors" is on (em_event_form(), em-template-tags.php) --
   a raised white panel sitting on the page section's own light band
   background (set on the Bricks section directly), instead of the form
   just floating directly on a plain white page. */
.css-event-form {
	max-width: 860px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 25, 52, 0.08);
	padding: 40px;
}

.em.em-event-editor {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.em.em-event-editor > section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	padding-bottom: 20px;
	border-top: 1px solid var(--h26-border);
}

/* Event Name is the true first visible section -- :first-of-type actually
   matches .event-form-submitter instead (it's an empty, always-hidden
   <section> that still comes first in the DOM for logged-in users, per
   event-editor.php), so it never actually zeroed out the border/padding
   above "Event Name" the way it was meant to. */
.em.em-event-editor > section.event-form-name {
	padding-top: 0;
	border-top: 0;
}

/* This file is shared with the live Event Submission page (291726) and
   Edit Event (291799), where .event-form-image is still the LAST section
   -- so it can't be targeted directly here without also stripping its
   border/padding on those pages. On "Event Submission (Copy)" (291877)
   only, event-flyer-autofill.js reorders .event-form-image to the top of
   the form and tags it with this class so just that page's now-first
   section gets zeroed, same as .event-form-name normally would be. */
.em.em-event-editor > section.msad-h26__flyer-first-section {
	padding-top: 0;
	border-top: 0;
}

/* Edit Event (291799) intentionally never loads event-flyer-autofill.js --
   it's staff-only and submission-only by design (msad_h26_flyer_scan_page()/
   msad_h26_flyer_scan_allowed(), inc/events-2026.php), so nothing there ever
   moves .event-form-image in the DOM the way that script does. The site
   owner still wants it positioned first here too, same as the submission
   page ends up looking for staff -- this does it with plain CSS instead
   (the form's already display:flex/flex-direction:column, so `order` alone
   is enough, no JS needed) and only for THIS page, so the live Event
   Submission page's own behavior for non-staff visitors (image last, per
   the note above) stays exactly as it was.
   Step badges are already hidden entirely on this page (events-2026.php's
   inline style for is_page(291799)), so unlike a DOM reorder, `order`
   putting this ahead of Event Name/When/Where visually without changing
   their actual source position isn't a numbering concern here. */
.page-id-291799 .em.em-event-editor > section.event-form-image {
	order: -1;
	padding-top: 0;
	border-top: 0;
}

/* Some sections (Bookings/RSVP when disabled, the guest-only "Your
   Details" block for logged-in users) always print their <section> tag
   even with the feature's condition false -- PHP just leaves whitespace
   inside instead of nothing, which defeats :empty below and left a
   floating divider with no heading/content above or below it (the stray
   "hr" right before the Submit band). Catching "no heading at all" is a
   more general fix than hardcoding which specific section is unused --
   EXCEPT event-form-submit, which never has a heading by design (just the
   button + hidden fields) and must never be caught by this. */
.em.em-event-editor > section:not(.event-form-submit):not(:has(h3, h4)) {
	display: none;
}

.em.em-event-editor > section:empty {
	display: none;
}

/* Numbered step badges -- a running counter over every top-level section
   heading (Event Name, When, Where, Details, Event Image), skipped
   automatically for the empty/hidden "Your Details" guest section since it
   has no h3 at all. "Details"' heading is a level deeper (h3 wrapped in its
   own div, per event-editor.php) -- both patterns feed the same counter so
   the numbering stays continuous either way. */
.em.em-event-editor {
	counter-reset: em-step;
}

/* Sized to match the News Submission form's numbered headings exactly
   (news-submit-2026.css) so both submission pages' step badges read as one
   system. */
.em.em-event-editor > section > h3,
.em.em-event-editor > section > div > h3,
.em.em-event-editor > section > h3 label,
.em.em-event-editor > section > div > h3 label {
	font-family: var(--h26-font-head) !important;
	font-weight: 600 !important;
	font-size: 21px !important;
	letter-spacing: -0.01em !important;
	color: var(--h26-navy) !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

.em.em-event-editor > section > h3,
.em.em-event-editor > section > div > h3 {
	counter-increment: em-step;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 26px;
	padding-left: 38px;
}

.em.em-event-editor > section > h3::before,
.em.em-event-editor > section > div > h3::before {
	content: counter(em-step);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--h26-accent);
	color: var(--h26-on-accent);
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
}

@media (max-width: 720px) {
	.em.em-event-editor > section > h3,
	.em.em-event-editor > section > div > h3,
	.em.em-event-editor > section > h3 label,
	.em.em-event-editor > section > div > h3 label {
		font-size: 19px !important;
	}
}

.em.em-event-editor h4 {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 16px;
	color: var(--h26-navy);
	margin: 0;
}

/* Recurrences is a continuation of "When" (toggled on by its checkbox),
   not a fully separate numbered step -- much less top space than the
   numbered sections get, and the same light nested-panel treatment as the
   Event Dates/Times/Status cluster above it, instead of unstyled fields
   floating directly on the card. */
.em.em-event-editor > section.event-form-recurrences {
	padding-top: 8px;
	border-top: 0;
}

.event-form-recurrences > .input {
	padding: 22px;
	background: var(--h26-band);
	border-radius: 12px;
}

/* Events Manager's own CSS draws each recurrence entry as a white bordered
   card (.em .em-recurrence-set { border: 1px solid #dedede; background:
   #fff; ... } in events-manager-event-editor.css) -- a box-within-a-box
   once it's already sitting inside the gray panel above. Stripped so the
   fields just sit flush in that one panel instead. */
.em.em-event-editor .em-recurrence-set {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.em.em-event-editor > section > .input,
.em.em-event-editor > section > div > .input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.em.em-event-editor label {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--h26-navy);
}

.em.em-event-editor label i {
	color: var(--h26-danger);
	margin-left: 2px;
	font-style: normal;
}

/* Event Name field: the helper text under the input is a bare text node
   (no wrapping element in the template), so the muted caption style has to
   live on the shared wrapper -- overridden back to full contrast on the
   input itself right below. */
.em.em-event-editor > section.event-form-name > .input {
	gap: 2px;
	font-size: 13px;
	color: var(--h26-muted);
}

.event-form-name .input input {
	font-size: 15px;
	color: var(--h26-text);
}

.multi-day-event-info {
	margin: 0;
	font-size: 13px;
	color: var(--h26-muted);
}

/* Base input styling -- excludes the compact time/duration/buffer/frequency
   fields below, which need their own narrow width instead of stretching
   full-width. */
/* Events Manager's own "pixelbones" base reset puts a blanket
   "margin-bottom: 15px !important" on every input/textarea/select
   (events-manager.css, ".em.pixelbones .input input, ... { margin-bottom:
   15px !important }") -- on its own that's invisible padding most fields
   never show, but Event Name's helper text sits directly below its input
   with no other element between them, so that stray 15px read as "too much
   space between the textbox and its caption." Cancelled here so our own
   flex gaps are the only thing controlling spacing. */
.em.em-event-editor input[type="text"]:not(.em-time-input):not(.em-timerange-duration):not(.em-timerange-buffer):not(.em-timerange-frequency),
.em.em-event-editor input[type="date"],
.em.em-event-editor input[type="email"],
.em.em-event-editor input[type="url"],
.em.em-event-editor textarea,
.em.em-event-editor select:not(.em-recurrence-checkbox) {
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
	font-family: var(--h26-font-body);
	font-size: 15px;
	color: var(--h26-text);
	background: #fff;
	margin-bottom: 0 !important;
}

.em.em-event-editor textarea {
	min-height: 160px;
	resize: vertical;
}

.em.em-event-editor input:focus-visible,
.em.em-event-editor select:focus-visible,
.em.em-event-editor textarea:focus-visible {
	outline: var(--h26-focus);
	outline-offset: 2px;
}

/* The whole date/time/status cluster gets its own nested light panel --
   breaks up the "When" section into a visually distinct group instead of
   just more fields floating on the same white card. */
.em-event-datetimes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	background: var(--h26-band);
	border-radius: 12px;
}

/* Event Dates range -- flatpickr replaces the real inputs with its own
   visible text trigger (.em-date-input.em-date-start-end) and hides the
   underlying start/end <input>s (.em-datepicker-data gets a "hidden" class
   at runtime), so that's the field that actually needs styling. */
.em-datepicker-range .em-date-input.em-date-start-end {
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
	font-family: var(--h26-font-body);
	font-size: 15px;
	color: var(--h26-text);
	background: #fff;
}

/* Flatpickr's own default popup header (month name, year, prev/next
   arrows) uses near-black text at ~90% opacity on a transparent
   background -- barely distinguishable from the plain white popup body
   right below it. Simplest fix: just darken the text/icons themselves to
   solid navy, no background change at all. A literal hex value is used
   here on purpose, not a CSS variable -- Flatpickr appends its calendar
   popup as a direct child of <body>, outside where this theme's --h26-*
   tokens are scoped (.msad-h26, msad-2026.css), so any var() reference
   here risks silently resolving to nothing depending on where in the DOM
   the popup lands. Text/icon color is set once on .flatpickr-month and
   inherited by the month dropdown and year input (both already "color:
   inherit" in flatpickr's own CSS) rather than repeated on each. Only the
   header text/icons are touched; the weekday row and day-number grid
   (.flatpickr-weekdays / .flatpickr-days) are left alone. */
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
	color: #1b2d59;
	fill: #1b2d59;
}

.em-datepicker-data {
	display: flex;
	align-items: center;
	gap: 12px;
}

.em-datepicker-data input[type="date"] {
	flex: 1;
	min-width: 0;
}

.em-datepicker-data .separator {
	font-weight: 700;
	color: var(--h26-muted);
}

/* Times */
.em-timeranges-editor {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Browsers give <fieldset> a default border + padding (Times uses one
   fieldset for the whole group, plus one more per individual time range)
   -- without a reset those render as an unwanted gray box/stroke around
   the Times fields. */
.em.em-event-editor fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.em.em-event-editor legend {
	padding: 0;
}

.em-timeranges legend {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--h26-navy);
	margin-bottom: 4px;
}

.em-timerange-inputs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.em-time-input {
	width: 120px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
	font-family: var(--h26-font-body);
	font-size: 15px;
	color: var(--h26-text);
	background: #fff;
}

.em-timerange-allday,
.em-timerange-timeslots-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--h26-muted);
	cursor: pointer;
}

.em-timerange-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
	background: #fff;
	color: var(--h26-danger);
	cursor: pointer;
}

.em-timeranges-actions {
	margin-top: 4px;
}

.em-timerange-add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
	border: 1.5px solid var(--h26-navy);
	border-radius: 8px;
	background: transparent;
	color: var(--h26-navy);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.em-timerange-add:hover,
.em-timerange-add:focus-visible {
	background: var(--h26-navy);
	color: #fff;
}

.em-timerange-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

/* Recurring / repeating toggle -- a plain text + checkbox row is easy to
   miss, and checking it reveals a whole new section (Recurrences) below, so
   it needs to read as a deliberate switch, not another form field. Styled
   as a bordered, tappable row with a repeat icon, and highlighted once
   checked so it's obvious something changed. */
.em-event-type {
	margin: 0;
}

.em.em-event-editor .em-event-type label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1.5px solid var(--h26-border);
	border-radius: 10px;
	background: var(--h26-band);
	font-family: var(--h26-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--h26-navy);
	cursor: pointer;
	transition: border-color var(--h26-transition), background-color var(--h26-transition);
}

.em.em-event-editor .em-event-type label::before {
	content: "\f363";
	font-family: "Font Awesome 6 Solid";
	font-weight: 900;
	margin-right: -4px;
	color: var(--h26-accent);
	font-size: 15px;
}

.em-event-type:has(.em-recurrence-checkbox:checked) label {
	border-color: var(--h26-accent);
	background: var(--h26-band);
}

.em-recurrence-checkbox[type="checkbox"] {
	width: 26px;
	height: 26px;
	margin: 0 0 0 auto;
	flex-shrink: 0;
	accent-color: var(--h26-navy);
	vertical-align: middle;
	cursor: pointer;
}

/* Timezone / Event Status / Location Type -- single select fields */
/* Timezone: not useful for this site (single-timezone audience) -- hidden
   rather than removed, so the field's already-selected default (matches
   the site's own timezone setting) still submits with the form as-is. */
.em-timezone {
	display: none;
}

.em-active-status,
.em-location-types {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Category multi-select */
.event-categories {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.event-categories select[multiple] {
	min-height: 160px;
	padding: 8px;
}

/* Selectize-enhanced selects (Timezone, Location, Country, Category) --
   matching the tag/chip picker treatment used for News Submission's
   Categories field (Select2), in case Selectize renders here too. */
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
	min-height: 46px;
	padding: 8px 12px;
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
	font-family: var(--h26-font-body);
	font-size: 15px;
	color: var(--h26-text);
	box-shadow: none;
}

.selectize-control.multi .selectize-input > div {
	background: var(--h26-band);
	border: 1px solid var(--h26-cranberry);
	border-radius: 999px;
	color: var(--h26-sky-700);
	font-weight: 600;
	font-size: 13px;
	padding: 3px 10px;
}

.selectize-dropdown {
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
}

/* Physical location address fields (hidden unless "Physical Location" is
   selected as the Location Type) -- margin-top separates this from the
   Location Type dropdown right above it, which otherwise butts straight
   up against "Location Name" with no breathing room. */
.em-location-data {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}

.em-location-data .input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Every event is in the USA -- Country is forced to "US" via the
   dbem_location_default_country setting and the em_location_get_post_meta_pre
   hook in inc/events-2026.php (belt-and-suspenders, since a hidden field's
   value still POSTs normally). Region and the location's own URL field are
   unused here, and the Google Maps preview/"Location not found" box is
   already fully disabled site-wide (dbem_gmap_is_active), so this is just a
   safety net if that ever gets flipped back on. */
.em-location-data-country,
.em-location-data-region,
.em-location-data-url,
.em-location-map-container {
	display: none !important;
}

.em-notice-warning {
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--h26-band);
	color: var(--h26-accent-700);
	font-size: 13.5px;
}

/* Details: classic editor wrapper (wp_editor(), same markup as the News
   Submission wysiwyg field) + category field spacing. WordPress's own
   "Visual | Code" switch tabs are positioned to overlap the top edge of
   the toolbar row, so "overflow: hidden" here (added for rounded corners)
   was clipping them off -- dropped in favor of just rounding the actual
   textarea/iframe area below. */
.event-form-details .event-editor {
	border-radius: 8px;
}

.event-form-details .event-editor .wp-editor-container {
	border-radius: 0 0 8px 8px;
	overflow: hidden;
}

/* The overflow fix above wasn't the full story -- Bricks' own core CSS
   ships several bare, unscoped "button{...}" resets (for its own carousel/
   lightbox icon buttons) with no class scoping at all, so they apply to
   EVERY <button> on the page, including WordPress's own Visual/Code
   switch-editor buttons (also literal <button> elements). Those resets
   fight WP core's own ".wp-switch-editor" rule on properties WP never
   redeclares (width, z-index, some with the generic rule's own
   !important), which is what was actually making the tabs look clipped/
   misplaced. Forcing WP core's own intended values back, scoped to this
   editor only. */
.event-form-details .wp-switch-editor {
	display: inline-block !important;
	float: left !important;
	position: relative !important;
	top: 1px !important;
	box-sizing: content-box !important;
	width: auto !important;
	height: 20px !important;
	z-index: auto !important;
	margin: 15px 0 0 5px !important;
	padding: 3px 8px 4px !important;
	border: 1px solid #dcdcde !important;
	background: #f0f0f1 !important;
	color: #646970 !important;
	font-size: 13px !important;
	line-height: 1.46153846 !important;
	cursor: pointer !important;
}

/* WordPress's own native "+ Add Media" button on the Details field (wp_editor())
   -- matches the site's .msad-h26__btn + .msad-h26__btn--outline combo
   (rounded, 2px navy outline, fills navy on hover), same treatment as
   News Submission's Content field.

   WP core's buttons.css (".wp-core-ui .button { color: var(--wp-admin-
   theme-color, #3858e9); border-color: ...; }") has the EXACT SAME
   specificity as our own selector below (two classes each) and neither
   side originally used !important -- a pure specificity tie, decided only
   by whichever stylesheet happens to load later. !important on every
   property here removes that coin flip entirely. */
.wp-media-buttons .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 40px !important;
	padding: 0 18px !important;
	border: 2px solid var(--h26-navy) !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--h26-navy) !important;
	font-family: var(--h26-font-body) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: normal !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.wp-media-buttons .button:hover,
.wp-media-buttons .button:focus-visible,
.wp-media-buttons .button:active {
	background: var(--h26-navy) !important;
	border-color: var(--h26-navy) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.event-extra-details {
	margin-top: 8px;
}

/* Event Image: FilePond drag & drop uploader */
.em-input-upload {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filepond--panel-root {
	background: var(--h26-band);
	border: 1.5px dashed var(--h26-border);
	border-radius: 8px;
}

.filepond--drop-label {
	color: var(--h26-muted);
	font-family: var(--h26-font-body);
	font-size: 14.5px;
}

.filepond--label-action {
	color: var(--h26-sky-700);
	text-decoration-color: var(--h26-accent);
}

.em-input-upload-files {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-input-upload-files img {
	max-width: 160px;
	border-radius: 8px;
	border: 1.5px solid var(--h26-border);
}

/* Removing an already-uploaded Event Image (the "X" on its FilePond item)
   doesn't delete it immediately -- classes/uploads/em-uploads-uploader.php
   marks it pending instead and reveals two bits of its own bare, unscoped
   fallback markup: an "em-input-upload-files-tbd" notice ("Image will be
   deleted when saving...") and an "em-input-upload-fallback" <li> with an
   Undo icon, a plain link to the file, and a Delete icon -- literally
   named "fallback" (it's Events Manager's own no-JS/no-FilePond path),
   and it shows through untouched next to an otherwise fully restyled
   form, in plain black text with a default-blue underlined link and
   unstyled buttons. Neither ever got a rule anywhere in this file before.
   Reuses the same soft warning-box language as .em-notice-warning above
   for the message, and the same rounded-border-plus-thumbnail look as the
   FilePond item itself for the file row, so this reads as one system
   instead of two different eras of the form colliding. */
/* Events Manager ships a SITE-WIDE reset for every <ul>/<ol> inside the
   form -- ".em.pixelbones ul{padding-left:0!important;margin-top:0!
   important}" (includes/css/events-manager.min.css) -- confirmed directly
   via Chrome DevTools' matched-styles inspector (not just grep this time):
   it out-specifies AND out-importants a bare ".em-input-upload-files-tbd"
   rule, silently zeroing this box's own top/left padding while leaving
   right/bottom alone (only top/left are touched by that reset), which is
   exactly why it read as unpadded on the top-left corner specifically
   rather than looking totally flat. Needs both !important and the
   ".em.pixelbones" prefix to actually win. */
.em.pixelbones .em-input-upload-files-tbd {
	margin: 12px 0 0 !important;
	padding: 16px 18px !important;
	border-radius: 10px;
	background: var(--h26-band);
	list-style: none;
}

.em.pixelbones .em-input-upload-files-tbd > li:first-child {
	margin: 0 !important;
	color: var(--h26-accent-700);
	font-size: 13.5px;
	line-height: 1.5;
}

/* The file-being-removed row: Events Manager's own core CSS (includes/css/
   events-manager.min.css) hides both the trash button (re-deleting an
   already-pending file makes no sense -- Undo is the only valid action
   here) and this row's thumbnail <img> specifically inside the "-tbd"
   state, leaving just a long, cryptic auto-generated filename as a plain
   text link ("735393861_1752242575944945_..._n.jpg") -- confirmed
   directly against that stylesheet. A real thumbnail reads far better
   than that filename, so this un-hides it; the link itself becomes an
   invisible layer positioned exactly over the thumbnail (font-size: 0
   collapses its own text) so clicking it still opens the original file,
   just without the ugly filename text ever being visible.
   The row is its own white "chip" -- sized to its own content (inline-
   flex, not a full-width flex row) rather than stretching edge-to-edge
   inside the outer notice box, which is what was actually reading as
   "ugly": a small thumbnail floating in a big mostly-empty box. A
   properly-sized (56px) thumbnail in a snug, padded chip of its own
   gives the row real presence instead.
   This targets both ".em-input-upload-files-tbd li" and ".em-input-
   upload-files.em-input-upload-fallback li" (the other markup this same
   file/undo/link/trash structure can render inside, per classes/uploads/
   em-uploads-uploader.php) since which one actually holds it at runtime
   depends on Events Manager's own JS, not something controllable here.
   Needs the full ".em .em-input-upload" prefix (matching the icon-button
   fix above) -- Events Manager's own core CSS forces "display:block
   !important" on this exact li via ".em .em-input-upload .em-input-
   upload-files-tbd li" (specificity (0,3,1)), which beat a bare
   ".em-input-upload-files-tbd li" (0,2,1) even with !important on both
   sides -- confirmed directly, this was the actual cause of the cramped,
   padding-less look: the flex layout (gap, align-items, and effectively
   the padding too, since a collapsed block box doesn't give it anywhere
   to apply visually) never took effect at all. */
.em .em-input-upload .em-input-upload-files-tbd li:not(:first-child),
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	width: fit-content;
	margin: 14px 0 0 !important;
	padding: 10px 14px 10px 10px !important;
	border: 1.5px solid var(--h26-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(27, 45, 89, 0.06);
	list-style: none;
}

.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li {
	margin: 0 !important;
}

.em .em-input-upload .em-input-upload-files-tbd img,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback img {
	display: inline-block !important;
	visibility: visible !important;
	width: 56px !important;
	height: 56px !important;
	object-fit: cover;
	border-radius: 8px;
	border: 1.5px solid var(--h26-border);
	flex-shrink: 0;
	margin: 0 !important;
}

.em-input-upload-files-tbd a,
.em-input-upload-files.em-input-upload-fallback a {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 56px;
	height: 56px;
	font-size: 0;
	overflow: hidden;
	border-radius: 8px;
}

.em-input-upload-files-tbd a:focus-visible,
.em-input-upload-files.em-input-upload-fallback a:focus-visible {
	outline: var(--h26-focus);
	outline-offset: 2px;
}

/* Undo/Delete -- plain bare glyphs by default (barely readable as
   clickable at all next to everything else on this restyled form), given
   an actual button chip instead: circular, bordered, filling navy on
   hover/focus like every other icon-button on this site. Delete stays in
   the selector for consistency even though EM's own CSS hides it in this
   specific state -- harmless if that ever changes.
   The glyphs themselves (--icon-undo/--icon-trash, defined on .em in
   Events Manager's own core CSS) are data-URI SVGs with their fill/stroke
   color baked directly into the SVG rather than using currentColor --
   confirmed directly, so a plain background-image can never be recolored
   via CSS. Painted as a mask-image on ::before instead: the mask only
   uses the SVG's shape, and background-color here is what actually
   supplies the color, so it can flip to white on hover independently of
   the button chip's own background flipping to navy (a filter like
   invert() would have inverted the whole chip, background included, not
   just the glyph). Events Manager's own core CSS (includes/css/events-
   manager.min.css) styles this exact button via ".em-input-upload-files-
   tbd li button.em-icon" with !important on several of these same
   properties (border:0, background-color:transparent, width/height:20px)
   -- confirmed directly. Since specificity still decides ties between two
   !important declarations (importance isn't a specificity override, just
   a separate, higher cascade tier that specificity is still compared
   within), a bare ".em-icon-undo" selector loses to that 3-part chain
   regardless of !important. Matching the same selector shape here (both
   possible parent contexts) is what actually wins, not just adding more
   !important. */
.em .em-input-upload .em-input-upload-files-tbd li button.em-icon,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon {
	position: relative;
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background-color: #fff !important;
	background-image: none !important;
	border: 1.5px solid var(--h26-border) !important;
	opacity: 1 !important;
	transition: background-color var(--h26-transition), border-color var(--h26-transition);
}

.em .em-input-upload .em-input-upload-files-tbd li button.em-icon::before,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--h26-navy);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color var(--h26-transition);
}

.em .em-input-upload .em-input-upload-files-tbd li button.em-icon-undo::before,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon-undo::before {
	-webkit-mask-image: var(--icon-undo);
	mask-image: var(--icon-undo);
}

.em .em-input-upload .em-input-upload-files-tbd li button.em-icon-trash::before,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon-trash::before {
	-webkit-mask-image: var(--icon-trash);
	mask-image: var(--icon-trash);
}

.em .em-input-upload .em-input-upload-files-tbd li button.em-icon:hover,
.em .em-input-upload .em-input-upload-files-tbd li button.em-icon:focus-visible,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon:hover,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon:focus-visible {
	background-color: var(--h26-navy) !important;
	border-color: var(--h26-navy) !important;
}

.em .em-input-upload .em-input-upload-files-tbd li button.em-icon:hover::before,
.em .em-input-upload .em-input-upload-files-tbd li button.em-icon:focus-visible::before,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon:hover::before,
.em .em-input-upload .em-input-upload-files.em-input-upload-fallback li button.em-icon:focus-visible::before {
	background-color: #fff;
}

/* Consent checkbox -- Events Manager renders this as its OWN <p class="...
   em-consent-checkbox ...">, sibling immediately BEFORE <section
   class="event-form-submit"> (Consent::checkbox(), classes/consent/
   consent.php) -- never nested inside it, so ".event-form-submit
   input[type=checkbox]" never matched anything real and this checkbox
   rendered with the bare browser default (including its native border --
   the stray "gray border near the submit button" that kept showing up).
   This is REQUIRED (Consent::$required = true, classes/consent/
   consent.php) but the plugin's own markup never adds a required-asterisk
   -- unlike every other required field on this form, which use a real
   `<i>*</i>` tag styled by ".em.em-event-editor label i" further up this
   file -- so one is added here via ::after instead of leaving it looking
   optional. A quiet gray caption line was tried before and turned out to
   be too easy to miss for a field that blocks submission, so this now
   gets the same light highlighted-box treatment as other "pay attention"
   callouts on the site, not the heavy filled-navy block that was
   rejected earlier for looking odd next to the actual Submit button. */
/* .em-consent-checkbox is itself a <p> (Consent::checkbox(), classes/
   consent/consent.php), so it's ALSO subject to Pixelbones'
   ".em.pixelbones p" margin reset and its separate "margin-bottom: 25px
   !important" rule (2 classes each) -- a single-class selector here isn't
   specific enough to beat that, which was silently forcing 0 top / 25px
   bottom margin regardless of the "28px 0 0" set below, leaving a big gap
   to whatever comes after (the field-error message once one's inserted).
   ".em .em-event-editor" adds enough specificity to win outright. */
.em.em-event-editor .em-consent-checkbox {
	margin: 28px 0 0 !important;
	padding: 14px 16px !important;
	background: var(--h26-band);
	border: 1px solid var(--h26-border);
	border-radius: 10px;
}

.em.em-event-editor .em-consent-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--h26-font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--h26-navy) !important;
}

.em-consent-checkbox label::after {
	content: ' *';
	color: var(--h26-danger);
	font-weight: 700;
}

.em-consent-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex-shrink: 0;
	border: 1.5px solid var(--h26-border);
	border-radius: 4px;
	accent-color: var(--h26-navy);
	cursor: pointer;
}

/* The aggregated error list itself is no longer needed now that every
   error it would have listed gets flagged directly on its own field
   instead (assets/js/event-form-errors.js) -- removed entirely rather
   than just visually de-emphasized. It renders OUTSIDE ".em-event-editor"
   (before the form itself opens, not nested inside it), so the previous
   ".em.em-event-editor .em-notice-error" selector never actually matched
   it. Using Events Manager's own exact selector here instead
   (".em .em-notice.em-notice-error", includes/css/events-manager.css)
   guarantees it matches and wins the specificity tie via source order,
   since this stylesheet loads after theirs. */
.em .em-notice.em-notice-error {
	display: none !important;
}

/* Marks the specific field(s) that failed validation -- soft warning
   yellow background + border (the same gold/accent tone used for the
   "Optional" badge elsewhere on this form) on the field itself, but the
   message text repeated underneath (below) stays red for urgency/
   visibility, per the site owner's call. */
/* The plain-class version above is enough for non-input elements (e.g.
   the consent <p>), but Events Manager's own Pixelbones framework has
   ".em.pixelbones .input input[type=text], ..." (4 chained classes + a
   type selector) setting "background-color ... !important" -- higher
   specificity than a single class, so it silently wins over the plain
   rule above on actual <input> fields even though both use !important.
   Repeating the same class is a valid, if inelegant, way to add
   specificity without needing to replicate their exact selector chain
   (".em" is a real, guaranteed ancestor of every field in this form). */
.em .msad-h26__field-error.msad-h26__field-error.msad-h26__field-error.msad-h26__field-error {
	background: var(--h26-band) !important;
	border-color: var(--h26-accent) !important;
}

.msad-h26__field-error {
	background: var(--h26-band) !important;
	border-color: var(--h26-accent) !important;
	box-shadow: 0 0 0 1px var(--h26-band);
}

/* Selectize fields (Category, Location Name) get .msad-h26__field-error
   on the OUTER ".selectize-control" wrapper now, not the inner visible
   input (see visibleControl() in event-form-errors.js) -- the actual
   border/background still needs to reach the real input box the field
   renders as. Selectize's own default background here has no
   !important, so a plain descendant selector is enough. */
.msad-h26__field-error .selectize-input {
	background: var(--h26-band) !important;
	border-color: var(--h26-accent) !important;
}

/* The wrapper this message actually gets inserted after (see above) is
   ".selectize-control" itself -- Events Manager's own bundled CSS
   (includes/css/events-manager.min.css) has a bare ".selectize-control {
   margin-bottom: 15px !important; }" rule that was stacking on top of the
   message's own margin-top below, pushing it much farther from the field
   than intended. A single repeated class beat it once already at the
   spec level (2 classes vs. their 1), but repeating it again removes any
   doubt -- same trick already used elsewhere in this file against
   Pixelbones' own !important rules. */
.selectize-control.selectize-control.msad-h26__field-error {
	margin-bottom: 4px !important;
}

.em.em-event-editor .em-consent-checkbox.msad-h26__field-error {
	background: var(--h26-band);
	border: 1px solid var(--h26-accent) !important;
}

/* Short caption inserted right after the flagged field, repeating that
   field's actual validation message (see event-form-errors.js) instead of
   only describing it in the aggregated box at the top. Same Pixelbones
   collision as the flyer-scan status box (see event-flyer-autofill.css)
   -- ".em.pixelbones p" forces margin-top:0/margin-bottom:25px
   !important on every <p> including this freshly-inserted one, which is
   what was pushing it so far from the field. Beating that needs matching
   !important + higher specificity, not just a plain margin value. */
.em.em-event-editor p.msad-h26__field-error-msg {
	margin-top: 4px !important;
	margin-bottom: 0 !important;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--h26-danger-700);
}

.event-form-submit {
	gap: 16px !important;
	margin: 24px -40px -40px !important;
	padding: 28px 40px 32px !important;
	border: 0 !important;
	background: var(--h26-navy);
	border-radius: 0 0 16px 16px;
}

.event-form-submit .input.submit {
	margin: 0;
	border: 0 !important;
}

/* Events Manager's own "pixelbones" stylesheet styles this exact element
   with .em.pixelbones .input input[type=submit].button-primary { ... !important }
   (events-manager.css) -- a 5-class-equivalent selector using their own
   blue accent color, which beat every earlier attempt here. Repeating
   .em-event-editor is a deliberate, valid CSS trick (repeated simple
   selectors each still count toward specificity) to exceed that exact
   selector's weight rather than tie and hope load order favors us. */
.em.em-event-editor.em-event-editor .input input[type="submit"].button-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--brand-cranberry) !important;
	color: var(--white) !important;
	font-family: var(--h26-font-body) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	cursor: pointer;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.em.em-event-editor.em-event-editor .input input[type="submit"].button-primary:hover,
.em.em-event-editor.em-event-editor .input input[type="submit"].button-primary:focus-visible {
	background: var(--brand-cranberry-700) !important;
	color: var(--white) !important;
}

.em.em-event-editor.em-event-editor .event-form-submit .input input[type="submit"].button-primary {
	width: 100%;
	min-height: 52px !important;
	font-size: 16px !important;
}

/* Notices (success/error) -- match the management lists' message component. */
.em.em-event-editor .em-notice,
.em.em-event-editor .em-success,
.em.em-event-editor .em-error {
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
}

.em.em-event-editor .em-success {
	background: var(--h26-band);
	color: var(--h26-sky-700);
}

.em.em-event-editor .em-error {
	background: var(--h26-band);
	color: var(--h26-accent-700);
}