/**
 * Simple Product Attribute Buttons — Front-end Styles
 *
 * @package SPAB
 * @since   1.0.0
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */

.spab-attributes-wrapper {
	margin: 1.5em 0;
}

/* ==========================================================================
   Attribute Group
   ========================================================================== */

.spab-attribute-group {
	margin-bottom: 1.25em;
}

.spab-attribute-group:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Label
   ========================================================================== */

.spab-attribute-label {
	display: block;
	margin: 0 0 0.5em;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #1a1a1a;
	line-height: 1.4;
}

/* ==========================================================================
   Options Container (radiogroup)
   ========================================================================== */

.spab-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* ==========================================================================
   Hidden Radio Input
   ========================================================================== */

.spab-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Button (Label)
   ========================================================================== */

.spab-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5em 1.125em;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: #333;
	background-color: #fff;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

/* ==========================================================================
   Hover State
   ========================================================================== */

.spab-button:hover {
	background-color: #f5f5f5;
	border-color: #9ca3af;
}

/* ==========================================================================
   Focus State — WCAG AA
   ========================================================================== */

.spab-radio:focus-visible + .spab-button,
.spab-button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ==========================================================================
   Selected / Active State
   ========================================================================== */

.spab-radio:checked + .spab-button,
.spab-button.spab-selected {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Disabled State
   ========================================================================== */

.spab-radio:disabled + .spab-button,
.spab-button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Validation Error State
   ========================================================================== */

.spab-attribute-group.spab-error .spab-options {
	border-radius: 6px;
	box-shadow: 0 0 0 2px #ef4444;
	padding: 0.25em;
}

.spab-attribute-group.spab-error .spab-attribute-label {
	color: #ef4444;
}

/* ==========================================================================
   Responsive — Touch-Friendly
   ========================================================================== */

@media (max-width: 600px) {
	.spab-button {
		min-height: 2.75rem;
		padding: 0.625em 1em;
		font-size: 0.8125rem;
	}
}