/*
 * catalog-viewer v1 (2026-10-31): the viewer that shows a catalog as a book to flip through (page assets/frontend/js/catalog-viewer.js, markup
 * resources/views/frontend/pages/catalogs/show.blade.php). Loaded only by that page, so no other page of the site pays for it.
 *
 * The book is laid out left to right whatever the reading direction (3D geometry does not care about words); the script mirrors it for a right-to-left
 * catalog. The toolbar follows the direction of the catalog (the dir attribute of .cv). Colours come from the theme variables; a catalog may set its own
 * background through --cv-bg-from / --cv-bg-to on .cv.
 */

html.cv-lock, html.cv-lock body { overflow: hidden; }

.cv {
    --cv-ink: #fff;
    --cv-bar: rgb(8 14 40 / .72);
    --cv-btn: rgb(255 255 255 / .14);
    --cv-btn-hover: rgb(255 255 255 / .26);
    position: relative; display: flex; flex-direction: column; min-block-size: 440px; block-size: calc(100vh - var(--cv-top, 0px));
    color: var(--cv-ink); overflow: hidden; isolation: isolate; -webkit-user-select: none; user-select: none;
    background: linear-gradient(160deg, var(--cv-bg-from, var(--main-color-two, #081a73)) 0%, var(--cv-bg-to, var(--main-color-one, #0d22a3)) 100%);
}
@supports (height: 100dvh) { .cv { block-size: calc(100dvh - var(--cv-top, 0px)); } }
.cv--full { position: fixed; inset: 0; z-index: 100000; block-size: 100vh; }
@supports (height: 100dvh) { .cv--full { block-size: 100dvh; } }
.cv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 40%, rgb(255 255 255 / .12), transparent 70%); pointer-events: none; }

/* ---- stage and book ---- */
.cv__stage { position: relative; flex: 1 1 auto; min-block-size: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; outline: 0; cursor: default; }
.cv__stage.is-zoomed { cursor: grab; }
.cv__stage.is-panning { cursor: grabbing; }
.cv__zoom { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 50%; will-change: transform; }
.cv__shift { position: relative; direction: ltr; }
.cv__book { position: relative; inline-size: var(--cv-bw); block-size: var(--cv-h); perspective: 2600px; }
.cv__spine { position: absolute; inset-block: 0; inline-size: 0; inset-inline-start: var(--cv-spine, 50%); pointer-events: none; }

/* a page: the picture on a sheet of paper (the cover and the last page keep the same size as the others) */
.cv-page, .cv-leaf { position: absolute; inset-block-start: 0; inline-size: var(--cv-w); block-size: var(--cv-h); }
.cv-page { background: #f4f1ea; overflow: hidden; }
.cv-page[hidden] { display: none; }
.cv-page img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: fill; opacity: 0; transition: opacity .25s ease; -webkit-user-drag: none; }
.cv-page.is-ready img { opacity: 1; }
.cv-page.is-loading::before { content: ""; position: absolute; inset-block-start: calc(50% - 16px); inset-inline-start: calc(50% - 16px); inline-size: 32px; block-size: 32px; border-radius: 50%; border: 3px solid rgb(13 34 163 / .2); border-block-start-color: var(--main-color-one, #0d22a3); animation: cv-spin .8s linear infinite; }
@keyframes cv-spin { to { transform: rotate(360deg); } }
/* the fold: a soft shade along the spine and a shade the turning leaf casts (opacity set by the script) */
.cv-page::after, .cv-leaf__f::after, .cv-leaf__b::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cv-page--left::after { background: linear-gradient(to left, rgb(0 0 0 / .22), rgb(0 0 0 / .05) 9%, transparent 22%); }
.cv-page--right::after { background: linear-gradient(to right, rgb(0 0 0 / .22), rgb(0 0 0 / .05) 9%, transparent 22%); }
.cv-cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.cv-page--left .cv-cast { background: linear-gradient(to left, rgb(0 0 0 / .55), transparent 60%); }
.cv-page--right .cv-cast { background: linear-gradient(to right, rgb(0 0 0 / .55), transparent 60%); }

/* the turning leaf: two faces, each a page; the hinge is the spine */
.cv-leaf { z-index: 5; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.cv-leaf__f, .cv-leaf__b { position: absolute; inset: 0; background: #f4f1ea; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cv-leaf__b { transform: rotateY(180deg); }
.cv-leaf img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: fill; -webkit-user-drag: none; }
.cv-leaf__f::after { background: linear-gradient(to left, rgb(0 0 0 / .5), rgb(0 0 0 / .12)); opacity: var(--cv-sf, 0); }
.cv-leaf__b::after { background: linear-gradient(to right, rgb(0 0 0 / .5), rgb(0 0 0 / .12)); opacity: var(--cv-sb, 0); }
.cv--rtl .cv-leaf__f::after { background: linear-gradient(to right, rgb(0 0 0 / .5), rgb(0 0 0 / .12)); }
.cv--rtl .cv-leaf__b::after { background: linear-gradient(to left, rgb(0 0 0 / .5), rgb(0 0 0 / .12)); }

/* ---- the arrows at the sides ---- */
.cv__arrow {
    position: absolute; inset-block-start: 50%; z-index: 20; display: grid; place-items: center; inline-size: 46px; block-size: 46px; margin-block-start: -23px; padding: 0;
    color: var(--cv-ink); background: var(--cv-btn); border: 0; border-radius: 50%; cursor: pointer; transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.cv__arrow--left { left: 10px; }
.cv__arrow--right { right: 10px; }
.cv__arrow:hover:not(:disabled), .cv__arrow:focus-visible { background: var(--cv-btn-hover); }
/* the way out, at the top corner of the book: always there, on a phone and in fullscreen too */
.cv .cv__close {
    position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 25; display: grid; place-items: center; inline-size: 44px; block-size: 44px;
    color: var(--cv-ink); background: var(--cv-bar); border: 1px solid rgb(255 255 255 / .28); border-radius: 50%; text-decoration: none; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease;
}
.cv .cv__close:hover, .cv .cv__close:focus-visible { color: var(--cv-ink); background: var(--cv-btn-hover); }
/* the same way out in the toolbar, for small screens where the book fills the width and a button over it would hide a corner of the page */
.cv .cv__btn--close { display: none; }
.cv__arrow:disabled { opacity: .25; cursor: default; }
.cv svg.i { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* ---- the toolbar ---- */
.cv__bar { position: relative; z-index: 30; display: flex; align-items: center; gap: 6px 10px; padding: 8px 14px; background: var(--cv-bar); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cv__group { display: flex; align-items: center; gap: 6px; }
.cv__group--nav { flex: 1 1 auto; min-inline-size: 0; }
.cv__btn { display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; color: var(--cv-ink); background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background .2s ease; flex: 0 0 auto; }
.cv__btn:hover:not(:disabled), .cv__btn:focus-visible, .cv__btn.is-on { background: var(--cv-btn); }
.cv__btn:disabled { opacity: .3; cursor: default; }
.cv__arrow:focus-visible, .cv .cv__close:focus-visible, .cv__btn:focus-visible, .cv__range:focus-visible, .cv__stage:focus-visible { outline: 3px solid rgb(255 255 255 / .8); outline-offset: 2px; }
.cv__count { flex: 0 0 auto; min-inline-size: 84px; text-align: center; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv__count bdi { unicode-bidi: isolate; direction: ltr; }
.cv__range { flex: 1 1 120px; min-inline-size: 80px; margin: 0 4px; accent-color: #fff; cursor: pointer; }

/* ---- the strip of small pictures ---- */
.cv__thumbs { position: relative; z-index: 25; background: var(--cv-bar); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-block-start: 1px solid rgb(255 255 255 / .12); }
.cv__thumbs[hidden] { display: none; }
.cv__track { display: flex; gap: 10px; padding: 10px 14px; overflow-x: auto; scrollbar-width: thin; }
.cv__thumb { position: relative; flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; opacity: .85; transition: opacity .2s ease, border-color .2s ease; }
.cv__thumb img { display: block; block-size: 88px; inline-size: auto; }
.cv__thumb span { position: absolute; inset-block-end: 3px; inset-inline-start: 3px; min-inline-size: 22px; padding: 0 5px; border-radius: 10px; background: rgb(8 14 40 / .82); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.cv__thumb:hover, .cv__thumb:focus-visible { opacity: 1; }
.cv__thumb.is-current { opacity: 1; border-color: #fff; }

/* ---- share panel and messages ---- */
.cv__pop { position: absolute; z-index: 40; inset-block-end: 62px; inset-inline-end: 14px; min-inline-size: 220px; padding: 8px; border-radius: 12px; background: rgb(8 14 40 / .94); box-shadow: 0 14px 34px rgb(0 0 0 / .45); }
.cv__pop[hidden] { display: none; }
.cv__pop a, .cv__pop button { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 10px 12px; color: #fff; background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: .95rem; text-align: start; text-decoration: none; cursor: pointer; }
.cv__pop a:hover, .cv__pop button:hover, .cv__pop a:focus-visible, .cv__pop button:focus-visible { background: rgb(255 255 255 / .14); color: #fff; }
.cv__toast { position: absolute; z-index: 50; inset-block-start: 14px; inset-inline-start: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgb(8 14 40 / .92); color: #fff; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.cv__toast.is-on { opacity: 1; }
.cv__empty { display: grid; place-items: center; flex: 1 1 auto; padding: 24px; text-align: center; font-size: 1.1rem; }
.cv-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cv-noscript { max-inline-size: 900px; margin: 0 auto; padding: 24px 16px; }
.cv-noscript img { display: block; max-inline-size: 100%; block-size: auto; margin: 0 auto 8px; }

/* ---- small screens: one page, a lighter toolbar, no side arrows (the swipe and the tap on a page edge turn the page) ---- */
@media (max-width: 767px) {
    .cv__arrow { display: none; }
    .cv .cv__close { display: none; }
    .cv .cv__btn--close { display: grid; }
    .cv__bar { flex-wrap: wrap; justify-content: space-between; padding: 6px 8px; }
    .cv__group--nav { flex: 1 1 100%; order: 2; }
    .cv__group--tools { order: 1; flex: 1 1 100%; justify-content: center; }
    .cv__btn { inline-size: 42px; block-size: 42px; }
    .cv__thumb img { block-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-page img, .cv__arrow, .cv .cv__close, .cv__btn, .cv__toast, .cv__thumb { transition: none; }
}