/**
 * Eyeglasses by Optogridension - Builder Styles
 * Version: 1.0.0
 * PRD2.5 Compliant - Theme Compatibility First
 */

/* ==========================================================================
   CSS Variables (Customization Points)
   ========================================================================== */

.optowoo-extra-options {
	/* Container Query Setup */
	container-type: inline-size;
	container-name: optowoo-builder;

	/* Colors - explicit to prevent theme inheritance issues */
	--optowoo-text-color: #1e1e1e;
	--optowoo-text-color-muted: #555;
	--optowoo-accent: #1e1e1e;
	--optowoo-border-color: #ddd;
	--optowoo-error-color: #d32f2f;
	--optowoo-error-bg: #ffebee;
	--optowoo-success-color: #388e3c;
	--optowoo-required-color: #d32f2f;

	color: var(--optowoo-text-color);

	/* Spacing */
	--optowoo-spacing-xs: 0.25em;
	--optowoo-spacing-sm: 0.5em;
	--optowoo-spacing-md: 1em;
	--optowoo-spacing-lg: 1.5em;
	--optowoo-spacing-xl: 2em;

	/* Borders */
	--optowoo-border-radius: 4px;
	--optowoo-border-width: 1px;

	/* Transitions */
	--optowoo-transition: all 0.2s ease;

	margin-top: var(--optowoo-spacing-md);
	margin-bottom: var(--optowoo-spacing-lg);
}

.optowoo-extra-options * {
	box-sizing: border-box;
}

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

.optowoo-extra-options .optowoo-builder {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-lg);
}

/* Loading & Error States */
.optowoo-extra-options .optowoo-loader {
	padding: var(--optowoo-spacing-lg);
	text-align: center;
	opacity: 0.7;
	margin: 0;
}

.optowoo-extra-options .optowoo-error {
	padding: var(--optowoo-spacing-md);
	margin-bottom: var(--optowoo-spacing-md);
	background-color: var(--optowoo-error-bg);
	border-left: 3px solid var(--optowoo-error-color);
	border-radius: var(--optowoo-border-radius);
	color: var(--optowoo-error-color);
}

/* Demo Notice */
.optowoo-extra-options .optowoo-notice--demo {
	padding: var(--optowoo-spacing-md);
	margin-bottom: var(--optowoo-spacing-lg);
	background-color: #fff3cd;
	border-left: 3px solid #ffc107;
	border-radius: var(--optowoo-border-radius);
}

.optowoo-extra-options .optowoo-notice--demo strong {
	display: block;
	margin-bottom: var(--optowoo-spacing-xs);
}

/* ==========================================================================
   Breadcrumbs (Step Navigation)
   ========================================================================== */

.optowoo-extra-options .optowoo-breadcrumbs {
	margin-bottom: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-breadcrumbs__list {
	display: flex;
	gap: var(--optowoo-spacing-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.optowoo-extra-options .optowoo-breadcrumbs__list::-webkit-scrollbar {
	display: none;
}

.optowoo-extra-options .optowoo-breadcrumbs__item {
	flex-shrink: 0;
}

.optowoo-extra-options .optowoo-breadcrumbs__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.8em;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	border: 1px solid var(--optowoo-border-color);
	background: transparent;
	color: var(--optowoo-text-color);
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	line-height: 1.4;
	transition:
		background-color 0.15s,
		color 0.15s,
		border-color 0.15s;
}

.optowoo-extra-options .optowoo-breadcrumbs__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.07);
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
}

.optowoo-extra-options
	.optowoo-breadcrumbs__item.is-active
	.optowoo-breadcrumbs__button {
	background: var(--optowoo-accent);
	color: #fff;
	border-color: var(--optowoo-accent);
}

.optowoo-extra-options
	.optowoo-breadcrumbs__item.is-active
	.optowoo-breadcrumbs__number {
	background: rgba(255, 255, 255, 0.25);
}

.optowoo-extra-options
	.optowoo-breadcrumbs__item.is-completed
	.optowoo-breadcrumbs__button {
	background: rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.optowoo-extra-options
	.optowoo-breadcrumbs__item.is-disabled
	.optowoo-breadcrumbs__button {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ==========================================================================
   Stepper Layout
   ========================================================================== */

.optowoo-extra-options .optowoo-stepper {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-lg);
}

/* Progress Bar */
.optowoo-extra-options .optowoo-stepper__progress-label {
	margin: 0 0 var(--optowoo-spacing-sm);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--optowoo-text-color);
}

.optowoo-extra-options .optowoo-stepper__progress-bar {
	margin-bottom: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-stepper__progress-track {
	height: 4px;
	background-color: var(--optowoo-border-color);
	border-radius: 2px;
	overflow: hidden;
}

.optowoo-extra-options .optowoo-stepper__progress-fill {
	height: 100%;
	background-color: var(--optowoo-accent);
	transition: width 0.3s ease;
}

/* Step Content Container */
.optowoo-extra-options .optowoo-stepper__content {
	margin-bottom: var(--optowoo-spacing-lg);
}

.optowoo-extra-options .optowoo-stepper__content--forward {
	animation: optowoo-slide-in-right 0.3s ease-out;
}

.optowoo-extra-options .optowoo-stepper__content--backward {
	animation: optowoo-slide-in-left 0.3s ease-out;
}

@keyframes optowoo-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes optowoo-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.optowoo-extra-options .optowoo-stepper__content--forward,
	.optowoo-extra-options .optowoo-stepper__content--backward {
		animation: none;
	}
}

/* Sticky footer — holds the step's primary CTA (Continue or Add to Cart) so
   it stays reachable regardless of how tall the step content above it gets.
   Sticks to the bottom of .optowoo-builder, its scrolling ancestor. */
.optowoo-extra-options .optowoo-stepper__footer {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-top: auto;
	background-color: #fff;
}

.optowoo-extra-options .optowoo-stepper__footer:not(:empty) {
	padding-top: var(--optowoo-spacing-md);
	border-top: var(--optowoo-border-width) solid var(--optowoo-border-color);
}

/* Controls */
.optowoo-extra-options .optowoo-stepper__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-stepper__hint {
	flex: 1;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Back Link */
.optowoo-extra-options .optowoo-stepper__back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--optowoo-spacing-xs);
	padding: var(--optowoo-spacing-xs) 0;
	margin-bottom: var(--optowoo-spacing-md);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.9em;
	color: var(--optowoo-text-color);
	opacity: 0.8;
	transition: var(--optowoo-transition);
	text-decoration: none;
}

.optowoo-extra-options .optowoo-stepper__back-link:hover {
	opacity: 1;
}

.optowoo-extra-options .optowoo-stepper__back-arrow {
	font-size: 1.1em;
	line-height: 1;
}

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

.optowoo-extra-options .optowoo-step {
	padding: var(--optowoo-spacing-lg);
	border: var(--optowoo-border-width) solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
}

.optowoo-extra-options .optowoo-step.is-invalid {
	border-left: 3px solid var(--optowoo-error-color);
}

/* Step-level error shown when the shopper tries to advance past an incomplete
   required step (finding #1). */
.optowoo-extra-options .optowoo-step-error {
	margin: 0 0 var(--optowoo-spacing-md);
	padding: var(--optowoo-spacing-sm) var(--optowoo-spacing-md);
	border-left: 3px solid var(--optowoo-error-color);
	color: var(--optowoo-error-color);
	font-size: 0.9rem;
}

.optowoo-extra-options .optowoo-step h3 {
	margin-top: 0;
	margin-bottom: var(--optowoo-spacing-sm);
	color: var(--optowoo-text-color);
}

.optowoo-extra-options .optowoo-step__description {
	margin-bottom: var(--optowoo-spacing-lg);
	opacity: 0.8;
}

/* ==========================================================================
   Options Grid
   ========================================================================== */

.optowoo-extra-options .optowoo-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--optowoo-spacing-md);
	margin-bottom: var(--optowoo-spacing-lg);
}

.optowoo-extra-options .optowoo-option {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--optowoo-spacing-md);
	padding: var(--optowoo-spacing-md);
	border: var(--optowoo-border-width) solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	background: transparent;
	color: var(--optowoo-text-color);
	transition: var(--optowoo-transition);
}

/* The clickable toggle (thumbnail + content). Kept as a sibling of the color
   picker so the color radios are never nested inside this <button>. */
.optowoo-extra-options .optowoo-option__toggle {
	display: flex;
	flex: 1 1 100%;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--optowoo-spacing-md);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.optowoo-extra-options .optowoo-option__toggle:disabled {
	cursor: not-allowed;
}

.optowoo-extra-options .optowoo-option__toggle:focus {
	outline: none;
}

.optowoo-extra-options .optowoo-option__toggle:focus-visible {
	outline: 2px solid var(--optowoo-accent, #007cba);
	outline-offset: 2px;
	border-radius: var(--optowoo-border-radius);
}

.optowoo-extra-options .optowoo-option__thumbnail {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	object-fit: contain;
	border-radius: var(--optowoo-border-radius);
	background-color: rgba(0, 0, 0, 0.02);
}

.optowoo-extra-options .optowoo-option__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.optowoo-extra-options .optowoo-option:hover:not(.is-disabled) {
	border-color: var(--optowoo-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.optowoo-extra-options .optowoo-option.is-selected {
	border-color: var(--optowoo-accent);
	border-width: 2px;
	border-left-width: 4px;
	box-shadow: 0 0 0 1px var(--optowoo-accent);
}

.optowoo-extra-options .optowoo-option.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background-color: rgba(0, 0, 0, 0.02);
}

.optowoo-extra-options .optowoo-option__label {
	font-weight: 500;
	font-size: 1em;
	margin-bottom: var(--optowoo-spacing-xs);
}

.optowoo-extra-options .optowoo-option__description {
	font-size: 0.85em;
	opacity: 0.7;
	margin-bottom: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-option__price {
	font-size: 0.9em;
	font-weight: 600;
	margin-top: auto;
}

.optowoo-extra-options .optowoo-option__price--included {
	display: inline-block;
	color: var(--optowoo-success-color);
	background-color: rgba(56, 142, 60, 0.08);
	padding: 2px 8px;
	border-radius: 4px;
}

.optowoo-extra-options .optowoo-option__disabled-reason {
	font-size: 0.8em;
	color: var(--optowoo-text-color-muted, #555);
	margin-top: var(--optowoo-spacing-xs);
}

.optowoo-extra-options .optowoo-option__color {
	width: 100%;
	margin-top: var(--optowoo-spacing-md);
	padding-top: var(--optowoo-spacing-md);
	border-top: 1px solid var(--optowoo-border-color);
}

/* ==========================================================================
   Color Picker
   ========================================================================== */

.optowoo-extra-options .optowoo-color-picker {
	margin-top: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-color-label {
	display: block;
	margin-bottom: var(--optowoo-spacing-sm);
	font-weight: 500;
}

.optowoo-extra-options .optowoo-color-label .required {
	color: var(--optowoo-required-color);
	margin-left: var(--optowoo-spacing-xs);
}

.optowoo-extra-options .optowoo-color-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-color-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--optowoo-spacing-sm);
	border: 2px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	background: transparent;
	cursor: pointer;
	transition: var(--optowoo-transition);
	position: relative;
}

.optowoo-extra-options .optowoo-color-swatch:hover {
	border-color: var(--optowoo-accent);
}

.optowoo-extra-options .optowoo-color-swatch.is-selected {
	border-color: var(--optowoo-accent);
	border-width: 3px;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.optowoo-extra-options .optowoo-color-swatch__preview {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid var(--optowoo-border-color);
	background-size: cover;
	background-position: center;
	margin-bottom: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-color-swatch__label {
	font-size: 0.85em;
	text-align: center;
	margin-bottom: var(--optowoo-spacing-xs);
}

.optowoo-extra-options .optowoo-color-swatch__price {
	font-size: 0.75em;
	opacity: 0.7;
}

.optowoo-extra-options .optowoo-color-swatch__check {
	position: absolute;
	top: var(--optowoo-spacing-xs);
	right: var(--optowoo-spacing-xs);
	width: 1.5em;
	height: 1.5em;
	background: var(--optowoo-accent);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
}

/* ==========================================================================
   RX Form - Compact Table Layout
   ========================================================================== */

.optowoo-extra-options .optowoo-rx-step__header {
	margin-bottom: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-rx-step__description {
	margin: 0 0 var(--optowoo-spacing-sm);
	opacity: 0.9;
	font-size: 0.95em;
}

.optowoo-extra-options .optowoo-rx-step__table {
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	overflow: hidden;
	margin-bottom: var(--optowoo-spacing-lg);
}

/* Real-table layout: table-layout:fixed lets the browser align columns natively */
.optowoo-extra-options .optowoo-rx-step__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.optowoo-extra-options .optowoo-rx-table-header__eye,
.optowoo-extra-options .optowoo-rx-eye-row__label {
	width: 30%;
	text-align: left;
}

/* Table Header Row */
.optowoo-extra-options .optowoo-rx-table-header {
	background-color: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid var(--optowoo-border-color);
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.optowoo-extra-options .optowoo-rx-table-header__eye {
	/* Empty space for eye label column */
}

.optowoo-extra-options .optowoo-rx-table-header__field {
	text-align: center;
}

/* Eye Rows Container — keep the native table-row-group so body cells align to
   the <thead> columns under table-layout:fixed. Row separators are drawn on the
   cells below (see border-bottom rules), so no flex container is needed here. */
.optowoo-extra-options .optowoo-rx-step__eyes {
	display: table-row-group;
}

/* Individual Eye Row — border is on cells so it renders under border-collapse:collapse */
.optowoo-extra-options .optowoo-rx-eye-row > .optowoo-rx-field,
.optowoo-extra-options .optowoo-rx-eye-row > .optowoo-rx-eye-row__label {
	border-bottom: 1px solid var(--optowoo-border-color, #ddd);
}

.optowoo-extra-options .optowoo-rx-eye-row:last-child > .optowoo-rx-field,
.optowoo-extra-options .optowoo-rx-eye-row:last-child > .optowoo-rx-eye-row__label {
	border-bottom: none;
}

.optowoo-extra-options .optowoo-rx-eye-row__label {
	font-weight: 500;
	font-size: 0.9em;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.optowoo-extra-options .optowoo-rx-eye-row__sublabel {
	display: block;
	font-size: 0.8em;
	opacity: 0.6;
	font-weight: 400;
	line-height: 1.2;
}

/* RX Field (<td> cell in real table) */
.optowoo-extra-options .optowoo-rx-field {
	padding: var(--optowoo-spacing-xs, 0.25rem);
	vertical-align: top;
	min-width: 0; /* allow the cell to shrink below its select's intrinsic width */
}

/* Native select styling: tabular numerals + full-width within the (fixed-layout) column */
.optowoo-extra-options .optowoo-rx-field__select {
	font-variant-numeric: tabular-nums;
	width: 100%;
	min-width: 0;
	padding: var(--optowoo-spacing-sm);
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	font-size: 1em;
	color: var(--optowoo-text-color);
	background-color: white;
}

.optowoo-extra-options .optowoo-rx-field__select.has-error {
	border-color: var(--optowoo-error-color);
}

.optowoo-extra-options .optowoo-rx-field__select:focus {
	outline: none;
	border-color: var(--optowoo-accent);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.optowoo-extra-options .optowoo-rx-field__select:focus-visible {
	outline: 2px solid var(--optowoo-accent, #007cba);
	outline-offset: -1px;
	box-shadow: none;
}

.optowoo-extra-options .optowoo-rx-field__label {
	/* Hide labels in table layout as we have header row */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Legacy input styles for PD section */
.optowoo-extra-options .optowoo-rx-field__input {
	padding: var(--optowoo-spacing-sm);
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	font-size: 1em;
	color: var(--optowoo-text-color);
}

.optowoo-extra-options .optowoo-rx-field__input.has-error {
	border-color: var(--optowoo-error-color);
}

.optowoo-extra-options .optowoo-rx-field__input:focus {
	outline: none;
	border-color: var(--optowoo-accent);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.optowoo-extra-options .optowoo-rx-field__input:focus-visible {
	outline: 2px solid var(--optowoo-accent, #007cba);
	outline-offset: -1px;
	box-shadow: none;
}

/* PD Inputs - Compact Single Line Layout */
.optowoo-extra-options .optowoo-rx-pd-compact {
	display: flex;
	align-items: center;
	gap: var(--optowoo-spacing-md);
	padding: var(--optowoo-spacing-md);
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	background-color: rgba(0, 0, 0, 0.01);
}

.optowoo-extra-options .optowoo-rx-pd-compact__label {
	font-weight: 500;
	font-size: 0.9em;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.optowoo-extra-options .optowoo-rx-pd-compact__sublabel {
	display: block;
	font-size: 0.8em;
	opacity: 0.6;
	font-weight: 400;
	line-height: 1.2;
}

.optowoo-extra-options .optowoo-rx-pd-compact__inputs {
	display: flex;
	gap: var(--optowoo-spacing-sm);
	flex: 1;
	align-items: center;
}

.optowoo-extra-options .optowoo-rx-pd-compact__input {
	padding: var(--optowoo-spacing-sm);
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	font-size: 0.95em;
	width: 100px;
	background-color: white;
	color: var(--optowoo-text-color);
}

.optowoo-extra-options .optowoo-rx-pd-compact__input:focus {
	outline: none;
	border-color: var(--optowoo-accent);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.optowoo-extra-options .optowoo-rx-pd-compact__input:focus-visible {
	outline: 2px solid var(--optowoo-accent, #007cba);
	outline-offset: -1px;
	box-shadow: none;
}

.optowoo-extra-options .optowoo-rx-pd-compact__input.has-error {
	border-color: var(--optowoo-error-color);
}

/* Toggle Switch */
.optowoo-extra-options .optowoo-rx-pd-compact__toggle {
	display: flex;
	align-items: center;
	gap: var(--optowoo-spacing-sm);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.optowoo-extra-options .optowoo-rx-pd-compact__toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.optowoo-extra-options .optowoo-rx-pd-compact__toggle-slider {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 22px;
	background-color: var(--optowoo-border-color);
	border-radius: 11px;
	transition: var(--optowoo-transition);
}

.optowoo-extra-options .optowoo-rx-pd-compact__toggle-slider::before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	border-radius: 50%;
	transition: var(--optowoo-transition);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.optowoo-extra-options
	.optowoo-rx-pd-compact__toggle
	input:checked
	+ .optowoo-rx-pd-compact__toggle-slider {
	background-color: var(--optowoo-accent);
}

.optowoo-extra-options
	.optowoo-rx-pd-compact__toggle
	input:checked
	+ .optowoo-rx-pd-compact__toggle-slider::before {
	transform: translateX(20px);
}

.optowoo-extra-options .optowoo-rx-pd-compact__toggle-label {
	font-size: 0.9em;
	opacity: 0.9;
}

.optowoo-extra-options .optowoo-rx-step__errors {
	margin-top: var(--optowoo-spacing-lg);
	padding: var(--optowoo-spacing-md);
	background-color: var(--optowoo-error-bg);
	border-left: 3px solid var(--optowoo-error-color);
	border-radius: var(--optowoo-border-radius);
}

.optowoo-extra-options .optowoo-rx-step__errors ul {
	margin: var(--optowoo-spacing-sm) 0 0;
	padding-left: var(--optowoo-spacing-lg);
}

.optowoo-extra-options .optowoo-rx-step__optional-hint {
	margin-top: var(--optowoo-spacing-md);
	font-size: 0.9em;
	opacity: 0.7;
	font-style: italic;
}

/* ==========================================================================
   Field Errors
   ========================================================================== */

.optowoo-extra-options .optowoo-field-error {
	display: block;
	margin-top: var(--optowoo-spacing-xs);
	font-size: 0.85em;
	color: var(--optowoo-error-color);
}

.optowoo-extra-options .required {
	color: var(--optowoo-required-color);
	margin-left: var(--optowoo-spacing-xs);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.optowoo-extra-options .optowoo-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--optowoo-spacing-xs);
	padding: var(--optowoo-spacing-sm) var(--optowoo-spacing-lg);
	color: var(--optowoo-text-color);
	transition: var(--optowoo-transition);
}

.optowoo-extra-options .optowoo-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.optowoo-extra-options .optowoo-btn--ghost {
	background: transparent;
	border: 1px solid var(--optowoo-border-color);
}

/* Primary CTA (e.g. step "Continue") — matches the Add to Cart button's treatment. */
.optowoo-extra-options .optowoo-btn--primary {
	width: 100%;
	justify-content: center;
	padding: 1em 2em;
	font-size: 1.1em;
	font-weight: 600;
	background-color: var(--optowoo-accent);
	border: none;
	color: #fff;
	cursor: pointer;
}

/* ==========================================================================
   Price Summary
   ========================================================================== */

.optowoo-extra-options .optowoo-price-summary {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-sm);
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: var(--optowoo-border-radius);
	margin-top: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-price-summary strong {
	display: block;
	margin-top: var(--optowoo-spacing-sm);
	padding-top: var(--optowoo-spacing-sm);
	border-top: 1px solid var(--optowoo-border-color);
	font-size: 1.1em;
}

.optowoo-extra-options .optowoo-status {
	padding: var(--optowoo-spacing-sm);
	border-radius: var(--optowoo-border-radius);
	margin-bottom: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-status.is-valid {
	background-color: rgba(76, 175, 80, 0.1);
	border-left: 3px solid var(--optowoo-success-color);
}

.optowoo-extra-options .optowoo-status.is-invalid {
	background-color: var(--optowoo-error-bg);
	border-left: 3px solid var(--optowoo-error-color);
}

/* ==========================================================================
	Price Preview Panel
	========================================================================== */

.optowoo-extra-options .optowoo-price-preview {
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-price-preview__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-price-preview__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75em;
	margin: 0 0 var(--optowoo-spacing-xs);
	opacity: 0.7;
}

.optowoo-extra-options .optowoo-price-preview__total {
	margin: 0;
	font-size: 1.6em;
	font-weight: 600;
}

.optowoo-extra-options .optowoo-price-preview__toggle {
	min-width: 160px;
}

.optowoo-extra-options .optowoo-price-preview__error {
	margin: 0;
	color: var(--optowoo-error-color);
	font-size: 0.9em;
}

.optowoo-extra-options .optowoo-price-preview__details {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-price-preview__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.95em;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-price-preview__row strong {
	font-weight: 600;
}

/* ==========================================================================
   Responsive Design & Container Queries
   ========================================================================== */

/* Compact Layout (< 500px container width) */
@container optowoo-builder (max-width: 500px) {
	.optowoo-extra-options .optowoo-options {
		grid-template-columns: 1fr;
	}

	/* Narrow: hide the header row (per-field labels show instead) */
	.optowoo-extra-options .optowoo-rx-table-header {
		display: none;
	}

	.optowoo-extra-options .optowoo-rx-eye-row__label {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		padding-bottom: var(--optowoo-spacing-xs);
		border-bottom: 1px solid var(--optowoo-border-color);
		width: 100%;
	}

	/* Show Labels above fields */
	.optowoo-extra-options .optowoo-rx-field__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 4px;
		padding: 0;
		clip: auto;
		white-space: normal;
		font-size: 0.75em;
		font-weight: 600;
		text-transform: uppercase;
		color: #666;
		display: block;
	}

	.optowoo-extra-options .optowoo-rx-field__select {
		font-size: 16px; /* Prevent iOS zoom on focus */
	}

	/* PD Section Compact Layout */
	.optowoo-extra-options .optowoo-rx-pd-compact {
		flex-wrap: wrap;
		gap: var(--optowoo-spacing-sm);
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__label {
		width: 100%;
		min-width: auto;
		margin-bottom: var(--optowoo-spacing-xs);
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__inputs {
		flex: 1;
		min-width: 200px; /* Force wrap if inputs get too squeezed */
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__toggle {
		margin-left: auto; /* Push toggle to right if on same line, or left align if wrapped? */
	}
}

/* Ultra Compact (< 350px container width) */
@container optowoo-builder (max-width: 350px) {
	/* Stack Rx table cells as blocks (real table override) */
	.optowoo-extra-options .optowoo-rx-eye-row,
	.optowoo-extra-options .optowoo-rx-field { display: block; width: 100%; }
	.optowoo-extra-options .optowoo-rx-field__label { display: block; } /* show per-field labels */

	/* Stack PD inputs and toggle vertically */
	.optowoo-extra-options .optowoo-rx-pd-compact__inputs {
		width: 100%;
		flex: 1 1 100%;
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__toggle {
		margin-left: 0;
		margin-top: var(--optowoo-spacing-sm);
	}
}

/* Keep viewport media query as fallback or for page-level adjustments */
@media (max-width: 768px) {
	/* RX Table mobile layout — table-layout:fixed handles column sizing natively */
	.optowoo-extra-options .optowoo-rx-table-header {
		font-size: 0.75em;
	}

	.optowoo-extra-options .optowoo-rx-eye-row__label {
		font-size: 0.85em;
	}

	.optowoo-extra-options .optowoo-rx-field__select {
		font-size: 0.85em;
	}

	/* Compact PD mobile layout */
	.optowoo-extra-options .optowoo-rx-pd-compact {
		flex-wrap: wrap;
		gap: var(--optowoo-spacing-sm);
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__label {
		min-width: auto;
		width: 100%;
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__inputs {
		flex: 1;
	}

	.optowoo-extra-options .optowoo-rx-pd-compact__input {
		width: 80px;
		font-size: 0.9em;
	}

	.optowoo-extra-options .optowoo-color-swatches {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.optowoo-extra-options .optowoo-color-swatch__preview {
		width: 50px;
		height: 50px;
	}

	.optowoo-extra-options .optowoo-stepper__controls {
		flex-direction: column;
	}

	.optowoo-extra-options .optowoo-stepper__hint {
		order: -1;
		text-align: left;
	}
}

@media (max-width: 480px) {
	.optowoo-extra-options .optowoo-step {
		padding: var(--optowoo-spacing-md);
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.optowoo-extra-options .optowoo-stepper__controls,
	.optowoo-extra-options .optowoo-notice--demo {
		display: none;
	}
}

/* ==========================================================================
   File Dropzone (PRD4)
   ========================================================================== */

.optowoo-extra-options .optowoo-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--optowoo-spacing-sm);
	padding: var(--optowoo-spacing-xl);
	border: 2px dashed var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	background-color: rgba(0, 0, 0, 0.01);
	cursor: pointer;
	transition: var(--optowoo-transition);
	text-align: center;
	min-height: 150px;
}

.optowoo-extra-options
	.optowoo-dropzone:hover:not(.optowoo-dropzone--disabled):not(
		.optowoo-dropzone--uploading
	) {
	border-color: var(--optowoo-accent);
	background-color: rgba(0, 0, 0, 0.03);
}

.optowoo-extra-options .optowoo-dropzone:focus {
	outline: none;
	border-color: var(--optowoo-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.optowoo-extra-options .optowoo-dropzone:focus-visible {
	outline: 2px solid var(--optowoo-accent, #007cba);
	outline-offset: -1px;
	box-shadow: none;
}

.optowoo-extra-options .optowoo-dropzone--dragging {
	border-color: var(--optowoo-accent);
	background-color: rgba(0, 0, 0, 0.05);
	border-style: solid;
}

.optowoo-extra-options .optowoo-dropzone--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.optowoo-extra-options .optowoo-dropzone--uploading {
	cursor: wait;
}

.optowoo-extra-options .optowoo-dropzone--error {
	border-color: var(--optowoo-error-color);
}

.optowoo-extra-options .optowoo-dropzone--uploaded {
	border-style: solid;
	border-color: var(--optowoo-success-color);
	background-color: rgba(76, 175, 80, 0.05);
	padding: var(--optowoo-spacing-md);
	min-height: auto;
	cursor: default;
}

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

.optowoo-extra-options .optowoo-dropzone__icon {
	width: 48px;
	height: 48px;
	opacity: 0.5;
}

.optowoo-extra-options .optowoo-dropzone__icon--success {
	width: 24px;
	height: 24px;
	opacity: 1;
	color: var(--optowoo-success-color);
}

.optowoo-extra-options .optowoo-dropzone__label {
	font-weight: 500;
	font-size: 1em;
}

.optowoo-extra-options .optowoo-dropzone__hint {
	font-size: 0.85em;
	opacity: 0.7;
}

.optowoo-extra-options .optowoo-dropzone__camera-hint {
	font-size: 0.85em;
	opacity: 0.6;
	font-style: italic;
}

.optowoo-extra-options .optowoo-dropzone__uploading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--optowoo-spacing-sm);
	width: 100%;
	max-width: 300px;
}

.optowoo-extra-options .optowoo-dropzone__progress {
	width: 100%;
	height: 8px;
	background-color: var(--optowoo-border-color);
	border-radius: 4px;
	overflow: hidden;
}

.optowoo-extra-options .optowoo-dropzone__progress-bar {
	height: 100%;
	background-color: var(--optowoo-accent);
	transition: width 0.2s ease;
}

.optowoo-extra-options .optowoo-dropzone__progress-text {
	font-size: 0.9em;
	opacity: 0.8;
}

.optowoo-extra-options .optowoo-dropzone__success {
	display: flex;
	align-items: center;
	gap: var(--optowoo-spacing-sm);
	width: 100%;
}

.optowoo-extra-options .optowoo-dropzone__filename {
	flex: 1;
	font-weight: 500;
	word-break: break-all;
}

.optowoo-extra-options .optowoo-dropzone__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	opacity: 0.6;
	transition: var(--optowoo-transition);
	border-radius: 50%;
}

.optowoo-extra-options .optowoo-dropzone__remove:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.1);
}

.optowoo-extra-options .optowoo-dropzone__remove svg {
	width: 16px;
	height: 16px;
}

.optowoo-extra-options .optowoo-dropzone__error {
	margin-top: var(--optowoo-spacing-sm);
	padding: var(--optowoo-spacing-sm);
	background-color: var(--optowoo-error-bg);
	border-radius: var(--optowoo-border-radius);
	color: var(--optowoo-error-color);
	font-size: 0.9em;
	width: 100%;
}

/* ==========================================================================
   Rx Upload Component (PRD4)
   ========================================================================== */

.optowoo-extra-options .optowoo-rx-upload {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-rx-upload__description {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.9;
}

.optowoo-extra-options .optowoo-rx-upload__error {
	padding: var(--optowoo-spacing-sm);
	background-color: var(--optowoo-error-bg);
	border-left: 3px solid var(--optowoo-error-color);
	border-radius: var(--optowoo-border-radius);
	color: var(--optowoo-error-color);
	font-size: 0.9em;
}

.optowoo-extra-options .optowoo-rx-upload__tips {
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: var(--optowoo-border-radius);
	font-size: 0.9em;
}

.optowoo-extra-options .optowoo-rx-upload__tips strong {
	display: block;
	margin-bottom: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-rx-upload__tips ul {
	margin: 0;
	padding-left: var(--optowoo-spacing-lg);
}

.optowoo-extra-options .optowoo-rx-upload__tips li {
	margin-bottom: var(--optowoo-spacing-xs);
}

/* ==========================================================================
   PD Photo Component (PRD4)
   ========================================================================== */

.optowoo-extra-options .optowoo-pd-photo {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-pd-photo__description {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.9;
}

.optowoo-extra-options .optowoo-pd-photo__instructions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-pd-photo__instruction-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--optowoo-spacing-sm);
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: var(--optowoo-border-radius);
	text-align: center;
	font-size: 0.85em;
}

.optowoo-extra-options .optowoo-pd-photo__instruction-icon {
	width: 40px;
	height: 40px;
	opacity: 0.7;
}

.optowoo-extra-options .optowoo-pd-photo__instruction-icon svg {
	width: 100%;
	height: 100%;
}

.optowoo-extra-options .optowoo-pd-photo__result {
	display: flex;
	align-items: center;
	gap: var(--optowoo-spacing-md);
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: var(--optowoo-border-radius);
}

.optowoo-extra-options .optowoo-pd-photo__status {
	display: inline-flex;
	align-items: center;
	padding: var(--optowoo-spacing-xs) var(--optowoo-spacing-sm);
	border-radius: 12px;
	font-size: 0.85em;
	font-weight: 500;
}

.optowoo-extra-options .optowoo-pd-photo__status--pending {
	background-color: #fff3cd;
	color: #856404;
}

.optowoo-extra-options .optowoo-pd-photo__status--success {
	background-color: rgba(76, 175, 80, 0.15);
	color: var(--optowoo-success-color);
}

.optowoo-extra-options .optowoo-pd-photo__status--error {
	background-color: var(--optowoo-error-bg);
	color: var(--optowoo-error-color);
}

.optowoo-extra-options .optowoo-pd-photo__measurement {
	display: flex;
	align-items: center;
	gap: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-pd-photo__measurement-value {
	font-size: 1.1em;
	font-weight: 600;
}

.optowoo-extra-options .optowoo-pd-photo__error {
	padding: var(--optowoo-spacing-sm);
	background-color: var(--optowoo-error-bg);
	border-left: 3px solid var(--optowoo-error-color);
	border-radius: var(--optowoo-border-radius);
	color: var(--optowoo-error-color);
	font-size: 0.9em;
}

.optowoo-extra-options .optowoo-pd-photo__tips {
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: var(--optowoo-border-radius);
	font-size: 0.9em;
}

.optowoo-extra-options .optowoo-pd-photo__tips strong {
	display: block;
	margin-bottom: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-pd-photo__tips ul {
	margin: 0;
	padding-left: var(--optowoo-spacing-lg);
}

.optowoo-extra-options .optowoo-pd-photo__tips li {
	margin-bottom: var(--optowoo-spacing-xs);
}

/* ==========================================================================
   Rx/PD Step Container (PRD4)
   ========================================================================== */

.optowoo-extra-options .optowoo-rx-pd-step {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-xl);
}

.optowoo-extra-options .optowoo-rx-pd-step__section {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-rx-pd-step__section-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
}

.optowoo-extra-options .optowoo-rx-pd-step__content {
	/* Content wrapper */
}

.optowoo-extra-options .optowoo-rx-pd-step__pd-manual {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-md);
}

.optowoo-extra-options .optowoo-rx-pd-step__pd-description {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.9;
}

.optowoo-extra-options .optowoo-rx-pd-step__later-notice {
	padding: var(--optowoo-spacing-md);
	background-color: rgba(0, 0, 0, 0.02);
	border-radius: var(--optowoo-border-radius);
	font-style: italic;
	opacity: 0.8;
}

/* ==========================================================================
   Method Toggle (PRD4)
   ========================================================================== */

.optowoo-extra-options .optowoo-method-toggle {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-method-toggle__label {
	font-size: 0.9em;
	opacity: 0.8;
}

.optowoo-extra-options .optowoo-method-toggle__buttons {
	display: flex;
	gap: var(--optowoo-spacing-sm);
	background-color: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
}

.optowoo-extra-options .optowoo-method-toggle__button {
	all: unset;
	box-sizing: border-box;
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: var(--optowoo-spacing-md, 1em);
	border: 1.5px solid var(--optowoo-border-color, #ddd);
	border-radius: var(--optowoo-border-radius, 8px);
	background-color: #fff;
	color: var(--optowoo-text-color, #1e1e1e);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	transition: var(--optowoo-transition, all 0.2s ease);
}

.optowoo-extra-options .optowoo-method-toggle__icon {
	font-size: 1.4em;
	line-height: 1;
}

.optowoo-extra-options .optowoo-method-toggle__button:hover:not(:disabled) {
	border-color: var(--optowoo-accent, #1e1e1e);
}

.optowoo-extra-options .optowoo-method-toggle__button:focus-visible {
	outline: 2px solid var(--optowoo-accent, #1e1e1e);
	outline-offset: 2px;
}

.optowoo-extra-options .optowoo-method-toggle__button.is-active {
	border-color: var(--optowoo-accent, #1e1e1e);
	background-color: var(--optowoo-accent-soft, rgba(0, 0, 0, 0.04));
	box-shadow: inset 0 0 0 1px var(--optowoo-accent, #1e1e1e);
}

.optowoo-extra-options .optowoo-method-toggle__check {
	position: absolute;
	top: 6px;
	right: 8px;
	color: var(--optowoo-accent, #1e1e1e);
	font-weight: 700;
}

.optowoo-extra-options .optowoo-method-toggle__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Responsive adjustments for upload components */
@container optowoo-builder (max-width: 500px) {
	.optowoo-extra-options .optowoo-pd-photo__instructions {
		grid-template-columns: 1fr;
	}

	.optowoo-extra-options .optowoo-method-toggle__buttons {
		width: 100%;
	}

	.optowoo-extra-options .optowoo-method-toggle__button {
		flex: 1;
		text-align: center;
	}

	.optowoo-extra-options .optowoo-dropzone {
		padding: var(--optowoo-spacing-lg);
	}
}

@media (max-width: 480px) {
	.optowoo-extra-options .optowoo-pd-photo__result {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Modal Trigger Button
   ========================================================================== */

.optowoo-modal-trigger-wrap {
	margin-top: var(--optowoo-spacing-md, 1em);
}

/*
 * Block themes: reorder the button to appear after the short description (where
 * add-to-cart was). Scoped with :has() to ONLY the column that actually contains
 * our trigger — forcing flex-column + hardcoded order on every .wp-block-column
 * broke unrelated columns on FSE themes.
 */
.optogd-eyeglasses-product
	.wp-block-column.is-layout-flow:has(> .optowoo-modal-trigger-wrap) {
	display: flex;
	flex-direction: column;
}

/* Preserve original order for most elements */
.optogd-eyeglasses-product
	.wp-block-column.is-layout-flow:has(> .optowoo-modal-trigger-wrap)
	> .wp-block-post-title {
	order: 1;
}

.optogd-eyeglasses-product
	.wp-block-column.is-layout-flow:has(> .optowoo-modal-trigger-wrap)
	> .wp-block-woocommerce-product-price {
	order: 2;
}

.optogd-eyeglasses-product
	.wp-block-column.is-layout-flow:has(> .optowoo-modal-trigger-wrap)
	> .wp-block-post-excerpt {
	order: 3;
}

.optogd-eyeglasses-product
	.wp-block-column.is-layout-flow:has(> .optowoo-modal-trigger-wrap)
	> .optowoo-modal-trigger-wrap {
	order: 4; /* After short description (where add-to-cart was) */
}

.optogd-eyeglasses-product
	.wp-block-column.is-layout-flow:has(> .optowoo-modal-trigger-wrap)
	> .wp-block-woocommerce-product-meta {
	order: 5;
}

/* 
 * Minimal styling - let WooCommerce/theme handle appearance via inherited classes:
 * .single_add_to_cart_button, .button, .alt, .wp-element-button
 */
.optowoo-modal-trigger {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	cursor: pointer;
}

.optowoo-modal-trigger:disabled,
.optowoo-modal-trigger.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.optowoo-modal-trigger__hint {
	margin: 0.5em 0 0;
	font-size: 0.9em;
	opacity: 0.7;
	text-align: center;
}

/* Hide hint when button is enabled */
.optowoo-modal-trigger:not(.disabled) + .optowoo-modal-trigger__hint {
	display: none;
}

/* ==========================================================================
   Hide original Add to Cart for Eyeglasses Products
   ==========================================================================
   Fail-open, two gates (both on ancestors of the native button):
   1. .optogd-native-hidden (body) — added by a server-side layer at wp_footer
      or by the JS fallback on successful injection, ONLY when our trigger
      actually rendered.
   2. .optogd-builder-ready (html) — added by the builder bundle ONLY once its
      modal controller + delegated click handler are live.
   Requiring BOTH means the native add-to-cart is hidden only when our trigger
   both rendered AND is actually interactive. A template that renders no
   trigger, or a bundle that is delayed/blocked/errored, leaves the native
   button usable rather than hiding the product into an unpurchasable state
   behind a dead trigger. (Accepted tradeoff: a brief flash of the native
   button before the bundle initializes.) */

/* Hide classic WooCommerce add-to-cart button (but not the one inside our modal) */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-native-hidden
	.single_add_to_cart_button:not(.optowoo-modal-trigger):not(
		.optowoo-add-to-cart-btn
	),
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-native-hidden
	form.cart:not(#optowoo-cart-form)
	.single_add_to_cart_button:not(.optowoo-modal-trigger) {
	display: none !important;
}

/* Hide classic quantity input for simple products if we replaced the form */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-native-hidden
	.quantity:has(+ .optowoo-modal-trigger-wrap) {
	display: none !important;
}

/*
 * Hide the classic (non-block) native form for simple products when our trigger
 * renders as its immediate sibling — true both for the server hook path (the
 * native `woocommerce_template_single_add_to_cart` is kept, not removed, and our
 * trigger renders right after it) and for the JS fallback (which inserts the
 * trigger as the form's next sibling). Neither hides the form via inline style,
 * so this readiness-gated rule collapses the native form once the builder is
 * live. Scoped to .optogd-simple-product so a variable product's variations_form
 * (also form.cart) keeps its variation selects.
 */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-simple-product.optogd-native-hidden
	form.cart:not(#optowoo-cart-form):has(+ .optowoo-modal-trigger-wrap) {
	display: none !important;
}

/*
 * Hide WooCommerce block-based add-to-cart form for simple products (block
 * themes like Twenty Twenty-Five). The :not(:has()) guard is critical: the JS
 * fallback injects our trigger as a sibling of the native form, INSIDE this
 * block wrapper — collapsing the wrapper would collapse our own trigger to
 * 0x0. When the wrapper holds our trigger it stays visible (the native button
 * inside is hidden by the button rule above), so only the trigger shows.
 */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-simple-product.optogd-native-hidden
	.wp-block-woocommerce-add-to-cart-form:not(:has(.optowoo-modal-trigger)),
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-simple-product.optogd-native-hidden
	.wc-block-add-to-cart-form:not(:has(.optowoo-modal-trigger)) {
	display: none !important;
}

/*
 * Elementor Pro add-to-cart widget: the compat layer keeps the native widget
 * rendered (wrapped in .optogd-native-elementor-atc) and appends our trigger,
 * rather than discarding it. For simple products collapse the whole native
 * widget once the builder is ready. Variable products are intentionally NOT
 * collapsed here — their variation selects live inside the wrapper — and rely on
 * the .woocommerce-variation-add-to-cart / .single_add_to_cart_button hides.
 */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-simple-product.optogd-native-hidden
	.optogd-native-elementor-atc {
	display: none !important;
}

/*
 * For variable eyeglasses products (classic AND block themes): keep the
 * variation selectors visible, hide the native add-to-cart sub-block. The
 * native button + quantity live inside .woocommerce-variation-add-to-cart, which
 * our trigger wrap does NOT match (it carries .optowoo-modal-trigger-wrap), so
 * this collapses only the native controls. No .wc-block-add-to-cart-form ancestor
 * is required so it also covers the classic `woocommerce_single_variation` hook
 * path (where the native button is kept, not removed).
 */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-variable-product.optogd-native-hidden
	.woocommerce-variation-add-to-cart:not(.optowoo-modal-trigger-wrap) {
	display: none !important;
}

/* Hide the quantity input for variable eyeglasses products in block themes */
.optogd-builder-ready
	.optogd-eyeglasses-product.optogd-variable-product.optogd-native-hidden
	.wc-block-add-to-cart-form
	.quantity {
	display: none !important;
}

/* ==========================================================================
   Fullscreen Modal
   ========================================================================== */

.optowoo-modal {
	/* Duplicate CSS variables so modal children inherit them */
	--optowoo-text-color: #1e1e1e;
	--optowoo-text-color-muted: #555;
	--optowoo-accent: #1e1e1e;
	--optowoo-border-color: #ddd;
	--optowoo-error-color: #d32f2f;
	--optowoo-error-bg: #ffebee;
	--optowoo-success-color: #388e3c;
	--optowoo-required-color: #d32f2f;

	color: var(--optowoo-text-color);
	--optowoo-spacing-xs: 0.25em;
	--optowoo-spacing-sm: 0.5em;
	--optowoo-spacing-md: 1em;
	--optowoo-spacing-lg: 1.5em;
	--optowoo-spacing-xl: 2em;
	--optowoo-border-radius: 4px;
	--optowoo-border-width: 1px;
	--optowoo-transition: all 0.2s ease;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.optowoo-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.optowoo-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.8);
	cursor: pointer;
}

.optowoo-modal__content {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 100vw;
	max-height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: scale(0.95);
	transition: transform 0.3s ease;
}

.optowoo-modal[aria-hidden="false"] .optowoo-modal__content {
	transform: scale(1);
}

.optowoo-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--optowoo-text-color);
	border-radius: 50%;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.optowoo-modal__close:hover {
	background-color: #fff;
	transform: scale(1.1);
}

.optowoo-modal__close:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.optowoo-modal__close svg {
	width: 20px;
	height: 20px;
}

/* Modal Layout - Desktop: rail + wizard side-by-side; Mobile: stacked */
.optowoo-modal__layout {
	display: grid;
	grid-template-columns: minmax(260px, 340px) 1fr;
	/* Without an explicit row size, the implicit row sizes to its tallest
	   child's content instead of the grid container's height, so children's
	   overflow-y: auto never gets a chance to kick in — the row (and its
	   scrollable child) just grows past the modal and gets clipped by
	   .optowoo-modal__content's overflow: hidden. */
	grid-template-rows: minmax(0, 1fr);
	gap: var(--optowoo-spacing-lg, 1.5rem);
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

/* The React mount root (#optogd-builder-root, rendered with the
   .optowoo-extra-options class) sits between .optowoo-modal__content and
   .optowoo-modal__layout. As a flex child it defaults to min-height: auto,
   so it grows to its content's intrinsic height instead of shrinking to the
   modal — which makes .optowoo-modal__layout's height: 100% resolve against
   an unbounded box and defeats every inner overflow-y: auto below it. */
.optowoo-modal__content .optowoo-extra-options {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
}

/* ==========================================================================
   Summary Rail (left pane on desktop)
   ========================================================================== */

.optowoo-summary {
	display: flex;
	flex-direction: column;
	background-color: #f8f8f8;
	overflow: hidden;
	min-height: 0;
	border-right: 1px solid var(--optowoo-border-color, #eee);
}

.optowoo-summary__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	flex: 0 0 auto;
}

.optowoo-summary__thumb-img {
	max-width: 100%;
	max-height: 220px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--optowoo-border-radius, 4px);
}

.optowoo-summary__thumb-placeholder {
	width: 100%;
	height: 160px;
	background-color: var(--optowoo-border-color, #eee);
	border-radius: var(--optowoo-border-radius, 4px);
}

.optowoo-summary__title {
	margin: 0;
	padding: 0 1.5rem 1rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--optowoo-text-color, #1a1a1a);
	flex: 0 0 auto;
}

.optowoo-summary__body {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	padding: 0 1.5rem;
}

.optowoo-summary__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.optowoo-summary__line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.optowoo-summary__line-label {
	color: var(--optowoo-text-color, #1a1a1a);
	opacity: 0.8;
	flex: 1;
}

.optowoo-summary__line-value {
	font-weight: 500;
	white-space: nowrap;
}

.optowoo-summary__total {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	margin-top: auto;
	border-top: var(--optowoo-border-width, 1px) solid var(--optowoo-border-color, #eee);
}

.optowoo-summary__total-label {
	font-size: 0.9rem;
	opacity: 0.8;
}

.optowoo-summary__total-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--optowoo-text-color, #1a1a1a);
}

/* ==========================================================================
   Mobile Price Bar (hidden on desktop)
   ========================================================================== */

.optowoo-mobile-bar {
	display: none;
}

/* Builder right pane */
.optowoo-builder {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	min-height: 0;
	padding: 2rem;
	background-color: #fff;
}

.optowoo-builder .optowoo-extra-options {
	margin: 0;
	flex: 1;
}

/* ==========================================================================
   Modal Responsive Layout
   ========================================================================== */

@media (max-width: 1024px) {
	.optowoo-modal__layout {
		grid-template-columns: minmax(220px, 300px) 1fr;
	}
}

@media (max-width: 768px) {
	/* Stack to single column; rail collapses to a slim top banner */
	.optowoo-modal__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
	}

	/* Rail becomes a compact horizontal banner */
	.optowoo-summary {
		flex-direction: row;
		align-items: center;
		max-height: 80px;
		border-right: none;
		border-bottom: 1px solid var(--optowoo-border-color, #eee);
		padding: 0 1rem;
		gap: 0.75rem;
	}

	.optowoo-summary__thumb {
		padding: 0.5rem 0;
		flex: 0 0 auto;
	}

	.optowoo-summary__thumb-img {
		max-height: 56px;
		max-width: 56px;
	}

	.optowoo-summary__thumb-placeholder {
		width: 56px;
		height: 56px;
	}

	.optowoo-summary__title {
		padding: 0;
		font-size: 0.9rem;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.optowoo-summary__body {
		display: none;
	}

	/* Hide the pinned rail total on mobile — the sticky bar replaces it */
	.optowoo-summary__total {
		display: none;
	}

	.optowoo-builder {
		padding: 1rem;
	}

	.optowoo-modal__close {
		top: 0.5rem;
		right: 0.5rem;
		width: 36px;
		height: 36px;
	}

	.optowoo-modal__close svg {
		width: 16px;
		height: 16px;
	}

	/* The desktop sticky footer (Continue / Add to Cart) is replaced by the
	   mobile price bar below — MobilePriceBar renders its own Continue and,
	   on the review step, the Add to Cart CTA via the reviewCta prop — so
	   hide it to avoid two stacked primary CTAs. */
	.optowoo-extra-options .optowoo-stepper__footer {
		display: none;
	}

	/* Mobile sticky price bar */
	.optowoo-mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: sticky;
		bottom: 0;
		z-index: 10;
		background-color: #fff;
		padding: 0.75rem 1rem;
		/* Keep the bar clear of the iOS home indicator / gesture area. */
		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
		border-top: var(--optowoo-border-width, 1px) solid var(--optowoo-border-color, #eee);
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
	}

	.optowoo-mobile-bar__total {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.optowoo-mobile-bar__total-label {
		font-size: 0.75rem;
		opacity: 0.7;
	}

	.optowoo-mobile-bar__total-value {
		font-size: 1rem;
		font-weight: 700;
	}

	.optowoo-mobile-bar__continue {
		flex: 0 0 auto;
		padding: 0.6rem 1.25rem;
		font-size: 0.9rem;
	}

	/* Review step's Add to Cart CTA, reused inside the mobile bar (see
	   MobilePriceBar's reviewCta prop) — sized to match .optowoo-mobile-bar__continue.
	   Extra .optowoo-extra-options qualifier outranks the width:100% rule below,
	   which would otherwise win on selector order (same specificity). */
	.optowoo-mobile-bar .optowoo-add-to-cart-wrap {
		flex: 0 0 auto;
	}

	.optowoo-extra-options .optowoo-mobile-bar .optowoo-add-to-cart-btn {
		width: auto;
		padding: 0.6rem 1.25rem;
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Add to Cart Button in Builder (Review Step)
   ========================================================================== */

/* .optowoo-add-to-cart-wrap is unstyled — its separator border/spacing now
   lives on .optowoo-stepper__footer, which wraps it in the sticky footer
   (see Stepper Layout above). */

.optowoo-extra-options .optowoo-add-to-cart-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 1em 2em;
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.optowoo-extra-options .optowoo-add-to-cart-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.optowoo-extra-options .optowoo-add-to-cart-btn.is-loading {
	pointer-events: none;
}

.optowoo-extra-options .optowoo-add-to-cart-btn.is-success {
	background-color: var(--optowoo-success-color, #388e3c);
	border-color: var(--optowoo-success-color, #388e3c);
}

.optowoo-extra-options .optowoo-cart-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--optowoo-spacing-md);
	padding: var(--optowoo-spacing-lg);
	text-align: center;
}

.optowoo-extra-options .optowoo-cart-success__icon {
	width: 64px;
	height: 64px;
	color: var(--optowoo-success-color, #388e3c);
}

.optowoo-extra-options .optowoo-cart-success__message {
	font-size: 1.2em;
	font-weight: 600;
	margin: 0;
}

.optowoo-extra-options .optowoo-cart-success__actions {
	display: flex;
	gap: var(--optowoo-spacing-md);
	flex-wrap: wrap;
	justify-content: center;
}

/* ==========================================================================
   Review Summary
   ========================================================================== */

.optowoo-extra-options .optowoo-review-summary {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: var(--optowoo-spacing-lg);
	border: var(--optowoo-border-width) solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	overflow: hidden;
}

.optowoo-extra-options .optowoo-review-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--optowoo-spacing-md);
	padding: var(--optowoo-spacing-md);
	border-bottom: var(--optowoo-border-width) solid var(--optowoo-border-color);
}

.optowoo-extra-options .optowoo-review-summary__row:last-child {
	border-bottom: none;
}

.optowoo-extra-options .optowoo-review-summary__info {
	display: flex;
	flex-direction: column;
	gap: var(--optowoo-spacing-xs);
	min-width: 0;
	flex: 1;
}

.optowoo-extra-options .optowoo-review-summary__step-label {
	font-size: 0.8em;
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.optowoo-extra-options .optowoo-review-summary__selection {
	font-weight: 500;
}

.optowoo-extra-options .optowoo-review-summary__selection--empty {
	opacity: 0.5;
	font-style: italic;
}

.optowoo-extra-options .optowoo-review-summary__actions {
	display: flex;
	align-items: center;
	gap: var(--optowoo-spacing-md);
	flex-shrink: 0;
}

.optowoo-extra-options .optowoo-review-summary__price {
	font-size: 0.9em;
	font-weight: 600;
}

.optowoo-extra-options .optowoo-review-summary__edit {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.85em;
	color: var(--optowoo-accent);
	text-decoration: underline;
	padding: var(--optowoo-spacing-xs);
}

.optowoo-extra-options .optowoo-review-summary__edit:hover {
	opacity: 0.8;
}

/* ==========================================================================
   Body scroll lock when modal is open
   ========================================================================== */

body.optowoo-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   Print: Hide modal
   ========================================================================== */

@media print {
	.optowoo-modal {
		display: none !important;
	}
}