/**
 * Single-product variation picker.
 *
 * Plain CSS on purpose: the theme's Tailwind build only runs when someone rebuilds
 * dist/style.css, and the buy flow should not be one missing build away from being
 * unusable again. Colours mirror the Tailwind palette in tailwind.config.js
 * (greenDark #435334, storyLightGreen #9EB384, Grey #A5A5A5, textColor #626262).
 */

.rafya-variations-block {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem 1.25rem;
	border: 1px solid #E2D0C2;
	border-radius: 14px;
	background: #FDFBF8;
}

.rafya-variations-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding-bottom: .75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid rgba(98, 98, 98, .15);
}

.rafya-variations-block__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #435334;
}

.rafya-variations-block__badge {
	font-size: .75rem;
	line-height: 1.9;
	padding: 0 .625rem;
	border-radius: 999px;
	color: #794223;
	background: #FAF1E4;
	border: 1px solid #E2D0C2;
	white-space: nowrap;
}

.rafya-variation + .rafya-variation {
	margin-top: 1.25rem;
}

.rafya-variation__head {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .625rem;
}

.rafya-variation__label {
	font-size: .9375rem;
	font-weight: 700;
	color: #626262;
	margin: 0;
}

.rafya-variation__required {
	color: #FF2845;
	margin-inline-start: 2px;
}

/* Echoes the chosen value next to the label, so the state stays readable after
   the shopper scrolls the pills out of view. Filled in by variation-selector.js. */
.rafya-variation__chosen {
	font-size: .875rem;
	font-weight: 700;
	color: #435334;
}

.rafya-variation__chosen:empty::before {
	content: attr(data-placeholder);
	font-weight: 400;
	color: #A5A5A5;
}

/* ---- Native select (fallback when JS has not enhanced the control) ---- */

.rafya-variation__select {
	width: 100%;
	max-width: 22rem;
	height: 46px;
	padding: 0 2.5rem 0 .875rem;
	border: 1px solid #A5A5A5;
	border-radius: 10px;
	background-color: #fff;
	color: #626262;
	font-size: .9375rem;
}

/* Once the pills are in place the select is only a data holder. It stays in the
   DOM — WooCommerce reads and writes its value — but is taken out of the layout
   and the tab order. */
.rafya-variation--enhanced .rafya-variation__control {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Pills ---- */

.rafya-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.rafya-swatch {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	min-width: 3.5rem;
	/* 44px keeps the tap target at the accessible minimum on phones, which the old
	   42px-tall, 54px-wide select did not manage. */
	min-height: 44px;
	padding: .375rem 1rem;
	border: 1.5px solid #D6D6D6;
	border-radius: 10px;
	background: #fff;
	color: #626262;
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.6;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.rafya-swatch:hover:not(.is-unavailable):not(.is-selected) {
	border-color: #9EB384;
	background: #F6F9F2;
}

.rafya-swatch:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(158, 179, 132, .45);
	border-color: #9EB384;
}

.rafya-swatch.is-selected {
	border-color: #435334;
	background: #435334;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(67, 83, 52, .28);
}

.rafya-swatch.is-unavailable {
	cursor: not-allowed;
	color: #BDBDBD;
	border-color: #ECECEC;
	background: #FAFAFA;
	text-decoration: line-through;
}

/* ---- Footer: hint + clear ---- */

.rafya-variations__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.rafya-variations__hint {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.8;
	color: #8A8A8A;
}

/* Raised to an error only when someone tries to buy without choosing. */
.rafya-variations.is-missing-selection .rafya-variations__hint {
	color: #FF2845;
	font-weight: 700;
}

.rafya-variations.is-missing-selection .rafya-swatches {
	animation: rafya-nudge .4s ease;
}

@keyframes rafya-nudge {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-5px); }
	75%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.rafya-variations.is-missing-selection .rafya-swatches { animation: none; }
	.rafya-swatch { transition: none; }
}

/* WooCommerce injects this link; it is only meaningful once something is chosen. */
.rafya-variations__foot .reset_variations {
	font-size: .8125rem;
	color: #8A8A8A;
	text-decoration: underline;
}

.rafya-variations__foot .reset_variations:hover {
	color: #435334;
}

/* ---- Add-to-cart button, while no variation is chosen ----

   Deliberately NOT greyed out. A washed-out button reads as "this shop is
   broken" rather than "you still have to pick a colour", and it gives the
   shopper nothing to act on. The button keeps its normal colour and stays
   clickable; clicking without a selection is caught in JS and answers with the
   inline hint above, which names the attribute that is still missing.

   WooCommerce's own rule (opacity .5, cursor not-allowed, grey hover) is very
   specific and would otherwise win, hence !important. */

.single_add_to_cart_button.disabled.wc-variation-selection-needed,
.single_add_to_cart_button.disabled.wc-variation-selection-needed:hover {
	opacity: 1 !important;
	cursor: pointer !important;
	color: #fff !important;
	background-color: #435334 !important;
}

/* A combination that genuinely is not stocked is a dead end rather than a
   missing step, so that one does read as unavailable. */
.single_add_to_cart_button.disabled.wc-variation-is-unavailable,
.single_add_to_cart_button.disabled.wc-variation-is-unavailable:hover {
	opacity: .6 !important;
	cursor: not-allowed !important;
	color: #fff !important;
	background-color: #8A8A8A !important;
}

/* ---- Mobile sticky buy bar ---- */

/* The bar carries Tailwind classes, but those only exist if someone rebuilds
   dist/style.css. The buy button on phones should not depend on a build step,
   so the positioning is restated here. */
.rafya-buybar {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	/* Not 100vw: that ignores the scrollbar gutter and causes sideways scroll. */
	width: auto;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
	.rafya-buybar {
		display: none;
	}
}

/* Reserve room so the bar never sits on top of the last of the page.
   Targeted at body rather than body.single-product because header.php prints a
   hardcoded <body class=""> and never calls body_class(), so none of the usual
   WordPress body classes exist. This file is only enqueued on product pages, so
   the bare selector stays scoped to the pages that have the bar. */
@media (max-width: 767px) {
	body {
		padding-bottom: 7.5rem;
	}
}

@media (max-width: 767px) {
	.rafya-variations-block {
		padding: .875rem 1rem 1rem;
	}

	.rafya-swatches {
		gap: .4375rem;
	}

	.rafya-swatch {
		flex: 1 1 auto;
		min-width: 4.5rem;
		text-align: center;
	}
}