/* =========================================================
   BBX UK — RESPONSIVE PRESENTATION OVERRIDES
   Load AFTER styles.css
   ========================================================= */

/* Page / viewport */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #dcecf6 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Centre the fixed presentation stage in the browser */
.bbx-stage-viewport {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #dcecf6 !important;
}

/* Fixed 1920 × 1080 design canvas.
   JavaScript should apply only the scale() transform. */
.bbx-stage {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 1920px !important;
  height: 1080px !important;
  min-width: 1920px !important;
  min-height: 1080px !important;
  max-width: 1920px !important;
  max-height: 1080px !important;

  flex: 0 0 1920px !important;
  margin: 0 !important;
  padding: 0 !important;

  transform-origin: center center !important;
  will-change: transform;
  overflow: hidden !important;
  background: #f8fcff;
}

.bbx-stage-viewport > .bbx-stage {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform-origin: center center !important;
}

/* Fixed application canvas */
.bbx-stage .app {
  position: relative !important;
  width: 1920px !important;
  height: 1080px !important;
  min-width: 1920px !important;
  min-height: 1080px !important;
  max-width: 1920px !important;
  max-height: 1080px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Fixed slide canvas */
.bbx-stage .slide {
  width: 1920px !important;
  height: 1080px !important;
  min-width: 1920px !important;
  min-height: 1080px !important;
  max-width: 1920px !important;
  max-height: 1080px !important;
}

/* Keep controls inside the presentation */
.bbx-stage .progress {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
}

.bbx-stage .topbar {
  position: absolute !important;
  z-index: 31 !important;
}

.bbx-stage .nav {
  position: absolute !important;
  z-index: 32 !important;
}

/* Slide 2 mode: keep controls visible */
.bbx-stage .app.problem-mode .nav {
  display: flex !important;
  visibility: visible !important;
}

.bbx-stage .app.problem-mode .progress {
  display: block !important;
  visibility: visible !important;
}

.bbx-stage .app.problem-mode .topbar {
  display: grid !important;
  visibility: visible !important;
}

/* Cover remains clean */
.bbx-stage .app.cover-mode .progress,
.bbx-stage .app.cover-mode .topbar,
.bbx-stage .app.cover-mode .nav {
  display: none !important;
}

/* Prevent the old mobile layout from reflowing the presentation */
@media (max-width: 960px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .bbx-stage-viewport {
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .bbx-stage {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 1920px !important;
    height: 1080px !important;
    min-width: 1920px !important;
    min-height: 1080px !important;
    max-width: 1920px !important;
    max-height: 1080px !important;
    flex: 0 0 1920px !important;
    transform-origin: center center !important;
  }

  .bbx-stage .app {
    position: relative !important;
    width: 1920px !important;
    height: 1080px !important;
    min-width: 1920px !important;
    min-height: 1080px !important;
    max-width: 1920px !important;
    max-height: 1080px !important;
    overflow: hidden !important;
  }

  .bbx-stage .slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 1920px !important;
    height: 1080px !important;
    min-width: 1920px !important;
    min-height: 1080px !important;
    max-width: 1920px !important;
    max-height: 1080px !important;
    opacity: 0;
    transform: translateX(30px);
    pointer-events: none;
  }

  .bbx-stage .slide.active {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .bbx-stage .topbar {
    position: absolute !important;
    top: 28px !important;
    left: 44px !important;
    right: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .bbx-stage .phase {
    display: block !important;
  }

  .bbx-stage .nav {
    position: absolute !important;
    left: 44px !important;
    right: 44px !important;
    bottom: 28px !important;
  }
}

/* Known fixed-stage corrections */
.bbx-stage .bbx-problem-v190 .bbx-problem-card {
  grid-template-rows: 44px 98px 82px 340px !important;
}

.bbx-stage .bbx-problem-v190 .bbx-problem-image {
  height: 340px !important;
  margin-top: 0 !important;
}

.bbx-stage .bbx-account-secret img {
  height: 150px !important;
  margin-top: auto !important;
}

/* =========================================================
   END
   ========================================================= */