/* =========================================================================
   Bimgraphix — Project Review form
   All rules are scoped under .bgx-pr so they never affect the rest of the site.
   Change colours/fonts in the variables block below.
   Layout: navy blueprint side panel (brand, step tracker, credentials) + question panel.
   ========================================================================= */

.bgx-pr {
  /* ---- Brand settings ---- */
  --bgx-field: #EDF0F4;        /* section background behind the card */
  --bgx-card: #FFFFFF;         /* question panel background */
  --bgx-navy: #0A1A33;         /* side panel + primary button */
  --bgx-navy-2: #10244A;       /* side panel gradient end */
  --bgx-ink: #0A1A33;          /* headings and text */
  --bgx-body: #2A3754;         /* option text */
  --bgx-muted: #66728A;        /* secondary text */
  --bgx-line: #E3E7EE;         /* dividers */
  --bgx-tile-border: #D9DFE8;  /* option border */
  --bgx-tile-hover: #F6F8FB;   /* option hover */
  --bgx-selected: #F1F5FC;     /* selected option fill */
  --bgx-accent: #1F5FB4;       /* progress, focus, selected marks (Bimgraphix blue) */
  --bgx-on-navy: #FFFFFF;
  --bgx-on-navy-muted: rgba(255, 255, 255, .62);
  --bgx-on-navy-faint: rgba(255, 255, 255, .14);
  --bgx-error: #B42318;
  --bgx-font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;  /* or `inherit` to use the site font */

  /* ---- Fixed card size (never changes between steps) ---- */
  --bgx-card-h: 800px;
  --bgx-card-max-w: 1340px;   /* side panel 400px + question panel 940px (unchanged) */
  --bgx-side-w: 400px;

  background: var(--bgx-field);
  color: var(--bgx-ink);
  font-family: var(--bgx-font);
  /* equal grey frame around the card on all sides (128px on large screens, scales down) */
  --bgx-frame-pad: clamp(16px, min(8vw, 12vh), 128px);
  padding: var(--bgx-frame-pad);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.bgx-pr, .bgx-pr *, .bgx-pr *::before, .bgx-pr *::after { box-sizing: border-box; }

/* ---------------- Card ---------------- */
.bgx-pr__card {
  max-width: var(--bgx-card-max-w);
  height: var(--bgx-card-h);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--bgx-side-w) minmax(0, 1fr);
  background: var(--bgx-card);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 26, 51, .06), 0 24px 60px -12px rgba(10, 26, 51, .18);
}

/* ---------------- Side panel ---------------- */
.bgx-pr__side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 42px 44px 34px;
  color: var(--bgx-on-navy);
  background:
    linear-gradient(var(--bgx-on-navy-faint) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--bgx-on-navy-faint) 1px, transparent 1px) 0 0 / 56px 100%,
    linear-gradient(160deg, var(--bgx-navy) 0%, var(--bgx-navy-2) 100%);
  background-blend-mode: normal;
  min-height: 0;
}
/* fade the blueprint grid so it reads as texture, not pattern */
.bgx-pr__side::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 26, 51, .25) 0%, rgba(10, 26, 51, .7) 55%, rgba(10, 26, 51, .94) 100%);
}
.bgx-pr__side > * { position: relative; }

.bgx-pr__brand { line-height: 0; }
.bgx-pr__brand img { display: block; height: 18px; width: auto; max-width: 100%; }
.bgx-pr__title { white-space: nowrap; margin: 30px 0 10px; font-size: 28px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--bgx-on-navy); }
.bgx-pr__sub { margin: 0; font-size: 14px; color: var(--bgx-on-navy-muted); max-width: none; text-wrap: pretty; }

.bgx-pr__steps { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.bgx-pr__steps li { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13.5px; color: var(--bgx-on-navy-muted); transition: color .2s; }
.bgx-pr__steps .bgx-pr__num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid rgba(255, 255, 255, .28); color: var(--bgx-on-navy-muted); transition: all .2s; }
.bgx-pr__steps li.is-done { color: rgba(255, 255, 255, .82); }
.bgx-pr__steps li.is-done .bgx-pr__num { background: rgba(255, 255, 255, .14); border-color: transparent; color: var(--bgx-on-navy); }
.bgx-pr__steps li.is-current { color: var(--bgx-on-navy); font-weight: 600; }
.bgx-pr__steps li.is-current .bgx-pr__num { background: var(--bgx-on-navy); border-color: var(--bgx-on-navy); color: var(--bgx-navy); }

.bgx-pr__creds { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; }
.bgx-pr__cred strong { display: block; font-size: 17px; font-weight: 700; color: var(--bgx-on-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bgx-pr__cred span { display: block; font-size: 11px; color: var(--bgx-on-navy-muted); line-height: 1.3; }
.bgx-pr__secure { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--bgx-on-navy-muted); }
.bgx-pr__secure svg { flex: none; }

/* ---------------- Question panel ---------------- */
.bgx-pr__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 36px 52px 30px; }
.bgx-pr__form { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.bgx-pr__wizard { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bgx-pr__wizard[hidden], .bgx-pr__done[hidden] { display: none !important; }

.bgx-pr__progress { flex: none; display: flex; flex-direction: column; gap: 12px; }
.bgx-pr__step-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bgx-accent); font-variant-numeric: tabular-nums; }
.bgx-pr__segs { display: flex; gap: 4px; }
.bgx-pr__seg { height: 3px; flex: 1; border-radius: 2px; background: var(--bgx-line); transition: background .3s; }
.bgx-pr__seg.is-done, .bgx-pr__seg.is-current { background: var(--bgx-accent); }

.bgx-pr__host { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 4px; margin: 0 -4px; }
.bgx-pr__q { margin: 26px 0 6px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.22; color: var(--bgx-ink); max-width: 40ch; }
.bgx-pr__hint { margin: 0 0 22px; color: var(--bgx-muted); font-size: 14px; min-height: 1px; }

.bgx-pr__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bgx-pr__tiles.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgx-pr__tile {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; margin: 0;
  padding: 14px 18px; border: 1px solid var(--bgx-tile-border); border-radius: 6px; cursor: pointer;
  font-weight: 500; font-size: 15px; line-height: 1.35; background: var(--bgx-card); color: var(--bgx-body);
  transition: border-color .15s, background .15s, box-shadow .15s, opacity .15s; user-select: none;
}
.bgx-pr__tile:hover { border-color: #B8C3D4; background: var(--bgx-tile-hover); }
.bgx-pr__tile input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.bgx-pr__mark { flex: none; width: 20px; height: 20px; border: 1.5px solid #AEB8C8; border-radius: 50%; display: grid; place-items: center; transition: all .15s; }
.bgx-pr__tile.is-multi .bgx-pr__mark { border-radius: 4px; }
.bgx-pr__tile.is-checked { border-color: var(--bgx-accent); background: var(--bgx-selected); color: var(--bgx-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--bgx-accent); }
.bgx-pr__tile.is-checked .bgx-pr__mark { border-color: var(--bgx-accent); background: var(--bgx-accent); }
.bgx-pr__tile.is-checked .bgx-pr__mark::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.bgx-pr__tile.is-maxed { opacity: .45; }
.bgx-pr__tile:focus-within { outline: 2px solid var(--bgx-accent); outline-offset: 2px; }

.bgx-pr__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.bgx-pr__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bgx-pr__field.is-full { grid-column: 1 / -1; }
.bgx-pr__field label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bgx-muted); margin: 0; }
.bgx-pr__opt { font-weight: 500; text-transform: none; letter-spacing: 0; }
.bgx-pr__field input, .bgx-pr__field textarea {
  font: inherit; font-size: 15px; color: var(--bgx-ink); background: #FBFCFD;
  border: 1px solid var(--bgx-tile-border); border-radius: 6px; padding: 13px 14px; width: 100%; margin: 0; box-shadow: none;
  transition: border-color .15s, background .15s;
}
.bgx-pr__field input::placeholder { color: #A0AABB; }
.bgx-pr__field textarea { height: 76px; resize: none; }
.bgx-pr__field input:focus, .bgx-pr__field textarea:focus { outline: none; background: #fff; border-color: var(--bgx-accent); box-shadow: 0 0 0 3px rgba(31, 95, 180, .14); }
.bgx-pr__field.is-invalid input { border-color: var(--bgx-error); }
.bgx-pr__err { color: var(--bgx-error); font-size: 13px; }
.bgx-pr__err:empty { display: none; }

.bgx-pr__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.bgx-pr__error { flex: none; color: var(--bgx-error); font-size: 14px; font-weight: 600; margin: 10px 0 0; min-height: 20px; }

.bgx-pr__actions { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--bgx-line); }
.bgx-pr__btn { font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: 4px; padding: 15px 30px; cursor: pointer; border: 1px solid transparent; text-transform: none; letter-spacing: .01em; transition: background .15s, color .15s, filter .15s; }
.bgx-pr__btn:focus-visible { outline: 2px solid var(--bgx-accent); outline-offset: 3px; }
.bgx-pr__btn--ghost { background: transparent; color: var(--bgx-muted); padding-left: 4px; padding-right: 12px; }
.bgx-pr__btn--ghost:hover { color: var(--bgx-ink); }
.bgx-pr__btn--primary { background: var(--bgx-navy); color: #fff; min-width: 168px; }
.bgx-pr__btn--primary:hover { background: var(--bgx-accent); }
.bgx-pr__btn[disabled] { opacity: .55; cursor: wait; }
.bgx-pr__btn.is-invisible { visibility: hidden; }

.bgx-pr__note { display: none; }   /* shown on small screens, where the side panel collapses */

/* ---------------- Thank-you ---------------- */
.bgx-pr__done { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px 0; max-width: 560px; }
.bgx-pr__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--bgx-navy); color: #fff; display: grid; place-items: center; margin: 0 0 26px; }
.bgx-pr__done .bgx-pr__done-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bgx-accent); margin: 0 0 10px; }
.bgx-pr__done h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--bgx-ink); outline: none; }
.bgx-pr__done p { margin: 0; color: var(--bgx-muted); font-size: 16px; }
.bgx-pr__done-next { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bgx-line); display: grid; gap: 12px; width: 100%; }
.bgx-pr__done-next div { display: flex; gap: 14px; align-items: baseline; font-size: 14.5px; color: var(--bgx-body); }
.bgx-pr__done-next b { flex: none; font-size: 12px; font-weight: 700; color: var(--bgx-accent); font-variant-numeric: tabular-nums; width: 22px; }

@media (prefers-reduced-motion: no-preference) {
  .bgx-pr__step { animation: bgx-pr-in .3s cubic-bezier(.2, .7, .2, 1); }
  @keyframes bgx-pr-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------------- Laptop ---------------- */
@media (max-width: 1100px) {
  .bgx-pr { --bgx-side-w: 330px; }
  .bgx-pr__side { padding: 34px 30px 28px; }
  .bgx-pr__title { font-size: 24px; }
  .bgx-pr__main { padding: 32px 36px 26px; }
  .bgx-pr__tile { font-size: 14px; padding: 12px 14px; gap: 12px; }
  .bgx-pr__tiles.is-dense { gap: 10px; }
}

/* ---------------- Tablet & phone: side panel becomes a slim header ---------------- */
@media (max-width: 860px) {
  .bgx-pr { --bgx-card-h: 930px; }
  .bgx-pr__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .bgx-pr__side { padding: 22px 28px; }
  .bgx-pr__title { margin: 14px 0 4px; font-size: 22px; }
  .bgx-pr__brand img { height: 16px; }
  .bgx-pr__sub { max-width: none; font-size: 13px; }
  .bgx-pr__steps, .bgx-pr__creds, .bgx-pr__secure { display: none; }
  .bgx-pr__main { padding: 26px 28px 20px; }
  .bgx-pr__note { display: flex; flex: none; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--bgx-muted); }
  .bgx-pr__note svg { flex: none; }
  .bgx-pr__tiles.is-dense .bgx-pr__tile { min-height: 46px; padding: 10px 12px; font-size: 13.5px; }
}
@media (max-width: 600px) {
  .bgx-pr__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgx-pr__fields { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 480px) {
  .bgx-pr { --bgx-card-h: 1180px; --bgx-frame-pad: 12px; }
  .bgx-pr__side { padding: 18px 20px; }
  .bgx-pr__main { padding: 20px 18px 16px; }
  .bgx-pr__q { margin-top: 18px; font-size: 20px; }
  .bgx-pr__hint { margin-bottom: 14px; font-size: 13px; }
  .bgx-pr__tiles { gap: 8px; }
  .bgx-pr__tile { padding: 10px; gap: 9px; font-size: 13px; min-height: 50px; }
  .bgx-pr__tiles.is-dense .bgx-pr__tile { min-height: 44px; padding: 9px 9px; font-size: 12.5px; }
  .bgx-pr__mark { width: 17px; height: 17px; }
  .bgx-pr__btn { padding: 13px 18px; }
  .bgx-pr__btn--primary { min-width: 140px; }
}


/* =========================================================================
   Pop-up mode: the card floats over the page; the website behind is
   covered by a 90% grey, blurred layer. No frame around the card.
   ========================================================================= */
html.bgx-pr-lock, html.bgx-pr-lock body { overflow: hidden !important; }
.bgx-pr-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: max(32px, env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(32px, env(safe-area-inset-left, 0px));
  background: rgba(226, 230, 237, .9);
  -webkit-backdrop-filter: blur(14px) saturate(80%);
  backdrop-filter: blur(14px) saturate(80%);
  overflow-y: auto; overscroll-behavior: contain;
}
.bgx-pr-overlay[hidden] { display: none !important; }
.bgx-pr-overlay .bgx-pr {
  position: relative; margin: auto;
  width: min(100%, var(--bgx-card-max-w));
  padding: 0; background: transparent;
  --bgx-card-h-fit: calc(100vh - 64px);
}
.bgx-pr-overlay .bgx-pr__card { box-shadow: 0 2px 6px rgba(10, 26, 51, .08), 0 40px 100px -24px rgba(10, 26, 51, .45); }
@media (min-width: 861px) {
  .bgx-pr-overlay .bgx-pr .bgx-pr__card { height: min(var(--bgx-card-h), max(640px, var(--bgx-card-h-fit))); }
}
.bgx-pr__close {
  position: absolute; top: -16px; right: -16px;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bgx-tile-border);
  background: var(--bgx-card); color: var(--bgx-ink); cursor: pointer;
  display: grid; place-items: center; padding: 0; z-index: 3;
  box-shadow: 0 6px 18px rgba(10, 26, 51, .18); transition: background .15s, color .15s;
}
.bgx-pr__close:hover { background: var(--bgx-navy); color: #fff; }
.bgx-pr__close:focus-visible { outline: 2px solid var(--bgx-accent); outline-offset: 2px; }
/* short laptop screens (e.g. 1366x768): tighten spacing so every step still fits */
@media (min-width: 861px) and (max-height: 860px) {
  .bgx-pr-overlay .bgx-pr__main { padding: 24px 40px 18px; }
  .bgx-pr-overlay .bgx-pr__side { padding: 26px 30px 22px; }
  .bgx-pr-overlay .bgx-pr__title { margin: 18px 0 8px; }
  .bgx-pr-overlay .bgx-pr__steps { margin-top: 16px; }
  .bgx-pr-overlay .bgx-pr__steps li { padding: 3px 0; }
  .bgx-pr-overlay .bgx-pr__q { margin: 16px 0 4px; font-size: 22px; }
  .bgx-pr-overlay .bgx-pr__hint { margin-bottom: 12px; font-size: 13px; }
  .bgx-pr-overlay .bgx-pr__tiles { gap: 9px; }
  .bgx-pr-overlay .bgx-pr__tile { min-height: 46px; padding: 9px 14px; font-size: 14px; }
  .bgx-pr-overlay .bgx-pr__tiles.is-dense .bgx-pr__tile { min-height: 42px; padding: 8px 12px; font-size: 13.5px; }
  .bgx-pr-overlay .bgx-pr__fields { gap: 10px 18px; }
  .bgx-pr-overlay .bgx-pr__field input { padding: 10px 12px; }
  .bgx-pr-overlay .bgx-pr__field textarea { height: 54px; padding: 10px 12px; }
  .bgx-pr-overlay .bgx-pr__error { margin-top: 6px; min-height: 18px; }
  .bgx-pr-overlay .bgx-pr__actions { margin-top: 8px; padding-top: 14px; }
  .bgx-pr-overlay .bgx-pr__btn { padding: 12px 26px; }
  .bgx-pr-overlay .bgx-pr__creds { margin-top: 12px; padding-top: 12px; }
  .bgx-pr-overlay .bgx-pr__secure { margin-top: 10px; }
}
@media (max-width: 860px) {
  .bgx-pr-overlay { align-items: flex-start; padding: 12px; }
  .bgx-pr-overlay .bgx-pr { padding-top: 46px; }
  .bgx-pr__close { top: 0; right: 0; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bgx-pr-overlay:not([hidden]) { animation: bgx-pr-fade .25s ease-out; }
  .bgx-pr-overlay:not([hidden]) .bgx-pr { animation: bgx-pr-rise .35s cubic-bezier(.2, .7, .2, 1); }
  @keyframes bgx-pr-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bgx-pr-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
}