/* Doafeer PDF.js Host — Frontend Fullscreen Styles */
/* v1.1.0 */

.df-pdfjs-wrap {
  position: relative;
}

.df-fs-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999; /* Ensure it's above the iframe */
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.df-fs-toggle:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.df-fs-toggle.df-fs-active {
  /* Styles for when fullscreen is active, e.g., change icon or color */
  background-color: rgba(255, 0, 0, 0.6); /* Example: red when active */
}

/* Fullscreen mode styles */
.df-pdfjs-wrap:-webkit-full-screen,
.df-pdfjs-wrap:-moz-full-screen,
.df-pdfjs-wrap:-ms-fullscreen,
.df-pdfjs-wrap:fullscreen,
.df-pdfjs-wrap.df-fullscreen {
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #fff; /* Or black, depending on preference */
  z-index: 99999; /* Ensure it's on top of everything */
}

.df-pdfjs-wrap:-webkit-full-screen .df-pdfjs-frame,
.df-pdfjs-wrap:-moz-full-screen .df-pdfjs-frame,
.df-pdfjs-wrap:-ms-fullscreen .df-pdfjs-frame,
.df-pdfjs-wrap:fullscreen .df-pdfjs-frame,
.df-pdfjs-wrap.df-fullscreen .df-pdfjs-frame {
  width: 100% !important;
  height: 100% !important;
}