/*
 * WCAG AA text contrast (4.5:1), loaded after bundle.css so the compiled SCSS stays as it is.
 * The brand teal #0D9488 gives only 3.7:1 as text on white and under white button text;
 * #0F766E (the next shade, also the game's teal) gives 5.5:1.
 */
:root {
    --pa-primary: #0F766E;
    --pa-primary-600: #0F766E;
    --pa-primary-700: #115E59;    /* hovers stay one step darker */
    --pa-text-subtle: #64748B;    /* was slate-400, 2.6:1 */
}

/* Footer link list sits on a light background; its slate-400 / teal-400 colours were made for a dark one */
#wrapper-footer-widgets .list-group-item a { color: var(--pa-slate-600, #475569); }
#wrapper-footer-widgets .list-group-item a:hover { color: var(--pa-primary-700); }

/* Green buttons (Bootstrap success, the site's success token): #16A34A gives 3.3:1 under white text */
:root { --pa-success: #15803D; }
.btn-success { --bs-btn-bg: #15803D; --bs-btn-border-color: #15803D; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534;
    --bs-btn-active-bg: #14532D; --bs-btn-active-border-color: #14532D; }

/* WhatsApp number on the listing: brand green #25D366 is 1.8:1 as text; WhatsApp's dark green reads */
.pa-seller-panel__link--whatsapp { color: #075E54; }

/* Dark footer: hover and focus went to the (now darker) brand teal on navy; use the light teal there */
.pa-footer a:hover, .pa-footer a:focus-visible,
#wrapper-footer-full a:hover, .pa-footer__bottom a:hover { color: var(--pa-primary-300, #5EEAD4); }

/* Search currency switch (pura-autos-search plugin): the unselected label was slate-500 on a light grey */
.pura-autos-currency-tab[aria-selected="false"] { color: var(--pa-slate-600, #475569); }

/* pura-autos-search plugin (deployed separately, so overridden here): its hard-coded old teal */
body .pura-autos-currency-tab[aria-selected="true"] { background: #0F766E !important; border-color: #0F766E !important; }
body .pa-sticky-refine__btn { background: #0F766E; }
body .pa-sticky-refine__badge { color: #0F766E; }

/* Language menu: the current item got Bootstrap's blue "active" fill under teal text, and hover went teal on teal */
.pa-lang-menu .dropdown-item.active, .pa-lang-menu .dropdown-item:active,
.pa-lang-menu .dropdown-item:hover, .pa-lang-menu .dropdown-item:focus {
    background-color: var(--pa-primary-50, #F0FDFA); color: var(--pa-primary-800, #115E59);
}
.pa-lang-switcher .pa-lang-toggle:hover { background-color: var(--pa-primary-50, #F0FDFA); color: var(--pa-primary-800, #115E59); } /* opaque tint, not rgba */
.pa-btn--primary { background: var(--pa-primary, #0F766E); } /* its gradient now runs teal to the same teal: a solid fill */