/* Reset default margins and padding to remove white borders */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Add fade-in animation for the book */
.template-viewport {
	opacity: 0;
  background:invisible;
  width: 90%;
  height: 90%;
  scrollbar-width: none;
	transition: opacity 1s ease-in-out;
  overflow: hidden; /* disables both horizontal and vertical scrolling */
  margin: 0;
  padding: 0;
  border: none;
}

.template-viewport.loaded {
	opacity: 1;
}
.template-viewport .container{
	position:absolute;
	top:50%;
	left:50%;
	width:922px;
	height:600px;
	margin:auto;
}

.template-viewport .page{
	width:461px;
	height:600px;
	background-color:invisible;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.template-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;
}

.template-viewport .zoomer .region{
	display:none;
}

.template-viewport .zoom-in .region{
	display:none;
}

.main-flip-parent {
  width: 75vw;
  height: 75vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: invisible;
  box-shadow: none;
  padding: 0;
  margin: 0;
}


.template .region{
	position:absolute;
	overflow:hidden;
	background:invisible;
	opacity:0.2;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.template .region:hover{
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.template .region.zoom{
	opacity:0.01;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	filter: alpha(opacity=1);
}

.template .region.zoom:hover{
	opacity:0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.template .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.template .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.template-viewport .loader {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 280px;
    left: 219px;
    border: none;
    border-top: none;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.template-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 1s;
	-moz-transition: -moz-box-shadow 1s;
	-o-transition: -webkit-box-shadow 1s;
	-ms-transition: -ms-box-shadow 1s;
	-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:0 0 20px rgba(0, 0, 0, 0.25);
	-o-box-shadow:0 0 20px rgba(0, 0, 0, 0.25);
	-ms-box-shadow:0 0 20px rgba(0, 0, 0, 0.25);
	box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.25);
}

.template-viewport .next-button{
	width:22px;
	position:absolute;
	top:0;
	right:-22px;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	-ms-border-radius:0 15px 15px 0;
	-o-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
}

.template-viewport .previous-button{
	width:22px;
	position:absolute;
	top:0;
	left:-22px;
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	-ms-border-radius:15px 0 0 15px;
	-o-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
}

.template-viewport .previous-button-hover,
.template-viewport .previous-button-down {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6l-6 6 6 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    background-color: rgba(0,0,0, 0.2);
}

.template-viewport .next-button-hover,
.template-viewport .next-button-down {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 6l6 6-6 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    background-color: rgba(0,0,0, 0.2);
}

.animated{
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

/* ESC tooltip styling */
.esc{
	position: absolute;
	top:10px;
	left:0;
	width:100%;
	height:40px;
	z-index:10000;
}

.esc > div{
	width:140px;
	height:30px;
	margin:auto;
	background:rgba(0,0,0,0.5);
	text-align:center;
	font:12px arial;
	line-height:30px;
	color:white;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}


.template .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);

	background: transparent;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
	box-shadow: none;
}

.template .page-wrapper {
    -webkit-perspective: 2000px;
    perspective: 2000px;
}

.template .hard {
    color: transparent;
}
 /* Bottom Menu */
 .bottom-menu {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 100px;
      background: rgba(0, 0, 0, 0.50);
      backdrop-filter: blur(5px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 0 20px;
      z-index: 1000;
      flex-shrink: 0;
      transition: transform 0.4s;
    }

    .template-viewport.menu-closed .bottom-menu {
      transform: translateY(100%);
    }

    /* Navigation Controls */
    .nav-controls {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .nav-btn {
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      border: 2px solid rgba(255, 255, 255, 0.5);
    }

    .nav-btn:hover:not(:disabled) {
      background: rgba(0, 0, 0, 0.2);
      transform: scale(1.1);
    }

    .nav-btn:active:not(:disabled) {
      transform: scale(0.95);
    }

    .nav-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    /* Page Info */
    .page-info {
      background: rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      color: white;
      padding: 14px 14px;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 600;
      border: 2px solid rgba(255, 255, 255, 0.5);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

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

    .parent-container {
      display: flex;
      justify-content: center;
      align-items: flex-end; /* or center if you want vertical centering */
      width: 100%;
      position: absolute; /* or fixed, depending on your layout */
      bottom: 0;
      left: 0;
    }

    .template-viewport.grab-cursor {
      cursor: grab !important;
    }
    .template-viewport.grabbing-cursor {
      cursor: grabbing !important;
    }
    .template-viewport.pointer-cursor {
      cursor: pointer !important;
    }

    .bottom-menu-tab {
      position: fixed;
      left: 50%;
      /* When open, sits just above the bottom menu; when closed, flush with bottom */
      bottom: 100px; /* height of .bottom-menu */
      transform: translateX(-50%);
      width: 60px;
      height: 32px;
      background: rgba(0,0,0,0.2);
      border-radius: 20px 20px 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1100;
      transition: bottom 0.4s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border-top: none;
    }

    .template-viewport.menu-closed .bottom-menu-tab {
      bottom: 0;
    }

    .bottom-menu-tab .arrow {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      transition: transform 0.3s;
    }
    .bottom-menu-tab .arrow svg {
      width: 24px;
      height: 24px;
      display: block;
      transition: transform 0.3s;
    }
    .template-viewport.menu-closed .bottom-menu-tab .arrow svg {
      transform: rotate(180deg);
    }

    /* Add global loading overlay styles */
    .global-loading-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(30, 30, 30, 0.95);
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .global-loading-overlay.hidden { display: none !important; }

    .global-loader {
        text-align: center;
        color: white;
    }

    .global-loader-spinner {
        width: 50px;
        height: 50px;
        border: 10px solid rgba(255, 255, 255, 0.3);
        border-top: 10px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 15px;
    }

    .global-loader-text {
        font-size: 20px;
        font-weight: 500;
    }