/* =============================================================================
   Product Variations by Brooklyn Visuals – vvs-swatches.css
   Target look: right side of the reference screenshot.
   • Colour attributes → 40 px filled circles with outer-ring selection
   • Size attributes   → white rectangular pill buttons, dark fill on select
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hide WooCommerce's own .variations table once our block is active.
   The <select> elements stay in the DOM (WC JS needs them) but are invisible.
   --------------------------------------------------------------------------- */

.variations_form.vvs-active table.variations {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Our swatch block (inserted before the WC table)
   --------------------------------------------------------------------------- */

.vvs-block {
	margin-bottom: 16px;
	overflow: visible;
}

.vvs-swatch-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

/* Label row: "COLORS : Red"  or  "SIZES" */
.vvs-label-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.vvs-attr-name {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #777;
}

.vvs-selected-value {
	font-size: 12px;
	font-weight: 500;
	color: #222;
}

/* Flex row of swatches */
.vvs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Base swatch <button> reset
   --------------------------------------------------------------------------- */

.vvs-swatch {
	--vvs-size:           32px;
	--vvs-selected-color: #333;

	position:    relative;
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	padding:     0;
	margin:      0;
	border:      none;
	background:  transparent;
	cursor:      pointer;
	box-sizing:  border-box;
	user-select: none;
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
	transition:  box-shadow 0.15s ease, opacity 0.15s ease, background 0.12s ease, color 0.12s ease;
}

.vvs-swatch:focus-visible {
	outline: 3px solid #0073aa;
	outline-offset: 3px;
}

/* ===========================================================================
   COLOUR swatches — always a circle
   =========================================================================== */

.vvs-swatch.vvs-type-color {
	width:         var(--vvs-size);
	height:        var(--vvs-size);
	border-radius: 50% !important;
	border:        1.5px solid rgba(0, 0, 0, 0.12);
	background:    #c0c0c0; /* fallback grey (overridden inline by JS) */
	overflow:      hidden;
	font-size:     12px;
	font-weight:   700;
	color:         #fff;
	text-shadow:   0 1px 2px rgba(0,0,0,0.45);
	box-shadow:    none;
}

/* Hover: subtle preview ring */
.vvs-swatch.vvs-type-color:hover {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,0.2);
}

/* Selected: white gap + coloured outer ring — same as designer */
.vvs-swatch.vvs-type-color.vvs-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vvs-selected-color);
}

/* White swatch needs stronger border so it's visible on white background */
.vvs-swatch.vvs-type-color[style*="rgb(255, 255, 255)"],
.vvs-swatch.vvs-type-color[style*="#ffffff"],
.vvs-swatch.vvs-type-color[style*="#FFFFFF"] {
	border: 2px solid rgba(0,0,0,0.25) !important;
	color: #bbb;
	text-shadow: none;
}

/* Image swatches — circle too */
.vvs-swatch.vvs-type-image {
	width:  var(--vvs-size);
	height: var(--vvs-size);
	border-radius: 50% !important;
	border:  1.5px solid rgba(0,0,0,0.12);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.vvs-swatch.vvs-type-image:hover {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,0.2);
}

.vvs-swatch.vvs-type-image.vvs-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vvs-selected-color);
}

/* Fallback: grey circle with first letter */
.vvs-swatch.vvs-no-color,
.vvs-swatch.vvs-no-image {
	background: #a0a0a0 !important;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* ===========================================================================
   SIZE / BUTTON swatches — white pill, NEVER circular
   =========================================================================== */

.vvs-swatch.vvs-type-button {
	width:         auto !important;
	height:        42px;
	min-width:     50px;
	padding:       0 16px;
	border-radius: 6px !important;   /* always rectangular */
	background:    #ffffff;
	color:         #333333;
	border:        1.5px solid #d0d0d0 !important;
	font-size:     13px;
	font-weight:   600;
	line-height:   1;
	letter-spacing: 0.01em;
	white-space:   nowrap;
	text-shadow:   none;
	box-shadow:    none !important;  /* override any inherited box-shadow */
}

.vvs-swatch.vvs-type-button:hover {
	border-color: #888 !important;
	background:   #f5f5f5;
}

/* Selected: dark fill, white text — matches designer */
.vvs-swatch.vvs-type-button.vvs-selected {
	background:   #111111 !important;
	color:        #ffffff !important;
	border-color: #111111 !important;
	box-shadow:   none !important;
}

/* ===========================================================================
   Out-of-stock states
   =========================================================================== */

.vvs-oos-cross { position: relative; cursor: not-allowed; }

/* Diagonal line — works on all colours and shapes */
.vvs-oos-cross::after {
	content:  '';
	position: absolute;
	inset:    0;
	background: linear-gradient(
		to bottom right,
		transparent calc(50% - 1.5px),
		rgba(0,0,0,0.5) calc(50% - 1.5px),
		rgba(0,0,0,0.5) calc(50% + 1.5px),
		transparent calc(50% + 1.5px)
	);
	pointer-events: none;
	border-radius: inherit;
}

.vvs-oos-grey { opacity: 0.35; cursor: not-allowed; }
.vvs-oos-blur { filter: blur(1px); opacity: 0.55; cursor: not-allowed; }

/* ===========================================================================
   CSS-only tooltips
   =========================================================================== */

.vvs-swatch[data-tooltip]::before,
.vvs-swatch[data-tooltip]::after {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.vvs-swatch[data-tooltip]::before {
	content:       attr(data-tooltip);
	position:      absolute;
	left:          50%;
	padding:       4px 9px;
	background:    rgba(20,20,20,0.88);
	color:         #fff;
	font-size:     11px;
	font-weight:   400;
	white-space:   nowrap;
	border-radius: 4px;
	z-index:       1000;
	line-height:   1.4;
	text-shadow:   none;
	transform:     translateX(-50%) translateY(4px);
}

.vvs-swatch[data-tooltip]::after {
	content:  '';
	position: absolute;
	left:     50%;
	width:    0; height: 0;
	z-index:  1001;
	transform: translateX(-50%) translateY(4px);
}

.vvs-swatch.vvs-tooltip-top[data-tooltip]::before { bottom: calc(100% + 8px); }
.vvs-swatch.vvs-tooltip-top[data-tooltip]::after  {
	bottom: calc(100% + 3px);
	border-top: 5px solid rgba(20,20,20,0.88);
	border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.vvs-swatch.vvs-tooltip-top:hover[data-tooltip]::before,
.vvs-swatch.vvs-tooltip-top:hover[data-tooltip]::after,
.vvs-swatch.vvs-tooltip-top:focus[data-tooltip]::before,
.vvs-swatch.vvs-tooltip-top:focus[data-tooltip]::after {
	opacity: 1; transform: translateX(-50%) translateY(0);
}

.vvs-swatch.vvs-tooltip-bottom[data-tooltip]::before { top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
.vvs-swatch.vvs-tooltip-bottom[data-tooltip]::after  {
	top: calc(100% + 3px);
	border-bottom: 5px solid rgba(20,20,20,0.88);
	border-left: 5px solid transparent; border-right: 5px solid transparent;
	transform: translateX(-50%) translateY(-4px);
}
.vvs-swatch.vvs-tooltip-bottom:hover[data-tooltip]::before,
.vvs-swatch.vvs-tooltip-bottom:hover[data-tooltip]::after,
.vvs-swatch.vvs-tooltip-bottom:focus[data-tooltip]::before,
.vvs-swatch.vvs-tooltip-bottom:focus[data-tooltip]::after {
	opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ===========================================================================
   Shop / archive loop swatches
   =========================================================================== */

/* ===========================================================================
   Shop / archive loop swatches  (product card swatches)
   =========================================================================== */

.vvs-loop-swatches {
	padding: 8px 0 4px;
	min-height: 24px;
}
.vvs-loop-swatches .vvs-swatch-row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 4px;
}
.vvs-loop-swatches .vvs-attr-name,
.vvs-loop-swatches .vvs-selected-value,
.vvs-loop-swatches .vvs-label-row {
	display: none; /* No label clutter on cards – just the swatches */
}
.vvs-loop-swatches .vvs-swatch.vvs-type-color {
	--vvs-size: 20px;
	font-size: 8px;
	border-width: 1px;
}
.vvs-loop-swatches .vvs-swatch.vvs-type-color.vvs-selected {
	box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--vvs-selected-color);
}

/* ===========================================================================
   Designer modal safety
   =========================================================================== */

[class*="designer-modal"] .vvs-block,
.wc-product-designer-modal .vvs-block { pointer-events: none; opacity: 0.4; }

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 480px) {
	.vvs-swatch.vvs-type-color  { --vvs-size: 28px; }
	.vvs-swatch.vvs-type-button { height: 36px; min-width: 40px; padding: 0 10px; font-size: 12px; }
}