/* A 3D MODEL IN THE DETAIL (brief BB, 2026-10-09) - core/vk/model3d.php prints the box, view/js/vk_3d.js builds the scene in it.
 *
 * One block for the panel's detail, the public web's layer and the client webs' file page: <div class="vk3d" data-vk-3d> holding the picture Blender took of the model (.vk3d-poster, or the
 * type's icon), a line of words (.vk3d-state) and - once the scene is built - the canvas and «Restablecer vista». The box's colour is the colour of the scene's background: the script reads
 * it, so the light and the dark look (html[data-theme="dark"], the public webs' dark pages) need no rule of theirs but the colour here. His colour is --vk-main where the brand block defines it. */

.vk3d{
    position: relative; box-sizing: border-box; width: 100%; height: 700px; overflow: hidden; text-align: left;
    background: var(--vk-fieldh-eaeaea, #eaeaea); color: var(--vk-text, #16161a);
    -webkit-user-select: none; user-select: none;
}
html[data-theme="dark"] .vk3d{ background: var(--vk-page, #16161a); }
.vkb-dark .vk3d, .vkd--dark .vk3d{ background: #202026; color: #f2f2f5; }

.vk3d-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; touch-action: none; }
.vk3d-canvas:active{ cursor: grabbing; }

/* what the model looks like, until the model is ready and in its place where it cannot be shown */
.vk3d-poster{ position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 40px; object-fit: contain; pointer-events: none; }
.vk3d-poster.is-icon{ inset: 0; margin: auto; width: 220px; height: 220px; padding: 0; border-radius: 14px; object-fit: contain; }
.vk3d.is-ready .vk3d-poster{ display: none; }

/* the line of words: loading, the hint, or why the model is not turned here */
.vk3d-state{
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; margin: 0; max-width: calc(100% - 32px);
    padding: 8px 15px; border-radius: 99px; text-align: center; pointer-events: none;
    font: 600 12px/1.4 'Montserrat', 'Segoe UI', sans-serif; letter-spacing: .01em;
    background: rgba(22, 22, 26, .72); color: #ffffff;
}
.vk3d-state:empty{ display: none; }
.vk3d.is-failed .vk3d-state{ white-space: normal; }

.vk3d-reset{
    appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; position: absolute; left: 16px; bottom: 16px; z-index: 3;
    font: 600 12px/1 'Montserrat', 'Segoe UI', sans-serif; letter-spacing: .01em;
    padding: 9px 15px; border-radius: 99px; border: 1px solid var(--vk-line-strong, #cfcdd9);
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); box-shadow: 0 1px 2px rgba(22, 22, 26, .08);
}
.vk3d-reset:hover{ background: var(--vk-fieldh, #e9e8ee); }
.vk3d-reset:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; }
.vkb-dark .vk3d-reset, .vkd--dark .vk3d-reset{ background: #2a2a32; color: #f2f2f5; border-color: #3d3d49; box-shadow: none; }

/* in the panel's detail: where a PDF's pages are - a box of the same height, clear of "Expand" at the top and of the round buttons at the right */
.watch_item_modal .casing .vk3d{ align-self: stretch; height: 700px; }
.watch_item_modal .casing.fullHeight .vk3d{ height: 100vh; }
.watch_item_modal .vkDetail--strip > .casing .vk3d{ height: 100%; }
@media (max-width: 700px){
    .watch_item_modal .casing .vk3d{ height: 75vh; }
    .watch_item_modal .casing.fullHeight .vk3d{ height: 100vh; }
    .watch_item_modal .vkDetail--strip > .casing .vk3d{ height: 100%; }
    /* the detail's previous / next buttons take the two bottom corners on a phone: «Restablecer vista» sits between them, the line of words above it */
    .vk3d-reset{ left: 50%; transform: translateX(-50%); bottom: 16px; }
    .vk3d-state{ bottom: 62px; }
    .vk3d.has-hint .vk3d-state{ display: none; }
}

/* the visitor's layer of the public home and the search (search/css/vk_visitor.css .vkVD-view: an absolute box with padding that centres what it holds) */
.vkVD-view .vk3d{ width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 8px; }
.vkVD-view .vk3d-poster.is-icon{ width: 160px; height: 160px; }

/* the client webs' file page (template_premium/parts/detail.php): the stage is a box of a fixed height */
.magnifier-container .vkb-3dstage{ width: 100%; height: 100%; align-self: stretch; }
.magnifier-container .vkb-3dstage .vk3d{ height: 100%; min-height: 360px; }
/* the public webs' designs (template_premium/view/css/design.css): the stage is --d-stage tall with 24 px around it and the arrows under it (116 px); the box takes what is left, as a picture's max-height does */
.vkd .magnifier-container .vkb-3dstage{ height: calc(var(--d-stage) - 116px); min-height: 360px; }
.vkd .magnifier-container .vkb-3dstage .vk3d{ border-radius: 8px; }