/*
 * ShapeOption advanced modules — swatches, wizard, calculation, uploads
 *
 * Loads after shopt-frontend.css and reuses its custom properties, so every
 * rule here inherits the same Style Settings accent, radius and spacing.
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1. Multi-step wizard
 *  2. Calculation field
 *  3. Date and time range
 *  4. Upload dropzone
 *  5. Repeatable fields
 *  6. Swatches: shared
 *  7. Text swatches
 *  8. Color swatches
 *  9. Image swatches
 *  10. Label swatches
 *  11. Wizard step-boundary marker
 */

/* -------------------------------------------------------------------
   1. Multi-step wizard
   ------------------------------------------------------------------- */

/* Multi-step wizard. .shopt-group is a flex container (see shopt-frontend.css
   shopt-frontend.css); the progress bar and nav are direct children of it
   alongside the .shopt-field steps, so they need the same full-width flex-item
   sizing .shopt-field gets — otherwise they collapse to content width and sit
   oddly beside the fields instead of spanning above/below them. */
.shopt-wizard__progress {
	flex: 0 0 100%;
	display: flex;
	gap: 6px;
	margin-bottom: 1em;
}

.shopt-wizard__dot {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #e5e7eb;
	transition: background 0.2s ease;
}

.shopt-wizard__dot--active {
	background: var( --shopt-accent, #2271b1 );
}

.shopt-wizard__nav {
	flex: 0 0 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 0.75em;
}

/* Same theme-override problem as .shopt-section: a plain <button> often inherits
   a theme's own background/border/padding from selectors like `form button`,
   which can beat a bare class here — !important guarantees these always
   render as intended. Previous is outlined (secondary); Next is filled with
   the accent color (primary) — a clear, unambiguous visual hierarchy for
   which action moves you forward. */
.shopt-wizard__prev,
.shopt-wizard__next {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35em !important;
	border-radius: var( --shopt-radius, 6px ) !important;
	font: inherit !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0.65em 1.2em !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.shopt-wizard__prev {
	background: #fff !important;
	border: 1px solid #d1d5db !important;
	color: #1f2937 !important;
}

.shopt-wizard__prev:hover {
	border-color: #9ca3af !important;
	background: #f9fafb !important;
}

.shopt-wizard__next {
	background: var( --shopt-accent, #2271b1 ) !important;
	border: 1px solid var( --shopt-accent, #2271b1 ) !important;
	color: #fff !important;
}

.shopt-wizard__next:hover {
	opacity: 0.9;
}

.shopt-wizard__prev:focus-visible,
.shopt-wizard__next:focus-visible {
	outline: 2px solid var( --shopt-accent, #2271b1 );
	outline-offset: 2px;
}

.shopt-wizard__prev:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- end 1. Multi-step wizard --- */

/* -------------------------------------------------------------------
   2. Calculation field
   ------------------------------------------------------------------- */

.shopt-calc {
	display: inline-block;
	min-width: 6em;
	padding: 6px 10px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: #f9fafb;
	font-variant-numeric: tabular-nums;
}

/* --- end 2. Calculation field --- */

/* -------------------------------------------------------------------
   3. Date and time range
   ------------------------------------------------------------------- */

.shopt-range-pair {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.shopt-range-pair__part {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.shopt-range-pair__part span {
	font-size: 0.85em;
	opacity: 0.75;
}

/* --- end 3. Date and time range --- */

/* -------------------------------------------------------------------
   4. Upload dropzone
   ------------------------------------------------------------------- */

.shopt-dropzone {
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	padding: 16px;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
	cursor: pointer;
}

.shopt-dropzone--over {
	border-color: var( --shopt-accent, #2271b1 );
	background: rgba( 0, 0, 0, 0.03 );
}

.shopt-dropzone input[type="file"] {
	width: 100%;
}

.shopt-dropzone__hint {
	display: block;
	margin-top: 6px;
	font-size: 0.85em;
	opacity: 0.7;
}

/* --- end 4. Upload dropzone --- */

/* -------------------------------------------------------------------
   5. Repeatable fields
   ------------------------------------------------------------------- */

.shopt-repeat-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.shopt-repeat-row .shopt-field__input {
	flex: 1;
}

.shopt-repeat-remove {
	background: none;
	border: 0;
	color: #dc2626;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
	padding: 2px 6px;
	transition: color 0.15s ease;
}

.shopt-repeat-remove:hover,
.shopt-repeat-remove:focus {
	background: none;
	color: #b91c1c;
}

/* Explicit colors rather than `currentColor`/transparent: on themes with
   unusual body text colors (very light text, dark-mode themes) a
   background:none + currentColor border can read as invisible or the wrong
   hue. This keeps the add button legible and on-brand everywhere. */
.shopt-repeat-add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	margin-bottom: 10px;
	background: #fff;
	border: 1px dashed #9ca3af;
	border-radius: var( --shopt-radius, 6px );
	padding: 6px 14px;
	font: inherit;
	font-size: 0.85em;
	color: var( --shopt-accent, #2271b1 );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* The color is repeated here because themes recolor button:hover (Astra turns it white). */
.shopt-repeat-add:hover,
.shopt-repeat-add:focus {
	border-color: var( --shopt-accent, #2271b1 );
	background: #f9fafb;
	color: var( --shopt-accent, #2271b1 );
}

/* Repeat per quantity: one numbered entry per item. */
.shopt-repeat-num {
	flex: 0 0 auto;
	min-width: 1.6em;
	font-size: 0.85em;
	font-weight: 600;
	color: #6b7280;
	text-align: right;
}

.shopt-repeat-num::after {
	content: ".";
}

/* --- end 5. Repeatable fields --- */

/* -------------------------------------------------------------------
   6. Swatches: shared
   ------------------------------------------------------------------- */

.shopt-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.shopt-swatch {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.shopt-swatch input {
	position: absolute;
	opacity: 0;
}

/* --- end 6. Swatches: shared --- */

/* -------------------------------------------------------------------
   7. Text swatches
   ------------------------------------------------------------------- */

/* Text swatches: pill buttons. Size/shape/color follow the global Style
   Settings (--shopt-choice-*, --shopt-radius, --shopt-accent), same as Free's boxed
   choice layout, so swatches and plain fields read as one system. */
.shopt-swatch--text .shopt-swatch__text {

	border: 1px solid #e5e7eb;
	border-radius: var( --shopt-radius, 10px );
	padding: var( --shopt-choice-pad-y, 0.85em ) var( --shopt-choice-pad-x, 1.25em );
	font-size: var( --shopt-choice-font, 1em );
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.shopt-swatch--text:hover .shopt-swatch__text {
	border-color: #9ca3af;
}

.shopt-swatch--text input:checked ~ .shopt-swatch__text {
	border-color: var( --shopt-accent, #111827 );
	background: #f9fafb;
	box-shadow: 0 0 0 1px var( --shopt-accent, #111827 );
}

.shopt-swatch--text .shopt-swatch__chip {
	display: none;
}

/* --- end 7. Text swatches --- */

/* -------------------------------------------------------------------
   8. Color swatches
   ------------------------------------------------------------------- */

/* Color swatches: a bordered card with the color chip centered above the
   label — not just a bare circle — so it reads as one option card, matching
   the boxed choice cards above. Selecting one thickens the card border
   instead of ringing just the chip. */
.shopt-swatch--color {
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 8px;
	border: 1px solid #e5e7eb;
	border-radius: var( --shopt-radius, 10px );
	padding: var( --shopt-choice-pad-y, 0.85em ) var( --shopt-choice-pad-x, 1.25em );
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.shopt-swatch--color:hover {
	border-color: #9ca3af;
}

.shopt-swatch--color .shopt-swatch__chip {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --shopt-swatch-color, #ccc );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.15 );
}

.shopt-swatch--color input:checked ~ .shopt-swatch__chip {
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.15 );
}

.shopt-swatch--color:has( input:checked ),
.shopt-swatch--color.shopt-swatch--checked {
	border-color: var( --shopt-accent, #111827 );
	background: #f9fafb;
	box-shadow: 0 0 0 1px var( --shopt-accent, #111827 );
}

/* --- end 8. Color swatches --- */

/* -------------------------------------------------------------------
   9. Image swatches
   ------------------------------------------------------------------- */

/* Image swatches: thumbnail tiles, same card treatment as color swatches. */
.shopt-swatch--image {
	flex-direction: column;
	text-align: center;
	gap: 8px;
	border: 1px solid #e5e7eb;
	border-radius: var( --shopt-radius, 10px );
	padding: var( --shopt-choice-pad-y, 0.85em ) var( --shopt-choice-pad-x, 1.25em );
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.shopt-swatch--image:hover {
	border-color: #9ca3af;
}

.shopt-swatch--image .shopt-swatch__img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
}

.shopt-swatch--image:has( input:checked ),
.shopt-swatch--image.shopt-swatch--checked {
	border-color: var( --shopt-accent, #111827 );
	background: #f9fafb;
	box-shadow: 0 0 0 1px var( --shopt-accent, #111827 );
}

/* --- end 9. Image swatches --- */

/* -------------------------------------------------------------------
   10. Label swatches
   ------------------------------------------------------------------- */

/* Label swatches: pill with secondary line. */
.shopt-swatch--label .shopt-swatch__chip {
	display: none;
}

.shopt-swatch--label .shopt-swatch__text {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: var( --shopt-radius, 10px );
	padding: var( --shopt-choice-pad-y, 0.85em ) var( --shopt-choice-pad-x, 1.25em );
	font-size: var( --shopt-choice-font, 1em );
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.shopt-swatch--label:hover .shopt-swatch__text {
	border-color: #9ca3af;
}

.shopt-swatch--label .shopt-swatch__sub {
	font-size: 0.8em;
	opacity: 0.7;
}

.shopt-swatch--label input:checked ~ .shopt-swatch__text {
	border-color: var( --shopt-accent, #111827 );
	background: #f9fafb;
	box-shadow: 0 0 0 1px var( --shopt-accent, #111827 );
}

.shopt-swatch input:focus-visible ~ .shopt-swatch__chip,
.shopt-swatch input:focus-visible ~ .shopt-swatch__img,
.shopt-swatch input:focus-visible ~ .shopt-swatch__text {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- end 10. Label swatches --- */

/* -------------------------------------------------------------------
   11. Wizard step-boundary marker
   ------------------------------------------------------------------- */

/* A step's own section field is the wizard's step-boundary marker; the
   progress bar replaces it, so the raw toggle button stays hidden for the
   life of the wizard. Applied by shopt-advanced.js as a class, not a style. */
.shopt-wizard__step-marker {
	display: none;
}

/* --- end 11. Wizard step-boundary marker --- */

/* -------------------------------------------------------------------
   12. Product element
   ------------------------------------------------------------------- */

/* One row per linked product: thumbnail, name, then its price at the end. */
.shopt-product.shopt-field__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	cursor: pointer;
}

.shopt-product + .shopt-product {
	margin-top: 6px;
}

.shopt-product:has(input:checked) {
	border-color: currentColor;
}

.shopt-product__image {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}

.shopt-product__name {
	flex: 1;
	min-width: 0;
}

.shopt-product__price {
	flex: none;
	font-weight: 600;
}

/* --- end 12. Product element --- */