/*!
 * Nuso Giya Seller Registration Extension — styles.
 * Deliberately reuses Plugin 1's design tokens (--ngr-* CSS variables) and
 * class names (.ngr-step, .ngr-type-card, .ngr-field-group, .ngr-input-wrap,
 * .ngr-btn-primary, .ngr-otp-*, .ngr-success, etc.) so every screen this
 * plugin adds looks identical to Plugin 1's without redefining a single
 * color, radius, or shadow. No logo banner and no upload widgets are part
 * of this design — the Seller Registration form collects text fields only.
 *
 * IMPORTANT — scoping rule: this file must never apply layout/visibility
 * rules to the bare `.ngr-step` class, because that class also belongs to
 * Plugin 1's own screens (account-type, buyer, otp, success). Every rule
 * that controls step show/hide below is scoped to this extension's own
 * three steps via `[data-step="seller-type|seller-form|seller-otp"]`. This
 * is the root-cause fix for the "Next" button intermittently failing to
 * appear on first load: an earlier version of this file toggled opacity
 * on the shared `.ngr-step` class, which could fight with Plugin 1's own
 * show/hide logic for its first screen (the one holding the Next button)
 * depending on cache/minifier/theme timing. Plugin 1's own steps are never
 * touched here, so its default visibility and blue button styling render
 * immediately, exactly as Plugin 1 ships them.
 */

/* ============================================================
 * Design tokens — falls back to sensible literal values if a
 * --ngr-* var isn't defined by Plugin 1, so this never breaks if
 * a token is missing. Only spacing/radius/shadow tokens are added
 * here; no new colors are introduced anywhere in this file.
 * ============================================================ */

.ngr-root {
	--ngrs-radius-card: var(--ngr-radius-lg, 24px);
	--ngrs-radius-field: var(--ngr-radius-md, 14px);
	--ngrs-radius-btn: var(--ngr-radius-lg, 18px);
	--ngrs-shadow-card: 0 16px 40px rgba(15, 40, 25, 0.10), 0 2px 10px rgba(15, 40, 25, 0.05);
	--ngrs-shadow-btn: 0 10px 24px rgba(22, 163, 74, 0.24);
	--ngrs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ngrs-gap: 20px;
}

/* ============================================================
 * Card surface — soft gradient wash + deeper, warmer shadow so
 * the whole flow reads as one considered, modern panel.
 * ============================================================ */

.ngr-root {
	box-shadow: var(--ngrs-shadow-card);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 140px);
}

/* ------------------------------------------------------------
 * Step transitions — scoped strictly to this extension's own
 * three injected steps. Plugin 1's own steps (account-type,
 * buyer, otp, success) are never targeted here, so their default
 * markup/visibility/Next-button styling is left completely
 * untouched and always renders immediately.
 * ---------------------------------------------------------- */

.ngr-step[data-step="seller-type"],
.ngr-step[data-step="seller-form"],
.ngr-step[data-step="seller-otp"] {
	display: none;
}

.ngr-step[data-step="seller-type"].is-active,
.ngr-step[data-step="seller-form"].is-active,
.ngr-step[data-step="seller-otp"].is-active {
	display: block;
	animation: ngrs-step-in 0.36s var(--ngrs-ease);
}

@keyframes ngrs-step-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ngr-step[data-step="seller-type"].is-active,
	.ngr-step[data-step="seller-form"].is-active,
	.ngr-step[data-step="seller-otp"].is-active {
		animation: none;
	}
}

/* ============================================================
 * Typography — clearer hierarchy for titles/subtitles across
 * every step this plugin renders.
 * ============================================================ */

.ngr-step[data-step="seller-type"] .ngr-title,
.ngr-step[data-step="seller-form"] .ngr-title,
.ngr-step[data-step="seller-otp"] .ngr-title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin-bottom: 6px;
}

.ngr-step[data-step="seller-type"] .ngr-subtitle,
.ngr-step[data-step="seller-form"] .ngr-subtitle,
.ngr-step[data-step="seller-otp"] .ngr-subtitle {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 22px;
}

/* ============================================================
 * Form fields — rounded, calmer borders, crisper focus glow,
 * more breathing room between fields.
 * ============================================================ */

.ngr-input-wrap,
.ngr-input {
	border-radius: var(--ngrs-radius-field) !important;
}

.ngr-input {
	min-height: 52px;
	font-size: 15.5px;
	transition: border-color 0.18s ease, box-shadow 0.2s ease, background 0.18s ease;
}

.ngr-input:focus {
	box-shadow: 0 0 0 4px var(--ngr-green-50, rgba(22, 163, 74, 0.12));
}

.ngr-form .ngr-field-group {
	margin-bottom: var(--ngrs-gap);
}

.ngr-field-group label {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 8px;
}

.ngr-field-error {
	display: block;
	font-size: 12.5px;
	margin-top: 6px;
}

/* ============================================================
 * Primary button — bigger, bolder, rounder, confident shadow,
 * smooth hover/press motion. Color itself is left untouched so
 * the site's existing (blue) button theme is preserved exactly.
 * ============================================================ */

.ngr-btn-primary {
	border-radius: var(--ngrs-radius-btn) !important;
	box-shadow: var(--ngrs-shadow-btn);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
	min-height: 54px;
	padding-left: 24px;
	padding-right: 24px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: transform 0.18s var(--ngrs-ease), box-shadow 0.18s ease, filter 0.18s ease;
}

.ngr-btn-primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
}

.ngr-btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22);
}

.ngr-btn-primary:focus-visible,
.ngr-input:focus-visible,
.ngr-type-card:focus-within {
	outline: 2px solid var(--ngr-green-600, #16a34a);
	outline-offset: 2px;
}

/* ============================================================
 * Modern blue action buttons — the Seller form's "Register"
 * submit and the OTP "Verify & Continue" submit. Colors are
 * hardcoded hex values (never the theme's --ngr-* tokens) and
 * every color/shape property is flagged !important, so neither a
 * theme update/switch nor an admin "brand color" setting can ever
 * change how these two buttons look.
 * ============================================================ */

#ngrs-register-submit,
#ngrs-otp-submit {
	background: #2563eb !important;
	background-image: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: 0 14px 30px rgba(29, 78, 216, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	min-height: 56px !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, filter 0.18s ease !important;
}

#ngrs-register-submit:hover,
#ngrs-otp-submit:hover {
	transform: translateY(-2px);
	filter: brightness(1.07);
	box-shadow: 0 18px 36px rgba(29, 78, 216, 0.4) !important;
}

#ngrs-register-submit:active,
#ngrs-otp-submit:active {
	transform: translateY(0);
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3) !important;
}

#ngrs-register-submit:focus-visible,
#ngrs-otp-submit:focus-visible {
	outline: 2px solid #1d4ed8 !important;
	outline-offset: 2px !important;
}

#ngrs-register-submit .ngr-btn-text,
#ngrs-otp-submit .ngr-btn-text,
#ngrs-register-submit .ngr-btn-spinner,
#ngrs-otp-submit .ngr-btn-spinner {
	color: #ffffff !important;
}

/* ============================================================
 * Seller type picker — clear selected state, gentle lift, and a
 * colored icon chip so the three options are easy to scan.
 * ============================================================ */

.ngr-type-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: var(--ngrs-gap);
}

.ngr-type-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border-radius: var(--ngrs-radius-field) !important;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.2s ease, transform 0.18s var(--ngrs-ease);
}

.ngr-type-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 40, 25, 0.08);
}

.ngr-type-card.is-selected {
	box-shadow: 0 0 0 2px var(--ngr-green-600, #16a34a), 0 10px 24px rgba(22, 163, 74, 0.16);
}

.ngr-type-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14.5px;
}

.ngr-type-copy strong {
	font-size: 15.5px;
	font-weight: 700;
}

/* ============================================================
 * Mini "Next" button — used below the account-type (Buyer/Seller)
 * cards and below the seller-type (Physical/Digital/Both) cards.
 * Compact, pill-shaped, brand-green gradient, its own lighter
 * shadow. Colors are hardcoded (not the theme's --ngr-* tokens)
 * and !important throughout so no theme update or admin color
 * setting can ever change this button's look.
 * ============================================================ */

.ngrs-mini-next {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto !important;
	min-height: 40px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 999px !important;
	background: #16a34a !important;
	background-image: linear-gradient(135deg, #22c55e, #16a34a) !important;
	box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28) !important;
	color: #ffffff !important;
	cursor: pointer;
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, filter 0.18s ease;
}

.ngrs-mini-next-below {
	margin: 18px 0 0 !important;
}

.ngrs-mini-next:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 10px 22px rgba(22, 163, 74, 0.34) !important;
}

.ngrs-mini-next:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(22, 163, 74, 0.24) !important;
}

.ngrs-mini-next:focus-visible {
	outline: 2px solid #15803d !important;
	outline-offset: 2px !important;
}

/* Legacy buttons this extension no longer wants visible (Plugin 1's
   original full-width account-type Next button, and the success
   screen's old "Continue to Home" link) are kept in the DOM for
   compatibility but fully removed from layout and from assistive
   tech / tab order. */
.ngrs-legacy-btn-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ---------- "Registration" label above the account type selector ---------- */

.ngrs-registration-label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--ngr-gray-900, #111827);
}

/* ---------- Get Chat ID button ---------- */

.ngrs-get-chatid-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 10px 14px;
	border-radius: var(--ngrs-radius-field);
	background: var(--ngr-green-50, #eafbf1);
	color: var(--ngr-green-700, #15803d);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--ngr-green-100, #cdf0da);
	transition: background 0.15s ease, transform 0.18s var(--ngrs-ease), box-shadow 0.18s ease;
}

.ngrs-get-chatid-btn:hover {
	background: var(--ngr-green-100, #cdf0da);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}

/* ---------- Privacy Policy / Terms & Conditions links ---------- */

.ngrs-legal-link {
	color: var(--ngr-green-600, #16a34a);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

a.ngrs-legal-link:hover,
a.ngrs-legal-link:focus {
	color: var(--ngr-green-700, #15803d);
}

.ngr-checkbox-row {
	margin-top: 4px;
	margin-bottom: var(--ngrs-gap);
}

.ngr-checkbox-label {
	font-size: 14px;
	line-height: 1.6;
}

/* ============================================================
 * OTP inputs — same rounded, focus-glow language as the rest of
 * the form, plus a shake cue on an invalid code. Bigger tap
 * targets for touch devices.
 * ============================================================ */

.ngr-otp-boxes {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.ngr-otp-box {
	width: 50px;
	height: 58px;
	font-size: 22px;
	font-weight: 800;
	text-align: center;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 2px solid #cbd5e1 !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07) !important;
	transition: border-color 0.18s ease, box-shadow 0.2s ease, transform 0.15s var(--ngrs-ease), background 0.18s ease;
}

.ngr-otp-box:focus {
	border-color: #2563eb !important;
	background: #eff6ff !important;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18) !important;
	transform: translateY(-2px);
	outline: none;
}

.ngr-otp-box.is-invalid {
	animation: ngrs-shake 0.32s ease;
}

@keyframes ngrs-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.ngr-otp-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 14px 0 20px;
	font-size: 13.5px;
}

/* ============================================================
 * Redesigned Registration Success screen.
 * ============================================================ */

.ngrs-success-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 40px 20px 8px;
	animation: ngrs-step-in 0.4s var(--ngrs-ease);
}

.ngrs-success-icon {
	width: 88px;
	height: 88px;
	margin-bottom: 24px;
}

.ngrs-success-icon svg {
	width: 100%;
	height: 100%;
}

.ngrs-success-circle {
	fill: var(--ngr-green-600, #16a34a);
	transform-origin: center;
	animation: ngrs-circle-pop 0.45s var(--ngrs-ease);
}

.ngrs-success-check {
	stroke: var(--ngr-white, #fff);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: ngrs-check-draw 0.4s ease 0.28s forwards;
}

@keyframes ngrs-circle-pop {
	from { transform: scale(0.55); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

@keyframes ngrs-check-draw {
	to { stroke-dashoffset: 0; }
}

.ngrs-success-title {
	font-size: 23px;
	font-weight: 700;
	color: var(--ngr-gray-900, #111827);
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.ngrs-success-sub {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ngr-gray-600, #4b5563);
	margin: 0 0 32px;
}

.ngrs-success-btn {
	width: 100%;
	max-width: 320px;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Soft pulsing ring behind the checkmark, purely decorative. */
.ngrs-success-ring {
	position: absolute;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--ngr-green-50, #eafbf1);
	animation: ngrs-ring-pulse 1.8s ease-out 0.15s infinite;
	z-index: -1;
}

@keyframes ngrs-ring-pulse {
	0% { transform: scale(0.85); opacity: 0.9; }
	70% { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}

.ngrs-success-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Auto-redirect countdown, replacing the removed "Continue to Home"
   button. Quiet, reassuring, and always visible the instant the
   Success screen appears. */
.ngrs-success-redirect {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--ngr-green-50, #eafbf1);
	color: var(--ngr-green-700, #15803d);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ngrs-success-spinner {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--ngr-green-200, #a7f0c1);
	border-top-color: var(--ngr-green-600, #16a34a);
	animation: ngrs-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes ngrs-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ngrs-success-ring {
		animation: none;
		display: none;
	}
	.ngrs-success-spinner {
		animation: none;
	}
}

/* Belt-and-braces: every button this extension renders (Seller Type's
   "Next", the seller form's "Register" submit, the OTP "Verify &
   Continue" submit, and the Continue-to-Home success link) must show
   its .ngr-btn-text span immediately on first render, regardless of
   what Plugin 1's own .ngr-btn-primary rule assumes about button
   internals (e.g. a default opacity:0/visibility:hidden meant to be
   toggled by a click/tap before text ever appears). */
.ngrs-success-btn .ngr-btn-text,
#ngrs-seller-type-next .ngr-btn-text,
#ngrs-register-submit .ngr-btn-text,
#ngrs-otp-submit .ngr-btn-text {
	opacity: 1;
	visibility: visible;
}

/* ============================================================
 * Modern mobile UI/UX — responsive tightening so every step this
 * plugin renders is comfortable at phone widths: full-width,
 * large-tap-target buttons, single-column layout, no cramped
 * edges. The color theme is unchanged; only spacing/sizing
 * adapts.
 * ============================================================ */

@media (max-width: 640px) {
	.ngr-step[data-step="seller-type"],
	.ngr-step[data-step="seller-form"],
	.ngr-step[data-step="seller-otp"] {
		padding-left: 6px;
		padding-right: 6px;
	}

	.ngr-step[data-step="seller-type"] .ngr-title,
	.ngr-step[data-step="seller-form"] .ngr-title,
	.ngr-step[data-step="seller-otp"] .ngr-title {
		font-size: 21px;
	}

	.ngr-type-card {
		padding: 16px;
		gap: 12px;
	}

	.ngr-btn-primary {
		width: 100%;
		min-height: 52px;
		font-size: 15.5px;
	}

	.ngr-otp-box {
		width: 42px;
		height: 50px;
		font-size: 18px;
	}

	.ngr-otp-meta {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.ngr-step {
		padding-left: 4px;
		padding-right: 4px;
	}

	.ngr-otp-boxes {
		gap: 7px;
	}

	.ngr-otp-box {
		width: 38px;
		height: 46px;
		font-size: 17px;
	}
}