/* MatjariIQ UI — built entirely on tokens.css variables. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/PlexArabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/PlexArabic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/PlexArabic-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/PlexArabic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/PlexArabic-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/PlexArabic-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media (max-width: 991.98px) {
  /* room for the 60px bottom nav + iOS home-indicator safe area, with breathing space */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
a { color: var(--brand-dark); }
h1, h2, h3, h4, h5 { font-weight: 600; color: var(--text); }
.mj-page-title { font-size: var(--fs-page-title); font-weight: 700; }

/* Wider canvas on desktop — the owner wants the page to breathe, not sit in a narrow column */
@media (min-width: 1200px) {
  .container { max-width: min(1560px, calc(100% - 48px)); }
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px var(--tint);
}

/* Icons */
.ic { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.2em; flex-shrink: 0; }

/* Bootstrap re-theme (kept minimal) */
.btn { border-radius: var(--r); }
/* Brand fills are bright Spring green: text on them is always dark (--on-brand) */
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand-down); --bs-btn-hover-border-color: var(--brand-down);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-down); --bs-btn-active-border-color: var(--brand-down);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-disabled-color: var(--on-brand);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-dark); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-down); --bs-btn-active-border-color: var(--brand-down);
  --bs-btn-active-color: var(--on-brand);
}
.btn-success, .btn-outline-success {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--on-brand); --bs-btn-hover-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand-down); --bs-btn-hover-border-color: var(--brand-down);
}
.btn-outline-success { --bs-btn-bg: transparent; --bs-btn-color: var(--brand-dark); }
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); }
.text-danger { color: var(--danger) !important; }
.card { border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.pagination { --bs-pagination-color: var(--brand); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); }
.text-muted { color: var(--text-2) !important; }

/* Price: loudest text on every card (compact — cards run 7-up on desktop) */
.mj-price {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Header ---------- */
.mj-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.mj-header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 56px;
}
/* Logo: full MatjariIQ image (img/logo.png, transparent background) */
.mj-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.mj-logo img { height: 30px; width: auto; display: block; }
.mj-nav { display: flex; align-items: center; gap: 2px; }
.mj-nav a, .mj-nav button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--fs-meta);
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  border-radius: 999px;
  transition: background 150ms, color 150ms;
}
.mj-nav a .ic { width: 15px; height: 15px; }
.mj-nav a:hover, .mj-nav button:hover { background: var(--tint); color: var(--brand-dark); }
.mj-nav a.active { background: var(--tint); color: var(--brand-dark); }
.mj-lang-btn { min-height: 44px; }

/* Post listing — the camera button (Instagram-style) */
/* Owner (2026-08-14): soft-green post button — tint fill, dark-green text, larger camera */
.btn-post {
  background: var(--tint);
  color: var(--brand-dark);
  font-weight: 700;
  border: 1.5px solid var(--tint);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: border-color 150ms, transform 120ms;
}
.btn-post .ic { width: 20px; height: 20px; }
.btn-post:hover { border-color: var(--brand); color: var(--brand-dark); transform: translateY(-1px); }

/* Logged-in user: name chip in the header, visible on every screen size */
.mj-nav a.mj-user-chip { color: var(--brand-dark); }
.mj-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .mj-user-name { max-width: 90px; }
}

.mj-header-desktop { display: none; }
@media (min-width: 992px) { .mj-header-desktop { display: flex; } }

/* Compact header on mid-size desktops: everything shrinks together so the
   nav never wraps or overflows before the mobile layout kicks in. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .mj-header-inner { gap: var(--s-2); }
  .mj-logo img { height: 24px; }
  .mj-nav { gap: 0; }
  .mj-nav a, .mj-nav button {
    font-size: 12px;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
  }
  .mj-nav a .ic { width: 13px; height: 13px; }
  .btn-post { font-size: 12px; padding: var(--s-1) var(--s-3); }
  .btn-post .ic { width: 16px; height: 16px; }
  .mj-lang-select { font-size: 12px; }
}

/* ---------- Home top: scope pills + search ---------- */
.mj-scope {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mj-scope::-webkit-scrollbar { display: none; }
.mj-scope button, .mj-scope > a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  text-decoration: none;
  transition: all 120ms;
}
.mj-scope button .ic, .mj-scope > a .ic { width: 14px; height: 14px; }
/* Owner (2026-08-14): scope pills stay neutral — no green fills here */
.mj-scope button:hover, .mj-scope > a:hover { border-color: var(--text-2); color: var(--text); }
.mj-scope button.active { background: var(--bg-2); border-color: var(--text-2); color: var(--text); }

.mj-searchbar {
  display: flex;
  gap: var(--s-2);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 6px;
  transition: border-color 150ms, box-shadow 150ms;
  box-shadow: 0 1px 4px rgba(20, 25, 30, 0.04);
}
.mj-searchbar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--tint); }
.mj-searchbar .mj-searchbar-ic {
  align-self: center;
  margin-inline-start: var(--s-3);
  color: var(--text-2);
  display: flex;
}
.mj-searchbar .mj-searchbar-ic .ic { width: 17px; height: 17px; }
.mj-searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
  font-size: var(--fs-body);
}
.mj-searchbar input:focus { outline: none; }
.mj-searchbar .btn { min-height: 44px; border-radius: calc(var(--r) - 5px); display: inline-flex; align-items: center; gap: var(--s-1); padding-inline: var(--s-6); }

.mj-chips {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--s-1);
}
.mj-chips::-webkit-scrollbar { display: none; }
.mj-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: background 150ms;
}
.mj-chip:hover { background: var(--tint); color: var(--brand-dark); border-color: var(--brand); }
.mj-chip.active { color: var(--brand-dark); border-color: var(--brand); background: var(--tint); font-weight: 600; }
.mj-chip .ic { color: var(--brand-dark); }

.mj-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  margin-block: var(--s-6) var(--s-3);
}
.mj-section-head h2 { font-size: 19px; font-weight: 700; margin: 0; }
.mj-section-head a { font-size: var(--fs-meta); text-decoration: none; }

/* ---------- Listing card ---------- */
.mj-card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow 150ms;
  height: 100%;
}
@media (hover: hover) {
  .mj-card:hover { box-shadow: var(--shadow-card-hover); color: var(--text); }
}
.mj-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--line); }
.mj-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* In-card photo browsing: arrows + dots sit above the stretched link */
.mj-card-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85); color: var(--text);
  opacity: 0; transition: opacity 150ms;
}
.mj-card-nav-prev { left: var(--s-2); }
.mj-card-nav-next { right: var(--s-2); }
.mj-card:hover .mj-card-nav, .mj-card-nav:focus-visible { opacity: 1; }
@media (hover: none) { .mj-card-nav { opacity: 1; } } /* always visible on touch */
.mj-card-nav .ic { width: 14px; height: 14px; }
.mj-card-dots {
  position: absolute; bottom: var(--s-2); left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.mj-card-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.mj-card-dots span.active { background: #fff; }
.mj-card-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #3C4650; background: linear-gradient(145deg, #E8EBEE, #D5DAE0);
}
/* Small icon in a frosted circle — subtle, never shouting */
.mj-card-noimg .ic {
  width: 32px; height: 32px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Featured = a quiet star chip on the photo; the label only appears as a
   hover tooltip (title attr) — owner request 2026-08-13, no text on the image. */
/* Owner (2026-08-14): featured = a plain small green star, no circle/chip behind it */
.mj-badge-featured {
  position: absolute;
  z-index: 2;
  top: var(--s-2);
  inset-inline-start: var(--s-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.mj-badge-featured .ic { width: 15px; height: 15px; }
.mj-fav-btn {
  position: absolute;
  z-index: 2;
  top: 0;
  inset-inline-end: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.mj-fav-btn .ic { width: 17px; height: 17px; }
.mj-fav-btn.active { color: var(--heart); }
.mj-card-body { padding: var(--s-2) var(--s-3) var(--s-3); }
.mj-card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-block: 2px;
}
.mj-card-meta {
  color: var(--text-2);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid: dense marketplace grid — 7-up on wide desktop, stacking row under row, 2-up mobile */
.mj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
@media (min-width: 768px) { .mj-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
@media (min-width: 992px) { .mj-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .mj-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1500px) { .mj-grid { grid-template-columns: repeat(7, 1fr); } }

/* ---------- Bottom navigation (mobile only) ---------- */
.mj-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1030;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 992px) { .mj-bottomnav { display: none; } }
.mj-bottomnav > a,
.mj-bnav-menu > a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 11px;
  min-width: 44px;
}
.mj-bottomnav > a .ic,
.mj-bnav-menu > a .ic { width: 22px; height: 22px; }
.mj-bottomnav > a.active,
.mj-bnav-menu > a.active { color: var(--brand-dark); }
/* Account tab: a dropup menu (same items as the header account dropdown) */
.mj-bnav-menu { flex: 1; display: flex; min-width: 44px; }
.mj-bnav-menu > a { width: 100%; }
.mj-bnav-menu > a::after { display: none; } /* no Bootstrap caret on the tab */
.mj-bottomnav .mj-post-fab {
  position: relative;
}
.mj-bottomnav .mj-post-fab span.mj-fab-circle {
  width: 56px; height: 56px;
  margin-top: -24px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.mj-bottomnav .mj-post-fab .ic { width: 24px; height: 24px; }

/* ---------- Two-column page: sidebar + content ---------- */
.mj-page { display: flex; gap: var(--s-6); align-items: flex-start; }
.mj-page-main { flex: 1; min-width: 0; }
.mj-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.mj-side-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.mj-side-title {
  font-size: var(--fs-meta);
  color: var(--text-2);
  margin-bottom: var(--s-2);
}
.mj-side-link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: calc(var(--r) - 4px);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: background 150ms;
}
.mj-side-link:hover { background: var(--bg-2); color: var(--brand-dark); }
.mj-side-link.active { background: var(--tint); color: var(--brand-dark); font-weight: 600; }
.mj-side-link .ic { color: var(--text-2); }
.mj-side-link.active .ic { color: var(--brand-dark); }
.mj-side-count {
  color: var(--text-2);
  font-size: var(--fs-meta);
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}
/* Sidebar "Post listing" — always the green camera button */
.mj-side-post {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--tint);
  color: var(--brand-dark);
  font-weight: 700;
  border: 1.5px solid var(--tint);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  min-height: 44px;
  text-decoration: none;
  margin-bottom: var(--s-2);
  transition: background 150ms;
}
.mj-side-post:hover { border-color: var(--brand); color: var(--brand-dark); }
.mj-side-post .ic { width: 20px; height: 20px; }

/* ---------- Mobile: sidebar opens as a full-screen sheet from the hamburger button ---------- */
.mj-side-toggle { display: none; }
.mj-side-sheet-head { display: none; }
@media (max-width: 991.98px) {
  /* The hamburger button — prominent, sits at the very top of the page content */
  .mj-side-toggle {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    min-height: 48px;
    margin-bottom: var(--s-3);
    background: var(--tint);
    border: 1.5px solid var(--brand);
    border-radius: var(--r);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: var(--fs-body);
    padding: var(--s-2) var(--s-4);
  }
  .mj-side-toggle .ic:first-child { width: 18px; height: 18px; }
  .mj-side-toggle .ic:last-child { margin-inline-start: auto; width: 13px; height: 13px; }
  .mj-sidebar.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1060;
    width: auto;
    max-height: none;
    background: var(--surface);
    overflow-y: auto;
    padding: 0 var(--s-4) 96px;
  }
  .mj-sidebar.open .mj-side-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    padding-block: var(--s-3);
    margin-inline: calc(-1 * var(--s-4));
    padding-inline: var(--s-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s-3);
    font-size: var(--fs-card-title);
    font-weight: 700;
  }
  .mj-side-sheet-head button {
    border: 0;
    background: var(--bg-2);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
  }
}

/* ---------- Sidebar filters (sahibinden-style vertical stack) ---------- */
/* The category tree: subcategories nest as an indented branch under the active item */
.mj-tree {
  margin: 2px 0 var(--s-2);
  margin-inline-start: calc(var(--s-2) + 8px);
  padding-inline-start: var(--s-2);
  border-inline-start: 2px solid var(--line);
}
.mj-tree .mj-side-link { padding-block: 3px; font-size: var(--fs-meta); }
.mj-tree .mj-side-link .ic { width: 14px; height: 14px; }
.mj-tree .mj-tree { margin-block: 2px; }
.mj-tree-title {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
  margin: var(--s-2) 0 2px;
  padding-inline: var(--s-2);
}

/* One collapsible section per filter, stacked under the tree */
.mj-side-filters { padding-block: 0; }
.mj-fsec { border-bottom: 1px solid var(--line); padding-block: var(--s-1); }
.mj-fsec:last-of-type { border-bottom: 0; }
.mj-fsec summary { padding-block: var(--s-2); }
.mj-fsec-body { display: flex; flex-direction: column; gap: var(--s-2); padding: 2px 2px var(--s-2); }
.mj-minmax { display: flex; align-items: center; gap: var(--s-1); }
.mj-minmax span { color: var(--text-2); }
.mj-flabel { font-size: var(--fs-meta); color: var(--text-2); margin-bottom: -4px; }
/* Spec filter sections: small leading icon in the summary + checkbox choice lists */
.mj-fsec-ic { display: inline-flex; margin-inline-end: 6px; vertical-align: -2px; }
.mj-fsec-ic .ic { width: 14px; height: 14px; }
.mj-fchecks { display: flex; flex-direction: column; gap: var(--s-1); }
.mj-fcheck { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-meta); cursor: pointer; min-height: 26px; }
.mj-fcheck input { margin: 0; flex: none; }

/* The one Search button, always in reach at the bottom of the sidebar */
.mj-side-searchbar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--s-2);
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin: 0 calc(-1 * var(--s-3)) calc(-1 * var(--s-3));
  padding: var(--s-2) var(--s-3) var(--s-3);
}
.mj-side-searchbar .btn { min-height: 40px; }

@media (max-width: 991.98px) {
  .mj-sidebar { display: none; }
  body.mj-sheet-open { overflow: hidden; }
  .mj-sidebar.open .mj-side-searchbar {
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  }
  .mj-side-searchbar .btn { min-height: 48px; }
}

/* ---------- Listing detail ---------- */
.mj-gallery-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain; /* whole photo, never cropped (owner 2026-09-01: smaller, click to enlarge) */
  background: var(--bg-2);
  border-radius: var(--r);
  display: block;
}
/* The main photo is a button that opens the lightbox */
.mj-gallery-main-btn {
  position: relative; display: block; width: 100%;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
  overflow: hidden; cursor: zoom-in;
}
.mj-gallery-main-btn .mj-gallery-main { border-radius: 0; }
.mj-gallery-zoom, .mj-gallery-count {
  position: absolute; bottom: var(--s-2);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--text);
  font-size: 12px; font-weight: 600; box-shadow: var(--shadow-card-hover);
}
.mj-gallery-zoom { inset-inline-end: var(--s-2); }
.mj-gallery-zoom .ic { width: 16px; height: 16px; }
.mj-gallery-count { inset-inline-start: var(--s-2); font-variant-numeric: tabular-nums; }
/* Detail page: info column beside the gallery */
.mj-detail-info .mj-detail-price { margin-top: 0; font-size: 26px; }
.mj-detail-specs .mj-spec-table td { padding: 6px 0; font-size: var(--fs-meta); }
.mj-detail-specs .mj-spec-table td:first-child { width: 45%; }
/* Lightbox */
.mj-lightbox {
  position: fixed; inset: 0; z-index: 1080;
  background: color-mix(in srgb, var(--on-brand) 94%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.mj-lightbox[hidden] { display: none; }
.mj-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: calc(var(--r) - 4px); }
.mj-lb-btn {
  position: absolute; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mj-lb-btn:hover { background: color-mix(in srgb, var(--bg) 32%, transparent); }
.mj-lb-btn .ic { width: 20px; height: 20px; }
.mj-lb-close { top: var(--s-3); inset-inline-end: var(--s-3); }
.mj-lb-prev { left: var(--s-3); top: 50%; transform: translateY(-50%); }
.mj-lb-next { right: var(--s-3); top: 50%; transform: translateY(-50%); }
.mj-lb-count { position: absolute; bottom: var(--s-3); left: 50%; transform: translateX(-50%); color: var(--bg); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
body.mj-lb-open { overflow: hidden; }
.mj-gallery-thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.mj-gallery-thumb {
  width: 72px; height: 54px;
  object-fit: cover;
  border-radius: calc(var(--r) - 4px);
  cursor: pointer;
  border: 2px solid transparent;
}
.mj-gallery-thumb.active, .mj-gallery-thumb:hover { border-color: var(--brand); }
.mj-detail-price { font-size: 24px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; margin-block: var(--s-3) var(--s-1); }
.mj-detail-title { font-size: var(--fs-page-title); font-weight: 500; margin-bottom: var(--s-1); }

.mj-spec-table { width: 100%; font-size: var(--fs-body); }
.mj-spec-table td { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.mj-spec-table tr:last-child td { border-bottom: 0; }
.mj-spec-table td:first-child { color: var(--text-2); width: 40%; }
.mj-spec-table td:last-child { font-weight: 500; }

.mj-seller-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); }
.btn-whatsapp {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-down); --bs-btn-hover-border-color: var(--brand-down);
  --bs-btn-color: var(--on-brand); --bs-btn-hover-color: var(--on-brand); --bs-btn-active-color: var(--on-brand);
  font-weight: 600;
}
.mj-report-link { font-size: var(--fs-meta); color: var(--text-2); text-decoration: none; }
.mj-report-link:hover { color: var(--danger); }

/* Sticky call/WhatsApp bar on mobile detail */
.mj-contact-bar { display: none; }
@media (max-width: 991.98px) {
  .mj-contact-bar {
    display: flex;
    gap: var(--s-2);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1035;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: var(--s-2) var(--s-4);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
  }
  .mj-contact-bar .btn { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
  body.mj-has-contact-bar .mj-bottomnav { display: none; }
  .mj-detail-desktop-contact { display: none; }
}

/* ---------- Login / OTP ---------- */
.mj-login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.mj-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: var(--s-8) var(--s-6);
}
.mj-login-logo {
  display: inline-flex;
  text-decoration: none;
}
.mj-login-logo img { height: 42px; }
.mj-phone-group { display: flex; direction: ltr; }
.mj-phone-prefix {
  display: flex; align-items: center; gap: var(--s-2);
  padding-inline: var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-inline-end: 0;
  border-start-start-radius: var(--r);
  border-end-start-radius: var(--r);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.mj-cc-flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; }
.mj-cc-select {
  border: 0; background: transparent; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  padding-inline-end: var(--s-1);
  min-height: 46px; cursor: pointer;
}
.mj-cc-select:focus { outline: none; color: var(--text); }
.mj-phone-group input {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  min-height: 48px;
}
.mj-login-divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text-2); font-size: 0.875rem;
}
.mj-login-divider::before, .mj-login-divider::after {
  content: ""; flex: 1; border-top: 1px solid var(--line);
}
.mj-wa-btn { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.mj-google-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.mj-google-btn:hover { background: var(--bg-2); border-color: var(--line); color: var(--text); }
.mj-wa-btn .ic { color: #25D366; }
.mj-otp-box {
  width: 44px; height: 52px;
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.mj-resend-hint { color: var(--text-2); font-size: var(--fs-meta); }

/* ---------- Post form ---------- */
.mj-form { max-width: 640px; margin-inline: auto; }
.mj-form-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.mj-form-section-label {
  font-size: var(--fs-meta);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--s-3);
}
.mj-form .form-control, .mj-form .form-select { min-height: 48px; border-radius: var(--r); }
.mj-form textarea.form-control { min-height: 120px; }
/* Rich description editor: light Word-like toolbar over a contenteditable box */
.mj-rt { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mj-rt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.mj-rt-btn {
  border: 0;
  background: none;
  border-radius: calc(var(--r) - 6px);
  padding: 4px 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.mj-rt-btn .ic { width: 15px; height: 15px; }
.mj-rt-btn:hover { background: var(--tint); color: var(--brand-dark); }
.mj-rt-sep { width: 1px; align-self: stretch; margin: 2px var(--s-1); background: var(--line); }
.mj-rt-colors { display: flex; gap: 6px; align-items: center; }
.mj-rt-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.mj-rt-swatch:hover { outline: 2px solid var(--tint); }
.mj-rt .mj-rt-editor {
  min-height: 140px;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: var(--s-2) var(--s-3);
}
.mj-rt .mj-rt-editor:focus { box-shadow: none; }
.mj-rt:focus-within { border-color: var(--brand-dark); box-shadow: 0 0 0 3px var(--tint); }
/* Rendered rich description on the detail page */
.mj-desc p, .mj-desc div { margin: 0 0 4px; }
.mj-desc ul, .mj-desc ol { margin: 4px 0; padding-inline-start: 22px; }
.mj-form .form-label { font-weight: 500; }

/* Image tiles */
.mj-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.mj-img-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  cursor: grab;
  border: 2px solid var(--line);
}
.mj-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mj-img-preview.dragging { opacity: 0.5; }
.mj-img-preview.starred { border-color: var(--brand); }
/* Star = choose cover photo. Dimmed on every tile; brand-filled on the starred one. */
.mj-img-star {
  position: absolute;
  top: var(--s-1);
  inset-inline-start: var(--s-1);
  width: 24px; height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 31, 35, 0.6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mj-img-star .ic { width: 13px; height: 13px; }
.mj-img-preview.starred .mj-img-star { background: var(--brand); color: var(--on-brand); }
.mj-img-remove {
  position: absolute;
  top: var(--s-1);
  inset-inline-end: var(--s-1);
  width: 24px; height: 24px;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 31, 35, 0.6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mj-img-add {
  aspect-ratio: 1;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: none;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-size: var(--fs-meta);
  cursor: pointer;
  transition: background 150ms;
}
.mj-img-add:hover { background: var(--tint); color: var(--brand-dark); border-color: var(--brand); }

/* Posting wizard polish (owner 2026-09-05): icon per step, "Step N of M" + progress bar,
   a big camera call-to-action on the photo step, fuel-dependent hint for electric cars. */
.mj-form-section-label { display: flex; align-items: center; gap: var(--s-2); }
.mj-form-section-label .ic { width: 16px; height: 16px; color: var(--brand-dark); flex-shrink: 0; }
.mj-stp-lb .ic { width: 13px; height: 13px; margin-inline-end: 4px; vertical-align: -2px; }
.mj-wiz-count { font-size: var(--fs-meta); color: var(--text-2); text-align: center; margin-top: var(--s-1); font-variant-numeric: tabular-nums; }
.mj-wiz-bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: var(--s-1) 0 var(--s-3); }
.mj-wiz-bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 2px; transition: width 200ms; }
.mj-stp.done { cursor: pointer; }
.mj-photo-cta {
  width: 100%;
  border: 2px dashed var(--brand);
  border-radius: var(--r);
  background: var(--tint);
  color: var(--brand-dark);
  padding: var(--s-6) var(--s-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  text-align: center;
  cursor: pointer;
}
.mj-photo-cta .ic { width: 40px; height: 40px; }
.mj-photo-cta b { font-size: var(--fs-body); }
.mj-photo-cta-sub { color: var(--text-2); font-size: var(--fs-meta); max-width: 440px; }
.mj-photo-cta:hover { background: var(--surface); }
.mj-photo-count { font-size: var(--fs-meta); color: var(--brand-dark); font-weight: 500; font-variant-numeric: tabular-nums; }
.mj-fuel-hint { background: var(--tint); color: var(--brand-dark); border-radius: calc(var(--r) - 6px); padding: var(--s-2) var(--s-3); font-size: var(--fs-meta); display: flex; gap: var(--s-2); align-items: center; }
.mj-fuel-hint .ic { width: 16px; height: 16px; flex-shrink: 0; }
.mj-opt { color: var(--text-2); font-weight: 400; font-size: var(--fs-meta); }

/* ---------- Admin ---------- */
.mj-admin-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mj-admin-table .table { font-size: var(--fs-meta); margin: 0; }
.mj-admin-table th { color: var(--text-2); font-weight: 500; }
.mj-admin-table th, .mj-admin-table td { padding: var(--s-2); }
.mj-admin-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: calc(var(--r) - 4px); }
.mj-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  text-align: center;
  text-decoration: none;
  display: block;
  color: var(--text);
}
.mj-stat-card .mj-stat-num { font-size: var(--fs-login-title); font-weight: 700; font-variant-numeric: tabular-nums; }
.mj-stat-card .mj-stat-label { color: var(--text-2); font-size: var(--fs-meta); }

/* Status pills */
.mj-pill {
  display: inline-block;
  font-size: var(--fs-meta);
  font-weight: 500;
  border-radius: 999px;
  padding: 2px var(--s-2);
  white-space: nowrap;
}
.mj-pill-pending { background: rgba(240, 163, 34, 0.15); color: #8A5B00; }
.mj-pill-active { background: rgba(25, 135, 84, 0.12); color: #146C43; } /* semantic green, not brand */
.mj-pill-rejected { background: rgba(201, 58, 58, 0.12); color: var(--danger); }
.mj-pill-muted { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line); }

/* Admin activity panel (owner 2026-09-05) — built from the stat cards + admin table above. */
.mj-stat-card.mj-stat-danger .mj-stat-num { color: var(--danger); }
.mj-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-4); height: 100%; }
.mj-panel-h { font-size: var(--fs-meta); color: var(--text-2); font-weight: 500; margin-bottom: var(--s-2); }
.mj-toplist { list-style: none; margin: 0; padding: 0; font-size: var(--fs-meta); }
.mj-toplist li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 5px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.mj-toplist li:last-child { border-bottom: 0; }
.mj-toplist a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.mj-toplist a:hover { color: var(--brand-dark); }
.mj-toplist b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); flex-shrink: 0; }
.mj-act-table td { vertical-align: top; white-space: nowrap; }
.mj-act-table a { color: var(--text); text-decoration: none; }
.mj-act-table a:hover { color: var(--brand-dark); }
.mj-act-path { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; vertical-align: bottom; }
.mj-act-sub { color: var(--text-2); font-size: var(--fs-meta); direction: ltr; font-variant-numeric: tabular-nums; }
.mj-act-errrow td { white-space: normal; border-top: 0; padding-top: 0; }
.mj-act-errrow summary { cursor: pointer; color: var(--danger); font-size: var(--fs-meta); }
.mj-act-err { white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; background: var(--bg-2); border-radius: calc(var(--r) - 8px); padding: var(--s-2) var(--s-3); color: var(--danger); font-size: var(--fs-meta); margin: var(--s-1) 0 0; max-height: 260px; overflow: auto; }
.mj-act-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); color: var(--brand-dark); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-meta); text-decoration: none; }
.mj-act-chip .ic { width: 12px; height: 12px; }
.mj-act-chip:hover { background: var(--bg-2); color: var(--text); }

/* ---------- Car part diagram ---------- */
.mj-car-wrap { display: flex; gap: var(--s-6); align-items: flex-start; flex-wrap: wrap; }
.mj-car-svg { width: 480px; max-width: 100%; flex-shrink: 1; }
/* Blueprint artwork; color rects are clipped by pixel-exact per-part masks */
.mj-part { stroke: none; mix-blend-mode: multiply; pointer-events: none; }
.mj-part.st-O { fill: transparent; }
.mj-part.st-L { fill: rgba(0, 200, 83, 0.5); }
.mj-part.st-P { fill: rgba(62, 123, 192, 0.55); }
.mj-part.st-C { fill: rgba(201, 58, 58, 0.5); }
.mj-hit { fill: transparent; stroke: none; }
.mj-hit.interactive { cursor: pointer; }
.mj-car-caption {
  fill: var(--text-2);
  font-size: 22px;
  font-family: var(--font);
  text-anchor: middle;
  pointer-events: none;
}
.mj-part-letter {
  fill: #fff;
  font-size: 26px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  font-family: var(--font);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 5px;
}
.mj-part-letter.hide { display: none; }
.mj-part-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--fs-meta); color: var(--text-2);
  margin-top: var(--s-2);
}
.mj-part-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.mj-part-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid #4A5560; }
/* Brush palette: the active condition applied by tapping parts */
.mj-part-brushes { gap: var(--s-2); }
.mj-brush {
  display: inline-flex; align-items: center; gap: var(--s-1);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.mj-brush:hover { background: var(--bg-2); }
.mj-brush.active { background: var(--tint); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.mj-part-dot.st-O { background: var(--surface); }
.mj-part-dot.st-L { background: var(--accent); }
.mj-part-dot.st-P { background: var(--info); }
.mj-part-dot.st-C { background: var(--danger); }
.mj-part-list { font-size: var(--fs-body); min-width: 200px; flex: 1; }
.mj-part-list h4 { font-size: var(--fs-meta); color: var(--text-2); font-weight: 400; margin: var(--s-2) 0 var(--s-1); }
.mj-part-list li { display: flex; align-items: center; gap: var(--s-2); padding-block: 2px; list-style: none; }
.mj-part-list ul { margin: 0; padding: 0; }
.mj-part-list .mj-part-allok { display: flex; align-items: center; gap: var(--s-2); color: var(--brand-dark); font-weight: 500; }
.mj-part-list .mj-part-allok .ic { width: 18px; height: 18px; }

/* ---------- Detail tabs ---------- */
.mj-tabs {
  display: flex; gap: var(--s-1);
  border-bottom: 1px solid var(--line);
  margin-block: var(--s-4) var(--s-4);
  overflow-x: auto; scrollbar-width: none;
}
.mj-tabs::-webkit-scrollbar { display: none; }
.mj-tab {
  border: 0; background: none;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-body); color: var(--text-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  transition: background 150ms;
}
.mj-tab:hover { background: var(--bg-2); }
.mj-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.mj-tabpanel { display: none; }
.mj-tabpanel.active { display: block; }

/* ---------- Feature checklist ---------- */
.mj-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px var(--s-4); }
@media (min-width: 768px) { .mj-feats { grid-template-columns: repeat(3, 1fr); } }
.mj-feat {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-body); padding-block: 3px;
}
.mj-feat .ic { color: var(--text); }
.mj-feat.off { color: var(--text-2); opacity: 0.55; }
.mj-feat-group { font-size: var(--fs-meta); color: var(--text-2); margin: var(--s-4) 0 var(--s-2); }
.mj-feat-check { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; }

/* Post form: letgo-style item-type icon grid (radio cards) and condition pills */
.mj-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
/* Marketplace sections in the type picker: heading + its own grid, everything visible */
.mj-typegroup { margin-bottom: var(--s-3); }
.mj-typegroup:last-child { margin-bottom: 0; }
.mj-typegroup-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-2);
}
.mj-typegroup-head .ic { width: 16px; height: 16px; }
.mj-type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
}
.mj-type input { position: absolute; opacity: 0; pointer-events: none; }
.mj-type-ic .ic { width: 22px; height: 22px; }
.mj-type-lb { font-size: var(--fs-meta); line-height: 1.2; }
.mj-type:hover { background: var(--bg-2); }
.mj-type:has(input:checked) { background: var(--tint); border-color: var(--brand-dark); color: var(--brand-dark); }
.mj-pillgrid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mj-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  font-size: var(--fs-body);
}
.mj-pill input { position: absolute; opacity: 0; pointer-events: none; }
.mj-pill:hover { background: var(--bg-2); }
.mj-pill:has(input:checked) { background: var(--tint); border-color: var(--brand-dark); color: var(--brand-dark); }
.mj-pill-ic { gap: 6px; }
.mj-pill-ic .ic { width: 18px; height: 18px; flex-shrink: 0; }
/* Car color pills: a real swatch beside the name (swatch values live in tokens.css as data, not palette) */
.mj-pill-color { gap: 8px; }
.mj-swatch {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  background: var(--sw-other);
}
.mj-swatch[data-c="Black"] { background: var(--sw-black); }
.mj-swatch[data-c="White"] { background: var(--sw-white); }
.mj-swatch[data-c="Gray"] { background: var(--sw-gray); }
.mj-swatch[data-c="Silver"] { background: var(--sw-silver); }
.mj-swatch[data-c="Gold"] { background: var(--sw-gold); }
.mj-swatch[data-c="Blue"] { background: var(--sw-blue); }
.mj-swatch[data-c="Red"] { background: var(--sw-red); }
.mj-swatch[data-c="Green"] { background: var(--sw-green); }
.mj-swatch[data-c="Yellow"] { background: var(--sw-yellow); }
.mj-swatch[data-c="Orange"] { background: var(--sw-orange); }
.mj-swatch[data-c="Pink"] { background: var(--sw-pink); }
.mj-swatch[data-c="Purple"] { background: var(--sw-purple); }
.mj-swatch[data-c="Brown"] { background: var(--sw-brown); }
.mj-swatch[data-c="Beige"] { background: var(--sw-beige); }
.mj-swatch[data-c="Multicolor"] {
  background: conic-gradient(var(--sw-red), var(--sw-yellow), var(--sw-green), var(--sw-blue), var(--sw-purple), var(--sw-red));
}
/* Small leading icon on spec labels (post form + detail spec table) */
.mj-spec-ic { display: inline-flex; margin-inline-end: 6px; vertical-align: -2px; }
.mj-spec-ic .ic { width: 14px; height: 14px; }

/* ---------- Map ---------- */
.mj-map { width: 100%; height: 320px; border-radius: var(--r); border: 1px solid var(--line); z-index: 0; }
.mj-map-hint { font-size: var(--fs-meta); color: var(--text-2); margin-top: var(--s-2); }
.mj-search-map { height: 65vh; min-height: 320px; }
@media (max-width: 767px) {
  .mj-map { height: 45vh; min-height: 260px; }
  .mj-search-map { height: calc(100dvh - 220px); min-height: 320px; }
}
.mj-map-pop { width: 180px; }
.mj-map-pop-imgwrap { position: relative; margin-bottom: var(--s-2); }
.mj-map-pop img {
  width: 100%; height: 96px; object-fit: cover;
  border-radius: calc(var(--r) / 2); display: block;
}
/* Popup photo arrows are always visible (no hover state inside a popup) */
.mj-map-pop-imgwrap .mj-card-nav { opacity: 1; width: 26px; height: 26px; }
.mj-map-pop-imgwrap .mj-card-dots { bottom: 4px; }
.mj-map-pop-title {
  font-weight: 600; font-size: var(--fs-meta); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mj-map-pop-price { color: var(--brand-dark); font-weight: 700; margin-top: 2px; }
.mj-map-pop-approx { font-size: var(--fs-meta); color: var(--text-2); margin-top: 2px; }
.mj-map-pop-dirs { display: flex; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--fs-meta); }
.mj-map-pop-dirs a { color: var(--brand); }
.leaflet-popup-content { margin: var(--s-2); }
.mj-map-holder { position: relative; }
.mj-map-loading {
  position: absolute; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: var(--r);
  font-size: var(--fs-meta); color: var(--text);
}

/* ---------- Misc ---------- */
.mj-empty {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  color: var(--text-2);
}
.mj-empty .ic { width: 40px; height: 40px; opacity: 0.4; margin-bottom: var(--s-3); }
.mj-empty p { margin-bottom: var(--s-4); }

.mj-banner { max-width: 100%; border-radius: var(--r); max-height: 180px; object-fit: cover; }

.mj-my-thumb { width: 96px; height: 72px; border-radius: calc(var(--r) - 4px); overflow: hidden; background: var(--line); flex-shrink: 0; }
.mj-my-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mj-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-meta);
  margin-top: var(--s-8);
  padding-block: var(--s-6);
}
.mj-footer a { color: var(--text-2); text-decoration: none; }
.mj-footer a:hover { color: var(--brand); }
@media (max-width: 991.98px) { .mj-footer { display: none; } }

.mj-sticky { position: sticky; top: 72px; }
@media (max-width: 991.98px) { .mj-sticky { position: static; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Sidebar accordions (category sub-filters) ---------- */
.mj-side-sub {
  margin: 0 0 var(--s-2);
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--line);
  margin-inline-start: var(--s-2);
}
.mj-side-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-meta);
  color: var(--text-2);
  padding: var(--s-1) var(--s-2);
  user-select: none;
  border-radius: calc(var(--r) - 4px);
}
.mj-side-acc summary:hover { background: var(--bg-2); color: var(--brand-dark); }
.mj-side-acc summary::-webkit-details-marker { display: none; }
.mj-side-acc .mj-acc-ic .ic { width: 12px; height: 12px; transition: transform 150ms; display: block; }
.mj-side-acc[open] > summary .mj-acc-ic .ic { transform: rotate(180deg); }
.mj-side-scroll { max-height: 250px; overflow-y: auto; overscroll-behavior: contain; }
.mj-side-scroll-lg { max-height: 360px; }

/* ---------- Active-filter chips above the results ---------- */
.mj-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.mj-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  min-height: 32px;
  font-size: var(--fs-meta);
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms, color 150ms;
}
.mj-filter-chip .ic { width: 12px; height: 12px; }
.mj-filter-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.mj-filter-chip-clear { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mj-filter-chip-clear:hover { color: var(--on-brand); opacity: 0.88; }

/* ---------- Grid / rows view toggle ---------- */
.mj-view-btn .ic { width: 16px; height: 16px; display: block; }
.mj-grid.mj-rows { grid-template-columns: 1fr; gap: var(--s-3); }
.mj-grid.mj-rows .mj-card { display: flex; height: auto; }
.mj-grid.mj-rows .mj-card-img {
  width: 38%;
  max-width: 300px;
  min-width: 132px;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
}
.mj-grid.mj-rows .mj-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Category nav: every category is a closed collapse with a chevron ---------- */
.mj-cat-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: calc(var(--r) - 4px);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--text);
  text-decoration: none;
  transition: background 150ms, color 150ms;
  margin-bottom: 2px;
  cursor: pointer;
  list-style: none;
}
.mj-cat-link::-webkit-details-marker { display: none; }
.mj-cat-link .ic { width: 17px; height: 17px; color: var(--text-2); flex-shrink: 0; }
.mj-cat-link:hover { background: var(--bg-2); color: var(--text); }
.mj-cat-link.active { background: var(--tint); color: var(--brand-dark); }
.mj-cat-link.active .ic { color: var(--brand-dark); }
.mj-cat-link .mj-side-count { font-weight: 500; }
/* Chevron leads the row (owner 2026-08-15): points right when closed, down when open */
.mj-cat-caret { display: flex; align-items: center; flex-shrink: 0; }
.mj-cat-caret .ic { width: 13px; height: 13px; transition: transform 150ms; transform: rotate(-90deg); }
.mj-cat-acc[open] > .mj-cat-link .mj-cat-caret .ic,
.mj-cat-sub[open] > .mj-sub-head .mj-cat-caret .ic { transform: rotate(0deg); }
.mj-cat-acc .mj-cat-link .mj-side-count { margin-inline-start: auto; }
/* Flat branch row (Shops): a section link with no subtree — blank spacer keeps icons aligned */
.mj-cat-flat .mj-side-count { margin-inline-start: auto; font-weight: 500; }
.mj-caret-blank { width: 13px; }
/* Nested sub-collapses inside a branch (Body type / Brands) — closed until touched */
.mj-cat-sub > .mj-sub-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
  padding: var(--s-1) var(--s-2);
  border-radius: calc(var(--r) - 4px);
  user-select: none;
  margin-top: var(--s-1);
}
.mj-cat-sub > .mj-sub-head::-webkit-details-marker { display: none; }
.mj-cat-sub > .mj-sub-head:hover { background: var(--bg-2); color: var(--brand-dark); }
/* Left caret on rows with children: closed (pointing right) hints there are options inside;
   on the expanded row it points down and clicking it collapses without navigating */
.mj-row-caret { display: flex; align-items: center; flex-shrink: 0; }
.mj-row-caret .ic { width: 12px; height: 12px; transition: transform 150ms; }
.mj-row-caret-closed .ic,
.mj-row-collapsed .mj-row-caret .ic { transform: rotate(-90deg); }
.mj-row-collapsed + .mj-tree { display: none; }
/* "•••" reveal row for truncated sidebar lists (data-more + mjInitShowMore) */
[data-more] > .mj-more-hidden { display: none; }
.mj-more {
  display: flex;
  justify-content: center;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text-2);
  font-weight: 700;
  letter-spacing: 2px;
  padding: var(--s-1) var(--s-2);
  border-radius: calc(var(--r) - 4px);
  cursor: pointer;
}
.mj-more:hover { background: var(--bg-2); color: var(--brand-dark); }
.mj-side-link .mj-side-count { margin-inline-start: auto; }
.mj-side-group {
  margin-top: var(--s-4);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
.mj-side-group .mj-side-title { font-weight: 700; color: var(--text); font-size: var(--fs-meta); }
.mj-side-all { font-weight: 600; color: var(--brand-dark); }
.mj-side-link .ic { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Make picker with brand logos ---------- */
.mj-makepick { position: relative; }
.mj-makepick .mj-select-proxy { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mj-makepick-btn { display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: start; }
.mj-make-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.mj-makepick-menu {
  position: absolute; top: calc(100% + 4px); inset-inline: 0;
  z-index: 20; display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  max-height: 300px; overflow-y: auto;
  padding: var(--s-1);
}
.mj-makepick.open .mj-makepick-menu { display: block; }
.mj-makepick-search { position: sticky; top: 0; z-index: 1; margin-bottom: var(--s-1); min-height: 40px !important; }
.mj-makepick-item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; border: 0; background: none; text-align: start;
  padding: 8px 10px;
  border-radius: calc(var(--r) - 4px);
  font-size: var(--fs-body); color: var(--text);
  cursor: pointer;
}
.mj-makepick-item:hover { background: var(--bg-2); }

/* ---------- Posting wizard: workflow stepper + steps ---------- */
.mj-wiz-head {
  position: sticky;
  top: 56px;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.mj-wiz-steps { flex: 1; min-width: 0; }
/* Back/forward arrows flanking the stepper */
.mj-wiz-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mj-wiz-arrow .ic { width: 16px; height: 16px; }
.mj-wiz-arrow:hover:not(:disabled) { background: var(--tint); color: var(--brand-dark); border-color: var(--brand); }
.mj-wiz-arrow:disabled { opacity: 0.35; cursor: default; }
.mj-wiz-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}
.mj-wiz-steps::-webkit-scrollbar { display: none; }
.mj-stp { display: flex; align-items: center; flex-shrink: 0; }
.mj-stp-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
  transition: all 150ms;
}
.mj-stp-dot .ic { width: 13px; height: 13px; }
.mj-stp-lb {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  margin-inline: var(--s-2) var(--s-4);
  white-space: nowrap;
}
.mj-stp-ln { width: 30px; height: 2px; border-radius: 2px; background: var(--line); margin-inline-end: var(--s-4); }
.mj-stp.done .mj-stp-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mj-stp.done .mj-stp-ln { background: var(--brand); }
.mj-stp.cur .mj-stp-dot { border-color: var(--brand); color: var(--brand-dark); }
.mj-stp.cur .mj-stp-lb { color: var(--text); }
@media (max-width: 700px) {
  .mj-wiz-steps { justify-content: flex-start; }
  .mj-stp-lb { display: none; }
  .mj-stp.cur .mj-stp-lb { display: inline; }
  .mj-stp-ln { width: 18px; margin-inline: var(--s-2); }
}
.mj-wiz-nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.mj-wiz-nav .btn { min-height: 48px; }
.mj-wiz-nav .mj-wiz-next { margin-inline-start: auto; padding-inline: var(--s-8); }
@media (max-width: 991.98px) {
  /* keep Back/Next and Submit tappable above the fixed bottom nav */
  .mj-wiz-nav, .mj-wiz-submit {
    position: sticky;
    bottom: calc(60px + env(safe-area-inset-bottom));
    z-index: 5;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: var(--s-3) 0;
    margin-top: var(--s-4);
  }
}

/* ---------- Category picker (posting step 1) ---------- */
.mj-catgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 640px) { .mj-catgrid { grid-template-columns: repeat(4, 1fr); } }
.mj-catcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--s-6) var(--s-3);
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-meta);
  transition: all 150ms;
}
.mj-catcard .mj-catcard-ic {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.mj-catcard .mj-catcard-ic .ic { width: 22px; height: 22px; }
.mj-catcard:hover {
  border-color: var(--brand);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Language dropdown in the header */
.mj-lang-select {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-meta);
  padding: 4px 10px;
  min-height: 34px;
  cursor: pointer;
}

/* View toggle: accent highlight so the active mode is obvious (not a dark fill) */
.mj-view-btn.active,
.mj-view-btn.active:hover,
.mj-view-btn.active:focus {
  background: var(--tint) !important;
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
}

/* ---------- Full-page loading overlay (img/loadin.gif) ---------- */
.mj-loading {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mj-loading-box { text-align: center; }
.mj-loading-box img { width: 110px; height: auto; display: block; margin-inline: auto; }
.mj-loading-text {
  margin-top: var(--s-2);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--brand-dark);
}

/* ---------- Listing Q&A (detail page) ---------- */

.mj-q { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
.mj-q:first-child { border-top: 0; padding-top: 0; }
.mj-q-head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-meta); }
.mj-q-body { font-size: var(--fs-body); margin-top: var(--s-1); white-space: pre-line; }
.mj-q-answer {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--tint);
  border-radius: calc(var(--r) / 2);
  font-size: var(--fs-body);
  white-space: pre-line;
}
/* Owner-only view of a question hidden from the public */
.mj-q.is-hidden .mj-q-body, .mj-q.is-hidden .mj-q-answer { opacity: 0.45; }

/* ---------- Messages: unread badge (header + bottom nav) ---------- */

.mj-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--heart); color: var(--bg);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.mj-unread-badge-nav { position: absolute; top: 2px; left: 50%; margin-left: 6px; }

/* ---------- Message thread (chat) ---------- */

.mj-chat {
  display: flex; flex-direction: column; gap: var(--s-2);
  max-height: 55vh; overflow-y: auto;
  padding-right: var(--s-1);
}
.mj-msg {
  max-width: 80%;
  align-self: flex-start;
  background: var(--bg-2);
  border-radius: var(--r);
  border-start-start-radius: 4px;
  padding: var(--s-2) var(--s-3);
}
.mj-msg.mine {
  align-self: flex-end;
  background: var(--tint);
  border-radius: var(--r);
  border-start-end-radius: 4px;
}
.mj-msg-body { font-size: var(--fs-body); white-space: pre-line; overflow-wrap: anywhere; }
.mj-msg-date { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.mj-msg-offer { display: flex; flex-direction: column; gap: 2px; }
.mj-msg-offer-label { font-size: var(--fs-meta); color: var(--text-2); }
.mj-msg-offer-amount { font-size: var(--fs-price); font-weight: 700; color: var(--brand-dark); }
.mj-offer-status { font-size: var(--fs-meta); font-weight: 600; }
.mj-offer-status.st-Pending { color: var(--text-2); }
.mj-offer-status.st-Accepted { color: var(--brand-dark); }
.mj-offer-status.st-Declined { color: var(--danger); }

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

/* ---------- Header account dropdown (owner 2026-08-16: one menu under the name) ---------- */

.mj-nav button.mj-user-chip { color: var(--brand-dark); }
.mj-user-chip .mj-caret { display: inline-flex; }
.mj-user-chip .mj-caret .ic { width: 12px; height: 12px; transition: transform 150ms; }
.mj-user-chip[aria-expanded="true"] .mj-caret .ic { transform: rotate(180deg); }
.mj-user-dropdown {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card-hover);
  padding: var(--s-2);
  min-width: 230px;
}
.mj-user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: 999px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text);
}
.mj-user-dropdown .dropdown-item .ic { width: 15px; height: 15px; color: var(--text-2); }
.mj-user-dropdown .dropdown-item:hover { background: var(--bg-2); color: var(--text); }
.mj-user-dropdown .dropdown-item.active { background: var(--tint); color: var(--brand-dark); }
.mj-user-dropdown .dropdown-item.active .ic { color: var(--brand-dark); }
.mj-user-dropdown .dropdown-divider { border-color: var(--line); opacity: 1; }
.mj-user-dropdown .mj-dd-logout { color: var(--danger); }
.mj-user-dropdown .mj-dd-logout .ic { color: var(--danger); }
.mj-user-dropdown .mj-dd-logout:hover { background: var(--bg-2); color: var(--danger); }

/* ---------- My listings: card layout with icon stat chips (owner 2026-08-16) ---------- */

.mj-my-item { transition: box-shadow 150ms; }
.mj-my-item:hover { box-shadow: var(--shadow-card-hover); }
.mj-my-item .mj-my-thumb { width: 110px; height: 84px; display: block; }
.mj-my-title {
  font-weight: 700;
  font-size: var(--fs-card-title);
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
}
.mj-my-title:hover { color: var(--brand-dark); }
.mj-my-price { color: var(--brand-dark); font-weight: 700; font-size: var(--fs-price); margin: 2px 0 var(--s-2); }

.mj-my-stats { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mj-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 3px var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
}
.mj-stat .ic { width: 14px; height: 14px; }
.mj-stat-lb { font-weight: 500; }
/* Unanswered questions want attention — the only tinted chip, and it's a link */
.mj-stat-attn { background: var(--tint); color: var(--brand-dark); }
.mj-stat-attn:hover { color: var(--brand-dark); background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--brand); }

.mj-my-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  color: var(--text-2);
  font-size: var(--fs-meta);
  margin-top: var(--s-2);
}
.mj-my-dates span { display: inline-flex; align-items: center; gap: 6px; }
.mj-my-dates .ic { width: 13px; height: 13px; }

.mj-my-actions { display: flex; flex-direction: column; gap: var(--s-2); flex-shrink: 0; align-self: center; }

@media (max-width: 575.98px) {
  .mj-my-item .card-body { flex-wrap: wrap; }
  .mj-my-actions { flex-direction: row; width: 100%; }
  .mj-my-actions .btn, .mj-my-actions form { flex: 1; }
  .mj-stat-lb { display: none; } /* icons + numbers only on small screens */
}

/* ---------- Shops (B2C storefronts, owner 2026-08-22) ---------- */

/* Directory card: the logo sits in a neutral frame, not a photo cover */
.mj-shop-card-img { background: var(--bg-2); }
.mj-shop-card-img img { object-fit: contain; padding: var(--s-3); }

/* Shop page head */
.mj-shop-head {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.mj-shop-cover {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  max-height: 220px;
}
.mj-shop-cover img { width: 100%; height: 220px; object-fit: cover; display: block; }
.mj-shop-head-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mj-shop-logo {
  width: 72px; height: 72px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mj-shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.mj-shop-logo .ic { width: 28px; height: 28px; color: var(--text-2); }

/* Featured star next to the shop name (same plain star as cards, inline position) */
.mj-badge-inline { position: static; display: inline-flex; }

/* "Sold by {shop}" chip in the listing seller box */
.mj-shop-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 2px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--tint); color: var(--brand-dark);
  font-size: var(--fs-meta); font-weight: 600; text-decoration: none;
}
.mj-shop-chip:hover { color: var(--brand-dark); border-color: var(--brand-dark); }
.mj-shop-chip .ic { width: 14px; height: 14px; }

/* ---------- Home "worlds" hero (owner 2026-08-23, rev 2): ONE big rotating card — services
   first (longest slide), then selling, then shops. Fading slides, arrows, dots. ---------- */
.mj-worlds {
  position: relative;
  height: 300px;
  border-radius: var(--r); overflow: hidden;
  margin-bottom: var(--s-4);
  background: var(--text);
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) { .mj-worlds { height: 340px; } }
.mj-world-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 500ms ease;
  pointer-events: none;
}
.mj-world-slide.is-active { opacity: 1; pointer-events: auto; }
.mj-world-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Some hero photos crop badly at the vertical center — bias these below center */
.mj-world-slide > img.mj-world-img-top { object-position: 50% 75%; }
.mj-world-slide > img.mj-world-img-mid { object-position: 50% 58%; }
/* Readability scrim: dark on the text side, fading out over the photo */
.mj-world-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text) 78%, transparent) 0%,
    color-mix(in srgb, var(--text) 45%, transparent) 45%,
    transparent 75%);
}
@media (max-width: 767px) {
  .mj-world-slide::after {
    background: linear-gradient(0deg,
      color-mix(in srgb, var(--text) 82%, transparent) 0%,
      color-mix(in srgb, var(--text) 40%, transparent) 55%,
      transparent 85%);
  }
}
.mj-world-content {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-6) 72px;
  max-width: 620px;
}
@media (max-width: 767px) {
  .mj-world-content { justify-content: flex-end; padding: var(--s-4) var(--s-4) 46px; }
}
.mj-world-content h2 { color: var(--bg); font-size: clamp(22px, 3vw, 32px); font-weight: 700; margin: 0; }
.mj-world-content p { color: var(--bg); opacity: 0.9; font-size: var(--fs-body); margin: var(--s-1) 0 var(--s-4); }
.mj-world-cta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mj-world-cta .btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.mj-world-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--s-4);
  border: 1.5px solid var(--bg); border-radius: var(--r);
  color: var(--bg); text-decoration: none;
  font-size: var(--fs-body); font-weight: 600;
  transition: background 150ms;
}
.mj-world-ghost:hover { color: var(--bg); background: color-mix(in srgb, var(--bg) 18%, transparent); }
.mj-world-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms;
}
.mj-world-arrow:hover { background: var(--bg); }
.mj-world-arrow .ic { width: 16px; height: 16px; }
.mj-world-prev { left: var(--s-3); }
.mj-world-next { right: var(--s-3); }
@media (max-width: 767px) { .mj-world-arrow { display: none; } }
.mj-world-dots {
  position: absolute; bottom: var(--s-3); left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.mj-world-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  cursor: pointer;
  transition: background 150ms, width 150ms;
}
.mj-world-dots button.is-active { background: var(--brand); width: 22px; border-radius: 4px; }

/* ---------- Services marketplace (armut model, owner 2026-08-22) ---------- */

.mj-svc-group {
  margin-bottom: var(--s-4);
  background: var(--bg-2);
  border-radius: var(--r);
  padding: var(--s-6) var(--s-4);
}
.mj-svc-grid {
  display: flex; flex-wrap: wrap; justify-content: center; /* owner: rows sit centered, never flushed left */
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.mj-svc-grid .mj-svc-card { width: 152px; }
@media (max-width: 575px) {
  .mj-svc-grid .mj-svc-card { width: calc(50% - var(--s-2) / 2 - 1px); }
}
.mj-svc-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px;
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 150ms, border-color 150ms;
}
.mj-svc-tile:hover { border-color: var(--brand-dark); color: var(--text); box-shadow: var(--shadow-card-hover); }
.mj-svc-tile-ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.mj-svc-tile-ic .ic { width: 20px; height: 20px; }
.mj-svc-tile-lb { font-weight: 600; font-size: var(--fs-body); }
.mj-svc-tile-meta { font-size: var(--fs-meta); color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mj-svc-tile-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--brand-dark); font-weight: 600; }
.mj-svc-tile-rating .ic { width: 12px; height: 12px; color: var(--brand); }

/* ---- /services landing (armut-style, owner 2026-08-22) ---- */

.mj-svc-hero { position: relative; overflow: hidden; background: var(--text); }
.mj-svc-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; /* photo under the scrimmed headline */
}
.mj-svc-hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-4);
  text-align: center;
}
.mj-svc-hero-title { color: var(--bg); font-size: clamp(24px, 4vw, 38px); font-weight: 700; text-shadow: 0 1px 12px var(--text); }
.mj-svc-hero-sub { color: var(--bg); opacity: 0.92; font-size: var(--fs-card-title); margin-bottom: var(--s-4); text-shadow: 0 1px 8px var(--text); }
.mj-svc-hero-search { position: relative; text-align: start; }
.mj-svc-hero-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card-hover);
  max-height: 320px; overflow-y: auto;
  padding: var(--s-2);
  z-index: 30;
}
.mj-svc-hero-results .mj-side-link[hidden] { display: none; }
/* Owner: joining must be OBVIOUS — a real button on the hero, not a text link. */
.mj-svc-hero-joinbtn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
  background: var(--surface); color: var(--brand-dark);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px var(--s-6);
  font-weight: 700; font-size: var(--fs-body);
  text-decoration: none;
  box-shadow: var(--shadow-card-hover);
  transition: box-shadow 150ms, transform 150ms;
}
.mj-svc-hero-joinbtn:hover { color: var(--brand-dark); transform: translateY(-1px); }
.mj-svc-hero-joinbtn .ic { width: 18px; height: 18px; }

/* Two-option CTA row on /service/{type}: quote wizard + map toggle */
.mj-svc-cta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mj-svc-cta .btn { display: inline-flex; align-items: center; gap: var(--s-1); }
.mj-svc-cta-hint { color: var(--text-2); font-size: var(--fs-meta); }
.mj-svc-map { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mj-svc-map-canvas { height: 380px; }
.mj-map-picker { height: 300px; border: 1px solid var(--line); border-radius: calc(var(--r) - 4px); }

/* Request wizard as a page of numbered POINTS (owner 2026-08-23: not a modal stepper —
   question on top, options below, points check off as they're answered). */
.mj-quiz-page { max-width: 760px; }
.mj-quiz-pricebox {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--tint); border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0;
  color: var(--brand-dark);
}
.mj-quiz-pricebox > .ic { width: 26px; height: 26px; flex-shrink: 0; }
.mj-quiz-pricebox-val { font-size: var(--fs-body); color: var(--text); }
.mj-quiz-pricebox-val strong { color: var(--brand-dark); font-size: var(--fs-price); }
.mj-quiz-pricebox-note { font-size: var(--fs-meta); color: var(--text-2); }
.mj-quiz-note {
  margin: var(--s-3) 0 0;
  background: var(--bg-2); border-radius: calc(var(--r) - 6px);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-meta); color: var(--text-2);
}
.mj-quiz-hint { color: var(--text-2); font-size: var(--fs-meta); }
.mj-quiz-pt {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.mj-quiz-pt-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--text-2);
  font-weight: 700; font-size: var(--fs-body);
  transition: background 150ms, color 150ms;
}
.mj-quiz-pt-num.mj-quiz-pt-done { background: var(--brand); color: var(--on-brand); }
.mj-quiz-pt-body { flex: 1; min-width: 0; }
.mj-quiz-pt-q { font-size: var(--fs-card-title); font-weight: 700; margin: 4px 0 var(--s-3); }
.mj-quiz-pills .mj-pill span { font-size: var(--fs-body); }
.mj-quiz-examples {
  margin-top: var(--s-3);
  background: var(--bg-2); border-radius: calc(var(--r) - 6px);
  padding: var(--s-3);
  font-size: var(--fs-meta); color: var(--text-2);
}
.mj-quiz-examples-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); margin-bottom: var(--s-1); }
.mj-quiz-examples ul { margin: 0; padding-inline-start: var(--s-4); }
.mj-quiz-send {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) 0 var(--s-6);
}
.mj-quiz-send .btn { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Lead rows (broadcast requests on the dashboard) */
.mj-req-lead-desc { flex-basis: 100%; color: var(--text-2); font-size: var(--fs-meta); white-space: pre-line; }

/* Provider dashboard: incoming request inbox */
.mj-req-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.mj-req-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: calc(var(--r) - 4px);
  color: var(--text); text-decoration: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.mj-req-row:hover { border-color: var(--brand-dark); color: var(--text); box-shadow: var(--shadow-card-hover); }
.mj-req-row-unread { background: var(--tint); border-color: var(--brand); }
.mj-req-row-main { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-body); }
.mj-req-row-meta { color: var(--text-2); font-size: var(--fs-meta); }

/* Owner 2026-08-22 (rev 2): armut-like narrow centered landing — centered headings,
   centered grids, small quiet cards, soft gray bands per group section. */
.mj-svc-landing { max-width: 1140px; }
.mj-svc-h {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  text-align: center;
  font-size: var(--fs-page-title); font-weight: 700;
  margin: 0;
}
.mj-svc-h .ic { width: 20px; height: 20px; color: var(--brand-dark); }

.mj-svc-trend { margin: var(--s-6) 0 var(--s-8); }
.mj-svc-trend-grid {
  display: flex; flex-wrap: wrap; justify-content: center; /* every row centered, armut-style */
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.mj-svc-trend-grid .mj-svc-card { width: 172px; }
@media (max-width: 575px) {
  .mj-svc-trend-grid { gap: var(--s-2); }
  .mj-svc-trend-grid .mj-svc-card { width: calc(50% - var(--s-2) / 2 - 1px); }
}

.mj-svc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: calc(var(--r) - 4px); overflow: hidden;
  background: var(--bg); color: var(--text); text-decoration: none;
  transition: box-shadow 150ms, border-color 150ms;
}
.mj-svc-card:hover { border-color: var(--brand-dark); color: var(--text); box-shadow: var(--shadow-card-hover); }
.mj-svc-card-img { display: block; aspect-ratio: 16 / 9; background: var(--bg-2); }
.mj-svc-card-lg .mj-svc-card-img { aspect-ratio: 16 / 10; }
.mj-svc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mj-svc-card-lb { font-weight: 600; font-size: 13.5px; line-height: 1.25; color: var(--brand-dark); padding: var(--s-2) var(--s-2) var(--s-2); text-align: center; }
.mj-svc-card-lb:not(:last-child) { padding-bottom: 0; }
.mj-svc-card-meta {
  font-size: 12px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  text-align: center;
  padding: 2px var(--s-2) var(--s-2);
}
.mj-svc-card-meta .ic { width: 12px; height: 12px; }
.mj-svc-card-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.mj-svc-card-rc { color: var(--text-2); font-weight: 400; }

/* ---------- Home trending-services strip (owner 2026-08-23) ----------
   One horizontally-scrollable row of small photo cards — never wraps into a wall,
   so the home page stays short on mobile. Cards reuse .mj-svc-card. */
.mj-home-svc { margin: var(--s-2) 0 var(--s-4); }
.mj-home-svc .mj-section-head { margin-bottom: var(--s-2); }
.mj-home-svc-all {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand-dark); text-decoration: none;
  font-size: var(--fs-body); font-weight: 600;
}
.mj-home-svc-all:hover { color: var(--brand-dark); text-decoration: underline; }
.mj-home-svc-all .ic { width: 14px; height: 14px; }
.mj-home-svc-strip {
  display: flex; gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-2);
}
.mj-home-svc-strip .mj-svc-card { flex: 0 0 148px; scroll-snap-align: start; }
@media (max-width: 575px) {
  .mj-home-svc-strip { gap: var(--s-2); }
  .mj-home-svc-strip .mj-svc-card { flex-basis: 132px; }
}

.mj-svc-benefits {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
  margin: var(--s-8) 0; padding-top: var(--s-6); border-top: 1px solid var(--line);
}
@media (max-width: 991px) { .mj-svc-benefits { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
.mj-svc-benefit-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--tint); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
}
.mj-svc-benefit-ic .ic { width: 24px; height: 24px; }
.mj-svc-benefit h3 { font-size: var(--fs-card-title); font-weight: 700; }
.mj-svc-benefit p { font-size: var(--fs-meta); color: var(--text-2); margin: 0; }

.mj-svc-how { margin: var(--s-8) 0; text-align: center; }
.mj-svc-how > h2 { font-size: var(--fs-page-title); font-weight: 700; margin-bottom: var(--s-6); }
.mj-svc-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 767px) { .mj-svc-how-grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.mj-svc-how-n { display: block; font-size: 40px; font-weight: 700; color: var(--line); line-height: 1; }
.mj-svc-how-step h3 { font-size: var(--fs-card-title); font-weight: 700; margin-top: var(--s-2); }
.mj-svc-how-step p { font-size: var(--fs-meta); color: var(--text-2); margin: 0; }

.mj-svc-join {
  display: flex; align-items: stretch; gap: 0;
  background: var(--tint); border-radius: var(--r); overflow: hidden;
  margin: var(--s-8) 0 var(--s-6);
}
.mj-svc-join > img { width: 42%; object-fit: cover; }
.mj-svc-join-body { padding: var(--s-8) var(--s-6); align-self: center; }
.mj-svc-join-body h2 { font-size: var(--fs-page-title); font-weight: 700; color: var(--brand-dark); }
.mj-svc-join-body p { font-size: var(--fs-body); color: var(--text); margin: var(--s-2) 0 var(--s-4); }
@media (max-width: 767px) {
  .mj-svc-join { flex-direction: column; }
  .mj-svc-join > img { width: 100%; max-height: 200px; }
}

/* Star rows (display) */
.mj-stars { display: inline-flex; gap: 1px; color: var(--brand); }
.mj-stars .ic { width: 13px; height: 13px; }
.mj-rating-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); flex-wrap: wrap; }

/* Verified check next to a provider name */
.mj-verified { display: inline-flex; color: var(--brand-dark); }
.mj-verified .ic { width: 15px; height: 15px; }

/* Provider past-work strip */
.mj-svc-photos { display: flex; gap: var(--s-2); overflow-x: auto; }
.mj-svc-photos img { height: 110px; border-radius: calc(var(--r) - 4px); border: 1px solid var(--line); }

/* Reviews */
.mj-review { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
.mj-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mj-review-body { margin-top: 4px; font-size: var(--fs-body); }
.mj-review-reply {
  margin-top: var(--s-2);
  margin-inline-start: var(--s-4);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  border-radius: calc(var(--r) - 4px);
  font-size: var(--fs-meta);
}
.mj-review-form { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3); }

/* Star input: reversed radio row so input+hover styling lights up leading stars */
.mj-star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: var(--s-2); }
.mj-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.mj-star-input label { cursor: pointer; color: var(--line); display: inline-flex; }
.mj-star-input label .ic { width: 22px; height: 22px; }
.mj-star-input label:hover,
.mj-star-input label:hover ~ label,
.mj-star-input input:checked ~ label { color: var(--brand); }

/* ---------- Provider self-service (owner 2026-09-01: "as simple as possible") ---------- */
/* Wizard question line above a step's controls */
.mj-wiz-q { font-size: var(--fs-page-title); font-weight: 700; margin: 0 0 var(--s-1); }
/* Dashboard edit form is not a wizard: let it use more of the content width */
.mj-form-wide { max-width: 860px; margin-inline: 0; }
/* Person/Company pills carry a small leading icon */
.mj-pill .ic { width: 16px; height: 16px; margin-inline-end: 6px; }

/* Service picker: filter box + live "N selected" counter above the grouped icon cards */
.mj-svc-pick-bar {
  position: sticky; top: 112px; z-index: 5;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0; margin-bottom: var(--s-2);
  background: var(--surface);
}
.mj-svc-pick-search { flex: 1; min-width: 0; margin: 0; }
.mj-svc-pick-search input { min-height: 40px; }
.mj-svc-pick-count {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2);
  font-size: var(--fs-meta); font-weight: 600; white-space: nowrap;
}
.mj-svc-pick-count.has { background: var(--tint); color: var(--brand-dark); }
.mj-svc-pick .mj-type[hidden], .mj-svc-pick .mj-typegroup[hidden] { display: none; }
@media (max-width: 991.98px) { .mj-svc-pick-bar { top: 56px; } }

/* Logo picker: tap-to-choose circle with instant preview */
.mj-logo-pick { display: flex; align-items: center; gap: var(--s-4); }
.mj-logo-pick-circle {
  position: relative; flex-shrink: 0;
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px dashed var(--line); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; margin: 0;
  transition: border-color 150ms, background 150ms;
}
.mj-logo-pick-circle:hover { border-color: var(--brand); background: var(--tint); }
.mj-logo-pick-circle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mj-logo-pick-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mj-logo-pick-circle img[hidden] { display: none; }
.mj-logo-pick-empty {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-2); font-size: 11px; text-align: center; padding: 0 var(--s-2); line-height: 1.2;
}
.mj-logo-pick-empty[hidden] { display: none; }
.mj-logo-pick-empty .ic { width: 22px; height: 22px; }
.mj-logo-pick-side { min-width: 0; }

/* Bigger logo tile on the public profile / dashboard head */
.mj-shop-logo-lg { width: 96px; height: 96px; border-radius: 50%; }
.mj-shop-logo-lg .ic { width: 36px; height: 36px; }

/* Provider summary (dashboard) + service-count pill (dashboard + profile + cards) */
.mj-prov-summary .mj-shop-head-row { align-items: flex-start; }
.mj-prov-name { font-size: var(--fs-page-title); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
.mj-prov-count {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-2);
  padding: 4px 10px; border-radius: 999px;
  background: var(--tint); color: var(--brand-dark);
  font-size: var(--fs-meta); font-weight: 600;
}
.mj-rating-row .mj-prov-count { margin-top: 0; margin-inline-end: var(--s-2); }
.mj-prov-count .ic { width: 14px; height: 14px; }
.mj-prov-actions { flex-shrink: 0; }
.mj-prov-actions .btn { white-space: nowrap; }
.mj-prov-services { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.mj-card-svc-count { color: var(--brand-dark); font-weight: 600; }
@media (max-width: 575px) {
  .mj-prov-actions { width: 100%; flex-direction: row !important; }
  .mj-prov-actions .btn { flex: 1; }
}

/* Service chips (dashboard summary) */
.mj-svc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mj-svc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-size: var(--fs-meta); font-weight: 500; text-decoration: none;
}
.mj-svc-chip:hover { border-color: var(--brand-dark); color: var(--brand-dark); background: var(--tint); }
.mj-svc-chip .ic { width: 15px; height: 15px; color: var(--brand-dark); }
.mj-svc-chip-add { border-style: dashed; color: var(--text-2); }

/* Public profile: the service list is a plain visible list, never a tab */
.mj-svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-2); }
.mj-svc-list-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  color: var(--text); text-decoration: none; min-height: 48px;
}
.mj-svc-list-item:hover { border-color: var(--brand-dark); color: var(--text); background: var(--bg-2); }
.mj-svc-list-ic { display: inline-flex; color: var(--brand-dark); flex-shrink: 0; }
.mj-svc-list-ic .ic { width: 20px; height: 20px; }
.mj-svc-list-lb { font-weight: 600; font-size: var(--fs-body); flex: 1; min-width: 0; }
.mj-svc-list-price { font-size: var(--fs-meta); color: var(--brand-dark); font-weight: 600; white-space: nowrap; }

/* Sidebar shortcut row inside the Services branch */
.mj-side-link-cta { color: var(--brand-dark); font-weight: 600; }
.mj-side-link-cta .ic { color: var(--brand-dark); }

/* Sign-in note on the public Open-shop / Offer-services landings (owner 2026-09-05: those pages
   are indexable now; anonymous visitors browse the wizard and log in only to publish). */
.mj-login-note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .85rem;
  background: var(--tint); color: var(--brand-dark);
  border: 1px solid var(--line); border-radius: var(--r); font-size: .9rem;
}
.mj-login-note svg { width: 18px; height: 18px; flex: none; }
.mj-login-note a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; }

/* Home intro + about/FAQ (owner 2026-09-05): the crawlable explanation of what متجري is.
   Compact intro right under the worlds hero; pillars + FAQ at the bottom of the content column. */
.mj-intro { margin: .9rem 0 .25rem; }
.mj-intro h1 { font-size: var(--fs-page-title); font-weight: 700; margin: 0 0 .25rem; }
.mj-intro p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.mj-about { margin: 2.25rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.mj-about h2 { font-size: var(--fs-page-title); font-weight: 700; margin-bottom: .5rem; }
.mj-about > p { color: var(--text-2); line-height: 1.6; max-width: 70ch; }
.mj-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0 1.25rem; }
.mj-pillar {
  display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.mj-pillar:hover { color: var(--text); box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 10%, transparent); transform: translateY(-2px); }
.mj-pillar svg { width: 24px; height: 24px; color: var(--brand-dark); }
.mj-pillar strong { font-size: 1rem; }
.mj-pillar span { color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.mj-faq details { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .9rem; margin-bottom: .5rem; background: var(--bg); }
.mj-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mj-faq summary::-webkit-details-marker { display: none; }
.mj-faq summary::after { content: "+"; color: var(--brand-dark); font-weight: 700; }
.mj-faq details[open] summary::after { content: "\2013"; }
.mj-faq details p { margin: .5rem 0 0; color: var(--text-2); line-height: 1.6; }
@media (max-width: 767.98px) { .mj-pillars { grid-template-columns: 1fr; } }