/* "Look inside" page-turning viewer on the book page (assets/js/look_inside.js), 2026-11-05. Scoped under .gbp. */
html.gbp-lock, html.gbp-lock body { overflow: hidden !important; }
.gbp { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: rgba(18, 28, 23, .97); color: #fff;
	font-family: "Noto Sans", "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.4; animation: gbp-fade .25s ease; }
.gbp[hidden] { display: none; }
.gbp button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.gbp button:focus-visible { outline: 2px solid #e1d18c; outline-offset: 2px; }
@keyframes gbp-fade { from { opacity: 0; } }
@keyframes gbp-rise { from { opacity: 0; transform: translateY(18px) scale(.94); } }

/* Top bar */
.gbp-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; }
.gbp-top-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbp-top-t b { color: #e1d18c; font-weight: 600; margin-right: 8px; }
.gbp-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12) !important; font-size: 18px !important; display: inline-flex; align-items: center; justify-content: center; }
.gbp-ico:hover { background: rgba(255, 255, 255, .24) !important; }
.gbp-ico:disabled { opacity: .3; cursor: default; }

/* The book */
.gbp-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.gbp-book { position: relative; width: calc(var(--gbp-w, 400px) * 2); height: var(--gbp-h, 600px); perspective: 2200px; animation: gbp-rise .35s ease; touch-action: pan-y; }
.gbp.one .gbp-book { width: var(--gbp-w, 400px); }
.gbp-page, .gbp-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.gbp-l { left: 0; }
.gbp.one .gbp-l { display: none; }
.gbp.one .gbp-page, .gbp.one .gbp-leaf { left: 0; width: 100%; }
.gbp-page, .gbp-face { background: #fff; color: #333; overflow: hidden; }
.gbp-page { cursor: pointer; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.gbp-l { border-radius: 4px 0 0 4px; }
.gbp-r { border-radius: 0 4px 4px 0; }
.gbp.one .gbp-r { border-radius: 4px; }
.gbp-page img, .gbp-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Fold shadow at the spine */
.gbp-page::after, .gbp-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.gbp-r::after, .gbp-face.f::after { background: linear-gradient(to right, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 7%); }
.gbp-l::after, .gbp-face.b::after { background: linear-gradient(to left, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 7%); }
.gbp.one .gbp-page::after, .gbp.one .gbp-face::after { background: none; }

/* The turning page */
.gbp-leaf { z-index: 3; transform-style: preserve-3d; transform-origin: left center; pointer-events: none; will-change: transform; }
.gbp-leaf[hidden] { display: none; }
.gbp-leaf.turn { transition: transform .7s cubic-bezier(.45, .05, .35, 1), opacity .7s ease; }
.gbp-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gbp-face.b { transform: rotateY(180deg); }
.gbp-leaf.turn .gbp-face { animation: gbp-shade .7s ease; }
@keyframes gbp-shade { 50% { filter: brightness(.72); } }

/* Zoom button on each page */
.gbp-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(47, 74, 60, .85) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .15s ease; }
.gbp-page:hover .gbp-zoom, .gbp-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .gbp-zoom { opacity: .9; } }

/* Last page */
.gbp-end { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: #f7f5ee; }
.gbp-end .fa { font-size: 34px; color: #5f6b2b; }
.gbp-end b { font-size: 20px; color: #2f4a3c; }
.gbp-end p { margin: 0; color: #61655f; }
.gbp-end button { margin-top: 8px; padding: 9px 20px; border-radius: 8px; background: #2f4a3c !important; color: #fff !important; font-weight: 600; }
.gbp-end button:hover { background: #253b30 !important; }
.gbp-blank { height: 100%; background: #fbfaf6; }

/* Controls */
.gbp-prev, .gbp-next { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; z-index: 5; font-size: 22px !important; }
.gbp-prev { left: 18px; }
.gbp-next { right: 18px; }
.gbp-count { flex: none; text-align: center; padding: 8px 12px 2px; font-size: 14px; color: #e6e6dc; min-height: 28px; }
.gbp-strip { flex: none; display: flex; justify-content: safe center; gap: 8px; padding: 8px 14px 12px; overflow-x: auto; scrollbar-width: thin; }
.gbp-strip button { flex: none; width: 40px; height: 54px; border-radius: 3px; overflow: hidden; background: #fff; opacity: .55; outline: 2px solid transparent; transition: opacity .15s ease; }
.gbp-strip button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gbp-strip button:hover { opacity: .85; }
.gbp-strip button.on { opacity: 1; outline-color: #e1d18c; }

/* Zoomed page */
.gbp-big { position: absolute; inset: 0; z-index: 10; overflow: auto; background: #1a221e; text-align: center; animation: gbp-fade .2s ease; }
.gbp-big[hidden] { display: none; }
.gbp-big img { display: inline-block; width: min(1100px, 100%); min-width: 680px; height: auto; background: #fff; cursor: zoom-out; vertical-align: top; }
.gbp-big-x { position: fixed; top: 10px; right: 14px; z-index: 11; }

/* Phones: one page at a time, arrows beside the page count */
.gbp.one .gbp-prev, .gbp.one .gbp-next { position: static; margin: 0; width: 44px; height: 44px; }
.gbp-navrow { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; }
@media (max-height: 560px) { .gbp-strip { display: none; } }
@media (prefers-reduced-motion: reduce) { .gbp, .gbp-book, .gbp-big { animation: none; } .gbp-leaf.turn { transition: none; } }