/* Themify Icons - from local folder */
@font-face {
    font-family: 'themify';
    src: url('themify-icons/fonts/themify.eot');
    src: url('themify-icons/fonts/themify.eot?#iefix') format('embedded-opentype'),
         url('themify-icons/fonts/themify.woff') format('woff'),
         url('themify-icons/fonts/themify.ttf') format('truetype'),
         url('themify-icons/fonts/themify.svg#themify') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="ti-"]:before,[class*=" ti-"]:before {
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ti-wand:before { content: "\e600"; }
.ti-volume:before { content: "\e601"; }
.ti-user:before { content: "\e602"; }
.ti-unlock:before { content: "\e603"; }
.ti-unlink:before { content: "\e604"; }
.ti-trash:before { content: "\e605"; }
.ti-thought:before { content: "\e606"; }
.ti-target:before { content: "\e607"; }
.ti-tag:before { content: "\e608"; }
.ti-tablet:before { content: "\e609"; }
.ti-star:before { content: "\e60a"; }
.ti-spray:before { content: "\e60b"; }
.ti-signal:before { content: "\e60c"; }
.ti-shopping-cart:before { content: "\e60d"; }
.ti-shopping-cart-full:before { content: "\e60e"; }
.ti-settings:before { content: "\e60f"; }
.ti-search:before { content: "\e610"; }
.ti-zoom-in:before { content: "\e611"; }
.ti-zoom-out:before { content: "\e612"; }
.ti-cut:before { content: "\e613"; }
.ti-ruler:before { content: "\e614"; }
.ti-ruler-pencil:before { content: "\e615"; }
.ti-ruler-alt:before { content: "\e616"; }
.ti-bookmark:before { content: "\e617"; }
.ti-bookmark-alt:before { content: "\e618"; }
.ti-reload:before { content: "\e619"; }
.ti-plus:before { content: "\e61a"; }
.ti-pin:before { content: "\e61b"; }
.ti-pencil:before { content: "\e61c"; }
.ti-pencil-alt:before { content: "\e61d"; }
.ti-paint-roller:before { content: "\e61e"; }
.ti-paint-bucket:before { content: "\e61f"; }
.ti-na:before { content: "\e620"; }
.ti-mobile:before { content: "\e621"; }
.ti-minus:before { content: "\e622"; }
.ti-medall:before { content: "\e623"; }
.ti-medall-alt:before { content: "\e624"; }
.ti-marker:before { content: "\e625"; }
.ti-marker-alt:before { content: "\e626"; }
.ti-arrow-up:before { content: "\e627"; }
.ti-arrow-right:before { content: "\e628"; }
.ti-arrow-left:before { content: "\e629"; }
.ti-arrow-down:before { content: "\e62a"; }
.ti-lock:before { content: "\e62b"; }
.ti-location-arrow:before { content: "\e62c"; }
.ti-link:before { content: "\e62d"; }
.ti-layout:before { content: "\e62e"; }
.ti-layers:before { content: "\e62f"; }
.ti-layers-alt:before { content: "\e630"; }
.ti-key:before { content: "\e631"; }
.ti-import:before { content: "\e632"; }
.ti-image:before { content: "\e633"; }
.ti-heart:before { content: "\e634"; }
.ti-heart-broken:before { content: "\e635"; }
.ti-hand-stop:before { content: "\e636"; }
.ti-hand-open:before { content: "\e637"; }
.ti-hand-drag:before { content: "\e638"; }
.ti-folder:before { content: "\e639"; }
.ti-flag:before { content: "\e63a"; }
.ti-flag-alt:before { content: "\e63b"; }
.ti-flag-alt-2:before { content: "\e63c"; }
.ti-eye:before { content: "\e63d"; }
.ti-export:before { content: "\e63e"; }
.ti-exchange-vertical:before { content: "\e63f"; }
.ti-desktop:before { content: "\e640"; }
.ti-cup:before { content: "\e641"; }
.ti-crown:before { content: "\e642"; }
.ti-comments:before { content: "\e643"; }
.ti-comment:before { content: "\e644"; }
.ti-comment-alt:before { content: "\e645"; }
.ti-close:before { content: "\e646"; }
.ti-clip:before { content: "\e647"; }
.ti-angle-up:before { content: "\e648"; }
.ti-angle-right:before { content: "\e649"; }
.ti-angle-left:before { content: "\e64a"; }
.ti-angle-down:before { content: "\e64b"; }
.ti-check:before { content: "\e64c"; }
.ti-check-box:before { content: "\e64d"; }
.ti-camera:before { content: "\e64e"; }
.ti-announcement:before { content: "\e64f"; }
.ti-brush:before { content: "\e650"; }
.ti-briefcase:before { content: "\e651"; }
.ti-bolt:before { content: "\e652"; }
.ti-bolt-alt:before { content: "\e653"; }
.ti-blackboard:before { content: "\e654"; }
.ti-bag:before { content: "\e655"; }
.ti-move:before { content: "\e656"; }
.ti-arrows-vertical:before { content: "\e657"; }
.ti-arrows-horizontal:before { content: "\e658"; }
.ti-fullscreen:before { content: "\e659"; }
.ti-download:before { content: "\e6a7"; }
.ti-menu-alt:before { content: "\e68f"; }
.ti-layout-grid2:before { content: "\e709"; }

/* DFLIP Custom Styles */
:root {
  --dflip-color-primary: #007bff;
  --dflip-color-secondary: #6c757d;
  --dflip-color-text: #000;
  --dflip-color-text-light: #fff;
  --dflip-color-border: #dee2e6;
}

.dflip-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.dflip-container .btn,
.dflip-container button {
  font-family: inherit;
}

/* Control Bar Styles */
.dflip-controls {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.dflip-controls button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.dflip-controls button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.dflip-controls button:active {
  transform: scale(0.95);
}

/* Page Number Display */
.dflip-page-number,
.dflip-page-info {
  color: white;
  padding: 0 12px;
  font-size: 13px;
}

/* Thumbnail Panel */
.dflip-thumbPanel {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dflip-thumbPanel .thumb {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.dflip-thumbPanel .thumb:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.dflip-thumbPanel .thumb.active {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

/* ========================================
   PDF Viewer Responsive Styles
   ======================================== */

/* Base styles for flipbook container */
._df_book,
#df_manual_book {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.pdf-viewer-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Desktop (default) - 768px and above */
@media (min-width: 768px) {
  .container.mt-4 {
    max-width: 1140px;
  }

  #df_manual_book {
    height: 800px !important;
  }

  .dflip-controls button {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Tablet - 576px to 767px */
@media (max-width: 767px) {
  .container.mt-4 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .container h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem !important;
  }

  #df_manual_book {
    height: 600px !important;
    margin: 0 -10px;
  }

  .dflip-controls {
    padding: 6px;
    gap: 3px;
  }

  .dflip-controls button {
    padding: 6px 10px;
    font-size: 12px;
  }

  .dflip-controls button span.text {
    display: none; /* Hide button text, keep icons only */
  }

  .dflip-page-number {
    font-size: 12px;
    padding: 0 8px;
  }
}

/* Mobile - 576px and below */
@media (max-width: 575px) {
  .container.mt-4 {
    padding-left: 5px;
    padding-right: 5px;
  }

  .container h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem !important;
    text-align: center;
  }

  #df_manual_book {
    height: 500px !important;
    margin: 0 -5px;
  }

  /* Simplify controls for mobile */
  .dflip-controls {
    padding: 4px;
    gap: 2px;
    justify-content: center;
  }

  .dflip-controls button {
    padding: 6px 8px;
    font-size: 11px;
    min-width: 36px;
  }

  .dflip-controls button span.text {
    display: none !important;
  }

  .dflip-page-number {
    font-size: 11px;
    padding: 0 6px;
  }

  /* Hide some controls on small mobile */
  .dflip-controls .share-btn,
  .dflip-controls .sound-btn,
  .dflip-controls .outline-btn {
    display: none !important;
  }

  /* Thumbnail panel adjustments */
  .dflip-thumbPanel {
    width: 90% !important;
    max-width: 300px;
  }

  .dflip-thumbPanel .thumb {
    width: 60px !important;
    height: 80px !important;
  }
}

/* Extra small mobile - 400px and below */
@media (max-width: 399px) {
  .container h2 {
    font-size: 1.1rem;
  }

  #df_manual_book {
    height: 400px !important;
  }

  .dflip-controls button {
    padding: 5px 6px;
    font-size: 10px;
    min-width: 32px;
  }

  .dflip-page-number {
    font-size: 10px;
    padding: 0 4px;
  }

  /* Hide download on very small screens */
  .dflip-controls .download-btn {
    display: none !important;
  }
}
.df-ui-controls{
    
}
/* Landscape mobile orientation */
@media (max-width: 767px) and (orientation: landscape) {
    #df_manual_book {
        height: 450px !important;
    }

    .container h2 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem !important;
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  .dflip-controls button {
    min-width: 44px; /* iOS recommended touch target size */
    min-height: 44px;
  }

  /* Larger touch targets for page navigation */
  .dflip-button-area {
    min-width: 50px !important;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dflip-controls button {
    border-width: 0.5px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  #df_manual_book,
  .dflip-controls button {
    transition: none !important;
    animation: none !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .dflip-controls {
    background: rgba(0, 0, 0, 0.9);
  }

  .dflip-controls button {
    border-color: rgba(255, 255, 255, 0.3);
  }
}

/* Print styles */
@media print {
  .dflip-controls,
  .dflip-thumbPanel {
    display: none !important;
  }

  #df_manual_book {
    height: auto !important;
  }
}
/* Outline/Bookmark Panel */
.dflip-outline {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

.dflip-outline a,
.dflip-outline li {
  color: white;
}

.dflip-outline a:hover {
  color: #007bff;
  text-decoration: underline;
}

/* Loading Indicator */
.dflip-loader,
.dflip-loading {
  color: #007bff;
}

/* Fullscreen Mode */
.dflip-fullscreen {
  background: #000;
  z-index: 9999;
}

.dflip-fullscreen .dflip-container {
  width: 100%;
  height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dflip-controls {
    padding: 6px;
    font-size: 12px;
  }

  .dflip-controls button {
    padding: 6px 10px;
    font-size: 11px;
  }

  .dflip-container {
    max-width: 100vw;
  }
}

/* Print Styles */
@media print {
  .dflip-controls,
  .dflip-thumbPanel,
  .dflip-outline {
    display: none;
  }
}