/**
 * Seller onboarding and identity verification.
 */

.a2-jwb.a2-jwb-seller-identity {
	width: min(100%, 880px);
	max-width: 880px;
	margin-inline: auto;
	padding: clamp(16px, 3vw, 30px);
	background: transparent;
}

.a2-jwb-seller-identity .a2-jwb-identity-head {
	margin-bottom: 24px;
}

.a2-jwb-seller-identity .a2-jwb-identity-head h2 {
	margin: 12px 0 8px;
	font-size: clamp(24px, 3.4vw, 34px);
}

.a2-jwb-seller-identity .a2-jwb-identity-head p {
	max-width: 64ch;
	margin: 0;
	color: var(--jwb-muted, #667085);
}

.a2-jwb-identity-progress {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.a2-jwb-identity-progress::before {
	content: "";
	position: absolute;
	top: 19px;
	inset-inline: 16.67%;
	height: 2px;
	background: var(--jwb-line-strong, #ded9cc);
	z-index: 0;
}

.a2-jwb-identity-progress li {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 7px;
	color: var(--jwb-muted, #667085);
	text-align: center;
}

.a2-jwb-identity-progress li > span {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--jwb-line-strong, #ded9cc);
	border-radius: 999px;
	background: #fff;
	font-weight: 800;
}

.a2-jwb-identity-progress li > small {
	font-size: 12px;
	font-weight: 700;
}

.a2-jwb-identity-progress li.is-active > span,
.a2-jwb-identity-progress li.is-done > span {
	border-color: var(--jwb-gold-solid, #c29b43);
	background: var(--jwb-gold-grad, linear-gradient(135deg, #d4b45f, #f7e9b5, #c29b43));
	color: #241b08;
	box-shadow: 0 5px 14px rgba(194, 155, 67, 0.25);
}

.a2-jwb-identity-progress li.is-active,
.a2-jwb-identity-progress li.is-done {
	color: var(--jwb-title, #111);
}

.a2-jwb-identity-stage {
	padding: clamp(18px, 4vw, 32px);
	border: 1px solid var(--jwb-card-border, #efe6cf);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 14px 42px -28px rgba(38, 29, 8, 0.38);
}

.a2-jwb-identity-form {
	display: grid;
	gap: 18px;
	max-width: 620px;
	margin-inline: auto;
}

.a2-jwb-identity-step-title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 2px;
}

.a2-jwb-identity-step-title > span {
	display: inline-grid;
	flex: 0 0 38px;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--jwb-gold-soft, #fbf4e0);
	color: var(--jwb-gold-deep, #9a7a2e);
	font-weight: 900;
}

.a2-jwb-identity-step-title h3 {
	margin: 0 0 4px;
	font-size: 20px;
}

.a2-jwb-identity-step-title p {
	margin: 0;
	color: var(--jwb-muted, #667085);
	font-size: 13px;
}

.a2-jwb-seller-identity .a2-jwb-field {
	display: grid;
	gap: 7px;
	margin: 0;
}

.a2-jwb-seller-identity .a2-jwb-label {
	font-size: 13px;
	font-weight: 800;
	color: var(--jwb-title, #111);
}

.a2-jwb-seller-identity input[type="tel"],
.a2-jwb-seller-identity input[type="text"],
.a2-jwb-seller-identity input[type="file"] {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--jwb-line-strong, #ded9cc);
	border-radius: 13px;
	background: #fff;
	font: inherit;
}

.a2-jwb-seller-identity input:focus {
	outline: 0;
	border-color: var(--jwb-gold-solid, #c29b43);
	box-shadow: 0 0 0 3px rgba(194, 155, 67, 0.18);
}

.a2-jwb-seller-identity input[type="tel"],
.a2-jwb-seller-identity .a2-jwb-auth-code {
	direction: ltr;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.a2-jwb-seller-identity .a2-jwb-auth-code {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.34em !important;
}

.a2-jwb-identity-otp-wrap {
	display: grid;
	gap: 14px;
}

.a2-jwb-identity-otp-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.a2-jwb-identity-otp-actions form,
.a2-jwb-identity-otp-actions .a2-jwb-backlink {
	margin: 0;
}

.a2-jwb-verified-mobile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border: 1px solid #bfe8d2;
	border-radius: 15px;
	background: #effaf4;
	color: #08733b;
}

.a2-jwb-verified-mobile > span {
	display: inline-grid;
	flex: 0 0 34px;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: #0a8c47;
	color: #fff;
	font-weight: 900;
}

.a2-jwb-verified-mobile div {
	display: grid;
	gap: 2px;
}

.a2-jwb-verified-mobile small {
	color: #47715a;
}

.a2-jwb-verified-mobile strong {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.a2-jwb-identity-fields {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 16px;
}

.a2-jwb-file-field small {
	color: var(--jwb-muted, #667085);
	font-size: 11px;
}

.a2-jwb-seller-identity .a2-jwb-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 13px;
	background: var(--jwb-surface-soft, #fbf8f1);
	font-size: 13px;
}

.a2-jwb-seller-identity .a2-jwb-checkbox input {
	flex: 0 0 auto;
	margin-top: 5px;
}

.a2-jwb-identity-result {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid var(--jwb-card-border, #efe6cf);
	border-radius: 22px;
	background: #fff;
}

.a2-jwb-identity-result__icon {
	display: inline-grid;
	flex: 0 0 52px;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--jwb-gold-soft, #fbf4e0);
	font-size: 22px;
}

.a2-jwb-identity-result.is-approved {
	border-color: #bfe8d2;
	background: #f8fdf9;
}

.a2-jwb-identity-result.is-approved .a2-jwb-identity-result__icon {
	background: #0a8c47;
	color: #fff;
}

.a2-jwb-seller-identity .a2-jwb-notice-error {
	border-color: #f2c9cc;
	background: #fce9ea;
	color: #a52d37;
}

.a2-jwb-seller-identity .a2-jwb-notice-success {
	border-color: #bfe8d2;
	background: #e5f7ee;
	color: #08733b;
}

.a2-jwb.a2-jwb-seller-request {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(14px, 3vw, 28px);
}

.a2-jwb-request-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
	gap: clamp(22px, 4vw, 48px);
	align-items: center;
	margin: 8px auto 28px;
	padding: clamp(22px, 4vw, 38px);
	border: 1px solid var(--jwb-card-border, #efe6cf);
	border-radius: 24px;
	background: linear-gradient(135deg, #fff 0%, var(--jwb-surface-soft, #fbf8f1) 100%);
}

.a2-jwb-request-intro h1 {
	margin: 12px 0 8px;
}

.a2-jwb-request-intro p {
	margin: 0;
	color: var(--jwb-muted, #667085);
}

.a2-jwb-request-benefits {
	display: grid;
	gap: 10px;
}

.a2-jwb-request-benefit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(194, 155, 67, 0.18);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.86);
}

.a2-jwb-request-benefit > span {
	display: inline-grid;
	flex: 0 0 42px;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--jwb-gold-soft, #fbf4e0);
	color: var(--jwb-gold-deep, #9a7a2e);
}

.a2-jwb-request-benefit svg {
	width: 23px;
	height: 23px;
}

.a2-jwb-request-benefit div {
	display: grid;
	gap: 2px;
}

.a2-jwb-request-benefit small {
	color: var(--jwb-muted, #667085);
}

.a2-jwb-request-gate,
.a2-jwb-request-approved {
	width: min(100%, 680px);
	margin: clamp(28px, 7vw, 72px) auto;
	padding: clamp(24px, 5vw, 42px);
	border: 1px solid var(--jwb-card-border, #efe6cf);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 46px -32px rgba(38, 29, 8, 0.45);
	text-align: center;
}

.a2-jwb-request-gate h2,
.a2-jwb-request-approved h2 {
	margin: 14px 0 8px;
}

.a2-jwb-request-gate p,
.a2-jwb-request-approved p {
	color: var(--jwb-muted, #667085);
}

.a2-jwb-request-approved__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 12px;
	border-radius: 20px;
	background: #0a8c47;
	color: #fff;
	font-size: 28px;
	font-weight: 900;
}

.a2-jwb-request-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.a2-jwb.a2-jwb-seller-identity {
		padding-inline: 12px;
	}

	.a2-jwb-identity-progress li > small {
		font-size: 10.5px;
	}

	.a2-jwb-identity-stage {
		padding: 18px 14px;
		border-radius: 18px;
	}

	.a2-jwb-identity-fields {
		grid-template-columns: 1fr;
	}

	.a2-jwb-identity-form > .a2-jwb-button,
	.a2-jwb-identity-otp-actions,
	.a2-jwb-identity-otp-actions form,
	.a2-jwb-identity-otp-actions button {
		width: 100%;
	}

	.a2-jwb-identity-result {
		flex-direction: column;
	}

	.a2-jwb-request-intro {
		grid-template-columns: 1fr;
		padding: 20px 16px;
	}

	.a2-jwb-request-actions .a2-jwb-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a2-jwb-seller-identity *,
	.a2-jwb-seller-identity *::before,
	.a2-jwb-seller-identity *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Seller's own originality declaration — two equal choices, because both are
   sellable and the form must not nudge the seller toward claiming "genuine". */
.a2-jwb-originality-choice{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.a2-jwb-originality-option{
  display:block; position:relative; cursor:pointer; padding:12px 14px;
  border:1px solid var(--jwb-line-strong); border-radius:var(--jwb-r-card);
  background:var(--jwb-surface); transition:border-color .15s ease, background .15s ease;
}
.a2-jwb-originality-option:hover{ border-color:var(--jwb-gold-line, #C29B43); }
.a2-jwb-originality-option input{ position:absolute; inset-inline-start:12px; top:14px; margin:0; }
.a2-jwb-originality-option__title{ display:block; font-weight:800; font-size:14px; margin-inline-start:24px; }
.a2-jwb-originality-option__text{ display:block; font-size:12px; line-height:1.8; color:var(--jwb-muted); margin-inline-start:24px; margin-top:2px; }
.a2-jwb-originality-option:has(input:checked){ border-color:#C29B43; background:#FBF6EA; }
@media (max-width:520px){ .a2-jwb-originality-choice{ grid-template-columns:1fr; } }

/* Inline field guidance — collapsed by default so the form stays short, open
   for the seller who does not know where a reference number lives. */
.a2-jwb-guide{ margin-top:8px; border:1px dashed var(--jwb-line-strong); border-radius:10px; background:var(--jwb-surface-sink); }
.a2-jwb-guide__summary{ cursor:pointer; padding:9px 12px; font-size:12.5px; font-weight:700; list-style:none; }
.a2-jwb-guide__summary::-webkit-details-marker{ display:none; }
.a2-jwb-guide__summary::before{ content:"؟"; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-inline-end:6px; border-radius:50%; background:var(--jwb-line-strong); font-size:11px; }
.a2-jwb-guide__body{ padding:0 12px 12px; font-size:12.5px; line-height:1.95; color:var(--jwb-muted); }
.a2-jwb-guide__body p{ margin:0 0 6px; }
.a2-jwb-guide__list{ margin:0 0 8px; padding-inline-start:18px; }
.a2-jwb-guide__note{ margin:0; padding-top:8px; border-top:1px dashed var(--jwb-line-strong); }

/* Short, related values sit on one row instead of two full-width rows of
   mostly empty space. Collapses on narrow screens where side-by-side would
   squeeze both fields too hard to type into. */
.a2-jwb-field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.a2-jwb-field-row > .a2-jwb-field{ margin-bottom:0; }
@media (max-width:640px){ .a2-jwb-field-row{ grid-template-columns:1fr; } }

/* Only genuine watches are traded, so the seller confirms rather than chooses. */
.a2-jwb-originality-confirm{ display:flex; gap:8px; align-items:flex-start; margin:6px 0 0; font-size:13px; line-height:1.9; }


/* ===========================================================================
   SELLER WATCH-SUBMISSION WIZARD
   ---------------------------------------------------------------------------
   Loaded after a2-jwb-override.css, so equal-specificity rules here win. Every
   selector is scoped to `.a2-jwb.a2-jwb-seller-submission` (three classes) so
   it outranks the generic `.a2-jwb .a2-jwb-*` wizard rules in override.css
   without touching the auth wizard or the identity flow.

   Two rules are deliberately NOT restated here:
     - `display` on `.a2-jwb-wizard-panel` — components.css owns panel
       visibility (`--js` hides all, `.is-current` shows one). A higher
       specificity `display` here would show every panel at once.
     - `display` on `.a2-jwb-wizard-next` — the script clears its inline
       display and falls back to the stylesheet.
   ========================================================================= */

.a2-jwb.a2-jwb-seller-submission{
  width:min(100%, 900px);
  max-width:900px;
  margin-inline:auto;
  padding-inline:clamp(12px, 3vw, 24px);
  font-size:15px;
}

/* The form is the vertical rhythm: head / stepper / panel / footer. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard{
  display:grid;
  gap:clamp(16px, 2.8vw, 24px);
  max-width:none;
  margin:0;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-form-message,
.a2-jwb.a2-jwb-seller-submission .a2-jwb-form-warning{
  margin-block-end:clamp(16px, 3vw, 24px);
  padding:14px 16px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.9;
}

/* ---- Title ------------------------------------------------------------- */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-submit-head{
  padding-block-start:clamp(6px, 2vw, 16px);
  text-align:center;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-submit-head__title{
  margin:0;
  font-size:clamp(21px, 3.4vw, 30px);
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--jwb-title, #0B0B0C);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-submit-head__title::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin:13px auto 0;
  border-radius:3px;
  background:var(--jwb-gold-grad, linear-gradient(135deg, #D4B45F, #F7E9B5, #C29B43));
}

/* ---- Stepper ------------------------------------------------------------
   A single connector track drawn on the list itself, with a gold fill whose
   width follows the active item. The per-item connector override.css draws is
   switched off below, or the two stack into a doubled line. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-stepper{
  padding:clamp(16px, 3vw, 22px) clamp(14px, 3vw, 26px);
  border:1px solid var(--jwb-card-border, #EFE6CF);
  border-radius:var(--jwb-r-card, 18px);
  background:linear-gradient(180deg, #FFFDF8 0%, var(--jwb-surface-soft, #FBF8F1) 100%);
  box-shadow:0 1px 2px rgba(28, 22, 8, .04), 0 10px 26px -20px rgba(38, 29, 8, .40);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::before,
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::after{
  content:"";
  position:absolute;
  top:19.5px;          /* centre of the 42px marker, minus half the 3px bar */
  height:3px;
  border-radius:999px;
  z-index:0;
}

/* Track: spans marker centre to marker centre (12.5% .. 87.5% of four columns). */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::before{
  inset-inline:12.5%;
  background:var(--jwb-line-strong, #DED9CC);
}

/* Fill: grows from the first marker as the seller advances. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::after{
  inset-inline-start:12.5%;
  inline-size:0;
  background:var(--jwb-gold-grad, linear-gradient(135deg, #D4B45F, #F7E9B5, #C29B43));
  transition:inline-size .45s cubic-bezier(.4, .14, .2, 1);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps:has(> li:nth-child(2).is-active)::after{ inline-size:25%; }
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps:has(> li:nth-child(3).is-active)::after{ inline-size:50%; }
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps:has(> li:nth-child(4).is-active)::after{ inline-size:75%; }

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:9px;
  padding-inline:4px;
  text-align:center;
}

/* override.css gives each item its own connector; this stepper draws one. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-step::before{ display:none; }

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step__dot{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1.5px solid var(--jwb-line-strong, #DED9CC);
  border-radius:999px;
  background:#fff;
  color:var(--jwb-muted, #6B7075);
  font-size:15px;
  font-weight:800;
  line-height:1;
  box-shadow:none;
  transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step__tick{ display:none; }

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step__label{
  font-size:12.5px;
  font-weight:700;
  line-height:1.5;
  color:var(--jwb-muted, #6B7075);
  transition:color .2s ease;
}

/* Only used by the compact mobile stepper. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-step__of{ display:none; }

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step.is-active .a2-jwb-step__dot{
  border-color:var(--jwb-gold-solid, #C29B43);
  background:#fff;
  color:var(--jwb-gold-deep, #9A7A2E);
  box-shadow:0 0 0 4px rgba(194, 155, 67, .16), 0 6px 16px -9px rgba(194, 155, 67, .8);
  transform:scale(1.06);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step.is-active .a2-jwb-step__label{
  color:var(--jwb-gold-deep, #9A7A2E);
  font-weight:800;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step.is-done .a2-jwb-step__dot{
  border-color:transparent;
  background:var(--jwb-gold-grad, linear-gradient(135deg, #D4B45F, #F7E9B5, #C29B43));
  color:var(--jwb-gold-text, #181208);
  box-shadow:0 3px 10px -5px rgba(194, 155, 67, .85);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step.is-done .a2-jwb-step__num{ display:none; }
.a2-jwb.a2-jwb-seller-submission .a2-jwb-step.is-done .a2-jwb-step__tick{ display:block; }

.a2-jwb.a2-jwb-seller-submission .a2-jwb-step.is-done .a2-jwb-step__label{
  color:var(--jwb-title, #0B0B0C);
}

/* No JS: every panel is on screen at once, so the stepper is no longer a
   position indicator. It becomes a table of contents — all four markers read
   as reachable, the connector is drawn end to end, and nothing claims to be
   "current". */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-wizard-steps::after{
  inline-size:75%;
  opacity:.45;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-step .a2-jwb-step__dot,
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-step.is-active .a2-jwb-step__dot{
  border-color:var(--jwb-gold-line, #E7D7A8);
  background:#fff;
  color:var(--jwb-gold-deep, #9A7A2E);
  box-shadow:none;
  transform:none;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-step.is-active .a2-jwb-step__label{
  color:var(--jwb-muted, #6B7075);
  font-weight:700;
}

/* ---- Panels ------------------------------------------------------------- */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-panel{
  padding:clamp(20px, 3.6vw, 32px);
  border:1px solid var(--jwb-card-border, #EFE6CF);
  border-radius:var(--jwb-r-card, 18px);
  background:#fff;
  box-shadow:0 1px 2px rgba(28, 22, 8, .04), 0 18px 44px -32px rgba(38, 29, 8, .45);
}

/* Rhythm without setting `display` on the panel — components.css owns that. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-panel > * + *{
  margin-block-start:clamp(14px, 2.4vw, 20px);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-panel__head{
  display:grid;
  gap:5px;
  padding-block-end:clamp(12px, 2vw, 16px);
  border-block-end:1px solid var(--jwb-line, #ECEAE3);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-panel__step{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--jwb-gold-deep, #9A7A2E);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-panel__title{
  margin:0;
  font-size:clamp(17px, 2.6vw, 21px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.45;
  color:var(--jwb-title, #0B0B0C);
}

/* ---- Fields ------------------------------------------------------------- */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-field{
  gap:8px;
  margin-bottom:0;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-label{
  font-size:13px;
  font-weight:800;
  color:var(--jwb-title, #0B0B0C);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-required{
  color:var(--jwb-danger, #D64550);
  margin-inline-start:4px;
  font-weight:800;
}

.a2-jwb.a2-jwb-seller-submission input[type="text"],
.a2-jwb.a2-jwb-seller-submission input[type="number"],
.a2-jwb.a2-jwb-seller-submission select,
.a2-jwb.a2-jwb-seller-submission textarea{
  width:100%;
  min-height:50px;
  margin:0;
  padding-block:12px;
  padding-inline:14px;
  border:1px solid var(--jwb-line-strong, #DED9CC);
  border-radius:13px;
  background:var(--jwb-surface, #fff);
  font-family:inherit;
  font-size:15px;
  color:var(--jwb-text, #16181A);
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* The chevron sits at the inline end; leave it room there, not at the start. */
.a2-jwb.a2-jwb-seller-submission select{
  padding-inline-start:14px;
  padding-inline-end:40px;
}

.a2-jwb.a2-jwb-seller-submission textarea{
  min-height:132px;
  line-height:1.9;
  resize:vertical;
}

.a2-jwb.a2-jwb-seller-submission input:focus,
.a2-jwb.a2-jwb-seller-submission select:focus,
.a2-jwb.a2-jwb-seller-submission textarea:focus{
  outline:0;
  border-color:var(--jwb-gold-solid, #C29B43);
  box-shadow:0 0 0 3px rgba(194, 155, 67, .18);
}

/* A hint under a field is plain quiet text, not the blue notice box the
   generic `.a2-jwb-helper` rule turns it into. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-helper{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--jwb-muted, #6B7075);
  font-size:12.5px;
  line-height:1.9;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-helper--muted{
  color:var(--jwb-faint, #A0A39A);
  font-size:12px;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-helper + .a2-jwb-helper{
  margin-block-start:4px;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-note{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--jwb-gold-line, #E7D7A8);
  border-radius:14px;
  background:var(--jwb-gold-soft, #FBF4E0);
  color:var(--jwb-text, #16181A);
  font-size:13px;
  line-height:1.9;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:13px 15px;
  border:1px solid var(--jwb-line, #ECEAE3);
  border-radius:13px;
  background:var(--jwb-surface-soft, #FBF8F1);
  font-size:13px;
  font-weight:600;
  line-height:1.85;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-checkbox:hover{
  border-color:var(--jwb-gold-line, #E7D7A8);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-checkbox:has(input:checked){
  border-color:var(--jwb-gold-solid, #C29B43);
  background:var(--jwb-gold-soft, #FBF4E0);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-checkbox input{
  flex:0 0 auto;
  width:19px;
  height:19px;
  min-height:0;
  margin:3px 0 0;
}

/* ---- Photo grid ---------------------------------------------------------
   Eight slots: two required, six optional. The two carry visibly different
   weight — required is a gold dashed well, optional a quiet neutral one — and
   a required slot turns green the moment a file is chosen. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(178px, 1fr));
  gap:12px;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:9px;
  margin:0;
  padding:16px 12px 14px;
  border-radius:15px;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload--required{
  border:1.5px dashed var(--jwb-gold-solid, #C29B43);
  background:linear-gradient(180deg, #FFFDF8, var(--jwb-gold-soft, #FBF4E0));
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload--optional{
  border:1.5px dashed var(--jwb-line-strong, #DED9CC);
  background:var(--jwb-surface, #fff);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload:hover{
  border-color:var(--jwb-gold-deep, #9A7A2E);
  background:var(--jwb-gold-soft, #FBF4E0);
  box-shadow:0 10px 22px -18px rgba(38, 29, 8, .65);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload:focus-within{
  border-color:var(--jwb-gold-solid, #C29B43);
  box-shadow:0 0 0 3px rgba(194, 155, 67, .20);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload__icon{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(255, 255, 255, .78);
  color:var(--jwb-gold-solid, #C29B43);
  transition:background .18s ease, color .18s ease;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload--optional .a2-jwb-upload__icon{
  color:var(--jwb-faint, #A0A39A);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload__hint{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1px;
  min-height:2.5em;      /* one- and two-line hints keep the tiles aligned */
  font-size:12.5px;
  font-weight:700;
  line-height:1.55;
  color:var(--jwb-title, #0B0B0C);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload--optional .a2-jwb-upload__hint{
  font-weight:600;
  color:var(--jwb-muted, #6B7075);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload input[type="file"]{
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-size:11px;
  color:var(--jwb-muted, #6B7075);
  cursor:pointer;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload input[type="file"]::file-selector-button{
  margin-inline-end:8px;
  padding:6px 13px;
  border:1px solid var(--jwb-line-strong, #DED9CC);
  border-radius:999px;
  background:#fff;
  color:var(--jwb-title, #0B0B0C);
  font-family:inherit;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload:hover input[type="file"]::file-selector-button{
  border-color:var(--jwb-gold-solid, #C29B43);
  background:var(--jwb-gold-soft, #FBF4E0);
}

/* A required slot is only satisfiable by picking a file, so `:valid` is a
   reliable "this one is done" signal. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload--required:has(input:valid){
  border-style:solid;
  border-color:#0A8C47;
  background:linear-gradient(180deg, #FFFFFF, #EFFAF4);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload--required:has(input:valid) .a2-jwb-upload__icon{
  background:#0A8C47;
  color:#fff;
}

/* Nothing renders thumbnails into this form, so the empty span must not
   reserve a 12px gutter in all eight tiles. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-upload-thumbs:empty{ display:none; }

/* ---- Footer -------------------------------------------------------------
   Prev anchors to the inline start, Next/Submit to the inline end — and stay
   there on step one, where Prev is hidden and `space-between` used to drag the
   only visible button back to the start. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin:0;
  padding-block-start:clamp(14px, 2.4vw, 20px);
  border-block-start:1px solid var(--jwb-line, #ECEAE3);
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-prev{
  margin-inline-end:auto;
}

/* Without JS the two step buttons cannot do anything, and the blanket
   `.a2-jwb button:not(...)` rule in override.css (0,5,1) out-specifies the
   no-JS `display: none` in components.css (0,1,0) — so they rendered as two
   dead controls beside the real submit. Six classes clears that bar. The
   submit button is left alone: with every panel stacked it is the one action
   that still works. */
.a2-jwb.a2-jwb-seller-submission .a2-jwb-form.a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-wizard-prev,
.a2-jwb.a2-jwb-seller-submission .a2-jwb-form.a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-wizard-next{
  display:none;
}

.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-next,
.a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-nav [type="submit"]{
  min-width:200px;
}

/* ---- Compact stepper under 520px ----------------------------------------
   Four columns cannot hold four Persian labels on a phone. Under JS only the
   current step shows, as one row with its own "step N of 4" caption and a
   full-width progress bar beneath. Without JS all four stack as a legible
   list using the same row layout. */
@media (max-width:520px){
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps{
    grid-template-columns:1fr;
    gap:2px;
    padding-block-end:17px;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-step{
    grid-template-columns:auto minmax(0, 1fr);
    justify-items:start;
    align-items:center;
    gap:1px 12px;
    padding-inline:0;
    padding-block:4px;
    text-align:start;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-step__dot{
    grid-column:1;
    grid-row:1 / span 2;
    width:38px;
    height:38px;
    font-size:14px;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-step__label{
    grid-column:2;
    grid-row:1;
    font-size:14px;
    font-weight:800;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-step__of{
    display:block;
    grid-column:2;
    grid-row:2;
    font-size:11.5px;
    font-weight:700;
    color:var(--jwb-faint, #A0A39A);
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard--js .a2-jwb-step{ display:none; }
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard--js .a2-jwb-step.is-active{ display:grid; }

  /* The connector becomes a plain progress bar pinned to the bottom. */
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::before,
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::after{
    top:auto;
    bottom:0;
    height:5px;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::before{ inset-inline:0; }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::after{
    inset-inline-start:0;
    inline-size:25%;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps:has(> li:nth-child(2).is-active)::after{ inline-size:50%; }
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps:has(> li:nth-child(3).is-active)::after{ inline-size:75%; }
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps:has(> li:nth-child(4).is-active)::after{ inline-size:100%; }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard:not(.a2-jwb-wizard--js) .a2-jwb-wizard-steps::after{
    inline-size:100%;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-upload-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-upload{
    padding:13px 9px 12px;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-upload__hint{
    font-size:11.5px;
  }

  /* Full-width, thumb-reachable footer: the forward action on top. */
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-nav{ gap:10px; }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-next,
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-nav [type="submit"]{
    flex:1 1 100%;
    min-width:0;
    order:1;
  }

  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-prev{
    flex:1 1 100%;
    margin-inline-end:0;
    order:2;
  }
}

@media (prefers-reduced-motion: reduce){
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-wizard-steps::after,
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-step__dot,
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-step__label,
  .a2-jwb.a2-jwb-seller-submission .a2-jwb-upload{
    transition:none;
  }
}