/* Semantic readable theme layer.
   This file intentionally avoids broad [class*=red] hacks.
   It assigns readable foreground/background pairs to each UI role.
   Load this LAST.
*/

/* Base */
html,
body {
    background: var(--sp-body-background) !important;
    color: var(--sp-text-color) !important;
}

.spx-page-shell,
.home-page-wrap,
main,
.sp-native-main {
    background: var(--sp-body-background);
    color: var(--sp-text-color);
}
.spx-page-inner{
    color: var(--sp-text-color);
}
h1, h2, h3, h4, h5, h6,
.spx-hero-title,
.home-hero h1,
.home-section h2,
.page-title,
.section-title {
    color: var(--sp-heading-color) !important;
}

p,
li,
td,
.spx-hero-intro,
.home-section p,
.home-card span {
    color: var(--sp-text-color);
}

.muted,
.small,
.spx-show-ads-title,
.spx-ad-meta,
.spx-location,
.home-breadcrumb,
.home-filter-label {
    color: var(--sp-muted-text-color) !important;
}

/* Normal links */
a:not(.sp-native-logo):not(.sp-native-join):not(.spx-btn):not(.sp-theme-tab):not(.spx-token):not(.button):not(.btn) {
    color: var(--sp-link-color);
}
a:not(.sp-native-logo):not(.sp-native-join):not(.spx-btn):not(.sp-theme-tab):not(.spx-token):not(.button):not(.btn):hover {
    color: var(--sp-link-hover-color);
}

/* Content surfaces/cards */
.home-hero,
.home-section,
.spx-hero,
.spx-show-ads,
.spx-post-card,
.spx-ad-card,
.home-card,
.card,
.box,
.panel,
.widget,
.content-card,
.listing-card,
.ad-card,
.category-card {
    background: var(--sp-card-background) !important;
    color: var(--sp-text-color) !important;
    border-color: var(--sp-border-color) !important;
}

/* Top action/search bar */
.spx-role-topbar,
.spx-topbar {
    background: var(--sp-topbar-background) !important;
    color: var(--sp-topbar-text-color) !important;
    border-color: var(--sp-border-color) !important;
}

.spx-topbar *,
.spx-role-topbar * {
    color: inherit;
}

.spx-topbar .spx-location,
.spx-role-topbar .spx-location {
    color: var(--sp-topbar-muted-text-color) !important;
}

.spx-search input {
    background: var(--sp-topbar-search-background) !important;
    color: var(--sp-topbar-search-text) !important;
    border-color: var(--sp-topbar-search-border) !important;
}

.spx-search button {
    background: var(--sp-topbar-search-button-background) !important;
    color: var(--sp-topbar-search-button-text) !important;
    border-color: var(--sp-topbar-search-button-background) !important;
}

/* Action buttons */
.spx-btn,
.spx-action-primary,
.button.spx-action-primary,
button.spx-action-primary,
.btn.spx-action-primary {
    background: var(--sp-button-color) !important;
    color: var(--sp-button-text-color) !important;
    border-color: var(--sp-button-color) !important;
    text-decoration: none !important;
}

.spx-topbar .spx-action-primary,
.spx-role-topbar .spx-action-primary {
    background: var(--sp-topbar-primary-button-background) !important;
    color: var(--sp-topbar-primary-button-text) !important;
    border-color: var(--sp-topbar-primary-button-background) !important;
}

.spx-action-primary:hover,
.spx-btn-primary:hover {
    background: var(--sp-button-hover-color) !important;
    color: var(--sp-button-text-color) !important;
    border-color: var(--sp-button-hover-color) !important;
}

.spx-action-secondary,
.spx-btn-secondary,
.button.spx-action-secondary {
    background: var(--sp-secondary-button-color) !important;
    color: var(--sp-secondary-button-text-color) !important;
    border-color: var(--sp-secondary-button-color) !important;
    text-decoration: none !important;
}

.spx-topbar .spx-action-secondary,
.spx-role-topbar .spx-action-secondary {
    background: var(--sp-topbar-secondary-button-background) !important;
    color: var(--sp-topbar-secondary-button-text) !important;
    border-color: var(--sp-topbar-secondary-button-background) !important;
}

.spx-action-highlight,
.button.spx-action-highlight {
    background: var(--sp-highlight-button-background) !important;
    color: var(--sp-highlight-button-text) !important;
    border-color: var(--sp-highlight-button-background) !important;
    background-image: none !important;
}

.spx-action-highlight:hover {
    background: var(--sp-highlight-button-hover-background) !important;
    color: var(--sp-highlight-button-text) !important;
}

.spx-action-full {
    width: 100%;
    text-align: center;
}

/* Filter tabs - home page and category filter tabs */
.sp-theme-tab,
.home-tab,
.category-tabs .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-filter-tab-background) !important;
    color: var(--sp-filter-tab-text) !important;
    border: 1px solid var(--sp-filter-tab-border) !important;
    text-decoration: none !important;
}

.sp-theme-tab:hover,
.home-tab:hover,
.category-tabs .tab:hover {
    background: var(--sp-filter-tab-hover-background) !important;
    color: var(--sp-filter-tab-hover-text) !important;
    border-left-color: var(--sp-filter-tab-border) !important;
    border-right-color: var(--sp-filter-tab-border) !important;
    text-decoration: none !important;
}

.sp-theme-tab.is-active,
.sp-theme-tab.active,
.home-tab.active,
.category-tabs .tab.active {
    background: var(--sp-filter-tab-active-background) !important;
    color: var(--sp-filter-tab-active-text) !important;
    border-left-color: var(--sp-filter-tab-border) !important;
    border-right-color: var(--sp-filter-tab-border) !important;
}

/* City/category menu tabs and dropdowns */
.sp-city-menu {
    border-color: var(--sp-border-color) !important;
    color: var(--sp-text-color);
}

.sp-city-menu .sp-tab-switcher {
    border-bottom-color: var(--sp-filter-tab-border) !important;
}

.sp-city-menu .sp-tab-btn {
    background: var(--sp-filter-tab-background) !important;
    color: var(--sp-filter-tab-text) !important;
    border-color: var(--sp-filter-tab-border) !important;
}

.sp-city-menu .sp-tab-btn:hover {
    background: var(--sp-filter-tab-hover-background) !important;
    color: var(--sp-filter-tab-hover-text) !important;
}

.sp-city-menu .sp-tab-btn.sp-active {
    background: var(--sp-filter-tab-active-background) !important;
    color: var(--sp-filter-tab-active-text) !important;
    border-left-color: var(--sp-filter-tab-border) !important;
    border-right-color: var(--sp-filter-tab-border) !important;
}

.sp-city-menu .sp-tab-panel,
.sp-city-menu .sp-mobile-dropdown-menu {
    background: var(--sp-card-background) !important;
    color: var(--sp-text-color) !important;
    border-color: var(--sp-border-color) !important;
}

.sp-city-menu .sp-mobile-dropdown-label {
    color: var(--sp-heading-color) !important;
}

.sp-city-menu .sp-mobile-dropdown-toggle {
    background: var(--sp-input-background) !important;
    color: var(--sp-input-text-color) !important;
    border-color: var(--sp-input-border-color) !important;
}

.sp-city-menu .sp-subnav-links a,
.sp-city-menu .sp-mobile-dropdown-menu a {
    background: var(--sp-chip-background) !important;
    color: var(--sp-chip-text) !important;
    border-color: var(--sp-chip-border) !important;
}

.sp-city-menu .sp-subnav-links a:hover,
.sp-city-menu .sp-subnav-links a.sp-active,
.sp-city-menu .sp-mobile-dropdown-menu a:hover,
.sp-city-menu .sp-mobile-dropdown-menu a.sp-active {
    background: var(--sp-chip-active-background) !important;
    color: var(--sp-chip-active-text) !important;
    border-color: var(--sp-border-color) !important;
}

/* Tokens/chips */
.spx-token,
.spx-chip,
.spx-token-link,
a.spx-token,
a.spx-token-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--sp-chip-border) !important;
    border-radius: 6px !important;
    background: var(--sp-chip-background) !important;
    color: var(--sp-chip-text) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.spx-token:hover,
.spx-chip:hover,
.spx-token-link:hover,
a.spx-token:hover,
a.spx-token-link:hover {
    background: var(--sp-chip-hover-background) !important;
    color: var(--sp-chip-hover-text) !important;
    border-color: var(--sp-border-color) !important;
    text-decoration: none !important;
}

.spx-token-active,
.spx-chip-active {
    background: var(--sp-chip-active-background) !important;
    color: var(--sp-chip-active-text) !important;
    border-color: var(--sp-border-color) !important;
}

/* Forms and tables */
input,
select,
textarea {
    background: var(--sp-input-background) !important;
    color: var(--sp-input-text-color) !important;
    border-color: var(--sp-input-border-color) !important;
}

table {
    background: var(--sp-content-background) !important;
    color: var(--sp-text-color) !important;
}

th {
    background: var(--sp-table-header-background) !important;
    color: var(--sp-table-header-text-color) !important;
    border-color: var(--sp-table-border-color) !important;
}

td {
    border-color: var(--sp-table-border-color) !important;
}

/* Messages */
.alert,
.error,
.notice-error,
.danger {
    background: var(--sp-alert-background) !important;
    color: var(--sp-alert-text-color) !important;
    border-color: var(--sp-danger-color) !important;
}

.success,
.notice-success {
    color: var(--sp-success-color) !important;
}

.warning,
.notice-warning {
    color: var(--sp-warning-color) !important;
}

/* Native header/nav link roles
   Nav uses existing Navigation Menu colors.
   Login uses Header login colors. */
.sp-native-nav a,
a.sp-native-nav {
    color: var(--sp-menu-text-color) !important;
    text-decoration: none;
}

.sp-native-nav a:hover,
a.sp-native-nav:hover {
    color: var(--sp-menu-hover-text-color) !important;
}

.sp-native-login,
.sp-native-login a,
a.sp-native-login {
    color: var(--sp-login-text-color) !important;
    text-decoration: none;
}

.sp-native-login:hover,
.sp-native-login a:hover,
a.sp-native-login:hover {
    color: var(--sp-login-hover-text-color) !important;
}