/**
 * Toba Market — Account / Auth / Wizard Stylesheet
 *
 * Scope: registration, login, account dashboard, the listing-posting
 * wizard, and the "My Listings" tab — everything that is NOT part of
 * the public marketplace design system (homepage, search, category/
 * location pages, listing cards, listing detail). Those now live in
 * variables.css/base.css/layout.css/components.css/cards.css/forms.css/
 * marketplace.css, introduced in Phase 6's design-system rework — see
 * docs/PHASE_6_DESIGN_SYSTEM.md.
 *
 * This file reads its color tokens from variables.css (enqueued as a
 * dependency before this file) rather than redeclaring its own — see
 * that file for the single source of truth. Historically (Phases 3–5)
 * this file used a `--tts-market-*` variable prefix; those variables
 * have been retired in favor of `--tts-*` from the new design system,
 * and every reference below has been updated to match — there is
 * intentionally only ONE color-token source now.
 */

.tts-market {
	max-width: 480px;
	margin: 0 auto;
	padding: 16px;
	font-size: 16px;
	color: var(--tts-text);
	box-sizing: border-box;
	font-family: var(--tts-font-family);
}
.tts-market *, .tts-market *::before, .tts-market *::after {
	box-sizing: border-box;
}
.tts-market h2 { font-size: 1.4rem; margin: 0 0 12px; }
.tts-market h3 { font-size: 1.1rem; margin: 16px 0 8px; }

/* Lightweight inline notice, used throughout the Phase 3–5 auth/
   account/wizard forms. Kept distinct from the newer, richer
   .tts-market-alert component (components.css) used on public
   marketplace pages, to avoid touching every existing form view. */
.tts-market-notice {
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
	background: var(--tts-background);
	font-size: 0.95rem;
}
.tts-market-notice--error   { background: var(--tts-danger-bg); color: var(--tts-danger); }
.tts-market-notice--success { background: var(--tts-success-bg); color: var(--tts-success); }

/* Forms */
.tts-market-form { display: flex; flex-direction: column; gap: 14px; }
.tts-market-field { display: flex; flex-direction: column; gap: 6px; }
.tts-market-field label { font-weight: 600; font-size: 0.9rem; }
.tts-market-field input[type="text"],
.tts-market-field input[type="email"],
.tts-market-field input[type="tel"],
.tts-market-field input[type="password"],
.tts-market-field select,
.tts-market-field textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--tts-border);
	border-radius: 4px;
	font-size: 16px; /* avoids iOS zoom-on-focus below 16px */
}
/* A clean, on-brand focus style — without this, the browser/OS's own
   default focus outline is used instead, which can render as a heavy,
   off-brand color (e.g. orange on some Windows accent-color settings)
   depending entirely on the visitor's system, not this site's design. */
.tts-market-field input[type="text"]:focus,
.tts-market-field input[type="email"]:focus,
.tts-market-field input[type="tel"]:focus,
.tts-market-field input[type="password"]:focus,
.tts-market-field select:focus,
.tts-market-field textarea:focus {
	outline: none;
	border-color: var(--tts-primary, #0d6e63);
	box-shadow: 0 0 0 3px rgba(13, 110, 99, 0.15);
}
.tts-market-field--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.tts-market-field-note { font-size: 0.85rem; color: var(--tts-text-muted); margin: -6px 0 0; }

/* Selects get their own, more distinct treatment than plain text
   inputs - a visibly stronger border, a light background tint, and a
   custom chevron - so a dropdown reads clearly as a dropdown at rest,
   not just once focused. */
.tts-market-field select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--tts-background, #fafafa);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23555'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px;
	border: 1.5px solid var(--tts-border-strong, #b8b8b8);
	cursor: pointer;
}

.tts-market-hp { position: absolute; left: -9999px; top: -9999px; }

/* Forms/wizard buttons remain full-width on mobile (a deliberate,
   contextual override — the shared .tts-market-btn component itself,
   defined in components.css, is inline/auto-width by default so it
   also works inline on marketplace pages like the hero and cards). */
.tts-market-form .tts-market-btn,
.tts-market-wizard__nav .tts-market-btn {
	width: 100%;
}
@media (min-width: 768px) {
	.tts-market-wizard__nav .tts-market-btn { width: auto; flex: 1; min-width: 120px; }
}

.tts-market-auth-links { margin-top: 16px; text-align: center; font-size: 0.9rem; }

/* Dashboard */
.tts-market-dashboard__welcome { margin-bottom: 16px; }
.tts-market-progress {
	background: var(--tts-border);
	border-radius: 8px;
	height: 10px;
	overflow: hidden;
	margin: 8px 0 4px;
}
.tts-market-progress__bar { background: var(--tts-accent); height: 100%; }
.tts-market-progress__label { font-size: 0.85rem; color: var(--tts-text-muted); margin: 0; }

.tts-market-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--tts-border);
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.tts-market-tabs__item {
	padding: 8px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--tts-text);
	background: var(--tts-surface);
}
.tts-market-tabs__item.is-active { background: var(--tts-primary); color: #fff; }
.tts-market-tabs__item--logout { margin-left: auto; color: var(--tts-danger); background: transparent; }

.tts-market-seller-profile__meta { list-style: none; padding: 0; margin: 12px 0; }
.tts-market-seller-profile__meta li { padding: 4px 0; font-size: 0.95rem; }

/* ---- Listing images (edit form) ---- */
.tts-market-listing-images {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0;
}
.tts-market-listing-images__item {
	text-align: center;
	font-size: 0.8rem;
}
.tts-market-listing-images__item img {
	display: block;
	border-radius: 4px;
	max-width: 100%;
	height: auto;
}
.tts-market-listing-images__item a { color: var(--tts-danger); }

.tts-market-my-listings { list-style: none; padding: 0; margin: 0; }
.tts-market-my-listings__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--tts-border);
	font-size: 0.95rem;
}
.tts-market-my-listings__item:last-child { border-bottom: none; }

/* ---- Phase 5: Multi-step listing wizard ---- */

.tts-market-wizard__progress {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	gap: 4px;
}
.tts-market-wizard__progress li {
	flex: 1;
	text-align: center;
	font-size: 0.7rem;
	color: #999;
}
.tts-market-wizard__progress li span {
	display: block;
	width: 26px;
	height: 26px;
	line-height: 26px;
	border-radius: 50%;
	background: #eee;
	color: #777;
	margin: 0 auto 4px;
	font-weight: 700;
}
.tts-market-wizard__progress li.is-active span { background: var(--tts-primary); color: #fff; }
.tts-market-wizard__progress li.is-active { color: var(--tts-text); font-weight: 600; }
.tts-market-wizard__progress li.is-complete span { background: var(--tts-accent); color: #fff; }

.tts-market-wizard__step {
	border: none;
	padding: 0;
	margin: 0 0 20px;
}
.tts-market-wizard__step legend {
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 12px;
	padding: 0;
}

.tts-market-category-grid,
.tts-market-category-subgrid > div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tts-market-category-card,
.tts-market-category-chip {
	padding: 10px 14px;
	border: 1px solid var(--tts-border);
	border-radius: 20px;
	background: var(--tts-surface);
	color: var(--tts-text, #222); /* Explicit — never rely on inherited button text color. Without this, a theme's own default button styling (e.g. white text on solid buttons) can combine with this background to make the label invisible. */
	font-size: 0.9rem;
	cursor: pointer;
}
.tts-market-category-card.is-selected,
.tts-market-category-chip.is-selected {
	background: var(--tts-primary);
	color: #fff;
	border-color: var(--tts-primary);
}
.tts-market-category-subgrid { margin-top: 14px; }
.tts-market-wizard__selected-category {
	margin-top: 12px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tts-primary);
}

.tts-market-photo-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}
.tts-market-photo-tile {
	position: relative;
	width: 90px;
	height: 90px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--tts-border);
}
.tts-market-photo-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tts-market-photo-tile__remove {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}
.tts-market-photo-tile__remove:hover { background: rgba(0,0,0,0.85); }
/* The "+" add-more tile — a real <button>, not a native file input, so
   it can be styled consistently across browsers; it just delegates
   the click to the hidden real file input. */
.tts-market-photo-tile--add {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tts-background, #f5f5f5);
	border: 2px dashed var(--tts-border-strong, #ccc);
	color: var(--tts-text-muted, #888);
	font-size: 2rem;
	cursor: pointer;
	transition: border-color var(--tts-transition-fast, 120ms ease), color var(--tts-transition-fast, 120ms ease);
}
.tts-market-photo-tile--add:hover {
	border-color: var(--tts-primary, #0d6e63);
	color: var(--tts-primary, #0d6e63);
}

.tts-market-listing-preview { border: 1px solid var(--tts-border); border-radius: 6px; padding: 16px; }
.tts-market-listing-preview__price { font-size: 1.2rem; font-weight: 700; color: var(--tts-primary); }
.tts-market-listing-preview__meta { font-size: 0.85rem; color: var(--tts-text-muted); }
.tts-market-listing-preview__images { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tts-market-listing-preview__images img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; }

.tts-market-wizard__pipeline {
	list-style: decimal;
	padding-left: 20px;
	margin: 10px 0;
}

/* ---- Phase 8: Dashboard summary cards, My Listings, image management ---- */

.tts-market-dashboard-summary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.tts-market-summary-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 8px;
	background: var(--tts-surface);
	border-radius: 8px;
	text-decoration: none;
	color: var(--tts-text);
}
.tts-market-summary-card.is-active { background: var(--tts-primary); color: #fff; }
.tts-market-summary-card__count { font-size: 1.4rem; font-weight: 800; }
.tts-market-summary-card__label { font-size: 0.8rem; }

.tts-market-my-listings__item { display: flex; gap: 12px; }
.tts-market-my-listings__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--tts-background, #f0f0f0);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tts-market-my-listings__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tts-market-my-listings__body { flex: 1; min-width: 0; }
.tts-market-my-listings__actions { display: flex; gap: 8px; margin-top: 8px; }

.tts-market-listing-images__item { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.tts-market-listing-images__actions { display: flex; gap: 6px; font-size: 0.75rem; flex-wrap: wrap; justify-content: center; }
.tts-market-image-move {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--tts-border, #ddd);
	border-radius: 4px;
	text-decoration: none;
	font-size: 1.1rem;
}
.tts-market-image-set-primary,
.tts-market-image-remove { text-decoration: underline; }

@media (min-width: 480px) {
	.tts-market-dashboard-summary { grid-template-columns: repeat(5, 1fr); }
}

/* ---- Phase 9: Notifications list (account dashboard) ---- */
.tts-market-notifications-list { list-style: none; padding: 0; margin: 0 0 16px; }
.tts-market-notifications-list__item {
	border-bottom: 1px solid var(--tts-border, #eee);
	padding: 12px 0;
}
.tts-market-notifications-list__item a { color: inherit; text-decoration: none; display: block; }
.tts-market-notifications-list__item p { margin: 4px 0; font-size: 0.9rem; color: var(--tts-text-muted, #666); }
.tts-market-notifications-list__item.is-unread { background: var(--tts-primary-light, #eef7f5); padding-left: 8px; padding-right: 8px; border-radius: 4px; }
.tts-market-notifications-list__item.is-unread strong::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tts-accent, #e08c1d);
	margin-right: 6px;
}

/* ---- Buy/Sell role toggle (registration) ---- */
.tts-market-role-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.tts-market-role-toggle__option {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px;
	border: 2px solid var(--tts-border, #ddd);
	border-radius: 8px;
	cursor: pointer;
	font-weight: normal;
}
.tts-market-role-toggle__option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.tts-market-role-toggle__option strong { font-size: 0.95rem; }
.tts-market-role-toggle__option span { font-size: 0.78rem; color: var(--tts-text-muted, #888); }
.tts-market-role-toggle__option.is-selected {
	border-color: var(--tts-primary, #0d6e63);
	background: var(--tts-primary-light, #eef7f5);
}

/* ---- Back to Home link (account/auth/wizard pages, which don't render the full marketplace header) ---- */
.tts-market-back-home {
	margin: 0 0 20px;
}
.tts-market-back-home a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--tts-surface);
	border: 1px solid var(--tts-border-strong);
	border-radius: var(--tts-radius-pill, 999px);
	color: var(--tts-text);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color var(--tts-transition-fast, 120ms ease), background-color var(--tts-transition-fast, 120ms ease);
}
.tts-market-back-home a:hover {
	background: var(--tts-background);
	border-color: var(--tts-primary);
	color: var(--tts-primary);
	text-decoration: none;
}

/* ---- Product video (optional) ---- */
.tts-market-product-video video {
	display: block;
	background: #000;
}

/* ---- Post Ad wizard: "uploading, please wait" indicator ---- */
.tts-market-wizard__uploading-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 0.9rem;
	color: var(--tts-text-muted, #666);
}
.tts-market-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--tts-border, #ddd);
	border-top-color: var(--tts-primary, #0d6e63);
	border-radius: 50%;
	animation: tts-market-spin 0.8s linear infinite;
	flex-shrink: 0;
}
@keyframes tts-market-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.tts-market-spinner { animation: none; }
}

/* ---- Listing detail badges (Featured/Urgent) ---- */
.tts-market-listing-detail__badges { display: flex; gap: 8px; margin-bottom: 8px; }

/* ---- Sell landing (logged-out "+ Sell" click: choose Log In or Create Account) ---- */
.tts-market-sell-landing__card {
	max-width: 480px;
	margin: 40px auto;
	padding: 40px 32px;
	background: var(--tts-surface);
	border: 1px solid var(--tts-border, #e5e5e5);
	border-radius: var(--tts-radius-lg, 12px);
	text-align: center;
	box-shadow: var(--tts-shadow-md, 0 8px 30px rgba(0,0,0,0.06));
}
.tts-market-sell-landing__card h1 {
	margin: 0 0 8px;
	font-size: 1.6rem;
}
.tts-market-sell-landing__card p {
	margin: 0 0 24px;
	color: var(--tts-text-muted, #666);
}
.tts-market-sell-landing__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Explicit, high-specificity color rules — never rely on inheriting
   from .tts-market-btn--primary/--secondary alone here, since a
   button with no visible text (matching the earlier subcategory-chip
   invisible-text bug class) was reported on this exact screen. */
.tts-market-sell-landing__options .tts-market-btn--primary {
	background: var(--tts-primary, #0d6e63) !important;
	color: #ffffff !important;
}
.tts-market-sell-landing__options .tts-market-btn--secondary {
	background: var(--tts-surface) !important;
	color: var(--tts-text, #222) !important;
	border: 1px solid var(--tts-border-strong, #ccc) !important;
}
.tts-market-btn--large {
	padding: 14px 24px;
	font-size: 1rem;
}
@media (min-width: 480px) {
	.tts-market-sell-landing__options { flex-direction: row; justify-content: center; }
}

/* ---- Advertisement slots ---- */
.tts-market-ad-slot {
	text-align: center;
	margin: 16px 0;
}
.tts-market-ad-slot__label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tts-text-muted, #999);
	margin-bottom: 4px;
}
.tts-market-ad-slot img {
	border-radius: 6px;
	display: inline-block;
}
.tts-market-ad-slot--listing_sidebar {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Listing share buttons (WhatsApp/Facebook/X/Copy Link/native) ---- */
.tts-market-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}
.tts-market-share__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tts-text-muted, #666);
	margin-right: 2px;
}
.tts-market-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var(--tts-border, #ddd);
	background: var(--tts-surface);
	color: var(--tts-text, #222);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tts-transition-fast, 120ms ease), transform var(--tts-transition-fast, 120ms ease);
}
.tts-market-share__btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}
.tts-market-share__btn--whatsapp { color: #25D366; border-color: #25D366; }
.tts-market-share__btn--whatsapp:hover { background: #25D366; color: #fff; }
.tts-market-share__btn--facebook { color: #1877F2; border-color: #1877F2; }
.tts-market-share__btn--facebook:hover { background: #1877F2; color: #fff; }
.tts-market-share__btn--twitter { color: #111; border-color: #111; }
.tts-market-share__btn--twitter:hover { background: #111; color: #fff; }
.tts-market-share__btn--copy { color: var(--tts-primary, #0d6e63); border-color: var(--tts-primary, #0d6e63); }
.tts-market-share__btn--copy:hover { background: var(--tts-primary, #0d6e63); color: #fff; }
.tts-market-share__btn--native { color: var(--tts-text-muted, #666); }
@media (max-width: 480px) {
	.tts-market-share__btn--whatsapp span,
	.tts-market-share__btn--facebook span,
	.tts-market-share__btn--twitter span,
	.tts-market-share__btn--native span { display: none; } /* icon-only on very small screens - Copy Link keeps its label since it shows the "Copied!" confirmation */
	.tts-market-share__btn { padding: 8px; }
}

/* ---- Seller/dealer public profile page ---- */
.tts-market-seller-page__header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}
.tts-market-seller-page__logo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--tts-border, #ddd);
}
.tts-market-seller-page__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tts-market-seller-page__business-name {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--tts-text-muted, #555);
	margin: 2px 0 8px;
}
.tts-market-seller-page__about {
	margin: 16px 0;
	padding: 16px;
	background: var(--tts-background, #f7f7f7);
	border-radius: 8px;
}
.tts-market-seller-page__about h2,
.tts-market-seller-page__about h3 {
	margin-top: 0;
}
@media (max-width: 480px) {
	.tts-market-seller-page__header { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- Multi-ad grid (e.g. homepage rectangle slot): carousel on
   mobile, 3-column grid on desktop - a genuinely different responsive
   behavior from the listing carousels (which stay a horizontal scroll
   at every size), so this is its own class rather than reusing
   .tts-market-carousel directly. ---- */
.tts-market-ad-grid {
	display: flex;
	gap: var(--tts-space-4, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.tts-market-ad-grid__item {
	flex: 0 0 auto;
	width: 260px;
	scroll-snap-align: start;
}
@media (min-width: 900px) {
	.tts-market-ad-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow-x: visible;
	}
	.tts-market-ad-grid__item {
		width: auto;
	}
}


/* Card/section images need a subtle border to stay visible against a
   dark surface — light-mode cards relied on natural contrast against
   a white background that no longer exists anywhere on the site now
   that dark mode is the uniform, site-wide default (see variables.css). */
.tts-market-card,
.tts-market-explorer-card,
.tts-market-location-card {
	border-color: var(--tts-border);
}

/* ---- Compact search-bar-first homepage layout (replaces the old hero) ---- */
.tts-market-quicksearch {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 0 0 var(--tts-space-4);
}
.tts-market-search-bar--compact {
	flex: 1 1 420px;
	display: flex;
	gap: 8px;
}
.tts-market-search-bar--compact select {
	flex: 0 0 150px;
}
.tts-market-search-bar--compact input[type="search"] {
	flex: 1;
}
.tts-market-quicksearch__sell {
	flex-shrink: 0;
}
@media (max-width: 640px) {
	.tts-market-search-bar--compact { flex: 1 1 100%; flex-wrap: wrap; }
	.tts-market-search-bar--compact select { flex: 1 1 100%; }
	.tts-market-quicksearch__sell { flex: 1 1 100%; text-align: center; }
}

/* ---- Quick-access category nav tabs (Vehicles / Property) ---- */
.tts-market-quicknav {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}
.tts-market-quicknav__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: var(--tts-radius-pill, 999px);
	background: var(--tts-surface);
	border: 1px solid var(--tts-border);
	color: var(--tts-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--tts-transition-fast, 120ms ease), transform var(--tts-transition-fast, 120ms ease);
}
.tts-market-quicknav__tab:hover {
	border-color: var(--tts-primary);
	color: var(--tts-primary);
	text-decoration: none;
	transform: translateY(-1px);
}