@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../vendor/inter/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../vendor/inter/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  /* Without the letters the Vietnamese and Latin files already have (ă đ ơ ư ỹ ₫…): phones then download this 85 KB file only
     for other languages' letters, not on every Vietnamese page. */
  unicode-range: U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0151,U+0154-0167,U+016A-019F,U+01A2-01AE,U+01B1-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EFA-1EFF,U+20A0-20AA,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../vendor/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
 * diggg theme: "clean marketplace". One brand colour (teal), calm greys, Inter (self-hosted, with Vietnamese).
 * Loaded after Bootstrap; only overrides its variables and a few components, so every page picks it up.
 * Change the brand colour in one place: --brand / --brand-rgb (and the darker hover/active shades).
 */
:root:not([data-bs-theme="dark"]), [data-bs-theme="light"] {
  --brand: #0f766e; --brand-rgb: 15, 118, 110; --brand-hover: #115e59; --brand-active: #134e4a;
  --brand-subtle: #e6f4f2; --brand-border: #a7d8d1; --brand-ink: #0b4f4a;
  --brand-pale: #c8ece7; --brand-pale-hover: #b3e3dc;
  --accent: #f59e0b;

  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: var(--brand-subtle); --bs-primary-border-subtle: var(--brand-border); --bs-primary-text-emphasis: var(--brand-ink);
  --bs-link-color: var(--brand); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand-hover); --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-color: #1f2937; --bs-body-color-rgb: 31, 41, 55;
  --bs-secondary-color: #6b7280; --bs-secondary-color-rgb: 107, 114, 128;
  --bs-tertiary-bg: #f5f6f8; --bs-tertiary-bg-rgb: 245, 246, 248;
  --bs-secondary-bg: #eceef1;
  --bs-border-color: #e5e7eb; --bs-border-color-translucent: rgba(17, 24, 39, .08);
  --bs-border-radius: .625rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: .875rem; --bs-border-radius-xl: 1.125rem;
  --bs-box-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --bs-box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
  --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
  --surface: #fff;
}
[data-bs-theme="dark"] {
  --brand: #0f766e; --brand-rgb: 15, 118, 110; --brand-hover: #0d9488; --brand-active: #14b8a6;
  --brand-subtle: #0d2a28; --brand-border: #115e59; --brand-ink: #5eead4;
  --brand-pale: #134e4a; --brand-pale-hover: #115e59;
  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: var(--brand-subtle); --bs-primary-border-subtle: var(--brand-border); --bs-primary-text-emphasis: var(--brand-ink);
  --bs-link-color: #5eead4; --bs-link-color-rgb: 94, 234, 212; --bs-link-hover-color: #99f6e4; --bs-link-hover-color-rgb: 153, 246, 228;
  --bs-body-bg: #0f1115; --bs-body-bg-rgb: 15, 17, 21;
  --bs-tertiary-bg: #0f1115; --bs-tertiary-bg-rgb: 15, 17, 21;
  --bs-secondary-bg: #1d212a;
  --bs-border-color: #2a2f3a;
  --surface: #171a21;
  --bs-focus-ring-color: rgba(94, 234, 212, .25);
  --accent: #f59e0b;
  --bs-body-color: #e5e7eb; --bs-body-color-rgb: 229, 231, 235;
  --bs-secondary-color: #9ca3af; --bs-secondary-color-rgb: 156, 163, 175;
  --bs-emphasis-color: #fff;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-border-radius: .625rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: .875rem; --bs-border-radius-xl: 1.125rem;
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --bs-box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { letter-spacing: -.015em; font-weight: 700; }

/* Surfaces */
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.card.border-0 { border: 1px solid var(--bs-border-color) !important; }
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }
.modal-content, .dropdown-menu, .offcanvas { --bs-modal-bg: var(--surface); --bs-dropdown-bg: var(--surface); --bs-offcanvas-bg: var(--surface); }
.dropdown-menu { border-color: var(--bs-border-color); box-shadow: var(--bs-box-shadow); }
.bg-body { background-color: var(--surface) !important; }

/* Buttons (Bootstrap compiles its blue into each button, so set them here) */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: .625rem; --bs-btn-padding-x: .9rem; }
.btn-sm { --bs-btn-border-radius: .5rem; --bs-btn-padding-x: .65rem; }
.btn-lg { --bs-btn-border-radius: .75rem; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-active); --bs-btn-active-border-color: var(--brand-active); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-disabled-color: var(--brand); --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #5eead4; --bs-btn-border-color: #2b8f86; }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-border-color: var(--bs-border-color); }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-body-color); }
.btn-success { --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; }

/* Forms */
.form-control, .form-select { border-radius: .625rem; border-color: var(--bs-border-color); background-color: var(--surface); }
.form-control:focus, .form-select:focus { border-color: var(--brand-border); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand-border); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230f766e'/%3e%3c/svg%3e"); }
.form-label { font-weight: 500; }

/* Nav, pagination, badges */
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.nav-underline .nav-link.active, .nav-tabs .nav-link.active { color: var(--brand); }
[data-bs-theme="dark"] .nav-underline .nav-link.active { color: #5eead4; }
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--brand); --bs-pagination-border-radius: .5rem; }
.text-bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
[data-bs-theme="dark"] .text-primary { color: #5eead4 !important; }
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.text-bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-secondary-color) !important; }
.alert { border-radius: .75rem; }
.alert-info { --bs-alert-bg: var(--brand-subtle); --bs-alert-border-color: var(--brand-border); --bs-alert-color: var(--brand-ink); }
.table { --bs-table-bg: transparent; }

/* Wordmark */
.logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--bs-body-color); text-decoration: none; }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1; letter-spacing: -.04em; padding-bottom: 2px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.logo-word { font-weight: 800; font-size: 1.3rem; letter-spacing: -.045em; line-height: 1; }
.logo-sub { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); border-left: 1px solid var(--bs-border-color); padding-left: .5rem; margin-left: .1rem; }

/* ---------------------------------------------------------------- public site */
.public-page { background: var(--bs-tertiary-bg); }
.site-nav { background: var(--surface); border-bottom: 1px solid var(--bs-border-color); }
.site-nav .nav-btn { color: var(--bs-body-color); font-weight: 500; }
.site-nav .nav-btn:hover { background: var(--bs-secondary-bg); }
.site-footer { border-top: 1px solid var(--bs-border-color); background: var(--surface); }

/* Search band */
.board-hero h1 { font-weight: 800; }
.search-bar { display: flex; gap: .5rem; background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .5rem; box-shadow: var(--bs-box-shadow-sm); }
.search-bar .sb-field { position: relative; display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.search-bar .sb-field > .bi { position: absolute; left: .85rem; color: var(--bs-secondary-color); pointer-events: none; }
.search-bar .form-control { border: 0; background: transparent; padding-left: 2.4rem; height: 2.75rem; box-shadow: none !important; }
.search-bar .sb-where { border-left: 1px solid var(--bs-border-color); }
.search-bar .sb-where .form-select { width: auto; border: 0; background-color: transparent; box-shadow: none !important; color: var(--bs-secondary-color); }
.search-bar .sb-go { padding-inline: 1.25rem; border-radius: .75rem; }
@media (max-width: 767.98px) {
  .search-bar { flex-direction: column; }
  .search-bar .sb-where { border-left: 0; border-top: 1px solid var(--bs-border-color); }
}

/* Category chips: one row that scrolls sideways on phones */
.chip-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chip-strip::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--bs-border-color);
  background: var(--surface); color: var(--bs-body-color); font-weight: 500; font-size: .9rem; text-decoration: none; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--brand-border); color: var(--bs-body-color); }
.chip .chip-n { color: var(--bs-secondary-color); font-size: .8rem; }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.active .chip-n { color: rgba(255, 255, 255, .8); }
.chip.is-empty { opacity: .55; }

/* Filters panel */
.filters-title { font-weight: 700; margin-bottom: .75rem; }
#filters .form-label { color: var(--bs-body-color); }
.section-title { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }
.view-toggle .btn { --bs-btn-font-weight: 500; }

/* Ad cards (photo first). Names avoid "ad"/"promo": ad blockers hide those. */
.item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.listing-card { overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.listing-card:hover { box-shadow: var(--bs-box-shadow) !important; transform: translateY(-2px); border-color: var(--brand-border) !important; }
.listing-card.is-featured { border-color: #f5c66b !important; box-shadow: 0 0 0 1px #f5c66b; }
.listing-card.tint { background: #fff8e1; }
[data-bs-theme="dark"] .listing-card.tint { background: #2b2616; }
.item-photo { position: relative; aspect-ratio: 4 / 3; background: var(--bs-secondary-bg); }
.item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color);
  background: linear-gradient(135deg, var(--brand-subtle), var(--bs-secondary-bg)); font-size: 2.25rem; }
.item-flags { position: absolute; left: .5rem; top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem; max-width: calc(100% - 3.25rem); }
.flag-featured { background: #fbbf24; color: #3b2a00; }
.item-body { padding: .7rem .8rem .75rem; display: flex; flex-direction: column; gap: .2rem; }
.item-price { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-title { font-size: .95rem; font-weight: 500; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-title.title-strong { font-weight: 800; font-size: 1rem; }
.item-meta, .item-foot { display: flex; gap: .3rem; font-size: .8rem; color: var(--bs-secondary-color); min-width: 0; }
.item-foot { margin-top: auto; padding-top: .25rem; }
.save-heart { background: rgba(255, 255, 255, .92); border: 0; backdrop-filter: blur(4px); }
[data-bs-theme="dark"] .save-heart { background: rgba(23, 26, 33, .85); }

/* Featured row */

/* Ad page */
.listing-title { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.listing-price { font-size: 1.35rem; font-weight: 800; color: var(--brand); margin-top: .35rem; }
[data-bs-theme="dark"] .listing-price { color: #5eead4; }
.listing-desc { line-height: 1.65; }
.eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.person-dot { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-subtle); color: var(--brand-ink); font-weight: 800; }
.reveal-btn { font-size: 1rem; }
@media (min-width: 992px) { .contact-sticky { position: sticky; top: 5rem; z-index: 1; } }

/* Small finishing touches */
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 600; }
.app-sidebar .nav-link.active { background: var(--brand); }
.app-sidebar .nav-link:not(.active):hover { background: var(--bs-secondary-bg); }
.brand-mark { background: var(--brand); }

/* Long forms: numbered sections */
.form-section { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 700; margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--bs-border-color); }
.row > .col-12:first-child .form-section { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section > span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-subtle); color: var(--brand-ink); font-size: .85rem; font-weight: 800; }

/* Error pages */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.error-code { font-size: 4.5rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--brand); }
.flag-status { background: rgba(17, 24, 39, .85); color: #fff; }
.listing-card.is-off .item-photo img, .listing-card.is-off .item-noimg { filter: grayscale(1); opacity: .6; }

/* "Add to home screen" banner (js/pwa.js) */
.install-strip { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 1080;
  display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 1rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15); }
.install-strip.d-none { display: none !important; }
/* Installed app: room for the iPhone notch / home bar. */
@media (display-mode: standalone) { .site-nav { padding-top: max(.5rem, env(safe-area-inset-top)) !important; } }

/* Staff sidebar: "On the site now" live dot */
.live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--bs-success); display: inline-block; align-self: center;
  box-shadow: 0 0 0 0 rgba(25, 135, 84, .5); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 .45rem rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---- Board list: one compact text row per ad (classifieds/public/_row). Names avoid "ad"/"promo": ad blockers. ---- */
.row-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; }
.row-item { position: relative; border-bottom: 1px solid var(--bs-border-color-translucent); }
.row-item:last-child { border-bottom: 0; }
.row-link { display: flex; gap: .8rem; padding: .7rem 2.9rem .7rem .9rem; color: inherit; text-decoration: none; min-width: 0; }
.row-link:hover { background: var(--bs-tertiary-bg); }
.row-link:hover .row-title { text-decoration: underline; text-underline-offset: 2px; }
.row-thumb { position: relative; flex: 0 0 4rem; width: 4rem; height: 4rem; border-radius: .45rem; overflow: hidden; background: var(--bs-secondary-bg); align-self: flex-start; }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-icon { display: flex; align-items: center; justify-content: center; background: var(--brand-subtle); color: var(--brand-ink); font-size: 1.5rem; }
[data-bs-theme="dark"] .row-icon { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.row-count { position: absolute; right: 3px; bottom: 3px; font-size: .65rem; line-height: 1; padding: .15rem .3rem; border-radius: .25rem; background: rgba(17, 24, 39, .75); color: #fff; }
.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.row-top { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.row-title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.row-title.title-strong { font-weight: 800; }
.row-price { font-weight: 700; color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.row-preview { display: none; font-size: .875rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--bs-secondary-color); min-width: 0; white-space: nowrap; overflow: hidden; }
.row-meta .label-chip { font-size: .7rem; flex-shrink: 0; }
.row-meta > * + *::before { content: "·"; margin-right: .35rem; }
.row-heart { position: absolute; top: .55rem; right: .45rem; }
.row-heart.save-heart { box-shadow: none !important; background: transparent; border-color: transparent; }
.row-heart.save-heart:hover { background: var(--bs-secondary-bg); }
/* Featured: pinned at the top with a warm tint and a gold edge; the "Highlight" add-on tints too. */
.row-item.is-pinned { background: #fffaeb; box-shadow: inset 3px 0 0 #f5b301; }
.row-item.tint { background: #fff8e1; }
.row-item.is-pinned .row-title::before { content: "★"; color: #f5b301; margin-right: .3rem; }
[data-bs-theme="dark"] .row-item.is-pinned, [data-bs-theme="dark"] .row-item.tint { background: #2b2616; }
@media (min-width: 768px) {
  .row-link { padding: .85rem 3.1rem .85rem 1rem; gap: 1rem; }
  .row-thumb { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; }
  .row-top { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .row-title { -webkit-line-clamp: 1; }
  .row-price { flex-shrink: 0; max-width: 45%; font-size: 1rem; }
  .row-preview { display: block; }
}
/* Phones: a smaller heading and search box, so the list starts higher. */
@media (max-width: 575.98px) {
  .board-hero h1 { font-size: 1.35rem; }
  .board-hero .mb-3 { margin-bottom: .6rem !important; }
  /* Two rows instead of three: words on top; place + Search button side by side. */
  .search-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .3rem; gap: 0 .3rem; border-radius: .8rem; }
  .search-bar .sb-what { grid-column: 1 / -1; }
  .search-bar .sb-where { border-top: 1px solid var(--bs-border-color); }
  .search-bar .sb-go { align-self: center; margin-top: .3rem; padding: .45rem .8rem; }
  .search-bar .form-control { height: 2.4rem; }
  .search-bar > input[type="hidden"] { display: none; }
  .chip-strip.mb-3 { margin-bottom: .75rem !important; }
}

/* ---- Ad details page: text first, photos in a strip, details as a list, call bar on phones. ---- */
.detail { background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: 1.1rem 1rem 1.25rem; }
@media (min-width: 768px) { .detail { padding: 1.5rem 1.6rem 1.6rem; } }
.detail-head { margin-bottom: 1rem; }
.detail .listing-title { font-size: 1.4rem; }
@media (min-width: 768px) { .detail .listing-title { font-size: 1.7rem; } }
.detail-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .35rem; font-size: .875rem; color: var(--bs-secondary-color); }
/* Photos: side by side, natural shapes, scroll / swipe sideways. */
.photo-strip { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
  margin-inline: -1rem; padding-inline: 1rem; }
@media (min-width: 768px) { .photo-strip { margin-inline: 0; padding-inline: 0; } }
.strip-photo { flex: 0 0 auto; height: 13.5rem; padding: 0; border: 0; border-radius: .6rem; overflow: hidden; background: var(--bs-secondary-bg); scroll-snap-align: start; cursor: zoom-in; }
.strip-photo img { height: 100%; width: auto; max-width: 85vw; object-fit: cover; display: block; }
@media (min-width: 768px) { .strip-photo { height: 18rem; } .strip-photo img { max-width: 34rem; } }
.photo-strip.is-single .strip-photo img { max-width: 100%; }
.strip-photo:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Details: label / value rows, two columns on wider screens. */
.spec-list { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 1px solid var(--bs-border-color-translucent); }
@media (min-width: 576px) { .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.spec-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); min-width: 0; }
.spec-list dt { font-weight: 400; color: var(--bs-secondary-color); flex-shrink: 0; }
.spec-list dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.place-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; font-size: .9rem; }
.place-line > .bi { color: var(--bs-secondary-color); }

/* Full-size photo viewer. */
.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0d10; color: #fff; }
.viewer::backdrop { background: #0b0d10; }
.viewer-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; padding: 3rem .5rem; }
.viewer-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-btn { position: absolute; border: 0; border-radius: 50%; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; }
.viewer-btn:hover { background: rgba(255, 255, 255, .26); }
.viewer-close { top: .75rem; right: .75rem; }
.viewer-prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.viewer-next { right: .75rem; top: 50%; transform: translateY(-50%); }
.viewer-count { position: absolute; top: 1.1rem; left: 50%; transform: translateX(-50%); font-size: .9rem; opacity: .85; }
@media (hover: none) { .viewer-prev, .viewer-next { display: none; } }

/* Board: ✕ in the "Where" box (all areas) + "Browse by city" tab tucked under the search bar, and its panel */
.search-bar { position: relative; z-index: 2; }
.search-bar .sb-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  color: var(--bs-secondary-color); text-decoration: none; font-size: .8rem; }
.search-bar .sb-clear:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.place-tab-wrap { display: flex; justify-content: center; position: relative; z-index: 1; margin-top: -1px; }
.place-tab { display: inline-flex; align-items: center; gap: .1rem; padding: .35rem 1rem .4rem; font-size: .875rem; font-weight: 600; color: var(--bs-body-color);
  background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 .75rem .75rem;
  box-shadow: inset 0 4px 4px -4px rgba(17, 24, 39, .18), 0 1px 2px rgba(17, 24, 39, .06); }
.place-tab:hover { background: var(--bs-tertiary-bg); }
.place-tab[aria-expanded="true"] { background: var(--surface); color: var(--brand-ink); }
.place-tab .bi-chevron-down { transition: transform .15s; }
.place-tab[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.city-panel { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: .9rem 1rem; }
.city-head { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .4rem; }
.city-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .1rem .75rem; }
.city-grid a { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: var(--bs-border-radius-sm); color: var(--bs-body-color); text-decoration: none; }
.city-grid a:hover { background: var(--bs-tertiary-bg); }
.city-grid a.is-here { background: var(--brand-subtle); color: var(--brand-ink); font-weight: 600; }
.city-n { color: var(--bs-secondary-color); font-size: .8rem; font-weight: 400; }
.city-state { border-top: 1px solid var(--bs-border-color); }
.city-state > summary { padding: .5rem .25rem; cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.city-state > summary .city-n { margin-left: auto; }
.city-state > .city-grid { padding: 0 0 .6rem; }
@media (max-width: 575.98px) { .city-grid { grid-template-columns: 1fr 1fr; } }
.city-state > summary { list-style: none; }
.city-state > summary::-webkit-details-marker { display: none; }
.city-state[open] > summary .bi-chevron-down { transform: rotate(180deg); }
@media (max-width: 575.98px) {
  .search-bar .sb-where .form-control { padding-left: 2.1rem; padding-right: .25rem; }
  .search-bar .sb-field > .bi { left: .7rem; }
  .search-bar .sb-clear { width: 1.4rem; }
  .search-bar .sb-where .form-select { padding-left: .4rem; padding-right: 1.6rem; background-position: right .3rem center; }
}
/* The city panel slides out from under the search bar, the tab hangs below it. */
#city-browser { position: relative; z-index: 1; margin-top: -1rem; }
.city-panel { padding-top: 1.6rem; border-top: 0; border-radius: 0 0 1rem 1rem; background: var(--surface); box-shadow: var(--bs-box-shadow-sm); }
@media (max-width: 575.98px) { #city-browser { margin-top: -.8rem; } .city-panel { padding-top: 1.3rem; border-radius: 0 0 .8rem .8rem; } }
/* "Browse by city" tab: brand-tinted so it reads as a control, with a soft drop shadow below. */
.place-tab { background: var(--brand-subtle); color: var(--brand-ink); border-color: var(--brand-border);
  box-shadow: inset 0 4px 4px -4px rgba(var(--brand-rgb), .25), 0 3px 6px -2px rgba(var(--brand-rgb), .25); }
.place-tab:hover { background: #d5ece8; border-color: var(--brand); }
.place-tab[aria-expanded="true"] { background: var(--surface); color: var(--brand-ink); border-color: var(--brand-border); }
.place-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Categories as tabs: plain text with a green underline under the chosen one; the row scrolls sideways on phones. */
.chip-strip { gap: 1.25rem; padding: 0; margin: 0; box-shadow: inset 0 -1px 0 var(--bs-border-color);
  /* sideways only: no up/down wobble when swiping the row on a phone */
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.chip { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; box-shadow: none; padding: .55rem .1rem; margin-bottom: 0;
  color: var(--bs-secondary-color); font-weight: 500; }
.chip > .bi { color: var(--brand); }
.chip .chip-n { background: var(--brand); color: #fff; border-radius: 999px; padding: .05rem .45rem; font-weight: 700; font-size: .7rem; line-height: 1.3; }
.chip:hover { background: none; color: var(--brand-ink); border-bottom-color: var(--brand-border); }
.chip.active, .chip.active:hover { background: none; color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 700; box-shadow: none; }
.chip.active > .bi { color: var(--brand); }
.chip.active .chip-n { background: var(--brand); color: #fff; }
.chip.is-empty { opacity: .5; }
/* More breathing room between the "Browse by city" tab and the category row. */
.chip-strip { margin-top: .6rem; }
@media (max-width: 575.98px) { .chip-strip { margin-top: .35rem; } }
.results-count { color: var(--bs-secondary-color); font-size: .875rem; font-weight: 500; white-space: nowrap; }
/* "Browse by city" tab: white like the search bar it hangs from, firm grey border, teal text, soft shadow. */
.place-tab { background: var(--surface); color: var(--brand-ink); border-color: #cfd4da;
  box-shadow: 0 2px 4px -1px rgba(17, 24, 39, .1), 0 1px 2px rgba(17, 24, 39, .06); }
.place-tab > .bi-buildings { color: var(--brand); }
.place-tab:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.place-tab[aria-expanded="true"] { background: var(--surface); border-color: #cfd4da; }

/* Ad form in steps (public/js/steps.js). Without the script every block shows (one page). */
.is-stepped [data-step]:not(.step-on) { display: none !important; }
.step-bar { margin-bottom: .25rem; }
.step-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .35rem; }
.step-pill { width: 100%; display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border: 0; background: none; border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary-color); font-size: .875rem; font-weight: 500; text-align: left; }
.step-pill:not(:disabled):hover { background: var(--bs-tertiary-bg); }
.step-pill:disabled { opacity: .55; cursor: default; }
.step-num { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #cfd4da; background: var(--surface); font-weight: 700; font-size: .8rem; }
.step-pill.is-done { color: var(--brand-ink); }
.step-pill.is-done .step-num { background: var(--brand-subtle); border-color: var(--brand-border); color: var(--brand-ink); }
.step-pill.is-current { color: var(--bs-body-color); font-weight: 700; }
.step-pill.is-current .step-num { background: var(--brand); border-color: var(--brand); color: #fff; }
.step-progress { height: 4px; border-radius: 4px; background: var(--bs-secondary-bg); overflow: hidden; }
.step-progress > span { display: block; height: 100%; width: 25%; background: var(--brand); border-radius: 4px; transition: width .25s; }
/* In steps, the step bar names the step: the big numbered heading would repeat it. */
.is-stepped .form-section { border-top: 0; padding-top: 0; margin-top: .25rem; }
.is-stepped .form-section > span { display: none; }
.step-nav { display: flex; gap: .5rem; align-items: center; }

@media (max-width: 575.98px) {
  .step-list { gap: .15rem; }
  .step-pill { flex-direction: column; gap: .2rem; padding: .25rem; text-align: center; font-size: .75rem; }
}

/* Money / number fields: "$" and the unit inside the box, quiet grey, so every field is the same width and height. */
.affix { position: relative; }
.affix .affix-pre, .affix .affix-post { position: absolute; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; font-size: .95rem; }
.affix .affix-pre { left: .8rem; font-weight: 600; }
.affix .affix-post { right: .8rem; }
.affix .form-control.has-pre { padding-left: 1.75rem; }
.affix .form-control.is-invalid { background-position: right calc(.375em + .1875rem) center; }
.affix .form-control.is-invalid ~ .affix-post { right: 2.4rem; }
/* Add-on picker: "No" shares the teal border of the paid options; when chosen it's a light teal, not solid (solid = something bought). */
.btn-check:checked + .btn.addon-none { background: var(--brand-subtle); border-color: var(--brand); color: var(--brand-ink); }
/* Manage page: "Get more calls" options fold away. */

/* Manage page photos: a grid that fills the card; "Cover" / "Waiting" as a label on the photo, buttons in one even row. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.photo-tile { min-width: 0; }
.photo-img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--bs-border-radius); overflow: hidden; border: 1px solid var(--bs-border-color); }
.photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-flag { position: absolute; top: .4rem; left: .4rem; font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.photo-actions { display: flex; gap: .35rem; margin-top: .4rem; }
.photo-actions .btn { height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
/* Phones: 3 small photos a row; "Make cover" is just a star there (the cover photo wears the filled star). */
@media (max-width: 575.98px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .photo-flag { font-size: .65rem; padding: .15rem .4rem; top: .25rem; left: .25rem; }
  .photo-actions .btn { height: 1.85rem; padding-inline: .45rem; }
}

/* My account: tab bar (scrolls sideways on small phones) and no extra gap above each tab's first section */
.acct-tabs { overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bs-border-color); }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs .nav-link { padding-left: .25rem; padding-right: .25rem; margin-right: .75rem; }
.acct-tab > :first-child { margin-top: 0 !important; }

/* Phones: the four tabs share the width, icon above a small label, so all fit without scrolling. */
@media (max-width: 575.98px) {
    .acct-tabs .nav { gap: 0; }
    .acct-tabs .nav-item { flex: 1 1 0; min-width: 0; }
    .acct-tabs .nav-link { margin: 0; padding: .35rem .05rem .5rem; display: flex; flex-direction: column; align-items: center; font-size: .72rem; line-height: 1.2; position: relative; }

    .acct-tabs .nav-link .bi { font-size: 1.15rem; margin: 0 0 .15rem !important; }
    .acct-tabs .nav-link .badge { display: none; }

}

/* "Featured in <city>" strip on the board (class names avoid "ad"/"sponsor": ad blockers) */
.spot-strip .spot-card { border-color: #f5c66b !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .15s; }
.spot-strip .spot-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }

.spot-strip .spot-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Filters in use on the board: small chips with no fill and a thin grey outline on one line (slides sideways when there are many), each with a round × to remove it.
   A line and some room under them, so the filters and the ads are clearly separate. */
.filter-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem; min-width: 0; flex: 0 1 auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  /* fade at the right edge when more chips are hidden */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent); padding-right: 1rem; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .25rem .2rem .6rem; border-radius: 999px; border: 0;
  background: none; box-shadow: inset 0 0 0 1px var(--bs-border-color); color: var(--brand-ink); font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.filter-chip:hover, .filter-chip:focus-visible { background: none; box-shadow: inset 0 0 0 1px var(--brand-border); color: var(--brand-ink); }
.filter-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .6rem; }
.filter-chip:hover .filter-chip-x { background: var(--brand-hover); }
[data-bs-theme="dark"] .filter-chip-x { background: #0d9488; }
[data-bs-theme="dark"] .filter-chip:hover .filter-chip-x { background: #14b8a6; }
/* Filters in use (price, rent…) in a small row under the Filters button: white pills that wrap. */
.board-chips .filter-chips { flex-wrap: wrap; overflow: visible; gap: .3rem; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
.board-chips .filter-chip { background: #fff4ec; box-shadow: inset 0 0 0 1px #f2c19c; color: #9a4309; font-weight: 600;
    padding: .1rem .2rem .1rem .55rem; font-size: .8rem; line-height: 1.3; text-decoration: none; }
/* Soft orange (Viet's pick C) so the filters in use stand out from the white cards. */
.board-chips .filter-chip:hover, .board-chips .filter-chip:focus-visible { background: #ffe9d9; box-shadow: inset 0 0 0 1px #c2560b; color: #7c3507; }
.board-chips .filter-chip-x { width: 1rem; height: 1rem; font-size: .55rem; background: #c2560b; }
.board-chips .filter-chip:hover .filter-chip-x { background: #9a4309; }
[data-bs-theme="dark"] .board-chips .filter-chip { background: rgba(234, 122, 47, .16); box-shadow: inset 0 0 0 1px rgba(242, 150, 90, .45); color: #fdba8c; }
[data-bs-theme="dark"] .board-chips .filter-chip:hover, [data-bs-theme="dark"] .board-chips .filter-chip:focus-visible { background: rgba(234, 122, 47, .26); box-shadow: inset 0 0 0 1px #f2965a; color: #fed7b8; }
[data-bs-theme="dark"] .board-chips .filter-chip-x { background: #ea7a2f; }
[data-bs-theme="dark"] .board-chips .filter-chip:hover .filter-chip-x { background: #f2965a; }

/* Board, first look: welcome line, "Near me" in the where-box, and two ways to start. */
.board-welcome { color: var(--bs-secondary-color); font-size: .95rem; margin-top: .15rem; }
.search-bar .sb-nearme { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; border: 0; background: var(--brand-subtle); color: var(--brand-ink);
  border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.search-bar .sb-nearme:hover { background: var(--brand-border); }
.search-bar .sb-nearme.is-busy .bi { animation: nearme-spin 1s linear infinite; }
@keyframes nearme-spin { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) { .search-bar .sb-nearme { padding: .25rem .45rem; } .search-bar .sb-nearme-label { display: none; } }

/* "Looking for work?" box: two buttons (see jobs / free worker profile). The boxes stack on phones. */

/* Post an ad: the "free worker profile" tip */
.worker-tip { display: flex; gap: .6rem; padding: .75rem .9rem; border-radius: .75rem; background: var(--brand-subtle); color: var(--brand-ink); font-size: .9rem; }
/* Three start boxes: one row on wider screens; on phones the third ("Find workers") spans the width under the other two. */

/* "Text me new ads like these" / "Alerts": a very light green fill so it reads as a button. */
.alerts-btn { --bs-btn-bg: var(--brand-subtle); }

/* Partner banners (PartnerTiles). Made to look unlike a listing: a grey panel (listings are white), a "SPONSORED" tag,
   the advertiser's name and "Visit site ↗", the picture in a thin frame. Names avoid ad-blocker words. */
.partner-row { list-style: none; padding: .7rem .85rem .85rem; background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }
.partner-box { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .7rem .85rem .85rem; }
.partner-tile-head { display: flex; align-items: center; gap: .45rem; font-size: .78rem; margin-bottom: .45rem; min-width: 0; }
.partner-tag { flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color); border-radius: .3rem; padding: .05rem .35rem; background: var(--surface); }
.partner-name { color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.partner-visit { margin-left: auto; flex: none; color: var(--bs-secondary-color); text-decoration: none; white-space: nowrap; }
.partner-visit:hover { color: var(--bs-body-color); text-decoration: underline; }
.partner-visit .bi { font-size: .7rem; }
.partner-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; border-radius: .5rem; border: 1px solid var(--bs-border-color); background: var(--surface); }
@media (min-width: 992px) { .partner-row .partner-tile img, .partner-box .partner-tile img { max-height: 170px; } }
/* First look: three small tiles (work profile / find workers / post), one row on every screen. */

.results-bar { height: .55rem; min-width: 2px; border-radius: .3rem; background: var(--brand); }
/* Partner banner with a phone picture: taller on phones. */
@media (max-width: 575.98px) { .partner-tile.has-phone img { aspect-ratio: 2 / 1; } }

/* My account → Advertise (self-serve partner banners). "pt-" names: ad blockers hide "banner" / "ad-" ones. */
.pt-step { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: .8rem; align-items: center; justify-content: center; margin-right: .4rem; }
.pt-opt { display: flex; align-items: center; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .55rem .7rem; margin-top: .5rem; font-size: .9rem; cursor: pointer; }
.pt-opt.is-on { border-color: var(--brand); background: var(--brand-subtle); }
.pt-opt .form-check-input { flex-shrink: 0; margin-top: 0; }
.pt-sub { border-left: 3px solid var(--brand); padding-left: .75rem; }
.pt-len { flex: 1; min-width: 4.6rem; font-size: .8rem; line-height: 1.35; padding: .45rem .3rem; }

/* In-site messages: the conversation page (ListingMessages). */
.msg-list { display: flex; flex-direction: column; gap: .4rem; }
.msg-bubble { max-width: 85%; border-radius: 1rem; padding: .5rem .75rem; font-size: .95rem; }
.msg-theirs { background: var(--bs-tertiary-bg); align-self: flex-start; border-bottom-left-radius: .3rem; }
.msg-mine { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: .3rem; }
.msg-text { white-space: pre-line; overflow-wrap: anywhere; }
.msg-time { font-size: .72rem; opacity: .75; margin-top: .2rem; }
.msg-warn { font-size: .78rem; color: var(--bs-warning-text-emphasis); margin-top: .3rem; }
.msg-quick { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .15rem .65rem; font-size: .8rem; background: none; color: inherit; }
.msg-quick:hover { border-color: var(--brand); }

/* City / category pages for Google (LandingSeo): intro, live counts, links to nearby cities and other categories. */
.seo-intro { font-size: .92rem; color: var(--bs-secondary-color); max-width: 46rem; margin-top: .35rem; }
.seo-stats { display: flex; flex-wrap: wrap; gap: .35rem; }
.seo-stat { background: var(--brand-pale, var(--brand-subtle)); color: var(--brand); border-radius: 999px; padding: .12rem .6rem; font-size: .78rem; font-weight: 600; }
.seo-more { border-top: 1px solid var(--bs-border-color); margin-top: 1.5rem; padding-top: .5rem; }
.seo-more h2 { font-size: .95rem; font-weight: 700; margin: 1rem 0 .5rem; }
.seo-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.seo-links a { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .2rem .75rem; font-size: .85rem; text-decoration: none; color: inherit; }
.seo-links a:hover { border-color: var(--brand); color: var(--brand); }
.seo-links a span { color: var(--bs-secondary-color); }

/* Worker profile at a glance (Apply with profile, applicants). */
.wk-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .75rem; }
.wk-chip { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; }
.wk-ok { border-color: var(--brand); color: var(--brand); background: var(--brand-subtle); }

/* My account → Results for one ad (AdResults). */
.rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 768px) { .rs-grid { grid-template-columns: repeat(5, 1fr); } }
.rs-tile { background: var(--bs-body-bg); border-radius: .75rem; padding: .6rem .7rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.rs-n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rs-l { font-size: .75rem; color: var(--bs-secondary-color); }
.rs-d { font-size: .72rem; color: var(--bs-secondary-color); }
.rs-d.up { color: var(--bs-success-text-emphasis); }
.rs-d.down { color: var(--bs-danger-text-emphasis); }
.rs-key { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; background: var(--brand); vertical-align: middle; }
.rs-key-views, .rs-bar-views { opacity: .3; }
.rs-chart { width: 100%; height: 8rem; display: block; }
.rs-bar-views, .rs-bar-taps { fill: var(--brand); }
.rs-axis { stroke: var(--bs-border-color); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rs-tip { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--bs-border-color); padding: .55rem 0; }
.rs-tip:first-of-type { margin-top: .4rem; }
.rs-tip > i { color: var(--brand); font-size: 1.1rem; }

/* Saved replies: the buttons above the reply box, and the list in My account → Messages. */

.sr-chip { flex: 0 0 auto; border: 1px solid var(--brand); color: var(--brand); background: var(--brand-subtle); border-radius: 999px; padding: .25rem .7rem; font-size: .82rem; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.sr-chip-edit { background: none; border-style: dashed; color: var(--bs-secondary-color); border-color: var(--bs-border-color); text-decoration: none; }
.sr-item { display: flex; align-items: center; gap: .25rem; border-top: 1px solid var(--bs-border-color); padding: .4rem 0; }
.sr-edit { border-color: transparent; background: transparent; }
.sr-edit:focus { border-color: var(--bs-border-color); background: var(--bs-body-bg); }

/* "Get the Verified badge" box (My account → Businesses). */

.row-verified { color: var(--bs-success); }

/* Maintenance mode: the bar staff see on public pages while visitors get "We'll be right back". */
.maint-bar { background: #f59e0b; color: #1f1300; text-align: center; font-size: .85rem; padding: .35rem .75rem; }
.maint-bar a { color: inherit; font-weight: 600; margin-left: .5rem; }
/* "Open, with a notice" / "Browsing only": the message on top of public pages. */
.site-note { background: #fff3cd; color: #664d03; font-size: .85rem; padding: .45rem .75rem; text-align: center; border-bottom: 1px solid #ffe69c; }
[data-bs-theme="dark"] .site-note { background: #332701; color: #ffda6a; border-color: #664d03; }
.maint-opt { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .7rem; margin-top: .4rem; cursor: pointer; }
.maint-opt.is-on { border-color: var(--brand); background: var(--brand-subtle); }
.maint-opt .form-check-input { margin-top: .25rem; flex-shrink: 0; }
/* System health: each public site's mode, and which site to change (diggg / Tiemban / both). */
.maint-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; margin: .5rem 0; }
.maint-site { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .7rem; display: flex; flex-direction: column; }
.maint-site.is-open { background: var(--brand-subtle); }
.maint-site.is-off { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.maint-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; background: #16a34a; vertical-align: .05rem; }
.maint-site.is-off .maint-dot { background: #d97706; }
.maint-pick { display: flex; border: 1px solid var(--bs-border-color); border-radius: .6rem; overflow: hidden; margin: .35rem 0 .2rem; }
.maint-pick label { flex: 1; text-align: center; padding: .45rem .4rem; cursor: pointer; border-right: 1px solid var(--bs-border-color); font-size: .9rem; }
.maint-pick label:last-child { border-right: 0; }
.maint-pick label.is-on { background: var(--brand); color: #fff; font-weight: 600; }
.maint-pick input { position: absolute; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- Tiemban.com (config/sites.php): its colours and logo.
   Navy + teal from the logo; orange for "Sell your business" and Search. Same pages, only these colours change. */
html.site-tiemban:not([data-bs-theme="dark"]) {
  --brand: #0b7a8f; --brand-rgb: 11, 122, 143; --brand-hover: #0a6577; --brand-active: #085363;
  --brand-subtle: #e7f4f7; --brand-border: #a5d6e0; --brand-ink: #062d57;
  --brand-pale: #cfe9ef; --brand-pale-hover: #bde0e8;
  --accent: #c0510f;
  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: var(--brand-subtle); --bs-primary-border-subtle: var(--brand-border); --bs-primary-text-emphasis: var(--brand-ink);
  --bs-link-color: var(--brand); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand-hover); --bs-link-hover-color-rgb: 10, 101, 119;
  --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
  --bs-body-color: #13233a; --bs-body-color-rgb: 19, 35, 58;
}
html.site-tiemban[data-bs-theme="dark"] {
  --brand: #0b7a8f; --brand-rgb: 11, 122, 143; --brand-hover: #0d8ea6; --brand-active: #12a3bd;
  --brand-subtle: #0b2730; --brand-border: #0a5a6a; --brand-ink: #7fd3e2;
  --brand-pale: #0d3a45; --brand-pale-hover: #0a5a6a;
  --accent: #c0510f;
  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: var(--brand-subtle); --bs-primary-border-subtle: var(--brand-border); --bs-primary-text-emphasis: var(--brand-ink);
  --bs-link-color: #7fd3e2; --bs-link-color-rgb: 127, 211, 226; --bs-link-hover-color: #b0e6ef; --bs-link-hover-color-rgb: 176, 230, 239;
  --bs-focus-ring-color: rgba(127, 211, 226, .25);
}
html.site-tiemban[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #7fd3e2; --bs-btn-border-color: #0d8ea6; }

/* ---------------------------------------------------------------- Thonails.com (config/sites.php): charcoal + gold (Viet's pick D,
   not pink: male techs too). Gold only on the logo's nail (weak as text on white); "Đăng" stays orange (.site-other). White on #334155: 10:1. */
html.site-thonails:not([data-bs-theme="dark"]) {
  --brand: #334155; --brand-rgb: 51, 65, 85; --brand-hover: #1e293b; --brand-active: #0f172a;
  --brand-subtle: #f1f5f9; --brand-border: #cbd5e1; --brand-ink: #0f172a;
  --brand-pale: #e2e8f0; --brand-pale-hover: #cbd5e1;
  --accent: #c0510f;
  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: var(--brand-subtle); --bs-primary-border-subtle: var(--brand-border); --bs-primary-text-emphasis: var(--brand-ink);
  --bs-link-color: var(--brand); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand-hover); --bs-link-hover-color-rgb: 30, 41, 59;
  --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
  --bs-body-color: #1e293b; --bs-body-color-rgb: 30, 41, 59;
}
html.site-thonails[data-bs-theme="dark"] {
  --brand: #64748b; --brand-rgb: 100, 116, 139; --brand-hover: #94a3b8; --brand-active: #cbd5e1;
  --brand-subtle: #1e293b; --brand-border: #475569; --brand-ink: #e2e8f0;
  --brand-pale: #273449; --brand-pale-hover: #334155;
  --accent: #c0510f;
  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: var(--brand-subtle); --bs-primary-border-subtle: var(--brand-border); --bs-primary-text-emphasis: var(--brand-ink);
  --bs-link-color: #cbd5e1; --bs-link-color-rgb: 203, 213, 225; --bs-link-hover-color: #f1f5f9; --bs-link-hover-color-rgb: 241, 245, 249;
  --bs-focus-ring-color: rgba(203, 213, 225, .25);
}
html.site-thonails[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #64748b; }
.site-logo { height: 34px; width: auto; display: block; }
.site-logo.is-small { height: 22px; }
.site-logo-dark, [data-bs-theme="dark"] .site-logo-light { display: none; }
[data-bs-theme="dark"] .site-logo-dark { display: block; }
@media (max-width: 575.98px) {
  .site-logo { height: 26px; }
  .site-other .site-nav .post-label { display: none; }
}
/* "Đăng" in the logo's orange (white text: 4.7:1); "Tìm kiếm" stays solid teal (Viet's pick), so the orange filter chips stand alone. */
.site-other .site-nav .btn-primary {
  --bs-btn-bg: #c0510f; --bs-btn-border-color: #c0510f; --bs-btn-hover-bg: #a8460c; --bs-btn-hover-border-color: #a8460c;
  --bs-btn-active-bg: #8f3b0a; --bs-btn-active-border-color: #8f3b0a; --bs-btn-focus-shadow-rgb: 192, 81, 15;
}
.site-other .board-hero { background: linear-gradient(135deg, var(--brand-subtle), var(--surface) 70%); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.1rem 1.1rem .9rem; }
.site-other .board-hero h1 { color: var(--brand-ink); }
.site-tagline { color: var(--brand); font-weight: 700; font-size: .95rem; margin-bottom: .15rem; }

/* "What kind of business?" tiles on the post form (Tiemban). */
.kind-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .kind-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kind-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border: 1px solid var(--bs-border-color); border-radius: .75rem;
  background: var(--surface); color: var(--bs-body-color); font-size: .85rem; text-align: center; line-height: 1.2; }
.kind-tile .bi { font-size: 1.4rem; color: var(--brand); }
.kind-tile:hover { border-color: var(--brand-border); }
.kind-tile.is-on { border-color: var(--accent); background: rgba(192, 81, 15, .08); font-weight: 600; box-shadow: 0 0 0 1px var(--accent); }

/* ---------------------------------------------------------------- chat bubble (layouts/_talk, js/talk.js)
   "talk-" names: ad blockers hide ad-/ads-/banner/sponsor/promo. Every element whose display is set here also has
   a [hidden] rule, or the hidden attribute would do nothing. */
.talk-fab { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1040; width: 60px; height: 60px;
  border: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(var(--brand-rgb), .45); cursor: pointer; transition: transform .15s; }
.talk-fab:hover { background: var(--brand-hover); transform: scale(1.04); }
.talk-fab:focus-visible { outline: 3px solid var(--brand-border); outline-offset: 2px; }
.talk-count { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bs-body-bg); }
/* Above the "Install the app" strip; out of the way while a window or sheet of the page is open. */
body:has(.install-strip:not(.d-none)) .talk-fab { bottom: calc(7.5rem + env(safe-area-inset-bottom)); }
body.modal-open .talk-fab, body:has(.offcanvas.show) .talk-fab, .talk.is-open .talk-fab { display: none; }
.talk-dim { position: fixed; inset: 0; z-index: 1041; background: rgba(0, 0, 0, .35); }
.talk-panel { position: fixed; z-index: 1042; left: 0; right: 0; top: 70px; bottom: 0; display: flex; flex-direction: column;
  background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .2);
  padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }
@media (min-width: 900px) {
  .talk-dim { display: none !important; }
  .talk-panel { left: auto; top: auto; right: 1.25rem; bottom: 1.25rem; width: 380px; height: min(560px, calc(100vh - 48px));
    border-radius: 16px; border: 1px solid var(--bs-border-color); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
}
.talk-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.talk-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-bottom: 1px solid var(--bs-border-color); }
.talk-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-title small { font-weight: 400; color: var(--bs-secondary-color); }
.talk-x { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--bs-body-color);
  display: grid; place-items: center; font-size: 1rem; line-height: 1; cursor: pointer; }
.talk-seg { display: flex; margin: .6rem .85rem 0; padding: 3px; border-radius: 10px; background: var(--bs-tertiary-bg); }
.talk-seg button { flex: 1; border: 0; background: none; border-radius: 8px; padding: .3rem .25rem; font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; cursor: pointer; }
.talk-seg button.is-on { background: var(--bs-body-bg); color: var(--bs-body-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.talk-seg i { font-style: normal; background: #dc2626; color: #fff; border-radius: 8px; padding: 0 .3rem; font-size: .65rem; margin-left: .2rem; }
.talk-chips { display: flex; gap: .4rem; padding: .6rem .85rem .5rem; overflow-x: auto; scrollbar-width: none; }
.talk-chip { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .15rem .65rem;
  font-size: .8rem; background: var(--bs-body-bg); color: var(--bs-body-color); white-space: nowrap; cursor: pointer; }
.talk-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.talk-chip b { background: #dc2626; color: #fff; border-radius: 8px; padding: 0 .3rem; font-size: .65rem; font-weight: 600; }
.talk-s i { margin-right: .25rem; }
.talk-s b { font-weight: 600; }
.talk-rows { border-top: 1px solid var(--bs-border-color); }
.talk-head + .talk-rows { border-top: 0; }
.talk-rows { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.talk-row { display: flex; gap: .65rem; align-items: center; width: 100%; padding: .6rem .85rem; border: 0; border-bottom: 1px solid var(--bs-border-color);
  background: none; color: inherit; text-align: left; cursor: pointer; }
.talk-row:hover { background: var(--bs-tertiary-bg); }
.talk-av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--brand-subtle); color: var(--brand-ink);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.talk-mid { flex: 1; min-width: 0; }
.talk-n { display: flex; justify-content: space-between; gap: .4rem; font-weight: 600; }
.talk-n span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-n span:last-child { font-weight: 400; font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.talk-s { font-size: .75rem; color: var(--brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-l { font-size: .85rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-row.is-unread .talk-l { color: var(--bs-body-color); font-weight: 600; }
.talk-dot { min-width: 20px; height: 20px; border-radius: 10px; background: #dc2626; color: #fff; font-size: .7rem; display: grid; place-items: center; padding: 0 .3rem; }
.talk-none { padding: 2rem 1rem; text-align: center; color: var(--bs-secondary-color); font-size: .9rem; }
.talk-ctx { display: flex; gap: .6rem; align-items: center; padding: .45rem .85rem; background: var(--brand-subtle); color: var(--brand-ink); font-size: .78rem; }
.talk-ctx span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-ctx a { color: var(--brand-ink); font-weight: 600; white-space: nowrap; }
.talk-hint { padding: .5rem .85rem 0; font-size: .78rem; color: var(--bs-secondary-color); }
.talk-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .75rem .85rem; display: flex; flex-direction: column; gap: .35rem; }
.talk-b { max-width: 80%; padding: .45rem .7rem; border-radius: 14px; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-b small { display: block; font-size: .65rem; opacity: .75; margin-top: .1rem; text-align: right; }
.talk-b.in { align-self: flex-start; background: var(--bs-tertiary-bg); border-bottom-left-radius: 4px; }
.talk-b.out { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.talk-msgs .talk-none { margin: auto; }
.talk-typing { padding: 0 .85rem .25rem; font-size: .78rem; color: var(--bs-secondary-color); font-style: italic; }
.talk-closed { margin: 0 .85rem .5rem; padding: .45rem .7rem; border-radius: 10px; background: var(--bs-tertiary-bg); font-size: .85rem; color: var(--bs-secondary-color); text-align: center; }
.talk-err { margin: 0 .85rem .4rem; font-size: .82rem; color: #dc2626; }
.talk-quick { display: flex; gap: .4rem; overflow-x: auto; padding: .45rem .85rem; border-top: 1px solid var(--bs-border-color); scrollbar-width: none; }
.talk-quick button { white-space: nowrap; border: 1px solid var(--brand); color: var(--brand-ink); background: var(--bs-body-bg); border-radius: 999px; padding: .15rem .65rem; font-size: .8rem; cursor: pointer; }
.talk-send { display: flex; gap: .5rem; align-items: flex-end; padding: .45rem .6rem .6rem; border-top: 1px solid var(--bs-border-color); }
.talk-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.talk-box, .talk-name { width: 100%; border: 1px solid var(--bs-border-color); border-radius: 18px; padding: .45rem .8rem; font: inherit; font-size: 16px;
  background: var(--bs-body-bg); color: var(--bs-body-color); resize: none; max-height: 140px; }
.talk-box:focus, .talk-name:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 .15rem rgba(var(--brand-rgb), .2); }
/* "Will I get a text when they answer?" (on: quiet; off / consent: orange; stop: grey) */
.talk-alert { margin: 0 .65rem .4rem; padding: .4rem .65rem; border-radius: 10px; font-size: .78rem; display: flex; gap: .45rem; align-items: center; }
.talk-alert.is-on { color: var(--bs-secondary-color); padding: .1rem .7rem; }
.talk-alert.is-off, .talk-alert.is-consent { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.talk-alert.is-consent { display: block; color: var(--bs-body-color); }
.talk-alert.is-stop { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .talk-alert.is-off, [data-bs-theme="dark"] .talk-alert.is-consent { background: #2a1a0f; border-color: #7c2d12; color: #fdba74; }
.talk-alert-tx { flex: 1; }
.talk-alert-top { font-weight: 600; color: #9a3412; margin-bottom: .3rem; }
[data-bs-theme="dark"] .talk-alert-top { color: #fdba74; }
.talk-alert label { display: flex; gap: .45rem; align-items: flex-start; font-size: .74rem; line-height: 1.35; cursor: pointer; }
.talk-alert label input { margin-top: .15rem; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--brand); }
.talk-alert-small { font-size: .7rem; color: var(--bs-secondary-color); margin: .3rem 0 0 1.5rem; }
.talk-alert-small a { color: var(--brand-ink); }
.talk-linkbtn { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; font-size: inherit; cursor: pointer; }
.talk-pillbtn { border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: .75rem; padding: .2rem .7rem; white-space: nowrap; cursor: pointer; }
.talk-alert.is-consent .talk-pillbtn { margin: .45rem 0 0 1.5rem; }
.talk-pillbtn:disabled { opacity: .45; cursor: default; }
.talk-go { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.talk-go:disabled { opacity: .5; }
/* Phones with a home bar and rounded corners (viewport-fit=cover): keep the reply box and send button clear of them. */
.talk-panel { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.talk-send { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
.talk-panel { padding-bottom: 0; }
.kb-open .talk-send, .kb-open .msgr-foot { padding-bottom: .6rem; }
/* The chat is open: the "Get the app" strip would cover the reply box. */
body:has(.talk-panel:not([hidden])) .install-strip { display: none !important; }
/* The hidden attribute must win over the display rules above. */
.talk-fab[hidden], .talk-count[hidden], .talk-dim[hidden], .talk-panel[hidden], .talk-view[hidden], .talk-seg[hidden], .talk-seg i[hidden], .talk-chips[hidden], .talk-ctx a[hidden],
.talk-ctx[hidden], .talk-hint[hidden], .talk-typing[hidden], .talk-closed[hidden], .talk-err[hidden], .talk-quick[hidden], .talk-send[hidden],
.talk-name[hidden], .talk-alert[hidden] { display: none !important; }
@media print { .talk { display: none !important; } }

/* ===================================================================== the conversation page (/l/m/{key})
   A messenger-style chat of its own, full screen: the top bar stays put, the messages scroll, the reply box sits on top
   of the keyboard (msgr.js sizes .msgr to the visible part of the screen). On a computer: a centred 600px column. */
html:has(body.msgr-page), body.msgr-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.msgr-page { background: var(--bs-tertiary-bg); }
.msgr { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; display: flex; flex-direction: column; max-width: 600px; margin: 0 auto;
  background: var(--bs-body-bg); will-change: transform; }
@media (min-width: 601px) { .msgr { border-left: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); } }
.msgr-bar { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: calc(.45rem + env(safe-area-inset-top)) .6rem .5rem;
  border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg); position: relative; z-index: 4; }
.msgr-ic { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0;
  background: none; color: var(--bs-body-color); font-size: 1.2rem; flex: 0 0 2.2rem; text-decoration: none; }
.msgr-ic:hover { background: var(--bs-tertiary-bg); }
.msgr-logo { width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: .6rem; overflow: hidden; flex: 0 0 2.1rem; background: var(--brand); }
.msgr-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.msgr-av { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.3rem;
  background: var(--brand-subtle); color: var(--brand-ink); font-weight: 800; font-size: .85rem; }
.msgr-who { flex: 1 1 auto; min-width: 0; display: block; text-align: left; border: 0; background: none; padding: 0; color: inherit; line-height: 1.2; }
.msgr-who h1 { font-size: 1rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-sub { display: block; font-size: .78rem; color: var(--brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.msgr-who .msgr-sub::after { content: " ▾"; color: var(--bs-secondary-color); }
.msgr-sub.is-plain { color: var(--bs-secondary-color); }
.msgr-card { position: absolute; left: .5rem; right: .5rem; top: calc(3.6rem + env(safe-area-inset-top)); z-index: 6; display: flex; gap: .7rem;
  padding: .7rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.msgr-card-ph { width: 4.5rem; height: 4.5rem; border-radius: .65rem; object-fit: cover; flex: 0 0 4.5rem; }
.msgr-card-ph.is-empty { display: flex; align-items: center; justify-content: center; background: var(--brand-subtle); color: var(--brand-ink); font-size: 1.6rem; }
.msgr-card-tx { min-width: 0; }
.msgr-card-t { font-weight: 700; font-size: .95rem; }
.msgr-card-c { font-size: .8rem; color: var(--brand-ink); margin: .1rem 0; }
.msgr-card-p { font-size: .85rem; }
.msgr-pill { display: inline-block; margin-top: .35rem; background: var(--brand); color: #fff; border-radius: 999px; padding: .2rem .8rem; font-size: .82rem;
  font-weight: 600; text-decoration: none; }
.msgr-pill:hover { color: #fff; background: var(--brand-hover); }
.msgr-note { flex: 0 0 auto; font-size: .85rem; padding: .45rem .8rem; background: var(--brand-subtle); color: var(--brand-ink); }
.msgr-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .75rem .8rem .5rem;
  display: flex; flex-direction: column; }
.msgr-msgs .msg-list { margin-top: auto; }
.msgr .msg-bubble { max-width: 80%; }
@media (min-width: 601px) { .msgr .msg-bubble { max-width: 70%; } }
.msgr .msg-time { text-align: right; }
[data-bs-theme="dark"] .msgr .msg-theirs, [data-bs-theme="dark"] .msgr-typing { background: var(--bs-secondary-bg); }
.msgr .sr-chip { color: var(--brand-ink); }
.msgr-day { align-self: center; font-size: .75rem; color: var(--bs-secondary-color); margin: .35rem 0 .15rem; }
.msgr-typing { align-self: flex-start; display: inline-flex; gap: .25rem; padding: .65rem .8rem; margin-top: .4rem; border-radius: 1rem;
  border-bottom-left-radius: .3rem; background: var(--bs-tertiary-bg); }
.msgr-typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--bs-secondary-color); animation: msgr-dot 1.2s infinite ease-in-out; }
.msgr-typing i:nth-child(3) { animation-delay: .15s; } .msgr-typing i:nth-child(4) { animation-delay: .3s; }
@keyframes msgr-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msgr-typing i { animation: none; } }
.msgr-private { font-size: .75rem; color: var(--bs-secondary-color); text-align: center; margin: 1rem .5rem 0; }
.msgr-foot { flex: 0 0 auto; background: var(--bs-body-bg); padding: 0 env(safe-area-inset-right) max(.25rem, env(safe-area-inset-bottom)) env(safe-area-inset-left); border-top: 1px solid var(--bs-border-color); }
.msgr-quick { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .5rem .7rem 0; }
.msgr-quick::-webkit-scrollbar { display: none; }
.msgr-alert { font-size: .8rem; color: var(--bs-secondary-color); padding: .4rem .8rem 0; }
.msgr-alert label { display: flex; gap: .45rem; align-items: flex-start; color: var(--bs-body-color); margin: .25rem 0; }
.msgr-alert label input { margin-top: .2rem; flex: 0 0 auto; }
.msgr-alert-small { font-size: .72rem; margin-bottom: .3rem; }
.msgr-linkbtn { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; font-size: inherit; }
.msgr-pillbtn { border: 0; background: var(--brand); color: #fff; border-radius: 999px; padding: .15rem .75rem; font-size: .8rem; font-weight: 600; }
.msgr-pillbtn:disabled { opacity: .5; }
.msgr-send { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; padding: .5rem .6rem .6rem; }
.msgr-send textarea { flex: 1 1 0; min-width: 0; resize: none; border: 1px solid var(--bs-border-color); border-radius: 1.3rem; padding: .5rem .9rem;
  font-size: 1rem; line-height: 1.35; max-height: 140px; background: var(--bs-body-bg); color: var(--bs-body-color); }
.msgr-send textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 .15rem rgba(var(--brand-rgb), .2); }
.msgr-go { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 2.5rem; }
.msgr-go:disabled { opacity: .6; }
.msgr-err { flex: 0 0 100%; font-size: .82rem; color: var(--bs-danger-text-emphasis); }
.msgr-closed { padding: .8rem; text-align: center; font-size: .9rem; color: var(--bs-secondary-color); }
.msgr-shade { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.35); }
.msgr-shade.is-clear { background: transparent; }
.msgr-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; max-height: 85%; overflow-y: auto; background: var(--bs-body-bg);
  border-radius: 1.1rem 1.1rem 0 0; padding: .5rem 0 calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.2); }
.msgr-sheet h2 { font-size: 1.05rem; font-weight: 700; margin: .25rem 1.1rem .4rem; }
.msgr-sheet p { margin: 0 1.1rem .5rem; font-size: .9rem; color: var(--bs-secondary-color); }
.msgr-grab { width: 2.3rem; height: .25rem; border-radius: 2px; background: var(--bs-border-color); margin: 0 auto .5rem; }
.msgr-opt { display: flex; width: 100%; gap: .8rem; align-items: center; padding: .7rem 1.1rem; border: 0; background: none; color: var(--bs-body-color);
  text-align: left; text-decoration: none; font-size: .95rem; cursor: pointer; margin: 0; }
.msgr-opt:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.msgr-opt.is-red, .msgr-opt.is-red:hover { color: var(--bs-danger); }
.msgr-opt-ic { width: 1.4rem; text-align: center; flex: 0 0 1.4rem; }
.msgr-opt-tx { flex: 1 1 auto; min-width: 0; }
.msgr-opt-tx small { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.msgr-switch { appearance: none; width: 2.5rem; height: 1.45rem; border-radius: 1rem; background: var(--bs-secondary-bg); position: relative; flex: 0 0 2.5rem;
  cursor: pointer; transition: background .15s; margin: 0; border: 1px solid var(--bs-border-color); }
.msgr-switch::after { content: ""; position: absolute; left: .12rem; top: .1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.msgr-switch:checked { background: var(--brand); border-color: var(--brand); }
.msgr-switch:checked::after { left: 1.18rem; }
.msgr-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.msgr-step { padding: .1rem 1.1rem .7rem 3.3rem; }
.msgr-step p { margin: 0 0 .5rem; }
.msgr-btn { display: block; margin: .6rem 1.1rem 0; padding: .7rem; border-radius: .8rem; text-align: center; font-weight: 600; text-decoration: none;
  background: var(--brand); color: #fff; }
.msgr-btn:hover { color: #fff; background: var(--brand-hover); }
.msgr-btn.is-quiet { background: none; color: var(--brand-ink); }
.msgr-card[hidden], .msgr-typing[hidden], .msgr-alert[hidden], .msgr-err[hidden], .msgr-shade[hidden], .msgr-sheet[hidden], .msgr-step[hidden] { display: none !important; }
@media print { .msgr { position: static; height: auto !important; transform: none !important; } .msgr-foot, .msgr-sheet, .msgr-shade { display: none !important; } }

/* ===================================================================== "Manage your ad" (/r/{token})
   For people who don't use phones much: a status card with one big button, a short list, one task per sheet. */
.mg { max-width: 600px; margin: 0 auto; }
.mg-crumb { margin: -.25rem 0 .5rem; font-size: .9rem; }
.mg-crumb a { color: var(--bs-secondary-color); text-decoration: none; }
.mg-card { background: var(--bs-body-bg); border-radius: 1.1rem; padding: 1rem; margin-bottom: .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mg-top { display: flex; gap: .85rem; align-items: center; }
.mg-thumb { width: 4.2rem; height: 4.2rem; border-radius: .9rem; object-fit: cover; flex: 0 0 4.2rem; }
.mg-thumb.is-empty { display: flex; align-items: center; justify-content: center; background: var(--brand-subtle); color: var(--brand-ink); font-size: 1.7rem; }
.mg-name { min-width: 0; }
.mg-name h1 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.25; overflow-wrap: anywhere; }
.mg-pill { display: inline-block; border-radius: 999px; padding: .15rem .65rem; font-size: .82rem; font-weight: 700; }
.mg-pill.is-live { background: #ecfdf3; color: #15803d; }
.mg-pill.is-soon { background: #fff7ed; color: #b45309; }
.mg-pill.is-off { background: #fef2f2; color: #b91c1c; }
.mg-pill.is-info { background: var(--brand-subtle); color: var(--brand-ink); }
[data-bs-theme="dark"] .mg-pill.is-live { background: #052e16; color: #86efac; }
[data-bs-theme="dark"] .mg-pill.is-soon { background: #2a1a0f; color: #fdba74; }
[data-bs-theme="dark"] .mg-pill.is-off { background: #2a0f0f; color: #fca5a5; }
.mg-stats { display: flex; gap: .5rem; margin-top: .9rem; }
.mg-stats > div { flex: 1; background: var(--bs-tertiary-bg); border-radius: .8rem; padding: .5rem .3rem; text-align: center; line-height: 1.2; }
.mg-stats b { display: block; font-size: 1.35rem; }
.mg-stats span { font-size: .78rem; color: var(--bs-secondary-color); }
.mg-note { margin: .85rem 0 0; font-size: .92rem; color: var(--bs-secondary-color); }
.mg-note.is-warn { color: var(--bs-warning-text-emphasis); }
.mg-big { display: block; width: 100%; margin-top: .85rem; padding: .85rem 1rem; border-radius: .9rem; border: 2px solid var(--brand); background: var(--brand);
  color: #fff; font-weight: 700; font-size: 1.05rem; text-align: center; text-decoration: none; cursor: pointer; }
.mg-big:hover { color: #fff; background: var(--brand-hover); border-color: var(--brand-hover); }
.mg-big.mg-ghost { background: #cdebe6; border-color: #cdebe6; color: var(--brand-ink); }   /* solid, lighter: the second button */
.mg-big.mg-ghost:hover { background: #b6e0d9; border-color: #b6e0d9; color: var(--brand-ink); }
[data-bs-theme="dark"] .mg-big.mg-ghost { background: #134e4a; border-color: #134e4a; color: #ccfbf1; }
[data-bs-theme="dark"] .mg-big.mg-ghost:hover { background: #115e59; border-color: #115e59; }
.mg-big.mg-red { background: #dc2626; border-color: #dc2626; }
.mg-big.mg-red:hover { background: #b91c1c; border-color: #b91c1c; }
.mg-link { display: block; text-align: center; margin-top: .7rem; font-size: .92rem; }
.mg-list { padding: .2rem 1rem; }
.mg-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; min-height: 3.6rem; color: var(--bs-body-color); text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color); }
.mg-row:last-child { border-bottom: 0; }
.mg-row:hover { color: var(--bs-body-color); }
.mg-ic { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--brand-subtle); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex: 0 0 2.5rem; }
.mg-tx { flex: 1; min-width: 0; }
.mg-tx b { display: block; font-size: 1.02rem; }
.mg-tx small { display: block; font-size: .85rem; color: var(--bs-secondary-color); }
.mg-badge { background: #dc2626; color: #fff; border-radius: 999px; font-size: .8rem; font-weight: 700; padding: .05rem .5rem; }
.mg-chev { color: var(--bs-secondary-color); font-size: 1.5rem; line-height: 1; }
.mg-private { font-size: .82rem; color: var(--bs-secondary-color); text-align: center; margin: 1rem .5rem; }
/* The sheets: from the bottom on a phone, a box in the middle on a computer. */
html.mg-lock, html.mg-lock body { overflow: hidden; }
.mg-shade { position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,.45); }
.mg-sheet { position: fixed; z-index: 1051; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--bs-body-bg); border-radius: 1.2rem 1.2rem 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
@media (min-width: 768px) {
  .mg-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(600px, 92vw); max-height: 88vh; border-radius: 1.2rem; }
}
.mg-sheet-head { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--bs-border-color); flex: 0 0 auto; }
.mg-sheet-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; flex: 1; }
.mg-x { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 1.05rem; flex: 0 0 2.5rem; }
.mg-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
.mg-lead { font-size: .92rem; color: var(--bs-secondary-color); }
.mg-h { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.mg-part { border-top: 1px solid var(--bs-border-color); margin-top: 1.25rem; padding-top: 1.1rem; }
.mg-sheet-body > .mg-part:first-child, .mg-sheet-body > :first-child .mg-part:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.mg-sticky { position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); background: var(--bs-body-bg); padding: .75rem 0 .25rem; margin-top: .5rem; }
.mg-choices { display: grid; gap: .6rem; margin-bottom: .25rem; }
.mg-choice { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 2px solid var(--bs-border-color); border-radius: .9rem; font-weight: 600;
  font-size: 1.02rem; cursor: pointer; margin: 0; }
.mg-choice input { width: 1.2rem; height: 1.2rem; accent-color: var(--brand); flex: 0 0 auto; }
.mg-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle); }
.mg-e { font-size: 1.35rem; }
.mg-err { color: var(--bs-danger-text-emphasis); font-size: .9rem; margin-top: .4rem; }
.mg-file { cursor: pointer; }
.mg-shade[hidden], .mg-sheet[hidden], .mg-big[hidden] { display: none !important; }
@media print { .mg-sheet, .mg-shade { display: none !important; } }
/* "Get more calls": one option open at a time, one payment button at the bottom of the sheet. */
.mg-opt { border: 2px solid var(--bs-border-color); border-radius: 1rem; margin-bottom: .65rem; }
.mg-opt.is-open { border-color: var(--brand); }
.mg-opt-head { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .8rem .9rem; border: 0; background: none; color: var(--bs-body-color); text-align: left; }
.mg-opt-e { font-size: 1.4rem; flex: 0 0 auto; }
.mg-opt-tx { flex: 1; min-width: 0; }
.mg-opt-tx b { display: block; font-size: 1rem; }
.mg-opt-tx small { display: block; font-size: .82rem; color: var(--bs-secondary-color); }
.mg-opt-p { font-weight: 800; font-size: .92rem; white-space: nowrap; }
.mg-opt.is-open .mg-chev { transform: rotate(90deg); }
.mg-chev { transition: transform .15s; display: inline-block; }
.mg-opt-body { padding: .2rem .9rem 1rem; border-top: 1px solid var(--bs-border-color); padding-top: .8rem; }
.mg-have { background: var(--brand-subtle); color: var(--brand-ink); border-radius: .7rem; padding: .55rem .75rem; font-size: .88rem; margin-bottom: .75rem; }
.mg-checks { display: grid; gap: .5rem; }
.mg-check { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 2px solid var(--bs-border-color); border-radius: .8rem; cursor: pointer; margin: 0; }
.mg-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); flex: 0 0 auto; }
.mg-check:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle); }
.mg-sheet-foot { flex: 0 0 auto; border-top: 1px solid var(--bs-border-color); padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: var(--bs-body-bg); }
.mg-sheet-foot .mg-big { margin-top: .45rem; }
.mg-big:disabled { opacity: .45; cursor: default; }
.mg-paysum { font-weight: 700; font-size: 1rem; text-align: center; }
.mg-paynote { font-size: .75rem; color: var(--bs-secondary-color); text-align: center; margin-top: .4rem; }
.mg-opt-body[hidden] { display: none !important; }

/* ===================================================================== My account: ads first, then one short list
   (a menu on the left on a computer). Uses the manage page's mg-card / mg-row / mg-big / mg-pill. */
.acct { max-width: 1000px; margin: 0 auto; }
.acct-hello h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.acct-who { font-size: .88rem; color: var(--bs-secondary-color); margin-bottom: .6rem; }
.acct-grid { display: flex; flex-direction: column; gap: .2rem; }
.acct-side { order: 2; }
.acct-main { order: 1; min-width: 0; }
.acct-grid.is-page .acct-side { display: none; }
.acct.is-page .acct-hello { display: none; }
.acct-only-wide { display: none !important; }
.acct-sec { font-size: .8rem; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; margin: 1rem .2rem .5rem; }
.mg-big.acct-signout { color: #b91c1c; background: #fee2e2; border-color: #fee2e2; }
.mg-big.acct-signout:hover { color: #991b1b; background: #fecaca; border-color: #fecaca; }
[data-bs-theme="dark"] .mg-big.acct-signout { color: #fecaca; background: #450a0a; border-color: #450a0a; }

.acct-go { margin-left: auto; font-weight: 700; white-space: nowrap; }
.acct-ad-t { font-weight: 700; font-size: 1rem; line-height: 1.25; margin-bottom: .25rem; overflow-wrap: anywhere; }

.acct-btns { display: flex; gap: .5rem; margin-top: .3rem; }
.acct-btns > *, .acct-btns form { flex: 1; }
.acct-btns .mg-big { margin-top: .5rem; padding: .65rem .5rem; font-size: 1rem; }
.acct-hc { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .8rem .95rem; margin-bottom: .9rem; }
.acct-hc.has-tabs { padding-bottom: 0; }
.acct-crumb { display: inline-flex; align-items: center; gap: .15rem; font-size: .82rem; font-weight: 600; color: var(--brand); background: var(--brand-subtle); border-radius: 99px; padding: .2rem .65rem .2rem .45rem; margin-bottom: .55rem; text-decoration: none; }
.acct-bar { display: flex; align-items: center; gap: .65rem; }
.acct-tabs { display: flex; gap: 1.1rem; margin-top: .55rem; overflow-x: auto; scrollbar-width: none; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 0 .5rem; font-size: .88rem; font-weight: 600; color: var(--bs-secondary-color); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.acct-tabs a.on { color: var(--bs-body-color); border-bottom-color: var(--bs-body-color); }
.acct-tabs a span { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1; min-width: 1.25rem; padding: .22rem .4rem; text-align: center; }
.acct-tabs a.on span { background: var(--brand-deep); color: #fff; }
.acct-tile { flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: grid; place-items: center; font-size: 1.2rem; background: var(--brand-subtle); }
.acct-bar-tx { flex: 1; min-width: 0; }
.acct-title { font-size: 1.25rem; font-weight: 800; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.acct-sum { font-size: .82rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-act { flex-shrink: 0; font-size: .85rem; font-weight: 600; color: var(--brand); border: 1px solid var(--brand); border-radius: .55rem; padding: .3rem .6rem; text-decoration: none; white-space: nowrap; }
.mg-row.is-on { background: var(--brand-subtle); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 992px) {
  .acct-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .acct-side, .acct-grid.is-page .acct-side { display: block; grid-column: 1; grid-row: 1; position: sticky; top: 5rem; }
  .acct-main { grid-column: 2; grid-row: 1; }
  .acct-only-wide { display: flex !important; }
  .acct-sec-phone { display: none; }
  .acct-crumb { display: none; }

  .acct.is-page .acct-hello { display: block; }
}
/* Archive (My account): a grey button on ads that are over; just the icon next to Renew. */

.acct-old { filter: grayscale(1); opacity: .75; }
.acct-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1060; width: min(560px, calc(100% - 1.5rem));
  display: flex; align-items: center; gap: .6rem; background: #111827; color: #fff; border-radius: .9rem; padding: .75rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.acct-undo { margin-left: auto; border: 0; background: none; color: #5eead4; font-weight: 700; padding: .2rem .4rem; }

.acct-toast { animation: acct-toast-out .4s ease 10s forwards; }
@keyframes acct-toast-out { to { opacity: 0; visibility: hidden; } }

/* A panel is open (Filters, manage-ad sheets): the "Get the app" strip would cover its button. */
html.mg-lock .install-strip { display: none !important; }

/* ---- Board, clearer look: category pills that wrap onto more lines (no sideways swipe) and each ad as its own white card.
   Styling only: same links, same page, no scripts. ---- */
.chip-strip { flex-wrap: wrap; gap: .4rem; overflow: visible; box-shadow: none; touch-action: auto; }
.chip { border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--surface); padding: .38rem .75rem;
  color: var(--bs-body-color); font-weight: 600; font-size: .875rem; gap: .3rem; }
.chip .chip-n { background: none; color: var(--bs-secondary-color); padding: 0; font-weight: 500; font-size: .8rem; }
.chip:hover { background: var(--surface); border-color: var(--brand-border); color: var(--brand-ink); }
.chip.active, .chip.active:hover { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chip.active > .bi { color: #fff; }
.chip.active .chip-n { background: none; color: rgba(255, 255, 255, .85); }
.row-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; background: none; border: 0; border-radius: 0; overflow: visible; }
.row-list > .row-item, .row-list > .row-item:last-child { background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: .8rem; overflow: hidden; }
.row-link { padding: .65rem 2.6rem .65rem .65rem; gap: .75rem; }
.row-thumb { flex-basis: 4.75rem; width: 4.75rem; height: 4.75rem; border-radius: .6rem; }
.row-title { font-weight: 700; }
.row-price { color: var(--brand-ink); font-weight: 700; }
[data-bs-theme="dark"] .row-price { color: #5eead4; }
.row-price.row-ask, [data-bs-theme="dark"] .row-price.row-ask { color: var(--bs-secondary-color); font-weight: 600; font-size: .9rem; }
.row-ask-more { font-weight: 500; }
.row-pin { margin-right: .2rem; }
/* Jobs / services: two lines of the ad's words, phones included. */
.row-words .row-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; line-height: 1.35; }
.row-list > .row-item.is-pinned { border: 2px solid #f5b301; background: #fffbeb; box-shadow: none; }
[data-bs-theme="dark"] .row-list > .row-item.is-pinned { border-color: #a57a06; background: #2b2616; }
.partner-row { grid-column: 1 / -1; border: 1px solid var(--bs-border-color); border-radius: .8rem; }
@media (min-width: 768px) {
  .row-link { padding: .75rem 2.9rem .75rem .75rem; }
  .row-thumb { flex-basis: 5rem; width: 5rem; height: 5rem; }
}
/* Wide screens: two cards per line; the price goes under the title again (half-width cards). */
@media (min-width: 1200px) {
  .row-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row-top { flex-direction: column; align-items: stretch; gap: .05rem; }
  .row-title { -webkit-line-clamp: 2; }
  .row-price { max-width: none; }
}
/* The city is what people look for first: it keeps its full width; the category / business name shorten instead. */
.row-meta > .row-place, .row-meta > .text-nowrap { flex-shrink: 0; max-width: 100%; }

/* ---- Board top, tidier: the 3 start boxes as one slim row; light green category buttons on one line you swipe
   sideways on phones (plain scrolling; the right edge fades so it's clear there are more). Styling only. ---- */

.chip-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin: .7rem 0 .3rem .1rem; }
.chip-label + .chip-strip { margin-top: 0; }
.chip-strip { gap: .45rem; padding: .1rem 0 .2rem; }
.chip { background: var(--brand-subtle); border: 1.5px solid #8fcfc5; color: var(--brand-ink); font-weight: 700; font-size: .92rem; padding: .45rem .85rem; }
.chip > .bi { color: var(--brand); }
.chip .chip-n { background: var(--surface); color: var(--brand); border-radius: 999px; padding: 0 .45rem; font-weight: 600; font-size: .75rem; line-height: 1.5; }
.chip:hover { background: #d5ece8; border-color: var(--brand); color: var(--brand-ink); }
.chip.active, .chip.active:hover { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(var(--brand-rgb), .35); }
.chip.active > .bi { color: #fff; }
.chip.active .chip-n { background: rgba(255, 255, 255, .25); color: #fff; }
[data-bs-theme="dark"] .chip { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
@media (max-width: 767.98px) {
  .chip-strip { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding-right: 2.5rem;   /* no negative margin: it made the whole page slide sideways on phones */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .chip-strip::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}

.chip.active, .chip.active:hover { box-shadow: none; }
@media (max-width: 767.98px) { .chip-strip.mb-3 { margin-bottom: .5rem !important; } }

/* ---- "Ads | Workers" tabs on top of the search box (board + workers page). Plain links; the open one is white and joined to the card. ---- */
.search-tabs { position: relative; z-index: 3; display: flex; gap: .3rem; padding: 0 .55rem; margin-bottom: -1px; }
.search-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem .45rem;
  border: 1px solid #b9e0d9; border-bottom: 0; border-radius: .8rem .8rem 0 0; background: var(--brand-subtle); color: var(--brand);
  font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.2; }
.search-tab:hover { background: #d5ece8; color: var(--brand-ink); }
.search-tab.is-on, .search-tab.is-on:hover { background: var(--surface); color: var(--bs-body-color); border-color: var(--bs-border-color); padding-bottom: calc(.45rem + 1px); }
.search-tab.is-on > .bi { color: var(--brand); }
[data-bs-theme="dark"] .search-tab { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.search-tabbed { border: 1px solid var(--bs-border-color) !important; }
@media (min-width: 768px) { .search-tab { flex: 0 0 11rem; } }
/* Workers page: "+ Add your profile", small and light green. */
.add-profile-btn { background: var(--brand-subtle); border: 1px solid #99d5cc; color: var(--brand); border-radius: 999px; font-weight: 600; }
.add-profile-btn:hover { background: #d5ece8; color: var(--brand-ink); border-color: var(--brand); }
/* Very small phones (iPhone SE 1st gen, 320px): the header must fit, or the whole page slides sideways. */
@media (max-width: 359.98px) {
  .site-nav .ms-auto.gap-2 { gap: .1rem !important; }
  .site-nav .nav-btn { padding-inline: .35rem; }
  .site-nav .btn-primary .post-label { font-size: .8rem; }
  .site-nav .navbar-brand { margin-right: .25rem; }
}

/* ---- Extra phones (AdPhones): the fixed main number, "More phones" on Post an ad / Manage, and the numbers after "Show number". ---- */
.phone-fixed { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg);
  padding: .45rem .75rem; min-height: 2.4rem; font-variant-numeric: tabular-nums; }
.phone-fixed > .bi { color: var(--bs-secondary-color); }
.phone-fixed-tag { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--brand); background: var(--brand-subtle); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.xp { border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }
.xp-title { font-weight: 700; }
.xp-title small { font-weight: 500; color: var(--bs-secondary-color); }
.xp-list { display: grid; gap: .4rem; margin-top: .5rem; }
.xp-row { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .7rem; background: var(--surface); cursor: pointer; margin: 0; }
.xp-row:has(input:checked) { border-color: #8fcfc5; background: var(--brand-subtle); }
.xp-row .form-check-input { margin: 0; }
.xp-label { font-size: .75rem; font-weight: 700; color: var(--brand-ink); background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 0 .5rem; }
.xp-add { margin-top: .6rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; color: var(--brand);
  background: var(--brand-subtle); border: 1px solid #99d5cc; border-radius: 999px; padding: .35rem .8rem; }
.xp-add:hover { background: #d5ece8; }
.xp-new { border: 1.5px dashed #8fcfc5; border-radius: .75rem; padding: .7rem; margin-top: .6rem; background: var(--surface); }
.xp-item { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .35rem .5rem .35rem .75rem; margin-bottom: .4rem; background: var(--surface); }
.xp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-rename { flex: 1 1 auto; min-width: 0; }
.reveal-list { display: grid; gap: .5rem; margin-bottom: .5rem; }
.reveal-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .6rem .7rem; background: var(--surface); }
.reveal-top { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.reveal-label { margin-left: auto; font-size: .75rem; color: var(--brand-ink); background: var(--brand-subtle); border-radius: 999px; padding: .05rem .55rem; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-acts { display: flex; gap: .4rem; margin-top: .5rem; }
.reveal-acts .btn { flex: 1 1 0; }
.xp-add[hidden], .xp-new[hidden], .reveal-list[hidden], .xp-list[hidden] { display: none; }
/* My account → "Ads that show my number" */
.xn-card { padding: .9rem; margin-bottom: .6rem; }
.xn-thumb { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; border-radius: .6rem; overflow: hidden; background: var(--brand-subtle); color: var(--brand);
  display: grid; place-items: center; font-size: 1.4rem; }
.xn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mg-big.xn-remove { background: #fde8e8; color: #b91c1c; border-color: #fde8e8; }
.mg-big.xn-remove:hover { background: #fbd5d5; }
[data-bs-theme="dark"] .mg-big.xn-remove { background: #4a1d1d; color: #fca5a5; border-color: #4a1d1d; }
/* iPhone Safari zooms into inputs under 16px: the label boxes on the Phones sheet stay at 16px. */
.xp-rename { display: flex; gap: .35rem; align-items: center; }
.xp-rename .form-control { font-size: 16px; padding: .3rem .5rem; min-width: 0; }
.xp-item { flex-wrap: wrap; }
@media (max-width: 767.98px) { [data-biz-pick] { font-size: 16px; } }
/* The "d" logo as a picture (main site): same box as the old text mark. */
.logo-mark-img { padding: 0; object-fit: cover; background: none; box-shadow: none; display: inline-block; }

/* My account → Messages: the list (like Messenger). Ad photo (or category icon) with the other person's initial,
   name + time, the ad with a "Your ad" / "You asked" tag, the last message; new ones tinted with a count. */

.mt-list { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .9rem; overflow: hidden; }
.mt-item + .mt-item { border-top: 1px solid var(--bs-border-color); }
.mt-item > a { display: flex; gap: .7rem; padding: .75rem; color: inherit; text-decoration: none; align-items: flex-start; }
.mt-item > a:active { background: var(--bs-tertiary-bg); }
@media (hover: hover) { .mt-item > a:hover { background: var(--bs-tertiary-bg); } }
.mt-item.is-new { background: color-mix(in srgb, var(--brand) 7%, var(--bs-body-bg)); }
.mt-pic { position: relative; flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; }
.mt-pic img, .mt-icon { width: 3.25rem; height: 3.25rem; border-radius: .75rem; object-fit: cover; display: block; background: var(--bs-secondary-bg); }
.mt-icon { display: grid; place-items: center; font-size: 1.4rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg)); }
.mt-ini { position: absolute; right: -.3rem; bottom: -.3rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: .78rem; display: grid; place-items: center; border: 2px solid var(--bs-body-bg); }
.mt-ini.asked { background: #6366f1; }
.mt-text { flex: 1; min-width: 0; display: block; }
.mt-l1, .mt-l3 { display: flex; align-items: baseline; gap: .4rem; }
.mt-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-time { margin-left: auto; font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; }
.mt-item.is-new .mt-time { color: var(--brand); font-weight: 700; }
.mt-ad { display: block; font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-tag { display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 99px; padding: 0 .45rem; margin-right: .3rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg)); }
.mt-tag.asked { color: #3730a3; background: #eef2ff; }
.mt-l3 { margin-top: .1rem; align-items: center; }
.mt-msg { flex: 1; min-width: 0; font-size: .9rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-item.is-new .mt-msg { color: var(--bs-body-color); font-weight: 600; }
.mt-count { background: var(--brand); color: #fff; border-radius: 99px; font-size: .75rem; font-weight: 700; min-width: 1.25rem; height: 1.25rem; padding: 0 .4rem; display: grid; place-items: center; }
[data-bs-theme="dark"] .mt-tag.asked { color: #c7d2fe; background: #312e81; }

/* My account → My businesses: one roomy card per business, then a checklist whose lines open small forms (<details>). */
.bz-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: 1rem; margin-bottom: 1rem; }
.bz-hd { display: flex; gap: .75rem; align-items: flex-start; }
.bz-logo { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: .7rem; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg)); }
.bz-who { flex: 1; min-width: 0; }
.bz-name { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.bz-meta { font-size: .85rem; color: var(--bs-secondary-color); }
.bz-edit { margin-top: .9rem; }
.bz-list { margin-top: .9rem; border-top: 1px solid var(--bs-border-color); }
.bz-row { border-bottom: 1px solid var(--bs-border-color); }
.bz-row:last-child { border-bottom: 0; }
.bz-row > summary, .bz-sum { display: flex; align-items: center; gap: .65rem; padding: .7rem 0; min-height: 3rem; font-size: .92rem; }
.bz-row > summary { cursor: pointer; list-style: none; }
.bz-row > summary::-webkit-details-marker { display: none; }
.bz-row:last-child > summary, .bz-row:last-child > .bz-sum { padding-bottom: 0; }
.bz-i { width: 1.4rem; text-align: center; font-size: 1.05rem; color: var(--brand); flex-shrink: 0; }
.bz-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bz-t small { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.bz-chev { color: var(--bs-secondary-color); transition: transform .15s; }
.bz-row[open] .bz-chev { transform: rotate(90deg); }
.bz-more { color: var(--bs-secondary-color); font-size: .88rem; white-space: nowrap; }
.bz-btn { border: 1px solid var(--brand); color: var(--brand); border-radius: .5rem; padding: .25rem .7rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.bz-btn.solid { background: var(--brand); color: #fff; }
.bz-row[open] .bz-btn { opacity: .5; }
.bz-ok { color: var(--brand-deep); font-weight: 700; white-space: nowrap; }
.bz-pill { font-size: .75rem; font-weight: 700; border-radius: 99px; padding: .1rem .55rem; white-space: nowrap; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.bz-pill.warn { background: #fef3c7; color: #92400e; }
.bz-pill.ok { background: color-mix(in srgb, var(--brand) 14%, var(--bs-body-bg)); color: var(--brand-deep); }
.bz-body { padding: 0 0 .9rem 2.05rem; }
.bz-who-chip { font-size: .82rem; background: var(--bs-secondary-bg); border-radius: 99px; padding: .2rem .65rem; }
@media (max-width: 575.98px) { .bz-body { padding-left: 0; } }

/* A header button that jumps to a part of the page (e.g. Messages → Settings): that part lights up, so something
   visibly happens even when it is already on screen. */
.acct-target { scroll-margin-top: 5rem; }
.acct-target:target, .acct-target.is-flash { animation: acct-flash 1.6s ease-out; }
@keyframes acct-flash { 0%, 45% { outline: 3px solid var(--brand); outline-offset: 3px; background-color: color-mix(in srgb, var(--brand) 8%, var(--bs-body-bg)); } 100% { outline: 3px solid transparent; outline-offset: 3px; } }
@media (prefers-reduced-motion: reduce) { .acct-target:target, .acct-target.is-flash { animation: none; outline: 3px solid var(--brand); outline-offset: 3px; } }

/* My account → My ads (home): header card with tabs, one "needs you" box, then one compact row per ad. */
.acct-hc h1.acct-title { font-size: 1.25rem; }
.acct-sum a { color: var(--brand); }
.my-need { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; margin-bottom: .9rem; }
.my-need-row { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; text-decoration: none; color: var(--bs-body-color); font-size: .93rem; }
.my-need-row + .my-need-row { border-top: 1px solid var(--bs-border-color); }
.my-need-row b { flex: 1; font-weight: 600; }
.my-need-row .acct-go { color: var(--brand); font-weight: 700; white-space: nowrap; }
.my-need-row.is-warn .acct-go { color: #c2410c; }
.my-list { list-style: none; margin: 0; padding: 0; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; }
.my-row { display: flex; align-items: center; gap: .5rem; padding-right: .8rem; }
.my-row + .my-row { border-top: 1px solid var(--bs-border-color); }
.my-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .75rem 0 .75rem .8rem; color: inherit; text-decoration: none; }
.my-th { flex: 0 0 3.4rem; width: 3.4rem; height: 3.4rem; border-radius: .7rem; object-fit: cover; background: var(--bs-secondary-bg); }
.my-th.is-icon { display: grid; place-items: center; font-size: 1.35rem; color: var(--brand); background: var(--brand-subtle); }
.my-tx { flex: 1; min-width: 0; display: block; }
.my-t { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-m { display: block; font-size: .8rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.my-st { font-weight: 700; }
.my-st.is-live { color: #047857; } .my-st.is-soon { color: #c2410c; } .my-st.is-info { color: #3730a3; } .my-st.is-off { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .my-st.is-live { color: #6ee7b7; } [data-bs-theme="dark"] .my-st.is-soon { color: #fdba74; } [data-bs-theme="dark"] .my-st.is-info { color: #c7d2fe; }
.my-chev { color: var(--bs-secondary-color); }
.my-act { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.my-act form { margin: 0; }
.my-btn { display: inline-block; background: var(--brand); color: #fff; border: 0; border-radius: .55rem; padding: .4rem .7rem; font-size: .85rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.my-btn:hover { color: #fff; filter: brightness(1.08); }
.my-arch { width: 2.2rem; height: 2.2rem; border-radius: .55rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); display: grid; place-items: center; }
@media (hover: hover) { .my-link:hover .my-t { color: var(--brand); } }
.my-archived { display: block; text-align: center; margin-top: .9rem; font-size: .9rem; font-weight: 600; color: var(--brand); text-decoration: none; }

/* My account → Payments & cards: wallet strip, then one part at a time; receipts as a statement by month. */
.pay-wal { display: flex; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; margin-bottom: .9rem; }
.pay-wal a { flex: 1; min-width: 0; text-align: center; padding: .7rem .4rem; color: var(--bs-body-color); text-decoration: none; }
.pay-wal a + a { border-left: 1px solid var(--bs-border-color); }
.pay-wal a.on { background: var(--brand-subtle); }
.pay-wal b { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-wal b.g { color: #047857; }
.pay-wal b.sm { font-size: 1rem; padding: .15rem 0; }
.pay-wal small { display: block; font-size: .75rem; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .pay-wal b.g { color: #6ee7b7; }
.pay-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.pay-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 99px; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; text-decoration: none; }
.pay-chip.on { background: var(--bs-body-color); border-color: var(--bs-body-color); color: var(--bs-body-bg); }
.pay-chip span { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1; padding: .22rem .4rem; }
.pay-adf { margin-left: auto; flex: 1 1 8rem; max-width: 14rem; }
.pay-list { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; }
.pay-empty { padding: 1rem; color: var(--bs-secondary-color); font-size: .9rem; }
.pay-mon { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); padding: .4rem .9rem; }
.pay-mon:not(:first-child) { border-top: 1px solid var(--bs-border-color); }
.pay-li { display: flex; align-items: center; gap: .65rem; padding: .65rem .9rem; border-top: 1px solid var(--bs-border-color); color: inherit; text-decoration: none; }
.pay-mon + .pay-li { border-top: 1px solid var(--bs-border-color); }
@media (hover: hover) { .pay-li:hover { background: var(--bs-tertiary-bg); } }
.pay-ic { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: .6rem; display: grid; place-items: center; background: var(--brand-subtle); font-size: 1rem; }
.pay-ic.is-r { background: #ecfdf5; }
.pay-tx { flex: 1; min-width: 0; display: block; }
.pay-t { display: block; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-sm { display: block; font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-amt { font-weight: 700; white-space: nowrap; }
.pay-amt.g { color: #047857; }
[data-bs-theme="dark"] .pay-amt.g { color: #6ee7b7; }
.pay-pill { font-size: .7rem; font-weight: 700; border-radius: 99px; padding: .1rem .5rem; white-space: nowrap; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.pay-pill.g { background: #ecfdf5; color: #047857; }
.pay-pill.w { background: #fef3c7; color: #92400e; }
.pay-tot { text-align: center; font-size: .8rem; color: var(--bs-secondary-color); margin-top: .7rem; }

/* My account → Jobs & my work profile: the profile as salons see it, then lists (applied, contacted). */
.jb-card { display: block; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; margin-bottom: .9rem; }
.jb-st { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .9rem; font-size: .85rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.jb-st.on { background: #ecfdf5; border-bottom-color: #d1fae5; }
.jb-st.on b { color: #047857; }
.jb-st.bad b { color: #b91c1c; }
.jb-st a { margin-left: auto; font-weight: 600; color: var(--brand); text-decoration: none; }
[data-bs-theme="dark"] .jb-st.on { background: #052e26; border-bottom-color: #064e3b; }
[data-bs-theme="dark"] .jb-st.on b { color: #6ee7b7; }
.jb-card.is-off .jb-body { opacity: .7; }
.jb-body { padding: .9rem; }
.jb-pr { display: flex; gap: .75rem; align-items: center; }
.jb-av { flex: 0 0 3.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.35rem; color: var(--brand); background: var(--brand-subtle); }
.jb-nm { font-weight: 800; font-size: 1.1rem; margin: 0; }
.jb-mt { font-size: .85rem; color: var(--bs-secondary-color); }
.jb-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.jb-tag { font-size: .8rem; font-weight: 600; background: var(--bs-secondary-bg); border-radius: 99px; padding: .15rem .6rem; }
.jb-tag.g { background: var(--brand-subtle); color: var(--brand-ink); }
.jb-about { font-size: .9rem; margin: .6rem 0 0; overflow-wrap: anywhere; }
.jb-nums { display: flex; border-top: 1px solid var(--bs-border-color); }
.jb-nums div { flex: 1; text-align: center; padding: .6rem .3rem; }
.jb-nums div + div { border-left: 1px solid var(--bs-border-color); }
.jb-nums b { display: block; font-size: 1.15rem; }
.jb-nums small { font-size: .75rem; color: var(--bs-secondary-color); }
.jb-btns { display: flex; gap: .5rem; padding: .75rem .9rem; border-top: 1px solid var(--bs-border-color); }
.jb-btns > form, .jb-btns > a { flex: 1; margin: 0; }
.jb-btns > form.jb-sm-btn { flex: 0 0 4.2rem; }
.jb-bt { display: block; width: 100%; text-align: center; white-space: nowrap; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: .6rem; padding: .5rem .4rem; font-size: .9rem; font-weight: 700; text-decoration: none; }
.jb-bt.s { background: var(--brand); border-color: var(--brand); color: #fff; }
.jb-new { text-align: center; padding: 1.4rem 1rem; }
.jb-new-ic { font-size: 2rem; }
.jb-new .jb-mt { margin: .3rem 0 .9rem; }
.jb-alert > summary { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.jb-alert > summary::-webkit-details-marker { display: none; }
.jb-alert[open] .jb-chev { transform: rotate(90deg); }
.jb-alert-body { padding: 0 .9rem .9rem; }
.jb-chev { color: var(--bs-secondary-color); transition: transform .15s; }
.jb-list { list-style: none; margin: 0 0 .9rem; padding: 0; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; }
.jb-list > li + li, .jb-list > .jb-li + .jb-li { border-top: 1px solid var(--bs-border-color); }
.jb-li { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; color: inherit; text-decoration: none; }
.jb-ic { flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; border-radius: .6rem; display: grid; place-items: center; background: var(--brand-subtle); font-size: 1.05rem; color: var(--brand); font-weight: 800; text-decoration: none; }
.jb-ic.is-round { border-radius: 50%; }
.jb-tx { flex: 1; min-width: 0; display: block; color: inherit; text-decoration: none; }
.jb-t { display: block; font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-sm { display: block; font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-pill { font-size: .72rem; font-weight: 700; border-radius: 99px; padding: .12rem .55rem; white-space: nowrap; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.jb-pill.g { background: #ecfdf5; color: #047857; }
.jb-pill.b { background: #eef2ff; color: #3730a3; }
.jb-call { background: var(--brand); color: #fff; border-radius: .55rem; padding: .4rem .75rem; font-size: .85rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.jb-call:hover { color: #fff; }
.jb-hint { text-align: center; font-size: .85rem; color: var(--bs-secondary-color); }
.jb-hint a { font-weight: 600; color: var(--brand); text-decoration: none; }

/* My account → My info & settings: one list in groups, like a phone's Settings app. */
.st-sec { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 1.1rem .3rem .45rem; }
.st-sec:first-child { margin-top: .2rem; }
.st-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; }
.st-row + .st-row { border-top: 1px solid var(--bs-border-color); }
.st-row > summary, .st-sum { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; min-height: 3.4rem; }
.st-row > summary { cursor: pointer; list-style: none; }
.st-row > summary::-webkit-details-marker { display: none; }
.st-ic { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: .6rem; display: grid; place-items: center; background: var(--brand-subtle); font-size: 1rem; color: var(--brand); }
.st-tx { flex: 1; min-width: 0; display: block; }
.st-t { display: block; font-weight: 600; font-size: .95rem; }
.st-v { display: block; font-size: .8rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.st-chev { color: var(--bs-secondary-color); transition: transform .15s; }
.st-row[open] .st-chev { transform: rotate(90deg); }
.st-form { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 .9rem .9rem 3.8rem; }
.st-form .form-control { flex: 1 1 12rem; }
.st-body { padding: 0 .9rem .9rem 3.8rem; }
@media (max-width: 575.98px) { .st-form, .st-body { padding-left: .9rem; } }
.st-line { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .9rem; color: inherit; text-decoration: none; }
.st-link + .st-link { border-top: 1px solid var(--bs-border-color); }
.st-pill { font-size: .72rem; font-weight: 700; border-radius: 99px; padding: .1rem .55rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.st-pill.on { background: #ecfdf5; color: #047857; }
/* A switch that is a submit button (one tap = saved), or a picture of one in a <summary>. */
.st-sw { flex-shrink: 0; position: relative; display: inline-block; width: 2.75rem; height: 1.6rem; border-radius: 99px; border: 0; padding: 0; background: #d1d5db; cursor: pointer; }
.st-sw::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.st-sw.is-on { background: var(--brand); }
.st-sw.is-on::after { left: 1.35rem; }
.st-sum form { margin: 0; }

/* My account → Advertise: one card per banner (picture big enough to see, one tag, numbers, the button it needs),
   old ones folded; the new-banner form as one card of 3 numbered steps, total + pay pinned to the bottom on phones. */
.pt-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .8rem; margin-bottom: .8rem; font-size: .9rem; }
.pt-pic { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; border-radius: .6rem; background: var(--bs-tertiary-bg); }
.pt-pic.is-empty { display: grid; place-items: center; font-size: 1.4rem; color: var(--bs-secondary-color); }
.pt-hd { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.pt-hd b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pt-tag { font-size: .72rem; font-weight: 700; border-radius: 99px; padding: .12rem .55rem; white-space: nowrap; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.pt-tag.g { background: #ecfdf5; color: #047857; } .pt-tag.b { background: #eef2ff; color: #3730a3; } .pt-tag.y { background: #fef3c7; color: #92400e; } .pt-tag.r { background: #fee2e2; color: #b91c1c; }
.pt-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.pt-meta:empty { display: none; }
.pt-btns { display: flex; gap: .5rem; margin-top: .6rem; }
.pt-bt { flex: 1; text-align: center; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .45rem; font-weight: 700; color: var(--bs-body-color); text-decoration: none; }
.pt-old { margin: .2rem 0 .8rem; }
.pt-old > summary { cursor: pointer; list-style: none; text-align: center; font-size: .88rem; font-weight: 600; color: var(--brand); padding: .4rem; }
.pt-old > summary::-webkit-details-marker { display: none; }
.pt-old[open] > summary i { transform: rotate(90deg); }
.pt-old > summary i { display: inline-block; transition: transform .15s; }
.pt-stepbox { border-top: 1px solid var(--bs-border-color); }
.pt-bar { position: sticky; bottom: .5rem; z-index: 5; display: flex; align-items: center; gap: .6rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: .55rem .8rem; box-shadow: 0 4px 18px rgba(0,0,0,.12); margin-top: .8rem; }
.pt-bar span { flex: 1; font-size: .8rem; color: var(--bs-secondary-color); }
.pt-bar b { display: block; font-size: 1.15rem; color: var(--bs-body-color); }
.pt-bar a { background: var(--brand); color: #fff; border-radius: .6rem; padding: .45rem .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* Keep the pinned price bar clear of the round chat button (bottom right) when it shows. */
body:has(.talk-fab:not([hidden])) .pt-bar { margin-right: 4.6rem; }

/* Ad page, contact box: "This is your ad" (owner), the note after signing in with another number, and the quiet
   "Your ad? Sign in to edit it" link for people who aren't signed in. */
.own-strip { display: flex; align-items: center; gap: .6rem; background: var(--brand-subtle); border: 1px solid var(--brand-border); border-radius: .8rem; padding: .6rem .75rem; margin-bottom: 1rem; color: var(--bs-body-color); text-decoration: none; }
.own-tx { flex: 1; min-width: 0; }
.own-tx b { display: block; font-size: .92rem; }
.own-tx small { font-size: .8rem; color: var(--bs-secondary-color); }
.own-go { background: var(--brand); color: #fff; border-radius: .55rem; padding: .35rem .7rem; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.own-warn { display: flex; gap: .55rem; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; border-radius: .8rem; padding: .6rem .75rem; margin-bottom: 1rem; font-size: .88rem; }
.own-warn b { display: block; }
.own-link { font-size: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; }
[data-bs-theme="dark"] .own-warn { background: #2a1a0f; border-color: #7c2d12; color: #fdba74; }
.own-mine { display: block; text-align: center; font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none; margin-top: .7rem; }
#contact { scroll-margin-top: 5rem; }   /* back from "Your ad?" with a note: the note shows below the top menu */

/* Lists (board rows, cards): the signed-in person's own ads — light green tint, green left edge, "Your ad" pill. */
.mine-tag { display: inline-flex; align-items: center; gap: .15rem; flex-shrink: 0; font-size: .72rem; font-weight: 800; line-height: 1.5; color: #fff; background: var(--brand); border-radius: 99px; padding: 0 .5rem; white-space: nowrap; }
.row-item.is-mine { background: color-mix(in srgb, var(--brand) 6%, var(--bs-body-bg)); box-shadow: inset 4px 0 0 var(--brand); }
.row-item.is-mine .row-link:hover { background: color-mix(in srgb, var(--brand) 10%, var(--bs-body-bg)); }
.listing-card.is-mine { background: color-mix(in srgb, var(--brand) 6%, var(--bs-body-bg)); box-shadow: inset 0 4px 0 var(--brand); }
.row-meta > .mine-tag + *::before { content: none; }

/* Paid page: "Want more calls? Add another option" (each opens on the Manage page; its own payment). */
.mo-box { text-align: left; border: 1px solid var(--bs-border-color); border-radius: .9rem; overflow: hidden; margin: 1rem 0 .5rem; }
.mo-h { font-weight: 700; font-size: .92rem; padding: .65rem .85rem; background: var(--brand-subtle); color: var(--brand-ink); }
.mo-row { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-top: 1px solid var(--bs-border-color); color: var(--bs-body-color); text-decoration: none; font-size: .92rem; }
@media (hover: hover) { .mo-row:hover { background: var(--bs-tertiary-bg); } }
.mo-ic { flex: 0 0 1.6rem; text-align: center; }
.mo-tx { flex: 1; min-width: 0; font-weight: 600; }
.mo-p { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.mo-chev { color: var(--bs-secondary-color); }
.mo-note { font-size: .8rem; color: var(--bs-secondary-color); padding: .55rem .85rem; border-top: 1px solid var(--bs-border-color); }

/* --brand-deep: dark brand colour for count badges and strong brand text (account tabs, message filters, businesses). */
:root { --brand-deep: #065f46; }
html.site-tiemban:not([data-bs-theme="dark"]) { --brand-deep: #062d57; }
html.site-tiemban[data-bs-theme="dark"] { --brand-deep: #0b7a8f; }
.site-tiemban .site-logo { height: 46px; }
.site-tiemban .site-logo.is-small { height: 34px; }
html.site-thonails:not([data-bs-theme="dark"]) { --brand-deep: #0f172a; }
html.site-thonails[data-bs-theme="dark"] { --brand-deep: #475569; }
.site-thonails .site-logo { height: 48px; }
.site-thonails .site-logo.is-small { height: 34px; }
/* Phones: Tiemban's wide logo shrinks to make room for the header buttons (no sideways page). */
@media (max-width: 575.98px) {
  .site-other .site-nav .navbar-brand { min-width: 0; flex: 0 1 auto; margin-right: .5rem; }
  .site-other .site-logo { max-width: 100%; height: auto; max-height: 40px; }
  .site-thonails .site-logo { max-height: 42px; }
  .site-other .site-nav .ms-auto { flex-shrink: 0; gap: .25rem !important; }
}

/* ---- Header buttons (B): brand-coloured icons; on phones each has its small word under it (VI · Đã lưu · Tin tôi · Đăng). ---- */
.site-nav .nav-ic { position: relative; display: inline-flex; }
.site-nav .nav-btn .bi { color: var(--brand); }
[data-bs-theme="dark"] .site-nav .nav-btn .bi { color: var(--brand-ink); }
.site-nav .nav-ic .badge { position: absolute; top: -.45rem; right: -.7rem; font-size: .6rem; padding: .2em .42em; border: 2px solid var(--surface); }
.site-nav .nav-word, .site-nav .nav-long { margin-left: .3rem; }
@media (max-width: 767.98px) {
  .site-nav .nav-tiles { gap: .1rem !important; }
  .site-nav .nav-btn, .site-nav .nav-post { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    line-height: 1; padding: .3rem .35rem; min-width: 2.75rem; }
  .site-nav .nav-btn .bi { font-size: 1.2rem; }
  .site-nav .nav-word { margin-left: 0; font-size: .68rem; font-weight: 600; white-space: nowrap; }
  .site-nav .nav-long { display: none; }
  .site-nav .nav-btn.dropdown-toggle::after { display: none; }
  .site-nav .nav-post { padding: .38rem .6rem; border-radius: .6rem; min-width: 3rem; }
  .site-nav .nav-post .bi { font-size: 1.05rem; }
  .site-nav .nav-post .nav-word { font-size: .72rem; font-weight: 700; }
}
@media (min-width: 768px) { .site-nav .nav-ic:has(.badge:not(.d-none)) + .nav-word { margin-left: .8rem; } }

/* ---- Post an ad, made simple (.post-simple): one question per screen, big tiles and buttons, our own photo button. ---- */
.step-count { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.step-count:empty { display: none; }

.post-simple.is-stepped .form-section { font-size: 1.4rem; font-weight: 800; line-height: 1.25; }
.post-simple .form-control, .post-simple .form-select { min-height: 3rem; font-size: 1.05rem; border-radius: .7rem; }
.post-simple textarea.form-control { min-height: 7.5rem; }
.post-simple .form-label { font-weight: 600; }
@media (max-width: 575.98px) {
  .post-simple .step-pill:not(.is-current) .step-name { display: none; }
  .post-simple .card-body { padding: 1.1rem !important; }
  .post-simple .card-footer { padding: 0 1.1rem 1.1rem !important; }
}
/* Category tiles (the list underneath only shows without the script). */
.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; padding: .9rem .8rem; min-height: 6.5rem;
  border: 2px solid var(--bs-border-color); border-radius: 1rem; background: var(--surface); color: var(--bs-body-color); }
.cat-tile .bi { font-size: 1.7rem; color: var(--brand); line-height: 1; }
.cat-tile b { font-size: 1.02rem; line-height: 1.2; }
.cat-tile small { font-size: .78rem; color: var(--bs-secondary-color); line-height: 1.3; }
.cat-tile:hover { border-color: var(--brand-border); }
.cat-tile.is-on { border-color: var(--brand); background: var(--brand-subtle); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.post-simple:not(.is-stepped) .cat-tiles { display: none; }
.is-stepped .cat-select, .is-stepped .cat-select-label,
.photo-input { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; opacity: 0; }
/* Big "Add photos" button (a label for the hidden file input). */
.photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 7rem; margin: 0; cursor: pointer;
  border: 2.5px dashed var(--bs-secondary-border-subtle, #94a3b8); border-radius: 1rem; background: var(--surface); text-align: center; padding: 1rem; }
.photo-add .bi { font-size: 2.4rem; color: var(--brand); line-height: 1; }
.photo-add b { font-size: 1.15rem; }
.photo-add small { color: var(--bs-secondary-color); }
.photo-add:hover, .photo-input:focus-visible + * , .photo-add:focus-within { border-color: var(--brand); }
.photo-add.is-invalid { border-color: var(--bs-form-invalid-border-color); }
/* Details not on the main screen. */
.more-fields { margin-top: .9rem; border: 1.5px solid var(--bs-border-color); border-radius: .8rem; background: var(--surface); }
.more-fields > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; padding: .8rem .9rem; cursor: pointer; font-weight: 700; list-style: none; }
.more-fields > summary > span { white-space: nowrap; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary .bi { color: var(--brand); }
.more-fields > summary small { flex: 1 1 100%; padding-left: 1.5rem; font-weight: 500; color: var(--bs-secondary-color); font-size: .8rem; }
.more-fields[open] > summary .bi::before { content: "\F2E6"; }   /* bi-dash-circle */
.more-fields > .row { padding: 0 .9rem .9rem; margin: 0; }
/* Tap-to-add ideas for the description. */
.idea-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.idea-chip { border: 1.5px solid var(--bs-border-color); background: var(--surface); color: var(--bs-body-color); border-radius: 999px; padding: .4rem .8rem; font-size: .9rem; font-weight: 600; }
.idea-chip:hover { border-color: var(--brand-border); }
.idea-chip.is-on { background: var(--brand-subtle); border-color: var(--brand); color: var(--brand-ink); }
.idea-chip.is-on::before { content: "✓ "; }
/* Title written for them. */
.post-simple #title.is-auto { border-color: var(--brand); background: var(--brand-subtle); }
.title-auto-note { color: var(--brand); }
/* Last step: how the ad will look. */
.step-preview { border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; background: var(--surface); }
.step-preview-pic { position: relative; height: 9rem; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; }
.step-preview-pic img { width: 100%; height: 100%; object-fit: cover; }
.step-preview-pic > .bi { font-size: 2.2rem; color: var(--bs-secondary-color); }
.step-preview-pic > span { position: absolute; right: .5rem; bottom: .5rem; background: rgba(15, 23, 42, .75); color: #fff; font-size: .75rem; padding: .1rem .5rem; border-radius: .5rem; }
.step-preview-body { padding: .75rem .9rem .5rem; }
.step-preview-body b { display: block; font-size: 1.05rem; line-height: 1.3; }
.step-preview-price { color: var(--brand); font-weight: 800; font-size: 1.1rem; margin-top: .15rem; }
.step-preview-body small { color: var(--bs-secondary-color); }
.step-preview-body p { margin: .35rem 0 0; font-size: .88rem; color: var(--bs-secondary-color); }
.step-preview-links { padding: .55rem .9rem; border-top: 1px solid var(--bs-border-color); font-size: .85rem; color: var(--bs-secondary-color); }
.step-preview-links .btn-link { vertical-align: baseline; font-size: .85rem; }
/* Short lists as tap buttons (the list itself stays in the page, hidden, once the script runs). */
.seg-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.seg-pick { display: flex; border: 1.5px solid var(--bs-border-color); border-radius: .7rem; overflow: hidden; background: var(--surface); }
.seg-pick[hidden] { display: none; }
.seg-pick > button { flex: 1 1 0; min-width: 0; min-height: 3rem; border: 0; background: none; color: var(--bs-body-color); font-weight: 600; font-size: .95rem; padding: .4rem .3rem; line-height: 1.2; }
.seg-pick > button + button { border-left: 1.5px solid var(--bs-border-color); }
.seg-pick > button.is-on { background: var(--brand); color: #fff; }
.is-invalid ~ .seg-pick, .seg-select.is-invalid ~ .seg-pick { border-color: var(--bs-form-invalid-border-color); }
.idea-more { color: var(--brand); border-style: dashed; }
.idea-chip[hidden] { display: none; }
.biz-fold { margin-top: 0; }
/* "Where is it?" under the category tiles on step 1. */
.where-head { margin-top: 1.25rem; }
.where-head .form-label { font-size: 1.15rem; font-weight: 800; margin: 0; }
/* ---- Delete an ad for good (Archived ads → Delete → account/delete-ad). ---- */
.acct-btns > .acct-del { flex: 0 0 auto; width: auto; background: var(--bs-body-bg); border-color: #fecaca; color: #b91c1c; text-align: center; text-decoration: none; }
.acct-btns > .acct-del:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
[data-bs-theme="dark"] .acct-btns > .acct-del { border-color: #7f1d1d; color: #fca5a5; }
.del-title { font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.del-title .bi { color: #b91c1c; }
.del-ad { display: flex; gap: .7rem; align-items: center; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .8rem; padding: .55rem; }
.del-ad img, .del-noimg { width: 3rem; height: 3rem; border-radius: .6rem; object-fit: cover; flex-shrink: 0; }
.del-noimg { display: inline-flex; align-items: center; justify-content: center; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.del-ad b { display: block; line-height: 1.3; }
.del-h { font-weight: 800; font-size: .92rem; margin: .9rem 0 .2rem; }
.del-list { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.del-list li { display: flex; gap: .45rem; margin: .25rem 0; }
.del-list .bi { flex-shrink: 0; margin-top: .1rem; }
.del-list.is-go .bi { color: #b91c1c; }
.del-list.is-keep .bi { color: var(--brand); }
.del-warn, .del-wait { display: flex; gap: .5rem; border-radius: .7rem; padding: .6rem .75rem; margin-top: .8rem; font-size: .9rem; }
.del-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.del-wait { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }
[data-bs-theme="dark"] .del-warn { background: #431407; border-color: #7c2d12; color: #fed7aa; }
[data-bs-theme="dark"] .del-wait { background: #450a0a; border-color: #7f1d1d; color: #fecaca; }
.del-sure { margin-top: 1rem; }
.mg-big.mg-red:disabled { opacity: .45; }
.del-cancel { display: block; text-align: center; font-weight: 700; padding: .8rem; color: var(--bs-body-color); text-decoration: none; }
/* "Send application" on a job ad: the colours and border of the board's category chips (e.g. "Hiring"). */
.apply-send { background: var(--brand-subtle); border: 1.5px solid #8fcfc5; color: var(--brand-ink); font-weight: 700; }   /* the usual button corners and size */
.apply-send .bi { color: var(--brand); }
.apply-send:hover, .apply-send:focus-visible { background: #d5ece8; border-color: var(--brand); color: var(--brand-ink); }
.apply-send:active { background: var(--brand); border-color: var(--brand); color: #fff; }
.apply-send:active .bi { color: #fff; }
[data-bs-theme="dark"] .apply-send { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
/* Post an ad: voice-typing tip under the description, and "Need help? Text us" at the bottom of every step. */
.voice-tip { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; padding: .55rem .7rem; border-radius: .7rem; font-size: .88rem; line-height: 1.4;
  background: #eef6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.voice-tip[hidden] { display: none; }
.voice-tip .bi { font-size: 1.05rem; margin-top: .05rem; }
[data-bs-theme="dark"] .voice-tip { background: #172554; border-color: #1e3a8a; color: #dbeafe; }
.post-help { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .7rem .2rem 0; border-top: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); text-decoration: none; font-size: .95rem; }
.post-help b { color: var(--brand); }
.post-help-no { color: var(--bs-secondary-color); font-size: .85rem; white-space: nowrap; }
.post-help-ic { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand-subtle); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.post-help:hover b { text-decoration: underline; }
/* Staff Sales → Reports: "Post an ad: where people stop". */
.funnel-row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 3.5rem; gap: .6rem; align-items: center; font-size: .88rem; margin: .35rem 0; }
.funnel-row > b { text-align: right; }
.funnel-bar { height: 1.1rem; border-radius: .35rem; background: var(--bs-tertiary-bg); overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; background: var(--brand); border-radius: .35rem; }
.funnel-bar.is-worst > span { background: #ea580c; }
.funnel-tip { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: .6rem; padding: .45rem .7rem; font-size: .88rem; }
[data-bs-theme="dark"] .funnel-tip { background: #431407; border-color: #7c2d12; color: #fed7aa; }
/* Post an ad: one optional special word for the written-for-you title. */
.title-ideas { margin-top: .6rem; padding: .6rem .7rem; border: 1.5px dashed var(--bs-border-color); border-radius: .8rem; }
.title-ideas[hidden] { display: none; }
.title-ideas-h { font-size: .88rem; font-weight: 700; margin-bottom: .4rem; }
.title-ideas-h span { font-weight: 500; color: var(--bs-secondary-color); }

/* Thonails: the few borders written as teal elsewhere, in its slate; three tabs fit one line on phones. */
html.site-thonails .chip, html.site-thonails .apply-send, html.site-thonails .add-profile-btn { border-color: #cbd5e1; }
html.site-thonails .add-profile-btn:hover { background: #e2e8f0; border-color: var(--brand); }
html.site-thonails .chip.active { border-color: var(--brand); }
html.site-thonails .xp-row:has(input:checked), html.site-thonails .xp-new { border-color: #cbd5e1; }
html.site-thonails .search-tab { border-color: #cbd5e1; white-space: nowrap; }
html.site-thonails .search-tab:hover { background: #e2e8f0; }
html.site-thonails .search-tab.is-on, html.site-thonails .search-tab.is-on:hover { background: var(--surface); border-color: var(--bs-border-color); }
html.site-thonails[data-bs-theme="dark"] .chip, html.site-thonails[data-bs-theme="dark"] .apply-send, html.site-thonails[data-bs-theme="dark"] .search-tab { border-color: var(--brand-border); }
html.site-thonails[data-bs-theme="dark"] .search-tab:hover { background: var(--brand-pale); }
@media (max-width: 575.98px) {
  html.site-thonails .search-tabs { padding: 0 .3rem; gap: .25rem; }
  html.site-thonails .search-tab { padding-inline: .4rem; gap: .3rem; font-size: .88rem; }
}
@media (max-width: 379.98px) { html.site-thonails .search-tab > .bi { display: none; } }
/* Thonails dark: prices and highlights in the logo's gold (readable on dark; weak on white, so light mode keeps charcoal). */
html.site-thonails[data-bs-theme="dark"] .listing-price, html.site-thonails[data-bs-theme="dark"] .row-price,
html.site-thonails[data-bs-theme="dark"] .text-primary, html.site-thonails[data-bs-theme="dark"] .nav-underline .nav-link.active { color: #f5c451 !important; }
html.site-thonails .seo-stat { color: var(--brand-ink); }

/* Thonails workers page: "Are you looking for work?" card (Viet's pick C) instead of the small button. */
.add-profile-card { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1.5px dashed #94a3b8; border-radius: .8rem;
  padding: .7rem .85rem; color: var(--bs-body-color); text-decoration: none; }
.add-profile-card b { font-size: .95rem; }
.add-profile-card .d-block { font-size: .8rem; color: var(--bs-secondary-color); }
.add-profile-card:hover, .add-profile-card:focus-visible { border-color: var(--brand); border-style: solid; color: var(--bs-body-color); }
.add-profile-plus { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #f5c451; color: #0f172a; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1rem; }
[data-bs-theme="dark"] .add-profile-card { border-color: #475569; }