@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
@import url("./components/accordion.css");
/* #8593 (CLS): the six layout-primitive imports below (container, divider, grid, inline, spacer,
   stack) are ALSO loaded render-blocking, individually, in LiveEventBingo.Web/Components/App.razor.
   That mirror is required: app.css is loaded DEFERRED on the Web host (media="print" onload), which
   on a cold load delivers the primitives' flex rules AFTER first paint -> shell-wide CLS. These
   imports stay here because the MAUI host (LiveEventBingo/wwwroot/index.html) gets its primitives
   ONLY via app.css. Keep the two copies byte-identical, and do NOT add a Web-host override for a
   primitive here without also updating the render-blocking copy -- the late (deferred) copy wins on
   cascade ties and would silently shadow the first-paint layout. */
@import url("./components/container.css");
@import url("./components/divider.css");
@import url("./components/grid.css");
@import url("./components/inline.css");
@import url("./components/pagination.css");
@import url("./components/sidenav.css");
@import url("./components/spacer.css");
@import url("./components/stack.css");
@import url("./components/legal-page-shell.css");
@import url("./faq.css");

@font-face {
  font-family: "Lilita One";
  /* ADO #8553 perf: prefer the already-bundled woff2 (smaller than the .ttf) + font-display:swap so
     text paints immediately instead of staying invisible while the font loads. Stays self-hosted
     (this @font-face is in shared app.css, loaded by the MAUI Hybrid host too, which can run offline). */
  src: url(../css/assets/fonts/LilitaOne.woff2) format("woff2"),
       url(../css/assets/fonts/LilitaOne-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html,
body {
  background-color: var(--surface-page);
}
h1:focus {
  outline: none;
}

a,
.btn-link {
  color: var(--meb-button-link-foreground);
}

a:hover,
.btn-link:hover {
  color: var(--meb-button-link-hover-foreground);
}

.btn-primary {
  color: var(--meb-button-primary-foreground, #fff);
  background-color: var(--meb-button-primary-background, #1b6ec2);
  border-color: var(--meb-button-primary-border, #1861ac);
}

.content {
  padding-top: 1.1rem;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid var(--meb-accent-success, #26b050);
}

.invalid {
  outline: 1px solid var(--meb-accent-danger, #dc3545);
}

.validation-message {
  color: var(--meb-accent-danger, #dc3545);
}

#blazor-error-ui {
  /* T-02: lightyellow replaced with token; var(--meb-surface-warning) is the governed warning
     surface. Fallback lightyellow retained for pre-token-load display. */
  background: var(--meb-surface-warning, lightyellow);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.status-bar-safe-area {
  display: none;
}

@supports (-webkit-touch-callout: none) {
  .status-bar-safe-area {
    display: flex;
    position: sticky;
    top: 0;
    height: env(safe-area-inset-top);
    background-color: var(--surface-page);
    width: 100%;
    z-index: 1;
  }

  .flex-column,
  .navbar-brand {
    padding-left: env(safe-area-inset-left);
  }
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: var(--meb-border-subtle, #e0e0e0);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--meb-button-primary-background, #1b6ec2);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}
input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: var(--meb-surface-input, #fff);
  /* Not removed via appearance */
  margin: var(--meb-space-stack-none);
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: var(--meb-surface-input, #fff);
  /* Not removed via appearance */
  margin: var(--meb-space-stack-none);
}

/* Bingo modal */
.bingo-modal {
  padding: 14px;
  border-radius: 20px;
  background: var(--meb-surface-card);
  width: 90%;
}

.bingo-modal .k-window-titlebar {
  background-color: transparent;
  border: none;
  padding: 16px 16px 14px 16px;
}

.bingo-modal .bingo-modal-title {
  color: var(--meb-text-default);
  font-size: var(--font-size-h2-desktop);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: normal;
  margin: var(--meb-space-stack-none);
  padding: var(--meb-space-stack-none);
}

body.portrait-lock-fallback {
    /* Rotate the visual surface back to portrait */
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow: hidden;
    /* Prevent scroll / selection weirdness */
    touch-action: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
}

body.portrait-lock-fallback > * {
    /* Counter-translate so top-left portrait content is visible */
    position: relative;
    top: 0;
    left: 0;
}

/* Confetti particle styles. Both the cell-take burst (.confetti-particle)
   and the full-screen bingo-win burst (.bingo-confetti-particle) share this
   paint + fall animation -- the bingo class previously had no rule, so the
   win confetti spawned invisible, non-animating divs and never rendered. */
.confetti-particle,
.bingo-confetti-particle {
    position: absolute;
    pointer-events: none;
    background-color: var(--particle-color);
    animation: confetti-fall var(--duration) ease-out forwards;
    width: 10px;
    height: 10px;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0 0 5px var(--particle-color);
}

@keyframes confetti-fall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
        opacity: 0;
    }
}