/**
 * WC Variation Swatches — Frontend Styles
 *
 * Uses CSS custom properties (set dynamically via PHP inline styles)
 * so the admin color picker settings are reflected in real-time.
 *
 * Variables injected by PHP:
 *   --wcvs-selected-border
 *   --wcvs-selected-bg
 *   --wcvs-selected-text
 *   --wcvs-selected-shadow
 *   --wcvs-radius
 */

/* ─── Hide original selects ─── */
body.wcvs-enabled .variations select {
	display: none !important;
}

/* ─── Swatch container ─── */
body.wcvs-enabled .variations .wcvs-options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 4px !important;
}

/* ─── Attribute label ─── */
body.wcvs-enabled .variations .label label {
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
	color: #555 !important;
}

/* ─── Individual swatch button ─── */
body.wcvs-enabled .variations .wcvs-options button.wcvs-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 44px !important;
	height: 38px !important;
	padding: 0 14px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: var(--wcvs-radius, 4px) !important;
	background: #fff !important;
	color: #333 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	user-select: none !important;
	outline: none !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* ─── Hover state ─── */
body.wcvs-enabled .variations .wcvs-options button.wcvs-btn:not([data-selected]):hover {
	border-color: #999 !important;
	background: #fafafa !important;
	color: #222 !important;
}

/* ─── Selected state ─── */
body.wcvs-enabled .variations .wcvs-options button.wcvs-btn[data-selected],
body.wcvs-enabled .variations .wcvs-options button.wcvs-btn[data-selected]:hover {
	border: 1.5px solid var(--wcvs-selected-border, #2e7d32) !important;
	background: var(--wcvs-selected-bg, #e8f5e9) !important;
	color: var(--wcvs-selected-text, #1b5e20) !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 8px var(--wcvs-selected-shadow, rgba(46, 125, 50, 0.18)) !important;
}

/* ─── Disabled / unavailable ─── */
body.wcvs-enabled .variations .wcvs-options button.wcvs-btn[data-disabled] {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	position: relative !important;
	text-decoration: line-through !important;
	background: #f8f8f8 !important;
	color: #bbb !important;
	border-color: #e5e5e5 !important;
}

/* ─── Reset variations link ─── */
body.wcvs-enabled .variations .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: #999;
	text-decoration: underline;
	cursor: pointer;
}

/* ─── Clean table borders ─── */
body.wcvs-enabled .variations td {
	padding: 6px 0;
}

body.wcvs-enabled .variations tr {
	border: none;
}

/* ═══════════════════════════════════════════
   Style buttons with icons (larger layout)
   ═══════════════════════════════════════════ */

body.wcvs-enabled .variations .wcvs-options.has-icons button.wcvs-btn {
	min-width: 120px !important;
	height: auto !important;
	padding: 10px 16px !important;
	flex-direction: row !important;
	gap: 8px !important;
	font-size: 11px !important;
	text-align: left !important;
	justify-content: flex-start !important;
	line-height: 1.3 !important;
}

body.wcvs-enabled .variations .wcvs-options.has-icons .wcvs-icon {
	display: flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
}

body.wcvs-enabled .variations .wcvs-options.has-icons .wcvs-icon svg {
	width: 28px !important;
	height: 28px !important;
}

body.wcvs-enabled .variations .wcvs-options.has-icons .wcvs-text {
	flex: 1 !important;
	white-space: normal !important;
}

/* ═══════════════════════════════════════════
   Color circle swatches
   ═══════════════════════════════════════════ */

/* Color swatch container */
body.wcvs-enabled .variations .wcvs-options.has-colors {
	gap: 10px !important;
	align-items: center !important;
}

/* Color circle button (outer ring) */
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: unset !important;
	padding: 0px !important;
	border: 1.2px solid transparent !important;
	border-radius: 50% !important;
	background: transparent !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	position: relative !important;
}

/* Inner color circle */
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn .wcvs-color-inner {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	transition: transform 0.15s ease !important;
}

/* Hover state */
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn:not([data-selected]):not([data-disabled]):hover {
	border-color: #ccc !important;
}

body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn:not([data-selected]):not([data-disabled]):hover .wcvs-color-inner {
	transform: scale(0.9) !important;
}

/* Selected state - ring border */
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn[data-selected],
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn[data-selected]:hover {
	border-color: var(--wcvs-selected-border, #2e7d32) !important;
	box-shadow: 0 0 0 1px var(--wcvs-selected-border, #2e7d32) !important;
}

body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn[data-selected] .wcvs-color-inner {
	transform: scale(0.82) !important;
}

/* Disabled state */
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn[data-disabled] {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn[data-disabled]::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 5% !important;
	width: 90% !important;
	height: 2px !important;
	background: #999 !important;
	transform: rotate(-45deg) !important;
}

/* Tooltip on hover */
body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn::before {
	content: attr(title) !important;
	position: absolute !important;
	bottom: calc(100% + 6px) !important;
	left: 50% !important;
	transform: translateX(-50%) scale(0.8) !important;
	background: #333 !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: all 0.15s ease !important;
	z-index: 10 !important;
	text-transform: capitalize !important;
}

body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn:hover::before {
	opacity: 1 !important;
	transform: translateX(-50%) scale(1) !important;
}

/* ═══════════════════════════════════════════
   Mobile adjustments
   ═══════════════════════════════════════════ */

@media (max-width: 549px) {
	body.wcvs-enabled .variations .wcvs-options button.wcvs-btn {
		min-width: 40px !important;
		height: 34px !important;
		padding: 0 10px !important;
		font-size: 12px !important;
	}

	body.wcvs-enabled .variations .wcvs-options.has-icons button.wcvs-btn {
		min-width: 100px !important;
		padding: 8px 10px !important;
		font-size: 10px !important;
	}

	body.wcvs-enabled .variations .wcvs-options.has-icons .wcvs-icon svg {
		width: 22px !important;
		height: 22px !important;
	}

	body.wcvs-enabled .variations .wcvs-options.has-colors button.wcvs-color-btn {
		width: 34px !important;
		height: 34px !important;
	}

	body.wcvs-enabled .variations .wcvs-options.has-colors {
		gap: 8px !important;
	}
}