/* ==========================================================================
   CamperBay.nl — global theme override. Loaded on every page after mp.css so
   the whole site (account, chat, login, registration, category, ad, admin-free
   front) adopts the pine + amber palette used by the homepage. It only re-points
   the mp.css design tokens (coral -> pine) plus a few high-visibility accents.
   ========================================================================== */
:root{
  --mp-primary:#1F3D30;
  --mp-primary-hover:#2E5A45;
  --mp-primary-050:#e9efe9;
  --mp-bg:#EFF1ED;
}
body{background:var(--mp-bg)}

/* thin, on-brand scrollbar for EVERY scroll area (dropdowns, popups, panels, page) — pine/amber system.
   Where a scrollbar is intentionally hidden (mobile page scroll, horizontal catnav/chip strips) that
   more-specific rule still wins by specificity, so this only thins/recolours the visible ones. */
*{scrollbar-width:thin;scrollbar-color:#4E8163 transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#4E8163;border-radius:20px;min-height:36px}
::-webkit-scrollbar-thumb:hover{background:#1F3D30}

/* every native <select> adopts the pine/amber design (rounded box + custom chevron) instead of the boxy OS
   look. Only the ARROW props are !important (to beat legacy `background:` shorthands that would kill a custom
   chevron); the box props stay overridable so component selects (.cp-acc, .field .sel, sorts) keep their own
   sizing. Native <select> option LISTS are still OS-rendered — that part can't be styled. */
select,select.form-control{appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6A62' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;border:1px solid #CBD4CC;border-radius:11px;background-color:#EFF1ED;min-height:44px;max-width:100%;padding:0 40px 0 13px;font:inherit;font-size:14px;color:#15211C;cursor:pointer;transition:border-color .15s,background-color .15s}
select:focus{outline:0;border-color:#1F3D30;background-color:#fff}
/* protect the minimal inline sort selects (they use a positioned <svg>, not a background arrow) */
.cp-dash .sortsel select{background-image:none!important;min-height:0!important}
/* legacy .mp-field selects (search refine) had !important small-radius/tight-padding — match the design */
.mp-field select{border:1px solid #CBD4CC!important;border-radius:11px!important;background-color:#EFF1ED!important;padding:0 40px 0 13px!important;min-height:44px!important}

/* logo: "Camper" ink + "plaats" pine, amber underline accent */
.mp-logo span{color:var(--mp-primary)}

/* primary post CTA in amber to match the homepage "Sell" button */
.mp-btn-post,.btn.btn-primary.mp-cta{background:#E08A2C!important;border-color:#E08A2C!important;color:#3a2408!important}
.mp-btn-post:hover{background:#d47f22!important;color:#3a2408!important}

/* keep bootstrap primary buttons on-palette */
.btn-primary{background:var(--mp-primary);border-color:var(--mp-primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--mp-primary-hover);border-color:var(--mp-primary-hover)}

/* chat bubbles / accents that used the coral literal fall back to the token */
.mp-chat__msg.is-mine{background:var(--mp-primary)}

/* ── accessibility floor (DESIGN-BRIEF §8). Loaded globally via header.php, so it
   covers every front-end page except the standalone homepage (home.css carries
   its own). Keyboard focus ring in amber + reduced-motion. ── */
:focus-visible{outline:3px solid #E08A2C;outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}