/* ═══════════════════════════════════════════════════════════════
   BrandBrahma AI Domain Lister — Public CSS
   Extends PDM Seller Module design system
   ═══════════════════════════════════════════════════════════════ */

/* ── Root variables (mirror Seller Module) ───────────────────── */
:root {
  --bb-dark:      #0a1628;
  --bb-dark2:     #0f2040;
  --bb-dark3:     #1e3a5f;
  --bb-orange:    #f97316;
  --bb-orange-bg: rgba(249,115,22,.12);
  --bb-text:      #e2e8f0;
  --bb-text2:     #94a3b8;
  --bb-text3:     #64748b;
  --bb-border:    rgba(255,255,255,.08);
  --bb-success:   #10b981;
  --bb-error:     #ef4444;
  --bb-warn:      #f59e0b;
  --bb-font:      'Inter','Segoe UI',system-ui,sans-serif;
  --bb-radius:    14px;
  --bb-shadow:    0 4px 24px rgba(0,0,0,.35);
}

/* ── Page root ───────────────────────────────────────────────── */
.bbdl-root,
.bbdl-root * {
  box-sizing: border-box;
}
.bbdl-root {
  font-family: var(--bb-font) !important;
  color: var(--bb-text) !important;
  background: var(--bb-dark) !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Page hero ───────────────────────────────────────────────── */
.pdmsm-page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pdmsm-page-hero h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--bb-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.pdmsm-page-hero h1 em {
  color: var(--bb-orange) !important;
  font-style: normal !important;
}
.pdmsm-page-hero p {
  color: var(--bb-text2) !important;
  margin: 6px 0 0 !important;
  font-size: 14px !important;
}

/* ── Credit badge in hero ────────────────────────────────────── */
.bbdl-credit-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bb-orange-bg);
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--bb-text2);
}
.bbdl-credit-badge svg { color: var(--bb-orange); flex-shrink: 0; }
.bbdl-credit-badge strong { color: var(--bb-orange); }

/* ── Two-column layout ───────────────────────────────────────── */
.bbdl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .bbdl-layout { grid-template-columns: 1fr; }
}

/* ── Prefix input ($ sign) ───────────────────────────────────── */
.pdmsm-prefix-input {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--bb-border);
  border-radius: 8px;
  overflow: hidden;
}
.pdmsm-prefix-input span {
  padding: 0 12px;
  color: var(--bb-text3);
  font-size: 14px;
  border-right: 1px solid var(--bb-border);
  line-height: 42px;
  background: rgba(255,255,255,.03);
}
.pdmsm-prefix-input input {
  border: none !important;
  background: transparent !important;
  flex: 1;
  padding: 10px 12px !important;
}

/* ── Optional label ──────────────────────────────────────────── */
.pdmsm-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--bb-text3);
  margin-left: 4px;
}

/* ── Locked form overlay ─────────────────────────────────────── */
.bbdl-form-locked {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* ── Preview button row ──────────────────────────────────────── */
.bbdl-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
}
.bbdl-preview-status {
  font-size: 13px;
  color: var(--bb-text2);
}

/* ── AI preview box ──────────────────────────────────────────── */
.bbdl-preview-box {
  background: rgba(249,115,22,.06);
  border: 1px solid rgba(249,115,22,.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.bbdl-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(249,115,22,.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-orange);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.bbdl-preview-body { padding: 16px; }
.bbdl-preview-field { margin-bottom: 12px; }
.bbdl-preview-field:last-child { margin-bottom: 0; }
.bbdl-preview-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.bbdl-preview-value {
  font-size: 13px;
  color: var(--bb-text);
  line-height: 1.5;
}

/* ── THE MAIN CTA BUTTON ─────────────────────────────────────── */
.bbdl-cta-wrap {
  margin-top: 8px;
}
.bbdl-cta-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 18px 28px !important;
  background: linear-gradient(135deg, #f97316 0%, #ea6309 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: 0 6px 24px rgba(249,115,22,.35) !important;
  font-family: var(--bb-font) !important;
  letter-spacing: 0.2px !important;
}
.bbdl-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(249,115,22,.45) !important;
}
.bbdl-cta-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.bbdl-cta-icon { flex-shrink: 0; }
.bbdl-cta-text { flex: 1; text-align: center; }
.bbdl-cta-cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.2);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.bbdl-cta-note {
  margin: 12px 0 0 !important;
  font-size: 12px !important;
  color: var(--bb-text3) !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* ── Loading / progress ──────────────────────────────────────── */
.bbdl-loading {
  padding: 28px;
  text-align: center;
}
.bbdl-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(249,115,22,.2);
  border-top-color: var(--bb-orange);
  border-radius: 50%;
  animation: bbdl-spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes bbdl-spin { to { transform: rotate(360deg); } }

.bbdl-loading-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
}
.bbdl-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--bb-text3);
  transition: color .3s;
}
.bbdl-step.active { color: var(--bb-text); }
.bbdl-step.done   { color: var(--bb-success); }
.bbdl-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bb-text3);
  flex-shrink: 0;
  transition: background .3s;
}
.bbdl-step.active .bbdl-step-dot {
  background: var(--bb-orange);
  box-shadow: 0 0 8px rgba(249,115,22,.6);
  animation: bbdl-pulse 1s infinite;
}
.bbdl-step.done .bbdl-step-dot { background: var(--bb-success); }
@keyframes bbdl-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Auth prompt ─────────────────────────────────────────────── */
.bbdl-auth-prompt,
.bbdl-credits-warning {
  text-align: center;
  padding: 40px 32px !important;
  margin-bottom: 20px !important;
}
.bbdl-auth-icon,
.bbdl-warn-icon {
  margin: 0 auto 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bbdl-auth-icon {
  background: rgba(99,102,241,.12);
  color: #818cf8;
}
.bbdl-warn-icon {
  background: rgba(245,158,11,.12);
  color: var(--bb-warn);
}
.bbdl-auth-prompt h2,
.bbdl-credits-warning h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--bb-text) !important;
  margin: 0 0 8px !important;
}
.bbdl-auth-prompt p,
.bbdl-credits-warning p {
  color: var(--bb-text2) !important;
  margin: 0 0 20px !important;
}
.bbdl-auth-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── How-it-works sidebar ────────────────────────────────────── */
.bbdl-how-panel h3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bb-text) !important;
  margin: 0 0 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.bbdl-steps-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bbdl-steps-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bbdl-step-num {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: var(--bb-orange-bg);
  border: 1px solid rgba(249,115,22,.3);
  color: var(--bb-orange);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.bbdl-steps-list li > div:last-child strong {
  display: block;
  font-size: 13px;
  color: var(--bb-text);
  margin-bottom: 2px;
}
.bbdl-steps-list li > div:last-child p {
  font-size: 12px !important;
  color: var(--bb-text3) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ── Pricing sidebar ─────────────────────────────────────────── */
.bbdl-pricing-panel h3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bb-text) !important;
  margin: 0 0 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.bbdl-pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--bb-border);
  font-size: 13px;
}
.bbdl-pricing-item:last-of-type { border-bottom: none; }
.bbdl-pricing-item span { color: var(--bb-text2); }
.bbdl-pricing-item strong { color: var(--bb-orange); }
.bbdl-pricing-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--bb-text3);
  text-align: center;
  line-height: 1.5;
}

/* ── Wordmark preview sidebar ────────────────────────────────── */
.bbdl-wordmark-panel h3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bb-text) !important;
  margin: 0 0 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.bbdl-wordmark-container img,
.bbdl-wordmark-container svg {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* ── Success page ────────────────────────────────────────────── */
.bbdl-success-page {
  max-width: 640px;
  margin: 60px auto;
  text-align: center;
  padding: 0 20px;
}
.bbdl-success-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(16,185,129,.12);
  border: 2px solid rgba(16,185,129,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--bb-success);
  animation: bbdl-pop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes bbdl-pop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
.bbdl-success-page h1 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--bb-text) !important;
  margin: 0 0 8px !important;
}
.bbdl-success-sub {
  font-size: 15px !important;
  color: var(--bb-text2) !important;
  margin: 0 0 32px !important;
}
.bbdl-success-details {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  margin-bottom: 28px;
}
.bbdl-success-details .bbdl-sdet-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.bbdl-success-details .bbdl-sdet-row:last-child { margin-bottom: 0; }
.bbdl-success-details .bbdl-sdet-label {
  width: 110px;
  min-width: 110px;
  color: var(--bb-text3);
}
.bbdl-success-details .bbdl-sdet-val { color: var(--bb-text); font-weight: 500; }
.bbdl-success-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-bottom: 32px;
}
.bbdl-success-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bb-border);
  border-radius: 10px;
  padding: 16px;
}
.bbdl-ss-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: var(--bb-orange-bg);
  color: var(--bb-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bbdl-success-step strong {
  display: block;
  font-size: 14px;
  color: var(--bb-text);
  margin-bottom: 4px;
}
.bbdl-success-step p {
  font-size: 13px !important;
  color: var(--bb-text2) !important;
  margin: 0 !important;
}
.bbdl-success-actions { text-align: center; }