/*
 * PDEditor Pixbyt – front-end styles.
 * Everything is scoped to .pxb-wrap and prefixed "pxb-" so it cannot leak into (or be broken by) the theme.
 * No background colour is forced on the tool: the editor keeps its own default background.
 */
.pxb-wrap{--pxb-accent:#0a7563;--pxb-radius:12px;--pxb-line:rgba(127,127,127,.28);box-sizing:border-box;width:100%;max-width:100%;margin:0 auto 1.5em;color:inherit;font:inherit;line-height:1.6}
.pxb-wrap *,.pxb-wrap *::before,.pxb-wrap *::after{box-sizing:border-box}

/* ---------- Tool ---------- */
.pxb-wrap .pxb-stage{position:relative;width:100%;height:var(--pxb-h,760px);min-height:360px;border:1px solid var(--pxb-line);border-radius:var(--pxb-radius);overflow:hidden}
.pxb-wrap .pxb-frame{display:block;width:100%;height:100%;border:0;margin:0;padding:0}
.pxb-wrap .pxb-facade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.pxb-wrap .pxb-facade-inner{max-width:520px}
.pxb-wrap .pxb-ico{color:var(--pxb-accent);margin:0 auto 6px;display:block}
.pxb-wrap .pxb-facade-title{margin:0 0 6px;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:700;line-height:1.25}
.pxb-wrap .pxb-facade-text{margin:0 0 18px;opacity:.82}

.pxb-wrap .pxb-btn{display:inline-block;appearance:none;-webkit-appearance:none;cursor:pointer;margin:0;padding:.8em 1.7em;border:0;border-radius:999px;background:var(--pxb-accent);color:#fff;font:inherit;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:none;text-decoration:none;box-shadow:none;transition:filter .15s ease,transform .15s ease}
.pxb-wrap .pxb-btn:hover{filter:brightness(1.08);color:#fff;background:var(--pxb-accent)}
.pxb-wrap .pxb-btn:active{transform:translateY(1px)}
.pxb-wrap .pxb-btn:focus-visible,.pxb-wrap .pxb-link:focus-visible,.pxb-wrap .pxb-q summary:focus-visible{outline:3px solid var(--pxb-accent);outline-offset:2px}

.pxb-wrap .pxb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:10px 2px 0}
.pxb-wrap .pxb-link{appearance:none;-webkit-appearance:none;background:none;border:0;padding:4px 0;margin:0;color:var(--pxb-accent);font:inherit;font-size:.9em;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
.pxb-wrap .pxb-link:hover{background:none;color:var(--pxb-accent);filter:brightness(.85)}
.pxb-wrap .pxb-small{font-size:.85em;opacity:.7}

.pxb-wrap .pxb-notice{padding:14px 16px;border:1px solid #d63638;border-left-width:4px;border-radius:6px}
.pxb-wrap .pxb-nogpu{margin:0 0 12px;padding:8px 12px;border-radius:6px;border:1px solid var(--pxb-line);font-size:.9em}

/* Full screen (native API, with a CSS fallback for iPhone Safari) */
.pxb-wrap.pxb-is-fs{position:fixed;inset:0;z-index:2147483000;margin:0;max-width:none;display:flex;flex-direction:column;background:Canvas;color:CanvasText}
.pxb-wrap.pxb-is-fs .pxb-stage{flex:1 1 auto;height:auto;min-height:0;border-radius:0;border-width:0}
.pxb-wrap.pxb-is-fs .pxb-bar{padding:8px 12px}
.pxb-wrap:fullscreen{display:flex;flex-direction:column;background:Canvas;color:CanvasText;margin:0;max-width:none}
.pxb-wrap:fullscreen .pxb-stage{flex:1 1 auto;height:auto;min-height:0;border-radius:0;border-width:0}
.pxb-wrap:fullscreen .pxb-bar{padding:8px 12px}
html.pxb-lock,html.pxb-lock body{overflow:hidden}

/* ---------- Content blocks ---------- */
.pxb-wrap.pxb-block{margin-top:2.2em}
.pxb-wrap .pxb-h{margin:0 0 .5em;line-height:1.25}
.pxb-wrap .pxb-intro{margin:0 0 1.2em;opacity:.85}

.pxb-wrap .pxb-steps{list-style:none;margin:0;padding:0;counter-reset:pxb}
.pxb-wrap .pxb-steps li{position:relative;counter-increment:pxb;margin:0 0 14px;padding:0 0 0 52px;min-height:40px}
.pxb-wrap .pxb-steps li::before{content:counter(pxb);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--pxb-accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.pxb-wrap .pxb-steps strong{display:block;margin-bottom:2px}
.pxb-wrap .pxb-steps span{display:block;opacity:.88}

.pxb-wrap .pxb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.pxb-wrap .pxb-card{margin:0;padding:16px 18px;border:1px solid var(--pxb-line);border-radius:var(--pxb-radius)}
.pxb-wrap .pxb-card strong{display:block;margin-bottom:4px;color:var(--pxb-accent)}
.pxb-wrap .pxb-card span{display:block;opacity:.9;font-size:.95em}

.pxb-wrap .pxb-q{margin:0 0 10px;border:1px solid var(--pxb-line);border-radius:10px;padding:0 16px}
.pxb-wrap .pxb-q summary{cursor:pointer;padding:14px 0;font-weight:600;list-style-position:inside}
.pxb-wrap .pxb-q[open] summary{color:var(--pxb-accent)}
.pxb-wrap .pxb-q p{margin:0 0 14px;opacity:.9}

/* ---------- Responsive (shortcode sizes; Elementor sets --pxb-h per breakpoint itself) ---------- */
@media (max-width:1024px){
	.pxb-wrap .pxb-stage{height:var(--pxb-h-t,var(--pxb-h,680px))}
}
@media (max-width:767px){
	.pxb-wrap .pxb-stage{height:var(--pxb-h-m,min(var(--pxb-h,640px),82vh));min-height:420px}
	.pxb-wrap .pxb-bar{flex-direction:column;align-items:flex-start}
	.pxb-wrap .pxb-btn{width:100%;max-width:320px}
	.pxb-wrap .pxb-steps li{padding-left:46px}
}
/* Elementor widget: the slider value is used as-is on every device */
.pxb-wrap.pxb-el .pxb-stage{height:var(--pxb-h,760px)}
.pxb-wrap.pxb-is-fs .pxb-stage,.pxb-wrap:fullscreen .pxb-stage{height:auto}

@media (prefers-reduced-motion:reduce){
	.pxb-wrap .pxb-btn{transition:none}
}

/* About / SEO text */
.pxb-wrap .pxb-h2{margin:1.3em 0 .3em;line-height:1.3;font-size:1.15em}
.pxb-wrap .pxb-p{margin:0 0 .9em;max-width:75ch}
.pxb-wrap.pxb-about{max-width:min(100%,900px)}

/* ===== v2: tool shows immediately and can cover the page ===== */
.pxb-wrap .pxb-skel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:.95em;opacity:.8;z-index:0}
.pxb-wrap .pxb-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--pxb-line);border-top-color:var(--pxb-accent);animation:pxbspin .8s linear infinite}
@keyframes pxbspin{to{transform:rotate(360deg)}}
.pxb-wrap.pxb-ready .pxb-skel{display:none}
.pxb-wrap .pxb-frame{position:relative;z-index:1}

/* cover = full page width, fills the screen height (JS sets --pxb-cover-h; CSS gives a close first guess to avoid layout jumps) */
.pxb-wrap.pxb-cover{max-width:none;margin-bottom:0}
.pxb-wrap.pxb-cover .pxb-stage{height:var(--pxb-cover-h,max(var(--pxb-min,560px),calc(100vh - 120px)));height:var(--pxb-cover-h,max(var(--pxb-min,560px),calc(100svh - 120px)));min-height:var(--pxb-min,560px);border-radius:0;border-left-width:0;border-right-width:0}
.pxb-wrap.pxb-cover .pxb-bar{padding:8px 16px}
.pxb-wrap.pxb-is-fs .pxb-stage,.pxb-wrap:fullscreen .pxb-stage,.pxb-wrap.pxb-cover.pxb-is-fs .pxb-stage,.pxb-wrap.pxb-cover:fullscreen .pxb-stage{height:auto;min-height:0;flex:1 1 auto}
.pxb-wrap.pxb-is-fs{width:auto!important;margin-left:0!important}

/* text blocks stay readable under a full-width tool */
.pxb-wrap.pxb-block{max-width:1100px;margin-left:auto;margin-right:auto;padding:0 16px}
@media (max-width:767px){
	.pxb-wrap.pxb-cover .pxb-stage{min-height:min(var(--pxb-min,560px),75vh)}
}
@media (prefers-reduced-motion:reduce){.pxb-wrap .pxb-spin{animation-duration:2.4s}}