/* Flipbook Base Styles */
body, html { margin: 0; padding: 0; height: 100vh; font-family: Arial, sans-serif; overflow: hidden; background: #333; }
.flipbook-container { width: 100%; height: calc(100vh - 80px); display: flex; align-items: flex-start; justify-content: center; background: #333; overflow: hidden; position: relative; padding-top: 5px; }
#flipbook-wrapper { transform-origin: top center; transition: transform 0.3s ease; }
#flipbook { box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.page { width: 595px; height: 842px; position: relative; background: white; overflow: hidden; box-sizing: border-box; }
.title-page { background: white; }
.item-page { background: white; }
.section-page { background: white; }
.blank-page { background: white; }
.cover-image-container,.title-image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: block !important; }
.section-image-container { position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; display: block !important; }
.logo-container { position: absolute; z-index: 3; background-repeat: no-repeat; background-size: contain; }
.cover-title-box { z-index: 4; box-sizing: border-box; word-wrap: break-word; overflow: hidden; }
.cover-title-text { line-height: 1.2; font-weight: inherit; }
.cover-subtitle-text { line-height: 1.4; font-weight: inherit; }
.text-box { z-index: 2; box-sizing: border-box; word-wrap: break-word; overflow: hidden; }
.title-box { z-index: 4; }
.title-text { margin-bottom: 10px; line-height: 1.2; }
.body-text { line-height: 1.3; }
/* Artwork Container Base Styles */
.artwork-container { box-sizing: border-box; position: absolute; }
.artwork-container.side-by-side { display: flex; align-items: flex-start; justify-content: flex-start; }
.artwork-container.top-bottom { position: absolute; }
.artwork-container.text-only { position: absolute; }
.artwork-image-container { overflow: hidden; min-height: 150px; background-repeat: no-repeat; background-size: contain; background-position: top center; }
.artwork-image { width: 100% !important; height: 100% !important; display: block; }
/* Side-by-side text - flex item for natural alignment */
.artwork-text-container.side-by-side-text { 
  flex: 1; 
  min-width: 0; 
  box-sizing: border-box; 
}
/* Top-bottom text - positioned below image */
.artwork-text-container.top-bottom-text { 
  position: absolute; 
}
/* Text-only containers (double page right side) - positioned at top */
.artwork-text-container.text-only { 
  position: absolute; 
  top: 0; 
}
/* Dynamic Text Flow CSS */
.dynamic-text-container {
  overflow: hidden;
}
.flowing-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
}

.artwork-text-container { box-sizing: border-box; overflow: visible; }
.artwork-text-container div { margin-bottom: 5px; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; }
.artwork-artist { font-weight: bold; }
.artwork-title { font-weight: bold; font-style: italic; }
.artwork-id { font-size: 0.9em; color: #666; }
.artwork-details { text-align: justify; line-height: 1.3; margin: 8px 0; }
.artwork-size { font-size: 0.9em; color: #666; }
.artwork-price { font-weight: bold; margin-top: 10px; color: #333; }
.page-number { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #666; z-index: 10; }
.nav-panel { position: fixed; top: 0; left: 0; height: 100vh; width: 70px; background: rgba(0, 0, 0, 0.9); color: white; z-index: 100; overflow: visible; box-shadow: 2px 0 10px rgba(0,0,0,0.3); display: flex; flex-direction: column; transition: transform 0.3s ease; }
.nav-content { display: flex; flex-direction: column; padding: 20px 10px; gap: 8px; align-items: center; }
.nav-content button { width: 50px; height: 40px; background: #333; border: 1px solid #555; color: white; cursor: pointer; border-radius: 6px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.nav-content button:hover:not(:disabled) { background: #555; transform: scale(1.05); }
.nav-content button:disabled { opacity: 0.5; cursor: not-allowed; }
.nav-content .toggle-btn.active { background: #007acc !important; }
.page-display, .zoom-display { background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 10px; text-align: center; font-weight: bold; width: 45px; margin: 2px 0; }
.separator { height: 1px; background: #555; width: 80%; margin: 4px 0; }
.mobile-nav-toggle { display: none; position: fixed; top: 20px; left: 20px; width: 50px; height: 50px; background: rgba(0,0,0,0.8); border: none; color: white; border-radius: 25px; font-size: 18px; z-index: 200; cursor: pointer; transition: all 0.3s ease; }
.mobile-nav-toggle:hover { background: rgba(0,0,0,0.95); transform: scale(1.1); }
.nav-modal { position: fixed; z-index: 200; background: rgba(0,0,0,0.9); padding: 20px; border-radius: 8px; border: 2px solid #555; }
.modal-content { display: flex; gap: 8px; align-items: center; }
.modal-content input { padding: 8px; border: 1px solid #555; background: #333; color: white; border-radius: 4px; width: 80px; }
.action-btn { background: #007acc !important; border: none !important; color: white !important; padding: 8px 12px !important; cursor: pointer; border-radius: 4px !important; }
.action-btn:hover { background: #005999 !important; }
.speed-btn { background: #000 !important; color: #ccc !important; border: 1px solid #333 !important; padding: 8px 12px !important; cursor: pointer; border-radius: 4px !important; min-width: 50px !important; font-weight: bold !important; }
.speed-btn:hover { background: #222 !important; color: #fff !important; }
.speed-btn.active { background: #007acc !important; color: white !important; border-color: #007acc !important; }
.loop-btn { background: #000 !important; color: #ccc !important; border: 1px solid #333 !important; padding: 8px 12px !important; cursor: pointer; border-radius: 4px !important; }
.loop-btn:hover { background: #222 !important; color: #fff !important; }
.loop-btn.active { background: #007acc !important; color: white !important; border-color: #007acc !important; }
.flipbook-container { margin-left: 70px; width: calc(100% - 70px); height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: #333; padding-top: 5px; }
@media (max-width: 768px) and (min-width: 481px) {
  .nav-panel { width: 60px; }
  .nav-content button { width: 45px; height: 35px; }
  .flipbook-container { margin-left: 60px; width: calc(100% - 60px); }
}
@media (max-width: 480px) {
  .nav-panel { transform: translateX(-100%); }
  .nav-panel.mobile-visible { transform: translateX(0); }
  .mobile-nav-toggle { display: block; }
  .flipbook-container { margin-left: 0; width: 100%; padding: 80px 5px 5px 5px; box-sizing: border-box; }
  .nav-content button { width: 55px; height: 45px; font-size: 18px; }
  .page-display, .zoom-display { padding: 6px 10px; font-size: 11px; width: 50px; }
  .nav-modal { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; max-width: 90vw; box-sizing: border-box; }
  .modal-content { flex-wrap: wrap; gap: 12px; }
  .modal-content button { min-height: 44px; padding: 10px 15px; }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .flipbook-container { padding: 5px 5px 5px 5px; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .flipbook-container { padding: 80px 5px 5px 5px; }
}
.turn-page { background-color: white; }
.hard { background: #333 !important; color: #fff; border: solid 1px #666; }
.touch-indicators { position: fixed; top: 50%; left: 0; right: 0; height: 100px; pointer-events: none; z-index: 50; opacity: 0; transition: opacity 0.5s ease; }
.touch-indicators.show { opacity: 1; }
.touch-hint { position: absolute; top: 50%; width: 60px; height: 60px; background: rgba(0,0,0,0.7); border-radius: 30px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; transform: translateY(-50%); transition: all 0.3s ease; }
.touch-hint.left { left: 20px; }
.touch-hint.right { right: 20px; }
.touch-hint.active { background: rgba(0,123,255,0.8); transform: translateY(-50%) scale(1.2); }
@media (min-width: 481px) { .touch-indicators { display: none; } }