/*
 * plg_system_chaosloupe - front-end styles
 * Component rules are one line each, sorted alphabetically by selector.
 * :root, @keyframes, and @media blocks are kept multi-line and are not
 * reordered.
 */

/* Root variables */
:root {
  --cl-blur: 8px;
  --cl-backdrop-opacity: 0.75;
  --cl-speed: 250ms;
  --cl-spinner-color: #ffffff;
  --cl-accent: #ffffff;
}

/* Component styles (alphabetical) */
.cl-backdrop { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background-color: rgba(10, 10, 12, var(--cl-backdrop-opacity)); -webkit-backdrop-filter: blur(var(--cl-blur)); backdrop-filter: blur(var(--cl-blur)); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--cl-speed) ease, visibility 0s linear var(--cl-speed); }
.cl-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--cl-speed) ease, visibility 0s linear 0s; }
.cl-backdrop.is-open .cl-figure { transform: scale(1); opacity: 1; }
.cl-btn { appearance: none; border: 0; border-radius: 999px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: rgba(20, 20, 24, 0.55); color: var(--cl-accent, #fff); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.cl-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-btn:active { transform: translateY(0); }
.cl-btn:focus-visible { outline: 2px solid var(--cl-accent, #fff); outline-offset: 2px; }
.cl-btn:hover, .cl-btn:focus-visible { background: rgba(20, 20, 24, 0.85); transform: translateY(-1px); }
.cl-btn[hidden] { display: none !important; }
.cl-caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: 80vw; padding: 8px 16px; border-radius: 10px; background: rgba(20, 20, 24, 0.55); color: #fff; font-size: 14px; text-align: center; }
.cl-caption:empty { display: none; }
.cl-counter { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 20, 24, 0.55); color: #fff; font-size: 13px; z-index: 3; }
.cl-exif { position: absolute; top: 0; right: 0; bottom: 0; width: 240px; max-width: 70vw; background: rgba(15, 15, 18, 0.9); color: #fff; padding: 16px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; z-index: 4; }
.cl-exif-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); font-size: 13px; }
.cl-exif-row span:first-child { color: rgba(255, 255, 255, 0.6); }
.cl-exif-status { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.cl-exif.is-visible { transform: translateX(0); visibility: visible; transition: transform 0.2s ease, visibility 0s linear 0s; }
.cl-figure { position: relative; max-width: 92vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; transform: scale(0.96); opacity: 0; transition: transform var(--cl-speed) ease, opacity var(--cl-speed) ease; }
.cl-filmstrip { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); max-width: 90vw; display: flex; gap: 8px; padding: 6px; border-radius: 10px; background: rgba(20, 20, 24, 0.4); overflow-x: auto; scrollbar-width: thin; z-index: 3; }
.cl-filmstrip-thumb { appearance: none; border: 2px solid transparent; border-radius: 6px; padding: 0; width: 52px; height: 40px; flex: none; overflow: hidden; cursor: pointer; opacity: 0.6; transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease; background: rgba(0, 0, 0, 0.3); }
.cl-filmstrip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-filmstrip-thumb.is-active { opacity: 1; border-color: var(--cl-accent, #fff); transform: translateY(-2px); }
.cl-filmstrip-thumb:hover { opacity: 0.85; }
.cl-filmstrip[hidden] { display: none; }
.cl-img { max-width: 92vw; max-height: 82vh; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: grab; transform-origin: center center; transition: transform 0.06s linear; will-change: transform; }
.cl-img.is-panning { cursor: grabbing; transition: none; }
.cl-img.is-zoomed { cursor: grab; }
.cl-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.cl-nav--next { right: 14px; }
.cl-nav--prev { left: 14px; }
.cl-spinner { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: var(--cl-spinner-color, #fff); animation: cl-spin 0.8s linear infinite; display: none; }
.cl-spinner.is-active { display: block; }
.cl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cl-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.cl-toast { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -12px); padding: 8px 16px; border-radius: 999px; background: rgba(20, 20, 24, 0.85); color: #fff; font-size: 13px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.cl-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cl-toolbar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 3; }
.cl-watermark { position: absolute; pointer-events: none; color: #fff; font-size: 14px; line-height: 1.2; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.cl-watermark img { display: block; width: 100%; height: auto; }
.cl-watermark[data-pos="bottom-left"] { bottom: 10px; left: 10px; }
.cl-watermark[data-pos="bottom-right"] { bottom: 10px; right: 10px; text-align: right; }
.cl-watermark[data-pos="center"] { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.cl-watermark[data-pos="top-left"] { top: 10px; left: 10px; }
.cl-watermark[data-pos="top-right"] { top: 10px; right: 10px; text-align: right; }
[data-enlarge]:not([data-enlarge="false"]) { cursor: zoom-in; }
body.cl-lock { overflow: hidden; }

/* Animations */
@keyframes cl-spin {
  to { transform: rotate(360deg); }
}

/* Responsive & accessibility media queries */
/* Small screens */
@media (max-width: 640px) {
  .cl-toolbar { top: 8px; right: 8px; gap: 6px; }
  .cl-btn { width: 38px; height: 38px; }
  .cl-nav--prev { left: 6px; }
  .cl-nav--next { right: 6px; }
  .cl-counter { top: 8px; left: 8px; }
  .cl-filmstrip { bottom: 52px; gap: 6px; }
  .cl-filmstrip-thumb { width: 40px; height: 32px; }
  .cl-caption { bottom: 10px; font-size: 12.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cl-backdrop,
  .cl-figure,
  .cl-img,
  .cl-toast,
  .cl-exif,
  .cl-filmstrip-thumb {
    transition: none !important;
  }
}