/* Shared styles for the qr-scanner.app /tools pages */

/* Adblock popup (mirrors the homepage inline styles) */
.block-popup {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5); display: none;
	justify-content: center; align-items: center; z-index: 10000; overflow: auto;
}
.block-content {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background: #fff; margin: 1rem auto; padding: 3rem; border-radius: 15px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 600px; text-align: center;
}

/* Individual tool page header */
.tool-header { padding: 110px 0 20px 0; text-align: center; }
.tool-header .breadcrumb-tool { font-size: 0.85em; color: #999; margin-bottom: 10px; }
.tool-header .breadcrumb-tool a { color: #a382d3; }

/* Tool card + QR output */
.tool-card { padding: 25px; max-width: 560px; margin: 0 auto; }
#qrcode-output { margin: 25px auto 10px auto; display: flex; justify-content: center; align-items: center; min-height: 0; }
#qrcode-output canvas, #qrcode-output img { max-width: 256px; height: auto; }
.tool-actions { display: none; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 15px; }
.privacy-note { font-size: 0.85em; color: #888; margin-top: 12px; }
.pwd-toggle { font-size: 0.85em; color: #a382d3; cursor: pointer; user-select: none; }

/* How-to step badges */
.step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%; background: #a382d3;
	color: #fff; font-size: 22px; font-weight: 600; margin-bottom: 12px;
}

/* Tools hub grid */
.tools-header { padding: 120px 0 10px 0; text-align: center; }
.tool-tile {
	display: block; height: 100%; padding: 28px 20px; border-radius: 12px;
	background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
	transition: transform 200ms ease, box-shadow 200ms ease; text-align: center;
	color: inherit; position: relative;
}
a.tool-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); color: inherit; text-decoration: none; }
.tool-tile .material-icons { font-size: 46px; color: #a382d3; }
.tool-tile h4 { font-weight: 600; margin: 14px 0 6px 0; font-size: 1.15em; }
.tool-tile p { color: #777; font-size: 0.9em; margin: 0; }
.tool-tile.soon { opacity: 0.65; }
.badge-soon {
	position: absolute; top: 12px; right: 12px; background: #c284c3; color: #fff;
	font-size: 0.65em; padding: 3px 8px; border-radius: 10px; letter-spacing: 0.5px;
}
.tools-col { margin-bottom: 30px; }
.cat-title { text-align: left; margin: 10px 0 20px 0; font-weight: 600; color: #444; border-bottom: 2px solid #eee; padding-bottom: 8px; }

/* Drag-and-drop upload zone (safety checker, logo generator) */
.drop-zone { border: 2px dashed #c9bfe0; border-radius: 12px; padding: 22px 16px; text-align: center; color: #888; cursor: pointer; transition: all 150ms ease; background: #faf9fc; margin-bottom: 14px; }
.drop-zone:hover { border-color: #a382d3; color: #a382d3; }
.drop-zone.dragover { border-color: #a382d3; background: #f0eafb; color: #a382d3; }
.drop-zone .fa, .drop-zone .material-icons { font-size: 30px; display: block; margin-bottom: 8px; color: #a382d3; }
.drop-zone b { color: #555; }
.drop-zone.dragover b { color: #a382d3; }

/* Gradient direction dial (logo generator) */
.grad-dial-box { display: flex; align-items: center; gap: 12px; }
.grad-dial-svg { width: 40px; height: 40px; touch-action: none; cursor: grab; flex: 0 0 auto; }
.grad-dial-svg:active { cursor: grabbing; }
.dial-track { fill: #faf9fc; stroke: #c9bfe0; stroke-width: 2; }
.dial-line { stroke: #a382d3; stroke-width: 3; stroke-linecap: round; }
.dial-knob { fill: #a382d3; }
.grad-rot-val { font-weight: 600; font-size: 0.95em; color: #666; min-width: 42px; }
.grad-dir-spread { display: flex; gap: 16px; align-items: flex-start; }
.grad-dir-spread > div:last-child { flex: 1 1 auto; min-width: 0; }

/* Colour picker + hex input pairing */
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="color"] { width: 46px; height: 44px; padding: 4px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; flex: 0 0 auto; }
.color-field .hex-input { flex: 1 1 auto; min-width: 0; height: 44px; font-family: monospace; text-transform: uppercase; }

/* Pill selectors (gradient type; QR type on the homepage) */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1.5px solid #d9cef0; background: #fff; color: #555; border-radius: 999px; padding: 7px 15px; font-size: 0.88em; font-weight: 500; line-height: 1; cursor: pointer; transition: all 120ms ease; box-shadow: none; }
.pill:hover { border-color: #a382d3; color: #a382d3; }
.pill.active { background: #a382d3; border-color: #a382d3; color: #fff; }

/* Toggle switch (use gradient) */
.switch-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; color: #444; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: #ccc; border-radius: 999px; transition: background 150ms ease; }
.switch-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 150ms ease; }
.switch input:checked + .switch-slider { background: #a382d3; }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }

/* Radial spread slider with +/- steppers */
.spread-row { display: flex; align-items: center; gap: 8px; }
.spread-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.step-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #d9cef0; background: #fff; color: #a382d3; font-size: 1.1em; font-weight: 600; line-height: 1; cursor: pointer; padding: 0; flex: 0 0 auto; box-shadow: none; }
.step-btn:hover { background: #a382d3; color: #fff; border-color: #a382d3; }

/* Google Auto Ads: solid white background so injected ad slots are not
   transparent over the page (ported from screenmirroring.app). */
ins.adsbygoogle, .adsbygoogle-noablate { background: rgba(255, 255, 255, 0.96) !important; border-radius: 12px 22px 0px 0px; }
.google-auto-placed { margin-top: 14px; margin-bottom: 14px; padding-top: 10px; padding-bottom: 10px; background: rgba(255, 255, 255, 0.96); border-radius: 22px; }