/*
 * Discover Publications — Modern Flipbook Theme
 * Overrides Real3D Flipbook default styles with a clean, contemporary design.
 * Loaded after flipbook.min.css so these rules take precedence.
 */

/* ─── Google Font ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ─── CSS Custom Properties ────────────────────────────────────────────────── */
.real3dflipbook,
.real3dflipbook-lightbox,
[class*="real3dflipbook"] {
  --fb-font:           'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fb-radius:         14px;
  --fb-toolbar-bg:     rgba(12, 12, 14, 0.82);
  --fb-toolbar-border: rgba(255, 255, 255, 0.07);
  --fb-btn-hover:      rgba(255, 255, 255, 0.10);
  --fb-btn-active:     rgba(255, 255, 255, 0.18);
  --fb-icon-color:     rgba(255, 255, 255, 0.82);
  --fb-icon-hover:     rgba(255, 255, 255, 1);
  --fb-accent:         #5b8dee;
  --fb-panel-bg:       rgba(14, 14, 18, 0.90);
  --fb-panel-border:   rgba(255, 255, 255, 0.06);
  --fb-text:           rgba(255, 255, 255, 0.80);
  --fb-text-muted:     rgba(255, 255, 255, 0.40);
  --fb-arrow-bg:       rgba(8, 8, 10, 0.55);
  --fb-arrow-hover:    rgba(8, 8, 10, 0.82);
  --fb-transition:     0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Main Wrapper ─────────────────────────────────────────────────────────── */
.flipbook-wrapper {
  border-radius: var(--fb-radius) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 32px 64px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
  font-family: var(--fb-font) !important;
}

/* ─── Toolbar Base ─────────────────────────────────────────────────────────── */
.flipbook-menuBottom,
.flipbook-menuTop {
  font-family: var(--fb-font) !important;
}

/* ── Hide both toolbars ── */
.flipbook-menuTop {
  display: none !important;
}

/*
 * When our JS overlay is active (.dui-active added by discover-ui.js),
 * push the original bottom toolbar offscreen.
 * We use position+clip instead of display:none so the buttons remain
 * clickable via JavaScript's native .click() method.
 */
.dui-active .flipbook-menuBottom {
  position: absolute !important;
  left: -9999px !important;
  top:  -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
/* The individual buttons must still receive programmatic .click() calls */
.dui-active .flipbook-menuBottom .flipbook-menu-btn {
  pointer-events: auto !important;
}

/* ─── Menu Buttons ─────────────────────────────────────────────────────────── */
.flipbook-menu-btn {
  border-radius: 8px !important;
  color: var(--fb-icon-color) !important;
  transition:
    background var(--fb-transition),
    color var(--fb-transition),
    transform 0.12s ease !important;
  -webkit-transition:
    background var(--fb-transition),
    color var(--fb-transition),
    transform 0.12s ease !important;
  position: relative;
  overflow: hidden;
}

.flipbook-menu-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;
  transition: background var(--fb-transition);
}

.flipbook-menu-btn:hover {
  background: var(--fb-btn-hover) !important;
  color: var(--fb-icon-hover) !important;
  transform: translateY(-1px);
}

.flipbook-menu-btn:active {
  transform: translateY(0) scale(0.94) !important;
}

.flipbook-btn-active,
.flipbook-menu-btn.flipbook-btn-active {
  background: var(--fb-btn-active) !important;
  color: var(--fb-icon-hover) !important;
}

/* Icon sizing refinement */
.flipbook-icon {
  font-size: 15px !important;
}

/* ─── Page Number Display ──────────────────────────────────────────────────── */
.flipbook-currentPageNumber {
  font-family: var(--fb-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  padding: 4px 14px !important;
  color: var(--fb-icon-color) !important;
  min-width: 54px;
  text-align: center;
}

.flipbook-currentPageInput {
  font-family: var(--fb-font) !important;
  font-size: 12px !important;
  color: var(--fb-icon-hover) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.flipbook-currentPageInput:focus {
  outline: 2px solid rgba(91, 141, 238, 0.50) !important;
  border-color: var(--fb-accent) !important;
}

/* ─── Side Navigation Arrows ───────────────────────────────────────────────── */
.flipbook-arrow-wrapper {
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  -webkit-transition: opacity 0.25s ease !important;
}

.flipbook-wrapper:hover .flipbook-arrow-wrapper,
.flipbook-main-wrapper:hover .flipbook-arrow-wrapper {
  opacity: 1 !important;
}

.flipbook-left-arrow,
.flipbook-right-arrow,
.flipbook-first-arrow,
.flipbook-last-arrow {
  background: var(--fb-arrow-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  width: 46px !important;
  height: 72px !important;
  margin-top: -36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 10px 10px 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-left: none !important;
  transition:
    background var(--fb-transition),
    width var(--fb-transition) !important;
  -webkit-transition:
    background var(--fb-transition),
    width var(--fb-transition) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.flipbook-right-arrow,
.flipbook-last-arrow {
  border-radius: 10px 0 0 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-right: none !important;
}

.flipbook-left-arrow:hover,
.flipbook-first-arrow:hover {
  background: var(--fb-arrow-hover) !important;
  width: 54px !important;
  color: #fff !important;
}

.flipbook-right-arrow:hover,
.flipbook-last-arrow:hover {
  background: var(--fb-arrow-hover) !important;
  width: 54px !important;
  color: #fff !important;
}

/* Arrow icons */
.flipbook-left-arrow .flipbook-icon,
.flipbook-right-arrow .flipbook-icon,
.flipbook-first-arrow .flipbook-icon,
.flipbook-last-arrow .flipbook-icon {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* ─── Thumbnail Panel ──────────────────────────────────────────────────────── */
.flipbook-thumbHolder {
  background: var(--fb-panel-bg) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-right: 1px solid var(--fb-panel-border) !important;
}

.flipbook-thumbsScroller {
  padding: 20px 12px 32px !important;
}

.flipbook-thumb {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition:
    border-color var(--fb-transition),
    transform var(--fb-transition),
    box-shadow var(--fb-transition) !important;
  -webkit-transition:
    border-color var(--fb-transition),
    transform var(--fb-transition),
    box-shadow var(--fb-transition) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

.flipbook-thumb:hover {
  border-color: rgba(91, 141, 238, 0.55) !important;
  transform: scale(1.04) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(91, 141, 238, 0.30) !important;
}

.flipbook-thumb-num {
  font-family: var(--fb-font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--fb-text-muted) !important;
  letter-spacing: 0.3px !important;
}

/* ─── Table of Contents Panel ──────────────────────────────────────────────── */
.flipbook-tocHolder {
  background: var(--fb-panel-bg) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-right: 1px solid var(--fb-panel-border) !important;
}

.flipbook-toc {
  top: 0 !important;
}

.flipbook-tocItem {
  font-family: var(--fb-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--fb-text) !important;
  padding: 9px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background var(--fb-transition) !important;
  -webkit-transition: background var(--fb-transition) !important;
}

.flipbook-tocItem:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.flipbook-tocItem .title {
  color: var(--fb-text) !important;
}

.flipbook-tocItem .title:hover {
  color: var(--fb-accent) !important;
  text-decoration: none !important;
}

.flipbook-tocItem .right {
  color: var(--fb-text-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ─── Search Bar ───────────────────────────────────────────────────────────── */
.flipbook-findbar {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.flipbook-findbar input {
  font-family: var(--fb-font) !important;
  font-size: 13px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 6px 12px !important;
  margin: 4px 8px !important;
  width: calc(100% - 32px) !important;
  transition: border-color var(--fb-transition), background var(--fb-transition) !important;
}

.flipbook-findbar input:focus {
  outline: none !important;
  border-color: var(--fb-accent) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 0 3px rgba(91, 141, 238, 0.18) !important;
}

.flipbook-find-info {
  font-family: var(--fb-font) !important;
  font-size: 12px !important;
  color: var(--fb-text-muted) !important;
}

.flipbook-search-match {
  font-family: var(--fb-font) !important;
  font-size: 13px !important;
  color: var(--fb-text) !important;
  padding: 8px 18px !important;
  transition: background var(--fb-transition) !important;
}

.flipbook-search-match:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
}

/* ─── Share / Sub-menu ─────────────────────────────────────────────────────── */
.flipbook-sub-menu {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.flipbook-sub-menu-content {
  background: rgba(18, 18, 22, 0.96) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  border: 1px solid var(--fb-panel-border) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

.flipbook-menu-header {
  font-family: var(--fb-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fb-icon-hover) !important;
  letter-spacing: 0.2px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--fb-panel-border) !important;
  margin-bottom: 12px !important;
}

/* Share social icons */
.flipbook-share ul li {
  transition: opacity var(--fb-transition), transform var(--fb-transition) !important;
}

.flipbook-share ul li:hover {
  opacity: 0.8 !important;
  transform: translateY(-2px) !important;
}

/* ─── Close Button ─────────────────────────────────────────────────────────── */
.flipbook-btn-close {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  top: 10px !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  transition:
    background var(--fb-transition),
    transform 0.12s ease,
    border-color var(--fb-transition) !important;
  -webkit-transition:
    background var(--fb-transition),
    transform 0.12s ease,
    border-color var(--fb-transition) !important;
}

.flipbook-btn-close:hover {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  transform: scale(1.08) !important;
}

/* ─── Preloader / Loading Screen ───────────────────────────────────────────── */
.cssload-container {
  background: rgba(8, 8, 10, 0.60) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.flipbook-loading-bg {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  margin: -26px !important;
}

.cssload-speeding-wheel {
  width: 28px !important;
  height: 28px !important;
  border-width: 2.5px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-left-color: rgba(255, 255, 255, 0.85) !important;
  border-right-color: rgba(255, 255, 255, 0.12) !important;
  margin-left: -14px !important;
  margin-top: -14px !important;
}

.flipbook-loading-text {
  font-family: var(--fb-font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 32px !important;
}

/* ─── Lightbox Overlay ─────────────────────────────────────────────────────── */
.flipbook-overlay {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ─── Tooltip ──────────────────────────────────────────────────────────────── */
.flipbook-tooltip {
  font-family: var(--fb-font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  background: rgba(10, 10, 14, 0.92) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

/* ─── Notes ────────────────────────────────────────────────────────────────── */
.flipbook-note-display {
  font-family: var(--fb-font) !important;
  background: rgba(18, 18, 22, 0.96) !important;
  border-radius: 12px !important;
  border: 1px solid var(--fb-panel-border) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.20) !important;
}

.flipbook-note-display .note-article {
  color: var(--fb-text) !important;
  font-family: var(--fb-font) !important;
  font-size: 13px !important;
}

/* ─── Print Modal ──────────────────────────────────────────────────────────── */
.printModal {
  font-family: var(--fb-font) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ─── Close Button ─────────────────────────────────────────────────────────── */
/* Matches the corner-button aesthetic: transparent, white, bigger */
.flipbook-btn-close {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  top: 12px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.80) !important;
  opacity: 1 !important;
  transition:
    color var(--fb-transition),
    background var(--fb-transition),
    transform 0.12s ease !important;
  -webkit-transition:
    color var(--fb-transition),
    background var(--fb-transition),
    transform 0.12s ease !important;
}

.flipbook-btn-close:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(0, 0, 0, 0.20) !important;
  border-color: transparent !important;
  transform: scale(1.10) !important;
}

.flipbook-btn-close .flipbook-icon {
  font-size: 22px !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISCOVER FLOATING OVERLAY
   Corner buttons + zoom pill + center play button.
   Injected by js/discover-ui.js after flipbook initialises.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure the wrapper is a positioning context */
.flipbook-wrapper {
  position: relative !important;
}

/* Full-size transparent layer that sits above the canvas */
.dui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 500;
}

/* ── Base button style (our own <button> elements, class dui-btn) ────────── */
.dui-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.dui-btn svg {
  display: block;
  pointer-events: none;
}

/* ── Corner containers ──────────────────────────────────────────────────── */
.dui-corner {
  position: absolute;
  pointer-events: auto;
  padding: 12px;
}

.dui-tl { top: 0; left: 0; }
.dui-bl { bottom: 0; left: 0; }
.dui-br { bottom: 0; right: 0; }

/* Corner buttons */
.dui-corner .dui-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.80);
  transition:
    color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.12s ease;
}

.dui-corner .dui-btn svg {
  width: 22px;
  height: 22px;
}

/* Sound: slightly more transparent */
.dui-bl .dui-btn {
  color: rgba(255, 255, 255, 0.60);
}

.dui-corner .dui-btn:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 0.22);
  transform: scale(1.08);
}

.dui-corner .dui-btn:active {
  transform: scale(0.94);
}

/* Sound muted state */
.dui-sound.dui-muted {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ── Zoom pill (bottom-center) ──────────────────────────────────────────── */
.dui-pill {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 40px;
  padding: 4px 6px;
  gap: 2px;
}

.dui-pill .dui-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  transition:
    color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.dui-pill .dui-btn svg {
  width: 18px;
  height: 18px;
}

.dui-pill .dui-btn:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.14);
}

/* Subtle divider between the two zoom buttons */
.dui-zoom-in {
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-left: 4px !important;
  margin-left: 2px !important;
}

/* ── Autoplay / play button (centre, page 1 only) ───────────────────────── */
.dui-play-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.35s ease;
  -webkit-transition: opacity 0.35s ease;
}

.dui-play-wrap.dui-play-visible {
  opacity: 1;
}

.dui-play-wrap .dui-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.88);
  transition:
    background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.12s ease;
}

.dui-play-wrap .dui-btn svg {
  width: 26px;
  height: 26px;
}

.dui-play-wrap .dui-btn:hover {
  background: rgba(0, 0, 0, 0.52);
  transform: scale(1.07);
  color: #fff;
}

/* ─── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .flipbook-wrapper {
    border-radius: 0 !important;
  }

  .flipbook-left-arrow,
  .flipbook-right-arrow {
    width: 36px !important;
    height: 56px !important;
  }

  .flipbook-left-arrow:hover,
  .flipbook-right-arrow:hover {
    width: 42px !important;
  }

  .flipbook-btn-close {
    width: 40px !important;
    height: 40px !important;
    top: 8px !important;
    right: 8px !important;
  }

  .dui-corner .flipbook-menu-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .dui-corner .flipbook-icon {
    font-size: 19px !important;
  }

  .dui-pill {
    bottom: 12px;
  }

  .dui-play-wrap .flipbook-menu-btn {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ─── Smooth page-turn shadow softening ───────────────────────────────────── */
.flipbook-page3-shadow {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* ─── Admin editor — InDesign URL resolve status indicator ─────────────────── */
#r3d-indd-resolve-status {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: #2271b1;
  font-style: italic;
  vertical-align: middle;
}

#r3d-indd-resolve-status.error {
  color: #d63638;
}

#r3d-indd-resolve-status.success {
  color: #00a32a;
}