@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&display=swap');

/* Force away any grey page/theme background sitting behind the plugin,
   so the whole area around the widget reads as white. Scoped with
   :has() so it only touches pages that actually contain this widget. */
body:has(.nsb-widget) {
	background: #0a0812 !important;
	margin: 0;
	/* Safety net for the "100vw, negative margin" edge-to-edge trick used
	   on phones below: that trick assumes nothing else on the page is
	   even slightly wider than the viewport, but themes vary (a stray
	   px of padding on a parent, a scrollbar-gutter reservation, an
	   unrelated element elsewhere on the page) and any of those can make
	   the WHOLE PAGE just barely wider than the screen — which is what
	   was pulling the widget's cards sideways with a gap on the right,
	   as if they were "leaking" off-screen. Clipping horizontal overflow
	   at the body level makes the page hold still at exactly the screen
	   width no matter which of those causes it, instead of chasing each
	   one individually.
	*/
	overflow-x: hidden;
}
body:has(.nsb-widget.nsb-light) {
	background: #fff !important;
}

.nsb-widget {
	/* Second layer of the same safety net, scoped to the widget's own
	   box — catches anything inside the widget itself (rather than the
	   surrounding theme page) that might be a hair wider than its
	   container. */
	overflow-x: hidden;
	--nsb-blue: #8b3ffb;
	--nsb-blue-dark: #6c1fd9;
	--nsb-button: #8b3ffb;
	--nsb-button-dark: #6c1fd9;
	/* DARK is the default theme for the whole builder. */
	--nsb-bg: #131022;
	--nsb-page-bg: #0a0812;
	--nsb-panel: #1c1730;
	--nsb-border: #332a4d;
	--nsb-text: #f6f3ff;
	--nsb-muted: #a89bc4;
	--nsb-pink: #ff2fb0;
	--nsb-amount: #ffd400;
	--nsb-cyan: #22e2e8;
	--nsb-glow: rgba(139, 63, 251, .5);
	--nsb-btn-glow: rgba(139, 63, 251, .5);
	--nsb-gradient: linear-gradient(120deg, var(--nsb-button) 0%, var(--nsb-pink) 100%);
	--nsb-button-gradient: var(--nsb-gradient);
	--nsb-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	max-width: 1180px;
	margin: 0 auto;
	background: var(--nsb-page-bg);
	border-radius: 18px;
	padding: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--nsb-text);
	/* The mobile media query below sets width to 100% for an edge-to-edge
	   look — without border-box, the 14px padding above adds ON TOP of
	   that (padding is normally extra, outside a content-box width),
	   pushing the widget wider than its own declared width and shoving
	   buttons/tabs on the right off-screen. border-box keeps the padding
	   INSIDE the declared width instead — the fix belongs here (not just
	   on descendants below) because it's the WIDGET's own box that was
	   overflowing. */
	box-sizing: border-box;
}
.nsb-widget *, .nsb-widget *::before, .nsb-widget *::after { box-sizing: border-box; }
.nsb-widget button { font-family: inherit; }
/* Removes the ~300ms "wait to see if this is a double-tap" delay mobile
   browsers add by default, and stops an accidental double-tap on a
   swatch/font/pill button from zooming the whole page — every tappable
   control in the widget should react the instant it's tapped, like a
   native app control. */
.nsb-widget button,
.nsb-widget .nsb-swatch,
.nsb-widget .nsb-bswatch,
.nsb-widget input[type="text"] {
	touch-action: manipulation;
}

.nsb-cols {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 12px;
	align-items: stretch;
}

.nsb-col-left, .nsb-col-right {
	padding: 0;
	min-width: 0;
	max-width: 100%;
}
.nsb-cols,
.nsb-step-box,
.nsb-step-box-preview,
.nsb-preview-pane,
.nsb-row-top,
.nsb-line-inputs,
.nsb-font-grid,
.nsb-color-row,
.nsb-two-col,
.nsb-panel {
	min-width: 0;
	max-width: 100%;
}

/* Desktop: left column stretches to the right column height and the dark
   preview pane FILLS that whole card — no white/blank strips above or
   below the display image. */
.nsb-col-left {
	display: flex;
	flex-direction: column;
}
.nsb-step-box-preview {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* Vertically centers the fixed-aspect preview pane below when the
	   right column (more line/font/color rows once Line 2 / Line 3 are
	   switched on) is taller than the preview itself, instead of
	   stretching the preview to match — see .nsb-preview-pane note. */
	justify-content: center;
	background: radial-gradient(ellipse at center, #1b1b24 0%, #0c0c12 100%);
	box-shadow: 0 6px 20px rgba(18, 18, 40, .18);
}
.nsb-preview-pane {
	/* Fixed 16:9 aspect ratio (matches the 1280x720 downloaded design
	   image) instead of flex-growing to fill the left column's height.
	   The grid above uses align-items:stretch, so .nsb-col-left match
	   whatever height .nsb-col-right happens to be — and turning on
	   Line 2 / Line 3 adds more rows to the right column, which used to
	   stretch this pane taller too. Because the scene photo behind it
	   uses background-size:cover, a taller pane reframed/zoomed into the
	   photo and shifted the text position, and also changed the crop of
	   the html2canvas-captured design image on download. Locking the
	   aspect ratio keeps the photo framing (and the downloaded image)
	   identical no matter how many lines are on. */
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-height: none;
	margin: 0;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* Mobile: columns stack, so none of the above stretching makes sense —
   everything just sizes to its own natural content, like a normal
   document flow. This MUST stay the last rule for each of these
   selectors in the file so it wins the cascade. */
@media (max-width: 900px) {
	.nsb-cols { grid-template-columns: 1fr; align-items: start; }
	.nsb-col-left { display: flex; flex-direction: column; }
	.nsb-step-box-preview { flex: none; display: block; }
	.nsb-preview-pane { width: 100%; max-height: none; margin: 0; }
}


/* Every step is its own floating white card with a shadow, sitting on the
   gray page background — not one continuous white block. */
.nsb-step-box {
	background: var(--nsb-bg);
	border: 1px solid var(--nsb-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
	margin-bottom: 14px;
}
.nsb-step-box:last-child { margin-bottom: 0; }
.nsb-step-box-buy { margin-top: 0; }

.nsb-bluebar {
	background: var(--nsb-gradient);
	color: #fff;
	font-family: var(--nsb-font-display);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .03em;
	text-align: center;
	padding: 13px 16px;
	text-shadow: 0 0 14px rgba(255, 255, 255, .35);
}
.nsb-bluebar-btn {
	cursor: pointer;
	transition: filter .15s, background .15s;
}
.nsb-bluebar-btn:hover { filter: brightness(1.12); }

.nsb-row-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 16px 6px;
}

.nsb-line-toggle {
	display: flex;
	border: 1px solid var(--nsb-border);
	border-radius: 8px;
	overflow: hidden;
	/* Without this, when .nsb-row-top's flex layout runs short on width
	   (the resize block on the other end competing for the same row) the
	   browser will shrink this toggle NARROWER than its buttons actually
	   need instead of wrapping to a new line — and because overflow is
	   hidden here (needed so the rounded corners clip the buttons inside
	   cleanly), that shrinking silently clipped the first character or
	   two off "1_Line" instead of showing the row wrapped. flex-shrink:0
	   keeps it at its natural width always, so .nsb-row-top's flex-wrap
	   (below) is what handles tight space — by wrapping onto a second
	   line — instead of the toggle quietly losing part of its own text. */
	flex-shrink: 0;
}
.nsb-line-btn {
	background: var(--nsb-panel);
	border: none;
	color: var(--nsb-text);
	padding: 8px 14px;
	font-size: .84rem;
	cursor: pointer;
	border-right: 1px solid var(--nsb-border);
	white-space: nowrap;
}
.nsb-line-btn:last-child { border-right: none; }
.nsb-line-btn.active { background: var(--nsb-button-gradient); color: #fff; box-shadow: 0 0 10px var(--nsb-btn-glow); }

.nsb-resize-block { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nsb-resize-label { font-size: .82rem; color: var(--nsb-muted); }
.nsb-resize-btn {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: var(--nsb-button-gradient);
	color: #fff;
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 0 12px var(--nsb-glow);
	transition: filter .15s, transform .15s;
}
.nsb-resize-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.nsb-line-inputs { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.nsb-widget input[type="text"] {
	width: 100%;
	background: var(--nsb-panel);
	border: 1px solid var(--nsb-border);
	color: var(--nsb-text);
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 1rem;
}
.nsb-widget input[type="text"]:focus { outline: none; border-color: var(--nsb-blue); box-shadow: 0 0 0 3px rgba(139,63,251,.2); }
.nsb-widget input[type="text"]:disabled { display: none; }
.nsb-line-input.nsb-selected {
	border-color: var(--nsb-blue);
	box-shadow: 0 0 0 2px rgba(139,63,251,.2);
}

.nsb-scene-tabs-wrap { padding: 2px 4px 14px; }
.nsb-scene-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0;
}
.nsb-scene-tab {
	background: var(--nsb-panel);
	border: 1px solid var(--nsb-border);
	color: var(--nsb-muted);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: .84rem;
	cursor: pointer;
}
.nsb-scene-tab.active { background: var(--nsb-button-gradient); color: #fff; border-color: transparent; box-shadow: 0 0 14px var(--nsb-btn-glow); }

.nsb-preview-pane {
	position: relative;
	min-height: 340px;
	background: radial-gradient(ellipse at center, #1b1b24 0%, #0c0c12 100%);
	/* Visual-only scene zoom. This enlarges/crops the selected background
	   photo without scaling the text, controls, measured sign frame, price,
	   or calculated dimensions. */
	background-size: var(--nsb-background-image-scale, 120%) auto;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.nsb-sign-frame {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	/* Generous starting box (not the old fixed 300x160px) — tall enough
	   that the default stacked position of 2-3 lines has real breathing
	   room between them BEFORE fitFrameToContent() (JS) crops it down to
	   the actual content a moment later. The old, much shorter default
	   box is what caused lines to render on top of one another. */
	width: 86%;
	height: 80%;
	max-width: 88%;
	border: none;
	border-radius: 4px;
	/* NOTE: width/height are intentionally NOT transitioned. The gap
	   calculation (fitFrameToContent, in JS) measures the frame/lines'
	   real layout right after a line-count change — if width/height were
	   still mid-animation at that exact moment, the measurement (and so
	   the resulting gap between lines) came out different depending on
	   timing, which is why the same "2 lines" state could show a smaller
	   or bigger gap depending on what was clicked right before it. */
	transition: background .2s, border-color .2s;
}
.nsb-sign-frame[data-shape="rectangle"] {
	border: 2px solid rgba(255,255,255,.16);
	border-radius: 10px;
	background: rgba(255,255,255,.03);
}
.nsb-sign-frame[data-shape="rectangle"][data-backing="white"] {
	background: rgba(245,245,250,.94);
	border-color: rgba(0,0,0,.1);
}
.nsb-sign-frame[data-shape="rectangle"][data-backing="black"] {
	background: rgba(6,6,10,.78);
	border-color: rgba(255,255,255,.2);
}

.nsb-lines-layer { position: absolute; inset: 0; }

/* Visual-only text zoom set by the admin. The measured outer line keeps its
   original geometry, so calculated dimensions and price remain unchanged. */
.nsb-drag-line .nsb-line-text {
	display: inline-block;
	transform: scale(var(--nsb-line-display-scale, 1));
	transform-origin: center;
}

.nsb-drag-line {
	position: absolute;
	white-space: nowrap;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none; /* stops iOS's long-press text-selection "callout" magnifier, which can shift/scroll the page right as a drag starts */
	font-size: clamp(1.2rem, 3.4vw, 2rem);
	font-weight: 400;
	color: #fff;
	transition: color .25s, text-shadow .25s, font-family .15s;
	animation: nsb-flicker 9s infinite;
	padding: 2px 6px;
}
.nsb-drag-line { touch-action: none; }
.nsb-drag-line.nsb-dragging { cursor: grabbing; z-index: 5; }
.nsb-drag-line.nsb-selected {
	outline: none;
}

@keyframes nsb-flicker {
	0%, 91%, 93%, 95%, 100% { opacity: 1; }
	92% { opacity: .88; }
	94% { opacity: .95; }
}

.nsb-size-tag {
	display: none !important;
	position: absolute;
	font-size: .68rem;
	color: #d7d7ea;
	white-space: nowrap;
}
.nsb-size-tag-left {
	left: -8px; top: 50%;
	transform: translate(-100%, -50%);
	padding-right: 8px;
}
.nsb-size-tag-bottom {
	left: 4px; bottom: -22px;
}

.nsb-order-box {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 165px;
	max-width: 40%;
}
.nsb-buy-btn {
	width: 100%;
	background: var(--nsb-button-gradient);
	color: #fff;
	border: none;
	padding: 9px 8px;
	border-radius: 7px 7px 0 0;
	font-family: var(--nsb-font-display);
	font-weight: 700;
	letter-spacing: .02em;
	font-size: .72rem;
	cursor: pointer;
	box-shadow: 0 0 18px var(--nsb-glow);
	transition: filter .15s;
}
.nsb-buy-btn:hover { filter: brightness(1.12); }
.nsb-order-summary {
	background: rgba(10,8,16,.88);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.08);
	border-top: none;
	border-radius: 0 0 7px 7px;
	padding: 8px 9px 10px;
	font-size: .64rem;
	color: #e6e6ee;
	line-height: 1.45;
}
.nsb-price-line {
	background: linear-gradient(120deg, var(--nsb-pink), #a91fd6);
	color: var(--nsb-amount);
	font-weight: 800;
	font-size: .78rem;
	padding: 3px 8px;
	border-radius: 999px;
	display: inline-block;
	margin-bottom: 5px;
	box-shadow: 0 0 10px rgba(255,47,176,.4);
}
.nsb-size-line { color: #fff; font-weight: 600; margin-bottom: 3px; }
.nsb-summary-detail { display: none; }

@media (max-width: 600px) {
	.nsb-widget { border-radius: 0; padding: 8px; }
	.nsb-col-left { border-bottom: none; }

	/* Show the live preview FIRST on mobile (so the customer sees the
	   design immediately), then the room/scene pills, then the text-entry
	   card — reordered visually only; the underlying markup/JS is
	   unchanged, so this is safe to do with flex `order`. */
	.nsb-col-left > .nsb-step-box:first-child { order: 3; }
	.nsb-col-left > .nsb-scene-tabs-wrap { order: 2; }
	.nsb-col-left > .nsb-step-box-preview { order: 1; }

	/* Slightly tighter card spacing on small screens; the base .nsb-step-box
	   rule above already gives every step its own shaded rounded card. */
	.nsb-step-box { margin: 0 0 10px; }
	.nsb-step-box-buy { margin-top: 0; }
	.nsb-scene-tabs-wrap { padding: 2px 2px 10px; }
	.nsb-two-col { border-top: none; border-bottom: none; }

	.nsb-bluebar { padding: 9px 14px; font-size: .76rem; }

	.nsb-row-top { padding: 8px 12px 2px; gap: 6px; }
	.nsb-resize-label { font-size: .7rem; }
	.nsb-resize-btn { width: 24px; height: 24px; font-size: .95rem; border-radius: 8px; }
	.nsb-line-inputs { padding: 5px 12px 8px; gap: 6px; }
	/* font-size is deliberately kept at 16px here (not shrunk like the
	   padding/radius around it) — anything smaller makes iOS Safari
	   auto-zoom the whole page the instant this field is focused, which
	   is what was making the text the customer just typed look like it
	   "disappeared" or got cut off under the keyboard: the browser was
	   zooming/scrolling the page on its own, not actually hiding it. */
	.nsb-widget input[type="text"] { padding: 8px 12px; border-radius: 12px; font-size: 16px; }
	.nsb-line-toggle { border-radius: 10px; }
	.nsb-line-btn { padding: 6px 10px; font-size: .78rem; }

	.nsb-scene-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 2px 12px 8px;
		gap: 6px;
	}
	.nsb-scene-tabs::-webkit-scrollbar { display: none; }
	.nsb-scene-tab { flex: 0 0 auto; padding: 6px 12px; font-size: .78rem; }

	/* Preview itself is compressed — this, plus the row/line-input/tab
	   padding trims above, is what pulls STEP 2 up onto the same screen
	   instead of a tall gap before it. */
	.nsb-preview-pane { min-height: 300px; }

	/* Clean preview on mobile: no dashed size-guide box, no inch/cm
	   labels, and no dashed "selected line" outline on the text either —
	   just the text on the scene photo, same as the live reference look.
	   A real Rectangle backing (a solid colour panel the customer actually
	   chose) still shows, since that's part of the design, not a guide. */
	.nsb-sign-frame:not([data-shape="rectangle"]) {
		border: none;
		background: transparent;
	}
	.nsb-size-tag { display: none; }
	.nsb-drag-line.nsb-selected { outline: none; }

	/* Buy Now card stays small and only shows price + size — live-updating
	   as before — with the fuller Font/Color/Letters breakdown hidden on
	   mobile to keep it compact. */
	.nsb-order-box { width: 130px; max-width: 42%; right: 8px; bottom: 8px; border-radius: 14px; overflow: hidden; }
	.nsb-buy-btn { font-size: .64rem; padding: 8px 6px; border-radius: 14px 14px 0 0; }
	.nsb-order-summary { font-size: .6rem; padding: 7px 8px 9px; line-height: 1.3; border-radius: 0 0 14px 14px; }
	.nsb-price-line { font-size: .72rem; padding: 3px 8px; border-radius: 999px; }
	.nsb-size-line { font-size: .62rem; }
	.nsb-summary-detail { display: none; }

	/* The neon text itself renders visually smaller on mobile — via a
	   CSS transform on the text ONLY (see .nsb-line-text below) — while
	   the outer .nsb-drag-line element (whose font-size in px is what
	   size/price is actually calculated from, and what the line-stacking
	   gaps are measured against) is left completely untouched. A plain
	   font-size override here would have had no effect anyway, since JS
	   always sets font-size directly on the element (an inline style
	   beats a plain stylesheet rule), and forcing it with !important
	   would have broken price/size along with the display. */
	.nsb-drag-line .nsb-line-text {
		display: inline-block;
		transform: scale(calc(var(--nsb-line-display-scale, 1) * .78));
		transform-origin: center;
	}
}

.nsb-font-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 16px;
}
@media (max-width: 500px) { .nsb-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nsb-font-btn {
	background: var(--nsb-panel);
	border: 1px solid var(--nsb-border);
	color: var(--nsb-text);
	padding: 10px 8px;
	border-radius: 8px;
	font-size: 1.05rem;
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nsb-font-btn.active { border-color: transparent; color: #fff; background: var(--nsb-button-gradient); box-shadow: 0 0 10px var(--nsb-btn-glow); }

.nsb-color-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 16px 18px;
}
.nsb-swatch {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 2px solid var(--nsb-border);
	cursor: pointer;
	padding: 0;
}
.nsb-swatch.active { border-color: var(--nsb-blue); box-shadow: 0 0 0 2px var(--nsb-bg), 0 0 0 4px var(--nsb-blue), 0 0 12px var(--nsb-glow); }

.nsb-example-block { padding: 0 16px 18px; }
.nsb-example-label {
	font-family: var(--nsb-font-display);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--nsb-muted);
	text-align: center;
	margin-bottom: 8px;
}
.nsb-example-mock {
	max-width: 240px;
	min-height: 130px;
	margin: 0 auto;
	border-radius: 10px;
	border: 1px solid var(--nsb-border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 16px;
	background-color: #0c0c12;
	background-size: cover;
	background-position: center;
	transition: background-color .25s;
}
.nsb-example-mock[data-backing="white"] { background-color: #f5f5f8; }
.nsb-example-mock[data-backing="black"] { background-color: #050506; }
.nsb-example-mock[data-backing="clear"] { background-color: #0c0c12; }

.nsb-example-text {
	font-size: 1.5rem;
	line-height: 1.3;
	text-align: center;
	white-space: pre-line;
	word-break: break-word;
	filter: brightness(1.1) saturate(1.2);
}
.nsb-example-mock[data-shape="rectangle"] .nsb-example-text {
	padding: 12px 18px;
	border: 2px solid rgba(0,0,0,.25);
	border-radius: 8px;
}
.nsb-example-mock[data-backing="black"][data-shape="rectangle"] .nsb-example-text,
.nsb-example-mock[data-backing="clear"][data-shape="rectangle"] .nsb-example-text {
	border-color: rgba(255,255,255,.35);
}

.nsb-example-caption {
	margin-top: 10px;
	font-family: var(--nsb-font-display);
	font-weight: 700;
	font-size: .78rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--nsb-amount);
}

.nsb-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--nsb-border);
	border-top: 1px solid var(--nsb-border);
	border-bottom: 1px solid var(--nsb-border);
}
.nsb-panel { background: var(--nsb-bg); padding: 16px; }
.nsb-panel-title {
	font-family: var(--nsb-font-display);
	font-size: .8rem;
	font-weight: 700;
	color: var(--nsb-text);
	margin-bottom: 10px;
}
.nsb-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nsb-pill {
	background: var(--nsb-panel);
	border: 1px solid var(--nsb-border);
	color: var(--nsb-muted);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: .8rem;
	cursor: pointer;
	transition: background .15s, box-shadow .15s, color .15s;
}
.nsb-pill.active { background: var(--nsb-button-gradient); color: #fff; border-color: transparent; box-shadow: 0 0 12px var(--nsb-btn-glow); }

/* ------------------------------------------------------------------
   Compact pass: smaller right sidebar, smaller buttons, softer shadow
   around the preview display. Kept at the end of the file so these
   win the cascade over the base rules above.
   ------------------------------------------------------------------ */
.nsb-col-right { font-size: .92rem; }
.nsb-col-right .nsb-step-box { border-radius: 12px; }

.nsb-font-grid { gap: 6px; padding: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nsb-font-btn { padding: 6px 6px; font-size: .88rem; border-radius: 7px; }

.nsb-color-row { gap: 7px; padding: 4px 10px 12px; }
.nsb-swatch { width: 22px; height: 22px; border-width: 2px; }

.nsb-example-block { padding: 0 10px 12px; }
.nsb-example-mock { max-width: 190px; min-height: 100px; padding: 14px 12px; }
.nsb-example-text { font-size: 1.15rem; }
.nsb-example-caption { font-size: .7rem; margin-top: 7px; }

.nsb-panel { padding: 10px 12px; }
.nsb-panel-title { font-size: .72rem; margin-bottom: 7px; }
.nsb-pill { padding: 5px 10px; font-size: .72rem; }

/* Buy / order card over the preview — smaller, like the reference */
.nsb-order-box { width: 140px; right: 10px; bottom: 10px; }
.nsb-buy-btn { padding: 7px 6px; font-size: .64rem; border-radius: 6px 6px 0 0; }
.nsb-order-summary { padding: 6px 7px 8px; font-size: .58rem; line-height: 1.35; border-radius: 0 0 6px 6px; }
.nsb-price-line { font-size: .68rem; padding: 2px 5px; margin-bottom: 4px; }

@media (max-width: 900px) {
	.nsb-font-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
	.nsb-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nsb-order-box { width: 46%; }
}

/* ------------------------------------------------------------------
   Final mobile tightening pass. Placed at the very end of the file on
   purpose: the "Compact pass" section above is NOT wrapped in a media
   query, so on phones it was firing after (and undoing) the earlier
   600px block. Putting the real mobile sizes here, last, is what
   actually wins on a phone screen.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	/* Was a hardcoded white here, which is what made the padding/gaps
	   around the dark cards read as an odd light-grey strip against the
	   rest of the dark theme. var(--nsb-page-bg) is the same near-black
	   the rest of the widget already uses, so the padding around each
	   card now blends into the dark theme instead of standing out. */
	.nsb-widget { padding: 6px; background: var(--nsb-page-bg); }
	.nsb-step-box { margin: 0 0 8px; box-shadow: 0 1px 4px rgba(20,20,40,.10); border: 1px solid var(--nsb-border); }
	.nsb-bluebar { padding: 7px 12px; font-size: .72rem; }

	.nsb-row-top { padding: 6px 10px 2px; gap: 5px; }
	.nsb-resize-label { font-size: .66rem; }
	.nsb-resize-btn { width: 22px; height: 22px; font-size: .85rem; }
	.nsb-line-inputs { padding: 4px 10px 6px; gap: 5px; }
	/* Keep at 16px — see the 900px breakpoint above for why. */
	.nsb-widget input[type="text"] { padding: 7px 10px; font-size: 16px; }
	.nsb-line-btn { padding: 5px 8px; font-size: .72rem; }

	.nsb-scene-tabs-wrap { padding: 2px 2px 6px; }
	.nsb-scene-tab { padding: 5px 10px; font-size: .72rem; }

	.nsb-preview-pane { min-height: 240px; }

	.nsb-font-grid { padding: 6px; gap: 5px; grid-template-columns: repeat(3, 1fr) !important; }
	.nsb-font-btn { padding: 6px 4px; font-size: .68rem; border-radius: 6px; }

	.nsb-color-row { padding: 4px 8px 8px; gap: 8px; }
	/* Bumped up from a cramped 20px — a color swatch this small was hard
	   to tap accurately with a thumb; more rows via flex-wrap is a much
	   better trade than fingertip-sized targets. */
	.nsb-swatch { width: 32px; height: 32px; border-width: 2px; }

	.nsb-example-block { padding: 0 8px 8px; }
	.nsb-example-label { font-size: .6rem; margin-bottom: 4px; }
	.nsb-example-mock { max-width: 130px; min-height: 64px; padding: 6px 8px; }
	.nsb-example-text { font-size: .85rem; }
	.nsb-example-caption { font-size: .6rem; margin-top: 4px; }

	.nsb-panel { padding: 6px 8px; }
	.nsb-panel-title { font-size: .64rem; margin-bottom: 4px; }
	.nsb-pill-row { gap: 6px; }
	.nsb-pill { padding: 8px 12px; font-size: .7rem; }

	.nsb-order-box { width: 120px; right: 6px; bottom: 6px; }
	.nsb-buy-btn { padding: 6px 5px; font-size: .58rem; }
	.nsb-order-summary { padding: 5px 6px 7px; font-size: .54rem; }
	.nsb-price-line { font-size: .62rem; padding: 2px 5px; margin-bottom: 3px; }

	/* Edge-to-edge look on phones — no grey page background visible on
	   the sides. Previously done with "width:100vw + calc(50% - 50vw)
	   margins", which breaks the widget out of the theme's own content
	   padding — but that trick only comes out EXACTLY right when the
	   parent chain has zero unaccounted horizontal offset, which varies
	   theme to theme, and any mismatch showed up as a gap down the right
	   edge of every card. width:100% of the widget's own parent has no
	   such assumption to get wrong — it can't ever end up wider than
	   whatever contains it — so it's the safer choice even though a
	   theme with its own side padding around content may keep a sliver
	   of that padding visible (a minor cosmetic trade-off against a
	   layout that reliably never breaks). */
	.nsb-widget {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		/* Same fix as the rule above — dark, matching the theme, instead
		   of a white strip that clashed with the black cards around it. */
		background: var(--nsb-page-bg);
	}

	/* Tighter step 1 controls: line toggle, resize +/-, text input */
	.nsb-line-toggle { border-radius: 7px; }
	/* Slightly taller than the width-only squeeze below — 1_Line/2_Line/
	   3_Line get tapped constantly while setting up a design. */
	.nsb-line-btn { padding: 9px 8px; font-size: .72rem; }
	.nsb-resize-block { gap: 5px; }
	/* Bumped from 20px so the +/- resize buttons are comfortable to tap
	   repeatedly with a thumb, which is exactly how they're used. */
	.nsb-resize-btn { width: 32px; height: 32px; font-size: 1rem; border-radius: 8px; }
	/* Keep at 16px — see the 900px breakpoint above for why. */
	.nsb-widget input[type="text"] { padding: 6px 9px; border-radius: 9px; font-size: 16px; }
	.nsb-line-inputs { gap: 4px; }
	.nsb-row-top {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		justify-content: initial;
		padding: 5px 8px 2px;
	}
	.nsb-line-toggle {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		min-width: 0;
	}
	.nsb-line-btn {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.nsb-resize-block {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		width: 100%;
		min-width: 0;
		/* Fixed height regardless of the label's text length (it changes
		   every time a different line is selected/dragged, e.g. "Line 1 •
		   32px" vs "Line 2 • 136px") — without this, a longer label could
		   wrap onto a second line and change this block's height, which
		   pushed the preview pane (positioned right after it) up/down —
		   a visible "jump" the instant a line was pressed to start a drag. */
		min-height: 34px;
		align-items: center;
	}
	.nsb-resize-label {
		min-width: 0;
		/* Truncate instead of wrapping (overflow-wrap: anywhere used to let
		   a long label wrap onto a second line and change this row's
		   height — see the min-height note on .nsb-resize-block above). */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Room/scene pills */
	.nsb-scene-tab { padding: 4px 9px; font-size: .68rem; }
	.nsb-scene-tabs { gap: 5px; }
	.nsb-scene-tabs-wrap { padding: 2px 6px 5px; }

	/* Font grid: shrink the button box itself, not just its text */
	.nsb-font-grid { padding: 5px 6px; gap: 6px; }
	/* Bumped from a 30px min-height — tall enough now for a thumb to hit
	   reliably, matching the swatch/resize-button sizing above. */
	.nsb-font-btn { padding: 9px 4px; font-size: .7rem; min-height: 40px; }

	.nsb-step-box { margin: 0 0 6px; border-radius: 8px; }
	.nsb-bluebar { padding: 6px 10px; font-size: .68rem; }
}

/* ---- Backing colour / shape swatches (small boxes, no text pills) ---- */
.nsb-bswatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nsb-bswatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1;
}
.nsb-bswatch-box {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	border: 2px solid rgba(0, 0, 0, .15);
	background-color: #fff;
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
	transition: border-color .15s ease, transform .15s ease;
	overflow: hidden;
}
.nsb-bswatch:hover .nsb-bswatch-box { transform: translateY(-1px); }
.nsb-bswatch.active .nsb-bswatch-box {
	border-color: var(--nsb-blue);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .18), 0 0 10px var(--nsb-glow);
}
.nsb-bswatch-box.is-clear {
	background-image:
		linear-gradient(45deg, #dcdcdc 25%, transparent 25%, transparent 75%, #dcdcdc 75%),
		linear-gradient(45deg, #dcdcdc 25%, transparent 25%, transparent 75%, #dcdcdc 75%);
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
}
/* Shape swatches without a photo get a simple drawn hint */
.nsb-bswatch-box.is-shape-rectangle .nsb-bswatch-glyph {
	position: absolute;
	inset: 9px;
	border-radius: 3px;
	background: #2c2c2c;
}
.nsb-bswatch-box.is-shape-text .nsb-bswatch-glyph {
	position: absolute;
	inset: 10px;
	border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
	border: 2px solid #2c2c2c;
}
.nsb-bswatch-label {
	font-size: .68rem;
	font-weight: 600;
	color: #444;
	max-width: 66px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nsb-bswatch.active .nsb-bswatch-label { color: var(--nsb-blue); font-weight: 700; }
@media (max-width: 640px) {
	.nsb-bswatch-box { width: 34px; height: 34px; }
	.nsb-bswatch-label { font-size: .6rem; max-width: 54px; }
}


/* ------------------------------------------------------------------
   Light mode (opt-in via the small button in the display corner)
   ------------------------------------------------------------------ */
.nsb-widget.nsb-light {
	--nsb-bg: #ffffff;
	--nsb-page-bg: #ffffff;
	--nsb-panel: #f4f4f8;
	--nsb-border: #e2e2ea;
	--nsb-text: #17171d;
	--nsb-muted: #6b6b78;
}
.nsb-widget .nsb-step-box { box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); }
.nsb-widget.nsb-light .nsb-step-box { box-shadow: 0 4px 18px rgba(20, 20, 40, .1); border-color: var(--nsb-border); }

/* Small light / dark switch in the corner of the display image */
.nsb-mode-toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 6;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(10, 10, 16, .55);
	color: #fff;
	font-size: .85rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(3px);
	transition: background .15s ease, transform .15s ease;
}
.nsb-mode-toggle:hover { background: rgba(139, 63, 251, .85); transform: translateY(-1px); }
@media (max-width: 480px) {
	.nsb-mode-toggle { width: 24px; height: 24px; font-size: .72rem; top: 7px; right: 7px; }
}


/* Smaller Buy Now card over the main preview image on phones */
@media (max-width: 600px) {
	.nsb-order-box { width: 96px; max-width: 34%; right: 5px; bottom: 5px; }
	.nsb-buy-btn { padding: 4px 4px; font-size: .5rem; border-radius: 5px 5px 0 0; }
	.nsb-order-summary { padding: 4px 5px 5px; font-size: .46rem; line-height: 1.3; border-radius: 0 0 5px 5px; }
	.nsb-price-line { font-size: .54rem; padding: 1px 4px; margin-bottom: 2px; }
	.nsb-size-line { font-size: .46rem; margin-bottom: 2px; }
}
@media (max-width: 500px) {
	.nsb-order-box { width: 96px; }
}


/* Mobile containment: keep every builder item inside the available screen. */
@media (max-width: 600px) {
	.nsb-widget,
	.nsb-widget * {
		max-inline-size: 100%;
	}
	.nsb-widget .nsb-resize-btn,
	.nsb-widget .nsb-swatch,
	.nsb-widget .nsb-bswatch-box,
	.nsb-widget .nsb-mode-toggle {
		max-inline-size: none;
	}
	.nsb-two-col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nsb-bswatch-row,
	.nsb-pill-row,
	.nsb-color-row {
		min-width: 0;
	}
}


/* True phone full-bleed layout: escape narrow WordPress content wrappers
   while keeping every part of the builder inside the device viewport. */
@media (max-width: 600px) {
	.nsb-widget {
		width: 100vw;
		width: 100dvw;
		max-width: none;
		max-inline-size: none;
		margin-left: calc(50% - 50vw);
		margin-left: calc(50% - 50dvw);
		margin-right: calc(50% - 50vw);
		margin-right: calc(50% - 50dvw);
	}
	.nsb-scene-tabs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		width: 100%;
		overflow-x: visible;
		padding-inline: 0;
	}
	.nsb-scene-tab {
		min-width: 0;
		width: 100%;
		padding-inline: 3px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
   Example image: always a compact centred box (never edge-to-edge).
   Placed last so it wins over any earlier width rule.
   ------------------------------------------------------------------ */
.nsb-example-mock {
	width: 100% !important;
	max-width: 200px !important;
	aspect-ratio: 4 / 3;
	min-height: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 10px !important;
	background-size: cover !important;
	background-position: center !important;
	overflow: hidden !important;
}
@media (max-width: 600px) {
	.nsb-example-mock { max-width: 160px !important; padding: 8px !important; }
	.nsb-example-text { font-size: .9rem; }
}

/* ------------------------------------------------------------------
   Extra mobile compacting: smaller buttons, equal input-bar widths.
   Placed last so it wins over any earlier mobile rules.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.nsb-bluebar { padding: 5px 8px; font-size: .62rem; }

	.nsb-row-top { padding: 4px 8px 2px; gap: 4px; }
	.nsb-line-toggle {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
	}
	.nsb-line-btn {
		padding: 5px 2px;
		font-size: .58rem;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nsb-resize-block { gap: 4px; }
	.nsb-resize-label { font-size: .58rem; }
	.nsb-resize-btn {
		width: 24px;
		height: 24px;
		font-size: .8rem;
		border-radius: 6px;
	}

	.nsb-line-inputs { padding: 3px 8px 6px; gap: 4px; width: 100%; }
	.nsb-widget input[type="text"] {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		padding: 5px 8px;
		font-size: 16px;
		border-radius: 8px;
	}

	.nsb-scene-tabs { gap: 4px; padding: 2px 6px 5px; }
	.nsb-scene-tab {
		padding: 3px 6px;
		font-size: .58rem;
	}

	.nsb-font-grid { padding: 4px 6px; gap: 4px; }
	.nsb-font-btn {
		padding: 4px 3px;
		font-size: .6rem;
		min-height: 30px;
		border-radius: 5px;
	}

	.nsb-color-row { gap: 6px; padding: 3px 8px 6px; }
	.nsb-swatch { width: 26px; height: 26px; }

	.nsb-order-box { width: 88px; right: 4px; bottom: 4px; }
	.nsb-buy-btn {
		padding: 3px 3px;
		font-size: .48rem;
		border-radius: 4px 4px 0 0;
	}
	.nsb-order-summary { padding: 3px 4px 4px; font-size: .44rem; }
	.nsb-price-line { font-size: .5rem; padding: 1px 3px; }
	.nsb-size-line { font-size: .42rem; }

	.nsb-mode-toggle { width: 22px; height: 22px; font-size: .65rem; }
}

/* ------------------------------------------------------------------
   Mobile + small tablet: 1_Line/2_Line/3_Line now look like the font
   buttons — separate rounded pills with a visible gap, sized to their
   own text (not stretched into equal columns). Font buttons and line
   buttons are given the EXACT SAME padding/font-size/border-radius here
   so the two button types are always visually consistent with each
   other, no matter which of them a person compares. There are a lot of
   older, narrower breakpoints above this one that used to set these two
   button types to different sizes — this block is placed last and
   covers a wide range (up to 900px) specifically so it reliably wins
   over all of them, instead of the two button types drifting apart
   again at some in-between screen width.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.nsb-line-toggle {
		display: flex;                         /* was a 3-column grid that force-stretched each button to a full 1/3 of the row, leaving a lot of empty space around the small text */
		justify-content: center;
		flex-wrap: wrap;
		gap: 6px;
		width: 100%;
		border: none;         /* was one shared border around the whole connected group */
		border-radius: 0;
		overflow: visible;    /* was hidden — needed to clip the old connected buttons together */
	}
	.nsb-line-btn,
	.nsb-font-btn {
		background: var(--nsb-panel);
		border: 1px solid var(--nsb-border);
		border-radius: 8px;
		padding: 7px 14px;
		font-size: .74rem;
		min-height: 34px;
	}
	.nsb-line-btn {
		flex: 0 1 auto;   /* sized to its OWN text, not stretched to fill a grid column */
	}
	.nsb-line-btn.active { border-color: var(--nsb-button); }

	.nsb-font-grid { gap: 6px; }
}

/* ---- Snapshot mode (Buy Now screenshot) ----
   While html2canvas captures the preview, every editor-only control and
   selection outline must be invisible so the customer's design image
   shows nothing but the neon sign itself. */
.nsb-capturing .nsb-drag-line,
.nsb-capturing .nsb-drag-line.nsb-selected {
	outline: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* The icon's little rotate grab-handle is editor chrome too — it was
   still being captured and showing up as a stray circle in the
   customer's design image. */
.nsb-capturing .nsb-icon-corner-rotate,
.nsb-capturing .nsb-drag-icon::before,
.nsb-capturing .nsb-drag-icon::after {
	display: none !important;
}

.nsb-capturing .nsb-drag-icon,
.nsb-capturing .nsb-drag-icon.nsb-selected {
	outline: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}


/* ---------- Buy Now buyer details modal ---------- */
.nsb-order-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .72);
	padding: 16px;
}
.nsb-order-modal[hidden] { display: none; }
.nsb-order-modal-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: #14141c;
	color: #fff;
	border-radius: 14px;
	padding: 22px 20px 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.nsb-order-modal-card h3 { margin: 0 0 14px; font-size: 18px; }
.nsb-order-modal-card label {
	display: block;
	font-size: 13px;
	margin-bottom: 12px;
}
.nsb-order-modal-card input,
.nsb-order-modal-card textarea {
	width: 100%;
	margin-top: 5px;
	padding: 9px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 14px;
	box-sizing: border-box;
}
.nsb-order-modal-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.nsb-order-modal-msg {
	min-height: 18px;
	font-size: 13px;
	color: #ff8a8a;
	margin-bottom: 8px;
}
.nsb-order-modal #nsb-order-submit { width: 100%; }


/* ---------------- Neon icon (admin-uploaded SVG) ---------------- */
/* Lives inside the sign preview next to the text lines: recoloured with a
   CSS mask so any uploaded SVG takes the chosen neon colour, and freely
   draggable. Its size is fixed by the admin, so there are deliberately no
   resize handles or +/- buttons for it. */
.nsb-drag-icon {
	position: absolute;
	cursor: grab;
	touch-action: none;
	user-select: none;
	z-index: 5;
}
.nsb-drag-icon-art {
	position: absolute;
	inset: 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.nsb-drag-icon.nsb-dragging { cursor: grabbing; }
.nsb-drag-icon.nsb-rotating { cursor: grabbing; }
.nsb-drag-icon.nsb-rotating .nsb-drag-icon-art { opacity: .95; }
.nsb-icon-corner-rotate {
	display: none;
	position: absolute;
	top: -16px;
	right: -16px;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #16b8cb;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	transition: background .15s ease, box-shadow .15s ease;
}
.nsb-icon-corner-rotate:active,
.nsb-drag-icon.nsb-rotating .nsb-icon-corner-rotate {
	cursor: grabbing;
	background: #0e93a3;
	box-shadow: 0 0 0 4px rgba(22, 184, 203, .28), 0 2px 8px rgba(0, 0, 0, .3);
}
/* Press and hold this handle, then sweep around the icon to rotate it.
   Shown on touch devices too, where the sweep works with one finger.
   Both corner handles only appear while the icon is SELECTED (tapped);
   tapping anywhere else on the preview hides them again. */
.nsb-drag-icon.nsb-icon-active .nsb-icon-corner-rotate { display: inline-flex; }

.nsb-icon-corner-remove {
	display: none;
	position: absolute;
	top: -16px;
	left: -16px;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #e6413c;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	z-index: 3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.nsb-drag-icon.nsb-icon-active .nsb-icon-corner-remove { display: inline-flex; }
.nsb-icon-corner-remove:active { background: #b62e2a; }
.nsb-capturing .nsb-icon-corner-remove { display: none !important; }

/* Sign design selection and the rotating round sign. */
.nsb-widget .nsb-design-section { margin-top: 14px; padding: 14px; background: var(--nsb-bg); border: 1px solid var(--nsb-border); border-radius: 8px; }
.nsb-widget .nsb-design-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nsb-widget .nsb-design-tab { min-width: 0; padding: 10px 6px; border-radius: 6px; border: 1px solid var(--nsb-border); background: var(--nsb-panel); color: var(--nsb-text); cursor: pointer; font-size: .88rem; line-height: 1.3; }
.nsb-widget .nsb-design-tab.active { border-color: var(--nsb-button); box-shadow: inset 0 -2px var(--nsb-button); color: var(--nsb-text); }
.nsb-widget .nsb-3d-stage[hidden] { display: none !important; }
.nsb-widget .nsb-design-tab:focus-visible { outline: 2px solid var(--nsb-button); outline-offset: 2px; }
.nsb-widget .nsb-line-toggle[hidden], .nsb-widget .nsb-line-inputs[hidden], .nsb-widget .nsb-fixed-editor[hidden] { display: none !important; }
.nsb-widget .nsb-round-sizes[hidden] { display: none !important; }
.nsb-widget .nsb-round-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nsb-widget .nsb-round-size { flex: 1 1 140px; min-width: 0; padding: 9px 6px; border: 1px solid var(--nsb-border); border-radius: 6px; background: var(--nsb-panel); color: var(--nsb-text); font: inherit; font-size: .82rem; cursor: pointer; }
.nsb-widget .nsb-round-size.active { border-color: var(--nsb-button); box-shadow: inset 0 -2px var(--nsb-button); }
.nsb-widget .nsb-round-size:focus-visible { outline: 2px solid var(--nsb-button); outline-offset: 2px; }
.nsb-widget .nsb-fixed-editor { margin-top: 12px; }
.nsb-widget .nsb-fixed-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.nsb-widget .nsb-fixed-side { min-width: 0; padding: 11px 6px; border: 1px solid var(--nsb-border); border-radius: 6px; background: var(--nsb-panel); color: var(--nsb-text); cursor: pointer; font: inherit; }
.nsb-widget .nsb-fixed-side.active { border-color: var(--nsb-button); box-shadow: inset 0 -2px var(--nsb-button); }
.nsb-widget .nsb-fixed-side:focus-visible, .nsb-widget .nsb-fixed-text:focus-visible { outline: 2px solid var(--nsb-button); outline-offset: 2px; }
.nsb-widget .nsb-fixed-lines { display: grid; gap: 7px; }
.nsb-widget .nsb-fixed-label:not(:first-child) { margin-top: 7px; }
.nsb-widget .nsb-fixed-label { display: block; margin-bottom: 0; color: var(--nsb-text); font-size: .85rem; }
.nsb-widget .nsb-fixed-text { display: block; width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 6px; border: 1px solid var(--nsb-border); background: var(--nsb-panel); color: var(--nsb-text); font: inherit; line-height: 1.4; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.nsb-widget .nsb-fixed-text.nsb-selected { border-color: var(--nsb-button); }
.nsb-widget .nsb-sign-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.nsb-widget .nsb-sign-colors-label { grid-column: 1 / -1; color: var(--nsb-muted); font-size: .8rem; }
.nsb-widget .nsb-sign-color { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; border: 1px solid var(--nsb-border); border-radius: 6px; background: var(--nsb-panel); color: var(--nsb-text); font: inherit; font-size: .8rem; cursor: pointer; }
.nsb-widget .nsb-sign-color.active { border-color: var(--nsb-button); box-shadow: inset 0 -2px var(--nsb-button); }
.nsb-widget .nsb-sign-color:focus-visible { outline: 2px solid var(--nsb-button); outline-offset: 2px; }
.nsb-widget .nsb-sign-color-chip { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #777b84; box-shadow: inset 0 1px 2px rgba(255,255,255,.28); }
.nsb-widget .nsb-sign-color-black { background: #090a0d; }
.nsb-widget .nsb-sign-color-white { background: #f5f2e9; }
.nsb-widget .nsb-sign-color-gold { background: linear-gradient(135deg, #f5d36a, #9b6812); }
.nsb-widget .nsb-3d-preview { background-image: none !important; background: radial-gradient(ellipse at 60% 44%, #292934 0%, #13131b 48%, #08080d 100%) !important; perspective: 1100px; }
.nsb-widget .nsb-3d-preview .nsb-sign-frame, .nsb-widget .nsb-3d-preview .nsb-size-tag { visibility: hidden; pointer-events: none; }
.nsb-widget .nsb-3d-preview { min-height: 0 !important; }
.nsb-widget .nsb-3d-stage { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.nsb-widget .nsb-3d-stage { --nsb-metal-hi: #5f6470; --nsb-metal-mid: #262933; --nsb-metal-low: #0c0d12; position: absolute; inset: 0; overflow: hidden; perspective: 1100px; pointer-events: none; touch-action: none; }
.nsb-widget .nsb-3d-stage::after { content: ''; position: absolute; z-index: 0; left: 4%; right: 3%; bottom: 4%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.58), rgba(0,0,0,0) 72%); filter: blur(4px); }
.nsb-widget .nsb-3d-stand { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.nsb-widget .nsb-3d-base { position: absolute; left: 7%; bottom: 5%; width: 29%; height: 9%; border-radius: 50%; background: linear-gradient(180deg, #4e535e 0%, #1d2028 42%, #08090d 100%); border: 2px solid #666b77; box-shadow: inset 0 5px 8px rgba(255,255,255,.12), 0 8px 12px rgba(0,0,0,.5); transform: perspective(180px) rotateX(54deg); }
.nsb-widget .nsb-3d-base::before { content: ''; position: absolute; inset: 15% 12%; border-radius: 50%; background: radial-gradient(circle at 42% 30%, #424650, #101117 70%); box-shadow: inset 0 2px 3px rgba(255,255,255,.12); }
.nsb-widget .nsb-3d-base span { position: absolute; left: 41%; top: -50%; width: 18%; height: 105%; border-radius: 50%; background: #171920; border: 1px solid #666a74; }
.nsb-widget .nsb-3d-post { position: absolute; z-index: 2; left: 20%; bottom: 10%; width: 4.2%; height: 69%; border-radius: 4px; background: linear-gradient(90deg, #07080b 0%, #555b66 38%, #20232b 66%, #050609 100%); border: 1px solid #696e79; box-shadow: 5px 5px 9px rgba(0,0,0,.35); }
.nsb-widget .nsb-3d-collar { position: absolute; z-index: 3; left: 18.7%; width: 6.8%; height: 3.8%; border-radius: 3px; background: linear-gradient(180deg, #606570, #15171d 60%, #06070a); border: 1px solid #777c86; }
.nsb-widget .nsb-3d-collar-low { bottom: 31%; }
.nsb-widget .nsb-3d-collar-high { top: 22%; }
.nsb-widget .nsb-3d-motor { position: absolute; z-index: 4; left: 17.8%; top: 10%; width: 8.8%; height: 18%; border-radius: 4px; background: linear-gradient(90deg, #090a0e, #343842 43%, #111319); border: 1px solid #696e77; box-shadow: inset 2px 0 rgba(255,255,255,.08), 5px 6px 10px rgba(0,0,0,.45); }
.nsb-widget .nsb-3d-motor::after { content: ''; position: absolute; right: 16%; top: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d5d8dd, #555b65 45%, #111318 72%); box-shadow: 0 0 0 2px #08090c; }
.nsb-widget .nsb-3d-arm { position: absolute; z-index: 2; left: 21.5%; top: 14%; width: 48%; height: 5.2%; border-radius: 3px; background: linear-gradient(180deg, #555b66 0%, #242730 38%, #08090c 100%); border: 1px solid #6a6f78; box-shadow: 0 6px 9px rgba(0,0,0,.42), inset 0 2px rgba(255,255,255,.09); transform: rotate(1.5deg); transform-origin: left center; }
.nsb-widget .nsb-3d-arm-cap { position: absolute; z-index: 3; left: 67.4%; top: 13.2%; width: 4%; height: 8%; border-radius: 2px; background: linear-gradient(90deg, #12141a, #4d525d 55%, #090a0e); border: 1px solid #717680; }
.nsb-widget .nsb-3d-hanging-unit { position: absolute; z-index: 3; top: 17%; right: -1%; width: 62%; height: 78%; display: flex; flex-direction: column; align-items: center; pointer-events: none; transform-style: preserve-3d; }
.nsb-widget .nsb-3d-drop { position: relative; z-index: 2; flex: 0 0 7%; width: 3.8%; min-width: 8px; border-radius: 2px; background: linear-gradient(90deg, #08090c, #555b65 50%, #0b0c10); border: 1px solid #6d727c; box-shadow: 3px 3px 6px rgba(0,0,0,.4); }
.nsb-widget .nsb-3d-drop span { position: absolute; left: 50%; bottom: -6px; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 36% 32%, #c4c7cc, #555b64 40%, #0a0b0e 73%); border: 1px solid #747984; }
.nsb-widget .nsb-3d-hook { position: relative; z-index: 1; flex: 0 0 5%; width: 11%; min-width: 20px; margin-top: -1px; border: max(3px, .55vw) solid #24272f; border-top: 0; border-radius: 0 0 50% 50%; box-shadow: inset 0 -2px rgba(255,255,255,.09), 2px 3px 5px rgba(0,0,0,.4); }
.nsb-widget .nsb-3d-disc { position: relative; z-index: 3; flex: 0 0 auto; width: min(62%, 250px); aspect-ratio: 1; margin-top: -1px; transform-style: preserve-3d; transform-origin: 50% -7%; animation: nsb-disc-turn 7s linear infinite; pointer-events: auto; }
.nsb-widget .nsb-3d-depth { position: absolute; inset: 1%; transform-style: preserve-3d; pointer-events: none; }
.nsb-widget .nsb-3d-depth span { position: absolute; inset: 0; border-radius: 50%; background: #090a0d; border: clamp(5px, 1.25vw, 10px) solid #17191f; box-shadow: inset 0 0 14px #000; backface-visibility: visible; }
.nsb-widget .nsb-3d-depth span:nth-child(1) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * -1)); }
.nsb-widget .nsb-3d-depth span:nth-child(2) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * -0.75)); }
.nsb-widget .nsb-3d-depth span:nth-child(3) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * -0.5)); }
.nsb-widget .nsb-3d-depth span:nth-child(4) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * -0.25)); }
.nsb-widget .nsb-3d-depth span:nth-child(5) { transform: translateZ(0); }
.nsb-widget .nsb-3d-depth span:nth-child(6) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * 0.25)); }
.nsb-widget .nsb-3d-depth span:nth-child(7) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * 0.5)); }
.nsb-widget .nsb-3d-depth span:nth-child(8) { transform: translateZ(calc(var(--nsb-disc-depth, 12px) * 0.75)); }
.nsb-widget .nsb-3d-depth span:nth-child(9) { transform: translateZ(var(--nsb-disc-depth, 12px)); }
.nsb-widget .nsb-3d-disc.nsb-3d-still { animation: none; transform: rotateY(-16deg); }
.nsb-widget .nsb-3d-disc.nsb-3d-show-back { animation: none; transform: rotateY(180deg); }
.nsb-widget .nsb-3d-disc.nsb-3d-show-back.nsb-3d-editing { transform: rotateY(180deg); }
.nsb-widget .nsb-3d-disc.nsb-3d-editing { animation: none; transform: rotateY(0deg); }
.nsb-widget .nsb-3d-face { position: absolute; z-index: 2; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 17%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: clamp(4px, 1vw, 7px) solid #777b84; box-shadow: inset 0 0 20px rgba(0,0,0,.72), inset 0 0 0 2px rgba(255,255,255,.08); transition: background .2s ease, border-color .2s ease; }
.nsb-widget .nsb-3d-front { transform: translateZ(var(--nsb-disc-depth, 12px)); }
.nsb-widget .nsb-3d-back { transform: rotateY(180deg) translateZ(var(--nsb-disc-depth, 12px)); background: radial-gradient(circle at 35% 30%, #242631, #090a0e 70%); }
.nsb-widget .nsb-sign-black .nsb-3d-front,
.nsb-widget .nsb-sign-black .nsb-3d-back { background: radial-gradient(circle at 35% 30%, #242631, #08090d 72%); }
.nsb-widget .nsb-sign-white .nsb-3d-front,
.nsb-widget .nsb-sign-white .nsb-3d-back { background: radial-gradient(circle at 35% 28%, #fff, #dad9d4 72%, #b8b8b5); border-color: #f4f3ed; box-shadow: inset 0 0 18px rgba(0,0,0,.22); }
.nsb-widget .nsb-sign-gold .nsb-3d-front,
.nsb-widget .nsb-sign-gold .nsb-3d-back { background: radial-gradient(circle at 34% 27%, #f9df7b, #c28a20 58%, #81520c 100%); border-color: #f0c75a; box-shadow: inset 0 0 20px rgba(72,40,0,.45); }
.nsb-widget .nsb-3d-edge { display: none; }
.nsb-widget .nsb-3d-lettering { position: absolute; display: block; width: 68%; transform: translate(-50%, -50%); overflow-wrap: anywhere; text-align: center; font-size: clamp(13px, 2vw, 25px); font-weight: 700; line-height: 1.2; cursor: grab; user-select: none; touch-action: none; }
.nsb-widget .nsb-3d-lettering:active { cursor: grabbing; }
/* Fixed Wall keeps the wall-mounted arm + drop/hook + disc (matches
   Rotation there), but drops the floor stand (base/post/collars) and
   the rotation motor box — those only make sense for the free-standing,
   spinning display. */
.nsb-widget .nsb-mode-fixed .nsb-3d-base,
.nsb-widget .nsb-mode-fixed .nsb-3d-post,
.nsb-widget .nsb-mode-fixed .nsb-3d-collar,
.nsb-widget .nsb-mode-fixed .nsb-3d-motor { display: none; }
/* Fixed Wall's arm starts flush with the left edge of the preview and
   is shorter than Rotation's. Because it's shorter, the disc (which
   Rotation positions with a fixed right:-1% so it always lines up
   with Rotation's longer arm) has to be pulled left too, so it still
   sits right up against this arm's end instead of leaving a gap. */
.nsb-widget .nsb-mode-fixed .nsb-3d-arm { left: 0%; width: 45%; height: 4.2%; }
.nsb-widget .nsb-mode-fixed .nsb-3d-arm-cap { left: 42.9%; }
.nsb-widget .nsb-mode-fixed .nsb-3d-hanging-unit { left: 14.5%; right: auto; width: 62%; }
@keyframes nsb-disc-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .nsb-widget .nsb-3d-disc { animation: none; transform: rotateY(-18deg); } }
@media (max-width: 580px) {
	.nsb-widget .nsb-design-section { padding: 10px; }
	.nsb-widget .nsb-design-tabs { gap: 4px; }
	.nsb-widget .nsb-design-tab { font-size: .72rem; padding: 9px 3px; }
	.nsb-widget .nsb-3d-post { left: 17%; width: 5%; }
	.nsb-widget .nsb-3d-base { left: 2%; width: 31%; }
	.nsb-widget .nsb-3d-collar { left: 15.7%; width: 7.8%; }
	.nsb-widget .nsb-3d-motor { left: 14.8%; width: 10%; }
	.nsb-widget .nsb-3d-arm { left: 18%; width: 52%; }
	.nsb-widget .nsb-3d-arm-cap { left: 67%; }
	.nsb-widget .nsb-3d-hanging-unit { right: -5%; width: 67%; }
	.nsb-widget .nsb-3d-disc { max-width: 215px !important; }
	.nsb-widget .nsb-3d-lettering { font-size: 18px; }
}
.nsb-icon-section {
	padding: 14px 16px 16px;
	text-align: left;
}
.nsb-buy-icon-section { background: var(--nsb-bg); }
.nsb-icon-section .nsb-panel-title { margin-bottom: 6px; }
.nsb-icon-section .nsb-icon-color-title { margin-top: 10px; }
.nsb-icon-section .nsb-color-row { padding: 0; }
.nsb-icon-hint {
	margin-top: 8px;
	font-size: 11px;
	opacity: 0.7;
}
@media (max-width: 600px) {
	.nsb-icon-section { padding: 10px 12px 12px; }
}


/* Image-only Neon Icon picker. */
#nsb-icon-options { display: flex; flex-wrap: wrap; gap: 10px; }
.nsb-icon-option {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 1px solid var(--nsb-border);
	border-radius: 8px;
	background: var(--nsb-panel);
	cursor: pointer;
}
.nsb-icon-option-image {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--nsb-text);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.nsb-icon-option.active { border-color: var(--nsb-pink); box-shadow: 0 0 12px var(--nsb-btn-glow); }
.nsb-icon-option.active .nsb-icon-option-image { background: var(--nsb-pink); }
.nsb-lines-layer { touch-action: none; overscroll-behavior: contain; }


.nsb-widget .nsb-single-box {
	display: block;
	width: 100%;
	min-height: 90px;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--nsb-border, #444);
	background: var(--nsb-panel-bg, #1a162b);
	color: var(--nsb-text, #fff);
	font-size: 16px;
	line-height: 1.5;
	resize: vertical;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.nsb-widget .nsb-single-box:focus {
	border-color: var(--nsb-button, #8b3ffb);
	box-shadow: 0 0 0 2px rgba(139, 63, 251, 0.25);
}

/* v5.20.2 — balanced round-sign sizing + matched two-sided styling */
.nsb-widget .nsb-3d-icon { position: absolute; left: 50%; top: 80%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); cursor: grab; touch-action: none; user-select: none; z-index: 4; }
.nsb-widget .nsb-3d-icon-art { position: absolute; inset: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; }
.nsb-widget .nsb-3d-icon.nsb-icon-active .nsb-icon-corner-rotate,
.nsb-widget .nsb-3d-icon.nsb-icon-active .nsb-icon-corner-remove { display: inline-flex; }
.nsb-widget .nsb-3d-play { position: absolute; left: 12px; right: auto; bottom: 12px; z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.55); color: #fff; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 0 0 3px; cursor: pointer; pointer-events: auto; box-shadow: 0 0 12px rgba(255,255,255,.35); }
.nsb-widget .nsb-3d-play[hidden] { display: none; }
.nsb-widget .nsb-3d-play:hover { background: rgba(0,0,0,.8); }

/* 5.20.3 — 3D Rotation: floor stand removed; arm now mounts from the
   left edge of the preview like a wall hook (fixed mode untouched). */
.nsb-widget .nsb-mode-rotation .nsb-3d-base,
.nsb-widget .nsb-mode-rotation .nsb-3d-post,
.nsb-widget .nsb-mode-rotation .nsb-3d-collar { display: none; }
.nsb-widget .nsb-mode-rotation .nsb-3d-stage::after { left: 30%; right: 2%; }
.nsb-widget .nsb-mode-rotation .nsb-3d-motor { left: 0; top: 8%; width: 7%; height: 22%; border-radius: 0 4px 4px 0; border-left: 0; box-shadow: inset -2px 0 rgba(255,255,255,.08), 6px 6px 10px rgba(0,0,0,.45); }
.nsb-widget .nsb-mode-rotation .nsb-3d-arm { left: 4%; top: 14%; width: 65.5%; }
.nsb-widget .nsb-mode-rotation .nsb-3d-arm-cap { left: 67.4%; }

/* 5.20.5 — bring the rotating sign closer to its wall mount. The cap and
   suspended disc follow the arm end, including on narrow screens. */
.nsb-widget .nsb-mode-rotation .nsb-3d-arm { width: 43%; }
.nsb-widget .nsb-mode-rotation .nsb-3d-arm-cap { left: 45%; }
.nsb-widget .nsb-mode-rotation .nsb-3d-hanging-unit { right: 22%; width: 62%; }
.nsb-widget .nsb-mode-rotation .nsb-3d-stage::after { left: 18%; right: 18%; }

/* Keep the Buy Now card at the lower edge, below the clipped scene. */
.nsb-widget .nsb-step-box-preview { position: relative; padding-bottom: 28px; }
.nsb-widget .nsb-step-box-preview > .nsb-order-box { right: 8px; bottom: 4px; }
@media (max-width: 600px) {
	.nsb-widget .nsb-step-box-preview { padding-bottom: 25px; }
	.nsb-widget .nsb-step-box-preview > .nsb-order-box { right: 4px; bottom: 3px; }
}


/* Selected line on the 3D / fixed-wall preview (font & colour apply only to it) */
.nsb-widget .nsb-3d-lettering.nsb-line-selected { outline: 1px dashed rgba(255,255,255,.55); outline-offset: 3px; border-radius: 4px; }