/* OLIVER-TOOLS-FINDER-V1 — finder page styles */

.tools-finder-body .main-container { max-width: 900px; }

.tools-finder-hero {
    text-align: center;
    padding: 32px 16px 24px;
}
.tools-finder-hero-inner h1 {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text, #f0f5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.tools-finder-hero-inner h1 i {
    color: #00f0ff;
}
body.light-mode .tools-finder-hero-inner h1 i {
    color: #d81b3f;
}
.tools-finder-hero-inner p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-dim, #8a9aad);
}

.tools-finder-form {
    background: var(--surface, rgba(12, 16, 26, 0.88));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    padding: 24px;
    margin: 16px auto 24px;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
body.light-mode .tools-finder-form {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.08);
}

.tools-finder-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim, #8a9aad);
    margin-bottom: -8px;
}

.tools-finder-input {
    width: 100%;
    min-height: 56px;
    max-height: 120px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    background: rgba(0, 0, 0, 0.25);
    color: var(--text, #f0f5fa);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    transition: border-color 0.15s;
}
body.light-mode .tools-finder-input {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
}
.tools-finder-input:focus {
    outline: none;
    border-color: #00f0ff;
}
body.light-mode .tools-finder-input:focus {
    border-color: #d81b3f;
}

.tools-chip-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tools-chip-group-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim, #8a9aad);
    letter-spacing: 0.3px;
}
.tools-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tools-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    background: transparent;
    color: var(--text, #f0f5fa);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.light-mode .tools-chip {
    color: #1f2937;
    border-color: rgba(15, 23, 42, 0.12);
}
.tools-chip:hover {
    border-color: #00f0ff;
    color: #00f0ff;
}
body.light-mode .tools-chip:hover {
    border-color: #d81b3f;
    color: #d81b3f;
}
.tools-chip.is-active {
    background: #00f0ff;
    color: #0a0e1a;
    border-color: #00f0ff;
    font-weight: 600;
}
body.light-mode .tools-chip.is-active {
    background: #d81b3f;
    color: #ffffff;
    border-color: #d81b3f;
}
.tools-chip-count {
    font-size: 0.72rem;
    opacity: 0.7;
    font-family: 'Vazirmatn', sans-serif;
}

.tools-finder-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #00f0ff, #0098d6);
    color: #0a0e1a;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    transition: transform 0.15s, box-shadow 0.15s;
}
body.light-mode .tools-finder-submit {
    background: linear-gradient(135deg, #d81b3f, #ff2d55);
    color: #ffffff;
}
.tools-finder-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 240, 255, 0.3);
}
body.light-mode .tools-finder-submit:hover {
    box-shadow: 0 8px 20px rgba(216, 27, 63, 0.3);
}
.tools-finder-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}


/* ===== Results ===== */

.tools-results {
    max-width: 900px;
    margin: 0 auto 40px;
}

.tools-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 640px) {
    .tools-results-grid { grid-template-columns: 1fr; }
}

.tools-result-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: var(--surface, rgba(12, 16, 26, 0.88));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
body.light-mode .tools-result-card {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.08);
}
.tools-result-card:hover {
    border-color: #00f0ff;
    transform: translateY(-1px);
}
body.light-mode .tools-result-card:hover {
    border-color: #d81b3f;
}

.tools-result-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.tools-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tools-result-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tools-result-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text, #f0f5fa);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.light-mode .tools-result-title { color: #0f172a; }

.tools-result-rationale {
    font-size: 0.78rem;
    color: var(--text-dim, #8a9aad);
    line-height: 1.45;
    margin: 0;
    font-style: italic;
}
.tools-result-rationale:empty { display: none; }

.tools-result-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: #00f0ff;
    margin-top: auto;
    font-family: 'Vazirmatn', sans-serif;
}
body.light-mode .tools-result-price { color: #d81b3f; }
.tools-result-price .unit {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.8;
    margin-inline-start: 3px;
}

/* ===== Empty / loading / error ===== */

.tools-state {
    max-width: 900px;
    margin: 24px auto 40px;
    padding: 32px 24px;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed var(--border, rgba(255, 255, 255, 0.12));
    color: var(--text-dim, #8a9aad);
    font-size: 0.92rem;
    line-height: 1.6;
}
body.light-mode .tools-state {
    border-color: rgba(15, 23, 42, 0.12);
}
.tools-state.is-error {
    border-color: #ff2d55;
    color: #ff5577;
}
body.light-mode .tools-state.is-error {
    border-color: #d81b3f;
    color: #d81b3f;
}

.tools-loading-spin {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 240, 255, 0.25);
    border-top-color: #00f0ff;
    border-radius: 50%;
    animation: tools-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-inline-end: 8px;
}
body.light-mode .tools-loading-spin {
    border-color: rgba(216, 27, 63, 0.25);
    border-top-color: #d81b3f;
}
@keyframes tools-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tools-loading-spin { animation-duration: 3s; }
}

/* ===== Mobile ===== */

@media (max-width: 640px) {
    .tools-finder-hero { padding: 20px 12px 16px; }
    .tools-finder-form { padding: 18px; margin: 12px; }
    .tools-finder-submit { align-self: stretch; }
    .tools-result-thumb { flex-basis: 72px; width: 72px; height: 72px; }
    .tools-result-card { padding: 12px; gap: 10px; }
    .tools-result-title { font-size: 0.86rem; }
}


/* ===== OLIVER-TOOLS-FINDER-V2 — centering fix + suggestions ===== */

.tools-finder-body .main-container {
    max-width: 900px;
    margin-inline: auto;
    margin-block: 0;
}

.tools-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.tools-suggestion-chip {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 240, 255, 0.35);
    background: rgba(0, 240, 255, 0.06);
    color: #00f0ff;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.light-mode .tools-suggestion-chip {
    border-color: rgba(216, 27, 63, 0.35);
    background: rgba(216, 27, 63, 0.06);
    color: #d81b3f;
}
.tools-suggestion-chip:hover {
    background: #00f0ff;
    color: #0a0e1a;
    border-color: #00f0ff;
}
body.light-mode .tools-suggestion-chip:hover {
    background: #d81b3f;
    color: #ffffff;
    border-color: #d81b3f;
}
.tools-suggestion-chip .tools-suggestion-count {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* OLIVER-TOOLS-FINDER-V11: explicit RTL on chip groups.
   Ensures DOM-first child renders rightmost so lowest-price bracket
   is the first thing read in RTL. */
.tools-chip-group .tools-chips {
    direction: rtl;
}

/* ===== OLIVER-TOOLS-AI-BADGE-V1 — AI rationale distinct style ===== */

.tools-result-ai-wrap {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(138, 43, 226, 0.05));
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-inline-start: 3px solid #00f0ff;
}
body.light-mode .tools-result-ai-wrap {
    background: linear-gradient(135deg, rgba(216, 27, 63, 0.05), rgba(255, 45, 85, 0.04));
    border-color: rgba(216, 27, 63, 0.18);
    border-inline-start-color: #d81b3f;
}

.tools-result-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #00f0ff;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: 'Vazirmatn', sans-serif;
}
body.light-mode .tools-result-ai-badge {
    color: #d81b3f;
}
.tools-result-ai-badge i {
    font-size: 0.75rem;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6));
}
body.light-mode .tools-result-ai-badge i {
    filter: drop-shadow(0 0 4px rgba(216, 27, 63, 0.5));
}

.tools-result-ai-rationale {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #f0f5fa);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-style: normal;
}
body.light-mode .tools-result-ai-rationale {
    color: #1f2937;
}

/* ===== OLIVER-LANDING-FINDER-V1 — embedded finder in landing ===== */
.landing-finder-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
    scroll-margin-top: 90px;
}
.landing-finder-header {
    text-align: center;
    margin-bottom: 20px;
}
.landing-finder-header h2 {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--text, #f0f5fa);
}
body.light-mode .landing-finder-header h2 { color: #0f172a; }
.landing-finder-header h2 i { color: #00f0ff; }
body.light-mode .landing-finder-header h2 i { color: #d81b3f; }
.landing-finder-header p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-dim, #8a9aad);
}

/* ===== OLIVER-FINDER-UX-V1 — inline submit + history + sticky mobile ===== */

.tools-search-sticky {
    position: relative;
}

.tools-search-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tools-search-wrap {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
}

/* Desktop: submit sits inline, same height as input */
.tools-search-row .tools-finder-submit {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0;
    padding: 0 22px;
    border-radius: 12px;
    white-space: nowrap;
}

/* History dropdown */
.tools-history-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    /* OLIVER-FINDER-DROPDOWN-OPAQUE-V1: --surface is tuned for cards (5%);
       a floating menu needs explicit opaque bg for legibility over any page. */
    background: rgba(10, 14, 22, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}
body.light-mode .tools-history-dropdown {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
}

.tools-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim, #8a9aad);
    letter-spacing: 0.2px;
}
body.light-mode .tools-history-head { color: #6b7280; }
.tools-history-clear {
    background: none;
    border: none;
    color: #ff5577;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
}
body.light-mode .tools-history-clear { color: #d81b3f; }
.tools-history-clear:hover {
    background: rgba(255, 85, 119, 0.1);
}

.tools-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text, #f0f5fa);
    font-size: 0.86rem;
    transition: background 0.12s;
}
body.light-mode .tools-history-item { color: #0f172a; }
.tools-history-item:hover {
    background: rgba(0, 240, 255, 0.08);
}
body.light-mode .tools-history-item:hover {
    background: rgba(216, 27, 63, 0.06);
}
.tools-history-item i {
    font-size: 0.7rem;
    opacity: 0.5;
    flex: 0 0 auto;
}
.tools-history-item span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tools-history-item .tools-history-del {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-dim, #8a9aad);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1;
    font-family: inherit;
}
.tools-history-item .tools-history-del:hover {
    color: #ff5577;
    background: rgba(255, 85, 119, 0.1);
}

/* Results get scroll margin so scrollIntoView leaves room for navbar */
.tools-results {
    scroll-margin-top: 100px;
}

/* ===== Mobile: sticky search while scrolling results ===== */
@media (max-width: 640px) {
    .tools-search-row {
        flex-direction: column;
        gap: 12px;
    }
    .tools-search-row .tools-finder-submit {
        align-self: stretch;
        padding: 14px 22px;
        width: 100%;
    }

    /* Make the whole search wrapper sticky below the navbar */
    .tools-search-sticky {
        position: sticky;
        top: 64px;
        z-index: 30;
        background: var(--surface, rgba(12, 16, 26, 0.98));
        margin: -8px -8px 12px;
        padding: 8px;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    body.light-mode .tools-search-sticky {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    }

    /* Collapse textarea when sticky and user has scrolled past the chips */
    .tools-finder-input { min-height: 44px; }

    /* Tighten chip groups on mobile so scrolling to results is one flick */
    .tools-finder-form { padding: 16px; gap: 12px; }
    .tools-chip { font-size: 0.78rem; padding: 6px 12px; }

    /* Results get more breathing room */
    .tools-results { margin-top: 16px; }
}

/* Light-mode focus parity for history dropdown border */
body.light-mode .tools-finder-input:focus + .tools-history-dropdown {
    border-color: rgba(216, 27, 63, 0.35);
}

/* ===== OLIVER-FINDER-UX-V2 — compact row + collapsible filters ===== */

/* --- Compact search row overrides the V1 stretching --- */
.tools-search-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.tools-search-row .tools-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.tools-search-row .tools-finder-submit {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0;
    padding: 0 24px;
    min-width: 130px;
    height: auto;           /* let it match the wrap */
    border-radius: 12px;
    white-space: nowrap;
    font-size: 0.95rem;
}

/* Shrink input so 56px height is the natural baseline */
.tools-search-row .tools-finder-input {
    min-height: 52px;
    max-height: 96px;
    padding: 14px 16px;
}

/* --- Filters toggle --- */
.tools-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: rgba(0, 0, 0, 0.2);
    color: var(--text, #f0f5fa);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
body.light-mode .tools-filters-toggle {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.1);
}
.tools-filters-toggle:hover {
    border-color: rgba(0, 240, 255, 0.4);
}
body.light-mode .tools-filters-toggle:hover {
    border-color: rgba(216, 27, 63, 0.4);
}

.tools-filters-toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tools-filters-toggle-text i {
    color: #00f0ff;
    font-size: 0.9rem;
}
body.light-mode .tools-filters-toggle-text i {
    color: #d81b3f;
}

.tools-filters-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #00f0ff;
    color: #0a0e1a;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Vazirmatn', sans-serif;
}
body.light-mode .tools-filters-toggle-count {
    background: #d81b3f;
    color: #ffffff;
}

.tools-filters-chevron {
    font-size: 0.75rem;
    opacity: 0.6;
    transition: transform 0.2s;
}
.tools-filters-toggle[aria-expanded="true"] .tools-filters-chevron {
    transform: rotate(180deg);
}

/* --- Filters section (collapsible) --- */
.tools-filters-section {
    display: none;
    flex-direction: column;
    gap: 14px;
}
.tools-filters-section.is-open {
    display: flex;
}

/* --- Desktop: toggle also present, but section starts open via JS --- */
@media (min-width: 769px) {
    /* Keep toggle visible on desktop too — user can collapse if wanted */
    .tools-filters-toggle {
        display: flex;
    }
}

/* --- Mobile/tablet: tighter chips, collapse by default (JS controls) --- */
@media (max-width: 768px) {
    .tools-search-row {
        flex-direction: column;
        gap: 10px;
    }
    .tools-search-row .tools-finder-submit {
        width: 100%;
        min-width: 0;
        padding: 14px 22px;
        font-size: 1rem;
    }

    .tools-finder-form {
        padding: 16px;
        gap: 12px;
    }

    .tools-filters-section {
        gap: 10px;
    }
    .tools-chip-group {
        gap: 6px;
    }
    .tools-chip-group-title {
        font-size: 0.75rem;
    }
    .tools-chips {
        gap: 6px;
    }
    .tools-chip {
        padding: 5px 10px;
        font-size: 0.76rem;
    }
    .tools-chip-count {
        font-size: 0.68rem;
    }
}

/* --- Small phones: even tighter --- */
@media (max-width: 400px) {
    .tools-chip {
        padding: 4px 9px;
        font-size: 0.72rem;
    }
}

/* Keep V1 sticky behavior but only when filters are collapsed */
@media (max-width: 640px) {
    .tools-search-sticky {
        position: sticky;
        top: 64px;
        z-index: 30;
        background: var(--surface, rgba(12, 16, 26, 0.98));
        margin: -8px -8px 12px;
        padding: 8px;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    body.light-mode .tools-search-sticky {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    }
}

/* OLIVER-FINDER-FILTERS-ALWAYS-OPEN-V1: user directive — no expand/collapse, always visible.
   Overrides .tools-filters-section { display: none } from UX-V2. */
.tools-filters-section,
.tools-filters-section.is-open {
    display: flex !important;
    max-height: none !important;
    overflow: visible !important;
}
/* belt-and-suspenders: hide any stale toggle that sneaks back in */
.tools-filters-toggle {
    display: none !important;
}

/* ===== OLIVER-FINDER-MARQUEE-V1 - draggable chip marquees + minimal submit ===== */

/* Search row: button under input, every viewport */
.tools-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

/* Minimal submit button */
.tools-finder-submit {
    align-self: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    background-image: none !important;
    color: #00f0ff !important;
    border: 1px solid rgba(0, 240, 255, 0.32) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.tools-finder-submit i,
.tools-finder-submit svg { display: none !important; }
.tools-finder-submit:hover {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.06) !important;
}
.tools-finder-submit:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
body.light-mode .tools-finder-submit {
    color: #d81b3f !important;
    border-color: rgba(216, 27, 63, 0.32) !important;
}
body.light-mode .tools-finder-submit:hover {
    background: rgba(216, 27, 63, 0.06) !important;
    border-color: rgba(216, 27, 63, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(216, 27, 63, 0.06) !important;
}

/* Chips container: horizontal marquee */
.tools-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 4px !important;
    gap: 8px !important;
    cursor: grab;
    mask-image: linear-gradient(to right,
        transparent 0, black 10px,
        black calc(100% - 10px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, black 10px,
        black calc(100% - 10px), transparent 100%);
}
.tools-chips::-webkit-scrollbar { display: none !important; }
.tools-chips.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none !important;
    user-select: none;
}

/* Chips: no-shrink, snap, zoom on focus */
.tools-chips .tools-chip {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                border-color 0.18s ease, color 0.18s ease !important;
}
.tools-chips .tools-chip:hover,
.tools-chips .tools-chip:focus-visible {
    transform: scale(1.08);
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.32),
                0 0 0 1px rgba(0, 240, 255, 0.35);
}
body.light-mode .tools-chips .tools-chip:hover,
body.light-mode .tools-chips .tools-chip:focus-visible {
    box-shadow: 0 6px 20px rgba(216, 27, 63, 0.22),
                0 0 0 1px rgba(216, 27, 63, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .tools-chips .tools-chip { transition: none !important; }
    .tools-chips .tools-chip:hover,
    .tools-chips .tools-chip:focus-visible { transform: none !important; }
}

/* END OLIVER-FINDER-MARQUEE-V1 */

/* ===== OLIVER-FINDER-MARQUEE-V2 - mobile fix + flip + hint chevrons ===== */

/* 1. Kill mobile sticky wrapper - was causing huge vertical gap */
@media (max-width: 768px) {
    .tools-search-sticky {
        position: static !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        z-index: auto !important;
    }
    .tools-search-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .tools-finder-input {
        min-height: 52px !important;
        max-height: 52px !important;
        height: 52px !important;
        padding: 10px 14px !important;
        font-size: 0.92rem !important;
    }
    .tools-finder-form {
        padding: 12px !important;
        gap: 8px !important;
    }
    .tools-filters-section {
        padding: 0 !important;
        margin: 6px 0 0 !important;
        gap: 10px !important;
    }
    .tools-chip-group {
        padding: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
    }
    .tools-chip-group-title {
        padding: 0 !important;
        margin: 0 !important;
    }
    .tools-finder-submit {
        padding: 7px 16px !important;
        min-height: 34px !important;
        font-size: 0.82rem !important;
    }
}

/* 2. Kill scroll-snap (Chrome RTL snap fights drag) */
.tools-chips,
.tools-chips .tools-chip {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
}

/* 3. Prevent text selection on drag */
.tools-chips {
    user-select: none;
    -webkit-user-select: none;
}

/* 4. Chevron hints - direction-aware, auto-hide after interaction */
.tools-chips-stage {
    position: relative;
}
.tools-chips-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    direction: ltr; /* force visual direction regardless of page RTL */
    background: rgba(10, 14, 26, 0.95);
    border: 1.5px solid rgba(0, 240, 255, 0.65);
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
    animation: finder-hint-pulse 1.8s ease-in-out infinite;
}
.tools-chips-hint--right { right: -6px; }
.tools-chips-hint--left  { left: -6px; }
body.light-mode .tools-chips-hint {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(216, 27, 63, 0.65);
    color: #d81b3f;
    box-shadow: 0 0 12px rgba(216, 27, 63, 0.28);
}

@keyframes finder-hint-pulse {
    0%, 100% { transform: translateY(-50%) scale(1);   opacity: 1; }
    50%      { transform: translateY(-50%) scale(1.18); opacity: 0.65; }
}

.tools-chips-stage[data-hint-left="1"]  .tools-chips-hint--left  { opacity: 1; }
.tools-chips-stage[data-hint-right="1"] .tools-chips-hint--right { opacity: 1; }

.tools-chips-stage[data-interacted="1"] .tools-chips-hint {
    display: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .tools-chips-hint { animation: none !important; }
}

/* END OLIVER-FINDER-MARQUEE-V2 */

/* ===== OLIVER-FINDER-MOBILE-CONTAIN-V1 - kill overflow, wrap header text ===== */

/* Section: hard contained on all viewports */
.landing-finder-section {
    width: 100% !important;
    max-width: 900px !important;
    margin: 24px auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .landing-finder-section {
        max-width: 100% !important;
        margin: 16px auto !important;
        padding: 0 10px !important;
    }
}
@media (min-width: 769px) {
    .landing-finder-section {
        margin: 40px auto !important;
        padding: 0 16px !important;
    }
}

/* Header: text must wrap, never overflow */
.landing-finder-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
}
.landing-finder-header h2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    margin: 0 auto 6px !important;
    font-size: clamp(1.1rem, 4vw, 1.6rem) !important;
}
.landing-finder-header h2 i {
    flex: 0 0 auto !important;
}
.landing-finder-header p {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    margin: 0 auto !important;
    font-size: clamp(0.82rem, 3vw, 0.95rem) !important;
}

/* Form: fits section, contained */
.landing-finder-section .tools-finder-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 24px !important;
    box-sizing: border-box !important;
}
@media (min-width: 769px) {
    .landing-finder-section .tools-finder-form {
        max-width: 900px !important;
        margin: 16px auto 24px !important;
    }
}

/* Whole flex chain: can shrink, cannot push parent */
.landing-finder-section .tools-search-sticky,
.landing-finder-section .tools-search-row,
.landing-finder-section .tools-search-wrap,
.landing-finder-section .tools-filters-section,
.landing-finder-section .tools-chip-group,
.landing-finder-section .tools-chips-stage {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Chevron hints: pull inside section bounds (was overflowing 6px each side) */
.tools-chips-hint--right { right: 2px !important; }
.tools-chips-hint--left  { left: 2px !important; }

/* Force RTL on chips - native touch direction follows this */
.tools-chip-group .tools-chips {
    direction: rtl !important;
}

/* END OLIVER-FINDER-MOBILE-CONTAIN-V1 */

/* ===== OLIVER-FINDER-TREE-V3 - chevrons on TOP with per-group icons ===== */

/* Stage needs room on top for chevrons */
.tools-chips-stage {
    padding-top: 24px !important;
}
.tools-chips-stage > .tools-chips {
    padding-top: 2px !important;
    padding-bottom: 8px !important;
}

/* Chevron position: TOP of the row (was vertical-center) */
.tools-chips-hint {
    top: 0 !important;
    transform: none !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
}
.tools-chips-hint--left  { left: 2px !important; }
.tools-chips-hint--right { right: 2px !important; }

/* Hide previous textContent icon (V2 set "‹" / "›") - use ::before instead */
.tools-chips-hint { color: transparent !important; }

/* Per-group icon via ::before */
.tools-chips-hint::before {
    font-family: inherit;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    color: #00f0ff;
}
body.light-mode .tools-chips-hint::before { color: #d81b3f; }

.tools-chips-stage[data-group="category"] .tools-chips-hint--left::before  { content: "\25C0"; }
.tools-chips-stage[data-group="category"] .tools-chips-hint--right::before { content: "\25B6"; }
.tools-chips-stage[data-group="subcat"]   .tools-chips-hint--left::before  { content: "\25C1"; }
.tools-chips-stage[data-group="subcat"]   .tools-chips-hint--right::before { content: "\25B7"; }
.tools-chips-stage[data-group="brand"]    .tools-chips-hint--left::before  { content: "\00AB"; }
.tools-chips-stage[data-group="brand"]    .tools-chips-hint--right::before { content: "\00BB"; }
.tools-chips-stage[data-group="price"]    .tools-chips-hint--left::before  { content: "\2039"; }
.tools-chips-stage[data-group="price"]    .tools-chips-hint--right::before { content: "\203A"; }

/* Override V2's data-interacted hide - hints stay until edge per requirement #2 */
.tools-chips-stage[data-interacted="1"] .tools-chips-hint {
    display: flex !important;
}

/* Pulse animation shift: chevron no longer centered */
@keyframes finder-hint-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.65; }
}

/* END OLIVER-FINDER-TREE-V3 */

/* ===== OLIVER-FINDER-CHEVRON-SIMPLE-V1 - use < and > for all groups ===== */
.tools-chips-hint--left::before,
.tools-chips-hint--right::before {
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}
.tools-chips-hint--left::before  { content: "\003C" !important; }
.tools-chips-hint--right::before { content: "\003E" !important; }

/* cancel per-group shapes from V3 */
.tools-chips-stage[data-group] .tools-chips-hint--left::before,
.tools-chips-stage[data-group] .tools-chips-hint--right::before {
    content: none;
}
.tools-chips-stage[data-group] .tools-chips-hint--left::before  { content: "\003C" !important; }
.tools-chips-stage[data-group] .tools-chips-hint--right::before { content: "\003E" !important; }

/* ===== OLIVER-FINDER-RAIL-V1 - completely new indicator: vertical rail + glow ring ===== */

/* Kill ALL previous chevron/icon renderers */
.tools-chips-hint::before,
.tools-chips-hint::after {
    content: none !important;
    display: none !important;
}

/* Reset everything - take full control */
.tools-chips-hint,
.tools-chips-stage[data-group] .tools-chips-hint {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    width: 5px !important;
    height: 30px !important;
    border-radius: 3px !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    font-weight: normal !important;
    line-height: 0 !important;
    direction: ltr !important;
    background: linear-gradient(180deg,
        rgba(0, 240, 255, 0.15) 0%,
        rgba(0, 240, 255, 0.95) 50%,
        rgba(0, 240, 255, 0.15) 100%) !important;
    /* Glow ring instead of border */
    box-shadow:
        0 0 0 3px rgba(0, 240, 255, 0.06),
        0 0 14px 2px rgba(0, 240, 255, 0.4) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
    z-index: 6 !important;
    animation: railPulse 1.8s ease-in-out infinite !important;
}

.tools-chips-hint--left,
.tools-chips-stage[data-group] .tools-chips-hint--left  {
    left: 4px !important;
    right: auto !important;
}
.tools-chips-hint--right,
.tools-chips-stage[data-group] .tools-chips-hint--right {
    right: 4px !important;
    left: auto !important;
}

/* Light mode: rose */
body.light-mode .tools-chips-hint {
    background: linear-gradient(180deg,
        rgba(216, 27, 63, 0.15) 0%,
        rgba(216, 27, 63, 0.95) 50%,
        rgba(216, 27, 63, 0.15) 100%) !important;
    box-shadow:
        0 0 0 3px rgba(216, 27, 63, 0.05),
        0 0 14px 2px rgba(216, 27, 63, 0.35) !important;
}

/* Visibility per direction */
.tools-chips-stage[data-hint-left="1"]  .tools-chips-hint--left  { opacity: 1 !important; }
.tools-chips-stage[data-hint-right="1"] .tools-chips-hint--right { opacity: 1 !important; }

/* Pulse: subtle height + opacity breathing */
@keyframes railPulse {
    0%, 100% { opacity: 1;    height: 30px; }
    50%      { opacity: 0.55; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .tools-chips-hint { animation: none !important; opacity: 1 !important; }
}

/* END OLIVER-FINDER-RAIL-V1 */

/* ===== OLIVER-FINDER-TRIANGLE-V1 - directional triangles ===== */

/* Kill all previous shapes and pseudo-elements */
.tools-chips-hint,
.tools-chips-stage[data-group] .tools-chips-hint {
    position: absolute !important;
    top: 50% !important;
    margin-top: -11px !important;  /* half of height (22px) */
    transform: none !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 6 !important;
    transition: opacity 0.25s ease !important;
    animation: trianglePulse 1.8s ease-in-out infinite !important;
}
.tools-chips-hint::before,
.tools-chips-hint::after {
    content: none !important;
    display: none !important;
}

/* Left triangle: points left (< direction) */
.tools-chips-hint--left,
.tools-chips-stage[data-group] .tools-chips-hint--left {
    left: 6px !important;
    right: auto !important;
    border-top: 11px solid transparent !important;
    border-bottom: 11px solid transparent !important;
    border-right: 13px solid rgba(0, 240, 255, 0.92) !important;
    border-left: none !important;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.7)) !important;
}

/* Right triangle: points right (> direction) */
.tools-chips-hint--right,
.tools-chips-stage[data-group] .tools-chips-hint--right {
    right: 6px !important;
    left: auto !important;
    border-top: 11px solid transparent !important;
    border-bottom: 11px solid transparent !important;
    border-left: 13px solid rgba(0, 240, 255, 0.92) !important;
    border-right: none !important;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.7)) !important;
}

/* Light mode: rose */
body.light-mode .tools-chips-hint--left,
body.light-mode .tools-chips-stage[data-group] .tools-chips-hint--left {
    border-right-color: rgba(216, 27, 63, 0.92) !important;
    filter: drop-shadow(0 0 8px rgba(216, 27, 63, 0.6)) !important;
}
body.light-mode .tools-chips-hint--right,
body.light-mode .tools-chips-stage[data-group] .tools-chips-hint--right {
    border-left-color: rgba(216, 27, 63, 0.92) !important;
    filter: drop-shadow(0 0 8px rgba(216, 27, 63, 0.6)) !important;
}

/* Visibility */
.tools-chips-stage[data-hint-left="1"]  .tools-chips-hint--left  { opacity: 1 !important; }
.tools-chips-stage[data-hint-right="1"] .tools-chips-hint--right { opacity: 1 !important; }

/* Pulse: subtle scale + opacity, no translate */
@keyframes trianglePulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .tools-chips-hint { animation: none !important; opacity: 1 !important; }
}

/* END OLIVER-FINDER-TRIANGLE-V1 */

/* ===== OLIVER-FINDER-EDGE-GLOW-V1 - directional edge glow replaces all indicators ===== */

/* Completely hide every remaining indicator element */
.tools-chips-hint,
.tools-chips-stage .tools-chips-hint,
.tools-chips-stage[data-group] .tools-chips-hint {
    display: none !important;
    visibility: hidden !important;
}

/* Stage: reduce top padding from V3 (24px was for chevrons) */
.tools-chips-stage {
    padding-top: 4px !important;
    position: relative !important;
    overflow: visible !important;
}
.tools-chips-stage > .tools-chips {
    padding-top: 2px !important;
    padding-bottom: 8px !important;
}

/* Left + right edge glow pseudo-elements */
.tools-chips-stage::before,
.tools-chips-stage::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 52px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: 8px !important;
}

/* Left edge: gradient from left accent fading to transparent rightward */
.tools-chips-stage::before {
    left: 0 !important;
    background: linear-gradient(to right,
        rgba(0, 240, 255, 0.35) 0%,
        rgba(0, 240, 255, 0.14) 35%,
        rgba(0, 240, 255, 0) 100%) !important;
    box-shadow: inset 3px 0 10px -2px rgba(0, 240, 255, 0.7) !important;
}

/* Right edge: gradient from right accent fading to transparent leftward */
.tools-chips-stage::after {
    right: 0 !important;
    background: linear-gradient(to left,
        rgba(0, 240, 255, 0.35) 0%,
        rgba(0, 240, 255, 0.14) 35%,
        rgba(0, 240, 255, 0) 100%) !important;
    box-shadow: inset -3px 0 10px -2px rgba(0, 240, 255, 0.7) !important;
}

/* Light mode: rose accent */
body.light-mode .tools-chips-stage::before {
    background: linear-gradient(to right,
        rgba(216, 27, 63, 0.32) 0%,
        rgba(216, 27, 63, 0.13) 35%,
        rgba(216, 27, 63, 0) 100%) !important;
    box-shadow: inset 3px 0 10px -2px rgba(216, 27, 63, 0.6) !important;
}
body.light-mode .tools-chips-stage::after {
    background: linear-gradient(to left,
        rgba(216, 27, 63, 0.32) 0%,
        rgba(216, 27, 63, 0.13) 35%,
        rgba(216, 27, 63, 0) 100%) !important;
    box-shadow: inset -3px 0 10px -2px rgba(216, 27, 63, 0.6) !important;
}

/* Visibility: only show glow on sides with more content */
.tools-chips-stage[data-hint-left="1"]::before  { opacity: 1 !important; animation: edgeGlowPulse 2.2s ease-in-out infinite !important; }
.tools-chips-stage[data-hint-right="1"]::after  { opacity: 1 !important; animation: edgeGlowPulse 2.2s ease-in-out infinite !important; }

@keyframes edgeGlowPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .tools-chips-stage::before,
    .tools-chips-stage::after { animation: none !important; }
}

/* END OLIVER-FINDER-EDGE-GLOW-V1 */

/* ===== OLIVER-FINDER-FOG-OVERFLOW-V1 - fog spills out of row bounds ===== */

/* Take full control of both pseudo-elements: overflow vertically + horizontally,
   blur into fog, drop previous inset box-shadows entirely */
.tools-chips-stage::before,
.tools-chips-stage::after {
    content: "" !important;
    position: absolute !important;
    top: -16px !important;
    bottom: -16px !important;
    width: 90px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    filter: blur(8px) !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    background-image: none !important;
    mix-blend-mode: screen !important;
}

/* Left fog */
.tools-chips-stage::before {
    left: -22px !important;
    right: auto !important;
    background: radial-gradient(ellipse 100% 100% at 20% 50%,
        rgba(0, 240, 255, 0.62) 0%,
        rgba(0, 240, 255, 0.32) 22%,
        rgba(0, 240, 255, 0.12) 48%,
        rgba(0, 240, 255, 0.02) 70%,
        rgba(0, 240, 255, 0) 100%) !important;
}

/* Right fog */
.tools-chips-stage::after {
    right: -22px !important;
    left: auto !important;
    background: radial-gradient(ellipse 100% 100% at 80% 50%,
        rgba(0, 240, 255, 0.62) 0%,
        rgba(0, 240, 255, 0.32) 22%,
        rgba(0, 240, 255, 0.12) 48%,
        rgba(0, 240, 255, 0.02) 70%,
        rgba(0, 240, 255, 0) 100%) !important;
}

/* Light mode: rose fog — reduce screen blend so rose reads correctly on white */
body.light-mode .tools-chips-stage::before {
    background: radial-gradient(ellipse 100% 100% at 20% 50%,
        rgba(216, 27, 63, 0.55) 0%,
        rgba(216, 27, 63, 0.26) 22%,
        rgba(216, 27, 63, 0.09) 48%,
        rgba(216, 27, 63, 0.02) 70%,
        rgba(216, 27, 63, 0) 100%) !important;
    mix-blend-mode: multiply !important;
}
body.light-mode .tools-chips-stage::after {
    background: radial-gradient(ellipse 100% 100% at 80% 50%,
        rgba(216, 27, 63, 0.55) 0%,
        rgba(216, 27, 63, 0.26) 22%,
        rgba(216, 27, 63, 0.09) 48%,
        rgba(216, 27, 63, 0.02) 70%,
        rgba(216, 27, 63, 0) 100%) !important;
    mix-blend-mode: multiply !important;
}

/* Visibility */
.tools-chips-stage[data-hint-left="1"]::before  {
    opacity: 1 !important;
    animation: fogBreathe 2.6s ease-in-out infinite !important;
}
.tools-chips-stage[data-hint-right="1"]::after  {
    opacity: 1 !important;
    animation: fogBreathe 2.6s ease-in-out infinite !important;
}

@keyframes fogBreathe {
    0%, 100% { opacity: 1;    filter: blur(8px); }
    50%      { opacity: 0.62; filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .tools-chips-stage::before,
    .tools-chips-stage::after { animation: none !important; }
}

/* Containment: allow fog to spill from every ancestor up to .tools-filters-section */
.tools-chips-stage,
.tools-chip-group {
    overflow: visible !important;
}
.tools-filters-section {
    overflow: visible !important;
}

/* END OLIVER-FINDER-FOG-OVERFLOW-V1 */

/* ===== OLIVER-FINDER-FOG-CONTAINED-V1 - fog stays inside row bounds ===== */

/* Pseudo-elements: pinned to row bounds, no negative offsets, no blur spill */
.tools-chips-stage::before,
.tools-chips-stage::after {
    top: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    filter: blur(6px) !important;
    border-radius: 10px !important;
}
.tools-chips-stage::before {
    left: 0 !important;
    right: auto !important;
}
.tools-chips-stage::after {
    right: 0 !important;
    left: auto !important;
}

/* Stage: clip the blur inside the row */
.tools-chips-stage {
    overflow: hidden !important;
    border-radius: 10px !important;
}

/* Section containment back to normal (no spill needed) */
.tools-filters-section {
    overflow: hidden !important;
}
.tools-chip-group {
    overflow: hidden !important;
}

/* END OLIVER-FINDER-FOG-CONTAINED-V1 */

/* ===== OLIVER-FINDER-GLOW-ROOM-V1 - give focus/hover glow room inside row bounds ===== */

/* Stage: keep overflow hidden (fog containment), remove own vertical padding */
.tools-chips-stage {
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 10px !important;
}

/* Chips container: vertical padding so scaled chips + focus glow fully fit
   - 10px top covers 1.08x scale + minimal upward shadow
   - 28px bottom covers 6px shadow offset + 20px blur (26px) + 2px safety */
.tools-chips-stage > .tools-chips {
    padding-top: 10px !important;
    padding-bottom: 28px !important;
}

/* Fog pseudo-elements: align to chip content area (not the new padding) */
.tools-chips-stage::before,
.tools-chips-stage::after {
    top: 10px !important;
    bottom: 28px !important;
}

/* Compensate visual gap by tightening group + section gaps */
.tools-chip-group {
    gap: 4px !important;
}

.tools-filters-section {
    gap: 4px !important;
}

/* END OLIVER-FINDER-GLOW-ROOM-V1 */

/* ===== OLIVER-FINDER-PAD0-THINK-V1 - zero horizontal padding on inner form ===== */

/* Kill all previous horizontal padding sources on the form */
.tools-finder-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

/* Make sure form's rounded corners still clip inputs cleanly */
.tools-finder-form > .tools-search-sticky,
.tools-finder-form > .tools-filters-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* END OLIVER-FINDER-PAD0-THINK-V1 */

/* ===== OLIVER-FINDER-CENTER-MASK-V1 - center titles + input pad + edge mask ===== */

/* 1. Center group titles */
.tools-chip-group-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
}

/* 2. Center finder label (above input) */
.tools-finder-label {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* 3. Center search button */
.tools-finder-submit,
.tools-search-row .tools-finder-submit,
.tools-finder-form .tools-finder-submit {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 4. Small L/R padding on text input (form is 0 so input needs its own) */
.tools-finder-input {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* 5. Mask fade on chip edges - only when the row actually overflows */

/* Default: no mask */
.tools-chips {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Overflow on left side only */
.tools-chips-stage[data-hint-left="1"] .tools-chips:not([data-no-mask]) {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, black 24px, black 100%) !important;
    mask-image: linear-gradient(to right,
        transparent 0, black 24px, black 100%) !important;
}

/* Overflow on right side only */
.tools-chips-stage[data-hint-right="1"] .tools-chips:not([data-no-mask]) {
    -webkit-mask-image: linear-gradient(to right,
        black 0, black calc(100% - 24px), transparent 100%) !important;
    mask-image: linear-gradient(to right,
        black 0, black calc(100% - 24px), transparent 100%) !important;
}

/* Overflow on both sides */
.tools-chips-stage[data-hint-left="1"][data-hint-right="1"] .tools-chips:not([data-no-mask]) {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, black 24px, black calc(100% - 24px), transparent 100%) !important;
    mask-image: linear-gradient(to right,
        transparent 0, black 24px, black calc(100% - 24px), transparent 100%) !important;
}

/* END OLIVER-FINDER-CENTER-MASK-V1 */

/* ===== OLIVER-FINDER-PADDING-RESTORE-V1 - revert V10 + V11 padding changes ===== */

/* Form: restore original horizontal padding (V10 had zeroed it) */
.tools-finder-form {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
@media (max-width: 768px) {
    .tools-finder-form {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Input: restore original 16px side padding (V11 had reduced to 12px) */
.tools-finder-input {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* END OLIVER-FINDER-PADDING-RESTORE-V1 */

/* ===== OLIVER-FINDER-V13-FINAL - mask + safe-center + typewriter hint ===== */

/* 1. Kill V1's always-on 10px mask from .tools-chips */
.tools-chips,
.tools-chips-stage > .tools-chips {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* 2. Directional 50px mask on .tools-chips-stage (non-scrolling parent) */
.tools-chips-stage {
    -webkit-mask-image: none;
    mask-image: none;
}
.tools-chips-stage[data-hint-left="1"][data-hint-right="0"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 50px, black 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, black 50px, black 100%) !important;
}
.tools-chips-stage[data-hint-left="0"][data-hint-right="1"] {
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 50px), transparent 100%) !important;
    mask-image: linear-gradient(to right, black 0, black calc(100% - 50px), transparent 100%) !important;
}
.tools-chips-stage[data-hint-left="1"][data-hint-right="1"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, black 50px, black calc(100% - 50px), transparent 100%) !important;
}

/* 3. Center chips when they fit (safe center falls back to start on overflow) */
@supports (justify-content: safe center) {
    .tools-chips,
    .tools-chips-stage > .tools-chips {
        justify-content: safe center !important;
    }
}
@supports not (justify-content: safe center) {
    .tools-chips,
    .tools-chips-stage > .tools-chips {
        justify-content: center !important;
    }
}

/* 4. Typewriter hint overlay */
.tools-typing-hint {
    position: absolute;
    top: 14px;
    right: 16px;
    left: 16px;
    bottom: 14px;
    pointer-events: none;
    color: var(--text-dim, #8a9aad);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    direction: rtl;
    text-align: right;
    overflow: hidden;
    z-index: 2;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.tools-typing-hint.hidden { display: none; }
@media (max-width: 768px) {
    .tools-typing-hint {
        top: 10px;
        bottom: 10px;
    }
}

/* END OLIVER-FINDER-V13-FINAL */

/* ===== OLIVER-FINDER-V16-WARNING-CSS - theme-aware warning ===== */
.tools-state.is-warning {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 0.82rem;
    border: 1px solid rgba(255, 200, 60, 0.35);
    color: rgba(255, 210, 100, 0.95);
    background: rgba(60, 40, 10, 0.25);
    border-radius: 8px;
    line-height: 1.5;
    text-align: center;
}
body.light-mode .tools-state.is-warning {
    border-color: rgba(180, 120, 10, 0.4);
    color: #7a5300;
    background: rgba(255, 245, 215, 0.6);
}
/* END OLIVER-FINDER-V16-WARNING-CSS */

/* ===== OLIVER-FINDER-V22 - chips always start at RTL edge (safe center hides overflow) ===== */

/* Override V13-FINAL's safe center / center rules. In RTL flex-start = right edge,
   which is what we want: chips visible from the start, overflow goes leftward. */
.tools-chips,
.tools-chips-stage > .tools-chips {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}

/* Ensure the stage does not clip all chips even with mask */
.tools-chips-stage {
    overflow: hidden !important;
    min-height: 60px !important;
}

/* Softer edge mask - 24px instead of 50px, only on the overflowing side */
.tools-chips-stage[data-hint-left="1"][data-hint-right="0"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%) !important;
}
.tools-chips-stage[data-hint-left="0"][data-hint-right="1"] {
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%) !important;
    mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%) !important;
}
.tools-chips-stage[data-hint-left="1"][data-hint-right="1"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%) !important;
}

/* END OLIVER-FINDER-V22 */

/* ===== OLIVER-FINDER-V23-CENTER - center chips again (revert V22 flex-start) ===== */
.tools-chips,
.tools-chips-stage > .tools-chips {
    justify-content: center !important;
}
/* END OLIVER-FINDER-V23-CENTER */

/* ===== OLIVER-FINDER-V23-CLAR-CSS - clarification block styling ===== */
.tools-clarification {
    padding: 24px 18px;
    text-align: center;
    border-radius: 14px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.18);
    margin: 16px 0;
}
body.light-mode .tools-clarification {
    background: rgba(216, 27, 63, 0.04);
    border-color: rgba(216, 27, 63, 0.18);
}
.tools-clarification-hint {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #f0f5fa);
    margin: 0 0 16px;
    line-height: 1.6;
}
body.light-mode .tools-clarification-hint {
    color: #0f172a;
}
.tools-clarification .tools-suggestions {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* END OLIVER-FINDER-V23-CLAR-CSS */

/* ===== OLIVER-FINDER-V26-CLICK - clarification chips are clickable ===== */
.tools-clarification,
.tools-clarification * {
    pointer-events: auto !important;
}
.tools-clarification .tools-suggestion-chip {
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.tools-clarification .tools-suggestion-chip:hover {
    background: rgba(0, 240, 255, 0.14) !important;
    border-color: #00f0ff !important;
    transform: translateY(-1px);
}
body.light-mode .tools-clarification .tools-suggestion-chip:hover {
    background: rgba(216, 27, 63, 0.10) !important;
    border-color: #d81b3f !important;
}
.tools-clarification .tools-suggestion-chip:active {
    transform: translateY(0);
}
/* END OLIVER-FINDER-V26-CLICK */

/* ===== OLIVER-FINDER-V28-SAFE-CENTER - center when fits, flex-start when overflows ===== */
/* Strategy: native safe center when supported (auto-adapts), JS data-hint fallback otherwise. */

/* 1. Modern browsers: safe center is the correct behavior natively */
@supports (justify-content: safe center) {
    .tools-chips,
    .tools-chips-stage > .tools-chips {
        justify-content: safe center !important;
    }
}

/* 2. Universal fallback: when JS detects overflow on either side, force flex-start
   so the START items (right side in RTL) are never clipped. Wins by specificity. */
.tools-chips-stage[data-hint-left="1"] .tools-chips,
.tools-chips-stage[data-hint-right="1"] .tools-chips {
    justify-content: flex-start !important;
}

/* END OLIVER-FINDER-V28-SAFE-CENTER */