/**
 * Listing Submission — Modern Multi-step Form.
 */

.listora-submission {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	padding-block-start: var(--listora-space-6);
}

/* ─── Login Prompt ─── */

.listora-submission__login-prompt {
	text-align: center;
	padding: var(--listora-space-12);
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-xl);
	animation: listora-fadeInScale 0.4s ease;
}

.listora-submission__login-prompt svg {
	color: var(--listora-fg-faint);
	margin-block-end: var(--listora-space-4);
}

.listora-submission__login-prompt h2 {
	margin: 0 0 0.5rem;
}

.listora-submission__login-prompt p {
	color: var(--listora-fg-muted);
	margin: 0 0 var(--listora-space-4);
}

.listora-submission__login-buttons {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

/* ─── Connected Stepper Progress ─── */

.listora-submission__progress {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	margin-block-end: var(--listora-space-6);
	position: relative;
	padding: 0 var(--listora-space-4);
}

.listora-submission__step-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

/* Connecting line between dots */
.listora-submission__step-line {
	flex: 1;
	height: 2px;
	background: var(--listora-border);
	margin-top: 1.1rem;
	min-width: 2rem;
}

.listora-submission__step-line.is-completed {
	background: var(--listora-success);
}

/* Step dot — holds the step number (pending/current) OR a Lucide
 * check icon (completed). CSS swaps the two via `.is-completed`. */
.listora-submission__step-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	border: 2px solid var(--listora-border);
	background: var(--listora-bg-elevated);
	color: var(--listora-fg-faint);
	font-weight: var(--listora-weight-semibold);
	font-size: var(--listora-text-size-sm);
	transition: all var(--listora-transition-base);
	z-index: 1;
}

/* Number visible by default; check hidden. The completed state below
 * swaps them. Both elements always occupy the same flex centre slot,
 * so swapping is purely a display toggle (no layout shift). */
.listora-submission__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.listora-submission__step-check {
	display: none;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.listora-submission__step-indicator.is-completed .listora-submission__step-dot {
	border-color: var(--listora-success);
	background: var(--listora-success);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

/* On the completed state, hide the number + show the check icon. */
.listora-submission__step-indicator.is-completed .listora-submission__step-num {
	display: none;
}

.listora-submission__step-indicator.is-completed .listora-submission__step-check {
	display: inline-flex;
}

.listora-submission__step-indicator.is-current .listora-submission__step-dot {
	border-color: var(--listora-primary);
	background: var(--listora-bg-elevated);
	color: var(--listora-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--listora-primary) 15%, transparent);
}

.listora-submission__step-label {
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-faint);
	white-space: nowrap;
}

.listora-submission__step-indicator.is-current .listora-submission__step-label {
	color: var(--listora-primary);
	font-weight: var(--listora-weight-semibold);
}

.listora-submission__step-indicator.is-completed .listora-submission__step-label {
	color: var(--listora-success);
}

/* ─── Form ─── */

.listora-submission__form {
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-xl);
	box-shadow: var(--listora-shadow-sm);
	padding: var(--listora-space-8);
	position: relative;
	overflow: hidden;
}

/* Step transition container */
.listora-submission__step {
	animation: listora-fadeInUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Single-form layout mode (vs wizard) ──────────────────────────────
   When the block runs with layoutMode="single-form" (default in edit
   mode), every step renders stacked as a card instead of swapping in
   place. The stepper indicator + Back button are hidden; the Next /
   Submit button becomes the single Save action at the bottom. */
.listora-submission--single-form .listora-submission__stepper,
.listora-submission--single-form .listora-submission__nav-back {
	display: none;
}

.listora-submission--single-form .listora-submission__step {
	display: block;
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
	padding: var(--listora-space-5);
	margin-bottom: var(--listora-space-5);
	animation: none;
}

.listora-submission--single-form .listora-submission__step[hidden] {
	display: block; /* override the `hidden` attribute — single-form shows all steps */
}

.listora-submission--single-form .listora-submission__step h2 {
	margin-top: 0;
}

.listora-submission--single-form .listora-submission__nav {
	position: sticky;
	bottom: 0;
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-md);
	padding: var(--listora-space-4) var(--listora-space-5);
	margin-top: var(--listora-space-5);
	z-index: 5;
}

.listora-submission__step h2 {
	font-family: var(--listora-card-title-font);
	font-size: var(--listora-text-size-xl);
	font-weight: var(--listora-weight-bold);
	letter-spacing: -0.01em;
	margin: 0 0 var(--listora-space-2);
	color: var(--listora-fg-default);
}

.listora-submission__step-desc {
	color: var(--listora-fg-muted);
	margin: 0 0 var(--listora-space-4);
	font-size: var(--listora-card-meta-size);
}

/* ─── Fields ─── */

.listora-submission__field {
	margin-block-end: var(--listora-space-4);
}

.listora-submission__label {
	display: block;
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-default);
	margin-block-end: 0.3rem;
}

.listora-submission__label .required {
	color: var(--listora-danger);
}

.listora-submission__field-desc {
	display: block;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	margin-block-end: 0.3rem;
}

.listora-submission__textarea {
	resize: vertical;
	min-height: 100px;
}

/* Inline validation */
.listora-submission__field--valid .listora-input {
	border-color: var(--listora-success);
}

.listora-submission__field--valid::after {
	content: '';
	position: absolute;
	inset-inline-end: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}

.listora-submission__field--error .listora-input {
	border-color: var(--listora-danger);
	animation: listora-shake 0.3s ease;
}

.listora-submission__field--error .listora-submission__field-error {
	display: block;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-danger);
	margin-block-start: 0.25rem;
}

/* Fieldset */
.listora-submission__fieldset {
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-lg);
	padding: var(--listora-space-4);
	margin-block-end: var(--listora-space-4);
}

.listora-submission__fieldset-legend {
	font-weight: var(--listora-weight-semibold);
	font-size: 0.95rem;
	padding-inline: 0.5rem;
}

/* Checkbox group */
.listora-submission__checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.listora-submission__checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-text-size-base);
	cursor: pointer;
	color: var(--listora-fg-muted);
}

.listora-submission__checkbox-label input {
	accent-color: var(--listora-primary);
}

/* Price field */
.listora-submission__price-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.listora-submission__currency {
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-muted);
	font-size: var(--listora-text-size-base);
}

/* ─── Type Selection Grid ─── */

.listora-submission__type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--listora-space-4);
	margin-block: var(--listora-space-4) var(--listora-space-6);
}

.listora-submission__type-card {
	cursor: pointer;
}

.listora-submission__type-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.listora-submission__type-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--listora-space-2);
	padding: var(--listora-space-4) var(--listora-space-2);
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-lg);
	text-align: center;
	transition: border-color var(--listora-transition-fast), background var(--listora-transition-fast), transform var(--listora-transition-fast);
}

.listora-submission__type-card-inner:hover {
	border-color: var(--listora-type-color);
	transform: translateY(-2px);
}

.listora-submission__type-card input:checked + .listora-submission__type-card-inner {
	border-color: var(--listora-type-color);
	background: color-mix(in srgb, var(--listora-type-color) 8%, transparent);
}

.listora-submission__type-card.is-invalid .listora-submission__type-card-inner {
	border-color: var(--listora-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--listora-danger) 18%, transparent);
	animation: listora-shake 0.3s ease;
}

.listora-input.is-invalid {
	border-color: var(--listora-danger);
	animation: listora-shake 0.3s ease;
}

.listora-submission__type-grid + .listora-submission__field-error {
	display: block;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-danger);
	margin-block-start: 0.5rem;
}

.listora-submission__type-card svg {
	width: 2rem;
	height: 2rem;
	color: var(--listora-type-color);
	flex-shrink: 0;
}

.listora-submission__type-name {
	font-weight: var(--listora-weight-medium);
	font-size: var(--listora-text-size-sm);
}

/* ─── Upload Zone ─── */

.listora-submission__upload-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--listora-space-8);
	border: 2px dashed var(--listora-border);
	border-radius: var(--listora-radius-xl);
	cursor: pointer;
	color: var(--listora-fg-faint);
	text-align: center;
	transition: border-color var(--listora-transition-base), background var(--listora-transition-base), transform var(--listora-transition-fast);
}

.listora-submission__upload-zone:hover {
	border-color: var(--listora-primary);
	background: color-mix(in srgb, var(--listora-primary) 3%, transparent);
}

.listora-submission__upload-zone.is-dragging {
	border-style: solid;
	border-color: var(--listora-primary);
	background: color-mix(in srgb, var(--listora-primary) 6%, transparent);
	transform: scale(1.01);
}

.listora-submission__upload-zone--small {
	padding: var(--listora-space-4);
}

.listora-submission__upload-hint {
	font-size: var(--listora-text-size-xs);
}

.listora-submission__media-preview {
	max-width: 100%;
	border-radius: var(--listora-card-radius);
}

/*
 * Featured-image preview wrapper turns into a positioning context so the
 * remove (X) overlay can absolute-position over the top-right corner.
 * BC 9919930884.
 */
.listora-submission__upload-zone:has(.listora-submission__media-preview) {
	position: relative;
}

.listora-submission__gallery-thumb {
	width: 80px;
	height: 80px;
	border-radius: var(--listora-radius-md);
	overflow: hidden;
	position: relative;
}

/*
 * Remove (X) overlay for featured + gallery thumbs (BC 9919930884). Tap
 * target meets the 40px floor on hover/focus; idle state stays compact
 * so it doesn't compete with the image. ARIA label localizes via JS.
 */
.listora-submission__media-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--listora-transition-fast), background var(--listora-transition-fast), transform var(--listora-transition-fast);
}

.listora-submission__gallery-thumb:hover .listora-submission__media-remove,
.listora-submission__gallery-thumb:focus-within .listora-submission__media-remove,
.listora-submission__upload-zone:hover .listora-submission__media-remove,
.listora-submission__upload-zone:focus-within .listora-submission__media-remove,
.listora-submission__media-remove:focus-visible {
	opacity: 1;
}

.listora-submission__media-remove:hover {
	background: var(--listora-danger, #d33);
	transform: scale(1.06);
}

.listora-submission__media-remove:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	/* On touch devices the hover-reveal doesn't fire, so the remove
	 * control must be permanently visible AND meet the 40px tap-target
	 * floor (mobile UX audit 2026-05-25). */
	.listora-submission__media-remove {
		opacity: 1;
		min-width: var(--listora-tap-target, 40px);
		min-height: var(--listora-tap-target, 40px);
		width: var(--listora-tap-target, 40px);
		height: var(--listora-tap-target, 40px);
	}
}

.listora-submission__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listora-submission__preview-title {
	margin: 0 0 0.5rem;
}

.listora-submission__preview-desc {
	margin: 0.5rem 0;
	color: var(--listora-fg-muted);
}

/*
 * Preview-step media (featured image + gallery thumbnails) — card 9842552596.
 * Mirrors the published listing-detail layout so what the user sees in
 * Preview matches what their visitors will see.
 */
.listora-submission__preview-media {
	margin: var(--listora-space-4) 0;
}

.listora-submission__preview-featured img {
	width: 100%;
	max-height: 280px;
	object-fit: cover;
	border-radius: var(--listora-radius-md, 6px);
	display: block;
}

.listora-submission__preview-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.listora-submission__preview-gallery img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--listora-radius-sm, 4px);
}

.listora-submission__preview-list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.4rem 1rem;
	margin: var(--listora-space-4) 0 0;
	padding: 0;
	font-size: var(--listora-card-meta-size);
}

.listora-submission__preview-list dt {
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-muted);
	margin: 0;
}

.listora-submission__preview-list dd {
	margin: 0;
	color: var(--listora-fg-default);
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	.listora-submission__preview-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem 0;
	}

	.listora-submission__preview-list dd {
		margin-block-end: 0.5rem;
	}
}

.listora-submission__gallery-upload {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.listora-submission__gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.listora-submission__gallery-thumb {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--listora-radius-md);
	overflow: hidden;
}

.listora-submission__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listora-submission__gallery-thumb-delete {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	opacity: 0;
	transition: opacity var(--listora-transition-fast);
	cursor: pointer;
}

.listora-submission__gallery-thumb:hover .listora-submission__gallery-thumb-delete {
	opacity: 1;
}

/* ─── Social Links Builder ─── */

.listora-submission__social-links {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-submission__social-row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr);
	align-items: center;
	gap: var(--listora-space-3);
}

.listora-submission__social-label {
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-muted);
}

.listora-submission__social-input {
	min-width: 0;
}

@media (max-width: 640px) {
	.listora-submission__social-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--listora-space-1);
	}
}

/* ─── Hours Builder (Card-per-Day) ─── */

.listora-submission__hours-builder {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-submission__hours-card {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	padding: var(--listora-space-2) var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-md);
	transition: opacity var(--listora-transition-base);
}

.listora-submission__hours-card.is-closed {
	opacity: 0.4;
}

.listora-submission__hours-card.is-closed .listora-submission__hours-day {
	text-decoration: line-through;
}

.listora-submission__hours-day {
	width: 90px;
	font-weight: var(--listora-weight-medium);
	font-size: var(--listora-text-size-sm);
	flex-shrink: 0;
}

.listora-submission__hours-times {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	flex: 1;
}

.listora-submission__hours-times input[type="time"] {
	width: 110px;
}

/*
 * Time-picker affordance — wraps each <input type="time"> with a clock icon
 * so the picker is visually obvious cross-browser. Firefox renders type="time"
 * as a numeric spinner without a clock chrome, so without this wrapper users
 * miss that the field IS a picker (card 9856828615).
 */
.listora-submission__hours-input-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-inline-start: 0.5rem;
	border: var(--listora-input-border);
	border-radius: var(--listora-radius-md, 6px);
	background: var(--listora-input-bg, var(--listora-bg-elevated));
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.listora-submission__hours-input-wrap:focus-within {
	border-color: var(--listora-input-focus-border);
	box-shadow: var(--listora-focus-ring);
}

.listora-submission__hours-icon {
	display: inline-flex;
	align-items: center;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
	pointer-events: none;
}

.listora-submission__hours-input-wrap .listora-submission__hours-input {
	border: 0;
	background: transparent;
	box-shadow: none;
	padding-inline: 0.25rem;
}

.listora-submission__hours-input-wrap .listora-submission__hours-input:focus {
	box-shadow: none;
	outline: 0;
}

.listora-submission__hours-sep {
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
}

.listora-submission__hours-toggle {
	margin-inline-start: auto;
}

/* ─── Map Picker ─── */

.listora-submission__map-field .listora-submission__map-picker {
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
	overflow: hidden;
}

/* ─── Preview ─── */

.listora-submission__preview-card {
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
	padding: var(--listora-space-4);
	margin-block-end: var(--listora-space-4);
	background: var(--listora-bg-surface);
}

/* Terms */
.listora-submission__terms {
	margin-block-start: var(--listora-space-4);
}

.listora-submission__terms a {
	color: var(--listora-primary);
}

/* ─── Sticky Navigation Footer ─── */

.listora-submission__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-start: var(--listora-space-6);
	padding-block-start: var(--listora-space-2);
}

.listora-submission__nav-right {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/*
 * Hard guard against theme/WooCommerce stylesheets that override the HTML
 * `[hidden]` attribute (e.g. `button[type="submit"] { display: inline-block }`).
 * `.is-hidden` is the source of truth for nav button visibility.
 */
.listora-submission__nav .listora-btn.is-hidden,
.listora-submission .listora-btn.is-hidden {
	display: none !important;
}

/* Auto-save indicator */
.listora-submission__autosave {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	animation: listora-fadeIn 0.3s ease;
}

.listora-submission__autosave--saving {
	color: var(--listora-primary);
}

.listora-submission__autosave--saved {
	color: var(--listora-success);
}

/* ─── Success ─── */

.listora-submission__success {
	text-align: center;
	padding: var(--listora-space-12);
	animation: listora-fadeInScale 0.4s ease;
}

.listora-submission__success-icon {
	color: var(--listora-success);
}

.listora-submission__success h2 {
	margin: 0 0 0.5rem;
}

.listora-submission__success p {
	color: var(--listora-fg-muted);
	margin: 0 0 var(--listora-space-4);
}

.listora-submission__success-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

/* ─── Error ─── */

.listora-submission__error {
	padding: var(--listora-space-2) var(--listora-space-4);
	background: color-mix(in srgb, var(--listora-danger) 8%, transparent);
	color: var(--listora-danger);
	border-radius: var(--listora-radius-md);
	font-size: var(--listora-card-meta-size);
	margin-block-start: var(--listora-space-2);
}

/* ─── Mobile ─── */

@media (max-width: 767px) {
	.listora-submission__form {
		padding: var(--listora-space-4);
	}

	.listora-submission__type-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.listora-submission__hours-card {
		flex-wrap: wrap;
	}

	.listora-submission__hours-day {
		width: 100%;
	}

	.listora-submission__nav {
		flex-wrap: wrap;
		gap: var(--listora-space-2);
	}

	.listora-submission__step-label {
		display: none;
	}
}

@media (min-width: 768px) {
	.listora-submission__step-label {
		display: block;
	}
}

/* ─── Guest Registration ─── */

.listora-submission__guest-register {
	background: var(--listora-bg-elevated);
	border: 2px solid var(--listora-accent, var(--listora-info));
	border-radius: var(--listora-radius-lg);
	padding: var(--listora-space-6);
	margin-block-end: var(--listora-space-6);
}

.listora-submission__guest-register h3 {
	margin: 0 0 var(--listora-space-1);
	font-size: 1.125rem;
}

.listora-submission__guest-desc {
	color: var(--listora-fg-muted);
	margin: 0 0 var(--listora-space-4);
	font-size: 0.875rem;
}

.listora-submission__guest-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--listora-space-4);
}

.listora-submission__guest-notice {
	color: var(--listora-fg-faint);
	font-size: 0.8125rem;
	margin: var(--listora-space-2) 0 0;
}

@media (max-width: 767px) {
	.listora-submission__guest-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─── Conditional Fields ─── */

.listora-submission__field--conditional-hidden {
	display: none !important;
}

/* ─── CAPTCHA Widget ─── */

.listora-captcha-widget {
	margin-block: var(--listora-space-4);
}

/* ─── Credit Cost Banner (Preview Step) ─── */

.listora-submission__credit-banner {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	padding: var(--listora-space-4) var(--listora-space-6);
	background: color-mix(in srgb, var(--listora-primary) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--listora-primary) 20%, transparent);
	border-radius: var(--listora-radius-lg);
	margin-block-end: var(--listora-space-4);
	color: var(--listora-fg-default);
}

.listora-submission__credit-banner[hidden] {
	display: none;
}

.listora-submission__credit-banner--insufficient {
	background: color-mix(in srgb, var(--listora-danger) 8%, transparent);
	border-color: color-mix(in srgb, var(--listora-danger) 30%, transparent);
}

.listora-submission__credit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--listora-primary) 15%, transparent);
	color: var(--listora-primary);
}

.listora-submission__credit-banner--insufficient .listora-submission__credit-icon {
	background: color-mix(in srgb, var(--listora-danger) 15%, transparent);
	color: var(--listora-danger);
}

.listora-submission__credit-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.listora-submission__credit-info p {
	margin: 0;
	font-size: var(--listora-text-size-sm);
	line-height: 1.4;
}

.listora-submission__credit-cost-line {
	font-weight: var(--listora-weight-medium);
}

.listora-submission__credit-cost-line strong,
.listora-submission__credit-balance {
	font-weight: var(--listora-weight-semibold);
}

.listora-submission__credit-balance-line {
	color: var(--listora-fg-muted);
}

.listora-submission__credit-remaining {
	color: var(--listora-fg-faint);
	font-size: var(--listora-text-size-xs) !important;
}

.listora-submission__credit-remaining[hidden] {
	display: none;
}

.listora-submission__credit-buy {
	flex-shrink: 0;
	align-self: center;
}

.listora-submission__credit-buy[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.listora-submission__credit-banner {
		flex-wrap: wrap;
		padding: var(--listora-space-2) var(--listora-space-4);
		gap: var(--listora-space-2);
	}

	.listora-submission__credit-info {
		flex: 1 1 auto;
		min-width: 0;
	}

	.listora-submission__credit-buy {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* ─── Duplicate Review Step ─── */

.listora-submission__duplicate-review {
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-xl);
	padding: var(--listora-space-8);
	margin-block-start: var(--listora-space-6);
	animation: listora-fadeInScale 0.3s ease;
}

.listora-submission__duplicate-review[hidden] {
	display: none;
}

.listora-submission__duplicate-review-heading {
	margin: 0 0 var(--listora-space-1);
	font-size: var(--listora-text-xl, 1.4rem);
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-text-primary);
}

.listora-submission__duplicate-review-intro {
	margin: 0 0 var(--listora-space-4);
	color: var(--listora-fg-muted);
}

.listora-submission__duplicate-list {
	list-style: none;
	margin: 0 0 var(--listora-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-submission__duplicate-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--listora-space-4);
	padding: var(--listora-space-4);
	background: var(--listora-bg-surface, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-lg, var(--listora-card-radius));
	transition: border-color var(--listora-transition-base), box-shadow var(--listora-transition-base), transform var(--listora-transition-base);
}

.listora-submission__duplicate-card:hover,
.listora-submission__duplicate-card:focus-within {
	border-color: var(--listora-accent, var(--listora-primary));
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.listora-submission__duplicate-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.listora-submission__duplicate-title {
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-text-primary);
	text-decoration: none;
	font-size: var(--listora-text-base, 1rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listora-submission__duplicate-title:hover,
.listora-submission__duplicate-title:focus {
	color: var(--listora-accent, var(--listora-primary));
	text-decoration: underline;
}

.listora-submission__duplicate-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: var(--listora-text-sm, 0.875rem);
	color: var(--listora-fg-muted);
}

.listora-submission__duplicate-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	font-size: 0.78rem;
	font-weight: var(--listora-weight-semibold, 600);
	letter-spacing: 0.01em;
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: var(--listora-fg-faint, var(--listora-fg-faint));
	white-space: nowrap;
}

.listora-submission__duplicate-badge--high {
	background: var(--listora-danger, var(--listora-danger));
}

.listora-submission__duplicate-badge--medium {
	background: var(--listora-warning, var(--listora-rating));
}

.listora-submission__duplicate-badge--low {
	background: var(--listora-fg-faint, var(--listora-fg-faint));
}

.listora-submission__duplicate-distance {
	color: var(--listora-fg-faint);
}

.listora-submission__duplicate-view {
	flex: 0 0 auto;
}

.listora-submission__duplicate-more {
	margin: 0 0 var(--listora-space-4);
	color: var(--listora-fg-faint);
	font-size: var(--listora-text-size-sm);
	font-style: italic;
}

.listora-submission__duplicate-review-notice {
	background: var(--listora-info-bg, rgba(0, 102, 204, 0.06));
	border-inline-start: 3px solid var(--listora-accent, var(--listora-primary));
	padding: var(--listora-space-2) var(--listora-space-4);
	border-radius: var(--listora-radius-md);
	margin-block: var(--listora-space-4);
	color: var(--listora-text-primary);
	font-size: var(--listora-text-size-sm);
}

.listora-submission__field-hint {
	font-weight: var(--listora-weight-normal, 400);
	color: var(--listora-fg-faint);
	font-size: 0.85em;
	margin-inline-start: 0.25em;
}

.listora-submission__duplicate-review-error {
	margin-block: var(--listora-space-2);
	padding: var(--listora-space-2) var(--listora-space-4);
	background: rgba(217, 45, 32, 0.08);
	border: 1px solid var(--listora-danger, var(--listora-danger));
	border-radius: var(--listora-radius-md);
	color: var(--listora-danger, var(--listora-danger));
	font-size: var(--listora-text-size-sm);
}

.listora-submission__duplicate-review-actions {
	display: flex;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-4);
	justify-content: flex-end;
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.listora-submission__duplicate-review {
		padding: var(--listora-space-6);
	}
}

@media (max-width: 767px) {
	.listora-submission__duplicate-review {
		padding: var(--listora-space-4);
	}

	.listora-submission__duplicate-card {
		flex-direction: column;
		align-items: stretch;
		gap: var(--listora-space-2);
	}

	.listora-submission__duplicate-view {
		align-self: flex-start;
	}

	.listora-submission__duplicate-review-actions {
		flex-direction: column-reverse;
	}

	.listora-submission__duplicate-review-actions .listora-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.listora-submission__duplicate-review-heading {
		font-size: var(--listora-text-lg, 1.15rem);
	}

	.listora-submission__duplicate-meta {
		font-size: 0.8rem;
	}
}

/* ─── Verify-email success card ─── */
.listora-submission__verify-email {
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-border-default));
	border-radius: var(--listora-card-radius, 12px);
	padding: 2.5rem 2rem;
	text-align: center;
	max-width: 520px;
	margin: 1.5rem auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.listora-submission__verify-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--listora-success, var(--listora-success));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1;
}

.listora-submission__verify-heading {
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
}

.listora-submission__verify-body {
	margin: 0 0 1rem;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text));
	font-size: 1rem;
	line-height: 1.6;
}

.listora-submission__verify-note {
	margin: 0 0 1.5rem;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-disabled));
	font-size: 0.9rem;
	line-height: 1.5;
}

.listora-submission__verify-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
}

.listora-submission__verify-actions .listora-btn {
	min-width: 180px;
}

.listora-submission__verify-edit {
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-disabled));
	font-size: 0.9rem;
	text-decoration: underline;
}

.listora-submission__verify-edit:hover {
	color: var(--listora-primary, var(--listora-primary));
}

.listora-submission__verify-status {
	margin: 1rem 0 0;
	padding: 0.6rem 0.9rem;
	background: var(--listora-bg-alt, var(--listora-admin-bg-tint));
	border-radius: 6px;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text));
	font-size: 0.9rem;
}

@media (max-width: 480px) {
	.listora-submission__verify-email {
		padding: 2rem 1.25rem;
	}

	.listora-submission__verify-heading {
		font-size: 1.2rem;
	}
}

/* ─── Inline-emit replacements (Rule 11 — no inline style="") ──────── */

.listora-submission__map-picker {
	height: 250px;
	margin-top: 0.5rem;
	border-radius: var(--listora-card-radius);
}

.listora-submission__map-coords {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.listora-submission__hours-input {
	width: auto;
}

/* Honeypot anti-spam field — visually off-screen (moved out of inline style). */
.listora-honeypot {
	position: absolute;
	inset-inline-start: -9999px;
}

/* Media step previews — moved out of inline styles in step-media.php. */
.listora-submission__media-preview {
	max-width: 100%;
	border-radius: var(--listora-card-radius);
}

.listora-submission__gallery-thumb {
	position: relative;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: var(--listora-radius-md);
}

.listora-submission__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}