/* BykonzYard widget theme — 21 Sep 2026.
   Scoped to /widget/* only, so the admin and the full event page are untouched.

   Why a stylesheet and not a rebuild: the frontend on this box is a prebuilt
   Vite SPA with no source tree, and 55 files here are hand-edited with no git.
   The existing branding (title, logo, admin dark theme) was applied the same
   way — a versioned CSS file added to dist/index.html. This follows that.

   The event's own colours are already correct in Hi.Events settings
   (homepage_background_color #1c0c2e, primary #ffd166); the widget route does
   not read them, so they are restated here as literals. */

html:has(> body.byk-widget),
body.byk-widget {
  --byk-plum:      #150826;
  --byk-surface:   #241040;
  --byk-raised:    #2e1650;
  --byk-line:      #3a1f5c;
  --byk-gold:      #ffd166;
  --byk-gold-soft: #e8c766;
  --byk-text:      #f2ecff;
  --byk-muted:     #b9a8d4;
  background: var(--byk-plum) !important;
  color: var(--byk-text) !important;
}

/* Mantine seam — same approach as the admin adapter. */
body.byk-widget {
  --mantine-color-body: var(--byk-plum);
  --mantine-color-text: var(--byk-text);
  --mantine-color-dimmed: var(--byk-muted);
  --mantine-color-default: var(--byk-surface);
  --mantine-color-default-hover: var(--byk-raised);
  --mantine-color-default-color: var(--byk-text);
  --mantine-color-default-border: var(--byk-line);
  --mantine-color-primary-filled: var(--byk-gold);
  --mantine-color-primary-filled-hover: var(--byk-gold-soft);
  --mantine-primary-color-filled: var(--byk-gold);
  --mantine-primary-color-filled-hover: var(--byk-gold-soft);
  --mantine-primary-color-contrast: #1a0d05;
  --mantine-color-anchor: var(--byk-gold);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* The widget shell. Transparent so the host page's background shows through
   when this is iframed into bykonz.co.uk. */
body.byk-widget,
body.byk-widget #app { background: transparent !important; }

/* "Tickets" heading */
body.byk-widget h1,
body.byk-widget h2,
body.byk-widget h3 { color: var(--byk-text) !important; letter-spacing: -.01em; }

/* Each tier is a Mantine Card/Paper. Target by attribute so a class hash
   change in a future Hi.Events build does not silently break the theme. */
body.byk-widget [class*="mantine-Card-root"],
body.byk-widget [class*="mantine-Paper-root"],
body.byk-widget [class*="hi-product"],
body.byk-widget [class*="_product"] {
  background: var(--byk-surface) !important;
  border-color: var(--byk-line) !important;
  color: var(--byk-text) !important;
}

body.byk-widget .hi-product-title,
body.byk-widget [class*="hi-product-title"] { color: var(--byk-text) !important; }

/* Prices and descriptions */
body.byk-widget [class*="mantine-Text-root"] { color: var(--byk-muted) !important; }
body.byk-widget b, body.byk-widget strong { color: var(--byk-text) !important; }

/* The − / + stepper */
body.byk-widget [class*="mantine-ActionIcon-root"] {
  background: var(--byk-raised) !important;
  border: 1px solid var(--byk-line) !important;
  color: var(--byk-gold) !important;
}
body.byk-widget [class*="mantine-ActionIcon-root"]:hover:not(:disabled) {
  background: var(--byk-gold) !important; color: #1a0d05 !important;
}
body.byk-widget [class*="mantine-ActionIcon-root"]:disabled { opacity: .4 !important; }
body.byk-widget input[type="number"],
body.byk-widget [class*="mantine-Input-input"] {
  background: transparent !important; color: var(--byk-text) !important;
  border-color: var(--byk-line) !important;
}

/* Continue — the one primary action */
body.byk-widget button[type="submit"],
body.byk-widget [class*="mantine-Button-root"][data-variant="filled"],
body.byk-widget [class*="mantine-Button-root"][data-variant="filled"] {
  background: var(--byk-gold) !important; color: #1a0d05 !important;
  border: 0 !important; font-weight: 700 !important; letter-spacing: .06em;
  border-radius: 999px !important;
}

/* "Have a promo code?" and other quiet links */
body.byk-widget a,
body.byk-widget [class*="mantine-Anchor-root"],
body.byk-widget [data-variant="subtle"],
body.byk-widget [data-variant="transparent"] {
  color: var(--byk-gold) !important; background: transparent !important;
}

/* "Only 4 left" — gold banner, dark text, same as the site's pills */
body.byk-widget [class*="mantine-Badge-root"],
body.byk-widget [class*="_ribbon"], body.byk-widget [class*="ribbon"] {
  background: var(--byk-gold) !important; color: #1a0d05 !important;
  font-weight: 700 !important;
}

/* Sold out stays visible and dimmed rather than hidden — it is social proof. */
body.byk-widget [data-disabled="true"],
body.byk-widget [class*="sold-out"] { opacity: .55 !important; }

/* Scrollbars inside the iframe */
body.byk-widget ::-webkit-scrollbar { width: 10px; }
body.byk-widget ::-webkit-scrollbar-track { background: transparent; }
body.byk-widget ::-webkit-scrollbar-thumb { background: var(--byk-line); border-radius: 999px; }

/* ---- pass 2, after looking at it ---- */

/* The "Only N left" ribbon renders as a plain div above the card, not a
   Mantine Badge, so the earlier selector missed it. It is the first child of
   the card wrapper and carries no class we can rely on — match on position. */
body.byk-widget [class*="mantine-Card-root"] > div:first-child,
body.byk-widget [class*="_ribbon"],
body.byk-widget [class*="ribbon"],
body.byk-widget [class*="availability"] {
  background: var(--byk-gold) !important;
  color: #1a0d05 !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* Continue was rendering a washed-out gold because Mantine paints a gradient
   over the background. Force both layers. */
body.byk-widget button[type="submit"],
body.byk-widget [class*="mantine-Button-root"] {
  background-image: none !important;
  background-color: var(--byk-gold) !important;
  color: #1a0d05 !important;
  box-shadow: 0 6px 20px rgba(255, 209, 102, .18) !important;
}
body.byk-widget button[type="submit"]:hover,
body.byk-widget [class*="mantine-Button-root"]:hover {
  background-color: #ffdd8a !important;
}

/* Card edges: a hairline, not a heavy stroke. */
body.byk-widget [class*="mantine-Card-root"],
body.byk-widget [class*="mantine-Paper-root"] {
  border-width: 1px !important;
  border-radius: 14px !important;
}

/* Prices read as the important number on the row. */
body.byk-widget [class*="mantine-Card-root"] [class*="mantine-Text-root"]:first-of-type {
  color: var(--byk-gold-soft) !important;
  font-weight: 600 !important;
}

/* Chevron */
body.byk-widget svg { color: var(--byk-muted); }

/* ---- pass 3: kill the white tail ----
   The iframe is taller than the widget's content, so the app shell's own white
   background showed below "Have a promo code?". Paint every ancestor plum and
   let the host page show through where the widget ends. */
html:has(> body.byk-widget) { background: transparent !important; }
body.byk-widget,
body.byk-widget #app,
body.byk-widget #app > *,
body.byk-widget [class*="mantine-AppShell"],
body.byk-widget [class*="mantine-Container"],
body.byk-widget main,
body.byk-widget [data-widget],
body.byk-widget [class*="widget"] {
  background: transparent !important;
  background-color: transparent !important;
  min-height: 0 !important;
}

/* ---- pass 4: the actual culprit ----
   Hi.Events wraps the widget in `div.full-height`, which sets an explicit
   white background and min-height:100vh. That is what painted the white block
   below "Have a promo code?" — not the body, which was already transparent.
   Found by walking the DOM for computed backgrounds above rgb(230,230,230). */
body.byk-widget .full-height,
body.byk-widget [class*="full-height"] {
  background: transparent !important;
  background-color: transparent !important;
  min-height: 0 !important;
}

/* ---- pass 5: beat the inline style ----
   `div.full-height` carries style="background-color: rgb(255,255,255)" and the
   inner container sets --widget-* custom properties inline, both written by the
   widget at render time from defaults that have no column in event_settings
   (the validator accepts homepage_product_widget_* but no such column exists,
   and homepage_theme_settings is a separate hand-added blob this route ignores).
   An inline declaration outranks an external rule, so the only correct lever is
   !important on the same property, plus redefining the custom properties the
   widget actually paints with. */
body.byk-widget .hi-product-widget-container,
body.byk-widget [class*="hi-product-widget"] {
  --widget-background-color: transparent !important;
  --widget-primary-color: #ffd166 !important;
  --widget-primary-text-color: #1a0d05 !important;
  --widget-secondary-color: #241040 !important;
  --widget-secondary-text-color: #f2ecff !important;
  background: transparent !important;
}

/* Links must stay text-coloured; they are Buttons in Mantine's DOM, so instead
   of excluding them with :not([class*="Anchor"]) — a quoted substring inside
   :not(), which this engine rejects and which silently killed every rule after
   it in the file — re-state them afterwards and let source order win. */
body.byk-widget [class*="mantine-Anchor-root"],
body.byk-widget a[class*="mantine-Button-root"],
body.byk-widget [data-variant="subtle"],
body.byk-widget [data-variant="transparent"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--byk-gold) !important;
  box-shadow: none !important;
}

/* ---- pass 6: the last rim, and the duplicate heading ----
   The widget container carries --widget-padding:10px inline, which leaves a
   band of UA canvas around the content inside the frame. Zero it and let the
   host page own the spacing. The "Tickets" h-tag duplicates our own page
   heading directly above the iframe, so it goes. */
body.byk-widget .hi-product-widget-container,
body.byk-widget [class*="hi-product-widget"] {
  --widget-padding: 0px !important;
  padding: 0 !important;
}
body.byk-widget .full-height > div { background: transparent !important; }
body.byk-widget h1:first-child,
body.byk-widget h2:first-child,
body.byk-widget [class*="widget"] > h1:first-child,
body.byk-widget [class*="widget"] > h2:first-child { display: none !important; }

/* ---- pass 7: the footer band ----
   The tier cards paint their own surface, but the footer area holding Continue
   and "Have a promo code?" paints nothing, so the iframe's UA canvas (white)
   shows through there. Nothing in the DOM reports a white background because
   the white IS the canvas. Paint the widget container itself and the form that
   wraps the footer. */
body.byk-widget,
body.byk-widget > div,
body.byk-widget .full-height,
body.byk-widget .hi-product-widget-container,
body.byk-widget .hi-product-widget-container > form,
body.byk-widget .hi-footer-row {
  background-color: #150826 !important;
}