/**
 * MYBIKE.CH — Marketplace Component Layer
 * ========================================
 * Only loaded on marketplace views (see inc/enqueue.php). Builds on the
 * tokens defined in mybike.css.
 */

/* -------------------------------------------------------------------- */
/* Hero + search bar                                                     */
/* -------------------------------------------------------------------- */

.mybike-hero {
	padding: var(--mb-space-7) 0 var(--mb-space-6);
	background: var(--mb-surface);
	border-bottom: 1px solid var(--mb-line);
}

.mybike-search-bar {
	display: flex;
	align-items: stretch;
	background: var(--mb-paper);
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	overflow: hidden;
	max-width: 920px;
}

.mybike-search-bar__field {
	flex: 1 1 0;
	border-right: 1px solid var(--mb-line);
	padding: 0.6rem 1rem;
	display: flex;
	align-items: center;
}

.mybike-search-bar__field--keyword {
	flex: 1.6 1 0;
}

.mybike-search-bar__field--price {
	flex: 1.2 1 0;
	gap: 0.4rem;
}

.mybike-search-bar__field input,
.mybike-search-bar__field select {
	border: none;
	width: 100%;
	font-family: var(--mb-font);
	font-size: 0.95rem;
	background: transparent;
}

.mybike-search-bar__field input:focus,
.mybike-search-bar__field select:focus {
	outline: none;
}

.mybike-search-bar__submit {
	border-radius: 0;
	padding: 0 1.75rem;
}

.mybike-hero__secondary-cta {
	display: inline-block;
	margin-top: var(--mb-space-3);
	color: var(--mb-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------- */
/* Sections                                                              */
/* -------------------------------------------------------------------- */

.mybike-section {
	padding: var(--mb-space-6) 0;
}

.mybike-section--dealers,
.mybike-section--brands {
	background: var(--mb-surface);
	border-top: 1px solid var(--mb-line);
	border-bottom: 1px solid var(--mb-line);
}

/* -------------------------------------------------------------------- */
/* Category grid                                                        */
/* -------------------------------------------------------------------- */

.mybike-category-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--mb-space-3);
}

.mybike-category-card {
	display: block;
	padding: var(--mb-space-4) var(--mb-space-3);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	text-decoration: none;
	color: var(--mb-ink);
	font-weight: 600;
	transition: border-color 120ms ease;
}

.mybike-category-card:hover {
	border-color: var(--mb-red);
}

/* -------------------------------------------------------------------- */
/* Brand row                                                             */
/* -------------------------------------------------------------------- */

.mybike-brand-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
}

.mybike-brand-chip {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--mb-line-strong);
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--mb-ink);
	text-decoration: none;
}

.mybike-brand-chip:hover {
	border-color: var(--mb-ink);
}

/* -------------------------------------------------------------------- */
/* Listing card (overrides/extends the plugin's baseline)                */
/* -------------------------------------------------------------------- */

.mybike-card {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	background: var(--mb-paper);
	transition: border-color 120ms ease;
}

.mybike-card:hover {
	border-color: var(--mb-ink);
}

.mybike-badge--featured {
	background: var(--mb-red);
	color: #fff;
	font-weight: 700;
	text-transform: none;
	border-radius: var(--mb-radius);
}

.mybike-badge--sold {
	background: var(--mb-ink);
	color: #fff;
	border-radius: var(--mb-radius);
}

.mybike-card__favorite {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--mb-line);
	color: var(--mb-ink-soft);
}

.mybike-card__favorite-icon::before {
	content: '♡';
	font-size: 1rem;
	line-height: 1;
}

.mybike-card__favorite.is-active .mybike-card__favorite-icon::before {
	content: '♥';
	color: var(--mb-red);
}

.mybike-card__price {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.15rem;
}

.mybike-card__title {
	font-size: 0.98rem;
	font-weight: 500;
	margin: 0 0 0.4rem;
}

.mybike-card__title a {
	color: var(--mb-ink);
	text-decoration: none;
}

.mybike-card__meta-item {
	color: var(--mb-ink-soft);
	font-size: 0.82rem;
}

.mybike-card__meta-item:not(:last-child)::after {
	content: '·';
	margin-left: 0.5rem;
	color: var(--mb-line-strong);
}

/* -------------------------------------------------------------------- */
/* Dealer cards                                                          */
/* -------------------------------------------------------------------- */

.mybike-dealer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mb-space-3);
}

.mybike-dealer-card {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--mb-space-3);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	background: var(--mb-paper);
	text-decoration: none;
	color: var(--mb-ink);
}

.mybike-dealer-card__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	margin-bottom: var(--mb-space-2);
}

.mybike-dealer-card__name {
	font-weight: 700;
}

.mybike-dealer-card__location,
.mybike-dealer-card__count {
	font-size: 0.85rem;
	color: var(--mb-ink-soft);
}

/* -------------------------------------------------------------------- */
/* Trust grid                                                            */
/* -------------------------------------------------------------------- */

.mybike-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mb-space-4);
}

.mybike-trust-card h3 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
}

.mybike-trust-card p {
	color: var(--mb-ink-soft);
	font-size: 0.9rem;
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* Filters                                                               */
/* -------------------------------------------------------------------- */

.mybike-filters {
	padding: var(--mb-space-3);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	background: var(--mb-paper);
}

.mybike-filter-group {
	margin-bottom: var(--mb-space-3);
	padding-bottom: var(--mb-space-3);
	border-bottom: 1px solid var(--mb-line);
}

.mybike-filter-group label,
.mybike-filter-group__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.mybike-filter-group input,
.mybike-filter-group select {
	width: 100%;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	font-family: var(--mb-font);
	font-size: 0.9rem;
}

.mybike-filter-group__range {
	display: flex;
	gap: 0.5rem;
}

.mybike-filters__submit {
	width: 100%;
	margin-bottom: 0.5rem;
}

.mybike-filters__reset {
	width: 100%;
}

.mybike-filter-drawer-toggle {
	background: var(--mb-ink);
	color: #fff;
	border: none;
	border-radius: var(--mb-radius);
	padding: 0.65rem 1rem;
	font-weight: 600;
	margin-bottom: var(--mb-space-3);
}

/* -------------------------------------------------------------------- */
/* Search results toolbar                                                */
/* -------------------------------------------------------------------- */

.mybike-search-results__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mb-space-3);
	padding-bottom: var(--mb-space-2);
	border-bottom: 1px solid var(--mb-line);
}

.mybike-search-results__count {
	color: var(--mb-ink-soft);
	font-size: 0.9rem;
}

.mybike-search-results__controls {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
}

.mybike-view-toggle {
	display: inline-flex;
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	overflow: hidden;
}

.mybike-view-toggle__btn {
	background: var(--mb-paper);
	border: none;
	padding: 0.4rem 0.75rem;
	font-size: 0.85rem;
	cursor: pointer;
}

.mybike-view-toggle__btn.is-active {
	background: var(--mb-ink);
	color: #fff;
}

.mybike-pagination {
	margin-top: var(--mb-space-4);
	display: flex;
	gap: 0.4rem;
}

.mybike-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	text-decoration: none;
	color: var(--mb-ink);
	font-size: 0.85rem;
}

.mybike-pagination .page-numbers.current {
	background: var(--mb-ink);
	color: #fff;
	border-color: var(--mb-ink);
}

/* -------------------------------------------------------------------- */
/* Listing detail                                                        */
/* -------------------------------------------------------------------- */

.mybike-breadcrumbs {
	font-size: 0.85rem;
	color: var(--mb-ink-soft);
	margin-bottom: var(--mb-space-3);
}

.mybike-breadcrumbs a {
	color: var(--mb-ink-soft);
}

.mybike-gallery__main {
	width: 100%;
	border-radius: var(--mb-radius);
	border: 1px solid var(--mb-line);
}

.mybike-gallery__thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	overflow-x: auto;
}

.mybike-gallery__thumb {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: var(--mb-radius);
	border: 1px solid var(--mb-line);
	cursor: pointer;
}

.mybike-listing__price {
	font-size: 2rem;
	font-weight: 700;
	margin: var(--mb-space-2) 0;
}

.mybike-listing__quick-meta {
	list-style: none;
	display: flex;
	gap: 0.6rem;
	padding: 0;
	margin: 0 0 var(--mb-space-3);
	color: var(--mb-ink-soft);
	font-size: 0.9rem;
}

.mybike-listing__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: var(--mb-space-4);
}

.mybike-listing__seller {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	padding: var(--mb-space-3);
}

.mybike-listing__seller h2 {
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
}

.mybike-listing__details {
	margin-top: var(--mb-space-6);
	padding-top: var(--mb-space-5);
	border-top: 1px solid var(--mb-line);
}

.mybike-spec-list__row dt {
	color: var(--mb-ink-soft);
}

.mybike-spec-list__row dd {
	margin: 0;
	font-weight: 500;
}

/* -------------------------------------------------------------------- */
/* Dashboard / account nav                                               */
/* -------------------------------------------------------------------- */

.mybike-dashboard,
.mybike-my-listings,
.mybike-favorites-page,
.mybike-account-settings,
.mybike-dealer-dashboard {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--mb-space-5);
}

.mybike-account-nav {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	border-right: 1px solid var(--mb-line);
	padding-right: var(--mb-space-3);
}

.mybike-account-nav a {
	padding: 0.55rem 0.6rem;
	border-radius: var(--mb-radius);
	color: var(--mb-ink-soft);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
}

.mybike-account-nav a.is-active,
.mybike-account-nav a:hover {
	background: var(--mb-surface);
	color: var(--mb-ink);
}

.mybike-dashboard__dealer-cta {
	margin-top: var(--mb-space-5);
	padding: var(--mb-space-4);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	background: var(--mb-surface);
}

/* -------------------------------------------------------------------- */
/* Status pills                                                          */
/* -------------------------------------------------------------------- */

.mybike-status-pill {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.mybike-status-pill--publish {
	background: #E8F5E9;
	color: var(--mb-success);
}

.mybike-status-pill--pending {
	background: #FFF4E5;
	color: #92610C;
}

.mybike-status-pill--draft {
	background: var(--mb-surface);
	color: var(--mb-ink-soft);
}

.mybike-status-pill--mybike_paused {
	background: #F0F0EE;
	color: var(--mb-ink-soft);
}

.mybike-status-pill--mybike_sold {
	background: var(--mb-ink);
	color: #fff;
}

/* -------------------------------------------------------------------- */
/* Wizard                                                                */
/* -------------------------------------------------------------------- */

.mybike-wizard__steps {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--mb-space-5);
	border-bottom: 1px solid var(--mb-line);
	overflow-x: auto;
}

.mybike-wizard__steps li {
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	color: var(--mb-ink-soft);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.mybike-wizard__steps li.is-active {
	color: var(--mb-ink);
	font-weight: 700;
	border-bottom-color: var(--mb-red);
}

.mybike-wizard__steps li.is-complete {
	color: var(--mb-ink);
}

.mybike-form-group {
	margin-bottom: var(--mb-space-3);
}

.mybike-form-group label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.mybike-form-group input,
.mybike-form-group select,
.mybike-form-group textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	font-family: var(--mb-font);
	font-size: 0.95rem;
}

.mybike-ebike-fields {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	padding: var(--mb-space-3);
}

.mybike-ebike-fields legend {
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0 0.4rem;
}

.mybike-photo-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.mybike-photo-preview {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 68px;
}

.mybike-photo-preview img {
	width: 90px;
	height: 68px;
	object-fit: cover;
	border-radius: var(--mb-radius);
	border: 1px solid var(--mb-line);
	display: block;
}

.mybike-photo-preview__remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--mb-line);
	background: var(--mb-ink);
	color: #fff;
	font-size: 0.9rem;
	cursor: pointer;
}

.mybike-photo-preview__remove:hover,
.mybike-photo-preview__remove:focus-visible {
	background: var(--mb-red);
}

.mybike-wizard__nav {
	display: flex;
	justify-content: space-between;
	margin-top: var(--mb-space-4);
	padding-top: var(--mb-space-4);
	border-top: 1px solid var(--mb-line);
}

.mybike-wizard__message {
	margin-top: var(--mb-space-2);
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------- */
/* Messaging                                                             */
/* -------------------------------------------------------------------- */

.mybike-conversation-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	overflow: hidden;
}

.mybike-conversation-list__item {
	border-bottom: 1px solid var(--mb-line);
}

.mybike-conversation-list__item:last-child {
	border-bottom: none;
}

.mybike-conversation-list__button {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.75rem;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
}

.mybike-conversation-list__item.has-unread {
	background: var(--mb-surface);
}

.mybike-conversation-list__avatar {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--mb-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}

.mybike-conversation-list__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.mybike-conversation-list__name {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
}

.mybike-conversation-list__listing {
	display: block;
	font-size: 0.8rem;
	color: var(--mb-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mybike-unread-badge {
	background: var(--mb-red);
	color: #fff;
	border-radius: 999px;
	font-size: 0.75rem;
	min-width: 1.4rem;
	height: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.3rem;
}

.mybike-messages__thread {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
}

.mybike-messages__thread-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem;
	border-bottom: 1px solid var(--mb-line);
}

.mybike-messages__bubbles {
	padding: var(--mb-space-3);
}

.mybike-message-bubble {
	max-width: 70%;
	padding: 0.6rem 0.85rem;
	border-radius: var(--mb-radius);
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.mybike-message-bubble--mine {
	background: var(--mb-ink);
	color: #fff;
	margin-left: auto;
}

.mybike-message-bubble--theirs {
	background: var(--mb-surface);
}

.mybike-message-bubble__text {
	white-space: pre-wrap;
	word-break: break-word;
}

.mybike-message-bubble__meta {
	margin-top: 0.25rem;
	font-size: 0.72rem;
	opacity: 0.7;
}

.mybike-messages__loading {
	text-align: center;
	color: var(--mb-ink-soft);
	font-size: 0.85rem;
	padding: var(--mb-space-3) 0;
}

.mybike-messages__composer {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem;
	border-top: 1px solid var(--mb-line);
}

.mybike-messages__composer textarea {
	flex: 1 1 auto;
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius);
	padding: 0.5rem;
	font-family: var(--mb-font);
	resize: vertical;
}

/* -------------------------------------------------------------------- */
/* Dealer storefront                                                     */
/* -------------------------------------------------------------------- */

.mybike-dealer-storefront__cover img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--mb-radius);
}

.mybike-dealer-storefront__header {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	margin: var(--mb-space-3) 0 var(--mb-space-4);
}

.mybike-dealer-storefront__logo {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
}

/* -------------------------------------------------------------------- */
/* Auth forms (login / register / forgot / reset password)               */
/* -------------------------------------------------------------------- */

.mybike-auth-form {
	max-width: 420px;
	margin: var(--mb-space-6) auto;
	padding: var(--mb-space-5);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	background: var(--mb-paper);
}

.mybike-auth-form h1 {
	font-size: 1.5rem;
	margin-bottom: var(--mb-space-3);
}

.mybike-auth-form form {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-1);
}

.mybike-auth-form .mybike-btn {
	margin-top: var(--mb-space-2);
	width: 100%;
}

.mybike-form-group--checkbox label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 500;
}

.mybike-auth-form__message {
	padding: 0.6rem 0.85rem;
	border-radius: var(--mb-radius);
	font-size: 0.88rem;
	margin-bottom: var(--mb-space-3);
}

.mybike-auth-form__message--error {
	background: #FDECEC;
	color: #92211D;
}

.mybike-auth-form__message--success {
	background: #E8F5E9;
	color: var(--mb-success);
}

.mybike-auth-form__links {
	margin-top: var(--mb-space-3);
	font-size: 0.88rem;
	color: var(--mb-ink-soft);
	text-align: center;
}

.mybike-auth-form__links a {
	color: var(--mb-ink);
}

/* -------------------------------------------------------------------- */
/* Dealer logo / cover image upload widget                               */
/* -------------------------------------------------------------------- */

.mybike-dealer-image-upload__preview {
	width: 90px;
	height: 90px;
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--mb-surface);
}

.mybike-dealer-image-upload__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Saved searches, gallery, lightbox, dashboard quick-actions and header
 * icon refinements used to be re-declared here across three separate
 * "MYBIKE x.0" blocks, each with its own hardcoded colors and radii that
 * drifted further from the brand tokens every time (18px/16px/12px/22px
 * corners against the design system's 2px). All of that is now owned
 * once, by MyBike Core's stylesheet (saved-search cards, gallery,
 * lightbox) and mybike.css's header section (header-action). Nothing in
 * this file should redeclare a selector that plugin or the base theme
 * layer already owns — see the top-of-file note.
 */

/* Popular category shortcuts */
.mybike-section--quick-categories { background: var(--mb-paper); border-bottom: 1px solid var(--mb-line); }
.mybike-quick-categories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mybike-quick-category { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--mb-line); border-radius: var(--mb-radius); background: var(--mb-paper); color: var(--mb-ink); text-decoration: none; font-weight: 700; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.mybike-quick-category:hover { transform: translateY(-2px); border-color: var(--mb-ink); box-shadow: var(--mb-lift); }
.mybike-quick-category span:last-child { color: var(--mb-red); font-size: 1.15rem; }
/* Responsive column counts for this grid are owned by responsive.css
   (see its 1100px/782px/480px breakpoints) — not duplicated here, since
   a second competing breakpoint for the same grid at a different width
   previously made the column count flip depending on which stylesheet
   happened to load last. */