/* ==========================================================================
   Image Tools · shared styles                                 Version No.: 17
   Used by every image tool template. Loaded at the top of the tool wrapper in the
   page body, after every theme and plugin style, so a change here reaches all
   image tools at once. Tool-specific styles stay in each template.
   Edit class names only through a search and replace across all image tools.
   ========================================================================== */

/* ==========================================================================
   1 · BASE: tokens, wrapper, buttons, tooltips, shared components
   ========================================================================== */
#main{ padding-bottom:0 !important; }
/* On :root because the title and info icon also appear in the site's top bar, outside the tool wrapper. */
:root{
	--imgt-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
	--imgt-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--imgt-font-copy:'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.imgt-tool-wrap{
	--imgt-ink:#1b1d1e;
	--imgt-paper:#f2f1ed;
	--imgt-surface:#ffffff;
	--imgt-line:#dcdad2;
	--imgt-stage:#e3e3e3;
	--imgt-solid:#1b1d1e;
	--imgt-solid-dark:#000000;
	--imgt-muted:#6f716c;
	--imgt-accent:#1f6f5c;
	--imgt-accent-dark:#164f41;
	--imgt-focus:#2b6ef6;
	--imgt-success:#1f6f5c;
	--imgt-danger:#b3392b;
	--imgt-radius-sm:10px;
	--imgt-radius-pill:999px;
	--imgt-max:760px;

	background:var(--imgt-paper);
	color:var(--imgt-ink);
	font-family:var(--imgt-font-body);
	-webkit-font-smoothing:antialiased;
	display:block;
	box-sizing:border-box;
	padding:32px 0 80px;
}
/* A split-pane tool ends with its Download bar, like the PDF tools, so no extra room under it. */
.imgt-tool-wrap:has(.imgt-split){ padding-bottom:0; }
.imgt-tool-wrap *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* No tap highlight anywhere. The top-bar group sits outside the tool wrapper, so it needs it too. */
.imgt-navgroup{ -webkit-tap-highlight-color:transparent; }
.imgt-tool-wrap [hidden]{ display:none !important; }

[data-wlcustom-dm="dark"] .imgt-tool-wrap{
	--imgt-ink:var(--wlcustom-dm-text, #e8e6e3);
	--imgt-paper:var(--wlcustom-dm-bg, #0a1423);
	--imgt-surface:#121d30;
	--imgt-line:#223049;
	--imgt-stage:#212a3d;
	--imgt-solid:var(--imgt-accent);
	--imgt-solid-dark:var(--imgt-accent-dark);
	--imgt-muted:#8b93a6;
	--imgt-accent:#2bb3a8;
	--imgt-accent-dark:#1f8880;
	--imgt-focus:#6d9dff;
	--imgt-success:#2bb3a8;
}


.imgt-tool-wrap button{
	font-family:inherit;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.imgt-tool-wrap button:focus-visible,
.imgt-tool-wrap [tabindex]:focus-visible{
	outline:3px solid var(--imgt-focus);
	outline-offset:2px;
}
.imgt-tool-wrap button:disabled{ opacity:.45; cursor:not-allowed; }
/* Text boxes and menus never show a blue focus ring or border. Only the border darkens a little, so the visitor can still see where they are typing. */
.imgt-tool-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
.imgt-tool-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus-visible,
.imgt-tool-wrap select:focus,
.imgt-tool-wrap select:focus-visible,
.imgt-tool-wrap textarea:focus,
.imgt-tool-wrap textarea:focus-visible{
	outline:none !important;
	box-shadow:none !important;
	border-color:var(--imgt-muted) !important;
}
.imgt-tool-wrap button:focus:not(:focus-visible){
	outline:none !important;
}
/* After a mouse click, a key the tool does not use (such as Delete) shows no focus ring.
   imgt-core.js removes imgt-pointer as soon as the keyboard is used to move around. */
.imgt-tool-wrap.imgt-pointer button:focus-visible,
.imgt-tool-wrap.imgt-pointer [tabindex]:focus-visible{ outline:none; }

/* Reduced motion: no transitions or animations anywhere in the tool, including the About popup and the pulsing button.
   The top-bar group and Related Tools panel sit outside the tool wrapper, so they are listed too. */
@media (prefers-reduced-motion: reduce){
	.imgt-tool-wrap *{ transition:none !important; animation:none !important; }
	.imgt-navgroup *,
	.imgt-navgroup *::after{ transition:none !important; }
}
/* Reusable (i) info button + tooltip. Hover/focus shows it on desktop;
   a tap toggles it in imgt-core.js, so it also works
   on touch devices. Hover is scoped to hover-capable pointers only, so
   a tap on a touch screen can never leave it stuck open ("sticky hover").
   --winfo-shift is set by JS to keep the tooltip inside its pane, and
   .winfo-below opens it under the icon when the top of the pane would cut it off. */
.winfo{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	width:15px; height:15px; padding:0; flex:0 0 auto;
	border:1px solid var(--imgt-muted); border-radius:50%;
	background:none; color:var(--imgt-muted);
	font-size:10px; font-weight:700; font-style:normal; line-height:1;
	cursor:help;
}
.winfo:focus-visible,
.winfo.winfo-active{ border-color:var(--imgt-accent); color:var(--imgt-accent); }
.winfo-tip{
	position:absolute; z-index:5; bottom:calc(100% + 8px); left:50%;
	transform:translateX(calc(-50% + var(--winfo-shift, 0px)));
	width:max-content; max-width:220px;
	background:var(--imgt-ink); color:var(--imgt-surface);
	font-size:12px; font-weight:400; font-style:normal; line-height:1.4;
	text-align:left; white-space:normal;
	padding:8px 10px; border-radius:8px;
	box-shadow:0 4px 14px rgba(0,0,0,.25);
	opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.winfo.winfo-below .winfo-tip{ bottom:auto; top:calc(100% + 8px); }
.winfo:focus-visible .winfo-tip,
.winfo.winfo-active .winfo-tip{ opacity:1; pointer-events:auto; }
@media (hover:hover){
	.winfo:hover{ border-color:var(--imgt-accent); color:var(--imgt-accent); }
	.winfo:hover .winfo-tip{ opacity:1; pointer-events:auto; }
}

/* ==========================================================================
   Split pane (the same idea as the PDF tools). A tool opts in with the class imgt-split on its section:
   three panes side by side on a computer (25% tools, 50% preview, 25% tools), each scrolling on its own,
   and an action bar at the bottom of the right pane that holds the main button. Below 900px everything
   stacks and the page scrolls normally, with the action bar sticking to the screen bottom.
   Panes are .imgt-pane-left, .imgt-pane-mid and .imgt-pane-right. The action bar is .imgt-actions.
   A tool may add a full-width row above the panes with .imgt-split-top (the All-round cropper's shape selectors).
   ========================================================================== */
.imgt-tool-wrap{
	--imgt-header-h:72px;
	--imgt-vh:100vh;
	/* The tool is as tall as the screen under the site header. imgt-core.js measures where it really starts. */
	--imgt-tool-h:calc(var(--imgt-vh) - var(--imgt-header-h));
	--imgt-pane-pad:24px;
}
@supports (height:100dvh){
	.imgt-tool-wrap{ --imgt-vh:100dvh; }
}
.imgt-actions{
	position:sticky;
	bottom:0;
	z-index:30;
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:12px var(--imgt-pane-pad) calc(12px + env(safe-area-inset-bottom, 0px));
	background:var(--imgt-paper);
	border-top:1px solid var(--imgt-line);
}
@media (min-width:900px){
	.imgt-tool-wrap:has(.imgt-split){
		display:flex;
		flex-direction:column;
		height:var(--imgt-tool-h);
		padding:0;
		overflow:hidden;
	}
	.imgt-split{
		flex:1 1 auto;
		min-height:0;
		width:100%;
		max-width:none;
		margin:0;
		padding:0;
		display:grid;
		grid-template-columns:minmax(220px, 25fr) minmax(0, 50fr) minmax(260px, 25fr);
		grid-template-rows:auto minmax(0, 1fr) auto;
		gap:0;
	}
	.imgt-split-top{ grid-column:1 / -1; grid-row:1; min-width:0; margin-top:20px; border-bottom:1px solid var(--imgt-line); }
	.imgt-pane-left{ grid-column:1; grid-row:2 / 4; }
	.imgt-pane-mid{ grid-column:2; grid-row:2 / 4; container-type:size; --imgt-stage-h:max(340px, calc(100cqh - 190px)); }
	.imgt-pane-right{ grid-column:3; grid-row:2; }
	.imgt-actions{ grid-column:3; grid-row:3; position:static; }
	.imgt-pane-mid,
	.imgt-pane-right,
	.imgt-actions{ border-left:1px solid var(--imgt-line); }
	.imgt-pane-mid{ border-right:1px solid var(--imgt-line); }
	.imgt-pane-left,
	.imgt-pane-mid,
	.imgt-pane-right{
		min-height:0;
		overflow-y:auto;
		overscroll-behavior:contain;
		scrollbar-width:none;
	}
	.imgt-pane-left::-webkit-scrollbar,
	.imgt-pane-mid::-webkit-scrollbar,
	.imgt-pane-right::-webkit-scrollbar{ display:none; }
	/* A tool with a top row of choices lets the page scroll past it; the three panes then fill the screen below it. */
	.imgt-tool-wrap:has(.imgt-split-top){ height:auto; overflow:visible; }
	.imgt-split:has(> .imgt-split-top){ flex:none; grid-template-rows:auto calc(var(--imgt-tool-h) - 92px) auto; }
	.imgt-split:has(> .imgt-split-top) > [class*="imgt-pane-"]{ overscroll-behavior:auto; }
}
.imgt-pane-left,
.imgt-pane-mid,
.imgt-pane-right{ padding:var(--imgt-pane-pad); }

/* Left pane menu of other tools (IMGT_Tool::sidebar): computers only, and it can be folded away with the arrow. */
.imgt-side-tab{ display:none; }
.imgt-side-btn{
	width:28px; height:28px; padding:0; cursor:pointer; font-size:20px; line-height:1;
	border:1px solid var(--imgt-line); border-radius:6px; background:var(--imgt-paper); color:var(--imgt-ink);
}
.imgt-side-btn:hover{ background:var(--imgt-line); }
.imgt-side .imgt-side-btn{ display:none; float:right; margin-left:8px; }
.imgt-side .rtools-v:first-of-type .rtools-v-title{ margin-top:6px; }
/* On a phone the menu closes into one "More tools" bar at the very bottom of the page. */
.imgt-split:has(.imgt-side){ display:flex; flex-direction:column; }
.imgt-side{ order:9; padding:0; border-top:1px solid var(--imgt-line); }
.imgt-split:has(.imgt-side) > .imgt-actions{ order:10; }
.imgt-side-more{
	display:block; width:100%; padding:14px var(--imgt-pane-pad); cursor:pointer; text-align:left;
	font:inherit; font-weight:600; color:var(--imgt-ink); background:none; border:0;
}
.imgt-side-more::after{ content:"\25BE"; float:right; }
.imgt-side-open .imgt-side-more::after{ content:"\25B4"; }
.imgt-side-list{ display:none; padding:0 var(--imgt-pane-pad) var(--imgt-pane-pad); }
.imgt-side-open .imgt-side-list{ display:block; }
@media (min-width:900px){
	.imgt-split:has(.imgt-side){ display:grid; }
	.imgt-side,
	.imgt-split:has(.imgt-side) > .imgt-actions{ order:0; }
	.imgt-side{ border-top:0; padding:16px var(--imgt-pane-pad) var(--imgt-pane-pad); }
	.imgt-side-more{ display:none; }
	.imgt-side-list{ display:block; padding:0; }
	.imgt-side .imgt-side-btn{ display:block; }
	.imgt-split:has(.imgt-side){ position:relative; }
	.imgt-split.imgt-side-off{ grid-template-columns:0 minmax(0, 75fr) minmax(260px, 25fr); }
	.imgt-side-off .imgt-side{ display:none; }
	.imgt-side-off .imgt-side-tab{ display:block; position:absolute; left:0; top:50%; z-index:20; width:22px; height:56px; border-left:0; border-radius:0 8px 8px 0; }
}

/* Colour boxes (border, background, JPEG background): one line, equal squares, the first one a rainbow frame around the chosen colour. */
.imgt-swatches{ --imgt-swatch:36px; display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
@media (min-width:900px){
	.imgt-swatches{ --imgt-swatch:clamp(24px, calc((25vw - 96px) / 7), 36px); }
}
.imgt-swatches > *{ flex:none; width:var(--imgt-swatch); height:var(--imgt-swatch); min-width:0; max-width:none; }
.imgt-swatches > input[type="color"]{
	-webkit-appearance:none; appearance:none; margin:0; padding:0; cursor:pointer;
	width:var(--imgt-swatch); height:var(--imgt-swatch);
	border:1px solid var(--imgt-line); border-radius:var(--imgt-swatch-r, 8px);
	background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.imgt-swatches > input[type="color"]::-webkit-color-swatch-wrapper{ padding:5px; }
.imgt-swatches > input[type="color"]::-webkit-color-swatch{ border:1px solid #fff; border-radius:max(2px, calc(var(--imgt-swatch-r, 8px) - 5px)); }
.imgt-swatches > input[type="color"]::-moz-color-swatch{ border:1px solid #fff; border-radius:max(2px, calc(var(--imgt-swatch-r, 8px) - 5px)); }
@media (max-width:480px){
	.imgt-tool-wrap{ --imgt-pane-pad:14px; }
}

/* Base look of every tool button (the primary one adds wl-btn-primary). */
.imgt-btn{
	padding:12px 22px;
	border:1px solid transparent;
	border-radius:var(--imgt-radius-pill);
	font-size:0.95rem;
	font-weight:600;
	cursor:pointer;
	transition:transform 0.1s ease, background 0.15s ease;
}
.imgt-btn:active{ transform:scale(0.98); }

/* WL Primary Button — uniform look for the main action button, Download and any other primary button. */
.wl-btn-primary{
	width:100%;
	padding:12px 22px;
	border:none;
	border-radius:999px;
	background:var(--imgt-accent);
	color:#fff;
	font-size:0.95rem;
	font-weight:600;
	transition:transform 0.1s ease;
}
.wl-btn-primary:hover{ background:var(--imgt-accent-dark); }
.wl-btn-primary:active{ transform:scale(0.98); }
.wl-btn-primary:disabled{ background:var(--imgt-accent); color:#fff; transform:none; }

/* WL Button Pulse Glow. Add the class "wl-btn-pulse" to a button to give it a pulsing glow.
   It animates box-shadow directly. That is safe from stutter because of when the class is added: only while
   nothing is processing (updateActionBtn in imgt-core.js, and any tool that runs its own button logic), so the
   animation never competes with heavy work for the main thread. Keep that rule wherever it is used. */
.wl-btn-pulse{
	--wl-glow-color:rgba(31,111,92,.45);
	animation:wl-btn-pulse-glow 1.8s ease-in-out infinite;
}
[data-wlcustom-dm="dark"] .wl-btn-pulse{ --wl-glow-color:rgba(43,179,168,.45); }
@keyframes wl-btn-pulse-glow{
	0%, 100%{ box-shadow:0 0 0 0 var(--wl-glow-color); }
	50%{ box-shadow:0 0 0 10px rgba(0,0,0,0); }
}

/* ==========================================================================
   2 · HERO AND TOP BAR: title, trust line, compact header, Related Tools
   ========================================================================== */
.imgt-hero{
	flex:none; width:100%; max-width:var(--imgt-max);
	margin-left:auto; margin-right:auto;
	padding:0 20px 28px; text-align:center;
}
@media (min-width:900px){
	.imgt-hero{ padding:29px 20px 12px; }
}
@media (min-width:980px){
	.imgt-hero{ max-width:calc(var(--imgt-max) * 1.5); }
}
.imgt-h1{
	font-family:var(--imgt-font-display);
	font-weight:600;
	font-size:clamp(26px, 4vw, 34px);
	line-height:1.15;
	margin:0 0 12px;
	color:var(--imgt-ink);
}
.imgt-hero-line{
	font-family:var(--imgt-font-copy);
	font-weight:600;
	font-size:17px !important;
	line-height:1.35;
	color:var(--imgt-accent);
	margin:0 0 10px;
}
@media (max-width:480px){
	.imgt-hero{ padding-left:16px; padding-right:16px; }
	.imgt-h1{ font-size:clamp(16px, 5vw, 22px); }
}

/* Compact header. After 10 seconds or the first scroll, imgt-core.js adds the tool's short name with its info icon, and
   the Related Tools icon (a grid of four squares), to the site's top bar (desktop) or its second row (mobile). On desktop nothing is moved or
   resized: the site title and profile icon stay exactly where they were, the regular menu, Study Material,
   search and dark mode icons are only made invisible, and the new group floats over the space they leave.
   The arrow brings the full menu back for a while. The real heading stays in the page, hidden visually but
   readable by screen readers. */
/* The full title on its way into the top bar (imgt-core.js places it over the page while it glides). */
.imgt-title-ghost{
	position:fixed; z-index:10000; box-sizing:border-box;
	margin:0 !important; padding:0; text-align:center; pointer-events:none;
}
.imgt-hero.imgt-hero-compact{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.imgt-nav-compact:not(.imgt-nav-open) :is(.topnav-menu-desktop, .topnav-desk-search-icon, .topnav-inner > [class*="wlcustom-dm-"]){ visibility:hidden; }
.imgt-nav-compact:not(.imgt-nav-open) .topnav-mob-row2-menu{ display:none; }
.imgt-nav-open .imgt-navmain{ display:none; }
.imgt-navgroup{
	--imgt-nav-ink:#ffffff;
	--imgt-nav-accent:#fff551;
	--imgt-nav-gap:10px; /* short name <-> info icon, and info icon <-> Related Tools icon: always the same */
	display:grid; align-items:center;
	grid-template-columns:minmax(40px, 1fr) minmax(0, auto) minmax(40px, 1fr);
	flex:1 1 auto; min-width:0; margin:0 8px 0 4px;
}
/* The short name sits in the exact middle column. The info and Related Tools icons hang off its right edge, so they never push the
   name off centre. Desktop: the group fills the space between the site title and the profile icon (imgt-core.js sets left and
   width), and the arrow stays at its left end. The group itself ignores the mouse so it never blocks the menu underneath. */
#topnav-bar .imgt-navgroup{ position:absolute; top:0; bottom:0; margin:0; pointer-events:none; }
#topnav-bar .imgt-navgroup > *{ pointer-events:auto; }
.imgt-navmain{ position:relative; grid-column:2; display:flex; align-items:center; min-width:0; }
.imgt-navicons{ position:absolute; left:100%; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:var(--imgt-nav-gap, 10px); margin-left:var(--imgt-nav-gap, 10px); }
.imgt-navtitle{
	flex:0 1 auto; min-width:0; max-width:clamp(160px, 28vw, 420px);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	font-family:var(--imgt-font-copy);
	font-size:20px; font-weight:500; line-height:1.3;
	color:var(--imgt-nav-ink);
}
/* The arrow, the info icon and the Related Tools grid icon are the same small outlined circle. */
.imgt-navarrow,
.imgt-navgroup .imgt-info-btn,
.imgt-navgroup .imgt-related-btn{
	display:inline-flex; align-items:center; justify-content:center;
	flex:0 0 auto; width:19.5px; height:19.5px; padding:0;
	border:1px solid var(--imgt-nav-ink); border-radius:50%;
	background:none; color:var(--imgt-nav-ink);
	transition:background-color .15s ease, color .15s ease;
}
.imgt-navarrow svg,
.imgt-navgroup .imgt-info-btn svg,
.imgt-navgroup .imgt-related-btn svg{ width:9px; height:9px; }
.imgt-navarrow{ margin-left:6px; }
/* The Related Tools icon also stays filled while its dropdown is open. */
.imgt-navarrow:hover,
.imgt-navgroup .imgt-info-btn:hover,
.imgt-navgroup .imgt-related-btn:hover,
.imgt-navgroup .imgt-related-btn[aria-expanded="true"]{ background:var(--imgt-nav-accent); border-color:var(--imgt-nav-accent); color:#1a1a1a; }
/* The short name and its info icon sit close together, like the arrow and the site title. */
.imgt-navarrow svg{ transition:transform .15s ease; }
.imgt-navarrow[aria-expanded="true"] svg{ transform:rotate(180deg); }
.imgt-navgroup button:focus-visible{ outline:3px solid var(--imgt-nav-accent); outline-offset:2px; }
.topnav-mobile-wrap .imgt-navtitle{ max-width:none; font-size:16px; }
/* Mobile: the arrow sits in the first row, right after the site title (imgt-core.js gives it the title's colour).
   It keeps working when the theme centres the title, which turns off clicks on the space around it. */
.topnav-mob-brand-wrap .imgt-navarrow{
	--imgt-nav-ink:#ffffff;
	--imgt-nav-accent:#fff551;
	margin-left:10px; pointer-events:auto;
}
.topnav-mob-brand-wrap .imgt-navarrow:focus-visible{ outline:3px solid var(--imgt-nav-accent); outline-offset:2px; }

/* Touch screens: the small round icon buttons (arrow, info and Related Tools) get an invisible 48 x 48 pixel tap area, the size
   Google's Material guidance asks for (Apple asks for 44), without making the drawn icons bigger. The square is centred on the
   button. The info and Related Tools icons sit only --imgt-nav-gap apart, so their squares are trimmed on the sides that face each
   other (they meet halfway, never overlap) and stay full size on the outer sides and top and bottom. */
@media (pointer:coarse){
	.imgt-info-btn,
	.imgt-navarrow,
	.imgt-navgroup .imgt-related-btn{ position:relative; }
	.imgt-info-btn::before,
	.imgt-navarrow::before,
	.imgt-navgroup .imgt-related-btn::before{
		content:''; position:absolute; top:50%; left:50%;
		width:48px; height:48px; transform:translate(-50%, -50%);
	}
	.imgt-navgroup .imgt-info-btn::before{ top:-13.25px; bottom:-13.25px; left:-13.25px; right:calc(var(--imgt-nav-gap) / -2 + 1px); width:auto; height:auto; transform:none; }
	.imgt-navgroup .imgt-related-btn::before{ top:-13.25px; bottom:-13.25px; right:-13.25px; left:calc(var(--imgt-nav-gap) / -2 + 1px); width:auto; height:auto; transform:none; }
	.topnav-mob-brand-wrap .imgt-navarrow{ margin-left:15px; }
}

/* When the site shows the My Membership "Pro" / "Get Pro" badge after the site title (the plugin adds wlm-has-pro-badge to <body>),
   the arrow comes right after the badge, 8px away, the same 8px that sits between the site title and the badge. This replaces the
   arrow's usual distance from the title (6px computer, 10px mobile, 15px touch), which only applies when there is no badge. */
body.wlm-has-pro-badge #topnav-bar .imgt-navarrow,
body.wlm-has-pro-badge .topnav-mob-brand-wrap .imgt-navarrow{ margin-left:8px; }
/* Touch screens: at 8px the arrow's invisible 48px tap square would reach 6px over the badge's right end and steal taps meant for it,
   so the square is moved 7px to the right. It then stops 0.75px short of the badge. Nothing sits to the arrow's right. */
@media (pointer:coarse){
	body.wlm-has-pro-badge .imgt-navarrow::before{ transform:translate(calc(-50% + 7px), -50%); }
}


/* ==========================================================================
   3 · TRUST LINE: trust line and About icon
   ========================================================================== */
/* The trust line sits in the middle column, so it stays centred under the title. The About icon follows it in the third column. */
.imgt-trust-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; margin:0; }
.imgt-trust-row > *{ margin:0 !important; }
.imgt-trust-row > p{ grid-column:2; }
.imgt-trust-row > .imgt-info-btn{ grid-column:3; justify-self:start; }
/* In the top bar the icon takes the menu's look instead (.imgt-navgroup .imgt-info-btn). */
.imgt-info-btn{
	display:inline-flex; align-items:center; justify-content:center;
	width:24px; height:24px; padding:0; margin:0; flex-shrink:0;
	border:1px solid var(--imgt-line); border-radius:50%;
	background:var(--imgt-surface); color:var(--imgt-ink); cursor:pointer;
}
.imgt-info-btn:hover{ border-color:var(--imgt-ink); }

/* ==========================================================================
   5 · DOCUMENTATION POPUP (About this tool)
   ========================================================================== */

/* "About" popup: the documentation sits in a native <dialog>. Its text is always in the page
   HTML, so search engines can read it even while the popup is closed. */
.wldocument{
	--wldocument-ink:#1b1d1e;
	--wldocument-accent:#1f6f5c;
	--wldocument-focus:#2b6ef6;
	--wldocument-top:#b2ab95;
	--wldocument-surface:#ffffff;
	--wldocument-line:#dcdad2;
	--wldocument-display:var(--imgt-font-display);
	--wldocument-body:var(--imgt-font-body);
	--wldocument-copy:var(--imgt-font-copy);

	width:calc(100% - 32px);
	max-width:1100px;
	height:calc(100vh - 32px);
	height:calc(100dvh - 32px);
	max-height:none;
	margin:auto;
	padding:0;
	border:1px solid var(--wldocument-line);
	border-radius:14px;
	background:var(--wldocument-surface);
	color:var(--wldocument-ink);
	overflow:hidden;
}
[data-wlcustom-dm="dark"] .wldocument{
	--wldocument-ink:var(--wlcustom-dm-text, #e8e6e3);
	--wldocument-accent:#2bb3a8;
	--wldocument-focus:#6d9dff;
	--wldocument-top:var(--wlcustom-dm-text, #e8e6e3);
	--wldocument-surface:#121d30;
	--wldocument-line:#223049;
}
.wldocument[open]{ display:flex; flex-direction:column; }
.wldocument::backdrop{ background:rgba(10, 20, 35, .6); }
html:has(.wldocument[open]){ overflow:hidden; scrollbar-gutter:stable; }
.wldocument-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex:none;
	padding:12px 16px 12px 24px;
	border-bottom:1px solid var(--wldocument-line);
}
.wldocument-bar-title{
	font-family:var(--wldocument-display);
	font-size:1.15rem;
	font-weight:600;
	color:var(--wldocument-ink);
}
.wldocument-close{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:36px;
	height:36px;
	padding:0;
	border:1px solid var(--wldocument-line);
	border-radius:50%;
	background:var(--wldocument-surface);
	color:var(--wldocument-ink);
	cursor:pointer;
}
.wldocument-close:hover{ border-color:var(--wldocument-ink); }
.wldocument-close:focus-visible{ outline:3px solid var(--wldocument-focus); outline-offset:2px; }
/* Touch screens: no focus ring on the close button, which receives focus when the popup opens. */
@media (pointer:coarse){ .wldocument .wldocument-close:focus-visible{ outline:none; } }
.wldocument-body{
	flex:1;
	min-height:0;
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:32px max(16px, calc((100% - 760px) / 2)) 40px;
}
.wldocument h2{
	margin:40px 0 10px;
	font-family:var(--wldocument-body);
	font-size:1.4rem;
	font-weight:600;
	line-height:1.3;
	color:var(--wldocument-ink);
}
.wldocument p, .wldocument li{
	font-family:var(--wldocument-copy);
	font-size:16px;
	font-weight:400;
	line-height:1.7;
	color:var(--wldocument-ink);
}
.wldocument p{ max-width:66ch; margin:0 0 14px; }
.wldocument p:last-child{ margin-bottom:0; }
.wldocument ul, .wldocument ol{
	display:flex;
	flex-direction:column;
	gap:8px;
	max-width:66ch;
	margin:0;
	padding-left:20px;
}
.wldocument ul > li{ position:relative; list-style:none !important; }
.wldocument ul > li::before{
	content:"";
	position:absolute;
	top:0.66em;
	left:-14px;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--wldocument-ink);
}
.wldocument .wldocument-steps{
	max-width:none;
	margin:0 0 48px;
	padding:0;
	gap:26px;
	list-style:none;
}
/* Top of the popup: the same trust line and sentence as the page header, for visitors who missed them once the header collapsed. */
.wldocument .wldocument-intro{ margin:0 0 36px; text-align:center; }
.wldocument .wldocument-intro-title{
	margin:0 auto 14px;
	font-family:var(--wldocument-display);
	font-size:clamp(1.5rem, 4vw, 2rem); font-weight:600; line-height:1.2;
	color:var(--wldocument-ink);
}
.wldocument .wldocument-intro-line{
	margin:0 auto 10px;
	font-family:var(--wldocument-copy);
	font-size:17px; font-weight:600; line-height:1.35;
	color:var(--wldocument-accent);
}
.wldocument .wldocument-intro-text{ margin:0 auto; font-family:var(--wldocument-body); font-size:1rem; line-height:1.6; }
.wldocument-steps > li{ display:flex; align-items:flex-start; gap:18px; }
.wldocument-step-num{
	min-width:2ch;
	font-family:var(--wldocument-display);
	font-size:1.1rem;
	font-weight:400;
	color:var(--wldocument-accent);
}
.wldocument .wldocument-step-title{ margin:0 0 4px; }
.wldocument-top{ display:flex; justify-content:center; margin-top:48px; }
.wldocument-top-btn{
	padding:16px 32px; border:0; background:none; line-height:0; cursor:pointer;
	color:var(--wldocument-top);
	transition:transform 0.15s ease;
}
.wldocument-top-btn:hover{ transform:translateY(-3px); }
.wldocument-top-btn:focus-visible{ outline:3px solid var(--wldocument-focus); outline-offset:2px; }
.wldocument-top-btn svg{ width:88px; height:auto; }

.wldocument ol{ list-style:decimal; }
.wldocument kbd{
	display:inline-block;
	padding:1px 7px;
	border:1px solid var(--wldocument-line);
	border-bottom-width:2px;
	border-radius:5px;
	background:var(--wldocument-surface);
	color:var(--wldocument-ink);
	font-family:var(--wldocument-copy);
	font-size:0.82em;
	font-weight:600;
	line-height:1.5;
}