:root {
  --neon-bg: #0b0b12;
  --neon-surface: #16161f;
  --neon-text: #f5f5f7;
  --neon-muted: #9a9aa5;
  --neon-accent: #ff2fd0;
  --neon-accent-2: #2fe4ff;
  --neon-danger: #ff5a5a;
  --neon-radius: 14px;
  --neon-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* app_settings.theme_mode, applied as a data attribute on #neon-designer by
   widget.js — accent colours (primary/secondary) stay the same in both
   modes, only the base surface/text pairing flips. */
#neon-designer[data-theme="light"] {
  --neon-bg: #ffffff;
  --neon-surface: #f2f2f5;
  --neon-text: #16161f;
  --neon-muted: #6b6b76;
}

#neon-designer {
  position: fixed;
  inset: 0;
  background: var(--neon-bg);
  color: var(--neon-text);
  font-family: var(--neon-font);
  display: flex;
  flex-direction: column;
  z-index: 999999;
}

#neon-designer * {
  box-sizing: border-box;
}

#neon-designer.neon-closed {
  display: none;
}

.neon-progress {
  display: flex;
  gap: 6px;
  padding: 16px 20px 0;
}

.neon-progress-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #2a2a35;
  transition: background 0.25s ease;
}

.neon-progress-dot.neon-active,
.neon-progress-dot.neon-done {
  background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-2));
}

/* app_settings.use_gradient toggled off — solid primary-colour fallback for
   every spot that otherwise uses the accent/accent-2 gradient. */
#neon-designer.neon-no-gradient .neon-progress-dot.neon-active,
#neon-designer.neon-no-gradient .neon-progress-dot.neon-done {
  background: var(--neon-accent);
}

.neon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

.neon-back-btn {
  background: none;
  border: none;
  color: var(--neon-muted);
  font-size: 15px;
  padding: 8px 4px;
  cursor: pointer;
}

.neon-back-btn:disabled {
  visibility: hidden;
}

.neon-beta-badge {
  background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-2));
  color: #0b0b12;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

#neon-designer.neon-no-gradient .neon-beta-badge {
  background: var(--neon-accent);
}

.neon-close-btn {
  background: none;
  border: none;
  color: var(--neon-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.neon-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 24px 32px;
  display: flex;
  flex-direction: column;
}

.neon-step {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 24px;
}

.neon-step h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

.neon-step p.neon-sub {
  color: var(--neon-muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.neon-section-heading {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.neon-choice-grid {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

/* Side-by-side on wider viewports; stacked (thumb-friendly) below that —
   this widget is heavily mobile-first, so single-column stays the
   default rather than the enhancement. */
@media (min-width: 480px) {
  .neon-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.neon-choice-card {
  /* Gradient border via the padding-box/border-box double-background
     trick — a plain `border` can't take a gradient directly. */
  background: linear-gradient(var(--neon-surface), var(--neon-surface)) padding-box,
    linear-gradient(135deg, var(--neon-accent), var(--neon-accent-2)) border-box;
  border: 2px solid transparent;
  border-radius: var(--neon-radius);
  padding: 22px 20px;
  text-align: left;
  color: var(--neon-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.1s ease;
}

.neon-choice-card:active {
  transform: scale(0.98);
}

.neon-choice-icon {
  width: 32px;
  height: 32px;
  color: var(--neon-accent);
}

.neon-choice-icon svg {
  width: 100%;
  height: 100%;
}

.neon-choice-title {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.neon-choice-card .neon-choice-desc {
  display: block;
  font-weight: 400;
  color: var(--neon-muted);
  font-size: 14px;
}

.neon-btn {
  background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-2));
  color: #0b0b12;
  border: none;
  border-radius: 999px;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

#neon-designer.neon-no-gradient .neon-btn {
  background: var(--neon-accent);
}

.neon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.neon-btn-secondary {
  background: transparent;
  color: var(--neon-text);
  border: 1px solid #34343f;
}

.neon-change-image-btn {
  width: auto;
  align-self: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: -6px;
}

.neon-upload-drop {
  border: 2px dashed #34343f;
  border-radius: var(--neon-radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--neon-muted);
  cursor: pointer;
}

.neon-upload-drop input {
  display: none;
}

.neon-crop-wrap {
  position: relative;
  background: #000;
  border-radius: var(--neon-radius);
  overflow: hidden;
  max-height: 45vh;
}

.neon-crop-wrap img {
  display: block;
  max-width: 100%;
}

.neon-lead-preview-thumb {
  display: block;
  max-width: 100%;
  max-height: 160px;
  border-radius: var(--neon-radius);
  background: #000;
  object-fit: contain;
}

/* Cropper.js 1.6.2 ships 5px hit boxes for every handle except the
   bottom-right corner (which it special-cases bigger on narrow screens) —
   every other edge/corner is genuinely hard to grab on mobile. `inset` on
   an absolutely-positioned ::after is relative to its own (tiny) parent
   box regardless of that parent's size, so this gives all 8 handles a
   uniform ~40px invisible touch target without changing anything visible. */
.cropper-line::after,
.cropper-point::after {
  content: "";
  position: absolute;
  inset: -18px;
}

.neon-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Draws the eye to the size slider before it's been touched — the default
   value (e.g. 80cm) already looks like a deliberate choice, so nothing
   about it visually suggests Continue is disabled until it's moved.
   Removed the moment the slider is actually touched (see
   markSizeConfirmed in widget.js), same "nudge, don't force" approach as
   the crop tutorial overlay. */
.neon-field-attention {
  position: relative;
  border-radius: 12px;
}

.neon-field-attention::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--neon-accent);
  border-radius: 14px;
  pointer-events: none;
  animation: neon-attention-pulse 1.6s ease-in-out infinite;
}

@keyframes neon-attention-pulse {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.015);
  }
}

.neon-field label {
  font-size: 13px;
  color: var(--neon-muted);
}

.neon-field input,
.neon-field select,
.neon-field textarea {
  background: var(--neon-surface);
  border: 1px solid #34343f;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--neon-text);
  font-size: 16px;
  font-family: inherit;
}

.neon-field textarea {
  resize: vertical;
  min-height: 70px;
}

.neon-field input[type="range"] {
  accent-color: var(--neon-accent);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
}

.neon-crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Deliberately opaque and theme-independent — this is a fixed dark
     spotlight over whatever image was uploaded, not part of the
     light/dark site theme, so it needs to stay legible over any image
     regardless of theme. */
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
  text-align: center;
  padding: 0 24px;
}

/* Hardcoded light colours, not theme CSS variables — var(--neon-text)
   flips to near-black in light mode, which is why this text was
   unreadable against the dark scrim above. The scrim's own contrast
   doesn't depend on site theme, so its text shouldn't either. */
.neon-crop-overlay-heading {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}

/* Wraps the heading itself as a live example of "this is your logo,
   here's the crop box around it" — white dashed border (not the app's
   usual dark border colour, which would vanish against this dark scrim),
   accent-coloured handles at each edge midpoint (accent colours don't
   change between light/dark theme, so always legible here), and a cursor
   that loops the perimeter without ever crossing the text in the middle. */
.neon-crop-overlay-demo {
  position: relative;
  border: 2px dashed #ffffff;
  border-radius: 8px;
  /* Vertical padding needs to clear the cursor emoji's actual rendered
     glyph box (noticeably taller than its font-size) at the top/bottom
     keyframe positions, confirmed by sampling getBoundingClientRect at
     each keyframe — 10px wasn't quite enough and let the cursor clip the
     heading text by a few px. */
  padding: 22px 28px;
  margin-bottom: 2px;
}

.neon-crop-overlay-demo-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--neon-accent);
  border-radius: 2px;
}

.neon-crop-overlay-demo-handle.left {
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
}

.neon-crop-overlay-demo-handle.right {
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
}

.neon-crop-overlay-demo-handle.top {
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
}

.neon-crop-overlay-demo-handle.bottom {
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
}

.neon-crop-overlay-demo-cursor {
  position: absolute;
  font-size: 18px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  animation: neon-crop-demo-move 4.8s ease-in-out infinite;
}

@keyframes neon-crop-demo-move {
  0%,
  20% {
    left: 100%;
    top: 50%;
  }
  25%,
  45% {
    left: 50%;
    top: 100%;
  }
  50%,
  70% {
    left: 0%;
    top: 50%;
  }
  75%,
  95% {
    left: 50%;
    top: 0%;
  }
  100% {
    left: 100%;
    top: 50%;
  }
}

.neon-crop-overlay-text {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.neon-crop-overlay-cta {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* Touch-vs-pointer wording swap — no JS device detection needed. */
.neon-crop-overlay-cta-pointer {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .neon-crop-overlay-cta-touch {
    display: none;
  }
  .neon-crop-overlay-cta-pointer {
    display: inline;
  }
}

.neon-row {
  display: flex;
  gap: 10px;
}

.neon-row > * {
  flex: 1;
  /* Flex items default to min-width:auto, which blocks shrinking below
     their content's intrinsic width — without this, a long value in one
     field (e.g. "Last name") pushes the row wider than the viewport
     instead of the fields sitting side by side on mobile. */
  min-width: 0;
}

.neon-phone-row {
  display: flex;
  gap: 8px;
}

.neon-phone-row select {
  flex: 0 0 auto;
  width: 40%;
}

.neon-phone-row input {
  flex: 1;
  min-width: 0;
}

.neon-unit-toggle {
  display: flex;
  border: 1px solid #34343f;
  border-radius: 10px;
  overflow: hidden;
}

.neon-unit-toggle button {
  flex: 1;
  background: var(--neon-surface);
  color: var(--neon-muted);
  border: none;
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
}

.neon-unit-toggle button.neon-active {
  background: var(--neon-accent);
  color: #0b0b12;
  font-weight: 700;
}

.neon-price-card {
  background: var(--neon-surface);
  border-radius: var(--neon-radius);
  padding: 24px;
  text-align: center;
}

.neon-price-range {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--neon-accent), var(--neon-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#neon-designer.neon-no-gradient .neon-price-range {
  background: none;
  color: var(--neon-accent);
}

.neon-below-min {
  background: var(--neon-surface);
  border-radius: var(--neon-radius);
  padding: 20px;
  color: var(--neon-muted);
  font-size: 15px;
  line-height: 1.5;
}

.neon-checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--neon-muted);
  line-height: 1.5;
}

.neon-checkbox-row input {
  margin-top: 3px;
}

.neon-error {
  color: var(--neon-danger);
  font-size: 13px;
}

.neon-loading {
  text-align: center;
  color: var(--neon-muted);
  padding: 40px 0;
}

.neon-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 0 32px;
}

.neon-ai-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #26262f;
  border-top-color: var(--neon-accent);
  animation: neon-ai-spin 0.9s linear infinite;
}

@keyframes neon-ai-spin {
  to {
    transform: rotate(360deg);
  }
}

.neon-ai-timebar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 260px;
  color: var(--neon-muted);
  font-size: 13px;
}

.neon-confirm-icon {
  font-size: 48px;
  text-align: center;
}