.gbf-wrap { max-width: 560px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gbf-stepper { display: flex; margin-bottom: 1.5rem; }
.gbf-s { flex: 1; text-align: center; font-size: 11px; color: #aaa; padding: .5rem; border-bottom: 2px solid #eee; }
.gbf-s.gbf-on { color: #1a2e1a; border-color: #c9a84c; font-weight: 700; }
.gbf-s.gbf-done { color: #2d7a3e; border-color: #2d7a3e; }
.gbf-panel { display: none; }
.gbf-panel:first-of-type { display: block; }
.gbf-card { background: #fff; border: 1px solid #e0dbd0; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.gbf-card h3 { margin: 0 0 1rem; color: #1a2e1a; font-size: 1.1rem; }
.gbf-field { margin-bottom: 1rem; }
.gbf-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: .25rem; color: #555; }
.gbf-field input, .gbf-field select { width: 100%; padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 4px; font-size: .9rem; }
.gbf-field input:focus, .gbf-field select:focus { border-color: #c9a84c; outline: none; }
.gbf-err { display: none; background: #ffeaea; border: 1px solid #f5c6c6; color: #b94040; padding: .6rem .75rem; border-radius: 4px; font-size: .85rem; margin-bottom: 1rem; }
.gbf-actions { display: flex; gap: .75rem; margin-top: 1rem; }
.gbf-btn { padding: .6rem 1.25rem; border-radius: 4px; border: none; font-size: .9rem; font-weight: 600; cursor: pointer; }
.gbf-btn-primary { background: #1a2e1a; color: #c9a84c; flex: 1; }
.gbf-btn-secondary { background: #f0ebe0; color: #1a2e1a; }
.gbf-review-row { display: flex; padding: .45rem 0; border-bottom: 1px solid #f5f0ea; font-size: .88rem; }
.gbf-review-row span:first-child { color: #888; width: 40%; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.gbf-ok { display: none; background: #1a2e1a; border-radius: 8px; padding: 2rem; text-align: center; color: #fff; }
.gbf-ok-icon { font-size: 3rem; color: #c9a84c; margin-bottom: .75rem; }
.gbf-ok h3 { color: #c9a84c; margin-bottom: .25rem; }
.gbf-ok p { color: rgba(255,255,255,.6); font-size: .85rem; }
.gbf-er { display: none; background: #ffeaea; border: 1px solid #f5c6c6; border-radius: 8px; padding: 1.5rem; text-align: center; }
.gbf-er p { color: #b94040; }
.gbf-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; margin-top: .5rem; }
.gbf-sb { padding: .5rem; border: 2px solid #eee; border-radius: 6px; text-align: center; cursor: pointer; font-size: .85rem; background: #fff; }
.gbf-sb.gbf-on { border-color: #c9a84c; background: #fffdf0; font-weight: 700; }
.gbf-sb:disabled { opacity: .5; cursor: not-allowed; }

/* ── Mobile responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gbf-wrap { padding: 0 4px; }

  /* Stepper wraps */
  #gbf-root > div[id^="gbf-s"] { font-size: 10px; padding: 6px 2px; }

  /* Form table stacks on mobile */
  .gbf-wrap .form-table th,
  .gbf-wrap .form-table td { display: block; width: 100%; padding: 4px 0; }
  .gbf-wrap .form-table th { padding-top: 10px; font-size: 12px; }
  .gbf-wrap .form-table td input,
  .gbf-wrap .form-table td select { width: 100% !important; }

  /* Review table */
  .gbf-wrap .widefat td { padding: .35rem .25rem; font-size: .82rem; }
  .gbf-wrap .widefat td:first-child { width: 44% !important; }

  /* Buttons full width */
  .gbf-btn, .gbf-btn-primary, button.button-primary, button.button {
    width: 100%; margin-bottom: 6px;
  }
  .gbf-actions { flex-direction: column; }

  /* Slot grid */
  .gbf-slots { grid-template-columns: repeat(3, 1fr) !important; }

  /* Success / error panels */
  .gbf-ok, .gbf-er { padding: 1.25rem .75rem; }
}

@media (max-width: 400px) {
  .gbf-slots { grid-template-columns: repeat(2, 1fr) !important; }
}