/*
 * MJEU shop skin — Cart / Checkout / Order-received only.
 * Scoped under body.mjeu-shop (added in functions.php on is_cart()/is_checkout()).
 * Goal: navy header + white logo, neutral grey page, white cards with depth,
 * consistent brand-blue buttons, a step indicator, and fixing the leftover
 * purple product links. Nothing here affects other pages.
 */

/* Self-hosted Poppins (the site references Google Fonts that are blocked, so
 * text fell back to a plain system sans). Hosting locally is GDPR-safe and gives
 * the whole shop flow a consistent, clearly-designed look. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }

:root {
	--mjeu-navy: #0E2747;
	--mjeu-sans: 'Poppins', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
	--mjeu-head: 'Poppins', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
	--mjeu-blue: #185FA5;
	--mjeu-blue-bright: #2D7DD2;
	--mjeu-page: #F3F4F6;
	--mjeu-card-border: #E5E7EB;
	--mjeu-ink: #1F2A37;
	--mjeu-muted: #6B7280;
}

/* ---------- Page background (was a saturated light blue) ---------- */
body.mjeu-shop {
	background-color: var(--mjeu-page) !important;
	color: var(--mjeu-ink);
}

/* ---------- Typography (Lato body / Poppins headings, self-hosted) ---------- */
body.mjeu-shop,
body.mjeu-shop p,
body.mjeu-shop a,
body.mjeu-shop li,
body.mjeu-shop span,
body.mjeu-shop td,
body.mjeu-shop label,
body.mjeu-shop input,
body.mjeu-shop select,
body.mjeu-shop textarea,
body.mjeu-shop button {
	font-family: var(--mjeu-sans);
}
body.mjeu-shop h1,
body.mjeu-shop h2,
body.mjeu-shop h3,
body.mjeu-shop .entry-title,
body.mjeu-shop .woocommerce-order-details__title,
body.mjeu-shop .woocommerce-column__title,
body.mjeu-shop #order_review_heading,
body.mjeu-shop .cart_totals h2,
body.mjeu-shop table.shop_table th {
	font-family: var(--mjeu-head);
	letter-spacing: -0.01em;
}

/* ---------- Header: navy bar + white nav (site-wide via .mjeu-navy-header,
 * which is added to every page EXCEPT transparent-header pages like the home
 * hero — see functions.php) ---------- */
body.mjeu-navy-header .ast-primary-header-bar,
body.mjeu-navy-header .site-primary-header-wrap,
body.mjeu-navy-header .ast-primary-header-bar .ast-builder-grid-row {
	background-color: var(--mjeu-navy) !important;
}
body.mjeu-navy-header #masthead {
	border-bottom: 3px solid var(--mjeu-blue-bright);
	box-shadow: none;
}
/* Logo swap (see functions.php mjeu_white_logo_on_shop): on navy-header pages
 * the desktop bar shows the white logo, the dark one is hidden. */
body.mjeu-navy-header .mjeu-logo-swap > .mjeu-dark-logo {
	display: none;
}
/* #ast-mobile-header always has a white top bar, on every page — including
 * navy-header pages — so it always needs the dark logo. The navy rule above
 * also paints the inner .ast-builder-grid-row (which holds the logo), so that
 * layer has to be reset to transparent here too, not just the outer bar, or
 * the navy leaks through behind the dark logo. */
#ast-mobile-header .ast-primary-header-bar,
#ast-mobile-header .site-primary-header-wrap {
	background-color: #fff !important;
}
#ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row {
	background-color: transparent !important;
}
#ast-mobile-header .mjeu-logo-swap > .mjeu-dark-logo {
	display: inline-block !important;
}
#ast-mobile-header .mjeu-logo-swap > .mjeu-white-logo {
	display: none !important;
}
body.mjeu-navy-header .ast-builder-menu-1 .menu-item > .menu-link {
	color: #FFFFFF !important;
}
body.mjeu-navy-header .ast-builder-menu-1 .menu-item:hover > .menu-link,
body.mjeu-navy-header .ast-builder-menu-1 .current-menu-item > .menu-link,
body.mjeu-navy-header .ast-builder-menu-1 .current-menu-ancestor > .menu-link {
	color: #BFE0FF !important;
}
/* dropdown sub-menus: white rounded panel with depth + dividers between items */
body.mjeu-navy-header .ast-builder-menu-1 .sub-menu {
	background-color: #FFFFFF !important;
	border: 1px solid var(--mjeu-card-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px rgba(14, 39, 71, 0.14) !important;
	padding: 6px 0 !important;
	margin-top: 8px;
}
body.mjeu-navy-header .ast-builder-menu-1 .sub-menu .menu-link {
	color: #243A55 !important;
	font-size: 16px !important;
}
body.mjeu-navy-header .ast-builder-menu-1 .sub-menu .menu-item:hover > .menu-link {
	color: var(--mjeu-blue) !important;
}
/* thin divider line between dropdown items (e.g. Post Highlights / Industry News) */
body.mjeu-navy-header .ast-builder-menu-1 .sub-menu .menu-item + .menu-item {
	border-top: 1px solid #EEF1F5;
}

/* Transparent-header pages (home / About Us / Contact Us) keep their own hero
 * dropdown, but tidy it: smaller sub-item font, and add vertical padding so the
 * existing divider line sits BETWEEN the two items instead of touching the text
 * (Astra gives those links a border-bottom with zero vertical padding). */
body.ast-theme-transparent-header .ast-builder-menu-1 .sub-menu .menu-link {
	font-size: 16px !important;
	border-bottom: none !important; /* drop Astra's misplaced under-text line */
}
/* divider sits between the two list items, centred by their existing 10px padding */
body.ast-theme-transparent-header .ast-builder-menu-1 .sub-menu .menu-item + .menu-item {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}
/* header cart → white text + subtle pill */
body.mjeu-navy-header .ast-header-woo-cart a,
body.mjeu-navy-header .ast-header-woo-cart .ast-woo-header-cart-info-wrap,
body.mjeu-navy-header .ast-header-woo-cart .ast-cart-menu-wrap *,
body.mjeu-navy-header .ast-header-woo-cart i {
	color: #FFFFFF !important;
}
body.mjeu-navy-header .ast-header-woo-cart .ast-cart-menu-wrap {
	background-color: var(--mjeu-blue-bright);
	border-radius: 999px;
	padding: 6px 14px;
}

/* Mini-cart hover panel: match the rounded nav dropdown. The header cart's
 * hover box (.widget_shopping_cart) was a square-cornered white rectangle with a
 * flat grey border, which clashed with the rounded .sub-menu dropdowns above.
 * Give it the same card treatment — matching radius, soft border and depth
 * shadow — so both dropdowns read as one design system. Left unscoped (no body
 * class) so the cart looks consistent on every page, including the hero/
 * transparent-header pages where the navy rules don't apply. */
.ast-site-header-cart .widget_shopping_cart {
	border: 1px solid var(--mjeu-card-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px rgba(14, 39, 71, 0.14) !important;
}

/* ===========================================================================
 * Mobile menu (Astra "dropdown" mobile header, #ast-mobile-header) — was a
 * plain white panel with default-blue links, disconnected from the navy
 * desktop header. Give it the same navy + Poppins + brand-blue treatment.
 * Not scoped to a body class: #ast-mobile-header only renders inside Astra's
 * own mobile header markup (hidden by Astra's CSS above its breakpoint), so
 * these rules have no effect on desktop regardless of viewport width.
 * =========================================================================== */
/* Toggle button (top-right "Menu" / X button): brand navy instead of the
 * default bright blue. The two icon SVGs use fill="currentColor" already, so
 * setting the button's text colour recolours both the hamburger and the X. */
#ast-mobile-header .main-header-menu-toggle {
	background-color: var(--mjeu-navy) !important;
	border-color: var(--mjeu-navy) !important;
	color: #fff !important;
	border-radius: 6px !important;
}
#ast-mobile-header .mobile-menu-wrap .mobile-menu {
	font-family: var(--mjeu-sans);
	font-weight: 500;
}

/* Menu panel background: navy, matching the desktop header bar. The UL itself
 * (#ast-hf-mobile-menu / .main-header-menu) carries Astra's own #f9f9f9
 * background — that has to be overridden directly, not just on its
 * ancestors, or it paints over any colour set higher up the tree. */
#ast-mobile-header .ast-mobile-header-content,
#ast-mobile-header .main-header-bar-navigation,
#ast-mobile-header .main-header-menu {
	background-color: var(--mjeu-navy) !important;
}
/* Open menu overlays the page instead of pushing it down. Astra keeps the
 * dropdown content (.ast-mobile-header-content) in normal flow, so opening it
 * shoved the hero/page content down. Anchor it absolutely to the header so it
 * floats over the content below the bar. When closed the inner nav is
 * display:none (Astra), so this wrapper has no height and the absolute
 * positioning is inert. */
#ast-mobile-header {
	position: relative;
}
#ast-mobile-header .ast-mobile-header-content {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 999;
}
/* Tablet width (600px up to Astra's own 921px header breakpoint, above which
 * the mobile header is hidden and the desktop nav takes over): the dropdown
 * was stretching edge-to-edge, which reads oddly on a wide screen. Shrink the
 * floating panel to the right half only; the top bar (logo + Menu button)
 * stays full width. Below 600px (phones) the full-width panel is unchanged.
 * 600px (not 782px) so common tablet widths — iPad portrait is 768px CSS
 * pixels — land inside the "tablet" half-width behaviour, not the phone one. */
@media (min-width: 600px) {
	#ast-mobile-header .ast-mobile-header-content {
		left: auto;
		width: 50%;
	}
}

/* Menu items: white Poppins text, no more default zebra/grey rows. */
#ast-mobile-header .main-header-menu .menu-item {
	background-color: transparent !important;
}
#ast-mobile-header .main-header-menu .menu-link {
	font-family: var(--mjeu-sans);
	font-size: 16px;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	border-left: 3px solid transparent;
	padding-left: 15px !important;
}
/* Current page: bright-blue left accent + faint highlight, same language as
 * the desktop nav's current-item colour (#BFE0FF). */
#ast-mobile-header .main-header-menu > .current-menu-item > .menu-link,
#ast-mobile-header .main-header-menu > .current-menu-ancestor > .menu-link {
	border-left-color: var(--mjeu-blue-bright);
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
}
/* Submenu toggle arrow (Events / Knowledge Hub chevron button) + the small
 * bullet arrow Astra prints before each submenu link — both are bare <svg>
 * with no fill, so they inherited black-on-white before; force the brand
 * light blue so they read on the navy background. */
#ast-mobile-header .ast-menu-toggle,
#ast-mobile-header .ast-icon.icon-arrow svg {
	color: var(--mjeu-blue-bright) !important;
}
#ast-mobile-header .ast-icon.icon-arrow svg,
#ast-mobile-header .ast-icon.icon-arrow svg path {
	fill: currentColor !important;
}
/* Sub-menu (Upcoming Events / Past Events, Post Highlights / Industry News):
 * slightly lighter navy so the nesting is visible, same white text/links. */
#ast-mobile-header .sub-menu {
	background-color: rgba(255, 255, 255, 0.04) !important;
}
#ast-mobile-header .sub-menu .menu-link {
	font-size: 15px;
	color: #D7E6F5 !important;
}
/* Top-level icon per item — matched by URL since the menu has no stable
 * per-item class; update the [href*="…"] value if a menu link's URL changes. */
#ast-mobile-header .main-header-menu > .menu-item > .menu-link::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	width: 20px;
	display: inline-block;
	margin-right: 10px;
	color: var(--mjeu-blue-bright);
}
#ast-mobile-header .main-header-menu > .menu-item-home > .menu-link::before { content: "\f015"; }
#ast-mobile-header .main-header-menu > .menu-item > a[href*="eventlist"]::before { content: "\f073"; }
#ast-mobile-header .main-header-menu > .menu-item > a[href*="category/infocenter"]::before { content: "\f02d"; }
#ast-mobile-header .main-header-menu > .menu-item > a[href*="aboutus"]::before { content: "\f05a"; }
#ast-mobile-header .main-header-menu > .menu-item > a[href*="contact-2"]::before { content: "\f0e0"; }
#ast-mobile-header .main-header-menu > .menu-item > a[href*="my-account"]::before { content: "\f007"; }
/* "Sign up an event" CTA: styled via a CSS class rather than a URL match, so
 * add it to a real menu item under Appearance → Menus → Mobile Menu (CSS
 * Classes field, needs Screen Options → CSS Classes turned on) — enter
 * "mjeu-mobile-cta" there and this pill styling picks it up automatically. */
#ast-mobile-header .main-header-menu > .mjeu-mobile-cta {
	margin-top: 10px;
	padding: 0 15px;
}
#ast-mobile-header .main-header-menu > .mjeu-mobile-cta > .menu-link {
	background-color: var(--mjeu-blue-bright) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	text-align: center;
	font-weight: 500;
	padding: 12px !important;
}
#ast-mobile-header .main-header-menu > .mjeu-mobile-cta > .menu-link::before {
	content: none;
}

/* ---------- Page title (Your Cart / Checkout / Order received) ---------- */
body.mjeu-shop .entry-title,
body.mjeu-shop .ast-page-title,
body.mjeu-shop h1.entry-title {
	font-size: 30px;
	font-weight: 600;
	color: var(--mjeu-navy);
	margin-bottom: 20px;
}

/* ---------- Step indicator ---------- */
.mjeu-steps {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 26px;
	font-size: 14px;
}
.mjeu-steps .mjeu-step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mjeu-muted);
}
.mjeu-steps .mjeu-step .num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid #CBD5E1;
	color: var(--mjeu-blue);
	font-size: 13px;
	line-height: 1;
}
.mjeu-steps .mjeu-step.is-done .num {
	background: #E6F1FB;
	border-color: #E6F1FB;
	color: var(--mjeu-blue);
}
.mjeu-steps .mjeu-step.is-active {
	color: var(--mjeu-navy);
	font-weight: 600;
}
.mjeu-steps .mjeu-step.is-active .num {
	background: var(--mjeu-blue);
	border-color: var(--mjeu-blue);
	color: #FFFFFF;
}
.mjeu-steps .sep {
	flex: 0 0 30px;
	height: 2px;
	border-radius: 2px;
	background: #CBD5E1;
}
.mjeu-steps .sep.on {
	background: var(--mjeu-blue-bright);
}

/* ---------- Cards: lift the main sections onto white surfaces ---------- */
body.mjeu-shop .woocommerce-cart-form,
body.mjeu-shop .cart-collaterals .cart_totals,
body.mjeu-shop #customer_details,
body.mjeu-shop #order_review,
body.mjeu-shop ul.woocommerce-order-overview,
body.mjeu-shop .woocommerce-order-details,
body.mjeu-shop .woocommerce-customer-details,
body.mjeu-shop .woocommerce-bacs-bank-details,
body.mjeu-shop .wc-bacs-bank-details {
	background: #FFFFFF;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	padding: 24px 26px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	margin-bottom: 24px;
}

/* section titles inside cards (Your order / Order details / Billing details):
 * the theme gives these their own pale box + border with square corners, which
 * clashes with the rounded card. Strip the box so the title is just a heading. */
body.mjeu-shop .woocommerce-order-details__title,
body.mjeu-shop .woocommerce-column__title,
body.mjeu-shop #order_review_heading,
body.mjeu-shop .cart_totals h2,
body.mjeu-shop .woocommerce-billing-fields h3,
body.mjeu-shop .woocommerce-additional-fields h3 {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 0 14px !important;
	margin: 0 0 8px !important;
	font-size: 18px;
	font-weight: 600;
	color: var(--mjeu-navy);
}

/* tables inside cards: no boxy grey header strip — use a clean bottom rule */
body.mjeu-shop table.shop_table,
body.mjeu-shop table.woocommerce-table {
	border: none;
	border-radius: 0;
}
body.mjeu-shop table.shop_table th {
	background: transparent;
	color: var(--mjeu-navy);
	font-weight: 600;
	border-bottom: 2px solid #E5E7EB;
	padding-bottom: 12px;
}
body.mjeu-shop table.shop_table td {
	border-top: 1px solid #EEF1F5;
}

/* order summary / totals emphasis */
body.mjeu-shop .cart_totals .order-total .amount,
body.mjeu-shop .woocommerce-order-overview__total .amount {
	color: var(--mjeu-navy);
	font-size: 20px;
}

/* attendee "Details Information" block → clean indented list, not a grey box
 * (the grey box clashed with the surrounding cards). */
body.mjeu-shop .product-name dl,
body.mjeu-shop td.product-name .wc-item-meta,
body.mjeu-shop td.product-name .variation,
body.mjeu-shop .cart_item .product-name p,
body.mjeu-shop .woocommerce-checkout-review-order-table ._layout_info_xs_mt_xs,
body.mjeu-shop #order_review ._layout_info_xs_mt_xs {
	background: transparent !important;
	border: none;
	border-left: 3px solid #D6E2F2;
	border-radius: 0;
	padding: 2px 0 2px 14px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.9;
}

/* ---------- Fix leftover purple product/event title → brand blue ----------
 * The mage plugin sets the purple colour on the .product-name CELL itself
 * (the title is a plain text node), so target the cell, not just <a>. */
body.mjeu-shop td.product-name,
body.mjeu-shop .woocommerce-table--order-details td.product-name,
body.mjeu-shop td.product-name a,
body.mjeu-shop .woocommerce-table--order-details td.product-name a {
	color: var(--mjeu-blue) !important;
	font-weight: 600;
}
/* but keep the attendee / variation detail lines neutral (not blue) */
body.mjeu-shop td.product-name dl,
body.mjeu-shop td.product-name dl *,
body.mjeu-shop td.product-name .variation,
body.mjeu-shop td.product-name .variation *,
body.mjeu-shop .wc-item-meta,
body.mjeu-shop .wc-item-meta *,
body.mjeu-shop td.product-name p,
body.mjeu-shop td.product-name p * {
	color: var(--mjeu-ink) !important;
	font-weight: 400;
}

/* ---------- Inputs ---------- */
body.mjeu-shop .woocommerce form .form-row input.input-text,
body.mjeu-shop .woocommerce form .form-row textarea,
body.mjeu-shop .woocommerce form .form-row .select2-selection,
body.mjeu-shop .woocommerce-cart .input-text,
body.mjeu-shop .woocommerce select {
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	padding: 10px 12px;
	box-shadow: none;
}
body.mjeu-shop .woocommerce form .form-row input.input-text:focus,
body.mjeu-shop .woocommerce form .form-row textarea:focus,
body.mjeu-shop .woocommerce select:focus {
	border-color: var(--mjeu-blue);
	box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.15);
	outline: none;
}
body.mjeu-shop .woocommerce form .form-row label {
	color: var(--mjeu-muted);
	font-size: 13px;
	font-weight: 500;
}

/* ---------- Buttons: one consistent system ---------- */
body.mjeu-shop .woocommerce a.button,
body.mjeu-shop .woocommerce button.button,
body.mjeu-shop .woocommerce input.button,
body.mjeu-shop .woocommerce #place_order,
body.mjeu-shop .woocommerce .checkout-button,
body.mjeu-shop .wc-proceed-to-checkout a.button {
	background-color: var(--mjeu-blue) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--mjeu-blue) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-weight: 600;
	text-transform: none;
	padding: 12px 22px;
	transition: background-color .15s ease;
}
body.mjeu-shop .woocommerce a.button:hover,
body.mjeu-shop .woocommerce button.button:hover,
body.mjeu-shop .woocommerce input.button:hover,
body.mjeu-shop .woocommerce #place_order:hover,
body.mjeu-shop .woocommerce .checkout-button:hover,
body.mjeu-shop .wc-proceed-to-checkout a.button:hover {
	background-color: #134A82 !important;
	border-color: #134A82 !important;
}
/* secondary button (Update cart) → outline */
body.mjeu-shop .woocommerce button[name="update_cart"],
body.mjeu-shop .woocommerce input[name="update_cart"] {
	background-color: #FFFFFF !important;
	color: var(--mjeu-blue) !important;
	border: 1px solid var(--mjeu-blue) !important;
}
body.mjeu-shop .woocommerce button[name="update_cart"]:hover,
body.mjeu-shop .woocommerce input[name="update_cart"]:hover {
	background-color: #EAF2FB !important;
}
/* place-order / proceed full width emphasis */
body.mjeu-shop #place_order,
body.mjeu-shop .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	font-size: 16px;
	padding: 14px;
}

/* ---------- Hide the redundant "X has been added to your cart" notice ----------
 * (the cart contents are already visible on the page). Targets only the
 * add-to-cart success message, which carries a "View cart" button. */
body.mjeu-shop .woocommerce-message:has(a.wc-forward) {
	display: none;
}

/* Info / empty-cart / coupon notices → proper white cards with depth, instead
 * of bare lines of text (which looked plain). This also boxes the "Have a
 * coupon?" row and the empty-cart message. */
body.mjeu-shop .woocommerce-info,
body.mjeu-shop p.cart-empty {
	background: #fff !important;
	border: 1px solid var(--mjeu-card-border) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	padding: 20px 24px !important;
	color: var(--mjeu-ink);
	font-family: var(--mjeu-sans) !important;
}
/* Coupon block: one card holding the "Have a coupon?" toggle AND the code form
 * (wrapped in .mjeu-coupon-card via functions.php). Flatten the inner pieces so
 * it reads as a single card, not a card with another box inside. */
body.mjeu-shop .mjeu-coupon-card {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	padding: 20px 24px;
	margin-bottom: 24px;
}
body.mjeu-shop .mjeu-coupon-card .woocommerce-info {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.mjeu-shop .mjeu-coupon-card .checkout_coupon {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 14px 0 0 !important;
	margin: 0 !important;
}

/* the .wc-empty-cart-message wrapper stays transparent so we get one clean card
 * (its inner p.cart-empty is the card) — not a card-in-a-card. */
body.mjeu-shop .wc-empty-cart-message {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
/* drop the default WooCommerce info "blue square" icon — looks like a stray box */
body.mjeu-shop .woocommerce-info::before,
body.mjeu-shop p.cart-empty::before {
	display: none !important;
}
/* empty cart: give the message more presence */
body.mjeu-shop p.cart-empty {
	text-align: center;
	font-size: 17px;
	padding: 34px 24px !important;
}
body.mjeu-shop .woocommerce-error {
	font-family: var(--mjeu-sans) !important;
}

/* Order-received: drop the redundant "Thank you, your order has been received."
 * line — the page title already says "Order received". */
body.mjeu-shop .woocommerce-thankyou-order-received {
	display: none;
}

/* The "Please use your order number as the payment reference." note, now moved
 * inside the bank-details card (see functions.php). Emphasise it. */
body.mjeu-shop .mjeu-bacs-reference {
	margin: 16px 0 0;
	font-weight: 600;
	color: var(--mjeu-blue);
}

/* ---------- Order-received: overview row tidy ---------- */
body.mjeu-shop ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 36px;
	list-style: none;
	margin: 0;
}
body.mjeu-shop ul.woocommerce-order-overview li {
	border: none;
	font-size: 13px;
	color: var(--mjeu-muted);
	text-transform: uppercase;
	letter-spacing: .3px;
}
body.mjeu-shop ul.woocommerce-order-overview li strong {
	display: block;
	font-size: 16px;
	color: var(--mjeu-navy);
	text-transform: none;
	letter-spacing: 0;
	margin-top: 2px;
}

/* ---------- Order-received: "Download Ticket" button (mage PDF addon) ----------
 * The addon prints <div.mpwem_style><button._button_theme_xs> with a Font Awesome
 * icon that isn't loaded on the front end (shows as a box). Restyle to the brand
 * button system, swap the broken FA glyph for an inline SVG download icon, and give
 * the wrapper the same 24px bottom gap as the cards so it's evenly spaced between
 * the summary card above and the Order details card below. */
body.mjeu-shop .mpwem_style {
	margin: 0 0 24px !important;
}
body.mjeu-shop .mpwem_style ._button_theme_xs {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	background-color: var(--mjeu-blue) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--mjeu-blue) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-weight: 600 !important;
	text-transform: none !important;
	padding: 12px 22px !important;
	cursor: pointer;
	transition: background-color .15s ease;
}
body.mjeu-shop .mpwem_style ._button_theme_xs:hover {
	background-color: #134A82 !important;
	border-color: #134A82 !important;
}
body.mjeu-shop .mpwem_style ._button_theme_xs .fas {
	display: none !important;
}
body.mjeu-shop .mpwem_style ._button_theme_xs::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Single-product layout guard (clear the floats) ----------
 * On a single product page WooCommerce floats the gallery (left) and the
 * summary (right) inside div.product. The container is normally given height
 * by the content that follows (Description/Reviews tabs, Related products).
 * A product with none of those — no description, no reviews, no related/upsell
 * (e.g. a bare leftover ticket-inventory product) — leaves both floats
 * uncleared, so div.product / #primary / #content collapse to height 0 and the
 * dark site footer slides up under the header with the product content floating
 * on top of it (the "weird dark page"). Clearing the floats here keeps the
 * container tall enough regardless of what's inside, so the footer stays put.
 * Scoped to .single-product, so it never touches other pages. */
body.single-product div.product::after {
	content: "";
	display: block;
	clear: both;
}

/* =====================================================================
 * My Account redesign — scoped to body.mjeu-account (is_account_page()).
 * Brings the whole account area in line with the shop skin: neutral grey
 * page, Poppins, white cards, brand-blue nav highlight, status pills and a
 * consistent button system, plus theming for the mage event-bookings table
 * (now shown as "Orders"). Front-end only — wp-admin order screens untouched.
 * ===================================================================== */
body.mjeu-account {
	background-color: var(--mjeu-page) !important;
	color: var(--mjeu-ink);
}
body.mjeu-account,
body.mjeu-account p,
body.mjeu-account a,
body.mjeu-account li,
body.mjeu-account span,
body.mjeu-account td,
body.mjeu-account th,
body.mjeu-account label,
body.mjeu-account input,
body.mjeu-account select,
body.mjeu-account textarea,
body.mjeu-account button {
	font-family: var(--mjeu-sans);
}
body.mjeu-account h1,
body.mjeu-account h2,
body.mjeu-account h3,
body.mjeu-account .entry-title {
	font-family: var(--mjeu-head);
	color: var(--mjeu-navy);
	letter-spacing: -0.01em;
}
body.mjeu-account .entry-title,
body.mjeu-account h1.entry-title {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 20px;
}

/* ---------- Layout: nav card (left) + content card (right) ----------
 * Float-based, matching WooCommerce's own account layout, so the nav card
 * lines up with the page title's left edge. (A flex container on .woocommerce
 * would also catch the header mini-cart, which shares that class, and an empty
 * notices wrapper would push the nav in by the gap — hence floats here.) */
body.mjeu-account .woocommerce-MyAccount-navigation {
	float: left;
	width: 244px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	padding: 10px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
}
body.mjeu-account .woocommerce-MyAccount-content {
	float: none;
	display: flow-root;        /* own BFC → fills the space beside the floated nav, without clipping modals */
	width: auto;
	margin: 0 0 0 262px;       /* 244 nav + 18 gap */
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	padding: 24px 26px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
}
body.mjeu-account .entry-content > .woocommerce::after {
	content: "";
	display: table;
	clear: both;
}
@media (max-width: 782px) {
	body.mjeu-account .woocommerce-MyAccount-navigation {
		float: none;
		width: 100%;
		margin-bottom: 16px;
	}
	body.mjeu-account .woocommerce-MyAccount-content {
		margin-left: 0;
	}
}

/* ---------- Nav items (icon + label, active highlight, hover) ---------- */
body.mjeu-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.mjeu-account .woocommerce-MyAccount-navigation li {
	margin: 2px 0;
	border: 0;
}
body.mjeu-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: #243A55;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
body.mjeu-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover {
	background: #EAF2FB;
}
body.mjeu-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--mjeu-blue);
	color: #fff;
}
body.mjeu-account .mjeu-nav-ic {
	display: inline-flex;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}
body.mjeu-account .mjeu-nav-ic svg {
	width: 18px;
	height: 18px;
}

/* nav user header: name + email at the top of the menu card (no avatar) */
body.mjeu-account .mjeu-nav-user {
	padding: 6px 10px 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid #EEF1F5;
}
body.mjeu-account .mjeu-nav-user-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mjeu-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.mjeu-account .mjeu-nav-user-email {
	display: block;
	font-size: 12px;
	color: var(--mjeu-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Dashboard: welcome + shortcut tiles ---------- */
body.mjeu-account .mjeu-acc-welcome h2 {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 4px;
}
body.mjeu-account .mjeu-acc-welcome p {
	font-size: 14px;
	color: var(--mjeu-muted);
	margin: 0 0 20px;
}
body.mjeu-account .mjeu-acc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}
body.mjeu-account .mjeu-tile {
	display: block;
	text-decoration: none;
	color: var(--mjeu-ink);
	border: 1px solid var(--mjeu-card-border);
	border-radius: 12px;
	padding: 16px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.mjeu-account .mjeu-tile:hover {
	border-color: var(--mjeu-blue-bright);
	box-shadow: 0 4px 14px rgba(16, 39, 71, 0.08);
}
body.mjeu-account .mjeu-tile .ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #E6F1FB;
	color: var(--mjeu-blue);
	margin-bottom: 12px;
}
body.mjeu-account .mjeu-tile .ic svg {
	width: 20px;
	height: 20px;
}
body.mjeu-account .mjeu-tile .tt {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--mjeu-navy);
}
body.mjeu-account .mjeu-tile .sub {
	display: block;
	font-size: 12.5px;
	color: var(--mjeu-muted);
	margin-top: 2px;
}

/* ---------- Section headings inside the content card ---------- */
body.mjeu-account .woocommerce-MyAccount-content h2,
body.mjeu-account .woocommerce-MyAccount-content h3,
body.mjeu-account .mpwem-dashboard-header h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--mjeu-navy);
	margin-top: 0;
}
body.mjeu-account .mpwem-dashboard-description {
	font-size: 13px;
	color: var(--mjeu-muted);
}

/* ---------- Tables (orders + bookings): clean, no boxy grey header ---------- */
body.mjeu-account table.shop_table,
body.mjeu-account table.woocommerce-orders-table,
body.mjeu-account .mpwem-bookings-table {
	border: none;
	border-radius: 0;
	width: 100%;
	border-collapse: collapse;
}
body.mjeu-account table.shop_table th,
body.mjeu-account .mpwem-bookings-table th {
	background: transparent;
	color: var(--mjeu-navy);
	font-weight: 600;
	border: none;
	border-bottom: 2px solid #E5E7EB;
	padding: 10px 12px;
	text-align: left;
}
body.mjeu-account table.shop_table td,
body.mjeu-account .mpwem-bookings-table td {
	border: none;
	border-top: 1px solid #EEF1F5;
	padding: 12px;
	vertical-align: middle;
}
body.mjeu-account .mpwem-event-name {
	font-weight: 600;
	color: var(--mjeu-blue);
}
body.mjeu-account .mpwem-order-number {
	color: var(--mjeu-blue);
	font-weight: 600;
}
body.mjeu-account .mpwem-event-date,
body.mjeu-account .mpwem-order-date {
	font-size: 12.5px;
	color: var(--mjeu-muted);
}

/* ---------- Status pills (WooCommerce order status + mage statuses) ---------- */
body.mjeu-account .order-status,
body.mjeu-account [class*="mpwem-status-"] {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.6;
}
body.mjeu-account .mpwem-status-completed,
body.mjeu-account .order-status.status-completed {
	background: #EAF3DE;
	color: #3B6D11;
}
body.mjeu-account .mpwem-status-processing,
body.mjeu-account .order-status.status-processing {
	background: #E6F1FB;
	color: var(--mjeu-blue);
}
body.mjeu-account .mpwem-status-on-hold,
body.mjeu-account .order-status.status-on-hold {
	background: #FAEEDA;
	color: #854F0B;
}
body.mjeu-account .mpwem-status-cancelled,
body.mjeu-account .mpwem-status-trash,
body.mjeu-account .order-status.status-cancelled,
body.mjeu-account .order-status.status-failed {
	background: #FCEBEB;
	color: #A32D2D;
}
body.mjeu-account .mpwem-status-pending,
body.mjeu-account .order-status.status-pending {
	background: #F1EFE8;
	color: #5F5E5A;
}

/* ---------- Orders (event-bookings) list — phone layout ----------
 * The "Orders" account menu points at the mage event-bookings endpoint, which
 * renders .mpwem-bookings-table. Below 782px the plugin's own responsive CSS
 * stacks the cells but right-aligns them and prints a label via a ::before that
 * comes out blank — leaving a lone ":" beside each value (the mess in the
 * screenshot). Every cell here is self-describing (order #, event, ticket
 * count, status pill, action buttons), so drop the labels, left-align, and lay
 * each booking out as one clean card. Scoped to body.mjeu-account + <=782px so
 * the desktop table is untouched. */
@media (max-width: 782px) {
	body.mjeu-account .mpwem-bookings-table thead {
		display: none !important;
	}
	body.mjeu-account .mpwem-bookings-table tbody tr {
		display: block !important;
		background: #fff;
		border: 1px solid var(--mjeu-card-border) !important;
		border-radius: 12px !important;
		box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
		margin: 0 0 16px !important;
		padding: 4px 16px !important;
		overflow: visible !important;
	}
	body.mjeu-account .mpwem-bookings-table td {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 12px 0 !important;
		border: 0 !important;
		border-top: 1px solid #EEF1F5 !important;
	}
	body.mjeu-account .mpwem-bookings-table tr td:first-child {
		border-top: 0 !important;
	}
	/* Kill the blank ":" label the plugin's ::before leaves behind. */
	body.mjeu-account .mpwem-bookings-table td::before {
		content: none !important;
		display: none !important;
	}
	/* The plugin right-aligns these inner groups on mobile — put them back to
	 * a left-aligned vertical stack (order #, event name + date, etc.). */
	body.mjeu-account .mpwem-order-info,
	body.mjeu-account .mpwem-event-info,
	body.mjeu-account .mpwem-event-details,
	body.mjeu-account .mpwem-actions-group {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}
	body.mjeu-account .mpwem-event-info {
		flex-direction: column !important;
	}
	/* Action buttons: stacked and full width so they're easy to tap. */
	body.mjeu-account .mpwem-col-actions .mpwem-actions-group {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
	}
	body.mjeu-account .mpwem-col-actions a,
	body.mjeu-account .mpwem-col-actions button,
	body.mjeu-account .mpwem-col-actions .mpwem-btn {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
	}
}

/* ---------- Buttons: one consistent system ---------- */
body.mjeu-account .woocommerce-MyAccount-content a.button,
body.mjeu-account .woocommerce-MyAccount-content button.button,
body.mjeu-account .woocommerce-MyAccount-content input.button,
body.mjeu-account button[name="save_account_details"],
body.mjeu-account button[name="save_address"],
body.mjeu-account .mpwem-btn-pdf,
body.mjeu-account .mpwem-btn-search {
	background-color: var(--mjeu-blue) !important;
	color: #fff !important;
	border: 1px solid var(--mjeu-blue) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-weight: 600;
	text-transform: none;
	padding: 10px 18px;
	transition: background-color .15s ease;
}
body.mjeu-account .woocommerce-MyAccount-content a.button:hover,
body.mjeu-account .woocommerce-MyAccount-content button.button:hover,
body.mjeu-account .woocommerce-MyAccount-content input.button:hover,
body.mjeu-account button[name="save_account_details"]:hover,
body.mjeu-account button[name="save_address"]:hover,
body.mjeu-account .mpwem-btn-pdf:hover,
body.mjeu-account .mpwem-btn-search:hover {
	background-color: #134A82 !important;
	border-color: #134A82 !important;
}
/* secondary actions (view / edit / reset) → outline */
body.mjeu-account .mpwem-btn-view,
body.mjeu-account .mpwem-btn-edit,
body.mjeu-account .mpwem-btn-reset {
	background-color: #fff !important;
	color: var(--mjeu-blue) !important;
	border: 1px solid #C9DBF0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-weight: 500;
	text-transform: none;
	padding: 9px 14px;
}
body.mjeu-account .mpwem-btn-view:hover,
body.mjeu-account .mpwem-btn-edit:hover,
body.mjeu-account .mpwem-btn-reset:hover {
	background-color: #EAF2FB !important;
}
body.mjeu-account .mpwem-actions-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* ---------- Inputs ---------- */
body.mjeu-account .woocommerce-MyAccount-content input.input-text,
body.mjeu-account .woocommerce-MyAccount-content input[type="text"],
body.mjeu-account .woocommerce-MyAccount-content input[type="email"],
body.mjeu-account .woocommerce-MyAccount-content input[type="tel"],
body.mjeu-account .woocommerce-MyAccount-content input[type="password"],
body.mjeu-account .woocommerce-MyAccount-content select,
body.mjeu-account .woocommerce-MyAccount-content textarea,
body.mjeu-account .mpwem-dashboard-filters input,
body.mjeu-account .mpwem-dashboard-filters select {
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	padding: 10px 12px;
	box-shadow: none;
}
body.mjeu-account .woocommerce-MyAccount-content input.input-text:focus,
body.mjeu-account .woocommerce-MyAccount-content input[type="email"]:focus,
body.mjeu-account .woocommerce-MyAccount-content input[type="password"]:focus,
body.mjeu-account .woocommerce-MyAccount-content select:focus,
body.mjeu-account .woocommerce-MyAccount-content textarea:focus,
body.mjeu-account .mpwem-dashboard-filters input:focus {
	border-color: var(--mjeu-blue);
	box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.15);
	outline: none;
}
body.mjeu-account .woocommerce-MyAccount-content form .form-row label,
body.mjeu-account .woocommerce-EditAccountForm label {
	color: var(--mjeu-muted);
	font-size: 13px;
	font-weight: 500;
}

/* ---------- mage event-bookings dashboard: filter bar + stats + modal ----------
 * Keep the plugin's own block layout (search row on top, a 3-up stats grid
 * below). We only retheme the colours — forcing this into a flex row squeezed
 * the stats grid into a tall single column and left a big empty band. */
body.mjeu-account .mpwem-dashboard-filters {
	background: #F8FAFC;
	border: 1px solid #EEF1F5;
	border-radius: 10px;
}
body.mjeu-account .mpwem-stat-number {
	color: var(--mjeu-blue);
}
body.mjeu-account .mpwem-stat-clickable:hover {
	border-color: var(--mjeu-blue);
}
body.mjeu-account .mpwem-stat-clickable.active {
	background: var(--mjeu-blue);
	border-color: var(--mjeu-blue);
}
body.mjeu-account .mpwem-modal-content {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(14, 39, 71, 0.18);
}

/* ---------- Orders (event-bookings) table refinements ----------
 * Restore the dashicons icon font: the broad "span { font-family }" rule above
 * was overriding it, so the plugin's View / Edit / Search / Reset / calendar
 * icons rendered as missing-glyph boxes. */
body.mjeu-account .dashicons,
body.mjeu-account .dashicons::before {
	font-family: "dashicons" !important;
}

/* Fit the table within the card (no horizontal scrollbar) and pack the columns
 * to the left. The plugin wrapper/dashboard were stretching to the table's
 * preferred width (≈1184px) inside the scrollable content area, so pin them to
 * the card width first; then let the table shrink to its content and cap the
 * event column so long names wrap to two lines instead of widening the table. */
body.mjeu-account .mpwem-event-bookings-dashboard,
body.mjeu-account .mpwem-bookings-table-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
body.mjeu-account .mpwem-bookings-table {
	table-layout: fixed !important;
	width: 100% !important;
}
body.mjeu-account .mpwem-col-tickets {
	display: none;
}
/* Order + Event left-aligned (booking info), Status + Actions right-aligned
 * (hug the card's right edge). The flexible slack sits in the middle, reading
 * as a clean "info ↔ actions" split rather than empty space on one side. */
body.mjeu-account .mpwem-col-order {
	width: 104px;
	white-space: nowrap;
	text-align: left;
}
body.mjeu-account .mpwem-col-event {
	width: auto;
	min-width: 0;
	text-align: left;
}
body.mjeu-account .mpwem-col-status {
	width: 120px;
	white-space: nowrap;
	text-align: right;
}
body.mjeu-account .mpwem-col-actions {
	width: 150px;
	text-align: right;
}
body.mjeu-account .mpwem-bookings-table th {
	white-space: normal;
}
body.mjeu-account .mpwem-event-name {
	white-space: normal;
	word-break: break-word;
}
/* stack a multi-event order's events vertically (the plugin lays .mpwem-event-info
 * out as a flex row, which puts the events side by side and runs out of width). */
body.mjeu-account .mpwem-col-event .mpwem-event-info {
	display: block;
}
/* stack the row actions neatly in the narrower column */
body.mjeu-account .mpwem-actions-group {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
body.mjeu-account .mpwem-actions-group .mpwem-btn {
	width: 100%;
	justify-content: center;
}

/* Hide trashed bookings from the customer's list (deleted orders are already
 * skipped by the plugin). */
body.mjeu-account .mpwem-booking-row:has(.mpwem-status-trash) {
	display: none;
}

/* PDF button → a ticket icon + "Tickets" label. The plugin renders a document
 * dashicon labelled "PDF"; swap the glyph for a self-hosted ticket SVG (masked
 * so it follows the button's text colour) and relabel the text. */
body.mjeu-account .mpwem-btn-pdf {
	font-size: 0;
}
body.mjeu-account .mpwem-btn-pdf .dashicons {
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5v2'/%3E%3Cpath d='M15 11v2'/%3E%3Cpath d='M15 17v2'/%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5v2'/%3E%3Cpath d='M15 11v2'/%3E%3Cpath d='M15 17v2'/%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2'/%3E%3C/svg%3E") no-repeat center / contain;
}
body.mjeu-account .mpwem-btn-pdf .dashicons::before {
	content: "";
}
body.mjeu-account .mpwem-btn-pdf::after {
	content: "Tickets";
	font-size: 12px;
	font-weight: 600;
}

/* Hide the Edit (attendee-info) action button per request. */
body.mjeu-account .mpwem-btn-edit {
	display: none;
}

/* Hide the per-attendee "View Ticket" button in the booking-details modal — it
 * links to a non-ticket page; tickets are delivered as PDF only. */
body.mjeu-account .mpwem-attendee-header .mpwem-btn-small {
	display: none;
}

/* Event group heading in the booking-details modal: attendees are grouped per
 * event (each event re-numbers its own #1, #2 …); this labels each group. */
body.mjeu-account .mpwem-attendee-event-group {
	margin: 18px 0 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--mjeu-blue);
	color: var(--mjeu-navy);
	font-size: 15px;
	font-weight: 700;
}
body.mjeu-account .mpwem-attendee-event-group:first-child {
	margin-top: 0;
}

/* ---------- View full order details (My Account view-order) ----------
 * WooCommerce/mage render this order's items table with purple text and a flat
 * wall of meta. Restyle it into the card system: a summary header, de-purpled
 * item cards, a clean key/value grid for the attendee fields, a totals card and
 * a billing card. Scoped with :has(.woocommerce-order-details) so it only
 * affects this view (the order-received page is styled separately under
 * .mjeu-shop). */
body.mjeu-account .woocommerce-MyAccount-content:has(.woocommerce-order-details) {
	background: transparent !important; /* beat Astra's .woocommerce-MyAccount-content { background:#fff !important } */
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
/* structured order header (Order # · placed date · status pill) */
body.mjeu-account .mjeu-order-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	padding: 16px 20px;
	margin: 0 0 16px;
}
body.mjeu-account .mjeu-order-num {
	font-size: 18px;
	font-weight: 600;
	color: var(--mjeu-navy);
}
body.mjeu-account .mjeu-order-date {
	font-size: 12.5px;
	color: var(--mjeu-muted);
	margin-top: 2px;
}
body.mjeu-account .mjeu-order-head mark.order-status {
	display: inline-block;
	background: #F1EFE8;
	color: #5F5E5A;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}
body.mjeu-account .mjeu-order-head mark.status-on-hold { background: #FAEEDA; color: #854F0B; }
body.mjeu-account .mjeu-order-head mark.status-completed { background: #EAF3DE; color: #3B6D11; }
body.mjeu-account .mjeu-order-head mark.status-processing { background: #E6F1FB; color: var(--mjeu-blue); }
body.mjeu-account .mjeu-order-head mark.status-cancelled,
body.mjeu-account .mjeu-order-head mark.status-failed { background: #FCEBEB; color: #A32D2D; }
body.mjeu-account .mjeu-order-head mark.status-pending { background: #F1EFE8; color: #5F5E5A; }
/* order-details section stays transparent (its items become cards) */
body.mjeu-account .woocommerce-order-details {
	margin-bottom: 16px;
}
/* billing details → card */
body.mjeu-account .woocommerce-customer-details {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	padding: 22px 24px;
}
body.mjeu-account .woocommerce-customer-details address {
	border: none;
	padding: 0;
	font-style: normal;
	color: var(--mjeu-ink);
	line-height: 1.7;
}
body.mjeu-account .woocommerce-customer-details .woocommerce-column__title {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0 0 12px;
	margin: 0 0 14px;
	border-bottom: 1px solid #EEF1F5;
	font-size: 16px;
	color: var(--mjeu-navy);
}
/* order items table → card layout */
body.mjeu-account table.order_details {
	display: block;
	border: none;
	margin: 0;
}
body.mjeu-account table.order_details thead {
	display: none;
}
body.mjeu-account table.order_details tbody {
	display: block;
}
body.mjeu-account table.order_details tbody tr.order_item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	padding: 18px 20px;
	margin-bottom: 14px;
}
body.mjeu-account table.order_details tbody tr.order_item td {
	display: block;
	border: none;
	padding: 0;
}
body.mjeu-account table.order_details td.product-name {
	flex: 1;
	min-width: 0;
}
body.mjeu-account table.order_details td.product-total {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
	color: var(--mjeu-navy) !important;
	font-weight: 600;
}
/* item card inner structure (rendered by order-details-item.php override)
 * Scoped to both mjeu-account (My Account → View Order) and mjeu-shop
 * (order-received / thank-you page) since both use the same template. */
body.mjeu-account .mjeu-oi-head,
body.mjeu-shop .mjeu-oi-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
body.mjeu-account .mjeu-oi-icon,
body.mjeu-shop .mjeu-oi-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #E6F1FB;
	color: var(--mjeu-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
body.mjeu-account .mjeu-oi-icon svg,
body.mjeu-shop .mjeu-oi-icon svg {
	width: 17px;
	height: 17px;
}
body.mjeu-account .mjeu-oi-name,
body.mjeu-shop .mjeu-oi-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--mjeu-navy);
}
body.mjeu-account .mjeu-oi-head .product-quantity,
body.mjeu-shop .mjeu-oi-head .product-quantity {
	color: var(--mjeu-muted);
	font-weight: 400;
	font-size: 13px;
}
body.mjeu-account .mjeu-oi-meta,
body.mjeu-shop .mjeu-oi-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--mjeu-muted);
}
body.mjeu-account .mjeu-oi-meta-item,
body.mjeu-shop .mjeu-oi-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
body.mjeu-account .mjeu-oi-meta-item svg,
body.mjeu-shop .mjeu-oi-meta-item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
/* Ticket block: one bordered wrapper holding one row per ticket type, so a
 * multi-ticket event (e.g. 1× Testing + 2× VIP) lists every type cleanly. */
body.mjeu-account .mjeu-oi-tickets,
body.mjeu-shop .mjeu-oi-tickets {
	border-top: 1px solid #EEF1F5;
	border-bottom: 1px solid #EEF1F5;
	margin: 14px 0;
	padding: 6px 0;
}
body.mjeu-account .mjeu-oi-ticket,
body.mjeu-shop .mjeu-oi-ticket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
}
body.mjeu-account .mjeu-oi-ticket-pill,
body.mjeu-shop .mjeu-oi-ticket-pill {
	display: inline-block;
	background: #E6F1FB;
	color: var(--mjeu-blue);
	font-size: 12px;
	font-weight: 500;
	padding: 3px 12px;
	border-radius: 999px;
}
body.mjeu-account .mjeu-oi-ticket-price,
body.mjeu-shop .mjeu-oi-ticket-price {
	font-size: 13px;
	color: var(--mjeu-muted);
	white-space: nowrap;
}
body.mjeu-account .mjeu-oi-reg-title,
body.mjeu-shop .mjeu-oi-reg-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--mjeu-blue);
	text-transform: uppercase;
	letter-spacing: .4px;
	margin: 0 0 12px;
}
body.mjeu-account .mjeu-oi-reg,
body.mjeu-shop .mjeu-oi-reg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 24px;
}
body.mjeu-account .mjeu-oi-flabel,
body.mjeu-shop .mjeu-oi-flabel {
	font-size: 11.5px;
	color: var(--mjeu-muted);
	margin-bottom: 2px;
}
body.mjeu-account .mjeu-oi-fvalue,
body.mjeu-shop .mjeu-oi-fvalue {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--mjeu-ink);
}
/* totals → summary card */
body.mjeu-account table.order_details tfoot {
	display: block;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
	padding: 6px 20px;
}
body.mjeu-account table.order_details tfoot tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px solid #EEF1F5;
}
body.mjeu-account table.order_details tfoot tr:first-child {
	border-top: none;
}
body.mjeu-account table.order_details tfoot th,
body.mjeu-account table.order_details tfoot td {
	border: none;
	padding: 0;
}
body.mjeu-account table.order_details tfoot th {
	font-weight: 400;
	color: var(--mjeu-muted);
	text-align: left;
}
body.mjeu-account table.order_details tfoot td {
	color: var(--mjeu-ink);
	text-align: right;
}
body.mjeu-account table.order_details tfoot tr:last-child th,
body.mjeu-account table.order_details tfoot tr:last-child td {
	font-weight: 600;
	color: var(--mjeu-navy);
	font-size: 16px;
}
/* hide the PDF-invoice plugin's separate "Actions" tfoot — once its Invoice /
 * E-Invoice row is removed it renders as an empty card. Replaced by the footer
 * bar below. Also hide WooCommerce's default standalone "Order again" (we render
 * it inside the footer bar so all three buttons share one equal-height row). */
body.mjeu-account table.order_details tfoot:has(.order-actions--heading) {
	display: none;
}
body.mjeu-account .woocommerce-order-details > p.order-again {
	display: none;
}

/* footer action bar: Order again (left) + Invoice / Tickets (right) */
body.mjeu-account .mjeu-order-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}
body.mjeu-account .mjeu-foot-again {
	margin-right: auto;
}
body.mjeu-account .mjeu-foot-right {
	display: inline-flex;
	gap: 10px;
}
body.mjeu-account .mjeu-foot-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--mjeu-blue);
	color: #fff;
	border: 1px solid var(--mjeu-blue);
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s ease;
}
body.mjeu-account .mjeu-foot-btn:hover {
	background: #134A82;
	border-color: #134A82;
}
body.mjeu-account .mjeu-foot-btn svg {
	width: 16px;
	height: 16px;
}

/* ---------- Addresses: round the billing/shipping boxes ----------
 * The box look came from the inner title header + <address> each carrying their
 * own square border. Make the outer .woocommerce-Address the rounded card and
 * strip the inner borders so it reads as one clean card. */
body.mjeu-account .woocommerce-Address {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 12px;
	overflow: hidden;
}
body.mjeu-account .woocommerce-Address-title.title {
	border: none;
	border-bottom: 1px solid #EEF1F5;
	border-radius: 0;
	background: #F8FAFC;
	padding: 12px 16px;
	margin: 0;
}
body.mjeu-account .woocommerce-Address-title.title h3 {
	margin: 0;
	font-size: 16px;
}
body.mjeu-account .woocommerce-Address address {
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 14px 16px;
}

/* ---------- Dashboard: two separate cards (welcome+tiles, then recent) ----------
 * The account content area is normally one white card, but the dashboard holds
 * two stacked cards. Flatten the content card only on the dashboard (detected by
 * the .mjeu-acc-dash marker) and turn the two inner blocks into cards. */
body.mjeu-account .woocommerce-MyAccount-content:has(.mjeu-acc-dash) {
	background: transparent !important; /* beat Astra's .woocommerce-MyAccount-content { background:#fff !important } */
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
body.mjeu-account .mjeu-acc-dash,
body.mjeu-account .mjeu-acc-recent {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 39, 71, 0.06);
}
body.mjeu-account .mjeu-acc-dash {
	padding: 24px 26px;
}
body.mjeu-account .mjeu-acc-recent {
	padding: 20px 26px;
	margin-top: 18px;
}
body.mjeu-account .mjeu-acc-recent-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 4px;
}
body.mjeu-account .mjeu-acc-recent-head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--mjeu-navy);
}
body.mjeu-account .mjeu-acc-recent-head a {
	font-size: 13px;
	color: var(--mjeu-blue);
}
body.mjeu-account .mjeu-rb-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #EEF1F5;
}
body.mjeu-account .mjeu-rb-row:last-child {
	border-bottom: none;
}
body.mjeu-account .mjeu-rb-info {
	min-width: 0;
}
body.mjeu-account .mjeu-rb-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mjeu-blue);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.mjeu-account .mjeu-rb-date {
	font-size: 12.5px;
	color: var(--mjeu-muted);
}
/* multiple events within one recent-booking row → separate with a thin rule */
body.mjeu-account .mjeu-rb-event + .mjeu-rb-event {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #EEF1F5;
}
body.mjeu-account .mjeu-rb-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
body.mjeu-account .mjeu-rb-ticket {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--mjeu-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 7px 12px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}
body.mjeu-account .mjeu-rb-ticket:hover {
	background: #134A82;
}
body.mjeu-account .mjeu-rb-ticket svg {
	width: 14px;
	height: 14px;
}
/* disabled ticket (booking not yet confirmed) → greyed outline, no link */
body.mjeu-account .mjeu-rb-ticket.is-disabled {
	background: #fff;
	color: #9CA3AF;
	border: 1px solid var(--mjeu-card-border);
	cursor: default;
}
body.mjeu-account .mjeu-rb-ticket.is-disabled:hover {
	background: #fff;
}
body.mjeu-account .mjeu-acc-empty {
	text-align: center;
	padding: 20px;
	color: var(--mjeu-muted);
}
body.mjeu-account .mjeu-acc-empty p {
	margin: 0 0 12px;
}

/* ===========================================================================
 * Knowledge Hub category archives (infocenter / allnews / highlights + children)
 * Bespoke card layout rendered by category.php + mjeu_khub_* (functions.php).
 * Scoped to body.mjeu-khub so no other page is affected.
 * =========================================================================== */
body.mjeu-khub {
	background-color: var(--mjeu-page) !important;
	color: var(--mjeu-ink);
}
body.mjeu-khub #content,
body.mjeu-khub .site-content,
body.mjeu-khub .ast-container {
	background: transparent !important;
}
/* The site has a custom inline snippet (".archive.category #primary") that turns
 * every category archive's #primary into a white, 70%-wide, padded, shadowed card
 * with !important. On hub pages we want the content to sit directly on the grey
 * page (only the individual cards are white), so override it with a stronger
 * selector. Keep some top/bottom breathing room of our own. */
body.mjeu-khub.archive #primary,
body.mjeu-khub.archive.category #primary {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	padding: 24px 0 50px !important;
}
/* Neutralise Astra's blog grid on #primary — we lay out our own wrappers. */
body.mjeu-khub #primary.ast-grid-3,
body.mjeu-khub #primary {
	display: block !important;
}
/* Hide any stray Astra archive banner / breadcrumb above our header. */
body.mjeu-khub .ast-archive-description,
body.mjeu-khub .ast-archive-entry-banner,
body.mjeu-khub .ast-breadcrumbs,
body.mjeu-khub nav.woocommerce-breadcrumb {
	display: none !important;
}
body.mjeu-khub,
body.mjeu-khub p,
body.mjeu-khub a,
body.mjeu-khub span,
body.mjeu-khub li,
body.mjeu-khub input,
body.mjeu-khub button {
	font-family: var(--mjeu-sans);
}
body.mjeu-khub .mjeu-khub-title,
body.mjeu-khub .mjeu-khub-pt,
body.mjeu-khub .mjeu-khub-sec h2,
body.mjeu-khub .mjeu-khub-ctitle,
body.mjeu-khub .mjeu-khub-wh {
	font-family: var(--mjeu-head);
}

/* ---- Page header ---- */
body.mjeu-khub .mjeu-khub-head {
	padding: 8px 0 4px;
}
body.mjeu-khub .mjeu-khub-title {
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: #0F172A;
	margin: 0;
}
body.mjeu-khub .mjeu-khub-rule {
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--mjeu-blue-bright);
	margin: 14px 0 0;
}
body.mjeu-khub-highlights .mjeu-khub-rule {
	background: #0F6E56;
}
body.mjeu-khub .mjeu-khub-sub {
	font-size: 15px;
	color: var(--mjeu-muted);
	line-height: 1.7;
	max-width: 640px;
	margin: 16px 0 0;
}

/* ---- Landing portal cards ---- */
body.mjeu-khub .mjeu-khub-portals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 26px 0 0;
}
body.mjeu-khub .mjeu-khub-portal {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.mjeu-khub .mjeu-khub-portal:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(14, 39, 71, 0.13);
}
body.mjeu-khub .mjeu-khub-pic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
}
body.mjeu-khub .mjeu-khub-pic svg { width: 26px; height: 26px; }
body.mjeu-khub .is-news .mjeu-khub-pic { background: #E6F1FB; color: var(--mjeu-blue); }
body.mjeu-khub .is-hl .mjeu-khub-pic { background: #E1F5EE; color: #0F6E56; }
body.mjeu-khub .mjeu-khub-pt {
	display: block;
	font-size: 19px;
	font-weight: 600;
	color: var(--mjeu-navy);
}
body.mjeu-khub .mjeu-khub-pd {
	display: block;
	flex: 1;
	font-size: 14px;
	color: var(--mjeu-muted);
	line-height: 1.65;
	margin: 9px 0 0;
}
body.mjeu-khub .mjeu-khub-pf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 18px 0 0;
}
body.mjeu-khub .mjeu-khub-count {
	font-size: 13px;
	font-weight: 500;
	border-radius: 20px;
	padding: 4px 13px;
}
body.mjeu-khub .is-news .mjeu-khub-count { color: var(--mjeu-blue); background: #E6F1FB; }
body.mjeu-khub .is-hl .mjeu-khub-count { color: #0F6E56; background: #E1F5EE; }
body.mjeu-khub .mjeu-khub-go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
}
body.mjeu-khub .is-news .mjeu-khub-go { color: var(--mjeu-blue); }
body.mjeu-khub .is-hl .mjeu-khub-go { color: #0F6E56; }
body.mjeu-khub .mjeu-khub-go svg { width: 16px; height: 16px; }

/* ---- "最新文章" section heading ---- */
body.mjeu-khub .mjeu-khub-sec {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 42px 0 0;
}
body.mjeu-khub .mjeu-khub-sec h2 {
	font-size: 22px;
	font-weight: 600;
	color: #0F172A;
	margin: 0;
}
body.mjeu-khub .mjeu-khub-sec .ln {
	flex: 1;
	height: 1px;
	background: var(--mjeu-card-border);
}

/* ---- Filter chips ---- */
body.mjeu-khub .mjeu-khub-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}
body.mjeu-khub .mjeu-khub-chip {
	font-size: 13px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 22px;
	border: 1px solid var(--mjeu-card-border);
	background: #fff;
	color: #374151;
	text-decoration: none;
	transition: all 0.15s ease;
}
body.mjeu-khub .mjeu-khub-chip:hover {
	border-color: var(--mjeu-blue);
	color: var(--mjeu-blue);
}
body.mjeu-khub .mjeu-khub-chip.on {
	background: var(--mjeu-navy);
	border-color: var(--mjeu-navy);
	color: #fff;
}
body.mjeu-khub-highlights .mjeu-khub-chip:hover {
	border-color: #0F6E56;
	color: #0F6E56;
}
body.mjeu-khub-highlights .mjeu-khub-chip.on {
	background: #0F6E56;
	border-color: #0F6E56;
}

/* ---- Card grid (landing + highlights) ---- */
body.mjeu-khub .mjeu-khub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 24px;
	margin: 22px 0 0;
}
body.mjeu-khub .mjeu-khub-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.mjeu-khub .mjeu-khub-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(14, 39, 71, 0.13);
}
body.mjeu-khub .mjeu-khub-thumb {
	position: relative;
	display: block;
	height: 168px;
	overflow: hidden;
}
body.mjeu-khub .mjeu-khub-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.mjeu-khub .mjeu-khub-pill {
	position: absolute;
	left: 12px;
	bottom: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: rgba(14, 39, 71, 0.82);
	border-radius: 20px;
	padding: 4px 11px;
}
body.mjeu-khub .mjeu-khub-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}
body.mjeu-khub .mjeu-khub-date {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #9CA3AF;
	margin: 0 0 8px;
}
body.mjeu-khub .mjeu-khub-date svg { width: 14px; height: 14px; }
body.mjeu-khub .mjeu-khub-ctitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}
body.mjeu-khub .mjeu-khub-ctitle a {
	color: var(--mjeu-ink);
	text-decoration: none;
}
body.mjeu-khub .mjeu-khub-ctitle a:hover { color: var(--mjeu-blue); }
body.mjeu-khub-highlights .mjeu-khub-ctitle a:hover { color: #0F6E56; }
body.mjeu-khub .mjeu-khub-ex {
	font-size: 13.5px;
	color: var(--mjeu-muted);
	line-height: 1.6;
	margin: 9px 0 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.mjeu-khub .mjeu-khub-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mjeu-blue);
	text-decoration: none;
	margin: 14px 0 0;
}
body.mjeu-khub .mjeu-khub-more svg { width: 15px; height: 15px; }
body.mjeu-khub-highlights .mjeu-khub-more { color: #0F6E56; }

/* ---- News: list cards + filter sidebar ---- */
body.mjeu-khub .mjeu-khub-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 30px;
	margin: 22px 0 0;
	align-items: start;
}
body.mjeu-khub .mjeu-khub-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
body.mjeu-khub .mjeu-khub-row {
	display: flex;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 16px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.mjeu-khub .mjeu-khub-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(14, 39, 71, 0.13);
}
body.mjeu-khub .mjeu-khub-rthumb {
	position: relative;
	flex: 0 0 156px;
	height: 116px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}
body.mjeu-khub .mjeu-khub-rthumb .mjeu-khub-pill {
	left: 8px;
	bottom: 8px;
	font-size: 11px;
	padding: 3px 9px;
}
body.mjeu-khub .mjeu-khub-rbody {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
body.mjeu-khub .mjeu-khub-row .mjeu-khub-ctitle { font-size: 17px; }
body.mjeu-khub .mjeu-khub-row .mjeu-khub-ex {
	-webkit-line-clamp: 3;
	font-size: 14px;
}
body.mjeu-khub .mjeu-khub-row .mjeu-khub-more { margin-top: 12px; }

/* ---- News filter sidebar widgets ---- */
body.mjeu-khub .mjeu-khub-aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 100px;
}
body.mjeu-khub .mjeu-khub-widget {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 18px;
}
body.mjeu-khub .mjeu-khub-wh {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mjeu-navy);
	margin: 0 0 14px;
}
body.mjeu-khub .mjeu-khub-wh svg { width: 17px; height: 17px; color: var(--mjeu-blue); }
body.mjeu-khub .mjeu-khub-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--mjeu-page);
	border: 1px solid var(--mjeu-card-border);
	border-radius: 9px;
	padding: 4px 6px 4px 12px;
}
body.mjeu-khub .mjeu-khub-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-size: 13px;
	color: var(--mjeu-ink);
	outline: none;
	padding: 6px 0;
}
body.mjeu-khub .mjeu-khub-search button {
	flex: 0 0 auto;
	border: none;
	background: var(--mjeu-blue);
	color: #fff;
	border-radius: 7px;
	height: 34px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
body.mjeu-khub .mjeu-khub-search button:hover { background: var(--mjeu-blue-bright); }
body.mjeu-khub .mjeu-khub-filt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	color: #374151;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.12s ease;
}
body.mjeu-khub .mjeu-khub-filt:hover { background: var(--mjeu-page); }
body.mjeu-khub .mjeu-khub-filt .n { font-size: 12px; color: #9CA3AF; }
body.mjeu-khub .mjeu-khub-filt.on {
	background: #E6F1FB;
	color: var(--mjeu-blue);
	font-weight: 600;
}
body.mjeu-khub .mjeu-khub-filt.on .n { color: var(--mjeu-blue); }
body.mjeu-khub .mjeu-khub-arch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.mjeu-khub .mjeu-khub-arch a {
	font-size: 12.5px;
	color: #374151;
	background: var(--mjeu-page);
	border: 1px solid var(--mjeu-card-border);
	border-radius: 7px;
	padding: 6px 10px;
	text-decoration: none;
	transition: all 0.12s ease;
}
body.mjeu-khub .mjeu-khub-arch a:hover {
	border-color: var(--mjeu-blue);
	color: var(--mjeu-blue);
}
body.mjeu-khub .mjeu-khub-arch a.on {
	background: var(--mjeu-blue);
	border-color: var(--mjeu-blue);
	color: #fff;
}
body.mjeu-khub .mjeu-khub-empty {
	color: var(--mjeu-muted);
	padding: 30px 0;
}

/* ---- Pagination ---- */
body.mjeu-khub .ast-pagination {
	margin: 34px 0 6px;
}
body.mjeu-khub .ast-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 11px;
	margin: 0 4px 8px;
	border-radius: 9px;
	border: 1px solid var(--mjeu-card-border);
	background: #fff;
	color: #374151;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.12s ease;
}
body.mjeu-khub .ast-pagination .page-numbers:hover {
	border-color: var(--mjeu-blue);
	color: var(--mjeu-blue);
}
body.mjeu-khub .ast-pagination .page-numbers.current {
	background: var(--mjeu-blue);
	border-color: var(--mjeu-blue);
	color: #fff;
}
body.mjeu-khub-highlights .ast-pagination .page-numbers.current {
	background: #0F6E56;
	border-color: #0F6E56;
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
	body.mjeu-khub .mjeu-khub-split { grid-template-columns: 1fr; }
	body.mjeu-khub .mjeu-khub-aside { position: static; }
}
@media (max-width: 600px) {
	body.mjeu-khub .mjeu-khub-portals { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	body.mjeu-khub .mjeu-khub-row { flex-direction: column; }
	body.mjeu-khub .mjeu-khub-rthumb { flex-basis: auto; width: 100%; height: 160px; }
}

/* ===========================================================================
 * Knowledge Hub single article pages (rendered by single.php + mjeu_article_*)
 * Reuses the hub's card / sidebar styling (body also carries .mjeu-khub) and
 * adds the article-specific header, hero, reading typography and author box.
 * =========================================================================== */
body.mjeu-article {
	background-color: var(--mjeu-page) !important;
}
/* Beat the site's custom ".single-post #primary" white-card snippet so the
 * article sits on the grey page (only the cards are white). */
body.mjeu-article.single #primary {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	padding: 24px 0 50px !important;
}

/* ---- Article header ---- */
body.mjeu-article .mjeu-article-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: var(--mjeu-blue);
	border-radius: 20px;
	padding: 5px 14px;
	text-decoration: none;
}
body.mjeu-article-highlights .mjeu-article-cat { background: #0F6E56; }
body.mjeu-article .mjeu-article-title {
	font-family: var(--mjeu-head);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #0F172A;
	margin: 14px 0 0;
}
body.mjeu-article-highlights .mjeu-khub-rule { background: #0F6E56; }
body.mjeu-article .mjeu-article-meta {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
	margin: 18px 0 0;
}
body.mjeu-article .mjeu-article-av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mjeu-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	flex: 0 0 auto;
}
body.mjeu-article .mjeu-article-byline b { font-size: 13.5px; font-weight: 600; color: #1F2A37; }
body.mjeu-article .mjeu-article-mtxt { font-size: 13px; color: var(--mjeu-muted); }
body.mjeu-article .mjeu-article-dot { color: #C4C9D0; }

/* ---- Two-column split (article + sidebar) ---- */
body.mjeu-article .mjeu-article-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 30px;
	align-items: start;
	margin: 22px 0 0;
}
body.mjeu-article .mjeu-article-main { min-width: 0; }

/* ---- Hero image ---- */
body.mjeu-article .mjeu-article-hero {
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.08);
}
body.mjeu-article .mjeu-article-hero img { width: 100%; height: auto; display: block; }
body.mjeu-article .mjeu-article-hero-grad { height: 240px; }

/* ---- Article card + reading typography ---- */
body.mjeu-article .mjeu-article-card {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 30px 34px;
	margin: 18px 0 0;
}
body.mjeu-article .mjeu-article-body {
	font-size: 15px;
	line-height: 1.9;
	color: #374151;
}
body.mjeu-article .mjeu-article-body p { margin: 0 0 16px; }
body.mjeu-article .mjeu-article-body h2 {
	font-family: var(--mjeu-head);
	font-size: 21px;
	font-weight: 600;
	color: var(--mjeu-navy);
	line-height: 1.4;
	margin: 30px 0 14px;
	padding-left: 14px;
	border-left: 4px solid var(--mjeu-blue-bright);
}
body.mjeu-article-highlights .mjeu-article-body h2 { border-left-color: #0F6E56; }
body.mjeu-article .mjeu-article-body h3 {
	font-family: var(--mjeu-head);
	font-size: 17px;
	font-weight: 600;
	color: var(--mjeu-blue);
	margin: 24px 0 10px;
}
body.mjeu-article-highlights .mjeu-article-body h3 { color: #0F6E56; }
body.mjeu-article .mjeu-article-body h4 {
	font-family: var(--mjeu-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--mjeu-ink);
	margin: 20px 0 8px;
}
body.mjeu-article .mjeu-article-body a {
	color: var(--mjeu-blue);
	text-decoration: underline;
	word-break: break-word;
}
body.mjeu-article-highlights .mjeu-article-body a { color: #0F6E56; }
body.mjeu-article .mjeu-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}
body.mjeu-article .mjeu-article-body figure { margin: 20px 0; }
body.mjeu-article .mjeu-article-body figcaption {
	font-size: 12.5px;
	color: var(--mjeu-muted);
	margin-top: 8px;
	text-align: center;
}
body.mjeu-article .mjeu-article-body ul,
body.mjeu-article .mjeu-article-body ol { margin: 0 0 16px; padding-left: 24px; }
body.mjeu-article .mjeu-article-body li { margin: 0 0 8px; line-height: 1.8; }
body.mjeu-article .mjeu-article-body blockquote {
	margin: 20px 0;
	padding: 12px 18px;
	border-left: 4px solid var(--mjeu-blue-bright);
	background: #F8FAFC;
	color: #374151;
	border-radius: 0 8px 8px 0;
}
body.mjeu-article .mjeu-article-body strong { color: #1F2A37; font-weight: 600; }

/* ---- Author box ---- */
body.mjeu-article .mjeu-article-author {
	display: flex;
	gap: 14px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 18px 20px;
	margin: 20px 0 0;
}
body.mjeu-article .mjeu-article-av.lg { width: 48px; height: 48px; font-size: 15px; }
body.mjeu-article .mjeu-article-author .nm { font-size: 14px; font-weight: 600; color: var(--mjeu-navy); }
body.mjeu-article .mjeu-article-author .bio {
	font-size: 12.5px;
	color: var(--mjeu-muted);
	margin: 4px 0 0;
	line-height: 1.6;
}

/* ---- Related (reuses .mjeu-khub-grid / .mjeu-khub-card), tighter columns ---- */
body.mjeu-article .mjeu-article-rel {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
	body.mjeu-article .mjeu-article-split { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * Events list pages (Events / Upcoming / Past — any page with [event-list])
 * Aligns the page chrome with the new UI: neutral grey background + a branded
 * page title with the blue underline accent. The mage event cards/grid are
 * intentionally left untouched. Scoped to body.mjeu-events.
 * =========================================================================== */
body.mjeu-events {
	background-color: var(--mjeu-page) !important;
	color: var(--mjeu-ink);
}
body.mjeu-events #content,
body.mjeu-events .site-content,
body.mjeu-events #primary,
body.mjeu-events .ast-container {
	background: transparent !important;
}
/* Drop Astra's separate-container white content box so the title + event grid
 * sit directly on the grey page (like the Post Highlights page). The event cards
 * keep their own white background. */
body.mjeu-events .ast-article-single,
body.mjeu-events .ast-article-post {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	/* 52px left indent so the title + first event line up at the same left edge
	 * (container 20px + 52px = x≈72), matching the event grid's original inset. */
	padding: 24px 0 50px 52px !important;
}
/* Halve the whitespace above the title (Astra puts a 64px margin on #primary). */
body.mjeu-events #primary {
	margin-top: 20px !important;
}
/* Drop the plugin's own left margin on the grid so it aligns with the title
 * (both now share the article's 52px indent above). */
body.mjeu-events .mep_event_list {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
@media (max-width: 600px) {
	body.mjeu-events .ast-article-single,
	body.mjeu-events .ast-article-post {
		padding-left: 0 !important;
	}
}
/* Page title → same treatment as the Knowledge Hub headers. */
body.mjeu-events .entry-title {
	font-family: var(--mjeu-head);
	font-size: clamp(30px, 3.2vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #0F172A;
}
body.mjeu-events .entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--mjeu-blue-bright);
	margin: 14px 0 0;
}

/* ===========================================================================
 * Single event page (mage mep_events) — drop the big white wrapper box and put
 * the saturated light-blue page on the neutral grey. Inner ticket/detail cards
 * keep their own white background. Scoped to body.mjeu-event-single.
 * =========================================================================== */
body.mjeu-event-single {
	background-color: var(--mjeu-page) !important;
	color: var(--mjeu-ink);
}
body.mjeu-event-single .mpwem_wrapper,
body.mjeu-event-single .mep-events-wrapper {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* ---- Event date badge: two clean full-width colour bands — top #FFBE30,
 * bottom #C32020 — like the 2025 design. The plugin gives the badge inner
 * padding, which made the bottom colour show as an inset rounded box with the
 * top colour leaking around it. Zero the padding/margins/inner radius so each
 * half fills the full badge width as a band, clipped to the badge's rounded
 * corners. The .mep-ev-start-date class is mage-specific so this stays unscoped
 * (applies on every event list + the home Upcoming widget). ---- */
.mep-ev-start-date {
	width: 52px !important;
	padding: 0 !important;
	overflow: hidden !important;
}
.mep-ev-start-date > * {
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	padding: 5px 4px !important;
	box-sizing: border-box !important;
	text-align: center !important;
}
.mep-ev-start-date > *:first-child { background: #FFBE30 !important; color: #fff !important; }
.mep-ev-start-date > *:last-child  { background: #C32020 !important; color: #fff !important; }
/* Enlarge the month line (plugin default 14px). */
.mep-ev-start-date .mep-month { font-size: 18px !important; }

/* ---- Single event page: inline Google Map in the right column ----
 * The child-theme default-theme.php override (mage-event/themes/) renders the
 * map inline via mpwem_map instead of only inside the "Find In Map" popup. Size
 * the iframe and drop the now-redundant popup button + the duplicate heading. */
body.mjeu-event-single #mpwem_map_area { display: block; margin: 0 0 14px; }
/* "Event Location" heading on the map card → same golden band as Speaker etc.,
 * bled to the card edges, with a location-pin glyph before it. */
body.mjeu-event-single #mpwem_map_area .map_title::before {
	content: "\f3c5";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
}
body.mjeu-event-single #mpwem_map_area .map_section { display: block; line-height: 0; }
body.mjeu-event-single #mpwem_map_area .map_section iframe {
	width: 100% !important;
	height: 240px !important;
	border: 0;
	border-radius: 8px;
	display: block;
}
body.mjeu-event-single .mep-default-sidebar .mpwem_location_sidebar > h5.widgets_title { display: none; }
body.mjeu-event-single .mep-default-sidebar .mpwem_location_sidebar button[data-target-popup],
body.mjeu-event-single .mep-default-sidebar .mpPopup { display: none !important; }

/* ---- Single event page content polish (cards + fonts) ---- */
/* Keep the whole event content on the site fonts via inheritance on the wrapper
 * only — do NOT set font-family on span/i, or the mi-/fa- icon webfonts break
 * (they keep their own font-family and render as glyphs). */
body.mjeu-event-single .mep-events-wrapper {
	font-family: var(--mjeu-sans);
}
body.mjeu-event-single .mep-events-wrapper h1,
body.mjeu-event-single .mep-events-wrapper h2,
body.mjeu-event-single .mep-events-wrapper h3,
body.mjeu-event-single .mep-events-wrapper h4,
body.mjeu-event-single .mep-events-wrapper h5,
body.mjeu-event-single .mep-events-wrapper h6 {
	font-family: var(--mjeu-head);
}

/* Event Date / Event Location → white cards, two equal columns so the location
 * lines up with the right half of the banner above. */
body.mjeu-event-single .date_time_location_short {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 18px 0 0;
}
body.mjeu-event-single .date_time_location_short .short_item {
	background: #fff !important;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 16px 18px;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	body.mjeu-event-single .date_time_location_short { grid-template-columns: 1fr; }
}

/* Event Description → white rounded card. */
body.mjeu-event-single .mpwem_details {
	background: #fff;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 24px 28px;
	margin: 20px 0 0;
}

/* Sidebar: each group in its own white card. */
body.mjeu-event-single .mjeu-side-card {
	background: #fff !important;
	border: 1px solid var(--mjeu-card-border);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(14, 39, 71, 0.06);
	padding: 18px;
	margin: 0 0 18px;
}
/* Neutralise the plugin's own boxes/spacing inside the cards. */
body.mjeu-event-single .mjeu-side-card .mpwem_location_sidebar,
body.mjeu-event-single .mjeu-side-card .share_widgets,
body.mjeu-event-single .mjeu-side-card .mpwem_organizer {
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* The plugin makes #mpwem_map_area its own white rounded box with overflow:hidden
 * and a top margin — that clipped the heading band and pushed it down. Neutralise
 * it so the golden "Event Location" band can bleed to the card edges like Speaker. */
body.mjeu-event-single .mjeu-side-card #mpwem_map_area {
	margin: 0 0 24px !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}
body.mjeu-event-single .mjeu-side-card #mpwem_map_area .map_section { padding: 0 !important; }
/* Share card: space the "Add Calendar" block below the share links. */
body.mjeu-event-single .mjeu-side-share .mpwem_calender_area {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 16px 0 0 !important;
}
/* The plugin makes .df-sidebar-part itself a white card; with our inner cards
 * that left an empty white box below the last card. Strip the outer card so only
 * the inner .mjeu-side-card boxes show. */
body.mjeu-event-single .df-sidebar-part {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Sidebar card headings — "Event Location", "Organized By:", "Speaker",
 * "Share This Event" all share one golden band with identical typography,
 * left-aligned, bleeding to the card edges. */
body.mjeu-event-single #mpwem_map_area .map_title,
body.mjeu-event-single .mjeu-side-organizer h5,
body.mjeu-event-single .event_speaker_list_area h5,
body.mjeu-event-single .mjeu-side-share .share_widgets_title {
	background: #FFBE30 !important;
	color: #fff !important;
	margin: -18px -18px 14px !important;
	padding: 12px 18px !important;
	border-radius: 14px 14px 0 0 !important;
	text-align: left !important;
	display: block !important;
	font-family: var(--mjeu-head) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
}
body.mjeu-event-single .mjeu-side-organizer h5 [class*="mi-"],
body.mjeu-event-single .mjeu-side-organizer h5 [class*="fa-"],
body.mjeu-event-single .event_speaker_list_area h5 [class*="mi-"],
body.mjeu-event-single .event_speaker_list_area h5 [class*="fa-"] { color: #fff !important; }
body.mjeu-event-single .mjeu-side-organizer .mpwem_organizer_item,
body.mjeu-event-single .mjeu-side-organizer .mpwem_organizer_item a,
body.mjeu-event-single .mjeu-side-organizer a { color: var(--mjeu-ink) !important; }

/* The "Share This Event" heading has no icon of its own — add a share glyph
 * before the text so it matches the icon-led headings above it. */
body.mjeu-event-single .mjeu-side-share .share_widgets_title::before {
	content: "\f1e0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
}

/* Speaker card: circular photos, and spread the two columns to the card edges so
 * the right photo's right margin matches the left photo's left margin. */
body.mjeu-event-single .event_speaker_list_area .speaker_list {
	justify-content: space-between;
	row-gap: 16px;
}
body.mjeu-event-single .event_speaker_list_area .speaker_list a {
	width: 48% !important;
	max-width: none !important;
	padding: 0 !important;
}
body.mjeu-event-single .event_speaker_list_area .speaker_list img {
	width: 104px !important;
	height: 104px !important;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
}

/* Event Location card: venue name on its own line (bold), address below it. */
body.mjeu-event-single .mjeu-loc-venue { margin: 0 0 10px; font-weight: 700; }
body.mjeu-event-single .mjeu-loc-addr { margin: 0; }
/* Event Date / Time box: the time line sits just under the date, same styling. */
body.mjeu-event-single .short_item .mjeu-date-time { margin: 4px 0 0; }
/* In the sidebar card, prefix each line with an amber circle-arrow glyph (2025
 * design). Use flex so the glyph top-aligns with the first line of text — for the
 * two-line address the glyph stays put while the text wraps beside it. */
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-venue,
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-addr {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-venue::before,
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-addr::before {
	content: "\f0a9";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #FFBE30;
	font-size: 16px;
	line-height: 1.5;
	flex: 0 0 auto;
}

/* Unify the body text across the three info cards (location / organizer / speaker)
 * to one size + typeface. The venue name stays bold; everything else is regular. */
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-venue,
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-addr,
body.mjeu-event-single .mjeu-side-organizer .mpwem_organizer_item,
body.mjeu-event-single .mjeu-side-organizer .mpwem_organizer_item a,
body.mjeu-event-single .event_speaker_list_area .speaker_list a h6 {
	font-family: var(--mjeu-sans) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: var(--mjeu-ink) !important;
}
body.mjeu-event-single .mpwem_location_sidebar .mjeu-loc-venue {
	font-weight: 700 !important;
}

/* Drop the "Event Description" heading — show the description text directly. */
body.mjeu-event-single .mpwem_details > h2 { display: none !important; }

/* Section headings "Event Timelines" + "Frequently asked questions" → match the
 * "Ticket Options" golden band: amber bg, white text, rounded top, left-aligned. */
body.mjeu-event-single .mpwem_timeline_area > h3,
body.mjeu-event-single .faq_area > h2 {
	background: #FFBE30 !important;
	color: #fff !important;
	padding: 14px 25px !important;
	margin: 0 !important;
	border-radius: 12px 12px 0 0 !important;
	font-family: var(--mjeu-head) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	text-align: left !important;
	text-transform: none !important;
}
/* Attach the first timeline card under the band (drop its top margin). */
body.mjeu-event-single .mpwem_timeline_area .timeline_area .timeline_item:first-child {
	margin-top: 0 !important;
}
/* Timeline time pill: the plugin colours the text with the theme colour on a
 * same-colour pill, so it was invisible — force white text. */
body.mjeu-event-single .mpwem_timeline_area .timeline_time { color: #fff !important; }

/* "Ticket Options" band text was lighter/thinner than the other two headings —
 * match it to the same typeface/size/weight (the amber band comes from plugin). */
body.mjeu-event-single .mpwem_registration_area .date-time-header .ticket-title {
	font-family: var(--mjeu-head) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #fff !important;
}

/* Give the "Event Timelines" panel the same amber band header as the "Ticket
 * Options" panel (.date-time-header), so the two sections match. The band
 * colour comes from the plugin theme var, exactly like Ticket Options. */
body.mjeu-event-single .mpwem_timeline_area .timeline_section_header {
	background: var(--color_theme) !important;
	border-radius: 12px 12px 0 0;
	padding: 12px 25px;
	margin: 0 0 24px;
}
body.mjeu-event-single .mpwem_timeline_area .timeline_section_header h2 {
	margin: 0 !important;
	color: #fff !important;
	font-family: var(--mjeu-head) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
}

/* FAQ: bold the questions and prefix "Q:" / "A:" so question vs answer is clear. */
body.mjeu-event-single .faq_area .item .title h3 { font-weight: 700 !important; }
body.mjeu-event-single .faq_area .item .title h3::before {
	content: "Q: ";
	font-weight: 700;
}
body.mjeu-event-single .faq_area .item .content p:first-child::before {
	content: "A: ";
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Single event page — phone readability. The plugin already stacks the main
 * column + sidebar below 767px, but inside that column the text is tiny (14px
 * base), the wrapper + inner cards double up their padding so the reading
 * column is thin, and pasted description media/headings don't scale. Everything
 * here is wrapped in @media (max-width: 782px) and scoped to
 * body.mjeu-event-single, so desktop/tablet above the breakpoint are untouched.
 * ------------------------------------------------------------------------- */
@media (max-width: 782px) {
	/* ROOT CAUSE of the "whole page shifted left / title clipped both sides":
	 * .content_area is display:flex, and flex items default to min-width:auto,
	 * which refuses to shrink below the child's intrinsic (min-content) width.
	 * A wide child (poster, long title word, share row) therefore forces the
	 * main/side columns — and the .default_theme/.content_area/title block — wider
	 * than the phone, and .mep-events-wrapper's `margin:auto` then centres the
	 * over-wide block so BOTH edges get clipped. Letting the flex chain shrink to
	 * the viewport (min-width:0 + max-width:100%) fixes the overflow at source. */
	body.mjeu-event-single .mep-events-wrapper,
	body.mjeu-event-single .mpwem_container,
	body.mjeu-event-single .default_theme,
	body.mjeu-event-single .content_area,
	body.mjeu-event-single .mep-default-content,
	body.mjeu-event-single .mep-default-sidebar {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	/* EMPTY-SPACE-ON-THE-RIGHT fix: .mpwem_container and .content_area are
	 * display:flex, and their single mobile child sizes to its content rather
	 * than growing — so on a viewport wider than the content (e.g. 430px) the
	 * column stays ~390px and leaves a dead strip on the right. With the sidebar
	 * hidden there's no reason to keep the flex row; drop to block + full width
	 * so the content always fills the screen. */
	body.mjeu-event-single .mpwem_container,
	body.mjeu-event-single .content_area {
		display: block !important;
	}
	body.mjeu-event-single .default_theme,
	body.mjeu-event-single .content_area,
	body.mjeu-event-single .mep-default-content {
		width: 100% !important;
	}
	/* TIMELINE fix: the plugin only switches the timeline to its stacked,
	 * word-wrapping mobile layout below 420px, so phones in the 421–767 range
	 * (iPhone Pro Max is 430px) get the desktop nowrap/clip-path labels and the
	 * text is truncated/cut. Replicate the plugin's own <=420 timeline rules up
	 * to our 782px breakpoint. */
	body.mjeu-event-single .timeline_item .timeline_header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 5px !important;
	}
	body.mjeu-event-single .timeline_item .timeline_tag {
		clip-path: none !important;
		border-radius: 6px !important;
		padding: 7px 13px !important;
	}
	body.mjeu-event-single .timeline_item .tl_title {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		max-width: none !important;
	}
	/* Final safety net: never let this page scroll sideways, whatever a pasted
	 * embed might do. overflow-x on body alone can be ignored when the root
	 * element is the scroll container, so also clip at Astra's #page wrapper
	 * (which holds header + content + footer) — this catches any header/footer
	 * spill too, not just the article. The fixed WP admin bar lives outside #page
	 * so it's untouched (it only shows for logged-in users anyway). */
	body.mjeu-event-single {
		overflow-x: hidden;
	}
	body.mjeu-event-single #page {
		overflow-x: clip;
	}
	/* Hide the desktop right sidebar on phones — the Google map, "Organized by",
	 * speaker and "Share this event" cards are secondary on mobile and made the
	 * page long/cramped. Requested removal for the mobile view only. */
	body.mjeu-event-single .mep-default-sidebar {
		display: none !important;
	}
	/* Defensive: keep the mobile header (logo + MENU) within the viewport so the
	 * MENU button can't be pushed off the right edge. */
	body.mjeu-event-single #ast-mobile-header .ast-builder-grid-row,
	body.mjeu-event-single #ast-mobile-header .site-header-primary-section-left,
	body.mjeu-event-single #ast-mobile-header .site-header-primary-section-right {
		min-width: 0 !important;
	}
	body.mjeu-event-single #ast-mobile-header .site-branding img.custom-logo {
		max-width: 55vw !important;
		height: auto !important;
	}
	/* Comfortable side gutter so text isn't jammed against the screen edge. */
	body.mjeu-event-single .mep-events-wrapper {
		padding: 18px !important;
		font-size: 16px;
	}
	/* Safety: no single child (share-icons row, embedded map, long unbroken
	 * string) should force the row wider than the screen. */
	body.mjeu-event-single .share_widgets,
	body.mjeu-event-single .share_widgets ul,
	body.mjeu-event-single .share_widgets_list,
	body.mjeu-event-single .mpwem_calender_area,
	body.mjeu-event-single .speaker_list {
		flex-wrap: wrap !important;
		max-width: 100% !important;
	}
	/* Bigger, looser body text for the description (the main block of prose). */
	body.mjeu-event-single .mpwem_details,
	body.mjeu-event-single .mpwem_details_content,
	body.mjeu-event-single .mpwem_details_content p,
	body.mjeu-event-single .mpwem_details_content li {
		font-size: 16px !important;
		line-height: 1.7 !important;
	}
	/* Trim the inner card padding so the prose isn't squeezed into a thin strip. */
	body.mjeu-event-single .mpwem_details {
		padding: 16px !important;
	}
	body.mjeu-event-single .date_time_location_short .short_item {
		padding: 14px !important;
	}
	/* Event title: the plugin leaves it at the theme's full desktop h1 size
	 * (~48-60px), which eats several lines on a phone. Cap it with a fluid size
	 * that scales with the viewport and wrap long words instead of overflowing. */
	body.mjeu-event-single .mpwem_tile {
		font-size: clamp(22px, 6.5vw, 30px) !important;
		line-height: 1.2 !important;
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}
	/* Any media pasted into the description (poster images, embedded maps or
	 * video) must not overflow the reading column. */
	body.mjeu-event-single .mpwem_details_content img,
	body.mjeu-event-single .post_thumb img,
	body.mjeu-event-single .mpwem_details_content iframe {
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}
	body.mjeu-event-single .mpwem_details_content iframe {
		width: 100% !important;
	}
	/* Poster image: round it to match the card system, and centre it. */
	body.mjeu-event-single .post_thumb img {
		border-radius: 12px;
		margin: 0 auto;
	}
	/* Golden section bands ("Ticket Options" / "Event Timelines" / FAQ) — trim
	 * their padding + size so they don't dominate the narrow view. */
	body.mjeu-event-single .mpwem_timeline_area > h3,
	body.mjeu-event-single .faq_area > h2,
	body.mjeu-event-single .mpwem_registration_area .date-time-header .ticket-title {
		font-size: 16px !important;
		padding: 12px 16px !important;
	}
	/* Ticket rows: give each ticket its own full-width row so the name, price
	 * and quantity picker aren't crammed into a half-width column. */
	body.mjeu-event-single .mpwem_registration_area .date-time-area,
	body.mjeu-event-single .mpwem_registration_area div.column_style,
	body.mjeu-event-single .mpwem_registration_area div.two_column,
	body.mjeu-event-single .mpwem_registration_area div.three_column,
	body.mjeu-event-single .mpwem_registration_area div.four_column {
		width: 100% !important;
		min-width: 100% !important;
		margin-right: 0 !important;
	}
}

/* ===========================================================================
 * Home page (front page) — Upcoming Events section.
 * The white box uses a 30px solid light-blue border (--ast-global-color-4
 * #E7F6FF) as its frame. Recolour that frame to the site grey and round the
 * card; round the inner event cards to match the rest of the site. Scoped to
 * body.home so nothing else is affected.
 * =========================================================================== */
/* The 30px frame is a *border*, so its radius rounds the grey outer edge — which
 * the user wants left square. Instead keep the outer block as a square grey frame
 * (grey border + grey fill) and move the white background + rounding onto the
 * inner wrap, so the white box itself shows clearly rounded corners with grey
 * revealed behind them. */
body.home .uagb-block-4e5b41fa {
	border-color: var(--mjeu-page) !important;     /* light blue #E7F6FF -> grey */
	border-radius: 0 !important;                   /* grey frame stays square */
	background-color: var(--mjeu-page) !important; /* grey behind the rounded corners */
	padding: 0 !important;
}
body.home .uagb-block-4e5b41fa > .uagb-container-inner-blocks-wrap {
	background: #fff !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	/* The white wrap is capped at 1140px by default, which shrank the box. Let it
	 * fill the full width inside the grey frame — the event list inside keeps its
	 * own 1200px-centred width, so the cards stay their original size. */
	max-width: 100% !important;
	width: 100% !important;
	padding: 20px 0 10px !important;               /* halved top gap above the heading */
}
/* "Upcoming Events" heading sat 50px below the box top (block padding-top) plus
 * the wrap padding — halve the heading's own top padding to tighten that gap. */
body.home .uagb-block-ed3416f6.wp-block-uagb-advanced-heading {
	padding-top: 25px !important;
}
/* Inner event cards: rounded corners (clip the thumbnail too). */
body.home .mage_grid_box {
	border-radius: 16px !important;
	overflow: hidden !important;
}
/* Phones: the excerpt paragraph (mep-event-excerpt, from [event-list style="list"])
 * makes every card very tall on a narrow screen. Drop it there and keep only the
 * date/time + location lines; tablet/desktop are untouched above 782px. Covers
 * both the home widget and the "Events" list page (both use style="list"). */
@media (max-width: 782px) {
	body.home .mep-event-excerpt,
	body.mjeu-events .mep-event-excerpt {
		display: none !important;
	}
}