/* ==========================================================================
   Image Tools · photo gallery styles                          Version No.: 5
   The See All Photos toolbar and gallery, the thumbnail row under the big preview and the shared buttons around them.
   Taken from the PDF tools' See All Pages and renamed. Loaded after imgt-core.css by every tool that holds several photos.
   ========================================================================== */
.imgt-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; width:100%; }
.imgt-toolbar .imgt-remove-all{ margin-left:auto; }
/* With a photo added the toolbar stays at the top of the pane while the photos scroll under it. */
.imgt-pane-mid > .imgt-toolbar{
	position:sticky; top:calc(-1 * var(--imgt-pane-pad)); z-index:5;
	margin-top:calc(-1 * var(--imgt-pane-pad));
	padding:var(--imgt-pane-pad) 0 14px;
	background:var(--imgt-paper);
}
@container (max-width:500px){
	.imgt-toolbar{ justify-content:center; }
	.imgt-toolbar .imgt-remove-all{ margin-left:0; }
}
.imgt-label-group{ display:flex; align-items:center; gap:6px; }
.imgt-checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.imgt-checkbox input[type="checkbox"]{ width:19px; height:19px; accent-color:var(--imgt-accent); cursor:pointer; margin:0; flex-shrink:0; }
.imgt-checkbox span:not(.winfo-tip){ font-size:13px; color:var(--imgt-ink); font-weight:500; }

.imgt-presets{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.imgt-chip{
	display:flex; padding:6px 10px;
	font-size:11px; font-weight:600; white-space:nowrap;
	border:1px solid var(--imgt-line); border-radius:0;
	background:var(--imgt-surface); color:var(--imgt-ink);
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.imgt-chip:hover{ border-color:var(--imgt-accent); }
.imgt-chip[aria-pressed="true"]{ background:var(--imgt-accent); border-color:var(--imgt-accent); color:#fff; }

.imgt-zoom{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--imgt-muted); font-variant-numeric:tabular-nums; }
.imgt-zoom-level{ min-width:38px; text-align:center; }
.imgt-round-btn{
	display:inline-flex; align-items:center; justify-content:center;
	width:24px; height:24px; padding:0;
	border:1px solid var(--imgt-line); border-radius:50%;
	background:var(--imgt-surface); color:var(--imgt-ink);
}
.imgt-round-btn svg{ display:block; }
.imgt-round-btn:hover{ border-color:var(--imgt-accent); color:var(--imgt-accent-dark); }
.imgt-round-btn:disabled{ opacity:.45; }
.imgt-jump{
	width:auto; max-width:200px; height:30px; padding:0 10px; font-size:13px; text-overflow:ellipsis;
	border:1px solid var(--imgt-line); border-radius:var(--imgt-radius-sm); background:var(--imgt-surface); color:var(--imgt-ink);
}
.imgt-remove-all{
	padding:4px 0; border:0; background:none; color:var(--imgt-ink);
	font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}
.imgt-remove-all:hover{ color:var(--imgt-danger); }

.imgt-gallery{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
	align-content:start; gap:14px; width:100%;
}
.imgt-gallery.imgt-gallery-scroll{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.imgt-card{
	position:relative; overflow:hidden;
	background:var(--imgt-surface); border:1px solid var(--imgt-line); border-radius:var(--imgt-radius-sm);
	scroll-margin-top:60px; /* keeps a card clear of the sticky toolbar when the jump menu scrolls to it */
}
.imgt-card.imgt-selected{ border-color:var(--imgt-accent); box-shadow:0 0 0 2px var(--imgt-accent); }
.imgt-gallery-scroll .imgt-card{ min-width:min(300px, 100%); }
.imgt-thumb-wrap{
	position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
	aspect-ratio:1 / 1; background:var(--imgt-paper); cursor:pointer;
}
.imgt-thumb-wrap canvas{ width:100%; height:100%; object-fit:contain; display:block; }
/* One whole photo fits the pane at 100%; --imgt-zoom (set by the zoom buttons) scales it from there. */
.imgt-gallery-scroll .imgt-thumb-wrap{ width:calc(min(var(--imgt-scroll-h, min(75vh, 640px)) * var(--imgt-ar, 1), 100cqw) * var(--imgt-zoom, 1)); aspect-ratio:var(--imgt-ar, 1); }
.imgt-remove{
	position:absolute; top:8px; right:8px; z-index:4;
	display:flex; align-items:center; justify-content:center;
	width:24px; height:24px; padding:0; border:0; border-radius:50%;
	background:rgba(27,29,30,.55); color:#fff;
}
.imgt-remove::before{ content:''; position:absolute; inset:-10px; }
.imgt-remove svg{ display:block; }
.imgt-card-body{ padding:10px 12px; text-align:center; border-top:1px solid var(--imgt-line); }
.imgt-card-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.imgt-card-info{ margin-top:2px; font-size:13px; color:var(--imgt-muted); font-variant-numeric:tabular-nums; }
.imgt-add-more{
	display:flex; align-items:center; justify-content:center; gap:8px;
	min-height:100%; padding:10px 18px;
	border:1.5px dashed var(--imgt-line); border-radius:var(--imgt-radius-sm);
	background:var(--imgt-surface); color:var(--imgt-muted);
	font-size:15px; font-weight:700;
}
.imgt-add-more:hover{ border-color:var(--imgt-accent); color:var(--imgt-accent-dark); }
.imgt-gallery-scroll .imgt-add-more{ min-height:48px; width:min(340px, 100%); }

/* The thin row of thumbnails under the big preview, with a small X on each and Add More at the end. */
.imgt-strip{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 8px 8px; overflow-x:auto; scrollbar-width:thin; }
.imgt-strip-item{ position:relative; flex:0 0 auto; height:56px; transition:box-shadow .15s ease; }
.imgt-strip-item:hover{ box-shadow:0 0 0 2px var(--imgt-paper), 0 0 0 4px var(--imgt-line); }
.imgt-strip-item[aria-current="true"]{ box-shadow:0 0 0 2px var(--imgt-paper), 0 0 0 4px var(--imgt-accent); }
.imgt-strip-thumb{ display:block; height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; cursor:pointer; }
.imgt-strip-thumb canvas{ display:block; height:100%; width:auto; min-width:40px; }
.imgt-strip-x{
	position:absolute; top:-7px; right:-7px; width:18px; height:18px; margin:0; padding:0;
	display:flex; align-items:center; justify-content:center;
	border:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; cursor:pointer;
}
.imgt-strip-x svg{ width:10px; height:10px; }
.imgt-strip-x:hover{ background:#000; }
.imgt-strip-add{
	flex:0 0 auto; height:56px; padding:0 16px; border:1px dashed var(--imgt-muted); border-radius:8px;
	background:none; color:var(--imgt-ink); font:600 13px/1 inherit; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.imgt-strip-add:hover{ border-color:var(--imgt-accent); color:var(--imgt-accent); }