/* /tools/razmyt-fon/style.css. Свои классы инструмента «Размыть фон на фото», префикс gd-bb-. Общие классы виджетов: tools/_styles.css. */
#gd-bb-widget .gd-w-options input:focus-visible+label{outline:2px solid #3949a0;outline-offset:2px}
.gd-bb-sec{margin:18px 0 0}
.gd-bb-sec .gd-w-options{margin:0;padding:0}
.gd-bb-lbl{font-size:.84rem;color:#6b7280;font-weight:600;margin-bottom:6px}
.gd-bb-note{margin:6px 0 0;font-size:.82rem;color:#6b7280;line-height:1.45}
.gd-bb-tip{margin-top:8px;font-size:.84rem;color:#6b7280;line-height:1.45}
.gd-bb-res-line{font-size:.95rem;color:#3a4250;line-height:1.6}
.gd-bb-res-note{margin:10px 0 0;font-size:.84rem;color:#3a4250;line-height:1.45}
/* сравнение «было и стало»: тот же приём, что в сжатии фото (слева исходник из браузера, справа превью результата) */
.gd-bb-cmp{--pos:50%;--ar:1.5;position:relative;width:min(100%,560px,calc(520px*var(--ar)));aspect-ratio:var(--ar);margin:12px 0 0;overflow:hidden;background:#f3f5fa;border-radius:8px;line-height:0;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.gd-bb-cmp img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.gd-bb-cmp-b{-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0);clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.gd-bb-cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.55);pointer-events:none}
.gd-bb-cmp-r{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.gd-bb-cmp:focus-within{outline:2px solid #3949a0;outline-offset:2px}
.gd-bb-cmp-tag{position:absolute;top:8px;padding:3px 8px;background:rgba(29,38,48,.72);color:#fff;font-size:.74rem;line-height:1.3;border-radius:4px;pointer-events:none}
.gd-bb-cmp-tag.l{left:8px}.gd-bb-cmp-tag.r{right:8px}