/**
 * RB Color Swatches - front-end styles
 * Works on WooCommerce core variation form markup (Woostify + Elementor Pro).
 */
.rb-swatches-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 6px;
}

.rb-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--rb-swatch-size, 44px);
	height: var(--rb-swatch-size, 44px);
	padding: 0;
	border: 2px solid #e0e0e0;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	overflow: visible;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.rb-swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Text swatches (e.g. size): label only, no image / color */
.rb-swatch-text .rb-swatch-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--rb-text-color, #333);
	text-align: center;
	padding: 0 4px;
}

.rb-swatch:hover {
	border-color: #999;
	transform: translateY(-1px);
}

/* Remove default browser/theme focus ring so only our outline shows */
.rb-swatch:focus,
.rb-swatch:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Selected swatch outline: a dedicated child ring element toggled by JS.
   Rendered inside every swatch; theme focus styles on the button cannot touch it. */
.rb-swatch-ring {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--rb-active-width, 2px) solid var(--rb-active-color, #2563eb);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	z-index: 4; /* above image, but behind the flash badge (z-index 5) and tooltip */
	transition: opacity 0.15s ease;
}

.rb-swatch.rb-swatch-active .rb-swatch-ring {
	opacity: 1;
}

/* Flash badge on in-stock swatches */
.rb-swatch.rb-stock-available::before {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	background-color: var(--rb-flash-bg, #FFFFFF);
	background-image: var(--rb-flash-icon, url("https://rosebiancobd.com/wp-content/uploads/2026/01/flash-svgrepo-com.svg"));
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	z-index: 5;
	pointer-events: none;
	animation: rbSparkleGlow 2s infinite ease-in-out;
}

@keyframes rbSparkleGlow {
	0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); transform: scale(1); }
	50% { box-shadow: 0 0 10px 0 rgba(255, 215, 0, 0.6); transform: scale(1.1); }
	100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); transform: scale(1); }
}

/* Out-of-stock: diagonal red cut line */
.rb-swatch.rb-out-of-stock {
	opacity: 0.55;
}
.rb-swatch.rb-out-of-stock img,
.rb-swatch.rb-out-of-stock .rb-swatch-label {
	filter: grayscale(1);
}
.rb-swatch.rb-out-of-stock::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 2px),
		var(--rb-out-color, #e11e1e) calc(50% - 2px),
		var(--rb-out-color, #e11e1e) calc(50% + 2px),
		transparent calc(50% + 2px)
	);
	z-index: 3;
}

/* Shape variants */
.rb-swatches-wrap.rb-shape-rounded .rb-swatch,
.rb-swatches-wrap.rb-shape-rounded .rb-swatch img {
	border-radius: 10px;
}

.rb-swatches-wrap.rb-shape-square .rb-swatch,
.rb-swatches-wrap.rb-shape-square .rb-swatch img {
	border-radius: 0;
}

/* Tooltip */
.rb-swatch-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--rb-tooltip-bg, #111111);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 100;
}

.rb-swatch-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--rb-tooltip-bg, #111111);
}

.rb-swatch:hover .rb-swatch-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Hide native attribute dropdowns entirely — no residual bar on mobile and no
   "default dropdown flashes before swatches load" on reload. Applied from the
   stylesheet load so the select never paints. */
.variations_form select[name^="attribute_"],
.rb-swatches-hide-select select {
	display: none !important;
}

/* Hide the default WooCommerce "clear selection" reset link (we use our own when enabled) */
.reset_variations {
	display: none !important;
}

/* Custom "Clear" selection card: same size as a swatch, text only */
.rb-swatch.rb-swatch-clear {
	border-style: dashed;
	border-color: #c3c4c7;
	background: transparent !important;
}

.rb-swatch.rb-swatch-clear .rb-swatch-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.rb-swatch.rb-swatch-clear:hover {
	border-color: #999;
}

/* Hide CartFlows variation swatches — this plugin replaces them (prevents double sets) */
.cfvsw-swatches-option,
.cfvsw-swatches-wrap,
.cfvsw-swatches-container {
	display: none !important;
}