/* become-a-reseller.css — page-specific styles for the public reseller
   application form. Everything reusable (buttons, card-grid, product-card,
   card-thumb, form inputs, badges) already lives in components.css and is
   used as-is here. This file only adds what's genuinely new to this page. */

.apply-intro { padding-bottom: var(--space-3); }

/* Sections stack with a labeled divider — same idea as the admin dashboard's
   form groupings, just at public-page type scale. */
.form-section { padding: var(--space-5) 0; border-top: 1px solid var(--border-subtle); }
.form-section:first-child { border-top: none; padding-top: 0; }
.form-section h3 { margin-bottom: var(--space-3); }

/* Text-input sections stay a comfortable reading width; the product grid
   below is deliberately left full-width (see .picker-grid) since it needs
   the room and text-input line length doesn't apply to it. */
.form-narrow { max-width: 480px; }

/* Mirrors admin.css's .form-error exactly (same banner used for the admin
   product/application forms). Duplicated rather than promoted into
   components.css for this delivery to avoid touching admin.css, which is
   tested, founder-confirmed production code — worth consolidating later,
   not now. */
.form-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: 14px;
  padding: var(--space-3);
  border-radius: var(--radius-input);
  margin-bottom: var(--space-4);
}
.form-error[hidden] { display: none; }

/* Same story as .form-error above — .form-hint only exists in admin.css
   today, which this page doesn't load. Identical definition. */
.form-hint { font-size: 12px; color: var(--text-tertiary); margin: -10px 0 var(--space-3); }

/* Same story as .form-error/.form-hint — .checkbox-row lives in admin.css
   today, which this page doesn't load. Identical definition. */
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.checkbox-row input[type="checkbox"] { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.checkbox-row label { margin: 0; font-size: 14px; color: var(--text-primary); }

/* .field-status moved to components.css — the reseller dashboard's store
   rename field needs the identical treatment and does not load this file.
   Same "promote once a second context needs it" move as .form-hint and
   .picker-* before it. */

/* The live URL preview, so "Priya Grows" visibly becomes
   zyentora.in/store/priya-grows before anyone commits to it. */
.store-slug-preview {
  color: var(--signal-blue);
  word-break: break-all;
}

/* Platform selector + profile URL. Auto-width select so the dropdown
   stays compact and the URL field takes the remaining room; stacks on a
   phone, where a side-by-side select would squeeze the URL to nothing.
   margin-bottom:0 on both because the grid gap owns the spacing —
   the global `input`/`select` bottom margin would otherwise add a second
   one and knock the row out of alignment. */
.social-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.social-row select,
.social-row input { margin-bottom: 0; }
@media (max-width: 519px) {
  .social-row { grid-template-columns: 1fr; }
}

/* Product picker moved to components.css — the reseller dashboard's
   "Add More Products" needs the identical interaction now, so it's
   shared instead of duplicated. */

/* ---------- Success state ---------- */

#apply-success { padding-top: var(--space-4); }
.success-panel {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-soft);
  animation: scaleIn var(--motion-slow) var(--ease);
}
.success-panel .ph-check-circle {
  font-size: 40px;
  color: var(--emerald);
  margin-bottom: var(--space-3);
}
.success-panel h2 { margin-bottom: var(--space-2); }
.success-panel .lede { margin: 0 auto var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .picker-card, .picker-price-row, .success-panel { animation: none; transition: none; }
}