/**
 * Unified filter bar
 * ------------------------------------------------------------------
 * Single source of truth for the site-wide directory / listing filter
 * design, modelled on the Courses ("All Courses") filter that product
 * approved as the reference. Any listing page — course, membership,
 * company / college / candidate directory, events, jobs — gets the same
 * look by wrapping its filter form in `.trikona-filter-bar` and using the
 * generic `trikona-filter-*` classes below.
 *
 * Design tokens (from the reference courses filter):
 *   card      #fff, 1px #e0e2e7, radius 12px, shadow 0 2px 12px rgba(0,0,0,.06)
 *   label     11px/700 uppercase #6b7280, letter-spacing .07em
 *   field     40px tall, bg #f9fafb, 1.5px #dfdfdf, radius 8px
 *   focus     border #f59e0b + 3px rgba(245,158,11,.12) ring
 *   apply btn 36px yellow (#f59e0b) check ✓
 *   clear btn 36px outline ✕
 *
 * Layout is flex-wrap (not a fixed grid) so it adapts to any field count:
 * one row on desktop, wrapping down to a single stacked column on phones.
 *
 * Enqueued globally by trikona-edtech functions.php, so it is available on
 * every listing page regardless of which child theme renders it.
 */

/* ── Host page container ────────────────────────────────────────────
   Listing templates that render the filter bar as a full-width top bar
   often wrap it in the theme's `.container-fluid`, which base.css makes
   `display:flex; justify-content:space-between`. That flexed the filter
   bar and the results block side-by-side (a leftover from the old
   sidebar+results two-column layout). This helper forces the host
   container to stack: filter bar on top, results below, both full width. */
.trikona-filter-page {
    display: block !important;
}

/* ── Card wrapper ───────────────────────────────────────────────── */
.trikona-filter-bar {
    background: #fff;
    border: 1px solid #e0e2e7;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    padding: 12px 16px 12px;
    margin-bottom: 24px;
    box-sizing: border-box;
}
.trikona-filter-bar *,
.trikona-filter-bar *::before,
.trikona-filter-bar *::after {
    box-sizing: border-box;
}

/* ── Row + cells ────────────────────────────────────────────────── */
/* Flex-wrap with grow so the fields always span the FULL width of the bar,
   whatever the field count: each cell shares a common 185px basis and grows to
   fill the row (a 4-field directory like College fills the row the same as the
   8-field student directory). */
.trikona-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}
.trikona-filter-cell {
    display: flex;
    flex-direction: column;
    flex: 1 1 185px;
    min-width: 0;
}

.trikona-filter-label {
    display: flex;
    align-items: flex-end;
    min-height: 16px;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6b7280;
}

/* ── Fields (inputs + native selects) ───────────────────────────── */
.trikona-filter-bar .trikona-field,
.trikona-filter-bar .trikona-filter-cell > input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.trikona-filter-bar .trikona-filter-cell > select {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    font-size: 13px;
    line-height: 38px;
    font-weight: 400;
    color: #374151;
    background: #f9fafb;
    border: 1.5px solid #dfdfdf;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.trikona-filter-bar .trikona-field::placeholder,
.trikona-filter-bar .trikona-filter-cell > input::placeholder {
    color: #999;
}
.trikona-filter-bar .trikona-field:focus,
.trikona-filter-bar .trikona-filter-cell > input:focus,
.trikona-filter-bar .trikona-filter-cell > select:focus {
    border-color: #f59e0b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
}

/* Native <select>: draw our own caret (no wrapper element needed). Caret only,
   no divider line before it — keeps the control clean. */
.trikona-filter-bar .trikona-filter-cell > select,
.trikona-filter-bar select.trikona-field {
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca3af' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
}
/* Native <select multiple> (e.g. College Directory "Departments") is a listbox,
   not a dropdown: keep it at field height + aligned in the row, and drop the
   dropdown caret/divider so it doesn't imply a dropdown it doesn't have. */
.trikona-filter-bar .trikona-filter-cell > select[multiple],
.trikona-filter-bar select[multiple].trikona-field {
    height: 40px;
    padding-right: 12px;
    overflow-y: auto;
    background-image: none;
}
.trikona-filter-bar .trikona-filter-cell > select[multiple] option {
    padding: 2px 6px;
}

/* ── Action buttons (✓ apply / ✕ clear) ─────────────────────────── */
.trikona-filter-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 22px; /* aligns the 36px buttons with the 40px field row (below the labels) */
}
.trikona-btn-apply,
.trikona-btn-clear {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* hide any text label; icon is styled below */
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, box-shadow .15s, transform .1s, color .15s, border-color .15s;
}
.trikona-btn-apply {
    background: #f59e0b;
    color: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(245, 158, 11, .4);
}
.trikona-btn-apply:hover {
    background: #d97706;
    box-shadow: 0 4px 16px rgba(245, 158, 11, .5);
    transform: translateY(-1px);
    color: #fff;
}
.trikona-btn-clear {
    background: transparent;
    color: #9ca3af;
    border: 1.5px solid #e5e7eb;
}
.trikona-btn-clear:hover {
    background: #f9fafb;
    color: #000103;
    border-color: #d1d5db;
    text-decoration: none;
}
.trikona-btn-icon {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}
/* Fallback glyphs when markup provides no .trikona-btn-icon child. */
.trikona-btn-apply:empty::before { content: "\2713"; font-size: 16px; font-weight: 700; }
.trikona-btn-clear:empty::before { content: "\2715"; font-size: 16px; font-weight: 700; }

/* ── Select2 skin (scoped to the bar; covers default + classic) ──── */
.trikona-filter-bar .select2-container {
    width: 100% !important;
    display: block !important;
}
.trikona-filter-bar .select2-container .select2-selection {
    width: 100% !important;
    min-height: 40px !important;
    border: 1.5px solid #dfdfdf !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: normal !important;
    position: relative !important;
}
.trikona-filter-bar .select2-container--open .select2-selection {
    border-color: #f59e0b !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12) !important;
}
/* Caret + divider on the right, matching the reference Courses filter. */
.trikona-filter-bar .select2-container .select2-selection::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #9ca3af;
    transform: translateY(-35%);
    pointer-events: none;
}
.trikona-filter-bar .select2-container .select2-selection::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 34px;
    width: 1px;
    height: calc(100% - 2px);
    background: #e5e7eb;
    pointer-events: none;
}
/* Single-select rendered value + placeholder. */
.trikona-filter-bar .select2-container .select2-selection--single {
    padding: 0 !important;
}
.trikona-filter-bar .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 44px 0 12px !important;
    line-height: 38px !important;
    color: #374151 !important;
    font-size: 13px !important;
}
.trikona-filter-bar .select2-container .select2-selection--single .select2-selection__arrow {
    display: none !important;
}
/* Multi-select chips area.
   Keep the empty-state chip list and the inline search box on ONE row so the
   control is 40px tall and vertically centred, matching the reference Courses
   filter. Stock Select2 4.1 renders the <ul> at width:100% with the search
   field as a following sibling, which dropped the search onto a second line.
   Let the <ul> size to its content when empty (width:auto). When chips are
   selected, the list fills the field and long labels wrap inside each chip
   instead of clipping (college names, company names, etc.). */
.trikona-filter-bar .select2-container .select2-selection--multiple {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
    height: auto !important;
    padding: 4px 44px 4px 8px !important;
    box-sizing: border-box !important;
}
.trikona-filter-bar .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 4px !important;
    line-height: normal !important;
    background: transparent !important;
    font-size: 13px !important;
}
.trikona-filter-bar .select2-container .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__choice) {
    flex: 1 1 100% !important;
    width: 100% !important;
}
.trikona-filter-bar .select2-container .select2-selection--multiple .select2-selection__choice {
    height: auto !important;
    min-height: 26px !important;
    max-width: 100% !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    color: #92400e !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 3px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.trikona-filter-bar .select2-container .select2-selection--multiple .select2-selection__choice__display {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
}
.trikona-filter-bar .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    color: #92400e !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
}
.trikona-filter-bar .select2-container .select2-search--inline {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    flex: 1 1 90px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 26px !important;
    min-width: 0 !important;
    background: transparent !important;
}
.trikona-filter-bar .select2-container .select2-search--inline .select2-search__field {
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #374151 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
}
.trikona-filter-bar .select2-container .select2-search--inline .select2-search__field::placeholder {
    color: #b0b7c3 !important;
    font-size: 13px !important;
}

/* Shared dropdown panel (rendered at body root, so not scoped to the bar). */
.select2-dropdown.trikona-filter-dropdown,
.trikona-filter-bar + .select2-container .select2-dropdown {
    border: 1px solid #d9dee8;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.select2-dropdown.trikona-filter-dropdown .select2-results__option,
.trikona-filter-bar + .select2-container .select2-dropdown .select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

/* ── jQuery-UI price range slider skin (scoped to the bar) ───────── */
.trikona-filter-bar .trikona-price-readout {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    margin: 0 0 6px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 38px !important;
    color: #374151 !important;
    background: #f9fafb !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    outline: none !important;
    cursor: default !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.trikona-filter-bar .ui-slider.ui-slider-horizontal {
    position: relative !important;
    height: 3px !important;
    margin: 8px 7px 6px !important;
    background: #e5e7eb !important;
    border: none !important;
    border-radius: 6px !important;
}
.trikona-filter-bar .ui-slider .ui-slider-range {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
    border-radius: 6px !important;
    height: 100% !important;
}
.trikona-filter-bar .ui-slider .ui-slider-handle {
    width: 14px !important;
    height: 14px !important;
    top: -6px !important;
    margin-left: -7px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2.5px solid #f59e0b !important;
    box-shadow: 0 1px 6px rgba(245, 158, 11, .45) !important;
    cursor: grab !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: transform .1s, box-shadow .12s !important;
}
.trikona-filter-bar .ui-slider .ui-slider-handle:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 2px 12px rgba(245, 158, 11, .6) !important;
}

/* ── Mobile: collapsible filter bar ─────────────────────────────── */
.trikona-filter-toggle { display: none; }

@media (max-width: 768px) {
    .trikona-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 44px;
        padding: 0 16px;
        background: #fff7e6;
        color: #92400e;
        border: 1.5px solid #f59e0b;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .trikona-filter-toggle-text { flex: 1 1 auto; text-align: left; }
    .trikona-filter-toggle-caret { flex: 0 0 auto; transition: transform .2s ease; }
    .trikona-filter-bar.is-open .trikona-filter-toggle-caret { transform: rotate(180deg); }

    /* Collapsed by default; revealed when the bar has .is-open. */
    .trikona-filter-bar > .trikona-filter-form,
    .trikona-filter-bar > form { display: none; }
    .trikona-filter-bar.is-open > .trikona-filter-form,
    .trikona-filter-bar.is-open > form { display: block; margin-top: 12px; }

    .trikona-filter-cell { flex: 1 1 100%; }
    .trikona-filter-actions { width: 100%; justify-content: stretch; padding-top: 4px; }
    .trikona-btn-apply, .trikona-btn-clear { flex: 1 1 auto; }
}