/* ─────────────────────────────────────────────────────────────────────────────
   RC Name Decal Builder — Styles
   UI Fonts: Barlow Condensed (headings) + DM Mono (labels)

   SELF-HOST THESE FONTS for best performance:
   1. Go to https://gwfh.mranftl.com
   2. Search "Barlow Condensed", select weights 400/600/700/900, download .woff2
   3. Search "DM Mono", select weights 400/500, download .woff2
   4. Upload the .woff2 files to your server (e.g. /wp-content/themes/yourtheme/fonts/)
   5. Add @font-face rules to your theme's style.css pointing to those files
   6. OR add them via the WordPress Customizer > Additional CSS

   Until self-hosted, the plugin falls back to system sans-serif fonts.
   The customer-facing name preview uses fonts managed in the Fonts admin panel —
   those should always be self-hosted (.woff2 uploaded to media library).
───────────────────────────────────────────────────────────────────────────── */

/* ── Variables ─────────────────────────────────────────────────────────────── */
.dbb-wrap {
  --dbb-bg:         #0f1117;
  --dbb-surface:    #181c27;
  --dbb-surface-2:  #1f2436;
  --dbb-border:     #2a3048;
  --dbb-accent:     #e8ff00;
  --dbb-accent-dim: #b8cc00;
  --dbb-text:       #e8eaf0;
  --dbb-text-dim:   #7a8299;
  --dbb-success:    #00e07a;
  --dbb-error:      #ff4c60;
  --dbb-font-head:  'Barlow Condensed', sans-serif;
  --dbb-font-mono:  'DM Mono', monospace;
  --dbb-radius:     4px;
  --dbb-transition: 180ms ease;

  font-family:   var(--dbb-font-mono);
  background:    var(--dbb-bg);
  color:         var(--dbb-text);
  border-radius: 8px;
  overflow:      visible;
  max-width:     100%;
  width:         100%;
  border:        1px solid var(--dbb-border);
  box-shadow:    0 20px 60px rgba(0,0,0,.55);
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.dbb-header {
  position:      relative;
  padding:       36px 40px 28px;
  background:    var(--dbb-surface);
  border-bottom: 1px solid var(--dbb-border);
  overflow:      hidden;
}

.dbb-header-accent {
  position:      absolute;
  top: -40px; right: -40px;
  width:         200px;
  height:        200px;
  background:    var(--dbb-accent);
  border-radius: 50%;
  opacity:       .06;
  pointer-events: none;
}

.dbb-title {
  font-family:    var(--dbb-font-head) !important;
  font-size:      clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight:    900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color:          var(--dbb-text) !important;
  margin:         0 0 6px !important;
  line-height:    1 !important;
}

.dbb-title::after {
  content:    '';
  display:    block;
  width:      40px;
  height:     3px;
  background: var(--dbb-accent);
  margin-top: 10px;
}

.dbb-subtitle {
  font-size:      .78rem;
  color:          var(--dbb-text-dim);
  margin:         14px 0 0;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dbb-header-content { margin-top: 12px; }

/* ── Prevent right-click / drag on SVGs ────────────────────────────────────── */
#dbb-wrap img {
  -webkit-user-drag: none;
  user-drag:         none;
  pointer-events:    none;
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
.dbb-actions {
  padding:     20px 40px 28px;
  background:  var(--dbb-bg);
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

/* ── Quantity control ───────────────────────────────────────────────────────── */
.dbb-qty-wrap {
  display:     flex;
  align-items: center;
  border:      1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  overflow:    hidden;
  background:  var(--dbb-surface-2);
  flex-shrink: 0;
}

.dbb-qty-btn {
  background:  transparent;
  border:      none;
  color:       var(--dbb-text);
  font-size:   1.2rem;
  width:       36px;
  height:      48px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background var(--dbb-transition), color var(--dbb-transition);
  flex-shrink: 0;
  line-height: 1;
}

.dbb-qty-btn:hover {
  background: rgba(255,255,255,.08);
  color:      var(--dbb-accent);
}

.dbb-qty-input {
  width:        48px;
  height:       48px;
  border:       none;
  border-left:  1px solid var(--dbb-border);
  border-right: 1px solid var(--dbb-border);
  background:   transparent;
  color:        var(--dbb-text);
  font-family:  var(--dbb-font-mono);
  font-size:    1rem;
  text-align:   center;
  padding:      0;
  -moz-appearance: textfield;
  outline:      none;
}

.dbb-qty-input::-webkit-outer-spin-button,
.dbb-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dbb-qty-input:focus { color: var(--dbb-accent); }

.dbb-qty-label {
  font-family:    var(--dbb-font-head);
  font-size:      1.05rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--dbb-text-dim);
  padding:        0 10px 0 14px;
  white-space:    nowrap;
}

/* ── Qty disabled state during submission ───────────────────────────────────── */
#dbb-qty:disabled,
#dbb-qty-down:disabled,
#dbb-qty-up:disabled {
  opacity:        0.4;
  pointer-events: none;
  cursor:         not-allowed;
}

/* ── Add to Cart button ────────────────────────────────────────────────────── */
.dbb-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        14px 32px;
  font-family:    var(--dbb-font-head);
  font-size:      1.05rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border:         2px solid var(--dbb-border);
  border-radius:  var(--dbb-radius);
  background:     transparent;
  color:          var(--dbb-text-dim);
  cursor:         not-allowed;
  transition:     all var(--dbb-transition);
  position:       relative;
  overflow:       hidden;
}

.dbb-btn--primary.dbb-btn--ready {
  background:   var(--dbb-accent);
  border-color: var(--dbb-accent);
  color:        #000;
  cursor:       pointer;
  box-shadow:   0 4px 24px rgba(232,255,0,.3);
}

.dbb-btn--primary.dbb-btn--ready:hover {
  background:   var(--dbb-accent-dim);
  border-color: var(--dbb-accent-dim);
  box-shadow:   0 6px 32px rgba(232,255,0,.45);
  transform:    translateY(-1px);
}

.dbb-btn--primary.dbb-btn--ready:active { transform: translateY(0); }

/* ── Message ───────────────────────────────────────────────────────────────── */
.dbb-message {
  margin:        0 40px 24px;
  padding:       12px 16px;
  border-radius: var(--dbb-radius);
  font-size:     .82rem;
}

.dbb-message--success {
  background: rgba(0,224,122,.12);
  border:     1px solid rgba(0,224,122,.35);
  color:      var(--dbb-success);
}

.dbb-message--error {
  background: rgba(255,76,96,.12);
  border:     1px solid rgba(255,76,96,.35);
  color:      var(--dbb-error);
}

.dbb-message a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ── Custom size picker ────────────────────────────────────────────────────── */
.dbb-size-picker {
  position: relative;
  width:    100%;
}

.dbb-size-display {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--dbb-surface-2);
  border:          1px solid var(--dbb-border);
  border-radius:   var(--dbb-radius);
  padding:         11px 12px;
  min-height:      52px;
  cursor:          pointer;
  box-sizing:      border-box;
  transition:      border-color var(--dbb-transition), box-shadow var(--dbb-transition);
  user-select:     none;
}

.dbb-size-display:hover,
.dbb-size-picker.is-open .dbb-size-display {
  border-color: var(--dbb-accent);
  box-shadow:   0 0 0 2px rgba(232,255,0,.15);
}

.dbb-size-display-text {
  font-family: var(--dbb-font-mono);
  font-size:   .82rem;
  color:       var(--dbb-text-dim);
}

.dbb-size-picker.has-value .dbb-size-display-text { color: var(--dbb-text); }

.dbb-size-arrow {
  color:     var(--dbb-text-dim);
  font-size: .85rem;
  transition: transform var(--dbb-transition), color var(--dbb-transition);
}

.dbb-size-picker.is-open .dbb-size-arrow {
  transform: rotate(180deg);
  color:     var(--dbb-accent);
}

.dbb-size-dropdown {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--dbb-surface-2);
  border:        1px solid var(--dbb-accent);
  border-radius: var(--dbb-radius);
  z-index:       9999;
  list-style:    none;
  margin:        0;
  padding:       4px 0;
  max-height:    240px;
  overflow-y:    auto;
  box-shadow:    0 8px 24px rgba(0,0,0,.35);
}

.dbb-size-option {
  font-family: var(--dbb-font-mono);
  font-size:   .82rem;
  color:       var(--dbb-text);
  padding:     9px 14px;
  cursor:      pointer;
  transition:  background var(--dbb-transition), color var(--dbb-transition);
}

.dbb-size-option:hover { background: var(--dbb-accent); color: #000; }
.dbb-size-option.is-selected { color: var(--dbb-accent); font-weight: 500; }

/* ── Color Customizer ────────────────────────────────────────────────────────── */
.dbb-color-body {
  display:     flex;
  align-items: center;
  gap:         32px;
}

.dbb-color-price {
  font-family: var(--dbb-font-head);
  font-size:   1.4rem;
  font-weight: 900;
  color:       var(--dbb-accent);
}

.dbb-price-breakdown {
  font-size:   .7rem;
  font-weight: 400;
  color:       var(--dbb-text-dim);
  font-family: var(--dbb-font-mono);
  margin-left: 6px;
}

/* ── Sample SVG preview ───────────────────────────────────────────────────── */
.dbb-color-preview-wrap { flex-shrink: 0; }

.dbb-sample-label {
  font-family:    var(--dbb-font-mono);
  font-size:      .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--dbb-text-dim);
  margin-bottom:  8px;
}

#dbb-sample-svg-wrap {
  position: relative;
  width:    495px;
  display:  block;
}

#dbb-sample-svg-wrap svg { display: block; width: 100%; height: auto; }

#dbb-sample-svg-wrap svg.dbb-layer-outline2 { position: relative; }
#dbb-sample-svg-wrap svg.dbb-layer-outline1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#dbb-sample-svg-wrap svg.dbb-layer-main     { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#dbb-sample-svg-wrap svg path { transition: fill .25s ease; }

/* ── Color select rows ─────────────────────────────────────────────────────── */
.dbb-color-selects {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.dbb-color-row { display: flex; align-items: center; gap: 16px; }

.dbb-color-row-label {
  font-size:      .7rem;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--dbb-text-dim);
  display:        block;
  flex-shrink:    0;
  width:          120px;
}

.dbb-color-req {
  color:          var(--dbb-accent);
  font-size:      .9em;
  letter-spacing: .04em;
  text-transform: none;
}

.dbb-color-select-wrap { flex: 1; min-width: 0; }

/* ── Custom color picker dropdown ─────────────────────────────────────────── */
.dbb-cpicker { position: relative; }

.dbb-cpicker-display {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 12px;
  background:    var(--dbb-surface-2);
  border:        1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  cursor:        pointer;
  user-select:   none;
  transition:    border-color var(--dbb-transition), box-shadow var(--dbb-transition);
  min-height:    48px;
}

.dbb-cpicker-display:hover,
.dbb-cpicker.is-open .dbb-cpicker-display {
  border-color: var(--dbb-accent);
  box-shadow:   0 0 0 2px rgba(232,255,0,.15);
}

.dbb-cpicker-swatch {
  width:         24px;
  height:        24px;
  border-radius: 4px;
  border:        1px solid rgba(255,255,255,.15);
  flex-shrink:   0;
  display:       block;
  transition:    background .2s ease;
}

.dbb-cpicker-text {
  flex:        1;
  font-size:   .82rem;
  color:       var(--dbb-text-dim);
  font-family: var(--dbb-font-mono);
}

.dbb-cpicker.has-value .dbb-cpicker-text { color: var(--dbb-text); }

.dbb-cpicker-arrow {
  font-size:  .85rem;
  color:      var(--dbb-text-dim);
  transition: transform var(--dbb-transition);
}

.dbb-cpicker.is-open .dbb-cpicker-arrow { transform: rotate(180deg); color: var(--dbb-accent); }

.dbb-cpicker-list {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--dbb-surface-2);
  border:        1px solid var(--dbb-accent);
  border-radius: var(--dbb-radius);
  z-index:       9999;
  list-style:    none;
  margin:        0;
  padding:       4px 0;
  max-height:    260px;
  overflow-y:    auto;
  box-shadow:    0 8px 24px rgba(0,0,0,.35);
}

.dbb-cpicker-option {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     9px 14px;
  cursor:      pointer;
  transition:  background var(--dbb-transition);
}

.dbb-cpicker-option:hover:not(.is-disabled) { background: rgba(255,255,255,.06); }
.dbb-cpicker-option.is-disabled { opacity: .35; cursor: not-allowed; }

.dbb-cpicker-opt-swatch {
  width:         20px;
  height:        20px;
  border-radius: 3px;
  flex-shrink:   0;
  display:       block;
  border:        1px solid rgba(255,255,255,.1);
}

.dbb-cpicker-opt-name { font-size: .82rem; color: var(--dbb-text); font-family: var(--dbb-font-mono); }
.dbb-cpicker-upcharge { font-size: .7rem; color: var(--dbb-accent); margin-left: 6px; }
.dbb-cpicker-incompat { font-size: .7rem; color: var(--dbb-error); }

/* Color picker responsive */
@media (max-width: 620px) {
  .dbb-color-body    { flex-direction: column; }
  .dbb-color-row     { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dbb-color-row-label { width: auto; }
  #dbb-sample-svg-wrap { width: 100%; }
}

/* ── 4-Step Layout ──────────────────────────────────────────────────────────── */
.dbb-step {
  border:        1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  margin-bottom: 16px;
  background:    var(--dbb-surface);
  transition:    opacity .3s ease, filter .3s ease;
  overflow:      visible;
}

.dbb-step--locked {
  opacity:        .45;
  pointer-events: none;
  user-select:    none;
  filter:         grayscale(30%);
}

.dbb-step-header {
  display:       flex;
  align-items:   center;
  gap:           16px;
  padding:       16px 24px;
  border-bottom: 1px solid var(--dbb-border);
}

.dbb-step--locked .dbb-step-header { border-bottom-color: transparent; }

.dbb-step-number {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--dbb-accent);
  color:           #000;
  font-family:     var(--dbb-font-head);
  font-size:       1.1rem;
  font-weight:     800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.dbb-step--locked .dbb-step-number { background: var(--dbb-border); color: var(--dbb-text-dim); }
.dbb-step-title-wrap { flex: 1; }

.dbb-step-title {
  font-family:    var(--dbb-font-head) !important;
  font-size:      1.35rem !important;
  font-weight:    800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--dbb-text) !important;
  margin:         0 0 2px !important;
}

.dbb-step-subtitle { font-size: .8rem; color: var(--dbb-text-dim); margin: 0; }
.dbb-step-body     { padding: 20px 24px; }

/* Step 4 price */
.dbb-step4-price  { margin-bottom: 16px; font-family: var(--dbb-font-head); }
.dbb-step4-total  { font-size: 1.3rem; font-weight: 700; color: var(--dbb-accent); letter-spacing: .05em; }

/* Step 2 color body inside step */
#dbb-step-2 .dbb-color-body { padding-top: 0; }

/* ── Step 1 Custom Set Picker ───────────────────────────────────────────────── */
.dbb-set-picker   { position: relative; max-width: 480px; }
.dbb-set-select-wrap { max-width: 480px; }

.dbb-set-display {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  background:      var(--dbb-surface-2);
  border:          1px solid var(--dbb-border);
  border-radius:   var(--dbb-radius);
  cursor:          pointer;
  user-select:     none;
  min-height:      48px;
  transition:      border-color var(--dbb-transition), box-shadow var(--dbb-transition);
  outline:         none;
}

.dbb-set-display:hover,
.dbb-set-picker.is-open .dbb-set-display {
  border-color: var(--dbb-accent);
  box-shadow:   0 0 0 2px rgba(232,255,0,.12);
}

.dbb-set-text {
  font-size:     .85rem;
  color:         var(--dbb-text-dim);
  font-family:   var(--dbb-font-mono);
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.dbb-set-display.has-value .dbb-set-text { color: var(--dbb-text); }

.dbb-set-arrow {
  color:       var(--dbb-text-dim);
  font-size:   .85rem;
  flex-shrink: 0;
  transition:  transform var(--dbb-transition);
  margin-left: 8px;
}

.dbb-set-picker.is-open .dbb-set-arrow { transform: rotate(180deg); color: var(--dbb-accent); }

.dbb-set-panel {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    #1e1e2e;
  border:        1px solid var(--dbb-accent);
  border-radius: var(--dbb-radius);
  z-index:       99999;
  box-shadow:    0 8px 28px rgba(0,0,0,.6);
  overflow:      hidden;
}

.dbb-set-option {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px;
  cursor:          pointer;
  color:           #e0e0e0;
  font-family:     var(--dbb-font-mono);
  font-size:       .85rem;
  transition:      background .15s;
  border-bottom:   1px solid rgba(255,255,255,.06);
}

.dbb-set-option:last-child  { border-bottom: none; }
.dbb-set-option:hover       { background: rgba(255,255,255,.07); }
.dbb-set-option.is-selected { color: var(--dbb-accent); background: rgba(232,255,0,.06); }

.dbb-set-option-name { flex: 1; }

.dbb-set-option-price {
  font-size:   .9rem;
  font-weight: 700;
  color:       var(--dbb-accent);
  flex-shrink: 0;
  margin-left: 12px;
}

/* ── Order Summary ── */
.dbb-order-summary {
  border:        1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  background:    var(--dbb-surface);
  margin-top:    16px;
}

.dbb-sum--empty  { opacity: .5; }

.dbb-sum-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 20px;
  background:      var(--dbb-surface-2);
  border-bottom:   1px solid var(--dbb-border);
}

.dbb-sum-title {
  font-family:    var(--dbb-font-head);
  font-size:      .8rem;
  font-weight:    800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--dbb-accent);
}

.dbb-sum-status { font-size: .75rem; color: var(--dbb-text-dim); font-family: var(--dbb-font-mono); }

.dbb-sum-section {
  padding:       12px 20px;
  border-bottom: 1px solid var(--dbb-border);
}

.dbb-sum-section-label {
  font-size:      .65rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--dbb-text-dim);
  margin-bottom:  8px;
}

.dbb-sum-footer {
  padding:         12px 20px;
  background:      var(--dbb-surface-2);
  border-top:      1px solid var(--dbb-border);
  display:         flex;
  justify-content: flex-end;
}

.dbb-sum-empty { font-size: .8rem; color: #3a3a4e; font-style: italic; }

.dbb-sum-set-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--dbb-surface-2); border: 1px solid var(--dbb-border); border-radius: var(--dbb-radius); padding: 6px 12px; }
.dbb-sum-set-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--dbb-accent); flex-shrink: 0; }
.dbb-sum-set-name  { font-size: .82rem; color: var(--dbb-text); }
.dbb-sum-set-price { font-size: .82rem; font-weight: 700; color: var(--dbb-accent); margin-left: 4px; }

.dbb-sum-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.dbb-sum-color-row:last-child { margin-bottom: 0; }
.dbb-sum-swatch      { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); }
.dbb-sum-color-label { font-size: .75rem; color: var(--dbb-text-dim); width: 110px; flex-shrink: 0; white-space: nowrap; }
.dbb-sum-color-name  { flex: 1; font-size: .82rem; color: var(--dbb-text); font-family: var(--dbb-font-mono); }

.dbb-sum-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.dbb-sum-logo-row:last-child { margin-bottom: 0; }
.dbb-sum-logo-empty   { opacity: .35; }
.dbb-sum-logo-partial { opacity: .7; }
.dbb-sum-logo-info    { flex: 1; min-width: 0; }
.dbb-sum-logo-name    { display: block; font-size: .82rem; color: var(--dbb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--dbb-font-mono); }
.dbb-sum-logo-size    { font-size: .72rem; color: var(--dbb-text-dim); }

.dbb-sum-check { width: 16px; height: 16px; border-radius: 50%; background: var(--dbb-accent); color: #000; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Start Over button + Modal ──────────────────────────────────────────────── */
.dbb-start-over-btn {
  background:     transparent;
  border:         1px solid var(--dbb-border);
  border-radius:  var(--dbb-radius);
  color:          var(--dbb-text-dim);
  font-family:    var(--dbb-font-head);
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: .06em;
  padding:        10px 24px;
  cursor:         pointer;
  transition:     all var(--dbb-transition);
}
.dbb-start-over-btn:hover { border-color: #e00; color: #e00; }

.dbb-modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.65);
  z-index:         999999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  visibility:      hidden;
  pointer-events:  none;
}
.dbb-modal-backdrop.is-open { visibility: visible; pointer-events: all; }

.dbb-modal {
  background:    #1a1a2e;
  border:        1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  padding:       28px 32px;
  max-width:     380px;
  width:         100%;
  box-shadow:    0 20px 60px rgba(0,0,0,.6);
}

.dbb-modal-title {
  font-family:    var(--dbb-font-head);
  font-size:      1.15rem;
  font-weight:    800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--dbb-text);
  margin-bottom:  12px;
}

.dbb-modal-body    { font-size: .88rem; color: var(--dbb-text-dim); line-height: 1.6; margin-bottom: 24px; }
.dbb-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.dbb-modal-cancel {
  background: transparent; border: 1px solid var(--dbb-border);
  border-radius: var(--dbb-radius); color: var(--dbb-text-dim);
  font-family: var(--dbb-font-head); font-size: .82rem; font-weight: 700;
  padding: 8px 18px; cursor: pointer; transition: all var(--dbb-transition);
}
.dbb-modal-cancel:hover { border-color: var(--dbb-text-dim); color: var(--dbb-text); }

.dbb-modal-confirm {
  background: #cc0033; border: 1px solid #cc0033;
  border-radius: var(--dbb-radius); color: #fff;
  font-family: var(--dbb-font-head); font-size: .82rem; font-weight: 700;
  padding: 8px 18px; cursor: pointer; transition: all var(--dbb-transition);
}
.dbb-modal-confirm:hover { background: #e00039; border-color: #e00039; }

/* Global responsive header/actions padding */
@media (max-width: 560px) {
  .dbb-header,
  .dbb-actions,
  .dbb-message { padding-left: 18px; padding-right: 18px; }
}

/* Sample SVG responsive */
@media (max-width: 600px) {
  #dbb-sample-svg-wrap { width: 100%; }
}

/* Landscape: constrain color preview */
@media (max-width: 860px) and (orientation: landscape) {
  .dbb-color-body { flex-wrap: wrap; }
  .dbb-color-preview-wrap { width: 100%; }
  #dbb-sample-svg-wrap { width: 100%; max-width: 300px; }
}

/* ══════════════════════════════════════════════════════════════════
   STEP 3 — NAME DECAL CONFIGURATOR
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────── */
.dbb-name-body {
  display:     flex;
  gap:         32px;
  align-items: flex-start;
}

.dbb-name-inputs {
  flex:           0 0 360px;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.dbb-name-preview-wrap {
  flex:          1 1 0;
  min-width:     0;
  background:    var(--dbb-surface);
  border:        1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  overflow:      visible;
  display:       flex;
  flex-direction: column;
}

/* Preview header bar (reuses existing classes) */
.dbb-preview-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  background:      var(--dbb-surface-2);
  border-bottom:   1px solid var(--dbb-border);
}

.dbb-preview-label {
  font-family:    var(--dbb-font-head);
  font-size:      .75rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--dbb-text-dim);
}

.dbb-preview-hint {
  font-size:  .68rem;
  color:      var(--dbb-text-dim);
  font-style: italic;
}

/* ── Name input field ─────────────────────────────────────────────── */
.dbb-name-field-wrap {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  position:       relative;
}

.dbb-name-label {
  font-family:    var(--dbb-font-head);
  font-size:      .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--dbb-text-dim);
}

.dbb-name-input {
  width:       100%;
  box-sizing:  border-box;
  background:  var(--dbb-surface);
  border:      1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  color:       var(--dbb-text);
  font-size:   1.1rem;
  padding:     10px 44px 10px 12px;
  outline:     none;
  transition:  border-color var(--dbb-transition), box-shadow var(--dbb-transition);
  font-family: inherit;
}

.dbb-name-input:focus {
  border-color: var(--dbb-accent);
  box-shadow:   0 0 0 2px rgba(232,255,0,.15);
}

.dbb-name-input::placeholder { color: var(--dbb-text-dim); opacity: .6; }

.dbb-name-charcount {
  position:       absolute;
  right:          10px;
  bottom:         10px;
  font-size:      .72rem;
  color:          var(--dbb-text-dim);
  font-family:    var(--dbb-font-mono);
  pointer-events: none;
}

/* ── Font picker ──────────────────────────────────────────────────── */
.dbb-font-picker { position: relative; }

.dbb-font-display {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  background:      var(--dbb-surface);
  border:          1px solid var(--dbb-border);
  border-radius:   var(--dbb-radius);
  padding:         10px 12px;
  cursor:          pointer;
  user-select:     none;
  transition:      border-color var(--dbb-transition);
  min-height:      44px;
}

.dbb-font-picker.is-open .dbb-font-display,
.dbb-font-picker.has-value .dbb-font-display { border-color: var(--dbb-accent); }

.dbb-font-display-text { flex: 1; color: var(--dbb-text); font-size: 1rem; }
.dbb-font-picker:not(.has-value) .dbb-font-display-text { color: var(--dbb-text-dim); }

.dbb-font-arrow {
  color:      var(--dbb-text-dim);
  font-size:  .75rem;
  transition: transform var(--dbb-transition);
}

.dbb-font-picker.is-open .dbb-font-arrow { transform: rotate(180deg); }

.dbb-font-panel {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--dbb-surface-2);
  border:        1px solid var(--dbb-border);
  border-radius: var(--dbb-radius);
  z-index:       200;
  max-height:    260px;
  overflow-y:    auto;
  box-shadow:    0 8px 24px rgba(0,0,0,.35);
}

.dbb-font-option {
  padding:       10px 14px;
  cursor:        pointer;
  color:         var(--dbb-text);
  border-bottom: 1px solid var(--dbb-border);
  transition:    background var(--dbb-transition);
  line-height:   1.3;
}

.dbb-font-option:last-child { border-bottom: none; }
.dbb-font-option:hover      { background: rgba(232,255,0,.08); }
.dbb-font-option.is-selected { background: rgba(232,255,0,.14); color: var(--dbb-accent); }
.dbb-font-option--empty { color: var(--dbb-text-dim); font-style: italic; cursor: default; font-size: .9rem; }

/* ── Name size picker — extends base size picker ─────────────────── */
.dbb-name-size-picker            { width: 100%; }
.dbb-name-size-picker .dbb-size-display { min-height: 44px; padding: 10px 12px; }

/* ── Live preview stage ───────────────────────────────────────────── */
.dbb-name-preview-stage {
  position:   relative;
  width:      100%;
  height:     300px;
  background: #1a1a2e;
  border-radius: 0 0 var(--dbb-radius) var(--dbb-radius);
  overflow:   hidden;
}

.dbb-name-preview-empty {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  color:          var(--dbb-text-dim);
  font-size:      .9rem;
  text-align:     center;
  pointer-events: none;
  white-space:    nowrap;
}

.dbb-name-svg {
  display:    block;
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  overflow:   visible;
}

/* ── Preview disclaimer ───────────────────────────────────────────── */
.dbb-preview-disclaimer {
  margin:      6px 0 0;
  font-size:   .68rem;
  color:       var(--dbb-text-dim);
  font-style:  italic;
  text-align:  center;
  line-height: 1.4;
  opacity:     .7;
}

/* ── Order summary name decal row ────────────────────────────────── */
.dbb-sum-logo-num {
  font-size:  1.2em;
  line-height: 1;
  color:      var(--dbb-text-dim);
  flex-shrink: 0;
  width:      24px;
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .dbb-name-body { flex-direction: column; }
  .dbb-name-inputs { flex: none; width: 100%; }
  .dbb-name-preview-wrap { width: 100%; flex: none; }
  .dbb-name-preview-stage { height: 260px; }
}

@media (max-width: 560px) {
  .dbb-name-preview-stage { height: 200px; }
  .dbb-name-input { font-size: 1rem; }
}

/* ── Icon picker ──────────────────────────────────────────────────── */
.dbb-icon-picker { position: relative; }

.dbb-icon-dropdown {
  max-height: 280px;
  overflow-y: auto;
}

.dbb-icon-dropdown .dbb-icon-group-header {
  padding:       6px 12px;
  font-size:     11px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:         var(--dbb-text-muted);
  background:    var(--dbb-surface);
  border-bottom: 1px solid var(--dbb-border);
  cursor:        default;
}

.dbb-icon-option {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     8px 12px;
  cursor:      pointer;
}

.dbb-icon-option:hover { background: var(--dbb-hover); }
.dbb-icon-option.is-selected { background: var(--dbb-accent-dim); }

.dbb-icon-option img {
  width:      36px;
  height:     36px;
  object-fit: contain;
  flex-shrink: 0;
}

.dbb-icon-picker--disabled .dbb-size-display {
  opacity: 0.45;
  cursor:  not-allowed;
  pointer-events: none;
}

.dbb-icon-picker--disabled .dbb-size-display-text {
  font-style: italic;
}

.dbb-icon-upcharge-label {
  font-size:   0.85em;
  font-weight: normal;
  color:       var(--dbb-accent);
  margin-left: 4px;
}