/*
 * AMA India — MEC Single Event Page
 * Two-column editorial layout mirroring the HADNOW Events design system.
 * Class prefix: .ama-mec-single-*
 * Version: 2.14.3 (tracks the theme version — cache-busting uses
 *          AMAINDIATS_CHILD_VERSION, this header is documentation)
 */

/* ── AMA colour tokens ───────────────────────────────────────
   --ama-navy / -maroon / -cream / -border / -text / -muted are declared once,
   on `body`, in style.css. They used to be declared here too, and again under
   an --ams-* alias in the other MEC sheet: three copies of six tokens, of which
   only one ever loaded on a given page. See the note in style.css for why they
   sit on `body` rather than :root. Do not redeclare them here. */

/* ── Page wrapper ───────────────────────────────────────────── */
.ama-mec-page-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    box-sizing: border-box;
}

/* ── Two-column layout ──────────────────────────────────────── */
.ama-mec-event-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}

/* ══════════════════════════════════════════════════════════════
   LEFT COLUMN — editorial content
   ══════════════════════════════════════════════════════════════ */
.ama-mec-event-main { min-width: 0; }

/* Top-bar: category chips + brochure button */
.ama-mec-event-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.ama-mec-event-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ama-mec-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: none;
}
.ama-mec-brochure-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--ama-border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ama-muted);
    text-decoration: none;
    transition: border-color .12s, color .12s;
    white-space: nowrap;
}
/* Filled call-to-action. The outlined version read as secondary and visitors
   were walking past it. Background comes from AMA -> Events -> Display via
   --ama-brochure-bg; the colour below is the fallback when nothing is set.
   Doubled class rather than !important — Elementor's link colours outrank a
   single class here, the same reason the theme's other button overrides repeat
   their class. */
.ama-mec-brochure-btn.ama-mec-brochure-btn {
    background: var(--ama-brochure-bg, #c62828);
    border-color: var(--ama-brochure-bg, #c62828);
    color: #fff;
    transition: filter .12s, background .12s, border-color .12s;
}
/* brightness() darkens whatever colour has been configured, so any brand
   colour gets a sensible hover without a second setting. */
.ama-mec-brochure-btn.ama-mec-brochure-btn:hover,
.ama-mec-brochure-btn.ama-mec-brochure-btn:focus {
    filter: brightness(.88);
    color: #fff;
    border-color: var(--ama-brochure-bg, #c62828);
}
.ama-mec-brochure-btn.ama-mec-brochure-btn:focus-visible {
    outline: 3px solid var(--ama-navy);
    outline-offset: 2px;
}

/* Title */
h1.ama-mec-event-title {
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.12;
    color: var(--ama-text);
    margin: 0 0 16px;
    letter-spacing: -.02em;
}

/* Rules */
.ama-mec-rule { border: none; border-top: 1.5px solid var(--ama-text); margin: 0 0 20px; }
.ama-mec-rule--light { border-top-color: var(--ama-border); margin: 20px 0; }

/* Meta grid */
.ama-mec-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    gap: 16px 32px;
    margin-bottom: 20px;
    align-items: start;
}
/* Top meta row: 1/3 date+time, 2/3 venue(s) */
.ama-mec-meta-grid--event-top {
    grid-template-columns: 1fr 2fr;
}
.ama-mec-meta-grid--bottom {
    grid-template-columns: repeat(2, auto);
    margin-bottom: 0;
}
/* The event-top row always prints below the banner and content, so it needs
   trailing spacing when Category/Organiser or Upcoming Dates follow it and none
   when it ends the article. */
.ama-mec-meta-grid--after-content { margin-bottom: 20px; }
.ama-mec-meta-grid--after-content:last-child { margin-bottom: 0; }
.ama-mec-meta-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ama-muted);
    margin-bottom: 4px;
}
.ama-mec-meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ama-text);
    line-height: 1.4;
}
.ama-mec-meta-value a { color: inherit; text-decoration: none; }
.ama-mec-meta-value a:hover { text-decoration: underline; }

/* Excerpt */
.ama-mec-excerpt {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ama-maroon);
    line-height: 1.55;
    margin-bottom: 28px;
    font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
}

/* Featured image */
.ama-mec-banner { margin-bottom: 28px; }
.ama-mec-banner img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* Content body */
.ama-mec-content { font-size: 0.9375rem; line-height: 1.8; color: #2c2c2c; margin-bottom: 32px; }
.ama-mec-content p { margin: 0 0 1em; }
.ama-mec-content h2, .ama-mec-content h3 { color: var(--ama-text); }

/* Occurrences / sessions list */
.ama-mec-occurrences { margin-top: 8px; }
.ama-mec-occurrences__heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ama-muted);
    margin: 0 0 12px;
}
.ama-mec-occ-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e8e2d9;
    font-size: 0.875rem;
    color: var(--ama-text);
    gap: 12px;
}
.ama-mec-occ-row:last-child { border-bottom: none; }
.ama-mec-occ-row__date { font-weight: 600; }
.ama-mec-occ-row__time { color: var(--ama-muted); font-size: 0.8125rem; }

/* ══════════════════════════════════════════════════════════════
   RIGHT COLUMN — booking card
   ══════════════════════════════════════════════════════════════ */
.ama-mec-booking-sidebar {
    position: sticky;
    top: 32px;
}

/* Booking card (kept for reference, price header below is the active one) */
.ama-mec-booking-card {
    background: #fff;
    border: 1px solid var(--ama-border);
    border-radius: 6px;
    overflow: hidden;
}


/* ── Guest "log in for member prices" notice ──────────────────────
   Markup comes from the AMA Features membership module; it is styled here
   because everything it has to sit flush against — the price header's border,
   radius and padding — is defined in this file. The module prints it through
   the ama_mec_booking_sidebar_top action, making it the first child of
   .ama-mec-booking-sidebar and therefore the top of the card.

   The price header normally owns the card's rounded top corners. When the
   notice is present it takes them over and the block below goes square, so the
   two read as one card rather than two stacked boxes. Both selectors are
   needed: the futuristic skin's next block is the price header, the theme's
   own single template's is the whole card.

   General sibling (~), not adjacent (+): the futuristic skin emits a <style>
   element for its --ama-* custom properties between the two, so + matched
   nothing and both blocks kept their rounded top, putting a corner in the
   middle of the card. ~ does not care what invisible nodes sit in between. */
.mec-md-guest-notice {
    background: var(--ama-navy, #1a2744);
    color: #fff;
    border: 1px solid var(--ama-navy, #1a2744);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 14px 20px;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.mec-md-guest-notice a {
    color: #fff;
    text-decoration: underline;
}
.mec-md-guest-notice a:hover,
.mec-md-guest-notice a:focus {
    color: #fff;
    text-decoration: none;
}
.mec-md-guest-notice ~ .ama-mec-booking-card__price-header {
    border-radius: 0;
}
.mec-md-guest-notice ~ .ama-mec-booking-card {
    border-radius: 0 0 6px 6px;
}

/* ── Price header above MEC form ──────────────────────────────── */
.ama-mec-booking-card__price-header {
    background: #fff;
    border: 1px solid var(--ama-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 18px 20px 14px;
}

.ama-mec-booking-card__header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e8e2d9;
}
.ama-mec-booking-card__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ama-muted);
    margin-bottom: 6px;
}
.ama-mec-booking-card__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ama-mec-booking-card__sold-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #991b1b;   /* default: sold out red */
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 3px;
}
.ama-mec-booking-card__sold-badge--cancelled { background: #7c1d1d; }  /* dark red */
.ama-mec-booking-card__sold-badge--sold      { background: #991b1b; }  /* red */
.ama-mec-booking-card__sold-badge--closed    { background: #92400e; }  /* amber */
.ama-mec-booking-card__sold-badge--past      { background: #534c45; }  /* grey */
.ama-mec-booking-card__sold-badge--ongoing   { background: #166534; }  /* green */
.ama-mec-booking-card__sold-badge--few       { background: #b45309; }  /* orange — last few tickets urgency */

/* Cancelled reg-notice variant */
.ama-mec-reg-notice--cancelled .ama-mec-reg-notice__icon { color: #dc2626; }
.ama-mec-reg-notice--cancelled .ama-mec-reg-notice__title { color: #991b1b; }
.ama-mec-booking-card__price {
    font-size: 1.2em;
    font-weight: 900;
    color: var(--ama-maroon);
    line-height: 1;
    letter-spacing: -.02em;
    margin-top: 4px;
}
.ama-mec-booking-card__price-note {
    font-size: 0.75rem;
    color: var(--ama-muted);
    margin-top: 4px;
}

/* Ticket type rows */
.ama-mec-ticket-list { padding: 14px 22px; border-bottom: 1px solid #e8e2d9; }
.ama-mec-ticket-list__heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ama-muted);
    margin-bottom: 10px;
}
.ama-mec-ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0ece6;
    font-size: 0.8125rem;
}
.ama-mec-ticket-row:last-child { border-bottom: none; }
.ama-mec-ticket-row__name { font-weight: 600; color: var(--ama-text); }
.ama-mec-ticket-row__price { font-weight: 700; color: var(--ama-maroon); }
.ama-mec-ticket-row__price--free { color: #166534; }

/* Overflow guard for the booking sidebar. MEC's native booking output — plus
   the membership eligibility banner and discounted-price rows injected into it —
   can be wider than the fixed 360px column and spill past its right edge.
   Clamp every descendant to the column and let long content wrap. */
.ama-mec-booking-sidebar { min-width: 0; }
.ama-mec-native-booking { min-width: 0; overflow-wrap: break-word; }
.ama-mec-native-booking * { max-width: 100%; box-sizing: border-box; }
.ama-mec-native-booking .mec-md-eligibility-banner,
.ama-mec-native-booking .mec-md-price-wrap { flex-wrap: wrap; }

/* CTA section */
.ama-mec-booking-card__cta { padding: 16px 22px 8px; }
.ama-mec-btn {
    display: block;
    width: 100%;
    padding: 14px 22px;
    border-radius: 4px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    letter-spacing: .02em;
    line-height: 1;
    transition: opacity .15s, background .15s;
    box-sizing: border-box;
}
.ama-mec-btn--primary { background: var(--ama-navy); color: #fff; }
.ama-mec-btn--primary:hover { opacity: .88; color: #fff; }
.ama-mec-btn--external { background: var(--ama-maroon); color: #fff; }
.ama-mec-btn--external:hover { opacity: .88; color: #fff; }
.ama-mec-btn--secondary {
    background: transparent;
    border: 1.5px solid var(--ama-border);
    color: var(--ama-muted);
    margin-top: 8px;
    font-size: 0.8125rem;
    padding: 10px 22px;
}
.ama-mec-btn--secondary:hover { border-color: var(--ama-navy); color: var(--ama-navy); }

/* ── Label chips (outline style for featured/canceled) ────────── */
.ama-mec-chip--label { font-size: 0.75rem; border-radius: 2px; }
/* ── Online venue chip ───────────────────────────────────────── */
.ama-mec-chip--online {
    --ama-chip-bg:    #1d4ed8;
    --ama-chip-color: #fff;
    font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════
   MEC BOOKING FORM — AMA Futuristic sidebar
   Scoped to .ama-mec-booking-form-wrap — never affects other pages.
   Covers: progress bar · ticket step · checkout summary ·
           attendee details · form fields · back/next buttons.
   ══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ──────────────────────────────────────── */
.ama-mec-booking-form-wrap {
    background: #fff;
    border: 1px solid var(--ama-border);
    border-radius: 6px;
    /* NO overflow:hidden — it clips nested form elements like dropdowns */
}
.ama-mec-booking-form-wrap * { max-width: 100%; box-sizing: border-box; }

/* Strip MEC default wrappers */
.ama-mec-booking-form-wrap .mec-wrap,
.ama-mec-booking-form-wrap .mec-events-meta-group-booking,
.ama-mec-booking-form-wrap .mec-frontbox {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Top-level "Book Event" / "Checkout" h4 heading ─────────
   Scope carefully: only the DIRECT child h4 of the form container.
   Do NOT apply to h4 inside ticket containers, payment sections, etc.  */
.ama-mec-booking-form-wrap > .mec-booking-form-container > h4,
.ama-mec-booking-form-wrap > .mec-events-meta-group-booking > h4,
.ama-mec-booking-form-wrap > .mec-wrap > h4,
.mec-booking form h4 {
    font-size: 0.9375rem;      /* WCAG readable minimum; matches AMA design */
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none; /* was uppercase 11px — changed to sentence case */
    color: #1a2744;       /* AMA navy — 13.9:1 on white (AAA) */
    padding: 0 0 10px;
    margin: 14px 0 10px;
    border-bottom: 1px solid #e8e2d9;
    background: transparent;
    line-height: 1.3;
    text-align: center;
}

/* ── Progress bar ───────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-booking-progress-bar {
    list-style: none !important;
    background: #faf8f5;
}
.ama-mec-booking-form-wrap .mec-booking-progress-bar li {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-bottom: 2px solid transparent !important;
}
.ama-mec-booking-form-wrap .mec-booking-progress-bar li.mec-active {
    color: var(--ama-navy) !important;
    border-bottom-color: var(--ama-navy);
    font-weight: 700 !important;
}
.ama-mec-booking-form-wrap .progress-index {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #e8e2d9 !important;
    color: var(--ama-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    flex-shrink: 0;
    line-height: 1 !important;
}
.ama-mec-booking-form-wrap .mec-booking-progress-bar li.mec-active .progress-index {
    background: var(--ama-navy) !important;
    color: #fff !important;
}

/* ── Date / occurrence dropdown (step 1) ────────────────── */
.ama-mec-booking-form-wrap .mec-book-first {
    padding: 12px 16px;
    border-bottom: 1px solid #f0ece6;
}
.ama-mec-booking-form-wrap .mec-book-first select,
.ama-mec-booking-form-wrap .mec-book-first .nice-select {
    width: 100% !important;
}

/* ── Ticket list (step 1) ───────────────────────────────── */
.ama-mec-booking-form-wrap .mec-event-ticket:last-child { border-bottom: none; }

/* Ticket name */
.ama-mec-booking-form-wrap .mec-event-ticket-name {
    margin-bottom: 4px;
}
/* Ticket price */
.ama-mec-booking-form-wrap .mec-event-ticket-price {
    line-height: 1;
    margin-bottom: 10px;
}
/* Available count */
.ama-mec-booking-form-wrap .mec-event-ticket-available {
    margin-top: 8px;
    display: block;
}

/* Quantity input + JS +/- stepper */
/* Force − on left, input in middle, + on right regardless of MEC DOM order */
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.minus { order: 0; }
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper input.in-num { order: 1; }
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.plus  { order: 2; }
/* MEC quantity / stepper input — must NOT inherit the general
   input[type="number"] rules above (width:100%, padding:10px 12px).
   Also zero out the margin-bottom that MEC plugin CSS sets to 10px via:
   .mec-booking .mec-event-tickets-list .mec-ticket-style-row input[type="number"]
   That margin shifts the input upward inside the flex row. */
.ama-mec-booking-form-wrap input.in-num,
.ama-mec-booking-form-wrap .mec-book-ticket-limit {
    width: 60px;
    padding: 8px 6px;
    margin: 0;           /* kills MEC's margin-bottom:10px */
    border: 1px solid var(--ama-border);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--ama-text);
    background: #fff;
    font-family: inherit !important;
    display: inline-block;   /* keep in flex row — not block */
    vertical-align: middle;  /* belt-and-braces vertical centre */
    line-height: normal !important;     /* reset any inherited line-height */
    box-sizing: border-box;
}
/* MEC's JS quantity buttons (mec-quantity-down / mec-quantity-up) */
.ama-mec-booking-form-wrap .mec-quantity-down,
.ama-mec-booking-form-wrap .mec-quantity-up {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--ama-maroon) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.ama-mec-booking-form-wrap .mec-quantity-down:hover,
.ama-mec-booking-form-wrap .mec-quantity-up:hover { opacity: .85; }

/* Locked counter — when a ticket's Minimum === Maximum the quantity is fixed,
   so the +/- controls are disabled by ama-mec-ticket-limits.js. */
.ama-mec-booking-form-wrap .ama-mec-qty-locked {
    opacity: .3 !important;
    pointer-events: none;
    cursor: not-allowed !important;
}

/* ── Booking totals row (step 1) ────────────────────────── */
.ama-mec-booking-form-wrap [id^="mec_booking_quantity_wrapper_"] {
    display: block;
    padding: 10px 16px;
    font-size: 0.8125rem;
    color: var(--ama-muted);
    border-top: 1px solid #f0ece6;
    background: #faf8f5;
}

/* ── Checkout summary (step 3 — price breakdown) ─────────── */
.ama-mec-booking-form-wrap .mec-book-form-price { padding: 0; }
.ama-mec-booking-form-wrap .mec-book-price-details {
    list-style: none;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid #f0ece6;
}
.ama-mec-booking-form-wrap .mec-book-price-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.8125rem;
    color: var(--ama-text);
    border-bottom: 1px solid #f0ece6;
}
.ama-mec-booking-form-wrap .mec-book-price-detail:last-child { border-bottom: none; }
.ama-mec-booking-form-wrap .mec-ticket-name-description-wrapper {
    width: 100%;
}
.ama-mec-booking-form-wrap .mec-book-price-detail-description { color: var(--ama-muted); }
.ama-mec-booking-form-wrap .mec-book-price-detail-amount { font-weight: 700; color: var(--ama-text); }
.ama-mec-booking-form-wrap .mec-book-price-detail-icon { margin-right: 6px; opacity: .5; }

/* Total row */
.ama-mec-booking-form-wrap .mec-book-price-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 2px solid var(--ama-border);
    background: #faf8f5;
}
.ama-mec-booking-form-wrap .mec-book-price-total-description {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ama-muted);
}
.ama-mec-booking-form-wrap .mec-book-price-total-amount {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--ama-maroon);
}

/* Available tickets details header (fluent mode) */
.ama-mec-booking-form-wrap .mec-book-available-tickets-details-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ama-muted);
    background: #faf8f5;
    border-bottom: 1px solid #f0ece6;
}
.ama-mec-booking-form-wrap .mec-book-available-tickets-details-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 0.8125rem;
    border-bottom: 1px solid #f0ece6;
}

/* ── Attendee form (step 2) ─────────────────────────────── */

/* "Same Details" checkbox */
.ama-mec-booking-form-wrap .mec-first-for-all-wrapper {
    padding: 12px 16px;
    background: #faf8f5;
    border-bottom: 1px solid #f0ece6;
    font-size: 0.8125rem;
    color: var(--ama-text);
}

/* ── Outer mec-ticket-subtotal-wrapper (top of attendee form, Issue: white text + no padding) ── */
/* This is the .col-md-12.mec-ticket-subtotal-wrapper rendered OUTSIDE the ticket loop */
.ama-mec-booking-form-wrap .mec-booking-form-container > .mec-ticket-subtotal-wrapper,
.ama-mec-booking-form-wrap .col-md-12.mec-ticket-subtotal-wrapper {
    background: #f0f4fa !important;
    border: 1px solid #d1d9e8 !important;
    border-radius: 6px;
    padding: 12px 16px !important;
    margin: 12px 16px 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Hide the icon inside the outer subtotal wrapper */
.ama-mec-booking-form-wrap .mec-booking-form-container > .mec-ticket-subtotal-wrapper .mec-ticket-icon-wrapper,
.ama-mec-booking-form-wrap .col-md-12.mec-ticket-subtotal-wrapper .mec-ticket-icon-wrapper {
    display: none !important;
}
/* Ensure text is readable (override any white colour inheritance) */
.ama-mec-booking-form-wrap .col-md-12.mec-ticket-subtotal-wrapper .mec-ticket-price-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--ama-muted) !important;
}
.ama-mec-booking-form-wrap .col-md-12.mec-ticket-subtotal-wrapper .mec-ticket-price {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--ama-maroon) !important;
}

/* ── li container: suppress list-style bullet (Issue: list icon) ── */
.ama-mec-booking-form-wrap .mec-book-ticket-container,
.ama-mec-booking-form-wrap .mec-book-tickets-container > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ama-mec-booking-form-wrap .mec-book-tickets-container {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Attendee ticket block header — cream+navy design (fixes white-on-white) ── */
.ama-mec-booking-form-wrap .mec-ticket-detail {
    border-left: 4px solid var(--ama-navy);
    margin-top: 8px;
}
/* Hide the bag icon — clean layout, Issue: icon on a different line */

.ama-mec-booking-form-wrap .mec-ticket-name-description-wrapper {
    justify-content: space-between;
}
/* "Attendee #1 details — " label */
/* Ticket name */
/* Subtotal / price on the right */
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper,
.ama-mec-booking-form-wrap .mec-ticket-price-wrapper {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px;
    flex-shrink: 0;
    background: transparent;
    padding: 0 !important;
}
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper .mec-field-icon,
.ama-mec-booking-form-wrap .mec-ticket-price-wrapper .mec-field-icon { display: none !important; }
.ama-mec-booking-form-wrap .mec-ticket-price-label,
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper span:first-child {
    font-size: 0.75rem !important;
    color: var(--ama-muted) !important;          /* dark — readable */
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}
.ama-mec-booking-form-wrap .mec-ticket-price,
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper .mec-ticket-price {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--ama-maroon) !important;         /* maroon — readable */
}

/* ── Hide all mec-field-icon instances (Issue: icons on separate line) ── */
/* Restore full border & radius on inputs once the icon is gone */
.ama-mec-booking-form-wrap .mec-field-wrapper input,
.ama-mec-booking-form-wrap .mec-booking-name-field-wrapper input,
.ama-mec-booking-form-wrap .mec-booking-email-field-wrapper input,
.ama-mec-booking-form-wrap .mec-stripe-name-and-email-wrapper input {
    border-left: 1px solid var(--ama-border) !important;
    border-radius: 4px !important;
}

/* ── bfixed fields container — collapse when visually empty (Issue: blank space) ── */
.ama-mec-booking-form-wrap .mec-book-bfixed-fields-container {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
/* Collapse completely when the server renders no fields inside */
.ama-mec-booking-form-wrap .mec-book-bfixed-fields-container:empty {
    display: none !important;
}
/* Only add spacing/border when li elements contain actual visible content */
.ama-mec-booking-form-wrap .mec-book-bfixed-fields-container > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: contents !important;               /* collapses to nothing when empty */
}
/* If there ARE visible bfixed fields, they'll carry their own label+input styling */

/* ── Reg fields (attendee, per-attendee) ────────────────── */
.ama-mec-booking-form-wrap .mec-book-tickets-reg-fields-container,
.ama-mec-booking-form-wrap .mec-booking-registrtaion-fields {
    list-style: none;
    padding: 14px 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid #f0ece6;
}
/* Each field row */
.ama-mec-booking-form-wrap .mec-book-tickets-reg-fields-container li,
.ama-mec-booking-form-wrap .mec-booking-registrtaion-fields li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Field labels */
/* Required asterisk */
.ama-mec-booking-form-wrap .mec-required,
.ama-mec-booking-form-wrap label .mec-required { color: #dc2626 !important; margin-left: 2px; }

/* Text / email / tel / number inputs
   NOTE: input[type="number"]:not(.in-num) — the .in-num class is MEC's
   quantity stepper input. Excluding it here prevents width:100% and the
   large padding from being forced onto the stepper, which would break
   the flex-row layout and cause the input to appear misaligned. */
.ama-mec-booking-form-wrap input[type="text"],
.ama-mec-booking-form-wrap input[type="email"],
.ama-mec-booking-form-wrap input[type="tel"],
.ama-mec-booking-form-wrap input[type="number"]:not(.in-num),
.ama-mec-booking-form-wrap textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ama-border) !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    color: var(--ama-text) !important;
    background: #fff !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    transition: border-color .12s !important;
}
.ama-mec-booking-form-wrap input:focus,
.ama-mec-booking-form-wrap textarea:focus {
    outline: 2px solid var(--ama-navy) !important;  /* WCAG 2.4.7 — focus ring must be visible */
    outline-offset: 1px !important;
    border-color: var(--ama-navy) !important;
    box-shadow: 0 0 0 4px rgba(26,39,68,.10) !important;
}
/* Placeholder */
.ama-mec-booking-form-wrap ::placeholder { color: #bfb8af !important; font-weight: 400 !important; }

/* Select / NiceSelect */
.ama-mec-booking-form-wrap select:not(.in-num) {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ama-border) !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    color: var(--ama-text) !important;
    background: #fff !important;
    font-family: inherit !important;
    appearance: none;
}
.ama-mec-booking-form-wrap .nice-select {
    width: 100% !important;
    border: 1px solid var(--ama-border) !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    color: var(--ama-text) !important;
    height: 42px !important;
    line-height: 40px !important;
    font-family: inherit !important;
}
.ama-mec-booking-form-wrap .nice-select:focus,
.ama-mec-booking-form-wrap .nice-select.open { border-color: var(--ama-navy) !important; }
.ama-mec-booking-form-wrap .nice-select .list { border: 1px solid var(--ama-border); border-radius: 4px; }
.ama-mec-booking-form-wrap .nice-select .option.selected,
.ama-mec-booking-form-wrap .nice-select .option:hover { color: var(--ama-navy) !important; }

/* ── Button row (back + next) ───────────────────────────── */
.ama-mec-booking-form-wrap .mec-book-form-btn-wrap {
    padding: 14px 16px;
    border-top: 1px solid #f0ece6;
    background: #faf8f5;
}

/* NEXT / Submit button → AMA navy, full-width flex */
.ama-mec-booking-form-wrap .mec-book-form-next-button,
.ama-mec-booking-form-wrap [id^="mec-book-form-btn-step"] {
    flex: 1;
    display: block;
    background: var(--ama-navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
    text-align: center;
}
.ama-mec-booking-form-wrap .mec-book-form-next-button:hover,
.ama-mec-booking-form-wrap [id^="mec-book-form-btn-step"]:hover { opacity: .88; }

/* Back button — 50% (flex:1 matches Next button), Issue: make equal width */
.ama-mec-booking-form-wrap .mec-book-form-back-button,
.ama-mec-booking-form-wrap [id^="mec-book-form-back-btn"] {
    flex: 1 !important;                          /* equal half with Next */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    background: #fff !important;
    color: var(--ama-text) !important;
    border: 1.5px solid var(--ama-border) !important;
    border-radius: 4px !important;
    padding: 12px 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: border-color .12s, color .12s !important;
}
.ama-mec-booking-form-wrap .mec-book-form-back-button:hover,
.ama-mec-booking-form-wrap [id^="mec-book-form-back-btn"]:hover {
    border-color: var(--ama-navy) !important;
}

/* Superseded: the block near the end of this file restyles these three buttons
   as SOLID navy. The navy hover colour above was written for the earlier
   outlined treatment and, because the later hover rule only re-declares
   `background`, it survived to paint navy text on a navy button. Neutralised
   here rather than deleted, so the outlined treatment stays easy to restore. */
.ama-mec-booking-form-wrap .mec-book-form-back-button:hover,
.ama-mec-booking-form-wrap [id^="mec-book-form-back-btn"]:hover {
    color: #fff !important;
}

/* ── WooCommerce coupon / checkout area ─────────────────── */

/* ── Payment step (step 3 / checkout) ──────────────────── */
/* "Select Payment Method" heading */
.ama-mec-booking-form-wrap .mec-book-payment-methods h3,
.ama-mec-booking-form-wrap .mec-booking-payment-methods-title,
.ama-mec-booking-form-wrap .mec-wrap-checkout h3 {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: var(--ama-text) !important;
    padding: 14px 16px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* Gateway radio options */
.ama-mec-booking-form-wrap .mec-gateway-container { padding: 8px 16px 14px; }
.ama-mec-booking-form-wrap .mec-gateway-container label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ama-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

/* "Add to cart" WooCommerce link/button — make it clearly visible */
.ama-mec-booking-form-wrap .mec-wc-add-to-cart,
.ama-mec-booking-form-wrap a.add_to_cart_button,
.ama-mec-booking-form-wrap .single_add_to_cart_button,
.ama-mec-booking-form-wrap [class*="add-to-cart"],
.ama-mec-booking-form-wrap [class*="add_to_cart"] {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: var(--ama-maroon) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}
.ama-mec-booking-form-wrap [class*="add_to_cart"]:hover,
.ama-mec-booking-form-wrap [class*="add-to-cart"]:hover { opacity: .88; }

/* Coupon wrapper */
.ama-mec-booking-form-wrap .mec-booking-checkout-coupon-total-wrapper { padding: 14px 16px; }

/* Override MEC's global colour variables within our wrapper */
.ama-mec-booking-form-wrap .mec-bg-color { background: var(--ama-navy) !important; color: #fff !important; }
.ama-mec-booking-form-wrap .mec-color    { color: var(--ama-navy) !important; }
.ama-mec-booking-form-wrap .mec-border-color { border-color: var(--ama-border) !important; }
.ama-mec-booking-form-wrap .mec-bg-color-hover:hover { background: var(--ama-cream) !important; color: var(--ama-navy) !important; }

/* ── Sold out / no-booking states ───────────────────────── */
.ama-mec-booking-form-wrap--sold,
.ama-mec-booking-form-wrap--no-booking {
    border: 1px solid var(--ama-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 20px;
    text-align: center;
    font-size: 0.875rem;
    color: #8a7f72;
}
.ama-mec-booking-form-wrap--sold { color: #991b1b; }

/* ── Brochure link below booking form ───────────────────── */
.ama-mec-sidebar-brochure { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════
   SHARING SECTION — Export / Social / QR
   Lives in the RIGHT sidebar below the booking form.
   Stacked vertically to fit the narrow 360px column.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-sharing-section {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Strip MEC's default frontbox card styling */
.ama-mec-sharing-section .mec-frontbox {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Each sharing block is a card in the sidebar */
.ama-mec-sharing-block {
    background: #fff;
    border: 1px solid var(--ama-border);
    border-radius: 6px;
    padding: 14px 16px;
}

/* ── QR Code block ───────────────────────────────────────── */
.ama-mec-sharing-block--qr .mec-qrcode-details { margin: 0; text-align: center; }
.ama-mec-sharing-block--qr .mec-frontbox-title,
.ama-mec-sharing-block--qr h3 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ama-muted);
    margin: 0 0 10px;
    text-align: center;
}
.ama-mec-sharing-block--qr img {
    border: 1px solid var(--ama-border);
    border-radius: 4px;
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto 8px;
}
.ama-mec-sharing-block--qr .mec-qrcode-description,
.ama-mec-sharing-block--qr p {
    font-size: 0.75rem;
    color: var(--ama-muted);
    text-align: center;
    margin: 0 0 8px;
}
.ama-mec-sharing-block--qr a,
.ama-mec-sharing-block--qr .mec-qrcode-download {
    display: block;
    text-align: center;
    padding: 7px 12px;
    border: 1px solid var(--ama-border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ama-text);
    text-decoration: none;
    transition: border-color .12s;
}
.ama-mec-sharing-block--qr a:hover { border-color: var(--ama-navy); color: var(--ama-navy); }

/* ── Add to calendar: 4-icon row (Google · Outlook · Office 365 · .ics) ──
   MEC's native `export.details` module is no longer rendered (see
   mec-skin-futuristic.php), so its `.mec-export-details` / `.mec-events-gcal`
   selectors are gone from this file — this block styles our own markup. */
.ama-mec-sharing-block--export .ama-mec-cal-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* element+class so the Elementor Kit's global `a` colour can't win. */
.ama-mec-sharing-block--export a.ama-mec-cal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ama-border);
    border-radius: 4px;
    color: var(--ama-muted);
    background: #fff;
    text-decoration: none;
    transition: border-color .12s, color .12s, background .12s;
}
.ama-mec-sharing-block--export a.ama-mec-cal-btn:hover,
.ama-mec-sharing-block--export a.ama-mec-cal-btn:focus {
    border-color: var(--ama-navy);
    color: var(--ama-navy);
    background: var(--ama-cream);
}
.ama-mec-sharing-block--export a.ama-mec-cal-btn:focus-visible {
    outline: 3px solid var(--ama-navy);
    outline-offset: 2px;
}
.ama-mec-sharing-block--export a.ama-mec-cal-btn svg { display: block; }

/* ── Social sharing block ───────────────────────────────── */
.ama-mec-sharing-block--social .mec-event-social { margin: 0; }
.ama-mec-sharing-block--social h3,
.ama-mec-sharing-block--social .mec-frontbox-title,
.ama-mec-sharing-block--social .mec-social-single {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--ama-muted) !important;
    margin: 0 0 10px !important;
}
.ama-mec-sharing-block--social .mec-links-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ama-mec-sharing-block--social .mec-links-details li { margin: 0; }
.ama-mec-sharing-block--social .mec-links-details a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ama-border);
    border-radius: 4px;
    color: var(--ama-muted);
    background: #fff;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: border-color .12s, color .12s;
}
.ama-mec-sharing-block--social .mec-links-details a:hover {
    border-color: var(--ama-navy);
    color: var(--ama-navy);
}

.ama-mec-booking-card__footer {
    padding: 10px 22px 16px;
    font-size: 0.75rem;
    color: var(--ama-muted);
    text-align: center;
    line-height: 1.5;
}
.ama-mec-booking-card__footer a { color: var(--ama-navy); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   NATIVE MEC BOOKING SECTION (below editorial layout)
   MEC renders its own booking form here; we wrap it cleanly.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-native-booking {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1.5px solid var(--ama-border);
}
.ama-mec-native-booking__heading {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--ama-text);
    margin: 0 0 24px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
    .ama-mec-event-layout {
        grid-template-columns: 1fr;
    }
    .ama-mec-booking-sidebar {
        position: static;
    }
}
@media (max-width: 700px) {
    h1.ama-mec-event-title { font-size: 1.5em; }
    .ama-mec-page-wrap { padding: 24px 16px 48px; }
    .ama-mec-meta-grid { grid-template-columns: 1fr 1fr; }
    .ama-mec-meta-grid--event-top { grid-template-columns: 1fr 1fr; }
    .ama-mec-meta-grid--bottom { grid-template-columns: 1fr 1fr; }
    .ama-mec-event-topbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    h1.ama-mec-event-title { font-size: 1.3em; }
    .ama-mec-meta-grid,
    .ama-mec-meta-grid--bottom { grid-template-columns: 1fr; }
    .ama-mec-booking-card__header { padding: 16px; }
    .ama-mec-booking-card__cta,
    .ama-mec-ticket-list { padding: 14px 16px; }
}

/* ── Registration Closed state ─────────────────────────────── */
.ama-mec-btn--closed {
    display: block;
    width: 100%;
    padding: 14px 22px;
    border-radius: 4px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    cursor: default;
    letter-spacing: .02em;
    line-height: 1;
    box-sizing: border-box;
    background: #f3f4f6;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
}

/* Registration closed notice below the editorial layout */
.ama-mec-native-booking--closed {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1.5px solid var(--ama-border);
}
.ama-mec-reg-closed {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #faf8f5;
    border: 1px solid var(--ama-border);
    border-radius: 6px;
    border-left: 4px solid #6b7280;
}
.ama-mec-reg-closed__icon { font-size: 1.75rem; flex-shrink: 0; opacity: .6; }
.ama-mec-reg-closed__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ama-mec-reg-closed__text strong {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ama-text);
}
.ama-mec-reg-closed__text span {
    font-size: 0.8125rem;
    color: var(--ama-muted);
}

/* ── MEC native sharing section — fix X icon + single-line title ── */
/* Applies to MEC's built-in social sharing output inside our booking section */
.ama-mec-native-booking .mec-event-sharing,
.ama-mec-native-booking .mec-event-social {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    padding: 12px 0 !important;
    border-top: 1px solid var(--ama-border) !important;
    margin-top: 16px !important;
}
/* "Share this event" title — single line */
.ama-mec-native-booking .mec-social-single,
.ama-mec-native-booking .mec-event-sharing-title,
.ama-mec-native-booking .mec-event-sharing > h3,
.ama-mec-native-booking .mec-event-sharing > span:first-child {
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--ama-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
/* Icons row */
.ama-mec-native-booking .mec-links-details ul,
.ama-mec-native-booking .mec-event-sharing ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}
.ama-mec-native-booking .mec-links-details li,
.ama-mec-native-booking .mec-event-sharing li { list-style: none !important; margin: 0 !important; }
/* Individual share icon buttons */
.ama-mec-native-booking .mec-links-details a,
.ama-mec-native-booking .mec-event-sharing a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--ama-border) !important;
    border-radius: 4px !important;
    color: var(--ama-muted) !important;
    background: #fff !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;           /* cap icon size */
    line-height: 1 !important;
    transition: border-color .12s, color .12s !important;
    overflow: hidden !important;
}
.ama-mec-native-booking .mec-links-details a:hover,
.ama-mec-native-booking .mec-event-sharing a:hover {
    border-color: var(--ama-navy) !important;
    color: var(--ama-navy) !important;
}
/* Force X/Twitter icon to AMA muted colour (overrides Twitter brand blue) */
.ama-mec-native-booking .mec-links-details a[href*="twitter.com"],
.ama-mec-native-booking .mec-links-details a[href*="x.com"],
.ama-mec-native-booking .mec-event-sharing a[href*="twitter.com"],
.ama-mec-native-booking .mec-event-sharing a[href*="x.com"] {
    color: var(--ama-muted) !important;
}
/* Cap any icon font size inside share links (Font Awesome etc.) */
.ama-mec-native-booking .mec-links-details a i,
.ama-mec-native-booking .mec-links-details a svg,
.ama-mec-native-booking .mec-event-sharing a i,
.ama-mec-native-booking .mec-event-sharing a svg {
    font-size: 0.875rem !important;
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

/* ── Strip ALL list bullets / icons in the booking form ─────── */
/* Broad reset scoped tightly — catches locations list, payment list, etc. */
.ama-mec-booking-form-wrap ul,
.ama-mec-booking-form-wrap ol {
    margin-left: 0 !important;
}
.ama-mec-booking-form-wrap ul li,
.ama-mec-booking-form-wrap ol li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background-image: none;  /* removes theme bullet background-images */
}
/* Suppress any ::before / ::after pseudo-bullets injected by themes */
.ama-mec-booking-form-wrap li::before,
.ama-mec-booking-form-wrap li::after {
    display: none !important;
    content: none !important;
}
/* Location list specifically */
.ama-mec-booking-form-wrap .mec-booking-location-field ul,
.ama-mec-booking-form-wrap .mec-location-container ul,
.ama-mec-booking-form-wrap .mec-book-location-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.ama-mec-booking-form-wrap .mec-booking-location-field li,
.ama-mec-booking-form-wrap .mec-location-container li {
    list-style: none !important;
    padding: 8px 12px !important;
    border: 1px solid var(--ama-border) !important;
    border-radius: 4px !important;
    font-size: 0.8125rem !important;
    color: var(--ama-text) !important;
    cursor: pointer !important;
}
.ama-mec-booking-form-wrap .mec-booking-location-field li:hover,
.ama-mec-booking-form-wrap .mec-location-container li:hover {
    border-color: var(--ama-navy) !important;
    background: var(--ama-cream) !important;
}

/* ── WCAG focus rings ───────────────────────────────────────── */
.ama-mec-btn:focus-visible,
.ama-mec-brochure-btn:focus-visible {
    outline: 3px solid var(--ama-navy);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   TICKET QUANTITY STEPPER — alignment fixes
   MEC plugin CSS sets margin-bottom:10px on the stepper input via
   .mec-booking .mec-event-tickets-list .mec-ticket-style-row input[type="number"]
   Override it to zero so the stepper stays vertically centred in
   its flex row. The gap between price and stepper comes from the
   input-wrapper's margin-top instead.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-booking-form-wrap .mec-event-tickets-list .mec-ticket-style-row input[type="number"],
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper input[type="number"] {
    margin-bottom: 0;
    display: inline-block;   /* keeps it in the flex row — not block */
}

/* Ticket row flex layout: name/price on left, stepper on right */
.ama-mec-booking-form-wrap .mec-ticket-style-row {
    justify-content: space-between;
    flex-wrap: wrap;
}
.ama-mec-booking-form-wrap .mec-ticket-style-row .mec-ticket-name-description-wrapper {
    flex: 1;
    min-width: 0;
}

/* Gap between price/description and the quantity stepper.
   margin-left  = horizontal gap when price and stepper are in the same row.
   margin-top   = vertical gap when they stack (narrow screens). */
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper {
    margin-top:  10px;
    margin-left: 10px;
}

/* ══════════════════════════════════════════════════════════════
   CHIP — DYNAMIC BACKGROUND VIA CSS CUSTOM PROPERTY
   PHP outputs style="--ama-chip-bg:#hex" (CSS var only, no style property).
   Outline variant uses the same var for border+text; solid uses it for bg.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-chip {
    background: var(--ama-chip-bg, #1a2744);
    color:       var(--ama-chip-color, #fff);
}
/* Tag chip — static grey */
.ama-mec-chip--tag {
    --ama-chip-bg:    #6b7280;
    --ama-chip-color: #fff;
}
/* Outline / label variant — transparent bg, colored border + text */
.ama-mec-chip--outline {
    background:   transparent !important;
    border:       1.5px solid var(--ama-chip-bg, #6b7280) !important;
    color:        var(--ama-chip-bg, #6b7280) !important;
}

/* ══════════════════════════════════════════════════════════════
   VENUE ADDRESS SUB-LINE
   Shown below venue name when no venue URL is set.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-meta-venue-addr {
    display:     block;
    font-size:   0.75rem;
    color:       var(--ama-muted);   /* #534c45 — passes WCAG AA */
    font-weight: 400;
    margin-top:  2px;
}
.ama-mec-meta-venue-item + .ama-mec-meta-venue-item {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ama-rule, #e5e0db);
}
.ama-mec-meta-venue-online {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 3px;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   RULE WITH EXTRA TOP MARGIN
   Used before bottom-meta and occurrences sections.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-rule--top-spaced {
    margin-top: 28px;
}

/* ══════════════════════════════════════════════════════════════
   SOLD-OUT PRICE DISPLAY
   ══════════════════════════════════════════════════════════════ */
.ama-mec-booking-card__price--sold {
    color: #991b1b;   /* accessible red — 4.9:1 on white */
}

/* ══════════════════════════════════════════════════════════════
   REGISTRATION CLOSED NOTICE — inside the booking card sidebar
   (smaller inline variant, distinct from the full-width
    .ama-mec-reg-closed used below the editorial layout)
   ══════════════════════════════════════════════════════════════ */
.ama-mec-reg-notice {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     4px 0;
}
.ama-mec-reg-notice__icon {
    font-size:   1.5rem;
    opacity:     .6;
    flex-shrink: 0;
}
.ama-mec-reg-notice__body {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}
.ama-mec-reg-notice__title {
    display:     block;
    font-size:   0.875rem;
    font-weight: 700;
    color:       #374151;
}
.ama-mec-reg-notice__desc {
    display:   block;
    font-size: 0.75rem;
    color:     var(--ama-muted);
}

/* ══════════════════════════════════════════════════════════════
   BOOKING "COMING SOON" PARAGRAPH
   Shown when no booking form and no brochure link is available.
   ══════════════════════════════════════════════════════════════ */
.ama-mec-booking-coming-soon {
    color:      var(--ama-muted);
    font-size:  0.875rem;
    margin:     0;
    text-align: center;
}

/* ── Countdown section (above sharing) ─────────────────────────────────── */
/*
 * We add .mec-events-meta-group-countdown to the wrapper in PHP so MEC's own
 * frontend.css provides the table/table-cell layout for .countdown-w/.block-w.
 * These rules only apply AMA colour/typography overrides on top.
 */
.ama-mec-countdown-section {
    overflow:      visible;
}

/* Tighten MEC's generous default padding */
.ama-mec-countdown-section .countdown-w {
    padding:   0 !important;
    margin:    0 !important;
    font-size: 0.875rem !important;   /* reset MEC's 36px — we set sizes below */
    width:     100% !important;
}

/* "STARTS IN" eyebrow label — WCAG-7: min 11px */

/* Each unit block — override MEC's 190px fixed width & 70px height */
.ama-mec-countdown-section .mec-events-meta-group-countdown .countdown-w .block-w,
.ama-mec-countdown-section .countdown-w .block-w {
    width:           25% !important;   /* 4 equal cols */
    height:          auto !important;
    background:      var(--ama-navy, #1a2744) !important;
    border-radius:   4px !important;
    padding:         10px 4px 8px !important;
    margin:          0 2px !important;
    vertical-align:  middle !important;
    font-size:       inherit !important;
    line-height:     1 !important;
}

/* The number span — override MEC's 72px */
.ama-mec-countdown-section .countdown-w span {
    display:     block !important;
    font-size:   1.625rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color:       #fff !important;
    padding:     0 !important;
    text-align:  center !important;
    font-family: inherit !important;
}

/* The unit label (days / hours / minutes / seconds) — WCAG-7: min 11px */
.ama-mec-countdown-section .countdown-w .label-w {
    font-size: 0.75rem !important;
    font-weight:    700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color:          rgba(255, 255, 255, .55) !important;
    margin:         5px 0 0 !important;
    padding:        0 !important;
    position:       static !important;
}

/* "Ongoing" / "Finished" state messages */
.ama-mec-countdown-section .mec-end-counts {
    text-align: center;
    padding:    4px 0;
}
.ama-mec-countdown-section .mec-end-counts h3 {
    font-size:   0.8125rem;
    font-weight: 700;
    color:       var(--ama-muted);
    margin:      0;
}

/* ── Cancellation notice ───────────────────────────────────── */
.ama-mec-cancel-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.ama-mec-cancel-notice__icon {
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #dc2626;
    flex-shrink: 0;
}
.ama-mec-cancel-notice__body {
    flex: 1;
}
.ama-mec-cancel-notice__title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #991b1b;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.ama-mec-cancel-notice__reason {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #7f1d1d;
}

/* ── View Map link ──────────────────────────────────────────── */
.ama-mec-map-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}
.ama-mec-map-link:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   P6 — SKIN OVERRIDES (migrated from mec-skin-futuristic.php inline <style>)
   Moved here for browser caching; ob_start/ob_end_clean suppresses the
   inline output in the PHP skin file.
   WCAG-8: progress-bar step labels bumped 11px → 12px
   WCAG-9: payment / gateway headings — removed text-transform: uppercase
   ══════════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL RESETS ──────────────────────────────────────────────────────── */
.ama-mec-page-wrap *, .ama-mec-page-wrap *::before, .ama-mec-page-wrap *::after {
    box-sizing: border-box;
}
.ama-mec-page-wrap ul,
.ama-mec-page-wrap ol  { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.ama-mec-page-wrap li  { list-style: none !important; padding-left: 0 !important; }
.ama-mec-page-wrap li::marker { content: none !important; }
.ama-mec-page-wrap li::before { content: none !important; display: none !important; }

/* Restore proper list rendering inside event description body */
.ama-mec-content ul,
.ama-mec-content .mec-events-content ul { list-style: disc    !important; padding-left: 1.5rem !important; margin: 0 0 12px !important; }
.ama-mec-content ol,
.ama-mec-content .mec-events-content ol { list-style: decimal !important; padding-left: 1.5rem !important; margin: 0 0 12px !important; }
.ama-mec-content li,
.ama-mec-content .mec-events-content li { list-style: inherit !important; padding-left: 0 !important; margin-bottom: 4px !important; }
.ama-mec-content li::marker,
.ama-mec-content .mec-events-content li::marker { content: initial !important; }
.ama-mec-content li::before,
.ama-mec-content .mec-events-content li::before { content: none !important; display: none !important; }

/* ── SOCIAL SHARE ───────────────────────────────────────────────────────── */
.ama-mec-sharing-block--social { padding: 10px 14px; border-top: 1px solid #e8e2d9; }
.ama-mec-share-title {
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: #534c45; margin: 0 0 8px; padding: 0;
}
.ama-mec-share-icons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ama-mec-share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid #d6cfc4; border-radius: 4px;
    color: #534c45; background: #fff;
    text-decoration: none; flex-shrink: 0;
    transition: border-color .12s, color .12s;
}
.ama-mec-share-btn:hover { border-color: #1a2744 !important; color: #1a2744 !important; }
.ama-mec-share-btn svg  { display: block; flex-shrink: 0; }

/* ── BRAND-COLOURED SHARE / CALENDAR ICONS ─────────────────────────────── */
/* Opt-in from AMA -> Events -> Display. Each button carries a per-service class;
   that class sets --ama-brand, and the two rules below are all that read it, so
   adding a service later means adding one line to the palette. Without the
   --brand modifier on the section none of this applies and the icons keep the
   theme's muted tone. */
.ama-mec-sharing-section--brand .ama-mec-cal-btn--google   { --ama-brand: #4285f4; }
.ama-mec-sharing-section--brand .ama-mec-cal-btn--outlook  { --ama-brand: #0078d4; }
.ama-mec-sharing-section--brand .ama-mec-cal-btn--office   { --ama-brand: #d83b01; }
.ama-mec-sharing-section--brand .ama-mec-cal-btn--ical     { --ama-brand: #111111; }

.ama-mec-sharing-section--brand .ama-mec-share-btn--facebook  { --ama-brand: #1877f2; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--twitter   { --ama-brand: #000000; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--linkedin  { --ama-brand: #0a66c2; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--whatsapp  { --ama-brand: #25d366; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--telegram  { --ama-brand: #26a5e4; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--pinterest { --ama-brand: #bd081c; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--vk        { --ama-brand: #0077ff; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--tumblr    { --ama-brand: #36465d; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--reddit    { --ama-brand: #ff4500; }
.ama-mec-sharing-section--brand .ama-mec-share-btn--pocket    { --ama-brand: #ef3f56; }
/* Email has no brand of its own — it stays on the theme tone via the fallback. */

.ama-mec-sharing-section--brand a.ama-mec-share-btn,
.ama-mec-sharing-section--brand .ama-mec-sharing-block--export a.ama-mec-cal-btn {
    color: var(--ama-brand, var(--ama-muted));
}
.ama-mec-sharing-section--brand a.ama-mec-share-btn:hover,
.ama-mec-sharing-section--brand a.ama-mec-share-btn:focus,
.ama-mec-sharing-section--brand .ama-mec-sharing-block--export a.ama-mec-cal-btn:hover,
.ama-mec-sharing-section--brand .ama-mec-sharing-block--export a.ama-mec-cal-btn:focus {
    color: var(--ama-brand, var(--ama-navy)) !important;
    border-color: var(--ama-brand, var(--ama-navy)) !important;
}

/* ── BOOKING FORM — strip bullets ───────────────────────────────────────── */
.ama-mec-booking-form-wrap ul,
.ama-mec-booking-form-wrap ol { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.ama-mec-booking-form-wrap li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.ama-mec-booking-form-wrap li::marker { content: none !important; display: none !important; }
.ama-mec-booking-form-wrap li::before { display: none !important; content: none !important; }

/* ── PROGRESS BAR — WCAG-8: step label 11px → 12px ─────────────────────── */
.ama-mec-booking-form-wrap .mec-booking-progress-bar {
    display: flex !important; justify-content: space-between;
    align-items: center !important; position: relative;
    padding: 12px 16px 18px !important; margin: 0 0 4px !important; border-bottom: none !important;
}
.ama-mec-booking-form-wrap .mec-booking-progress-bar li {
    font-size: 0.75rem !important; font-weight: 700 !important;
    letter-spacing: .07em !important; text-transform: uppercase !important;
    /* WCAG: #5a5049 is ~6:1 on white; the #7a7068 that used to be here was
       4.83:1 — over AA but under the 6:1 an earlier rule had already aimed
       for. That earlier rule set this same colour and was silently overridden
       by this block, so the raise never reached the page. Set here, where it
       actually wins. */
    color: #5a5049 !important; padding: 0 !important; white-space: nowrap !important;
}
.ama-mec-booking-form-wrap .mec-booking-progress-bar li.mec-active,
.ama-mec-booking-form-wrap .mec-booking-progress-bar .mec-active-step { color: #1a2744 !important; }
.ama-mec-booking-form-wrap .mec-booking-progress-bar::after {
    content: ''; display: block !important; position: absolute !important;
    left: 0; right: 0; bottom: 4px;
    height: 3px; background: #e8e2d9 !important; border-radius: 2px;
}

/* ── SECTION HEADINGS ───────────────────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-book-section-title,
.ama-mec-booking-form-wrap .mec-booking-form > h3,
.ama-mec-booking-form-wrap .mec-book-payment > h3,
.ama-mec-booking-form-wrap h3.mec-book-section-title,
.ama-mec-booking-form-wrap .mec-booking-form-container > h4,
.ama-mec-booking-form-wrap .mec-booking .mec-booking-form-container > h4,
.mec-booking form h4,
.ama-mec-booking-form-wrap .mec-book-username-password-wrapper > h3,
#mec_book_payment_form > h4 {
    font-size: 0.9375rem; font-weight: 700;
    letter-spacing: .02em; text-transform: none;
    color: #1a2744; text-align: center;
    margin: 14px 0 10px; padding: 0 0 10px;
    border-bottom: 1px solid #e8e2d9; line-height: 1.3;
}

/* ── TICKET LIST ────────────────────────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-event-tickets-list {
    display: flex; flex-direction: column;
    gap: 6px; padding: 10px 0;
}
.ama-mec-booking-form-wrap .mec-event-ticket {
    border: none; border-bottom: 1.5px solid #d6cfc4 !important;
    border-radius: 0; background: #fff;
    overflow: hidden; margin-bottom: 0; padding: 0;
}
.ama-mec-booking-form-wrap .mec-ticket-style-row {
    display: flex; align-items: center;
    gap: 0; padding: 12px 14px;
}
.ama-mec-booking-form-wrap .mec-ticket-style-row-section-1 { display: none !important; }
.ama-mec-booking-form-wrap .mec-ticket-style-row-section-2 { flex: 1; min-width: 0; }
.ama-mec-booking-form-wrap .mec-ticket-style-row-section-3 {
    display: flex !important; flex-direction: column;
    align-items: flex-end; gap: 4px; flex-shrink: 0;
}
.ama-mec-booking-form-wrap .mec-event-ticket-icon { display: none !important; }
.ama-mec-booking-form-wrap .mec-event-ticket-info { flex: 1 !important; }
.ama-mec-booking-form-wrap .mec-event-ticket-name {
    font-size: 0.875rem; font-weight: 600 !important;
    color: #1a2744 !important; display: block; margin: 0 0 2px !important;
}
/* MEC prints this <p> as a sibling of .mec-ticket-style-row — the row carries
   the 14px side padding, .mec-event-ticket itself has none — so the text ran
   edge to edge. Pad it so it lines up with the ticket name above. */
.ama-mec-booking-form-wrap .mec-event-ticket-description {
    font-size: 0.75rem !important; color: #534c45 !important;
    display: block !important; margin: 0 !important;
    padding: 0 14px 12px !important; line-height: 1.45 !important;
}
/* Close the gap left by the row's own bottom padding when a description
   follows it. Browsers without :has just keep the looser spacing. */
.ama-mec-booking-form-wrap .mec-event-ticket:has(> .mec-event-ticket-description) .mec-ticket-style-row {
    padding-bottom: 6px;
}
/* Same full-bleed problem for the sold-out / sales-ended notices, which are
   also direct children. Inset with margin so any box styling MEC gives them
   survives. */
.ama-mec-booking-form-wrap .mec-event-ticket > .mec-ticket-unavailable-spots {
    margin: 0 14px 12px;
}
.ama-mec-booking-form-wrap .mec-event-ticket-price {
    font-size: 0.8125rem !important; font-weight: 700 !important;
    color: #8a3a2a !important; display: block; margin: 3px 0 0 !important;
}

/* ── MEMBERSHIP DISCOUNT PRICES ─────────────────────────────────────────── */
/* With a discount active the module replaces the plain price with a struck
.ama-mec-booking-form-wrap .mec-event-ticket-price:has(.mec-md-price-wrap) {
    flex: 1 1 100%;
}
.ama-mec-booking-form-wrap .mec-md-price-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 6px !important;
    max-width: 100% !important;
}
/* A long level name — "Individual - Annual" — cannot sit on one line here.
   break-word rather than anywhere: it breaks a word only when the line is
   genuinely too narrow, and leaves min-content sizing alone. */
.ama-mec-booking-form-wrap .mec-md-badge {
    white-space: normal;
    overflow-wrap: break-word;
}
/* The subtotal wrappers are flex-shrink: 0 so the plain "Subtotal ₹x" pair never
   breaks. The breakdown that replaces it is block-level and multi-line, so where
   it appears the wrapper takes a row to itself instead. */
.ama-mec-booking-form-wrap .mec-ticket-price-wrapper:has(.mec-md-subtotal-wrap),
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper:has(.mec-md-subtotal-wrap) {
    flex: 1 1 100%;
}
.ama-mec-booking-form-wrap .mec-md-subtotal-wrap {
    max-width: 100% !important;
}
/* Eligibility banner: keep it inside the card's padding. */
.ama-mec-booking-form-wrap .mec-md-eligibility-banner {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Belt and braces. The module now inserts the banner above the ticket list, but
   should it ever land inside the flex row again it must take a full row rather
   than compete with the ticket columns for width. */
.ama-mec-booking-form-wrap .mec-ticket-style-row > .mec-md-eligibility-banner {
    flex: 1 1 100% !important;
    order: -1;
}

/* ── ATTENDEE HEADINGS ──────────────────────────────────────────────────── */
/* One numbered heading above each attendee's fields on step 2. MEC prints its
   own "Attendee #N details" only when its attendee-counter setting is on and
   only when the ticket carries a name, and it restarts N for every ticket type
   — two Member tickets plus one Non-member number 1, 2, 1. A CSS counter over
   the list numbers each form once, 1..N, and keeps doing so after MEC re-renders
   the step over AJAX. Forms MEC hides carry display:none, so they drop out of
   the count rather than leaving a gap in it.
   The label falls back to "Attendee" if --ama-attendee-label never arrives, so
   the headings render even if the template or the option is not cooperating. */
.ama-mec-booking-form-wrap .mec-book-tickets-container { counter-reset: ama-attendee; }
/* !important is load-bearing here, not decoration. .mec-book-ticket-container
   is an <li>, and the bullet-stripping resets above (search: "strip bullets")
   carry .ama-mec-booking-form-wrap li::before { content: none !important }.
   Without !important this heading loses to them and never draws. The selector
   below is two classes to their one class plus a type, so it wins the tie. */
.ama-mec-booking-form-wrap .mec-book-ticket-container::before {
    counter-increment: ama-attendee;
    content: var(--ama-attendee-label, "Attendee") " " counter(ama-attendee) !important;
    display: block !important;
    /* .mec-book-ticket-container is a flex column with gap:12px, so the heading
       needs no bottom margin of its own. */
    margin: 0 !important;
    padding: 0 12px 6px !important;
    text-align: center !important;
    border-bottom: 1px solid #e8e2d9 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #1a2744 !important;
}
.ama-mec-booking-form-wrap .mec-ticket-attendee-counter {
    display: var(--ama-attendee-counter-display, inline) !important;
}
/* Member-only hint, above the FIRST attendee's fields — that is the ticket the
   discount and the pre-filled profile details apply to. The property is only
   emitted for a signed-in member, so for everyone else content: var() is
   invalid and nothing renders. The fields list is a flex column, so this sits
   as its first item. */
.ama-mec-booking-form-wrap .mec-book-ticket-container:first-child
  > .mec-book-tickets-reg-fields-container::before {
    content: var(--ama-attendee-member-note);
    display: block;
    padding: 8px 10px;
    border-left: 3px solid #2e7d32;
    border-radius: 3px;
    background: #eef6ee;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a2744;
}

/* ── QTY STEPPER ────────────────────────────────────────────────────────── */
/* Optional label for the counter, set in AMA -> Events -> Event Labels.
   It hangs off section-3 rather than the counter itself: section-3 is already a
   right-aligned flex COLUMN, so a ::before there lands on its own line directly
   above the stepper. Sitting inline in front of the stepper (the first attempt)
   widened this column instead, and because section-3 never shrinks that stole
   the width the price and its discount badge needed.
   With no label saved --ama-qty-label is undefined, which makes content: var()
   invalid at computed-value time; content then falls back to `normal`, and on a
   ::before that means no box at all. So the default costs nothing. */
.ama-mec-booking-form-wrap .mec-ticket-style-row-section-3::before {
    content: var(--ama-qty-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #534c45 !important;
    text-align: right;
    line-height: 1.2;
    /* Wrap rather than widen the column if a longer label is used. */
    white-space: normal;
    max-width: 110px;
}
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper {
    display: inline-flex !important; align-items: center;
    gap: 4px; flex-shrink: 0;
    position: static !important; height: auto;
}
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.plus,
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.minus {
    position: static !important; top: auto !important; bottom: auto !important; right: auto !important;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px !important; border-radius: 4px;
    background: #f0f1f2; border: 1px solid #d6cfc4;
    text-decoration: none; flex-shrink: 0; padding: 0;
    transition: background .1s, border-color .1s;
}
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.plus:hover,
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.minus:hover {
    background: #e0ddd8 !important; border-color: #1a2744 !important;
}
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.plus svg,
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.minus svg {
    width: 16px !important; height: 16px !important; display: block !important; overflow: visible !important;
}
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.plus svg rect,
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper a.minus svg rect { fill: transparent; }
.ama-mec-booking-form-wrap .mec-event-ticket-input-wrapper .in-num {
    width: 40px; text-align: center;
    font-size: 0.875rem; font-weight: 700; color: #1a2744;
    border: 1px solid #d6cfc4; border-radius: 4px;
    background: #fff; padding: 4px 0; height: 28px;
    position: static; -moz-appearance: textfield; appearance: textfield;
}
.ama-mec-booking-form-wrap .in-num::-webkit-inner-spin-button,
.ama-mec-booking-form-wrap .in-num::-webkit-outer-spin-button { -webkit-appearance: none !important; }
.ama-mec-booking-form-wrap .mec-event-ticket-available {
    font-size: 0.75rem !important; color: #534c45 !important;
    font-weight: 400; text-align: right;
    white-space: nowrap; margin: 0; padding: 0;
}
.ama-mec-booking-form-wrap .mec-event-ticket-available span { font-weight: 600; color: #1a2744; }

/* ── ATTENDEE BLOCKS ────────────────────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-book-ticket-container {
    display: flex !important; flex-direction: column !important;
    gap: 12px !important; padding: 10px 0 !important;
}
.ama-mec-booking-form-wrap .mec-book-ticket-container > li {
    border: 1px solid #e8e2d9 !important; border-radius: 4px !important;
    overflow: hidden !important; background: #faf8f5 !important;
}
.ama-mec-booking-form-wrap .mec-ticket-detail {
    display: flex !important; align-items: center !important;
    justify-content: space-between; gap: 10px !important;
    padding: 10px 14px !important; background: #eef1f8 !important;
    border-bottom: 1px solid #dce4f0 !important;
}
.ama-mec-booking-form-wrap .mec-ticket-icon-wrapper { display: none; }
.ama-mec-booking-form-wrap .mec-ticket-name-description-wrapper {
    display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap; flex: 1;
}
.ama-mec-booking-form-wrap .mec-ticket-attendee-counter {
    background: #e8edf5; color: #1a2744 !important;
    padding: 3px 10px; border-radius: 9999px;
    font-size: 0.75rem !important; font-weight: 700 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap;
}
.ama-mec-booking-form-wrap .mec-ticket-name {
    font-size: 0.8125rem !important; font-weight: 600 !important; color: #1a2744 !important;
}
.ama-mec-booking-form-wrap .mec-ticket-detail .mec-ticket-subtotal-wrapper {
    font-size: 0.75rem; font-weight: 600; color: #8a3a2a !important; white-space: nowrap;
}
.ama-mec-booking-form-wrap .mec-book-bfixed-fields-container,
.ama-mec-booking-form-wrap .mec-book-tickets-reg-fields-container {
    display: flex !important; flex-direction: column !important;
    gap: 12px !important; padding: 14px !important; background: #faf8f5 !important;
}
.ama-mec-booking-form-wrap .mec-book-bfixed-fields-container > li,
.ama-mec-booking-form-wrap .mec-book-tickets-reg-fields-container > li { display: block !important; padding: 0 !important; }

/* ── FORM FIELDS ────────────────────────────────────────────────────────── */
.ama-mec-booking-form-wrap label {
    font-size: 0.75rem !important; font-weight: 700 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    color: #534c45 !important; display: block !important; margin-bottom: 5px !important;
}
.ama-mec-booking-form-wrap .mec-field-icon    { display: none !important; }
.ama-mec-booking-form-wrap .mec-field-wrapper { display: block !important; }
.ama-mec-booking-form-wrap input[type="text"],
.ama-mec-booking-form-wrap input[type="email"],
.ama-mec-booking-form-wrap input[type="tel"],
.ama-mec-booking-form-wrap input[type="number"]:not(.in-num),
.ama-mec-booking-form-wrap select,
.ama-mec-booking-form-wrap textarea {
    display: block !important; width: 100% !important; padding: 9px 12px !important;
    border: 1px solid #d6cfc4 !important; border-radius: 4px !important;
    font-size: 0.875rem !important; color: #1a2744 !important; background: #fff !important;
    transition: border-color .15s !important; box-sizing: border-box !important;
    font-family: inherit !important; outline: none !important;
}
.ama-mec-booking-form-wrap input:focus,
.ama-mec-booking-form-wrap select:focus,
.ama-mec-booking-form-wrap textarea:focus {
    border-color: #1a2744 !important;
    outline: 2px solid #1a2744 !important; outline-offset: 1px !important;
    box-shadow: 0 0 0 4px rgba(26,39,68,.12) !important;
}

/* ── SUBTOTAL + ORDER SUMMARY ───────────────────────────────────────────── */
.ama-mec-booking-form-wrap .col-md-12.mec-ticket-subtotal-wrapper,
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper:not(.mec-ticket-detail .mec-ticket-subtotal-wrapper) {
    display: flex !important; align-items: center !important;
    justify-content: space-between; padding: 10px 14px !important;
    background: #faf8f5 !important; border: 1px solid #e8e2d9 !important;
    border-radius: 4px !important; margin: 8px 0 !important;
}
.ama-mec-booking-form-wrap .mec-ticket-price-label {
    font-size: 0.75rem !important; font-weight: 700 !important;
    letter-spacing: .06em; text-transform: uppercase; color: #534c45 !important;
}
.ama-mec-booking-form-wrap .col-md-12.mec-ticket-subtotal-wrapper .mec-ticket-price,
.ama-mec-booking-form-wrap .mec-ticket-subtotal-wrapper:not(.mec-ticket-detail .mec-ticket-subtotal-wrapper) .mec-ticket-price {
    font-size: 1rem !important; font-weight: 700 !important; color: #8a3a2a !important;
}
.ama-mec-booking-form-wrap .mec-book-price-details {
    border: 1px solid #e8e2d9; border-radius: 4px;
    overflow: hidden; margin-bottom: 12px !important; background: #fff;
}
.ama-mec-booking-form-wrap .mec-book-price-details li {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; padding: 10px 14px !important;
    border-bottom: 1px solid #e8e2d9 !important; font-size: 0.8125rem !important;
    color: #374151 !important; gap: 12px !important;
}
.ama-mec-booking-form-wrap .mec-book-price-details li:last-child {
    border-bottom: none !important; border-top: 2px solid #1a2744 !important;
    font-weight: 700 !important; font-size: 0.9375rem !important;
    background: #faf8f5 !important; padding: 12px 14px !important;
}
.ama-mec-booking-form-wrap .mec-book-price-details li:last-child .mec-ticket-cost,
.ama-mec-booking-form-wrap .mec-book-price-details li:last-child span:last-child {
    color: #8a3a2a !important; font-size: 1.0625rem !important;
}

/* ── STEP NAV BUTTONS ───────────────────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-book-form-btn-wrap {
    display: flex; gap: 8px;
    align-items: stretch; margin-top: 16px;
}
.ama-mec-booking-form-wrap .mec-book-form-back-button,
.ama-mec-booking-form-wrap .mec-book-form-next-button,
.ama-mec-booking-form-wrap .mec-book-form-submit {
    flex: 1; display: flex;
    align-items: center; justify-content: center;
    padding: 10px 16px; background: #1a2744; color: #fff;
    border: none; border-radius: 4px;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; transition: background .15s;
    min-height: 44px; height: 44px;
    width: auto; min-width: 0;
}
.ama-mec-booking-form-wrap .mec-book-form-back-button:hover,
.ama-mec-booking-form-wrap .mec-book-form-next-button:hover,
.ama-mec-booking-form-wrap .mec-book-form-submit:hover { background: #0d1524 !important; }
.ama-mec-booking-form-wrap .mec-book-form-back-button:focus,
.ama-mec-booking-form-wrap .mec-book-form-next-button:focus,
.ama-mec-booking-form-wrap .mec-book-form-submit:focus {
    outline: 2px solid #1a2744 !important; outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(26,39,68,.2) !important;
}

/* ── Submit button: the "working" state ─────────────────────────────────────
   MEC already does the mechanical half of this. On submit, its booking module
   (app/modules/booking/default.php) adds BOTH a `loading` class and the
   `disabled` attribute to the next button, and clears them again in the AJAX
   success handler — so the repeat clicks users reported were already being
   swallowed, and never created duplicate bookings.

   What was missing was any sign of it. MEC's only unconditional loading style
   is `button.loading { color: #ecf9fd !important }`, which on our navy button
   turns white text imperceptibly whiter, and its spinner is an icon-font glyph
   (simple-line-icons, content "\e098") that renders as nothing when that font
   is not loaded. Net effect: a dead-looking button for 1–2s, so people clicked
   again.

   The state is therefore styled here, on the class MEC already applies — no
   JavaScript is needed or wanted. Two deliberate choices: the spinner is drawn
   from a border rather than a glyph so it cannot depend on a font loading, and
   it hangs off ::before so MEC's own ::after rule is left intact. `background`
   carries !important only because the :hover rule above does, and after a
   click the cursor is usually still over the button.
   ------------------------------------------------------------------------- */
.ama-mec-booking-form-wrap .mec-book-form-next-button.loading,
.ama-mec-booking-form-wrap .mec-book-form-next-button.loading:hover,
.ama-mec-booking-form-wrap .mec-book-form-next-button[disabled],
.ama-mec-booking-form-wrap .mec-book-form-next-button[disabled]:hover,
.ama-mec-booking-form-wrap [id^="mec-book-form-btn-step"][disabled],
.ama-mec-booking-form-wrap [id^="mec-book-form-btn-step"][disabled]:hover {
    background: #1a2744 !important;
    opacity: .65;
}

/* A sold-out or closed event arrives already `disabled` (MEC disables step 1
   on render), so that state reads as refusal, not as work in progress. */
.ama-mec-booking-form-wrap .mec-book-form-next-button[disabled],
.ama-mec-booking-form-wrap .mec-book-form-next-button[disabled]:hover,
.ama-mec-booking-form-wrap [id^="mec-book-form-btn-step"][disabled],
.ama-mec-booking-form-wrap [id^="mec-book-form-btn-step"][disabled]:hover {
    cursor: not-allowed;
}

/* Ordered after the rule above on purpose: while submitting, MEC sets BOTH
   `loading` and `disabled`, and "wait" is the truthful cursor of the two. */
.ama-mec-booking-form-wrap .mec-book-form-next-button.loading,
.ama-mec-booking-form-wrap .mec-book-form-next-button.loading:hover {
    cursor: wait;
}
.ama-mec-booking-form-wrap .mec-book-form-next-button.loading::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ama-mec-btn-spin .7s linear infinite;
}
@keyframes ama-mec-btn-spin { to { transform: rotate(360deg); } }

/* MEC reveals its OWN indicator on this button at the same moment, via
   `.mec-wrap .mec-events-meta-group-booking button[type=submit].loading:after
   { display: inline-block }`. That glyph is content "\e098" in the
   simple-line-icons font, so it renders as a second spinner where the font is
   loaded and as a missing-glyph box where it is not — a box is what appears on
   a rendered test of this markup. We draw our own now, so suppress it and keep
   one indicator. !important is required: MEC's selector scores higher. */
.ama-mec-booking-form-wrap .mec-book-form-next-button.loading::after {
    display: none !important;
}

/* Still shows motion, slowly, rather than freezing the only feedback there is. */
@media (prefers-reduced-motion: reduce) {
    .ama-mec-booking-form-wrap .mec-book-form-next-button.loading::before {
        animation-duration: 2.4s;
    }
}

/* ── DISCOUNT / COUPON ──────────────────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-booking-discount-handler {
    border-top: 1px solid #e8e2d9; padding-top: 10px; margin-top: 8px !important;
}
.ama-mec-booking-form-wrap .mec-apply-discount {
    padding: 9px 14px !important; background: #1a2744 !important; color: #fff !important;
    border: 1px solid #1a2744 !important; font-size: 0.75rem !important; font-weight: 700 !important;
    cursor: pointer !important; border-radius: 0 4px 4px 0 !important;
}

/* ── PAYMENT METHODS — WCAG-9: sentence-case (no uppercase) ─────────────── */
.ama-mec-booking-form-wrap .mec-book-payment > h3,
.ama-mec-booking-form-wrap .mec-book-payment .mec-book-payment-title,
.ama-mec-booking-form-wrap .mec-book-form-gateways-title {
    font-size: 0.75rem !important; font-weight: 700 !important;
    letter-spacing: .03em !important; text-transform: none !important;
    color: #534c45 !important; text-align: center !important;
    margin: 14px 0 8px !important; padding: 0 !important; border: none !important;
}
.ama-mec-booking-form-wrap .mec-book-form-gateway-option {
    display: flex !important; align-items: center !important; gap: 10px;
    padding: 10px 14px !important; border: 1.5px solid #d6cfc4 !important;
    border-radius: 6px !important; background: #fff; cursor: pointer !important;
    margin-bottom: 6px !important; transition: border-color .12s;
    font-size: 0.8125rem !important; font-weight: 600 !important; color: #1a2744 !important;
    text-transform: none !important; letter-spacing: 0 !important;
}
.ama-mec-booking-form-wrap .mec-book-form-gateway-option:hover { border-color: #1a2744; }
.ama-mec-booking-form-wrap .mec-book-form-gateway-option-svg {
    display: inline-flex !important; align-items: center !important; flex-shrink: 0; color: #1a2744 !important;
}
.ama-mec-booking-form-wrap .mec-book-form-gateway-option-svg svg,
.ama-mec-booking-form-wrap .mec-book-form-gateway-option-svg img { width: 24px !important; height: 24px !important; display: block !important; }
.ama-mec-booking-form-wrap .mec-book-form-gateway-option-title { flex: 1 !important; }
.ama-mec-booking-form-wrap .mec-book-form-gateway-option-radio {
    display: inline-flex !important; align-items: center !important;
    flex-shrink: 0; margin-left: auto !important;
}
.ama-mec-booking-form-wrap .mec-book-form-gateway-option-radio input[type="radio"] {
    width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important;
    accent-color: #1a2744; cursor: pointer !important; border: none !important;
}
.ama-mec-booking-form-wrap .mec-book-payment-type { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.ama-mec-booking-form-wrap .mec-book-payment-type li { padding: 0 !important; }
.ama-mec-booking-form-wrap .mec-book-payment-type label {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 10px 14px !important; border: 1.5px solid #d6cfc4 !important;
    border-radius: 4px !important; background: #fff !important; cursor: pointer !important;
    font-size: 0.8125rem !important; font-weight: 600 !important; color: #1a2744 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    margin: 0 !important; transition: border-color .12s !important;
}
.ama-mec-booking-form-wrap .mec-book-payment-type label:hover { border-color: #1a2744 !important; }
.ama-mec-booking-form-wrap .mec-book-payment-type label i,
.ama-mec-booking-form-wrap .mec-book-payment-type label img {
    font-size: 1.125rem !important; color: #1a2744 !important;
    flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle;
}
.ama-mec-booking-form-wrap .mec-book-payment-type input[type="radio"] {
    width: 16px !important; height: 16px !important; display: inline-block !important;
    flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 1.5px solid #d6cfc4 !important; border-radius: 50% !important;
    cursor: pointer !important; accent-color: #1a2744 !important;
}

/* ── DATE / OCCURRENCE SELECTORS ────────────────────────────────────────── */
.ama-mec-booking-form-wrap .mec-book-first label,
.ama-mec-booking-form-wrap .mec-booking-dates-checkboxes label,
.ama-mec-booking-form-wrap .mec-select-date-label {
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 0.8125rem !important; font-weight: 600 !important; color: #1a2744 !important;
}
.ama-mec-booking-form-wrap .mec-fill-attendees {
    display: flex !important; align-items: center; gap: 8px;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 0.8125rem !important; font-weight: 500 !important; color: #374151 !important; cursor: pointer;
}

/* ── CUSTOM COUNTDOWN WIDGET — WCAG-7: all labels ≥ 11px ───────────────── */
.ama-mec-countdown-section {
    margin-bottom: 20px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px 16px;
}
.ama-mec-countdown-label {
    display: block; font-size: 0.75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: #6b7280; margin: 0 0 10px; padding: 0;
}
.ama-countdown { display: flex; gap: 4px; width: 100%; }
.ama-countdown__block {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #1a2744; border-radius: 4px; padding: 10px 4px 8px; min-width: 0;
}
.ama-countdown__num  { display: block; font-size: 1.75rem; font-weight: 900; line-height: 1; color: #fff; font-family: inherit; }
.ama-countdown__lbl  { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 4px; }