/* Tour display gallery lightbox overrides — pairs with
   tour_display_lightbox.js. Load AFTER the VenoBox CDN CSS so these
   rules win on cascade order. */

/* Re-color the chrome (close ✕, prev/next arrows, counter) so it reads
   on the new white-translucent backdrop. VenoBox exposes
   --vbox-tools-color on .vbox-overlay; we just flip it dark. */
.vbox-overlay {
    --vbox-tools-color: #0f172a; /* slate-900 — near-black, matches body text */
    --vbox-title-background: rgba(0, 0, 0, 0.55);
}

/* Backdrop colour is owned by CSS (overlayColor was removed from the
   VenoBox init) so light/dark themes can be switched without fighting
   an inline style. */
.vbox-backdrop {
    background-color: rgba(255, 255, 255, 0.97);
}

/* VenoBox sets overflow-y: scroll on .vbox-container, which always
   reserves space for a scrollbar on Windows — about 15px on the right
   edge. That asymmetry shifts the centered image leftward, so arrows
   positioned at left/right from the viewport edges look misaligned
   against the image. Switching to `auto` only shows the scrollbar
   when actually needed, restoring symmetry. */
.vbox-container {
    overflow-y: auto;
}

/* Image wrapper — soft border + shadow + radius. VenoBox already sets
   background:#fff and transition:transform 200ms inline; we just add
   the Airbnb-style soft border + drop shadow. */
.vbox-child {
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 10px 40px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.vbox-child > img,
.vbox-child > iframe,
.vbox-child > video {
    border-radius: 16px;
}

/* === Chrome buttons (close, prev, next) — shared treatment ===
   White pill with subtle shadow, rounded-xl (project default), full
   opacity so they read clearly on the white backdrop. */
.vbox-close,
.vbox-prev,
.vbox-next {
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
}

.vbox-close:hover,
.vbox-prev:hover,
.vbox-next:hover {
    background-color: #ffffff;
}

/* Close — pull off the corner for breathing room. */
.vbox-close {
    top: 1.25rem;
    right: 1.25rem;
}

/* VenoBox ships a stylized two-path X (filled diagonals). Hide it and
   draw a standard Heroicons-style X via mask-image so the close icon
   uses the same drawing technique as the prev/next chevrons. */
.vbox-close .vbox-close-icon {
    display: none;
}

.vbox-close::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: var(--vbox-tools-color);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
}

/* Prev / next — VenoBox positions them with top:50%; margin-top:-15px
   (centered for its 30px-tall arrow). Our 44px buttons need -22px to
   stay centered. */
.vbox-prev {
    left: 1.25rem;
    margin-top: -22px;
}

.vbox-next {
    right: 1.25rem;
    margin-top: -22px;
}

/* Replace VenoBox's rotated-border chevron (a 20×20 box with two
   colored borders rotated 45°/-135°) with a clean SVG chevron drawn
   via mask-image. The background-color is the visible color (driven
   by --vbox-tools-color); the SVG just clips that fill to the chevron
   shape — no font/character rendering involved. */
.vbox-prev span,
.vbox-next span {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    transform: none;
    background-color: var(--vbox-tools-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    text-indent: -9999px; /* hide the "Prev" / "Next" text label */
    overflow: hidden;
}

.vbox-prev span {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

.vbox-next span {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Counter — sits in .vbox-left-corner. Push it off the corner to
   mirror the close button's inset, and wrap in a small soft pill so
   it visually pairs with the chrome buttons. */
.vbox-left-corner {
    top: 1.25rem;
    left: 1.25rem;
}

.vbox-num {
    color: #334155; /* slate-700 */
    font-weight: 500;
    font-variant-numeric: tabular-nums; /* "1 / 12" doesn't shift width */
    padding: 8px 14px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem; /* rounded-lg */
}

/* === Mobile (< 640px) — prev/next drop under the image ===
   On phones the side-positioned arrows overlap the image edges. Move
   them below, side by side, centered. Shrink the image's max-height
   so it doesn't get pushed under the new button row. */
@media (max-width: 640px) {
    .vbox-fit .vbox-child img,
    .vbox-fit .vbox-child.venoratio {
        max-height: calc(100vh - 140px);
    }

    .vbox-prev,
    .vbox-next {
        top: auto;
        bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
        margin-top: 0;
    }

    .vbox-prev {
        left: calc(50% - 4px);
        right: auto;
        transform: translateX(-100%);
    }

    .vbox-next {
        left: calc(50% + 4px);
        right: auto;
    }
}

/* === Dark theme ===
   Project uses class-based dark mode (html.dark, toggled in
   resources/views/view_assets/common_js.blade.php). VenoBox renders
   inside <body>, so .dark on <html> matches our descendant selectors
   here — no JS, no DOM changes needed. */
.dark .vbox-overlay {
    --vbox-tools-color: #f1f5f9; /* slate-100 — light icon on dark bg */
}

.dark .vbox-backdrop {
    background-color: rgba(15, 23, 42, 0.95); /* slate-900 */
}

/* Image card — VenoBox hard-codes background-color:#fff inline on
   .vbox-child every time it opens, so this override needs !important.
   Swap the subtle dark ring for a subtle light one on dark backdrop. */
.dark .vbox-child {
    background-color: #1e293b !important; /* slate-800 */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 10px 40px -12px rgba(0, 0, 0, 0.6);
}

.dark .vbox-close,
.dark .vbox-prev,
.dark .vbox-next {
    background-color: rgba(30, 41, 59, 0.85); /* slate-800 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dark .vbox-close:hover,
.dark .vbox-prev:hover,
.dark .vbox-next:hover {
    background-color: rgba(51, 65, 85, 0.95); /* slate-700 */
}

.dark .vbox-num {
    color: #cbd5e1; /* slate-300 */
    background-color: rgba(30, 41, 59, 0.85); /* slate-800 */
}