/**
 * Product Options Component
 *
 * Unified variant selector styling for print products.
 * Works in both page and modal contexts.
 *
 * @package NightGlass
 * @since 2.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.product-options {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ==========================================================================
   Price Confirmation (above Add to Cart)
   ========================================================================== */

.product-options__price-confirm {
	text-align: center;
	min-height: 0;
	overflow: hidden;
	transition: min-height var(--transition-normal);
}

.product-options__price-confirm:has(.product-options__price:empty) {
	min-height: 0;
}

.product-options__price-confirm:has(.product-options__price:not(:empty)) {
	min-height: 2.5rem;
}

.product-options__price {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	line-height: 1.2;
}

.product-options__price:empty {
	display: none;
}

/* ==========================================================================
   Option Groups
   ========================================================================== */

.product-options__group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.product-options__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-muted);
}

.product-options__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Type buttons (Framed/Unframed) - equal width to each other, not full row */
.product-options__group[data-option="product-type"] .product-options__btn {
	min-width: 5.5rem;
	text-align: center;
	justify-content: center;
}

/* ==========================================================================
   Buttons - Base State
   ========================================================================== */

.product-options__btn {
	padding: 0.5rem 1rem;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	color: var(--wp--preset--color--text-secondary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast, var(--transition-fast));
}

.product-options__btn:hover:not(:disabled):not(.is-selected) {
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--wp--preset--color--white);
	background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Buttons - Selected State
   ========================================================================== */

.product-options__btn.is-selected {
	border-color: rgba(212, 175, 55, 0.5);
	background: rgba(212, 175, 55, 0.1);
	color: var(--wp--preset--color--white);
}

/* Maintain selected appearance on hover */
.product-options__btn.is-selected:hover {
	border-color: rgba(212, 175, 55, 0.65);
	background: rgba(212, 175, 55, 0.15);
}

/* ==========================================================================
   Buttons - Disabled State (Group Disabled)
   ========================================================================== */

.product-options__group--disabled .product-options__btn {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.product-options__group--disabled .product-options__label {
	opacity: 0.5;
}

/* Colour group: not applicable (unframed) - hide on single product page */
.product-options__group--colours.product-options__group--not-applicable {
	display: none;
}

/* Colour group: hidden (framed, no size yet) - collapse on page */
.product-options__group--colours.product-options__group--hidden {
	display: none;
}

/* ==========================================================================
   Size Group Active/Inactive States
   ========================================================================== */

/* Inactive size groups are hidden */
.product-options__group--inactive {
	display: none;
}

/* Active groups are visible */
.product-options__group--active {
	display: flex;
}

/* ==========================================================================
   Selections Wrapper (contains sizes, colours, price)
   ========================================================================== */

.product-options__selections {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ==========================================================================
   Modal: CSS Grid Layout to Lock Positions
   ========================================================================== */

/*
 * Use CSS Grid to create fixed rows:
 * - Row 1: Option buttons (auto height)
 * - Row 2: Selections (fixed 18rem)
 * - Row 3: Add to Cart (auto height)
 */
.prints-modal .product-options {
	display: grid !important;
	grid-template-rows: auto 18rem auto;
	gap: 1rem;
}

/* Selections wrapper fills its grid row */
.prints-modal .product-options__selections {
	overflow: hidden;
}

/* In modal: always show FRAMED size group (even when inactive/hidden)
   User sees full options upfront. Unframed sizes stay hidden to avoid confusion. */
.prints-modal .product-options__group--size-framed.product-options__group--inactive,
.prints-modal .product-options__group--size-framed.product-options__group--disabled {
	display: flex !important;
	visibility: visible !important;
}

/* In modal: show colours when Framed selected but awaiting size (--hidden).
   Hide colours when Unframed selected (--not-applicable) - not relevant. */
.prints-modal .product-options__group--colours.product-options__group--hidden {
	display: flex !important;
	visibility: visible !important;
}

.prints-modal .product-options__group--colours.product-options__group--not-applicable {
	display: none !important;
}

/* Reorder colours in modal: Natural (oak) first, then Black, then White */
.prints-modal .product-options__btn--colour[data-value="natural"] { order: 1; }
.prints-modal .product-options__btn--colour[data-value="tasmanian-oak"] { order: 1; }
.prints-modal .product-options__btn--colour[data-value="black"] { order: 2; }
.prints-modal .product-options__btn--colour[data-value="white"] { order: 3; }

/* ==========================================================================
   Buttons - Individual Disabled (e.g., panoramic "Framed")
   ========================================================================== */

.product-options__btn--disabled,
.product-options__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ==========================================================================
   Buttons - Hidden (sizes not available for product type)
   ========================================================================== */

.product-options__btn--hidden {
	display: none;
}

/* ==========================================================================
   Two-Line Size Buttons (name + dimensions)
   ========================================================================== */

.product-options__btn--two-line {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.625rem 1.25rem;
	min-width: 6rem;
	gap: 0.125rem;
}

.product-options__size-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: inherit;
	line-height: 1.2;
}

.product-options__size-dims {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.2;
}

/* Selected state - dims stay visible but slightly brighter */
.product-options__btn--two-line.is-selected .product-options__size-dims {
	color: rgba(255, 255, 255, 0.6);
}

/* Size buttons container - allow more room */
.product-options__buttons--sizes {
	gap: 0.625rem;
}

/* ==========================================================================
   Radio Row Size Selector (3-column table layout)
   ========================================================================== */

.product-options__radio-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.product-options__radio-row {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	align-items: center;
	width: 100%;
	padding: 0.625rem 0.75rem 0.625rem 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--sans);
	cursor: pointer;
	transition: all var(--transition-fast, var(--transition-fast));
	text-align: left;
}

.product-options__radio-row:hover:not(:disabled):not(.is-selected) {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
}

/* Size name - column 1 */
.product-options__radio-name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

/* Dimensions - column 2 */
.product-options__radio-dims {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
	padding-left: 1.25rem;
}

/* Price - column 3 */
.product-options__radio-price {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-secondary);
	text-align: right;
}

/* Selected state */
.product-options__radio-row.is-selected {
	border-color: rgba(212, 175, 55, 0.4);
	background: rgba(212, 175, 55, 0.06);
}

.product-options__radio-row.is-selected .product-options__radio-price {
	color: var(--wp--preset--color--gold, #d4af37);
	font-weight: 600;
	font-size: 1rem;
}

.product-options__radio-row.is-selected:hover {
	border-color: rgba(212, 175, 55, 0.5);
	background: rgba(212, 175, 55, 0.08);
}

/* Disabled state (group disabled) */
.product-options__group--disabled .product-options__radio-row {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Colour Buttons with Swatches
   ========================================================================== */

/* Colour buttons - natural width, fill available space */
.product-options__buttons--colours {
	display: flex;
	gap: 0.5rem;
}

.product-options__btn--colour {
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
}

/* Black and White stretch to fill, Natural keeps its width */
.product-options__btn--colour[data-value="black"],
.product-options__btn--colour[data-value="white"] {
	flex: 1;
}

.product-options__btn--colour[data-value="natural"],
.product-options__btn--colour[data-value="tasmanian-oak"] {
	flex: none;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.product-options__swatch {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	transition: filter var(--transition-fast, var(--transition-fast));
}

/* Swatch Colours */
.product-options__swatch--black {
	background: var(--color-frame-preview-bg, #1a1a1a);
	border-color: rgba(255, 255, 255, 0.4);
}

.product-options__swatch--white {
	background: var(--color-frame-preview-light, #f5f5f5);
	border-color: rgba(0, 0, 0, 0.15);
}

.product-options__swatch--natural,
.product-options__swatch--tasmanian-oak {
	background: linear-gradient(
		135deg,
		var(--color-frame-oak-start, #c4a574) 0%,
		var(--color-frame-oak-end, #a68b5b) 100%
	);
	border-color: rgba(255, 255, 255, 0.3);
}

.product-options__colour-name {
	font-size: 0.9375rem;
}

/* Greyscale swatches when disabled */
.product-options__group--disabled .product-options__swatch {
	filter: grayscale(1);
}

.product-options__group--colours:not(.product-options__group--disabled) .product-options__swatch {
	filter: grayscale(0);
}

/* ==========================================================================
   Add to Cart Integration
   ========================================================================== */

.product-options__add-to-cart {
	margin-top: 1.75rem;
	margin-bottom: 1.5rem;
}

/* Hide default WooCommerce variations table */
.product-options__add-to-cart .variations {
	display: none !important;
}

.product-options__add-to-cart .reset_variations {
	display: none !important;
}

/* Hide quantity selector for prints */
.product-options__add-to-cart .quantity {
	display: none !important;
}

/* Hide stock status display */
.product-options__add-to-cart .stock,
.product-options__add-to-cart .woocommerce-variation-availability {
	display: none !important;
}

/* Hide WooCommerce's variation price display */
.product-options__add-to-cart .woocommerce-variation-price,
.product-options__add-to-cart .single_variation .price,
.product-options__add-to-cart .woocommerce-variation-price .price,
.product-options__add-to-cart .single_variation_wrap .woocommerce-variation-price {
	display: none !important;
	visibility: hidden !important;
}

/* Keep button visible and styled */
.product-options__add-to-cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.product-options__add-to-cart .single_add_to_cart_button {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 2rem;
	background: var(--wp--preset--color--accent-dark, #1a6b5c);
	border: none;
	border-radius: 8px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background var(--transition-fast, var(--transition-fast));
}

.product-options__add-to-cart .single_add_to_cart_button:hover:not(:disabled) {
	background: var(--wp--preset--color--accent-dark-hover, #1f7d6b);
}

.product-options__add-to-cart .single_add_to_cart_button:disabled,
.product-options__add-to-cart .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
	.product-options__price {
		font-size: 1.5rem;
	}

	.product-options__btn {
		padding: 0.625rem 1rem;
		min-height: 2.75rem;
		font-size: 0.875rem;
	}

	.product-options__btn--colour {
		padding: 0.625rem 0.875rem;
	}

	.product-options__colour-name {
		font-size: 0.875rem;
	}

	.product-options__swatch {
		width: 18px;
		height: 18px;
	}

	.product-options__add-to-cart .single_add_to_cart_button {
		min-height: 2.75rem;
		font-size: 0.875rem;
	}

	/* Radio rows - compact grid on mobile */
	.product-options__radio-row {
		grid-template-columns: 4.5rem 1fr auto;
		padding: 0.4rem 0.625rem;
	}

	.product-options__radio-name,
	.product-options__radio-dims,
	.product-options__radio-price {
		font-size: 0.75rem;
	}
}

/* ==========================================================================
   Limited Edition - Premium Gold Styling
   ========================================================================== */

/* Limited Edition Banner */
.product-options__limited-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	margin-bottom: 1.25rem;
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: 8px;
}

.product-options__limited-icon {
	color: #d4af37;
	font-size: 1.25rem;
	flex-shrink: 0;
}

.product-options__limited-content {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.product-options__limited-title {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #d4af37;
	letter-spacing: 0.02em;
}

.product-options__limited-detail {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-secondary, rgba(255, 255, 255, 0.6));
}

/* Limited Edition - Gold accent on selected buttons */
.product-options--limited-edition .product-options__btn.is-selected {
	border-color: rgba(212, 175, 55, 0.5);
	box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.05);
}

.product-options--limited-edition .product-options__radio-row.is-selected {
	border-color: rgba(212, 175, 55, 0.5);
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.06) 100%);
}

.product-options--limited-edition .product-options__radio-row.is-selected .product-options__radio-price {
	color: #d4af37;
}

/* Limited Edition - Gold Add to Cart button */
.product-options--limited-edition .single_add_to_cart_button {
	background: linear-gradient(135deg, #d4af37 0%, #c9a227 100%) !important;
	border-color: #d4af37 !important;
	color: #1a1a1a !important;
	font-weight: 600;
}

.product-options--limited-edition .single_add_to_cart_button:hover {
	background: linear-gradient(135deg, #e8c54a 0%, #d4af37 100%) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Light mode adjustments */
[data-theme="light"] .product-options__limited-banner {
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.06) 100%);
	border-color: rgba(212, 175, 55, 0.4);
}

[data-theme="light"] .product-options__limited-detail {
	color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .product-options--limited-edition .single_add_to_cart_button {
	color: #1a1a1a !important;
}