/**
 * Configurateur de néon. S'appuie sur les jetons du thème quand il est actif,
 * avec des valeurs de repli pour rester lisible ailleurs.
 */

.dg-neon-app {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--dg-s-6, 40px);
  align-items: start;
}

.dg-neon-app__preview { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; }

.dg-neon-stage {
  position: relative; overflow: hidden;
  display: grid; place-items: center; min-height: 360px; padding: 48px 28px;
  background:
    radial-gradient(520px 260px at 50% 42%, var(--dg-neon-glow, rgba(57, 255, 106, .16)), transparent 72%),
    linear-gradient(180deg, var(--dg-surface, #0D1211) 0%, #080B0A 100%);
  border: 1px solid var(--dg-line, #1F2825);
  border-radius: var(--dg-r-lg, 14px);
}

/* Trame discrete : le neon a besoin d'un mur pour se lire comme un objet pose. */
.dg-neon-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}

.dg-neon-stage__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dg-faint, #7E8C86); }

.dg-neon-preview {
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
  transition: color .2s ease, text-shadow .2s ease;
}
.dg-neon-preview.is-placeholder { opacity: .3; }
.dg-neon-preview { position: relative; z-index: 1; }

/* Reflet : la meme chaine, retournee et estompee sous le texte. */
.dg-neon-reflect {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 0;
  margin-top: 10px; padding: 0 28px;
  font-size: clamp(26px, 4vw, 46px); line-height: 1.15; text-align: center;
  word-break: break-word; pointer-events: none; user-select: none;
  transform: scaleY(-.6); transform-origin: top center;
  opacity: .16; filter: blur(3px);
  mask-image: linear-gradient(#000, transparent 70%);
  -webkit-mask-image: linear-gradient(#000, transparent 70%);
}

.dg-neon-app__controls { display: flex; flex-direction: column; gap: var(--dg-s-4, 22px); }
.dg-neon-field { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dg-s-2, 9px); }
.dg-neon-field > label,
.dg-neon-field > legend {
  padding: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dg-faint, #7E8C86);
}

.dg-neon-field input[type="text"] {
  width: 100%; padding: 13px 15px;
  background: var(--dg-surface-2, #101615);
  border: 1px solid var(--dg-line-strong, #2A3531);
  border-radius: var(--dg-r, 11px);
  color: var(--dg-ink, #FFF); font-family: inherit; font-size: 16px;
}
.dg-neon-field input[type="text"]:focus { outline: 2px solid var(--dg-accent, #39FF6A); outline-offset: 2px; }
.dg-neon-count { margin: 0; font-size: 12px; color: var(--dg-faint, #7E8C86); font-variant-numeric: tabular-nums; }

.dg-neon-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.dg-neon-font input,
.dg-neon-color input,
.dg-neon-size input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-neon-font span,
.dg-neon-size span {
  display: block; padding: 12px 10px; text-align: center; cursor: pointer;
  background: var(--dg-surface-2, #101615);
  border: 1px solid var(--dg-line-strong, #2A3531);
  border-radius: var(--dg-r-sm, 7px);
  color: var(--dg-ink, #FFF); font-size: 15px;
}
/* Les polices fines — Megrim, Sacramento — se lisent mal en petit sur fond
   sombre : la vignette montre le rendu, encore faut-il pouvoir le lire. */
.dg-neon-font span { font-size: 17px; line-height: 1.25; }
.dg-neon-font input:checked + span,
.dg-neon-size input:checked + span { border-color: var(--dg-accent, #39FF6A); color: var(--dg-accent, #39FF6A); }
.dg-neon-font input:focus-visible + span,
.dg-neon-size input:focus-visible + span { outline: 2px solid var(--dg-accent, #39FF6A); outline-offset: 3px; }

.dg-neon-colors { display: flex; gap: 12px; flex-wrap: wrap; }
.dg-neon-color { display: inline-flex; cursor: pointer; }
.dg-neon-swatch {
  display: block; width: 36px; height: 36px; border-radius: 50%;
  background: var(--dg-neon-swatch);
  box-shadow:
    0 0 0 2px var(--dg-surface, #0D1211),
    0 0 0 3px transparent,
    0 0 16px var(--dg-neon-swatch);
  transition: box-shadow .18s ease, transform .18s ease;
}
.dg-neon-color:hover .dg-neon-swatch { transform: translateY(-2px); }
.dg-neon-color input:checked + .dg-neon-swatch {
  box-shadow:
    0 0 0 2px var(--dg-surface, #0D1211),
    0 0 0 3px #FFF,
    0 0 22px var(--dg-neon-swatch);
}
.dg-neon-color input:focus-visible + .dg-neon-swatch {
  outline: 2px solid var(--dg-accent, #39FF6A); outline-offset: 4px;
}

/* Valeur retenue, rappelee a cote du libelle du champ. */
.dg-neon-choice {
  margin-left: 8px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--dg-ink-3, #C6D0CB);
}

.dg-neon-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.dg-neon-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: var(--dg-s-3, 14px); border-top: 1px solid var(--dg-line, #1F2825);
}
.dg-neon-price { margin: 0; font-size: 26px; font-weight: 700; color: var(--dg-accent, #39FF6A); font-variant-numeric: tabular-nums; }
.dg-neon-price small { display: block; font-size: 12px; font-weight: 400; color: var(--dg-faint, #7E8C86); }
.dg-neon-detail { color: var(--dg-ink-3, #C6D0CB) !important; margin-top: 3px; }
.dg-neon-submit { flex: 0 0 auto; }
.dg-neon-note { margin: 0; font-size: 13px; color: var(--dg-faint, #7E8C86); }

.dg-neon-admin-note {
  padding: 14px 16px; border: 1px dashed var(--dg-warn, #FFB53D);
  border-radius: 8px; color: var(--dg-warn, #FFB53D); font-size: 14px;
}

/* Aperçu réduit, utilisé dans le panier et la commande. */
.dg-neon-thumb { display: inline-block; font-size: 18px; line-height: 1.2; }

@media (max-width: 860px) {
  .dg-neon-app { grid-template-columns: 1fr; }
  .dg-neon-app__preview { position: static; }
  .dg-neon-stage { min-height: 240px; padding: 34px 20px; }
  .dg-neon-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-neon-footer { flex-direction: column; align-items: stretch; }
  .dg-neon-submit { width: 100%; }
}