@charset "utf-8";
/* CSS Document */

/* refactored with chatGPT — 03/10/2025 15:32 UK */
.index-modal.hidden { display: none; }

#fileTypeIcons{
    height:35px;
    margin-right:0px;    
    margin-left: 3px;
}
#fileTypeIcons img{
    height:35px;
}

#buyCancelButton{
    float:right;
}
.index-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.index-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55); /* dark transparent background */
}

.index-modal__panel {
  position: absolute;
  width: 80vw;           /* ~80% width of visible page */
  height: 80vh;          /* ~80% height of visible page */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
    z-index: 19999;
}

.index-modal__content {
  padding: 12px;
  overflow: auto;        /* scroll if content overflows */
  height: 100%;
}

/* Reuse your existing button look; ensure Close matches */
#closeIndexModalBtn {
  border: 1px solid #ccc;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 12px;
  margin-left: 6px;
}

/* Optional: visually-hidden helper for the <h2> */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/*
:root {
--pad: 16px;
}
* {
    box-sizing: border-box;
}
body {
    font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    padding: var(--pad);
    background: #fafafa;
}
*/
.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.toolbar label {
    font-size: 12px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}
.toolbar select, .toolbar input[type="number"] {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
}
button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 8px;
    cursor: pointer;
}
button.primary {
    background: #111;
    color: white;
    border-color: #111;
}
#info {
    font-size: 12px;
    color: #555;
    margin-left: auto;
}
#host {
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    overflow: auto;
    min-height: 200px;
}
.err {
    color: #b00;
}
code.badge {
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 4px;
}
.row {
    font-size: 12px;
    color: #555;
    margin: 6px 0 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* refactored with chatGPT — 21/10/2025 12:00 UK */
.pz-viewport {
  position: relative;
  width: 100%;
/*  height: min(78vh, 70vw);*/
  overflow: hidden;              /* clip panning to modal frame */
  background: #f7f7f7;
  border-radius: 8px;
}
.pz-viewport img {
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;               /* allow free scaling beyond natural viewport */
  display: block;
}
.pz-controls {
  position: absolute;
  right: 10px; top: 10px;
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.pz-controls button {
  border: 1px solid #ccc;
  background: white;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}


/* for the svg version */
/* refactored with chatGPT — 09 Nov 2025, 10:24 UK */
.pz-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }
.pz-mount { position: absolute; inset: 0; }
.pz-mount svg { width: 100%; height: 100%; display: block; }

/* refactored with chatGPT — 09 Nov 2025, 10:44 UK */

/* Overlay + modal sizing */
#previewOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.55);
}

#previewOverlay .modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: 70vh;                 /* <-- gives the modal real height */
  max-width: 1200px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;                /* header + body */
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

/* Header area */
#previewOverlay .modal-actions {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

/* Body must be allowed to *grow* and also *shrink* (min-height:0 is critical in flex) */
#previewOverlay .modal-body {
  flex: 1 1 auto;              /* fill remaining height */
  min-height: 0;               /* <-- prevents collapse/overflow issues */
  display: flex;
}

/* Viewport takes all body space */
#previewOverlay .pz-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;               /* <-- crucial so the child can size correctly */
  overflow: hidden;
}

/* Inline SVG mount fills the viewport */
#previewOverlay .pz-mount {
  position: absolute;
  inset: 0;
}
#previewOverlay .pz-mount svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Controls sit above SVG and remain clickable */
#previewOverlay .pz-controls {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  pointer-events: auto;
}

.pz-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pz-mount { position: absolute; inset: 0; }
.pz-mount > svg { width: 100%; height: 100%; display: block; }

#gal {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;

}