/**
 * Watchgauge HQ Part Exchange — frontend styles.
 * Colour/type variables are declared once at the top: adjust these to match
 * the exact theme tokens once installed (current values approximate the
 * black / heritage-gold Watchgauge HQ identity).
 */
.wgpe {
	--wgpe-ink: #111111;
	--wgpe-ink-soft: #4a4a48;
	--wgpe-paper: #ffffff;
	--wgpe-cream: #f6f4ef;
	--wgpe-line: #e4e1d8;
	--wgpe-gold: #b8912f;
	--wgpe-gold-soft: #f1e6c9;
	--wgpe-danger: #a3312a;
	--wgpe-radius: 2px;
	--wgpe-font-display: Georgia, 'Times New Roman', serif;
	--wgpe-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	max-width: 820px;
	margin: 0 auto;
	font-family: var(--wgpe-font-body);
	color: var(--wgpe-ink);
}

.wgpe * { box-sizing: border-box; }

.wgpe-panel { display: none; }
.wgpe[data-state="intro"] .wgpe-panel--intro { display: block; }
.wgpe[data-state="wizard"] .wgpe-panel--wizard { display: block; }
.wgpe[data-state="confirmation"] .wgpe-panel--confirmation { display: block; }

/* ---------- Intro ---------- */
.wgpe-panel--intro { text-align: center; padding: 56px 24px; }
.wgpe-eyebrow { display: block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--wgpe-gold); margin-bottom: 12px; }
.wgpe-heading { font-family: var(--wgpe-font-display); font-weight: 400; font-size: 32px; line-height: 1.25; margin: 0 0 16px; }
.wgpe-lede { font-size: 16px; line-height: 1.7; color: var(--wgpe-ink-soft); max-width: 560px; margin: 0 auto 28px; }
.wgpe-steps-preview { list-style: none; margin: 0 auto 32px; padding: 0; max-width: 420px; text-align: left; }
.wgpe-steps-preview li { font-size: 14px; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--wgpe-line); position: relative; color: var(--wgpe-ink-soft); }
.wgpe-steps-preview li:last-child { border-bottom: none; }
.wgpe-steps-preview li::before { content: "—"; position: absolute; left: 0; color: var(--wgpe-gold); }
.wgpe-privacy-note { margin-top: 20px; font-size: 12px; color: #8a8a86; }
.wgpe-privacy-note a { color: var(--wgpe-ink); }

/* ---------- Buttons ---------- */
.wgpe-btn { font-family: var(--wgpe-font-body); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 14px 30px; border-radius: var(--wgpe-radius); border: 1px solid transparent; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; text-decoration: none; display: inline-block; }
.wgpe-btn:focus-visible { outline: 2px solid var(--wgpe-gold); outline-offset: 2px; }
.wgpe-btn--primary { background: var(--wgpe-ink); color: var(--wgpe-gold-soft); }
.wgpe-btn--primary:hover { opacity: .88; }
.wgpe-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.wgpe-btn--ghost { background: transparent; color: var(--wgpe-ink); border-color: var(--wgpe-line); }
.wgpe-btn--ghost:hover { border-color: var(--wgpe-ink); }

/* ---------- Progress ---------- */
.wgpe-progress { margin-bottom: 32px; overflow-x: auto; }
.wgpe-progress ol { list-style: none; display: flex; margin: 0; padding: 0; border-bottom: 1px solid var(--wgpe-line); min-width: 560px; }
.wgpe-progress li { flex: 1; text-align: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #b3b0a8; padding: 0 4px 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.wgpe-progress li.is-active { color: var(--wgpe-ink); border-bottom-color: var(--wgpe-gold); }
.wgpe-progress li.is-done { color: var(--wgpe-gold); }
.wgpe-progress-index { display: none; }

/* ---------- Form structure ---------- */
.wgpe-tab { display: none; border: none; margin: 0; padding: 0; }
.wgpe-tab.is-active { display: block; animation: wgpe-fade .2s ease; }
@keyframes wgpe-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.wgpe-tab-title { font-family: var(--wgpe-font-display); font-size: 22px; font-weight: 400; margin: 0 0 20px; padding: 0; }
.wgpe-tab-intro { font-size: 14px; color: var(--wgpe-ink-soft); margin: -8px 0 20px; line-height: 1.6; }

.wgpe-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wgpe-field { margin-bottom: 20px; }
.wgpe-field label, .wgpe-field-label { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--wgpe-ink-soft); margin-bottom: 8px; }
.req { color: var(--wgpe-danger); }

.wgpe input[type="text"], .wgpe input[type="email"], .wgpe input[type="tel"], .wgpe input[type="number"], .wgpe input[type="search"], .wgpe select, .wgpe textarea {
	width: 100%; font-family: var(--wgpe-font-body); font-size: 15px; padding: 13px 14px; border: 1px solid var(--wgpe-line); border-radius: var(--wgpe-radius); background: var(--wgpe-paper); color: var(--wgpe-ink);
}
.wgpe input:focus, .wgpe select:focus, .wgpe textarea:focus { outline: none; border-color: var(--wgpe-gold); box-shadow: 0 0 0 3px var(--wgpe-gold-soft); }
.wgpe textarea { resize: vertical; }
.wgpe-input-prefix { display: flex; align-items: center; border: 1px solid var(--wgpe-line); border-radius: var(--wgpe-radius); overflow: hidden; }
.wgpe-input-prefix span { padding: 0 12px; color: var(--wgpe-ink-soft); background: var(--wgpe-cream); align-self: stretch; display: flex; align-items: center; }
.wgpe-input-prefix input { border: none; }

.wgpe-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Segmented control (condition) ---------- */
.wgpe-segmented { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.wgpe-segment { border: 1px solid var(--wgpe-line); border-radius: var(--wgpe-radius); padding: 14px 10px; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.wgpe-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wgpe-segment strong { display: block; font-size: 13px; margin-bottom: 4px; }
.wgpe-segment small { display: block; font-size: 11px; color: var(--wgpe-ink-soft); line-height: 1.4; }
.wgpe-segment:has(input:checked) { border-color: var(--wgpe-gold); background: var(--wgpe-gold-soft); }
.wgpe-segment.is-checked { border-color: var(--wgpe-gold); background: var(--wgpe-gold-soft); } /* JS-applied fallback for browsers without :has() support */
.wgpe-segment:has(input:focus-visible) { outline: 2px solid var(--wgpe-gold); outline-offset: 2px; }

/* ---------- Checkboxes / radios ---------- */
.wgpe-checkboxes, .wgpe-radio-row { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.wgpe-checkboxes label, .wgpe-radio-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.wgpe-consent { border-top: 1px solid var(--wgpe-line); padding-top: 20px; margin-top: 8px; }
.wgpe-consent label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--wgpe-ink-soft); margin-bottom: 14px; cursor: pointer; }
.wgpe-consent input { margin-top: 3px; }

/* ---------- Dropzone / photos ---------- */
.wgpe-dropzone { border: 1px dashed var(--wgpe-line); border-radius: var(--wgpe-radius); padding: 44px 20px; text-align: center; cursor: pointer; color: var(--wgpe-ink-soft); transition: border-color .15s ease, background-color .15s ease; }
.wgpe-dropzone:hover, .wgpe-dropzone.is-dragover { border-color: var(--wgpe-gold); background: var(--wgpe-cream); }
.wgpe-dropzone svg { color: var(--wgpe-gold); margin-bottom: 10px; }
.wgpe-dropzone p { margin: 0 0 4px; font-size: 14px; color: var(--wgpe-ink); }
.wgpe-dropzone small { font-size: 12px; }

.wgpe-photo-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; }
.wgpe-photo-grid li { position: relative; aspect-ratio: 1; border-radius: var(--wgpe-radius); overflow: hidden; background: var(--wgpe-cream); border: 1px solid var(--wgpe-line); }
.wgpe-photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wgpe-photo-grid .wgpe-photo-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(17,17,17,.75); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; }
.wgpe-photo-grid .wgpe-photo-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); font-size: 11px; }
.wgpe-photo-grid .wgpe-photo-status.is-error { color: var(--wgpe-danger); background: rgba(255,255,255,.9); padding: 4px; text-align: center; }

/* ---------- Stock selection ---------- */
.wgpe-stock-controls { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.wgpe-search { position: relative; flex: 1; min-width: 220px; }
.wgpe-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--wgpe-ink-soft); }
.wgpe-search input { padding-left: 38px; }
.wgpe-stock-controls select { max-width: 200px; }

.wgpe-stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; min-height: 80px; }
.wgpe-stock-card { border: 1px solid var(--wgpe-line); border-radius: var(--wgpe-radius); overflow: hidden; cursor: pointer; background: var(--wgpe-paper); transition: border-color .15s ease, box-shadow .15s ease; position: relative; }
.wgpe-stock-card:hover { border-color: var(--wgpe-gold); }
.wgpe-stock-card.is-selected { border-color: var(--wgpe-gold); box-shadow: 0 0 0 2px var(--wgpe-gold); }
.wgpe-stock-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--wgpe-cream); }
.wgpe-stock-card-body { padding: 12px 14px 14px; }
.wgpe-stock-card-body .brand { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--wgpe-gold); }
.wgpe-stock-card-body .name { font-size: 14px; margin: 4px 0; line-height: 1.4; }
.wgpe-stock-card-body .price { font-size: 14px; font-weight: 600; }
.wgpe-stock-card .wgpe-selected-badge { position: absolute; top: 10px; right: 10px; background: var(--wgpe-ink); color: var(--wgpe-gold-soft); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; border-radius: 12px; display: none; }
.wgpe-stock-card.is-selected .wgpe-selected-badge { display: block; }
.wgpe-load-more { display: block; margin: 20px auto 0; }
.wgpe-stock-empty, .wgpe-stock-loading { grid-column: 1/-1; text-align: center; padding: 24px; color: var(--wgpe-ink-soft); font-size: 14px; }
.wgpe-field-error { color: var(--wgpe-danger); font-size: 13px; margin-top: 10px; }

/* ---------- Review ---------- */
.wgpe-review-section { border-bottom: 1px solid var(--wgpe-line); padding: 20px 0; }
.wgpe-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wgpe-review-head h3 { font-family: var(--wgpe-font-display); font-weight: 400; font-size: 17px; margin: 0; }
.wgpe-edit-link { background: none; border: none; color: var(--wgpe-gold); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; padding: 4px; }
.wgpe-review-section dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.wgpe-review-section dt { color: var(--wgpe-ink-soft); }
.wgpe-review-section dd { margin: 0; }
.wgpe-review-photos { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wgpe-review-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--wgpe-radius); border: 1px solid var(--wgpe-line); }

/* ---------- Nav / errors ---------- */
.wgpe-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.wgpe-form-error { background: #fbeceb; border: 1px solid var(--wgpe-danger); color: var(--wgpe-danger); font-size: 14px; padding: 12px 16px; border-radius: var(--wgpe-radius); margin-bottom: 20px; }
input:invalid, select:invalid, textarea:invalid { box-shadow: none; }
.wgpe-field.has-error input, .wgpe-field.has-error select, .wgpe-field.has-error textarea { border-color: var(--wgpe-danger); }

/* ---------- Confirmation ---------- */
.wgpe-panel--confirmation { text-align: center; padding: 64px 24px; }
.wgpe-confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--wgpe-gold-soft); color: var(--wgpe-gold); font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }

/* ---------- Modal trigger + overlay ---------- */
.wgpe-trigger-btn {
	font-family: var(--wgpe-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
	font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
	padding: 14px 30px; border-radius: 2px; border: 1px solid #111111;
	background: #111111; color: #f1e6c9; cursor: pointer;
}
.wgpe-trigger-btn:hover { opacity: .88; }
.wgpe-trigger-btn:focus-visible { outline: 2px solid #b8912f; outline-offset: 2px; }

.wgpe-modal-overlay {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(17, 17, 17, .6);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 40px 16px; overflow-y: auto;
}
.wgpe-modal-overlay[hidden] { display: none; }
body.wgpe-modal-open { overflow: hidden; }

.wgpe-modal-dialog {
	position: relative; background: #ffffff; width: 100%; max-width: 900px;
	border-radius: 4px; padding: 48px 40px 40px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
	animation: wgpe-modal-in .18s ease;
}
@keyframes wgpe-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.wgpe-modal-close {
	position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
	border-radius: 50%; border: 1px solid #e4e1d8; background: #ffffff;
	font-size: 20px; line-height: 1; cursor: pointer; color: #111111;
}
.wgpe-modal-close:hover { background: #f6f4ef; }
.wgpe-modal-close:focus-visible { outline: 2px solid #b8912f; outline-offset: 2px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

@media (max-width: 640px) {
	.wgpe-modal-overlay { padding: 0; }
	.wgpe-modal-dialog { max-width: none; min-height: 100vh; border-radius: 0; padding: 48px 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wgpe-modal-dialog { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	/* Scale text and spacing down a touch for phones. */
	.wgpe-heading { font-size: 22px; }
	.wgpe-lede { font-size: 14px; }
	.wgpe-tab-title { font-size: 18px; margin-bottom: 14px; }
	.wgpe-tab-intro { font-size: 13px; }
	.wgpe-field { margin-bottom: 16px; }
	.wgpe-field label, .wgpe-field-label { font-size: 11px; margin-bottom: 6px; }
	.wgpe input[type="text"], .wgpe input[type="email"], .wgpe input[type="tel"], .wgpe input[type="number"], .wgpe input[type="search"], .wgpe select, .wgpe textarea { font-size: 14px; padding: 11px 12px; }
	.wgpe-btn { padding: 12px 20px; font-size: 12px; }
	.wgpe-segmented { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.wgpe-segment { padding: 10px 8px; }
	.wgpe-segment strong { font-size: 12px; }
	.wgpe-segment small { font-size: 10px; }
	.wgpe-progress li { font-size: 10px; padding-bottom: 10px; }
	.wgpe-stock-card-body { padding: 10px 12px 12px; }
	.wgpe-stock-card-body .name { font-size: 13px; }

	.wgpe-grid-2 { grid-template-columns: 1fr; gap: 0; }
	.wgpe-review-section dl { grid-template-columns: 1fr; }
	.wgpe-progress li span.wgpe-progress-index { display: none; }
	.wgpe-btn { width: 100%; text-align: center; }

	/* Keep Back/Continue reachable while scrolling long steps (photos,
	   stock selection) instead of them sitting below the fold. Sticks to
	   the bottom of the screen once you scroll to it, unsticks once the
	   step's content has fully scrolled past. */
	.wgpe-nav {
		position: sticky;
		bottom: 0;
		flex-direction: column-reverse;
		gap: 8px;
		margin: 20px -16px 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--wgpe-paper);
		border-top: 1px solid var(--wgpe-line);
		z-index: 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wgpe-tab.is-active { animation: none; }
}