@charset "utf-8";

.l-content .m-container {
	max-width: 1200px !important;
}

/* ── STEPPER BAR ── */
.l-content .stepper-bar {
	background: #ffffff;
	border-bottom: 2px solid #d6d9df;
	padding: 20px 28px 0;
}

.l-content .stepper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 700px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 0;
}

/* Step connector behind the circles */
.l-content .stepper::before {
	content: '';
	position: absolute;
	top: 19px;
	left: calc(12.5% + 19px);
	right: calc(12.5% + 19px);
	height: 3px;
	background: #d6d9df;
	z-index: 0;
}

.l-content .step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	cursor: pointer;
	position: relative;
	z-index: 1;
	padding-bottom: 16px;
}

.l-content a,
.l-content button,
.l-content select,
.l-content input[type="button"],
.l-content input[type="submit"],
.l-content [onclick],
.l-content .btn,
.l-content .btn-add-card,
.l-content .btn-add-main,
.l-content .qty-btn,
.l-content .summary-mini-btn,
.l-content .oi-rm {
	cursor: pointer;
}

.l-content .step-item.locked {
	cursor: default;
	pointer-events: none;
}

.l-content .step-item.locked .step-circle,
.l-content .step-item.locked .step-label {
	opacity: .65;
}

.l-content .step-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	border: 3px solid #d6d9df;
	background: #ffffff;
	color: #8a90a8;
	transition: all .25s;
	position: relative;
	z-index: 2;
}

.l-content .step-item.active .step-circle {
	background: #ffcc00;
	border-color: #ffcc00;
	color: #000000;
	box-shadow: 0 0 0 4px rgba(245, 168, 0, .2);
}

.l-content .step-item.done .step-circle {
	background: #ffcc00;
	border-color: #ffcc00;
	color: #fff;
}

.l-content .step-label {
	margin-top: 7px;
	font-size: 11px;
	letter-spacing: 1px;
	color: #8a90a8;
	text-align: center;
	line-height: 1.3;
	font-weight: 500;
	text-transform: uppercase;
}

.l-content .step-item.active .step-label {
	color: #1a1e2e;
	font-weight: 600;
}

.l-content .step-item.done .step-label {
	color: #4a5068;
}

/* ── MAIN LAYOUT ── */
.l-content .layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	min-height: calc(100vh - 148px);
}

/* ── PANEL ── */
.l-content .panel {
	display: none;
	margin-top: 20px;
	animation: fadeIn .2s ease;
}

.l-content .panel.active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

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

.l-content .section-label,
.l-content .selected-side-title,
.l-content .download-status-title {
	font-size: 16px;
	color: #ffcc00;
	text-transform: uppercase;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.l-content .section-label::after,
.l-content .selected-side-title::after,
.l-content .download-status-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #d6d9df;
}

/* ── FORM ── */
.l-content .field-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

.l-content .step-one-grid,
.l-content .selection-step-layout,
.l-content .download-step-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 20px;
	align-items: start;
}

.l-content .step-one-visuals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.l-content .step-one-image-card {
	background: #ffffff;
	border: 1.5px solid #404854;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.l-content .step-one-image-title {
	background: #000;
	color: #ffcc00;
	padding: 8px 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}

.l-content .step-one-image-stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	background: #fff;
}

.l-content .step-one-image-stage img {
	max-width: 100%;
	max-height: 185px;
	object-fit: contain;
}

.l-content .pipe-config-card,
.l-content .selected-side-panel,
.l-content .download-side-panel {
	background: #000000;
	border-left: 1px solid #d6d9df;
	padding: 14px 16px 18px;
	box-shadow: 0 1px 10px rgba(20, 25, 40, .06);
	border-radius: 10px;
}

.l-content .pipe-config-card .field-group {
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 11px;
}

.l-content .pipe-config-card .btn-row {
	margin-top: 16px;
}

.l-content .m-container.step-one .layout,
.l-content .m-container.step-two .layout,
.l-content .m-container.step-three .layout,
.l-content .m-container.step-four .layout {
	grid-template-columns: 1fr;
}

.l-content .m-container.step-one .global-sidebar,
.l-content .m-container.step-one .global-order-summary,
.l-content .m-container.step-one .global-actions,
.l-content .m-container.step-two .global-sidebar,
.l-content .m-container.step-two .global-order-summary,
.l-content .m-container.step-two .global-actions,
.l-content .m-container.step-three .global-sidebar,
.l-content .m-container.step-three .global-order-summary,
.l-content .m-container.step-three .global-actions,
.l-content .m-container.step-four .global-sidebar,
.l-content .m-container.step-four .global-order-summary,
.l-content .m-container.step-four .global-actions {
	display: none;
}

.l-content .field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.l-content .field-label {
	font-size: 12px;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 600;
}

.l-content .req {
	color: #e03030;
	margin-right: 3px;
}

.l-content .m-container select,
.l-content .m-container input[type="number"] {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	padding: 5px;
	font-size: 12px;
	line-height: 1.5;
	border: 1px solid #a7a7a7;
	box-shadow: inset 0 1px rgba(0, 0, 0, .1);
}

.l-content .m-container select:focus,
.l-content .m-container input:focus {
	border-color: #ffcc00;
	box-shadow: 0 0 0 3px rgba(245, 168, 0, .15);
}

.l-content .m-container select {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	padding: 5px;
	font-size: 12px;
	line-height: 1.5;
	border: 1px solid #a7a7a7;
	box-shadow: inset 0 1px rgba(0, 0, 0, .1);
	padding-right: 28px;
	cursor: pointer;
}

.l-content .input-unit {
	display: flex;
	align-items: stretch;
}

.l-content .input-unit input {
	border-radius: 4px 0 0 4px;
	border-right: none;
	flex: 1;
}

.l-content .unit-badge {
	background: #eceef2;
	border: 1.5px solid #d6d9df;
	border-radius: 0 4px 4px 0;
	padding: 0 12px;
	display: flex;
	align-items: center;
	color: #8a90a8;
	font-size: 12px;
}

.l-content .range-hint {
	font-size: 11px;
	color: #FFFFFF;
	margin-top: 3px;
}

.l-content .qty-control {
	display: flex;
}

.l-content .qty-btn {
	background: #eceef2;
	border: 1.5px solid #d6d9df;
	color: #1a1e2e;
	width: 38px;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}

.l-content .qty-btn:first-child {
	border-radius: 4px 0 0 4px;
	border-right: none;
}

.l-content .qty-btn:last-child {
	border-radius: 0 4px 4px 0;
	border-left: none;
}

.l-content .qty-btn:hover {
	background: #d6d9df;
}

.l-content .qty-input {
	flex: 1;
	text-align: center;
	border-radius: 0;
	min-width: 0;
}

/* ── PARTS GRID ── */
.l-content .parts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.l-content .part-card {
	background: #ffffff;
	border: 1.5px solid #d6d9df;
	border-radius: 6px;
	cursor: default;
	transition: border-color .2s, box-shadow .2s;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.l-content .part-card:hover {
	border-color: #b0b5be;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.l-content .card-photo {
	width: 100%;
	aspect-ratio: 1.1;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #d6d9df;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.l-content .card-photo svg {
	width: 66%;
	height: 66%;
}

.l-content .card-photo img {
	mix-blend-mode: multiply;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.l-content .card-body {
	padding: 9px 11px;
}

.l-content .card-code {
	font-size: 10px;
	color: #1a2d6b;
	margin-bottom: 3px;
	font-weight: 600;
}

.l-content .card-name {
	font-size: 13px;
	color: #1a1e2e;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 2px;
}

.l-content .card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 10px;
	border-top: 1px solid #d6d9df;
	margin-top: auto;
	background: #f5f6f8;
}

.l-content .card-qty {
	display: flex;
	align-items: center;
	gap: 4px;
}

.l-content .card-qty button {
	background: #ffffff;
	border: 1px solid #d6d9df;
	color: #1a1e2e;
	width: 22px;
	height: 22px;
	cursor: pointer;
	font-size: 14px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}

.l-content .card-qty button:hover {
	background: #d6d9df;
	color: #1a1e2e;
}

.l-content .card-qty span {
	font-size: 13px;
	min-width: 18px;
	text-align: center;
}

.l-content .btn-add-card {
	background: #000;
	border: none;
	color: #ffcc00;
	padding: 3px 10px;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 3px;
	transition: background .15s;
}

.l-content .btn-add-card:hover {
	opacity: 0.9;
}

/* ── BUTTONS ── */
.l-content .btn-row {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.l-content .btn-row-vertical {
	display: grid;
 grid-auto-flow: column;
	width: 100%;
}

.l-content .btn {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 2px 7px;
	border-radius: 2px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMBAMAAABCcoqQAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURQAAAP///////////////////////////////////////////////////////6FIq5sAAAAOdFJOUwA0/u/wYmNkBOChChARXGolTAAAACxJREFUCNdjKDJkAAJ2ZQEQlQTmsCFzuF42AMkgRyDBqiKAykwCMRnObgASAO6EB2im/ImLAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: 11px center;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none !important;
	border: none;
	color: #fff !important;
	transition: background .4s ease;
}

.l-content .btn:hover {
	opacity: 0.8;
}

.l-content .btn-primary {
	background: #1a2d6b;
	color: #fff;
}

.l-content .btn-primary:hover {
	background: #2a3e88;
}

.l-content .btn-back {
	border-radius: 2px;
 background-color: #fff;
 box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
	color: #333 !important;
}

.l-content .btn-back:hover {
	opacity: .85;
}

.l-content .btn-gold {
	background-color: #ff730a !important;
	box-shadow: inset 0 1px 0 0 #ffab6c, 0 2px 0 0 rgba(0, 0, 0, 0.1);
	color: #fff !important;
}

.l-content .btn-csv {
	background: #004bb1;
	color: #fff;
}

.l-content .btn-csv:hover {
	opacity: 0.9;
}

.l-content .selection-main {
	min-width: 0;
}

.l-content .selected-items-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 126px;
}

.l-content .selected-pill {
	border: 2px solid #1a2d6b;
	border-radius: 8px;
	background: #fff;
	padding: 9px 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.l-content .selected-pill-title {
	font-size: 13px;
	font-weight: 600;
	color: #1a1e2e;
	line-height: 1.2;
}

.l-content .selected-pill-code {
	font-size: 12px;
	color: #1a2d6b;
	line-height: 1.25;
	margin-top: 2px;
}

.l-content .selected-pill-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.l-content .selected-pill-qty {
	font-size: 12px;
	font-weight: 700;
	color: #1a1e2e;
	background: #eceef2;
	border-radius: 3px;
	padding: 2px 7px;
}


/* ── SIDEBAR ── */
.l-content .sidebar {
	padding: 18px 16px;
	background: #ffffff;
	border-left: 1px solid #d6d9df;
	position: sticky;
	top: 54px;
	height: calc(100vh - 54px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.l-content .sidebar-title {
	font-size: 10px;
	letter-spacing: 3px;
	color: #8a90a8;
	text-transform: uppercase;
	margin-bottom: 4px;
	font-weight: 600;
}

.l-content .pn-box {
	background: #1a2d6b;
	border-radius: 6px;
	padding: 14px;
	border-left: 4px solid #ffcc00;
}

.l-content .generated-pn-box {
	display: none;
}

.l-content .generated-pn-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.l-content .global-order-summary {
	flex: 1;
}

.l-content .pn-label {
	font-size: 10px;
	letter-spacing: 2px;
	color: #7a84aa;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.l-content .pn-value {
	font-size: 16px;
	color: #ffc233;
	word-break: break-all;
	font-weight: 700;
}

.l-content .pn-meta {
	font-size: 11px;
	color: #aab0cc;
	margin-top: 4px;
}

.l-content .order-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.l-content .order-item {
	background: #f5f6f8;
	border: 1px solid #d6d9df;
	border-radius: 4px;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
}

.l-content .oi-code {
	font-size: 11px;
	color: #1a2d6b;
	font-weight: 700;
}

.l-content .oi-desc {
	font-size: 10px;
	color: #8a90a8;
	margin-top: 1px;
}

.l-content .oi-qty {
	font-size: 11px;
	color: #4a5068;
	background: #eceef2;
	padding: 2px 7px;
	border-radius: 3px;
	flex-shrink: 0;
}

.l-content .oi-rm {
	background: none;
	border: none;
	color: #8a90a8;
	cursor: pointer;
	font-size: 12px;
	padding: 0 2px;
	flex-shrink: 0;
}

.l-content .oi-rm:hover {
	color: #e03030;
}

.l-content .empty-state {
	color: #8a90a8;
	font-size: 11px;
	text-align: center;
	padding: 16px;
	border: 1.5px dashed #d6d9df;
	border-radius: 4px;
	letter-spacing: 1px;
}

.l-content .btn-add-main {
	display: block;
	width: 100%;
	background: #1a2d6b;
	color: #fff;
	padding: 11px;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	margin-top: auto;
	transition: background .15s;
	font-weight: 700;
}

.l-content .btn-add-main:hover {
	background: #2a3e88;
}
.l-content .download-main {
	min-width: 0;
}

.l-content .download-status-badge {
	border: 1.5px solid #009839;
	border-radius: 6px;
	color: #009839;
	background: #f7fff9;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.15;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.l-content .download-status-hidden {
	display: none;
}

.l-content .download-side-panel .btn {
	width: 100%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.l-content .summary-selection {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
}

.l-content .summary-group {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
	padding: 12px 0 14px;
	border-bottom: 1px solid #9ca1aa;
	min-height: 70px;
}

.l-content .summary-group:last-child {
	border-bottom: none;
}

.l-content .summary-group-title {
	font-size: 14px;
	color: #000000;
	font-weight: 700;
	text-transform: uppercase;
	padding-top: 6px;
}

.l-content .summary-items {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px;
}

.l-content .summary-card {
	border: 1px solid #d6d9df;
	background: #ffffff;
	border-radius: 6px;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 22%;
	min-height: 158px;
	overflow: hidden;
}

.l-content .summary-thumb {
	width: 100%;
	height: 112px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #d6d9df;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.l-content .summary-thumb img,
.l-content .summary-thumb svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	padding: 4px;
}

.l-content .summary-code {
	font-size: 9px;
	color: #1a2d6b;
	font-weight: 700;
	word-break: break-word;
	line-height: 1.2;
}

.l-content .summary-desc {
	font-size: 12px;
	color: #1a1e2e;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 2px;
}

.l-content .summary-card-body {
	padding: 9px 10px 8px;
}

.l-content .summary-card-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border-top: 1px solid #d6d9df;
	background: #f5f6f8;
	padding: 7px 9px;
	margin-top: auto;
}

.l-content .summary-card-qty {
	display: flex;
	align-items: center;
	gap: 6px;
}

.l-content .summary-mini-btn {
	width: 22px;
	height: 22px;
	border: 1px solid #d6d9df;
	border-radius: 3px;
	background: #fff;
	color: #1a1e2e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-family: inherit;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.l-content .summary-mini-btn:hover {
	background: #f5a800;
	border-color: #f5a800;
	color: #111111;
}

.l-content .summary-qty-value {
	min-width: 12px;
	text-align: center;
	font-size: 11px;
	color: #1a1e2e;
}

.l-content .summary-pipe-items {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.l-content .summary-chip {
	border-radius: 4px;
	color: #ffcc00;
	background: #000000;
	font-size: 11px;
	line-height: 1.2;
	padding: 7px 14px;
	min-width: 78px;
	text-align: center;
}

.l-content .summary-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ffcc00;
	border-color: #ffcc00;
	box-shadow: 0 0 0 4px rgba(245, 168, 0, .2);
	display: inline-block;
	flex: 0 0 auto;
}

@media(max-width:1024px) {
	.l-content .summary-card {
		width: 31%;
 }
}

@media(max-width:840px) {
	.l-content .layout {
		grid-template-columns: 1fr;
	}
	
	.l-content .download-step-layout,
	.l-content .selection-step-layout,
	.l-content .step-one-grid,
	.l-content .step-one-visuals {
		grid-template-columns: 1fr;
	}

	.l-content .sidebar {
		position: static;
		height: auto;
	}

	.l-content .field-group {
		grid-template-columns: 1fr;
	}

	.l-content .parts-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	
	.l-content .step-one-visuals {
  grid-template-columns: 1fr 1fr;
 }
}

@media(max-width:480px) {
	.l-content .step-one-visuals {
  grid-template-columns: 1fr;
 }
	
	.l-content .summary-group {
  grid-template-columns: 1fr;
 }
	
	.l-content .summary-card {
		width: 48%;
 }
	
	.l-content .summary-items {
    gap: 10px;
    justify-content: space-between;
 }
}