/* VzV Gridfinity Wizard — základní layout
   Detailní styling bude doplněn v další fázi.
*/

/* Collision-warning colour tokens — override in your theme to re-skin */
:root {
	--vzv-gf-warn-color:      #e65100;   /* stripe base colour */
	--vzv-gf-warn-stripe:     #ffab40;   /* stripe highlight colour */
	--vzv-gf-warn-icon-color: #ff6f00;   /* FA icon colour */
	--vzv-gf-warn-icon-size:  1.5rem;    /* FA icon size */
}

.vzv-gf-wizard {
	max-width: 1400px;
	margin: 0 auto;
	font-family: inherit;
}

/* Wizard header (steps + reset button) */
.vzv-gf-wizard-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 24px;
}
.vzv-gf-wizard-header .vzv-gf-steps {
	flex: 1;
	margin-bottom: 0;
}
.vzv-gf-btn-reset {
	flex-shrink: 0;
	background: transparent;
	color: #999;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 1rem;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	line-height: 1;
}
.vzv-gf-btn-reset:hover {
	color: #dc3545;
	border-color: #dc3545;
}

/* Steps nav */
.vzv-gf-steps {
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
}
.vzv-gf-step {
	flex: 1;
	padding: 10px;
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background 0.15s;
}
.vzv-gf-step.active {
	background: #0073aa;
	color: #fff;
	border-color: #005a87;
}
.vzv-gf-step.done {
	background: #e6f4ea;
	border-color: #34a853;
}

/* Panels */
.vzv-gf-panel {
	padding: 24px 0;
}

/* Dimension inputs */
.vzv-gf-dimensions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0;
}
.vzv-gf-dimensions label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
}
.vzv-gf-dimensions input {
	width: 120px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
}
.vzv-gf-unit {
	font-size: 0.8rem;
	color: #666;
}

/* Grid preview */
.vzv-gf-grid-preview {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 12px 16px;
	min-height: 2.5rem;
	margin: 8px 0;
}

/* Overflow notice */
.vzv-gf-overflow-notice {
	background: #fff8e1;
	border-left: 4px solid #f9a825;
	padding: 8px 12px;
	margin: 8px 0;
	border-radius: 0 4px 4px 0;
}

/* Base type cards */
.vzv-gf-base-types {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0;
}
.vzv-gf-base-card {
	flex: 1;
	min-width: 140px;
	padding: 16px;
	border: 2px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}
.vzv-gf-base-card.selected {
	border-color: #0073aa;
	background: #e8f4fb;
	color: #005a87;
	font-weight: 600;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
}

/* Base price preview (step 2) */
.vzv-gf-base-price-preview {
	background: #f0f7ff;
	border-left: 3px solid #0073aa;
	padding: 8px 12px;
	border-radius: 0 4px 4px 0;
	font-size: 0.9rem;
	margin: 10px 0 0;
	color: #1a3a5c;
}

/* Splitting preview */
.vzv-gf-splitting-preview { margin-top: 16px; }

.vzv-gf-split-note {
	color: #888;
	font-style: italic;
	font-size: 0.9rem;
	margin: 0;
}
.vzv-gf-split-plates {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}
.vzv-gf-split-plate-btn {
	padding: 4px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f5f5f5;
	font-size: 0.8rem;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}
.vzv-gf-split-plate-btn.active {
	background: #1e3a5f;
	color: #fff;
	border-color: #1e3a5f;
}
.vzv-gf-split-grid {
	display: grid;
	grid-template-columns: repeat( var(--sp-cols), var(--sp-cell) );
	gap: 2px;
	margin-bottom: 10px;
	width: max-content;
}
.vzv-gf-split-cell {
	width:  var(--sp-cell);
	height: var(--sp-cell);
	border-radius: 2px;
}
.vzv-gf-split-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.vzv-gf-split-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.vzv-gf-split-chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #333;
}
.vzv-gf-split-meta {
	font-size: 0.82rem;
	color: #777;
}

/* Base options */
.vzv-gf-base-options {
	display: flex;
	gap: 16px;
	margin: 12px 0;
}
/* Themes and WooCommerce sometimes override [hidden] — enforce it explicitly */
.vzv-gf-base-options[hidden],
.vzv-gf-base-price-preview[hidden] {
	display: none !important;
}
.vzv-gf-base-options label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Editor layout */
.vzv-gf-editor-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 16px;
	align-items: start;
}
@media (max-width: 768px) {
	.vzv-gf-editor-layout {
		grid-template-columns: 1fr;
	}
}

/* Canvas */
.vzv-gf-canvas-wrap {
	position: relative;
	background: #1a1a2e;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 16/10;
	min-height: 420px;
}
#vzv-gf-canvas {
	width: 100%;
	height: 100%;
	display: block;
}
.vzv-gf-view-toggle {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 4px;
}
.vzv-gf-view-toggle button {
	padding: 4px 10px;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8rem;
}
.vzv-gf-view-toggle button.active {
	background: rgba(255,255,255,0.35);
}

/* FA icon handle overlay */
.vzv-gf-handles-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.vzv-gf-hi {
	position: absolute;
	transform: translate( -50%, -50% );
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 15, 15, 30, 0.72 );
	color: #fff;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.55 );
	transition: transform 0.1s, background 0.12s;
}
.vzv-gf-hi:hover { transform: translate( -50%, -50% ) scale( 1.25 ); background: rgba( 15, 15, 30, 0.92 ); }
.vzv-gf-hi-expand { color: #4fc3f7; }
.vzv-gf-hi-shrink  { color: #90a4ae; }
/* Action buttons (clone / trash) — slightly larger, pill shape to visually
   separate them from the circular resize handles on the bin edges. */
.vzv-gf-hi-trash,
.vzv-gf-hi-clone {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	font-size: 0.95rem;
}
.vzv-gf-hi-trash   { color: #ef5350; }
.vzv-gf-hi-clone   { color: #66bb6a; }

/* Collision-warning icon overlay */
.vzv-gf-warn-icons {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.vzv-gf-warn-icon {
	position: absolute;
	transform: translate( -50%, -100% );
	color: var( --vzv-gf-warn-icon-color );
	font-size: var( --vzv-gf-warn-icon-size );
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.6 );
	filter: drop-shadow( 0 0 4px rgba( 255, 100, 0, 0.8 ) );
	pointer-events: none;
	line-height: 1;
}

/* Structural (per-bin) warning icons — persistent, not only during drag */
.vzv-gf-struct-warn-icons {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.vzv-gf-struct-warn-icon {
	position: absolute;
	transform: translate( -50%, -100% );
	font-size: 1.15rem;
	line-height: 1;
	pointer-events: auto;   /* needed for title tooltip hover */
	cursor: help;
	filter: drop-shadow( 0 1px 5px rgba( 0, 0, 0, 0.7 ) );
}
.vzv-gf-struct-warn-icon.critical { color: #f44336; }
.vzv-gf-struct-warn-icon.partial  { color: #ffa726; }

/* Bin config panel */
.vzv-gf-bin-config {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
}
.vzv-gf-bin-config h3 {
	margin-top: 0;
}
.vzv-gf-bin-config label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
	font-size: 0.9rem;
}
.vzv-gf-bin-config input[type="checkbox"] + span,
.vzv-gf-bin-config label > input[type="checkbox"] {
	flex-direction: row;
}
.vzv-gf-height-input {
	display: flex;
	gap: 4px;
}
.vzv-gf-height-input input { flex: 1; }

/* Color swatches */
.vzv-gf-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vzv-gf-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ccc;
	cursor: pointer;
	transition: box-shadow 0.1s;
}
.vzv-gf-swatch.selected {
	box-shadow: 0 0 0 2px #0073aa;
}

/* Inlay section */
.vzv-gf-inlay-section { margin-top: 12px; }
.vzv-gf-photo-status {
	display: block;
	font-size: 0.8rem;
	margin-top: 4px;
	color: #555;
}
.vzv-gf-inlay-section textarea {
	width: 100%;
	min-height: 60px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 0.85rem;
	margin-top: 8px;
	box-sizing: border-box;
}

/* Bin actions */
.vzv-gf-bin-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

/* Summary */
.vzv-gf-summary-3d {
	background: #1a1a2e;
	border-radius: 8px;
	aspect-ratio: 16/7;
	margin-bottom: 16px;
}
#vzv-gf-summary-canvas {
	width: 100%;
	height: 100%;
	display: block;
}
.vzv-gf-price-box {
	text-align: center;
	margin: 16px 0;
}
.vzv-gf-price-total {
	font-size: 2rem;
	font-weight: 700;
}
.vzv-gf-price-label {
	display: block;
	color: #666;
	font-size: 0.85rem;
}

/* Buttons */
.vzv-gf-btn-primary,
.vzv-gf-btn-next {
	background: #0073aa;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	margin-top: 8px;
}
.vzv-gf-btn-primary:hover,
.vzv-gf-btn-next:hover { background: #005a87; }

.vzv-gf-btn-back {
	background: transparent;
	color: #0073aa;
	border: 1px solid #0073aa;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	margin-top: 8px;
	margin-right: 8px;
}

.vzv-gf-btn-secondary {
	background: transparent;
	color: #0073aa;
	border: 1px solid #0073aa;
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
}
.vzv-gf-btn-secondary:hover { background: #f0f7fc; }

.vzv-gf-btn-danger {
	background: transparent;
	color: #dc3545;
	border: 1px solid #dc3545;
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
}

/* Price breakdown table */
.vzv-gf-breakdown {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.vzv-gf-breakdown td,
.vzv-gf-breakdown th {
	padding: 6px 8px;
	border-bottom: 1px solid #eee;
	vertical-align: top;
}
.vzv-gf-breakdown tfoot th {
	border-top: 2px solid #ccc;
	border-bottom: none;
	font-weight: 700;
}
.vzv-gf-breakdown td:last-child,
.vzv-gf-breakdown th:last-child { text-align: right; }
.vzv-gf-breakdown td:nth-child(2) { color: #666; white-space: nowrap; }
.vzv-gf-discount { color: #2e7d32; font-size: 0.8rem; }

/* Bin config tags shown in the breakdown (stacking lip, štítek, …) */
.vzv-gf-bin-tags {
	font-size: 0.75rem;
	color: #888;
	margin-top: 2px;
}

/* Version badge */
.vzv-gf-version-badge {
	text-align: right;
	font-size: 0.7rem;
	color: #bbb;
	margin-top: 8px;
	user-select: none;
}

/* Hint text */
.vzv-gf-hint { color: #555; margin-top: 0; }

/* ── Custom bins palette (step 3) ────────────────────────────── */
.vzv-gf-custom-bins-section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #dde;
}
.vzv-gf-cb-heading {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 600;
}
.vzv-gf-cb-hint {
	margin: 0 0 12px;
	font-size: 0.85rem;
}

/* Responsive grid of bin cards */
.vzv-gf-custom-bins-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vzv-gf-custom-bin-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100px;
	padding: 10px 8px 8px;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	font-size: 0.8rem;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
	line-height: 1.2;
}
.vzv-gf-custom-bin-card:hover {
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba( 0, 115, 170, 0.15 );
	transform: translateY( -1px );
}
.vzv-gf-custom-bin-card:active {
	transform: translateY( 0 );
	box-shadow: none;
}

/* Thumbnail image */
.vzv-gf-cbc-thumb {
	width:  72px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #eee;
	display: block;
}

/* Gray placeholder box when no image is set */
.vzv-gf-cbc-placeholder {
	width:  72px;
	height: 56px;
	background: #e8e8ed;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vzv-gf-cbc-glyph {
	font-size: 1.8rem;
	color: #aaa;
	line-height: 1;
}

.vzv-gf-cbc-label {
	font-weight: 600;
	color: #222;
	word-break: break-word;
	max-width: 88px;
}
.vzv-gf-cbc-dims {
	color: #888;
	font-size: 0.75rem;
	white-space: nowrap;
}