/* KP Envira Lightbox */

.envirabox-theme-base_dark .envirabox-bg {
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    background-color: #fff;
    opacity: 0 !important;
    transition: opacity var(--kp-open-close-duration, 300ms) ease-in-out !important;
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
}

.envirabox-theme-base_dark .envirabox-bg .kp-blurred-layer {
    position: absolute;
    inset: 0;
    background-color: #000;
    /* Keep the blurred image's vertical color distribution across the viewport. */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.envirabox-theme-base_dark .envirabox-bg .kp-blurred-layer.kp-blurred-visible {
    opacity: 1;
}

.envirabox-theme-base_dark.kp-gradient-background .envirabox-bg .kp-blurred-layer {
    visibility: hidden !important;
}

.envirabox-show-thumbs .envirabox-thumbs {
    display: block !important;
}

.envirabox-theme-base_dark .envirabox-thumbs {
    position: absolute !important;
    bottom: 25px;
    left: 5% !important;
    right: 70% !important;
    height: 120px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-color: rgba(165,165,165,.78) rgba(75,75,75,.42) !important;
    background: none;
    padding: 0 10px;
    z-index: 1000;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.envirabox-theme-base_dark .envirabox-thumbs::-webkit-scrollbar-track {
    background: rgba(75,75,75,.42);
    border-radius: 8px;
}

.envirabox-theme-base_dark .envirabox-thumbs::-webkit-scrollbar-thumb {
    background: rgba(165,165,165,.78);
    border-radius: 8px;
}

.envirabox-theme-base_dark .envirabox-thumbs.visible {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Lad cursorbevægelse vække skjulte thumbnails på desktop. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .envirabox-theme-base_dark .envirabox-thumbs {
        pointer-events: auto;
    }
}

.envirabox-theme-base_dark .envirabox-thumbs ul {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 30px;
    min-width: max-content !important;
    margin: 0;
    padding: 0;
    list-style: none !important;
    white-space: nowrap;
    height: 100px !important;
    min-height: 100px !important;
    align-items: flex-start !important;
    overflow: visible !important;
}

.envirabox-theme-base_dark .envirabox-thumbs li {
    flex: 0 0 auto !important;
}

/* Ubeskårne upload-thumbnails får en fælles højde og deres egen bredde. */
.envirabox-theme-base_dark .envirabox-thumbs li.kp-source-thumb {
    display: flex !important;
    align-items: center;
    overflow: visible !important;
    box-sizing: border-box !important;
    height: 100px !important;
}

.envirabox-theme-base_dark .envirabox-thumbs li.kp-source-thumb img {
    display: block !important;
    object-fit: contain !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.envirabox-theme-base_dark .envirabox-thumbs li.active img {
    border: 1px solid #fafa87 !important;
}

#thumb-hint {
    position: absolute;
    bottom: 25px;
    transform: translateX(-50%);
    font: 24px sans-serif;
    color: #fff;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    z-index: 2147483647 !important;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.envirabox-thumbs.visible + #thumb-hint {
    opacity: 0;
}

#thumb-hint-area {
    position: absolute;
    bottom: 0;
    width: 120px;
    height: 120px;
    transform: translateX(-50%);
    z-index: 2147483646;
    pointer-events: auto;
    touch-action: none;
}

#thumb-hint-area.thumbnails-visible {
    z-index: 0;
    pointer-events: none;
}


/* Tablet: behold thumb-hint og vis den vandrette scrollbar som
   positionsindikator. Den tegnede pile/prik-indikator skjules nedenfor. */
@media (min-width: 768px) and (max-width: 1024px),
       (min-width: 768px) and (any-pointer: coarse) {
    .envirabox-theme-base_dark .envirabox-thumbs {
        height: 132px !important;
        scrollbar-width: auto !important;
        scrollbar-color: rgba(165,165,165,.78) rgba(75,75,75,.42) !important;
        background-image: none !important;
    }

    .envirabox-theme-base_dark .envirabox-thumbs::-webkit-scrollbar {
        display: block !important;
        height: 8px !important;
    }

    .envirabox-theme-base_dark .envirabox-thumbs::-webkit-scrollbar-track {
        background: rgba(75,75,75,.42);
        border-radius: 8px;
    }

    .envirabox-theme-base_dark .envirabox-thumbs::-webkit-scrollbar-thumb {
        background: rgba(165,165,165,.78);
        border-radius: 8px;
    }
}


/* v1.0.3w - kompakt, fast drag/swipe-indikator fra godkendt v1.0.3v. */
@media (hover: none) and (pointer: coarse) {
    .envirabox-theme-base_dark .envirabox-thumbs {
        background-image:
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            radial-gradient(circle, rgba(255,255,255,.68) 0 1.5px, transparent 1.7px),
            linear-gradient(135deg, transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(45deg,  transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(135deg, transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(45deg,  transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(45deg,  transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(135deg, transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(45deg,  transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%),
            linear-gradient(135deg, transparent 42%, rgba(255,255,255,.68) 43% 55%, transparent 56%) !important;

        background-size:
            5px 5px, 5px 5px, 5px 5px, 5px 5px,
            5px 5px, 5px 5px, 5px 5px, 5px 5px,
            8px 8px, 8px 8px, 8px 8px, 8px 8px,
            8px 8px, 8px 8px, 8px 8px, 8px 8px !important;

        background-repeat: no-repeat !important;

        background-position:
            calc(50% - 42px) calc(100% - 38px),
            calc(50% - 30px) calc(100% - 38px),
            calc(50% - 18px) calc(100% - 38px),
            calc(50% -  6px) calc(100% - 38px),
            calc(50% +  6px) calc(100% - 38px),
            calc(50% + 18px) calc(100% - 38px),
            calc(50% + 30px) calc(100% - 38px),
            calc(50% + 42px) calc(100% - 38px),

            calc(50% - 67px) calc(100% - 42px),
            calc(50% - 67px) calc(100% - 34px),
            calc(50% - 61px) calc(100% - 42px),
            calc(50% - 61px) calc(100% - 34px),

            calc(50% + 61px) calc(100% - 42px),
            calc(50% + 61px) calc(100% - 34px),
            calc(50% + 67px) calc(100% - 42px),
            calc(50% + 67px) calc(100% - 34px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px),
       (min-width: 768px) and (any-pointer: coarse) {
    .envirabox-theme-base_dark .envirabox-thumbs {
        background-image: none !important;
    }
}

/* v1.0.3x: larger invisible target around lightbox controls.
   The pseudo-element belongs to the existing button, preserving its icon size. */
.envirabox-theme-base_dark .envirabox-navigation a,
.envirabox-theme-base_dark .envirabox-button--arrow_left,
.envirabox-theme-base_dark .envirabox-button--arrow_right,
.envirabox-theme-base_dark .envirabox-prev,
.envirabox-theme-base_dark .envirabox-next,
.envirabox-theme-base_dark .envirabox-slideshow-button,
.envirabox-theme-base_dark .envirabox-close-button,
.envirabox-theme-base_dark .envirabox-button--close {
    overflow: visible !important;
}

.envirabox-theme-base_dark .envirabox-navigation a::after,
.envirabox-theme-base_dark .envirabox-button--arrow_left::after,
.envirabox-theme-base_dark .envirabox-button--arrow_right::after,
.envirabox-theme-base_dark .envirabox-prev::after,
.envirabox-theme-base_dark .envirabox-next::after,
.envirabox-theme-base_dark .envirabox-slideshow-button::after,
.envirabox-theme-base_dark .envirabox-close-button::after,
.envirabox-theme-base_dark .envirabox-button--close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    background: transparent;
}

/* Leave room between the enlarged Play and Exit targets. */
.envirabox-theme-base_dark .envirabox-slideshow-button {
    margin-right: 24px !important;
}


/* v1.0.3y: arrow cursor over all lightbox controls, including icon children. */
.envirabox-theme-base_dark .envirabox-navigation a,
.envirabox-theme-base_dark .envirabox-navigation a *,
.envirabox-theme-base_dark .envirabox-slideshow-button,
.envirabox-theme-base_dark .envirabox-slideshow-button *,
.envirabox-theme-base_dark .envirabox-close-button,
.envirabox-theme-base_dark .envirabox-close-button *,
.envirabox-theme-base_dark .envirabox-button--play,
.envirabox-theme-base_dark .envirabox-button--play *,
.envirabox-theme-base_dark .envirabox-button--close,
.envirabox-theme-base_dark .envirabox-button--close * {
    cursor: default !important;
}


/* The original navigation links are 30 px wide at the viewport edges.
   Keep their 48 px targets inside the viewport instead of adding overflow. */
.envirabox-theme-base_dark .envirabox-prev::after {
    left: calc(50% + 9px);
}
.envirabox-theme-base_dark .envirabox-next::after {
    left: calc(50% - 9px);
}

/* v1.0.3ad: measured .envirabox-outer as 900 px wide with 909 px of
   horizontal scroll; keep the separate thumbnail strip scrollable. */
.envirabox-container .envirabox-outer {
    overflow: clip !important;
}

/* v1.3.0: Lightbox layout migrated from Astra Additional CSS. */
/* ----------------------- */
/* --- Envira Gallery: --- */
/* ----------------------- */

/* --- Image-counter (Image x of y) --> x/y centreret --- */

.envirabox-container .envirabox-image-counter {
  font-size: 0; 
	position: fixed;
  font-family: Helvetica;
  font-style: normal;
	opacity: 0.5;
	bottom: 3%;
}

.envirabox-container .envirabox-image-counter span {
  font-size: 16px;
  display: inline;
}

.envirabox-caption-wrap .envirabox-image-counter span:first-of-type::after {
  content: "/"!important;
}

/* --- Caption: ---*/

.envirabox-theme-base_dark .envirabox-caption-wrap 
{
  justify-content: center; 
	background-color: transparent !important;
}

.envirabox-container .envirabox-caption {
	font-size: 16px !important ;
}

/* --- Toolbar: --- */

.envirabox-toolbar {
  position: fixed !important;
  bottom: 3% !important;
  top: auto !important;
  right: 3% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.envirabox-theme-base_dark .envirabox-toolbar .envira-fullscreen-button {
display: none;
}

/* --- Envira Lightbox --- */

/* Ensure next/prev arrows align to the center of the displayed image */
.envirabox-theme-base_dark .envirabox-navigation .envirabox-arrow--right, .envirabox-theme-base_dark .envirabox-navigation .envirabox-arrow--left {
    top: 50% !important;
    transform: translateY(-50%);
}


/* 1.3.2-test: transparent keyboard tool surface, only inside the lightbox.
   Preserve the existing icon, hit area, hover colour and keyboard focus. */
body.kp-grundramme .envirabox-container .kp-gr-tools.kp-gr-lightbox-tools,
body.kp-grundramme .envirabox-container .kp-gr-lightbox-tools .kp-gr-symbol {
    background: transparent !important;
    box-shadow: none;
}

/* Native long-press menus and text selection must not cover the lightbox. */
.envirabox-container,
.envirabox-container * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.envirabox-container img,
.envirabox-container a {
    -webkit-user-drag: none;
}

/* Trackpad deltas and dragging must follow the pointer immediately. */
.envirabox-theme-base_dark .envirabox-thumbs { scroll-behavior: auto; }

/* Theme action anchors retain a button cursor without href="#". */
.envirabox-container a[data-kp-lightbox-action] { cursor: pointer; }

.kp-ken-burns svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.kp-ken-burns[aria-pressed="false"] { opacity: .5; }
.kp-ken-burns[hidden] { display: none !important; }
.envirabox-container .kp-ken-burns-frame { overflow: hidden !important; }
.envirabox-container .envirabox-toolbar .kp-ken-burns {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 24px !important;
}

/* Shared diagnosis remains operable on phones, tablets and fullscreen lightboxes. */
#kp-gr-diag-toggle {
    display: block !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}
#kp-gr-diag:not([hidden]) {
    display: block !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: min(600px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}
#kp-gr-diag pre { white-space: pre-wrap !important; overflow-wrap: anywhere; }

/* The backdrop follows the first loaded image and Envira's closing class. */
.envirabox-theme-base_dark.envirabox-is-open.kp-lightbox-image-ready .envirabox-bg {
    opacity: 1 !important;
}
/* Envira's steep ease-out made a 600 ms fade look nearly instantaneous.
   Limit the balanced curve to ordinary image changes; retain Ken Burns/swipe. */
.envirabox-container.kp-lightbox-opening .envirabox-fx-fade,
.envirabox-container.envirabox-is-closing .envirabox-fx-fade,
.envirabox-container.kp-plain-fade .envirabox-fx-fade,
.envirabox-container.kp-plain-fade .kp-blurred-layer {
    transition-timing-function: ease-in-out !important;
}

/* Reveal the first fitted image and backdrop as one surface. Native fading
   continues to handle image navigation and closing after the first reveal. */
.envirabox-container.envirabox-theme-base_dark {
    opacity: 1;
    transition: opacity var(--kp-open-close-duration, 300ms) ease-in-out;
}
.envirabox-container.envirabox-theme-base_dark.kp-lightbox-opening {
    opacity: 0 !important;
    pointer-events: none;
}


/* Keep the photo present while Envira resizes its stage on rotation. */
.envirabox-container.kp-turn-stage-visible .envirabox-stage {
    display: block !important;
}
/* One fade to grey over the composed photo, backdrop and controls. */
@media (prefers-reduced-motion: no-preference) {
    .envirabox-container.envirabox-theme-base_dark::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom right, #565656, #303030);
        pointer-events: none;
        z-index: 2147483647;
        opacity: 0;
        transition: opacity 220ms ease-in-out;
    }
    .envirabox-container.envirabox-theme-base_dark.kp-lightbox-turning::after {
        transition-duration: 280ms;
        opacity: 1;
    }
    .envirabox-container.envirabox-is-closing::after { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .envirabox-container.envirabox-theme-base_dark.kp-lightbox-turning.kp-turn-late::after {
        transition-duration: 0ms;
    }
}