/* css/brochure-dearflip-custom.css */

/*
  DearFlip is quite themeable through its own CSS and JS options.
  Use this file for minor overrides or additional styling specific to your theme's integration.
*/

/* Ensure the container has some basic properties if not set by DearFlip options */
#brochure-flipbook-container.df-container {
  margin-left: auto;
  margin-right: auto;
  /* If you don't set height/width in JS, you might need to define them here.
       However, DearFlip often works best when it controls these or via aspectRatio. */
  /* Example: Set a max-width for the flipbook on larger screens */
  /* max-width: 1000px; */
}

/* Example: Style the loading message if needed, though JS updates it */
#dearflip-loading {
  /* Styles for the loading placeholder before DearFlip takes over */
}

/* Example: Adjust z-index if DearFlip conflicts with other fixed/absolute elements */
/* .df-container {
    z-index: 10;
} */

/* Example: Custom styling for the outer viewer section */
.brochure-viewer-section {
  background-color: #f9fafb; /* Light grey background for the section */
}

/* If you want to hide the initial loading message from HTML once JS takes over */
/* Note: The JS already hides #dearflip-loading on success, but this can be a fallback */
/* #dearflip-loading:not(:empty) {
    display: block;
}
.df-container ~ #dearflip-loading {
    display: none;
} */