/*
 * Product options block (Sailor Name & Number, Frame Color, Size, etc.),
 * rendered before the Add to Cart button via woocommerce_before_add_to_cart_button.
 * Sits inside form.cart, so it needs to claim its own full-width row
 * rather than becoming a flex sibling of the qty input and button.
 */

.ff-product-options {
	display: flex;
	flex: 1 0 100%;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

.ff-product-options__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.ff-product-options__label {
	font-size: var(--text-sm);
	font-weight: 600;
}

.ff-product-options__required {
	color: var(--color-black);
}

.ff-product-options__field input[type='text'] {
	max-width: 360px;
	padding: var(--space-2xs) var(--space-sm);
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
}

.ff-product-options__custom-input[hidden] {
	display: none;
}

/* ---------- Tag-style option buttons (replaces a plain <select>) ---------- */
.ff-product-options__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.ff-tag {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) var(--space-md);
	border: 2px solid var(--color-black);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * .screen-reader-text (clip-based hiding) isn't reliable for native
 * radio/select controls — some browsers still paint the native widget
 * even at a 1px clipped size. opacity:0 hides the actual rendered
 * control regardless, while position:absolute + inset:0 keeps it
 * exactly over its visible .ff-tag label (not off in a page corner) so
 * focus outline / hit target still line up correctly.
 */
.ff-tag__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
}

.ff-tag:hover {
	background-color: var(--color-grey-light);
}

.ff-tag:has(.ff-tag__input:checked) {
	background-color: var(--color-black);
	color: var(--color-white);
}

.ff-tag:has(.ff-tag__input:checked):hover {
	background-color: var(--color-black);
}

.ff-tag:has(.ff-tag__input:focus-visible) {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/*
 * Sailor Name & Number "swatches" (see framed_famous_render_sailor_sibling_swatches())
 * are plain links to sibling products, not radios — .ff-tag--current marks
 * which sibling is the page you're already on, styled the same as a
 * selected .ff-tag so the whole family still reads as one option group.
 */
.ff-tag--current {
	background-color: var(--color-black);
	color: var(--color-white);
	cursor: default;
}

.ff-tag--current:hover {
	background-color: var(--color-black);
}

.ff-sailor-swatches {
	margin-bottom: var(--space-md);
}

/* Sits right after the Size tags, before Add to Cart — see
   inc/frame-size-pricing.php. Same full-width-row reasoning as
   .ff-product-options above: form.cart is a flex row. */
.frame-size-dimensions {
	flex: 1 0 100%;
	margin: calc(-1 * var(--space-2xs)) 0 var(--space-sm);
	font-size: var(--text-xs);
	color: rgba(0, 0, 0, 0.55);
}

/*
 * Hides a native form control (e.g. WooCommerce's own variation <select>)
 * that a JS-built .ff-tag proxy sits in front of. Same opacity-based
 * approach as .ff-tag__input above, for the same reason — clip-based
 * .screen-reader-text hiding isn't reliable for native replaced controls.
 */
.ff-hidden-native-control {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	overflow: hidden;
}

/*
 * WooCommerce's native variation table (e.g. Frame Color once it's used
 * for variations) — assets/js/product-gallery-options.js hides the
 * <select> and inserts .ff-variation-tags right after it. The surrounding
 * <table>/<tr>/<th>/<td> is still WooCommerce's own table markup; force it
 * to stack (label above, tags below) instead of a side-by-side table row,
 * so it matches every other option field's layout.
 */
table.variations,
table.variations tbody,
table.variations tr {
	display: block;
	width: 100%;
}

table.variations {
	flex: 1 0 100%;
	margin-bottom: var(--space-sm);
}

table.variations tr {
	margin-bottom: var(--space-md);
}

table.variations th.label,
table.variations td.value {
	display: block;
	padding: 0;
	text-align: left;
}

table.variations th.label {
	margin-bottom: var(--space-3xs);
	font-size: var(--text-sm);
	font-weight: 600;
}

table.variations .reset_variations {
	display: inline-block;
	margin-top: var(--space-2xs);
	font-size: var(--text-xs);
	text-decoration: underline;
}