*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
} /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
:after,
:before {
  --tw-content: "";
}
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  line-height: inherit;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
pre,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
}
fieldset,
legend {
  padding: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
[role="button"],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.-right-2 {
  right: -0.5rem;
}
.-top-1 {
  top: -0.25rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 80rem; /* 1280px - matches the fashion storefront width (2026-07-10) */
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.p-6 {
  padding: 1.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-center {
  text-align: center;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-semibold {
  font-weight: 600;
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
html {
  overflow-y: scroll;
}
svg {
  vertical-align: -0.125em;
  display: inline-block;
}
.hover\:text-orange-500:hover {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:flex {
    display: flex;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-\[240px_1fr\] {
    grid-template-columns: 240px 1fr;
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ========================================================================
 *  END OF GENERATED TAILWIND RESET + UTILITIES  -  DO NOT EDIT ABOVE
 *  (rebuilt from input.css via `npx tailwindcss` - see tailwind.config.js)
 *
 *  >>>  EDIT CUSTOM PUBLIC-SITE RULES BELOW  >>>
 *  Admin-panel rules live in /css/admin.css (scoped under body.admin).
 *
 *  Table of contents - Ctrl+F a marker to jump:
 *      [BASE]        body defaults
 *      [LAYOUT]      navbar, footer, search bar
 *      [HOME]        homepage: category grid + latest listings
 *      [SEARCH]      old /search rules (replaced by [SEARCH-V2])
 *      [LISTING]     create, edit, detail (item page)
 *      [AUTH]        login + register
 *      [DASHBOARD]   seller/buyer dashboard + pages
 *      [REVIEWS]     reviews + public profile
 *      [OFFERS]      make-offer pages
 *      [ORDERS]      sold / bought / won
 *      [MESSAGES]    inbox + thread
 *      [WATCHLIST]   watchlist page
 *      [AUCTION]     auctions list
 *      [FORUM]       threads + replies
 *      [SUPPORT]     support tickets
 *      [MEMBERSHIP]  membership plans
 *      [SHIPPING]    shipping methods page
 *      [ATTRS]       category attributes (EAV)
 *      [SEARCH-V2]   NEW /search layout (bordered sidebar, fav hearts)
 *  ======================================================================== */

/* [BASE] -- global body defaults -- */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #777;
  line-height: 1.5;
}

/* [LAYOUT] ==================================================
   LAYOUT - navbar, footer, search bar (_Layout + _AdminLayout)
   (43 auto-generated .sXX classes from Views/Shared/)
   =========================================================== */
.i20 {
  float: right;
  margin-top: 4px;
}
.i21 {
  font-size: 20px;
}
.s59 {
  color: #f0960a;
}
.s60 {
  color: #0e7c00;
}
.s130 {
  margin-bottom: 4px;
}
.s170 {
  color: #999;
  font-size: 12px;
}
.s180 {
  font-size: 13px;
}
.s270 {
  font-size: 16px;
}
.s389 {
  color: #333;
}
.s463 {
  padding-left: 10px;
}
.s464 {
  cursor: pointer;
  padding: 8px 16px;
  color: #f0960a;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  user-select: none;
}
.s465 {
  padding-left: 10px;
  border-left: 2px solid #f0f0f0;
  margin-left: 16px;
  margin-top: 4px;
}
.s466 {
  margin-top: 10px;
  background: #e7f7e7;
  border: 1px solid #9bd79b;
  color: #1a651a;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
}
.s467 {
  font-size: 20px;
  font-weight: 500;
}
.s468 {
  color: #777;
}
.s469 {
  background: #fca626;
  padding: 6px 16px;
  border-radius: 5px;
  font-weight: 500;
}
.s470 {
  font-size: 11px;
  font-weight: 600;
  width: 17px;
  height: 17px;
}
.s471 {
  font-size: 15px;
  color: #777;
}
.s472 {
  font-size: 15px;
}
.s473 {
  background: #fca626;
}
.s474 {
  border: 2px solid #fca626;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.s475 {
  height: 44px;
  font-size: 15px;
  padding: 0 12px;
  border: 2px solid #fca626;
  border-radius: 4px;
  outline: none;
  background-color: white;
}
.s476 {
  height: 44px;
  font-size: 15px;
  padding: 0 12px;
  border: 2px solid #fca626;
  border-radius: 4px;
  outline: none;
}
.s477 {
  border: 2px solid #fca626;
  border-radius: 4px;
  overflow: hidden;
}
.s478 {
  font-size: 14px;
}
.s479 {
  font-size: 24px;
}
.s480 {
  color: #777;
  font-size: 24px;
}
.s481 {
  font-size: 24px;
  font-weight: 500;
}
.s482 {
  background: transparent;
  padding-top: 12px;
  padding-bottom: 4px;
}
.s483 {
  flex: 2;
  height: 50px;
  font-size: 16px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid #ddd;
  outline: none;
}
.s484 {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  z-index: 50;
  display: none;
  max-height: 320px;
  overflow: auto;
}
.s485 {
  height: 50px;
  font-size: 16px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid #ddd;
  outline: none;
  min-width: 220px;
  background-color: white;
}
.s486 {
  flex: 1;
  height: 50px;
  font-size: 16px;
  padding: 0 12px;
  border: none;
  outline: none;
}
.s487 {
  background: #337ab7;
  color: white;
  width: 60px;
  height: 50px;
  border: none;
  cursor: pointer;
}
.s488 {
  flex: 1;
  height: 44px;
  font-size: 15px;
  padding: 0 12px;
  border: none;
  outline: none;
}
.s489 {
  background: #337ab7;
  color: white;
  width: 50px;
  height: 44px;
  border: none;
}
.s490 {
  color: #4caf50;
  font-weight: 500;
}
.s491 {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
.s492 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(33, 37, 41, 0.96);
  color: white;
  padding: 14px 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 1000;
  font-size: 14px;
}
.s493 {
  color: #ffcc66;
  text-decoration: underline;
}
.s494 {
  padding: 8px 16px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.s495 {
  background: #0e7c00;
  border-radius: 4px;
  overflow: hidden;
  min-width: 240px;
}
.s496 {
  background: rgba(0, 0, 0, 0.15);
  color: white;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ===========================================================
   [HOME] HOMEPAGE - category grid + latest listings
   (25 generated classes from Views/Home/)
   =========================================================== */
.i13 {
  font-size: 25px;
  color: #ff9900;
}
.i14 {
  font-size: 11px;
}
/* modern category icon (admin option): outline glyph on a soft tile, same footprint as the star */
.i13.cat-ico { font-size: 30px; padding: 6px; box-sizing: border-box; color: #1558d6; background: #eaf1ff; border-radius: 9px; flex: 0 0 auto; }
.cat-tiles-wrap { padding-top: 18px; padding-bottom: 10px; }   /* keeps the side padding, so the tiles line up with the search bar */
.cat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }   /* four tiles per row, two rows */
.cat-tile { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 22px; background: #fff; border: 1px solid #e6e8ec; border-radius: 100px; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); text-decoration: none; color: #1e293b; font-weight: 600; font-size: 16px; min-width: 0; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .12); border-color: #cbd5e1; color: #0f172a; }
.cat-tile-ico { width: 30px; height: 30px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .12)); }
.cat-tile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cat-tile { padding: 12px 12px; font-size: 14px; gap: 9px; } .cat-tile-ico { width: 28px; height: 28px; } }
.mega-cats .cat-tiles-dd { padding: 2px 0; }
/* homepage card with the watchlist heart over the photo (2026-09-16) */
.hm-card { position: relative; }
.hm-card .s183 { height: 100%; }
.cat-dd-ico { width: 30px; height: 30px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .12)); }
/* no marker at all: the sub-category list sits a little forward of the name (2.png) */
.cat-nomark .s312 { padding-left: 12px; }
.i15 {
  font-size: 50px;
  color: #ddd;
}
.s305 {
  border: 1px solid #ddd;
  color: #f0960a;
  font-size: 16px;
  font-weight: 500;
  background-color: white;
}
.s306 {
  padding-top: 20px;
  padding-bottom: 10px;
}
.s307 {
  gap: 20px 20px;
}
.s308 {
  padding-bottom: 40px;
  padding-top: 10px;
}
.s309 {
  gap: 15px;
}
.s310 {
  font-size: 24px;
  font-weight: 400;
  line-height: 26.4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.s311 {
  color: rgba(14, 124, 0, 0.79);
  text-decoration: none;
}
.s312 {
  list-style: none;
  padding-left: 38px;
  margin: 0;
}
.s313 {
  font-size: 15px;
  color: #636262;
  line-height: 24px;
}
.s314 {
  color: #636262;
  text-decoration: none;
}
.s315 {
  line-height: 24px;
}
.s316 {
  color: #ff9900;
  font-size: 14px;
  text-decoration: none;
}
.s317 {
  text-align: center;
  padding: 20px 0 10px;
}
.s318 {
  display: inline-block;
  background: #fca626;
  color: white;
  padding: 12px 50px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.s319 {
  text-align: center;
  padding: 60px 0;
  color: #bbb;
}
.s320 {
  /* square picture box (height follows width), like the search grids */
  aspect-ratio: 1 / 1;
  height: auto;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s321 {
  padding: 12px;
}
.s322 {
  font-size: 15px;
  color: #337ab7;
  margin: 0 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s323 {
  font-size: 13px;
  color: #999;
  margin: 0 0 4px;
}
.s324 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s325 {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
}
.s326 {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50;
}

/* ===========================================================
   [SEARCH] SEARCH RESULTS page + filters
   (17 generated classes from Views/Search/)
   =========================================================== */
.i5 {
  font-size: 40px;
  color: #ddd;
}
.s184 {
  height: 160px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s186 {
  font-size: 14px;
  color: #337ab7;
  margin: 0 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s449 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}
.s450 {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s451 {
  width: 50%;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s452 {
  width: 100%;
  height: 38px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s453 {
  display: flex;
  gap: 4px;
}
.s454 {
  flex: 1;
  height: 34px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}
.s455 {
  height: 34px;
  padding: 0 10px;
  background-color: white;
  color: #337ab7;
  border: 1px solid #337ab7;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.s456 {
  margin-top: 20px;
}
.s457 {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
.s458 {
  font-size: 12px;
  color: #999;
  margin: 0 0 4px;
}
.s459 {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}
.s460 {
  font-size: 15px;
  font-weight: bold;
  color: #4caf50;
}
.s461 {
  text-align: center;
  margin-top: 20px;
}
.s462 {
  height: 1px;
}

/* ===========================================================
   [LISTING] LISTING - create, edit, detail (item page)
   (60 generated classes from Views/Listing/)
   =========================================================== */
.i16 {
  font-size: 80px;
  color: #ddd;
}
.i17 {
  font-size: 20px;
  color: #999;
}
.i18 {
  color: #999;
  width: 20px;
}
.s162 {
  margin-bottom: 15px;
}
.s178 {
  margin-top: 10px;
}
.s254 {
  color: #999;
  font-size: 13px;
}
.s294 {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  resize: vertical;
}
.s327 {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #555;
  font-weight: 500;
}
.s328 {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.s329 {
  display: block;
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}
.s330 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s331 {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #fafafa;
}
.s332 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.s333 {
  font-size: 14px;
  color: #555;
  cursor: pointer;
}
.s334 {
  width: 100%;
  height: 45px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.s335 {
  background: #f5f5f5;
  min-height: 300px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.s336 {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}
.s337 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.s338 {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.s339 {
  margin-bottom: 20px;
}
.s340 {
  display: inline-block;
  padding: 8px 14px;
  background: #337ab7;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.s341 {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
}
.s342 {
  text-decoration: line-through;
  color: #999;
  font-size: 16px;
  margin-right: 8px;
}
.s343 {
  font-size: 20px;
  color: #999;
}
.s344 {
  margin-bottom: 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.s345 {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.s346 {
  background: #fff3e0;
  color: #f0960a;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.s347 {
  margin-bottom: 15px;
  font-size: 15px;
  color: #555;
}
.s348 {
  margin: 10px 0 20px;
  border-radius: 6px;
  overflow: hidden;
  background: black;
}
.s349 {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 10px;
}
.s350 {
  font-size: 18px;
  font-weight: 400;
  color: #333;
  margin-bottom: 10px;
}
.s351 {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  white-space: pre-wrap;
}
.s352 {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}
.s353 {
  height: 280px;
  border-radius: 6px;
  overflow: hidden;
}
.s354 {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 20px;
  background-color: white;
}
.s355 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}
.s356 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.s357 {
  width: 50px;
  height: 50px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s358 {
  margin-bottom: 8px;
  font-size: 14px;
}
.s359 {
  display: block;
  text-align: center;
  padding: 10px;
  background: #25d366;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
}
.s360 {
  margin-top: 12px;
}
.s361 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.s362 {
  width: 100%;
  padding: 10px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}
.s363 {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.s364 {
  padding: 0 16px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.s365 {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
.s366 {
  width: 100%;
  padding: 10px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s367 {
  width: 100%;
  padding: 10px;
  background-color: white;
  color: #e74c3c;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s368 {
  display: block;
  text-align: center;
  padding: 10px;
  background: #337ab7;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  margin-top: 12px;
}
.s369 {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  background-color: white;
  margin-bottom: 15px;
}
.s370 {
  font-size: 14px;
  color: #555;
  font-weight: 500;
  margin-bottom: 10px;
}
.s371 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.s372 {
  position: relative;
  width: 110px;
}
.s373 {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.s374 {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #4caf50;
  color: white;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 3px;
}
.s375 {
  margin-top: 4px;
}
.s376 {
  width: 100%;
  padding: 4px 6px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s377 {
  display: flex;
  gap: 10px;
}
.s378 {
  flex: 1;
  height: 45px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.s379 {
  height: 45px;
  padding: 0 20px;
  background-color: white;
  color: #337ab7;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ===========================================================
   [AUTH] AUTH PAGES - user login + register
   (15 generated classes from Views/Auth/)
   =========================================================== */
.s190 {
  font-size: 24px;
  font-weight: 300;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.s191 {
  background: #fee;
  border: 1px solid #fcc;
  color: #c00;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
}
.s192 {
  border: 1px solid #ddd;
  padding: 25px;
  border-radius: 6px;
  background-color: white;
}
.s193 {
  margin-bottom: 12px;
}
.s194 {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #555;
}
.s196 {
  position: relative;
}
.s197 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  padding-right: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.s198 {
  width: 100%;
  height: 42px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.s199 {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #777;
}
.s200 {
  background: #fff8e1;
  color: #8a6d3b;
  border: 1px solid #f0d675;
  padding: 10px;
  border-radius: 4px;
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
}
.s201 {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.s202 {
  flex: 1;
  text-align: center;
  padding: 10px;
  background: #1877f2;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
}
.s203 {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
}
.s205 {
  font-size: 12px;
  color: #337ab7;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.s206 {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: #777;
}

/* ===========================================================
   [DASHBOARD] USER DASHBOARD - my listings, account, alerts, addresses, cart, expired, shipping, payments
   (81 generated classes from Views/Dashboard/)
   =========================================================== */
.i4 {
  font-size: 50px;
  margin-bottom: 15px;
  display: block;
}
.i6 {
  font-size: 36px;
  color: #bbb;
}
.i7 {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}
.i8 {
  color: #ccc;
  font-size: 28px;
}
.i9 {
  font-size: 30px;
  color: #ccc;
}
.i10 {
  font-size: 30px;
  color: #ddd;
}
.s97 {
  margin: 0;
}
.s100 {
  background: #e7f7e7;
  border: 1px solid #9bd79b;
  color: #1a651a;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
}
.s158 {
  font-size: 24px;
  font-weight: 300;
  color: #333;
  margin-bottom: 10px;
}
.s182 {
  text-align: center;
  padding: 50px 0;
  color: #999;
}
.s185 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s195 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.s213 {
  display: flex;
  gap: 6px;
}
.s216 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 500px;
  margin-bottom: 15px;
}
.s217 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}
.s218 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.s219 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f0f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s220 {
  flex: 1;
}
.s221 {
  font-size: 12px;
  color: #999;
  margin: 4px 0;
}
.s222 {
  padding: 6px 14px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.s223 {
  padding: 6px 12px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 4px;
}
.s224 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 500px;
}
.s225 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}
.s226 {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 4px;
}
.s227 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 15px;
  background: #fafafa;
  color: #999;
}
.s228 {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
.s229 {
  height: 42px;
  padding: 0 20px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.s230 {
  color: #777;
  font-size: 14px;
  margin-bottom: 20px;
}
.s231 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: white;
}
.s232 {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.s233 {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
.s234 {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.s235 {
  color: #555;
  font-size: 14px;
}
.s236 {
  color: #999;
  font-size: 13px;
  margin-top: 4px;
}
.s237 {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.s238 {
  padding: 5px 10px;
  background-color: white;
  color: #2e7d32;
  border: 1px solid #9bd79b;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s239 {
  padding: 5px 10px;
  background-color: white;
  color: #337ab7;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s240 {
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  color: #999;
  text-align: center;
  margin-bottom: 20px;
}
.s241 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}
.s242 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  text-transform: uppercase;
}
.s243 {
  height: 40px;
  padding: 0 20px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.s244 {
  display: none;
  height: 40px;
  padding: 0 16px;
  margin-left: 8px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s245 {
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  color: #999;
  text-align: center;
}
.s246 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s247 {
  color: #c00;
  font-size: 12px;
  margin-left: 6px;
}
.s248 {
  color: #777;
  font-size: 13px;
  margin-top: 2px;
}
.s249 {
  padding: 5px 10px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s250 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  background-color: white;
  align-items: center;
}
.s251 {
  width: 80px;
  height: 80px;
  background: #f9f9f9;
  flex-shrink: 0;
}
.s252 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s253 {
  font-weight: 500;
  color: #337ab7;
  text-decoration: none;
}
.s255 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.s256 {
  width: 60px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}
.s257 {
  padding: 6px 10px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s258 {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50;
  min-width: 80px;
  text-align: right;
}
.s259 {
  padding: 6px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s260 {
  margin-top: 15px;
  padding: 15px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}
.s261 {
  font-size: 13px;
  color: #555;
  display: block;
  margin-bottom: 4px;
}
.s262 {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
.s263 {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 15px;
}
.s264 {
  color: #777;
  font-size: 14px;
}
.s265 {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}
.s266 {
  padding: 10px 20px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.s267 {
  font-size: 11px;
  color: #999;
  margin-top: 8px;
  text-align: right;
}
.s269 {
  margin-top: 30px;
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  text-align: center;
  color: #999;
}
.s271 {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}
.s272 {
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
  display: flex;
  background: #fafafa;
  overflow: hidden;
  opacity: 0.85;
  border-radius: 10px;
}
.s273 {
  width: 120px;
  min-height: 100px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s274 {
  flex: 1;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s275 {
  font-size: 15px;
  color: #337ab7;
  text-decoration: none;
  font-weight: 500;
}
.s276 {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}
.s277 {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50;
  margin-top: 4px;
}
.s278 {
  padding: 6px 12px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.s279 {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #337ab7;
  text-decoration: none;
}
.s280 {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #c00;
  background-color: white;
  cursor: pointer;
}
.s281 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.s282 {
  background: #fca626;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.s283 {
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
  display: flex;
  background-color: white;
  overflow: hidden;
}
.s284 {
  width: 120px;
  min-height: 100px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s285 {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.s286 {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
}

/* ===========================================================
   [REVIEWS] REVIEWS + public profile
   (20 generated classes from Views/Review/)
   =========================================================== */
.i19 {
  font-size: 30px;
  color: #999;
}
.s268 {
  font-size: 14px;
  color: #777;
}
.s431 {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}
.s432 {
  width: 80px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s433 {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  margin-bottom: 4px;
}
.s434 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}
.s435 {
  height: 140px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s436 {
  padding: 8px;
}
.s437 {
  font-size: 13px;
  color: #337ab7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s438 {
  font-size: 14px;
  font-weight: bold;
  color: #4caf50;
}
.s439 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 8px;
  background-color: white;
  border-radius: 4px;
}
.s440 {
  margin-left: 6px;
  color: #333;
}
.s441 {
  font-size: 14px;
  color: #555;
  margin-top: 6px;
}
.s442 {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
  padding-left: 15px;
  border-left: 2px solid #ddd;
}
.s443 {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 6px;
  background-color: white;
}
.s444 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}
.s445 {
  font-size: 14px;
  color: #555;
}
.s446 {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 8px;
}
.s447 {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
}
.s448 {
  padding: 8px 20px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ===========================================================
   [OFFERS] OFFERS page (buyer + seller)
   (7 generated classes from Views/Offer/)
   =========================================================== */
.s93 {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}
.s399 {
  color: #999;
  margin-bottom: 20px;
}
.s400 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s401 {
  font-size: 20px;
  font-weight: bold;
  color: #4caf50;
  margin-top: 4px;
}
.s402 {
  padding: 8px 16px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.s403 {
  padding: 8px 16px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.s404 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 20px 0 10px;
}

/* ===========================================================
   [ORDERS] ORDERS - sold/bought/won
   (19 generated classes from Views/Order/)
   =========================================================== */
.s405 {
  border: 1px solid #e5e5e5;
  background-color: white;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 12px;
}
.s406 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px;
}
.s407 {
  font-size: 13px;
  color: #777;
  margin-top: 3px;
}
.s408 {
  font-size: 13px;
  color: #555;
  margin-top: 3px;
}
.s409 {
  text-align: right;
}
.s410 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.s411 {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-bottom: 10px;
}
.s412 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.s413 {
  width: 50px;
  height: 50px;
  background: #f9f9f9;
  flex-shrink: 0;
  overflow: hidden;
}
.s414 {
  flex: 1;
  font-size: 14px;
}
.s415 {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.s416 {
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
}
.s417 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.s418 {
  padding: 6px 12px;
  background: #1565c0;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s419 {
  margin: 0;
  display: flex;
  gap: 4px;
}
.s420 {
  width: 200px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
}
.s421 {
  padding: 6px 12px;
  background: #5e35b1;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s422 {
  padding: 6px 12px;
  background: #2e7d32;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s423 {
  padding: 6px 12px;
  background-color: white;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

/* ===========================================================
   [MESSAGES] MESSAGES - inbox + thread
   (10 generated classes from Views/Message/)
   =========================================================== */
.s388 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s390 {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s391 {
  color: #337ab7;
  font-size: 14px;
}
.s392 {
  margin-top: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}
.s393 {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.s394 {
  font-size: 16px;
  color: #333;
}
.s395 {
  max-height: 500px;
  overflow-y: auto;
  padding: 15px;
}
.s396 {
  padding: 15px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}
.s397 {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}
.s398 {
  height: 40px;
  padding: 0 20px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

/* ===========================================================
   [WATCHLIST] WATCHLIST page
   (4 generated classes from Views/Watchlist/)
   =========================================================== */
.s518 {
  border: 1px solid #e5e5e5;
  background-color: white;
  overflow: hidden;
  position: relative;
}
.s519 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.s520 {
  background-color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #e74c3c;
  padding: 4px 8px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.s521 {
  text-decoration: none;
}

/* ===========================================================
   [AUCTION] AUCTIONS list
   (4 generated classes from Views/Auction/)
   =========================================================== */
.s183 {
  border: 1px solid #e5e5e5;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
}
.s187 {
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}
.s188 {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.s189 {
  font-size: 12px;
  color: #337ab7;
  margin-top: 2px;
}

/* ===========================================================
   [FORUM] FORUM - threads + replies
   (18 generated classes from Views/Forum/)
   =========================================================== */
.i11 {
  color: #f0960a;
}
.i12 {
  color: #999;
}
.s287 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.s288 {
  padding: 8px 16px;
  background: #fca626;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.s289 {
  padding: 40px;
  text-align: center;
  color: #999;
  border: 1px dashed #ddd;
  border-radius: 6px;
}
.s290 {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
}
.s291 {
  font-weight: 500;
  color: #337ab7;
}
.s292 {
  text-align: right;
  font-size: 12px;
  color: #777;
}
.s293 {
  font-size: 11px;
  color: #999;
}
.s295 {
  margin-bottom: 6px;
}
.s296 {
  font-size: 22px;
  font-weight: 400;
  color: #333;
  margin-bottom: 4px;
}
.s297 {
  font-size: 12px;
  color: #999;
  margin-bottom: 15px;
}
.s298 {
  border: 1px solid #e5e5e5;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.s299 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.s300 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
}
.s301 {
  white-space: pre-wrap;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.s302 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
}
.s304 {
  height: 38px;
  padding: 0 16px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

/* ===========================================================
   BOOKINGS
   (9 generated classes from Views/Booking/)
   =========================================================== */
.s123 {
  font-size: 13px;
  color: #777;
}
.s207 {
  font-size: 18px;
  color: #555;
  margin: 15px 0 10px;
}
.s208 {
  color: #999;
  font-size: 14px;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 6px;
}
.s209 {
  border: 1px solid #e5e5e5;
  background-color: white;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s210 {
  color: #337ab7;
  font-weight: 500;
}
.s211 {
  padding: 5px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s212 {
  font-size: 18px;
  color: #555;
  margin: 25px 0 10px;
}
.s214 {
  padding: 5px 10px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s215 {
  padding: 5px 10px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

/* ===========================================================
   [SUPPORT] SUPPORT TICKETS
   (14 generated classes from Views/Support/)
   =========================================================== */
.s303 {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}
.s505 {
  font-size: 22px;
  font-weight: 400;
  color: #333;
}
.s506 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.s507 {
  font-weight: 500;
}
.s508 {
  font-size: 11px;
  color: #8a6d3b;
  background: #f0d675;
  padding: 1px 6px;
  border-radius: 3px;
}
.s509 {
  white-space: pre-wrap;
  font-size: 14px;
  color: #555;
}
.s510 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 12px;
  border-radius: 6px;
  margin-top: 10px;
}
.s511 {
  height: 34px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 6px;
}
.s512 {
  padding: 8px 16px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s513 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.s514 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.s515 {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}
.s516 {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}
.s517 {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  background: #e3f2fd;
  color: #1565c0;
  align-self: start;
}

/* ===========================================================
   [MEMBERSHIP] MEMBERSHIP plans
   (9 generated classes from Views/Membership/)
   =========================================================== */
.s174 {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s380 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 6px;
}
.s381 {
  color: #999;
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  text-align: center;
}
.s382 {
  border: 1px solid #e5e5e5;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}
.s383 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.s384 {
  font-size: 24px;
  font-weight: 700;
  color: #4caf50;
  margin: 10px 0;
}
.s385 {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}
.s386 {
  font-size: 14px;
  color: #555;
  list-style: none;
  padding: 0;
}
.s387 {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

/* ===========================================================
   [SHIPPING] SHIPPING methods page
   (9 generated classes from Views/Shipping/)
   =========================================================== */
.s204 {
  margin-bottom: 10px;
}
.s497 {
  border: 1px solid #e5e5e5;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 20px;
}
.s498 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.s499 {
  font-weight: 500;
  font-size: 15px;
}
.s500 {
  background: #e3f2fd;
  color: #337ab7;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.s501 {
  color: #999;
  font-size: 13px;
  margin-top: 3px;
}
.s502 {
  padding: 5px 10px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.s503 {
  padding: 5px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.s504 {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

/* ===========================================================
   [ATTRS] CATEGORY ATTRIBUTES (EAV)
   (14 generated classes from Views/Attribute/)
   =========================================================== */
.s164 {
  margin-bottom: 8px;
}
.s165 {
  background: #e7f7e7;
  border: 1px solid #9bd79b;
  color: #1a651a;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.s166 {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 300px;
}
.s167 {
  border: 1px solid #e5e5e5;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 15px;
}
.s168 {
  padding: 15px;
  color: #999;
}
.s169 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.s171 {
  padding: 4px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s172 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.s173 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.s175 {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.s176 {
  font-size: 13px;
  margin-right: 15px;
}
.s177 {
  width: 80px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s179 {
  border: 1px dashed #ddd;
  background: #fafafa;
  padding: 12px;
  border-radius: 6px;
}
.s181 {
  padding: 6px 12px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 8px;
}

/* ===========================================================
   CONDITIONAL-STATE CLASSES (used with Razor @(cond ? "..." : ""))
   These replace the last few dynamic style="..." expressions.
   =========================================================== */

/* Password-eye toggle button on Auth/Login + Auth/Register */
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 16px;
}

/* Admin Listings filter row - 5 status buttons */
.btn-filter {
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #555;
  display: inline-block;
}
.btn-filter.on-primary {
  background: #337ab7;
  color: white;
  border-color: #337ab7;
}
.btn-filter.on-green {
  background: #4caf50;
  color: white;
  border-color: #4caf50;
}
.btn-filter.on-orange {
  background: #f0960a;
  color: white;
  border-color: #f0960a;
}
.btn-filter.on-red {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}
.btn-filter.on-purple {
  background: #9b59b6;
  color: white;
  border-color: #9b59b6;
}

/* Forum category filter chips (smaller) */
.btn-filter-sm {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid #ddd;
  color: #337ab7;
  display: inline-block;
}
.btn-filter-sm.on {
  background: #337ab7;
  color: white;
  border-color: #337ab7;
}
.btn-filter-sm + .btn-filter-sm {
  margin-left: 4px;
}

/* Admin Listings: spam/unspam toggle button */
.btn-spam-toggle {
  padding: 3px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  background-color: white;
}
.btn-spam-toggle.is-spam {
  color: #e74c3c;
}
.btn-spam-toggle.is-unspam {
  color: #4caf50;
}

/* Plugin port-status badge (was inline style from StatusBadge) */
.pill {
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}
.pill-status-done {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #9bd79b;
}
.pill-status-partial {
  background: #fff8e1;
  color: #8a6d3b;
  border: 1px solid #f0d675;
}
.pill-status-pending {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.pill-status-default {
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ddd;
}

/* Order status badge (sold/bought pages) */
.pill-lg {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  display: inline-block;
}
.pill-order-pending {
  background: #fff8e1;
  color: #8a6d3b;
  border: 1px solid #f0d675;
}
.pill-order-paid {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}
.pill-order-shipped {
  background: #ede7f6;
  color: #5e35b1;
  border: 1px solid #b39ddb;
}
.pill-order-delivered {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #9bd79b;
}
.pill-order-cancelled {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* Buyer/seller offer status pill (bigger) */
.pill-offer {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
}
.pill-offer-pending {
  background: #fff3e0;
  color: #f0960a;
}
.pill-offer-accepted {
  background: #e8f5e9;
  color: #4caf50;
}
.pill-offer-declined {
  background: #fce4ec;
  color: #e74c3c;
}

/* Chat bubbles (messages thread) */
.msg-row {
  margin-bottom: 12px;
  display: flex;
}
.msg-row.mine {
  justify-content: flex-end;
}
.msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
}
.msg-bubble.mine {
  background: #337ab7;
  color: white;
}
.msg-bubble.other {
  background: #f0f0f0;
  color: #333;
}
.msg-time {
  font-size: 11px;
  margin-top: 4px;
  color: #999;
}
.msg-time.mine {
  color: rgba(255, 255, 255, 0.7);
}

/* Inbox conversation card */
.conv-card {
  display: block;
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 8px;
  background-color: white;
  text-decoration: none;
  border-radius: 4px;
}
.conv-card.unread {
  border-color: #fca626;
  background: #fffbf0;
}

/* Search results pagination */
.page-btn {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
  text-decoration: none;
  color: #337ab7;
}
.page-btn.current {
  background: #fca626;
  color: white;
  border-color: #fca626;
}

/* Support ticket reply (staff highlight) */
.ticket-reply {
  border: 1px solid #e5e5e5;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 8px;
  background-color: white;
}
.ticket-reply.staff {
  background: #fff8e1;
}

/* Auction card: time-remaining color */
.time-warn {
  color: #f0960a;
}
.time-urgent {
  color: #e74c3c;
}

/* [SEARCH-V2] ===============================================
   /search page - bordered sidebar + List/Grid toggle + heart
   favourite on each card. Rewritten 2026-04-18 to match the
   original marketplacenz.co.nz look.
   =========================================================== */
.sp-crumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 16px 4px;
  font-size: 13px;
  color: #888;
}
.sp-crumb a {
  color: #888;
  text-decoration: none;
}
.sp-crumb a:hover {
  color: #337ab7;
}
.sp-crumb-sep {
  margin: 0 6px;
  color: #bbb;
}
.sp-crumb-cur {
  color: #444;
}

.sp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 30px;
}
.sp-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 15px;
}
@media (max-width: 768px) {
  .sp-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar - matches Osclass Flatter theme widget pattern:
   no outer padding, each piece is its own bordered widget with a grey header. */
.sp-side {
  background: transparent;
  padding: 0;
  border: none;
  align-self: flex-start;
}
/* Mirrors Osclass Flatter:  div.widget { border + margin-bottom }
                              div.widget h3 { grey bg + bottom border }
   My class name is .sp-widget so it doesn't collide with Tailwind widget. */
.sp-widget {
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  margin-bottom: 15px;
  background-color: white;
  overflow: hidden; /* keeps inner h3 / form inside the rounded corners */
}
.sp-side-title {
  font-size: 20px;
  font-weight: 300;
  color: #444;
  margin: 0;
  padding: 6px 10px;
  background: #f9f9f9;
  border: none;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 0;
}
.sp-side-form {
  background-color: white;
  border: none;
  padding: 12px 10px;
  margin: 0;
}
.sp-side-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
  background-color: white;
  box-sizing: border-box;
}
.sp-grp {
  margin-bottom: 6px;
}
.sp-grp:last-child {
  margin-bottom: 0;
}
.sp-grp-h {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin: 0 0 6px;
}
/* Cascading category dropdowns: Category, then sub-category, then
   sub-sub-category stacked with a small gap between each level. */
.sp-cascade {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-input {
  width: 100%;
  padding: 9px 12px; /* matches .sp-side-search so all sidebar fields have identical height */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  color: #333;
  background-color: white; /* background-color (not shorthand) so the global select chevron survives */
  box-sizing: border-box;
}
/* dropdown option list: bigger + dark so it reads clearly */
.sp-input option { color: #333; font-size: 15px; }
/* Global custom dropdown arrow for every <select> on the public site.
   -webkit-appearance: none  -> Chrome / Safari / Edge (Chromium)
   -moz-appearance: none     -> Firefox
   appearance: none          -> modern spec, future-proof.
   The SVG chevron mirrors the native Chrome caret shape and sits ~8px
   from the right edge instead of flush, giving it that small left nudge. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Thin V-shape (two strokes). Small + lighter than a solid triangle. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 26px;
}
/* Firefox-only: hides the leftover focus dotted outline on <select>. */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #444;
}
/* IE11 / legacy Edge fallback: hide the ugly default arrow. */
select::-ms-expand {
  display: none;
}
.sp-input:focus,
.sp-side-search:focus,
.sp-sort:focus,
.sp-view-btn:focus {
  outline: none;
  border-color: #337ab7;
  box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.18);
}
.sp-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-apply {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.sp-apply:hover {
  background: #286090;
}
.sp-attr-loading {
  font-size: 12px;
  color: #888;
  padding: 4px 0 8px;
  text-align: center;
}
.sp-alert {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-alert-btn {
  padding: 8px 12px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

/* Results header + list/grid toggle */
.sp-main {
  min-width: 0;
}
.sp-results-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sp-results-title {
  flex: 1;
  min-width: 200px;
}
.sp-results-h1 {
  font-size: 16px;
  font-weight: 500;
  color: #666;
}
.sp-results-sub {
  font-size: 13px;
  color: #999;
}
.sp-view-toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.sp-view-btn {
  padding: 7px 14px;
  background-color: white;
  color: #555;
  text-decoration: none;
  font-size: 14px;
  border-right: 1px solid #ccc;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sp-view-btn:last-child {
  border-right: none;
}
.sp-view-btn.sp-view-on {
  background: #4caf50;
  color: white;
}
.sp-view-btn.sp-view-on:hover {
  background: #43a047;
}
.sp-sort {
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  font-size: 14px;
}

/* Empty state */
.sp-empty {
  text-align: center;
  padding: 60px 20px;
  color: #888;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}

/* Card grid / list */
.sp-cards {
  display: grid;
  gap: 14px;
}
.sp-cards-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .sp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sp-cards-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.sp-cards-list {
  grid-template-columns: 1fr;
}
.sp-cards-list .sp-card-link {
  display: grid;
  grid-template-columns: 180px 1fr;
}
.sp-cards-list .sp-card-img {
  height: 140px;
}

.sp-card {
  position: relative;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 14px; /* same rounding as the fashion cards */
  overflow: hidden;
}
.sp-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #ccc;
}
.sp-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sp-card-img {
  position: relative;
  height: 300px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-card-body {
  padding: 10px 12px 12px;
}
.sp-card-title {
  font-size: 15.5px;
  font-weight: 500;
  color: #333;
  margin: 0 0 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sp-card-loc {
  font-size: 13px;
  color: #999;
  margin-bottom: 6px;
}
.sp-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sp-card-was {
  color: #999;
  font-size: 13px;
  text-decoration: line-through;
}
.sp-card-now {
  color: #111827;   /* 5.png: black prices on cards, not red */
  font-size: 17px;
  font-weight: 600;
}

/* Heart favourite button on each card */
.sp-fav-form {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.sp-fav {
  background-color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  padding: 0;
}
.sp-fav:hover {
  color: #e74c3c;
}
.sp-fav.sp-fav-on {
  color: #e74c3c;
}

.sp-sentinel {
  height: 1px;
}

/* ============================================================
   MARKETPLACENZ_RECON_2026_05_22 - reconstructed feature CSS (auction panel, reserve, bids,
   orders grid, my-listings grid, sidebar white, reviews/reply). Promoted from inline styles.
   ============================================================ */

/* ---- page bg + sidebar white ---- */
html body.bg-white { background-color: #f7f8fa; }
/* Pages that opt out of the grey app background (ViewData["BodyClass"]="page-white"). */
html body.bg-white.page-white { background-color: #fff; }
.s495 { background: #ffffff; border: 1px solid #e5e7eb; }
.s496 {
    background: #f3f4f6; color: #6b7280; font-weight: 600;
    text-transform: uppercase; font-size: 12px; letter-spacing: 0.4px;
    border-bottom: 1px solid #e5e7eb;
}
.s495 a:hover { background: #f9fafb; }

/* ---- right-column auction panel ---- */
.listing-right-col { display: flex; flex-direction: column; gap: 12px; }
.auction-panel-right { border: 1px solid #fde68a; background: #fffbeb; padding: 14px 16px; border-radius: 8px; width: 100%; box-sizing: border-box; }
.auction-panel-status { font-size: 13px; color: #92400e; font-weight: 700; margin-bottom: 8px; }
.auction-panel-rows { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.auction-panel-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.auction-panel-rows .apl { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.auction-panel-rows strong { font-size: 14px; color: #111827; }
.auction-panel-rows .reserve-badge { justify-content: space-between; width: 100%; margin-top: 4px; }
.auction-bid-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.auction-bid-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.auction-bid-btn { width: 100%; background: #f59e0b; color: white; padding: 10px 16px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.auction-bid-btn:hover { background: #d97706; }
.auction-buynow-btn { width: 100%; background: #16a34a; color: white; padding: 10px 16px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.auction-buynow-btn:hover { background: #15803d; }
/* Trade Me autobid (2026-09-18) */
.ap-mybid { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.ap-mybid-lead { color: #15803d; }
.ap-mybid-out { color: #b91c1c; }
.ap-owner-note { color: #374151; font-weight: 500; }
.s360[hidden] { display: none; }
.ap-maxlbl { font-size: 13px; color: #374151; font-weight: 600; text-align: left; margin-bottom: -4px; }
.ap-autohint { font-size: 12.5px; color: #6b7280; line-height: 1.35; text-align: left; }
.ap-live-msg { font-size: 13px; line-height: 1.35; margin: 6px 0 8px; padding: 8px 10px; border-radius: 6px; background: #ecfdf5; color: #065f46; text-align: left; }
.ap-live-msg.bad { background: #fef2f2; color: #991b1b; }
.ap-extend-note { font-size: 12px; color: #6b7280; margin-top: 2px; }
.auction-bid-form button[disabled] { opacity: .6; cursor: wait; }
.bid-auto-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: #0891b2; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 0 6px; vertical-align: middle; }
.auction-login-prompt { margin-top: 10px; text-align: center; font-size: 13px; }
.auction-login-prompt a { color: #0891b2; text-decoration: underline; }

/* ---- BIDS trigger (blue, right-aligned, opens modal) ---- */
.bids-trigger { cursor: pointer; user-select: none; }
.bids-trigger .apl { color: #0891b2; font-weight: 600; }
.bids-trigger strong { color: #0891b2; }
.bids-trigger-right { display: inline-flex; align-items: baseline; gap: 4px; }
.bids-trigger:hover .apl, .bids-trigger:hover strong { text-decoration: underline; }

/* ---- reserve badge ---- */
.reserve-badge { margin-top: 4px; padding: 4px 10px; border-radius: 4px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.reserve-met { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.reserve-not-met { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.reserve-status { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }

/* ---- bid history table + modal ---- */
body.bid-modal-open { overflow: hidden; }
.bid-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.bid-modal-overlay[hidden] { display: none; }
.bid-modal { background: #fff; border-radius: 8px; max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.bid-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.bid-modal-title { font-weight: 600; font-size: 16px; color: #111827; }
.bid-history-count { color: #6b7280; font-weight: 400; font-size: 13px; }
.bid-modal-close { background: transparent; border: none; font-size: 24px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 6px; }
.bid-modal-close:hover { color: #111827; }
.bid-modal-body { overflow-y: auto; padding: 0; }
.bid-history-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.bid-history-table th { text-align: left; padding: 8px 12px; background: #f9fafb; color: #6b7280; font-weight: 600; font-size: 12px; }
.bid-history-table td { padding: 8px 12px; border-top: 1px solid #f3f4f6; color: #374151; }
.bid-history-table .bid-amount-col { text-align: right; }
.bid-history-table .bid-when { color: #6b7280; font-size: 12px; }
.bid-history-table .bid-winning { background: #fffbeb; }
.bid-history-table .bid-winning td { color: #92400e; }

/* ---- orders: filter tabs, banner, tracking, grid cards, feedback ---- */
.order-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
.feedback-prompt-banner { background: #fef3c7; border: 1px solid #fbbf24; color: #92400e; padding: 10px 14px; border-radius: 6px; margin: 8px 0 12px; font-size: 14px; }
.tracking-link { color: #0891b2; text-decoration: underline; }
.order-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.order-item-card { border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; padding: 8px; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; }
.order-item-thumb-link { flex: 0 0 64px; width: 64px; height: 64px; background: #f3f4f6; border-radius: 4px; overflow: hidden; display: block; }
.order-item-thumb { width: 64px; height: 64px; object-fit: cover; display: block; }
.order-item-thumb-empty { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.order-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.listing-title-link { color: #0891b2; text-decoration: none; font-weight: 600; line-height: 1.3; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.listing-title-link:hover { text-decoration: underline; }
.listing-removed { color: #6b7280; }
.order-item-meta { font-size: 11px; color: #6b7280; }
.order-item-total { font-size: 13px; font-weight: 700; color: #111827; }
@media (max-width: 900px) { .order-items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .order-items-grid { grid-template-columns: 1fr; } }
.order-feedback { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.order-feedback-shown { font-size: 13px; color: #374151; }
.feedback-comment-shown { color: #6b7280; }
.stars-on { color: #fbbf24; }
.stars-off { color: #d1d5db; }
.feedback-summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #0891b2; }
.order-feedback-form { margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.feedback-rating { padding: 6px; border: 1px solid #d1d5db; border-radius: 4px; }
.feedback-comment { flex: 1; min-width: 240px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.feedback-submit { background: #16a34a; color: white; padding: 6px 14px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.tracking-edit-form { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.tracking-edit-input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; width: 180px; }
.tracking-edit-btn { background: #6b7280; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tracking-edit-btn:hover { background: #4b5563; }

/* ---- my-listings 3-per-row grid ---- */
.my-listings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0; }
@media (max-width: 900px) { .my-listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .my-listings-grid { grid-template-columns: 1fr; } }
.my-listing-card { background: white; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.my-listing-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: #ccc; }
.my-listing-card-link { display: block; text-decoration: none; color: inherit; }
.my-listing-card-img { position: relative; height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.my-listing-card-img img { width: 100%; height: 100%; object-fit: cover; }
.my-listing-card-body { padding: 10px 12px; }
.my-listing-card-title { font-size: 14px; font-weight: 600; color: #0891b2; margin: 0 0 4px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.my-listing-card-loc { font-size: 12px; color: #999; margin-bottom: 4px; }
.my-listing-card-price { font-size: 15px; font-weight: 700; color: #16a34a; margin-bottom: 6px; }
.my-listing-card-stats { font-size: 11px; color: #6b7280; }
.my-listing-card-actions { display: flex; gap: 6px; padding: 8px 12px 12px; margin-top: auto; border-top: 1px solid #f3f4f6; padding-top: 10px; }
.my-listing-btn { flex: 1; text-align: center; padding: 6px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.my-listing-btn-view { color: #374151; }
.my-listing-btn-view:hover { background: #f9fafb; }
.my-listing-btn-edit { color: #0891b2; border-color: #0891b2; }
.my-listing-btn-edit:hover { background: #ecfeff; }
.my-listing-btn-del { color: #dc2626; border-color: #fecaca; }
.my-listing-btn-del:hover { background: #fef2f2; }
.my-listing-del-form { flex: 1; display: flex; margin: 0; }
.my-listing-del-form .my-listing-btn { width: 100%; }

/* ---- reviews-section on /user/{id} ---- */
.reviews-section { max-width: 760px; margin: 24px auto; font-size: 14px; }
.feedback-header { margin-bottom: 12px; }
.profile-review-form { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; margin-bottom: 18px; background: #fafafa; }
.profile-review-rating-row { margin-bottom: 8px; }
.profile-review-label { font-weight: 600; }
.profile-review-comment { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.profile-review-form .feedback-submit { margin-top: 8px; padding: 8px 18px; }
.review-row { border-bottom: 1px solid #eee; padding: 10px 0; }
.review-row-head { display: flex; justify-content: space-between; }
.review-date { color: #888; font-size: 12px; }
.review-comment { margin-top: 6px; color: #374151; }
.review-reply { margin-top: 6px; margin-left: 12px; padding: 6px 10px; border-left: 3px solid #0891b2; background: #f0f9ff; color: #0c4a6e; font-size: 13px; }
.reply-details { margin-top: 6px; }
.reply-summary { cursor: pointer; font-size: 12px; color: #0891b2; font-weight: 600; }
.review-reply-form { margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
.reply-input { flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
.reply-submit { background: #0891b2; color: white; padding: 6px 12px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 13px; }
.review-remove-form { display: inline; margin-top: 6px; }
.review-remove { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 12px; padding: 0; }


/* LOCATION_AUTOCOMPLETE_2026_05_22 */
.loc-autocomplete { position: relative; }
.loc-suggest { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 6px 6px; z-index: 50; max-height: 240px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.loc-suggest[hidden] { display: none; }
.loc-suggest-item { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.loc-suggest-item:hover { background: #f0f9ff; color: #0891b2; }

/* ADMIN_LOCATIONS_2026_05_22 */
.loc-page-head{margin-bottom:14px}.loc-page-head h1{margin:4px 0}.loc-page-head .blurb{color:#6b7280;font-size:13px}
.loc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.loc-col{border:1px solid #e5e7eb;border-radius:6px;background:#fff;max-height:560px;overflow-y:auto}
.loc-col-head{position:sticky;top:0;background:#f9fafb;border-bottom:1px solid #e5e7eb;padding:8px 12px;font-weight:600;font-size:13px;color:#374151}
.loc-row{padding:7px 12px;border-bottom:1px solid #f3f4f6;font-size:13px}
.loc-row a.loc-more{color:#0891b2;text-decoration:none;display:block}
.loc-row a.loc-more:hover{text-decoration:underline}
.loc-row.loc-active{background:#ecfeff}
.loc-count{color:#9ca3af;font-size:11px}
.loc-empty{padding:12px;color:#9ca3af;font-size:13px}
.loc-search{padding:8px 12px;border-bottom:1px solid #e5e7eb}
.loc-search input{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:13px}
@media(max-width:760px){.loc-cols{grid-template-columns:1fr}}

/* HIDE_NUMBER_SPINNERS_2026_05_22 - remove native up/down stepper arrows on every number input (front + admin) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* AV_CASCADE_GAP_2026_05_23 - 5px gap between cascading attribute dropdowns (search + post-ad) */
.av-cascade-wrap{display:flex;flex-direction:column;gap:6px}

/* CAT_CASCADE_POST_2026_05_23 - cascading category level dropdowns on the post-ad form */
.cat-cascade-post{display:flex;flex-direction:column;gap:6px}

#attrFilters:not(:empty){margin-bottom:6px}

#attrFilters .sp-grp:not(:last-child){margin-bottom:12px}

/* Category cascade "Dotted-line separator" (admin per-category toggle): a greyed,
   non-selectable divider row shown after a category in the sub-category dropdown. */
.sp-sep { color: #9aa0a6; font-family: monospace; letter-spacing: -1px; }

/* ── Dropdowns: long option text ellipsizes ("...") before the chevron instead of
   running underneath it. select[class] out-specifies class padding shorthands
   (e.g. .sp-input's `padding: 9px 12px`) that were killing the right padding. ── */
select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
select[class] {
  padding-right: 28px;
}


/* Attribute "CHECKBOX" search type: tickable value list with round colour swatches */
.sp-attr-checks { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow: auto; }
.sp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: #374151; }
.sp-check input { accent-color: #f97316; width: 15px; height: 15px; flex-shrink: 0; }
.sp-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); display: inline-block; flex-shrink: 0; }


/* CHECKBOX search type v2: compact select-look dropdown + WHITE checkboxes (user 1.png). */
.sp-checkdrop { position: relative; }
.sp-checkdrop-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: #fff; cursor: pointer; text-align: left;
}
.sp-checkdrop-caret { color: #6b7280; font-size: 11px; margin-left: 8px; }
.sp-checkdrop-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); padding: 10px 12px;
    max-height: 280px; overflow: auto;
}
.sp-attr-checks { max-height: none; }
.sp-check input {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; border: 1.5px solid #d1d5db; border-radius: 4px;
    background: #fff; position: relative; cursor: pointer; accent-color: unset;
}
.sp-check input:checked { background: #fff; border-color: #6b7280; }
.sp-check input:checked::after {
    content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
    border: solid #374151; border-width: 0 2px 2px 0; transform: rotate(45deg);
}


/* CHECKBOX dropdown v3: bigger boxes + Clear all + type-to-search header */
.sp-check input { width: 18px; height: 18px; }
.sp-check input:checked::after { left: 5.5px; top: 2px; width: 4.5px; height: 9px; }
.sp-checkdrop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sp-checkdrop-find {
    flex: 1; min-width: 0; padding: 7px 10px; font-size: 13.5px;
    border: 1px solid #d1d5db; border-radius: 6px; outline: none;
}
.sp-checkdrop-find:focus { border-color: #f97316; }
.sp-checkdrop-clear {
    background: none; border: 0; color: #2f6fb3; font-size: 13px;
    cursor: pointer; white-space: nowrap; padding: 0; margin-left: auto;
}
.sp-checkdrop-clear:hover { text-decoration: underline; }


/* Checkbox-dropdown caret: same SVG chevron as the native category selects (user 1.png) */
.sp-checkdrop-btn { position: relative; padding-right: 36px; }
.sp-checkdrop-caret {
    font-size: 0;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; margin-left: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: center;
}


/* Dropdown option rows: light grey hover highlight */
.sp-check { padding: 5px 8px; margin: 0 -4px; border-radius: 6px; }
.sp-check:hover { background: #f3f4f6; }


/* "Clear filters" link under Apply Filters */
.sp-clearfilters {
    display: block; text-align: center; margin-top: 9px;
    color: #2f6fb3; font-size: 13.5px; text-decoration: none;
}
.sp-clearfilters:hover { text-decoration: underline; }


/* "Clear filter" text in the sidebar header row */
.sp-side-title { display: flex; align-items: center; justify-content: space-between; }
.sp-clearfilters-top {
    font-size: 13px; font-weight: 400; color: #2f6fb3;
    text-decoration: none; white-space: nowrap; margin-left: 10px;
}
.sp-clearfilters-top:hover { text-decoration: underline; }


/* No horizontal scrollbar in the checkbox dropdown (the hover rows' negative
   margin was pushing content wider than the panel). */
.sp-checkdrop-panel { overflow-x: hidden; }
.sp-check { margin: 0; }


/* Grouped dropdown values (Age / Size -> Male / Female group headers) */
.sp-check-group { margin-bottom: 4px; }
.sp-check-group-h {
    font-size: 12px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px;
}


/* Open dropdown panels must stack above every other filter group */
.sp-checkdrop { position: relative; }
.sp-checkdrop:has(.sp-checkdrop-panel:not([hidden])) { z-index: 400; }
.sp-checkdrop-panel { z-index: 500; }


/* Post-ad form: colour attribute as round-swatch dropdown (matches sidebar search) */
.av-swatchdrop .sp-checkdrop-btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
.av-swatchdrop .sp-dot[hidden] { display: none; }
.av-swatch-row { cursor: pointer; }


/* Post-ad form: UK / US / EU sizes - three labelled fields in one row */
.av-intl-row { display: flex; gap: 14px; }
.av-intl-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.av-intl-field .s328 { width: 100%; }
.av-intl-flabel { min-width: 22px; color: #6b7280; font-size: 13px; }
@media (max-width: 640px) { .av-intl-row { flex-direction: column; gap: 8px; } }

/* Listing detail: international size line under the title */
.ld-intl-size { margin: 6px 0 2px; font-size: 14px; color: #374151; }


/* ── Post-a-listing category chooser (step 1) + property pricing options ── */
.lc-sub { color: #666; margin: 4px 0 18px; }
.lc-searchwrap { position: relative; margin-bottom: 20px; }
.lc-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.lc-suggest-item { display: block; padding: 9px 13px; font-size: 14px; color: #333; text-decoration: none; }
.lc-suggest-item:hover { background: #fff7ed; color: #f0960a; }
.lc-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }
.lc-list li + li { border-top: 1px solid #f0f0f0; }
.lc-list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 17px; font-weight: 600; color: #374151; text-decoration: none; }
.lc-list a:hover { background: #fff7ed; color: #f0960a; }
.lc-arrow { color: #bbb; font-size: 18px; line-height: 1; }
.lc-changecat { font-size: 13px; font-weight: 400; margin-left: 10px; color: #337ab7; text-decoration: none; }
.lc-changecat:hover { text-decoration: underline; }
.prop-opt { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.prop-opt:last-child { margin-bottom: 4px; }
.prop-lbl { display: flex; align-items: center; gap: 8px; width: 170px; font-weight: 600; color: #333; flex: 0 0 auto; }
.prop-val { flex: 1; max-width: 340px; }
.prop-val:disabled { background: #f5f5f5; }
/* From-to range (e.g. Per hour pay) */
.prop-range { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 360px; }
.prop-range .prop-range-in { flex: 1; max-width: none; }
.prop-range-sep { color: #888; font-size: 14px; }

/* Navbar username links to the account page */
a.nav-user { text-decoration: none; color: inherit; cursor: pointer; }
a.nav-user:hover { color: #f0960a; }

/* ============ Jobs dashboard (Job Seeker / Employer) ============ */
.jd-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jd-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #eef1f6; margin: 14px 0 20px; }
.jd-tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 7px; }
.jd-tab:hover { color: #2b50ec; }
.jd-tab-on { color: #16234f; border-bottom-color: #2b50ec; }
.jd-count { background: #eef1f6; color: #475569; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.jd-tab-on .jd-count { background: #e0e7ff; color: #2b50ec; }

.jd-list { display: flex; flex-direction: column; gap: 12px; }
.jd-card { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; padding: 16px 18px; }
.jd-card-main { min-width: 0; flex: 1; }
.jd-title { font-size: 16px; font-weight: 700; color: #0f172a; text-decoration: none; }
.jd-title:hover { color: #2b50ec; }
.jd-sub { font-size: 13.5px; color: #475569; margin-top: 3px; }
.jd-meta { font-size: 13px; color: #64748b; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jd-pay { color: #047857; font-weight: 700; }
.jd-dot { color: #cbd5e1; }
.jd-chip { background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 9px; }
.jd-chip-green { background: #dcfce7; color: #166534; }
.jd-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.jd-actform { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.jd-btn { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.jd-btn-primary { background: #2b50ec; color: #fff; }
.jd-btn-primary:hover { background: #2340c8; }
.jd-btn-ghost { background: #fff; color: #334155; border-color: #d5dbe6; }
.jd-btn-ghost:hover { background: #f8fafc; }

.jd-st { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; }
.jd-st-app { background: #e0e7ff; color: #3730a3; }
.jd-st-short { background: #dcfce7; color: #166534; }
.jd-st-rej { background: #fee2e2; color: #991b1b; }

.jd-empty { background: #f8fafc; border: 1px dashed #d5dbe6; border-radius: 12px; padding: 26px; text-align: center; color: #64748b; font-size: 14px; }
.jd-empty a { color: #2b50ec; font-weight: 600; }

.jd-panel { background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.jd-panel-h { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.jd-muted { color: #64748b; font-size: 13.5px; margin: 0 0 12px; }
.jd-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.jd-label { font-size: 13px; font-weight: 600; color: #334155; margin-top: 4px; }
.jd-input, .jd-textarea, .jd-file { width: 100%; border: 1px solid #d5dbe6; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: #0f172a; }
.jd-input:focus, .jd-textarea:focus { outline: none; border-color: #2b50ec; box-shadow: 0 0 0 3px rgba(43,80,236,.12); }
.jd-textarea { resize: vertical; }
.jd-hint { font-size: 12px; color: #94a3b8; }
.jd-cv-current { font-size: 14px; margin: 0 0 12px; }
.jd-cv-current a, .jd-cv-link a, .jd-cv-link { color: #2b50ec; font-weight: 600; }
.jd-cover { margin-top: 10px; font-size: 13.5px; }
.jd-cover summary { cursor: pointer; color: #2b50ec; font-weight: 600; }
.jd-cover p { margin: 8px 0 0; color: #334155; white-space: pre-wrap; }

.jd-back { display: inline-block; margin-bottom: 12px; color: #2b50ec; font-weight: 600; text-decoration: none; font-size: 14px; }
.jd-apply-h { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
.jd-apply-job { background: #f8fafc; border: 1px solid #e7e9f2; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.jd-apply-title { font-size: 17px; font-weight: 700; color: #0f172a; }
.jd-cvnote { font-size: 13.5px; color: #475569; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 9px; padding: 11px 14px; }
.jd-cvnote a { color: #2b50ec; font-weight: 600; }

/* Detail-page apply button for jobs */
.ld-apply-job { display: inline-block; background: #2b50ec; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.ld-apply-job:hover { background: #2340c8; }

@media (max-width: 640px) {
  .jd-card { flex-direction: column; }
  .jd-card-side { align-items: stretch; width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* Cascading location filter (region -> district -> suburb) */
.sp-loc-cascade { display: flex; flex-direction: column; gap: 8px; }
.sp-loc-sel { width: 100%; }
.sp-loc-sel:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

/* jobs multi-location picker modal (Z Property style) */
.jb-loc-trigger { cursor: pointer; caret-color: transparent; }
.jbloc-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 80px 16px; }
.jbloc-modal[hidden] { display: none; }
.jbloc-box { background: #fff; border-radius: 14px; width: 100%; max-width: 720px; box-shadow: 0 30px 70px rgba(9,14,40,.4); padding: 18px 20px 22px; }
.jbloc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jbloc-title { color: #64748b; font-size: 13px; }
.jbloc-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.jbloc-clear { background: #fff; border: 1px solid #d5dbe6; color: #334155; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.jbloc-clear:hover { background: #f8fafc; }
.jbloc-done { background: #2b50ec; border: none; color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
.jbloc-done:hover { background: #2340c8; }
.jbloc-searchwrap { position: relative; }
.jbloc-input { width: 100%; height: 46px; border: 2px solid #2b50ec; border-radius: 10px; padding: 0 14px; font-size: 15px; box-sizing: border-box; }
.jbloc-input:focus { outline: none; }
.jbloc-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 14px 34px rgba(9,14,40,.2); z-index: 5; max-height: 300px; overflow-y: auto; }
.jbloc-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f1f5f9; }
.jbloc-item:last-child { border-bottom: none; }
.jbloc-item:hover, .jbloc-item.jbloc-on { background: #eff2fb; }
.jbloc-nm { color: #0f172a; font-weight: 500; }
.jbloc-typ { color: #94a3b8; font-size: 12px; }
.jbloc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; min-height: 6px; }
.jbloc-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2ff; color: #2b50ec; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 6px 6px 6px 12px; }
.jbloc-x { background: none; border: none; color: #2b50ec; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.jbloc-x:hover { background: #dbe2ff; }


/* Listing form: single location autosuggest (create/edit) */
.loc-sugg-wrap { position: relative; }
.loc-sugg-panel { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.08); max-height: 280px; overflow-y: auto; }
.loc-sugg-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; }
.loc-sugg-row:hover { background: #f3f4f6; }
.loc-sugg-sub { color: #9ca3af; font-size: 0.75rem; margin-left: 0.75rem; white-space: nowrap; }


/* Header search: radius select + location typeahead panel */
select.s485.hdr-radius { min-width: 0; flex: 0 1 auto; width: 150px; }
select.hdr-radius:disabled { opacity: 0.55; cursor: not-allowed; }
select.s475.hdr-radius { max-width: 100%; }
.hdr-loc-panel { position: fixed; z-index: 60; }
/* let the whole desktop row shrink instead of clipping the radius;
   keyword field gets the lion's share, location capped so the bar has no big gap (5.png) */
.s474 .s483 { min-width: 0; flex: 3 1 auto; }
.s474 .s486 { min-width: 0; flex: 1 1 150px; max-width: 260px; }
.s474 .s487 { flex: 0 0 60px; }
@media (min-width: 768px) and (max-width: 1150px) {
  .s474 select.s485 { min-width: 130px; font-size: 14px; }
  select.s485.hdr-radius { width: 120px; }
}


/* Search sidebar: radius under the single location field */
.sp-loc-cascade .sp-radius { margin-top: 8px; }
.sp-loc-cascade .sp-radius:disabled { opacity: 0.55; }

/* lg: variants for the top search bar (compiled tailwind sheet lacks them) */
@media (min-width: 1024px) {
  form.lg\:flex { display: flex; }
  form.lg\:hidden { display: none; }
}

/* wider search buttons in the top bar (desktop row + stacked view) */
.s474 button.s487 { flex: 0 0 90px; width: 90px; }
button.s489 { flex: 0 0 60px; }


/* Post form: hidden until the preselected category chain finishes loading (no flash) */
.lc-preloading { visibility: hidden; }
.lc-preloader { padding: 48px 0; text-align: center; color: #8892a0; font-size: 15px; }


/* Multi-tick attribute grid on the post form (car Features etc.) */
.av-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; padding: 4px 0; }
.av-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #444; cursor: pointer; }


/* Item page: attribute spec block */
.item-attrs { display: grid; grid-template-columns: 1fr; gap: 6px; }
.item-attr-row { display: flex; gap: 12px; font-size: 14px; border-bottom: 1px dashed #eef1f5; padding: 4px 0; }
.item-attr-k { flex: 0 0 190px; color: #66707a; }
.item-attr-v { color: #333; }


/* Motors top pill strip (admin toggle: motors_pills_enabled) */
.motors-pills { background: #fff; border-bottom: 1px solid #eef1f5; }
.motors-pills-inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.motors-pill { display: inline-block; padding: 5px 13px; border: 1px solid #bcd3ee; border-radius: 7px; color: #2563eb; font-size: 13.5px; text-decoration: none; background: #fff; }
.motors-pill:hover { background: #eff5ff; }
.motors-pill.on { background: #2563eb; border-color: #2563eb; color: #fff; }


/* Grouped multi-tick attribute (Services, 700+ values): filter box + collapsible groups */
.av-grouped { border: 1px solid #e2e6ec; border-radius: 8px; padding: 10px; max-height: 430px; overflow-y: auto; background: #fff; }
.av-filter { width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; margin-bottom: 8px; box-sizing: border-box; }
.av-group { border-bottom: 1px solid #f0f2f6; padding: 2px 0; }
.av-group:last-child { border-bottom: none; }
.av-group summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #2d3748; padding: 7px 2px; list-style-position: inside; }
.av-group summary:hover { color: #2f6df6; }
.av-group .av-checks { padding: 2px 0 8px 18px; }


/* No left sidebar: results grid gains the sidebar width, so show 4 across (1.png).
   Pages WITH a left search (standard sidebar or Motors .ml-side) stay at 3. */
body.svcportal .sp-cards-grid,
body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
body.jobboard:not(.jobboard-search) .sp-cards-grid,
body.zproperty:not(.zp-showfilters) .sp-cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  body.svcportal .sp-cards-grid,
  body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
  body.jobboard:not(.jobboard-search) .sp-cards-grid,
  body.zproperty:not(.zp-showfilters) .sp-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  body.svcportal .sp-cards-grid,
  body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
  body.jobboard:not(.jobboard-search) .sp-cards-grid,
  body.zproperty:not(.zp-showfilters) .sp-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body.svcportal .sp-cards-grid,
  body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
  body.jobboard:not(.jobboard-search) .sp-cards-grid,
  body.zproperty:not(.zp-showfilters) .sp-cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}


/* Business seller card + listing agent (TradeMe-style) */
.biz-card { padding: 4px 0 10px; border-bottom: 1px solid #f0f2f6; margin-bottom: 10px; }
.biz-logo { max-height: 54px; max-width: 200px; object-fit: contain; margin-bottom: 8px; display: block; }
.biz-name { font-size: 17px; font-weight: 800; color: #16213a; }
.biz-type { font-size: 13px; color: #2f6df6; font-weight: 600; margin-top: 2px; }
.biz-phone { font-size: 14px; color: #333; margin-top: 6px; }
.biz-rea { font-size: 12px; color: #66707a; margin-top: 6px; }
.agent-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.agent-card-photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #eef1f5; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; }
.agent-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-card-name { font-weight: 700; color: #16213a; }
.agent-card-role { font-size: 12.5px; color: #66707a; }
.agent-card-phone { font-size: 14px; color: #333; margin-top: 4px; }
.agent-card-lic { font-size: 11.5px; color: #66707a; margin-top: 3px; }

/* Dashboard: business upgrade + agents */
.biz-upgrade-tab { margin-top: 0; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; padding: 18px 22px 22px; }
.biz-upgrade-card { margin-top: 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 18px 22px 22px; }
.biz-note { color: #667; font-size: 14px; margin: 6px 0 12px; }
.biz-notice { background: #eafaf0; border: 1px solid #bfe8cf; color: #1e7a44; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.biz-error { background: #fdecea; border: 1px solid #f5c6c0; color: #a4372b; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.biz-pending { background: #fff8e6; border: 1px solid #f1dfa8; color: #8a6d1a; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.biz-current p { margin: 0 0 6px; font-size: 14.5px; }
.biz-lic { color: #66707a; font-size: 13px; }
.biz-agents-link { display: inline-block; margin-top: 8px; color: #2f6df6; font-weight: 700; text-decoration: none; }
.agents-wrap { max-width: 760px; }
.agents-grid { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 26px; }
.agent-tile { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; padding: 12px 14px; }
.agent-tile-photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #eef1f5; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; }
.agent-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-tile-body { flex: 1; }
.agent-tile-name { font-weight: 700; color: #16213a; }
.agent-tile-line { font-size: 13.5px; color: #444; }
.agent-tile-lic { font-size: 12px; color: #66707a; margin-top: 2px; }
.agent-del { padding: 6px 13px; background: #fff; color: #c0392b; border: 1px solid #e3b6b0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.agent-form { max-width: 440px; }


/* Offer-to-watchers (seller box on own listing) + buyer side highlight */
.sw-note { font-size: 13.5px; color: #555; margin: 0 0 10px; }
.sw-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sw-hours { flex: 0 0 120px; }
.sw-send { width: 100%; margin-top: 8px; }
.sw-offer { border-left: 4px solid #f7a600; }


/* TradeMe-style property detail header */
.pd-address { font-size: 16px; color: #444; margin: 4px 0 10px; }
.pd-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; align-items: center; }
.pd-fact { background: #f2f5f9; border: 1px solid #e2e8f0; border-radius: 7px; padding: 6px 12px; font-size: 13.5px; color: #333; }
.pd-fact b { color: #16213a; }
.pd-fact-id { background: transparent; border-color: transparent; color: #8a94a0; margin-left: auto; }

/* Agency banner card (property/dealer sidebar) */
.biz-band { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #14264c, #1e3a6e); border-radius: 10px 10px 0 0; padding: 12px 14px; }
.biz-band-logo { background: #fff; border-radius: 7px; padding: 4px 8px; display: inline-flex; align-items: center; }
.biz-band-logo img { max-height: 34px; max-width: 120px; object-fit: contain; display: block; }
.biz-band-name { color: #fff; font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.biz-card-banded { border-bottom: 1px solid #f0f2f6; padding: 10px 2px; margin-bottom: 8px; }
.agents-row { display: flex; flex-direction: column; gap: 4px; }
.agents-row-two { flex-direction: row; gap: 12px; }
.agents-row-two .agent-card { flex: 1; flex-direction: column; align-items: center; text-align: center; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 12px 8px; }
.agents-row-two .agent-card-photo { width: 64px; height: 64px; flex-basis: auto; margin-bottom: 6px; }
.agent-card-call { display: inline-block; font-size: 14px; font-weight: 700; color: #2f6df6; text-decoration: none; margin-top: 4px; }
.agent-card-call:hover { text-decoration: underline; }
.biz-rea-foot { border-top: 1px solid #f0f2f6; padding-top: 8px; margin-top: 6px; }


/* Property detail page: mockup design (rounded gallery, stacked fact cards, price band) */
.pd-page .s335 { background: transparent; }
.pd-page .pd-gallery { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 10px; box-shadow: 0 1px 5px rgba(20,30,60,.06); }
.pd-page .s336 { width: 100%; height: 450px; object-fit: cover; border-radius: 8px; }
.pd-page .s337 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 0; }
.pd-page .s338 { width: 100%; height: 92px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .88; transition: .15s; }
.pd-page .s338:hover { opacity: 1; transform: translateY(-2px); }
.pd-page .s341 { font-size: 27px; line-height: 1.25; color: #16213a; }
.pd-page .pd-facts { gap: 10px; }
.pd-page .pd-fact { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 16px; text-align: center; min-width: 92px; }
.pd-page .pd-fact b { display: block; font-size: 17px; color: #14264c; }
.pd-page .pd-fact span { font-size: 12px; color: #6a7482; }
.pd-page .pd-fact-id { background: transparent; border-color: transparent; color: #8a94a0; align-self: center; }
.pd-page .s24 { display: block; background: #fff; border-left: 5px solid #f7a600; border-radius: 10px; padding: 14px 18px; font-size: 20px; font-weight: 800; color: #16213a; box-shadow: 0 1px 4px rgba(20,30,60,.06); }
@media (max-width: 760px) { .pd-page .s336 { height: 300px; } .pd-page .s337 { grid-template-columns: repeat(3, 1fr); } }


/* My Agents dashboard page */
.agx-sub { color: #667; font-size: 14px; margin: 4px 0 16px; }
.agx-empty { background: #fff; border: 1px dashed #cdd6e1; border-radius: 12px; padding: 34px; text-align: center; color: #55606e; display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 22px; }
.agx-empty b { font-size: 16px; color: #16213a; }
.agx-empty span { font-size: 13.5px; max-width: 380px; }
.agx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 26px; }
.agx-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 18px 14px 14px; text-align: center; box-shadow: 0 1px 5px rgba(20,30,60,.05); }
.agx-photo { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #eef1f5; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.agx-photo img { width: 100%; height: 100%; object-fit: cover; }
.agx-name { font-weight: 800; font-size: 15.5px; color: #16213a; }
.agx-role { font-size: 12px; color: #6a7482; margin-bottom: 6px; }
.agx-phone { display: inline-block; font-weight: 700; font-size: 14px; color: #2f6df6; text-decoration: none; }
.agx-line { font-size: 12.5px; color: #55606e; margin-top: 3px; word-break: break-all; }
.agx-lic { font-size: 11px; color: #8a94a0; margin-top: 7px; line-height: 1.45; }
.agx-del { margin-top: 10px; padding: 6px 16px; background: #fff; color: #c0392b; border: 1px solid #e3b6b0; border-radius: 7px; cursor: pointer; font-size: 13px; }
.agx-del:hover { background: #fdecea; }
.agx-form-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 18px; }
.agx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
@media (max-width: 700px) { .agx-form-grid { grid-template-columns: 1fr; } }


/* agent edit controls */
.agx-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; align-items: center; }
.agx-actions .agx-del { margin-top: 0; }
.agx-edit { padding: 6px 16px; background: #fff; color: #2f6df6; border: 1px solid #bcd3ee; border-radius: 7px; font-size: 13px; text-decoration: none; }
.agx-edit:hover { background: #eff5ff; }
.agx-cancel { margin-left: 10px; color: #66707a; font-size: 14px; text-decoration: none; }
.agx-cancel:hover { text-decoration: underline; }


/* agent pause + listing filter */
.agx-paused { background: #fdecea; color: #a4372b; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 9px; vertical-align: middle; }
.agx-pause { padding: 6px 14px; background: #fff; color: #8a6d1a; border: 1px solid #e6d9a8; border-radius: 7px; cursor: pointer; font-size: 13px; }
.agx-pause:hover { background: #fff8e6; }
.agx-enable { padding: 6px 14px; background: #1e9e57; color: #fff; border: none; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 700; }
.agx-enable:hover { background: #188549; }
.agf-bar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.agf-lbl { font-size: 13.5px; font-weight: 700; color: #55606e; }
.agf-sel { padding: 7px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; background-color: #fff; min-width: 220px; }
.agf-clear { font-size: 13px; color: #2f6df6; text-decoration: none; }


/* Account settings: full-width cards + two-up email/password (1.png) */
.acct-col .s216, .acct-col .s224 { max-width: none; }
.acct-card { margin: 0; }
.acct-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #ddd; border-bottom: none; border-radius: 8px 8px 0 0; overflow: hidden; background: #f4f6f9; }
.acct-tab { padding: 8px 14px; border: none; background: transparent; font-size: 13px; color: #444; cursor: pointer; border-right: 1px solid #e4e9f0; white-space: nowrap; }
.acct-tab.on { background: #fff; font-weight: 700; color: #16213a; }
.acct-tab-danger { color: #c0392b; margin-left: auto; }
.acct-tab-danger.on { background: #e0433d; color: #fff; }
.acct-pane > .s216, .acct-pane > .s224, .acct-pane .acct-card { border-radius: 0 0 8px 8px; border-top: none; }
.acct-pane .s216 { margin-bottom: 0; border-radius: 0; }
.acct-hidden { display: none; }
.acct-danger { border-color: #f0c4bf; }
.acct-del-btn { margin-top: 12px; padding: 11px 22px; background: #e0433d; color: #fff; border: none; border-radius: 8px; font-weight: 800; cursor: pointer; }
.acct-del-btn:hover { background: #c73832; }


/* Date of birth calendar (year + month dropdowns, weekday grid - 1.png) */
.dob-wrap { position: relative; }
.dobcal { position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 6px; width: 320px;
  background: #fff; border: 1px solid #dbe2ec; border-radius: 12px; padding: 14px;
  box-shadow: 0 8px 26px rgba(20,30,60,.16); }
.dobcal-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dobcal-sel { padding: 7px 10px; border: 1px solid #ddd; border-radius: 7px; font-size: 14.5px; background-color: #fff; font-weight: 600; color: #23272f; }
.dobcal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 12.5px; font-weight: 700; color: #55606e; margin-bottom: 4px; }
.dobcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dc-day { height: 38px; border: none; background: transparent; border-radius: 50%; font-size: 14px;
  color: #23272f; cursor: pointer; }
.dc-day:hover:not(:disabled) { background: #eef4ff; }
.dc-mut { color: #b6bec9; cursor: default; }
.dc-on { border: 2px solid #2f6df6; color: #2f6df6; font-weight: 700; }


/* Business upgrade flow (2.png): noticeable tab-bar text + approved banner */
.acct-upgrade-cta { color: #d97706; font-weight: 700; border: 1px solid #e8b06a; border-radius: 8px; background: #fff; margin: 7px 10px; padding: 6px 16px; }
.acct-upgrade-cta:hover { color: #b45309; background: #fff7ec; }
.biz-approved { background: #eafaf0; border: 1px solid #bfe8cf; color: #1e7a44; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.biz-blocked { background: #fdf0ee; border: 1px solid #f0c6c0; color: #a4362a; border-radius: 8px; padding: 12px 14px; font-size: 14px; font-weight: 600; }


/* Link tabs + password eye toggles (account page) */
a.acct-tab { text-decoration: none; display: inline-flex; align-items: center; }
.acct-upgrade-cta.on { background: #fff7ec; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #6b7686; padding: 4px; line-height: 0; }
.pw-eye:hover { color: #23272f; }
.pw-eye .pw-slash { display: none; }
.pw-eye-on .pw-slash { display: block; }
.pw-eye-on { color: #2563eb; }


/* TradeMe-style clickable feedback badge next to the seller name */
.fb-name { color: inherit; text-decoration: none; }
.fb-name:hover { text-decoration: underline; }
.fb-badge { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: #2563eb; text-decoration: none; font-size: 13px; font-weight: 600; vertical-align: 1px; }
.fb-badge:hover { text-decoration: underline; }
.fb-badge .fb-star { color: #f5a623; }


/* marketplacenz-style rating overview + distribution bars + role rows */
.urx-over { text-align: center; padding: 0 0 14px; }
.upx-main .reviews-section { margin-top: 0; padding-top: 0; border-top: none; }
.upx-main .urx-glob { margin-top: 0; }
.urx-glob { display: block; font-size: 56px; line-height: 1; font-weight: 800; color: #16213a; }
.urx-over .urx-stars { font-size: 22px; margin: 4px 0; }
.urx-count { color: #777; font-size: 14px; }
.urx-recent { color: #1e7a44; font-size: 13px; margin-top: 2px; font-weight: 600; }
.urx-charts { max-width: 520px; margin: 0 auto 18px; }
.urx-line { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.urx-lab { width: 60px; font-size: 13px; color: #777; text-align: right; flex: 0 0 60px; }
.urx-bar { flex: 1; background: #e8ebf0; border-radius: 4px; height: 14px; overflow: hidden; }
.urx-fill { height: 14px; border-radius: 4px; color: #fff; font-size: 10px; line-height: 14px; text-align: right; padding: 0 5px; font-weight: 700; }
.urx-c5 { background: #00b050; } .urx-c4 { background: #92d050; } .urx-c3 { background: #ffc000; } .urx-c2 { background: #ff6600; } .urx-c1 { background: #c00000; }
.urx-who { display: flex; gap: 10px; align-items: flex-start; }
.urx-ava { width: 38px; height: 38px; border-radius: 50%; background: #e8ebf0; color: #55606e; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex: 0 0 38px; }
.urx-ava img { width: 100%; height: 100%; object-fit: cover; }
.urx-role { color: #666; font-size: 12.5px; margin-left: 4px; }
.urx-line2 { display: block; font-size: 13px; }
.urx-val { color: #777; font-style: normal; font-size: 12.5px; margin-left: 3px; }

/* Image crop modal (Cropper.js, like marketplacenz profile picture upload) */
.crop-overlay { position: fixed; inset: 0; background: rgba(10,15,30,.55); z-index: 400; display: flex; align-items: center; justify-content: center; }
.crop-overlay[hidden] { display: none; }
.crop-modal { background: #fff; border-radius: 12px; padding: 16px; width: min(560px, 94vw); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.crop-title { font-weight: 700; color: #16213a; margin-bottom: 10px; }
.crop-stage { height: 360px; background: #111; }
.crop-stage img { max-width: 100%; display: block; }
.crop-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.crop-spacer { flex: 1; }
.crop-zoom { width: 36px; height: 32px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; }
.crop-cancel { padding: 8px 14px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; }
.crop-apply { padding: 8px 16px; border: none; background: #f59e0b; color: #fff; border-radius: 6px; font-weight: 700; cursor: pointer; }
.crop-apply:hover { background: #d97706; }


/* One-page member profile: profile + rating left, listings right */
.upx-wrap { display: flex; gap: 24px; align-items: flex-start; }
.upx-left { flex: 0 0 300px; min-width: 0; }
.upx-main { flex: 1; min-width: 0; }
.upx-main .s434 { margin-top: 0; }
@media (max-width: 900px) { .upx-wrap { flex-direction: column; } .upx-left { flex: none; width: 100%; } }


/* Profile left-column menu: Listings / Feedback */
.upx-nav { display: flex; flex-direction: column; border: 1px solid #e4e9f0; border-radius: 10px; overflow: hidden; margin: 14px 0; background: #fff; }
.upx-nav a { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; color: #23272f; text-decoration: none; font-weight: 600; border-bottom: 1px solid #eef1f5; }
.upx-nav a:last-child { border-bottom: none; }
.upx-nav a:hover { background: #f7f9fc; }
.upx-nav a.on { background: #eef4ff; color: #2563eb; }
.upx-nav a span { background: #eef1f5; color: #55606e; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.upx-nav a.on span { background: #dbe7ff; color: #2563eb; }


/* Green block-star seller rating (marketplacenz style) */
.fb-rate { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; margin: 3px 0 2px; }
.fb-rb { width: 18px; height: 18px; border-radius: 3px; background: #c6ccd4; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.fb-rb.on { background: #85b93e; }
.fb-rate em { font-style: normal; color: #1e40af; font-weight: 400; font-size: 13.5px; margin-left: 5px; }
.fb-rate:hover em { text-decoration: underline; }


/* My Listings filters (5.png): category accordion + keyword search */
.mlf-panel { border: 1px solid #e4e9f0; border-radius: 10px; background: #fff; margin: 14px 0 18px; overflow: hidden; }
.mlf-cat summary { padding: 12px 16px; font-weight: 700; color: #2563eb; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mlf-cat summary::after { content: "\25BE"; color: #8a94a3; }
.mlf-cat[open] summary::after { content: "\25B4"; }
.mlf-cat-list { border-top: 1px solid #eef1f5; }
.mlf-cat-row { display: block; padding: 10px 16px; color: #2563eb; text-decoration: none; border-bottom: 1px solid #eef1f5; font-size: 14.5px; }
.mlf-cat-row:hover { background: #f7f9fc; }
.mlf-cat-row.on { background: #eef4ff; font-weight: 700; }
.mlf-form { display: flex; gap: 12px; align-items: flex-end; padding: 14px 16px; background: #fafbfd; flex-wrap: wrap; }
.mlf-fld-cat { flex: 0 0 240px; min-width: 220px; }
.mlf-fld { flex: 1; min-width: 200px; }
.mlf-fld-sm { flex: 0 0 150px; min-width: 150px; }
.mlf-fld label { display: block; font-size: 13px; font-weight: 700; color: #444; margin-bottom: 5px; }
.mlf-search { padding: 10px 22px; border: none; border-radius: 7px; background: #2ba7c9; color: #fff; font-weight: 700; cursor: pointer; }
.mlf-search:hover { background: #2492b1; }
.mlf-clear { align-self: center; color: #c0392b; font-size: 13.5px; text-decoration: underline; }
.my-listing-btn-photos { background: #eef4ff; color: #2563eb; }


/* Expired listings note (2.png) */
.exp-note { font-size: 15px; font-weight: 700; color: #444; margin: 4px 0 10px; }
.exp-note b { color: #e0433d; }


/* 9.png: vertical profile card with the member's real picture on top */
.upx-left .s431 { flex-direction: column; text-align: center; gap: 10px; margin-bottom: 14px; }
.upx-left .s432 { width: 110px; height: 110px; overflow: hidden; }
.upx-left .s432 img { width: 100%; height: 100%; object-fit: cover; }
.upx-left .s375 { display: flex; justify-content: center; }
/* profile listings tab: same picture size as search result cards, rounded corners */
.upx-main .s183 { border-radius: 10px; }
.upx-main .s435 { height: 300px; background: #f5f5f5; overflow: hidden; }
.upx-main .s435 img { width: 100%; height: 100%; object-fit: cover; }


/* Photo upload warning (files skipped: too big, wrong type, over the cap) */
.img-warn { background: #fff8e6; border: 1px solid #f1dfa8; color: #8a6d1a; border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.img-warn a { color: #8a6d1a; text-decoration: underline; margin-left: 4px; }


/* "Preparing image 2 of 5..." note under the photo picker */
.img-prep { background: #eef4ff; border: 1px solid #cfe0ff; color: #234a86; border-radius: 8px; padding: 9px 13px; margin: 9px 0; font-size: 14px; }


/* Photo picker (post / edit listing) */
.up-drop { border: 2px dashed #c7d0dc; border-radius: 10px; background: #fafbfd; padding: 26px 16px; text-align: center; cursor: pointer; color: #55606e; }
.up-drop:hover, .up-over { border-color: #2f6df6; background: #f2f7ff; }
.up-drop b { display: block; font-size: 15px; color: #23272f; margin-bottom: 4px; }
.up-drop span { font-size: 13px; color: #7d8798; }
.up-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.up-tile { width: 168px; background: #eef7ee; border: 1px solid #d4e6d4; border-radius: 8px; padding: 8px; cursor: grab; }
.up-tile.up-drag { opacity: .45; }
.up-tile.up-busy { background: #f4f6f8; }
.up-tick { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; margin-bottom: 6px; }
.up-frame { height: 132px; background: #fff; border: 1px solid #dde4ec; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12.5px; color: #7d8798; }
.up-frame img { max-width: 100%; max-height: 100%; display: block; }
.up-btns { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.up-rot { width: 34px; height: 28px; border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
.up-rot:hover:not(:disabled) { background: #eef4ff; border-color: #2f6df6; }
.up-delsel { display: inline-block; margin-top: 10px; color: #c0392b; font-size: 14px; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.up-note { margin-top: 9px; font-size: 13.5px; color: #234a86; background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 8px; padding: 8px 12px; }
.up-note.up-bad { color: #8a6d1a; background: #fff8e6; border-color: #f1dfa8; }


/* Controls on a listing's existing photos (edit page) */
.cur-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 4px; }
.cur-btn { width: 34px; height: 28px; border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; }
.cur-btn:hover:not(:disabled) { background: #eef4ff; border-color: #2f6df6; }
.cur-main { flex: 1 0 100%; height: 28px; padding: 0 6px; border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: #23272f; white-space: nowrap; }
.cur-main:hover:not(:disabled) { background: #eafaf0; border-color: #1e7a44; color: #1e7a44; }
.up-mainbtn { width: 100%; margin-top: 7px; }
.cur-main.is-main { background: #2f6df6; border-color: #2f6df6; color: #fff; font-weight: 600; }
.cur-main.is-main:hover { background: #2560db; border-color: #2560db; color: #fff; }


/* Car Parts: model and year tick lists */
.cp-filter { margin-bottom: 8px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px;
  max-height: 260px; overflow-y: auto; border: 1px solid #e4e9f0; border-radius: 8px; padding: 10px; background: #fff; }
.cp-tick { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #23272f; }
.cp-tick input { flex: none; width: 18px; height: 18px; }

.cp-years .cp-grid { max-height: 190px; }
.cp-years > label { color: #23272f; }

.cp-missing .cp-grid { border-color: #d93025; box-shadow: 0 0 0 2px rgba(217, 48, 37, .12); }
.cp-yearerr { margin-top: 8px; color: #d93025; font-size: 14px; }


/* Car Parts fitment popup */
.cp-hint { color: #5b6472; font-size: 13px; margin: 2px 0 8px; }
.cp-btn { border: 1px solid #cfd6e0; background: #fff; border-radius: 8px; padding: 8px 14px;
  font-size: 14px; cursor: pointer; }
.cp-btn:hover { background: #f4f7fb; }
.cp-btn-add { display: inline-block; font-weight: 600; color: #1558d6; border-color: #b9cdf3; }
.cp-btn-go { background: #1558d6; border-color: #1558d6; color: #fff; font-weight: 600; }
.cp-btn-go:hover { background: #1148ad; }
.cp-btn-plain { color: #444; }

.cp-rows { margin-top: 10px; border: 1px solid #e4e9f0; border-radius: 10px; overflow: hidden; }
.cp-row { display: flex; align-items: stretch; border-top: 1px solid #eef2f7; background: #fff; }
.cp-rows .cp-row:first-child { border-top: 0; }
.cp-row-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: 0; padding: 11px 14px; font-size: 14px; cursor: pointer; text-align: left; }
.cp-row-main:hover { background: #f6f9fe; }
.cp-row-make .cp-row-t { font-weight: 600; color: #23272f; }
.cp-row-model { background: #fbfcfe; }
.cp-row-model .cp-row-main { padding-left: 34px; }
.cp-row-model .cp-row-t { color: #23272f; }
.cp-row-n { color: #5b6472; font-size: 13px; }
.cp-row-todo .cp-row-n { color: #b4690e; }
.cp-row-x { border: 0; background: none; color: #98a2b3; font-size: 20px; line-height: 1;
  padding: 0 14px; cursor: pointer; }
.cp-row-x:hover { color: #d93025; }
.cp-err { margin-top: 10px; color: #d93025; font-size: 14px; }

.cp-ov { position: fixed; inset: 0; background: rgba(16, 22, 32, .45); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.cp-win { background: #fff; border-radius: 12px; width: min(560px, 100%); max-height: 82vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.cp-win-h { padding: 16px 18px 6px; font-size: 17px; font-weight: 600; color: #23272f; }
.cp-win-hint { padding: 0 18px 10px; color: #5b6472; font-size: 13px; }
.cp-find { margin: 0 18px 12px; width: calc(100% - 36px); padding: 10px 14px 10px 38px; font-size: 14px; border: 1px solid #d5dbe4; border-radius: 9px; color: #23272f; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237a8494'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center; transition: border-color .15s, box-shadow .15s; }
.cp-find::placeholder { color: #9aa3b0; }
.cp-find:focus { outline: none; border-color: #1558d6; box-shadow: 0 0 0 3px rgba(21,88,214,.12); }
.cp-win .cp-all { margin: 0 18px 8px; padding: 8px 10px; background: #f4f7fb; border-radius: 8px; font-weight: 600; }
.cp-win-b { overflow-y: auto; padding: 0 18px 8px; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.cp-onecol .cp-win-b { grid-template-columns: 1fr; gap: 4px; }
.cp-win-f { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid #eef2f7; }
.cp-win-count { flex: 1; color: #5b6472; font-size: 13px; }


/* Post form: main category as text + subcategory type-and-search */
.lc-rootname { font-weight: 600; color: #5b6472; margin-left: 8px; }
#catCascade.lc-rootlocked > select.cat-level:first-child { display: none; }
.cat-sugg { position: relative; margin-bottom: 8px; }
.cat-sugg-panel { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid #dfe5ee; border-radius: 10px; max-height: 320px;
  overflow-y: auto; box-shadow: 0 10px 28px rgba(16, 22, 32, .12); }
.cat-sugg-row { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f2f5f9; }
.cat-sugg-row:last-child { border-bottom: 0; }
.cat-sugg-row:hover, .cat-sugg-row.is-on { background: #f4f8ff; }
.cat-sugg-n { display: block; font-size: 14px; color: #23272f; }
.cat-sugg-p { display: block; font-size: 12px; color: #7a8494; margin-top: 1px; }


/* Checkout: per-seller delivery and payment choice */
.co-seller { border: 1px solid #e4e9f0; border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #fff; }
.co-seller-h { font-weight: 600; color: #23272f; margin-bottom: 8px; }
.co-line { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.co-line-t { flex: 1; color: #1558d6; }
.co-line-q { color: #5b6472; font-size: 13px; }
.co-line-s { font-weight: 600; min-width: 78px; text-align: right; }
.co-pick { margin-top: 12px; }
.co-pick-h { font-size: 13px; font-weight: 600; color: #5b6472; margin-bottom: 6px; }
.co-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e8edf4;
  border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 14px; }
.co-opt:hover { background: #f6f9fe; }
.co-opt-n { flex: 1; }
.co-opt-f { font-weight: 600; }
.co-opt-d { color: #5b6472; font-size: 12px; }
.co-note { color: #5b6472; font-size: 12px; margin-top: 4px; }
.co-sub { margin-top: 10px; text-align: right; font-size: 13px; color: #5b6472; }


/* Listing page: delivery and payment summary */
.ship-box { border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px; margin-top: 12px; background: #fff; }
.ship-h { font-size: 13px; font-weight: 600; color: #5b6472; margin-bottom: 6px; }
.ship-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 3px 0; }
.ship-n { flex: 1; color: #23272f; }
.ship-f { font-weight: 600; }
.ship-d { color: #5b6472; font-size: 12px; }
.ship-note { color: #5b6472; font-size: 12px; margin-top: 6px; }
/* Payment + Shipping card under the price / bid box (2026-09-18) */
.pd-paydel { margin-top: 12px; }
.pd-paydel .ship-box { margin-top: 0; }
.pd-paydel .ship-box + .ship-box { margin-top: 10px; }
.pd-paydel .buy-facts { padding-top: 12px; border-top: 0; display: block; font-size: 14px; }
.pd-paydel .ship-f { color: #111827; font-weight: 600; white-space: nowrap; }
.s366.buy-now-btn { background: #1558d6; border-color: #1558d6; color: #fff; }
.s366.buy-now-btn:hover { background: #1148ad; }


/* Orders: delivery and how to pay */
.ord-pay { margin: 10px 0; padding: 10px 12px; background: #f7f9fc; border-radius: 8px; }
.ord-pay-r { display: flex; gap: 10px; font-size: 13px; padding: 2px 0; }
.ord-pay-k { color: #5b6472; min-width: 118px; }
.ord-pay-v { color: #23272f; font-weight: 500; }

.sp-year-note { font-size: 12px; color: #5b6472; margin-top: 6px; }


/* Buy Now stock */
.stock-left { font-size: 14px; color: #1a7f37; font-weight: 600; margin: 8px 0 4px; }
.stock-left.stock-none { color: #d93025; }
.stock-sold { color: #5b6472; font-weight: 400; margin-left: 8px; font-size: 13px; }
.stock-qty { display: block; font-size: 13px; color: #5b6472; margin-bottom: 6px; }
.stock-qty-in { width: 84px; margin-left: 8px; padding: 6px 8px; border: 1px solid #cfd6e0; border-radius: 6px; }


/* Breadcrumb suggestions (bold keyword, wrapping) - choose-category + post form */
.lc-searchwrap { margin-bottom: 16px; }
.lc-suggest-item { display: block; padding: 10px 13px; font-size: 14px; color: #6b7280;
  text-decoration: none; line-height: 1.6; }
.lc-suggest-item:hover { background: #fff7ed; }
.lc-crumb { color: #6b7280; }
.lc-crumb b { color: #1558d6; font-weight: 700; }
.lc-sep { color: #c4ccd6; margin: 0 6px; }


/* Post-form subcategory search: breadcrumb rows, bold keyword, responsive */
.cat-sugg-row { line-height: 1.5; white-space: normal; }
.cat-sugg-n { display: none; }
.cat-sugg-p { display: block; font-size: 13.5px; color: #6b7280; }
.cat-sugg-p .lc-sep { margin: 0 5px; }
.cat-sugg-p b { color: #1558d6; font-weight: 700; }


/* Car Parts makes popup: taller, plus a model search box */
.cp-win { max-height: 88vh; }
.cp-win-b { max-height: 58vh; min-height: 220px; }
.cp-modelsearch { margin: 0 18px 8px; }
.cp-model-panel { border: 1px solid #cfd6e0; border-radius: 8px; margin: 0 18px 10px; max-height: 300px; overflow-y: auto; box-shadow: 0 6px 18px rgba(16,22,32,.10); }
.cp-model-hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid #f2f5f9; padding: 9px 12px; font-size: 14px; cursor: pointer; }
.cp-model-hit:last-child { border-bottom: 0; }
.cp-model-hit:hover, .cp-model-hit.is-on { background: #f4f8ff; }
.cp-model-hit b { color: #1558d6; }
.cp-model-hit .cp-model-mk { color: #7a8494; font-size: 12px; margin-left: 6px; }
.cp-model-hit .cp-model-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Listing page: small category breadcrumb (4.png) */
.pd-crumb { font-size: 12.5px; color: #7a8494; margin: 0 0 12px; line-height: 1.6; }
.pd-crumb-a { color: #7a8494; text-decoration: none; }
.pd-crumb-a:hover { color: #1558d6; text-decoration: underline; }
.pd-crumb-sep { color: #c4ccd6; margin: 0 6px; }
.pd-crumb a:last-of-type, .pd-crumb > span:last-child { color: #374151; }


/* Rounded bordered image card on every listing, matching property (4.png) */
.pd-gallery-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px;
  padding: 10px; box-shadow: 0 1px 5px rgba(20,30,60,.06); }
.pd-gallery-card .s335 { border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.pd-gallery-card .s336 { border-radius: 8px; }


/* 10.png: roomier make/model search in the fitment popup */
.cp-modelsearch-in { width: 100%; padding: 11px 14px 11px 38px; font-size: 14px; border: 1px solid #d5dbe4; border-radius: 9px; color: #23272f; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237a8494'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center; transition: border-color .15s, box-shadow .15s; }
.cp-modelsearch-in::placeholder { color: #9aa3b0; }
.cp-modelsearch-in:focus { outline: none; border-color: #1558d6; box-shadow: 0 0 0 3px rgba(21,88,214,.12); }
.cp-model-panel .cp-model-hit { padding: 11px 14px; font-size: 15px; }
.cp-model-hit .cp-model-mk { flex: none; }
.cp-make-hit .cp-model-mk { background: #eef3fb; color: #1558d6; border-radius: 10px; padding: 1px 8px; font-size: 11px; }


/* Option B: post-as identity chooser + banner */
.lc-postas { border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; background: #fff; }
.lc-postas-h { font-size: 13px; font-weight: 600; color: #5b6472; margin-bottom: 8px; }
.lc-postas-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.lc-postas-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid #cfd6e0;
  border-radius: 999px; font-size: 14px; color: #23272f; text-decoration: none; cursor: pointer; }
.lc-postas-pill small { color: #7a8494; font-size: 12px; }
.lc-postas-pill.is-on { background: #1558d6; border-color: #1558d6; color: #fff; }
.lc-postas-pill.is-on small { color: #dbe6fb; }
.lc-postas-pill:not(.is-on):hover { background: #f4f7fb; }
.lc-postas-note { margin-top: 8px; font-size: 12px; color: #7a8494; }
.lc-identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #f4f8ff; border: 1px solid #d7e3fb; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.lc-identity-sw { color: #1558d6; text-decoration: none; font-weight: 600; }
.lc-identity-sw:hover { text-decoration: underline; }
/* "Want to list in a different category? Switch to your personal account." (1.png) */
.lc-identity-alt { color: #475569; font-size: .875rem; }
.lc-restrict-note .lc-identity-alt, .lc-sub .lc-identity-alt { display: block; margin-top: 4px; }




.need-prompt { background: #fff4e5; border: 1px solid #f5c26b; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; color: #7a4a00; }


/* Facebook-style identity switcher (avatar + rich dropdown) */
.idsw { position: relative; display: inline-flex; align-items: center; }
.idsw-trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 2px; border-radius: 999px; }
.idsw-trigger:hover { background: rgba(0,0,0,.05); }
.idsw-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center; flex: none; }
.idsw-ini { background: #8a94a6; color: #fff; font-size: 13px; font-weight: 700; }
.idsw-ini.biz { background: #1558d6; }
.idsw-ph { background: #dfe3ea; color: #97a1b0; }
.idsw-ph.biz { background: #dbe6fb; color: #6f9be6; }
.idsw-ph-svg { width: 66%; height: 66%; }
.idsw-avwrap { position: relative; display: inline-flex; }
.idsw-car { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  background: #e4e6eb; border: 2px solid #fff; color: #1c2733; font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.idsw-trigger:hover .idsw-car { background: #d8dbe0; }
.idsw-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px; background: #fff;
  border: 1px solid #e0e5ee; border-radius: 12px; box-shadow: 0 12px 34px rgba(16,22,32,.18); padding: 8px; display: none; z-index: 1300; }
.idsw.open .idsw-menu { display: block; }
.idsw-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; padding: 6px 10px 6px; }
.idsw-row { display: flex; align-items: center; border-radius: 10px; }
.idsw-switch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 9px 10px; text-decoration: none; }
.idsw-row:hover { background: #f2f5fa; }
.idsw-row.on { background: #eef3fb; }
.idsw-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.idsw-meta b { color: #23272f; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idsw-meta small { color: #7a8494; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.idsw-check { margin-left: auto; color: #1558d6; font-weight: 700; }
.idsw-sep { height: 1px; background: #eef2f7; margin: 6px 4px; }
.idsw-link { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: #374151; font-size: 14px; }
.idsw-link:hover { background: #f2f5fa; }


/* active identity name next to the avatar */
.idsw-curname { font-size: 14px; color: #374151; margin-right: 8px; font-weight: 600; vertical-align: middle; }

.buy-switch-note { background: #fff4e5; border: 1px solid #f5c26b; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 13px; color: #7a4a00; }
.buy-switch-note a { color: #1558d6; font-weight: 600; }

.biz-logo-preview { width: 90px; height: 90px; object-fit: contain; border: 1px solid #e4e9f0; border-radius: 10px; padding: 6px; margin-bottom: 8px; }


/* Buying-is-personal interstitial */
.bpo-ov { display: flex; justify-content: center; padding: 60px 20px; }
.bpo-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 14px; box-shadow: 0 12px 40px rgba(16,22,32,.12);
  padding: 30px 28px; max-width: 440px; text-align: center; }
.bpo-icon { font-size: 34px; margin-bottom: 6px; }
.bpo-h { font-size: 20px; font-weight: 700; color: #23272f; margin-bottom: 8px; }
.bpo-p { color: #5b6472; font-size: 14px; margin-bottom: 18px; }
.bpo-btn { display: inline-block; background: #1558d6; color: #fff; font-weight: 600; padding: 11px 20px;
  border-radius: 999px; text-decoration: none; }
.bpo-btn:hover { background: #1148ad; }
.bpo-cancel { display: block; margin-top: 12px; color: #7a8494; text-decoration: none; font-size: 13px; }




/* Facebook-like notification bell (items) */
.nbell { position: relative; display: inline-flex; align-items: center; margin-left: 16px; }
/* 6.png: plain icon like the envelope - no circle background, same size, same badge */
.nbell-btn { background: none; border: 0; width: auto; height: auto; border-radius: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; position: relative; color: #777; }
.nbell-btn:hover { background: none; color: #f0960a; }
.nbell-ic { width: 20px; height: 20px; }
.nbell-badge { position: absolute; top: -4px; right: -8px; background: #ef4444; color: #fff; font-size: 11px;
  font-weight: 600; width: 17px; height: 17px; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; padding: 0; border: 0; }
.nbell-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 400px; max-width: 94vw; background: #fff;
  border: 1px solid #e0e5ee; border-radius: 14px; box-shadow: 0 16px 44px rgba(16,22,32,.22); padding: 8px 8px 6px; display: none; z-index: 1300; }
.nbell.open .nbell-menu { display: block; }
.nbell-head { font-size: 18px; font-weight: 700; color: #23272f; padding: 8px 10px 10px; }
.nbell-empty { padding: 24px 12px; text-align: center; color: #7a8494; font-size: 14px; }
.nbell-item { display: flex; align-items: flex-start; padding: 0; margin-bottom: 6px; border-radius: 12px; }
.nbell-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px 10px 10px; text-decoration: none; }
.nbell-item:hover { background: #f2f5fa; }
.nbell-item.unread { background: #f0f6ff; }
.nbell-ava { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; background: #dfe3ea; color: #97a1b0; overflow: visible; }
.nbell-ava img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.nbell-ava > svg { width: 26px; height: 26px; }
.nbell-ic-badge { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #fff; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.nbell-ic-badge.message { background: #1558d6; }
.nbell-ic-badge.sold { background: #1a7f37; font-weight: 700; }
.nbell-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nbell-text { color: #23272f; font-size: 14px; line-height: 1.3; }
.nbell-sub { color: #45506a; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbell-acct { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: #8a93a0; margin-bottom: 2px; }
.nbell-item.unread .nbell-acct { color: #1558d6; }
.nbell-time { color: #9aa0a6; font-size: 12px; margin-top: 3px; }
.nbell-unreaddot { width: 10px; height: 10px; border-radius: 50%; background: #1558d6; flex: none; }


/* Facebook-like notification panel chrome */
.nbell-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; }
.nbell-title { font-size: 22px; font-weight: 800; color: #050505; }
.nbell-tabs { display: flex; gap: 8px; padding: 4px 6px 8px; }
.nbell-tab { border: 0; background: #eef0f2; color: #1c2733; font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.nbell-tab.on { background: #e7f0ff; color: #1558d6; }
.nbell-scroll { max-height: 62vh; overflow-y: auto; }
.nbell-sec { font-size: 16px; font-weight: 700; color: #23272f; padding: 8px 8px 4px; }
.nbell-seeall { display: block; text-align: center; color: #1558d6; font-weight: 600; padding: 10px; text-decoration: none; }
.nbell-seeall:hover { background: #f2f5fa; border-radius: 8px; }
.nbell-item { padding: 8px; }
.nbell-text { font-size: 15px; }
.nbell-ava { width: 52px; height: 52px; }
.nbell-ava img { width: 52px; height: 52px; }
/* (6.png) the old Facebook-style circle override is gone - one plain-icon style above */


/* orders-page professional skin */
.orders-page { min-width: 0; }
.orders-head { margin-bottom: 18px; }
.orders-title { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 4px; letter-spacing: -.01em; }
.orders-sub { color: #6b7280; font-size: 14px; margin: 0; }

/* KPI summary strip */
.orders-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.ostat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6e9ef;
  border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(16,22,32,.04); }
.ostat-ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 42px; font-weight: 800; font-size: 18px; }
.ostat-ic svg { width: 20px; height: 20px; }
.ostat-ic-a { background: #eef2ff; color: #4f46e5; }
.ostat-ic-b { background: #ecfdf5; color: #059669; }
.ostat-ic-c { background: #fff7ed; color: #ea580c; }
.ostat-ic-d { background: #eff6ff; color: #2563eb; }
.ostat-body { display: flex; flex-direction: column; min-width: 0; }
.ostat-num { font-size: 21px; font-weight: 800; color: #111827; line-height: 1.1; }
.ostat-lbl { font-size: 12.5px; color: #6b7280; margin-top: 2px; }

/* segmented filter tabs */
.orders-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.otab { font-size: 13.5px; font-weight: 600; color: #4b5563; background: #f3f4f6; border: 1px solid transparent;
  padding: 8px 14px; border-radius: 999px; text-decoration: none; transition: background .12s, color .12s; }
.otab:hover { background: #e9ebef; color: #111827; }
.otab.on { background: #111827; color: #fff; }

/* order card */
.ocard { background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: 20px;
  margin-bottom: 16px; box-shadow: 0 1px 3px rgba(16,22,32,.05); }
.ocard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid #f0f2f5; }
.ocard-top-l { min-width: 0; }
.ocard-id { font-size: 16px; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 10px; }
.ocard-party { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ocard-ava { width: 34px; height: 34px; border-radius: 50%; background: #e0e7ff; color: #4338ca;
  font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ocard-party-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ocard-party-role { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; font-weight: 600; }
.ocard-party-txt b { font-size: 14px; color: #1f2937; }
.ocard-date { font-size: 13px; color: #6b7280; margin-left: 4px; }
.ocard-track { font-size: 13px; color: #4b5563; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.ocard-total { text-align: right; flex: 0 0 auto; }
.ocard-total-num { font-size: 22px; font-weight: 800; color: #059669; line-height: 1.1; }
.ocard-total-sub { font-size: 12px; color: #9ca3af; margin-top: 3px; }

.ocard .ord-pay { margin-top: 16px; }
.ocard .order-items-grid { margin-top: 16px; }
.ocard-addr { margin-top: 14px; font-size: 13.5px; color: #4b5563; background: #f9fafb; border: 1px solid #eef0f3;
  border-radius: 10px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 8px; }
.ocard-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ocard-actions:empty { display: none; }
.ocard .order-feedback { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f2f5; }

/* empty state */
.orders-empty { text-align: center; background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: 48px 24px; }
.orders-empty-ic { color: #cbd5e1; margin-bottom: 12px; }
.orders-empty-ic svg { width: 46px; height: 46px; }
.orders-empty-t { font-size: 18px; font-weight: 700; color: #374151; }
.orders-empty-s { font-size: 14px; color: #6b7280; margin-top: 6px; }

@media (max-width: 720px) {
  .orders-stats { grid-template-columns: repeat(2, 1fr); }
  .ocard-top { flex-direction: column; }
  .ocard-total { text-align: left; }
}


/* osp order pages (marketplacenz parity) */
.osp-wrap { min-width: 0; }
.osp-tabhead { border-bottom: 1px solid #e0e0e0; margin-bottom: 18px; }
.osp-tabhead-on { display: inline-block; font-size: 18px; font-weight: 700; color: #111; padding: 0 2px 10px; border-bottom: 2px solid #111; margin-bottom: -1px; }

/* filter bar */
.osp-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: #f7f8fa;
  border: 1px solid #e6e9ef; border-radius: 8px; padding: 16px; margin-bottom: 18px; }
.osp-filter-field { display: flex; flex-direction: column; }
.osp-filter-field label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.osp-filter-field input, .osp-filter-field select { height: 40px; border: 1px solid #cfd6df; border-radius: 6px;
  padding: 0 12px; font-size: 14px; width: 220px; background: #fff; }
.osp-filter-grow { flex: 1 1 300px; }
.osp-filter-grow input { width: 100%; }
.osp-btn { height: 40px; border: 0; border-radius: 6px; padding: 0 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.osp-btn svg { width: 15px; height: 15px; }
.osp-btn-search { background: #1b9dc4; color: #fff; }
.osp-btn-search:hover { background: #1789ac; }
.osp-btn-reset { background: #6c7a89; color: #fff; }
.osp-btn-reset:hover { background: #5a6673; }

/* column header */
.osp-colhead { display: flex; padding: 0 4px 8px; font-size: 12px; font-weight: 700; color: #666; }
.osp-colhead-l { flex: 0 0 280px; }
.osp-colhead-r { flex: 1; padding-left: 14px; }

/* order card two-column */
.osp-order-container { display: flex; flex-wrap: wrap; margin-bottom: 15px; border: 1px solid #e0e0e0;
  border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.osp-order-left { flex: 0 0 280px; padding: 14px; border-right: 1px solid #e8e8e8; font-size: 13px; }
.osp-order-right { flex: 1; min-width: 0; padding: 14px; }
.osp-line { margin-bottom: 3px; line-height: 1.4; }
.osp-date { color: #666; font-size: 13px; border-bottom: 1px dotted #cbd2da; }
.osp-deliv { margin-top: 8px; font-weight: 600; color: #333; }
.osp-arrow { color: #1b9dc4; }
.osp-address-box { background: #eef1fb; border: 1px solid #d8def0; border-radius: 4px; padding: 8px 10px;
  margin: 6px 0 4px; font-weight: 600; color: #2a3550; line-height: 1.45; font-size: 13px; }
.osp-buyer-email { margin: 6px 0; font-size: 13px; }
.osp-buyer-email a, .osp-prod-title { color: #1b9dc4; text-decoration: none; }
.osp-buyer-email a:hover, .osp-prod-title:hover { text-decoration: underline; }
.osp-fb-block { margin-top: 10px; }
.osp-stars { font-size: 14px; }
.stars-on { color: #f5a623; letter-spacing: 1px; }
.stars-off { color: #d7dbe0; letter-spacing: 1px; }
.osp-fb-note { color: #8a8f96; font-size: 12px; margin-top: 3px; }
.osp-muted { color: #9aa0a6; }

/* right column */
.osp-product-item { margin-bottom: 6px; font-size: 14px; }
.osp-qty { color: #333; margin-right: 2px; }
.osp-price { font-weight: 600; margin-right: 6px; color: #333; }
.osp-removed { color: #9aa0a6; }
.osp-await { color: #e08a1e; font-style: italic; font-size: 13px; margin: 6px 0; display: flex; gap: 5px; align-items: center; }
.osp-await svg { width: 14px; height: 14px; }
.osp-ship-line { font-size: 13px; color: #555; margin: 2px 0; }
.osp-total-line { font-size: 15px; margin: 8px 0 4px; color: #333; }
.osp-pay-line { font-size: 13px; color: #555; margin-bottom: 8px; }
.osp-ref-line { font-size: 13px; color: #333; margin: 8px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osp-ref-badge { display: inline-block; background: #f0f4ff; color: #3366cc; font-weight: 600; font-size: 13px;
  padding: 2px 10px; border-radius: 3px; border: 1px solid #d0d8f0; letter-spacing: .5px; font-family: monospace; cursor: pointer; user-select: all; }
.osp-ref-badge:hover { background: #e0eaff; border-color: #a0b8e0; }
.osp-copy { color: #1b9dc4; cursor: pointer; font-size: 12px; user-select: none; }
.osp-copy:hover { text-decoration: underline; }
.osp-track-line { font-size: 13px; color: #333; margin: 4px 0; }

.osp-status-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }   /* status + buttons on one line (2.png 2026-09-18) */
.osp-sumline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 8px 0; }
.osp-sumline .osp-total-line, .osp-sumline .osp-pay-line, .osp-sumline .osp-ref-line { margin: 0; }
.osp-sumline .osp-pay-line::before { content: "\00b7"; margin-right: 18px; color: #9ca3af; }
.osp-sumline .osp-ref-line::before { content: "\00b7"; margin-right: 10px; color: #9ca3af; }
@media (max-width: 560px) { .osp-sumline .osp-pay-line::before, .osp-sumline .osp-ref-line::before { content: none; margin: 0; } }
.osp-status-label { font-weight: 700; color: #333; margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
.osp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.osp-act { height: 36px; border-radius: 6px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.osp-act-primary { background: #1b9dc4; color: #fff; border-color: #1b9dc4; }
.osp-act-primary:hover { background: #1789ac; }
.osp-act-ghost { background: #fff; color: #555; border-color: #cfd6df; }
.osp-act-ghost:hover { background: #f5f7f9; }
.osp-track-form { display: inline-flex; gap: 6px; align-items: center; }
.osp-track-input { height: 36px; border: 1px solid #cfd6df; border-radius: 6px; padding: 0 10px; font-size: 13px; width: 150px; }
/* Sold page: one clear "Send the item" step (user 2026-09-18) */
.osp-send-box { width: 100%; border: 1px solid #cfe3ea; background: #f4fbfd; border-radius: 8px; padding: 10px 12px; }
.osp-send-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.osp-send-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.osp-send-lbl { font-size: 13px; font-weight: 600; }
.osp-track-wide { width: 260px; max-width: 100%; }
.osp-send-hint { font-size: 12.5px; color: #5b6472; line-height: 1.35; }
.osp-sent-box { width: 100%; }
.osp-track-edit { font-size: 13px; margin-top: 4px; }
.osp-track-edit summary { cursor: pointer; color: #1b9dc4; }
.osp-track-edit form { margin-top: 6px; }
.osp-fb-days { font-weight: 400; color: #6b7280; font-size: 12px; }
a.feedback-prompt-link { display: flex; text-decoration: none; cursor: pointer; }
a.feedback-prompt-link:hover { filter: brightness(.97); }
.fb-banner-cta { margin-left: auto; font-weight: 700; color: #1b9dc4; white-space: nowrap; text-decoration: none; }
.osp-act-paypal { display: inline-flex; align-items: center; background: #ffc439; color: #111; border-color: #ffc439; text-decoration: none; margin-top: 4px; }
.osp-act-paypal:hover { background: #f4b400; }
/* auction win: the buyer's delivery choice on Bought + the seller's waiting note on Sold (2026-09-23) */
.osp-deliv-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 4px 0 8px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; max-width: 520px; }
.osp-deliv-lbl { font-size: 13px; font-weight: 600; color: #374151; }
.osp-deliv-sel { border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 10px; font-size: 13px; background: #fff; max-width: 100%; }
.osp-deliv-note { font-size: 12px; color: #6b7280; }
.osp-deliv-note a { font-weight: 600; color: inherit; }
.osp-deliv-noaddr { color: #991b1b; }
.osp-deliv-btn { margin-top: 2px; background: #1b9dc4; color: #fff; border-color: #1b9dc4; }
.osp-deliv-btn:hover { background: #1789ac; }
.osp-wait-deliv { background: #fffbeb; border-color: #fcd34d; color: #92400e; font-size: 13px; }
.ap-delivhint { font-size: 12px; color: #6b7280; margin: 0 0 8px; }
.ap-delivhint a { font-weight: 600; color: inherit; }

/* status pills */
.osp-status-pill { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: #fff; }
.osp-pill-processing { background: #29a3cc; }
.osp-pill-paid { background: #e0a020; }
.osp-pill-shipped { background: #5b8def; }
.osp-pill-delivered { background: #2e9e5b; }
.osp-pill-cancelled { background: #a7adb5; }

/* buyer purchases columns */
.osp-purch-head, .osp-purch-row { display: grid; grid-template-columns: 56px 1fr 90px 110px 130px; gap: 12px; }
.osp-purch-head { padding: 10px 14px; font-size: 12px; font-weight: 700; color: #666; border-bottom: 2px solid #e0e0e0; }
.osp-purch-row { padding: 14px; border: 1px solid #e6e9ef; border-radius: 6px; margin-bottom: 12px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); align-items: start; }
.osp-ph-qty { font-weight: 600; color: #333; }
.osp-ph-prod { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.osp-purch-title { font-size: 14px; }
.osp-purch-detail { font-size: 12.5px; color: #555; }
.osp-pay-to { color: #2e7d32; }
.osp-ph-amt { font-weight: 700; color: #333; }
.osp-ph-date { color: #666; font-size: 13px; }
.osp-inline-form { margin-top: 6px; }
.osp-fb-inline { margin-top: 2px; }

@media (max-width: 820px) {
  .osp-order-container { flex-direction: column; }
  .osp-order-left { flex: none; border-right: none; border-bottom: 1px solid #e8e8e8; }
  .osp-colhead { display: none; }
  .osp-purch-head { display: none; }
  .osp-purch-row { grid-template-columns: 1fr; }
  .osp-ph-amt, .osp-ph-date, .osp-ph-stat { padding-top: 4px; }
  .osp-filter-field input, .osp-filter-field select { width: 100%; }
}


/* TradeMe-style closed / sold banner on the listing page */
.listing-closed-banner { display: flex; align-items: center; gap: 8px; background: #f3f4f6; border: 1px solid #e0e3e8;
  border-left: 4px solid #9aa0a6; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 15px; font-weight: 700; color: #555; }
.listing-closed-banner.is-sold { background: #eaf7ee; border-color: #bfe6c9; border-left-color: #2e9e5b; color: #1e7a41; }
.listing-closed-banner .lcb-sub { font-weight: 500; color: #4b5563; }
.listing-closed-banner.is-sold .lcb-sub { color: #2e7d44; }


/* sold badge in My Listings (edit/delete locked) */
.my-listing-sold-badge { display: inline-flex; align-items: center; gap: 4px; background: #eaf7ee; color: #1e7a41;
  border: 1px solid #bfe6c9; border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 700; }


/* per-row "set as default" star */
.idsw-setdef { flex: 0 0 auto; width: 28px; height: 28px; margin-left: 4px; display: inline-flex; align-items: center;
  justify-content: center; color: #cbd1da; border-radius: 50%; text-decoration: none; }
.idsw-setdef svg { width: 16px; height: 16px; }
.idsw-setdef:hover { color: #f5a623; background: #fff5e6; }
.idsw-setdef.is-default { color: #f5a623; cursor: default; }


/* account selector chips on the settings pages (thin bordered) */
.acct-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.acct-chip { display: flex; flex-direction: row; align-items: center; gap: 10px; border: 1px solid #d7dce3; border-radius: 10px;
  padding: 8px 14px; text-decoration: none; background: #fff; min-width: 120px; transition: border-color .12s, background .12s; }
.acct-chip:hover { border-color: #9aa4b2; background: #fafbfc; }
.acct-chip.on { border-color: #1558d6; background: #eef3fb; }
.acct-chip-role { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: #7a8494; }
.acct-chip.on .acct-chip-role { color: #1558d6; }
.acct-chip-name { font-size: 14px; font-weight: 600; color: #23272f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }


/* per-notification read/unread toggle + row separation */
.nbell-item.read { opacity: .85; }
.nbell-item.read .nbell-text { color: #6b7280; }
.nbell-readtoggle { flex: none; align-self: center; width: 32px; height: 32px; margin: 0 4px; border: 0;
  background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.nbell-readtoggle:hover { background: #e6ebf2; }
.nbell-readdot { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.nbell-item.unread .nbell-readdot { background: #1a73e8; }
.nbell-item.read .nbell-readdot { background: transparent; border: 2px solid #c4cad2; }
.nbell-readtoggle:hover .nbell-readdot { border-color: #1a73e8; }


/* account chip avatars + make-default bar + business card */
.acct-chip-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: #eef1f6;
  display: inline-flex; align-items: center; justify-content: center; color: #9aa4b2; }
.acct-chip-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-chip-av svg { width: 20px; height: 20px; }
.acct-chip-txt { display: flex; flex-direction: column; min-width: 0; }
.acct-default-bar { margin: 0 0 20px; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.acct-default-on { display: inline-flex; align-items: center; gap: 6px; color: #1e7a41; background: #eaf7ee;
  border: 1px solid #bfe6c9; border-radius: 8px; padding: 8px 12px; font-weight: 600; }
.acct-default-btn { display: inline-flex; align-items: center; gap: 6px; color: #1558d6; border: 1px solid #cfe0ff;
  background: #f2f7ff; border-radius: 8px; padding: 8px 12px; text-decoration: none; font-weight: 600; }
.acct-default-btn:hover { background: #e6efff; }
.acct-default-hint { color: #7a8494; }
.biz-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 22px; }
.biz-logo-top { border-bottom: 1px solid #eef1f5; padding-bottom: 16px; margin-bottom: 16px; }
.biz-logo-ph { width: 90px; height: 90px; border-radius: 12px; border: 1px solid #e4e9f0; display: flex;
  align-items: center; justify-content: center; color: #b8c0cc; margin-bottom: 8px; background: #f7f9fc; }
.biz-logo-ph svg { width: 44px; height: 44px; }


/* compact grey "post as" account dropdown on the category chooser */
.lc-postas-dd { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; }
.lc-postas-dd-label { font-size: 13px; color: #6b7280; font-weight: 600; }
.lc-acct-select { font-size: 13px; color: #374151; background: #f3f4f6; border: 1px solid #dfe3e8;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; max-width: 340px; }
.lc-acct-select:hover { background: #eceef1; }


/* item-post shipping picker */
.lc-ship-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lc-ship-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; cursor: pointer; }
.lc-ship-opt input { width: 18px; height: 18px; flex: none; }


/* combined shipping toggle + cart note */
.ship-combined { margin: 6px 0 18px; padding: 12px 14px; background: #f7f9fc; border: 1px solid #e4e9f0; border-radius: 10px; }
.ship-combined-lbl { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: #374151; }
.ship-combined-lbl input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.co-combined { font-size: 13px; color: #6b7280; margin: 6px 0; padding: 6px 10px; background: #f3f4f6; border-radius: 8px; }
.co-combined.on { color: #1e7a41; background: #eaf7ee; border: 1px solid #bfe6c9; font-weight: 600; }

/* Delete Selected must honour the hidden attribute (no photos = no button) */
.up-delsel[hidden] { display: none; }

/* header profile avatar matches the notification bell size (42px) */
.idsw-avwrap .idsw-av { width: 42px; height: 42px; }


/* inline edit for a shipping method */
.ship-edit-panel { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #ececec; }
.ship-edit-form .s243 { margin-top: 10px; }


/* item-post shipping: My methods / Add method tabs + region rows */
.lc-ship-tabs { display: flex; gap: 8px; margin: 8px 0 12px; }
.lc-ship-tab { background: #f3f4f6; border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer; }
.lc-ship-tab.on { background: #111827; color: #fff; }
.lc-ship-addhead { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.lc-ship-rowhead, .lc-ship-row { display: grid; grid-template-columns: 1fr 100px 150px 110px 110px 32px; gap: 8px; align-items: center; }
.lc-ship-rowhead { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.lc-ship-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eef1f5; }
.lc-ship-row:last-child { border-bottom: 0; margin-bottom: 4px; }
.lc-ship-region { min-width: 0; }
.lc-ship-cost { position: relative; }
.lc-ship-sig { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lc-ship-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #374151; cursor: pointer; white-space: nowrap; }
.lc-ship-radio input { width: 18px; height: 18px; flex: none; }
.lc-ship-dollar { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6b7280; }
.lc-ship-costin { padding-left: 22px; }
.lc-ship-del { background: none; border: 0; color: #dc2626; cursor: pointer; font-size: 15px; padding: 6px 8px; border-radius: 6px; }
.lc-ship-del:hover { background: #fdecec; }
.lc-ship-addbtn { background: #eef2ff; border: 1px solid #dfe3ea; border-radius: 8px; padding: 8px 34px; min-width: 130px; text-align: center; font-size: 13px; font-weight: 600; color: #1558d6; cursor: pointer; margin-top: 4px; }
.lc-ship-addbtn:hover { background: #e2e8ff; }


/* item-post shipping mode radios + combined */
.lc-ship-modes { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 14px; }
.lc-ship-moderadio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; cursor: pointer; }
.lc-ship-moderadio input { width: 16px; height: 16px; }
.lc-ship-combined { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.lc-ship-combined[hidden] { display: none; }
.lc-ship-combined .lc-ship-radio { align-items: flex-start; font-size: 13px; white-space: normal; }


/* item-post "Pickup allowed" checkbox */
.lc-ship-pickup { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; font-size: 13px; color: #374151; cursor: pointer; }
.lc-ship-pickup[hidden] { display: none; }
.lc-ship-modewrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lc-ship-pickfree { margin: 6px 0 14px; }
.lc-ship-pickup input { margin-top: 2px; width: 18px; height: 18px; flex: none; }


/* compact shipping page */
.s498 { padding: 8px 14px; }
.ship-combined { padding: 9px 12px; margin: 2px 0 10px; }
.ship-edit-panel { margin-top: 8px; padding-top: 8px; }
.ship-edit-form .s204 { margin-top: 6px; }
.ship-edit-form .grid { margin-bottom: 0; }
.s497 { margin-bottom: 14px; }


/* shipping: edit fields on one row + name/price on one line */
.ship-edit-4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .ship-edit-4col { grid-template-columns: 1fr 1fr; } }
.ship-info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ship-info .s248 { margin: 0; }


/* dashboard shipping: Save button inline at the end of each row */
.sd-rowhead[hidden] { display: none; }
.sd-rowhead, .sd-row { display: grid; grid-template-columns: 260px 120px 160px 110px 110px auto 30px; gap: 8px; align-items: center; }
.sd-rowhead { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.sd-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eef1f5; }
.sd-row:last-child { border-bottom: 0; }
.sd-save { white-space: nowrap; padding: 0 18px; height: 40px; }
@media (max-width: 820px) { .sd-rowhead { display: none; } .sd-row { grid-template-columns: 1fr 1fr; } }

/* dashboard shipping content card (thin border) */
.ship-page-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 20px 22px; }

.lc-ship-optlbl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-ship-optfee { color: #555; font-weight: 600; margin-left: 4px; }

/* nbell compact view */
.nbell-menu { width: 360px; }
.nbell-top { padding: 4px 8px 2px; }
.nbell-title { font-size: 18px; }
.nbell-tabs { padding: 2px 6px 6px; }
.nbell-tab { font-size: 13px; padding: 4px 12px; }
.nbell-sec { font-size: 13px; padding: 6px 8px 2px; }
.nbell-item { margin-bottom: 2px; border-radius: 8px; padding: 0; }
.nbell-link { gap: 10px; padding: 5px 6px 5px 8px; }
.nbell-ava, .nbell-ava img { width: 36px; height: 36px; }
.nbell-ava > svg { width: 20px; height: 20px; }
.nbell-ic-badge { width: 16px; height: 16px; font-size: 10px; }
.nbell-text { font-size: 13.5px; }
.nbell-sub { font-size: 12px; }
.nbell-acct { font-size: 10px; margin-bottom: 1px; }
.nbell-time { font-size: 11px; margin-top: 1px; }
.nbell-readtoggle { width: 26px; height: 26px; }
.nbell-readdot { width: 10px; height: 10px; }
.nbell-seeall { padding: 8px; font-size: 14px; }
.nbell-empty { padding: 16px 12px; }

/* item post: every checkbox matches the makes-popup size */
form.lc-form input[type=checkbox] { width: 18px; height: 18px; flex: none; vertical-align: -4px; }

/* fitment popup: whole row hoverable + clickable */
.cp-win-b .cp-tick { padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.cp-win-b .cp-tick:hover { background: #f2f5fa; }
.cp-win-b .cp-tick input { cursor: pointer; }

/* item post: inline make/model search beside the add button */
.cp-addrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.cp-addrow .cp-btn-add { flex: none; }
.cp-inline-search { position: relative; flex: 1 1 260px; max-width: 430px; }
.cp-inline-search .cp-modelsearch-in { width: 100%; box-sizing: border-box; }
.cp-inline-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; background: #fff; z-index: 60; }

/* fitment popups: show-only-selected toggle */
.cp-selview { align-self: flex-end; margin: -6px 18px 8px; border: 0; background: none; color: #1558d6; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.cp-selview:hover { background: #eef4ff; text-decoration: underline; }
.cp-selview[hidden] { display: none; }

/* fitment popups: select-all + show-selected on one row */
.cp-toolrow { display: flex; align-items: center; gap: 10px; margin: -4px 18px 8px; }
.cp-toolrow .cp-all { margin: 0; flex: 1; }
.cp-toolrow .cp-selview { align-self: auto; margin: 0 0 0 auto; flex: none; }

/* edit page: the category cascade stays in the DOM (drives attr/shipping loads) but never shows */
#catCascade[hidden], .cat-sugg[hidden] { display: none; }

/* car detail spec panel (marketplacenz parity) */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; padding: 6px 0 2px; }
.cs-item { display: flex; gap: 10px; align-items: flex-start; }
.cs-ic { width: 26px; height: 26px; flex: none; color: #1558d6; margin-top: 1px; }
.cs-ic svg { width: 100%; height: 100%; display: block; }
.cs-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-lbl { font-size: 12px; color: #6b7280; }
.cs-val { font-size: 15px; color: #111827; font-weight: 700; overflow-wrap: anywhere; }
.cs-h { margin-top: 20px; }
.cs-data { border-top: 1px solid #e5e7eb; }
.cs-row { display: flex; padding: 10px 8px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.cs-row:nth-child(even) { background: #fafbfc; }
.cs-k { flex: 0 0 42%; color: #374151; }
.cs-v { flex: 1; color: #111827; }
.cs-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; padding: 6px 0; }
.cs-feat { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #111827; }
.cs-check { width: 16px; height: 16px; color: #1a73e8; flex: none; }
@media (max-width: 700px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } .cs-feats { grid-template-columns: 1fr; } }

/* motors price fields: fixed $ prefix + numbers-only manual entry */
.ml-price { position: relative; }
.ml-price-sign { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; font-weight: 600; pointer-events: none; z-index: 1; }
.ml-price-in { width: 100%; box-sizing: border-box; padding-left: 24px !important; }

/* car-parts hero: wider combined search field */
.ml-fld-search { flex: 3 1 360px; }
.ml-fld-search .ml-inp { width: 100%; box-sizing: border-box; }

.ml-cp-break { flex-basis: 100%; height: 0; margin: 0; }

/* easy-listing helpers */
.lc-price-hint { display:none; font-size:13px; color:#0984e3; margin-top:5px; }
.lc-owner-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lc-inline-form { display:inline; margin:0; }
.lc-action-btn { cursor:pointer; }
.lc-relist { background:#00b894; color:#fff; border-color:#00b894; }

/* easy-listing form helpers */
.lc-draft-bar { background:#fff8e1; border:1px solid #ffe0a3; border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:14px; }
.lc-draft-bar button { margin-left:8px; padding:4px 12px; border:1px solid #cfd6e0; border-radius:6px; background:#fff; cursor:pointer; }
.lc-draft-bar .lc-draft-restore { color:#0984e3; border-color:#0984e3; }
.lc-inline-err { color:#d63031; font-size:12px; margin-top:4px; }
.s328.lc-invalid, textarea.lc-invalid { border-color:#d63031; }
.lc-more-toggle { background:#f4f6f9; border:1px solid #cfd6e0; border-radius:6px; padding:8px 14px; cursor:pointer; color:#0984e3; font-size:14px; margin-top:8px; }
.lc-optional-attr { display:none; }
#catAttrs.lc-show-optional .lc-optional-attr { display:block; }

/* store / company website admin */
.acct-store-cta { color: #0984e3; border: 1px solid #0984e3; border-radius: 6px; }
.st-wrap { max-width: 1280px; margin: 22px auto 0; padding: 0 16px; }
.st-h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.st-sub { color: #55606c; font-size: 14px; margin-bottom: 18px; }
.st-msg { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.st-msg-ok { background: #e8f8f2; border: 1px solid #b7e7d4; color: #067a52; }
.st-msg-err { background: #fdeceb; border: 1px solid #f5c1be; color: #b3221c; }
.st-empty { background: #fff8e1; border: 1px solid #ffe0a3; border-radius: 8px; padding: 14px; font-size: 14px; }
.st-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.st-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.st-card-head h2 { font-size: 18px; font-weight: 700; }
.st-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; background: #eef3fb; color: #2563eb; border-radius: 5px; padding: 3px 8px; }
.st-visit { margin-left: auto; font-size: 13px; color: #0984e3; text-decoration: none; }
.st-live { background: #f2f8f5; border: 1px solid #cde9db; border-radius: 7px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.st-form .st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-field { margin-bottom: 12px; }
.st-field label { display: block; font-size: 13px; font-weight: 600; color: #2d3436; margin-bottom: 5px; }
.st-field input[type=text], .st-field input[type=email], .st-field textarea { width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: 9px 12px; font-size: 15px; }
.st-field input[type=color] { width: 56px; height: 40px; border: 1px solid #ccc; border-radius: 5px; padding: 2px; }
.st-slugrow { display: flex; align-items: center; gap: 6px; }
.st-slugrow input { flex: 1; }
.st-slugsuffix { font-size: 13px; color: #66707a; white-space: nowrap; }
.st-save { background: #0984e3; color: #fff; border: 0; border-radius: 6px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
.st-save:hover { background: #0b6fc0; }
@media (max-width: 640px) { .st-form .st-row { grid-template-columns: 1fr; } }

/* store custom domains */
.st-domains { border-top: 1px solid #eef1f6; margin-top: 16px; padding-top: 14px; }
.st-domains h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.st-dom-row { border: 1px solid #e5e8ee; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.st-dom-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-dom-name { font-weight: 700; font-size: 15px; }
.st-dom-badge { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 8px; text-transform: uppercase; }
.st-dom-badge.pending { background: #fff4e0; color: #b96c00; }
.st-dom-badge.verified { background: #e8f8f2; color: #067a52; }
.st-dom-actions { margin-left: auto; display: flex; gap: 8px; }
.st-dom-btn { border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.st-dom-btn.verify { border-color: #0984e3; color: #0984e3; }
.st-dom-btn.remove { color: #b3221c; }
.st-dom-steps { background: #f8fafc; border: 1px solid #e5e8ee; border-radius: 7px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.st-dom-steps ol { margin: 6px 0 0 18px; }
.st-dom-steps li { margin-bottom: 6px; }
.st-dom-rec { font-family: Consolas, monospace; background: #eef3f8; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
.st-dom-live { font-size: 13px; margin-top: 6px; }
.st-dom-add { display: flex; gap: 8px; margin-top: 6px; }
.st-dom-add input { flex: 1; border: 1px solid #ccc; border-radius: 5px; padding: 8px 12px; font-size: 14px; }
.st-dom-add button { background: #16213a; color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; font-size: 14px; cursor: pointer; }

/* store owner management */
.st-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.st-chip { background: #eef3fb; color: #2563eb; border-radius: 14px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.st-toolbtn { border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; text-decoration: none; color: #23272f; }
.st-toolbtn.warn { border-color: #e0a03c; color: #b96c00; }
.st-toolbtn.ok { border-color: #00b894; color: #067a52; }
.st-paused { color: #b96c00; font-size: 13px; }
.st-uploads { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.st-upl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.st-upl label { font-weight: 600; }
.st-listings { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e8ee; border-radius: 8px; }
.st-listings th, .st-listings td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eef1f6; font-size: 14px; }
.st-listings tr.st-l-hidden td { color: #98a1ab; }

/* store page tabs + website builder */
.st-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e8ee; margin-bottom: 18px; }
.st-tab { padding: 10px 18px; font-size: 15px; font-weight: 600; color: #55606c; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.st-tab.on { color: #0984e3; border-bottom-color: #0984e3; }
.st-site-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; padding: 0; margin-bottom: 18px; overflow: hidden; }
.st-site-hero { padding: 18px 22px; color: #fff; display: flex; align-items: center; gap: 12px; }
.st-site-hero h2 { font-size: 19px; font-weight: 800; }
.st-site-hero .st-site-url { font-size: 13px; opacity: 0.9; }
.st-site-logo { width: 44px; height: 44px; border-radius: 9px; background: #fff; object-fit: cover; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.st-site-body { padding: 14px 22px 18px; }
.st-site-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.st-site-btn { border: 1px solid #cfd6e0; background: #fff; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; color: #23272f; }
.st-site-btn.primary { background: #0984e3; border-color: #0984e3; color: #fff; }
.sb-layout { display: grid; grid-template-columns: 420px 1fr; gap: 18px; align-items: start; }
.sb-panel { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.sb-panel h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.sb-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-swatch { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; display: inline-block; }
.sb-swatch.on { border-color: #23272f; box-shadow: 0 0 0 2px #fff inset; }
.sb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sb-sec { display: flex; align-items: center; gap: 8px; border: 1px solid #e5e8ee; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: #f9fafc; }
.sb-sec b { flex: 1; font-size: 14px; }
.sb-arrow { border: 1px solid #cfd6e0; background: #fff; border-radius: 5px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; }
.sb-deals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 300px; overflow-y: auto; }
.sb-deal { border: 1px solid #e5e8ee; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.sb-deal.on { border-color: #e0a03c; background: #fff8ec; }
.sb-deal button { margin-top: 5px; border: 1px solid #cfd6e0; background: #fff; border-radius: 5px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.sb-preview { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; overflow: hidden; position: sticky; top: 12px; }
.sb-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6f8fb; border-bottom: 1px solid #e5e8ee; font-size: 13px; }
.sb-preview iframe { width: 100%; height: 720px; border: 0; }
.sb-save { background: #0984e3; color: #fff; border: 0; border-radius: 7px; padding: 10px 20px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; }
@media (max-width: 1100px) { .sb-layout { grid-template-columns: 1fr; } .sb-preview { position: static; } }
/* storefront promo bar + sale badges + contact section */

/* wix-style builder additions */
.sb-gal { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sb-gal-item { position: relative; }
.sb-gal-item img { width: 86px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e8ee; }
.sb-gal-item button { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(0,0,0,0.6); color: #fff; border-radius: 4px; font-size: 10px; padding: 1px 5px; cursor: pointer; }
.sb-css { width: 100%; min-height: 160px; font-family: Consolas, monospace; font-size: 13px; border: 1px solid #ccc; border-radius: 6px; padding: 10px; }
.sb-hint { background: #f6f8fb; border: 1px solid #e5e8ee; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #55606c; margin-top: 6px; }
.sb-hint code { background: #eef3f8; border-radius: 3px; padding: 1px 4px; }
.sb-radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sb-radio-row label { display: flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }

/* drag-and-drop page designer */
.dd-layout { display: grid; grid-template-columns: 480px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dd-layout { grid-template-columns: 1fr; } }
.dd-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dd-add { border: 1px dashed #9db1c7; background: #f6faff; color: #2563eb; border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dd-add:hover { background: #eaf3ff; }
.dd-canvas { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.dd-block { background: #fff; border: 1px solid #dbe2ec; border-radius: 9px; }
.dd-block.dragging { opacity: 0.45; }
.dd-block.dropover { border-color: #0984e3; box-shadow: 0 0 0 2px #cfe6fb; }
.dd-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: grab; }
.dd-grip { color: #9aa7b5; font-size: 15px; }
.dd-title { flex: 1; font-size: 14px; font-weight: 700; }
.dd-sub { color: #8a93a0; font-size: 12px; }
.dd-tool { border: 1px solid #cfd6e0; background: #fff; border-radius: 5px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.dd-tool.del { color: #b3221c; }
.dd-settings { border-top: 1px solid #eef1f6; padding: 10px 14px; display: none; }
.dd-block.open .dd-settings { display: block; }
.dd-settings label { display: block; font-size: 12px; font-weight: 700; color: #55606c; margin: 8px 0 3px; }
.dd-settings input[type=text], .dd-settings textarea, .dd-settings select { width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: 7px 10px; font-size: 14px; }
.dd-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-cats label { display: flex; align-items: center; gap: 4px; border: 1px solid #dbe2ec; border-radius: 14px; padding: 3px 10px; font-size: 12px; font-weight: 600; margin: 0; cursor: pointer; }
.dd-cats label.on { background: #eaf3ff; border-color: #0984e3; color: #0984e3; }
.dd-inline { display: flex; gap: 10px; }
.dd-inline > div { flex: 1; }
.dd-empty { border: 2px dashed #cfd6e0; border-radius: 10px; padding: 30px; text-align: center; color: #8a93a0; font-size: 14px; }

/* template picker */
.tp-group { margin: 22px 0 10px; font-size: 17px; font-weight: 800; }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .tp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tp-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.tp-card.on { border-color: #0984e3; box-shadow: 0 0 0 2px #cfe6fb; }
.tp-prev { display:block; height: 170px; position: relative; background: #f2f5f9; overflow:hidden; }
.tp-prev-shot { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tp-prev-head { height: 30px; }
.tp-prev-head.tall { height: 52px; }
.tp-prev-head.slim { height: 16px; }
.tp-prev-nav { height: 10px; background: #e6ebf2; }
.tp-prev-cards { display: flex; gap: 4px; padding: 6px; }
.tp-prev-cards span { background: #d5dce6; border-radius: 3px; height: 26px; flex: 1; }
.tp-prev-cards.list { flex-direction: column; padding-right: 40%; }
.tp-prev-cards.list span { height: 8px; }
.tp-prev-cards.large span { height: 34px; }
.tp-prev-cards.compact span { height: 18px; }
.tp-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tp-name { font-size: 15px; font-weight: 800; }
.tp-desc { font-size: 12px; color: #66707a; flex: 1; }
.tp-meta { font-size: 10px; color: #98a1ab; text-transform: uppercase; letter-spacing: 0.4px; }
.tp-apply { background: #0984e3; color: #fff; border: 0; border-radius: 6px; padding: 7px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.tp-current { background: #e8f8f2; color: #067a52; text-align: center; border-radius: 6px; padding: 6px 0; font-size: 12px; font-weight: 700; }

.tp-preview { text-align: center; border: 1px solid #cfd6e0; border-radius: 6px; padding: 6px 0; font-size: 12px; font-weight: 700; color: #23272f; text-decoration: none; }
.tp-preview:hover { border-color: #0984e3; color: #0984e3; }

/* dashboard store: create-tab demo design gallery */
.st-demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-height:460px;overflow-y:auto;padding:4px;border:1px solid #eef1f5;border-radius:12px}
.st-demo{position:relative;border:2px solid #e2e6ee;border-radius:12px;padding:10px;cursor:pointer;background:#fff;display:flex;flex-direction:column;gap:2px}
.st-demo input{position:absolute;opacity:0;pointer-events:none}
.st-demo:has(input:checked){border-color:#2b8fe0;background:#f4f9fe}
.st-demo b{font-size:13px;color:#1e2532}
.st-demo small{color:#7b828c;font-size:11px;line-height:1.4}
.st-demo-prev{display:block;border:1px solid #edf0f4;border-radius:8px;overflow:hidden;margin-bottom:7px;background:#f6f7f9}
.st-demo-prev .dp-head{display:block;height:18px;background:#16213a}
.st-demo-prev .dp-nav{display:block;height:8px;background:#333}
.st-demo-prev .dp-cards{display:flex;gap:4px;padding:6px}
.st-demo-prev .dp-cards i{flex:1;height:24px;background:#fff;border:1px solid #e5e8ee;border-radius:4px}
.st-demo-link{position:absolute;top:8px;right:8px;background:#fff;border:1px solid #dfe3ea;border-radius:8px;font-size:11px;font-weight:700;color:#33507a;padding:3px 9px}
.st-demo-link:hover{background:#2b8fe0;color:#fff;border-color:#2b8fe0}

/* demo gallery v2: large screenshot cards */
.st-demos{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));max-height:640px}
.st-demo-shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid #edf0f4;border-radius:8px;margin-bottom:8px;background:#f6f7f9}
.st-demo b{font-size:14px}
.st-demo small{font-size:12px}
.st-demo-link{font-size:12px;padding:5px 12px}

/* create wizard: category tabs + revealed step 2 */
.st-cattabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.st-cattab{border:1.5px solid #dfe3ea;background:#fff;border-radius:20px;font-weight:700;font-size:13px;color:#4a5262;padding:8px 18px;cursor:pointer}
.st-cattab.on{background:#2b8fe0;border-color:#2b8fe0;color:#fff}
.st-step2{display:none;border-top:1px solid #eef1f5;margin-top:16px;padding-top:16px}
.st-step2.open{display:block}
#st-bizsel{width:100%;max-width:460px;border:1px solid #dfe3ea;border-radius:9px;padding:10px 12px;font-size:14px;background:#fff}

/* st-demos flow fix: no inner scrolling, demos flow with the page */
.st-demos{max-height:none;overflow:visible;border:0;padding:0}

/* create wizard: category selection */
.st-navcats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st-navcats .grp{border:1px solid #e7eaf0;border-radius:12px;padding:12px 14px}
.st-navcats .grp b{display:block;font-size:13px;color:#1e2532;margin-bottom:7px}
.st-navcats .ck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#4a5262;margin:0 12px 7px 0;cursor:pointer}
@media(max-width:900px){.st-navcats{grid-template-columns:1fr}}

/* website card: header action buttons */
.st-hero-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.st-hero-btn{background:#fff;color:#1b2230;font-weight:700;font-size:13px;border-radius:8px;padding:8px 16px;text-decoration:none;border:1px solid rgba(255,255,255,.6)}
.st-hero-btn:hover{background:#f3f6fb}
@media(max-width:700px){.st-hero-right{flex-wrap:wrap}}

/* create form: show-this-listing-on-my-website */
.cp-webshow{border:1px solid #d6e4f5;background:#f2f8ff;border-radius:12px;padding:14px 16px;margin:18px 0}
.cp-webshow-main{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.cp-webshow-main input[type=checkbox]{width:22px;height:22px;margin-top:1px;flex:0 0 auto;accent-color:#2b8fe0}
.cp-webshow-txt b{display:block;font-size:15px;color:#12314f}
.cp-webshow-txt small{display:block;font-size:12.5px;color:#4e6a86;margin-top:2px}
.cp-webshow-warn{margin-top:12px;background:#fff5e8;border:1px solid #f2c98f;border-radius:9px;padding:10px 13px;font-size:13px;color:#8a4b06;line-height:1.5}
.cp-webshow-warn a{display:inline-block;margin-top:4px;font-weight:700;color:#c76a10;text-decoration:none;white-space:nowrap}
.cp-webshow-warn a:hover{text-decoration:underline}

.st-cattabs-top{margin:0 0 16px}

/* forstore category restriction */
.lc-restrict-note{background:#eef7ff;border:1px solid #bcd9f5;border-radius:10px;padding:11px 14px;font-size:13.5px;color:#234;margin:0 0 12px}
.lc-restrict-note a{color:#2b8fe0;font-weight:700;text-decoration:none}
.lc-restrict-warn{background:#fff5e8;border:1px solid #f2c98f;border-radius:9px;padding:10px 13px;font-size:13px;color:#8a4b06;margin:0 0 10px}
.cp-catrestrict{background:#fff5e8;border:1px solid #f2c98f;border-radius:9px;padding:9px 13px;font-size:13px;color:#8a4b06;margin:10px 0 0}
.cp-catrestrict a{color:#c76a10;font-weight:700;text-decoration:none}

.lc-postas-store .lc-postas-store-name{font-weight:800;color:#12314f;font-size:14px}

/* storefront signup: powered-by nzmarketplace + both terms */
.reg-poweredby{background:#eef7ff;border:1px solid #bcd9f5;border-radius:12px;padding:13px 15px;margin:0 0 16px;display:flex;flex-direction:column;gap:3px}
.reg-poweredby .reg-pb-store{font-size:15px;color:#12314f}
.reg-poweredby .reg-pb-note{font-size:12.5px;color:#3d6690}
.reg-poweredby .reg-pb-badge{font-size:12px;color:#2b8fe0;font-weight:700;margin-top:4px}
.reg-terms{display:flex;align-items:flex-start;gap:9px;margin:2px 0 14px;font-size:13px;color:#334;line-height:1.5}
.reg-terms input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:#2b8fe0}
.reg-terms a{color:#2b8fe0;font-weight:600;text-decoration:none}
.reg-terms a:hover{text-decoration:underline}

/* create chooser: store hint under Post-as (only when the seller has a store) */
.lc-store-hint{background:#eef7ff;border:1px solid #bcd9f5;border-radius:10px;padding:11px 14px;margin:10px 0 4px;font-size:13.5px;color:#234;line-height:1.5}
.lc-store-hint a{color:#2b8fe0;font-weight:700;text-decoration:none;white-space:nowrap}
.lc-store-hint a:hover{text-decoration:underline}

/* templates page category tabs (5.png) */
.tp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.tp-tab{padding:9px 18px;border:1px solid #dfe3ea;border-radius:999px;background:#fff;color:#3a4658;font-weight:700;font-size:13.5px;text-decoration:none}
.tp-tab.on{background:#2b8fe0;border-color:#2b8fe0;color:#fff}
.tp-tab:hover{border-color:#2b8fe0;color:#2b8fe0}
.tp-tab.on:hover{color:#fff}


/* Rounded top search bar (1.png): the whole row is a pill, so the first field and
   the search button carry the curve themselves. The wrapper can no longer clip
   them, because that clipping was also hiding the suggestions that drop under
   the bar - they were being rendered right underneath and cut away. */
.s474 { border-radius: 50px; overflow: visible; }
.s474 .s483 { border-radius: 50px 0 0 50px; padding-left: 22px; }
.s474 button.s487 { border-radius: 0 50px 50px 0; }
.s484 { top: 56px; border-radius: 16px; border-top: 1px solid #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
/* the stacked version of the same bar on a narrow window */
.s475, .s476 { border-radius: 50px; padding-left: 18px; }
.s477 { border-radius: 50px; }
.s477 .s488 { padding-left: 18px; }
button.s489 { border-radius: 0 50px 50px 0; }


/* Listing pictures on cards: show the whole photo inside the box instead of
   cropping the sides off. The boxes keep their height, so the rows still line
   up; a photo that is a different shape gets white space around it. Covers the
   search results (list and grid), My listings, the homepage grid, watchlist,
   auctions, expired listings and the seller profile grid. */
body:not(.trendora):not(.zproperty):not(.motorlane):not(.jobboard):not(.svcportal) .sp-card-img img,
.my-listing-card-img img,
.s320 .s185,
.s184 .s185,
.s273 .s185,
.s435 .s185 { object-fit: contain; background: #fff; }


/* Marketplace search, grid view: the picture box is square - as tall as it is
   wide - so a card is the same shape whatever the window width. Only this page:
   the list view keeps its own row size, and the Fashion, Property, Cars, Jobs
   and Services portals are left exactly as they were. */
body:not(.trendora):not(.zproperty):not(.motorlane):not(.jobboard):not(.svcportal) .sp-cards-grid .sp-card-img { height: auto; aspect-ratio: 1 / 1; }


/* Grid cards: a line under the picture box, separating the photo from the title
   and price the way marketplacenz does it (1.png). Every page that shows cards
   in a grid: search results, the homepage, My listings, watchlist, auctions, the
   seller profile grid, and the portal card styles. */
.sp-cards-grid .sp-card-img,
.my-listing-card-img,
.s320,
.s184,
.s435,
.td-card-img,
.zp-card-img { border-bottom: 1px solid #e5e5e5; }

/* Car Parts post-form tabs: All other parts / Tyres / Wheels (10.png) */
.cp-post-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cp-post-tab { padding: 7px 20px; border: 1px solid #d7dbe2; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #2b3648; background: #fff; cursor: pointer; }
.cp-post-tab:hover { border-color: #2563eb; color: #2563eb; }
.cp-post-tab.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Required-field marker: bigger and red on every form (1.png) */
.req-star, .lc-req { color: #dc2626; font-size: 1.3em; font-weight: 700; line-height: 1; }


/* "Areas you service" chip picker (post + edit form) and the read-only list on a listing. */
.sa-wrap .sa-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.sa-chips:empty { margin: 0; }
.sa-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem .25rem .6rem;
           border: 1px solid #cbd5e1; border-radius: 999px; background: #f1f5f9;
           font-size: .82rem; line-height: 1.4; color: #0f172a; }
.sa-chip-all { background: #dbeafe; border-color: #93c5fd; font-weight: 600; }
.sa-chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.sa-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
             padding: 0 .1rem; color: #64748b; }
.sa-chip-x:hover { color: #dc2626; }
.sa-input-wrap { position: relative; }
.sa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.sa-quick-btn { border: 1px solid #cbd5e1; background: #fff; border-radius: .375rem;
                padding: .25rem .6rem; font-size: .8rem; cursor: pointer; color: #0f172a; }
.sa-quick-btn:hover { background: #f8fafc; }
.sa-quick-clear { color: #b91c1c; border-color: #fecaca; }
.sa-count { font-size: .78rem; color: #64748b; margin-left: auto; }

.sa-detail { margin: .6rem 0; }
.sa-detail-h { font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .35rem; }
.sa-chips-ro { display: flex; flex-wrap: wrap; gap: .35rem; }
.sa-chip-ro { background: #f8fafc; }
.sa-chips-ro .sa-hidden-chip { display: none; }
.sa-chips-ro.sa-open .sa-hidden-chip { display: inline-flex; }
.sa-more-btn { border: 1px dashed #cbd5e1; background: #fff; border-radius: 999px;
               padding: .25rem .6rem; font-size: .8rem; cursor: pointer; color: #2563eb; }

/* #latLngRow carries Tailwind's `grid` (display:grid), which outranks the plain
   [hidden] attribute - Services hides this row, so make the attribute stick. */
#latLngRow[hidden], #locWrap[hidden], #typeWrap[hidden], .cat-sugg[hidden] { display: none; }


/* ---------- Messenger (port of the Osclass instant_messenger plugin) ---------- */
/* width + centering + side padding come from the header container classes on the
   element itself (max-w-6xl mx-auto px-4), so the page lines up with the top bar. */
.msg-wrap { padding-top: 1.25rem; padding-bottom: 2.5rem; }
.msg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.msg-unread-pill { background: #dc2626; color: #fff; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; }
.msg-flash { border-radius: .375rem; padding: .55rem .75rem; margin-bottom: .75rem; font-size: .875rem; }
.msg-flash.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.msg-flash.err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.msg-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.msg-f-search { flex: 1 1 16rem; min-width: 12rem; height: 2.5rem; padding: .4rem .6rem; border: 1px solid #cbd5e1; border-radius: .375rem; }
.msg-f-date { height: 2.5rem; padding: .4rem .5rem; border: 1px solid #cbd5e1; border-radius: .375rem; }
.msg-f-star { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: #334155; white-space: nowrap; }
.msg-f-btn { height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: .375rem; background: #2563eb; color: #fff; cursor: pointer; }
.msg-f-clear { font-size: .82rem; color: #64748b; }

.msg-list { border: 1px solid #e2e8f0; border-radius: .5rem; overflow: hidden; }
.msg-row { display: flex; align-items: stretch; border-bottom: 1px solid #f1f5f9; background: #fff; }
.msg-row:last-child { border-bottom: 0; }
.msg-row.unread { background: #f0f7ff; }
.msg-row-main { display: flex; gap: .7rem; padding: .7rem .8rem; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.msg-row-main:hover { background: #f8fafc; }
.msg-row-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.msg-row-top { display: flex; justify-content: space-between; gap: .5rem; }
.msg-name { font-size: .92rem; color: #0f172a; }
.msg-row.unread .msg-name { font-weight: 700; }
.msg-time { font-size: .75rem; color: #94a3b8; white-space: nowrap; }
.msg-sub { font-size: .78rem; color: #2563eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-preview { font-size: .82rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-you { color: #94a3b8; }
.msg-clip { color: #64748b; }
.msg-row-acts { display: flex; align-items: center; gap: .3rem; padding-right: .6rem; }
.msg-star { border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1; color: #cbd5e1; padding: .2rem; }
.msg-star.on { color: #f59e0b; }
.msg-star:hover { color: #f59e0b; }
.msg-block-btn, .msg-unblock { border: 1px solid #e2e8f0; background: #fff; border-radius: .3rem; font-size: .74rem; padding: .18rem .45rem; cursor: pointer; color: #b91c1c; }
.msg-pager { display: flex; gap: .8rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: .85rem; }
.msg-pager-now { color: #64748b; }

.msg-avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 999px; background: #e2e8f0;
              color: #475569; display: inline-flex; align-items: center; justify-content: center;
              font-size: .8rem; font-weight: 600; overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.msg-blocked { margin-top: 1.75rem; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .8rem; }
.msg-blocked-h { font-size: .95rem; font-weight: 600; }
.msg-blocked-hint { font-size: .8rem; color: #64748b; margin-bottom: .5rem; }
.msg-blocked-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .85rem; border-top: 1px solid #f1f5f9; }

.msg-thread { border: 1px solid #e2e8f0; border-radius: .5rem; overflow: hidden; margin-top: .75rem; background: #fff; }
.msg-thread-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.msg-thread-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-thread-item { font-size: .8rem; color: #2563eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread-acts { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.msg-act { border: 1px solid #cbd5e1; background: #fff; border-radius: .3rem; font-size: .74rem; padding: .22rem .5rem; cursor: pointer; color: #334155; }
.msg-act.on { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.msg-act.danger { color: #b91c1c; border-color: #fecaca; }

.msg-stream { max-height: 60vh; overflow-y: auto; padding: .9rem .8rem; background: #f8fafc; display: flex; flex-direction: column; gap: .5rem; }
.msg-line { display: flex; }
.msg-line.mine { justify-content: flex-end; }
.msg-bubble { max-width: 78%; border-radius: .6rem; padding: .45rem .65rem; font-size: .88rem; line-height: 1.45; }
.msg-bubble.other { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
/* 5.png: solid blue on every one of your own messages was harsh to read, so the
   sent bubble is a soft grey and the received one stays white. */
.msg-bubble.mine { background: #eceff3; border: 1px solid #dde2e9; color: #0f172a; }
.msg-bubble.mine .msg-meta { color: #64748b; opacity: 1; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-meta { display: flex; align-items: center; gap: .5rem; font-size: .68rem; margin-top: .2rem; opacity: .75; }
.msg-bubble.other .msg-meta { color: #64748b; }
.msg-read { font-weight: 600; }
.msg-del { border: 0; background: transparent; cursor: pointer; font-size: .68rem; color: inherit; text-decoration: underline; padding: 0; }
.msg-att { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .8rem; }
.msg-att a { text-decoration: underline; color: inherit; word-break: break-all; }
.msg-att-size { opacity: .7; font-size: .72rem; }
.msg-att-x { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: .95rem; line-height: 1; padding: 0 .15rem; }

.msg-reply { border-top: 1px solid #e2e8f0; padding: .7rem .8rem; }
.msg-reply-text { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem .6rem; font-size: .88rem; resize: vertical; }
.msg-reply-bar { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.msg-file { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: #334155; cursor: pointer;
            border: 1px dashed #cbd5e1; border-radius: .375rem; padding: .25rem .55rem; }
.msg-file input[type=file] { display: none; }
.msg-file-hint { font-size: .72rem; color: #94a3b8; }
.msg-send { margin-left: auto; border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .45rem 1.1rem; cursor: pointer; }
.msg-blocked-note { border-top: 1px solid #e2e8f0; padding: .8rem; font-size: .85rem; color: #b91c1c; background: #fef2f2; }

@media (max-width: 640px) {
  .msg-bubble { max-width: 90%; }
  .msg-f-search { flex-basis: 100%; }
}


/* inbox extras: usage banner, reset button, per-row tags (1.png / 2.png) */
.msg-total { color: #64748b; font-size: .82rem; margin: -.35rem 0 .75rem; }
.msg-usage { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; border-radius: .375rem;
             padding: .6rem .8rem; font-size: .82rem; line-height: 1.5; margin-bottom: .85rem; }
.msg-f-reset { display: inline-flex; align-items: center; gap: .25rem; height: 2.5rem; padding: 0 .8rem;
               border: 1px solid #cbd5e1; border-radius: .375rem; color: #475569; font-size: .85rem; }
.msg-f-reset:hover { background: #f8fafc; }
.msg-f-btn { display: inline-flex; align-items: center; gap: .3rem; }
.msg-row-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.msg-count { font-size: .7rem; color: #94a3b8; }
.msg-unread-tag { font-size: .7rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
                  border-radius: .25rem; padding: 0 .3rem; font-weight: 600; }
.msg-notify { border: 0; background: transparent; cursor: pointer; padding: .2rem; color: #cbd5e1; line-height: 1; }
.msg-notify.on { color: #dc2626; }
.msg-notify:hover { color: #dc2626; }
.msg-thread-subject { font-size: .82rem; color: #334155; font-weight: 600; }
.msg-ajax-err { margin: 0 0 .5rem; }

/* ---------- Two-pane messages (5.png, Fiverr style) ---------- */
/* 5.png: one fixed height whether the thread holds 1 message or 1000 - the stream
   scrolls inside instead of stretching the page. */
.msg-split { display: grid; grid-template-columns: 22rem 1fr; gap: 0;
             border: 1px solid #e2e8f0; border-radius: .5rem; overflow: hidden;
             background: #fff; height: 38rem; }
/* Grid/flex items default to min-height:auto, which lets them grow past the fixed
   height of the split - so every level down to the stream needs min-height:0 or the
   inner scrollbar never appears. */
.msg-side, .msg-pane { min-height: 0; overflow: hidden; }
.msg-pane .msg-thread { min-height: 0; }
.msg-side { border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; min-width: 0; }
.msg-side .msg-filters { padding: .6rem; margin: 0; border-bottom: 1px solid #e2e8f0; gap: .4rem; }
.msg-side .msg-f-search { flex: 1 1 100%; height: 2.2rem; }
.msg-side .msg-f-date { width: 6.2rem; height: 2.2rem; }
.msg-side .msg-f-btn, .msg-side .msg-f-reset { height: 2.2rem; font-size: .8rem; padding: 0 .6rem; }
.msg-side .msg-list { border: 0; border-radius: 0; overflow-y: auto; flex: 1; min-height: 0; }
.msg-side .msg-pager { padding: .5rem; border-top: 1px solid #e2e8f0; margin: 0; font-size: .78rem; }
.msg-list-empty { padding: 2rem 1rem; text-align: center; color: #94a3b8; font-size: .85rem; }

/* the open conversation is highlighted like Fiverr's selected row */
.msg-row.active { background: #eef2f7; }
.msg-row.active .msg-name { font-weight: 700; }
.msg-row-main { cursor: pointer; }

.msg-pane { display: flex; flex-direction: column; min-width: 0; }
.msg-pane .msg-thread { border: 0; border-radius: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.msg-pane .msg-stream { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
.msg-pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
                  gap: .5rem; height: 100%; min-height: 20rem; color: #94a3b8; font-size: .9rem; }
.msg-back { display: none; color: #475569; }

@media (max-width: 900px) {
  /* one column: the list, or the open conversation with a back arrow */
  .msg-split { grid-template-columns: 1fr; min-height: 0; }
  .msg-side { border-right: 0; }
  .msg-side .msg-list { max-height: none; }
  .msg-pane { display: none; }
  .msg-split.has-open .msg-side { display: none; }
  .msg-split.has-open .msg-pane { display: flex; }
  .msg-back { display: inline-flex; }
}

/* loading earlier messages strip at the top of the stream */
.msg-older { text-align: center; font-size: .78rem; color: #64748b; padding: .4rem 0; }
.msg-older-spin { display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem;
                  border: 2px solid #cbd5e1; border-top-color: #64748b; border-radius: 50%;
                  animation: msg-spin .7s linear infinite; vertical-align: -1px; }
@keyframes msg-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .msg-split { height: auto; }
  .msg-split.has-open { height: calc(100vh - 12rem); }
}

/* ---------- Support (user-facing) ---------- */
.sup-wrap { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.sup-sub { color: #64748b; font-size: .9rem; margin: .2rem 0 1rem; }
.sup-back { color: #2563eb; font-size: .85rem; }
.sup-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 1.2rem; }
.sup-h2 { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
.sup-new, .sup-list { border: 1px solid #e2e8f0; border-radius: .6rem; padding: 1rem; background: #fff; }
.sup-lbl { display: block; font-size: .82rem; font-weight: 600; margin: .5rem 0 .2rem; }
.sup-inp { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem .6rem; font-size: .9rem; box-sizing: border-box; }
textarea.sup-inp { resize: vertical; }
.sup-btn { margin-top: .7rem; border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .55rem 1.1rem; cursor: pointer; }
.sup-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .3rem; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; }
.sup-row:hover { background: #f8fafc; }
.sup-row-main { display: flex; flex-direction: column; min-width: 0; }
.sup-row-subj { font-weight: 600; font-size: .9rem; color: #0f172a; }
.sup-row-time { font-size: .76rem; color: #94a3b8; }
.sup-empty { color: #94a3b8; font-size: .88rem; padding: 1rem 0; }
.sup-pill { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .12rem .55rem; white-space: nowrap; }
.sup-pill.open { background: #dbeafe; color: #1d4ed8; }
.sup-pill.prog { background: #fef3c7; color: #92400e; }
.sup-pill.res { background: #dcfce7; color: #166534; }
.sup-pill.closed { background: #e2e8f0; color: #475569; }
.sup-thead, .sup-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sup-meta { color: #64748b; font-size: .82rem; }
.sup-thread { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.sup-msg { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .6rem .8rem; max-width: 85%; }
.sup-msg.staff { background: #eff6ff; border-color: #bfdbfe; align-self: flex-start; }
.sup-msg.mine { background: #f8fafc; align-self: flex-end; }
.sup-msg.other { background: #fff; align-self: flex-start; }
.sup-msg-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; margin-bottom: .25rem; }
.sup-msg-head strong { color: #0f172a; }
.sup-msg-head span { color: #94a3b8; }
.sup-msg-body { white-space: pre-wrap; font-size: .9rem; color: #1f2937; }
.sup-reply { display: flex; flex-direction: column; gap: .5rem; }
.sup-closed { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .8rem; font-size: .85rem; color: #64748b; }
@media (max-width: 760px) { .sup-grid { grid-template-columns: 1fr; } .sup-msg { max-width: 100%; } }

/* ---------- Support (admin) ---------- */
.admin-badge { display: inline-block; min-width: 1.1rem; text-align: center; background: #dc2626; color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 .35rem; margin-left: .35rem; }
.asup-tabs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .8rem 0; }
.asup-tab { border: 1px solid #e2e8f0; border-radius: .375rem; padding: .3rem .7rem; font-size: .82rem; color: #334155; text-decoration: none; }
.asup-tab.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.asup-tab span { opacity: .7; margin-left: .2rem; }
.asup-search { margin-left: auto; display: flex; gap: .4rem; }
.asup-search input { border: 1px solid #cbd5e1; border-radius: .375rem; padding: .3rem .5rem; }
.asup-search button { border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .3rem .8rem; cursor: pointer; }
.asup-table td { vertical-align: top; }
.asup-awaiting { background: #fff7ed; }
.asup-subj { font-weight: 600; color: #0f172a; }
.asup-flag { display: inline-block; margin-left: .4rem; font-size: .68rem; background: #fed7aa; color: #9a3412; border-radius: .25rem; padding: 0 .35rem; }
.asup-email { color: #94a3b8; font-size: .76rem; }
.asup-pill { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .12rem .55rem; }
.asup-pill.open { background: #dbeafe; color: #1d4ed8; }
.asup-pill.prog { background: #fef3c7; color: #92400e; }
.asup-pill.res { background: #dcfce7; color: #166534; }
.asup-pill.closed { background: #e2e8f0; color: #475569; }
.asup-open { color: #2563eb; }
.asup-back { color: #2563eb; font-size: .85rem; }
.asup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: .6rem 0 1rem; }
.asup-meta { color: #64748b; font-size: .82rem; }
.asup-thread { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.asup-msg { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .6rem .8rem; max-width: 85%; }
.asup-msg.staff { background: #eff6ff; border-color: #bfdbfe; align-self: flex-end; }
.asup-msg.cust { background: #fff; align-self: flex-start; }
.asup-msg-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; margin-bottom: .25rem; }
.asup-msg-body { white-space: pre-wrap; font-size: .9rem; }
.asup-reply { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.asup-reply textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem .6rem; box-sizing: border-box; }
.asup-reply-bar { display: flex; align-items: center; gap: 1rem; }
.asup-send { border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .5rem 1.1rem; cursor: pointer; }

/* 2.png: Support / Forum header items (sit beside the messages envelope). */
.td-nlink { display:inline-flex; align-items:center; gap:5px; position:relative; font-size:14px; margin-left:18px; }
.nbell + .td-nlink, .nbell + script + .td-nlink { margin-left:34px; }   /* extra air after the bell badge overflow (the bell component ends with a script tag) */
.td-nlink:hover { color:#f0960a; }
.td-nlink-txt { font-weight:500; }
.td-nlink-ico { position:relative; display:inline-flex; }
.td-nlink-txt { display:none; }   /* icons only in the top bar, the title attribute is the tooltip (2026-09-17) */
/* Account -> Notifications: opt-in/opt-out toggle switches. */
.ntf-sub { color:#6b7280; font-size:13px; margin-bottom:14px; }
.ntf-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #eee; }
.ntf-txt { display:flex; flex-direction:column; gap:2px; }
.ntf-txt strong { font-size:14px; color:#111; }
.ntf-txt small { font-size:12px; color:#6b7280; }
.ntf-sw { position:relative; display:inline-block; width:44px; height:24px; flex:0 0 auto; }
.ntf-sw input { opacity:0; width:0; height:0; }
.ntf-slider { position:absolute; inset:0; background:#cbd5e1; border-radius:24px; cursor:pointer; transition:background .2s; }
.ntf-slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
.ntf-sw input:checked + .ntf-slider { background:#16a34a; }
.ntf-sw input:checked + .ntf-slider:before { transform:translateX(20px); }
/* 5.png: a badge at 0 shows NOTHING (the [hidden] preflight is :where() zero-specificity, so .flex was overriding it). */
.js-msg-badge[hidden], .js-support-badge[hidden], .js-forum-badge[hidden] { display: none; }

/* ---- Jobs for quote: Fiverr-style offer cards in message threads ---- */
.qo-card { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin:2px 0; background:#fff; min-width:240px; }
.qo-card.st1 { border-color:#86efac; background:#f0fdf4; }
.qo-card.st2, .qo-card.st3 { opacity:.75; }
.qo-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.qo-card-title { font-weight:600; font-size:13px; color:#374151; }
.qo-pill { font-size:11px; font-weight:600; border-radius:9px; padding:2px 8px; }
.qo-pill.st0 { background:#fef3c7; color:#92400e; }
.qo-pill.st1 { background:#dcfce7; color:#166534; }
.qo-pill.st2 { background:#fee2e2; color:#991b1b; }
.qo-pill.st3 { background:#e5e7eb; color:#374151; }
.qo-amount { font-size:20px; font-weight:700; color:#111; }
.qo-cur { font-size:11px; font-weight:500; color:#6b7280; }
.qo-notetext { font-size:13px; color:#374151; margin-top:4px; white-space:pre-wrap; }
.qo-acts { display:flex; gap:8px; margin-top:10px; }
.qo-btn { border:0; border-radius:6px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.qo-btn.accept { background:#16a34a; color:#fff; }
.qo-btn.decline { background:#fee2e2; color:#991b1b; }
.qo-btn.withdraw { background:#e5e7eb; color:#374151; }
.qo-btn.rate { background:#f59e0b; color:#fff; }
.qo-sysline { text-align:center; font-size:12px; color:#6b7280; padding:2px 8px; }
.qo-sysline.ok { color:#166534; font-weight:600; }
.qo-sysline.star { color:#b45309; }
/* rating */
.qo-ratewrap { border-top:1px dashed #d1d5db; margin-top:10px; padding-top:10px; }
.qo-ratelbl { font-size:13px; font-weight:600; color:#374151; display:block; margin-bottom:4px; }
.qo-rateform { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.qo-stars { display:inline-flex; flex-direction:row-reverse; gap:2px; }
.qo-stars input { display:none; }
.qo-stars label { font-size:22px; color:#d1d5db; cursor:pointer; line-height:1; }
.qo-stars label:hover, .qo-stars label:hover ~ label,
.qo-stars input:checked ~ label { color:#f59e0b; }
.qo-rate-comment { border:1px solid #d1d5db; border-radius:6px; padding:6px 10px; font-size:13px; width:100%; max-width:320px; }
.qo-rated-line { font-size:13px; color:#374151; margin-top:4px; }
.qo-rated-line.them { color:#6b7280; }
.qo-star-str { color:#f59e0b; letter-spacing:1px; }
.qo-userrating { font-size:12px; font-weight:600; color:#b45309; margin-left:8px; }
/* make-an-offer entry (thread + listing page) */
.qo-makewrap { border-top:1px solid #eee; padding:8px 12px; background:#fafafa; }
.qo-makebtn { cursor:pointer; font-size:13px; font-weight:600; color:#166534; list-style:none; }
.qo-makeform { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.qo-makeform.qo-onlisting { margin:10px 0 2px; }
.qo-amt-inp { border:1px solid #d1d5db; border-radius:6px; padding:8px 10px; font-size:14px; width:150px; }
.qo-note-inp { border:1px solid #d1d5db; border-radius:6px; padding:8px 10px; font-size:13px; flex:1; min-width:180px; }
.qo-hint { font-size:12px; color:#6b7280; margin-top:4px; }
.qo-listing-rating { font-size:13px; font-weight:600; color:#374151; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; margin:10px 0 4px; }
.svc-one-note { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; }

.view-profile-link { color:#2563eb; font-size:13px; font-weight:600; text-decoration:underline; display:inline-block; margin:2px 0 10px; }
.pp-head { display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.pp-logo { width:72px; height:72px; border-radius:12px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9ca3af; }
.pp-logo img { width:100%; height:100%; object-fit:cover; }
.pp-logo svg { width:40px; height:40px; }
.pp-name { font-size:24px; font-weight:800; color:#111827; margin:0; }
.pp-sub { color:#6b7280; font-size:13px; margin:2px 0; }
.pp-agg { font-size:15px; color:#374151; margin:4px 0 0; }
.pp-agg-none { color:#9ca3af; }
.pp-listing { display:flex; gap:8px; align-items:center; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; margin-bottom:18px; font-size:14px; color:#111827; }
.pp-listing:hover { border-color:#fca626; }
.pp-listing-cta { margin-left:auto; color:#2563eb; font-size:13px; font-weight:600; }
.pp-h2 { font-size:18px; font-weight:700; color:#111827; margin:16px 0 4px; }
.pp-note { font-size:12px; color:#6b7280; margin-bottom:12px; }
.pp-empty { color:#9ca3af; padding:24px; text-align:center; border:1px dashed #e5e7eb; border-radius:10px; }
.pp-review { border-bottom:1px solid #eee; padding:12px 0; }
.pp-review-head { display:flex; gap:10px; align-items:center; font-size:14px; }
.pp-review-date { color:#9ca3af; font-size:12px; margin-left:auto; }
.pp-review-body { font-size:14px; color:#374151; margin-top:4px; }
.pp-reply { background:#f9fafb; border-left:3px solid #fca626; padding:8px 12px; margin-top:8px; font-size:13px; color:#374151; border-radius:0 8px 8px 0; }
.pp-replyform { display:flex; gap:8px; margin-top:8px; }
.pp-reply-inp { flex:1; border:1px solid #d1d5db; border-radius:6px; padding:7px 10px; font-size:13px; }
.qo-rating-link { display:flex; gap:6px; align-items:center; text-decoration:none; }

.pp-hero { display:flex; gap:20px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px 26px; box-shadow:0 1px 3px rgba(16,22,32,.06); margin-bottom:22px; flex-wrap:wrap; }
.pp-logo-initial { font-size:34px; font-weight:800; color:#fca626; }
.pp-agg-num { font-size:26px; font-weight:800; color:#111827; }
.pp-agg-stars { font-size:18px; }
.pp-agg-count { color:#6b7280; font-size:14px; }
.pp-cta { margin-left:auto; background:#fca626; color:#fff; border:0; border-radius:8px; padding:10px 18px; font-weight:600; font-size:14px; }
.pp-hero .pp-cta { color:#fff; }
.pp-hero .pp-cta:hover { background:#f0960a; }
.pp-grid { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }
@media (max-width:820px){ .pp-grid { grid-template-columns:1fr; } }
.pp-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.pp-dist-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; color:#374151; }
.pp-dist-star { width:34px; }
.pp-dist-bar { flex:1; height:8px; background:#f3f4f6; border-radius:4px; overflow:hidden; }
.pp-dist-fill { display:block; height:100%; background:#f59e0b; border-radius:4px; }
.pp-dist-n { width:22px; text-align:right; color:#9ca3af; }
.pp-main .pp-h2 { margin-top:0; }
.pp-review { display:flex; gap:12px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.pp-review-ava { width:40px; height:40px; border-radius:50%; background:#eef2ff; color:#4338ca; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pp-review-body-wrap { flex:1; min-width:0; }
.pp-review-name { font-size:14px; color:#111827; }
.svc-seller-card { display:flex; gap:12px; align-items:center; }
.svc-seller-logo { width:56px; height:56px; border-radius:10px; background:#fff7ed; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; border:1px solid #fed7aa; }
.svc-seller-logo img { width:100%; height:100%; object-fit:cover; }
.svc-seller-initial { font-size:24px; font-weight:800; color:#fca626; }
.svc-seller-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.svc-seller-name { font-size:16px; font-weight:700; color:#111827; }
.svc-seller-name:hover { color:#f0960a; }
.svc-seller-role { font-size:12px; color:#6b7280; }
.svc-seller-stars { font-size:13px; color:#374151; font-weight:600; }
.svc-seller-card .view-profile-link { margin:2px 0 0; }
/* services search cards (1.png/12.png): no price, square image, areas line */
.svc-mode .sp-card-price { display: none; }
.svc-mode .sp-card-img { aspect-ratio: 1 / 1; height: auto; }
.svc-mode .sp-card-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qo-filled { color:#166534; font-weight:600; }
/* Forum top-bar notification dropdown (1.png) */
.fnotif { position: relative; display: inline-flex; }
.fnotif-menu { position: absolute; top: calc(100% + 10px); right: -40px; width: 340px; max-width: 92vw; background: #fff; border: 1px solid #e0e5ee; border-radius: 12px; box-shadow: 0 14px 40px rgba(16,22,32,.18); padding: 6px; z-index: 1300; }
.fn-row { display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: #374151; }
.fn-row:hover { background: #f6f7f9; }
.fn-unread { background: #eff6ff; }
.fn-unread:hover { background: #e0edff; }
.fn-text { flex: 1; }
.fn-time { color: #9ca3af; font-size: 11px; white-space: nowrap; }
.fn-empty { padding: 18px 10px; text-align: center; color: #9ca3af; font-size: 13px; }
.fn-all { display: block; text-align: center; padding: 8px; font-size: 13px; font-weight: 600; color: #2563eb; border-top: 1px solid #eee; margin-top: 4px; }
/* One consistent icon cluster in the top bar, whatever the section skin */
.hdr-icons { display: flex; align-items: center; gap: 26px; }
.hdr-icons .td-nlink, .hdr-icons .nbell, .hdr-icons .nbell + .td-nlink, .hdr-icons .nbell + script + .td-nlink { margin-left: 0; }
.forum-title-row { display: flex; align-items: center; gap: 14px; flex: 1; }
.fn-pill { background: none; color: #ef4444; border: 0; padding: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.fn-pill:hover { color: #b91c1c; text-decoration: underline; }
.fnotif-page { margin: 0 auto; }
.fnotif-page .fnotif-menu { left: 0; right: auto; }
.pfb-row { border-bottom: 1px solid #f0f0f0; padding: 8px 0; }
.pfb-row:last-of-type { border-bottom: 0; }
.pfb-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.pfb-name { color: #111827; }
.pfb-date { margin-left: auto; color: #9ca3af; font-size: 11px; }
.pfb-body { font-size: 13px; color: #374151; margin-top: 2px; }
.pfb-all { display: block; text-align: center; font-size: 13px; font-weight: 600; color: #2563eb; padding-top: 8px; }
.qo-opt-h { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.qo-opt-h:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.pp-review-link { color: #2563eb; }
.pp-review-link:hover { text-decoration: underline; color: #1d4ed8; }
/* 1.png svc polish */
.lc-owner-actions { margin-top: 14px; }
.svc-seller-card { margin-bottom: 12px; }
.svc-seller-card .view-profile-link { margin-bottom: 0; }
.qo-need-provider { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px; margin: 10px 0; text-align: center; }
.qo-need-p { font-size: 14px; font-weight: 600; color: #92400e; margin-bottom: 10px; }
.qo-need-btn { display: inline-block; text-align: center; }

/* per-identity unread count in the account switcher (11.png) */
.idsw-uc { color: #e03131; font-style: normal; font-weight: 700; }

/* TradeMe-style auction info on search cards (10/11/12.png) */
.sp-card-auction { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 4px; }
.sp-ca-note { display: block; font-size: 13px; color: #6b7280; line-height: 1.3; }
.sp-ca-price { font-size: 17px; color: #111827; font-weight: 700; }
.sp-ca-right { text-align: right; }
.sp-ca-lbl { display: block; font-size: 12px; color: #6b7280; line-height: 1.3; }   /* Start price / Current bid caption (3.png 2026-09-18) */
.sp-card-loc-flex { display: flex; justify-content: space-between; gap: 8px; }
.sp-card-loc-flex .sp-cl-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ca-closes { font-size: 12.5px; color: #6b7280; white-space: nowrap; }

/* TradeMe-style category facet above keyword results (1-new.png) */
.sp-topcats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; margin: 2px 0 18px; }
.sp-topcat { font-size: 14.5px; font-weight: 600; color: #2563eb; text-decoration: none; }
.sp-topcat:hover { text-decoration: underline; }
.sp-topcat-n { color: #6b7280; font-weight: 400; }
.sp-topcat-showmore { background: none; border: none; color: #2563eb; cursor: pointer; text-align: left; padding: 0; font-size: 14px; font-weight: 600; }
.sp-topcat-showmore:hover { text-decoration: underline; }
@media (max-width: 720px) { .sp-topcats { grid-template-columns: repeat(2, 1fr); } }

/* Envelope per-account picker (6.png) */
.mdrop { position: relative; display: inline-flex; }
.mdrop-btn { background: none; border: none; padding: 0; cursor: pointer; }
.mdrop-menu { display: none; position: absolute; top: calc(100% + 10px); right: -10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 230px; padding: 6px; z-index: 70; }
.mdrop.open .mdrop-menu { display: block; }
.mdrop-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: #111827; text-decoration: none; font-size: 14px; font-weight: 600; }
.mdrop-row:hover { background: #f3f4f6; }
.mdrop-n { color: #e03131; font-style: normal; font-weight: 700; }

/* Owner viewing their own listing (any identity) */
.own-listing-note { color: #374151; font-size: 14px; font-weight: 600; padding: 8px 0; }

/* TradeMe-style store integration on listing pages */
.intrade-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.visit-store { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; text-decoration: none; background: #f9fafb; }
.visit-store:hover { border-color: #2563eb; background: #f3f6ff; }
.vs-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.vs-logo-ph { display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-weight: 800; font-size: 16px; }
.vs-txt { display: flex; flex-direction: column; line-height: 1.25; }
.vs-txt small { color: #6b7280; font-size: 12px; }
.vs-txt b { color: #2563eb; font-size: 14px; }

/* TradeMe-style marketplace store page (/stores/{slug}) */
.ms-wrap { max-width: 1280px; margin: 0 auto; padding: 18px 16px 46px; }   /* 3.png: same width as the top bar container */
.ms-hero { border-radius: 16px; background-size: cover; background-position: center; overflow: hidden; }
.ms-hero-in { display: flex; align-items: center; gap: 18px; width: 100%; padding: 30px 26px; background: linear-gradient(90deg, rgba(8,14,28,.78) 0%, rgba(8,14,28,.45) 55%, rgba(8,14,28,.25) 100%); }
.ms-logo { width: 86px; height: 86px; border-radius: 14px; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.ms-logo-ph { display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-weight: 800; font-size: 34px; flex: none; }
.ms-head { flex: 1; min-width: 0; }
.ms-head h1 { color: #fff; font-size: 28px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-trade { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; }
.ms-tag { color: #dbe3ef; margin: 4px 0 0; font-size: 14.5px; }
.ms-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #cbd5e1; font-size: 14px; flex-wrap: wrap; }
.ms-dot { opacity: .6; }
.ms-fb { color: #fff; text-decoration: none; font-weight: 700; }
.ms-fb small { font-weight: 400; opacity: .85; }
.ms-fb:hover { text-decoration: underline; }
.ms-fb-star { color: #fbbf24; }
.ms-mstat { white-space: nowrap; }
.ms-site-btn { flex: none; background: #fff; color: #111827; text-decoration: none; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ms-site-btn:hover { background: #f3f4f6; }
.ms-bar { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; }
.ms-search { display: flex; align-items: center; gap: 0; flex: 1; max-width: 520px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; padding-left: 12px; }
.ms-search:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ms-sicon { width: 18px; height: 18px; color: #9ca3af; flex: none; }
.ms-search input { flex: 1; border: none; outline: none; padding: 11px 10px; font-size: 14px; background: transparent; }
.ms-search button { background: #2563eb; color: #fff; border: none; border-radius: 0 9px 9px 0; padding: 11px 20px; font-weight: 700; cursor: pointer; }
.ms-search button:hover { background: #1d4ed8; }
.ms-clear { color: #6b7280; font-size: 13.5px; text-decoration: none; }
.ms-clear:hover { color: #111827; }
.ms-about { color: #4b5563; margin: 12px 2px 0; max-width: 880px; line-height: 1.55; }
.ms-count { color: #6b7280; font-size: 13px; margin: 12px 2px 0; }
.ms-empty { color: #6b7280; padding: 36px 0; }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 1000px) { .ms-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ms-grid { grid-template-columns: repeat(2, 1fr); } }
.ms-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; text-decoration: none; transition: box-shadow .15s ease; }
.ms-card:hover { box-shadow: 0 6px 18px rgba(17,24,39,.10); }   /* no translateY - the jump was annoying */
.ms-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; }
.ms-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-card-ph { width: 44px; height: 44px; color: #c3c9d2; }
.ms-card-body { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.ms-card-title { color: #111827; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.ms-card-price { color: #111827; font-size: 15.5px; font-weight: 800; }
.ms-card-loc { color: #6b7280; font-size: 12.5px; }
.st-warn { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin: 14px 0; }

/* TradeMe-style store category nav */
.ms-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ms-cat { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #374151; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.ms-cat small { color: #9ca3af; font-weight: 500; }
.ms-cat:hover { border-color: #2563eb; color: #1d4ed8; }
.ms-cat.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.ms-cat.on small { color: #dbeafe; }

/* store cards: was-price + auction rows match the search cards */
.ms-card-was { color: #9ca3af; font-size: 12.5px; font-weight: 500; text-decoration: line-through; margin-left: 6px; }
.ms-card .sp-card-auction { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.ms-closes { color: #6b7280; }

/* Store settings page (/dashboard/mystore) - separate from Website settings */
.msf-wrap { max-width: 1280px; margin: 0 auto; padding: 26px 16px 50px; }   /* 1.png: same width as the top bar */
.msf-h1 { font-size: 24px; margin: 0 0 6px; }
.msf-sub { color: #6b7280; font-size: 14px; margin: 0 0 18px; }
.msf-msg { border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.msf-msg.ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.msf-msg.err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.msf-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.msf-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.msf-card-head b { font-size: 17px; }
.msf-card-head small { color: #6b7280; }
.msf-view { margin-left: auto; color: #2563eb; font-weight: 600; font-size: 14px; text-decoration: none; }
.msf-view:hover { text-decoration: underline; }
.msf-form { display: flex; flex-direction: column; gap: 12px; }
.msf-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: #374151; }
.msf-form input[type=text], .msf-form textarea { border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 400; }
.msf-form input:focus, .msf-form textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.msf-slugrow { display: flex; align-items: center; gap: 6px; }
.msf-slugrow small { color: #6b7280; font-weight: 500; }
.msf-slugrow input { flex: 1; }
.msf-save { align-self: flex-start; background: #2563eb; color: #fff; border: none; border-radius: 9px; padding: 10px 22px; font-weight: 700; cursor: pointer; }
.msf-save:hover { background: #1d4ed8; }
.msf-imgrow { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.msf-img { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.msf-img-lab { font-weight: 600; color: #374151; }
.msf-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid #e5e7eb; }
.msf-img img.wide { width: 220px; height: 64px; }
.msf-img input { font-size: 12.5px; }

/* Facebook-page style store header (cover photo + overlapping logo) */
.msp-cover { height: 260px; border-radius: 14px 14px 0 0; background-size: cover; background-position: center; position: relative; }
.msp-bar { display: flex; align-items: flex-end; gap: 18px; padding: 0 26px 16px; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 14px 14px; margin-bottom: 4px; }
.msp-logo-wrap { position: relative; flex: none; margin-top: -48px; }
.msp-logo { width: 128px; height: 128px; border-radius: 18px; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); display: inline-flex; align-items: center; justify-content: center; }
.msp-logo-ph { background: #2563eb; color: #fff; font-weight: 800; font-size: 46px; }
.msp-info { flex: 1; min-width: 0; padding-top: 12px; }
.msp-info h1 { font-size: 26px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #111827; }
.msp-info h1 .ms-trade { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.msp-tag { color: #6b7280; margin: 3px 0 0; font-size: 14.5px; }
.msp-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: #4b5563; font-size: 14px; flex-wrap: wrap; }
.msp-fb { color: #111827; text-decoration: none; font-weight: 700; }
.msp-fb small { font-weight: 400; color: #6b7280; }
.msp-fb:hover { text-decoration: underline; }
.msp-site-btn { flex: none; align-self: center; background: #2563eb; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; }
.msp-site-btn:hover { background: #1d4ed8; }
/* editable variant (store settings page) */
.msp-editable { border-radius: 14px 14px 0 0; }   /* identical size to the live store header */
.msp-bar-edit { border-radius: 0 0 14px 14px; margin-bottom: 16px; }
.msp-cam { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: rgba(255,255,255,.94); color: #111827; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.msp-cam:hover { background: #fff; }
.msp-cam svg { width: 17px; height: 17px; }
.msp-cam-cover { position: absolute; right: 14px; bottom: 12px; }
.msp-cam-logo { position: absolute; right: -6px; bottom: -6px; padding: 7px; border-radius: 999px; }

@media (max-width: 720px) { .msp-cover { height: 160px; } .msp-logo { width: 96px; height: 96px; } .msp-bar { flex-wrap: wrap; } }

/* 2.png: title row sits ABOVE the box; the cover fills the card edge-to-edge */
.msf-card-head-out { padding: 0 4px; margin-bottom: 10px; }
.msf-card .msp-cover.msp-editable { margin: -18px -20px 0; }
.msf-card .msp-bar-edit { margin: 0 -20px 16px; border-left: none; border-right: none; border-radius: 0; }

/* live character counters on store settings (1.png) */
.msf-count { color: #9ca3af; font-size: 12px; font-weight: 400; align-self: flex-end; }

/* read-only store address on settings */
.msf-urlline { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: #6b7280; font-weight: 400; }
.msf-urlline b { color: #111827; }
.msf-urlhint { color: #9ca3af; font-size: 12.5px; font-weight: 400; }

/* store address copy button */
.msf-urlline { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.msf-copy { background: #2563eb; color: #fff; border: none; border-radius: 7px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex: none; }
.msf-copy:hover { background: #1d4ed8; }

/* 1.png: View profile sits inline with the Profile picture heading */
.acct-pic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acct-pic-head .view-profile-link { font-size: 13.5px; }

/* profile completion + age gate (5.png) */
.req { color: #dc2626; font-weight: 700; }
.acct-block { border-radius: 10px; padding: 12px 15px; font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.acct-block-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.acct-block-danger { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.acct-block a { font-weight: 700; text-decoration: underline; }
.acct-terms { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; margin: 4px 0 14px; }
.acct-terms input { width: 16px; height: 16px; }

/* static content pages (terms, privacy) */
.static-page { max-width: 900px; margin: 0 auto; padding: 26px 18px 60px; }
.static-page-title { font-size: 28px; margin: 0 0 18px; }
.static-page-body { color: #374151; line-height: 1.65; font-size: 15px; }
.static-page-body p { margin: 0 0 12px; }
.static-page-body h2, .static-page-body h3 { margin: 22px 0 10px; color: #111827; }
.static-page-body ul, .static-page-body ol { margin: 0 0 12px 22px; }
.static-page-updated { color: #9ca3af; font-size: 13px; margin-top: 26px; }

/* Store / Website settings top tabs (1.png) */
.settings-toptabs { display: flex; align-items: center; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; }
.stt-tab { padding: 12px 20px; font-size: 15px; font-weight: 600; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.stt-tab:hover { color: #111827; }
.stt-tab.on { color: #2563eb; border-bottom-color: #2563eb; }
.stt-view { margin-left: auto; color: #2563eb; font-weight: 600; font-size: 14px; text-decoration: none; }
.stt-view:hover { text-decoration: underline; }

/* 5.png: notification + messages dropdowns - wider and centered UNDER THE ICON */
.nbell-menu { position: absolute; left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 8px); width: 480px; max-width: 94vw; }
.mdrop-menu { position: absolute; left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 10px); width: 360px; min-width: 360px; max-width: 92vw; }
/* on very small screens an icon-centred wide panel can run off an edge -
   fall back to a viewport-centred panel there. */
@media (max-width: 640px) {
  .nbell-menu, .mdrop-menu { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); }
}

.agx-office { color: #6b7280; font-size: 12.5px; margin-top: -2px; }

/* already-messaged notice on a listing (one thread per listing) */
.already-msg { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 14px; }
.already-msg-p { color: #075985; font-size: 13.5px; margin: 0 0 8px; }
.already-msg-btn { display: inline-flex; align-items: center; justify-content: center; }

/* admin upgrade-request verify reminder */
.aur-remind { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: 8px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.aur-remind a { color: #b45309; font-weight: 700; text-decoration: underline; }
.aur-proofrow { margin-top: 6px; }

.agent-card-office { color: #6b7280; font-size: 11.5px; margin-top: 1px; }

/* == agent/office public profiles + search-card branding == */
/* --- dashboard agent form: full-width row --- */
.s162-full { grid-column: 1 / -1; }

/* --- search property card: image count badge --- */
.zp-card-img { position: relative; }
.zp-badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 2; }
/* photo count on every card (2026-09-23, like marketplacenz): white pill, camera + number, bottom right of the picture */
.card-photos { position: absolute; right: 4px; bottom: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 5px; border-radius: 4px; background: #fff; color: #808080; font-size: 13px; font-weight: 600; line-height: 1; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.card-photos-i { width: 15px; height: 15px; fill: currentColor; }
.s320 { position: relative; }
.zp-b-imgs, .zp-b-vid { display: inline-flex; align-items: center; gap: 4px;
    background: rgba(17,24,39,.78); color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
    padding: 4px 7px; border-radius: 6px; }
.zp-b-vid { background: rgba(220,38,38,.92); }
.zp-b-imgs-i { width: 13px; height: 13px; fill: currentColor; }
.zp-ca-private { font-size: 12px; font-weight: 600; color: #6b7280; }

/* --- search property card: agency logo + agent avatars strip --- */
.zp-card-agents { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid #eef0f3; min-height: 30px; }
.zp-ca-logo { max-height: 26px; max-width: 120px; object-fit: contain; }
.zp-ca-brand { font-size: 12px; font-weight: 700; color: #374151; letter-spacing: .01em; text-transform: uppercase; }
.zp-ca-avatars { display: inline-flex; align-items: center; }
.zp-ca-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb; margin-left: -8px; background: #f3f4f6; }
.zp-ca-avatars .zp-ca-av:first-child { margin-left: 0; }
.zp-ca-av-i { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #4b5563; }

/* --- reusable property grid for profile pages --- */
.zp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* --- agent profile page --- */
.ap-wrap, .of-wrap { max-width: 1080px; margin: 0 auto; padding: 22px 16px 48px; }
.ap-hero { display: grid; grid-template-columns: 160px 1fr auto; gap: 22px; align-items: start;
    background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 22px; }
.ap-photo { width: 160px; height: 190px; border-radius: 10px; overflow: hidden; background: #eef1f5;
    display: flex; align-items: center; justify-content: center; }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; }
.ap-initials, .of-initials, .of-tm-init { font-weight: 700; color: #64748b; }
.ap-initials { font-size: 44px; }
.ap-name { font-size: 27px; font-weight: 800; color: #111827; margin: 0 0 3px; line-height: 1.15; }
.ap-role { font-size: 15px; color: #374151; font-weight: 600; margin-bottom: 6px; }
.ap-office { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.ap-i, .of-i { width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; margin-right: 3px; }
.ap-agency { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin: 4px 0 8px; }
.ap-agency-logo { max-height: 30px; max-width: 150px; object-fit: contain; }
.ap-agency-name { font-size: 13px; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .02em; }
.ap-lic { font-size: 12.5px; color: #6b7280; }
.ap-contact { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px;
    border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ap-btn-call { background: #16a34a; color: #fff; }
.ap-btn-call:hover { background: #15803d; }
.ap-btn-mail { background: #eef2ff; color: #1d4ed8; border: 1px solid #dbe3ff; }
.ap-btn-mail:hover { background: #e2e8ff; }
.ap-h2 { font-size: 18px; font-weight: 700; color: #111827; margin: 26px 0 12px; }
.ap-about, .of-about { background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 18px 20px; margin-top: 18px; }
.ap-about .ap-h2, .of-about .ap-h2 { margin-top: 0; }
.ap-bio { color: #374151; font-size: 14.5px; line-height: 1.6; white-space: pre-line; margin: 0; }
.ap-empty { color: #6b7280; font-size: 14px; }

/* --- office profile page --- */
.of-hero { display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: center;
    background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 22px; }
.of-logo { width: 150px; height: 110px; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border-radius: 10px; overflow: hidden; }
.of-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.of-initials { font-size: 34px; }
.of-name { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 5px; }
.of-legal { font-size: 13px; color: #6b7280; }
.of-dot { margin: 0 7px; color: #cbd5e1; }
.of-loc { font-size: 13px; color: #6b7280; margin-top: 7px; }
.of-contact { display: flex; flex-direction: column; gap: 10px; min-width: 170px; }
.of-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.of-tm { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
    background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 16px 10px; transition: box-shadow .12s, border-color .12s; }
.of-tm:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(29,78,216,.10); }
.of-tm-photo { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; background: #eef1f5;
    display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.of-tm-photo img { width: 100%; height: 100%; object-fit: cover; }
.of-tm-init { font-size: 24px; }
.of-tm-name { font-size: 14px; font-weight: 700; color: #111827; }
.of-tm-role { font-size: 12px; color: #6b7280; margin-top: 1px; }
.of-tm-count { font-size: 11.5px; color: #1d4ed8; font-weight: 600; margin-top: 5px; }

/* --- links from the listing detail --- */
.agent-card-namelink { color: #1d4ed8; text-decoration: none; font-weight: 700; }
.agent-card-namelink:hover { text-decoration: underline; }
.biz-rea-link { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.biz-rea-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .ap-hero, .of-hero { grid-template-columns: 1fr; text-align: left; }
    .ap-photo { width: 120px; height: 140px; }
    .ap-contact, .of-contact { min-width: 0; }
    .ap-btn { width: 100%; }
}

/* == profile-grid property card (self-contained, site.css) == */
.zp-cards-grid .zp-card { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit; border: 1px solid #e8eaee; box-shadow: 0 2px 10px rgba(15,23,42,.05); transition: box-shadow .15s; }
.zp-cards-grid .zp-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.zp-cards-grid .zp-card-img { position: relative; aspect-ratio: 4 / 3; background: #e2e8f0; overflow: hidden; border-bottom: 1px solid #e5e5e5; }
.zp-cards-grid .zp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.zp-cards-grid .zp-card-ph { position: absolute; inset: 0; background: linear-gradient(135deg,#cbd5e1,#e2e8f0); }
.zp-cards-grid .zp-b-feat { position: absolute; top: 10px; left: 10px; background: #f59e0b; color: #fff; font-size: 11px;
    font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.zp-cards-grid .zp-card-body { padding: 13px 14px 15px; }
.zp-cards-grid .zp-card-price { font-size: 18px; font-weight: 800; color: #0f172a; }
.zp-cards-grid .zp-card-title { font-size: 14px; font-weight: 600; color: #1e293b; margin-top: 5px; line-height: 1.35; }
.zp-cards-grid .zp-card-loc { font-size: 12.5px; color: #64748b; margin-top: 5px; }
.zp-cards-grid .zp-card-loc::before { content: "\1F4CD"; margin-right: 5px; }

/* == listing gallery media count badge (photos + video) == */
.pd-gallery-card .s335 { position: relative; }
.pd-media-badges { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
/* listing page (2026-09-23): the photo count sits on the photo itself, same camera pill as the cards; video badge bottom left */
.pd-media-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.pd-gallery-top .pd-media-wrap { display: block; width: 100%; }
.pd-media-wrap .card-photos { right: 10px; bottom: 10px; font-size: 14px; padding: 3px 8px 3px 6px; pointer-events: none; }
.pd-media-wrap .card-photos-i { width: 17px; height: 17px; }
.pd-mb { display: inline-flex; align-items: center; gap: 5px; background: rgba(17,24,39,.80); color: #fff;
    font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 8px; text-decoration: none;
    border: 0; cursor: pointer; font-family: inherit; backdrop-filter: blur(2px); }
.pd-mb-vid:hover { background: rgba(17,24,39,.95); }
.pd-mb-i { width: 15px; height: 15px; fill: currentColor; }

/* == full-screen video popup (listing detail) == */
.pd-vmodal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 28px; }
.pd-vmodal:not([hidden]) { display: flex; }
.pd-vmodal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.86); }
.pd-vmodal-box { position: relative; z-index: 1; width: min(1120px, 96vw); }
.pd-vmodal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.pd-vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pd-vmodal-x { position: fixed; top: 16px; right: 20px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
.pd-vmodal-x:hover { background: rgba(255,255,255,.32); }
body.pd-vmodal-open { overflow: hidden; }

/* == watchlist heart + refine panel + profile polish == */
/* watchlist heart on property cards (nzmarketplace style) */
.zp-card-wrap { position: relative; }
.zp-fav-form { position: absolute; top: 10px; right: 10px; z-index: 4; margin: 0; padding: 0; }
.zp-fav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #c3cad6;
    box-shadow: 0 1px 5px rgba(15,23,42,.22); transition: transform .1s, color .12s; }
.zp-fav:hover { transform: scale(1.09); color: #ef4444; }
.zp-fav svg { width: 18px; height: 18px; fill: currentColor; }
.zp-fav.on { color: #ef4444; }

/* TradeMe-style refine panel */
body.zproperty .zp-morefilters { border-top: none; }
body.zproperty .zp-morefilters:not([hidden]) { display: block; background: #fff; border-radius: 12px; padding: 6px 2px 4px; margin-top: 8px; }
.zp-mf-title { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 14px; }
.zp-mf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 22px; }
@media (max-width: 900px) { .zp-mf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zp-mf-grid { grid-template-columns: 1fr; } }
.zp-mf-sec { min-width: 0; }
.zp-mf-h { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.zp-mf-range { display: flex; align-items: center; gap: 8px; }
.zp-mf-range .zp-inp { width: 100%; }
.zp-mf-dash { color: #94a3b8; font-size: 13px; }
.zp-mf-checks { display: flex; flex-direction: column; gap: 7px; }
.zp-mf-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #334155; cursor: pointer; }
.zp-mf-check input { width: 16px; height: 16px; accent-color: #2563eb; }
.zp-mf-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 4px; }
.zp-mf-apply { background: #2563eb; color: #fff; border: 0; border-radius: 9px; padding: 11px 26px; font-size: 14px; font-weight: 700; cursor: pointer; }
.zp-mf-apply:hover { background: #1d4ed8; }
.zp-mf-clear { color: #64748b; font-size: 13.5px; text-decoration: none; }
.zp-mf-clear:hover { color: #ef4444; text-decoration: underline; }

/* agent/office profile: match the property search width + 3-per-row bigger grid (5.png) */
.ap-wrap, .of-wrap { max-width: 1280px; }
.zp-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 950px) { .zp-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zp-cards-grid { grid-template-columns: 1fr; } }
.zp-cards-grid .zp-card { border-radius: 14px; }

/* listing-detail seller contact: cleaner, professional rows (listing 254) */
.s358 { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; color: #334155; }
.s358 .i18, .s358 svg { width: 16px; height: 16px; color: #64748b; fill: currentColor; flex: none; }
.s358 a { color: #1d4ed8; text-decoration: none; }
.s358 a:hover { text-decoration: underline; }
.biz-rea-foot { border-top: 1px solid #eef1f6; padding-top: 10px; margin-top: 10px; font-size: 12px; color: #6b7280; line-height: 1.5; }

.agent-card-agency { font-size: 12px; color: #475569; font-weight: 600; margin-top: 2px; }

/* multi-select dropdown inside the refine panel */
.zp-dd { position: relative; }
.zp-dd-btn { width: 100%; text-align: left; background: #f8fafc; border: 1px solid #d5dbe6; border-radius: 8px;
    padding: 9px 30px 9px 12px; font-size: 13.5px; color: #334155; cursor: pointer; position: relative; }
.zp-dd-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateY(-70%) rotate(45deg); }
.zp-dd-btn.open { border-color: #2563eb; background: #fff; }
.zp-dd-btn.open::after { transform: translateY(-30%) rotate(-135deg); border-color: #2563eb; }
.zp-dd-menu { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; min-width: 100%; white-space: nowrap;
    background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.16);
    padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.zp-dd-menu[hidden] { display: none; }

.zp-dd-range .zp-dd-menu { min-width: 230px; }
.zp-dd-ok { margin-top: 4px; width: 100%; background: #2563eb; color: #fff; border: 0; border-radius: 7px; padding: 8px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.zp-dd-ok:hover { background: #1d4ed8; }

.zp-dd-btn-bar { height: 42px; border-radius: 10px; padding: 9px 30px 9px 12px; background: #f8fafc; }

/* price search field = same width as Property type (shared grid; col1 aligns exactly) */
body.zproperty .zp-row1,
body.zproperty .zp-row2 { grid-template-columns: 1.3fr 1.2fr 1.2fr 0.8fr; }
body.zproperty .zp-fld-loc { grid-column: span 2; }

/* search-bar dropdown must not be clipped/hidden by the hero (2.png) */
body.zproperty .zp-herobg { overflow: visible; z-index: 5; }
body.zproperty .zp-herobg::before { top: 0; bottom: 0; height: auto; }
body.zproperty .zp-dd-menu { z-index: 60; }

.zp-mf-only { grid-column: 1 / -1; padding: 4px 0 0; margin-top: 4px; }
.zp-mf-only .zp-mf-h { margin-bottom: 8px; }
.zp-mf-checks-row { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }

.pd-watch-form { margin: 8px 0 2px; }
.pd-watch { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d5dbe6; border-radius: 8px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer; }
.pd-watch:hover { border-color: #ef4444; color: #ef4444; }
.pd-watch svg { width: 15px; height: 15px; fill: currentColor; }

.agent-msg-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; background: #2563eb; color: #fff; border: 0; border-radius: 7px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.agent-msg-btn:hover { background: #1d4ed8; }
.agent-msg-btn svg { width: 14px; height: 14px; fill: currentColor; }
.agent-msg-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
.agent-msg-modal:not([hidden]) { display: flex; }
.agent-msg-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.agent-msg-box { position: relative; z-index: 1; background: #fff; border-radius: 12px; padding: 20px 22px; width: min(440px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.agent-msg-x { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; }
.agent-msg-x:hover { color: #334155; }
.agent-msg-h { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.agent-msg-ta { width: 100%; border: 1px solid #d5dbe6; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; box-sizing: border-box; resize: vertical; }
.agent-msg-ta:focus { outline: none; border-color: #2563eb; }
.agent-msg-send { margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.agent-msg-send:hover { background: #1d4ed8; }
.agent-msg-send svg { width: 15px; height: 15px; fill: currentColor; }
body.agent-msg-open { overflow: hidden; }

.agx-master { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #eff4ff; border: 1px solid #dbe6ff; border-radius: 10px; padding: 12px 16px; margin: 8px 0 16px; }
.agx-master-txt { font-size: 13px; color: #334155; }
.agx-login { border-top: 1px dashed #e2e8f0; margin-top: 10px; padding-top: 10px; }
.agx-login-status { font-size: 12px; font-weight: 600; color: #475569; }
.agx-login-em { color: #64748b; font-weight: 400; }
.agx-login-note { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.agx-setpw { display: flex; gap: 6px; margin-top: 7px; }
.agx-setpw input { flex: 1; min-width: 0; border: 1px solid #d5dbe6; border-radius: 6px; padding: 6px 9px; font-size: 12.5px; }
.agx-login form { display: inline; }
.agx-login .agx-pause { margin-top: 6px; }

.agx-toolbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.agx-search { flex: 1; border: 1px solid #d5dbe6; border-radius: 9px; padding: 10px 14px; font-size: 14px; }
.agx-search:focus { outline: none; border-color: #2563eb; }
.agx-addbtn { display: inline-flex; align-items: center; gap: 6px; background: #2563eb; color: #fff; border: 0; border-radius: 9px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.agx-addbtn:hover { background: #1d4ed8; }
.agx-addbtn svg { width: 14px; height: 14px; fill: currentColor; }

.lc-addagent{display:inline-block;margin-top:2px;color:#2563eb;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.lc-addagent:hover{text-decoration:underline}
/* == Business For Sale search bar (keyword -> category main/sub -> location/radius) == */
.zp-bfs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: end; }
body.zproperty .zp-bfs-grid .zp-fld-loc { grid-column: auto; }
.zp-bfs-grid .zp-search-btn { width: 100%; }
@media (max-width: 760px) { .zp-bfs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .zp-bfs-grid { grid-template-columns: 1fr; } }

/* == category typeahead dropdown (shared - marketplace look) == */
.cat-suggest { position: absolute; background: #fff; border: 1px solid #d0d3d7; z-index: 1000; box-shadow: 0 8px 22px rgba(0,0,0,.16); max-height: 60vh; overflow: auto; border-radius: 8px; }
.cat-suggest[hidden] { display: none; }
.cat-suggest-item { display: block; padding: 9px 12px; text-decoration: none; color: #333; border-bottom: 1px solid #f2f2f2; }
.cat-suggest-item:hover { background: #fff3ec; }
.cs-path { display: block; font-size: 14px; color: #444; line-height: 1.55; white-space: normal; word-break: break-word; }
.cs-path strong { font-weight: 700; color: #111; }
.cs-sep { display: inline-block; font-size: 1.5em; line-height: 0; vertical-align: -0.12em; color: #9a9a9a; margin: 0 4px; }

/* Motor: 2 listings per row for bigger/clearer images (redfin-style) */
body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
body.motorlane.mlsearch-mode .sp-cards-grid,
body.motorlane .sp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { body.motorlane .sp-cards-grid { grid-template-columns: 1fr; } }

/* == Full-width image gallery at top for property + motor (trulia-style) == */
.pd-gallery-top { margin: 0 0 20px; }
.pd-gallery-top .s336 { width: 100%; height: 480px; object-fit: cover; border-radius: 8px; }
.pd-gallery-top .s337 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 0; }
.pd-gallery-top .s338 { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .88; transition: .15s; }
.pd-gallery-top .s338:hover { opacity: 1; transform: translateY(-2px); }
@media (max-width: 760px) { .pd-gallery-top .s336 { height: 300px; } .pd-gallery-top .s337 { grid-template-columns: repeat(4, 1fr); } }

.pd-watch-right { margin: 0 0 12px; }
.pd-watch-right .pd-watch { width: 100%; justify-content: center; }

/* Agency header band flush to the seller-card top (2.png): fill edges, top corners match the card radius */
.s354 > .biz-band:first-child { margin: -20px -20px 14px; border-radius: 6px 6px 0 0; padding: 12px 20px; }

/* Motor cards: taller image to match property card height */
body.motorlane .sp-card-img { aspect-ratio: 3 / 2; height: auto; }

/* == per-category image mode (contain): show whole image, no crop == */
.imgmode-contain .zp-card-img, .imgmode-contain .sp-card-img { background: #eef1f5; }
.imgmode-contain .zp-card-img img, .imgmode-contain .sp-card-img img { object-fit: contain; }

/* detail-page contain mode: whole image, no crop */
.imgmode-contain-d .pd-gallery-top .s336, .imgmode-contain-d .pd-gallery .s336 { object-fit: contain; background: #eef1f5; }

/* Osclass-style DB query counter footer (admin Settings -> page query counter) */
.dbq-footer{position:fixed;bottom:0;left:0;right:0;background:#111;color:#7ee787;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;padding:3px 8px;z-index:99999;opacity:.92}

/* Photo "Optimizing N%" progress (shown while resizing/re-encoding to AVIF) */
.up-frame .up-prep { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 120px; }
.up-prep-txt { font-size: 13px; font-weight: 600; color: #2f6df6; }
.up-prog { width: 84%; height: 8px; background: #e3e9f2; border-radius: 6px; overflow: hidden; }
.up-prog-bar { height: 100%; width: 0; background: #2f6df6; border-radius: 6px; transition: width .12s linear; }

/* Dashboard identity tabs (Personal + each business account) */
.id-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px; border-bottom:1px solid #e6e9ef; }
.id-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:9px 9px 0 0; color:#55606e; font-weight:600; font-size:14px; text-decoration:none; border:1px solid transparent; border-bottom:none; margin-bottom:-1px; }
.id-tab:hover { background:#f2f5fa; color:#23272f; }
.id-tab-on { background:#fff; color:#2f6df6; border-color:#e6e9ef; }
.id-tab-n { background:#eef2f8; color:#55606e; border-radius:11px; padding:1px 9px; font-size:12px; font-weight:700; }
.id-tab-on .id-tab-n { background:#e7effe; color:#2f6df6; }

/* BUY_BOX - purchase card under the watchlist in the right column (1.png 2026-08-08) */
.buy-box { border: 1px solid #d9dce1; background: #fff; padding: 14px 16px; border-radius: 8px; width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.buy-box-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; }
.buy-box-price-l { font-size: 13px; color: #5f6368; font-weight: 600; }
.buy-box-price-v { font-size: 22px; color: #111827; font-weight: 700; }
.buy-box .stock-left { margin-top: 10px; }
/* identity auto-switch toast on the listing page (3.png 2026-08-09) */
.pd-switch-toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 3000; background: #14335f; color: #fff; padding: 11px 22px; border-radius: 10px; font-size: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.25); transition: opacity .4s; max-width: 90vw; text-align: center; }
.pd-switch-toast.pd-toast-gone { opacity: 0; }
/* seller-only hint beside Edit / Sell another buttons (1.png 2026-08-09) */
.lc-owner-note { align-self: center; font-size: 12.5px; color: #8a94a3; margin-left: 6px; }

/* == z points 1-3.png (2026-08-11): property detail tweaks == */
/* price moved to the right column, bold text only, above the agency box */
.pd-side-price { font-size: 20px; font-weight: 800; color: #16213a; margin: 0 0 12px; }
/* breathing room between the WhatsApp button and the contact button below it */
.s359 { margin-bottom: 10px; }
/* z points 6.png: the guest contact button is an <a> (inline), so width:100% was
   ignored and its padding overflowed the gap. Same size + responsive as WhatsApp. */
a.s362.msg-signin, a.s368 { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; margin-top: 10px; }
/* z points 2.png round 2: location line above the title + Details heading over chips */
.pd-loc-top { margin: 0 0 8px; }
.pd-facts-h { margin: 16px 0 10px; }
/* z points: Property ID rides the address line, right-aligned */
.pd-loc-top { display: flex; align-items: center; gap: 6px; }
.pd-locid { margin-left: auto; color: #8a94a3; font-size: 13.5px; font-weight: 500; }

/* == TradeMe-style auction panel (researched live 2026-08-11) == */
.auction-panel-right { background: #fff; border: 1px solid #e2e6ea; }
.ap-ended { font-size: 15px; font-weight: 700; color: #6b7280; text-align: center; margin-bottom: 4px; }
.ap-closes { font-size: 15px; font-weight: 600; color: #111827; }
.ap-closes-abs { font-size: 13px; font-weight: 400; color: #6b7280; margin-top: 2px; }
.ap-box { text-align: center; margin-top: 12px; }
.ap-label { font-size: 15px; color: #374151; }
.ap-price { font-size: 32px; font-weight: 800; color: #111827; line-height: 1.15; margin: 2px 0 12px; }
.auction-bid-btn { background: #2563eb; font-size: 15px; }
.auction-bid-btn:hover { background: #1d4ed8; }
.ap-buynow-line { font-size: 14px; color: #374151; margin-top: 8px; }
.ap-reserve { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: #374151; }
.ap-reserve-met { color: #15803d; }
.ap-reserve-notmet { color: #b91c1c; }
.ap-reserve-none { color: #b45309; }
.auction-panel-right .bids-trigger { display: block; margin-top: 6px; font-size: 14px; color: #2563eb; text-align: center; }
.auction-panel-right .bids-trigger:hover { text-decoration: underline; }

/* z points 2026-08-12: guest Buy Now links styled as the buttons they mirror */
.buy-now-link { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
/* store-only seller card: letter placeholder when the store has no logo */
.store-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #64748b; font-size: 20px; }
/* watchlist heart overlay on the detail gallery */
.pd-fav-detail { top: 12px; right: 12px; }
.pd-fav-detail .zp-fav { width: 38px; height: 38px; }
.pd-fav-detail .zp-fav svg { width: 20px; height: 20px; }

/* z points 11.png: views / listed / expires ride the breadcrumb line */
.pd-crumb { display: flex; align-items: center; flex-wrap: wrap; }
.pd-crumb-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; color: #6b7280; font-size: 13px; }
.pd-crumb-meta .s254 { display: inline-flex; align-items: center; gap: 4px; }

/* AliExpress-style quantity stepper on the buy box (2026-08-12) */
.stock-qty { display: block; margin: 10px 0; }
.qty-label { display: inline-block; font-size: 13.5px; color: #374151; margin-right: 10px; vertical-align: middle; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid #d5dbe6; border-radius: 8px; overflow: hidden; vertical-align: middle; background: #fff; }
.qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f5f6f8; border: 0; cursor: pointer; color: #374151; padding: 0; }
.qty-btn:hover:not([disabled]) { background: #e8ebf0; }
.qty-btn[disabled] { color: #c3c9d4; cursor: not-allowed; }
.qty-btn svg { width: 13px; height: 13px; }
.qty-stepper .stock-qty-in { width: 48px; height: 36px; border: 0; border-left: 1px solid #e3e7ee; border-right: 1px solid #e3e7ee; border-radius: 0; text-align: center; font-size: 14.5px; font-weight: 600; color: #111827; -moz-appearance: textfield; appearance: textfield; margin: 0; padding: 0; }
.qty-stepper .stock-qty-in::-webkit-outer-spin-button, .qty-stepper .stock-qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper .stock-qty-in:focus { outline: none; background: #f8fafc; }
.qty-warn { color: #b91c1c; font-size: 12.5px; font-weight: 600; margin-top: 6px; }

/* "You can't buy your own item." popup (2026-08-12) */
.own-buy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.own-buy-modal[hidden] { display: none; }
.obm-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.obm-box { position: relative; background: #fff; border-radius: 14px; padding: 26px 30px; max-width: 340px; width: calc(100% - 40px); text-align: center; box-shadow: 0 18px 50px rgba(15,23,42,.25); }
.obm-icon { width: 44px; height: 44px; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.obm-msg { font-size: 15.5px; font-weight: 600; color: #111827; margin-bottom: 16px; }
.obm-ok { background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 9px 34px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.obm-ok:hover { background: #1d4ed8; }

/* z points 10.png: visit-store band without the duplicate logo/name */
.visit-store-plain { justify-content: center; }
.visit-store-plain .vs-txt b { font-size: 14.5px; }

/* z points 12.png: watchlist heart on the breadcrumb row (works with 0 photos) */
.pd-fav-crumb { position: static; margin-left: auto; }
.pd-crumb-meta ~ .pd-fav-crumb { margin-left: 14px; }   /* meta present: heart sits right beside it */
.pd-fav-crumb .zp-fav { box-shadow: 0 1px 5px rgba(15,23,42,.18); }
/* z points 11.png: fashion card meta = location + size, bigger and darker
   (trendora.css loads after site.css, so the selectors out-rank its rule) */
body.trendora .td-grid .td-card-meta, body.trendora .td-card .td-card-meta { font-size: 13.5px; color: #374151; font-weight: 600; }
.td-card .td-card-meta { font-size: 13.5px; color: #374151; font-weight: 600; }

/* store categories page (marketplace-store selection, 2026-08-12) */
.stc-h1 { font-size: 24px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.stc-sub { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.stc-sub a { color: #2563eb; }
.stc-ok { background: #dcfce7; border: 1px solid #86efac; color: #15803d; border-radius: 8px; padding: 9px 14px; font-size: 14px; margin-bottom: 14px; }
.stc-grp { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.stc-grp-h { font-size: 15px; font-weight: 800; color: #111827; margin-bottom: 10px; }
.stc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.stc-ck { font-size: 14px; color: #374151; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.stc-save { background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 11px 26px; font-size: 15px; font-weight: 600; cursor: pointer; }
.stc-save:hover { background: #1d4ed8; }

/* z points 15.png: breathing room between Visit our store and the buttons below */
.visit-store { margin-bottom: 10px; }

/* store settings sub-tabs (z points 1.png round 7) */
.stt-subtabs { display: flex; gap: 4px; margin: 10px 0 18px; border-bottom: 1px solid #e5e7eb; }
.stt-sub { padding: 8px 16px; font-size: 14px; font-weight: 600; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.stt-sub:hover { color: #2563eb; }
.stt-sub.on { color: #2563eb; border-bottom-color: #2563eb; }

/* default-account row on Store settings (z points 1.png round 9) */
.msf-defrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.msf-def { color: #2563eb; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid #bfd3f7; background: #eff4ff; padding: 8px 14px; border-radius: 8px; }
.msf-def:hover { background: #e2ecfe; }
.msf-def.on { color: #15803d; border-color: #86efac; background: #dcfce7; cursor: default; }
.msf-def-hint { color: #6b7280; font-size: 13px; }

/* Buyer-action guard popup (2026-08-13): switch-to-personal / own-listing */
.obm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.obm-switch { text-decoration: none; display: inline-block; padding: 9px 16px; }
.obm-switch:hover { text-decoration: none; color: #fff; }
.obm-close { background: #e5e7eb; color: #374151; }
.obm-close:hover { background: #d1d5db; }

/* ADVANCED (variant) listing (2026-08-13): post-form editor */
.lc-mode-tabs { display: flex; gap: 10px; }
.lc-mode-tab { flex: 1; display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: #374151; }
.lc-mode-tab.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.lc-var-head, .lc-var-row { display: grid; grid-template-columns: 1fr 1fr 120px 100px 34px; gap: 8px; align-items: center; }
.lc-var-head { font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 4px; }
.lc-var-row { margin-bottom: 8px; }
.lc-var-del { background: #fee2e2; color: #b91c1c; border: 0; border-radius: 8px; height: 34px; font-size: 18px; cursor: pointer; }
.lc-var-add { background: #f3f4f6; border: 1px dashed #9ca3af; color: #374151; border-radius: 8px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* ADVANCED (variant) listing: detail-page colour/size picker */
.pd-variants { border-top: 1px solid #f3f4f6; padding-top: 12px; margin-top: 4px; }
.pd-var-group { margin-bottom: 10px; }
.pd-var-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.pd-var-label b { color: #111827; }
.pd-var-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-var-chip { border: 1.5px solid #d1d5db; background: #fff; border-radius: 8px; padding: 6px 14px; font-size: 13.5px; color: #374151; cursor: pointer; }
.pd-var-chip:hover { border-color: #9ca3af; }
.pd-var-chip.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.pd-var-chip.off { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.pd-var-warn { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; margin-top: 4px; }
.co-line-var { display: inline-block; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 8px; }

/* variant option rows: dropdown cells fill their grid column */
.lc-var-cell select, .lc-var-cell input { width: 100%; }

/* per-option photo cell (Temu-style variant images, 2026-08-13) */
.lc-var-head, .lc-var-row { grid-template-columns: 1fr 1fr 110px 90px 84px 34px; }
.lc-var-imgcell { display: flex; }
.lc-var-imgbtn { width: 100%; height: 38px; border: 1.5px dashed #9ca3af; border-radius: 8px; background: #f9fafb center/cover no-repeat; color: #6b7280; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lc-var-imgbtn.has { border-style: solid; border-color: #2563eb; color: transparent; }

/* Employer applicants: unseen-since-last-visit marker (1.png 2026-09-15) */
.jd-card-new { border-color: #f5b301; background: #fffdf3; }
.jd-newpill { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #fdf0c2; color: #8a5a00; font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: middle; }
.nbell-ic-badge.applicant { background: #6d28d9; font-weight: 700; }

/* Jobs: advertiser card on the listing page (TradeMe style, 2026-09-15) */
.job-adv-card { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }
.job-adv-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid #e7e9f2; background: #fff; margin-bottom: 4px; }
.job-adv-name { font-size: 17px; font-weight: 700; color: #1f2937; }
.job-adv-type { font-size: 13px; font-weight: 600; color: #0b5fff; }
.job-adv-contact { font-size: 14px; color: #374151; }
.job-adv-lic { font-size: 12px; color: #6b7280; }
.lc-adv-contact { margin-top: 10px; }
/* Expired listing */
.pd-expired-note { margin: 12px 0; padding: 12px 16px; border: 1px solid #f5b301; background: #fffdf3; color: #8a5a00; border-radius: 10px; font-weight: 600; }
.pd-expired { max-width: 640px; margin: 56px auto; padding: 40px 32px; text-align: center; background: #fff; border: 1px solid #e7e9f2; border-radius: 14px; }
.pd-expired-icon { font-size: 40px; color: #9ca3af; margin-bottom: 8px; }
.pd-expired-h { font-size: 26px; font-weight: 700; color: #1f2937; margin: 0 0 10px; }
.pd-expired-p { color: #4b5563; margin: 0 0 22px; }
.pd-expired-links { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pd-expired-btn { display: inline-block; padding: 10px 18px; background: #f7931e; color: #fff; border-radius: 8px; font-weight: 600; }
.pd-expired-link { color: #0b5fff; font-weight: 600; }

/* Jobs: Trade Me parity (3.png/4.png) - post form + apply form + detail */
.job-screen-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f0f1f5; cursor: pointer; }
.job-screen-opt input { margin-top: 4px; }
.job-screen-opt small { display: block; color: #6b7280; font-size: 12px; }
.job-screen-opt em { display: block; color: #6b7280; font-size: 12px; font-style: normal; border-left: 3px solid #e5e7eb; padding-left: 8px; margin-top: 4px; }
.job-screen-locked { cursor: default; opacity: .85; }
.job-screen-note { margin-top: 8px; padding: 10px 12px; background: #eaf4ff; border-left: 4px solid #0b5fff; border-radius: 6px; }
.job-summary { font-size: 15px; color: #374151; margin: 4px 0 10px; }
.job-req-list { margin: 8px 0 6px 18px; padding: 0; color: #374151; }
.job-req-list li { margin: 4px 0; }
.jd-screen-box { margin: 0 0 16px; padding: 14px 16px; background: #f8fafc; border: 1px solid #e7e9f2; border-radius: 10px; }
.jd-screen-hint { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.jd-screen-q { padding: 10px 0; border-top: 1px solid #eef0f4; }
.jd-screen-t { font-weight: 600; color: #1f2937; }
.jd-screen-s { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.jd-screen-opt { display: inline-flex; align-items: center; gap: 6px; margin: 6px 18px 0 0; cursor: pointer; }
.jd-screen { font-size: 13px; color: #374151; margin-top: 4px; }
/* Jobs: Work type + Employment type dropdowns side by side (Trade Me 6.png) */
#catAttrs .s162:has([data-hidden="avh_post_9064"]), #catAttrs .s162:has([data-hidden="avh_post_9068"]) { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
#catAttrs .s162:has([data-hidden="avh_post_9064"]) { margin-right: 12px; }
.job-screen-count { margin: 10px 0 4px; font-weight: 600; color: #374151; }

/* Job branding: banner across the listing, logo on cards / advertiser card, settings previews */
.job-banner { margin: 0 0 14px; }
.job-banner img { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; }
.job-adv-logo { width: auto; max-width: 220px; height: auto; max-height: 90px; object-fit: contain; border: 0; border-radius: 6px; }
.jb-avatar-logo { background: #fff; border: 1px solid #e7e9f2; overflow: hidden; }
.jb-avatar-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-prev { margin: 6px 0 8px; padding: 8px; border: 1px solid #e7e9f2; border-radius: 8px; background: #fff; display: inline-block; max-width: 100%; }
.brand-prev-logo img { max-height: 90px; max-width: 260px; }
.brand-prev-banner { display: block; }
.brand-prev-banner img { width: 100%; max-height: 110px; object-fit: cover; }
.brand-remove { display: block; margin-top: 6px; font-size: 13px; color: #6b7280; }
.jd-brand { background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; padding: 18px 20px; }
.jd-brand-h { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.jd-brand .brand-form { margin-top: 12px; }
.lc-brand-link { margin-top: 6px; }
.lc-brand-link a { color: #0b5fff; font-weight: 600; }

/* Listing post + edit forms (all categories): field spacing doubled, 8.png 2026-09-15 (lc-form-gap) */
form[action="/listing/create"] > .s162, form[action="/listing/create"] > div > .s162,
form.lc-edit-form > .s162, form.lc-edit-form > div > .s162 { margin-bottom: 30px; }
form[action="/listing/create"] .lc-adv-contact, form.lc-edit-form .lc-adv-contact { margin-top: 20px; }
form[action="/listing/create"] .job-screen-opt, form.lc-edit-form .job-screen-opt { padding: 12px 0; }
/* Employer applicants: job title on top of each group (1.png 2026-09-15) */
.jd-group { display: flex; flex-direction: column; gap: 10px; }
.jd-group + .jd-group { margin-top: 10px; }
.jd-group-h { display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; }
.jd-group-title { font-size: 17px; font-weight: 700; color: #1f2937; }
.jd-group-title:hover { color: #0b5fff; }
.jd-filter-note { margin: 0 0 12px; font-size: 14px; color: #374151; }
.jd-filter-note a { color: #0b5fff; font-weight: 600; }
.ld-apply-side { display: block; width: 100%; box-sizing: border-box; text-align: center; margin: 12px 0 6px; padding: 14px 22px; }
/* guard popup: the switch link must really disappear for own-listing messages (11.png) */
.own-buy-modal .obm-switch[hidden] { display: none; }

/* Employer applicants: one box per job, applicants as rows inside (13.png 2026-09-15) */
.jd-group { gap: 0; background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; overflow: hidden; }
.jd-group + .jd-group { margin-top: 14px; }
.jd-group-h { padding: 14px 18px; background: #f8fafc; border-bottom: 1px solid #e7e9f2; }
.jd-group .jd-card-appl { border: 0; border-radius: 0; background: transparent; }
.jd-group .jd-card-appl + .jd-card-appl { border-top: 1px solid #eef0f4; }
.jd-group .jd-card-new { background: #fffdf3; box-shadow: inset 4px 0 0 #f5b301; }
.acct-field-err { margin-top: 6px; color: #b91c1c; font-size: 13px; font-weight: 600; }
/* 15.png: applicant groups collapse; the heading toggles them (details/summary, no JS) */
.jd-group > .jd-group-h { cursor: pointer; list-style: none; user-select: none; }
.jd-group > .jd-group-h::-webkit-details-marker { display: none; }
.jd-group > .jd-group-h:hover { background: #f1f5f9; }
.jd-group:not([open]) > .jd-group-h { border-bottom: 0; }
.jd-group-chev { width: 9px; height: 9px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; flex: 0 0 auto; }
.jd-group[open] > .jd-group-h .jd-group-chev { transform: rotate(45deg); }
.jd-group-view { margin-left: auto; font-size: 13px; font-weight: 600; color: #0b5fff; white-space: nowrap; }
.jd-group-view:hover { text-decoration: underline; }
.jd-group-body { display: flex; flex-direction: column; }
/* a flex <details> shows its content while closed - stay block-level */
details.jd-group { display: block; }
details.jd-group:not([open]) > .jd-group-body { display: none; }
/* 19.png: job card chips are links (new tab) */
.jd-chip-link { text-decoration: none; cursor: pointer; display: inline-block; }
.jd-chip-link:hover { background: #e2e8f0; text-decoration: underline; }
.jd-chip-green.jd-chip-link:hover { background: #bbf7d0; }
/* Quick apply (21.png + 22.png, 2026-09-15) */
.qa-form { display: flex; flex-direction: column; gap: 22px; }
.qa-sec-h { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.qa-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #dfe3ec; border-radius: 10px; padding: 14px 16px; }
.qa-card-ic { color: #475569; flex: 0 0 auto; display: flex; }
.qa-card-main { flex: 1 1 auto; min-width: 0; }
.qa-name { font-size: 15px; font-weight: 700; color: #0f172a; }
.qa-line { font-size: 14px; color: #334155; margin-top: 3px; overflow-wrap: anywhere; }
.qa-missing { color: #b45309; }
.qa-headline { color: #64748b; }
.qa-edit { display: inline-flex; align-items: center; gap: 6px; color: #2b50ec; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.qa-edit:hover { text-decoration: underline; }
.qa-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.qa-toggle-t { font-size: 15px; font-weight: 600; color: #0f172a; }
.qa-toggle-s { font-size: 13px; color: #64748b; margin-top: 3px; }
.qa-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.qa-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.qa-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s; cursor: pointer; }
.qa-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.qa-switch input:checked + .qa-slider { background: #2b50ec; }
.qa-switch input:checked + .qa-slider::before { transform: translateX(20px); }
.qa-switch input:focus-visible + .qa-slider { box-shadow: 0 0 0 3px rgba(43,80,236,.25); }
.qa-cvs { display: flex; flex-direction: column; gap: 10px; }
.qa-cv { display: flex; align-items: center; gap: 12px; border: 1px solid #dfe3ec; border-radius: 10px; padding: 12px 14px; cursor: pointer; background: #fff; }
.qa-cv:has(input:checked) { border-color: #2b50ec; box-shadow: 0 0 0 2px rgba(43,80,236,.12); }
.qa-cv input[type=radio] { width: 18px; height: 18px; accent-color: #2b50ec; flex: 0 0 auto; margin: 0; }
.qa-cv-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.qa-cv-n { font-size: 15px; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.qa-cv-d { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.qa-cv-open { color: #2b50ec; display: flex; flex: 0 0 auto; }
.qa-cv-file { padding: 4px 0 0 44px; }
.qa-cv-file[hidden] { display: none; }
.qa-cl-preview { white-space: pre-wrap; color: #64748b; }
.qa-screen { margin: 0; }
.qa-actions { display: flex; gap: 10px; align-items: center; }
.qa-submit { font-size: 15px; padding: 11px 22px; }
.qa-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 9px; padding: 11px 14px; font-size: 14px; margin-bottom: 16px; }
.jd-phone { color: #334155; }
.jd-profile-body { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; color: #334155; }
.jd-profile-body b { color: #0f172a; margin-right: 6px; font-weight: 600; }
.jd-profile-pre { white-space: pre-wrap; }
@media (max-width: 640px) {
    .qa-card { flex-wrap: wrap; }
    .qa-toggle-row { align-items: flex-start; }
}
/* expired list (4.png + 5.png 2026-09-15): fixed thumb box, in-place renew note */
.s273 { height: 104px; min-height: 0; overflow: hidden; }
.s273 .s185 { display: block; width: 100%; height: 100%; object-fit: cover; }
.s272 { align-items: stretch; }
.exp-renew-note { margin: 0 0 12px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9px; color: #065f46; font-size: 14px; }
.exp-renew-note a { color: #047857; font-weight: 600; margin-left: 4px; }
.exp-renew-note[hidden], .exp-empty[hidden] { display: none; }
.s278:disabled { opacity: .6; cursor: default; }
.exp-del { color: #b45309; font-weight: 600; }
/* Garage sales date + time (2026-09-15) */
.gs-times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 640px) { .gs-times { grid-template-columns: 1fr; } }
.gs-side-date { margin: 12px 0 4px; }
.gs-side-lbl { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.gs-quick { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 13px; }
.gs-quick a { color: #2b50ec; font-weight: 600; text-decoration: none; }
.gs-quick a:hover { text-decoration: underline; }
.sp-card-when { display: inline-block; margin-top: 6px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; }
.gs-date, .gs-time { font-weight: 600; color: #0f172a; }
/* garage sales sidebar (2026-09-15) */
.sp-grp-gs-hidden { display: none; }
.gs-side-cat { margin: 12px 0 2px; }
.gs-side-cat-link { display: inline-block; font-size: 15px; font-weight: 700; color: #0f172a; text-decoration: none; padding: 6px 12px; border: 1px solid #dfe3ec; border-radius: 8px; background: #fff; }
.gs-side-cat-link:hover { border-color: #2b50ec; color: #2b50ec; }
/* garage sales weekday checkboxes (3.png 2026-09-15) */
.gs-days { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 10px 0 24px; }   /* double gap above Location (2.png) */
.gs-day-date { white-space: nowrap; }
.gs-day { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #334155; cursor: pointer; }
.gs-day input { width: 16px; height: 16px; accent-color: #2b50ec; margin: 0; }
.sp-main.gs-loading #results { opacity: .45; transition: opacity .15s; }
.sp-loc-inwrap { position: relative; width: 100%; }
.sp-loc-inwrap .sp-input { width: 100%; }
/* sidebar location suggestions: long dropdown like the keyword one (1.png 2026-09-15) */
.sp-loc-long { position: absolute; left: auto; right: auto; top: auto; z-index: 1000; border: 1px solid #d0d3d7; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.16); max-height: 60vh; overflow: auto; background: #fff; }
.sp-loc-long[hidden] { display: none; }
.sp-loc-row { padding: 9px 12px; font-size: 14px; border-bottom: 1px solid #f2f2f2; color: #333; }
.sp-loc-row:hover { background: #fff3ec; }
.sp-loc-path i { font-style: normal; color: #9ca3af; margin: 0 7px; font-size: 16px; }
.sp-loc-path b { font-weight: 700; color: #111; }
/* sidebar location dropdown on phones (responsive pass 2026-09-15) */
.sp-loc-row { align-items: flex-start; gap: 8px; }
.sp-loc-path { flex: 1 1 auto; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.sp-loc-row .loc-sugg-sub { margin-top: 3px; }
@media (max-width: 480px) { .sp-loc-row { padding: 11px 12px; } .sp-loc-path i { margin: 0 5px; } }
/* Garage sales: From -> To paired date fields with calendar popovers (2026-09-15) */
.gsr { margin: 12px 0 24px; }
.gsr-pair { display: flex; align-items: flex-end; gap: 8px; }
.gsr-fld { flex: 1 1 0; min-width: 0; }
.gsr-fld label { display: block; font-size: 11px; color: #6b7280; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.gsr-in { width: 100%; font: inherit; font-size: 14px; padding: 10px 10px; border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; color: #1f2937; }
.gsr-in:focus, .gsr-fld.open .gsr-in { outline: 0; border-color: #2b50ec; }
.gsr-arrow { padding-bottom: 12px; color: #6b7280; font-size: 20px; line-height: 1; }
.gsr-out { margin-top: 8px; font-size: 13px; color: #374151; min-height: 0; }
.gsr-clear { display: inline-block; margin-top: 4px; font-size: 13px; color: #2b50ec; font-weight: 600; text-decoration: none; }
.gsr-clear:hover { text-decoration: underline; }
.gsr-clear[hidden] { display: none; }
.gsr-pop { position: absolute; z-index: 1000; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 14px; }
.gsr-pop[hidden] { display: none; }
.gsc-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gsc-nav button { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 18px; line-height: 1; color: #1f2937; }
.gsc-label { font-weight: 600; font-size: 14px; color: #1f2937; }
.gsc-week { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; color: #6b7280; text-align: center; margin-bottom: 4px; }
.gsc-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.gsc-day { border: 0; background: none; height: 36px; font: inherit; font-size: 14px; color: #1f2937; cursor: pointer; border-radius: 8px; }
.gsc-day:hover { background: #e5e7eb; }
.gsc-out { color: #c4c8cf; }
.gsc-today { font-weight: 700; text-decoration: underline; }
.gsc-sel, .gsc-sel:hover { background: #2b50ec; color: #fff; }
.gsc-disabled, .gsc-disabled:hover { color: #d1d5db; cursor: not-allowed; background: none; text-decoration: none; }
/* garage sale day rows on the posting form (2026-09-15) */
.gs-day-row { display: grid; grid-template-columns: 1.1fr 1.5fr 1.5fr auto; gap: 12px; align-items: end; padding: 12px; border: 1px solid #e7e9f2; border-radius: 10px; background: #f8fafc; margin-top: 10px; }
.gs-time { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.gs-day-remove { border: 1px solid #d5dbe6; background: #fff; color: #64748b; border-radius: 8px; width: 34px; height: 40px; font-size: 20px; line-height: 1; cursor: pointer; }
.gs-day-remove:hover { color: #b91c1c; border-color: #fca5a5; }
.gs-day-remove[hidden] { visibility: hidden; display: block; }
.gs-add-day { margin-top: 10px; border: 1px dashed #2b50ec; background: #fff; color: #2b50ec; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.gs-add-day:hover { background: #eef2ff; }
@media (max-width: 720px) { .gs-day-row { grid-template-columns: 1fr; } .gs-day-remove { width: 100%; } }
.gs-day-line .item-attr-v { display: block; }
/* 7.png: the date pair looks like the Location box */
.gsr-pair { gap: 10px; }
.gsr-fld label { font-size: 14px; font-weight: 600; color: #555; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.gsr-in { border: 1px solid #ccc; border-radius: 5px; padding: 9px 12px; font-size: 15px; color: #333; background: #fff; }
.gsr-in:focus, .gsr-fld.open .gsr-in { border-color: #2b50ec; }
.gsr-arrow { display: none; }
/* garage sales: day ticks under the From/To pair (11.png) */
.gsr .gs-days { margin: 12px 0 0; }
.gsr-clear { margin-top: 8px; }
/* employer dashboard: search my jobs */
.jd-search { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jd-search-in { flex: 1 1 auto; min-width: 0; border: 1px solid #ccc; border-radius: 8px; padding: 10px 14px; font-size: 15px; color: #333; background: #fff; }
.jd-search-in:focus { outline: 0; border-color: #2b50ec; }
.jd-search-n { font-size: 13px; color: #64748b; white-space: nowrap; }
.jd-card[hidden], .jd-list[hidden] { display: none; }
/* services cards: provider rating under the location (1.png) */
.sp-card-rating { font-size: 13px; color: #374151; font-weight: 600; margin-bottom: 6px; }
.sp-card-rating.sp-card-norating { color: #999; font-weight: 400; }
/* property open homes / viewing times (2026-09-15) */
.pd-openhomes { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.pd-oh { display: flex; gap: 16px; align-items: baseline; font-size: 15px; color: #1e293b; }
.pd-oh-day { font-weight: 600; min-width: 260px; }
.pd-oh-time { color: #374151; }
.pd-oh-note { font-size: 13px; color: #64748b; margin-bottom: 12px; }
@media (max-width: 600px) { .pd-oh { flex-direction: column; gap: 2px; } .pd-oh-day { min-width: 0; } }
.gs-add-day[hidden] { display: none; }
/* category suggestion matched through an "other name" (e.g. Apartment (studio)) */
.lc-alt { color: #1f56d6; font-weight: 700; }
/* listing photo viewer popup (2026-09-16) */
.pd-zoomable { cursor: zoom-in; }
/* photo viewer popup (2026-09-23): Fancybox-like layout - full-screen stage, toolbar on top, round nav buttons */
.pv { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.pv[hidden] { display: none; }
.pv-back { position: absolute; inset: 0; background: rgba(24, 24, 27, .96); }
.pv-stage { position: relative; z-index: 1; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-img { max-width: 100vw; max-height: 100vh; object-fit: contain; background: #111; transform-origin: center center; will-change: transform; touch-action: none; user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
.pv-zoomed .pv-img { cursor: grab; }
.pv-at-max .pv-img { cursor: zoom-out; }
.pv-img.pv-dragging { cursor: grabbing; }
.pv-bar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.pv-bar-l, .pv-bar-r { display: flex; align-items: center; gap: 2px; }
.pv-count, .pv-zoom-n { color: #fff; font-size: 13px; padding: 0 8px; opacity: .9; }
.pv-zoom-n { opacity: .6; }
.pv-btn { width: 40px; height: 40px; border: 0; border-radius: 4px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.pv-btn:hover { background: rgba(255, 255, 255, .12); }
.pv-btn:disabled { opacity: .35; cursor: default; }
.pv-btn[hidden] { display: none; }
.pv-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.pv-nav:hover { background: rgba(0, 0, 0, .8); }
.pv-nav[hidden] { display: none; }
.pv-prev { left: 12px; } .pv-next { right: 12px; }
.pv-fs .pv-back { background: #000; }
body.pv-open { overflow: hidden; }
@media (max-width: 767px) {
  .pv-nav { width: 40px; height: 40px; } .pv-prev { left: 6px; } .pv-next { right: 6px; }
  .pv-btn { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
  .pd-lb-img { max-width: 100vw; max-height: 80vh; border-radius: 0; }
  .pd-lb-btn { width: 40px; height: 40px; font-size: 26px; background: rgba(255, 255, 255, .22); }
  .pd-lb-prev { left: 8px; } .pd-lb-next { right: 8px; }
}

/* friendly 404 / 403 / 500 page (2026-09-16) */
.err-page { max-width: 640px; margin: 48px auto 72px; padding: 0 20px; text-align: center; }
.err-code { font-size: 64px; font-weight: 800; line-height: 1; color: #f0960a; letter-spacing: -.02em; }
.err-title { font-size: 28px; font-weight: 700; color: #0f172a; margin: 12px 0 8px; }
.err-text { font-size: 16px; color: #475569; margin: 0 0 22px; }
.err-search { display: flex; gap: 8px; max-width: 460px; margin: 0 auto 18px; }
.err-input { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 14px; font-size: 15px; }
.err-btn { height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: #1558d6; color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.err-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.err-link { color: #1558d6; font-weight: 600; text-decoration: none; }
.err-link:hover { text-decoration: underline; }
/* header "Post ad free": white pill with a rainbow ring (pills.html design 07, 2026-09-16) */
@property --pab-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pab-ring { --pab-a: 0deg; gap: 6px; --pab-rainbow: conic-gradient(from var(--pab-a), #ff3b3b, #ff9f1c, #ffe733, #3bd66b, #22c7e6, #3b6bff, #b23bff, #ff3bbf, #ff3b3b);
  height: 38px; padding: 0 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--pab-rainbow) border-box;
  color: #1f2937; font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none;
  }
.pab-ring:hover { animation: pab-spin 1.6s linear infinite; color: #1f2937; text-decoration: none; }
@keyframes pab-spin { to { --pab-a: 360deg; } }
.pab-ring .pab-ic { width: 17px; height: 17px; flex: none; }
/* homepage: heading above the latest listings (1.png 2026-09-16) */
.hm-latest-h { font-size: 22px; font-weight: 600; color: #475569; text-align: center; margin: 14px 0 14px; line-height: 1.2; }
/* Firefox: dropdown lists white like Chrome; Chrome-style scrollbars in Firefox only (1.png 2026-09-16) */
select option { background-color: #fff; color: #1f2937; }
select option:checked { background-color: #fff; }
@supports (-moz-appearance: none) {
  html, select, textarea, .sp-attr-checks, .zp-dd-menu, .mega-cats, .ml-combo-panel { scrollbar-width: thin; scrollbar-color: #c1c1c1 #ffffff; }
}
/* our own dropdown list for every <select> on desktop (nice-select.js): white, thin scrollbar, same in every browser */
.ns-list { position: absolute; z-index: 100000; box-sizing: border-box; overflow-y: auto; background: #fff; color: #1f2937; border: 1px solid #cfd4da; border-radius: 6px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .14); padding: 4px 0; font-size: 15px; line-height: 1.3; scrollbar-width: thin; scrollbar-color: #c1c1c1 #fff; }
.ns-list::-webkit-scrollbar { width: 8px; }
.ns-list::-webkit-scrollbar-track { background: #fff; }
.ns-list::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.ns-item { padding: 7px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-item:hover { background: #eaf1ff; }
.ns-item.ns-selected { background: #e2ebfd; font-weight: 600; }
.ns-item.ns-disabled { color: #9ca3af; cursor: default; background: none; }
.ns-group { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
select.ns-open { border-color: #1558d6; }
/* hidden beats the display utilities (a zero badge with class flex was still showing, 2.png 2026-09-16) */
[hidden].flex, [hidden].inline-flex, [hidden].block, [hidden].inline-block, [hidden].grid { display: none; }
/* the Applicants icon is out of the bar while nothing is unseen (1.png 2026-09-16) */
.js-applicants-link[hidden] { display: none; }
/* account menu (name + arrow) next to the switch-account avatar (1.png 2026-09-16) */
.idsw-acct { margin-right: 8px; }
.idsw-name-btn { padding: 4px 4px 4px 6px; gap: 6px; border-radius: 999px; }
.idsw-name-btn .idsw-curname { margin-right: 0; }
.idsw-name-car { width: 20px; height: 20px; border-radius: 50%; background: #e4e6eb; color: #1c2733; font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.idsw-name-btn:hover .idsw-name-car { background: #d8dbe0; }
.idsw-acct-menu { min-width: 210px; padding: 6px; }
/* account menu mirrors the dashboard sidebar: grouped, compact, scrolls when tall (3.png 2026-09-16) */
.idsw-acct-menu { min-width: 240px; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c1c1c1 #fff; }
.idsw-acct-menu .idsw-h { padding: 8px 12px 2px; }
.idsw-acct-menu .idsw-link { padding: 6px 12px; }
/* the Post ad free pill sits at the far right of the top bar (5.png 2026-09-16) */
.hdr-post { margin-left: 4px; }
/* grey sidebar-style counts in the account menu (5.png 2026-09-16) */
.idsw-cnt { opacity: .65; color: #6b7280; }
/* the icon group is centred between Categories and the account name (6.png 2026-09-16) */
.hdr-icons { flex: 1 1 auto; justify-content: center; min-width: 0; }
.hdr-icons + .flex-1 { display: none; }
body.trendora .td-header-row .td-hlinks { margin-left: 0; }
.hdr-icons { padding-right: 12px; }   /* balances the 12px margin after Categories: centred on the text edges */
.idsw-name-btn { padding-left: 0; }
/* header Categories button: white soft-shadow card, chevron flips when open (categories.html design 17, 2026-09-16) */
.cat-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; background: #fff; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: #374151; cursor: pointer; line-height: 1; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .06); transition: box-shadow .18s ease, color .18s ease; }
.cat-btn:hover { color: #111827; box-shadow: 0 2px 4px rgba(15, 23, 42, .1), 0 8px 20px rgba(15, 23, 42, .1); }
.cat-btn .cat-chev { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.mega-wrap:has(.mega-cats:not([hidden])) .cat-chev { transform: rotate(180deg); }   /* flips only while the menu is open */
/* "Forum" text beside Categories, plain link to the forum (5.png 2026-09-24) */
.hdr-forum { display: inline-flex; align-items: center; height: 38px; margin-right: 12px; font-size: 14px; font-weight: 400; color: #374151; text-decoration: none; white-space: nowrap; transition: color .18s ease; }
.hdr-forum:hover { color: #111827; }
/* the Quotes icon is out of the bar while no offer is unseen (5.png 2026-09-16) */
.js-offers-link[hidden] { display: none; }
/* marketplace offer cards in Messages (2026-09-16) */
.mo-valid { font-size:12px; color:#6b7280; margin-top:4px; }
.qo-hours-inp { border:1px solid #d1d5db; border-radius:6px; padding:8px 10px; font-size:13px; background:#fff; }
.mo-openlink { display:inline-block; font-size:12px; font-weight:600; color:#166534; margin-top:4px; text-decoration:none; }
.mo-openlink:hover { text-decoration:underline; }
.mo-sold { border-top:1px dashed #d1d5db; margin-top:10px; padding-top:8px; font-size:13px; color:#166534; }
.mo-sold a { font-weight:600; color:#166534; }
/* delivery choice on offer cards (2026-09-16) */
.mo-delivery { margin-top:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.mo-dlbl { font-size:13px; font-weight:600; color:#374151; }
.mo-dsel { border:1px solid #d1d5db; border-radius:6px; padding:7px 10px; font-size:13px; background:#fff; max-width:100%; }
.mo-daddr { font-size:12px; color:#6b7280; }
.mo-daddr.err { color:#991b1b; }
.mo-daddr a { font-weight:600; color:inherit; }
.mo-dline { font-size:13px; color:#374151; margin-top:8px; }
.mo-dline.wait { color:#92400e; }
.mo-delivery .qo-acts { margin-top:4px; }
.js-itemoffers-link[hidden] { display: none; }
/* Jobs icon + matching jobs page for service providers (2026-09-16) */
.js-jobmatch-link[hidden] { display: none; }
.jm-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; }
.jm-h { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 6px; }
.jm-sub { font-size: 14px; color: #6b7280; margin: 0 0 18px; }
.jm-empty { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; font-size: 14px; color: #374151; }
.jm-list { display: flex; flex-direction: column; gap: 10px; }
.jm-row { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; }
.jm-row:hover { border-color: #c7d2fe; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.jm-row.jm-new { border-color: #86efac; background: #f0fdf4; }
.jm-row.jm-closed { opacity: .7; }
.jm-title { font-size: 15px; font-weight: 600; color: #111827; }
.jm-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #6b7280; align-items: center; }
.jm-pill { font-size: 11px; font-weight: 600; border-radius: 9px; padding: 2px 8px; background: #dcfce7; color: #166534; }
.jm-pill.closed { background: #e5e7eb; color: #374151; }
.js-support-link[hidden], .js-forum-link[hidden] { display: none; }   /* icons only while they carry a count (2026-09-17) */
/* "you are now using your X account" banner after an automatic account switch (2026-09-17) */
.idsw-flash { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 12px auto 0; padding: 10px 14px; background: #eef2ff; border: 1px solid #c7d2fe; color: #1e1b4b; border-radius: 10px; font-size: 14px; }
.idsw-flash-ico { font-size: 18px; color: #4f46e5; }
.idsw-flash b { font-weight: 700; }
.idsw-flash-x { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 4px; }
.idsw-flash[hidden] { display: none; }
@media (max-width: 1320px) { .idsw-flash { margin-left: 16px; margin-right: 16px; } }
/* Offer to watchers card (5.png 2026-09-17) */
.sw-box.sw-pro { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); margin-bottom: 16px; }
.sw-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.sw-ico { width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; color: #4f46e5; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 38px; }
.sw-title { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.sw-sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; line-height: 1.45; }
.sw-form-pro { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sw-field { display: flex; flex-direction: column; gap: 5px; }
.sw-lbl { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; }
.sw-lbl em { font-style: normal; font-weight: 400; text-transform: none; color: #9ca3af; letter-spacing: 0; }
.sw-inp { border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 11px; font-size: 14px; background: #fff; width: 100%; box-sizing: border-box; color: #111827; }
.sw-inp:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.sw-money { position: relative; display: block; }
.sw-cur { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 14px; }
.sw-money .sw-inp { padding-left: 24px; }
.sw-send-pro { border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 700; font-size: 14px; padding: 11px 14px; cursor: pointer; width: 100%; }
.sw-send-pro:hover { background: #1d4ed8; }
.sw-hint { margin: 0; font-size: 12px; color: #6b7280; }
@media (max-width: 480px) { .sw-grid { grid-template-columns: 1fr; } }
/* Watchers icon + ended-with-watchers page (2026-09-17) */
.js-watchers-link[hidden] { display: none; }
.ew-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.ew-row .jm-title { flex: 1 1 240px; }
.ew-row .jm-meta { flex: 1 1 200px; }
.ew-acts { flex: 0 0 auto; }
.ew-btn { display: inline-block; background: #2563eb; color: #fff; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 8px 14px; text-decoration: none; }
.ew-btn:hover { background: #1d4ed8; }
.ew-btn.ew-btn-2 { background: #e5e7eb; color: #374151; }
.jm-title-link { text-decoration: none; color: #111827; }
.jm-title-link:hover { text-decoration: underline; }
.ew-acts { display: inline-flex; gap: 8px; }
.jm-readform { display: inline; margin: 0; }
.jm-readform .ew-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; }
/* "Messaging as" strip on Messages (2026-09-17) */
.msg-as { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; padding: 8px 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 14px; color: #374151; }
.msg-as-ava { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #e2e8f0; color: #334155; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.msg-as-ava img { width: 100%; height: 100%; object-fit: cover; }
.msg-as-txt b { color: #111827; }
.msg-as-txt em { font-style: normal; font-size: 12px; background: #e5e7eb; color: #374151; border-radius: 9px; padding: 1px 8px; margin-left: 4px; }
.msg-as-switch { margin-left: auto; border: 0; background: transparent; color: #2563eb; font-weight: 600; font-size: 13px; cursor: pointer; }
.msg-as-switch:hover { text-decoration: underline; }
@media (max-width: 480px) { .msg-as { border-radius: 14px; flex-wrap: wrap; } .msg-as-switch { margin-left: 46px; } }

/* applicants read / unread (1.png 2026-09-17): envelope toggle per card, unread bar above the list */
.jd-readbar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; color: #475569; }
.jd-readbar-n b { color: #b45309; font-size: 14px; }
.jd-readbar[data-unread="0"] .jd-readbar-n b { color: #475569; }
.jd-readall { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.jd-readall[hidden] { display: none; }
.jd-env { width: 18px; height: 18px; flex: none; }
.jd-readtog { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid #d5dbe6; background: #fff; color: #334155; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1; }
.jd-readtog:hover { background: #f1f5f9; }
.jd-readtog:disabled { opacity: .5; cursor: default; }
.jd-readtog[data-read="1"] .jd-env-read { display: none; }
.jd-readtog[data-read="0"] .jd-env-unread { display: none; }
.jd-readtog[data-read="0"] { border-color: #f5b301; color: #8a5a00; background: #fffbe8; }
.jd-readtog[data-read="0"] .jd-readtog-t::before { content: "Mark as read"; }
.jd-readtog[data-read="1"] .jd-readtog-t::before { content: "Mark as unread"; }
.jd-newpill[hidden] { display: none; }

/* 4.png 2026-09-17: read / unread as text in the job group header (blue-grey bar), per-card button gone */
.jd-group-read { margin-left: auto; margin-right: 14px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: #0b5fff; cursor: pointer; white-space: nowrap; }
.jd-group-read:hover { text-decoration: underline; }
.jd-group-read:disabled { opacity: .5; cursor: default; }
.jd-group-read[data-read="0"]::before { content: "Mark as read"; }
.jd-group-read[data-read="1"]::before { content: "Mark as unread"; color: #64748b; }
.jd-group-h .jd-group-read + .jd-group-view { margin-left: 0; }

/* 2.png 2026-09-17: bell rows say Mark as read / Mark as unread instead of the blue dot; Mark all in the header */
.nbell-readtoggle, .nbell-menu .nbell-readtoggle { width: auto; height: auto; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #1a73e8; }
.nbell-readtoggle:hover { background: #e8f0fe; }
.nbell-readdot { display: none; }
.nbell-item.unread .nbell-readtxt::before { content: "Mark as read"; }
.nbell-item.read .nbell-readtxt::before { content: "Mark as unread"; }
.nbell-item.read .nbell-readtoggle { color: #64748b; }
.nbell-readall { border: 0; background: none; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: #1a73e8; cursor: pointer; }
.nbell-readall:hover { background: #e8f0fe; }
.nbell-readall:disabled { opacity: .5; cursor: default; }
.nbell-readall[hidden] { display: none; }

/* 12.png 2026-09-17: All / Read / Unread pills on the Applicants tab */
.jd-readfilter { display: inline-flex; gap: 6px; margin-right: 6px; }
.jd-rf { border: 1px solid #d5dbe6; background: #fff; color: #334155; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1; }
.jd-rf:hover { background: #f1f5f9; }
.jd-rf.on { background: #e0e7ff; border-color: #c7d2fe; color: #2b50ec; }
.jd-card[hidden], details.jd-group[hidden], .jd-empty[hidden] { display: none; }

/* 14.png 2026-09-17: Forum top-bar dropdown, bell style */
.fnotif[hidden] { display: none; }
.fnotif-top .fnotif-menu { right: -60px; width: 360px; padding: 8px; }
.fn-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 2px; }
.fn-title { font-size: 18px; font-weight: 800; color: #050505; }
.fn-readall { border: 0; background: none; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: #1a73e8; cursor: pointer; }
.fn-readall:hover { background: #e8f0fe; }
.fn-readall:disabled { opacity: .5; cursor: default; }
.fn-readall[hidden] { display: none; }
.fn-tabs { display: flex; gap: 8px; padding: 2px 6px 8px; }
.fn-tab { border: 1px solid #e0e5ee; background: #fff; color: #374151; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.2; }
.fn-tab.on { background: #e0e7ff; border-color: #c7d2fe; color: #2b50ec; }
.fn-list { max-height: 360px; overflow-y: auto; }
.fn-item { display: flex; align-items: center; border-radius: 8px; margin-bottom: 2px; }
.fn-item[hidden] { display: none; }
.fn-item .fn-row { flex: 1; min-width: 0; }
.fn-item.fn-unread { background: #eff6ff; }
.fn-item.fn-unread:hover { background: #e0edff; }
.fn-item.fn-read .fn-text { color: #6b7280; }
.fn-item.fn-unread .fn-row { background: none; }
.fn-readtoggle { flex: none; border: 0; background: none; padding: 4px 8px; margin-right: 4px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; color: #1a73e8; cursor: pointer; white-space: nowrap; }
.fn-readtoggle:hover { background: #e8f0fe; }
.fn-readtoggle:disabled { opacity: .5; cursor: default; }
.fn-item.fn-read .fn-readtoggle { color: #64748b; }
.fn-item.fn-unread .fn-readtxt::before { content: "Mark as read"; }
.fn-item.fn-read .fn-readtxt::before { content: "Mark as unread"; }
.fn-none[hidden] { display: none; }

/* 15.png 2026-09-17: inbox All / Read / Unread pills */
.msg-f-read { display: inline-flex; gap: .35rem; flex-basis: 100%; }
.msg-f-pill { border: 1px solid #d5dbe6; background: #fff; color: #334155; border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.msg-f-pill:hover { background: #f1f5f9; }
.msg-f-pill.on { background: #e0e7ff; border-color: #c7d2fe; color: #2b50ec; }

/* 1.png 2026-09-17: not suitable chip on the job card */
.jd-chip-red { background: #fee2e2; color: #991b1b; }
.jd-chip-red.jd-chip-link:hover { background: #fecaca; }

/* employer dashboard: "switched from X to Y" banner (2026-09-17) */
.jd-switchnote { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #eef2ff; border: 1px solid #c7d2fe; color: #1e3a8a; font-size: 14px; }
.jd-switchnote-x { margin-left: auto; border: 0; background: none; color: #1e3a8a; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.jd-switchnote-x:hover { color: #0b1b6b; }

/* 5.png 2026-09-17: unread count lives inside the Unread pill */
.jd-rf-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #fdf0c2; color: #8a5a00; font-size: 11px; line-height: 18px; text-align: center; font-weight: 800; }
.jd-rf.on .jd-rf-n { background: #fff; }
.jd-readbar[data-unread="0"] .jd-rf-n { background: #eef1f6; color: #64748b; }

/* employer identity bar (2026-09-17): Personal + agency both advertise jobs */
.jd-idbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e7e9f2; }
.jd-idbar-l { font-size: 13px; color: #64748b; margin-right: 4px; }
.jd-idpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid #d5dbe6; background: #fff; color: #334155; font-size: 13px; text-decoration: none; }
.jd-idpill:hover { background: #f1f5f9; }
.jd-idpill.on { background: #e0e7ff; border-color: #c7d2fe; color: #1e3a8a; cursor: default; }
.jd-idpill b { font-weight: 700; }
.jd-idpill-c { color: #64748b; font-size: 12px; }
.jd-idpill.on .jd-idpill-c { color: #3b4d9c; }
.jd-idpill-u { background: #fdf0c2; color: #8a5a00; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; line-height: 16px; }

/* responsive pass 2026-09-17 (1.png): nine notification icons no longer fit beside Categories and the
   account name below ~1100px - give them their own centred row under the logo line */
@media (min-width: 768px) and (max-width: 1179px) {   /* 11 icons since Cart + Favourites (2026-09-17) */
  .hdr-row { flex-wrap: wrap; row-gap: 2px; }
  .hdr-row .hdr-icons { order: 10; flex: 1 1 100%; justify-content: center; gap: 24px; padding: 6px 0 2px; }
  .hdr-row .hdr-icons + .flex-1 { display: block; }   /* pushes the account block right again on the first line */
  body.trendora .td-header-row { flex-wrap: wrap; row-gap: 2px; }
  body.trendora .td-header-row .td-hlinks { margin-left: auto; }
  body.trendora .hdr-icons { order: 10; flex: 1 1 100%; justify-content: center; gap: 24px; padding: 6px 0 2px; }
}
/* applicant job group header on phones: title takes the line, actions drop under it instead of sticking out */
@media (max-width: 560px) {
  .jd-group-h { flex-wrap: wrap; row-gap: 6px; }
  .jd-group-title { flex: 1 1 60%; min-width: 0; }
  .jd-group-h .jd-group-read { margin-left: 0; }
  .jd-group-h .jd-group-view { margin-left: auto; }
}
/* forum tab strip: wrap instead of a hidden horizontal scroll */
body .forum-tabs { flex-wrap: wrap; overflow-x: visible; }

.nbell-ic-badge.itemoffer { background: #f59e0b; } .nbell-ic-badge.watch { background: #ef4444; }

/* top-bar Cart / Favourites (2026-09-17): red count badges like the bell (2.png) */

/* Gavel icon (9.png 2026-09-17): sold items + outbids, bell-style dropdown */
.nbell.nbell-gavel[hidden] { display: none; }
.nbell-ic-gavel { width: 22px; height: 22px; }
.nbell-ic-badge.outbid { background: #dc2626; }

/* the Messages envelope is not a .td-nlink: give it the same orange hover as the other header icons (user 2026-09-17) */
.td-msg:hover, .mdrop-btn:hover, a.s468:hover { color: #f0960a; }

/* compact-2 "Three groups" header (2026-09-17): same icon boxes, icon size and badge position as the mock */
.hdr-icons { gap: 24px; }   /* more room between the icons (user 2026-09-17) */
.hdr-icons > a, .hdr-icons .td-msg, .hdr-icons .mdrop-btn, .hdr-icons .nbell-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }   /* a bit bigger (user 2026-09-17) */
.hdr-icons > a[hidden], .hdr-icons .td-msg[hidden], .hdr-icons .mdrop-btn[hidden], .hdr-icons .nbell-btn[hidden] { display: none; }   /* the inline-flex above must not resurrect a hidden icon: guests saw the envelope (3.png 2026-09-18) */
.hdr-icons .hdr-svg, .hdr-icons .nbell-ic { width: 26px; height: 26px; }
.hdr-icons .nbell-ic-fa { width: 24px; height: 24px; }
.hdr-icons .nbell { margin-left: 0; }
.hdr-icons .s470, .hdr-icons .nbell-badge { top: -2px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font: 600 11px/17px system-ui, sans-serif; text-align: center; }
.hdr-icons .td-nlink-ico { position: static; }
.nbell.nbell-box[hidden] { display: none; }
.nbell-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 8px; }
.nbell-chip { border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 10px; font: 600 12px system-ui, sans-serif; color: #374151; background: #fff; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.nbell-chip.on { background: #e0e7ff; border-color: #c7d2fe; color: #2b50ec; }
.nbell-chip-n { background: #fdf0c2; color: #8a5a00; border-radius: 999px; padding: 0 6px; font-size: 11px; line-height: 16px; }
.nbell-chip.on .nbell-chip-n { background: #fff; }
.nbell-box .nbell-menu { width: 470px; max-width: 94vw; }   /* wider activity dropdown (user 2026-09-17) */

/* 2.png: the inline header icons need a size outside .hdr-icons too (phone header) */
.hdr-svg { width: 24px; height: 24px; }
.md\:hidden .relative.s468:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }   /* never resurrect a hidden per-kind icon */
.nbell-none { padding: 18px 10px; text-align: center; color: #9ca3af; font-size: 13px; }
.nbell-none[hidden] { display: none; }

/* 15.png 2026-09-17: tick rows in a dropdown, act on the selection from the bar above "See all" */
.nbell-sel { flex: none; align-self: center; display: inline-flex; padding: 0 2px 0 6px; cursor: pointer; }
.nbell-sel-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #1a73e8; }
.nbell-selbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 6px; border-top: 1px solid #e5e7eb; background: #f8fafc; font-size: 13px; color: #374151; }
.nbell-selbar[hidden] { display: none; }
.nbell-selbar-n { margin-right: auto; }
.nbell-selbar-btn { border: 1px solid #c7d2fe; background: #e0e7ff; color: #2b50ec; border-radius: 999px; padding: 5px 12px; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.nbell-selbar-btn:hover { background: #c7d2fe; }
.nbell-selbar-btn:disabled { opacity: .5; cursor: default; }
.nbell-selbar-x { border: 0; background: none; font-size: 18px; line-height: 1; color: #64748b; cursor: pointer; padding: 0 4px; }

/* /notifications "See all" page (1.png 2026-09-17): the dropdown, static and full width */
.nbell-page { display: block; margin: 0; }
.nbell-page .nbell-menu, .nbell-page.nbell .nbell-menu { display: block; position: static; transform: none; left: auto; right: auto; width: 100%; max-width: none; box-shadow: none; padding: 14px; }
.nbell-page .nbell-scroll.nbell-pagescroll { max-height: none; overflow: visible; }
.nbell-pagetabs { display: flex; gap: 6px; margin: 0 0 10px; border-bottom: 1px solid #e5e7eb; padding: 0 6px 8px; }
.nbell-pagetab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #374151; text-decoration: none; }
.nbell-pagetab:hover { background: #f1f5f9; }
.nbell-pagetab.on { background: #e0e7ff; color: #2b50ec; }
.nbell-page .nbell-title { font-size: 24px; }

/* cart review (user 2026-09-17): quantity stepper, Remove, dropdown pickers, per-seller order button */
.co-line-q { display: inline-flex; align-items: center; gap: 6px; color: #64748b; }
.co-qty { display: inline-flex; align-items: center; border: 1px solid #d5dbe6; border-radius: 8px; overflow: hidden; }
.co-qty-b { width: 28px; height: 28px; border: 0; background: #f8fafc; color: #334155; font-size: 16px; cursor: pointer; }
.co-qty-b:hover { background: #e2e8f0; }
.co-qty-n { min-width: 28px; text-align: center; font-size: 14px; color: #1f2937; }
.co-remove { border: 0; background: none; color: #dc2626; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.co-remove:hover { background: #fee2e2; }
.co-sel { position: relative; display: block; max-width: 520px; }
.co-select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid #d5dbe6; border-radius: 8px; background: #fff; padding: 9px 40px 9px 12px; font: inherit; font-size: 14px; color: #1f2937; cursor: pointer; }
.co-select:focus { outline: 2px solid #c7d2fe; border-color: #a5b4fc; }
.co-sel-arrow { position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.co-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-only { margin-left: auto; border: 1px solid #16a34a; background: #fff; color: #15803d; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.co-only:hover { background: #dcfce7; }
.buy-facts { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e7eb; display: grid; gap: 4px; font-size: 13px; }
.buy-fact { display: flex; gap: 8px; }
.buy-fact-k { color: #64748b; min-width: 64px; }
.buy-fact-v { color: #1f2937; }

/* compact cart (user 2026-09-18): tighter cards, delivery + payment side by side, one note at the bottom */
.co-seller { padding: 10px 12px; margin-bottom: 10px; }
.co-seller-h { margin-bottom: 4px; font-size: 14px; }
.co-line { padding: 3px 0; font-size: 13.5px; }
.co-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.co-picks .co-pick { margin-top: 0; }
.co-pick-h { font-size: 12px; margin-bottom: 4px; }
.co-select { padding: 7px 34px 7px 10px; font-size: 13px; }
.co-combined { margin: 4px 0; padding: 4px 8px; font-size: 12px; }
.co-sub { margin-top: 8px; font-size: 12.5px; }
.co-only { padding: 5px 10px; font-size: 12.5px; }
.co-qty-b { width: 24px; height: 24px; font-size: 14px; }
.co-qty-n { min-width: 24px; font-size: 13px; }
@media (max-width: 640px) { .co-picks { grid-template-columns: 1fr; } }

/* 1.png 2026-09-18: seller cards greyish like the page background outside the form */
.co-seller { background: #f7f8fa; border-color: #e4e9f0; }
.co-seller .co-select { background: #fff; }
.co-qty-b:disabled { opacity: .4; cursor: not-allowed; }

/* user 2026-09-18: more gap between the seller cards in the cart */
.co-seller { margin-bottom: 20px; }
.co-seller + .co-seller { margin-top: 0; }

/* Buy Now popup (user 2026-09-18) */
.bn-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.bn-modal[hidden] { display: none; }
.bn-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.bn-host { position: relative; width: calc(100% - 32px); max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; }
.bn-box { position: relative; background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 18px 50px rgba(15,23,42,.25); }
.bn-loading { text-align: center; color: #64748b; padding: 40px; }
.bn-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; color: #64748b; cursor: pointer; }
.bn-close:hover { color: #111827; }
.bn-h { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 12px; }
.bn-item { background: #f7f8fa; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.bn-item-t { font-weight: 600; color: #111827; }
.bn-item-v { margin-left: 6px; font-size: 12px; color: #64748b; font-weight: 500; }
.bn-item-q { font-size: 13px; color: #5b6472; margin-top: 2px; }
.bn-soldout { background: #fee2e2; color: #b91c1c; font-weight: 600; border-radius: 8px; padding: 12px; text-align: center; }
.bn-sec { margin-bottom: 12px; }
.bn-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-addr { margin-bottom: 6px; }
.bn-addr-add, .bn-noaddr a { font-size: 12.5px; color: #1558d6; }
.bn-noaddr { font-size: 13px; color: #b91c1c; }
.bn-note { width: 100%; box-sizing: border-box; border: 1px solid #d5dbe6; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.bn-sum { border-top: 1px solid #e5e7eb; padding-top: 10px; margin-bottom: 12px; font-size: 14px; color: #374151; }
.bn-sum > div { display: flex; justify-content: space-between; padding: 2px 0; }
.bn-sum-total { font-size: 16px; color: #111827; border-top: 1px dashed #e5e7eb; margin-top: 4px; padding-top: 6px; }
.bn-actions { display: flex; gap: 10px; justify-content: flex-end; }
.bn-cancel { background: #e5e7eb; color: #374151; border: 0; border-radius: 8px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.bn-cancel:hover { background: #d1d5db; }
.bn-buy { min-width: 180px; }
.bn-buy:disabled { opacity: .5; cursor: not-allowed; }
.bn-note-pay { font-size: 12px; color: #64748b; margin-top: 10px; }
@media (max-width: 520px) { .bn-picks { grid-template-columns: 1fr; } .bn-box { padding: 18px 16px; } }
/* a cart line whose item sold out meanwhile */
.co-line.co-gone .co-line-t { color: #9ca3af; text-decoration: line-through; }
.co-soldout { background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.osp-buyer-note { background: #fff8e6; border: 1px solid #f5e1a4; color: #6b4e00; border-radius: 6px; padding: 6px 10px; font-size: 13px; margin: 6px 0; }

/* shipping per quantity (user 2026-09-18): "Each extra item" column + cart delivery lines */
.ship-edit-5col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .ship-edit-5col { grid-template-columns: 1fr 1fr; } }
.ship-extra-hint, .lc-ship-extrahint { font-size: 12.5px; color: #5b6472; margin: 8px 0 10px; }
.co-ship-sum { color: #5b6472; }
.co-sums { display: flex; justify-content: flex-end; gap: 18px; color: #5b6472; font-size: 14px; margin-bottom: 4px; }
@media (max-width: 760px) { .lc-ship-rowhead { display: none; } .lc-ship-row { grid-template-columns: 1fr 1fr; } }

/* Web Push button (2026-09-18) */
.nbell-top { flex-wrap: wrap; gap: 6px 10px; }
.nbell-push { font-size: 12px; font-weight: 600; color: #1b9dc4; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.nbell-push[data-state="on"] { color: #15803d; background: #ecfdf5; border-color: #a7f3d0; }
.nbell-push[data-state="denied"] { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
.nbell-push[data-state="ios"] { color: #92400e; background: #fffbeb; border-color: #fde68a; }

/* one-tap notification nudge on phones (2026-09-18) */
.push-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #7c2d12; padding: 8px 12px; font-size: 13.5px; line-height: 1.35; }
.push-nudge-t { flex: 1 1 220px; }
.push-nudge-on { background: #f59e0b; color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.push-nudge-on[disabled] { opacity: .6; }
.push-nudge-later { background: transparent; border: 1px solid #fdba74; color: #7c2d12; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }

/* marketcity logo in the headers (2026-09-19) */
.site-logo { height: 34px; width: auto; display: block; }
.td-logo .site-logo { height: 32px; }
.site-logo-m { height: 30px; margin: 0 auto; }
body.pwa-off .nbell-push, body.pwa-off .push-nudge { display: none; }

/* envelope dropdown: account email / business name under each identity (2026-09-19) */
.mdrop-row > span { display: flex; flex-direction: column; }
.mdrop-co { display: block; color: #6b7280; font-size: 12px; font-weight: 400; font-style: normal; }

/* expired listings: bulk delete (2026-09-19) */
.exp-bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 14px; }
.exp-bulk-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #111827; cursor: pointer; }
.exp-bulk-all input { width: 20px; height: 20px; cursor: pointer; accent-color: #2563eb; }
.exp-bulk-form { margin: 0; }
.exp-bulk-btn { display: inline-flex; align-items: center; gap: 6px; background: #dc2626; color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.exp-bulk-btn:hover { background: #b91c1c; }
.exp-bulk-btn[disabled] { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.exp-bulk-hint { font-size: 12px; color: #6b7280; }
.exp-count { margin-left: auto; font-size: 14px; color: #6b7280; }
.exp-msg { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.exp-pickcol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 48px; flex-shrink: 0; background: #fff; border-right: 1px solid #eee; cursor: pointer; }
.exp-pickcol input { width: 20px; height: 20px; cursor: pointer; accent-color: #2563eb; }
.exp-pick-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #9ca3af; text-transform: uppercase; }
.osp-await-status { flex-basis: 100%; order: 99; margin: 2px 0 0; }
.exp-pick-sold input { cursor: not-allowed; opacity: .4; }
.osp-history-note { font-size: 12px; color: #6b7280; margin: 6px 0 12px; }

.osp-flash { animation: ospFlash 1.2s ease-out; }
@keyframes ospFlash { from { box-shadow: 0 0 0 3px #bfdbfe; } to { box-shadow: 0 0 0 0 transparent; } }

/* bell chips: tighter, chips with nothing hidden (1.png 2026-09-19) */
.nbell-chips { gap: 4px 5px; padding: 0 6px 6px; }
.nbell-chip { padding: 3px 8px; font-size: 11px; }
.nbell-chip-zero { display: none; }

/* 3.png: both account CTA tabs the same size */
.acct-store-cta { color: #0984e3; font-weight: 700; border: 1px solid #0984e3; border-radius: 8px; background: #fff; margin: 7px 10px; padding: 6px 16px; }
.acct-store-cta:hover { background: #eef6ff; }
/* store settings: create form for the personal account (2.png) */
.msf-create { max-width: 640px; }
.msf-create-h { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.msf-create-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.msf-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #374151; }
.msf-field input { font-weight: 400; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; }
.msf-addr { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.msf-addr-pre { background: #f3f4f6; color: #6b7280; padding: 9px 10px; font-size: 13px; font-weight: 400; white-space: nowrap; }
.msf-addr input { border: 0; flex: 1; border-radius: 0; }
.msf-create-form .msf-save { align-self: flex-start; }
.st-soon { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: 10px; padding: 14px 16px; margin: 12px 0 24px; font-size: 14px; }
.st-soon a { color: #1d4ed8; margin-left: 6px; }

/* 5.png 2026-09-19: compact "Send the item" step on Sold: one row (label, tracking number, Mark as sent, Cancel) + a one-line hint */
.osp-send-compact { width: auto; flex: 0 1 auto; border: 0; background: none; padding: 0; }
.osp-send-compact .osp-send-form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.osp-send-compact .osp-track-wide { width: 210px; }
.osp-send-compact .osp-send-hint { font-size: 12px; margin-top: 3px; }
.osp-status-section, .osp-actions { align-items: flex-start; }
.osp-status-label { min-height: 36px; }
/* 2.png: every bell chip stays visible; a zero count is shown muted */
.nbell-chip-zero { display: inline-flex; }
.nbell-chip-0 .nbell-chip-n { background: #f3f4f6; color: #6b7280; }
.nbell-chip-0 { color: #6b7280; }
.osp-send-compact .osp-track-wide { width: 180px; }
.osp-status-section { gap: 8px 12px; }
.osp-status-section, .osp-actions { align-items: center; }
.osp-status-label { min-height: 0; }

/* 10.png 2026-09-19: dropdown list measured at its natural width before it is sized */
.ns-list.ns-measure { width: max-content; max-height: none; visibility: hidden; }
.ns-list.ns-measure .ns-item { overflow: visible; text-overflow: clip; }

/* 22.png 2026-09-19: home cards fill the picture box (the whole-photo rule stays for the other grids) */
.hm-card .s320 .s185 { object-fit: cover; }
/* 23.png: Load more under Latest listings */
.hm-more { display: block; width: 100%; margin: 18px 0 4px; padding: 12px 16px; font: 600 15px system-ui, sans-serif; color: #fff; background: #f7a531; border: 0; border-radius: 8px; cursor: pointer; }
.hm-more:hover { background: #ef951b; }
.hm-more:disabled { opacity: .7; cursor: default; }
/* 21.png: store web address check */
.msf-avail-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
.msf-check { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; }
.msf-check:hover { background: #f3f4f6; }
.msf-avail { font-size: 13px; color: #6b7280; }
.msf-avail.ok { color: #15803d; }
.msf-avail.err { color: #b91c1c; }

/* search page Load more (2026-09-19): same orange as Save search */
.sp-more { display: block; width: 100%; margin: 18px 0 6px; padding: 12px 16px; font: 600 15px system-ui, sans-serif; color: #fff; background: #fca626; border: 0; border-radius: 8px; cursor: pointer; }
.sp-more:hover { background: #f39a12; }
.sp-more:disabled { opacity: .7; cursor: default; }
.sp-more[hidden], .hm-more[hidden] { display: none; }

/* ===== property + motor detail pages like the property template (2026-09-19): brand band, no borders, template sidebar ===== */
.pd-brandtop { display: flex; align-items: center; gap: 12px; background: var(--brand, #14264c); color: #fff; border-radius: 12px; padding: 13px 20px; margin: 0 0 16px; }
.pd-brandtop-logo { background: #fff; border-radius: 9px; padding: 4px 8px; display: inline-flex; align-items: center; }
.pd-brandtop-logo img { max-height: 36px; max-width: 150px; object-fit: contain; display: block; }
.pd-brandtop-chip { width: 44px; height: 44px; border-radius: 9px; background: #f7a600; color: var(--brand, #14264c); font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.pd-brandtop-name { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.pd-brandtop-tag { margin-left: auto; font-size: 12.5px; opacity: .85; }
/* gallery without the card frame */
.pd-page .pd-gallery, .md-page .pd-gallery { background: none; border: 0; padding: 0; box-shadow: none; }
.pd-page .s336, .md-page .s336 { height: 460px; border-radius: 12px; }
.pd-page .s337, .md-page .s337 { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pd-page .s338, .md-page .s338 { height: 92px; border-radius: 8px; }
.pd-page .s341, .md-page .s341 { font-size: 27px; line-height: 1.25; color: #16213a; margin: 20px 0 6px; }
.pd-page .pd-loc-top { font-size: 16px; color: #4a5361; margin: 0 0 14px; }
.pd-page .pd-facts { gap: 10px; margin: 0 0 16px; }
.pd-page .pd-fact b { color: var(--brand, #14264c); }
.pd-price { display: block; background: #fff; border-left: 5px solid #f7a600; border-radius: 10px; padding: 14px 18px; font-size: 20px; font-weight: 800; color: #16213a; margin: 0 0 18px; box-shadow: 0 1px 4px rgba(20,30,60,.06); }
.pd-price small { display: block; font-weight: 600; font-size: 12.5px; color: #6a7482; margin-top: 2px; }
.pd-page .pd-openhomes { gap: 8px; margin: 0 0 6px; }
.pd-page .pd-oh { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 13px 16px; font-size: 14.5px; display: flex; gap: 10px; align-items: center; color: #23272f; }
.pd-page .pd-oh-lbl { color: var(--brand, #14264c); }
.pd-page .pd-oh-day { min-width: 0; font-weight: 400; }
.pd-page .pd-oh-note { font-size: 12.5px; color: #8a94a0; margin: 4px 0 0; }
.pd-page .s349, .pd-page .s352 { border: 0; }
.pd-page .s350, .md-page .s350 { font-size: 18px; color: #16213a; margin: 24px 0 10px; }
.pd-page .s351 { line-height: 1.65; font-size: 15px; }
.pd-feats { columns: 2; gap: 26px; padding-left: 20px; margin: 0; }
.pd-feats li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.4; break-inside: avoid; }
.pd-meta { color: #8a94a0; font-size: 12.5px; margin-top: 22px; }
/* sidebar card (template .card) */
.pd-page .s354, .md-page .s354 { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(20,30,60,.08); overflow: hidden; padding: 0 16px 16px; }
.pd-page .biz-band, .md-page .biz-band { margin: 0 -16px 12px; border-radius: 0; background: linear-gradient(135deg, var(--brand, #14264c), color-mix(in srgb, var(--brand, #14264c) 70%, #3a5da8)); padding: 14px 16px; }
.pd-page .biz-card-banded, .md-page .biz-card-banded { border: 0; padding: 0 0 10px; margin: 0; }
.pd-page .biz-type, .md-page .biz-type { color: var(--brand, #14264c); font-weight: 700; font-size: 13px; }
.pd-page .agents-row-two, .md-page .agents-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-page .agents-row-two .agent-card, .md-page .agents-row-two .agent-card { background: #f7f9fc; border: 1px solid #edf1f7; border-radius: 10px; padding: 13px 8px; gap: 6px; }
.pd-page .agent-card-name, .md-page .agent-card-name { font-size: 14px; }
.pd-page .agent-card-role, .md-page .agent-card-role { font-size: 11.5px; color: #6a7482; }
.pd-page .agent-card-call, .md-page .agent-card-call { color: var(--brand, #14264c); font-weight: 800; font-size: 13.5px; }
.pd-page .agent-card-lic, .md-page .agent-card-lic, .pd-page .agent-card-agency, .md-page .agent-card-agency { font-size: 10.5px; color: #8a94a0; line-height: 1.4; }
.pd-page .agent-msg-btn, .md-page .agent-msg-btn { background: #fff; color: var(--brand, #14264c); border: 1px solid var(--brand, #14264c); padding: 5px 10px; font-size: 12.5px; }
.pd-cta { display: block; width: 100%; text-align: center; background: #f7a600; color: #16213a; font-weight: 800; border: 0; border-radius: 9px; padding: 12px; margin-top: 12px; text-decoration: none; cursor: pointer; font-size: 14px; }
.pd-cta:hover { background: #e89a00; }
.pd-cta-alt { background: #fff; border: 2px solid var(--brand, #14264c); color: var(--brand, #14264c); padding: 10px; }
.pd-cta-alt:hover { background: #f4f6f9; }
.pd-page .biz-rea-foot, .md-page .biz-rea-foot { text-align: center; font-size: 11.5px; color: #6a7482; }
.biz-color-row { display: flex; align-items: center; gap: 12px; }
.biz-color { width: 56px; height: 36px; border: 1px solid #cfd6df; border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }
@media (max-width: 760px) { .pd-page .s336, .md-page .s336 { height: 300px; } .pd-page .s337, .md-page .s337 { grid-template-columns: repeat(3, 1fr); } .pd-feats { columns: 1; } .pd-brandtop-tag { margin-left: 0; flex-basis: 100%; } .pd-brandtop { flex-wrap: wrap; } }
.pd-feats { list-style: disc; }
.md-page .pd-price { margin: 0 0 16px; }

/* 1.png 2026-09-19: gallery in the left column, card beside it; the card column sticks while the page scrolls */
.pd-gallery-incol { margin: 0 0 6px; }
.pd-page .pd-gallery-incol .s336, .md-page .pd-gallery-incol .s336 { height: 460px; }
@media (max-width: 760px) { .pd-page .listing-right-col, .md-page .listing-right-col { position: static; } }
.md-page .listing-right-col .pd-watch-form { order: -2; }
.md-page .listing-right-col .s354 { order: -1; }
/* 2.png: band fully inside the card, nothing sticky */
.pd-page .listing-right-col .s354 > .biz-band, .md-page .listing-right-col .s354 > .biz-band, .pd-page .s354 .biz-band, .md-page .s354 .biz-band { margin: 0 -16px 12px; padding: 14px 16px; }
.pd-page .listing-right-col, .md-page .listing-right-col { position: static; }
.pd-page .biz-band-chip, .md-page .biz-band-chip { width: 36px; height: 36px; border-radius: 8px; background: #f7a600; color: var(--brand, #14264c); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
/* 1.png: a single agent fills the card width, same look as the side-by-side cards */
.pd-page .agents-row-one .agent-card, .md-page .agents-row-one .agent-card { flex-direction: column; align-items: center; text-align: center; background: #f7f9fc; border: 1px solid #edf1f7; border-radius: 10px; padding: 13px 8px; gap: 6px; }
.pd-page .agents-row-one .agent-card-photo, .md-page .agents-row-one .agent-card-photo { width: 64px; height: 64px; flex-basis: auto; margin-bottom: 6px; }
/* 1.png 2026-09-19: undo a mistaken "paid" + picked-up option */
.osp-undo-form { display: inline; margin-left: 8px; }
.osp-undo { background: none; border: 0; padding: 0; color: #1b9dc4; font-size: 12px; text-decoration: underline; cursor: pointer; }
.osp-undo:hover { color: #1789ac; }
.osp-pill-delivered { background: #2d9d5c; }

/* 5.png 2026-09-19: mobile account panel (right-hand hamburger) */
.mob-acct { border-top: 1px solid #e5e7eb; padding: 8px 4px 10px; }
.mob-acct-me { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid #eef1f5; margin-bottom: 4px; }
.mob-acct-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #eef1f5; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.mob-acct-av.sm { width: 34px; height: 34px; }
.mob-acct-ph svg { width: 60%; height: 60%; color: #9aa3ad; }
.mob-acct-ph.biz svg { color: #2f6df6; }
.mob-acct-who { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.mob-acct-who b { font-size: 15px; color: #16213a; }
.mob-acct-who small, .mob-acct-row small { display: block; font-size: 12px; color: #6b7280; }
.mob-acct-edit { font-size: 12.5px; color: #1b9dc4; text-decoration: none; white-space: nowrap; }
.mob-acct-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; text-align: left; padding: 10px 10px 4px; }
.mob-acct-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; text-decoration: none; color: #16213a; border-radius: 8px; text-align: left; }
.mob-acct-row b { font-size: 14px; font-weight: 600; }
.mob-acct-row.on { background: #eef6ff; }
.mob-acct-cur { margin-left: auto; font-size: 11px; font-weight: 700; color: #1d4ed8; }
.mob-acct-link { display: block; padding: 8px 10px; text-align: left; text-decoration: none; color: #374151; font-size: 14.5px; }
.mob-acct-link:hover, .mob-acct-row:hover { background: #f5f7fa; }
/* 12.png: dashboard side menu collapsed on phones */
.sb-mob-toggle { display: none; }
@media (max-width: 767px) {
  .sb-mob-toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 11px 14px; font: 600 15px system-ui, sans-serif; color: #16213a; cursor: pointer; margin-bottom: 8px; }
  .sb-mob-toggle .sb-mob-cur { color: #6b7280; font-weight: 500; }
  .sb-mob-toggle .sb-mob-car { margin-left: auto; color: #6b7280; }
  .sb-mob-toggle + .s495 { display: none; }
  .sb-mob-toggle + .s495.sb-open { display: block; }
}
/* 10.png 2026-09-19: "Send the item" dropdown + the confirm form it reveals, all on one row */
.osp-send-compact.osp-next { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.osp-next-sel { height: 36px; border: 1px solid #cfd6df; border-radius: 6px; padding: 0 30px 0 10px; font-size: 13px; background-color: #fff; color: #333; min-width: 170px; }
.osp-next form[hidden] { display: none; }
.sb-mob-toggle[hidden] { display: none; }
.mob-acct-cnt { color: #6b7280; opacity: .8; }

/* 6.png 2026-09-19: the account panel is a drawer sliding in from the right (marketplacenz.co.nz style) */
.mob-acct { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: #fff; z-index: 10000; border-top: 0; padding: 0 8px 24px; overflow-y: auto; box-shadow: -4px 0 18px rgba(0,0,0,.18); transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; text-align: left; }
body.mob-acct-open .mob-acct { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
.mob-acct-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.mob-acct-open .mob-acct-back { opacity: 1; pointer-events: auto; }
body.mob-acct-open { overflow: hidden; }
.mob-acct-top { display: flex; align-items: center; gap: 10px; padding: 10px 4px 10px 0; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; z-index: 1; }
.mob-acct-x { font-size: 26px; line-height: 1; background: none; border: 0; padding: 2px 10px; color: #374151; cursor: pointer; }
.mob-acct-topname { font-weight: 700; font-size: 15px; color: #16213a; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-acct-out { color: #1b9dc4; text-decoration: none; font-weight: 600; font-size: 14px; padding: 4px 8px; }
@media (min-width: 768px) { .mob-acct, .mob-acct-back { display: none; } }

/* 10.png 2026-09-19: mobile header = logo left, account control right */
.mob-logo { display: inline-flex; align-items: center; }
.mob-logo img { height: 24px; width: auto; }
.mob-acct-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 600; color: #374151; max-width: 120px; padding: 6px 4px; }
.mob-acct-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-acct-car { font-size: 11px; color: #6b7280; }
.mob-acct-post { display: block; margin: 10px 4px 4px; padding: 10px; text-align: center; background: #f97316; color: #fff; font-weight: 700; border-radius: 8px; text-decoration: none; }
/* 7.png: quantity left / list a similar item on the Sold card */
.osp-left { display: inline-block; margin-left: 8px; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.osp-similar-form { display: inline; margin-left: 8px; }
.osp-similar { background: #fff; border: 1px solid #1b9dc4; color: #1b9dc4; border-radius: 6px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.osp-similar:hover { background: #eef8fb; }
.osp-soldas { font-size: 12.5px; color: #6b7280; margin: 2px 0 6px; }
.osp-soldas b { color: #16213a; font-weight: 600; }
/* 2.png: the "Post ad free" menu entry in a thin outlined pill */
.mob-acct-link.mob-acct-pill { display: inline-block; border: 1px solid #f97316; color: #f97316; border-radius: 999px; padding: 6px 14px; margin: 6px 10px 4px; font-weight: 600; }
.mob-acct-link.mob-acct-pill:hover { background: #fff7ed; }
/* 1.png: no dashboard side menu on phones (the drawer has it) */
@media (max-width: 767px) { .s495 { display: none; } }
/* 1.png: gap between Buy Now and Add to cart */
.buy-box form.s178 { margin-top: 8px; }
.buy-box a.buy-now-link { display: block; text-align: center; box-sizing: border-box; text-decoration: none; }
.buy-box a.buy-now-link + a.buy-now-link { margin-top: 8px; }
/* user 2026-09-19: bigger text on the Sold account pills */
.jd-idpill, .jd-idpill b { font-size: 15px; }
.jd-idpill .jd-idpill-u { font-size: 12px; }
/* 1.png: Sold account pills, small and plain */
.jd-idpill, .jd-idpill b { font-size: 13px; font-weight: 400; }
.jd-idpill.on b { font-weight: 600; }
/* 3.png: desktop logo twice the size */
.site-logo { height: 68px; }
.td-logo .site-logo { height: 64px; }
/* 3.png 2026-09-19: wordmark and star mark sized separately per device (values from Admin > Settings via :root vars) */
.td-logo, .mob-logo, .s481 { display: inline-flex; align-items: center; gap: 8px; }
.site-logo.site-logo-text, .td-logo .site-logo-text, .mob-logo .site-logo-text { height: var(--logo-text-h, 48px); width: auto; }
.site-logo.site-logo-mark, .td-logo .site-logo-mark, .mob-logo .site-logo-mark { height: var(--logo-mark-h, 34px); width: auto; }
.s467 { display: inline-flex; align-items: center; gap: 8px; }
.osp-undo-form.osp-undo-back { margin-left: 0; }
/* account activation by email (2026-09-20) */
.act-check { text-align: center; }
.act-check-ic { color: #2563eb; margin-bottom: 8px; }
.act-check-ic svg { width: 44px; height: 44px; }
.act-check-p { font-size: 15px; color: #1f2937; margin: 10px 0; }
.act-muted { color: #6b7280; font-size: 14px; }
.act-link { color: #2563eb; text-decoration: underline; }
.act-resend { margin: 14px 0; }
.act-resend-btn { background: none; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 14px; font-size: 14px; color: #1e3a8a; cursor: pointer; }
.act-resend-btn:hover { background: #f1f5f9; }
/* guest support tickets (2026-09-20) */
.sup-guest-note { font-size: 14px; color: #4b5563; margin: 0 0 12px; line-height: 1.5; }
.sup-link { color: #2563eb; text-decoration: underline; }
.sup-captcha { margin: 12px 0; }
.sup-guest-bar { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
/* guest ticket: confirm-your-email panel + pending page (2026-09-20) */
.sup-guest-done { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 22px 20px; text-align: center; color: #1f2937; font-size: 15px; line-height: 1.55; }
.sup-guest-done[hidden], #supGuestForm[hidden], .sup-guest-err[hidden] { display: none; }
.sup-guest-done-h { font-size: 18px; font-weight: 700; margin: 6px 0 8px; color: #1e3a8a; }
.sup-pending { max-width: 560px; margin: 24px auto; text-align: center; }
.sup-pending-ic { color: #2563eb; }
.sup-pending-ic svg { width: 40px; height: 40px; }
.sup-pending-p { font-size: 15px; color: #1f2937; margin: 10px 0; line-height: 1.5; }
.sup-muted { color: #6b7280; font-size: 14px; }
/* recent searches under the home search box (1.png 2026-09-21) */
.rs-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 4px; font-size: 13px; font-weight: 700; color: #374151; }
.rs-clear { background: none; border: 0; color: #2563eb; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.rs-clear:hover { text-decoration: underline; }
.rs-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; text-decoration: none; color: #111827; font-size: 15px; }
.rs-row:hover { background: #f3f4f6; }
.rs-ic { width: 18px; height: 18px; color: #6b7280; flex: 0 0 18px; }
.rs-q { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-cat { color: #6b7280; font-size: 13px; white-space: nowrap; }
.rs-new { margin-left: auto; background: #dcfce7; color: #166534; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 9px; line-height: 18px; }
.rs-nobadge .rs-x { margin-left: auto; }
.rs-x { background: none; border: 0; color: #9ca3af; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.rs-x:hover { color: #111827; }
.lg\:hidden.flex-col { position: relative; }
.rs-menu-m { top: 100%; left: 0; right: 0; border-top: 1px solid #ddd; border-radius: 12px; margin-top: 4px; }
/* search-term suggestions while typing (2.png 2026-09-21) */
.rs-q-typed { font-weight: 400; }
.rs-q-typed b { font-weight: 700; }
.rs-term .rs-ic { color: #374151; }
/* "Today's picks" (2026-09-21) */
.hm-picks-sub { text-align: center; color: #6b7280; font-size: 14px; margin: -8px 0 14px; }
.hm-picks-sub[hidden] { display: none; }
.ovs-warn { max-width: 72rem; margin: 10px auto 0; padding: 10px 16px; background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; border-radius: 8px; font-size: 14px; }
/* 1.png 2026-09-21: menu links indented under their group heading */
.idsw-acct-menu .idsw-link, .idsw-menu .idsw-link { padding-left: 24px; }
.idsw-menu .idsw-h { padding-left: 12px; }
.mob-acct-link { padding-left: 28px; }
.mob-acct-link.mob-acct-pill { margin-left: 28px; padding-left: 14px; }
/* /watchlist professional pass (2026-09-21) */
.wl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.wl-h1 { font-size: 24px; font-weight: 700; color: #111827; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.wl-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 14px; font-weight: 700; }
.wl-sub { color: #6b7280; font-size: 14px; margin: 0; }
.wl-clear-btn { height: 36px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wl-clear-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.wl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.wl-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #374151; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.wl-chip b { font-weight: 700; color: #6b7280; }
.wl-chip:hover { border-color: #c7d2fe; }
.wl-chip.on { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.wl-chip.on b { color: #c7d2fe; }
.wl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wl-card { position: relative; transition: opacity .2s, transform .2s; }
.wl-card[hidden] { display: none; }
.wl-gone { opacity: 0; transform: scale(.96); }
.wl-ended .s320 img { filter: grayscale(1); opacity: .75; }
.wl-ended .s322, .wl-ended .s326 { color: #6b7280; }
.wl-ribbon { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: #374151; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.wl-ribbon-auc { background: #f97316; }
.wl-auc-meta { font-size: 12.5px; color: #6b7280; margin: 2px 0 0; }
.wl-added { font-size: 12px; color: #9ca3af; margin: 6px 0 0; }
.wl-empty { text-align: center; padding: 48px 16px; border: 1px dashed #e5e7eb; border-radius: 12px; color: #6b7280; }
.wl-empty h2 { font-size: 18px; font-weight: 700; color: #111827; margin: 8px 0 6px; }
.wl-empty p { font-size: 14px; max-width: 440px; margin: 0 auto 14px; }
.wl-empty-ic { color: #f43f5e; }
.wl-empty-ic svg { width: 40px; height: 40px; }
.wl-empty-filter { padding: 28px 16px; }
.wl-empty-filter[hidden] { display: none; }
.wl-btn { display: inline-block; padding: 10px 18px; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 600; text-decoration: none; font-size: 14px; }
@media (max-width: 1023px) { .wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wl-grid { grid-template-columns: 1fr; } }
/* 5.png 2026-09-21: group headings in the account menus on a light grey band */
.idsw-acct-menu .idsw-h { background: #f3f4f6; color: #4b5563; margin: 4px -6px 2px; padding: 7px 18px 6px; }
.idsw-acct-menu .idsw-h:first-child { margin-top: -6px; border-radius: 12px 12px 0 0; }
.mob-acct-h { background: #f3f4f6; color: #4b5563; padding: 8px 10px 6px; }
/* Free stuff price option (2026-09-21) */
.lc-free-opt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid #86efac; background: #f0fdf4; border-radius: 8px; font-size: 14px; color: #166534; cursor: default; margin: 4px 0 2px; }
.lc-free-opt input { accent-color: #16a34a; }
/* character counters under text fields (2026-09-22) */
.fl-count { display: block; text-align: right; font-size: 11.5px; color: #9ca3af; margin: 2px 0 0; line-height: 1.2; }
.fl-count.fl-near { color: #b45309; }
.fl-count.fl-full { color: #b91c1c; font-weight: 600; }
/* loading spinner row inside the home search dropdown while suggestions load (2.png 2026-09-22, Facebook style) */
.rs-loading { justify-content: center; padding: 12px 16px; }
.sb-spin { width: 20px; height: 20px; border: 2px solid #d1d5db; border-top-color: #4b5563; border-radius: 50%; display: none; pointer-events: none; }
.sb-spin.on { display: block; animation: sb-spin .7s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }
.rs-search-for .rs-q-typed { font-weight: 600; }
/* 1.png 2026-09-22: account menu scrolls INSIDE a clipped rounded box (round corners on the scrollbar side too),
   with a top band = identity name + Logout */
.idsw-acct-menu { padding: 0; overflow: hidden; max-height: none; }
.idsw-acct-menu .idsw-scroll { padding: 6px; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c1c1c1 #fff; }
.idsw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #e5e7eb; margin: -6px -6px 0; padding: 10px 16px 9px 18px; }
.idsw-top-who { font-size: 13px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.idsw-top-out { font-size: 13px; font-weight: 600; color: #b91c1c; text-decoration: none; flex: none; }
.idsw-top-out:hover { text-decoration: underline; }
.idsw-acct-menu .idsw-top + .idsw-h { margin-top: 0; border-radius: 0; }
.idsw-out { color: #b91c1c; font-weight: 600; }

/* the other side of an order sees the account under investigation (2026-09-22) */
.osp-locked .osp-actions, .osp-locked .osp-fb-details, .osp-locked form.osp-inline-form, .osp-locked .osp-similar-form, .osp-locked .osp-fb-inline { display: none; }
.osp-investigation { background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 6px 0; flex: 0 0 100%; width: 100%; grid-column: 1 / -1; box-sizing: border-box; }

/* Jobs: pay line under the job title (UK 2026-09-24) */
.job-pay { font-size: 1.15rem; font-weight: 700; color: #0f5132; margin: -4px 0 10px; }

/* left filter panels: smart sticky, JS sets top (UK 2026-09-24) */
@media (min-width: 901px) { aside.ss-sticky, .jb-side.ss-sticky, .sp-side.ss-sticky, .ml-side.ss-sticky { position: sticky; align-self: flex-start; }
  .ss-sticky.ss-free, aside.ss-sticky.ss-free { position: relative; }
  .ss-sticky { overflow-anchor: none; } }   /* the browser never shifts the page to follow the panel */

/* 6.png 2026-09-25: Select all / Unselect all for the active tab */
.nbell-selrow { display: flex; align-items: center; padding: 2px 12px 6px; }
.nbell-selrow[hidden] { display: none; }
.nbell-selall { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px system-ui, sans-serif; color: #374151; cursor: pointer; user-select: none; }
.nbell-selall-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #1a73e8; margin: 0; }

/* ---- job advert page (2026-09-25) ---- */
.jad-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 6px 0 12px; font-size: 15px; color: #4b5563; }
.jad-meta > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #9ca3af; margin: 0 10px; vertical-align: middle; }
.jad-co { font-weight: 700; color: #111827; }
.jad-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.jad-fact { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: 14px; color: #1f2937; }
.jad-ic { width: 18px; height: 18px; fill: none; stroke: #334155; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.jad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-bottom: 10px; margin-bottom: 4px; }
.jad-apply { display: inline-block; background: #2b50ec; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 28px; border-radius: 10px; text-decoration: none; }
.jad-apply:hover { background: #2340c8; color: #fff; }
.jad-closes { font-size: 14px; color: #6b7280; }
.jad-desc { font-size: 15.5px; line-height: 1.7; color: #1f2937; }
.jad-desc p { margin: 0 0 12px; }
.jad-desc .jad-h { font-size: 16px; font-weight: 700; color: #111827; margin: 18px 0 6px; }
.jad-desc .jad-list { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.jad-desc .jad-list li { margin: 3px 0; }
.jad-details .item-attrs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.jad-side-facts { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid #eef0f4; font-size: 14px; }
.jad-side-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.jad-side-facts dt { color: #6b7280; }
.jad-side-facts dd { margin: 0; color: #111827; font-weight: 600; text-align: right; }
.jad-safe { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #e5e7eb; font-size: 13px; line-height: 1.55; color: #475569; }
@media (max-width: 760px) { .jad-details .item-attrs { grid-template-columns: 1fr; } .jad-apply { width: 100%; text-align: center; } }
.job-adv-name-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* name read out, logo shows it */
@media (max-width: 760px) { .jad-meta { flex-direction: column; align-items: flex-start; gap: 2px; } .jad-meta > span + span::before { display: none; } }

/* services: base area + travel range (2026-09-25) */
.svc-cover-base { font-size: 15px; color: #1f2937; }
.svc-cover-range { margin-top: 4px; font-size: 14px; color: #0f766e; font-weight: 600; }

/* UK trader details on listings + business settings sections (2026-09-25) */
.trader-box { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #eef0f4; font-size: 13px; }
.trader-h { font-weight: 700; color: #111827; margin-bottom: 4px; }
.trader-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.trader-row dt { color: #6b7280; flex: none; }
.trader-row dd { margin: 0; color: #111827; text-align: right; }
.biz-sec-h { font-size: 16px; font-weight: 700; color: #111827; margin: 22px 0 4px; padding-top: 14px; border-top: 1px solid #eef0f4; }
.biz-sec-note { margin-bottom: 10px; }
.st-trader { margin-top: 18px; }

/* services: switch to the provider account (2026-09-25) */
.svc-switch { max-width: 560px; margin: 48px auto; padding: 32px 28px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; text-align: center; }
.svc-switch-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: #eff6ff; color: #2563eb; align-items: center; justify-content: center; margin-bottom: 12px; }
.svc-switch-h { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 10px; }
.svc-switch-p { font-size: 15px; color: #374151; margin: 0 0 8px; line-height: 1.55; }
.svc-switch-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.svc-switch-btn { display: inline-block; background: #2563eb; color: #fff; font-weight: 700; padding: 12px 24px; border-radius: 10px; text-decoration: none; }
.svc-switch-btn:hover { background: #1d4ed8; color: #fff; }
.svc-switch-cancel { font-size: 14px; color: #6b7280; }

/* Sign in with Google button (2026-09-25) */
.s203-google { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }

/* Account > Data and privacy (2026-09-26): download, close, delete all my data */
.acct-privacy { border-color: #d6e4f5; }
.acct-data-btn { display: inline-block; margin-top: 4px; padding: 10px 20px; background: #1d4ed8; color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.acct-data-btn:hover { background: #1e40af; color: #fff; }
.acct-data-btn-light { background: #eef3fb; color: #1d4ed8; }
.acct-data-btn-light:hover { background: #dbe7f8; color: #1d4ed8; }
.acct-privacy-links { margin-top: 14px; }
.acct-privacy-links a { color: #1d4ed8; text-decoration: underline; }
.acct-pane .acct-card + .acct-card { margin-top: 14px; border-radius: 8px; border-top-width: 1px; border-top-style: solid; }
.acct-code { max-width: 200px; letter-spacing: 4px; font-size: 18px; }

/* register page (2026-09-26): only email + password; the rest is asked after sign-in */
.reg-after-note { color: #667; font-size: 13px; margin: 4px 0 12px; }

/* register page compact layout (2026-09-26) */
.reg-compact { padding-top: 22px; padding-bottom: 30px; }
.reg-compact .s190 { font-size: 22px; margin-bottom: 12px; }
.reg-compact .s192 { padding: 18px 18px 14px; }
.reg-compact .s193 { margin-bottom: 9px; }
.reg-compact .s194 { margin-bottom: 3px; font-size: 13px; }
.reg-compact .s195, .reg-compact .s197 { height: 38px; }
.reg-compact .fl-count { display: none; }
.reg-compact .s205 { padding: 2px 0 0; }
.reg-compact .reg-after-note { margin: 0 0 8px; }
.reg-compact .reg-terms { margin: 0 0 10px; }
.reg-compact .s204, .reg-compact .reg-captcha { margin-bottom: 8px; }
.reg-compact .s198 { height: 40px; }
.reg-compact .s206 { margin-top: 10px; font-size: 13px; }
.reg-compact .reg-social { margin: 0 0 4px; }
.reg-compact .reg-social a { padding: 9px 8px; font-size: 13px; white-space: nowrap; }
.reg-or { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; color: #889; font-size: 12px; }
.reg-or::before, .reg-or::after { content: ""; flex: 1; border-top: 1px solid #e4e6ea; }
@media (max-width: 480px) {
  .reg-compact { padding-top: 14px; padding-bottom: 22px; }
  .reg-compact .s190 { font-size: 20px; margin-bottom: 10px; }
  .reg-compact .s192 { padding: 14px 14px 12px; }
  .reg-compact .reg-social { flex-direction: column; gap: 8px; }
  .reg-compact .reg-social a { padding: 11px 8px; font-size: 14px; }
  .reg-compact .cf-turnstile { transform: scale(0.93); transform-origin: 0 0; }
}

/* account pending approval page (2026-09-26) */
.pend-page { padding-top: 40px; }
.pend-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 30px 28px; text-align: center; }
.pend-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #fff7ed; color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.pend-title { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 12px; }
.pend-text { color: #374151; font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.pend-note { color: #6b7280; font-size: 13px; margin: 14px 0 18px; }
.pend-home { display: inline-block; padding: 10px 20px; background: #1d4ed8; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; }
.pend-home:hover { background: #1e40af; color: #fff; }
@media (max-width: 480px) { .pend-page { padding-top: 16px; } .pend-card { padding: 22px 16px; } }

/* card photo carousel on property + motors cards (2026-09-26, like z Property): arrows on hover, "1 / 3" counter */
.cg-box { position: relative; }
.card-arw { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.88); color: #1a2b45; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.card-arw-prev { left: 10px; }
.card-arw-next { right: 10px; }
.cg-box:hover .card-arw { opacity: 1; }
.card-arw:hover { background: #fff; }
.card-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(8,16,30,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; pointer-events: none; }
@media (hover: none) { .card-arw { opacity: 1; } }
/* location line with the pin icon */
.zp-card-loc, body.motorlane .sp-card-loc, .hm-loc-pin { display: flex; align-items: center; gap: 5px; }
.zp-card-loc::before, body.motorlane .sp-card-loc::before, .hm-loc-pin::before { content: ""; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>") center/contain no-repeat; }
.zp-cards-grid .zp-card-loc::before { content: ""; margin-right: 0; }

/* links inside admin listing text (2026-09-26) */
.desc-link { color: #1d4ed8; text-decoration: underline; word-break: break-all; }
.desc-link:hover { color: #1e40af; }

/* Turnstile widgets on forms (2026-09-26) */
.form-captcha { margin: 8px 0 12px; }
.msg-captcha { margin: 8px 0; }
.fp-inline-reply .form-captcha { margin: 6px 0; flex-basis: 100%; }
.forum-alert { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; font-size: 14px; }

/* home "near you" line above the latest listings (2026-09-27, user 5.png): small, dark text */
.hm-near { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 13px; color: #1f2937; }
.hm-near-loc { font-weight: 600; }
.hm-near-sep { color: #9ca3af; }
.hm-near-l { display: inline-flex; align-items: center; gap: 6px; }
.hm-near-km { height: 30px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #111827; font-size: 13px; padding: 0 8px; }
.hm-near-set { color: #1f2937; text-decoration: underline; }
@media (max-width: 640px) { .hm-near { justify-content: flex-start; } }

/* near-you dropdown: a visible arrow (the site-wide select rule strips the native one) (2026-09-27) */
.hm-near-km { -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0 30px 0 10px; min-width: 120px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 9px center / 13px 13px; }
.hm-near-km:hover { border-color: #9ca3af; }
.hm-near-km:focus { outline: none; border-color: #2563eb; }

/* local landing pages (2026-09-27) */
.local-head { max-width: 1280px; margin: 8px auto 14px; padding: 0 20px; }
.local-h1 { font-size: 24px; font-weight: 700; color: #111827; margin: 0 0 6px; line-height: 1.25; }
.local-intro { font-size: 14px; color: #4b5563; margin: 0; max-width: 820px; line-height: 1.5; }
.local-links { max-width: 1280px; margin: 26px auto 10px; padding: 16px 20px 6px; border-top: 1px solid #e5e7eb; }
.local-links-h { font-size: 15px; font-weight: 700; color: #111827; margin: 8px 0 8px; }
.local-links-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.local-links-list a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #1f2937; font-size: 13px; text-decoration: none; }
.local-links-list a span { color: #6b7280; font-size: 12px; }
.local-links-list a:hover { border-color: #2563eb; color: #1d4ed8; }
/* share bar on the listing page (2026-09-27) */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.share-l { font-size: 12.5px; color: #6b7280; margin-right: 2px; }
.share-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #1f2937; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1; }
.share-btn svg { width: 14px; height: 14px; }
.share-wa:hover { border-color: #25d366; color: #128c7e; }
.share-fb:hover { border-color: #1877f2; color: #1877f2; }
.share-x:hover, .share-copy:hover { border-color: #111827; }
.s341 + .share-bar { margin: 2px 0 12px; }