/* =========================================
   MOBILE FILTER STYLES (Figma Style)
   ========================================= */

/* Hide Mobile Wrapper on Desktop */

body .site .mobile-filter-wrapper {
    display: none;
    font-family: Archivo, sans-serif;
}
/* Hide Desktop Controls on Mobile */

@media (max-width: 767px) {
    body .site .desktop-only-filters, body .site .desktop-view {
        display: none !important;
    }
    /* Show Mobile Wrapper */
    body .site .mobile-filter-wrapper {
        display: block;
        width: 100%;
        margin-bottom: 32px;
    }
    /* --- 1. TRIGGER BUTTON (.button21) --- */
    body .site .mobile-filter-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px;
        background: transparent;
        border: 1px solid #0d0903;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.2s ease;
        border-radius: 0.25rem;
        border: 1px solid var(--Color-Neutral-Darkest, #0D0903);
    }
    body .site .mobile-filter-toggle:hover {
        background: #f2f2f2;
    }
    body .site .mobile-filter-toggle .button22 {
        color: #0d0903;
        font-size: 16px;
        font-weight: 400;
    }
    body .job-filter-buttons {
        gap: 0rem;
    }
    body .jobs-header {
        gap: 0;
    }
    body .filter-label {
        font-family: Museo;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 2.1rem */
        letter-spacing: -0.015rem;
    }
    /* Icon Swapping Logic */
    body .site .mobile-filter-toggle .icon-state-open {
        display: none;
    }
    /* When active class is added by JS */
    body .site .mobile-filter-toggle.active .icon-state-closed {
        display: none;
    }
    body .site .mobile-filter-toggle.active .icon-state-open {
        display: block;
    }
    /* --- 2. DROPDOWN CONTENT (.filters) --- */
    body .site .mobile-filter-content {
        display: none;
        /* Hidden by default */
        padding: 0 24px;
        /* Figma: padding-left/right 24px */
        margin-top: 16px;
        flex-direction: column;
        gap: 8px;
    }
    /* Row: Onderwerp | Clear (.row2) */
    body .site .mobile-filter-content .row2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        padding: 20px 0;
    }
    body .site .mobile-filter-content .onderwerp {
        font-size: 18px;
        font-weight: 500;
        color: #0d0903;
        flex: 1;
    }
    body .site .mobile-filter-content .clear {
        font-size: 16px;
        color: #0d0903;
        cursor: pointer;
    }
    /* --- 3. FILTER ITEMS (.text-wrapper) --- */
    body .site .mobile-filter-content .job-filter-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        width: 100%;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
    }
    /* Checkbox Square (.checkbox2) */
    body .site .mobile-filter-content .checkbox2 {
        display: block;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(13, 9, 3, 0.15);
        background: #fff;
        flex-shrink: 0;
        position: relative;
    }
    body .site .mobile-filter-content .label {
        font-size: 16px;
        color: #0d0903;
    }
    /* Active State (Checked) */
    body .site .mobile-filter-content .job-filter-btn.active .checkbox2 {
        background-color: #0d0903;
        border-color: #0d0903;
        /* Checkmark SVG */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Hover State */
    body .site .mobile-filter-content .job-filter-btn:hover {
        opacity: 0.7;
    }
    /* --- 4. SEARCH BAR --- */
    body .site .mobile-filter-content .job-search-bar {
        margin-top: 24px;
        width: 100%;
        max-width: 100%;
        padding: 12px;
    }
    body .search-bar input {
        font-size: 1rem;
    }
}