/* JustReused brand color policy
   Orange = category/icon accent.
   Green = selected, active, success, and forward actions.
   Keep this loaded after the base theme files. */

:root {
    --jr-brand-orange: #f8991b;
    --jr-brand-orange-dark: #e88a0c;
    --jr-brand-orange-soft: #fff7ed;
    --jr-brand-green: #16a34a;
    --jr-brand-green-dark: #15803d;
    --jr-brand-green-soft: #ecfdf5;
}

/* Browse/search category rail */
.af-vertical-rail-btn i,
.af-type-grid .af-type-pick i:first-child {
    color: var(--jr-brand-orange) !important;
}

.af-vertical-rail-btn.active {
    border-color: var(--jr-brand-green) !important;
    color: var(--jr-brand-green) !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.16) !important;
}

.af-vertical-rail-btn.active i {
    color: var(--jr-brand-green) !important;
}

.af-type-grid .af-type-pick.active {
    background: var(--jr-brand-green-soft) !important;
    color: var(--jr-brand-green) !important;
    box-shadow: inset 0 0 0 2px var(--jr-brand-green) !important;
}

.af-type-grid .af-type-pick.active i:first-child {
    color: var(--jr-brand-green) !important;
}

.af-listing-tab.active {
    color: var(--jr-brand-green) !important;
    border-bottom-color: var(--jr-brand-green) !important;
}

.af-show-offers-btn {
    background: var(--jr-brand-green) !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28) !important;
}

.af-show-offers-btn:hover {
    background: var(--jr-brand-green-dark) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.34) !important;
}

/* Post-ad category picker */
.pa-card-header > i,
.pa-chip-icon {
    color: var(--jr-brand-orange) !important;
}

.pa-chip-icon {
    background: var(--jr-brand-orange-soft) !important;
}

.pa-step-item.active,
.pa-chip.active,
.pa-chip.active .pa-chip-icon {
    color: var(--jr-brand-green) !important;
}

.pa-step-item.active .pa-step-circle,
.pa-step-line.filled,
.pa-btn-primary,
.pa-option-chip.active {
    background: var(--jr-brand-green) !important;
    border-color: var(--jr-brand-green) !important;
}

.pa-chip.active {
    border-color: var(--jr-brand-green) !important;
    background: var(--jr-brand-green-soft) !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}

.pa-use-category {
    border-color: var(--jr-brand-green) !important;
    background: var(--jr-brand-green-soft) !important;
    color: var(--jr-brand-green) !important;
}

.pa-btn-primary:hover {
    background: var(--jr-brand-green-dark) !important;
}

[data-jr-theme="spotify"] .af-type-grid .af-type-pick.active,
[data-jr-theme="spotify"] .pa-chip.active {
    background: rgba(22, 163, 74, 0.14) !important;
}