/*
	Anbieterbereich (/anbieter)
	----
	Loaded only by Seller/View/Layout.hs. Consumes the --ti-* tokens from
	app.css ("Aubergine & Warm Stone").
*/

.seller-body {
	background: var(--ti-stone);
	color: var(--ti-ink);
}

/* Brand bar */

.seller-header {
	background: var(--ti-surface);
	border-bottom: 1px solid var(--ti-line);
}

.seller-header__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.seller-header__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.seller-header__portal {
	font-family: var(--ti-serif);
	font-size: 1rem;
	color: var(--ti-ink-2);
	border-left: 1px solid var(--ti-line-strong);
	padding-left: 0.75rem;
}

.seller-header__back {
	color: var(--ti-ink-2);
	text-decoration: none;
	font-size: 0.875rem;
	white-space: nowrap;
}

.seller-header__back:hover {
	color: var(--bs-primary);
	text-decoration: underline;
}

/* Page shell */

.seller-shell {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.25rem 5rem;
}

.seller-back {
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
}

.seller-back a {
	color: var(--ti-ink-2);
	text-decoration: none;
}

.seller-back a:hover {
	color: var(--bs-primary);
}

.seller-page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.seller-page-head__title {
	font-family: var(--ti-serif);
	font-size: 1.875rem;
	font-weight: 600;
	margin: 0;
}

.seller-page-head__meta {
	margin: 0.35rem 0 0;
	color: var(--ti-muted);
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.seller-page-head__id {
	font-variant-numeric: tabular-nums;
	color: var(--ti-ink-2);
}

.seller-page-head__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Sign in / register */

.seller-auth {
	max-width: 26rem;
	margin: 2rem auto;
	background: var(--ti-surface);
	border: 1px solid var(--ti-line);
	border-radius: 14px;
	padding: 2rem;
}

.seller-auth h1 {
	font-family: var(--ti-serif);
	margin-bottom: 1rem;
}

.seller-auth__lead {
	color: var(--ti-ink-2);
	margin-bottom: 1.5rem;
}

.seller-auth__aside {
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

.seller-auth .form-group + .form-group {
	margin-top: 0.75rem;
}

.seller-auth .btn {
	margin-top: 1rem;
	width: 100%;
}

/* Dashboard */

.seller-empty {
	background: var(--ti-surface);
	border: 1px dashed var(--ti-line-strong);
	border-radius: 14px;
	padding: 3rem 2rem;
	text-align: center;
	color: var(--ti-ink-2);
}

.seller-empty .btn {
	margin-top: 1rem;
}

.seller-listings {
	display: grid;
	gap: 0.75rem;
}

.seller-listing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	background: var(--ti-surface);
	border: 1px solid var(--ti-line);
	border-radius: 14px;
	padding: 0.85rem;
}

.seller-listing__image {
	width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: 10px;
	flex: none;
}

.seller-listing__image--empty {
	background: var(--ti-stone);
	border: 1px solid var(--ti-line);
}

.seller-listing__body {
	flex: 1 1 16rem;
	min-width: 0;
}

.seller-listing__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.seller-listing__title a {
	color: var(--ti-ink);
	text-decoration: none;
}

.seller-listing__title a:hover {
	color: var(--bs-primary);
}

.seller-listing__place {
	margin: 0.2rem 0 0;
	color: var(--ti-muted);
	font-size: 0.8125rem;
}

.seller-listing__stats {
	display: flex;
	gap: 1.25rem;
	margin: 0.5rem 0 0;
}

.seller-listing__stats dt {
	font-weight: 400;
	color: var(--ti-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.seller-listing__stats dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.seller-listing__actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-left: auto;
}

/*
	The listing form
	----
	Everything below the "wizard" marker only applies once app.js has taken
	over; the plain form degrades to one long page with a single submit button.
*/

.seller-form {
	/* A form column, not a full-width sheet: fields stay in reach of one another. */
	max-width: 58rem;
	background: var(--ti-surface);
	border: 1px solid var(--ti-line);
	border-radius: 16px;
	padding: 1.5rem;
}

.seller-step__title {
	font-family: var(--ti-serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
}

.seller-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.seller-fieldset__legend {
	float: none;
	width: auto;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ti-muted);
	margin-bottom: 0.75rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--ti-line);
}

.seller-fieldset__hint {
	color: var(--ti-ink-2);
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
}

.seller-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem 1.25rem;
	align-items: start;
}

/*
	Conditional wrappers group fields that share a visibility rule; they must
	not become grid items of their own, or a wrapper with two inputs would take
	a single column. display:contents lifts their children into the grid, while
	[hidden] (display:none !important, Bootstrap reboot) still wins.
*/
.seller-fields > [data-show-property-types],
.seller-fields > [data-show-commercialization] {
	display: contents;
}

.seller-field {
	min-width: 0;
}

.seller-field--wide {
	grid-column: 1 / -1;
}

.seller-field .form-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ti-ink-2);
	margin-bottom: 0.25rem;
}

.seller-field__required {
	color: var(--bs-primary);
	margin-left: 0.15rem;
}

.seller-field__help {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--ti-muted);
}

.seller-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.25rem 1rem;
}

.seller-form .form-control,
.seller-form .form-select {
	border-color: var(--ti-line-strong);
}

.seller-form .form-control:focus,
.seller-form .form-select:focus {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.2rem var(--ti-brand-tint);
}

/* Photos */

.seller-photos__upload {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.seller-photos__upload .form-control {
	max-width: 26rem;
}

.seller-photos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 1rem;
}

.seller-photo {
	margin: 0;
	border: 1px solid var(--ti-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ti-stone);
}

.seller-photo__image {
	display: block;
	width: 100%;
	height: 9rem;
	object-fit: cover;
}

.seller-photo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	padding: 0.5rem;
	background: var(--ti-surface);
}

.seller-photo__badge {
	flex-basis: 100%;
}

/* Rail, progress and step navigation — wizard only */

.seller-rail,
.seller-form__progress,
.seller-form__nav,
.seller-form__hint {
	display: none;
}

.seller-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ti-line);
}

.seller-form__actions-end {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.seller-form--wizard .seller-rail {
	display: block;
	margin-bottom: 1rem;
}

.seller-rail__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.seller-rail__link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.3rem 0.7rem 0.3rem 0.35rem;
	color: var(--ti-muted);
	font-size: 0.8125rem;
	line-height: 1.2;
}

button.seller-rail__link:hover {
	background: var(--ti-stone);
	color: var(--ti-ink);
}

.seller-rail__link.is-current {
	background: var(--ti-brand-tint);
	border-color: var(--bs-primary);
	color: var(--bs-primary-dark);
	font-weight: 600;
}

.seller-rail__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--ti-stone);
	border: 1px solid var(--ti-line-strong);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	flex: none;
}

.seller-rail__link.is-current .seller-rail__number {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	color: #fff;
}

.seller-rail__item--future .seller-rail__link {
	opacity: 0.55;
	cursor: default;
}

.seller-form--wizard .seller-form__progress {
	display: block;
	height: 3px;
	background: var(--ti-line);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 1.75rem;
}

.seller-form__progress-bar {
	height: 100%;
	width: 4%;
	background: var(--ti-gold);
	transition: width 0.2s ease-out;
}

.seller-form--wizard .seller-form__nav,
.seller-form--wizard .seller-form__hint {
	display: inline-flex;
}

.seller-form--wizard .seller-form__hint {
	margin: 0;
	color: var(--ti-muted);
	font-size: 0.8125rem;
}

@media (max-width: 575px) {
	/* Logo plus portal name plus the way back does not fit on a phone. */
	.seller-header__portal {
		display: none;
	}

	.seller-shell {
		padding: 1.25rem 0.9rem 4rem;
	}

	.seller-form {
		padding: 1.1rem;
		border-radius: 12px;
	}

	/* Numbers only, except for the step one is actually on. */
	.seller-rail__label {
		display: none;
	}

	.seller-rail__link.is-current .seller-rail__label {
		display: inline;
	}

	.seller-rail__link {
		padding: 0.3rem;
	}

	.seller-form__actions-end {
		width: 100%;
		margin-left: 0;
		justify-content: flex-end;
	}

	.seller-listing__actions {
		margin-left: 0;
		width: 100%;
	}
}