/* DSD Stoplight: account (UsersWP) and listing submission (GeoDirectory) screens. */

/* ---------- Shared ---------- */
.dsd-ticks { list-style: none; margin: 0; padding: 0; }
.dsd-ticks li { position: relative; padding-left: 30px; margin: 0 0 10px; }
.dsd-ticks li::before {
	content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%;
	background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.dsd-ticks--dark li { color: var(--ink); }

/* ---------- Auth screens ---------- */
.dsd-auth { padding: 40px 0 64px; }
.dsd-auth__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; max-width: 1100px; }
.dsd-auth__panel {
	background: var(--card); border: 1px solid var(--line); border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	padding: 40px 44px; box-shadow: var(--shadow);
}
.dsd-auth__mark { width: 18px; height: 40px; margin-bottom: 14px; }
.dsd-auth__title { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.dsd-auth__lead { color: var(--muted); margin: 0 0 22px; }
.dsd-auth__switch { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--muted); }
.dsd-auth__switch a { font-weight: 700; }

.dsd-auth__visual { position: relative; margin: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; overflow: hidden; min-height: 560px; background: var(--asphalt); }
.dsd-auth__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%; }
.dsd-auth__overlay {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 30px 26px; color: #fff;
	background: linear-gradient(180deg, rgba(13, 15, 18, 0) 0%, rgba(13, 15, 18, 0.82) 38%, rgba(13, 15, 18, 0.94) 100%);
}
.dsd-auth__overlay h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 12px 0 14px; }
.dsd-auth__overlay .dsd-signal--go { background: rgba(61, 196, 107, 0.18); color: #b6f3cb; border-color: rgba(61, 196, 107, 0.45); }
.dsd-auth__overlay .dsd-signal--go .dsd-signal__shape { fill: #3dc46b; }
.dsd-auth__overlay .dsd-ticks li { color: #e9ebee; }

@media (max-width: 880px) {
	.dsd-auth { padding: 20px 0 48px; }
	.dsd-auth__grid { grid-template-columns: 1fr; }
	.dsd-auth__panel { border-right: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 28px 22px; }
	/* Photo stacks above the copy so the overlay does not bury it on narrow screens. */
	.dsd-auth__visual { border-radius: 0 0 var(--radius-lg) var(--radius-lg); min-height: 0; }
	.dsd-auth__visual img { position: static; display: block; height: auto; aspect-ratio: 4 / 3; object-position: 62% 15%; }
	.dsd-auth__overlay { position: relative; margin-top: -72px; padding-top: 56px; background: linear-gradient(180deg, rgba(13, 15, 18, 0) 0, rgba(13, 15, 18, 0.94) 72px); }
}

/* UsersWP form inside the auth panel: own heading hidden (the page has the H1), labels made visible. */
.dsd-auth .uwp_page .card { border: 0 !important; box-shadow: none !important; background: transparent; max-width: none; }
.dsd-auth .uwp_page .card-body { padding: 0 !important; }
.dsd-auth .uwp_page .card-title, .dsd-auth .uwp-footer-links { display: none !important; }
.dsd-auth .uwp_form label.sr-only {
	position: static !important; width: auto !important; height: auto !important; margin: 0 0 4px !important;
	clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important;
	font-size: 0.9rem; font-weight: 650; color: var(--ink);
}
.dsd-auth .uwp_form .form-group { margin-bottom: 14px; }
.dsd-auth .uwp_form .form-control::placeholder { color: transparent; }
.dsd-auth .uwp_form .btn-primary, .dsd-auth .uwp_form button[type="submit"], .dsd-auth .uwp_form input[type="submit"] {
	width: 100%; min-height: 48px; font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.dsd-auth .uwp_form .input-group .btn, .dsd-auth .uwp_form .input-group-append .input-group-text { min-height: 44px; }
.dsd-auth .ayecode-turnstile-placeholder { margin: 6px 0 14px !important; }

/* ---------- Add listing: owner hero ---------- */
.dsd-owner-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 20px 0 44px; }
.dsd-owner-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; }
.dsd-owner-hero .dsd-crumbs { margin-bottom: 18px; }
.dsd-owner-hero__title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 14px 0 12px; }
.dsd-owner-hero__lead { color: var(--muted); font-size: 1.1rem; max-width: 56ch; margin: 0 0 22px; }
.dsd-owner-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dsd-owner-hero__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 40px rgba(28, 31, 36, 0.18); aspect-ratio: 1440 / 956; background: var(--tint); }
.dsd-owner-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) { .dsd-owner-hero__grid { grid-template-columns: 1fr; gap: 28px; } .dsd-owner-hero__media { order: -1; } }

.dsd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.dsd-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.dsd-steps li strong { color: var(--ink); }
.dsd-steps__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); color: var(--ink); font-weight: 800; font-size: 0.9rem; }
.dsd-steps li.is-done { border-color: color-mix(in srgb, var(--go) 40%, transparent); }
.dsd-steps li.is-done .dsd-steps__num { background: var(--go); color: #fff; }
.dsd-steps li.is-current { border-color: var(--caution); background: var(--caution-tint); }
.dsd-steps li.is-current .dsd-steps__num { background: var(--caution); color: #5c4300; }

.dsd-owner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dsd-owner-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.dsd-owner-card h2 { font-size: 1.2rem; margin: 12px 0 8px; }
.dsd-owner-card p { color: var(--muted); margin: 0 0 10px; }
@media (max-width: 880px) { .dsd-owner-grid { grid-template-columns: 1fr; } }

/* ---------- Add listing: GeoDirectory form ---------- */
.dsd-addlisting { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding-top: 32px; padding-bottom: 64px; align-items: start; }
.dsd-addlisting__form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow); }
.dsd-addlisting__tips { position: sticky; top: calc(var(--header-h) + 16px); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--go); border-radius: var(--radius); padding: 20px 22px; }
.dsd-addlisting__tips h2 { font-size: 1.1rem; margin: 0 0 14px; }
.dsd-addlisting__tips li { font-size: 0.95rem; }
@media (max-width: 960px) { .dsd-addlisting { grid-template-columns: 1fr; } .dsd-addlisting__tips { position: static; order: -1; } }

.dsd-addlisting__form :is(fieldset, .geodir-fieldset-row) { border: 0; padding: 0; margin: 0 0 8px; }
.dsd-addlisting__form :is(legend, h3, h4, .geodir-fieldset-row h3) {
	font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); width: 100%;
}
.dsd-addlisting__form :is(.geodir_form_row, .form-group) { margin: 0 0 16px; }
/* GD legacy form floats labels into a 23% column; stack everything instead. */
.dsd-addlisting__form .geodir_form_row > label { float: none !important; width: auto !important; }
.dsd-addlisting__form .geodir_form_row > :is(input, select, textarea, div, .geodir_taxonomy_field, .chosen-container) { float: none !important; width: 100% !important; max-width: 100%; }
.dsd-addlisting__form .geodir_form_row > input[type="checkbox"], .dsd-addlisting__form .geodir_form_row > input[type="radio"] { width: auto !important; }
.dsd-addlisting__form .geodir_message_note { padding-left: 0 !important; width: auto !important; }
.dsd-addlisting__form .geodir_taxonomy_field select[multiple] { min-height: 150px; padding: 6px; }
.dsd-addlisting__form :is(#propertyform, .geodir-add-listing) h5 { font-size: 1.15rem; font-weight: 800; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dsd-addlisting__form label { display: block; font-weight: 650; margin: 0 0 6px; color: var(--ink); }
.dsd-addlisting__form :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], select, textarea) {
	width: 100%; min-height: 46px; padding: 9px 12px; border: 1.5px solid var(--lane); border-radius: var(--radius-sm);
	background: var(--card); color: var(--ink); font: inherit; box-shadow: none;
}
.dsd-addlisting__form textarea { min-height: 140px; }
.dsd-addlisting__form :is(input, select, textarea):focus { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--go) 35%, transparent); outline-offset: 0; }
.dsd-addlisting__form :is(.geodir_message_note, .form-text, .description, small) { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 4px; }
.dsd-addlisting__form :is(.geodir_message_error, .invalid-feedback) { color: var(--stop-ink); font-weight: 600; font-size: 0.875rem; }
.dsd-addlisting__form :is(#geodir-add-listing-submit button, input[type="submit"], .geodir_button, button[type="submit"]) {
	min-height: 50px; padding: 12px 26px; border: 1.5px solid var(--go-fill); border-radius: var(--radius-sm);
	background: var(--go-fill); color: var(--go-on); font: 700 1rem/1.2 var(--font); cursor: pointer;
}
.dsd-addlisting__form :is(#geodir-add-listing-submit button, input[type="submit"], .geodir_button, button[type="submit"]):hover { background: var(--go-fill-hover); border-color: var(--go-fill-hover); }