/**
 * FieldNova frontend styles.
 */

.fnova-product-fields {
	margin: 1.5em 0;
}

.fnova-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 1em;
}

.fnova-field {
	flex: 1 1 100%;
	min-width: 0;
}

/* 12-column responsive widths */
.fnova-col-1  { flex-basis: calc(8.333% - 16px); }
.fnova-col-2  { flex-basis: calc(16.666% - 16px); }
.fnova-col-3  { flex-basis: calc(25% - 16px); }
.fnova-col-4  { flex-basis: calc(33.333% - 16px); }
.fnova-col-5  { flex-basis: calc(41.666% - 16px); }
.fnova-col-6  { flex-basis: calc(50% - 16px); }
.fnova-col-7  { flex-basis: calc(58.333% - 16px); }
.fnova-col-8  { flex-basis: calc(66.666% - 16px); }
.fnova-col-9  { flex-basis: calc(75% - 16px); }
.fnova-col-10 { flex-basis: calc(83.333% - 16px); }
.fnova-col-11 { flex-basis: calc(91.666% - 16px); }
.fnova-col-12 { flex-basis: 100%; }

@media screen and (max-width: 600px) {
	.fnova-field[class*="fnova-col-"] {
		flex-basis: 100%;
	}
}

.fnova-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.fnova-field__label .required {
	color: #c0392b;
	border: 0;
	text-decoration: none;
}

.fnova-field__desc {
	font-size: .875em;
	color: #666;
	margin-top: 4px;
}

.fnova-input,
.fnova-input--textarea,
.fnova-input--select {
	width: 100%;
	box-sizing: border-box;
}

/* Native colour picker — render as a tidy swatch, not a full-width bar. */
.fnova-input--color {
	width: 64px;
	height: 40px;
	min-height: 40px;
	padding: 3px;
	cursor: pointer;
	vertical-align: middle;
}

.fnova-choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fnova-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 400;
}

.fnova-option-price {
	color: var(--fnova-accent, #e8540c);
	font-weight: 600;
}

/* Image options */
.fnova-images {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fnova-image-option {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 8px;
	transition: border-color .1s ease;
}

.fnova-image-option__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fnova-image-option__img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.fnova-image-option__input:checked ~ .fnova-image-option__img,
.fnova-image-option:has(.fnova-image-option__input:checked) {
	border-color: var(--fnova-accent, #e8540c);
}

/* Audio / video options */
.fnova-media-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fnova-media-option__player {
	display: block;
	margin-top: 6px;
	max-width: 100%;
}

/* File upload */
.fnova-file__btn {
	display: inline-block;
	cursor: pointer;
}

.fnova-file__list {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fnova-file__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 8px;
	background: #f6f7f7;
	border-radius: 4px;
}

.fnova-file__remove {
	border: 0;
	background: transparent;
	color: #c0392b;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	transition: background .12s ease;
}
.fnova-file__remove:hover,
.fnova-file__remove:focus-visible { background: rgba( 192, 57, 43, .12 ); outline: none; }

.fnova-file__progress {
	height: 4px;
	background: #e0e0e0;
	border-radius: 2px;
	margin-top: 6px;
	overflow: hidden;
}

.fnova-file__bar {
	height: 100%;
	width: 100%;
	background: var(--fnova-accent, #e8540c);
	animation: fnova-indeterminate 1.2s infinite linear;
}

@keyframes fnova-indeterminate {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Enquiry form */
.fnova-enquiry {
	margin-top: 12px;
}

.fnova-enquiry__field {
	margin: 0 0 12px;
}

.fnova-enquiry__field label {
	display: block;
	font-weight: 600;
}

.fnova-enquiry__field input,
.fnova-enquiry__field textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
}

.fnova-enquiry__status {
	margin: 8px 0;
	color: var(--fnova-accent, #e8540c);
	min-height: 1.2em;
}

/* Cart edit */
.fnova-cartedit-link {
	display: inline-block;
	margin-top: 4px;
	font-size: .85em;
	text-decoration: underline;
}

.fnova-cartedit__status {
	margin: 8px 0;
	color: var(--fnova-accent, #e8540c);
	min-height: 1.2em;
}

/* Bulk teams */
.fnova-bulkteams {
	margin: 8px 0 16px;
	padding: 12px;
	background: #f6f7f7;
	border-radius: 8px;
}

.fnova-bulkteams label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.fnova-bulkteams-input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
}

/* Repeater */
.fnova-repeat__item {
	position: relative;
	border: 1px dashed #d0d0d0;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 12px;
}

.fnova-repeat__remove {
	margin-top: 8px;
}

.fnova-repeat__add {
	margin-top: 4px;
}

/* Collapsible section */
.fnova-collapse {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	margin: 1em 0;
}

.fnova-collapse__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 1em;
}

.fnova-collapse__arrow {
	transition: transform .15s ease;
}

.fnova-collapse.is-open .fnova-collapse__arrow {
	transform: rotate(180deg);
}

.fnova-collapse__body {
	padding: 16px;
}

/* Fields popup modal */
.fnova-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* display:flex above overrides the [hidden] attribute the markup/JS uses to
 * toggle these modals, so they would show on page load. Restore the hide. */
.fnova-modal[hidden] {
	display: none;
}

.fnova-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

.fnova-modal__box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 28px 24px 20px;
	max-width: 640px;
	width: calc(100% - 32px);
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.fnova-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #777;
}

.fnova-modal__done {
	margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 * FieldNova action buttons — a consistent look that does not depend on
 * the theme's .button styles (which range from unstyled to raw browser
 * default "outset" buttons). Colours fall back to the brand accent.
 * ------------------------------------------------------------------ */
.fnova-file__btn,
.fnova-cropper__apply,
.fnova-enquiry-open,
.fnova-enquiry-submit,
.fnova-cartedit-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	border: 1px solid var(--fnova-accent, #e8540c);
	border-radius: var(--fnova-radius, 8px);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: background .15s ease, color .15s ease, filter .15s ease;
}
/* Secondary (outlined) — open a picker / dialog. */
.fnova-file__btn,
.fnova-cropper__apply,
.fnova-enquiry-open {
	background: #fff;
	color: var(--fnova-accent, #e8540c);
}
.fnova-file__btn:hover,
.fnova-cropper__apply:hover,
.fnova-enquiry-open:hover {
	background: var(--fnova-accent-soft, #fdeee5);
}
/* Primary (filled) — submit actions. */
.fnova-enquiry-submit,
.fnova-cartedit-save {
	background: var(--fnova-accent, #e8540c);
	color: #fff;
}
.fnova-enquiry-submit:hover,
.fnova-cartedit-save:hover {
	filter: brightness( .94 );
}
.fnova-enquiry-submit[disabled],
.fnova-cartedit-save[disabled] {
	opacity: .6;
	cursor: default;
	filter: none;
}

/* Domain / fonts */
.fnova-domain {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fnova-domain__name {
	flex: 1 1 auto;
}

.fnova-fonts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fnova-fonts__preview {
	min-height: 1.5em;
	padding: 6px 10px;
	border: 1px dashed #ccc;
	border-radius: 4px;
	font-size: 1.3em;
}

.fnova-svg__img {
	max-width: 100%;
	height: auto;
}

/* Cropper */
.fnova-cropper__result {
	max-width: 200px;
	height: auto;
	display: block;
	margin-top: 10px;
	border-radius: 6px;
}

.fnova-cropper__apply {
	margin-top: 8px;
}

/* Texter */
.fnova-texter__stage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 10px;
}

.fnova-texter__bg {
	max-width: 100%;
	height: auto;
	display: block;
}

.fnova-texter__overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 24px;
	white-space: pre-wrap;
	width: 90%;
	pointer-events: none;
}

.fnova-texter__controls {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
}

/* Chained selects */
.fnova-chained {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.fnova-chained select {
	flex: 1 1 160px;
}

/* Emojis */
.fnova-emojis {
	position: relative;
	display: flex;
	gap: 6px;
	align-items: center;
}

.fnova-emojis__input {
	flex: 1 1 auto;
}

.fnova-emojis__toggle {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 18px;
}

.fnova-emojis__grid {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 2px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	max-width: 320px;
}
/* display:grid above overrides the [hidden] attribute the toggle uses, so the
 * picker would show on load. Restore the hide. */
.fnova-emojis__grid[hidden] {
	display: none;
}

.fnova-emojis__item {
	border: 0;
	background: transparent;
	font-size: 20px;
	cursor: pointer;
	padding: 2px;
}

.fnova-emojis__item:hover {
	background: #f0f0f0;
	border-radius: 4px;
}

/* Quantities */
.fnova-quantities__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}

.fnova-quantities__qty,
.fnova-selectqty__qty,
.fnova-bulkqty__qty {
	width: 90px;
}

.fnova-selectqty {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.fnova-selectqty .fnova-input--select {
	flex: 1 1 180px;
}

/* Bulk quantity tiers */
.fnova-bulkqty__tiers {
	margin-top: 10px;
	border-collapse: collapse;
	font-size: .9em;
}

.fnova-bulkqty__tiers th,
.fnova-bulkqty__tiers td {
	border: 1px solid #e0e0e0;
	padding: 4px 10px;
	text-align: left;
}

/* Color palettes */
.fnova-palettes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fnova-palette {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-size: .8em;
}

.fnova-palette__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fnova-palette__swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #ddd;
	box-shadow: inset 0 0 0 2px #fff;
	transition: transform .1s ease, border-color .1s ease;
}

.fnova-palette__input:checked + .fnova-palette__swatch {
	border-color: var(--fnova-accent, #e8540c);
	transform: scale(1.1);
}

/* Switcher / toggle */
.fnova-switch {
	display: inline-flex;
	cursor: pointer;
}

.fnova-switch__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fnova-switch__track {
	width: 44px;
	height: 24px;
	background: #ccc;
	border-radius: 999px;
	position: relative;
	transition: background .15s ease;
}

.fnova-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
}

.fnova-switch__input:checked + .fnova-switch__track {
	background: var(--fnova-accent, #e8540c);
}

.fnova-switch__input:checked + .fnova-switch__track .fnova-switch__thumb {
	transform: translateX(20px);
}

/* Measure */
.fnova-measure {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fnova-measure__unit {
	color: #555;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Date range */
.fnova-daterange {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.fnova-daterange__part {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 140px;
}

.fnova-divider {
	border: 0;
	border-top: 1px solid #e0e0e0;
	margin: 8px 0;
}

.fnova-divider__title,
.fnova-section__title {
	margin: 8px 0;
}

/* Tooltip */
.fnova-tooltip {
	position: relative;
	display: inline-flex;
	cursor: help;
	margin-left: 4px;
}
.fnova-tooltip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fnova-accent, #e8540c);
	color: #fff;
	font-size: 11px;
}

/* Validation state */
.fnova-field.fnova-has-error .fnova-input,
.fnova-field.fnova-has-error .fnova-input--textarea,
.fnova-field.fnova-has-error .fnova-input--select {
	border-color: #c0392b;
	box-shadow: 0 0 0 1px #c0392b;
}

.fnova-field__error {
	color: #c0392b;
	font-size: .85em;
	margin-top: 4px;
}

.fnova-counter {
	font-size: .8em;
	color: #777;
	text-align: right;
}

/* Live price totals */
.fnova-totals {
	margin: 16px 0;
	padding: 12px 16px;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 6px;
	background: rgba( 0, 0, 0, .02 );
}
.fnova-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 2px 0;
}
/* display:flex above would otherwise defeat the [hidden] attribute the JS
 * toggles on zero-value rows, so restore the hide explicitly. */
.fnova-totals__row[hidden] {
	display: none;
}
.fnova-totals__row.fnova-totals__grand {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid rgba( 0, 0, 0, .1 );
	font-weight: 600;
	font-size: 1.1em;
}
.fnova-totals__label {
	color: inherit;
}
.fnova-totals__value {
	white-space: nowrap;
}

/* Inline validation */
.fnova-field__error {
	color: #d63638;
	font-size: .85em;
	margin-top: 4px;
}
.fnova-has-error input,
.fnova-has-error select,
.fnova-has-error textarea {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 1px #d63638;
}

/* ============================================================
 * Modern frontend layer (brand accent + polished controls)
 * ============================================================ */
.fnova-product-fields {
	--fnova-accent: #e8540c;
	--fnova-accent-soft: #fdeee5;
	--fnova-border: #d9dce1;
	--fnova-ink: #1f2430;
	--fnova-muted: #6b7280;
	--fnova-radius: 10px;
	--fnova-font-size: 15px;
	--fnova-label-weight: 600;
}

/* Inputs */
.fnova-product-fields .fnova-input,
.fnova-product-fields .fnova-input--textarea,
.fnova-product-fields .fnova-input--select,
.fnova-product-fields input[type="text"],
.fnova-product-fields input[type="email"],
.fnova-product-fields input[type="number"],
.fnova-product-fields input[type="tel"],
.fnova-product-fields input[type="date"],
.fnova-product-fields select,
.fnova-product-fields textarea {
	border: 1px solid var(--fnova-border);
	border-radius: var(--fnova-radius);
	padding: 11px 13px;
	font-size: var(--fnova-font-size, 15px);
	line-height: 1.4;
	background: var(--fnova-input-bg, #fff);
	color: var(--fnova-ink);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.fnova-product-fields .fnova-input:focus,
.fnova-product-fields input:focus,
.fnova-product-fields select:focus,
.fnova-product-fields textarea:focus {
	border-color: var(--fnova-accent);
	box-shadow: 0 0 0 3px var(--fnova-accent-soft);
	outline: none;
}

/* Labels */
.fnova-product-fields .fnova-field__label {
	font-weight: var(--fnova-label-weight, 600);
	font-size: 14px;
	color: var(--fnova-ink);
	margin-bottom: 7px;
}
.fnova-product-fields .fnova-field__desc { color: var(--fnova-muted); }
.fnova-option-price { color: var(--fnova-accent); font-weight: 600; }

/* Choices as soft chips */
.fnova-product-fields .fnova-choice {
	padding: 9px 12px;
	border: 1px solid var(--fnova-border);
	border-radius: var(--fnova-radius);
	transition: border-color .12s ease, background .12s ease;
}
.fnova-product-fields .fnova-choice:hover { border-color: #c2c6cd; background: #fafbfc; }
.fnova-product-fields .fnova-choice input { accent-color: var(--fnova-accent); width: 17px; height: 17px; }
.fnova-product-fields .fnova-choice:has(input:checked) {
	border-color: var(--fnova-accent);
	background: var(--fnova-accent-soft);
}

/* Image option selected ring */
.fnova-image-option:has(.fnova-image-option__input:checked) {
	border-color: var(--fnova-accent) !important;
	box-shadow: 0 0 0 2px var(--fnova-accent-soft);
}

/*
 * Keyboard accessibility: when a control's input gets keyboard focus, show a
 * visible ring on the chip/swatch/label. Custom-styled choice controls often
 * shrink or hide the native input, which would otherwise leave focus invisible.
 */
.fnova-product-fields .fnova-choice:has(input:focus-visible),
.fnova-product-fields .fnova-image-option:has(input:focus-visible),
.fnova-product-fields .fnova-images label:has(input:focus-visible),
.fnova-product-fields .fnova-palette:has(input:focus-visible),
.fnova-product-fields .fnova-emoji:has(input:focus-visible),
.fnova-product-fields .fnova-switcher:has(input:focus-visible) {
	outline: 2px solid var(--fnova-accent);
	outline-offset: 2px;
	border-radius: var(--fnova-radius);
}

/* Tooltip trigger gets a clear focus ring for keyboard users. */
.fnova-product-fields .fnova-tooltip:focus-visible {
	outline: 2px solid var(--fnova-accent);
	outline-offset: 2px;
	border-radius: 50%;
}

/* Redesigned live-total card */
.fnova-totals {
	margin: 20px 0;
	padding: 16px 18px;
	border: 1px solid var(--fnova-border, #d9dce1);
	border-radius: 14px;
	background:
		linear-gradient( 0deg, #fff, #fff ) padding-box,
		#fff;
	box-shadow: 0 8px 24px -18px rgba( 30, 25, 45, .5 );
}
.fnova-totals__row { padding: 5px 0; color: var(--fnova-muted, #6b7280); font-size: 14px; }
.fnova-totals__row .fnova-totals__value { color: var(--fnova-ink, #1f2430); font-weight: 600; font-variant-numeric: tabular-nums; }
.fnova-totals__row.fnova-totals__base { color: var(--fnova-ink, #1f2430); }
.fnova-totals__row.fnova-totals__base .fnova-totals__label .woocommerce-Price-amount { font-weight: 600; }
.fnova-totals__row.fnova-totals__grand {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px dashed var(--fnova-border, #d9dce1);
	font-size: 1.05em;
	color: var(--fnova-ink, #1f2430);
}
.fnova-totals__row.fnova-totals__grand .fnova-totals__label { font-weight: 700; }
.fnova-totals__row.fnova-totals__grand .fnova-totals__value {
	font-weight: 800; font-size: 1.25em; color: var(--fnova-accent, #e8540c);
}

/* My Designs panel (logged-in customers) */
.fnova-designs {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px dashed var(--fnova-border, #d9dce1);
	border-radius: var(--fnova-radius, 10px);
}
.fnova-designs__label {
	display: block;
	font-weight: var(--fnova-label-weight, 600);
	font-size: 13px;
	margin: 12px 0 6px;
}
.fnova-designs__row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.fnova-designs__select {
	flex: 1;
	min-width: 160px;
}
.fnova-designs__msg {
	margin-top: 10px;
	color: var(--fnova-accent, #e8540c);
	font-size: 13px;
}

/* My Account → My Designs */
.fnova-designs-table__actions {
	white-space: nowrap;
}
.fnova-designs-table__actions .button {
	margin: 0 4px 4px 0;
}

/* Tooltip + collapse header use the accent already (var-replaced) */
.fnova-collapse__header { background: #fafbfc; }

/* Enquiry / bulk-teams inputs share the modern control look */
.fnova-enquiry { --fnova-accent:#e8540c; --fnova-accent-soft:#fdeee5; --fnova-border:#d9dce1; }
.fnova-enquiry__field input,
.fnova-enquiry__field textarea,
.fnova-bulkteams-input {
	border: 1px solid var(--fnova-border, #d9dce1);
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 15px;
	box-sizing: border-box;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.fnova-enquiry__field input:focus,
.fnova-enquiry__field textarea:focus,
.fnova-bulkteams-input:focus {
	border-color: var(--fnova-accent, #e8540c);
	box-shadow: 0 0 0 3px var(--fnova-accent-soft, #fdeee5);
	outline: none;
}

/* ============================================================
 * Round 3 additions (granular field settings)
 * ============================================================ */

/* Counter over-limit */
.fnova-counter.is-over { color: #d63638; font-weight: 600; }

/* Palette swatch shape */
.fnova-palettes--square .fnova-palette__swatch { border-radius: 4px; }
.fnova-palettes--circle .fnova-palette__swatch { border-radius: 50%; }

/* Colour picker preset swatches */
.fnova-color-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fnova-color-palettes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fnova-color-swatch {
	width: 22px; height: 22px; padding: 0;
	border: 1px solid var(--fnova-border, #d9dce1);
	border-radius: 50%; cursor: pointer;
}
.fnova-color-swatch:hover { transform: scale(1.12); }

/* Quantities layouts */
.fnova-quantities--horizontal { display: flex; flex-wrap: wrap; gap: 14px; }
.fnova-quantities--horizontal .fnova-quantities__row { flex-direction: column; align-items: flex-start; gap: 4px; }
.fnova-quantities--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.fnova-quantities--grid .fnova-quantities__row { flex-direction: column; align-items: flex-start; gap: 4px; }

/* Bulk quantity price range */
.fnova-bulkqty__range { font-weight: 600; margin: 0 0 6px; }

/* Emoji picker search */
.fnova-emojis__search {
	display: block; width: 100%; margin-bottom: 8px;
	padding: 6px 8px; box-sizing: border-box;
	border: 1px solid var(--fnova-border, #d9dce1); border-radius: 6px;
}

/* Rich text editor */
.fnova-richtext-wrap { border: 1px solid var(--fnova-border, #d9dce1); border-radius: var(--fnova-radius, 10px); overflow: hidden; }
.fnova-richtext__bar { display: flex; gap: 2px; padding: 6px; background: rgba( 0, 0, 0, .03 ); border-bottom: 1px solid var(--fnova-border, #d9dce1); }
.fnova-richtext__btn { min-width: 30px; padding: 4px 8px; border: 1px solid var(--fnova-border, #d9dce1); background: #fff; border-radius: 4px; cursor: pointer; font-weight: 600; }
.fnova-richtext__btn:hover { border-color: var(--fnova-accent, #e8540c); }
.fnova-richtext__area { min-height: 120px; padding: 10px 12px; outline: none; }
.fnova-richtext__area:focus { box-shadow: inset 0 0 0 2px var(--fnova-accent-soft, #fdeee5); }

/* Per-element colours (G23) */
.fnova-product-fields .fnova-field__desc { color: var(--fnova-desc, var(--fnova-muted, #6b7280)); }
.fnova-product-fields .fnova-option-price { color: var(--fnova-price-color, var(--fnova-accent, #e8540c)); }
.fnova-totals { background: var(--fnova-totals-bg, rgba(0,0,0,.02)); color: var(--fnova-totals-color, inherit); }
.fnova-product-fields .fnova-input,
.fnova-product-fields .fnova-input--textarea,
.fnova-product-fields .fnova-input--select,
.fnova-product-fields input[type="text"],
.fnova-product-fields input[type="email"],
.fnova-product-fields input[type="number"],
.fnova-product-fields input[type="tel"],
.fnova-product-fields input[type="date"],
.fnova-product-fields select,
.fnova-product-fields textarea { box-shadow: var(--fnova-input-shadow, none); }

/* Tooltip bubble (real element → supports interactive + click-to-open) */
.fnova-tooltip__icon { background: var(--fnova-tip-icon, var(--fnova-accent, #e8540c)); }
.fnova-tooltip__bubble {
	position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
	background: var(--fnova-tip-bg, #1f2430); color: var(--fnova-tip-color, #fff);
	padding: 6px 9px; border-radius: 6px; font-size: 12px; font-weight: 400; text-align: left;
	white-space: normal; width: max-content; max-width: 220px; line-height: 1.35;
	opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 30; pointer-events: none;
}
.fnova-product-fields:not(.fnova-tip-clickmode) .fnova-tooltip:hover .fnova-tooltip__bubble,
.fnova-product-fields:not(.fnova-tip-clickmode) .fnova-tooltip:focus-within .fnova-tooltip__bubble,
.fnova-tooltip.is-open .fnova-tooltip__bubble { opacity: 1; visibility: visible; }

/* jQuery UI datepicker (core ships the JS, not the theme CSS) */
.ui-datepicker {
	background: #fff; border: 1px solid var(--fnova-border, #d9dce1); border-radius: 8px;
	padding: 8px; width: 17em; box-shadow: 0 6px 24px rgba(0,0,0,.12); z-index: 100 !important; display: none;
}
.ui-datepicker .ui-datepicker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ui-datepicker .ui-datepicker-title { font-weight: 600; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; padding: 0 6px; user-select: none; }
.ui-datepicker table { width: 100%; border-collapse: collapse; }
.ui-datepicker th { font-size: .8em; color: var(--fnova-muted, #6b7280); padding: 4px; }
.ui-datepicker td { text-align: center; }
.ui-datepicker td a, .ui-datepicker td span { display: block; padding: 5px; border-radius: 5px; text-decoration: none; color: var(--fnova-ink, #1f2430); }
.ui-datepicker td a:hover { background: var(--fnova-accent-soft, #fdeee5); }
.ui-datepicker td a.ui-state-active { background: var(--fnova-accent, #e8540c); color: #fff; }
.ui-datepicker .ui-state-disabled span { color: #c9ccd1; }
.ui-datepicker.fnova-scheme-dark {
	background: #151a24;
	border-color: #394255;
	color: #eef2ff;
}
.ui-datepicker.fnova-scheme-dark th { color: #aab4c6; }
.ui-datepicker.fnova-scheme-dark td a,
.ui-datepicker.fnova-scheme-dark td span { color: #eef2ff; }
.ui-datepicker.fnova-scheme-dark td a:hover { background: rgba(232,84,12,.16); }
.ui-datepicker.fnova-scheme-dark .ui-state-disabled span { color: #687386; }
@media (prefers-color-scheme: dark) {
	.ui-datepicker.fnova-scheme-auto {
		background: #151a24;
		border-color: #394255;
		color: #eef2ff;
	}
	.ui-datepicker.fnova-scheme-auto th { color: #aab4c6; }
	.ui-datepicker.fnova-scheme-auto td a,
	.ui-datepicker.fnova-scheme-auto td span { color: #eef2ff; }
	.ui-datepicker.fnova-scheme-auto td a:hover { background: rgba(232,84,12,.16); }
	.ui-datepicker.fnova-scheme-auto .ui-state-disabled span { color: #687386; }
}

/* ============================================================
 * FieldNova Storefront Premium UI Refresh — July 2026
 * Modern add-on form controls, animated buttons, notices and dark-mode-safe colors.
 * ============================================================ */
.fnova-product-fields,
.fnova-enquiry,
.fnova-designs,
.fnova-modal,
.fnova-bulkteams {
	--fnova-accent: #e8540c;
	--fnova-accent-2: #ff8a2a;
	--fnova-accent-soft: #fff2ea;
	--fnova-accent-ring: rgba(232, 84, 12, .18);
	--fnova-border: #e2e6ee;
	--fnova-border-strong: #cfd6e2;
	--fnova-ink: #171923;
	--fnova-muted: #687386;
	--fnova-surface: #fff;
	--fnova-surface-soft: #f8fafc;
	--fnova-input-bg: #fff;
	--fnova-radius: 14px;
	--fnova-radius-lg: 20px;
	--fnova-shadow: 0 18px 44px -34px rgba(17, 24, 39, .48);
	--fnova-shadow-sm: 0 1px 2px rgba(17, 24, 39, .07);
}

.fnova-product-fields {
	position: relative;
	padding: clamp(18px, 2.5vw, 26px);
	border: 1px solid var(--fnova-border);
	border-radius: var(--fnova-radius-lg);
	background:
		radial-gradient(circle at 0 0, rgba(255,138,42,.12), transparent 28%),
		linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
	box-shadow: var(--fnova-shadow);
}
.fnova-grid { gap: 18px; }
.fnova-field {
	position: relative;
	animation: fnova-field-in .22s ease both;
}
.fnova-field__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	color: var(--fnova-ink) !important;
}
.fnova-field__label .required {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--fnova-accent-soft);
	color: var(--fnova-accent) !important;
	font-size: 12px;
	line-height: 1;
}
.fnova-field__desc {
	font-size: .88em;
	line-height: 1.55;
	color: var(--fnova-desc, var(--fnova-muted)) !important;
}

.fnova-product-fields .fnova-input,
.fnova-product-fields .fnova-input--textarea,
.fnova-product-fields .fnova-input--select,
.fnova-product-fields input[type="text"],
.fnova-product-fields input[type="email"],
.fnova-product-fields input[type="number"],
.fnova-product-fields input[type="tel"],
.fnova-product-fields input[type="date"],
.fnova-product-fields select,
.fnova-product-fields textarea,
.fnova-enquiry__field input,
.fnova-enquiry__field textarea,
.fnova-bulkteams-input {
	min-height: 46px;
	border: 1px solid var(--fnova-border-strong) !important;
	border-radius: var(--fnova-radius) !important;
	background: var(--fnova-input-bg) !important;
	color: var(--fnova-ink) !important;
	box-shadow: 0 1px 1px rgba(17,24,39,.025) inset;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.fnova-product-fields .fnova-input:hover,
.fnova-product-fields .fnova-input--textarea:hover,
.fnova-product-fields .fnova-input--select:hover,
.fnova-product-fields input:hover,
.fnova-product-fields select:hover,
.fnova-product-fields textarea:hover,
.fnova-enquiry__field input:hover,
.fnova-enquiry__field textarea:hover,
.fnova-bulkteams-input:hover {
	border-color: var(--fnova-accent) !important;
}
.fnova-product-fields .fnova-input:focus,
.fnova-product-fields input:focus,
.fnova-product-fields select:focus,
.fnova-product-fields textarea:focus,
.fnova-enquiry__field input:focus,
.fnova-enquiry__field textarea:focus,
.fnova-bulkteams-input:focus {
	border-color: var(--fnova-accent) !important;
	box-shadow: 0 0 0 4px var(--fnova-accent-ring) !important;
	outline: none !important;
}
.fnova-input--textarea,
.fnova-product-fields textarea { min-height: 120px; }
.fnova-input--color {
	width: 72px !important;
	height: 44px;
	border-radius: 13px !important;
	padding: 4px !important;
}

/* Choice cards */
.fnova-product-fields .fnova-choice,
.fnova-image-option,
.fnova-palette,
.fnova-media-option,
.fnova-repeat__item,
.fnova-collapse,
.fnova-bulkteams,
.fnova-designs {
	border: 1px solid var(--fnova-border) !important;
	border-radius: var(--fnova-radius) !important;
	background: var(--fnova-surface) !important;
	box-shadow: var(--fnova-shadow-sm);
}
.fnova-product-fields .fnova-choice {
	position: relative;
	padding: 11px 13px;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.fnova-product-fields .fnova-choice:hover,
.fnova-image-option:hover,
.fnova-palette:hover {
	transform: translateY(-1px);
	border-color: rgba(232,84,12,.48) !important;
	box-shadow: 0 12px 26px -24px rgba(232,84,12,.72);
}
.fnova-product-fields .fnova-choice:has(input:checked) {
	background: linear-gradient(135deg, var(--fnova-accent-soft), var(--fnova-surface)) !important;
	border-color: rgba(232,84,12,.55) !important;
	box-shadow: 0 0 0 3px rgba(232,84,12,.10);
}
.fnova-product-fields .fnova-choice input,
.fnova-switch__input,
.fnova-image-option__input,
.fnova-palette__input { accent-color: var(--fnova-accent); }
.fnova-option-price {
	margin-left: 3px;
	font-weight: 800;
	color: var(--fnova-price-color, var(--fnova-accent)) !important;
}

/* Image, palette and upload controls */
.fnova-images,
.fnova-palettes,
.fnova-media-options { gap: 14px; }
.fnova-image-option {
	padding: 10px;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.fnova-image-option__img {
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.fnova-image-option:has(.fnova-image-option__input:checked),
.fnova-palette:has(.fnova-palette__input:checked) {
	border-color: var(--fnova-accent) !important;
	box-shadow: 0 0 0 4px var(--fnova-accent-soft), var(--fnova-shadow-sm);
}
.fnova-palette { padding: 8px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.fnova-palette__swatch {
	width: 38px;
	height: 38px;
	border-color: rgba(17,24,39,.12);
	box-shadow: inset 0 0 0 3px rgba(255,255,255,.86), var(--fnova-shadow-sm);
}
.fnova-color-swatch { transition: transform .16s ease, box-shadow .16s ease; }
.fnova-color-swatch:hover { box-shadow: 0 0 0 4px var(--fnova-accent-soft); }

.fnova-file__btn,
.fnova-cropper__apply,
.fnova-enquiry-open,
.fnova-enquiry-submit,
.fnova-cartedit-save,
.fnova-repeat__add,
.fnova-repeat__remove,
.fnova-modal__done,
.fnova-designs .button,
.fnova-designs-table__actions .button {
	position: relative;
	overflow: hidden;
	min-height: 42px;
	border-radius: 999px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	box-shadow: 0 12px 26px -22px rgba(232,84,12,.9);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, color .16s ease;
}
.fnova-file__btn::before { content: "↥"; font-weight: 900; }
.fnova-enquiry-open::before { content: "✉"; }
.fnova-enquiry-submit::before,
.fnova-cartedit-save::before,
.fnova-modal__done::before { content: "✓"; }
.fnova-cropper__apply::before { content: "✦"; }
.fnova-file__btn:hover,
.fnova-cropper__apply:hover,
.fnova-enquiry-open:hover,
.fnova-enquiry-submit:hover,
.fnova-cartedit-save:hover,
.fnova-repeat__add:hover,
.fnova-repeat__remove:hover,
.fnova-modal__done:hover,
.fnova-designs .button:hover,
.fnova-designs-table__actions .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -22px rgba(232,84,12,1);
}
.fnova-enquiry-submit,
.fnova-cartedit-save,
.fnova-modal__done {
	border-color: transparent !important;
	background: linear-gradient(120deg, var(--fnova-accent-2), var(--fnova-accent)) !important;
	color: #fff !important;
}
.fnova-file__btn,
.fnova-cropper__apply,
.fnova-enquiry-open {
	border-color: rgba(232,84,12,.45) !important;
	background: var(--fnova-surface) !important;
	color: var(--fnova-accent) !important;
}
.fnova-file__item {
	padding: 9px 11px;
	border: 1px solid var(--fnova-border);
	border-radius: 12px;
	background: var(--fnova-surface-soft);
}
.fnova-file__remove { transition: transform .16s ease, background .16s ease; }
.fnova-file__remove:hover { transform: scale(1.05); }
.fnova-file__progress {
	height: 7px;
	border-radius: 999px;
	background: var(--fnova-surface-soft);
}
.fnova-file__bar { background: linear-gradient(90deg, var(--fnova-accent-2), var(--fnova-accent)); }

/* Switch, rich text, tooltips */
.fnova-switch__track {
	width: 50px;
	height: 28px;
	background: #cbd5e1;
	box-shadow: inset 0 1px 2px rgba(17,24,39,.16);
}
.fnova-switch__thumb {
	width: 24px;
	height: 24px;
	box-shadow: 0 2px 8px rgba(17,24,39,.22);
}
.fnova-switch__input:checked + .fnova-switch__track {
	background: linear-gradient(120deg, var(--fnova-accent-2), var(--fnova-accent));
}
.fnova-switch__input:checked + .fnova-switch__track .fnova-switch__thumb { transform: translateX(22px); }
.fnova-tooltip__icon {
	background: linear-gradient(120deg, var(--fnova-accent-2), var(--fnova-accent));
	box-shadow: 0 6px 16px -11px rgba(232,84,12,.9);
}
.fnova-tooltip__bubble {
	border-radius: 10px;
	box-shadow: 0 12px 30px -18px rgba(17,24,39,.7);
}
.fnova-richtext-wrap {
	border-radius: var(--fnova-radius) !important;
	box-shadow: var(--fnova-shadow-sm);
}
.fnova-richtext__bar { background: var(--fnova-surface-soft); }
.fnova-richtext__btn { border-radius: 9px; background: var(--fnova-surface); color: var(--fnova-ink); transition: transform .16s ease, border-color .16s ease; }
.fnova-richtext__btn:hover { transform: translateY(-1px); }

/* Total cards, status and modals */
.fnova-totals {
	position: relative;
	overflow: hidden;
	border-radius: var(--fnova-radius-lg) !important;
	background:
		radial-gradient(circle at 100% 0, rgba(255,138,42,.15), transparent 32%),
		var(--fnova-totals-bg, var(--fnova-surface)) !important;
	box-shadow: var(--fnova-shadow) !important;
}
.fnova-totals::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, var(--fnova-accent-2), var(--fnova-accent));
}
.fnova-totals__row { padding-left: 4px; }
.fnova-totals__row.fnova-totals__grand .fnova-totals__value {
	font-size: 1.34em;
	letter-spacing: -.03em;
}
.fnova-enquiry__status,
.fnova-cartedit__status,
.fnova-designs__msg,
.fnova-field__error {
	padding: 8px 11px;
	border-radius: 12px;
	background: var(--fnova-accent-soft);
	color: var(--fnova-accent) !important;
	font-weight: 700;
}
.fnova-field.fnova-has-error .fnova-input,
.fnova-field.fnova-has-error .fnova-input--textarea,
.fnova-field.fnova-has-error .fnova-input--select,
.fnova-has-error input,
.fnova-has-error select,
.fnova-has-error textarea {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 4px rgba(214,54,56,.12) !important;
}
.fnova-modal__overlay {
	background: rgba(15,18,26,.62);
	backdrop-filter: blur(5px);
}
.fnova-modal__box {
	border: 1px solid rgba(255,255,255,.62);
	border-radius: 24px;
	box-shadow: 0 30px 90px -36px rgba(17,24,39,.66);
	animation: fnova-modal-in .2s ease both;
}
.fnova-modal__close {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	transition: background .16s ease, color .16s ease, transform .16s ease;
}
.fnova-modal__close:hover { background: rgba(17,24,39,.08); color: var(--fnova-ink); transform: rotate(90deg); }

.fnova-collapse { overflow: hidden; box-shadow: var(--fnova-shadow-sm); }
.fnova-collapse__header {
	background: linear-gradient(135deg, var(--fnova-surface), var(--fnova-surface-soft)) !important;
	color: var(--fnova-ink);
}
.fnova-collapse__arrow { color: var(--fnova-accent); }
.fnova-divider {
	border-top-color: var(--fnova-border);
}
.fnova-section__title,
.fnova-divider__title {
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--fnova-ink);
}
.ui-datepicker {
	border-radius: 16px;
	box-shadow: 0 18px 48px -28px rgba(17,24,39,.5);
}
.ui-datepicker td a.ui-state-active { background: linear-gradient(120deg, var(--fnova-accent-2), var(--fnova-accent)); }

/* Dark storefront compatibility.
 * Light is the default to avoid mismatches on themes that stay light while the
 * visitor's OS/browser is dark. Dark variables only apply when the admin chooses
 * Dark, or chooses Auto and the browser prefers dark mode.
 */
.fnova-product-fields.fnova-scheme-dark,
.fnova-enquiry.fnova-scheme-dark,
.fnova-designs.fnova-scheme-dark,
.fnova-modal.fnova-scheme-dark,
.fnova-bulkteams.fnova-scheme-dark {
	--fnova-border: #293143;
	--fnova-border-strong: #3a4558;
	--fnova-ink: #eef2ff;
	--fnova-muted: #aab4c6;
	--fnova-desc: #aab4c6;
	--fnova-surface: #191d28;
	--fnova-surface-soft: #111827;
	--fnova-input-bg: #101621;
	--fnova-totals-bg: #191d28;
	--fnova-totals-color: #eef2ff;
	--fnova-tip-bg: #0f172a;
	--fnova-tip-color: #fff;
	--fnova-accent-soft: rgba(232,84,12,.16);
	--fnova-accent-ring: rgba(255,138,42,.22);
}
.fnova-product-fields.fnova-scheme-dark {
	background: radial-gradient(circle at 0 0, rgba(255,138,42,.12), transparent 28%), linear-gradient(180deg, #171c27, #111827) !important;
}
.fnova-product-fields.fnova-scheme-dark .fnova-choice:has(input:checked) {
	background: linear-gradient(135deg, rgba(232,84,12,.18), rgba(17,24,39,.95)) !important;
}
.fnova-modal.fnova-scheme-dark .fnova-modal__box { background: var(--fnova-surface); color: var(--fnova-ink); border-color: var(--fnova-border); }

@media (prefers-color-scheme: dark) {
	.fnova-product-fields.fnova-scheme-auto,
	.fnova-enquiry.fnova-scheme-auto,
	.fnova-designs.fnova-scheme-auto,
	.fnova-modal.fnova-scheme-auto,
	.fnova-bulkteams.fnova-scheme-auto {
		--fnova-border: #293143;
		--fnova-border-strong: #3a4558;
		--fnova-ink: #eef2ff;
		--fnova-muted: #aab4c6;
		--fnova-desc: #aab4c6;
		--fnova-surface: #191d28;
		--fnova-surface-soft: #111827;
		--fnova-input-bg: #101621;
		--fnova-totals-bg: #191d28;
		--fnova-totals-color: #eef2ff;
		--fnova-tip-bg: #0f172a;
		--fnova-tip-color: #fff;
		--fnova-accent-soft: rgba(232,84,12,.16);
		--fnova-accent-ring: rgba(255,138,42,.22);
	}
	.fnova-product-fields.fnova-scheme-auto {
		background: radial-gradient(circle at 0 0, rgba(255,138,42,.12), transparent 28%), linear-gradient(180deg, #171c27, #111827) !important;
	}
	.fnova-product-fields.fnova-scheme-auto .fnova-choice:has(input:checked) {
		background: linear-gradient(135deg, rgba(232,84,12,.18), rgba(17,24,39,.95)) !important;
	}
	.fnova-modal.fnova-scheme-auto .fnova-modal__box { background: var(--fnova-surface); color: var(--fnova-ink); border-color: var(--fnova-border); }
}

@media screen and (max-width: 600px) {
	.fnova-product-fields { padding: 16px; border-radius: 18px; }
	.fnova-file__btn,
	.fnova-cropper__apply,
	.fnova-enquiry-open,
	.fnova-enquiry-submit,
	.fnova-cartedit-save { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fnova-product-fields *,
	.fnova-modal__box,
	.fnova-field { animation: none !important; transition: none !important; }
}

@keyframes fnova-field-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes fnova-modal-in {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modern native controls and in-page notices/prompts. */
.fnova-input,
.fnova-input--textarea,
.fnova-input--select,
.fnova-product-fields select {
	border: 1px solid rgba(15, 23, 42, .16);
	border-radius: 14px;
	background-color: #fff;
	box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 14px 30px -26px rgba(15,23,42,.35);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.fnova-input,
.fnova-input--select,
.fnova-product-fields select {
	min-height: 42px;
	padding: 9px 12px;
}
.fnova-input--textarea { padding: 11px 12px; }
.fnova-product-fields select,
.fnova-input--select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--fnova-accent, #e8540c) 50%), linear-gradient(135deg, var(--fnova-accent, #e8540c) 50%, transparent 50%), linear-gradient(to right, rgba(232,84,12,.08), rgba(232,84,12,.08));
	background-position: calc(100% - 20px) 18px, calc(100% - 14px) 18px, calc(100% - 42px) 50%;
	background-size: 6px 6px, 6px 6px, 1px 55%;
	background-repeat: no-repeat;
	padding-right: 52px;
}
.fnova-input:focus,
.fnova-input--textarea:focus,
.fnova-input--select:focus,
.fnova-product-fields select:focus {
	border-color: var(--fnova-accent, #e8540c);
	box-shadow: 0 0 0 4px rgba(232,84,12,.14), 0 16px 34px -28px rgba(15,23,42,.45);
	outline: none;
}
.fnova-front-toast-stack {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(380px, calc(100vw - 32px));
}
.fnova-front-toast {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 14px;
	border: 1px solid rgba(15,23,42,.10);
	border-left: 5px solid #2563eb;
	border-radius: 16px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 22px 48px -20px rgba(15,23,42,.35);
	backdrop-filter: blur(14px);
	animation: fnova-front-pop .18s ease both;
}
.fnova-front-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(37,99,235,.10);
	color: #2563eb;
	font-weight: 800;
}
.fnova-front-toast__message { font-weight: 650; line-height: 1.45; color: #111827; }
.fnova-front-toast__close {
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #64748b;
}
.fnova-front-toast__close:hover { background: rgba(15,23,42,.08); color: #111827; }
.fnova-front-toast--success { border-left-color: #12805c; }
.fnova-front-toast--success .fnova-front-toast__icon { background: rgba(18,128,92,.12); color: #12805c; }
.fnova-front-toast--warning { border-left-color: #a16207; }
.fnova-front-toast--warning .fnova-front-toast__icon { background: rgba(161,98,7,.12); color: #a16207; }
.fnova-front-toast--error { border-left-color: #c24142; }
.fnova-front-toast--error .fnova-front-toast__icon { background: rgba(194,65,66,.12); color: #c24142; }
.fnova-front-prompt {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15,23,42,.45);
	backdrop-filter: blur(6px);
}
.fnova-front-prompt__card {
	width: min(460px, 100%);
	border: 1px solid rgba(255,255,255,.62);
	border-radius: 24px;
	background: linear-gradient(135deg, #fff, #fff7f0);
	box-shadow: 0 24px 70px -24px rgba(15,23,42,.55);
	animation: fnova-front-pop .2s ease both;
	overflow: hidden;
}
.fnova-front-prompt form { padding: 24px; }
.fnova-front-prompt h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; color: #111827; }
.fnova-front-prompt p { margin: 0 0 16px; color: #64748b; }
.fnova-front-prompt input {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid rgba(15,23,42,.16);
	border-radius: 14px;
	padding: 10px 12px;
	background: #fff;
}
.fnova-front-prompt input:focus { border-color: var(--fnova-accent, #e8540c); box-shadow: 0 0 0 4px rgba(232,84,12,.14); outline: 0; }
.fnova-front-prompt__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.fnova-front-prompt button {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	font-weight: 750;
	cursor: pointer;
}
.fnova-front-prompt__cancel { border: 1px solid rgba(15,23,42,.14); background: #fff; color: #334155; }
.fnova-front-prompt__confirm { border: 0; background: linear-gradient(95deg, #ff8a2a, var(--fnova-accent, #e8540c)); color: #fff; box-shadow: 0 12px 24px -16px rgba(232,84,12,.75); }
@keyframes fnova-front-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.fnova-front-toast-stack.fnova-scheme-dark .fnova-front-toast,
.fnova-front-toast.fnova-scheme-dark { background: rgba(24,28,39,.96); border-color: rgba(255,255,255,.08); }
.fnova-front-toast-stack.fnova-scheme-dark .fnova-front-toast__message,
.fnova-front-toast.fnova-scheme-dark .fnova-front-toast__message { color: #eef2ff; }
.fnova-front-prompt.fnova-scheme-dark .fnova-front-prompt__card { background: linear-gradient(135deg, #181c27, #151a24); border-color: rgba(255,255,255,.08); }
.fnova-front-prompt.fnova-scheme-dark h3 { color: #eef2ff; }
.fnova-front-prompt.fnova-scheme-dark p { color: #aab4c6; }
.fnova-front-prompt.fnova-scheme-dark input { background: #101621; border-color: #394255; color: #eef2ff; }

@media (prefers-color-scheme: dark) {
	.fnova-front-toast-stack.fnova-scheme-auto .fnova-front-toast,
	.fnova-front-toast.fnova-scheme-auto { background: rgba(24,28,39,.96); border-color: rgba(255,255,255,.08); }
	.fnova-front-toast-stack.fnova-scheme-auto .fnova-front-toast__message,
	.fnova-front-toast.fnova-scheme-auto .fnova-front-toast__message { color: #eef2ff; }
	.fnova-front-prompt.fnova-scheme-auto .fnova-front-prompt__card { background: linear-gradient(135deg, #181c27, #151a24); border-color: rgba(255,255,255,.08); }
	.fnova-front-prompt.fnova-scheme-auto h3 { color: #eef2ff; }
	.fnova-front-prompt.fnova-scheme-auto p { color: #aab4c6; }
	.fnova-front-prompt.fnova-scheme-auto input { background: #101621; border-color: #394255; color: #eef2ff; }
}