/* =========================================================
   Zona Real3D FlipBook Lite – Transparent stage + toolbar
   Version: 1.0.3
   IMPORTANT: Scoped to .real3dflipbook / .real3dflipbook-container ONLY.
   This prevents affecting other plugins (e.g., 3D Bookshelf).
   ========================================================= */

:root {
  --zona-r3d-stage-bg: transparent;
  --zona-r3d-toolbar-bg: rgba(10, 10, 20, 0.20); /* subtle glass */
  --zona-r3d-toolbar-border: rgba(255, 255, 255, 0.18);
  --zona-r3d-toolbar-color: rgba(255, 255, 255, 0.95);
  --zona-r3d-toolbar-color-muted: rgba(255, 255, 255, 0.65);
  --zona-r3d-toolbar-icon-bg: rgba(255, 255, 255, 0.10);
  --zona-r3d-toolbar-icon-bg-hover: rgba(255, 255, 255, 0.18);
}

/* ===== Stage / viewer backgrounds ===== */
.real3dflipbook,
.real3dflipbook-container,
.real3dflipbook .flipbook-container,
.real3dflipbook .flipbook-stage,
.real3dflipbook .flipbook,
.real3dflipbook canvas,
.real3dflipbook-container canvas {
  background: var(--zona-r3d-stage-bg) !important;
  background-color: var(--zona-r3d-stage-bg) !important;
}

/* Some internal layers (Real3D) */
.real3dflipbook .flipbook-wrapper,
.real3dflipbook .flipbook-main-wrapper,
.real3dflipbook .flipbook-bookLayer,
.real3dflipbook .flipbook-center-container3,
.real3dflipbook .flipbook-zoomLayer-inside,
.real3dflipbook .flipbook-book,
.real3dflipbook .flipbook-book3,
.real3dflipbook .flipbook-book-webgl,
.real3dflipbook .flipbook-page3-bg {
  background: var(--zona-r3d-stage-bg) !important;
  background-color: var(--zona-r3d-stage-bg) !important;
}

/* ===== Bottom toolbar (white bar) =====
   Real3D uses .flipbook-menuBottom as the bar container.
*/
.real3dflipbook .flipbook-menuBottom,
.real3dflipbook-container .flipbook-menuBottom {
  background: var(--zona-r3d-toolbar-bg) !important;
  border-top: 1px solid var(--zona-r3d-toolbar-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Buttons/icons */
.real3dflipbook .flipbook-menu-btn,
.real3dflipbook-container .flipbook-menu-btn {
  color: var(--zona-r3d-toolbar-color) !important;
}

/* Many builds wrap buttons in .flipbook-menu-btn-wrapper */
.real3dflipbook .flipbook-menu-btn-wrapper,
.real3dflipbook-container .flipbook-menu-btn-wrapper {
  background: transparent !important;
}

/* Icon hit areas (SVG/font icons inherit currentColor in most builds) */
.real3dflipbook .flipbook-menu-btn .flipbook-icon,
.real3dflipbook-container .flipbook-menu-btn .flipbook-icon,
.real3dflipbook .flipbook-menu-btn svg,
.real3dflipbook-container .flipbook-menu-btn svg {
  fill: currentColor !important;
  color: currentColor !important;
}

/* Make the buttons “brighter” with a glass pill behind them */
.real3dflipbook .flipbook-menu-btn,
.real3dflipbook-container .flipbook-menu-btn {
  background: var(--zona-r3d-toolbar-icon-bg) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px !important;
}

.real3dflipbook .flipbook-menu-btn:hover,
.real3dflipbook-container .flipbook-menu-btn:hover {
  background: var(--zona-r3d-toolbar-icon-bg-hover) !important;
}

/* Reduce any “white strip” under the toolbar if present */
.real3dflipbook .flipbook-menu-fixed,
.real3dflipbook-container .flipbook-menu-fixed {
  background: transparent !important;
}

/* ===== Optional: edge-to-edge fit =====
   If your widget container is wide, this helps the stage fill it.
*/
.real3dflipbook,
.real3dflipbook-container {
  width: 100% !important;
  max-width: 100% !important;
}