/* Brochure Flipbook viewer — plain, neutral look.
   To match a client's brand, override these variables in your theme, e.g.
   .bfb { --bfb-bg: #ffffff; --bfb-accent: #e30613; } */
.bfb {
  --bfb-bg: #f3f4f6;          /* area around the book */
  --bfb-bar: #ffffff;         /* bottom toolbar */
  --bfb-line: #e2e4e8;
  --bfb-ink: #1f2328;
  --bfb-muted: #6b7280;
  --bfb-accent: #1f2328;      /* arrows, icons, focus ring */
  --bfb-paper: #ffffff;
  --bfb-height: min(82vh, 820px);
  --bfb-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bfb-bg);
  color: var(--bfb-ink);
  border: 1px solid var(--bfb-line);
  border-radius: var(--bfb-radius);
  overflow: hidden;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  outline: none;
  isolation: isolate;
}
.bfb *, .bfb *::before, .bfb *::after { box-sizing: border-box; }
.bfb:focus-visible { box-shadow: inset 0 0 0 2px var(--bfb-accent); }

.bfb-stage {
  position: relative;
  height: var(--bfb-height);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bfb-bg);
  touch-action: pan-y;
}
.bfb-shift {
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
  will-change: transform;
}
.bfb-mount { position: relative; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)); }
.bfb-book { min-width: 0 !important; min-height: 0 !important; }

.bfb-page {
  background: var(--bfb-paper);
  overflow: hidden;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}
.bfb-pdf img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.bfb-pdf.bfb-ready img { opacity: 1; }
.bfb-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9cqw;
  color: rgba(0, 0, 0, 0.18);
  background: linear-gradient(110deg, #f1f2f4 30%, #fafafa 50%, #f1f2f4 70%) 0 0 / 300% 100%;
  animation: bfb-shimmer 1.6s linear infinite;
}
.bfb-pdf.bfb-ready .bfb-ph { display: none; }
@keyframes bfb-shimmer { to { background-position: -150% 0; } }

/* light spine shading on the inner edge of each page */
.bfb-gutter { position: absolute; top: 0; bottom: 0; width: 6%; pointer-events: none; z-index: 2; }
.bfb-on-left .bfb-gutter { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent); }
.bfb-on-right .bfb-gutter { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent); }
.bfb-portrait .bfb-gutter { display: none; }

/* arrows */
.bfb-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--bfb-line);
  border-radius: 50%;
  background: #fff;
  color: var(--bfb-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.bfb-nav-l { left: 16px; }
.bfb-nav-r { right: 16px; }
.bfb-nav:hover:not(:disabled) { background: #f6f7f8; }
.bfb-nav:disabled { opacity: 0.3; cursor: default; }
.bfb-nav svg, .bfb-ico svg, .bfb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bfb-portrait .bfb-nav { width: 36px; height: 36px; margin-top: -18px; background: rgba(255, 255, 255, 0.9); }
.bfb-portrait .bfb-nav-l { left: 4px; }
.bfb-portrait .bfb-nav-r { right: 4px; }

/* toolbar */
.bfb-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 14px;
  background: var(--bfb-bar);
  border-top: 1px solid var(--bfb-line);
}
.bfb-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bfb-mid { justify-content: center; }
.bfb-end { justify-content: flex-end; }
.bfb-count {
  min-width: 9ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--bfb-ink);
  font-size: 14px;
}
.bfb-ico, .bfb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--bfb-accent);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.bfb-btn { border-color: var(--bfb-line); padding: 0 12px; color: var(--bfb-ink); }
.bfb-ico:hover:not(:disabled), .bfb-btn:hover { background: #f3f4f6; }
.bfb-ico:disabled { opacity: 0.3; cursor: default; }
.bfb button:focus-visible, .bfb a:focus-visible, .bfb select:focus-visible { outline: 2px solid var(--bfb-accent); outline-offset: 2px; }

/* section menu */
.bfb-chapters {
  max-width: 220px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--bfb-line);
  border-radius: 6px;
  background: #fff;
  color: var(--bfb-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.bfb-chapters[hidden] { display: none; }

/* loading */
.bfb-status {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bfb-bg);
  text-align: center;
  padding: 16px;
}
.bfb-status[hidden] { display: none; }
.bfb-msg { margin: 0; color: var(--bfb-muted); font-size: 15px; }
.bfb-spin {
  width: 30px;
  height: 30px;
  border: 3px solid var(--bfb-line);
  border-top-color: var(--bfb-accent);
  border-radius: 50%;
  animation: bfb-rot 0.9s linear infinite;
}
@keyframes bfb-rot { to { transform: rotate(360deg); } }

.bfb:fullscreen { --bfb-height: calc(100vh - 52px); border: 0; border-radius: 0; }
.bfb:-webkit-full-screen { --bfb-height: calc(100vh - 52px); border: 0; border-radius: 0; }

@media (max-width: 560px) {
  .bfb-bar { grid-template-columns: 1fr auto; padding: 8px 10px; }
  .bfb-start { grid-column: 1 / -1; order: 3; justify-content: center; }
  .bfb-start:empty, .bfb-start:has(> .bfb-chapters[hidden]) { display: none; }
  .bfb-mid { justify-content: flex-start; }
  .bfb-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bfb-shift, .bfb-pdf img { transition: none; }
  .bfb-spin, .bfb-ph { animation: none; }
}

/* Full-screen brochure page: the book fills the screen under the theme header */
.bfb-standalone { margin: 0; padding: 0; background: #f3f4f6; }
.bfb-fullscreen-page { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: none; min-height: 320px; margin: 0; padding: 0; height: calc(100vh - var(--bfb-header-h, 0px)); height: calc(100dvh - var(--bfb-header-h, 0px)); }
.bfb-fullscreen-page .bfb { flex: 1 1 auto; width: 100%; max-width: none; min-height: 0; height: auto; border: 0; border-radius: 0; }
.bfb-fullscreen-page .bfb-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.bfb-empty { margin: auto; padding: 24px; color: #1f2328; font: 16px/1.4 system-ui, sans-serif; }

/* Password form for protected brochures */
.bfb-locked { display: flex; justify-content: center; padding: 24px 16px; color: #1f2328; font: 15px/1.5 system-ui, sans-serif; }
.bfb-locked form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 420px; }
.bfb-locked p { margin: 0 0 12px; width: 100%; }
.bfb-locked input[type="password"] { flex: 1 1 200px; min-height: 40px; padding: 0 12px; border: 1px solid #d0d4da; border-radius: 6px; background: #fff; color: #1f2328; font: inherit; }
.bfb-locked input[type="submit"] { min-height: 40px; padding: 0 16px; border: 0; border-radius: 6px; background: #1f2328; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* Plain PDF links shown before the viewer loads (and to crawlers / no-JavaScript visitors) */
.bfb-embed:not(.bfb) { padding: 16px; border: 1px solid #e2e4e8; border-radius: 6px; background: #f3f4f6; }
.bfb-links { margin: 0; padding: 0 0 0 1.2em; font: 15px/1.6 system-ui, sans-serif; }