@charset "utf-8";

/* --------------------------------------------------- Layout --------------------------------------------------- */
.cfg-layout {
	display: block;
}


/* --------------------------------------------------- Sections --------------------------------------------------- */
.cfg-section {
	display: none;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--border-light);
}

.cfg-section:last-child {
	border-bottom: none;
}

.cfg-section.visible {
	display: block;
	animation: cfgReveal 0.4s ease;
}

@keyframes cfgReveal {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.cfg-section-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.cfg-section-header h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.cfg-section-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}


/* --------------------------------------------------- Category Grid --------------------------------------------------- */
.cfg-category-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.cfg-category-card {
	background: var(--white);
	border: 2px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 14px;
	text-align: center;
	cursor: pointer;
	transition: all 0.25s ease;
}

.cfg-category-card:hover {
	border-color: var(--accent-lighter);
	box-shadow: var(--shadow-sm);
}

.cfg-category-card.selected {
	border-color: var(--accent);
	background: var(--accent-lighter);
}

.cfg-category-card.dimmed {
	opacity: 0.45;
}

.cfg-category-card.dimmed:hover {
	opacity: 0.75;
}

.cfg-category-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--bg-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	transition: background 0.25s ease;
}

.cfg-category-card.selected .cfg-category-icon {
	background: var(--white);
}

.cfg-category-icon img {
	width: 22px;
	height: 22px;
}

/* Cross-section silhouette inside a step-2 category-card icon (replaces the flat icon) */
.cfg-category-icon.cfg-category-icon-shape {
	background: transparent;
	border-radius: 0;
	width: 52px;
	height: 44px;
	color: #475569;               /* currentColor → outline stroke */
	transition: color 0.2s ease;
}
.cfg-category-card:hover .cfg-category-icon-shape,
.cfg-category-card.selected .cfg-category-icon-shape { background: transparent; color: var(--accent); }
.cfg-category-icon-shape svg { width: 100%; height: 100%; display: block; }

.cfg-category-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 2px;
}

.cfg-category-count {
	font-size: 11px;
	color: var(--text-lighter);
}


/* --------------------------------------------------- Pill / Chip Buttons --------------------------------------------------- */
.cfg-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cfg-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	user-select: none;
}

.cfg-pill:hover {
	border-color: var(--accent-lighter);
	background: var(--bg-subtle);
}

.cfg-pill.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
	font-weight: 600;
}

/* Subcategory pills — slightly larger */
.cfg-pill-sub {
	height: 42px;
	padding: 0 22px;
	font-size: 14px;
	gap: 10px;
}

.cfg-pill-sub img {
	width: 18px;
	height: 18px;
	opacity: 0.5;
}

.cfg-pill-sub.active img {
	opacity: 1;
	filter: brightness(0) invert(1);
}

/* Shape-only 2D outline shown in the subcategory pill (step 3) */
.cfg-pill-shape {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	flex-shrink: 0;
}

.cfg-pill-shape svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cfg-pill-sub.active .cfg-pill-shape {
	filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.6));
}


/* --------------------------------------------------- Filter Rows --------------------------------------------------- */
/* Flex with grow so the VISIBLE filter cards always fill the full width: the common
   3-filter category (dimensiune / grosime / calitate) lands at exactly 1/3 each. */
#cfg-filters-container {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.cfg-filter-row {
	flex: 1 1 calc(33.333% - 8px);
	min-width: 200px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px 14px 16px;
}

.cfg-filter-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-light);
	margin-bottom: 10px;
}

#cfg-filters-container .cfg-pill {
	height: 34px;
	padding: 0 12px;
	font-size: 13px;
}

/* A grosime value with no products at the selected dimensiune — shown but not pickable. */
#cfg-filters-container .cfg-pill.cfg-pill-disabled {
	opacity: 0.38;
	cursor: not-allowed;
	pointer-events: none;
	text-decoration: line-through;
	background: var(--bg-subtle);
	border-color: var(--border);
	color: var(--text-light);
}


/* Ambutisate "dimensiuni la cerere" notice — premium callout shown above results */
.cfg-ambutisat-notice {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 60%, #2563eb 100%);
	border-radius: 16px;
	color: #fff;
	box-shadow: 0 10px 30px rgba(10, 22, 40, 0.18), 0 2px 8px rgba(37, 99, 235, 0.15);
	position: relative;
	overflow: hidden;
}
.cfg-ambutisat-notice::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 280px;
	height: 100%;
	background: radial-gradient(ellipse at top right, rgba(249, 115, 22, 0.3) 0%, transparent 70%);
	pointer-events: none;
}
.cfg-ambutisat-notice-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(249, 115, 22, 0.22);
	border: 1px solid rgba(249, 115, 22, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.cfg-ambutisat-notice-icon svg {
	width: 22px;
	height: 22px;
	stroke: #fb923c;
}
.cfg-ambutisat-notice-body {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}
.cfg-ambutisat-notice-title {
	font-size: 13px;
	font-weight: 700;
	color: #fb923c;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 4px;
}
.cfg-ambutisat-notice-text {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}
.cfg-ambutisat-notice-text strong {
	color: #fff;
	font-weight: 700;
}
.cfg-ambutisat-notice-cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: #f97316;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
	transition: all 0.2s ease;
	position: relative;
	z-index: 1;
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
	white-space: nowrap;
}
.cfg-ambutisat-notice-cta:hover {
	background: #ea580c;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
	color: #fff;
}
.cfg-ambutisat-notice-cta svg {
	width: 16px;
	height: 16px;
}

@media screen and (max-width: 700px) {
	.cfg-ambutisat-notice {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 18px;
	}
	.cfg-ambutisat-notice-cta {
		width: 100%;
		justify-content: center;
	}
}

/* Info variant — used on non-ambutisate categories for the "didn't find your
   product? email us" call-out. Same dark-gradient card, blue accent instead of
   the orange used on the ambutisate "dimensiuni la cerere" callout. */
.cfg-ambutisat-notice.is-info::before {
	background: radial-gradient(ellipse at top right, rgba(37, 99, 235, 0.32) 0%, transparent 70%);
}
.cfg-ambutisat-notice.is-info .cfg-ambutisat-notice-icon {
	background: rgba(96, 165, 250, 0.22);
	border-color: rgba(96, 165, 250, 0.45);
}
.cfg-ambutisat-notice.is-info .cfg-ambutisat-notice-icon svg {
	stroke: #93c5fd;
}
.cfg-ambutisat-notice.is-info .cfg-ambutisat-notice-title {
	color: #93c5fd;
}
.cfg-ambutisat-notice.is-info .cfg-ambutisat-notice-cta {
	background: #2563eb;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.cfg-ambutisat-notice.is-info .cfg-ambutisat-notice-cta:hover {
	background: #1d4ed8;
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

/* --------------------------------------------------- Checkout --------------------------------------------------- */
.checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: flex-start;
}
@media (max-width: 980px){
	.checkout-layout { grid-template-columns: 1fr; }
}

.checkout-breakdown,
.checkout-form {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
}

.checkout-section { margin-bottom: 28px; }
.checkout-section:last-child { margin-bottom: 0; }
.checkout-section-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}

.checkout-line {
	background: var(--bg-subtle);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	margin-bottom: 12px;
}
.checkout-line:last-child { margin-bottom: 0; }
.checkout-line-head { margin-bottom: 10px; }
.checkout-line-name {
	font-weight: 700;
	color: var(--primary);
	font-size: 14px;
	margin-bottom: 3px;
}
.checkout-line-meta {
	color: var(--text-light);
	font-size: 12.5px;
}

.checkout-line-formulas {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	background: #fff;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
}
.checkout-formula-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.checkout-formula-k {
	color: var(--text-light);
	font-weight: 600;
	flex-shrink: 0;
}
.checkout-formula-v {
	color: var(--text);
	text-align: right;
	font-family: 'SFMono-Regular', Menlo, monospace;
	font-size: 12.5px;
}
.checkout-formula-v strong {
	color: var(--primary);
	font-weight: 700;
}
.checkout-formula-total {
	padding-top: 6px;
	margin-top: 2px;
	border-top: 1px dashed var(--border);
}
.checkout-formula-total .checkout-formula-v strong {
	color: var(--accent);
}
/* per-product transport share (folded into product price) */
.checkout-formula-transport .checkout-formula-k {
	color: var(--highlight);
}
.checkout-formula-transport .checkout-formula-v {
	color: var(--text-light);
}
.checkout-formula-transport .checkout-formula-v strong {
	color: var(--highlight);
}
.checkout-formula-grandline {
	border-top-style: solid;
}
.checkout-formula-grandline .checkout-formula-v strong {
	color: var(--primary);
	font-size: 13.5px;
}
/* transport verification note in the order totals (muted, not summed) */
.checkout-total-transport-note {
	font-style: italic;
}

.checkout-group-meta {
	font-size: 12.5px;
	color: var(--text-light);
	margin-bottom: 10px;
}
.checkout-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}
.checkout-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 13px;
}
.checkout-row-k { color: var(--text); font-weight: 500; }
.checkout-row-sub { color: var(--text-light); font-weight: 400; font-size: 12px; }
.checkout-row-v strong { color: var(--primary); }
.checkout-row-total {
	padding-top: 8px;
	margin-top: 4px;
	border-top: 1px solid var(--border);
	font-weight: 700;
}
.checkout-row-total strong { color: var(--accent); }
.checkout-placeholder {
	color: var(--text-light);
	font-style: italic;
	font-size: 13px;
	margin: 0;
}

.checkout-totals {
	background: var(--bg-subtle);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin-top: 16px;
}
.checkout-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	font-size: 14px;
}
.checkout-total-row strong { color: var(--primary); font-weight: 700; }
.checkout-total-grand {
	border-top: 2px solid var(--primary);
	margin-top: 8px;
	padding-top: 12px;
	font-size: 16px;
}
.checkout-total-grand strong { color: var(--accent); font-size: 18px; }
.checkout-totals-sep {
	height: 1px;
	background: var(--border);
	margin: 10px 0 4px;
}
.checkout-total-tva-row {
	color: var(--text-light);
	font-size: 13px;
}

/* ---- Delivery & additional transport card ---- */
.checkout-delivery-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--white);
}
.checkout-delivery-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
}
.checkout-delivery-divider {
	height: 1px;
	background: var(--border-light, #f1f5f9);
	margin: 0 18px;
}
.checkout-delivery-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.checkout-delivery-icon svg { width: 17px; height: 17px; }
.checkout-delivery-icon-blue  { background: rgba(37,99,235,.09); color: var(--accent); }
.checkout-delivery-icon-orange { background: rgba(249,115,22,.10); color: #f97316; }
.checkout-delivery-content { flex: 1; }
.checkout-delivery-label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-light);
	margin-bottom: 4px;
}
.checkout-delivery-value {
	font-size: 14px;
	color: var(--text);
	line-height: 1.55;
}
.checkout-delivery-rep { color: var(--text-light); }

.checkout-total-note {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 8px;
	text-align: right;
}

.checkout-price-note {
	text-align: left;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--text-secondary, #5e6470);
	background: #f5f8ff;
	border-left: 3px solid var(--accent, #2563eb);
	border-radius: 6px;
	padding: 10px 12px;
	margin-top: 14px;
}

/* Prices-are-indicative disclaimer — shown above the submit buttons so the customer
   sees it before requesting an offer / sending an order. */
.checkout-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
	font-size: 12.5px;
	line-height: 1.55;
	color: #7c4a03;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-left: 3px solid var(--highlight, #f97316);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 16px;
}
.checkout-disclaimer strong { color: #9a3412; }
.checkout-disclaimer-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; }

.checkout-submit-row {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}
.checkout-btn {
	flex: 1;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
	border: 2px solid transparent;
}
.checkout-btn.btn-primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}
.checkout-btn.btn-primary:hover {
	background: #1e40af;
	border-color: #1e40af;
	transform: translateY(-1px);
}
.checkout-btn.btn-outline {
	background: #fff;
	color: var(--accent);
	border-color: var(--accent);
}
.checkout-btn.btn-outline:hover {
	background: var(--accent);
	color: #fff;
}
.checkout-submit-hint {
	color: var(--text-light);
	font-size: 12px;
	line-height: 1.5;
	margin-top: 12px;
	text-align: center;
}

.checkout-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	margin-bottom: 24px;
	border-radius: var(--radius);
	color: #fff;
}
.checkout-banner-success { background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 60%, #10b981 100%); }
.checkout-banner-info    { background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 60%, #2563eb 100%); }
.checkout-banner-icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	display: flex; align-items: center; justify-content: center;
}
.checkout-banner-icon svg { width: 22px; height: 22px; stroke: #fff; }
.checkout-banner-body { flex: 1; }
.checkout-banner-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.checkout-banner-text { font-size: 13.5px; opacity: 0.92; line-height: 1.45; }
.checkout-banner .btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.checkout-empty {
	text-align: center;
	padding: 80px 24px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.checkout-empty svg { width: 56px; height: 56px; stroke: var(--text-lighter); margin-bottom: 20px; }
.checkout-empty h2 { font-size: 22px; color: var(--primary); margin-bottom: 8px; }
.checkout-empty p  { color: var(--text-light); margin-bottom: 20px; }

/* --------------------------------------------------- Results --------------------------------------------------- */
.cfg-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.cfg-results-count {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-light);
}

.cfg-spec-badge {
	display: inline-block;
	background: #64748b;            /* Lungime pill — gray */
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}

/* Calitate (steel grade) pill on the result tiles — colored by grade */
.cfg-cal-badge {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 8px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}
.cfg-cal-badge.is-s235  { background: var(--accent, #2563eb); }   /* blue  */
.cfg-cal-badge.is-s355  { background: var(--error, #dc2626); }    /* red   */
.cfg-cal-badge.is-other { background: var(--success, #16a34a); }  /* green */

/* Tile top row: a full-width light material bar — "Otel/Zincat" label on the
   left, the calitate grade pill stuck flush to the right edge. Bar background +
   label color come from .cfg-material-tag-otel / -zincate applied to this row. */
.cfg-result-tophead {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 10px;
	border-radius: 6px;
	overflow: hidden;            /* clip the flush badge to the bar's rounded corners */
}
.cfg-tophead-label {
	display: flex;
	align-items: center;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	/* color inherited from .cfg-material-tag-otel / -zincate */
}
.cfg-result-tophead .cfg-cal-badge {
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	padding: 0 14px;             /* horizontal only; vertical fill via stretch */
	border-radius: 0;            /* flush — no rounding on the stuck side */
	box-shadow: none;
}

.cfg-result-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 8px;
}

/* Product quantity +/- control */
.cfg-product-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.cfg-product-qty-btn {
	width: 34px;
	height: 36px;
	background: var(--bg-subtle);
	border: none;
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
	padding: 0;
	line-height: 1;
}

.cfg-product-qty-btn:hover {
	background: var(--accent-lighter);
	color: var(--accent);
}

.cfg-product-qty .cfg-qty-input {
	width: 52px;
	height: 36px;
	border: none;
	background: var(--white);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	padding: 0;
	-moz-appearance: textfield;
}

.cfg-product-qty .cfg-qty-input::-webkit-outer-spin-button,
.cfg-product-qty .cfg-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- Material tag ---- */
.cfg-material-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.cfg-material-tag-otel {
	background: rgba(37, 99, 235, 0.10);
	color: var(--accent);
}
.cfg-material-tag-zincate {
	background: rgba(13, 148, 136, 0.10);
	color: #0d9488;
}

/* ---- Delivery time hint ---- */
.cfg-termen-livrare {
	font-size: 11px;
	color: var(--text-light);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: -6px;
	margin-bottom: 12px;
}

/* ---- Tile View ---- */
.cfg-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}

.cfg-result-card-tile {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all var(--transition);
	display: flex;
	flex-direction: column;
}

.cfg-result-card-tile:hover {
	border-color: var(--accent-lighter);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}

.cfg-result-tile-image {
	width: 100%;
	height: 200px;
	background: linear-gradient(180deg, #fcfdfe, #f5f7f9);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* ── New tile media: live 2D SVG (filled by cross-sections.js) + corner 3D thumb ── */
.cfg-tile-media {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
}
.cfg-schematic-2d {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfg-schematic-2d svg {
	width: 100%;
	height: 100%;
	max-height: 176px;
}
.cfg-schematic-3d-corner {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 74px;
	height: 58px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 9px;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
}
.cfg-schematic-3d-corner img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cfg-schematic-3d-cap {
	position: absolute;
	bottom: -16px;
	right: 2px;
	font-size: 9px;
	letter-spacing: 0.5px;
	color: #9aa6b3;
	font-weight: 600;
	text-transform: uppercase;
}

/* Unsupported categories: full-bleed 3D image fallback (no 2D pane). */
.cfg-tile-media-3d-only {
	padding: 8px;
}
.cfg-schematic-3d-full {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Placeholder fallback (when an unsupported category has no JPG either) */
.cfg-result-tile-image > svg {
	width: 36px;
	height: 36px;
	stroke: var(--text-lighter);
	fill: none;
	stroke-width: 1.5;
}

/* ── Reference card (once per category, above the result grid) ── */
.cfg-ref-card {
	display: grid;
	grid-template-columns: 1.05fr 1px 1fr 1px 0.9fr;
	align-items: start; /* Top-align so all eyebrows sit at the same Y. */
	gap: 28px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 22px;
	margin-bottom: 26px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.cfg-ref-col { min-width: 0; }
/* Dividers stay vertically centered (visual balance) while their sibling columns
   are top-aligned. align-self overrides the row's align-items: start. */
.cfg-ref-vline { background: var(--border); width: 1px; height: 160px; align-self: center; }
.cfg-ref-eyebrow {
	font-size: 11px;
	letter-spacing: 1.4px;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.cfg-ref-3d-img {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfg-ref-3d-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cfg-ref-2d-svg {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfg-ref-2d-svg svg {
	width: 100%;
	height: 100%;
}
.cfg-ref-leg-rows { display: flex; flex-direction: column; }
.cfg-ref-leg-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14.5px;
	padding: 4px 0;
}
.cfg-ref-leg-sym {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 600;
	color: #111827;
	min-width: 30px;
	text-align: right;
	font-size: 16px;
}
.cfg-ref-leg-sym sub { font-size: 0.62em; }
.cfg-ref-leg-eq { color: #9aa6b3; }
.cfg-ref-leg-desc { color: #3f4b59; }

@media (max-width: 900px) {
	.cfg-ref-card {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.cfg-ref-vline { display: none; }
}

.cfg-result-tile-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cfg-result-tile-body .cfg-result-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 10px;
	line-height: 1.35;
}

/* Key-value spec grid — shows all info, no truncation */
.cfg-result-specs-grid {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 14px;
	font-size: 12.5px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.cfg-spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.cfg-spec-k {
	color: var(--text-light);
	font-weight: 500;
}
.cfg-spec-v {
	color: var(--text);
	font-weight: 600;
	text-align: right;
}

/* Field wrapper (label + control) used for Lungime + Cantitate */
.cfg-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cfg-field-label {
	font-size: 10.5px;
	color: var(--text-light);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* Length picker matches qty visually — same height, same border, same font */
.cfg-length-picker {
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	height: 36px;
}
.cfg-length-input {
	height: 36px;
	border: none;
	background: var(--white);
	padding: 0 28px 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	cursor: pointer;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	width: 100%;
}
.cfg-length-input:focus {
	outline: none;
}

.cfg-result-tile-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}
.cfg-result-tile-actions .cfg-field {
	flex: 1;
}

/* Add button is block-width at bottom of card */
.cfg-add-btn-block {
	width: 100%;
	margin-top: auto;
	white-space: nowrap;
}


/* --------------------------------------------------- Empty & Loading --------------------------------------------------- */
.cfg-empty-state {
	text-align: center;
	padding: 40px 24px;
	background: var(--bg-alt);
	border: 1px dashed var(--border);
	border-radius: var(--radius);
}

.cfg-empty-state p {
	font-size: 15px;
	color: var(--text-light);
	margin-bottom: 16px;
}

.cfg-loading {
	text-align: center;
	padding: 40px;
	font-size: 14px;
	color: var(--text-lighter);
}


/* --------------------------------------------------- Toast Notification --------------------------------------------------- */
.cfg-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--primary);
	color: var(--white);
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--shadow-lg);
	z-index: 9999;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
}

.cfg-toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}


/* --------------------------------------------------- Responsive --------------------------------------------------- */
@media screen and (max-width: 1024px) {
	.cfg-category-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 768px) {
	.cfg-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	#cfg-filters-container .cfg-filter-row {
		flex-basis: calc(50% - 6px);
	}

}

@media screen and (max-width: 480px) {
	.cfg-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	#cfg-filters-container .cfg-filter-row {
		flex-basis: 100%;
	}

	.cfg-pill {
		height: 34px;
		padding: 0 14px;
		font-size: 13px;
	}

	.cfg-pill-sub {
		height: 38px;
		padding: 0 16px;
	}

	.cfg-results-grid {
		grid-template-columns: 1fr;
	}
}

/* ───────────────────────────────── Tile media clickability + lightbox ───────────────────────────────── */

/* Click cue on the tile media. Existing card hover already conveys interactivity,
   so the cursor change + faint background tint is enough — no zoom icon needed. */
.cfg-tile-media {
	cursor: pointer;
	transition: background 0.15s ease;
}
.cfg-tile-media:hover {
	background: linear-gradient(180deg, #f6f9fc, #eef2f7);
}

/* Lightbox / modal. Opened by clicking any product tile's media area. Shows the
   3D photo, a large 2D SVG with THAT product's actual dimension values, and the
   category-level legend. Closes on X / backdrop / ESC. Body scroll locked while open. */
.cfg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}
.cfg-lightbox.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.cfg-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 22, 40, 0.55);
	animation: cfgLightboxFadeIn 0.2s ease;
}
.cfg-lightbox-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 1100px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow: auto;
	padding: 28px 32px;
	box-shadow: 0 20px 60px rgba(10, 22, 40, 0.4);
	animation: cfgLightboxIn 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.cfg-lightbox-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f3f4f6;
	border: 0;
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
	color: #475569;
	transition: all 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfg-lightbox-close:hover {
	background: #e5e7eb;
	color: #0f172a;
}
.cfg-lightbox-title {
	font-size: 18px;
	font-weight: 700;
	color: #0a1628;
	margin-bottom: 20px;
	padding-right: 50px;
	line-height: 1.3;
}
.cfg-lightbox-body {
	display: grid;
	grid-template-columns: 1.05fr 1fr 0.9fr;
	gap: 36px;
	align-items: start;
}
.cfg-lightbox-col.is-hidden {
	display: none;
}
.cfg-lightbox-eyebrow {
	font-size: 11px;
	letter-spacing: 1.4px;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 12px;
}
.cfg-lightbox-3d-img {
	height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfg-lightbox-3d-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cfg-lightbox-2d-svg {
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfg-lightbox-2d-svg svg {
	width: 100%;
	height: 100%;
}
.cfg-lightbox-leg-rows {
	display: flex;
	flex-direction: column;
	font-size: 16px;
}
.cfg-lightbox-leg-rows .cfg-ref-leg-row {
	padding: 6px 0;
}
.cfg-lightbox-leg-rows .cfg-ref-leg-sym {
	font-size: 18px;
	min-width: 36px;
}

@keyframes cfgLightboxFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes cfgLightboxIn {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
	.cfg-lightbox.is-open {
		padding: 12px;
		align-items: flex-start;
	}
	.cfg-lightbox-card {
		padding: 22px 18px;
		border-radius: 12px;
	}
	.cfg-lightbox-body {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.cfg-lightbox-3d-img { height: 220px; }
	.cfg-lightbox-2d-svg { height: 260px; }
	.cfg-lightbox-title {
		font-size: 16px;
		margin-bottom: 14px;
		padding-right: 40px;
	}
}
/* ============================================================================
   Step 1 — premium material cards (Otel nezincat vs Otel zincat)
   Two half-width cards: photo + navy info panel + family silhouettes + CTA.
   Keeps the .cfg-category-card / data-material hooks for the selection logic.
   ============================================================================ */
.cfg-material-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.cfg-material-card {
	position: relative; display: flex; flex-direction: column;
	padding: 0; text-align: left;
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-md); cursor: pointer;
	transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, filter .3s ease;
	opacity: 0; animation: fadeInUp .5s ease forwards;
}
.cfg-material-card:nth-child(2) { animation-delay: .1s; }
.cfg-material-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cfg-material-card.dimmed { opacity: .5; filter: saturate(.55); }
.cfg-material-card.dimmed:hover { opacity: .82; }

/* photo */
.cfg-mat-photo { position: relative; height: 210px; overflow: hidden; background: var(--primary); }
.cfg-mat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.cfg-material-card:hover .cfg-mat-photo img { transform: scale(1.06); }
.cfg-mat-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
	background: linear-gradient(to bottom, rgba(10,22,40,0), var(--primary)); pointer-events: none; }

/* selected check badge */
.cfg-mat-check { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px;
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--success); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3);
	transform: scale(0); transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.cfg-mat-check svg { width: 18px; height: 18px; }
.cfg-material-card.selected .cfg-mat-check { transform: scale(1); }

/* body */
.cfg-mat-body { background: var(--primary); color: #fff; padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.cfg-mat-head { display: flex; align-items: center; gap: 14px; }
.cfg-mat-shield { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	border: 1.5px solid rgba(255,255,255,.22); color: #fff; transition: border-color .3s ease; }
.cfg-mat-shield svg { width: 26px; height: 26px; }
.cfg-mat-title { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.cfg-mat-top { font-size: 12.5px; letter-spacing: 2px; color: rgba(255,255,255,.5); text-transform: uppercase; font-weight: 500; }
.cfg-mat-main { font-size: 26px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .4px; }
.cfg-mat-rule { display: block; height: 3px; width: 54px; border-radius: 3px; margin: 14px 0 16px; transition: width .35s ease; background: rgba(255,255,255,.4); }
.cfg-material-card:hover .cfg-mat-rule { width: 94px; }

/* accent split: otel = orange, zincate = blue */
.cfg-material-card.is-otel .cfg-mat-rule { background: var(--highlight); }
.cfg-material-card.is-otel .cfg-mat-shield { border-color: rgba(249,115,22,.55); color: var(--highlight); }
.cfg-material-card.is-otel .cfg-mat-cta { background: var(--highlight); }
.cfg-material-card.is-otel:hover .cfg-mat-cta { background: var(--highlight-hover); }
.cfg-material-card.is-otel.selected { box-shadow: 0 0 0 3px var(--highlight), var(--shadow-lg); }
.cfg-material-card.is-zincate .cfg-mat-rule { background: var(--accent); }
.cfg-material-card.is-zincate .cfg-mat-shield { border-color: rgba(37,99,235,.55); color: var(--accent-light); }
.cfg-material-card.is-zincate .cfg-mat-cta { background: var(--accent); }
.cfg-material-card.is-zincate:hover .cfg-mat-cta { background: var(--accent-light); }
.cfg-material-card.is-zincate.selected { box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg); }

/* tagline */
.cfg-mat-tagline { font-size: 13.5px; color: rgba(255,255,255,.78); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.5; }
.cfg-mat-sep { color: rgba(255,255,255,.32); }

/* family silhouettes */
.cfg-mat-families { display: flex; justify-content: space-between; gap: 6px; margin: 20px 0 22px; padding: 16px 0;
	border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); }
.cfg-mat-fam { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; transition: transform .2s ease; }
.cfg-mat-fam:hover { transform: translateY(-3px); }
.cfg-mat-fam-shape { width: 42px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); }
.cfg-mat-fam-shape svg { width: 100%; height: 100%; }
.cfg-mat-fam em { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.6); text-align: center; line-height: 1.2; }

/* CTA */
.cfg-mat-cta { margin-top: auto; width: 100%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 18px; border-radius: var(--radius-sm); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .5px;
	transition: background .25s ease; }
.cfg-mat-cta svg { width: 20px; height: 20px; transition: transform .25s ease; }
.cfg-material-card:hover .cfg-mat-cta svg { transform: translateX(5px); }

@media screen and (max-width: 768px) {
	.cfg-material-cards { grid-template-columns: 1fr; }
	.cfg-mat-photo { height: 185px; }
	.cfg-mat-main { font-size: 22px; }
}
@media screen and (max-width: 480px) {
	.cfg-mat-families { gap: 2px; }
	.cfg-mat-fam-shape { width: 34px; height: 28px; }
	.cfg-mat-fam em { font-size: 8px; }
	.cfg-mat-body { padding: 18px 18px 20px; }
}

/* ── Post-submit oferta summary ──────────────────────────────────────────── */
.checkout-summary {
	background: var(--bg-card, #fff);
	border: 1px solid var(--border, #e2e8f0);
	border-radius: var(--radius, 14px);
	padding: 20px 22px;
	margin-top: 20px;
}
.checkout-summary-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	font-size: 13.5px;
}
.checkout-summary-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-light, #64748b);
	font-weight: 700;
	padding: 6px 8px;
	border-bottom: 2px solid var(--border, #e2e8f0);
}
.checkout-summary-table td {
	padding: 9px 8px;
	border-bottom: 1px solid var(--border, #eef2f6);
	vertical-align: top;
	color: var(--text, #0f172a);
}
.checkout-summary-table .num { text-align: right; white-space: nowrap; }
.checkout-summary-sub {
	display: block;
	font-size: 11.5px;
	color: var(--text-light, #64748b);
	margin-top: 2px;
}
.checkout-summary-totals { margin-top: 14px; }