/**
 * Optogrid WooCommerce Extension - 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 - fallback to theme defaults */
	--optowoo-accent: currentColor;
	--optowoo-border-color: #ddd;
	--optowoo-error-color: #d32f2f;
	--optowoo-error-bg: #ffebee;
	--optowoo-success-color: #388e3c;
	--optowoo-required-color: #d32f2f;

	/* 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);
}

/* ==========================================================================
   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-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);
	}
}

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

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

/* ==========================================================================
   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);
}

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

.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: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--optowoo-spacing-md);
	margin-bottom: var(--optowoo-spacing-lg);
}

.optowoo-extra-options .optowoo-option {
	display: flex;
	flex-direction: column;
	padding: var(--optowoo-spacing-md);
	border: var(--optowoo-border-width) solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	background: transparent;
	cursor: pointer;
	text-align: left;
	transition: var(--optowoo-transition);
}

.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;
	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;
	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__color {
	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);
}

/* Table Header Row */
.optowoo-extra-options .optowoo-rx-table-header {
	display: grid;
	grid-template-columns: 130px repeat(3, 1fr);
	gap: var(--optowoo-spacing-sm);
	padding: var(--optowoo-spacing-sm) var(--optowoo-spacing-md);
	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.has-add {
	grid-template-columns: 130px repeat(4, 1fr);
}

.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 */
.optowoo-extra-options .optowoo-rx-step__eyes {
	display: flex;
	flex-direction: column;
}

/* Individual Eye Row */
.optowoo-extra-options .optowoo-rx-eye-row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--optowoo-spacing-sm);
	padding: var(--optowoo-spacing-md);
	border-bottom: 1px solid var(--optowoo-border-color);
	align-items: center;
}

.optowoo-extra-options .optowoo-rx-eye-row:last-child {
	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;
}

/* Eye Fields Grid */
.optowoo-extra-options .optowoo-rx-eye-row__fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--optowoo-spacing-sm);
}

.optowoo-extra-options .optowoo-rx-eye-row__fields.has-add {
	grid-template-columns: repeat(4, 1fr);
}

/* RX Field (Select wrapper) */
.optowoo-extra-options .optowoo-rx-field {
	display: flex;
	flex-direction: column;
}

.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;
}

.optowoo-extra-options .optowoo-rx-field__select {
	padding: var(--optowoo-spacing-sm);
	border: 1px solid var(--optowoo-border-color);
	border-radius: var(--optowoo-border-radius);
	font-size: 0.95em;
	background-color: white;
	cursor: pointer;
	transition: var(--optowoo-transition);
	width: 100%;
}

.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.has-error {
	border-color: var(--optowoo-error-color);
}

/* 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;
}

.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);
}

/* 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;
}

.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.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);
	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);
}

/* ==========================================================================
   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);
}

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

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

	/* Stack the Rx Table Layout */
	.optowoo-extra-options .optowoo-rx-table-header {
		display: none;
	}

	.optowoo-extra-options .optowoo-rx-eye-row {
		grid-template-columns: 1fr;
		gap: var(--optowoo-spacing-sm);
	}

	.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;
	}

	/* Grid for fields - 3 columns is usually fine even at 300px */
	.optowoo-extra-options .optowoo-rx-eye-row__fields {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--optowoo-spacing-sm);
	}

	/* If we have ADD, switch to 2x2 grid for better touch targets */
	.optowoo-extra-options .optowoo-rx-eye-row__fields.has-add {
		grid-template-columns: repeat(2, 1fr);
	}

	.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) {
	.optowoo-extra-options .optowoo-rx-eye-row__fields {
		grid-template-columns: 1fr; /* Stack fields fully */
	}

	.optowoo-extra-options .optowoo-rx-eye-row__fields.has-add {
		grid-template-columns: 1fr;
	}

	/* 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) {
	.optowoo-extra-options .optowoo-options {
		grid-template-columns: 1fr;
	}

	/* RX Table mobile layout */
	.optowoo-extra-options .optowoo-rx-table-header {
		grid-template-columns: 100px repeat(3, 1fr);
		padding: var(--optowoo-spacing-xs) var(--optowoo-spacing-sm);
		font-size: 0.75em;
		gap: var(--optowoo-spacing-xs);
	}

	.optowoo-extra-options .optowoo-rx-table-header.has-add {
		grid-template-columns: 100px repeat(4, 1fr);
	}

	.optowoo-extra-options .optowoo-rx-eye-row {
		grid-template-columns: 100px 1fr;
		padding: var(--optowoo-spacing-sm);
		gap: var(--optowoo-spacing-xs);
	}

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

	.optowoo-extra-options .optowoo-rx-eye-row__fields {
		gap: var(--optowoo-spacing-xs);
	}

	.optowoo-extra-options .optowoo-rx-field__select {
		font-size: 0.85em;
		padding: var(--optowoo-spacing-xs);
	}

	/* 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;
	}
}