/**
 * List Your Property — submission form.
 *
 * Adds only what the feature needs. Everything else — type, colour, buttons,
 * inputs, alerts, spacing — comes from the theme's existing tokens and .tw-*
 * classes, so the form is part of the site rather than a widget dropped on it.
 * The fallbacks in var() keep it presentable if it is ever rendered outside
 * the Toyad Homes theme.
 */

.toyad-submit {
	--toyad-line: var(--tw-line, rgba(18, 49, 42, .12));
	--toyad-brass: var(--tw-brass, #c2a15a);
	--toyad-ink: var(--tw-ink, #12312a);
}

/* ---------- Steps ---------- */

.toyad-submit__step {
	border: 0;
	border-top: 1px solid var(--toyad-line);
	margin: 0;
	padding: var(--tw-5, 2rem) 0 0;
}

.toyad-submit__step:first-of-type { border-top: 0; padding-top: 0; }
.toyad-submit__step + .toyad-submit__step { margin-top: var(--tw-5, 2rem); }

.toyad-submit__step > legend {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 0;
	margin-bottom: var(--tw-4, 1.5rem);
	font-family: var(--tw-display, Georgia, serif);
	font-size: var(--tw-t-2, 1.5rem);
	font-weight: 500;
	color: var(--toyad-ink);
}

.toyad-submit__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--toyad-ink);
	color: var(--tw-bone, #f4f0e6);
	font-family: var(--tw-sans, sans-serif);
	font-size: .78rem;
	font-weight: 800;
}

.toyad-submit__note {
	margin: 0 0 var(--tw-3, 1rem);
	font-size: var(--tw-t--1, .85rem);
	color: var(--tw-muted, #6b7772);
	max-width: 62ch;
}

.toyad-submit__after {
	display: block;
	margin-top: var(--tw-2, .75rem);
	font-size: var(--tw-t--1, .85rem);
	color: var(--tw-muted, #6b7772);
}

.tw-field__hint {
	font-size: .72rem;
	color: var(--tw-muted, #6b7772);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.toyad-submit__inline {
	display: inline-flex !important;
	align-items: center;
	gap: .4em;
	font-size: .72rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-weight: 500 !important;
	color: var(--tw-muted, #6b7772) !important;
}

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

.toyad-submit__notice {
	display: grid;
	gap: .35rem;
	padding: var(--tw-4, 1.5rem);
}

.toyad-submit__notice strong { font-size: var(--tw-t-1, 1.15rem); }
.toyad-submit__resend { margin-top: var(--tw-4, 1.5rem); max-width: 420px; }

/* ---------- Amenity chips ---------- */

.toyad-submit__amenities { margin-top: var(--tw-4, 1.5rem); }

.toyad-submit__label {
	display: block;
	margin-bottom: .6rem;
	font-size: var(--tw-t--2, .72rem);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tw-muted, #6b7772);
}

.toyad-submit__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.toyad-chip { position: relative; }
.toyad-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.toyad-chip span {
	display: inline-block;
	padding: .42rem .85rem;
	border: 1px solid var(--toyad-line);
	border-radius: 999px;
	background: #fff;
	font-size: .8rem;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.toyad-chip:hover span { border-color: var(--toyad-brass); }

.toyad-chip input:checked + span {
	background: var(--toyad-ink);
	border-color: var(--toyad-ink);
	color: var(--tw-bone, #f4f0e6);
}

.toyad-chip input:focus-visible + span {
	outline: 2px solid var(--toyad-brass);
	outline-offset: 2px;
}

/* ---------- Uploader ---------- */

.toyad-up__drop {
	display: grid;
	place-items: center;
	gap: .35rem;
	padding: var(--tw-5, 2rem);
	border: 1.5px dashed var(--toyad-line);
	border-radius: var(--tw-r, 6px);
	background: rgba(255, 255, 255, .6);
	text-align: center;
	cursor: pointer;
	color: var(--tw-muted, #6b7772);
	transition: border-color .18s ease, background-color .18s ease;
}

.toyad-up__drop:hover,
.toyad-up__drop:focus-visible,
.toyad-up__drop.is-over {
	border-color: var(--toyad-brass);
	background: rgba(194, 161, 90, .07);
	outline: none;
}

.toyad-up__drop svg { color: var(--toyad-brass); }
.toyad-up__drop strong { color: var(--toyad-ink); font-size: var(--tw-t-0, 1rem); }
.toyad-up__drop span { font-size: .78rem; }

.toyad-up__list {
	list-style: none;
	margin: var(--tw-3, 1rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--tw-2, .75rem);
}

.toyad-up__item {
	position: relative;
	border: 1px solid var(--toyad-line);
	border-radius: var(--tw-r, 6px);
	background: #fff;
	overflow: hidden;
	cursor: grab;
}

.toyad-up__item.is-main { border-color: var(--toyad-brass); box-shadow: 0 0 0 1px var(--toyad-brass) inset; }
.toyad-up__item.is-dragging { opacity: .45; }

.toyad-up__frame { position: relative; aspect-ratio: 4 / 3; background: #eceae3; }
.toyad-up__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.toyad-up__main {
	position: absolute;
	left: 6px;
	top: 6px;
	padding: .12rem .5rem;
	border-radius: 999px;
	background: var(--toyad-brass);
	color: #0b211c;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.toyad-up__bar {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 22px;
	height: 4px;
	border-radius: 999px;
	background: rgba(11, 33, 28, .35);
	overflow: hidden;
}

.toyad-up__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--toyad-brass);
	transition: width .18s ease;
}

.toyad-up__state {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	text-align: center;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.toyad-up__state--bad {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	color: #fff;
	background: rgba(160, 50, 30, .85);
	width: 34px;
	height: 34px;
	line-height: 34px;
	margin: 0 auto;
	border-radius: 50%;
	left: 0;
	right: 0;
}

.toyad-up__name {
	display: block;
	padding: .4rem .5rem 0;
	font-size: .66rem;
	color: var(--tw-muted, #6b7772);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.toyad-up__tools { display: flex; gap: 2px; padding: .3rem .35rem .4rem; }

.toyad-up__btn {
	flex: 1;
	border: 1px solid var(--toyad-line);
	background: #fff;
	border-radius: 4px;
	padding: .2rem 0;
	font-size: .8rem;
	line-height: 1.2;
	cursor: pointer;
	color: var(--toyad-ink);
}

.toyad-up__btn:hover:not(:disabled) { border-color: var(--toyad-brass); }
.toyad-up__btn:disabled { opacity: .35; cursor: default; }
.toyad-up__btn--kill:hover { border-color: #b4553a; color: #b4553a; }

.toyad-up__error { margin-top: var(--tw-3, 1rem); }

@media (max-width: 560px) {
	.toyad-up__list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.toyad-submit__step > legend { font-size: var(--tw-t-1, 1.2rem); }
}

/* ================================================================== *
 * Wizard — progressive disclosure
 *
 * Applied only once submit.js has added .is-wizard, so the no-script
 * rendering keeps every section visible and unstyled by these rules.
 * ================================================================== */

.toyad-submit.is-wizard .toyad-submit__step {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	animation: toyad-wiz-in .32s cubic-bezier(.22, .68, .3, 1) both;
}

@keyframes toyad-wiz-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.toyad-submit.is-wizard .toyad-submit__step { animation: none; }
}

.toyad-submit.is-wizard .toyad-submit__step > legend,
.toyad-step__legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	width: 100%;
	text-align: center;
	margin: 0 0 var(--tw-4, 1.6rem);
	font-family: var(--tw-display, Georgia, serif);
	font-size: var(--tw-t-2, 1.5rem);
	font-weight: 400;
	color: var(--toyad-ink, #12312a);
}

/* ---------- Progress rail ---------- */

.toyad-wiz { margin: 0 0 var(--tw-5, 2.4rem); }

.toyad-wiz__track {
	position: relative;
	height: 3px;
	border-radius: 3px;
	background: var(--tw-line, #ddd5c6);
	overflow: hidden;
}

.toyad-wiz__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--toyad-ink, #12312a), var(--toyad-brass, #c2a15a));
	transition: width .42s cubic-bezier(.22, .68, .3, 1);
}

.toyad-wiz__pips {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: .4rem;
	list-style: none;
	margin: -14px 0 0;
	padding: 0;
	counter-reset: none;
}

.toyad-wiz__pip { text-align: center; }

.toyad-wiz__dot {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--tw-line, #ddd5c6);
	background: var(--tw-white, #fff);
	color: var(--tw-muted, #6d7b74);
	font-family: var(--tw-sans, sans-serif);
	font-size: .74rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.toyad-wiz__dot:disabled { cursor: default; opacity: .55; }

.toyad-wiz__pip.is-done .toyad-wiz__dot {
	background: var(--toyad-ink, #12312a);
	border-color: var(--toyad-ink, #12312a);
	color: var(--tw-bone, #f4f0e6);
}

.toyad-wiz__pip.is-on .toyad-wiz__dot {
	background: var(--toyad-brass, #c2a15a);
	border-color: var(--toyad-brass, #c2a15a);
	color: var(--toyad-ink, #12312a);
	transform: scale(1.18);
	box-shadow: 0 0 0 5px rgba(194, 161, 90, .16);
}

.toyad-wiz__name {
	display: block;
	margin-top: .5rem;
	font-family: var(--tw-sans, sans-serif);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tw-muted, #6d7b74);
	transition: color .22s ease;
}

.toyad-wiz__pip.is-on .toyad-wiz__name { color: var(--toyad-ink, #12312a); }

/* ---------- Step navigation ---------- */

.toyad-wiz__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tw-3, 1rem);
	margin-top: var(--tw-5, 2.4rem);
	padding-top: var(--tw-4, 1.6rem);
	border-top: 1px solid var(--toyad-line, #ddd5c6);
}

.toyad-wiz__back[hidden],
.toyad-wiz__next[hidden] { display: none; }

.toyad-wiz__back { margin-right: auto; }
.toyad-wiz__next { margin-left: auto; font-weight: 800; }

.toyad-wiz__count {
	font-family: var(--tw-sans, sans-serif);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tw-muted, #6d7b74);
	white-space: nowrap;
}

/* ---------- Review panel ---------- */

.toyad-review {
	display: grid;
	grid-template-columns: minmax(9rem, 34%) 1fr;
	gap: 0;
	margin: 0 0 var(--tw-4, 1.6rem);
	border: 1px solid var(--toyad-line, #ddd5c6);
	border-radius: var(--tw-r, 5px);
	overflow: hidden;
	font-size: var(--tw-t--1, .875rem);
}

.toyad-review dt,
.toyad-review dd {
	margin: 0;
	padding: .68rem .95rem;
	border-top: 1px solid var(--toyad-line, #ddd5c6);
}

.toyad-review dt:first-of-type,
.toyad-review dt:first-of-type + dd { border-top: 0; }

.toyad-review dt {
	background: var(--tw-paper, #fbf9f4);
	font-family: var(--tw-sans, sans-serif);
	font-weight: 700;
	color: var(--tw-muted, #6d7b74);
}

.toyad-review dd { color: var(--toyad-ink, #12312a); font-weight: 600; overflow-wrap: anywhere; }

.toyad-submit.is-wizard .tw-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tw-2, .65rem);
	text-align: center;
	margin-top: var(--tw-4, 1.6rem);
}

.toyad-submit.is-wizard .tw-form__actions .tw-btn { padding: 1.05em 2.4em; font-weight: 800; }
.toyad-submit.is-wizard .tw-form__consent { max-width: 56ch; margin-inline: auto; }

@media (max-width: 640px) {
	.toyad-wiz__name { display: none; }
	.toyad-wiz__pips { margin-top: -15px; }
	.toyad-wiz__nav { flex-wrap: wrap; }
	.toyad-wiz__count { order: 3; width: 100%; text-align: center; }
	.toyad-review { grid-template-columns: 1fr; }
	.toyad-review dd { padding-top: 0; border-top: 0; }
	.toyad-review dt { background: transparent; padding-bottom: .1rem; }
	.toyad-review dt:first-of-type + dd { border-top: 0; }
	.toyad-review dt + dd + dt { border-top: 1px solid var(--toyad-line, #ddd5c6); }
}

/* ---------- Field rhythm inside the wizard ---------- */

/* The card is a narrower column than a full-width page section, so two
   columns read better than the theme's three and leave fewer orphan rows. */
.toyad-submit.is-wizard .tw-form__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tw-4, 1.6rem);
}

.toyad-submit.is-wizard .tw-field--wide { grid-column: 1 / -1; }

@media (max-width: 620px) {
	.toyad-submit.is-wizard .tw-form__grid { grid-template-columns: 1fr; }
}

/* The "same as my phone" toggle sat under the hint and wrapped one word per
   line because it inherited the hint's narrow measure. */
.tw-field__hint .toyad-submit__inline {
	display: flex !important;
	align-items: center;
	gap: .45rem;
	margin-top: .35rem;
	white-space: nowrap;
	cursor: pointer;
}

.tw-field__hint .toyad-submit__inline input[type="checkbox"] {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
}

/* The submit guard's message sits above the step navigation rather than on a
   panel, because the field it refers to may be on a step now hidden. */
.toyad-wiz__err { margin: var(--tw-4, 1.6rem) 0 0; }

/* ---------- Uploader, given the weight of a step of its own ----------
 *
 * On the wizard the photographs step is one of six, so the drop area has to
 * read as the action of that screen rather than as a passive box. It gets a
 * button, a running count, and enough height to look like the place the work
 * happens.
 */

.toyad-submit.is-wizard .toyad-up__drop {
	gap: .5rem;
	padding: clamp(2rem, 1.2rem + 3.5vw, 3.6rem) var(--tw-4, 1.6rem);
	border-width: 2px;
	border-color: var(--toyad-brass);
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(194, 161, 90, .10), transparent 70%),
		var(--tw-paper, #fbf9f4);
}

.toyad-submit.is-wizard .toyad-up__drop:hover,
.toyad-submit.is-wizard .toyad-up__drop:focus-visible,
.toyad-submit.is-wizard .toyad-up__drop.is-over {
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(194, 161, 90, .2), transparent 70%),
		var(--tw-paper, #fbf9f4);
	border-style: solid;
}

.toyad-up__drop strong {
	font-family: var(--tw-display, Georgia, serif);
	font-size: var(--tw-t-1, 1.25rem);
	font-weight: 400;
}

/* Presentational — the drop area itself already carries the button role. */
.toyad-up__pick {
	display: inline-flex;
	align-items: center;
	margin-top: var(--tw-3, 1rem);
	padding: .85em 1.9em;
	border-radius: var(--tw-r, 5px);
	background: var(--toyad-ink, #12312a);
	color: var(--tw-bone, #f4f0e6);
	font-family: var(--tw-sans, sans-serif);
	font-size: var(--tw-t--1, .875rem);
	font-weight: 800;
	letter-spacing: .02em;
	transition: background-color .18s ease, color .18s ease;
}

.toyad-up__drop:hover .toyad-up__pick,
.toyad-up__drop:focus-visible .toyad-up__pick,
.toyad-up__drop.is-over .toyad-up__pick {
	background: var(--toyad-brass, #c2a15a);
	color: var(--toyad-ink, #12312a);
}

.toyad-up__count {
	margin: var(--tw-3, 1rem) 0 0;
	text-align: center;
	font-family: var(--tw-sans, sans-serif);
	font-size: var(--tw-t--1, .875rem);
	font-weight: 700;
	color: var(--tw-muted, #6d7b74);
}

.toyad-up__count.is-on { color: var(--toyad-ink, #12312a); }

.toyad-submit.is-wizard .toyad-up__list {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	margin-top: var(--tw-3, 1rem);
}

/* ==========================================================================
 * Phones
 *
 * The wizard already shows one step at a time, which is the right shape for a
 * small screen. What it needed was fields a thumb can hit, type iOS will not
 * zoom into, and a progress rail that still reads at 320 pixels.
 * ====================================================================== */

@media (max-width: 560px) {
	/* Under 16px, Safari zooms the page as soon as a field takes focus and
	   never zooms back — every step of the form did this. */
	.toyad-submit input,
	.toyad-submit select,
	.toyad-submit textarea { font-size: 16px; }

	.toyad-submit .tw-field input,
	.toyad-submit .tw-field select,
	.toyad-submit .tw-field textarea {
		min-height: 50px;
		padding: 0.8rem 0.85rem;
	}

	.toyad-submit textarea { min-height: 110px; }

	/* Numbers only need a numeric keypad's worth of room. */
	.toyad-submit input[inputmode="numeric"] { max-width: 100%; }

	/* Step dots: bigger, and the numbers stay legible without their labels. */
	.toyad-wiz__dot { width: 32px; height: 32px; font-size: .8rem; }
	.toyad-wiz__pips { margin-top: -17px; gap: .2rem; }
	.toyad-wiz__pip.is-on .toyad-wiz__dot { transform: scale(1.12); }

	/* Back and Continue are the two most-tapped controls in the whole form. */
	.toyad-wiz__nav {
		position: sticky;
		bottom: 0;
		z-index: 3;
		margin-inline: calc(var(--tw-3, 1rem) * -1);
		padding: var(--tw-3, 1rem);
		padding-bottom: max(var(--tw-3, 1rem), env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%);
		border-top: 0;
	}

	.toyad-wiz__back,
	.toyad-wiz__next { min-height: 50px; padding-inline: 1.3em; }
	.toyad-wiz__count { font-size: .66rem; }

	/* Amenity chips are a grid of small targets — the worst case on touch. */
	.toyad-chip,
	.toyad-submit__chips label {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		font-size: .82rem;
	}

	/* The drop zone is the step people struggle with most. */
	.toyad-submit.is-wizard .toyad-up__drop { padding: 1.8rem 1rem; }
	.toyad-up__pick { min-height: 48px; padding: 0 1.5em; }
	.toyad-up__drop strong { font-size: 1.05rem; }

	.toyad-submit.is-wizard .toyad-up__list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
	.toyad-up__btn { min-width: 38px; min-height: 38px; }

	/* Consent rows are easy to miss and easy to mis-tap. */
	.toyad-submit.is-wizard .tw-form__consent label {
		display: flex;
		gap: .6rem;
		align-items: flex-start;
		padding: .5rem 0;
	}

	.toyad-submit.is-wizard .tw-form__consent input[type="checkbox"] {
		width: 22px;
		height: 22px;
		flex: none;
		margin-top: .1rem;
	}

	.toyad-submit.is-wizard .tw-form__actions .tw-btn { width: 100%; min-height: 54px; }
}

/* Very small phones: the review table's two columns cannot both hold a value. */
@media (max-width: 380px) {
	.toyad-submit.is-wizard .toyad-submit__step > legend,
	.toyad-step__legend { font-size: 1.25rem; }

	.toyad-wiz__dot { width: 28px; height: 28px; }
	.toyad-wiz__pips { margin-top: -15px; }
}