/* 
 * 电子画册基础样式
 * 自适应尺寸，保持2:1比例，切换按钮在画册外部
 * ============================================
 */

/* 隐藏不需要的元素 */
.wrap,
.footer,
.site_banner,
.banner,
.nav,
.linkmap {
 display: none !important;
}

/* 页面基础设置 */
html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #2c3e50;
 position: relative;
}

body {
 background: url(/Sites/Uploaded/UserUpLoad/20260210/20260210155533.png) !important;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 position: relative;
}

/* 添加半透明遮罩，使背景图更深邃，突出画册 */
body::before {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.4);
 z-index: 1;
 pointer-events: none;
}

.wrap_main,
.main {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}
  .backwh {
 position: absolute;
 top: 1.5rem;
 left: 1.5rem;
 z-index: 20;
   }

   /* ===== 核心按钮样式 ===== */
   .back-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 18px 8px 14px;
 background: rgba(255, 252, 248, 0.72);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(200, 188, 176, 0.25);
 border-radius: 40px;
 color: #4a423c;
 font-family:
   'Inter',
   -apple-system,
   BlinkMacSystemFont,
   'Segoe UI',
   Roboto,
   sans-serif;
 font-size: 0.9rem;
 font-weight: 440;
 letter-spacing: 0.02em;
 text-decoration: none;
 box-shadow:
   0 2px 12px rgba(0, 0, 0, 0.04),
   0 1px 2px rgba(0, 0, 0, 0.02);
 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 cursor: pointer;
 user-select: none;
   }

   /* 箭头图标 (使用内联SVG，干净无依赖) */
   .back-btn svg {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 stroke: currentColor;
 stroke-width: 2.2;
 stroke-linecap: round;
 stroke-linejoin: round;
 fill: none;
 transition: transform 0.3s ease;
   }

   /* 返回文字 */
   .back-btn span {
 display: inline-block;
 line-height: 1;
 padding-top: 1px;
 /* 微调视觉居中 */
   }

   /* ===== 悬停效果 ===== */
   .back-btn:hover {
 background: rgba(255, 252, 248, 0.92);
 border-color: rgba(180, 162, 148, 0.4);
 box-shadow:
   0 6px 24px rgba(0, 0, 0, 0.08),
   0 2px 4px rgba(0, 0, 0, 0.02);
 transform: translateY(-1px);
 color: #2a231e;
   }

   .back-btn:hover svg {
 transform: translateX(-3px);
   }

   /* ===== 点击（激活）反馈 ===== */
   .back-btn:active {
 transform: scale(0.94) translateY(0);
 transition-duration: 0.08s;
 background: rgba(235, 225, 216, 0.7);
   }

/* 
 * 画册视口容器
 * 使用Flex实现完美居中
 */
.flipbook-viewport {
 width: 100%;
 height: 100%;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: visible; /* 改为visible，让按钮可以显示在外部 */
 z-index: 10;
}

.flipbook-viewport .container {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
}

/* 
 * 画册主体
 * 宽高由JS动态设置，这里只定义基础样式
 */
.flipbook-viewport .flipbook {
 border-radius: 6px;
 transition: width 0.2s ease, height 0.2s ease;
 position: relative;
 z-index: 20;
}

/* 
 * 画册页面
 * 每页宽度为画册宽度的一半，高度等于画册高度
 */
.flipbook-viewport .page {
 width: 50%;
 height: 100%;
 background-color: #ffffff;
 background-repeat: no-repeat;
 background-size: cover !important;
 background-position: center;
 box-sizing: border-box;
}

/* 页面阴影效果 */
.flipbook .page {
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}



/* 禁止页面内图片被选中 */
.flipbook-viewport .page img {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 margin: 0;
}

/* 翻页时的阴影效果 */
.flipbook-viewport .shadow {
 -webkit-transition: -webkit-box-shadow 0.5s;
 -moz-transition: -moz-box-shadow 0.5s;
 -o-transition: -webkit-box-shadow 0.5s;
 -ms-transition: -ms-box-shadow 0.5s;
 -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
 -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
 -o-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
 -ms-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
 box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* 
 * 导航按钮样式 - 完全在画册外部
 * 位置由JS动态计算，这里只定义基础样式
 */
.next,
.prev {
 position: absolute;
 width: 60px;
 height: 60px;
 cursor: pointer;
 transition: all 0.3s ease;
 z-index: 100;
 background-repeat: no-repeat;
 background-position: 0 0;
 opacity: 0.9;
 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
 border: none;
 outline: none;
 background-color: transparent;
}

.next:hover,
.prev:hover {
 opacity: 1;
 transform: scale(1.15);
}

.next {
 background-image: url(/Sites/Uploaded/UserUpLoad/20260210/20260210155644.png);
 background-position: -59px 0;
	right: 30px;
}

.prev {
 background-image: url(/Sites/Uploaded/UserUpLoad/20260210/20260210155644.png);
 background-position: 0 0;
	left: 30px;
}

.next:hover {
 background-position: -59px -59px;
}

.prev:hover {
 background-position: 0 -59px;
}

/* 按钮禁用状态 */
.next.disabled,
.prev.disabled {
 opacity: 0.2;
 cursor: not-allowed;
 pointer-events: none;
 transform: none;
}

/* 
 * 错误提示样式
 */
.error-message {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 color: #999;
 font-size: 16px;
 background-color: #f8f9fa;
 font-family: 'Microsoft YaHei', sans-serif;
}

/* 
 * 空白页样式
 */
.flipbook .page[data-image-path=""] {
 background-color: #ffffff;
 background-image: none !important;
 position: relative;
}

/* 空白页添加细微纹理 */
.flipbook .page[data-image-path=""]::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
   linear-gradient(-45deg, #f0f0f0 25%, transparent 25%);
 background-size: 20px 20px;
 background-position: 0 0, 0 10px;
 opacity: 0.2;
 pointer-events: none;
}

/* 
 * 加载动画
 */
.flipbook-viewport .flipbook.loading {
 position: relative;
}

.flipbook-viewport .flipbook.loading::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50px;
 height: 50px;
 margin: -25px 0 0 -25px;
 border: 4px solid rgba(255, 255, 255, 0.3);
 border-top: 4px solid #3498db;
 border-radius: 50%;
 animation: spin 1s linear infinite;
 z-index: 1000;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* 
 * 响应式调整 - 小屏幕时缩小按钮
 */
@media screen and (max-width: 1024px) {
 .next,
 .prev {
 width: 52px;
 height: 52px;
 background-size: 104px auto;
 }
 
 .next {
 background-position: -51px 0;
 }
 
 .prev {
 background-position: 0 0;
 }
 
 .next:hover {
 background-position: -51px -51px;
 }
 
 .prev:hover {
 background-position: 0 -51px;
 }
}

@media screen and (max-width: 768px) {
 .next,
 .prev {
 width: 48px;
 height: 48px;
 background-size: 96px auto;
 }
 
 .next {
 background-position: -47px 0;
 }
 
 .prev {
 background-position: 0 0;
 }
 
 .next:hover {
 background-position: -47px -47px;
 }
 
 .prev:hover {
 background-position: 0 -47px;
 }
 
 .error-message {
 font-size: 14px;
 }
}

@media screen and (max-width: 480px) {
 .next,
 .prev {
 width: 40px;
 height: 40px;
 background-size: 80px auto;
 }
 
 .next {
 background-position: -39px 0;
 }
 
 .prev {
 background-position: 0 0;
 }
 
 .next:hover {
 background-position: -39px -39px;
 }
 
 .prev:hover {
 background-position: 0 -39px;
 }
 
 .error-message {
 font-size: 12px;
 }
}

/* 
 * 触摸设备优化
 */
@media (hover: none) and (pointer: coarse) {
 .next,
 .prev {
 opacity: 0.95;
 background-color: rgba(0, 0, 0, 0.15);
 border-radius: 50%;
 padding: 8px;
 background-size: 44px auto;
 }
 
 .next:active,
 .prev:active {
 transform: scale(0.9);
 }
}

/* 
 * 打印样式
 */
@media print {
 .flipbook-viewport {
 overflow: visible;
 }
 
 .next,
 .prev {
 display: none;
 }
 
 body::before {
 display: none;
 }
}