/*
 * NepalNet Classifieds — storefront styles.
 *
 * Loaded only on classifieds pages (see hookDisplayHeader) and scoped under
 * .kbcl so nothing here can reach the shop's own pages.
 *
 * Colours follow the site: #253237 primary, #80b435 secondary.
 * Mobile first throughout — this audience browses rooms and jobs on a phone,
 * usually one-handed, often on a train.
 */

.kbcl {
    --kbcl-primary: #253237;
    --kbcl-accent: #80b435;
    --kbcl-ink: #253237;
    --kbcl-muted: #6b7780;
    --kbcl-line: #e3e7ea;
    --kbcl-surface: #ffffff;
    --kbcl-surface-alt: #f6f8f9;
    --kbcl-warn-bg: #fdf6e3;
    --kbcl-warn-line: #e6d5a8;
    --kbcl-radius: 10px;
    --kbcl-gap: 16px;

    color: var(--kbcl-ink);
}

.kbcl *,
.kbcl *::before,
.kbcl *::after { box-sizing: border-box; }

/* The section has to sit inside the same gutters as the rest of the store.
   Without this the breadcrumb and headings run to the browser edge and the last
   card welds itself to the footer, which is most of what makes a module read as
   bolted on rather than part of the site. */
.kbcl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
.kbcl:last-child { padding-bottom: 56px; }

/* The theme title-cases every heading and button. On a board of user-written
   ads that turns "8 min walk to Kogarah station" into "8 Min Walk To Kogarah
   Station" — which instantly reads as a template rather than a person. */
.kbcl h1, .kbcl h2, .kbcl h3, .kbcl h4,
.kbcl .kbcl-btn, .kbcl .btn,
.kbcl-card__title, .kbcl-ad__title, .kbcl-section__title,
.kbcl-cat__name, .kbcl-hero__title, .kbcl-rule__title,
.kbcl-toggle__opt, .kbcl-tag, .kbcl-badge { text-transform: none; }

/* The theme right-aligns every <label>, which made half the filter labels
   flush right and half flush left depending on the tag used. */
.kbcl label,
.kbcl-filter__label { text-align: left; }

.kbcl a { color: var(--kbcl-primary); }
.kbcl-muted { color: var(--kbcl-muted); font-size: .9rem; }

.kbcl-btn {
    display: inline-block;
    padding: 11px 20px;
    border-radius: var(--kbcl-radius);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    border: 0;
}
.kbcl-btn--block { display: block; width: 100%; }
.kbcl .btn-primary.kbcl-btn { background: var(--kbcl-accent); color: #fff; }
.kbcl .btn-primary.kbcl-btn:hover { filter: brightness(.94); color: #fff; }
.kbcl .btn-secondary.kbcl-btn {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    color: var(--kbcl-primary);
}
.kbcl .kbcl-btn[disabled] { opacity: .45; cursor: not-allowed; }
.kbcl .kbcl-btn + .kbcl-btn { margin-top: 8px; }

/* --- Hero ---------------------------------------------------------------- */

.kbcl-hero {
    background: var(--kbcl-primary);
    color: #fff;
    padding: 32px 24px;
    border-radius: var(--kbcl-radius);
    margin: 16px auto 24px;
}
.kbcl-hero__title { color: #fff; margin: 0 0 8px; font-size: 1.75rem; }
.kbcl-hero__lead { color: rgba(255,255,255,.85); max-width: 46rem; margin: 0 0 18px; }
.kbcl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.kbcl-hero__count { color: rgba(255,255,255,.75); font-size: .9rem; }

/* --- Category tiles ------------------------------------------------------ */

.kbcl-cats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kbcl-gap);
    margin-bottom: 32px;
}
.kbcl-cat {
    display: block;
    padding: 18px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    text-decoration: none;
}
.kbcl-cat:hover { border-color: var(--kbcl-accent); text-decoration: none; }
.kbcl-cat__name { display: block; font-weight: 700; font-size: 1.05rem; }
.kbcl-cat__count { display: block; color: var(--kbcl-accent); font-size: .85rem; margin-top: 2px; }
.kbcl-cat__children {
    display: block;
    color: var(--kbcl-muted);
    font-size: .8rem;
    margin-top: 8px;
    line-height: 1.5;
}

/* --- Sections and grids -------------------------------------------------- */

.kbcl-section { margin-bottom: 36px; }
.kbcl-section__title {
    font-size: 1.15rem;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--kbcl-line);
}

.kbcl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Below 768px a card is a list row, not a tile: a small thumb on the left and
   the title given real width on the right. A two-up grid of photo-less cards
   spends 60% of the screen on empty grey boxes and truncates every title at
   two lines — on a board where the title is the product, that is the wrong
   trade. It is also the better one-handed shape. */

.kbcl-grid--promoted { margin-bottom: var(--kbcl-gap); }

/* --- Result card --------------------------------------------------------- */

.kbcl-card {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    overflow: hidden;
}
.kbcl-card--highlight { border-color: var(--kbcl-accent); box-shadow: 0 0 0 1px var(--kbcl-accent); }
.kbcl-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.kbcl-card__link:hover { text-decoration: none; }
.kbcl-card__link:hover .kbcl-card__title { color: var(--kbcl-accent); }

.kbcl-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--kbcl-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.kbcl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Most ads will have no photo for months yet, so this state has to look
   intentional. It was a #e3e7ea glyph on #f6f8f9 — about 1.05:1, i.e. an
   entirely blank grey rectangle that reads as a failed image. */
.kbcl-card__media--empty {
    background: linear-gradient(160deg, #eef2f3 0%, #e6ecee 100%);
}
.kbcl-card__noimage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--kbcl-muted);
    font-size: .72rem;
    letter-spacing: .02em;
}
.kbcl-card__noimage svg { width: 26px; height: 26px; opacity: .5; }

.kbcl-card__body { padding: 12px; }
.kbcl-card__title {
    font-size: .95rem;
    margin: 0 0 6px;
    line-height: 1.35;
    /* Two lines, then ellipsis: cards must stay the same height or the grid
       turns into a staircase. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kbcl-card__price { font-weight: 700; color: var(--kbcl-primary); margin: 0 0 4px; }
.kbcl-card__meta { margin: 0; font-size: .82rem; color: var(--kbcl-muted); }
.kbcl-card__distance { white-space: nowrap; }
.kbcl-card__distance::before { content: '· '; }
.kbcl-card__category { margin: 6px 0 0; font-size: .75rem; color: var(--kbcl-muted); }

/* --- Chips --------------------------------------------------------------- */

.kbcl-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(37,50,55,.9);
    color: #fff;
    /* Static by default. Absolute positioning is scoped to the card photo
       below, because a chip is also used inline — beside a price, a name, an
       inbox row — and an unscoped `position: absolute` sends those to the
       nearest positioned ancestor, which is the page. A "was $380/wk" badge
       floating in the gutter over the "Post an ad" button is what that looks
       like. */
}
.kbcl-chip--urgent { background: #c0392b; }
.kbcl-chip--promoted { background: #6b7780; }
.kbcl-chip--wanted { background: var(--kbcl-primary); }

/* Overlays on a card's photo, where the original design intended them. */
.kbcl-card__media .kbcl-chip {
    position: absolute;
    top: 8px;
    left: 8px;
}
.kbcl-card__media .kbcl-chip--drop { top: 36px; }
/* A leading pill on the title's own line, not a slab above it. It should
   label the ad, not out-shout the thing it labels. */
.kbcl-chip--inline {
    position: static;
    display: inline;
    background: #e8eef0;
    color: var(--kbcl-primary);
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 7px;
    margin-right: 6px;
    vertical-align: middle;
}

/* --- Tags ---------------------------------------------------------------- */

.kbcl-tag {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: 999px;
    font-size: .85rem;
    text-decoration: none;
}
.kbcl-tag:hover { border-color: var(--kbcl-accent); text-decoration: none; }
.kbcl-tag--sm { font-size: .78rem; padding: 4px 10px; }

/* --- Browse layout ------------------------------------------------------- */

.kbcl-crumbs { font-size: .85rem; color: var(--kbcl-muted); margin-bottom: 10px; }
.kbcl-crumbs span { margin: 0 6px; }

.kbcl-browse__title { margin: 0 0 4px; font-size: 1.5rem; }
.kbcl-browse__sub { color: var(--kbcl-muted); margin: 0 0 12px; }
.kbcl-subnav { margin-bottom: 20px; }
.kbcl-browse__layout { display: block; }

.kbcl-filters {
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 16px;
    margin-bottom: 20px;
}

/* On a phone the filter panel used to fill the entire first screen — not one
   ad was visible without scrolling. Collapsed by default, results first; the
   direction toggle stays out in the open because it is the one filter people
   on a room board actually touch. */
.kbcl-filters__toggle {
    display: none;
    width: 100%;
    padding: 12px 14px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}
.kbcl-filters__toggle::after { content: ' ▾'; float: right; color: var(--kbcl-muted); }
.kbcl-filters[open] .kbcl-filters__toggle::after { content: ' ▴'; }
.kbcl-filters__toggle::-webkit-details-marker { display: none; }
.kbcl-filter { margin-bottom: 14px; }
.kbcl-filter__label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 6px;
}
.kbcl-filter__label small { font-weight: 400; color: var(--kbcl-muted); }
.kbcl-filter__pair { display: flex; gap: 8px; }
.kbcl-filters .form-control { width: 100%; }
.kbcl-filters__clear {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: .85rem;
    color: var(--kbcl-muted);
}
.kbcl-filters__suburbs { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kbcl-line); }

.kbcl-toggle { display: flex; border: 1px solid var(--kbcl-line); border-radius: var(--kbcl-radius); overflow: hidden; }
.kbcl-toggle__opt {
    flex: 1;
    padding: 8px 6px;
    text-align: center;
    font-size: .82rem;
    background: var(--kbcl-surface);
    text-decoration: none;
}
.kbcl-toggle__opt.is-active { background: var(--kbcl-primary); color: #fff; }
.kbcl-toggle__opt:hover { text-decoration: none; }

.kbcl-results__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.kbcl-results__count { font-weight: 600; }
.kbcl-results__sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.kbcl-results__sort label { margin: 0; font-size: .85rem; color: var(--kbcl-muted); }

/* --- Pagination ---------------------------------------------------------- */

.kbcl-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 28px;
}
.kbcl-pagination__page,
.kbcl-pagination__step {
    padding: 8px 13px;
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    text-decoration: none;
    font-size: .9rem;
}
.kbcl-pagination__page.is-current {
    background: var(--kbcl-primary);
    color: #fff;
    border-color: var(--kbcl-primary);
}

/* --- Ad detail ----------------------------------------------------------- */

.kbcl-ad__layout { display: block; }
.kbcl-ad__gallery { margin-bottom: 18px; }
.kbcl-ad__photo--main {
    border-radius: var(--kbcl-radius);
    overflow: hidden;
    background: var(--kbcl-surface-alt);
}
.kbcl-ad__photo--main img { width: 100%; height: auto; display: block; }
.kbcl-ad__thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.kbcl-ad__thumbs img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}

.kbcl-ad__title { font-size: 1.4rem; margin: 6px 0 8px; }
.kbcl-ad__price { font-size: 1.5rem; font-weight: 700; color: var(--kbcl-ink); margin: 0 0 8px; }
.kbcl-ad__meta { color: var(--kbcl-muted); font-size: .88rem; margin: 0 0 18px; }
.kbcl-ad__meta span { margin: 0 4px; }

/* Capped. At 1440 the layout ran the label flush left and its value flush
   right across 1,250px of empty space — twelve rows of it, before the reader
   reached a single human sentence. */
.kbcl-ad__facts {
    max-width: 40rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 20px;
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    overflow: hidden;
}
.kbcl-ad__fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kbcl-line);
}
.kbcl-ad__fact:last-child { border-bottom: 0; }
.kbcl-ad__fact dt { color: var(--kbcl-muted); font-weight: 400; margin: 0; }
.kbcl-ad__fact dd { margin: 0; font-weight: 600; text-align: right; }

.kbcl-ad__description {
    line-height: 1.65;
    margin: 0 0 28px;
    /* Capped: the description now leads the page, and a 1,250px measure is
       unreadable. word-break stays — ad text is user-written and may be one
       unbroken string. */
    max-width: 42rem;
    word-break: break-word;
}
.kbcl-ad__share { font-size: .9rem; }
.kbcl-ad__share span { color: var(--kbcl-muted); margin-right: 8px; }
.kbcl-ad__share a { margin-right: 12px; }

/* --- Contact and poster -------------------------------------------------- */

.kbcl-contact,
.kbcl-poster,
.kbcl-safety {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 16px;
    margin-bottom: 16px;
}
.kbcl-contact__prompt { font-weight: 600; margin-bottom: 12px; }
.kbcl-contact__note { margin: 10px 0 0; }
.kbcl-contact__closed,
.kbcl-contact__own { margin: 0 0 10px; font-weight: 600; }

.kbcl-poster__name { font-size: 1rem; margin: 0 0 10px; }
.kbcl-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kbcl-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
}
.kbcl-badge--verified,
.kbcl-badge--phone { background: var(--kbcl-accent); color: #fff; border-color: var(--kbcl-accent); font-weight: 600; }
/* Account age is meta, not a credential — it should not look like one. */
.kbcl-badge--since { background: transparent; border-color: transparent; color: var(--kbcl-muted); padding-left: 0; }
.kbcl-badge--shop_owner { background: var(--kbcl-primary); color: #fff; border-color: var(--kbcl-primary); }

.kbcl-safety h3 { font-size: .95rem; margin: 0 0 8px; }
.kbcl-safety ul { padding-left: 18px; margin: 0 0 10px; font-size: .85rem; line-height: 1.6; }
.kbcl-safety a { font-size: .85rem; }

/* --- Notices ------------------------------------------------------------- */

.kbcl-notice {
    background: var(--kbcl-warn-bg);
    border: 1px solid var(--kbcl-warn-line);
    border-radius: var(--kbcl-radius);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: .88rem;
    line-height: 1.6;
}
.kbcl-notice--strong { border-left: 4px solid #c0392b; }

.kbcl-gone {
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-left: 4px solid var(--kbcl-muted);
    border-radius: var(--kbcl-radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.kbcl-gone strong { display: block; margin-bottom: 4px; }
.kbcl-gone span { color: var(--kbcl-muted); font-size: .9rem; }

/* --- Empty states -------------------------------------------------------- */

.kbcl-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--kbcl-surface-alt);
    border: 1px dashed var(--kbcl-line);
    border-radius: var(--kbcl-radius);
}
.kbcl-empty p { margin: 0 0 10px; }

/* --- How it works, rules, profile ---------------------------------------- */

.kbcl-how__grid { display: grid; grid-template-columns: 1fr; gap: var(--kbcl-gap); }
.kbcl-how__item {
    padding: 16px;
    background: var(--kbcl-surface-alt);
    border-radius: var(--kbcl-radius);
}
.kbcl-how__item h3 { font-size: .95rem; margin: 0 0 6px; }
.kbcl-how__item p { margin: 0; font-size: .88rem; color: var(--kbcl-muted); line-height: 1.6; }
.kbcl-how__links { margin-top: 14px; }
.kbcl-how__links a { margin-right: 16px; font-size: .9rem; }

.kbcl-rules__intro { color: var(--kbcl-muted); max-width: 44rem; line-height: 1.6; }
.kbcl-rule {
    padding: 14px 0;
    border-bottom: 1px solid var(--kbcl-line);
}
.kbcl-rule__title { font-size: 1rem; margin: 0 0 6px; }
.kbcl-rule__body { margin: 0; line-height: 1.65; color: var(--kbcl-muted); }
.kbcl-rules__foot { margin-top: 24px; }
.kbcl-rules__foot a { margin-right: 18px; }

.kbcl-profile__name { margin: 0 0 10px; }
.kbcl-profile__header { margin-bottom: 28px; }
.kbcl-missing { text-align: center; padding: 40px 0; }

/* --- Wider screens ------------------------------------------------------- */




@media (min-width: 768px) {
    /* The filter panel is a <details> so it can start closed on a phone. On a
       wide screen there is room for it, so the summary is hidden and the
       content is forced open.
       Both mechanisms are needed. Older engines exposed the content as an
       ordinary child, which `display: block` was enough to reveal. Current
       Chrome and Firefox hide a closed details' content through the
       ::details-content pseudo-element instead, and a display rule on the child
       does not reach it — which is exactly how this panel came to render as an
       empty box on every desktop browse page. */
    details.kbcl-filters > summary { display: none; }
    details.kbcl-filters > .kbcl-filters__inner { display: block; }
    details.kbcl-filters::details-content {
        content-visibility: visible;
        block-size: auto;
    }

    .kbcl-cats { grid-template-columns: repeat(3, 1fr); }
    .kbcl-grid { grid-template-columns: repeat(3, 1fr); }
    .kbcl-how__grid { grid-template-columns: repeat(3, 1fr); }
    .kbcl-hero { padding: 48px 32px; }
    .kbcl-hero__title { font-size: 2.1rem; }
    .kbcl-ad__title { font-size: 1.8rem; }

    .kbcl-browse__layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 28px;
        align-items: start;
    }
    .kbcl-filters { position: sticky; top: 16px; margin-bottom: 0; }

    .kbcl-ad__layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 32px;
        align-items: start;
    }
    .kbcl-ad__side { position: sticky; top: 16px; }
}

@media (min-width: 1200px) {
    /* Three across, not four: at four the title gets about 28 characters a
       line, and on a board with no photos the title is the product. */
    .kbcl-grid { grid-template-columns: repeat(3, 1fr); }
    .kbcl-cats { grid-template-columns: repeat(6, 1fr); }
}

/* --- Review follow-ups --------------------------------------------------- */

/* "Clear" was unstyled centred body text and did not look clickable. */
.kbcl-filters__clear { text-decoration: underline; }

/* The contact card is the page's conversion moment; it should not look
   identical to the two cards below it. */
.kbcl-contact { border-top: 3px solid var(--kbcl-accent); }
.kbcl-contact__prompt { color: var(--kbcl-ink); font-size: 1rem; }

/* A deliberate "not yet" panel reads as a roadmap. Three dead buttons read as
   a broken deploy. */
.kbcl-soon {
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 14px;
    background: var(--kbcl-surface-alt);
}
.kbcl-soon__title { font-size: .95rem; font-weight: 700; margin: 0 0 6px; }
.kbcl-soon__body { font-size: .87rem; color: var(--kbcl-muted); margin: 0 0 10px; line-height: 1.55; }
.kbcl-soon__list { list-style: none; padding: 0; margin: 0 0 12px; font-size: .85rem; }
.kbcl-soon__list li { padding: 3px 0 3px 18px; position: relative; color: var(--kbcl-muted); }
.kbcl-soon__list li::before { content: '·'; position: absolute; left: 6px; font-weight: 700; }

/* WhatsApp is the right channel for this audience — give it a real target. */
.kbcl-ad__share a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 0 0;
}

/* Posted-at is the freshness signal a noticeboard lives on. */
.kbcl-card__age { white-space: nowrap; }
.kbcl-card__age::before { content: '· '; }

/* "How it works" carries the three best selling points and was the flattest
   block on the page. */
.kbcl-how__item { border-left: 3px solid var(--kbcl-accent); }
.kbcl-how__links a { font-weight: 600; text-decoration: underline; }
.kbcl-subbar__links a { text-decoration: underline; }

/* A persistent way to post, on every page rather than only the landing hero. */
/* The old per-page sub-bar rules lived here. Every page now includes
   _subnav.tpl and the shared rules further down own this block. */
.kbcl-endcta {
    margin-top: 24px;
    padding: 20px;
    text-align: center;
    background: var(--kbcl-surface-alt);
    border-radius: var(--kbcl-radius);
}
.kbcl-endcta p { margin: 0 0 12px; }

/* An empty category should not shout in the accent colour. */
.kbcl-cat__count--empty { color: var(--kbcl-muted); }
/* A subcategory with nothing in it is information, not a destination. */
.kbcl-tag--empty {
    opacity: 1;
    background: none;
    border-color: transparent;
    color: var(--kbcl-muted);
    font-size: .78rem;
    pointer-events: none;
    padding-left: 4px;
    padding-right: 4px;
}

/* The action bar is a mobile affordance only; the mobile block below turns it
   on. This must come first — an equal-specificity rule placed after the media
   query wins at every width, which is exactly how the first attempt at this
   shipped a bar that never appeared. */
.kbcl-actionbar { display: none; }

/* ---------------------------------------------------------------------------
   MOBILE
   ---------------------------------------------------------------------------
   Everything narrow lives here, at the END of the file, because these rules
   override base declarations of identical specificity and CSS resolves those
   ties by source order. Adding a media query above the rule it means to beat
   is a silent no-op — the query matches, the browser applies it, and then the
   later rule quietly wins.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .kbcl-card__link { display: flex; gap: 12px; align-items: stretch; }
    .kbcl-card__media {
        flex: 0 0 104px;
        aspect-ratio: auto;
        min-height: 104px;
        border-radius: var(--kbcl-radius) 0 0 var(--kbcl-radius);
    }
    .kbcl-card__noimage { font-size: .6rem; }
    .kbcl-card__noimage svg { width: 20px; height: 20px; }
    .kbcl-card__body { padding: 10px 12px 10px 0; flex: 1 1 auto; min-width: 0; }
    .kbcl-card__title { -webkit-line-clamp: 3; font-size: 1rem; }
    .kbcl-chip { font-size: .62rem; padding: 2px 6px; }
    .kbcl-card__media .kbcl-chip { top: 6px; left: 6px; }
    .kbcl-card__media .kbcl-chip--drop { top: 28px; }

    /* Filters as a native disclosure — no JavaScript needed for a control this
       simple, and it keeps working if scripts fail. */
    details.kbcl-filters { padding: 0; background: none; border: 0; }
    details.kbcl-filters .kbcl-filters__toggle { display: block; }
    details.kbcl-filters .kbcl-filters__inner {
        padding: 14px;
        margin-top: 8px;
        background: var(--kbcl-surface-alt);
        border: 1px solid var(--kbcl-line);
        border-radius: var(--kbcl-radius);
    }

    /* Right-aligned prose that wraps is the hardest thing to read on a phone,
       so the facts table stacks. */
    .kbcl-ad__fact { flex-direction: column; gap: 2px; }
    .kbcl-ad__fact dt { font-size: .8rem; }
    .kbcl-ad__fact dd { text-align: left; }

    /* The contact action followed 1,370px of page. Now it is always present. */
    .kbcl-actionbar {
        position: fixed;
        left: 0; right: 0;
        /* Stacked above the cookie consent bar rather than under it. That bar
           is position:fixed at bottom:0 with z-index 5101, so it painted over
           this one completely — meaning every visitor's FIRST ad page, which is
           every visitor at launch, had no visible contact button at all.
           Raising our z-index instead would hide a legal notice, so they stack.
           The offset is measured by contact.js; the fallback below covers the
           consent bar's usual height when scripting is unavailable. */
        bottom: var(--kbcl-consent-offset, 0px);
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--kbcl-surface);
        border-top: 1px solid var(--kbcl-line);
        box-shadow: 0 -2px 12px rgba(37,50,55,.1);
    }
    .kbcl-actionbar__price { font-weight: 700; white-space: nowrap; }
    .kbcl-actionbar__cta { flex: 1 1 auto; min-height: 44px; padding: 12px 16px; }
    .kbcl-ad { padding-bottom: calc(84px + var(--kbcl-consent-offset, 0px)); }

    .kbcl-toggle__opt { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .kbcl-tag { min-height: 40px; display: inline-flex; align-items: center; gap: 4px; }
    .kbcl-cats { grid-template-columns: repeat(2, 1fr); }
    .kbcl-cat { padding: 14px; text-align: center; }
    /* The sub-category run-on list is ~850px of unread grey on a phone. */
    .kbcl-cat__children { display: none; }
}

/* One page-top pattern across the section: a white band carrying the
   breadcrumb and heading, then the grey content area. Without this the ad page
   started differently from the listing pages and the section felt like two
   designs. */
.kbcl-ad__top,
.kbcl-browse__header,
.kbcl-profile__header { background: var(--kbcl-surface); }

/* Both columns should finish at roughly the same place. */
.kbcl-browse__layout { padding-bottom: 24px; }

/* A quiet sub-bar for the ad page: links only, no competing button. */

/* The "keep looking" fallback that replaces an empty similar-ads grid. */
.kbcl-more {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 16px;
    margin-bottom: 16px;
}
.kbcl-more h3 { font-size: .95rem; margin: 0 0 8px; }
.kbcl-more ul { list-style: none; padding: 0; margin: 0; }
.kbcl-more li { padding: 5px 0; font-size: .9rem; }

/* B-9: the tile's subcategory list was sliced mid-line by the tile edge, and
   two-line titles knocked the counts out of alignment across the row. */
.kbcl-cat { display: flex; flex-direction: column; }
.kbcl-cat__name { min-height: 2.6em; }
.kbcl-cat__children {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   POSTING FORM
   --------------------------------------------------------------------------- */

.kbcl-post__intro { margin-bottom: 24px; }
.kbcl-post__intro h1 { margin: 0 0 6px; }
.kbcl-post__group { margin-bottom: 28px; }
.kbcl-post__options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.kbcl-post__option {
    display: block;
    padding: 14px 16px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    text-decoration: none;
    min-height: 44px;
}
.kbcl-post__option:hover { border-color: var(--kbcl-accent); text-decoration: none; }
.kbcl-post__option-label { display: block; font-weight: 600; }
.kbcl-post__option-cat { display: block; font-size: .82rem; color: var(--kbcl-muted); }
.kbcl-post__foot { margin-top: 24px; }

.kbcl-drafts { margin-bottom: 28px; }
.kbcl-draft {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    text-decoration: none;
}
.kbcl-draft__title { display: block; font-weight: 600; }
.kbcl-draft__meta { display: block; font-size: .8rem; color: var(--kbcl-muted); }

/* --- The form itself ----------------------------------------------------- */

.kbcl-form { display: block; }
.kbcl-form__head { margin-bottom: 20px; }
.kbcl-form__head h1 { margin: 0 0 4px; font-size: 1.5rem; }
.kbcl-form__section { margin: 28px 0; }

.kbcl-field { margin-bottom: 18px; }
.kbcl-field__label { display: block; font-weight: 600; margin-bottom: 6px; }
.kbcl-field__unit { font-weight: 400; color: var(--kbcl-muted); }
.kbcl-req { color: #c0392b; }
.kbcl-field__help { margin: 6px 0 0; font-size: .82rem; color: var(--kbcl-muted); line-height: 1.5; }
.kbcl-field__error { margin: 6px 0 0; font-size: .85rem; color: #c0392b; font-weight: 600; }
.kbcl-field--error .form-control { border-color: #c0392b; }
.kbcl-field .form-control { width: 100%; }

.kbcl-field__live { margin-top: 6px; }
.kbcl-live { margin: 0 0 4px; font-size: .84rem; padding: 6px 10px; border-radius: 6px; }
/* A hard failure is not a scolding — it says what to change. */
.kbcl-live--hard { background: #fdeaea; color: #922; }
.kbcl-live--soft { background: var(--kbcl-warn-bg); color: #6b5a1f; }

.kbcl-checks { display: grid; grid-template-columns: 1fr; gap: 4px; }
.kbcl-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 0 0 6px; }
.kbcl-check input { margin-top: 3px; flex: 0 0 auto; }
.kbcl-check--rules { margin: 16px 0; font-size: .88rem; }

.kbcl-price { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kbcl-price.is-amountless input[type="number"] { opacity: .4; }

.kbcl-suggest {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    background: var(--kbcl-surface);
    max-height: 260px;
    overflow-y: auto;
}
.kbcl-suggest button {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}
.kbcl-suggest button:hover { background: var(--kbcl-surface-alt); }

.kbcl-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.kbcl-photo { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.kbcl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbcl-photo__remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 28px; height: 28px;
    border: 0; border-radius: 50%;
    background: rgba(37,50,55,.85);
    color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
/* The first photo is the one people see in results, so say so. */
.kbcl-photo:first-child::after {
    content: 'Cover';
    position: absolute;
    left: 4px; bottom: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(37,50,55,.85);
    color: #fff;
    font-size: .65rem;
}

.kbcl-more-options {
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 12px 14px;
    margin: 24px 0;
}
.kbcl-more-options summary { font-weight: 600; cursor: pointer; min-height: 32px; }
.kbcl-more-options__inner { padding-top: 14px; }

.kbcl-rail {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-top: 3px solid var(--kbcl-accent);
    border-radius: var(--kbcl-radius);
    padding: 16px;
}
.kbcl-rail__title { font-size: 1rem; margin: 0 0 12px; }
.kbcl-rail__note { margin: 10px 0; font-size: .82rem; line-height: 1.55; }
.kbcl-rail__limits { font-size: .82rem; margin-bottom: 12px; }
.kbcl-rail__rules { font-size: .85rem; line-height: 1.55; margin-bottom: 12px; }
.kbcl-rail__saved { margin: 10px 0 0; font-size: .8rem; min-height: 1.2em; }
.kbcl-rail__saved.is-error { color: #c0392b; }

.kbcl-errors {
    background: #fdeaea;
    border: 1px solid #f0b9b9;
    border-radius: var(--kbcl-radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.kbcl-errors ul { margin: 8px 0 0; padding-left: 18px; }
.kbcl-errors li { margin-bottom: 4px; }

.kbcl-draftbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kbcl-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--kbcl-primary);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

/* --- Verification -------------------------------------------------------- */

.kbcl-verify__card {
    max-width: 30rem;
    margin: 0 auto;
    padding: 24px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
}
.kbcl-verify__card h1 { font-size: 1.35rem; margin: 0 0 10px; }
.kbcl-verify__lead { line-height: 1.6; margin-bottom: 12px; }
.kbcl-verify__step { margin-top: 18px; }
.kbcl-verify__step .form-control { width: 100%; margin-bottom: 12px; }
.kbcl-verify__code { font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
.kbcl-verify__error { margin: 0 0 10px; color: #c0392b; font-size: .87rem; font-weight: 600; }
.kbcl-verify__error:empty { display: none; }
.kbcl-verify__sent { font-weight: 600; margin-bottom: 12px; }
.kbcl-verify #kbcl-resend { display: block; margin: 12px auto 0; }

@media (min-width: 768px) {
    .kbcl-post__options { grid-template-columns: repeat(2, 1fr); }
    .kbcl-price { grid-template-columns: 180px 1fr 160px; }
    .kbcl-checks { grid-template-columns: repeat(2, 1fr); }
    .kbcl-form {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 32px;
        align-items: start;
    }
    .kbcl-form__rail { position: sticky; top: 16px; }
}

/* --- After publishing ---------------------------------------------------- */

.kbcl-done__card {
    max-width: 34rem;
    margin: 0 auto;
    padding: 28px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-top: 3px solid var(--kbcl-accent);
    border-radius: var(--kbcl-radius);
    text-align: center;
}
.kbcl-done__card h1 { margin: 0 0 10px; font-size: 1.5rem; }
.kbcl-done__lead { line-height: 1.6; color: var(--kbcl-muted); margin-bottom: 16px; }
.kbcl-done__title { font-weight: 600; margin-bottom: 20px; }
.kbcl-done__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.kbcl-done__actions .kbcl-btn + .kbcl-btn { margin-top: 0; }
.kbcl-done__safety { text-align: left; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   MY ADS
   --------------------------------------------------------------------------- */

.kbcl-myads__head { margin-bottom: 24px; }
.kbcl-myads__head h1 { margin: 0 0 4px; }

.kbcl-myad {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
}
.kbcl-myad__media {
    flex: 0 0 92px;
    height: 92px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--kbcl-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kbcl-myad__media img { width: 100%; height: 100%; object-fit: cover; }
.kbcl-myad__noimage { font-size: .65rem; color: var(--kbcl-muted); text-align: center; padding: 4px; }

.kbcl-myad__body { flex: 1 1 auto; min-width: 0; }
.kbcl-myad__title { font-size: 1rem; margin: 0 0 4px; }
.kbcl-myad__title a { text-decoration: none; }
.kbcl-myad__meta { margin: 0 0 6px; font-size: .84rem; color: var(--kbcl-muted); }

.kbcl-myad__stats { margin: 0 0 8px; font-size: .8rem; color: var(--kbcl-muted); }
.kbcl-myad__stats span + span::before { content: ' · '; }
.kbcl-myad__warn { color: #c0392b; font-weight: 600; }

.kbcl-myad__note { margin: 0 0 8px; font-size: .84rem; color: var(--kbcl-muted); }
.kbcl-myad__note--bad { color: #c0392b; }

.kbcl-myad__ask {
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--kbcl-surface-alt);
    border-radius: 8px;
    font-size: .84rem;
}
.kbcl-myad__ask .kbcl-linkbtn { margin-left: 10px; font-weight: 600; }

.kbcl-myad__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kbcl-act {
    padding: 8px 12px;
    min-height: 40px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: 8px;
    font-size: .84rem;
    cursor: pointer;
}
.kbcl-act:hover:not([disabled]) { border-color: var(--kbcl-accent); }
.kbcl-act[disabled] { opacity: .45; cursor: not-allowed; }
.kbcl-act--primary { background: var(--kbcl-accent); border-color: var(--kbcl-accent); color: #fff; font-weight: 600; }
.kbcl-act--danger { color: #c0392b; }

.kbcl-myad__result { margin: 8px 0 0; font-size: .82rem; color: var(--kbcl-muted); min-height: 1em; }
.kbcl-myad__result.is-error { color: #c0392b; font-weight: 600; }

@media (max-width: 767px) {
    .kbcl-myad { flex-direction: column; }
    .kbcl-myad__media { flex: 0 0 auto; width: 100%; height: 140px; }
    .kbcl-act { flex: 1 1 auto; }
}

/* --- Reporting ----------------------------------------------------------- */

/* Quiet on purpose. Easy to find when needed, easy to ignore otherwise — a
   loud report button on every ad invites use as a weapon. */
.kbcl-report { margin: 18px 0; font-size: .88rem; }
.kbcl-report summary { color: var(--kbcl-muted); cursor: pointer; min-height: 32px; }
.kbcl-report__inner {
    margin-top: 10px;
    padding: 14px;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    max-width: 30rem;
}
.kbcl-report__inner .form-control { width: 100%; margin-bottom: 8px; }
.kbcl-report__result { margin: 8px 0 0; font-size: .85rem; color: var(--kbcl-muted); }

/* --- Contact ------------------------------------------------------------- */

/* The number is never in this markup until the server hands it over, so there
   is nothing here to style until a reveal has happened. */
.kbcl-contactbox { display: flex; flex-direction: column; gap: 12px; }

.kbcl-revealed {
    padding: 14px;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    text-align: center;
}
.kbcl-revealed__number {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--kbcl-ink);
    margin-bottom: 10px;
    /* A phone number is the one string on this page people read digit by digit
       and type into a keypad. */
    font-variant-numeric: tabular-nums;
}
.kbcl-revealed__number:hover { color: var(--kbcl-accent); }

.kbcl-btn--wa { background: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }
.kbcl-btn--wa:hover { background: #1eb955; border-color: #1eb955; color: #fff; }

.kbcl-enquiry { display: flex; flex-direction: column; gap: 8px; }
.kbcl-enquiry label { font-weight: 600; font-size: .9rem; text-align: left; }
.kbcl-enquiry textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kbcl-line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

/* One tap beats a blank box: composing "is this still available" in a second
   language is where most enquiries are abandoned. */
.kbcl-qq { display: flex; flex-wrap: wrap; gap: 6px; }
.kbcl-qq__btn {
    padding: 7px 12px;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--kbcl-ink);
    cursor: pointer;
    min-height: 34px;
}
.kbcl-qq__btn:hover { border-color: var(--kbcl-accent); color: var(--kbcl-accent); }

.kbcl-contact__status { margin: 0; font-size: .85rem; color: var(--kbcl-muted); min-height: 1em; }
.kbcl-contact__closed,
.kbcl-contact__own,
.kbcl-contact__prompt { margin: 0 0 10px; font-size: .95rem; }

/* --- Messages ------------------------------------------------------------ */

.kbcl-inbox { list-style: none; margin: 0; padding: 0; }
.kbcl-inbox__item { border-bottom: 1px solid var(--kbcl-line); }
.kbcl-inbox__item a {
    display: block;
    padding: 14px 4px;
    color: var(--kbcl-ink);
    text-decoration: none;
}
.kbcl-inbox__item a:hover { background: var(--kbcl-surface-alt); }
.kbcl-inbox__who { display: block; font-weight: 600; margin-bottom: 2px; }
.kbcl-inbox__ad { display: block; font-size: .88rem; margin-bottom: 2px; }
.kbcl-inbox__last { display: block; font-size: .85rem; color: var(--kbcl-muted); }
.kbcl-inbox__item--unread .kbcl-inbox__who { color: var(--kbcl-accent); }

.kbcl-chip--new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: var(--kbcl-accent);
    color: #fff;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
}

.kbcl-thread { max-width: 42rem; }
.kbcl-thread__back { display: inline-block; margin-bottom: 8px; font-size: .85rem; }
.kbcl-thread__head h1 { margin: 0 0 4px; font-size: 1.3rem; }
.kbcl-thread__ad { margin: 0 0 16px; font-size: .9rem; }

.kbcl-thread__messages { list-style: none; margin: 0 0 18px; padding: 0; }
.kbcl-msg { margin-bottom: 12px; max-width: 85%; }
.kbcl-msg__body {
    margin: 0;
    padding: 11px 14px;
    border-radius: var(--kbcl-radius);
    background: var(--kbcl-surface-alt);
    line-height: 1.5;
    /* Ad text is user-supplied and may be one unbroken string. */
    overflow-wrap: anywhere;
}
.kbcl-msg__meta { margin: 3px 2px 0; font-size: .76rem; color: var(--kbcl-muted); }
.kbcl-msg--mine { margin-left: auto; }
.kbcl-msg--mine .kbcl-msg__body { background: var(--kbcl-accent); color: #fff; }
.kbcl-msg--mine .kbcl-msg__meta { text-align: right; }

.kbcl-reply { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kbcl-reply textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kbcl-line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}
.kbcl-thread__status { margin: 8px 0 0; font-size: .85rem; color: var(--kbcl-muted); min-height: 1em; }
.kbcl-thread__more { margin-top: 26px; font-size: .88rem; }
.kbcl-thread__more summary { color: var(--kbcl-muted); cursor: pointer; min-height: 32px; }
.kbcl-btn--quiet { background: none; border: 1px solid var(--kbcl-line); color: #c0392b; }


/* --- Saving: watchlist, saved searches, notifications -------------------- */

.kbcl-watchbox { margin-bottom: 18px; }
.kbcl-act--watch {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    font-weight: 600;
}
.kbcl-act--watch[aria-pressed="true"] {
    background: var(--kbcl-surface-alt);
    border-color: var(--kbcl-accent);
    color: var(--kbcl-accent);
}
.kbcl-watchbox__note { margin: 6px 0 0; font-size: .8rem; }

/* Offered only after the filters have narrowed something — saving an
   unfiltered board means agreeing to hear about every ad posted. */
.kbcl-savesearch {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
}
.kbcl-savesearch__lead { margin: 0 0 10px; font-weight: 600; font-size: .95rem; }
.kbcl-savesearch__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kbcl-savesearch__row select {
    padding: 9px 12px;
    border: 1px solid var(--kbcl-line);
    border-radius: 8px;
    background: var(--kbcl-surface);
    font: inherit;
    min-height: 40px;
}
.kbcl-savesearch__status { margin: 8px 0 0; font-size: .85rem; min-height: 1em; }

.kbcl-notifs { list-style: none; margin: 0 0 8px; padding: 0; }
.kbcl-notif {
    padding: 11px 4px;
    border-bottom: 1px solid var(--kbcl-line);
    font-size: .92rem;
}
.kbcl-notif--unread { font-weight: 600; }
.kbcl-notif__when { display: block; margin-top: 3px; font-size: .76rem; font-weight: 400; color: var(--kbcl-muted); }

.kbcl-watchlist,
.kbcl-searches { list-style: none; margin: 0 0 26px; padding: 0; }

.kbcl-watch,
.kbcl-search {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--kbcl-line);
}
.kbcl-watch--gone { opacity: .6; }
.kbcl-watch__media { flex: 0 0 80px; width: 80px; height: 64px; border-radius: 8px; overflow: hidden; }
.kbcl-watch__media img { width: 100%; height: 100%; object-fit: cover; }
.kbcl-watch__body,
.kbcl-search__body { flex: 1 1 auto; min-width: 0; }
.kbcl-watch__title,
.kbcl-search__name { display: block; font-weight: 600; color: var(--kbcl-ink); }
.kbcl-watch__meta { margin: 3px 0 0; font-size: .86rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kbcl-watch__price { font-weight: 700; }
.kbcl-chip--drop { background: #fdecea; color: #c0392b; }

@media (max-width: 767px) {
    .kbcl-msg { max-width: 92%; }
    .kbcl-reply button { width: 100%; }
}


/* --- Comments ------------------------------------------------------------ */

.kbcl-comments { max-width: 42rem; }
.kbcl-notice {
    margin: 0 0 16px;
    padding: 11px 14px;
    background: var(--kbcl-warn-bg);
    border: 1px solid var(--kbcl-warn-line);
    border-radius: var(--kbcl-radius);
    font-size: .88rem;
}

.kbcl-commentlist { list-style: none; margin: 0 0 20px; padding: 0; }
.kbcl-commentlist--replies {
    margin: 10px 0 0;
    padding-left: 16px;
    border-left: 2px solid var(--kbcl-line);
}

.kbcl-comment { padding: 12px 0; border-bottom: 1px solid var(--kbcl-line); }
.kbcl-comment--reply { border-bottom: 0; padding-bottom: 6px; }
.kbcl-comment--pending { opacity: .7; }
.kbcl-comment__head { margin: 0 0 4px; font-size: .84rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kbcl-comment__who { font-weight: 600; }
.kbcl-comment__when { color: var(--kbcl-muted); }
.kbcl-comment__body { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.kbcl-comment__actions { margin: 6px 0 0; display: flex; gap: 14px; }

/* Tells the reader whether the answer came from someone who actually knows. */
.kbcl-chip--poster { background: var(--kbcl-primary); color: #fff; }

.kbcl-linkbtn {
    padding: 0;
    background: none;
    border: 0;
    color: var(--kbcl-primary);
    font-size: .82rem;
    text-decoration: underline;
    cursor: pointer;
}
.kbcl-linkbtn--danger { color: #c0392b; }

.kbcl-commentform { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kbcl-commentform label { font-weight: 600; font-size: .9rem; text-align: left; }
.kbcl-commentform textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kbcl-line);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}
.kbcl-commentform__replying { margin: 0; font-size: .85rem; color: var(--kbcl-muted); display: flex; gap: 8px; }
.kbcl-comments__status { margin: 8px 0 0; font-size: .85rem; color: var(--kbcl-muted); min-height: 1em; }

@media (max-width: 767px) {
    .kbcl-watch,
    .kbcl-search { flex-wrap: wrap; }
    .kbcl-watch .kbcl-act,
    .kbcl-search .kbcl-act { flex: 1 1 100%; margin-top: 6px; }
    .kbcl-savesearch__row select,
    .kbcl-savesearch__row .kbcl-btn { flex: 1 1 100%; }
}


/* --- Contact card identity and button hierarchy -------------------------- */

/* Who you are contacting, before how. These signals used to sit three cards
   below the buttons, which meant the trust information arrived after the
   decision it exists to inform. */
.kbcl-contactbox__who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--kbcl-line);
}
.kbcl-contactbox__avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--kbcl-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.kbcl-contactbox__id { min-width: 0; }
.kbcl-contactbox__name { display: block; font-weight: 700; }
.kbcl-contactbox__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.kbcl-contactbox__badges .kbcl-badge { font-size: .68rem; }

/* The message button carries the fill because keeping the conversation on the
   platform is what the section is for. The phone reveal is a real action but a
   secondary one, so it gets the outline. Previously the green was on the phone
   button and "Send" was grey — which on every other screen here means
   disabled. */
.kbcl .kbcl-btn--outline {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-accent);
    color: #4e7a1d;
    font-weight: 600;
}
.kbcl .kbcl-btn--outline:hover { background: rgba(128,180,53,.08); color: #3f6317; }

.kbcl-poster { margin: 0 0 18px; font-size: .9rem; }


/* --- Section navigation --------------------------------------------------- */

/* One bar, every page. There were five different versions of this — different
   links, different order, two link styles in one row, and "Saved" reachable
   from nowhere but itself. */
.kbcl-subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--kbcl-line);
}
.kbcl-subbar__cta { margin-right: auto; }
.kbcl-subbar__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.kbcl-subbar__link {
    /* 40px tall: the old bar was 12px underlined text with a ~20px tap height,
       on a section whose audience is almost entirely on phones. */
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: .92rem;
    text-decoration: none;
    color: var(--kbcl-primary);
}
.kbcl-subbar__link:hover { background: var(--kbcl-surface-alt); text-decoration: none; }
.kbcl-subbar__link.is-current {
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--kbcl-accent);
}

@media (max-width: 767px) {
    .kbcl-commentform button[type="submit"] { width: 100%; }
    .kbcl-commentlist--replies { padding-left: 10px; }
}


/* --- Place, and the ad page's reading order ------------------------------ */

/* The suburb was a link the whole time, painted in the same ink as the body
   text beside it — so it read as a dead label and nobody discovered that the
   board can be browsed by suburb. It now looks like what it is. */
.kbcl-ad__place {
    font-weight: 600;
    color: var(--kbcl-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(37,50,55,.35);
}
a.kbcl-ad__place:hover { color: var(--kbcl-accent); text-decoration-color: var(--kbcl-accent); }
.kbcl-ad__place--plain { text-decoration: none; font-weight: 600; }
.kbcl-ad__sep { color: var(--kbcl-muted); opacity: .5; margin: 0 4px; }

/* The description now leads and the spec table follows it, so the table needs
   a heading to belong to rather than floating under the price. */
.kbcl-ad__factstitle {
    font-size: 1.05rem;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--kbcl-line);
    max-width: 40rem;
}

@media (max-width: 767px) {
    .kbcl-subbar { gap: 8px; }
    .kbcl-subbar__cta { flex: 1 1 100%; margin-right: 0; }
    .kbcl-subbar__nav { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .kbcl-subbar__link { white-space: nowrap; }
}

@media (max-width: 767px) {
    .kbcl-ad__meta { line-height: 1.8; }
}

/* ---------------------------------------------------------------------------
   v1.0.4 — SEARCH BAR, CATEGORY ICONS
   --------------------------------------------------------------------------- */

/* The search field, in the hero of home, browse and the results page.
   The keyword query has worked since M2; its only input was inside the
   collapsed filter drawer, so the section read as unsearchable. */
.kbcl-searchbar { margin: 0 0 18px; }
.kbcl-searchbar__label {
    display: block;
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    margin-bottom: 6px;
}
.kbcl-searchbar__row {
    display: flex;
    gap: 8px;
    max-width: 46rem;
}
.kbcl-searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    /* 44px is the comfortable one-handed target this section is designed to,
       and the type must be >=16px or iOS Safari zooms the page on focus. */
    min-height: 44px;
    font-size: 16px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--kbcl-radius);
    background: #fff;
    color: var(--kbcl-ink);
}
.kbcl-searchbar__input:focus {
    outline: 2px solid var(--kbcl-accent);
    outline-offset: 1px;
}
.kbcl-searchbar__input::placeholder { color: var(--kbcl-muted); }
.kbcl-searchbar__submit { flex: 0 0 auto; min-height: 44px; }

/* On the browse header the band is white, not the dark hero, so the label
   needs the ink colour and the field needs a visible edge. */
.kbcl-browse__header .kbcl-searchbar__label { color: var(--kbcl-muted); }
.kbcl-browse__header .kbcl-searchbar__input { border-color: var(--kbcl-line); }

@media (max-width: 767px) {
    /* Full-width field with the button beneath it: side by side, the button
       squeezes the input to about eight characters. */
    .kbcl-searchbar__row { flex-wrap: wrap; }
    .kbcl-searchbar__input { flex: 1 1 100%; }
    .kbcl-searchbar__submit { flex: 1 1 100%; }
}

/* Category tile icons. `icon` has been seeded since M1 and never drawn. */
.kbcl-cat__icon {
    display: block;
    color: var(--kbcl-accent);
    margin-bottom: 10px;
}
.kbcl-cat__icon svg { width: 28px; height: 28px; display: block; }
.kbcl-cat:hover .kbcl-cat__icon { color: var(--kbcl-primary); }

@media (max-width: 767px) {
    /* Tiles are centre-aligned on a phone, so the icon has to centre with them
       rather than hang off the left edge. */
    .kbcl-cat__icon { margin-left: auto; margin-right: auto; }
}

/* The all-categories results page. */
.kbcl-hero--search .kbcl-crumbs { margin-bottom: 10px; }
.kbcl-hero--search .kbcl-crumbs a { color: rgba(255,255,255,.85); }
.kbcl-hero--search .kbcl-crumbs span { color: rgba(255,255,255,.55); }
.kbcl-searchcats { margin-top: 32px; }
.kbcl-cats--compact .kbcl-cat__name { min-height: 0; }

/* ---------------------------------------------------------------------------
   v1.0.4 — PROMOTE (only ever rendered when monetization is on)
   --------------------------------------------------------------------------- */

.kbcl-promote__title { margin: 8px 0 20px; font-size: 1.5rem; }

.kbcl-promote__ad {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 12px;
    margin-bottom: 24px;
}
.kbcl-promote__thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}
.kbcl-promote__adinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kbcl-promote__adtitle { font-weight: 700; }
.kbcl-promote__adprice { color: var(--kbcl-accent); font-weight: 700; }

.kbcl-promote__running { margin-bottom: 24px; }
.kbcl-promote__runlist { list-style: none; padding: 0; margin: 0; }
.kbcl-promote__runlist li { padding: 6px 0; }

/* The plan chooser. A whole-row label so the tap target is the card, not the
   8px radio — this is a phone-first page and a radio button is not a target. */
.kbcl-promote__plans { display: grid; gap: 12px; margin-bottom: 8px; }
.kbcl-plan {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    cursor: pointer;
    margin: 0;
}
.kbcl-plan:hover { border-color: var(--kbcl-accent); }
.kbcl-plan__radio { margin-top: 4px; flex: 0 0 auto; }
.kbcl-plan__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.kbcl-plan__name { font-weight: 700; }
.kbcl-plan__desc { color: var(--kbcl-muted); font-size: .9rem; }
.kbcl-plan__meta { color: var(--kbcl-muted); font-size: .82rem; }
.kbcl-plan__price { font-weight: 700; font-size: 1.1rem; white-space: nowrap; flex: 0 0 auto; }

/* :has() is not universal yet, so the checked state is a progressive
   enhancement — the radio itself always shows what is selected. */
.kbcl-plan:has(.kbcl-plan__radio:checked) {
    border-color: var(--kbcl-accent);
    box-shadow: inset 0 0 0 1px var(--kbcl-accent);
}

.kbcl-promote__note { margin: 14px 0 18px; font-size: .88rem; }
.kbcl-promote__submit { min-height: 44px; }

/* The "Promoted" badge in My ads. */
.kbcl-myad__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .9rem; }
.kbcl-myad__promobadge {
    display: inline-block;
    background: var(--kbcl-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}

@media (max-width: 767px) {
    .kbcl-plan { flex-wrap: wrap; }
    .kbcl-plan__price { width: 100%; text-align: right; }
    .kbcl-promote__submit { width: 100%; }
}

/* The "Get tickets" action on an event notice that points at a ticketed event
   already selling here (FR-12.3). Under the description, not in the details
   table: for a ticketed event that is the whole reason the reader is here. */
.kbcl-ad__tickets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}

/* ==========================================================================
   NepalNet Matrimony
   --------------------------------------------------------------------------
   A quieter register than the noticeboard. The general board is a market and
   looks like one — green buttons, price chips, urgency badges. This section is
   a family reading about another family, so it is calmer, wider-spaced, and
   uses the deep primary rather than the accent green for anything emphatic.
   The one exception is the blur treatment, which is deliberately obvious: a
   protected photograph has to read as a choice somebody made, not as an image
   that failed to load.
   ========================================================================== */

.kbcl-matri {
    --kbcl-matri-ink: #253237;
    --kbcl-matri-soft: #f4f1ec;
    --kbcl-matri-line: #e0dbd2;
}

/* --- Section navigation -------------------------------------------------- */
.kbcl-matri-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--kbcl-primary);
    color: #fff;
    border-radius: var(--kbcl-radius);
    margin-bottom: 24px;
}
.kbcl-matri-nav__brand { font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; }
.kbcl-matri-nav__list { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.kbcl-matri-nav__item { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .95rem; }
.kbcl-matri-nav__item:hover,
.kbcl-matri-nav__item.is-current { color: #fff; text-decoration: underline; }
.kbcl-matri-nav .kbcl-matri-nav__cta { flex: 0 0 auto; }

/* --- The gate ------------------------------------------------------------ */
.kbcl-matri-gate { display: flex; justify-content: center; padding: 40px 16px; }
.kbcl-matri-gate__panel {
    max-width: 540px;
    text-align: center;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 36px 28px;
}
.kbcl-matri-gate__title { margin: 0 0 12px; font-size: 1.6rem; }
.kbcl-matri-gate__lead { color: var(--kbcl-muted); margin: 0 0 24px; line-height: 1.6; }
.kbcl-matri-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kbcl-matri-gate__note { margin: 20px 0 0; font-size: .9rem; color: var(--kbcl-muted); }
.kbcl-matri-gate__back { margin: 16px 0 0; font-size: .9rem; }

/* --- Landing ------------------------------------------------------------- */
.kbcl-matri-hero {
    background: var(--kbcl-matri-soft);
    border-radius: var(--kbcl-radius);
    padding: 44px 24px;
    margin-bottom: 32px;
}
.kbcl-matri-hero__inner { max-width: 780px; margin: 0 auto; text-align: center; }
.kbcl-matri-hero__title { margin: 0 0 12px; font-size: 2rem; }
.kbcl-matri-hero__lead { color: var(--kbcl-muted); line-height: 1.65; margin: 0 0 20px; }
.kbcl-matri-hero__trust {
    display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center;
    margin: 0 0 28px; font-size: .88rem; color: var(--kbcl-primary);
}
.kbcl-matri-hero__trust span::before { content: "\2713\00a0"; font-weight: 700; }
.kbcl-matri-hero__tiles { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 24px; }
.kbcl-matri-tile {
    flex: 1 1 220px; max-width: 300px;
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-matri-line);
    border-radius: var(--kbcl-radius);
    padding: 22px 18px;
    text-decoration: none;
    color: var(--kbcl-ink);
    transition: border-color .15s, transform .15s;
}
.kbcl-matri-tile:hover { border-color: var(--kbcl-primary); transform: translateY(-2px); }
.kbcl-matri-tile__label { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.kbcl-matri-tile__count { display: block; color: var(--kbcl-muted); font-size: .9rem; }
.kbcl-matri-hero__note { display: block; margin-top: 10px; font-size: .88rem; color: var(--kbcl-muted); }

.kbcl-matri-section__title { font-size: 1.25rem; margin: 0 0 16px; }
.kbcl-matri-promises { margin-bottom: 36px; }
.kbcl-matri-promises__grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kbcl-matri-promise {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 18px;
}
.kbcl-matri-promise__title { font-size: 1rem; margin: 0 0 8px; }
.kbcl-matri-promise__body { margin: 0; color: var(--kbcl-muted); font-size: .92rem; line-height: 1.6; }

.kbcl-matri-stories { margin-bottom: 36px; }
.kbcl-matri-stories__note { color: var(--kbcl-muted); font-size: .9rem; margin: -8px 0 16px; }
.kbcl-matri-stories__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kbcl-matri-story {
    margin: 0; padding: 18px 20px;
    background: var(--kbcl-matri-soft);
    border-left: 3px solid var(--kbcl-primary);
    border-radius: 0 var(--kbcl-radius) var(--kbcl-radius) 0;
    font-style: italic; line-height: 1.6;
}
.kbcl-matri-safetylink {
    background: var(--kbcl-warn-bg);
    border: 1px solid var(--kbcl-warn-line);
    border-radius: var(--kbcl-radius);
    padding: 22px;
}

/* --- The entry tile on the classifieds home ------------------------------ */
.kbcl-matri-entry {
    background: var(--kbcl-matri-soft, #f4f1ec);
    border-radius: var(--kbcl-radius);
    padding: 26px 22px;
}
.kbcl-matri-entry__inner { max-width: 620px; }
.kbcl-matri-entry__title { margin: 0 0 6px; font-size: 1.2rem; }
.kbcl-matri-entry__tagline { margin: 0 0 16px; color: var(--kbcl-muted); font-size: .95rem; }

/* --- Browse -------------------------------------------------------------- */
.kbcl-matri-browse__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
    justify-content: space-between; margin-bottom: 18px;
}
.kbcl-matri-browse__title { margin: 0; font-size: 1.5rem; }
.kbcl-matri-browse__count { margin: 0; color: var(--kbcl-muted); font-size: .92rem; }

.kbcl-matri-filters {
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 18px;
    margin-bottom: 24px;
}
.kbcl-matri-filters__row,
.kbcl-matri-filters__grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kbcl-matri-filters__grid { margin-top: 14px; }
.kbcl-matri-filters__actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

.kbcl-matri-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* --- A card -------------------------------------------------------------- */
.kbcl-matri-card {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.kbcl-matri-card:hover { border-color: var(--kbcl-primary); transform: translateY(-2px); }
.kbcl-matri-card__link { display: block; color: inherit; text-decoration: none; }
.kbcl-matri-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--kbcl-matri-soft); }
.kbcl-matri-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbcl-matri-card__media--empty { display: flex; align-items: center; justify-content: center; }
.kbcl-matri-card__noimage { color: var(--kbcl-muted); font-size: .85rem; }
.kbcl-matri-card__lock {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(37, 50, 55, .78); color: #fff;
    font-size: .72rem; text-align: center; padding: 5px 8px;
}
.kbcl-matri-card__body { padding: 14px 15px 16px; }
.kbcl-matri-card__seeking {
    display: inline-block; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--kbcl-muted); margin-bottom: 5px;
}
.kbcl-matri-card__identity { margin: 0 0 8px; font-size: 1.05rem; }
.kbcl-matri-card__facts { margin: 0 0 5px; font-size: .88rem; color: var(--kbcl-ink); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.kbcl-matri-card__profession { margin: 0 0 5px; font-size: .88rem; color: var(--kbcl-muted); }
.kbcl-matri-card__where { margin: 0 0 5px; font-size: .88rem; color: var(--kbcl-muted); }
.kbcl-matri-card__postedby { margin: 8px 0 0; font-size: .8rem; color: var(--kbcl-muted); }

.kbcl-matri-empty { text-align: center; padding: 44px 20px; color: var(--kbcl-muted); }
.kbcl-matri-empty__note { color: var(--kbcl-muted); font-size: .92rem; }

/* --- A notice ------------------------------------------------------------ */
.kbcl-matri-ad { display: grid; gap: 28px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
.kbcl-matri-ad__head { margin-bottom: 20px; }
.kbcl-matri-ad__seeking { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kbcl-muted); }
.kbcl-matri-ad__identity { margin: 4px 0 6px; font-size: 1.8rem; }
.kbcl-matri-ad__posted { margin: 0; color: var(--kbcl-muted); font-size: .88rem; }
.kbcl-matri-ad__subtitle { font-size: 1.05rem; margin: 0 0 12px; }
.kbcl-matri-ad__photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 26px; }
.kbcl-matri-photo { margin: 0; }
.kbcl-matri-photo img { width: 100%; border-radius: var(--kbcl-radius); display: block; }
.kbcl-matri-photo__note { font-size: .78rem; color: var(--kbcl-muted); margin-top: 6px; text-align: center; }
.kbcl-matri-ad__about { margin-bottom: 26px; line-height: 1.65; }
.kbcl-matri-facts { margin: 0; }
.kbcl-matri-facts__row {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    padding: 9px 0; border-bottom: 1px solid var(--kbcl-line);
}
.kbcl-matri-facts__row dt { flex: 0 0 190px; color: var(--kbcl-muted); font-size: .9rem; margin: 0; }
.kbcl-matri-facts__row dd { flex: 1 1 auto; margin: 0; font-size: .95rem; }
.kbcl-matri-selfdeclared {
    display: block; font-size: .76rem; color: var(--kbcl-muted); font-style: italic; margin-top: 2px;
}
.kbcl-matri-ad__disclaimer { margin-top: 24px; }

.kbcl-matri-ad__side > * + * { margin-top: 20px; }
.kbcl-matri-poster,
.kbcl-matri-enquiry,
.kbcl-matri-owner,
.kbcl-matri-safety {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 18px;
}
.kbcl-matri-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kbcl-matri-enquiry__note { font-size: .88rem; color: var(--kbcl-muted); line-height: 1.55; margin: 0 0 12px; }
.kbcl-matri-openers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.kbcl-matri-opener {
    text-align: left; font-size: .82rem; line-height: 1.4;
    background: var(--kbcl-surface-alt); border: 1px solid var(--kbcl-line);
    border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--kbcl-ink);
}
.kbcl-matri-opener:hover { border-color: var(--kbcl-primary); }
.kbcl-matri-enquiry__form textarea { margin-bottom: 10px; }
.kbcl-matri-enquiry__result { margin: 10px 0 0; font-size: .88rem; }
.kbcl-matri-enquiry__result.is-ok { color: var(--kbcl-accent); }
.kbcl-matri-enquiry__result.is-error { color: #b3261e; }
.kbcl-matri-safety { background: var(--kbcl-warn-bg); border-color: var(--kbcl-warn-line); font-size: .88rem; }

/* --- Posting ------------------------------------------------------------- */
.kbcl-matri-post { max-width: 760px; }
.kbcl-matri-post__title { font-size: 1.6rem; margin: 0 0 20px; }
.kbcl-matri-post__block {
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 20px;
    margin: 0 0 20px;
}
.kbcl-matri-post__block legend { font-weight: 700; font-size: 1rem; padding: 0 8px; width: auto; border: 0; margin: 0; }
.kbcl-matri-seeking { display: flex; flex-wrap: wrap; gap: 10px; }
.kbcl-check--tile {
    border: 1px solid var(--kbcl-line); border-radius: var(--kbcl-radius);
    padding: 10px 16px; cursor: pointer;
}
.kbcl-matri-post__advanced { margin-top: 14px; }
.kbcl-matri-post__thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.kbcl-matri-thumb { margin: 0; width: 130px; }
.kbcl-matri-thumb img { width: 100%; border-radius: 8px; display: block; }
.kbcl-matri-thumb figcaption { font-size: .76rem; color: var(--kbcl-muted); margin-top: 5px; text-align: center; }
.kbcl-matri-photomode { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: .78rem; }
.kbcl-matri-photomode__toggle {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--kbcl-primary); text-decoration: underline; font-size: .76rem;
}
.kbcl-matri-post__consent { background: var(--kbcl-matri-soft); }
.kbcl-matri-post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kbcl-matri-post__limit { color: var(--kbcl-muted); font-size: .88rem; }

.kbcl-matri-verify { max-width: 640px; }
.kbcl-matri-verify__lead { line-height: 1.65; color: var(--kbcl-muted); }
.kbcl-matri-verify__how {
    background: var(--kbcl-surface-alt); border-radius: var(--kbcl-radius);
    padding: 20px; margin: 20px 0;
}
.kbcl-matri-verify__how h2 { font-size: 1.05rem; margin: 0 0 10px; }
.kbcl-matri-verify__meanwhile { margin-top: 20px; font-size: .9rem; color: var(--kbcl-muted); }
.kbcl-matri-posted { max-width: 620px; }
.kbcl-matri-posted__title { font-size: 1.5rem; margin: 0 0 14px; }
.kbcl-matri-posted__lead { font-size: 1.05rem; line-height: 1.6; }
.kbcl-matri-posted__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --- My notices ---------------------------------------------------------- */
.kbcl-matri-my__title { font-size: 1.6rem; margin: 0 0 24px; }
.kbcl-matri-my__section { margin-bottom: 34px; }
.kbcl-matri-threads { list-style: none; margin: 0; padding: 0; }
.kbcl-matri-thread { border: 1px solid var(--kbcl-line); border-radius: var(--kbcl-radius); margin-bottom: 8px; }
.kbcl-matri-thread.is-waiting { border-color: var(--kbcl-accent); }
.kbcl-matri-thread__link {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 16px; text-decoration: none; color: inherit;
}
.kbcl-matri-thread__who { font-weight: 600; flex: 1 1 auto; }
.kbcl-matri-thread__state { font-size: .85rem; color: var(--kbcl-muted); }
.kbcl-matri-thread__unread {
    background: var(--kbcl-accent); color: #fff; border-radius: 999px;
    padding: 1px 8px; font-size: .78rem; font-weight: 700;
}

.kbcl-matri-notice {
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 20px;
    margin-bottom: 16px;
}
.kbcl-matri-notice__head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: start; }
.kbcl-matri-notice__identity { margin: 0; font-size: 1.15rem; }
.kbcl-matri-notice__seeking { margin: 2px 0 0; font-size: .85rem; color: var(--kbcl-muted); }
.kbcl-matri-state {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 999px; background: var(--kbcl-surface-alt); color: var(--kbcl-muted);
}
.kbcl-matri-state--live { background: var(--kbcl-accent); color: #fff; }
.kbcl-matri-state--pending { background: var(--kbcl-warn-bg); color: #8a6d1f; }
.kbcl-matri-notice__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: .88rem; color: var(--kbcl-muted); }
.kbcl-matri-notice__waiting { color: var(--kbcl-accent); font-weight: 600; }
.kbcl-matri-notice__photos,
.kbcl-matri-notice__grants { margin: 16px 0; }
.kbcl-matri-grants { list-style: none; margin: 0; padding: 0; }
.kbcl-matri-grant {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--kbcl-line); font-size: .88rem;
}
.kbcl-matri-grant.is-revoked { color: var(--kbcl-muted); text-decoration: line-through; }
.kbcl-matri-grant__who { font-weight: 600; flex: 1 1 auto; text-decoration: none; }
.kbcl-matri-grant__what { color: var(--kbcl-muted); }
.kbcl-matri-grant__when { color: var(--kbcl-muted); font-size: .82rem; }
.kbcl-matri-notice__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kbcl-matri-notice__result { margin: 10px 0 0; font-size: .88rem; }
.kbcl-matri-notice__result.is-ok { color: var(--kbcl-accent); }
.kbcl-matri-notice__result.is-error { color: #b3261e; }
.kbcl-matri-story-prompt {
    background: var(--kbcl-matri-soft); border-radius: var(--kbcl-radius);
    padding: 16px; margin-top: 14px; font-size: .9rem;
}
.kbcl-matri-story-prompt textarea { margin: 10px 0; }

/* --- One conversation ---------------------------------------------------- */
.kbcl-matri-conv { max-width: 720px; }
.kbcl-matri-conv__back { font-size: .9rem; margin-bottom: 12px; }
.kbcl-matri-conv__head { margin-bottom: 16px; }
.kbcl-matri-conv__who { margin: 0 0 8px; font-size: 1.4rem; }
.kbcl-matri-conv__safety { margin-bottom: 20px; font-size: .88rem; }
.kbcl-matri-messages { list-style: none; margin: 0 0 24px; padding: 0; }
.kbcl-matri-message {
    background: var(--kbcl-surface-alt);
    border-radius: var(--kbcl-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    max-width: 84%;
    line-height: 1.55;
}
.kbcl-matri-message.is-mine { background: var(--kbcl-matri-soft); margin-left: auto; }
.kbcl-matri-message p { margin: 0 0 6px; }
.kbcl-matri-message time { font-size: .76rem; color: var(--kbcl-muted); }
.kbcl-matri-decide {
    border: 1px solid var(--kbcl-line); border-radius: var(--kbcl-radius);
    padding: 20px; margin-bottom: 20px;
}
.kbcl-matri-decide__grants { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; }
.kbcl-matri-decide__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kbcl-matri-granted-phone {
    background: var(--kbcl-matri-soft);
    border-radius: var(--kbcl-radius);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.kbcl-matri-granted-phone__value { font-size: 1.3rem; font-weight: 700; margin: 6px 0; letter-spacing: .02em; }
.kbcl-matri-granted-phone small { color: var(--kbcl-muted); font-size: .82rem; }
.kbcl-matri-reply textarea { margin-bottom: 10px; }
.kbcl-matri-waiting { color: var(--kbcl-muted); font-size: .92rem; }
.kbcl-matri-conv__result { margin-top: 12px; font-size: .88rem; }
.kbcl-matri-conv__result.is-ok { color: var(--kbcl-accent); }
.kbcl-matri-conv__result.is-error { color: #b3261e; }

/* --- Safety page --------------------------------------------------------- */
.kbcl-matri-safety-page { max-width: 720px; }
.kbcl-matri-safety-page__title { font-size: 1.6rem; margin: 0 0 12px; }
.kbcl-matri-safety-page__lead { color: var(--kbcl-muted); line-height: 1.65; margin-bottom: 26px; }
.kbcl-matri-safety-page__foot {
    background: var(--kbcl-warn-bg); border: 1px solid var(--kbcl-warn-line);
    border-radius: var(--kbcl-radius); padding: 20px; margin-top: 28px;
}

@media (max-width: 900px) {
    .kbcl-matri-ad { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .kbcl-matri-nav { gap: 10px; padding: 12px 14px; }
    .kbcl-matri-nav__list { order: 3; width: 100%; }
    .kbcl-matri-hero { padding: 30px 16px; }
    .kbcl-matri-hero__title { font-size: 1.6rem; }
    .kbcl-matri-facts__row dt { flex: 1 1 100%; }
    .kbcl-matri-message { max-width: 100%; }
}

/* ==========================================================================
   The remittance rate board
   --------------------------------------------------------------------------
   A table people read on a phone while deciding who to ring. Numbers lead;
   everything else is subordinate to them. Stale rows are visibly demoted
   rather than merely annotated — somebody skimming must not be able to mistake
   Tuesday's rate for today's.
   ========================================================================== */

.kbcl-remit-hero {
    background: var(--kbcl-primary);
    color: #fff;
    border-radius: var(--kbcl-radius);
    padding: 34px 24px;
    margin-bottom: 22px;
}
.kbcl-remit-hero__inner { max-width: 720px; }
.kbcl-remit-hero__title { margin: 0 0 4px; font-size: 1.9rem; color: #fff; }
.kbcl-remit-hero__date { margin: 0 0 14px; color: rgba(255,255,255,.75); font-size: .95rem; }
.kbcl-remit-hero__lead { margin: 0; color: rgba(255,255,255,.9); line-height: 1.6; }

/* --- Disclaimer ---------------------------------------------------------- */
.kbcl-remit-disclaimer {
    background: var(--kbcl-warn-bg);
    border: 1px solid var(--kbcl-warn-line);
    border-radius: var(--kbcl-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.kbcl-remit-disclaimer__summary { font-weight: 700; cursor: pointer; }
.kbcl-remit-disclaimer__body { margin-top: 12px; }
.kbcl-remit-disclaimer__item { margin-bottom: 12px; }
.kbcl-remit-disclaimer__item h2 { font-size: .95rem; margin: 0 0 4px; }
.kbcl-remit-disclaimer__item p { margin: 0; font-size: .88rem; line-height: 1.6; color: #5c5330; }

/* --- Calculator ---------------------------------------------------------- */
.kbcl-remit-calc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: var(--kbcl-surface-alt);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 14px 18px; margin-bottom: 20px;
}
.kbcl-remit-calc__label { font-weight: 600; }
.kbcl-remit-calc__field { display: flex; align-items: center; gap: 4px; }
.kbcl-remit-calc__prefix { font-weight: 700; color: var(--kbcl-muted); }
.kbcl-remit-calc__field input {
    width: 120px; padding: 8px 10px; font-size: 1rem; font-weight: 600;
    border: 1px solid var(--kbcl-line); border-radius: 8px;
}
.kbcl-remit-calc__hint { color: var(--kbcl-muted); font-size: .9rem; }

/* --- Featured ------------------------------------------------------------ */
.kbcl-remit-featured { margin-bottom: 24px; }
.kbcl-remit-featured__label {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--kbcl-muted); margin: 0 0 10px;
}
.kbcl-remit-featured__label span { text-transform: none; letter-spacing: 0; font-style: italic; }
.kbcl-remit-featured__grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kbcl-remit-card {
    background: var(--kbcl-surface);
    border: 2px solid var(--kbcl-accent);
    border-radius: var(--kbcl-radius);
    padding: 16px;
}
.kbcl-remit-card.is-stale { border-color: var(--kbcl-line); opacity: .72; }
.kbcl-remit-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kbcl-remit-card__logo { max-height: 34px; max-width: 90px; object-fit: contain; }
.kbcl-remit-card__name { margin: 0; font-size: 1.05rem; }
.kbcl-remit-card__rate { margin: 0 0 8px; }
.kbcl-remit-card__value { font-size: 1.8rem; font-weight: 700; color: var(--kbcl-primary); }
.kbcl-remit-card__unit { display: block; font-size: .8rem; color: var(--kbcl-muted); }
.kbcl-remit-card__stale { margin: 0 0 8px; font-size: .8rem; color: #8a6d1f; }
.kbcl-remit-card__offering { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; }
.kbcl-remit-card__fee { margin: 0 0 12px; font-size: .85rem; color: var(--kbcl-muted); }
.kbcl-remit-card__fee span { display: block; font-style: italic; }
.kbcl-remit-card__details { margin-top: 12px; }

/* --- The table ----------------------------------------------------------- */
.kbcl-remit-tablewrap { overflow-x: auto; margin-bottom: 14px; }
.kbcl-remit-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.kbcl-remit-table th {
    text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--kbcl-muted); padding: 10px 12px; border-bottom: 2px solid var(--kbcl-line);
    white-space: nowrap;
}
.kbcl-remit-table__num { text-align: right; }
.kbcl-remit-table td { padding: 14px 12px; border-bottom: 1px solid var(--kbcl-line); vertical-align: top; }

.kbcl-remit-row.is-stale { background: #fbfbfa; color: var(--kbcl-muted); }
.kbcl-remit-row.is-stale .kbcl-remit-row__rate { color: var(--kbcl-muted); font-weight: 600; }
.kbcl-remit-row.is-best { background: rgba(128, 180, 53, .07); }

.kbcl-remit-row__name { display: block; font-weight: 700; }
.kbcl-remit-row__offering { display: block; font-size: .85rem; color: var(--kbcl-muted); margin-top: 3px; line-height: 1.5; }
.kbcl-remit-row__suburb { display: block; font-size: .8rem; color: var(--kbcl-muted); margin-top: 2px; }
.kbcl-remit-row__feenote { display: block; font-size: .78rem; color: var(--kbcl-muted); font-style: italic; }
.kbcl-remit-row__rate { font-size: 1.25rem; font-weight: 700; color: var(--kbcl-primary); }
.kbcl-remit-row__when { white-space: nowrap; font-size: .85rem; }
.kbcl-remit-row__action { text-align: right; white-space: nowrap; }

.kbcl-remit-tag {
    display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    background: var(--kbcl-surface-alt); color: var(--kbcl-muted);
    padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.kbcl-remit-tag--best { background: var(--kbcl-accent); color: #fff; }

.kbcl-remit-delta { font-size: .8rem; margin-left: 4px; }
.kbcl-remit-delta--up { color: #2e7d32; }
.kbcl-remit-delta--down { color: #b3261e; }

.kbcl-remit-fresh { color: #2e7d32; font-weight: 600; }
.kbcl-remit-old { color: #8a6d1f; font-weight: 600; }
.kbcl-remit-old small { display: block; font-weight: 400; color: var(--kbcl-muted); }

/* --- Contact panel ------------------------------------------------------- */
.kbcl-remit-details td { background: var(--kbcl-surface-alt); }
.kbcl-remit-contact { padding: 4px 0; }
.kbcl-remit-contact__name { margin: 0 0 6px; font-weight: 700; }
.kbcl-remit-contact__phone { margin: 0 0 6px; }
.kbcl-remit-contact__phone a { font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.kbcl-remit-contact__where { margin: 0 0 6px; color: var(--kbcl-muted); font-size: .88rem; }
.kbcl-remit-contact__ids { margin: 8px 0 0; font-size: .82rem; color: var(--kbcl-muted); }
.kbcl-remit-contact__selfdeclared { display: block; font-style: italic; margin-top: 2px; }
.kbcl-remit-contact__ads { margin: 8px 0 0; font-size: .88rem; }
.kbcl-remit-contact__warn {
    margin: 10px 0 0; padding: 8px 10px; font-size: .82rem; line-height: 1.5;
    background: var(--kbcl-warn-bg); border-left: 3px solid var(--kbcl-warn-line); border-radius: 0 6px 6px 0;
}
.kbcl-remit-contact__error { margin: 0; color: #b3261e; font-size: .88rem; }

.kbcl-remit-foot { color: var(--kbcl-muted); font-size: .85rem; line-height: 1.6; margin: 0 0 26px; }
.kbcl-remit-empty { text-align: center; padding: 40px 20px; color: var(--kbcl-muted); }

.kbcl-remit-cta {
    background: var(--kbcl-surface-alt);
    border-radius: var(--kbcl-radius);
    padding: 22px; text-align: center;
}
.kbcl-remit-cta h2 { margin: 0 0 8px; font-size: 1.15rem; }
.kbcl-remit-cta p { margin: 0 0 14px; color: var(--kbcl-muted); }

/* --- Home strip ---------------------------------------------------------- */
.kbcl-remit-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    background: var(--kbcl-primary); color: #fff;
    border-radius: var(--kbcl-radius); padding: 14px 20px;
}
.kbcl-remit-strip__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.kbcl-remit-strip__rate { font-size: 1.4rem; font-weight: 700; }
.kbcl-remit-strip__unit { opacity: .8; font-size: .85rem; }
.kbcl-remit-strip a { color: #fff; text-decoration: underline; margin-left: auto; font-size: .9rem; }

/* --- Partner page -------------------------------------------------------- */
.kbcl-remit-partner { max-width: 860px; }
.kbcl-remit-partner__back { font-size: .9rem; margin-bottom: 10px; }
.kbcl-remit-partner__title { font-size: 1.6rem; margin: 0 0 18px; }
.kbcl-remit-partner__top {
    display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 24px;
}
.kbcl-remit-ratebox, .kbcl-remit-stats, .kbcl-remit-pending, .kbcl-remit-intro, .kbcl-remit-history {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 20px;
}
.kbcl-remit-ratebox h2, .kbcl-remit-stats h2, .kbcl-remit-history h2 { margin: 0 0 12px; font-size: 1.05rem; }
.kbcl-remit-ratebox__live { color: #2e7d32; font-size: .9rem; margin: 0 0 14px; }
.kbcl-remit-ratebox__missing { color: #8a6d1f; font-size: .9rem; margin: 0 0 14px; line-height: 1.5; }
.kbcl-remit-stats__grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 12px; }
.kbcl-remit-stats__n { display: block; font-size: 2rem; font-weight: 700; color: var(--kbcl-primary); line-height: 1; }
.kbcl-remit-stats__l { display: block; font-size: .8rem; color: var(--kbcl-muted); margin-top: 2px; }
.kbcl-remit-stats__note { font-size: .85rem; color: var(--kbcl-muted); line-height: 1.5; margin: 0 0 12px; }
.kbcl-remit-stats__ads { font-size: .88rem; border-top: 1px solid var(--kbcl-line); padding-top: 12px; }
.kbcl-remit-stats__ads p { margin: 0; line-height: 1.5; }
.kbcl-remit-history { margin-bottom: 24px; overflow-x: auto; }
.kbcl-remit-intro { margin-bottom: 20px; }
.kbcl-remit-intro p { margin: 0 0 8px; line-height: 1.6; }
.kbcl-remit-form { margin-top: 8px; }
.kbcl-remit-form h2 { font-size: 1.15rem; margin: 0 0 14px; }
.kbcl-remit-pending { margin-bottom: 20px; }
.kbcl-remit-pending h2 { margin: 0 0 8px; font-size: 1.1rem; }
.kbcl-remit-pending p { margin: 0; line-height: 1.6; color: var(--kbcl-muted); }

@media (max-width: 767px) {
    .kbcl-remit-hero { padding: 24px 16px; }
    .kbcl-remit-hero__title { font-size: 1.45rem; }
    .kbcl-remit-calc { flex-direction: column; align-items: flex-start; }
    .kbcl-remit-strip a { margin-left: 0; width: 100%; }
}

/* The verification gate on the remitter's own page. Shown instead of the forms
   when a business has not been identity-checked — a rate is a number families
   act on, so an unverified business cannot publish one. */
.kbcl-remit-verify {
    background: var(--kbcl-warn-bg);
    border: 1px solid var(--kbcl-warn-line);
    border-radius: var(--kbcl-radius);
    padding: 22px;
    margin-bottom: 22px;
}
.kbcl-remit-verify h2 { margin: 0 0 10px; font-size: 1.15rem; }
.kbcl-remit-verify > p { margin: 0 0 14px; line-height: 1.6; }
.kbcl-remit-verify__existing { font-weight: 600; }
.kbcl-remit-verify__routes {
    display: grid; gap: 16px; margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kbcl-remit-verify__routes > div {
    background: var(--kbcl-surface);
    border: 1px solid var(--kbcl-line);
    border-radius: var(--kbcl-radius);
    padding: 16px;
}
.kbcl-remit-verify__routes h3 { margin: 0 0 6px; font-size: 1rem; }
.kbcl-remit-verify__routes p { margin: 0 0 12px; font-size: .9rem; color: var(--kbcl-muted); line-height: 1.5; }