:root {
    --lightbox-bg: rgba(0, 0, 0, 0.9);
    --lightbox-overlay-bg: rgba(0, 0, 0, 0.5);
    --lightbox-button-bg: rgba(255, 255, 255, 0.2);
    --lightbox-button-bg-hover: rgba(255, 255, 255, 0.3);
    --lightbox-text-color: white;
    --lightbox-border-active: #38d;
    --lightbox-border-inactive: #fff;
    --lightbox-caption-color: #fff;
    --lightbox-caption-bg-opacity: 0.15;
    --lightbox-caption-bg-color: #fff;
    --lightbox-caption-border-color: #fff;
    --lightbox-caption-bg-blur: 7px;
    --nav-button-size: 50px;
    --thumbnail-width: 120px;
    --thumbnail-item-width: 100px;
    --thumbnail-item-height: 80px;
    --thumbnail-item-gap: 5px;
    --lightbox-element-padding: 20px;
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --z-lightbox: 10000;
    --z-caption: 10001;
    --z-close-btn: 10002;
    --z-nav-btn: 10003;
    --z-nav-btn-mobile: 10004;
}

[data-lightbox-caption] {
    display: none;
}

.thumbnail {
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail .play-icon {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lightbox-text-color);
    font-size: 24px;
    transition: transform var(--transition-fast);
}

.thumbnail:hover .play-icon {
    transform: scale(1.1);
}

/* =============================================================================
   LIGHTBOX STRUCTURE
   ========================================================================== */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--lightbox-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-lightbox);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium) ease, visibility var(--transition-medium) ease;
    backdrop-filter: blur(10px);
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-container {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
}

.lightbox-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--lightbox-element-padding);
    padding-right: 0;
    overflow: hidden;
}

.lightbox-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =============================================================================
   LIGHTBOX IMAGE STYLES
   ========================================================================== */

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    cursor: zoom-in;
    transition: opacity var(--transition-medium) var(--transition-ease);
    will-change: transform, opacity,image-rendering;
    position: absolute;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 1;
    pointer-events: auto;
    image-rendering: crisp-edges;
}

/* Combined Image States */
.lightbox-image.zoomed {
    cursor: zoom-out;
    transform: translateZ(0) scale(2);
    image-rendering: pixelated;
    max-height: 100vh;
}

.lightbox-image.transitioning {
    opacity: 0;
    transition: opacity var(--transition-fast) ease-out;
}

.lightbox-image.dragging,
.lightbox-image.dragging.zoomed {
    transition: none !important;
    cursor: grabbing;
}

.lightbox-image.animating,
.lightbox-image.next-image.animating,
.video-overlay.animating,
#tempTransitionImage.animating {
    transition: transform var(--transition-medium) cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity var(--transition-medium) ease;
}


.lightbox-image.next-image {
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
}

.lightbox-image.next-image.visible {
    opacity: 1;
}

/* =============================================================================
   LIGHTBOX CONTROLS (BUTTONS)
   ========================================================================== */

/* Shared Button Base */
.lightbox-nav,
.lightbox-close {
    position: absolute;
    background: rgb( from var(--lightbox-button-bg) r g b / 0.025);
    border: none;
    color: rgb( from var(--lightbox-text-color) r g b / 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover,
.lightbox-close:hover {
    background: rgb( from var(--lightbox-button-bg) r g b / 0.15);
    color: rgb( from var(--lightbox-text-color) r g b / 1);
}

/* Navigation Button Specific */
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    width: var(--nav-button-size);
    height: var(--nav-button-size);
    z-index: var(--z-nav-btn);
    pointer-events: all;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.lightbox-nav:hover {
    opacity: 1;
}

.lightbox-nav.prev {
    left: var(--lightbox-element-padding);
}

.lightbox-nav.next {
    right: 0;
}

.lightbox-close {
    top: var(--lightbox-element-padding);
    right: calc(var(--thumbnail-item-width) + var(--thumbnail-item-gap) + var(--lightbox-element-padding) + var(--lightbox-element-padding));
    font-size: 24px;
    width: var(--nav-button-size);
    height: var(--nav-button-size);
    z-index: var(--z-close-btn);
}

/* =============================================================================
   LIGHTBOX UI ELEMENTS
   ========================================================================== */

/* Shared Positioning Base */
.lightbox-counter,
.lightbox-caption {
    position: absolute;
    color: var(--lightbox-text-color);
    border-radius: 15px;
}

.lightbox-counter {
    top: var(--lightbox-element-padding);
    left: var(--lightbox-element-padding);
    background: var(--lightbox-overlay-bg);
    padding: 5px 10px;
    font-size: 12px;
    color: rgb( from var(--lightbox-text-color) r g b / 0.5);
}

.lightbox-caption {
    color: var(--lightbox-caption-color);
    bottom: var(--lightbox-element-padding);
    left: var(--lightbox-element-padding);
    right: 0;
    padding: 1rem;
    border-radius: 8px;
    font-size: 16px;
    border-top: 1px solid rgb(from var(--lightbox-caption-border-color,#fff) r g b / 0.10);
    border-left: 1px solid rgb(from var(--lightbox-caption-border-color,#fff) r g b / 0.060);
    border-right: 1px solid rgb(from var(--lightbox-caption-border-color,#fff) r g b / 0.060);
    border-bottom: 1px solid rgb(from var(--lightbox-caption-border-color,#fff) r g b / 0.012);
    background: rgb(from var(--lightbox-caption-bg-color,#fff) r g b / var(--lightbox-caption-bg-opacity,0.6));
    backdrop-filter: blur(var(--lightbox-caption-bg-blur,12px));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: var(--z-caption);
}

/* Loading Indicator */
.lightbox-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--lightbox-text-color);
    animation: spin 1s ease-in-out infinite;
}

.lightbox-image-error {
    width: 30vmin;
    height: 30vmin;
    background-size: 100%;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAXwElEQVR42uxdDZRdVXXeoyQSQPAFiBCJhhFQtAoyUUBEBCYC4tKAvFhqsegqk64WwVbpRAEtFu1EpL8WYYooWJHmWSgiiouBxkCQn0wg/AnBjBEFW2gzBiEg+Zmeb919y5nzzrn3vnfv+/++tfZK5t77zj3n3v3ds/c5++zTNzU1JQRB+PEyPgKCIEEIggQhCBKEIEgQgiBBCIIEIQgShCBIEIIgQQiCIEEIggQhCBKEIEgQgiBBCIIEIYiOwg6trkClUumm5/lOIx80crCRXZp43+eMPGzk+0ZuMdIxq+DK5TIJ0gPoN3KxkUUtrMNCI2cbWWHkk0bW8rXQxGoHvMvIHS0mh433GFlp5Ei+GhKk1TjcyPeMvLrN6rWrkeuNHMZXRBOrleSAzV/ynHvByLiR7U2qy1uMvMo5hnrdaOREI3fydZEgrSDHbM+5X6u5dXcT6/NmI2NG9nKOz1aSvN/IT/jaeocgMGn2NTIj4ZrNRh4z8kzB9z4shRzvM3Jfk5/HQ0aOlWgEy0eS77Mn6Q2CvNXIZyUasZmd4fpfGbnWyIVGni6IHDcG7v2UKuF9LXo2D+v9bzKyZ6AnAXnvotp3p5MO5bzdyIczkgPYx8hZ+uXcI+f9D00hx/FG7m3xM1qj9fB9DGKSHEq17z6CoJ4XGXllnb/HPMW5OcnxgzYnRxaS7E6SdCdBYFodkbMMTNnWM7t9fAeRoxaSvJfq3z0EOdBIX84y5hp5TQ3Xg0wXGLkhQA4o3wltSA6bJCckkASO++eluSExJEgDgC/hOQWUA4JdYmReynWv1/tBwT4XGMj4b63XmjZ/duNKkqc85zAC+Fd6zae03YSrNK3O7q7Bing5CPR7k5G9jczS05hoe4ORtxV4y1v1q9rnIdA8Ned2Svg9ho4/ZOSBDnrPBxn59xQSYFj8fiO/lNYEO75o5EmJhqzvKJfLP+t5ghhynGT++ROJ4oZmdYCiXWdkiRQzZNxsYO5o1MgHOqCuz0s0YnmpIcq1PUcQQ4wDzD//oGZKJ2CdkS8ZubILrIaPSTSXtF+H1PdHRs4yRFnXEwQx5IBN/C11FNsdCBf5htb3uS4yreGYf1TJsqAD6vu/Rk4zJPlhVxPEkAM+BmKCdg1cAp8D4RrPWsemAv8PDTL0aTlbE37nKxO/22LkcYkmFv9Tmhtw2Aq8TAlyjERzI/PUebefiaT8X2q8NnRuZ/U/Xx6oK0KGDjckebgrCWLIgYb/WPzzGSAERpiuUSf4xUAxUwkP2z425Sh2UiOnHGL18p50fUqaqYTnm3Q8y/nQuZlq9p1q5E/FP/yMdTfvNiTZ1qwH0sxYrI8EyLHeyCnSuhgmYvrHYlszb2gtuX1RdeA+8zHFhxLDm+6oG0Y6/0BN3qZ1sc3qPc4KkOMEkoNwSHOv6sV6z+mzVZ+6hyASzWMc4hyblGidwmNUCcJDksdUPyadU4dIsfNibUGQoz2255fNQ3iEqkAkkAT68WWPD3N0txHkYOfv3xq5iipAZMBVqi9J+tTxBHFXua0zX4cn+e6JDL0I9MSdJNy72wiyo/P3M3z1RA1w9eUVzbpxs4Z5++qs22KJAu3q+f0GI9/xOHmtBj5Kc4y8VqLwe3wNEU4/S9uMCU7EIm2UaNL0CSO/kCj+azu50ly085p0DAtfnLMMJDL4UBu0BREECMg8QgmPGetSDb8HyRFli+FwTJYhMdxPqb69TZAiMgMuUPPuhRbU/40STYB+QJ3KGTnKKqkgFB8xVJhUQ2pRJK37rhGOBvYgQYqYDOprQRuPkyiE/zhpXAg/wjLeroLIXES8Xqr/Eh3opNeDqYLKaFZsFVLqrJAo7c6iGskBn2OTmlKb9O+smKX3u0nvfwLVujd6kE4B/Avk3Topw7WIFsaQJZbqPqh+xH8Z+Y1EK/q2ac+JFY1IJYrhcazH/z0jA0YOSHlnR6lgkdF59FNIkFYC5hvWriOd0K4J10Hpb5NoNSLSgz4qtQUE3mCZnPBrBpWM70owQ0/W60Dcr0hvRyiTIC0ARqEul+TUORimxTDzFVJMcgeQ6iEVrMZETNLHJYpu9Y2IgbQI08BajzMkyjJJdJEP0ldQGX0F1wsKd0cCOV5QBUZA3ZnSuMwna7R83OefjPwucN3xWt+jqe7dRZAiJsWKXt9wukRJ1/YJnL9Zoszv2OHp8SY9J0wiYs7onWrChXo8JL/7I6p89xDkjgLKwMTa8wXV5xMSrU/f0XMO90BuqeOkdWtb1miv9mnxz/ug3t/UXofoAh8EZgoW6x+szmhWRzM2qTZIcSvPTjPyj4FzExJN3q1qg2eGZ4ToAySbQAaWfT3XwBzDcPK3qf6dTRDY1F9vg3q8W6J8Uj7cI9GIUbs5wLdpvTFy5sta8i9qmt1OCnSuidUOmKtfWp9ZdbuaNO06OvQrrZ+vZ8Pk4tVSvQyBIEEyA6baFQGHHOTActDftHkbYEqdGCDJPG1fH181CVIPPqlOt4vVSo5NHdKOTVrfcc85hKWcxVdNgtQKpJu5wHMcdvuiDiJHDPR0HxT/0PMXAs48QYIEsUyqd7PC0ClmrZ/o0DY9ofV3JxR31fYSJEgmYMbZt8jqfClmbqaVgC/yOc9xZG87iq+eBMmC8z3HkDL1b7ukfQheXJmx3T0PBitOx1FSHbMEk+RsKX49ONakIzzkUPV5sE4dw69YLYgdobCBDCb8bpNiw1a2a3uwHfRM6ziWJx+p9yNIEC98YRgYCl1b4D0QPLhEFTLLrr3ICYVM85isvLGgOiAc5htaD7f9JAhNLC9eJ9GqQFc5RwoqH8kafqiySLJvaY3rsK4dm25i1WBRSdP+RqZvMwGcqD0bQYJ4HVV3b8JrCjJvzlQHP++OWsepo/2JAur0C22fjZ2lPbLAkCBtBswmu0tmESZ/aQFl/51EAYI7pSjrSjWhVkgUaBkCykHg5N8XULdLpXo5wMlUB/ogLuZLdfZ5BCLm3QP9zySakfcB5g0ibq9Wn2CzdW6WmlLYTAbbpPk2k4GjvV7JVy8QIr9aBwpiDOjz2EC1YA8SA5GvbkAitk3Os5YbiRYuCpzDVtTvsEyvzc55rC/BVnUIA0Fqn1sC5WCC7y056jil7RSHnEdSJUgQG+7OV0j/mSfHVJ+aQL7UP/+qvkTWjCOPqO/iW9syS024PAGHP/KYWUdQJUgQW5ndDVkmJF/KHISZHxsgx+kyfYPRLNiqppaPJMeKP6gyK36q7bVxiDDKlwRRIHG0G6x3bx1KbOPMgFn1Mal/jfw2/f2tAV+nXmzx+FrwQV5F1SBBAKz3cPdsz7OuHOssjnGOYT7ljJyki0lyhlRvKHOM3rdeuO3dQ8KJKUiQHoNPsdbldPjdId0rPGZMvZjQ8mzgfnmCDdd5zM55VA0SBJjjOZZn96vDPF/9Kwuu85UeU+3QHOU9mfG5kCA9iJLHJt+Yo7wDnL83SJSHt0igvJ87x96Qo7yN2u6k50KC9Ch28hBkc47ydveYRFsKrvMWj8m2u9Q/8vScp447UzVIEMCNJtieQ6HxPN39855tUL3dcmfmIMhWqQ7nZ5QFCfL/PoLroOZRDnekascG1XuWp1epd+b/5R5d2ErVIEGA5z1fznp3hsJX2E0F9DopZrcsV6HnO8cmcxBkJ89H4XmqBgkSK5ZrqszOUd7PnL/3M7J/wXU+QMtNum8tmC3TVxf6ngsJ0qN42mNi5ck4eI+HcKcWXGeUNyPlvrVgrwzPhQTpUfhSh+b54mN57IvOMWzquWdB9cX8hLtUFvdbkaPM/TM+FxKkB/FLj99wUE4T6ycepf5qQfX9qlRP4q3KaWK57d2oz4UE4SOQ/5FoRZ+Nt+V4NnCUv+Y5vljyJ2jDlmplz/Gv5dQBN5r5cck3WUqCdBEw8rTW4wTnMbOwCMmXC/cvc5AE5Dgn4PNcl9Phd2f/75Pi0xyRIB2MVR7H+tgc5WEO4VPiH3YFSa6SKGI2C3DdtwLkgBJ/WvLNWQx6HP5VVAkSxAYSJriz53mzeyAb45cC507THgZKH0ocva+SCdf9YeCaL4o/S2ItONnj8K+kSkRgOEEEhHs/INMTN2AfcuxL/kiOcs9XU22x59xr1Wz6vN4bsVXPSJRMul+iteZJ8VDX6G/z4ECpXl57f06HnwTpUj/keocgMLP+WE2YegET61QdBDgncA1IcJhUh8knAX7MZyRfUgnR9rkThP9B/4Mmlg/LpXr+4nTJP3+xXU2l92tPkQf4uiP74dICyIGhYndbaOQhrlAVSBAfYEq5670RQv7nBZWPpHBI9YNJvrtr/C2uH9Lf/6Cg+vyFVIfm3yL5VlPSxOpyYBLOTQ+KBAzYFfbnBZSPTXiQhPpyifJdHa1KP1+ieKgZ8tKCrQ1KDMzM31Ow2QMfx5fo4Z+pAiRIEpAcGpkG7a2TkTwae4OcVLDPc5cKgPivOKIWQ7abCzChkoBcWrt4eqmbqAI0sZKAtSEXeo4vUn+kUQAZsKpvk/7bSHJ8XKJs8S4upHNOgmTB98Sf6hNf3Td2eNsOFP9OWTdLtL0CQYJk+ppjSNbd7BKJ1P5NonmKTsRuWv/dnOO/0/ZO8dWTIFmBTIMXe46/VaLh4Jkd1p5XaL19ia4xWbmWr5wEqRUXiH84FnlwvyPV8Uvtihla3/d6zmGQ4K/5qkmQeoBJw49K9VoRAPFL13RATzJTzSrfCNyktm8LXzUJUi8elSgXrgRIcm0b+ySo13UBcsDfQJgJJwVJkNz4roTjqBD2gRGv/duszqgPogLeFzh/jpKbIEEKwVckHLqOScXbjfx+m9T1VK3PQOD8FwMDEAQJkgvnGvls4NwcdYS/aWTvFtVvrt7/agknnkYE8Hl8lSRIo4C9xbHY6beB84iOxRAxVhO+skl1wn0Qkr9GqqNzY2CdCRZdjfAVkiCNBrZRe4+EN9l5tZpkOD/cwB5lrpaP+1yk9/XhXq3vt/nqSJBmAV9rrDhM2oK5X7/YD6rZc4rk33MDJCirOfeglt8fuBYjVdhP/UjJv511z4LRvPUDQYXYpvl6dXxDG9jMVscZgjB2rDFfrUqLlYZPqMmG+Yjt+tHC5N6u2kvMl2jP9AXqeGdJi3qn+ky38jWRIK0GhnmRoAFRslhclRTQCOVeqBID5NisslXfCULfsRR3lxrrgh1rEVSJLdq28dWQIO0CKDYWQiE9z0ckWv339hqc7LwOPRZUXaZ+xgt8HSRIuwJbBmC14Ncl2lTzwxKtUJzfgHttkGiBE0JeVgqjcUmQDgKUdYUKzCQsq8VWzYerCTa3jjKfVBMKeX+xDPcu9YMIEqSj8aw6y7HDvJv2KBh9wuY6c9Q3cZfcwqF/Sh35Ce0xNvFx9gZBetkcgJKvFa7B6Ah9adY8iJtvijuoErVg5xR96niCuLsV7V+pVPbgeyfSoHriRks/1W0EcTMKwuY+ha+fyIDFUj05+kC3EeTHnmPnma/DXnz/RELvgTi2cz2nVnQbQRD68Khz7DUSJUrek6pAeMgxR/XDHRLHUPfdXUWQcrmM1DKXeE4hfukGJQtBxOTYR/XiHZ7Tlxh9apqT3sxhXuS3ReLmN3lIgkkvrLXAMtBfU0V62qTCxkWfEf9k6kMSRSo0DX1TU1PNfAAIEceEWShlDjJtrJcoZIPoLcwysp9ECfp8QK9xjOk9VnUtQZQkyBKCLOozqRNERsBEP9OQ4/Jm37jpC6ZMI2FqIdz7fr53IgMQcTDYCnK0pAexepId1SdBj/Jm6gHh8TewhOAyHeSRniKIRRSYWohyhX9ykETbHtP86j3Ax3haLYvbjNzZzNGqtiUIQbQzmLSBIEgQgiBBCIIEIQgShCBIEIIgQQiCBCEIEoQgSBCCIEgQgiBBCIIEIQgShCBIEIJoQzQ8q0mlUsGeesutQ6PlcnmJdd6+HJtSxjuxIqNexVMkyhuUaJMaG0j4MKoyUUMVl2uZ7j3demPrtAUJ5WB7tNVOfULbpZUkSk5R0r+XGVmaUs9+bfOQ9Tuxfl/ROia1LwmT5r3MJiVa34MMKWnqwXKVoYDSDaviDTeg3gMpilZLm1wlL2e4Pm5XyXN+WMk5TJXusB4kgBFDkjHzxZqs4TeXeRRpmUUOmzQjVo9SJMqBXk0CpJWM1/YnlD2obZ/WMWsv6Ws3epGxUIee0LtOkg7tQ5B+7QkW1vD1thUBir/EuWapljloKUsjCNLvUbLQl10CCt9vKWXJIo2PICOOmbfYub/b7qEUgky7h/lIkQVtZGLZL27Q9CJZv7pDjpIsCXwBF1tfwlKNX/VE+zylpyjX8CUecpR7wkMc+0MyYP29xEPOuN3oTV+v/yc6lCDjjjM64lGKUA9i9x5JilxxFKyoeof8hUGrfuMp5ZSsL709qBAq2273REL5kw7ZiE510k2XvszqSUoyfaQoySTz9UJpylwkQSpWmUOBHqFSg3Ne8bRnKEe7sw5yTNlievFYaGu1A0EsU2HS+krWMvoymfN8vah4FNntEZZl8GHc8sYtUvdLeERr0uObTAWkRNXuYCfd9CIT5ou11BqdGUkxT2xndiDla9rfILLEI0CxXzCg5ChlMP1cUwy4OYFEFU/9BwpsQ1rPS7SSIEqSUUOSQeuLOZJgokxYij+YQpCy87siMSovjSoNWb1HFvMqqwkTk27Sqf+AdTxW6GVO+f0ZCMJRrE4giGVqDVhf5f6EFxsr47ASZCxg4w/UoLT1ECQe0nVH1sZrIMiop3cbtEgwpMo/Zn0cSkrOJQFlH6Q6d48PEn+9JmX6kG0pQTEnHPNkxPndZTJ9Qq3SgB5kMkC6NPPKnieZ0DYvdWQ04Ky7x292PgK+Y0SX9CDx6MyopM9ZLFZFKFlKN5xgTy9pUH3duk5kIEg5A5li862kPUZsSi7T/w9aPcXqFDMq5HtVjRg6sXCLzUerQlq0SQ/imFppJkocLDiWQYEXSONGs1xzKk2hBqyve1r4SyVAqoWSPkIW90ycKOywHsR2JsdTSFJOGVWZUGUpeXqPLMOsoR5swnPPpHrbdXXvucxxpu16TaYQd5l13jUPY1PMF9aSFME8VoOpyZEsB9z+gCA6wMQiCBKEIEgQgiBBCIIEIQgShI+AIEgQgiBBCIIEIYgmYodefwBOsB6AQEB7jbkvWdxGeSncA6EvofgwO2mbLzmcm5wulCzPLcu+zk5Yl5bczocs7QXspH4+xHFmdrhMWt0lQ1uT0PBkd+xBpsNd9Tcg/jDyUFChr7wYofUrkrGsVrY3C+L4uNXSRUt+dyAnUhW0LNVBfBVLuXF+SUD57TUgLkH6pXqRk72asJ3a62LMuWbAaku/EmVpQXVsabI7EsSvMG5uraUeBbFX+vmyItrKP5qinPGae3s1YTu118W455oReSnCur/AOlak+JWhNLHqgB1Gbr+UUAK60QAZfMcqKebV4gSzq13am4auzMlFgvi/6JUMfkbSedu88q3HsBMsjMn0Nfb90pz15bW2N62sYaeHIUG6CLZzOmEpbFJa0ImEr25a7+HLjzXWRGe9nva6vY+dh2u5dX2lYBOxKtmdJWUSpPm9x2hAuYdSepFBz/99S2xLgfN2ppOyNHYkqN72ZkGpYB+kpaCTXq0MI+If7y97HFM7mdygx7wK+R4lS5mmAkrWSGe93vbagxTjgXbhOSC5RlF5AVqa7I4E8e/Y5ENoD4+KTM+VVYtznvaVX9aG7Y0V0yUP/o4nHfsLJHhLR7FIkOnmhu/LaI/xJxEkPu/a9uKYXv0J5petwLGfMN5m7U3CuNX+rpgs7GmCVCqVAeeL79t/Awq93lIYdwOdcUsx0uY+3EzwSxPMq/j6IvN7FdHeJMfdbl9X7FjV6056OYOt6/YEaUO+oWOlDARyf1eugwChEZ/hAts77Cl/xCFHqH2hUamNNV4fb99QJkGaRxDJoLShScNJx3SZSLD9k3L52r8tcpesItubZmYt7JYepNd9kEpGhRl1fAcXcXK4pNGrCcmWQC92eN1dq0IJ7iYyOsNjjl9Qa3vHMtwntBV1luR1kzVeLxmfZS4wcRxB0MQiCBKEIEgQgiBBCIIEIQgShCBIEIIgQQiCBCEIggQhCBKEIEgQgiBBCIIEIQgShCBIEILoGvyfAAMAhEeh4GFWuAUAAAAASUVORK5CYII=') no-repeat center center;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* =============================================================================
   THUMBNAILS
   ========================================================================== */

.lightbox-thumbnails {
    width: calc(var(--thumbnail-item-width) + var(--thumbnail-item-gap) + var(--lightbox-element-padding) + var(--lightbox-element-padding));
    padding: var(--lightbox-element-padding);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--thumbnail-item-gap);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-thumbnails::-webkit-scrollbar {
    display: none;
}

.lightbox-thumbnails.dragging {
    scroll-behavior: auto;
    cursor: grabbing;
}

.thumbnail-item {
    width: var(--thumbnail-item-width);
    height: var(--thumbnail-item-height);
    border-radius: 4px;
    cursor: pointer;
    transition: all 300ms ease;
    will-change: outline,opacity, box-shadow;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    object-fit: cover;
    flex-shrink: 0;
    position: relative;
    opacity: .5;
    box-shadow: none;
}

.thumbnail-item:hover {
    outline: 2px solid var(--lightbox-border-inactive);
    opacity: .9;
}

.thumbnail-item.active {
    outline: 2px solid var(--lightbox-border-active);
    opacity: 1;
    box-shadow: 0 0 3px 4px rgb( from var(--lightbox-border-active) r g b / 40% );

}

.thumbnail-video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lightbox-text-color);
    font-size: 12px;
}

/* =============================================================================
   VIDEO SUPPORT
   ========================================================================== */

.lightbox-video,
.video-overlay {
    width: 100%;
    height: 100%;
    max-width: 80vw;
    max-height: 70vh;
    border-radius: 4px;
    min-height: 315px;
}

.lightbox-video {
    border: none;
    aspect-ratio: 16/9;
}

.video-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    transition: none;
}

.video-swipe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent;
    pointer-events: none;
    touch-action: pan-x;
}

.video-interaction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
    pointer-events: none;
}

.video-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* =============================================================================
   INTERACTION INDICATORS
   ========================================================================== */

/* Shared Indicator Base */
.swipe-direction,
.touch-indicator,
.drag-indicator {
    position: absolute;
    color: rgba(255, 255, 255, 0.7);
    transition: opacity var(--transition-fast) ease;
    pointer-events: none;
    text-align: center;
}

.swipe-direction {
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--lightbox-element-padding);
    opacity: 0;
    z-index: var(--z-lightbox);
}

.swipe-direction.left {
    left: 30%;
}

.swipe-direction.right {
    right: 30%;
}

.swipe-direction.visible,
.drag-indicator.visible {
    opacity: 1;
}

.touch-indicator {
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    display: none;
}

.drag-indicator {
    bottom: var(--lightbox-element-padding);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    opacity: 0;
    transition: opacity var(--transition-medium) ease;
    display: none;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Mobile Styles */
@media (max-width: 768px) {
    .lightbox-nav {
        z-index: var(--z-nav-btn-mobile);
        background: rgba(0, 0, 0, 0.6);
        opacity: 0.9;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .lightbox-nav.prev {
        left: calc( var(--lightbox-element-padding) / 2 );
    }

    .lightbox-nav.next {
        right: calc( var(--lightbox-element-padding) / 2 );
    }

    .lightbox-nav:active {
        background: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%) scale(0.95);
    }

    .lightbox-image.zoomed {
        transform: scale(1.8);
        cursor: grab;
    }

    .lightbox-image.zoomed.dragging {
        cursor: grabbing;
    }

    .lightbox-video,
    .video-overlay {
        max-width: 95vw;
        max-height: 60vh;
        min-height: 200px;
    }

    .lightbox-close {
        right: calc( var(--lightbox-element-padding) / 2 );
        width: 44px;
        height: 44px;
    }

}

/* Mobile Portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .lightbox-container {
        flex-direction: column;
    }

    .lightbox-main {
        flex: 1;
        padding: calc( var(--lightbox-element-padding) / 2 );
    }

    .lightbox-image-container {
        height: 70vh;
    }

    .lightbox-thumbnails {
        width: 100%;
        height: calc(var(--thumbnail-item-height) + var(--thumbnail-item-gap) * 2);
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--thumbnail-item-gap);
    }

    .lightbox-counter {
        left: var(--lightbox-element-padding);

    }
    .lightbox-caption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        font-size: 12px;
    }

    .lightbox-image {
        max-height: 60vh;
    }

    .lightbox-image.dragging {
        transition: none;
    }
}

/* Tablet Landscape */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
    /*.lightbox-thumbnails {*/
    /*    width: calc(var(--thumbnail-item-width) + var(--thumbnail-item-gap) * 4);*/
    /*    padding: calc(var(--thumbnail-item-gap) * 2);*/
    /*}*/

    /*.lightbox-main {*/
    /*    padding: 1rem;*/
    /*}*/

    .lightbox-close {
        right: calc(var(--thumbnail-item-width) + var(--thumbnail-item-gap) + var(--lightbox-element-padding) + var(--lightbox-element-padding));
        width: 44px;
        height: 44px;
    }
    .lightbox-caption {
        left: var(--lightbox-element-padding);
        right: 0;
        bottom: var(--lightbox-element-padding);
        font-size: 14px;
    }

    .lightbox-nav.prev {
        left: calc( var(--lightbox-element-padding) );
    }

    .lightbox-nav.next {
        right: 0;
    }
}

/* Desktop & Large Tablets */
@media (min-width: 1025px), (max-width: 1024px) and (orientation: portrait) {
    .touch-indicator {
        display: none;
    }
}


.video-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
}

.video-error.hidden {
    display: none !important;
}

.error-content {
    max-width: 400px;
    padding: 2rem;
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.error-message {
    margin-bottom: 1rem;
    opacity: 0.8;
}

.error-detail {
    font-size: 0.9rem;
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.video-id {
    font-size: 0.8rem;
    font-family: monospace;
    opacity: 0.5;
}


.video-info-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    max-width: 300px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-overlay:hover .video-info-overlay {
    opacity: 1;
}

.video-info-overlay h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: bold;
}

.video-info-overlay p {
    margin: 0;
    font-size: 12px;
    color: #ccc;
}

.video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#imageContainer.dragging {
    cursor: grabbing;
}

/* Ensure controls are on top and clickable */
#prevBtn, #nextBtn, #closeBtn, #counter, #thumbnails {
    z-index: var(--z-nav-btn-mobile);
    pointer-events: auto;
}