/*
 * Modern Events Calendar — CFTV brand re-skin.
 * Loaded only on MEC views (see inc/mec.php), after MEC's stylesheets so
 * these overrides win. Same tokens as the rest of the theme: Karla body,
 * Barlow Condensed headings, primary #c54337 (Poppy Red), pine #415e68,
 * dark pine #164154, graphite #1d292e text, fog #dbdcdd borders, 2px radius.
 *
 * MEC paints its accent through utility classes (.mec-bg-color, .mec-color,
 * .mec-border-color + their -hover twins) and its fonts through CSS custom
 * properties — remapping those covers most of the plugin in a few rules;
 * the rest below is per-component polish.
 */

/* ---- 1. Fonts + base ------------------------------------------------------ */

.mec-wrap {
  --mec-heading-font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  --mec-paragraph-font-family: var(--font-body, "Karla", sans-serif);
}

.mec-wrap h1,
.mec-wrap h2,
.mec-wrap h3,
.mec-wrap h4,
.mec-wrap h5,
.mec-wrap h6 {
  color: var(--color-graphite, #1d292e);
  font-weight: 600;
}

.mec-wrap p,
.mec-wrap .mec-single-event-description,
.mec-single-event-description.mec-events-content ol li,
.mec-single-event-description.mec-events-content ul li {
  color: var(--color-body, #5f6f7c);
  font-size: 16px;
  line-height: 1.7;
}

/* Calendar page sits in our .container wrap (inc/mec.php); give it rhythm. */
.cftv-mec-page {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* Single event: constrain like other content (MEC prints full-bleed). */
.mec-wrap.mec-single-event-container,
.mec-single-event {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Single event page rhythm below the page-hero (single-mec-events.php). */
.cftv-mec-single {
  padding-top: 40px;
  padding-bottom: 60px;
}

.mec-wrap .mec-single-title {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-size: 40px;
  color: var(--color-graphite, #1d292e);
}

/* ---- 2. Master accent remap ----------------------------------------------- */
/* MEC 7.x paints most accents through the --mec-color-skin custom property
   (declared inline on :root,::before,::after with the default cyan #40d9f1).
   Redefine the whole variable family to Poppy Red — html:root + the .mec-wrap
   pseudo-element declarations out-specify MEC's inline versions. Also square
   MEC's border radii to the theme's 2px. */
html:root,
.mec-wrap,
.mec-wrap ::before,
.mec-wrap ::after {
  --mec-color-skin: #c54337;
  --mec-color-skin-rgba-1: rgba(197, 67, 55, 0.25);
  --mec-color-skin-rgba-2: rgba(197, 67, 55, 0.5);
  --mec-color-skin-rgba-3: rgba(197, 67, 55, 0.75);
  --mec-color-skin-rgba-4: rgba(197, 67, 55, 0.11);
  --mec-fes-main-color: #c54337;
  --mec-fes-main-color-rgba-1: rgba(197, 67, 55, 0.12);
  --mec-fes-main-color-rgba-2: rgba(197, 67, 55, 0.23);
  --mec-fes-main-color-rgba-3: rgba(197, 67, 55, 0.03);
  --mec-fes-main-color-rgba-4: rgba(197, 67, 55, 0.3);
  --mec-fes-main-color-rgba-5: rgb(197 67 55 / 7%);
  --mec-fes-main-color-rgba-6: rgba(197, 67, 55, 0.2);
  --mec-primary-border-radius: 2px;
  --mec-secondary-border-radius: 2px;
}

/* MEC's cyan → brand. .mec-bg-color = filled accent, .mec-color = accent text */

.mec-wrap .mec-bg-color,
.mec-wrap .mec-bg-color-hover:hover,
.mec-wrap .mec-bg-color-important {
  background-color: var(--color-primary, #c54337) !important;
}

.mec-wrap .mec-color,
.mec-wrap .mec-color-hover:hover {
  color: var(--color-pine, #415e68) !important;
}

/* .mec-color-before paints every descendant ::before glyph (the sidebar
   Date/Time/Cost icons) with a HARDCODED cyan in frontend.min.css —
   override it to poppy like the site's other feature icons. */
.mec-wrap .mec-color-before ::before,
.mec-color-before ::before {
  color: var(--color-primary, #c54337) !important;
}

.mec-wrap .mec-border-color,
.mec-wrap .mec-border-color-hover:hover {
  border-color: var(--color-primary, #c54337) !important;
}

.mec-wrap a:not(.mec-booking-button):not([class*="totalcal"]) {
  color: var(--color-pine, #415e68);
}

.mec-wrap a:hover {
  color: var(--color-primary, #c54337);
}

/* ---- 3. Buttons ------------------------------------------------------------ */
/* Square brand buttons, same metrics as the Woo/job-board skins. */

.mec-wrap .mec-booking-button,
.mec-wrap button[type="submit"],
.mec-wrap .mec-book-form-next-button,
.mec-wrap .mec-book-form-back-button,
.mec-wrap input[type="submit"],
.mec-wrap .mec-events-button,
.mec-wrap .lity-content .button {
  background: var(--color-primary, #c54337) !important;
  color: #fff !important;
  border: 0;
  border-radius: 2px;
  padding: 13px 26px;
  font-family: var(--font-body, "Karla", sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease;
}

.mec-wrap .mec-booking-button:hover,
.mec-wrap button[type="submit"]:hover,
.mec-wrap .mec-book-form-next-button:hover,
.mec-wrap input[type="submit"]:hover,
.mec-wrap .mec-events-button:hover {
  background: #a8362c !important;
  color: #fff !important;
}

/* Secondary (back) button = pine */
.mec-wrap .mec-book-form-back-button {
  background: var(--color-pine, #415e68) !important;
}
.mec-wrap .mec-book-form-back-button:hover {
  background: var(--color-dark-pine, #164154) !important;
}

/* Register (sidebar) — MEC gives it a tall box with top-aligned text; center
   the label both ways. */
.mec-wrap .mec-booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mec-wrap .mec-events-meta-group-booking-shortcode .mec-booking-button,
.mec-wrap .mec-frontbox .mec-booking-button-register {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 16px 26px;
  line-height: 1.4;
}

/* Next / Back step buttons: larger clear white label, white arrow (inline
   SVG on Next, <img> icon on Back), no stray borders. */
.mec-wrap .mec-book-form-next-button,
.mec-wrap .mec-book-form-back-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 700;
  color: #fff !important;
  padding: 14px 30px;
}
.mec-wrap .mec-book-form-next-button svg,
.mec-wrap .mec-book-form-back-button svg {
  width: 14px;
  height: 11px;
  border: 0;
}
.mec-wrap .mec-book-form-next-button svg path,
.mec-wrap .mec-book-form-back-button svg path {
  fill: #fff !important;
  stroke: none;
}
/* …the Back arrow ships as an <img> svg file — force it white too. */
.mec-wrap .mec-book-form-back-button img.mec-svg-icon,
.mec-wrap .mec-book-form-next-button img.mec-svg-icon {
  filter: brightness(0) invert(1) !important;
  width: 14px;
  height: auto;
}

/* Calendar export buttons: Google = poppy outline, iCal = pine outline
   (both share the same classes — differentiate by list position). */
.mec-wrap .mec-event-export-module a,
.mec-wrap .mec-events-gcal {
  border: 1px solid currentColor !important;
  border-radius: 2px;
  background: transparent !important;
  font-weight: 700;
}
.mec-wrap .mec-export-details li:first-child a {
  color: var(--color-primary, #c54337) !important;
}
.mec-wrap .mec-export-details li:first-child a:hover {
  color: #fff !important;
  background: var(--color-primary, #c54337) !important;
  border-color: var(--color-primary, #c54337) !important;
}
.mec-wrap .mec-export-details li:last-child a {
  color: var(--color-pine, #415e68) !important;
}
.mec-wrap .mec-export-details li:last-child a:hover {
  color: #fff !important;
  background: var(--color-pine, #415e68) !important;
  border-color: var(--color-pine, #415e68) !important;
}

/* ---- 4. Full-calendar toolbar (list / month / week toggles, search) ------- */

.mec-wrap .mec-totalcal-box {
  border: 1px solid var(--color-fog, #dbdcdd);
  border-radius: 2px;
  background: #f7f8f9;
}

.mec-wrap .mec-totalcal-box i,
.mec-wrap .mec-totalcal-view span {
  color: var(--color-graphite, #1d292e);
}

.mec-wrap .mec-totalcal-view span.mec-totalcalview-selected {
  background: var(--color-dark-pine, #164154) !important;
  color: #fff !important;
  border-radius: 2px;
}

.mec-wrap .mec-totalcal-box input[type="text"],
.mec-wrap .mec-totalcal-box select {
  border: 1px solid var(--color-cirrus, #bdc8d2);
  border-radius: 2px;
  color: var(--color-graphite, #1d292e);
  background: #fff;
}

/* ---- 5. Monthly view / list view ------------------------------------------ */

.mec-wrap .mec-calendar {
  border: 1px solid var(--color-fog, #dbdcdd);
  border-radius: 2px;
  box-shadow: none;
}

.mec-wrap .mec-calendar .mec-calendar-day-events .mec-event-article:hover,
.mec-wrap .mec-calendar dt.mec-selected-day,
.mec-wrap .mec-calendar .mec-selected-day,
.mec-wrap .mec-calendar .mec-table-side-day.mec-table-side-day-active {
  background-color: var(--color-primary, #c54337) !important;
  color: #fff !important;
}

.mec-wrap .mec-calendar .mec-has-event::after,
.mec-wrap .mec-calendar dt.mec-has-event::after {
  background-color: var(--color-primary, #c54337) !important;
}

.mec-wrap .mec-calendar-events-side .mec-table-side-title,
.mec-wrap .mec-month-container .mec-calendar-header h2 {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  color: var(--color-graphite, #1d292e);
}

/* Event rows in list view */
.mec-wrap .mec-event-article {
  border-color: var(--color-fog, #dbdcdd);
}

.mec-wrap .mec-event-title,
.mec-wrap .mec-event-title a {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  color: var(--color-graphite, #1d292e);
  font-weight: 600;
}

.mec-wrap .mec-event-title a:hover {
  color: var(--color-primary, #c54337);
}

/* ---- 6. Single event: sidebar boxes, countdown, booking form -------------- */

.mec-wrap .mec-frontbox {
  border: 1px solid var(--color-fog, #dbdcdd);
  border-radius: 2px;
  box-shadow: none;
}

.mec-wrap .mec-frontbox-title,
.mec-wrap .mec-events-meta-group-booking .mec-frontbox-title {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  color: var(--color-graphite, #1d292e);
}

/* Meta icons (Date / Time / Cost calendar, clock, wallet glyphs): poppy red,
   like the site's contact/footer icons. MEC paints them cyan via
   .mec-color-before — hence the !important. */
.mec-wrap .mec-event-meta i,
.mec-wrap .mec-single-event .mec-events-meta-group i,
.mec-wrap .mec-single-event-date i,
.mec-wrap .mec-single-event-time i,
.mec-wrap i[class^="mec-sl-"],
.mec-wrap .mec-single-event-date::before,
.mec-wrap .mec-single-event-time::before,
.mec-wrap .mec-single-event-cost::before,
.mec-wrap .mec-events-meta-group.mec-events-meta-group-venue::before,
.mec-wrap .mec-event-meta [class*="mec-single-event-"]::before {
  color: var(--color-primary, #c54337) !important;
}

/* MEC's inline SVG icon images (ticket glyph, checkout price icons) ship as
   cyan <img> files — recolor to poppy via filter. */
.mec-wrap img.mec-svg-icon {
  filter: brightness(0) saturate(100%) invert(34%) sepia(45%) saturate(1350%) hue-rotate(335deg) brightness(93%) contrast(89%);
}

/* Quantity +/− spinner icons are TWO-TONE svgs (colored square + white
   arrow) — the flattening filter above turns them into solid blobs. Rotate
   the cyan square to poppy instead so the white arrows stay visible. */
.mec-wrap .mec-event-ticket-input-wrapper img.mec-svg-icon,
.mec-wrap .mec-booking-form-container .plus img.mec-svg-icon,
.mec-wrap .mec-booking-form-container .minus img.mec-svg-icon {
  filter: hue-rotate(177deg) saturate(1.6) brightness(0.85);
}

/* Countdown: dark-pine digits, visible muted labels (default skin left the
   labels near-invisible). Markup: .block-w > span.mec-days + .mec-timeRefDays */
.mec-wrap .countdown-w .block-w .mec-days,
.mec-wrap .countdown-w .block-w .mec-hours,
.mec-wrap .countdown-w .block-w .mec-minutes,
.mec-wrap .countdown-w .block-w .mec-seconds {
  color: var(--color-dark-pine, #164154) !important;
}
.mec-wrap .countdown-w .block-w [class^="mec-timeRef"] {
  color: var(--color-body, #5f6f7c) !important;
  font-family: var(--font-body, "Karla", sans-serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Booking form: ticket rows, inputs, progress */
.mec-wrap .mec-book-ticket-container,
.mec-wrap .mec-booking-form-container {
  border-color: var(--color-fog, #dbdcdd);
}

.mec-wrap .mec-booking-form-container input[type="text"],
.mec-wrap .mec-booking-form-container input[type="email"],
.mec-wrap .mec-booking-form-container input[type="number"],
.mec-wrap .mec-booking-form-container input[type="tel"],
.mec-wrap .mec-booking-form-container select,
.mec-wrap .mec-booking-form-container textarea {
  border: 1px solid var(--color-cirrus, #bdc8d2);
  border-radius: 2px;
  padding: 10px 14px;
  color: var(--color-graphite, #1d292e);
  background: #fff;
  box-shadow: none;
}

.mec-wrap .mec-booking-form-container input:focus,
.mec-wrap .mec-booking-form-container select:focus {
  border-color: var(--color-dark-pine, #164154);
  outline: none;
}

.mec-wrap .mec-book-price-total {
  color: var(--color-dark-pine, #164154) !important;
}

/* Gateway (Purchase Tickets) option card */
.mec-wrap .mec-book-form-gateways label {
  border-color: var(--color-fog, #dbdcdd);
  color: var(--color-graphite, #1d292e);
}

/* The Woo addon's "Add To Cart" checkout button ships GREEN — brand it like
   every other primary button. */
.mec-wrap .mec-add-to-cart-btn-r,
.mec-wrap a.button.mec-add-to-cart-btn-r {
  background: var(--color-primary, #c54337) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 2px !important;
  padding: 14px 30px;
  font-family: var(--font-body, "Karla", sans-serif);
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: none !important;
  text-shadow: none;
}
.mec-wrap .mec-add-to-cart-btn-r:hover {
  background: #a8362c !important;
  color: #fff !important;
}

/* ---- 7. Misc --------------------------------------------------------------- */

/* Social share icons: brand neutral (their per-network colors are fine; just
   square the corners). */
.mec-wrap .mec-event-social-icon a {
  border-radius: 2px;
}

/* QR / export boxes inherit frontbox border above. Kill leftover cyan tints. */
.mec-wrap .mec-events-meta-group-booking {
  border-top: 4px solid var(--color-dark-pine, #164154);
}

/* Section-title underline accents ("Book Event", "Share this event"):
   MEC paints a short cyan segment via pseudo-elements — recolor to brand. */
.mec-wrap .mec-events-meta-group-booking h4::before,
.mec-wrap .mec-events-meta-group-booking h4::after,
.mec-wrap .mec-social-single::before,
.mec-wrap .mec-social-single::after,
.mec-wrap .mec-frontbox-title::before,
.mec-wrap .mec-frontbox-title::after,
.mec-wrap .mec-wrap-checkout h4::after,
.mec-wrap .mec-wrap-checkout h4::before {
  background-color: var(--color-primary, #c54337) !important;
  border-color: var(--color-primary, #c54337) !important;
}

/* Comments are closed on events (inc/mec.php); hide the form and the
   leftover "Comments are closed." notice. */
.single-mec-events #respond,
.single-mec-events #comments,
.single-mec-events .nocomments {
  display: none;
}

/* ---- 9. News-style event cards (ClickUp 86bavqqmu) ------------------------- */
/* The full-calendar's LIST / GRID / TILE tabs restyled to read like the
   news area's .post-card grid: white card, thin #eee border, lift + shadow
   on hover, heading-font titles that turn poppy, and a poppy date band
   standing in for the news date badge. */

/* Month divider (LIST) + month navigator (TILE) */
.mec-wrap .mec-month-divider {
  margin: 32px 0 20px;
  border-bottom: 2px solid var(--color-fog, #dbdcdd);
  padding-bottom: 8px;
}

.mec-wrap .mec-month-divider h5 {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-dusk, #3d3454);
}

.mec-wrap .mec-month-divider i {
  color: var(--color-primary, #c54337);
}

/* Shared card shell for all three tab skins */
.mec-wrap .mec-event-list-standard .mec-event-article,
.mec-wrap .mec-event-grid-modern .mec-event-article,
.mec-wrap .mec-event-tile-view .mec-event-article {
  background: #fff;
  border: 1px solid #eee;
  box-shadow: none;
  transition: box-shadow 0.3s, transform 0.3s;
}

.mec-wrap .mec-event-grid-modern .mec-event-article:hover,
.mec-wrap .mec-event-tile-view .mec-event-article:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.mec-wrap .mec-event-list-standard .mec-event-article {
  padding: 24px;
  margin-bottom: 24px;
}

.mec-wrap .mec-event-list-standard .mec-event-article:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Event photo in the list cards: full column width, natural aspect ratio,
   no square crop (86bbr98z4 R5 — MEC's 300x300 thumblist swapped for `large`). */
.mec-wrap .mec-event-list-standard .mec-event-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Titles — post-card__title metrics */
.mec-wrap .mec-event-list-standard .mec-event-title,
.mec-wrap .mec-event-grid-modern .mec-event-title,
.mec-wrap .mec-event-tile-view .mec-event-title {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.mec-wrap .mec-event-title a {
  color: var(--color-dark, #1d292e);
  transition: color 0.2s;
}

.mec-wrap .mec-event-title a:hover {
  color: var(--color-primary, #c54337);
}

/* Descriptions — post-card__excerpt metrics */
.mec-wrap .mec-event-list-standard .mec-event-description {
  font-family: var(--font-body, "Karla", sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body, #4a5568);
}

/* GRID / TILE head band — stands in for the news date badge */
.mec-wrap .event-grid-modern-head,
.mec-wrap .event-tile-view-head {
  background: var(--color-primary, #c54337);
  padding: 14px 20px;
}

.mec-wrap .event-grid-modern-head .mec-event-month,
.mec-wrap .event-grid-modern-head .mec-event-day,
.mec-wrap .event-tile-view-head .mec-event-month,
.mec-wrap .event-tile-view-head .mec-event-time {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  color: #fff;
}

.mec-wrap .event-grid-modern-head .mec-event-month,
.mec-wrap .event-tile-view-head .mec-event-month {
  font-size: 24px;
  font-weight: 700;
}

.mec-wrap .event-grid-modern-head .mec-event-day {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mec-wrap .event-tile-view-head .mec-event-time,
.mec-wrap .event-tile-view-head .mec-event-time i {
  color: #fff;
}

/* MEC decorates tile items with a ::after "date ribbon" that inherits the
   tile's (often unset → white) background; the poppy head band replaces it. */
.mec-wrap .mec-event-tile-view article.mec-tile-item::after {
  display: none;
}

/* Card body + footer */
.mec-wrap .mec-event-grid-modern .mec-event-content,
.mec-wrap .mec-event-tile-view .mec-tile-event-content {
  padding: 20px 20px 4px;
}

.mec-wrap .mec-event-grid-modern .mec-event-footer {
  border-top: 1px solid #eee;
  padding: 14px 20px;
}

/* LIST meta column: poppy icons; the time glyph is an inline SVG with a
   HARDCODED cyan fill attribute — CSS fill out-cascades it. */
.mec-wrap .mec-event-meta .mec-time-details svg path {
  fill: var(--color-primary, #c54337);
}

.mec-wrap .mec-event-meta,
.mec-wrap .mec-event-meta .mec-start-time,
.mec-wrap .mec-event-meta .mec-end-time,
.mec-wrap .mec-event-meta .mec-start-date-label {
  font-family: var(--font-body, "Karla", sans-serif);
  color: var(--color-body, #4a5568);
}

/* ---- 10. Booking attendee form: icon box / input alignment (86bak26g1) ----- */
/* The plugin fixes the field icon at 40x40 and top-aligns it, while the input
   computes taller (plugin line-height 38px + our padding) — the pair renders
   as a small floating square next to an oversized box. Join them: wrapper
   stretches children to one height, the icon follows the input, and the input
   drops the plugin's inflated line-height. flex:1 lets the input fill the row
   past its inline width:95% !important. */
.mec-wrap .mec-booking-form-container .mec-field-wrapper {
  display: flex;
  align-items: stretch;
}

.mec-wrap .mec-booking-form-container .mec-field-wrapper span.mec-field-icon {
  height: auto;
  align-self: stretch;
  border-radius: 2px 0 0 2px;
}

.mec-wrap .mec-booking-form-container .mec-field-wrapper input {
  flex: 1 1 auto;
  min-height: 44px;
  line-height: 1.4;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 0 2px 2px 0;
}

/* Coupon row on the checkout step (86bbr98z4 item 4). The plugin sizes this
   input with line-height 48px / no border and parks the Apply button
   absolutely at top:6px; our §10 input padding + border inflated the input
   to ~70px, so the icon cell stretched and the button floated off-centre.
   Give the coupon input its own metrics and size the button to match. */
.mec-wrap .mec-booking-form-container .mec-book-form-coupon span.mec-booking-coupon-field-wrapper {
  align-items: stretch;
  border-color: var(--color-cirrus, #bdc8d2);
  border-radius: 2px;
}

.mec-wrap .mec-booking-form-container .mec-book-form-coupon span.mec-booking-coupon-field-wrapper .mec-booking-coupon-field-icon {
  background: #f2f5f7;
  border-right-color: var(--color-cirrus, #bdc8d2);
  border-radius: 2px 0 0 2px;
}

.mec-wrap .mec-booking-form-container .mec-book-form-coupon span.mec-booking-coupon-field-wrapper input[type="text"] {
  border: 0;
  border-radius: 0 2px 2px 0;
  height: 48px;
  min-height: 0;
  line-height: 48px;
  padding: 0 90px 0 14px;
  font-size: 15px;
}

.mec-wrap .mec-booking-form-container .mec-book-form-coupon span.mec-booking-coupon-field-wrapper input[type="text"]:focus {
  box-shadow: none;
  outline: none;
}

.mec-wrap .mec-booking-form-container .mec-book-form-coupon form button {
  top: 5px !important;
  right: 5px !important;
  height: 38px;
  line-height: 38px;
  padding: 0 16px !important;
  border-radius: 2px;
}

/* ---- 11. Free-booking thank-you: drop the "no payment step" notice (86bak26g1) */
/* After a $0 booking MEC's message step prints an orange .warning-msg box
   ("For free bookings, there is no payment step.") above the green
   confirmation. The client asked for it to go — the confirmation already says
   everything. Scoped to the thank-you container only: .warning-msg is ALSO the
   plugin's class for real booking errors inside the form, which must stay. */
.mec-wrap [id^="mec_booking_thankyou_"] > .warning-msg {
  display: none;
}

/* ---- 12. Single event: Location / Organizer boxes (86bbugw67) */
/* MEC's m2 single skin prints the location pin twice — once as the section
   icon and again inside dd.author before the venue name — and its
   `dd span { padding-left: 24px }` pushes the address to a different indent
   than the name. Drop the duplicate glyph and stack name / address / phone in
   one column at the same indent as the Date / Time / Cost values. */
.mec-wrap .mec-single-event .mec-single-event-location dl dd.author i,
.mec-wrap .mec-single-event .mec-single-event-organizer dl dd.author i {
  display: none;
}

.mec-wrap .mec-single-event .mec-single-event-location dl dd,
.mec-wrap .mec-single-event .mec-single-event-organizer dl dd {
  margin: 0;
  padding-left: 35px;
}

/* The vendor theme's blog author box rule (`.author { padding: 40px }`,
   vendor/style.css) leaks onto MEC's dd.author, and the <address> keeps
   Bootstrap's 1rem bottom margin — that's what opened the big gaps between
   Location → name → address. Bring them in line with the Date/Time rows. */
.mec-wrap .mec-single-event .mec-event-meta .mec-single-event-location dl dd.author,
.mec-wrap .mec-single-event .mec-event-meta .mec-single-event-organizer dl dd.author {
  padding-top: 0;
  padding-bottom: 6px;
}

.mec-wrap .mec-single-event .mec-single-event-location dl {
  margin-top: 2px;
}

.mec-wrap .mec-single-event .mec-single-event-location dd.location address {
  margin: 0;
}

.mec-wrap .mec-single-event .mec-single-event-location dl dd span,
.mec-wrap .mec-single-event .mec-single-event-organizer dl dd span {
  padding-left: 0;
}

.mec-wrap .mec-single-event .mec-single-event-location dd.author .mec-meta-label,
.mec-wrap .mec-single-event .mec-single-event-organizer dd.author .mec-meta-label {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-graphite, #1d292e);
}

.mec-wrap .mec-single-event .mec-single-event-location .mec-events-address .mec-address {
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
}

.mec-wrap .mec-single-event .mec-single-event-location dd.mec-location-tel,
.mec-wrap .mec-single-event .mec-single-event-organizer dd.mec-organizer-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin-top: 8px;
}

.mec-wrap .mec-single-event .mec-single-event-location dd.mec-location-tel i,
.mec-wrap .mec-single-event .mec-single-event-organizer dd.mec-organizer-tel i {
  margin-right: 0;
}

.mec-wrap .mec-single-event .mec-single-event-location dd.mec-location-tel span,
.mec-wrap .mec-single-event .mec-single-event-organizer dd.mec-organizer-tel span {
  display: inline;
  font-size: 14px;
}

/* ---- Booking flow (ClickUp 86bbr98z4, client 9/9) --------------------------
   Discount code moves onto the attendee step; the plugin's third screen is
   driven automatically (assets/js/mec-booking.js) and hidden behind a short
   status message. When that screen has to be shown after all (invalid code),
   its lone "Subtotal" row duplicates "Total Price", so hide it when it is the
   only row. */
.mec-wrap .mec-booking-form-container .cftv-mec-coupon {
  margin: 4px 0 26px;
  max-width: 420px;
}
.mec-wrap .mec-booking-form-container .cftv-mec-coupon label {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--color-graphite, #1d292e);
}
.mec-wrap .mec-booking-form-container .cftv-mec-coupon__optional {
  font-weight: 400;
  color: #6b7280;
}
.mec-wrap .mec-booking-form-container .cftv-mec-coupon input[type="text"] {
  width: 100%;
  text-transform: none;
}
.cftv-mec-autoflow > *:not(.cftv-mec-autoflow__msg) {
  display: none !important;
}
.cftv-mec-autoflow__msg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  font-size: 18px;
  color: var(--color-graphite, #1d292e);
}
.cftv-mec-autoflow__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #dbdcdd;
  border-top-color: var(--color-primary, #c54337);
  border-radius: 50%;
  animation: cftv-mec-spin 0.8s linear infinite;
}
@keyframes cftv-mec-spin { to { transform: rotate(360deg); } }
.mec-wrap .mec-book-price-details li.mec-book-price-detail-type-tickets:only-child {
  display: none;
}
/* Attendee step: the top "Subtotal" summary repeats the single ticket line
   right under it (client's "redundant subtotal"). Keep it when an event sells
   more than one ticket type, where it sums them. */
.mec-wrap .mec-booking-form-container:has(.mec-book-tickets-container > li:only-child) .mec-ticket-subtotal-wrapper {
  display: none;
}