/**
 * Toba Market — Marketplace Page Patterns
 * Hero search, section headers, breadcrumbs, pagination, seller card,
 * listing-detail gallery/meta, safety tips. Page-specific but reused
 * across homepage/category/location/listing-detail templates.
 */

.tts-market-hero {
	text-align: center;
	padding: var(--tts-space-8) var(--tts-space-4);
	background: linear-gradient(135deg, var(--tts-primary) 0%, var(--tts-primary-hover) 100%);
	border-radius: var(--tts-radius-lg);
	color: var(--tts-text-inverse);
	margin-bottom: var(--tts-space-8);
}
.tts-market-hero h1 { color: var(--tts-text-inverse); }
.tts-market-hero__tagline { color: rgba(255,255,255,0.85); margin-bottom: var(--tts-space-5); }
.tts-market-hero .tts-market-search-bar { max-width: 640px; margin: 0 auto; }

.tts-market-section { margin-bottom: var(--tts-space-8); }
.tts-market-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tts-space-3); border-bottom: 2px solid var(--tts-border); padding-bottom: var(--tts-space-2); margin-bottom: var(--tts-space-4); }
.tts-market-section__header h2 { margin-bottom: 0; }
.tts-market-section__more { font-size: var(--tts-font-size-sm); white-space: nowrap; }

/* ---- Breadcrumbs ---- */
.tts-market-breadcrumbs { margin-bottom: var(--tts-space-4); font-size: var(--tts-font-size-sm); color: var(--tts-text-muted); }
.tts-market-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: 4px; }
.tts-market-breadcrumbs li { display: flex; align-items: center; gap: 4px; }
.tts-market-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 4px; color: var(--tts-border-strong); }
.tts-market-breadcrumbs a { color: var(--tts-text-muted); }
.tts-market-breadcrumbs [aria-current="page"] { color: var(--tts-text); font-weight: 600; }

/* ---- Pagination ---- */
.tts-market-pagination { display: flex; gap: var(--tts-space-2); justify-content: center; margin-top: var(--tts-space-6); flex-wrap: wrap; }
.tts-market-pagination__item {
	padding: var(--tts-space-2) var(--tts-space-4);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-md);
	text-decoration: none;
	color: var(--tts-text);
	font-size: var(--tts-font-size-sm);
	min-width: 40px;
	text-align: center;
}
.tts-market-pagination__item:hover { background: var(--tts-background); text-decoration: none; }
.tts-market-pagination__item[aria-current="page"] { background: var(--tts-primary); color: var(--tts-text-inverse); border-color: var(--tts-primary); }
.tts-market-pagination__item[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---- Listing detail ---- */
.tts-market-listing-detail__header { margin-bottom: var(--tts-space-4); }
.tts-market-listing-detail__price { font-size: var(--tts-font-size-2xl); font-weight: 800; color: var(--tts-primary); margin: var(--tts-space-1) 0; }
.tts-market-listing-detail__meta { display: flex; flex-wrap: wrap; gap: var(--tts-space-3); font-size: var(--tts-font-size-sm); color: var(--tts-text-muted); }
.tts-market-listing-detail__layout { display: grid; grid-template-columns: 1fr; gap: var(--tts-space-6); }

.tts-market-gallery__main {
	aspect-ratio: 4/3;
	background: var(--tts-background);
	border-radius: var(--tts-radius-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--tts-space-2);
}
/* object-fit: cover — fills the frame completely edge-to-edge,
   instead of "contain" (which fits the whole photo inside the frame,
   letterboxing around it). Product photos commonly have their own
   white background baked in, so "contain" was showing that white
   background as a visible boxed border against the dark theme — a
   real, reported visual issue. "cover" trades a small chance of
   cropping the very edge of an unusually-shaped photo for a clean,
   seamless, edge-to-edge look, which is the right tradeoff here. */
.tts-market-gallery__main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.tts-market-gallery__thumbs { display: flex; gap: var(--tts-space-2); overflow-x: auto; padding-bottom: 4px; }
.tts-market-gallery__thumbs button {
	border: 2px solid transparent;
	border-radius: var(--tts-radius-sm);
	padding: 0;
	background: none;
	cursor: pointer;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
}
.tts-market-gallery__thumbs button.is-active { border-color: var(--tts-primary); }
.tts-market-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.tts-market-item-details { border: 1px solid var(--tts-border); border-radius: var(--tts-radius-md); overflow: hidden; }
.tts-market-item-details dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.tts-market-item-details dt { padding: var(--tts-space-3); background: var(--tts-background); font-weight: 600; font-size: var(--tts-font-size-sm); border-top: 1px solid var(--tts-border); }
.tts-market-item-details dd { padding: var(--tts-space-3); margin: 0; font-size: var(--tts-font-size-sm); border-top: 1px solid var(--tts-border); }
.tts-market-item-details dt:first-of-type, .tts-market-item-details dd:first-of-type { border-top: none; }

/* ---- Seller card ---- */
.tts-market-seller-card { background: var(--tts-surface); border: 1px solid var(--tts-border); border-radius: var(--tts-radius-md); padding: var(--tts-space-4); }
.tts-market-seller-card__name { font-weight: 700; font-size: var(--tts-font-size-lg); margin-bottom: 2px; }
.tts-market-seller-card__meta { font-size: var(--tts-font-size-sm); color: var(--tts-text-muted); margin-bottom: var(--tts-space-3); }
.tts-market-seller-card__actions { display: flex; flex-direction: column; gap: var(--tts-space-2); }

.tts-market-contact-reveal { display: flex; align-items: center; gap: var(--tts-space-2); flex-wrap: wrap; }
.tts-market-contact-reveal__value { font-weight: 700; letter-spacing: 0.02em; }

/* ---- Safety tips ---- */
.tts-market-safety-tips { background: var(--tts-warning-bg); border: 1px solid var(--tts-warning); border-radius: var(--tts-radius-md); padding: var(--tts-space-4); }
.tts-market-safety-tips h3 { color: var(--tts-warning); }
.tts-market-safety-tips ul { margin: 0; padding-inline-start: var(--tts-space-5); }
.tts-market-safety-tips li { margin-bottom: var(--tts-space-1); font-size: var(--tts-font-size-sm); }

/* How it works */
.tts-market-how-it-works ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--tts-space-4); counter-reset: how-it-works; }
.tts-market-how-it-works li { position: relative; padding-inline-start: var(--tts-space-10); }
.tts-market-how-it-works li::before {
	counter-increment: how-it-works;
	content: counter(how-it-works);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 28px; height: 28px; line-height: 28px;
	text-align: center;
	background: var(--tts-primary);
	color: var(--tts-text-inverse);
	border-radius: 50%;
	font-weight: 700;
}
.tts-market-how-it-works p { margin: 4px 0 0; color: var(--tts-text-muted); font-size: var(--tts-font-size-sm); }

@media (min-width: 1024px) {
	.tts-market-listing-detail__layout { grid-template-columns: 2fr 1fr; align-items: start; }
	.tts-market-how-it-works ol { flex-direction: row; }
	.tts-market-how-it-works li { flex: 1; }
}

/* ---- Phase 7: Search & Filters ---- */

.tts-market-search-hero-bar { display: flex; gap: var(--tts-space-2); margin-bottom: var(--tts-space-4); position: relative; }
.tts-market-search-hero-bar input { flex: 1; padding: var(--tts-space-3); border: 1px solid var(--tts-border); border-radius: var(--tts-radius-md); font-size: 16px; }

.tts-market-filter-chips { display: flex; flex-wrap: wrap; gap: var(--tts-space-2); margin-bottom: var(--tts-space-4); }
.tts-market-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--tts-space-1) var(--tts-space-3);
	background: var(--tts-primary-light);
	color: var(--tts-primary-hover);
	border-radius: var(--tts-radius-pill);
	font-size: var(--tts-font-size-sm);
	text-decoration: none;
}
.tts-market-filter-chip:hover { background: var(--tts-primary); color: #fff; text-decoration: none; }
.tts-market-filter-chip--clear { background: var(--tts-background); color: var(--tts-text-muted); border: 1px solid var(--tts-border); }

.tts-market-search-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--tts-space-3);
	margin-bottom: var(--tts-space-4);
}
.tts-market-search-results__count { font-size: var(--tts-font-size-sm); color: var(--tts-text-muted); margin: 0; }
.tts-market-sort-control select { padding: var(--tts-space-2) var(--tts-space-3); border: 1px solid var(--tts-border); border-radius: var(--tts-radius-md); font-size: var(--tts-font-size-sm); }

.tts-market-search-layout { display: block; }
.tts-market-search-results__main { min-width: 0; }

/* Filter panel: a drawer on mobile (fixed, off-canvas), an inline sidebar on desktop. */
.tts-market-filter-panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(320px, 85vw);
	background: var(--tts-surface);
	box-shadow: var(--tts-shadow-lg);
	overflow-y: auto;
	padding: var(--tts-space-4);
	transform: translateX(100%);
	transition: transform var(--tts-transition-fast);
	z-index: 1000;
}
.tts-market-filter-panel.is-open { transform: translateX(0); }
.tts-market-filter-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--tts-space-4); }
.tts-market-filter-panel__overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 15, 14, 0.5);
	z-index: 999;
}
.tts-market-price-range { display: flex; align-items: center; gap: var(--tts-space-2); }
.tts-market-price-range input { width: 100%; padding: var(--tts-space-2); border: 1px solid var(--tts-border); border-radius: var(--tts-radius-sm); font-size: 16px; }

/* Autocomplete suggestion dropdown */
.tts-market-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-md);
	box-shadow: var(--tts-shadow-md);
	list-style: none;
	margin: 4px 0 0;
	padding: var(--tts-space-1) 0;
	z-index: 500;
	max-height: 280px;
	overflow-y: auto;
}
.tts-market-autocomplete li a {
	display: flex;
	justify-content: space-between;
	gap: var(--tts-space-2);
	padding: var(--tts-space-2) var(--tts-space-3);
	color: var(--tts-text);
	font-size: var(--tts-font-size-sm);
}
.tts-market-autocomplete li a:hover { background: var(--tts-primary-light); text-decoration: none; }
.tts-market-autocomplete__type { color: var(--tts-text-muted); font-size: var(--tts-font-size-xs); }

@media (min-width: 1024px) {
	.tts-market-search-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--tts-space-6); align-items: start; }
	.tts-market-filter-panel {
		position: sticky;
		top: var(--tts-space-4);
		right: auto;
		width: auto;
		height: auto;
		transform: none;
		box-shadow: none;
		border: 1px solid var(--tts-border);
		border-radius: var(--tts-radius-md);
		z-index: 1;
	}
	.tts-market-filter-panel__header,
	.tts-market-filter-panel__overlay,
	[data-filter-drawer-open] {
		display: none; /* No drawer chrome needed once the panel is always visible inline. */
	}
}

/* ---- Homepage redesign: premium hero, explorer cards, sell CTA, stats, bottom nav ---- */

.tts-market-hero--premium {
	background: var(--tts-gradient-hero);
	position: relative;
	overflow: hidden;
	border-radius: var(--tts-radius-2xl);
}
.tts-market-hero--premium::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10), transparent 45%);
	pointer-events: none;
}
.tts-market-hero__kicker {
	font-size: var(--tts-font-size-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	margin-bottom: var(--tts-space-2);
}
.tts-market-hero__headline {
	font-size: clamp(1.75rem, 5vw, 3rem);
	line-height: 1.1;
	font-weight: 800;
	margin-bottom: var(--tts-space-3);
}

/* Explorer cards ("Explore the Market") — a richer variant of the category card, with description + count + arrow */
.tts-market-explorer-grid { display: grid; grid-template-columns: 1fr; gap: var(--tts-space-4); }
.tts-market-explorer-card {
	display: block;
	padding: var(--tts-space-5);
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-lg);
	text-decoration: none;
	color: var(--tts-text);
	transition: transform var(--tts-transition-fast), box-shadow var(--tts-transition-fast);
}
.tts-market-explorer-card:hover { transform: translateY(-2px); box-shadow: var(--tts-shadow-glow); text-decoration: none; color: var(--tts-text); }
.tts-market-explorer-card__icon { font-size: 2rem; margin-bottom: var(--tts-space-2); }
.tts-market-explorer-card__name { font-weight: 700; font-size: var(--tts-font-size-lg); margin-bottom: 2px; }
.tts-market-explorer-card__desc { color: var(--tts-text-muted); font-size: var(--tts-font-size-sm); margin-bottom: var(--tts-space-3); }
.tts-market-explorer-card__footer { display: flex; align-items: center; justify-content: space-between; font-size: var(--tts-font-size-sm); }
.tts-market-explorer-card__arrow { font-weight: 700; color: var(--tts-primary); }

/* Location explorer cards */
.tts-market-location-card {
	display: block;
	padding: var(--tts-space-4);
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	border-radius: var(--tts-radius-lg);
	text-decoration: none;
	color: var(--tts-text);
}
.tts-market-location-card:hover { border-color: var(--tts-primary); text-decoration: none; color: var(--tts-text); }
.tts-market-location-card__name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--tts-font-size-sm); margin-bottom: var(--tts-space-1); }
.tts-market-location-card__count { color: var(--tts-text-muted); font-size: var(--tts-font-size-sm); margin-bottom: var(--tts-space-2); }
.tts-market-location-card__cta { color: var(--tts-primary); font-weight: 600; font-size: var(--tts-font-size-sm); }

/* Sell CTA */
.tts-market-sell-cta {
	text-align: center;
	padding: var(--tts-space-10) var(--tts-space-4);
	background: var(--tts-gradient-hero);
	color: #fff;
	border-radius: var(--tts-radius-2xl);
}
.tts-market-sell-cta h2 { color: #fff; }
.tts-market-sell-cta p { color: rgba(255,255,255,0.8); }

/* Stats */
.tts-market-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tts-space-4); text-align: center; }
.tts-market-stats-grid__item { padding: var(--tts-space-4); }
.tts-market-stats-grid__number { font-size: var(--tts-font-size-2xl); font-weight: 800; color: var(--tts-primary); display: block; }
.tts-market-stats-grid__label { font-size: var(--tts-font-size-sm); color: var(--tts-text-muted); }

/* Trust points */
.tts-market-trust-grid { display: grid; grid-template-columns: 1fr; gap: var(--tts-space-4); }
.tts-market-trust-grid__item { display: flex; gap: var(--tts-space-3); }
.tts-market-trust-grid__icon { color: var(--tts-success); font-weight: 700; flex-shrink: 0; }

/* Mobile bottom navigation — app-like, safe-area aware */
.tts-market-bottom-nav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	display: flex;
	justify-content: space-around;
	background: var(--tts-surface);
	border-top: 1px solid var(--tts-border);
	padding: var(--tts-space-2) 0 calc(var(--tts-space-2) + env(safe-area-inset-bottom, 0px));
	z-index: 900;
}
.tts-market-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 0.65rem;
	color: var(--tts-text-muted);
	text-decoration: none;
	flex: 1;
	text-align: center;
}
.tts-market-bottom-nav__item span[aria-hidden] { font-size: 1.2rem; }
.tts-market-bottom-nav__item--sell {
	color: var(--tts-text-inverse);
}
.tts-market-bottom-nav__item--sell span[aria-hidden] {
	background: var(--tts-accent);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-top: -20px;
	box-shadow: var(--tts-shadow-md);
}
/* Reserve space so the fixed bottom nav never covers page content — see brief §24. Applied via a shared class on any page that renders the bottom nav. */
.tts-market-has-bottom-nav { padding-bottom: 64px; }
@media (min-width: 768px) {
	.tts-market-has-bottom-nav { padding-bottom: 0; } /* Bottom nav is hidden on desktop — see below — so no reserved space is needed there. */
}

@media (min-width: 768px) {
	.tts-market-explorer-grid { grid-template-columns: repeat(2, 1fr); }
	.tts-market-location-card__grid,
	.tts-market-stats-grid { grid-template-columns: repeat(4, 1fr); }
	.tts-market-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.tts-market-bottom-nav { display: none; } /* Bottom nav is a mobile-only pattern — desktop already has the full header. */
}
@media (min-width: 1024px) {
	.tts-market-explorer-grid { grid-template-columns: repeat(4, 1fr); }
	.tts-market-trust-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Prominent hero Sell button - unmissable on desktop, no scrolling required ---- */
.tts-market-hero__sell-cta { margin-top: 18px; text-align: center; }
.tts-market-btn--sell-hero {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--tts-accent);
	color: var(--tts-text-inverse);
	font-weight: 700;
	font-size: 1rem;
	border-radius: var(--tts-radius-pill, 999px);
	text-decoration: none;
	box-shadow: var(--tts-shadow-sm);
	transition: background-color var(--tts-transition-fast, 120ms ease), transform var(--tts-transition-fast, 120ms ease);
}
.tts-market-btn--sell-hero:hover {
	background: var(--tts-accent-hover);
	transform: translateY(-1px);
	color: var(--tts-text-inverse);
	text-decoration: none;
}
.tts-market-btn--sell-hero:active {
	transform: translateY(0);
}

/* ---- Floating "Chat with us" WhatsApp button (business inquiries) ---- */
.tts-market-whatsapp-fab {
	position: fixed;
	right: 20px;
	bottom: 84px; /* clears the mobile bottom nav bar */
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #25D366;
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: transform var(--tts-transition-fast, 120ms ease);
}
.tts-market-whatsapp-fab:hover {
	transform: scale(1.05);
	color: #fff;
	text-decoration: none;
}
.tts-market-whatsapp-fab svg { flex-shrink: 0; }
@media (min-width: 768px) {
	.tts-market-whatsapp-fab { bottom: 24px; } /* no bottom nav bar on desktop */
}
@media (max-width: 480px) {
	.tts-market-whatsapp-fab__label { display: none; } /* icon-only on very small screens */
	.tts-market-whatsapp-fab { padding: 14px; }
}

/* ---- Seller/dealer business logo on the listing detail seller card ---- */
.tts-market-seller-card__logo {
	margin-bottom: 10px;
}
.tts-market-seller-card__logo img {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

/* ---- Small seller/dealer logo badge on listing cards ---- */
.tts-market-card__seller-logo {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tts-market-card__seller-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}