/*
 * BS Variation Image Swatches — frontend stilovi.
 *
 * Teme i page builderi (Astra, Elementor kit, WooCommerce) stilizuju
 * <button> elemente u form.cart selektorima velike specifičnosti
 * (boja pozadine, border 10px, padding, width 100%), pa su ovde kritična
 * svojstva namerno pojačana sa !important. Izgled ostaje podesiv kroz
 * CSS varijable ispod.
 */

:root {
	--bsvis-size: 72px;
	--bsvis-gap: 10px;
	--bsvis-bg: #fff;
	--bsvis-border-color: #d5d5d5;
	--bsvis-hover-border-color: #777;
	--bsvis-selected-border-color: #111;
	--bsvis-radius: 4px;
}

.bsvis-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start;
	gap: var(--bsvis-gap);
	width: 100%;
	margin: 8px 0 12px;
}

.bsvis-wrapper button.bsvis-swatch {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: var(--bsvis-size) !important;
	min-width: 0 !important;
	max-width: var(--bsvis-size) !important;
	height: auto !important;
	min-height: var(--bsvis-size) !important;
	margin: 0 !important;
	padding: 3px !important;
	float: none !important;
	border: 1px solid var(--bsvis-border-color) !important;
	border-radius: var(--bsvis-radius) !important;
	background: var(--bsvis-bg) !important;
	color: inherit !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	overflow: hidden !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bsvis-wrapper .bsvis-swatch img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.bsvis-wrapper .bsvis-swatch .bsvis-label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 400;
	margin-top: 2px;
}

/* Tekstualni fallback kada varijacija nema svoju sliku. */
.bsvis-wrapper button.bsvis-swatch.bsvis-swatch--text {
	width: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	padding: 6px 12px !important;
}

.bsvis-wrapper button.bsvis-swatch.bsvis-swatch--text .bsvis-label {
	font-size: 13px;
	margin-top: 0;
}

.bsvis-wrapper button.bsvis-swatch:hover {
	border-color: var(--bsvis-hover-border-color) !important;
	background: var(--bsvis-bg) !important;
	color: inherit !important;
}

.bsvis-wrapper button.bsvis-swatch.is-selected {
	border-width: 2px !important;
	border-color: var(--bsvis-selected-border-color) !important;
	padding: 2px !important;
}

.bsvis-wrapper button.bsvis-swatch.bsvis-swatch--text.is-selected {
	padding: 5px 11px !important;
}

.bsvis-wrapper button.bsvis-swatch:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
}

.bsvis-wrapper button.bsvis-swatch.is-disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
	position: relative;
}

.bsvis-wrapper button.bsvis-swatch.is-out-of-stock::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 50%;
	border-top: 2px solid rgba(0, 0, 0, 0.55);
	transform: rotate(-25deg);
	pointer-events: none;
}

/*
 * Originalni dropdown ostaje u DOM-u (fallback, pristupačnost, WooCommerce JS),
 * ali se vizuelno sakriva kada su swatchevi uspešno generisani.
 */
.bsvis-enhanced select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}