/* ====== Creator wizard (page-creador.php) ====== */
.pb-creator { padding: 48px 0 80px; }

.pb-creator-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.pb-creator-title { font-size: 42px; font-weight: 800; color: #111827; line-height: 1.1; margin: 12px 0 16px; }
.pb-creator-title .pb-red { color: #ef4444; }
.pb-creator-head p { color: #4b5563; font-size: 17px; line-height: 1.6; }

/* ---- Progress line ---- */
.pbc-progress { margin: 8px 0 48px; }
.pbc-line { position: relative; height: 4px; background: #e5e7eb; border-radius: 9999px; }
.pbc-line-fill { position: absolute; left: 0; top: 0; height: 100%; background: #ef4444; border-radius: 9999px; transition: width .4s ease; width: 0; }
.pbc-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -14px; }
.pbc-step-dot { position: relative; text-align: center; cursor: default; opacity: .45; transition: opacity .2s; }
.pbc-step-dot.reachable { cursor: pointer; }
.pbc-step-dot.active { opacity: 1; }
.pbc-step-dot.done { opacity: .8; }
.pbc-dot-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9999px;
  background: #fff; border: 2px solid #e5e7eb; color: #6b7280;
  font-weight: 700; font-size: 14px; position: relative; z-index: 1;
  transition: all .2s;
}
.pbc-step-dot.active .pbc-dot-num { background: #ef4444; border-color: #ef4444; color: #fff; }
.pbc-step-dot.done .pbc-dot-num { background: #ef4444; border-color: #ef4444; color: #fff; }
.pbc-step-dot strong { display: block; margin-top: 10px; font-size: 15px; color: #111827; }
.pbc-step-dot small { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }

/* ---- Steps ---- */
.pbc-step { max-width: 980px; margin: 0 auto 40px; }
.pbc-step-head { text-align: center; margin-bottom: 32px; }
.pbc-step-head h2 { font-size: 30px; font-weight: 800; color: #111827; margin: 0 0 8px; }
.pbc-step-head h2 .pb-red { color: #ef4444; }
.pbc-step-head p { color: #6b7280; font-size: 16px; }

/* ---- Step 1: mode cards ---- */
.pbc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pbc-mode { position: relative; padding: 28px; }
.pbc-mode .pb-card-body { padding: 0; }
.pbc-mode-body { text-align: center; padding-bottom: 8px; }
.pbc-mode-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; background: #fee2e2; color: #ef4444;
  border-radius: 9999px; margin-bottom: 16px;
}
.pbc-mode-icon svg { width: 28px; height: 28px; }
.pbc-mode-icon-ai { background: #ede9fe; color: #9333ea; }
.pbc-mode h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.pbc-mode-body p { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.pbc-price-tag { display: inline-block; font-size: 13px; font-weight: 600; color: #374151; background: #f3f4f6; padding: 4px 12px; border-radius: 9999px; }
.pbc-price-tag-ai { background: #f5f3ff; color: #6d28d9; }
.pbc-mode.selected { border: 2px solid #ef4444; box-shadow: 0 12px 30px rgba(239,68,68,0.12); }
.pbc-mode.selected::after {
  content: "\2713"; position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px; border-radius: 9999px; background: #ef4444; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}

/* Mode panels (hidden until selected) */
.pbc-mode-panel { display: none; margin-top: 20px; text-align: left; padding: 18px; background: #f9fafb; border-radius: 12px; }
.pbc-hint { font-size: 14px; color: #6b7280; margin: 0 0 12px; }
.pbc-label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 6px; color: #374151; }
.pbc-mode-panel input[type="file"] { width: 100%; padding: 8px 0; font-size: 14px; }
.pbc-mode-panel textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; font-family: inherit; }
.pbc-mode-panel textarea:focus { outline: none; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.pbc-status { display: block; margin-top: 10px; font-size: 14px; min-height: 20px; color: #374151; }
.pbc-timer { font-size: 18px; font-weight: 700; color: #ef4444; margin: 12px 0 0; }
.pbc-rec-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.pbc-generate { background: #9333ea; color: #fff; width: 100%; margin-top: 12px; }
.pbc-generate:hover { background: #7e22ce; color: #fff; }
.pbc-mode-panel audio { width: 100%; margin-top: 12px; }

/* ---- Step 2: message ---- */
.pbc-card-single { max-width: 760px; margin: 0 auto; }
.pbc-ideas { margin-top: 24px; padding: 16px 20px; background: #fff7ed; border-radius: 12px; }
.pbc-ideas strong { display: block; color: #c2410c; margin-bottom: 6px; }
.pbc-ideas ul { margin: 0; padding-left: 18px; color: #9a3412; font-size: 14px; line-height: 1.8; }

/* ---- Step 3: bear selection ---- */
.pbc-bear.selected { border: 2px solid #ef4444; box-shadow: 0 12px 30px rgba(239,68,68,0.12); }
.pbc-bear.selected .pb-card-img img { transform: scale(1.05); }
.pbc-bear .pb-card-img { cursor: pointer; }
.pbc-bear .pb-card-body { cursor: pointer; }

/* ---- Step 4: summary ---- */
.pbc-summary-item { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; }
.pbc-summary-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.pbc-summary-item strong { display: block; color: #111827; font-size: 17px; }
.pbc-summary-item .pb-card-desc { margin: 2px 0 0; }
.pbc-summary-item .pb-price { margin-left: auto; font-size: 20px; }
.pbc-summary-rows { border-top: 1px solid #f3f4f6; padding-top: 8px; }
.pbc-summary-rows > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; font-size: 15px; color: #4b5563; }
.pbc-summary-rows .ok { color: #166534; font-weight: 600; }
.pbc-summary-rows .total { border-top: 1px dashed #e5e7eb; margin-top: 6px; font-size: 18px; font-weight: 800; color: #111827; padding-top: 16px; }
.pbc-summary-rows .total span:last-child { color: #ef4444; }
.pbc-add-cart { width: 100%; margin-top: 24px; font-size: 18px; }

/* ---- Nav buttons ---- */
.pbc-nav { max-width: 980px; margin: 0 auto; }
.pb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pbc-modes { grid-template-columns: 1fr; }
  .pbc-step-dot strong { font-size: 13px; }
  .pbc-step-dot small { display: none; }
}
@media (max-width: 640px) {
  .pb-creator { padding: 32px 0 56px; }
  .pb-creator-title { font-size: 32px; }
  .pbc-step-dot strong { display: none; }
  .pbc-step-dot small { display: none; }
  .pbc-steps { margin-top: -14px; }
}