/**
 * WC Custom Size Measurement - "Custom Size Studio" popup styles.
 * Scoped entirely under .wcsm-* classes so it never collides with the
 * Elessi/Nasa theme's own CSS. File: assets/css/wcsm-frontend.css
 *
 * Neutral, light-gray-led palette by design (no theme-specific brand
 * color, and deliberately avoiding heavy black) so this drops into any
 * theme without clashing. To re-skin it for a particular brand, only the
 * variables below need to change - nothing else in this file references
 * a color directly.
 */

/* Scoped to the shared .wcsm-modal class (not the #wcsm-modal wizard's own
   ID) so #wcsm-details-modal - a separate element in the DOM, not nested
   inside #wcsm-modal - inherits the same palette. */
.wcsm-modal {
	--wcsm-accent: #6e6e6e;
	/* Primary actions, selected state - medium gray, not black. */
	--wcsm-accent-dark: #4a4a4a;
	/* Text sitting on --wcsm-accent-soft(er) backgrounds. */
	--wcsm-accent-soft: #e5e5e5;
	/* Secondary "selected" backgrounds (completed step, selected card). */
	--wcsm-accent-softer: #f4f4f4;
	/* Default/unselected pill & card backgrounds, hint box. */
	--wcsm-surface: #fafafa;
	/* Input fill background. */
	--wcsm-border: #e2e2e2;
	--wcsm-text: #3a3a3a;
	--wcsm-muted: #8a8a8a;
	--wcsm-danger: #c0392b;
	--wcsm-radius: 14px;
}

html.wcsm-modal-open {
	overflow: hidden;
}

/* "Custom Size" swatch button - always a solid, filled button (not just on
   hover/selected) so it reads as a distinct action next to the plain S/M/L/XL
   outline swatches, wherever the Nasa theme renders it (single product label
   swatches and shop-loop variation swatches share the term slug class
   below). Uses its own variables, not --wcsm-accent above (that's scoped to
   .wcsm-modal, which this swatch lives outside of, in the theme's own
   variations table) - only these two need to change to re-skin it. */
:root {
	--wcsm-swatch-bg: #6e6e6e;
	--wcsm-swatch-bg-hover: #565656;
	--wcsm-swatch-text: #ffffff;
}

a.nasa-attr-ux-custom-size,
a.nasa-attr-ux-item.nasa-attr-ux-custom-size {
	background-color: var(--wcsm-swatch-bg) !important;
	border-color: var(--wcsm-swatch-bg) !important;
	color: var(--wcsm-swatch-text) !important;
	border-radius: 1rem !important;
	padding: 0 10px !important;
}

a.nasa-attr-ux-custom-size .nasa-attr-text,
a.nasa-attr-ux-item.nasa-attr-ux-custom-size .nasa-attr-text {
	color: var(--wcsm-swatch-text) !important;
}

a.nasa-attr-ux-custom-size:hover,
a.nasa-attr-ux-item.nasa-attr-ux-custom-size:hover,
a.nasa-attr-ux-custom-size.selected,
a.nasa-attr-ux-item.nasa-attr-ux-custom-size.selected {
	background-color: var(--wcsm-swatch-bg-hover) !important;
	border-color: var(--wcsm-swatch-bg-hover) !important;
}

.wcsm-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wcsm-modal.wcsm-modal--open {
	display: flex;
}

.wcsm-modal *,
.wcsm-modal *::before,
.wcsm-modal *::after {
	box-sizing: border-box;
}

.wcsm-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	animation: wcsm-fade-in 0.15s ease-out;
}

.wcsm-modal__dialog {
	position: relative;
	background: #fff;
	color: var(--wcsm-text);
	width: 100%;
	max-width: 760px;
	max-height: 92vh;
	overflow-y: auto;
	border-radius: 20px;
	padding: 36px 40px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	animation: wcsm-scale-in 0.18s ease-out;
}

@keyframes wcsm-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes wcsm-scale-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.wcsm-modal__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 34px;
	height: 34px;
	line-height: 1;
	font-size: 20px;
	background: #f0f0f0;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: #666;
}

.wcsm-modal__close:hover {
	color: #444;
	background: #e2e2e2;
}

.wcsm-modal__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wcsm-text);
	margin-bottom: 6px;
}

.wcsm-modal__eyebrow svg {
	flex: none;
}

.wcsm-modal__title {
	margin: 0 40px 22px 0;
	font-size: 26px;
	font-weight: 800;
	color: #333333;
}

/* Step indicator ---------------------------------------------------- */

.wcsm-steps {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.wcsm-step {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: default;
	color: #9a9a9a;
}

.wcsm-step.is-reachable {
	cursor: pointer;
}

.wcsm-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ececec;
	color: var(--wcsm-muted);
	font-size: 13px;
	font-weight: 700;
	flex: none;
}

.wcsm-step__label {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.wcsm-step.is-active,
.wcsm-step.is-complete {
	color: var(--wcsm-accent-dark);
}

.wcsm-step.is-active .wcsm-step__num {
	background: var(--wcsm-accent);
	color: #fff;
}

.wcsm-step.is-complete .wcsm-step__num {
	background: var(--wcsm-accent-soft);
	color: var(--wcsm-accent-dark);
}

.wcsm-step.is-active .wcsm-step__label {
	color: #333333;
}

.wcsm-step__connector {
	flex: 1 1 auto;
	height: 1px;
	background: #e0e0e0;
	margin: 0 14px;
	min-width: 20px;
}

/* Notices ------------------------------------------------------------ */

.wcsm-modal__notices {
	display: none;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #fdeaea;
	border: 1px solid #e5b3b3;
	color: var(--wcsm-danger);
	font-size: 13px;
	border-radius: 8px;
}

/* Panels -------------------------------------------------------------- */

.wcsm-panel__intro {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--wcsm-muted);
	line-height: 1.5;
}

.wcsm-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.wcsm-panel__head .wcsm-panel__intro {
	flex: 1 1 260px;
	margin-bottom: 14px;
}

/* Step 1: photos -------------------------------------------------------- */

.wcsm-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

.wcsm-photo__box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--wcsm-radius);
	background: var(--wcsm-surface);
	border: 1.5px dashed var(--wcsm-border);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.wcsm-photo__box:hover {
	border-color: var(--wcsm-accent);
}

.wcsm-photo__box.is-uploaded {
	border-style: solid;
	border-color: var(--wcsm-accent);
}

.wcsm-photo__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.wcsm-photo__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--wcsm-accent-dark);
	font-size: 12.5px;
	font-weight: 600;
	pointer-events: none;
}

.wcsm-photo__box.is-uploaded .wcsm-photo__placeholder,
.wcsm-photo__box.is-uploading .wcsm-photo__placeholder {
	display: none;
}

.wcsm-photo__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcsm-photo__badge {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wcsm-accent);
	color: #fff;
	font-size: 12px;
	z-index: 2;
}

.wcsm-photo__box.is-uploaded .wcsm-photo__badge {
	display: flex;
}

.wcsm-photo__remove {
	display: none;
	position: absolute;
	top: 8px;
	left: 8px;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: none;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.wcsm-photo__box.is-uploaded .wcsm-photo__remove {
	display: flex;
}

.wcsm-photo__spinner {
	display: none;
	position: absolute;
	width: 26px;
	height: 26px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--wcsm-accent);
	border-radius: 50%;
	animation: wcsm-spin 0.7s linear infinite;
	z-index: 2;
}

.wcsm-photo__box.is-uploading .wcsm-photo__spinner {
	display: block;
}

.wcsm-photo__caption {
	display: block;
	text-align: center;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--wcsm-muted);
}

.wcsm-photo__error {
	display: block;
	text-align: center;
	min-height: 14px;
	font-size: 11px;
	color: var(--wcsm-danger);
	margin-top: 2px;
}

.wcsm-hint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--wcsm-accent-softer);
	border: 1px solid var(--wcsm-accent-soft);
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--wcsm-accent-dark);
	font-size: 12.5px;
	line-height: 1.5;
}

.wcsm-hint svg {
	flex: none;
	margin-top: 1px;
}

/* Step 2: measurements ------------------------------------------------- */

.wcsm-unit-toggle {
	display: inline-flex;
	background: #f0f0f0;
	border-radius: 999px;
	padding: 3px;
	flex: none;
}

.wcsm-unit-toggle__option {
	position: relative;
}

.wcsm-unit-toggle__option input {
	position: absolute;
	opacity: 0;
}

.wcsm-unit-toggle__option span {
	display: block;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wcsm-muted);
	cursor: pointer;
}

.wcsm-unit-toggle__option input:checked+span {
	background: var(--wcsm-accent);
	color: #fff;
}

.wcsm-form__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 18px;
}

.wcsm-field {
	display: flex;
	flex-direction: column;
}

.wcsm-field--full {
	grid-column: 1 / -1;
}

.wcsm-field label {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--wcsm-text);
}

.wcsm-field__req {
	color: var(--wcsm-danger);
}

.wcsm-field__input-wrap {
	position: relative;
}

.wcsm-field input[type="text"],
.wcsm-field input[type="number"],
.wcsm-field textarea {
	border: 1.5px solid var(--wcsm-border);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	width: 100%;
	background: var(--wcsm-surface);
	color: var(--wcsm-text);
}

.wcsm-field__input-wrap input[type="number"] {
	padding-right: 40px;
}

.wcsm-field__unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--wcsm-muted);
	pointer-events: none;
}

.wcsm-field input:focus,
.wcsm-field textarea:focus {
	outline: none;
	border-color: var(--wcsm-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.wcsm-field textarea {
	resize: vertical;
	min-height: 64px;
}

.wcsm-field__hint {
	display: block;
	font-size: 11.5px;
	color: var(--wcsm-muted);
	margin-top: 4px;
}

.wcsm-field__error {
	display: block;
	min-height: 15px;
	font-size: 11.5px;
	color: var(--wcsm-danger);
	margin-top: 4px;
}

.wcsm-field--invalid input,
.wcsm-field--invalid textarea {
	border-color: var(--wcsm-danger);
}

/* While a field is invalid, its error message takes over this space
   instead of stacking underneath the hint. */
.wcsm-field--invalid .wcsm-field__hint {
	display: none;
}

/* Step 3: fitting & type ------------------------------------------------ */

.wcsm-choice-group {
	margin-bottom: 26px;
}

.wcsm-choice-group:last-child {
	margin-bottom: 0;
}

.wcsm-choice-group__label {
	position: relative;
	margin: 0 0 12px;
	padding-left: 12px;
	font-size: 16px;
	font-weight: 800;
}

.wcsm-choice-group__label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	border-radius: 2px;
	background: var(--wcsm-accent);
}

/* Pills (fitting type) */

.wcsm-choice-group--pills .wcsm-choice-group__options {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.wcsm-pill {
	flex: 1 1 140px;
	text-align: center;
	padding: 13px 18px;
	border-radius: 999px;
	background: var(--wcsm-accent-softer);
	color: var(--wcsm-accent-dark);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background 0.15s ease, color 0.15s ease;
	position: relative;
}

.wcsm-pill input {
	position: absolute;
	opacity: 0;
}

.wcsm-pill.is-selected {
	background: var(--wcsm-accent);
	color: #fff;
}

/* Cards (shoulder type / body type) */

.wcsm-choice-group__options--cols-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.wcsm-choice-group__options--cols-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.wcsm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 10px 14px;
	border-radius: var(--wcsm-radius);
	background: var(--wcsm-accent-softer);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wcsm-card input {
	position: absolute;
	opacity: 0;
}

.wcsm-card__icon {
	width: 48px;
	height: 48px;
	color: var(--wcsm-accent-dark);
}

.wcsm-card__icon svg {
	width: 100%;
	height: 100%;
}

.wcsm-card__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wcsm-text);
}

.wcsm-card__badge {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wcsm-accent);
	color: #fff;
	font-size: 11px;
}

.wcsm-card.is-selected {
	background: var(--wcsm-accent-soft);
	border-color: var(--wcsm-accent);
}

.wcsm-card.is-selected .wcsm-card__badge {
	display: flex;
}

/* Footer actions -------------------------------------------------------- */

.wcsm-modal__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}

.wcsm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 0.15s ease, background 0.15s ease;
	font-family: inherit;
}

.wcsm-btn--secondary {
	background: #f0f0f0;
	color: #333;
}

.wcsm-btn--secondary:hover:not(:disabled) {
	background: #e2e2e2;
}

.wcsm-btn--secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wcsm-btn--primary {
	background: var(--wcsm-accent);
	color: #fff;
}

.wcsm-btn--primary:hover {
	opacity: 0.9;
}

.wcsm-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.wcsm-btn__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wcsm-spin 0.6s linear infinite;
}

.wcsm-btn--loading .wcsm-btn__spinner {
	display: inline-block;
}

.wcsm-btn--loading .wcsm-btn__arrow {
	display: none;
}

@keyframes wcsm-spin {
	to {
		transform: rotate(360deg);
	}
}

.wcsm-progress-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wcsm-progress-dots__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #e0e0e0;
	transition: width 0.15s ease, background 0.15s ease;
}

.wcsm-progress-dots__dot.is-active {
	width: 26px;
	background: var(--wcsm-accent);
}

/* Cart / Checkout "View details" link + read-only details popup --------- */

a.wcsm-view-details {
	color: var(--wcsm-accent-dark, #4a4a4a);
	text-decoration: underline;
	cursor: pointer;
}

.wcsm-modal__dialog--details {
	max-width: 640px;
}

.wcsm-details__section {
	margin-bottom: 24px;
}

.wcsm-details__section:last-child {
	margin-bottom: 0;
}

.wcsm-details__heading {
	margin: 0 0 14px;
	padding: 9px 14px;
	background: var(--wcsm-accent-softer, #f4f4f4);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wcsm-accent-dark, #4a4a4a);
}

/* Pose Photos - always a full-width, 3-column row. */
.wcsm-details__photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.wcsm-details__photo {
	margin: 0;
	text-align: center;
}

.wcsm-details__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--wcsm-border, #e2e2e2);
	background: var(--wcsm-surface, #fafafa);
}

.wcsm-details__photo figcaption {
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--wcsm-muted, #8a8a8a);
}

/* Measurements / Fit Preferences - three complete label+value fields per row. */
.wcsm-details__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 16px;
	padding: 0 14px;
}

.wcsm-details__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.wcsm-details__item-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--wcsm-muted, #8a8a8a);
}

.wcsm-details__item-value {
	font-size: 13.5px;
	color: var(--wcsm-text, #3a3a3a);
	word-break: break-word;
}

@media (max-width: 560px) {
	.wcsm-details__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {
	.wcsm-details__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-color-scheme: dark) {
	.wcsm-details__heading {
		background: #2a2a2a;
		color: #fff;
	}

	.wcsm-details__photo img {
		border-color: #3d3d3d;
		background: #262626;
	}
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 680px) {
	.wcsm-modal {
		padding: 0;
	}

	.wcsm-modal__dialog {
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		padding: 24px 18px;
	}

	.wcsm-step__label {
		display: none;
	}

	.wcsm-step__connector {
		margin: 0 8px;
	}

	.wcsm-photos {
		gap: 10px;
	}

	.wcsm-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.wcsm-choice-group__options--cols-3,
	.wcsm-choice-group__options--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.wcsm-modal__actions {
		flex-wrap: wrap;
	}

	.wcsm-progress-dots {
		order: 3;
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.wcsm-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Respect the shopper's OS-level dark mode without depending on any
   theme-specific dark-mode class. */
@media (prefers-color-scheme: dark) {
	.wcsm-modal__dialog {
		background: #1c1c1c;
		color: #eeeeee;
	}

	.wcsm-modal__title,
	.wcsm-choice-group__label,
	.wcsm-card__label {
		color: #fff;
	}

	.wcsm-modal__close {
		background: #2a2a2a;
		color: #ccc;
	}

	.wcsm-steps {
		border-bottom-color: #333333;
	}

	.wcsm-modal__actions {
		border-top-color: #333333;
	}

	.wcsm-field input[type="text"],
	.wcsm-field input[type="number"],
	.wcsm-field textarea {
		background: #262626;
		border-color: #3d3d3d;
		color: #eeeeee;
	}

	.wcsm-photo__box {
		background: #262626;
		border-color: #3d3d3d;
	}

	.wcsm-btn--secondary {
		background: #2a2a2a;
		color: #eee;
	}

	.wcsm-btn--secondary:hover:not(:disabled) {
		background: #333333;
	}

	.wcsm-pill,
	.wcsm-card {
		background: #2a2a2a;
	}

	.wcsm-unit-toggle {
		background: #2a2a2a;
	}
}