/* =============================================================
   SuperSports Product Customizer
   Palette: Primary #C82B2A | Secondary #0E1B70
            Text #000 | Accent #FFF | Muted #262626
   Font: Poppins
   ============================================================= */

/* ------------------------------------------------------------------
   WooCommerce notices — brand palette override
   ------------------------------------------------------------------ */

/* Success message (e.g. "X added to cart") */
.woocommerce-message {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border-top-color: #C82B2A !important;
}

/* Checkmark icon before the message */
.woocommerce-message::before {
	color: #C82B2A !important;
}

/* Links inside the notice (e.g. product name) */
.woocommerce-message a:not(.button) {
	color: #C82B2A !important;
}

/* "View Cart" / action button inside the notice */
.woocommerce-message .button,
.woocommerce-message a.button {
	background-color: #C82B2A !important;
	color: #ffffff !important;
	border-color: #C82B2A !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease !important;
}

.woocommerce-message .button:hover,
.woocommerce-message a.button:hover {
	background-color: #a01f1f !important;
	border-color: #a01f1f !important;
	color: #ffffff !important;
}

/* dl.variation styles are printed via SSE_Assets::print_late_styles()
   in wp_footer at priority 999, after ALL stylesheets including Elementor. */

/* Hide the original WC attribute table (failsafe for direct calls). */
table.woocommerce-product-attributes {
	display: none !important;
}

/* ------------------------------------------------------------------
   Step container
   ------------------------------------------------------------------ */
.ss-product-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 4px 0 8px;
}

/* ------------------------------------------------------------------
   Step title  —  white, uppercase, Poppins
   ------------------------------------------------------------------ */
.ss-step-title {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 12px;
	line-height: 1.3;
}

/* ------------------------------------------------------------------
   Hide native radio inputs across all variants
   ------------------------------------------------------------------ */
.ss-radio-label input[type="radio"],
.ss-color-label input[type="radio"],
.ss-size-label  input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Standard radio buttons  (fit, and any unrecognised attribute)
   ------------------------------------------------------------------ */
.ss-options--radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ss-radio-label {
	cursor: pointer;
}

.ss-radio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	border: 2px solid #444;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.ss-radio-label:hover .ss-radio-btn {
	border-color: #C82B2A;
	color: #C82B2A;
}

.ss-radio-label input[type="radio"]:checked + .ss-radio-btn {
	border-color: #C82B2A;
	background: #C82B2A;
	color: #fff;
}

/* ------------------------------------------------------------------
   Color swatch circles
   ------------------------------------------------------------------ */
.ss-options--color {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ss-color-label {
	position: relative;
	cursor: pointer;
	display: inline-block;
	line-height: 0;
}

.ss-swatch-circle {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--ss-swatch, #ccc);
	/* Inner border keeps dark swatches visible against the page background. */
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ss-color-label:hover .ss-swatch-circle {
	transform: scale(1.1);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.15),
		0 0 0 2px #000,
		0 0 0 4px rgba(200,43,42,0.5);
}

/* Selected: red ring with a 1 px black gap. */
.ss-color-label input[type="radio"]:checked + .ss-swatch-circle {
	transform: scale(1.05);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.15),
		0 0 0 2px #000,
		0 0 0 4px #C82B2A;
}

/* ------------------------------------------------------------------
   Size square buttons
   ------------------------------------------------------------------ */
.ss-options--size {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ss-size-label {
	cursor: pointer;
}

.ss-size-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 2px solid #444;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ss-size-label:hover .ss-size-btn {
	border-color: #C82B2A;
	color: #C82B2A;
}

.ss-size-label input[type="radio"]:checked + .ss-size-btn {
	border-color: #C82B2A;
	background: #C82B2A;
	color: #fff;
}

/* ------------------------------------------------------------------
   Quantity  ±  controls
   ------------------------------------------------------------------ */

/* Wrapper injected by JS around .qty input. */
.ss-qty-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ± buttons — scoped under wrapper for highest specificity. */
.ss-qty-wrapper button.ss-qty-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: none !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 50px !important;
	padding: 0 !important;
	background: #262626 !important;
	color: #ffffff !important;
	border: 1px solid #3a3a3a !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 20px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
	-webkit-user-select: none !important;
	user-select: none !important;
}

.ss-qty-wrapper button.ss-qty-btn:hover {
	background: #C82B2A !important;
	border-color: #C82B2A !important;
	color: #ffffff !important;
}

.ss-qty-wrapper button.ss-qty-btn:active {
	background: #a01f1f !important;
	border-color: #a01f1f !important;
}

/* Quantity number input — sits between the two buttons. */
.ss-qty-wrapper .qty {
	box-sizing: border-box !important;
	width: 60px !important;
	height: 50px !important;
	border: 1px solid #3a3a3a !important;
	border-radius: 4px !important;
	background: #1a1a1a !important;
	color: #ffffff !important;
	text-align: center !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	padding: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	/* Remove native browser spinners — we use our own buttons. */
	-moz-appearance: textfield !important;
}

.ss-qty-wrapper .qty::-webkit-outer-spin-button,
.ss-qty-wrapper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/*
 * Cart page — anchor to table.cart td.product-quantity so our selectors
 * reach specificity (0,5,3+), beating any WooCommerce/theme table rule.
 */

/* Centre the wrapper inside the quantity cell. */
body.woocommerce-cart table.cart td.product-quantity .quantity {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}

body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	float: none !important;
}

body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper button.ss-qty-btn {
	min-width: unset !important;
	max-width: unset !important;
	min-height: unset !important;
	max-height: unset !important;
	float: none !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper button.ss-qty-btn:hover {
	background: #C82B2A !important;
	border-color: #C82B2A !important;
	color: #ffffff !important;
}

body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper button.ss-qty-btn:active {
	background: #a01f1f !important;
	border-color: #a01f1f !important;
}

body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper .qty {
	min-width: unset !important;
	max-width: unset !important;
	min-height: unset !important;
	max-height: unset !important;
	float: none !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper .qty::-webkit-outer-spin-button,
body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   Mobile — shrink quantity controls
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.ss-qty-wrapper {
		gap: 4px !important;
	}

	.ss-qty-wrapper button.ss-qty-btn {
		width: 30px !important;
		height: 34px !important;
		font-size: 14px !important;
	}

	.ss-qty-wrapper .qty {
		width: 40px !important;
		height: 34px !important;
		font-size: 12px !important;
	}

	/* Cart page needs the higher-specificity selector to override WC table rules. */
	body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper {
		gap: 4px !important;
	}

	body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper button.ss-qty-btn {
		width: 30px !important;
		height: 34px !important;
		font-size: 14px !important;
	}

	body.woocommerce-cart table.cart td.product-quantity .ss-qty-wrapper .qty {
		width: 40px !important;
		height: 34px !important;
		font-size: 12px !important;
	}
}