@import "design-tokens.less";

/*
 * Registration-new type scale (1rem = 10px via site.less)
 * Display → Section → Label/Control → Meta/Caption
 */
@reg-display-desktop: @form-page-title-desktop; // 3.2rem — hero H1
@reg-display-mobile: @form-page-title-mobile; // 2.4rem
@reg-lead-desktop: @form-body-desktop; // 1.8rem — hero intro
@reg-lead-mobile: @form-body-mobile; // 1.6rem
@reg-eyebrow-desktop: @form-helper-desktop; // 1.3rem
@reg-eyebrow-mobile: @form-helper-mobile; // 1.2rem
@reg-page-title-desktop: @form-section-title-desktop; // 2.4rem — progress card title
@reg-page-title-mobile: @form-section-title-mobile; // 1.8rem
@reg-page-desc-desktop: @form-caption-desktop; // 1.4rem — progress / step labels
@reg-page-desc-mobile: @form-caption-mobile; // 1.3rem
@reg-section-desktop: @form-section-title-desktop; // 2.4rem — form block headings
@reg-section-mobile: @form-section-title-mobile; // 1.8rem
@reg-label-desktop: @form-label-desktop; // 1.6rem — field labels, chips, inputs
@reg-label-mobile: @form-label-mobile; // 1.4rem
@reg-control-desktop: @form-input-desktop; // 1.6rem — inputs (same as label, readable)
@reg-control-mobile: @form-input-mobile; // 1.4rem
@reg-meta-desktop: @form-helper-desktop; // 1.3rem — notes, errors, samples hint
@reg-meta-mobile: @form-helper-mobile; // 1.2rem
@reg-step-num-desktop: @form-label-desktop; // 1.6rem — step circle
@reg-step-num-mobile: @form-label-mobile; // 1.4rem
@reg-btn-desktop: @form-btn-desktop; // 1.8rem
@reg-btn-mobile: @form-btn-mobile; // 1.6rem
@reg-mark-desktop: @form-helper-desktop; // 1.3rem — required asterisk
@reg-mark-mobile: @form-helper-mobile; // 1.2rem

.page-registration-new {
	overflow: hidden;
	background: @home-bg;
	color: @color-ink;
	padding-bottom: @inner-section-gap-desktop;
	box-sizing: border-box;

	/* —— Hero —— */
	.reg-new-hero {
		position: relative;
		width: 100%;
		min-height: 38rem;
		overflow: hidden;
		color: #fff;
	}

	.reg-new-hero-media {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
	}

	.reg-new-hero-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 35%;
	}

	.reg-new-hero-overlay {
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			115deg,
			rgba(8, 32, 52, 0.88) 0%,
			rgba(21, 120, 168, 0.55) 48%,
			rgba(8, 32, 52, 0.72) 100%
		);
	}

	.reg-new-hero-inner {
		position: relative;
		z-index: 2;
		.home-section-shell();
		padding: 8rem 2.8rem;
	}

	/* Full 1200px copy column — horizontal padding lives on .reg-new-main, not here */
	.reg-new-hero-copy {
		width: 100%;
		max-width: @layout-max;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.reg-new-eyebrow {
		margin: 0 0 1rem;
		font-size: @reg-eyebrow-desktop;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.82);
	}

	.reg-new-hero-title {
		margin: 0;
		font-size: @reg-display-desktop;
		line-height: 1.12;
		letter-spacing: 0.02em;
	}

	.reg-new-hero-lead {
		margin: 1.6rem 0 0;
		font-size: @reg-lead-desktop;
		line-height: 1.55;
		color: rgba(255, 255, 255, 0.92);
		width: 100%;
		max-width: 100%;

		a {
			color: #fff;
			text-decoration: underline;
			text-underline-offset: 0.2em;

			&:hover {
				color: rgba(255, 255, 255, 0.85);
			}
		}
	}

	/* —— Main shell —— */
	.reg-new-main {
		.home-section-shell();
		margin-top: -3.2rem;
		position: relative;
		z-index: 3;
		padding-left: 0;
		padding-right: 0;
	}

	.reg-new-progress {
		.form-page-card();
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-top: 7rem;
		padding-bottom: 7rem;
		padding-left: 2.4rem;
		padding-right: 2.4rem;
		overflow: hidden;
		scroll-margin-top: calc(@header-height-desktop + 2rem);
	}

	.grid-title {
		position: relative;
		width: 100%;
		color: #858585;
		font-size: 3.6rem;
		line-height: 1.2;
		text-align: center;

		.font-b {
			position: relative;
			z-index: 2;
			display: inline-block;
			padding: 1.8rem 0;
			margin: 0;
			line-height: 1.2;
		}
	}

	.grid-title .logo {
		width: 8.2rem;
		height: 8.7rem;
		z-index: 1;
		object-fit: contain;
		pointer-events: none;
	}

	.progress-wrapper {
		margin-top: 8rem;
		width: 100%;
		max-width: 100%;
		padding-left: 1.6rem;
		padding-right: 1.6rem;
		padding-bottom: 3.6rem;
		box-sizing: border-box;
	}

	.reg-new-stepper {
		gap: 0;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.dot-wrapper {
		position: relative;
		flex: 0 0 6.4rem;
		width: 6.4rem;
		min-width: 6.4rem;
		text-align: center;
	}

	.step-text {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 6.4rem;
		height: 6.4rem;
		border-radius: 50%;
		font-family: 'Gotham-med', sans-serif;
		font-size: 1.6rem;
		color: #fff;
		background: #e6e4e4;
		transition: background @transition-base;
	}

	.dot-wrapper.active .step-text {
		background: #1f94d2;
	}

	.progress-text {
		position: absolute;
		left: 50%;
		top: 7.2rem;
		transform: translateX(-50%);
		margin-top: 0;
		padding: 0;
		font-size: 2.4rem;
		line-height: 1.2;
		color: #666;
		white-space: nowrap;
		text-align: center;
	}

	.dot-wrapper.active .progress-text {
		color: #1f94d2;
		font-family: 'Gotham-med', sans-serif;
	}

	.separator-line {
		flex: 1 1 0;
		width: auto;
		min-width: 2rem;
		max-width: 30rem;
		height: 0.3rem;
		margin: 3.2rem 1rem 0;
		border-radius: @radius-pill;
		background: #e6e4e4;
		transition: background @transition-base;

		&.active {
			background: #1f94d2;
		}
	}

	/* —— Forms —— */
	.reg-new-forms {
		margin-top: 2.4rem;
	}

	#form-2,
	#form-3,
	#result {
		display: none;
	}

	.reg-new-form-panel {
		margin-bottom: 2.4rem;
	}

	.reg-new-card {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		background: transparent;
	}

	.form-body {
		.form-page-card();
		padding: 4rem 4.8rem 4.8rem;
		box-shadow: @shadow-home-card;
	}

	.reg-new-intro-note {
		margin: 0 0 2.4rem;
		padding: 1.2rem 1.6rem;
		border-radius: 1rem;
		background: rgba(31, 148, 210, 0.08);
		border: 1px solid rgba(31, 148, 210, 0.18);
		font-size: @reg-meta-desktop;
		line-height: 1.5;
		color: @color-ink-muted;
	}

	.reg-new-required-mark {
		color: #e74c3c;
		font-weight: 600;
	}

	.reg-new-section {
		margin-bottom: 3.2rem;

		&:last-of-type {
			margin-bottom: 2rem;
		}
	}

	.form-title,
	.reg-new-panel-title {
		margin: 0 0 1.6rem;
		font-family: 'Gotham-pro-bold', sans-serif;
		font-size: 2rem;
		line-height: 1.25;
		color: @color-ink;
		display: flex;
		align-items: baseline;
		gap: 0.4rem;

		span {
			color: #e74c3c;
			font-size: @reg-mark-desktop;
		}
	}

	.reg-new-panel-title {
		margin-top: 2.4rem;

		&:first-child {
			margin-top: 0;
		}
	}

	/* Radio chips */
	.reg-new-radio-grid {
		margin-top: 0;
	}

	.reg-new-radio-row {
		flex-wrap: wrap;
		gap: 1.2rem;
	}

	.radio-row-wrapper input[type="radio"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		pointer-events: none;
	}

	.radio-row-choice {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 4.4rem;
		padding: 0 2.4rem;
		border-radius: @radius-pill;
		border: 1px solid rgba(15, 23, 42, 0.14);
		background: #fff;
		font-size: @reg-label-desktop;
		color: @color-ink;
		cursor: pointer;
		transition:
			border-color @transition-fast,
			background @transition-fast,
			box-shadow @transition-fast,
			color @transition-fast;
		user-select: none;
	}

	input[type="radio"]:checked + .radio-row-choice,
	input[type="radio"]:focus-visible + .radio-row-choice {
		border-color: @color-brand;
		background: rgba(31, 148, 210, 0.1);
		color: @color-brand-deep;
		box-shadow: 0 0 0 0.3rem rgba(31, 148, 210, 0.12);
	}

	.reg-new-sample-toggle {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
		font-size: @reg-meta-desktop;
		color: @color-brand-deep;
		text-decoration: underline;
		text-underline-offset: 0.25em;

		&:hover {
			color: @color-brand;
		}
	}

	#example-container.reg-new-example-panel {
		display: none;
		margin-top: 0;
		padding: 0;
		border: none;
		background: transparent;
		box-sizing: border-box;

		&.is-open {
			display: block;
			margin-top: 2rem;
			padding: 2.4rem;
			border-radius: @radius-home-card;
			background: linear-gradient(165deg, #f8fafc 0%, #fff 55%);
			border: 1px solid rgba(15, 23, 42, 0.08);
			box-shadow:
				inset 0 1px 0 rgba(255, 255, 255, 0.9),
				@shadow-home-card;
			animation: reg-new-example-reveal 0.45s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}

	@keyframes reg-new-example-reveal {
		from {
			opacity: 0;
			transform: translateY(-0.8rem);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	#example-container .info-text-wrapper {
		margin: 0 0 2rem;
		padding: 1.6rem 2rem;
		font-size: @reg-meta-desktop;
		line-height: 1.6;
		color: @color-ink;
		background: rgba(31, 148, 210, 0.06);
		border-left: 0.4rem solid @color-brand;
		border-radius: 0 1rem 1rem 0;
		box-sizing: border-box;

		> div + div {
			margin-top: 0;
		}

		.hint-2 {
			margin-top: 1.2rem;
			color: @color-ink-muted;
		}
	}

	.reg-new-example-images {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 2rem;
	}

	#example-container .example-1 {
		position: relative;
		flex: 0 0 auto;
		width: 22rem;
		max-width: 100%;
		margin-top: 0;
		border-radius: 1rem;
		overflow: hidden;
		border: 1px solid rgba(15, 23, 42, 0.1);
		background: #fff;
		box-shadow: 0 0.4rem 1.6rem rgba(15, 23, 42, 0.1);
		transition:
			transform @transition-fast,
			box-shadow @transition-fast;

		&:hover {
			transform: translateY(-0.4rem);
			box-shadow: @shadow-home-card-hover;
		}

		&:focus-within {
			outline: 0.2rem solid rgba(31, 148, 210, 0.35);
			outline-offset: 0.2rem;
		}
	}

	/* Override global .bg-img (position:absolute) so the wrapper keeps image height */
	#example-container .example-img,
	#example-container .example-1 .bg-img {
		position: relative;
		top: auto;
		left: auto;
		cursor: zoom-in;
		width: 100%;
		height: auto;
		display: block;
		object-fit: contain;
		vertical-align: top;
		transition: transform 0.35s ease;
	}

	#example-container .example-1:hover .example-img,
	#example-container .example-1:hover .bg-img {
		transform: scale(1.02);
	}

	/* Serial rows */
	.reg-new-serial-list {
		margin-top: 2rem;
		width: 100%;

		> [id^='number-row-'] {
			display: contents;
		}
	}

	.reg-new-serial-list .reg-new-serial-row,
	.reg-new-serial-list .number-row {
		margin-bottom: 0;
		padding: 1.8rem 2rem;
		border-radius: 1.2rem;
		background: #f8fafc;
		border: 1px solid rgba(15, 23, 42, 0.08);
		box-sizing: border-box;
	}

	@reg-serial-control-height: 5.8rem;

	.reg-new-serial-list .reg-new-serial-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 2rem;
		row-gap: 0.6rem;
		align-items: center;
		width: 100%;
	}

	.reg-new-serial-list .reg-new-grid-serial-label {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	.reg-new-serial-list .reg-new-grid-upload-label {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.reg-new-serial-list .reg-new-grid-serial-input {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
	}

	.reg-new-serial-list .reg-new-grid-upload-input {
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
	}

	.reg-new-serial-list .reg-new-grid-remove {
		grid-column: 3;
		grid-row: 2;
		align-self: center;
		flex-shrink: 0;
	}

	@reg-remove-line-inner: 1.8rem;

	.reg-new-serial-list .reg-new-remove-line {
		margin: 0;
		padding: 0.5rem 1rem 0.5rem 0.85rem;
		min-height: 3.2rem;
		height: auto;
		border: 1px solid rgba(231, 76, 60, 0.28);
		border-radius: 0.6rem;
		background: rgba(231, 76, 60, 0.05);
		color: #c0392b;
		font-family: 'Gotham-pro-reg', sans-serif;
		font-size: @reg-meta-desktop;
		font-weight: 500;
		line-height: @reg-remove-line-inner;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		appearance: none;
		display: inline-flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		gap: 0.45rem;
		vertical-align: middle;
		box-sizing: border-box;
		transition:
			background @transition-fast,
			border-color @transition-fast,
			color @transition-fast,
			box-shadow @transition-fast;

		&:hover {
			color: #a93226;
			background: rgba(231, 76, 60, 0.1);
			border-color: rgba(231, 76, 60, 0.45);
			box-shadow: 0 0.2rem 0.6rem rgba(231, 76, 60, 0.12);
		}

		&:focus-visible {
			outline: 0.2rem solid rgba(231, 76, 60, 0.35);
			outline-offset: 0.15rem;
		}
	}

	.reg-new-serial-list .reg-new-remove-line__icon {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: @reg-remove-line-inner;
		height: @reg-remove-line-inner;
		margin: 0;
		padding: 0;
		line-height: 0;
		border-radius: 50%;
		background: rgba(231, 76, 60, 0.1);
		color: inherit;

		svg {
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			margin: 0;
			flex-shrink: 0;
		}
	}

	.reg-new-serial-list .reg-new-remove-line__text {
		display: block;
		flex: 0 0 auto;
		height: @reg-remove-line-inner;
		margin: 0;
		padding: 0;
		line-height: @reg-remove-line-inner;
		font-size: inherit;
		font-weight: inherit;
	}

	.reg-new-serial-list .number-value-fields,
	.reg-new-serial-list .number-value-inputs,
	.reg-new-serial-list .serial-input-wrapper,
	.reg-new-serial-list .serial-input-wrapper > .flex {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.reg-new-serial-list .serial-input-wrapper > .flex.items-center {
		display: flex;
		align-items: center;
	}

	.reg-new-serial-field {
		position: relative;
		width: 100%;
		min-width: 0;
	}

	.reg-new-serial-list .reg-new-serial-field .serial-input {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: @reg-serial-control-height;
		height: @reg-serial-control-height;
		padding-right: 5.2rem;
	}

	.reg-new-product-lookup {
		position: absolute;
		right: 0.6rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.6rem;
		height: 3.6rem;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba(31, 148, 210, 0.1);
		color: @color-brand-deep;
		cursor: pointer;
		transition:
			background @transition-fast,
			color @transition-fast,
			opacity @transition-fast;

		&:hover:not(:disabled) {
			background: @color-brand;
			color: #fff;
		}

		&:disabled {
			opacity: 0.55;
			cursor: wait;
		}

		&--hidden {
			display: none;
		}
	}

	.reg-new-product-lookup__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 0;
	}

	.number-row-wrapper {
		flex-wrap: wrap;
		gap: 2rem;
	}

	.w-50 {
		width: calc(50% - 1rem);
		box-sizing: border-box;
	}

	.number-label {
		font-size: @reg-label-desktop;
		line-height: 1.3;
		margin-bottom: 0.8rem;
		color: @color-ink;

		span {
			color: @color-brand;
		}
	}

	.serial-input,
	.input-grid input[type="text"],
	.input-grid input[type="email"] {
		.form-page-field();
		width: 100%;
		min-height: 4.8rem;
		padding: 0 1.8rem;
		border-radius: @radius-pill;
		font-size: @reg-control-desktop;
		box-sizing: border-box;
	}

	/* Full-field click opens calendar (not only the native icon) */
	.input-grid input[type="date"] {
		.form-page-field();
		position: relative;
		width: 100%;
		min-height: 4.8rem;
		padding: 0 4.4rem 0 1.8rem;
		border-radius: @radius-pill;
		font-size: @reg-control-desktop;
		box-sizing: border-box;
		cursor: pointer;
		color-scheme: light;

		&::-webkit-calendar-picker-indicator {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			opacity: 0;
			cursor: pointer;
		}
	}

	/* Country / State — custom list (native <option> popup cannot be styled reliably) */
	@reg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231578a8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	.select-view {
		.form-page-field();
		position: relative;
		width: 100%;
		min-height: 4.8rem;
		border-radius: @radius-pill;
		box-sizing: border-box;

		&:focus-within,
		&.is-open {
			outline: none;
			border-color: @color-brand;
			box-shadow: 0 0 0 0.3rem rgba(31, 148, 210, 0.14);
		}

		&.is-open {
			z-index: 25;
		}
	}

	.reg-new-select {
		padding: 0;
		cursor: default;
	}

	.reg-new-select__native {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.reg-new-select__trigger {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 4.8rem;
		margin: 0;
		padding: 0 4rem 0 1.8rem;
		border: none;
		border-radius: @radius-pill;
		background: transparent;
		text-align: left;
		font-family: 'Gotham-pro-reg', sans-serif;
		font-size: @reg-control-desktop;
		line-height: 1.4;
		color: @color-ink;
		cursor: pointer;
		box-sizing: border-box;

		&::after {
			content: '';
			position: absolute;
			right: 1.8rem;
			top: 50%;
			width: 1.2rem;
			height: 0.75rem;
			transform: translateY(-50%);
			pointer-events: none;
			background: @reg-select-chevron no-repeat center / contain;
			transition: transform @transition-fast;
		}

		.reg-new-select.is-open &::after {
			transform: translateY(-50%) rotate(180deg);
		}

		&.is-placeholder .reg-new-select__value {
			color: rgba(18, 18, 18, 0.38);
		}

		&:focus-visible {
			outline: none;
		}
	}

	.reg-new-select__value {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.reg-new-select__menu {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 0.8rem);
		margin: 0;
		padding: 0.8rem 0;
		list-style: none;
		background: #fff;
		border: 1px solid rgba(15, 23, 42, 0.1);
		border-radius: 1.2rem;
		box-shadow:
			0 1.6rem 4rem rgba(15, 23, 42, 0.12),
			0 0 0 1px rgba(15, 23, 42, 0.04);
		max-height: 28rem;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 30;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			width: 0.6rem;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(15, 23, 42, 0.18);
			border-radius: 999px;
		}
	}

	.reg-new-select__option {
		padding: 1.1rem 1.8rem;
		font-family: 'Gotham-pro-reg', sans-serif;
		font-size: @reg-control-desktop;
		line-height: 1.35;
		color: @color-ink;
		cursor: pointer;
		transition:
			background @transition-fast,
			color @transition-fast;

		&:hover,
		&:focus {
			background: rgba(31, 148, 210, 0.08);
			color: @color-brand-deep;
			outline: none;
		}

		&.is-selected {
			background: rgba(31, 148, 210, 0.12);
			color: @color-brand-deep;
			font-family: 'Gotham-med', sans-serif;
		}

		& + & {
			border-top: 1px solid rgba(15, 23, 42, 0.06);
		}
	}

	.reg-new-field {
		margin-bottom: 2rem;
	}

	.reg-new-field-row {
		flex-wrap: wrap;
		gap: 2rem;
		margin-bottom: 0;

		.input-left,
		.input-right {
			width: calc(50% - 1rem);
			box-sizing: border-box;
		}
	}

	.label {
		display: block;
		margin-bottom: 0.6rem;
		font-size: @reg-label-desktop;
		color: @color-ink;

		span {
			color: #e74c3c;
			font-size: @reg-mark-desktop;
		}
	}

	/* Compact nameplate upload — align with original registration.less (~58px row) */
	.reg-new-serial-list .upload-content .content-img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: @reg-serial-control-height;
		height: @reg-serial-control-height;
		padding: 0.25rem 0.55rem;
		border-radius: 10rem;
		border: 1px dashed rgba(31, 148, 210, 0.45);
		background: #fff;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		isolation: isolate;
	}

	.reg-new-serial-list .upload-pic-itp {
		flex: 1;
		min-width: 0;
		padding-left: 2rem;
		font-size: @reg-meta-desktop;
		line-height: 1.35;
		color: #9ca2a2;
	}

	.reg-new-serial-list .upload-content .file {
		position: relative;
		flex-shrink: 0;
		width: 5rem;
		height: 5rem;
		margin: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		line-height: 1;
		vertical-align: middle;
	}

	.reg-new-serial-list .upload-content .content-img .gcl-add {
		width: 2.4rem;
		height: 2.4rem;
	}

	.reg-new-serial-list .upload-content .content-img-list {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		height: 100%;
		max-height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		box-sizing: border-box;
		list-style: none;
	}

	.reg-new-serial-list .upload-content .content-img-list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.4rem;
		width: 100%;
		height: 100%;
		max-height: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0.35rem;
		background: #f8fafc;
		overflow: hidden;
		box-sizing: border-box;
	}

	.reg-new-serial-list .upload-content .content-img-list-item img {
		flex: 1 1 auto;
		align-self: center;
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		margin: 0;
		padding: 0;
		border-radius: 0.25rem;
		object-fit: contain;
		object-position: center center;
		background: transparent;
		box-sizing: border-box;
	}

	.reg-new-serial-list .upload-content .content-img-list-item > div {
		position: static;
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: flex-end;
		gap: 0.45rem;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
	}

	.reg-new-serial-list .upload-content .content-img-list-item .delete-btn,
	.reg-new-serial-list .upload-content .content-img-list-item .big-btn {
		display: inline-flex;
		flex: 0 0 2.6rem;
		align-items: center;
		justify-content: center;
		width: 2.6rem;
		height: 2.6rem;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(15, 23, 42, 0.12);
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0.1rem 0.35rem rgba(15, 23, 42, 0.1);
		text-decoration: none;
		cursor: pointer;
		box-sizing: border-box;
		transition:
			background @transition-fast,
			border-color @transition-fast,
			box-shadow @transition-fast;

		&:hover {
			background: #f8fafc;
			border-color: rgba(31, 148, 210, 0.35);
			box-shadow: 0 0.15rem 0.5rem rgba(15, 23, 42, 0.12);
		}
	}

	.reg-new-serial-list .upload-content .content-img-list-item .delete-btn:hover {
		border-color: rgba(231, 76, 60, 0.45);
	}

	/* Icons: self-hosted SVG (del2/big2 not loaded on this page) */
	.reg-new-serial-list .upload-content .content-img-list-item .gcl {
		display: block;
		width: 1.6rem;
		height: 1.6rem;
		font-size: 0;
		line-height: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.reg-new-serial-list .upload-content .content-img-list-item .gcllajitong {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6' stroke='%23c0392b' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	.reg-new-serial-list .upload-content .content-img-list-item .gclfangda {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10' cy='10' r='6.5' stroke='%231f94d2' stroke-width='1.75'/%3E%3Cpath d='M15 15l5 5' stroke='%231f94d2' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	.reg-new-add-row {
		margin-top: 1.2rem;
		padding: 0.5rem 1.25rem 0.5rem 0.95rem;
		min-height: 3.6rem;
		border: 1px solid @color-brand;
		border-radius: 0.6rem;
		background: @color-brand;
		color: #fff;
		font-family: 'Gotham-pro-reg', sans-serif;
		font-size: @reg-label-desktop;
		font-weight: 500;
		line-height: 1;
		cursor: pointer;
		appearance: none;
		display: inline-flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		box-shadow: 0 0.2rem 0.8rem rgba(31, 148, 210, 0.28);
		box-sizing: border-box;
		transition:
			background @transition-fast,
			border-color @transition-fast,
			box-shadow @transition-fast,
			transform @transition-fast;

		&:hover {
			background: @color-brand-deep;
			border-color: @color-brand-deep;
			box-shadow: 0 0.3rem 1.2rem rgba(21, 120, 168, 0.35);
			transform: translateY(-0.05rem);
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 0.15rem 0.5rem rgba(21, 120, 168, 0.3);
		}

		&:focus-visible {
			outline: 0.2rem solid rgba(255, 255, 255, 0.9);
			outline-offset: 0.15rem;
		}
	}

	.reg-new-add-row__icon {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 1.8rem;
		height: 1.8rem;
		margin: 0;
		padding: 0;
		line-height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.22);
		color: #fff;

		svg {
			display: block;
			width: 1.4rem;
			height: 1.4rem;
			margin: 0;
		}
	}

	.reg-new-add-row__text {
		display: block;
		flex: 0 0 auto;
		height: 1.8rem;
		margin: 0;
		padding: 0;
		line-height: 1.8rem;
		font-size: inherit;
		font-weight: inherit;
	}

	.reg-new-delete-row,
	.delete-button {
		margin-top: 1.6rem;
		padding: 0.8rem 2rem;
		border: 1px solid rgba(231, 76, 60, 0.45);
		border-radius: @radius-pill;
		background: #fff;
		color: #c0392b;
		font-size: @reg-meta-desktop;
		cursor: pointer;
		transition:
			background @transition-fast,
			border-color @transition-fast;

		&:hover {
			background: rgba(231, 76, 60, 0.06);
			border-color: #e74c3c;
		}
	}

	/* Serial-row remove: compact action chip (not the full-height pill .delete-button above) */
	.reg-new-serial-list .delete-button.reg-new-remove-line {
		margin: 0;
		display: inline-flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		vertical-align: middle;

		.reg-new-remove-line__icon,
		.reg-new-remove-line__text {
			vertical-align: middle;
		}
	}

	.number-error {
		display: none;
		margin-top: 1rem;
		font-size: @reg-meta-desktop;
		color: #e74c3c;
	}

	.error-message {
		display: none;
		margin-top: 0.6rem;
		font-size: @reg-meta-desktop;
		color: #e74c3c;
		line-height: 1.35;
	}

	.reg-new-support-callout {
		margin: 2.4rem 0 0;
		padding: 1.6rem 2rem;
		border-radius: 1rem;
		background: linear-gradient(135deg, rgba(31, 148, 210, 0.08), rgba(21, 120, 168, 0.04));
		border-left: 0.35rem solid @color-brand;
		font-size: @reg-meta-desktop;
		line-height: 1.55;
		color: @color-ink-muted;

		a {
			color: @color-brand-deep;
			font-weight: 500;
			text-decoration: underline;
		}
	}

	.reg-new-actions {
		padding: 2.4rem 0 0;
		gap: 1.6rem;
	}

	.back-button,
	.next-button,
	.submit-button,
	.button-primary {
		.form-page-primary-btn();
		font-size: @reg-btn-desktop;
		min-width: 16rem;
		min-height: 4.8rem;
		padding: 0 3.2rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.back-button,
	.button-secondary {
		background: #fff;
		color: @color-brand-deep;
		border: 1px solid @color-brand;
		box-shadow: none;

		&:hover {
			background: rgba(31, 148, 210, 0.08) !important;
			border-color: @color-brand-deep !important;
			box-shadow: none !important;
		}
	}

	/* Result */
	.reg-new-result {
		.form-page-card();
		padding: 4rem;
		text-align: center;

		.cert_url {
			max-width: 100%;
			height: auto;
			border-radius: 0.8rem;
			box-shadow: @shadow-home-card;
		}
	}

	/* Modals — fixed overlay */
	@reg-modal-panel-width: ~"min(92vw, 72rem)"; /* ~720px — matches comfortable reading width */
	@reg-modal-panel-padding: 3.2rem 4rem;

	.reg-new-modal {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2.4rem;
		box-sizing: border-box;
		background: rgba(15, 23, 42, 0.55);
		backdrop-filter: blur(4px);
		z-index: 200;
		overflow-y: auto;

		&.hidden {
			display: none !important;
		}
	}

	.reg-new-modal-panel,
	.reg-new-modal .popup-content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: @reg-modal-panel-width;
		max-width: @reg-modal-panel-width;
		padding: @reg-modal-panel-padding;
		border-radius: @radius-home-card;
		background: #fff;
		box-shadow: 0 2.4rem 6rem rgba(15, 23, 42, 0.2);
		box-sizing: border-box;
	}

	#example-popup-img {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 0.6rem;
	}

	.reg-new-modal-panel {
		img:not(#example-popup-img) {
			max-width: 100%;
			height: auto;
			border-radius: 0.6rem;
		}
	}

	#example-popup .reg-new-modal-panel,
	#example-popup .popup-content {
		align-items: center;
	}

	#tip-popup .popup-title {
		font-family: 'Gotham-pro-bold', sans-serif;
		font-size: @reg-section-desktop;
		margin: 0 0 2rem;
		padding: 0;
		text-align: center;
		color: @color-ink;
	}

	#tip-popup .popup-main {
		width: 100%;
		max-width: 100%;
		min-height: 0;
		padding: 0;
		font-size: @reg-lead-desktop;
		line-height: 1.55;
		color: @color-ink-muted;
		text-align: left;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	#tip-popup .reg-new-modal-close,
	#tip-popup .popup-close,
	#product-info-popup .reg-new-modal-close,
	#product-info-popup .popup-close {
		align-self: center;
		margin-top: 2.4rem;
	}

	#product-info-popup .popup-title {
		font-family: 'Gotham-pro-bold', sans-serif;
		font-size: @reg-section-desktop;
		margin: 0 0 2rem;
		padding: 0;
		text-align: center;
		color: @color-ink;
	}

	.reg-new-product-info-body {
		width: 100%;
		text-align: left;
	}

	.reg-new-product-info-intro {
		margin: 0 0 1.6rem;
		font-size: @reg-lead-desktop;
		line-height: 1.55;
		color: @color-ink-muted;
	}

	.reg-new-product-info-empty {
		margin: 0;
		font-size: @reg-lead-desktop;
		line-height: 1.55;
		color: @color-ink-muted;
	}

	.reg-new-product-info-list {
		margin: 0;
		padding: 0;
	}

	.reg-new-product-info-row {
		display: grid;
		grid-template-columns: 14rem 1fr;
		gap: 1.2rem 2rem;
		padding: 1.2rem 0;
		border-bottom: 1px solid rgba(15, 23, 42, 0.08);

		&:last-child {
			border-bottom: none;
		}

		dt {
			margin: 0;
			font-family: 'Gotham-med', sans-serif;
			font-size: @reg-label-desktop;
			color: @color-ink;
		}

		dd {
			margin: 0;
			font-size: @reg-control-desktop;
			line-height: 1.45;
			color: @color-ink-muted;
			word-break: break-word;
		}
	}

	.reg-new-modal-close,
	.close-wrapper {
		padding: 0.8rem 2.4rem;
		border: none;
		border-radius: @radius-pill;
		background: @color-brand;
		color: #fff;
		font-size: @reg-page-desc-desktop;
		cursor: pointer;
		transition: background @transition-fast;

		&:hover {
			background: @color-brand-deep;
		}
	}

	#example-popup .close-wrapper {
		margin-top: 2rem;
		align-self: center;
	}
}

@media screen and (max-width: @bp-mobile) {
	.page-registration-new {
		padding-bottom: @inner-section-gap-mobile;

		.reg-new-hero {
			min-height: 32rem;
		}

		.reg-new-hero-inner {
			padding: calc(@header-height-mobile + 0rem) 1.6rem 6.4rem;
		}

		.reg-new-eyebrow {
			font-size: @reg-eyebrow-mobile;
		}

		.reg-new-hero-title {
			font-size: @reg-display-mobile;
		}

		.reg-new-hero-lead {
			font-size: @reg-lead-mobile;
		}

		.reg-new-main {
			margin-top: -2rem;
			padding-left: 1.6rem;
			padding-right: 1.6rem;
		}

		.reg-new-progress {
			padding-top: 0;
			padding-bottom: 3.2rem;
			padding-left: 1.6rem;
			padding-right: 1.6rem;
			scroll-margin-top: calc(@header-height-mobile + 1rem);
		}

		.grid-title {
			font-size: 2.2rem;
			margin-bottom: 3.2rem;
			margin-top: 3.2rem;
			.font-b {
				padding: 1.2rem 0;
			}
		}

		.grid-title .logo {
			width: 6.2rem;
			height: 6.5rem;
		}

		.progress-wrapper {
			margin-top: 0;
			padding-bottom: 0;
		}

		.step-text {
			font-size: @reg-step-num-mobile;
		}

		.reg-new-stepper,
		.progress-wrapper {
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
		}

		.dot-wrapper {
			flex: 0 0 5rem;
			width: 5rem;
			min-width: 5rem;
			text-align: center;
		}

		.step-text {
			width: 5rem;
			height: 5rem;
			font-size: @reg-step-num-mobile;
		}

		.progress-text {
			display: none;
		}

		.separator-line {
			display: block;
			flex: 1 1 0;
			min-width: 1.2rem;
			max-width: 12rem;
			margin: 2.4rem 0.8rem 0;
		}

		.form-body {
			padding: 2.4rem 1.6rem 3.2rem;
		}

		.w-50,
		.reg-new-field-row .input-left,
		.reg-new-field-row .input-right {
			width: 100%;
		}

		.reg-new-serial-list .reg-new-serial-grid {
			grid-template-columns: 1fr;
			row-gap: 0.8rem;
		}

		/* Stack: serial label → serial input → upload label → upload → remove */
		.reg-new-serial-list .reg-new-grid-serial-label {
			grid-column: 1;
			grid-row: 1;
		}

		.reg-new-serial-list .reg-new-grid-serial-input {
			grid-column: 1;
			grid-row: 2;
		}

		.reg-new-serial-list .reg-new-grid-upload-label {
			grid-column: 1;
			grid-row: 3;
			margin-top: 0.4rem;
		}

		.reg-new-serial-list .reg-new-grid-upload-input {
			grid-column: 1;
			grid-row: 4;
		}

		.reg-new-serial-list .reg-new-grid-remove {
			grid-column: 1;
			grid-row: 5;
			justify-self: flex-end;
			margin-top: 0.4rem;
		}

		.reg-new-serial-list .reg-new-serial-row,
		.reg-new-serial-list .number-row {
			padding: 1.4rem 1.2rem;
		}

		.reg-new-serial-list .reg-new-remove-line {
			min-height: 3rem;
			padding: 0.45rem 0.85rem 0.45rem 0.75rem;
			font-size: @reg-meta-mobile;
			line-height: 1.6rem;
			gap: 0.4rem;
		}

		.reg-new-serial-list .reg-new-remove-line__icon {
			width: 1.6rem;
			height: 1.6rem;

			svg {
				width: 1.35rem;
				height: 1.35rem;
			}
		}

		.reg-new-serial-list .reg-new-remove-line__text {
			height: 1.6rem;
			line-height: 1.6rem;
		}

		.reg-new-serial-list .serial-input {
			min-height: 5.2rem;
			height: 5.2rem;
		}

		.reg-new-serial-list .upload-content .content-img {
			min-height: 5.2rem;
			height: 5.2rem;
		}

		.reg-new-serial-list .upload-content .content-img-list {
			height: 5.2rem;
			min-height: 5.2rem;
		}

		.reg-new-serial-list .upload-pic-itp {
			padding-left: 1.4rem;
			font-size: @reg-meta-mobile;
		}

		.reg-new-serial-list .upload-content .file {
			width: 4.4rem;
			height: 4.4rem;
		}

		.reg-new-serial-list .upload-content .content-img .gcl-add {
			width: 2rem;
			height: 2rem;
		}

		.reg-new-radio-row {
			flex-direction: column;
			align-items: stretch;
		}

		.radio-row-choice {
			width: 100%;
			box-sizing: border-box;
		}

		.reg-new-actions {
			flex-direction: column-reverse;
			align-items: stretch;

			.back-button,
			.next-button,
			.submit-button {
				width: 100%;
				margin-right: 0;
			}
		}

		#example-container.reg-new-example-panel.is-open {
			margin-top: 1.6rem;
			padding: 1.6rem;
		}

		#example-container .info-text-wrapper {
			padding: 1.2rem 1.4rem;
			margin-bottom: 1.6rem;
			border-radius: 0 0.8rem 0.8rem 0;
		}

		#example-container .example-1 {
			width: 100%;
		}

		.reg-new-intro-note,
		.reg-new-sample-toggle,
		.info-text-wrapper,
		.number-error,
		.error-message,
		.reg-new-support-callout,
		.reg-new-delete-row,
		.delete-button {
			font-size: @reg-meta-mobile;
		}

		.form-title,
		.reg-new-panel-title {
			font-size: @reg-section-mobile;

			span {
				font-size: @reg-mark-mobile;
			}
		}

		.label,
		.number-label,
		.radio-row-choice,
		.reg-new-add-row {
			width: 100%;
			min-height: 3.2rem;
			padding: 0.45rem 1rem 0.45rem 0.85rem;
			font-size: @reg-label-mobile;
		}

		.reg-new-add-row__icon {
			width: 1.6rem;
			height: 1.6rem;

			svg {
				width: 1.25rem;
				height: 1.25rem;
			}
		}

		.reg-new-add-row__text {
			height: 1.6rem;
			line-height: 1.6rem;
		}

		.label span {
			font-size: @reg-mark-mobile;
		}

		.serial-input,
		.input-grid input[type="text"],
		.input-grid input[type="email"],
		.input-grid input[type="date"] {
			font-size: @reg-control-mobile;
		}

		.input-grid input[type="date"] {
			padding: 0 4rem 0 1.6rem;
		}

		.select-view {
			min-height: 4.4rem;
		}

		.reg-new-select__trigger {
			min-height: 4.4rem;
			padding: 0 3.6rem 0 1.6rem;
			font-size: @reg-control-mobile;

			&::after {
				right: 1.4rem;
			}
		}

		.reg-new-select__menu {
			max-height: 22rem;
			border-radius: 1rem;
		}

		.reg-new-select__option {
			padding: 1rem 1.6rem;
			font-size: @reg-control-mobile;
		}

		.back-button,
		.next-button,
		.submit-button,
		.button-primary {
			font-size: @reg-btn-mobile;
		}

		.reg-new-modal {
			padding: 1.6rem;
		}

		.reg-new-modal-panel,
		.reg-new-modal .popup-content {
			width: ~"min(94vw, 72rem)";
			max-width: ~"min(94vw, 72rem)";
			padding: 2.4rem 2rem;
		}

		#tip-popup .popup-title {
			font-size: @reg-section-mobile;
			margin-bottom: 1.6rem;
		}

		#tip-popup .popup-main {
			font-size: @reg-lead-mobile;
			line-height: 1.5;
		}

		#product-info-popup .popup-title {
			font-size: @reg-section-mobile;
		}

		.reg-new-product-info-intro,
		.reg-new-product-info-empty {
			font-size: @reg-lead-mobile;
		}

		.reg-new-product-info-row {
			grid-template-columns: 1fr;
			gap: 0.4rem;
		}

		.reg-new-modal-close,
		.close-wrapper {
			font-size: @reg-page-desc-mobile;
		}
	}
}

/* OCR recognition result ($.confirm on upload) */
.dialog-modal-confirm:has(.reg-ocr-dialog) {
	width: ~"min(92vw, 72rem)";
	max-width: ~"min(92vw, 72rem)" !important;

	.dialog-modal-title {
		font-family: 'Gotham-pro-bold', sans-serif;
		font-size: @reg-section-desktop;
		color: @color-ink;
	}

	.dialog-modal-text {
		padding: 1.6rem 2.4rem 2.4rem;
		text-align: left;
		max-height: 70vh;
		overflow-y: auto;
	}
}

.reg-ocr-dialog {
	width: 100%;
	box-sizing: border-box;
}

.reg-ocr-hints {
	margin: 0 0 2.8rem;
	padding: 1.8rem 2.2rem;
	border-radius: 0 1rem 1rem 0;
	background: linear-gradient(135deg, rgba(31, 148, 210, 0.12), rgba(31, 148, 210, 0.04));
	border-left: 0.4rem solid @color-brand;
	box-sizing: border-box;
}

.reg-ocr-hint {
	margin: 0;
	font-size: @reg-label-desktop;
	line-height: 1.55;
	color: @color-ink;

	& + & {
		margin-top: 1.2rem;
	}
}

.reg-ocr-results {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 0;
	margin: 0;
	max-height: none;
	overflow: visible;
}

.reg-ocr-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 1.2rem;
	margin: 0 !important;
}

.reg-ocr-value {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 1.2rem 1.6rem;
	font-size: @reg-control-desktop;
	line-height: 1.4;
	color: @color-ink;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 0.8rem;
	background: #f8fafc;
	box-sizing: border-box;

	&:focus {
		border-color: @color-brand;
		background: #fff;
		outline: none;
		box-shadow: 0 0 0 3px rgba(31, 148, 210, 0.15);
	}
}

.reg-ocr-select {
	flex-shrink: 0;
	align-self: center;
	margin: 0 !important;
	padding: 1rem 2rem;
	border: none;
	border-radius: @radius-pill;
	background: @color-brand;
	color: #fff;
	font-family: 'Gotham-med', sans-serif;
	font-size: @reg-label-desktop;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background @transition-fast;

	&:hover {
		background: @color-brand-deep;
	}
}

@media screen and (max-width: @bp-mobile) {
	.dialog-modal-confirm:has(.reg-ocr-dialog) {
		width: ~"min(94vw, 72rem)";
		max-width: ~"min(94vw, 72rem)" !important;

		.dialog-modal-title {
			font-size: @reg-section-mobile;
		}

		.dialog-modal-text {
			padding: 1.2rem 1.6rem 2rem;
		}
	}

	.reg-ocr-hints {
		margin-bottom: 2rem;
		padding: 1.4rem 1.6rem;
	}

	.reg-ocr-hint {
		font-size: @reg-label-mobile;
	}

	.reg-ocr-row {
		flex-direction: row;
		align-items: stretch;
	}

	.reg-ocr-value {
		font-size: @reg-control-mobile;
		padding: 1rem 1.2rem;
	}

	.reg-ocr-select {
		padding: 0.9rem 1.4rem;
		font-size: @reg-label-mobile;
	}
}

// Validation toasts ($.toast instead of inline .error-message on this page)
.dialog-modal.dialog-modal-toast {
	max-width: ~"min(36rem, 92vw)";
	padding: 1.4rem 2rem;
	border-radius: 0.8rem;
	background: rgba(28, 32, 38, 0.92);

	.dialog-modal-text {
		font-size: 1.5rem;
		line-height: 1.45;
		color: #fff;
	}
}