/* =========================
   General Select2 Styles
   ========================= */

/* Ensure Select2 container fills width */
.select2-container {
    width: 100% !important;
}

/* Hide hidden select element */
.select2-hidden {
    visibility: hidden;
}

/* Multiple select fields and regular input styling */
.select2-container--default .select2-selection--multiple,
.sign-up-bar-section form input,
.form-container input.form-control {
    background-color: white;
    border: 0.5px solid #fff;
    min-height: 60px;
    padding-left: 7px;
    padding-bottom: 8px !important;
    margin: 0;
    font-family: 'Mulish', sans-serif !important;
    color: rgba(0, 0, 0, 0.7);
    display: flex;
}

/* Focused input fields / selects */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.sign-up-bar-section form input:focus,
.form-container input.form-control:focus {
    border: 3px solid #ACB9CE; /* lighter shade of #4D6582 */
    outline: none;

}

/* Placeholder text */
.select2-container--default textarea::placeholder,
.form-container input::placeholder {
    color: rgba(77, 101, 130, 0.5); /* faint tone of #4D6582 */
    font-family: 'Mulish', sans-serif;
    font-size: 18px;
    padding-top: 13px;
}

/* =========================
   Selected Items / Pills
   ========================= */

/* Pill appearance */
.select2-selection__choice {
    background: linear-gradient(to bottom, #5C738F 0%, #4D6582 100%);
    color: white !important;
    margin-bottom: 6px;
    border: none;
}

/* Pill hover */
.select2-selection__choice:hover {
    background: linear-gradient(to bottom, #5E7897 100%, #6C86A4 0%) !important;
    color: #CCCCCC !important; 
}

/* Pill remove X */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #000000;
    border-right: 0.5px rgba(255,255,255, 0.25) solid;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: rgba(255,255,255, 0.25);
    color: #CCCCCC;
}

/* Pills border spacing */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid #4D6582;
    margin-left: 2px;
}

/* Clear all button in Select2 */
.select2-container .select2-selection--multiple .select2-selection__clear {
    color: #4D6582;
    margin-top: 3px;
}

/* =========================
   Search / Inline Fields
   ========================= */
.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 0;
    min-height: 40px;
}

/* Select2 results highlighting */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(0,0,0,0.03);
    color: #212529;
}

/* Font weight for dropdown options */
.select2-results__option--selectable,
.select2-results__option {
    font-weight: 300;
}

/* =========================
   Form Container Styling
   ========================= */
.form-container {
    background-color: rgba(77, 101, 130, 0.85); /* Slightly transparent #4D6582 */
    padding: 2rem 0.5rem;
    border-radius: 12px;
    color: white; /* default text */
    width: 100%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* shadow for entire form */
}

/* Headings and text inside container */
.form-container h2,
.form-container p {
    color: white;
}

.form-tabs-content h2 {
    font-size: 35px;
    font-weight: 700 !important;
    padding-top: 0;
    padding-bottom: 0;
}

.form-tabs-content p {
    font-size: 20px;
}

.form-tabs-content {
    padding-top: 5px;
    padding-bottom: 20px;
    border-radius: 5px;
}

.form-tabs-content textarea {
    min-height: 70px;
}




 /* =========================
        Button Styling
   ========================= */
.form-container .btn {
background-color: #4D6582;
color: white;
border: 1px solid white;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.2s ease;
height: 60px;
}

.form-container .btn:hover {
    background-color: #5C738F; /* slightly lighter */
    color: white;
    border: 1px solid white;
}

/* Small X inside input fields */
.form-container .form-control-clear {
    color: #4D6582;
    cursor: pointer;
}

/* Search Results */

#searchResults{
    margin-top: 30px;
    width: 100%;
    padding: 0 20px;
      
}

.form-container .alert {
    margin-left: 35px;
    margin-right: 35px;
}


.results-partial {
    background-color: #e1e6ed;
    border: 1px #95A4BA solid;
    border-radius: 5px;
    margin: 0;
}

.results-box .section-title {
    color: #292929;
}

.results-partial .section-description {
    color: #000000;
}

.results-box .result-found::after {
    content: "To unlock full access to expert profiles, litigation history, and direct messaging, an account must be created.";
    display: block;
    font-size: 16px;
    font-weight: normal;
    margin-top: 25px;
    padding: 0 30px;
}



/* =========================
      Tabs (Red Version)
   ========================= */
.form-tabs #searchPills .nav-item button {
    color: #304054;
    font-size: 15px;
    border-radius: 7px;
}

.form-tabs #searchPills {
    margin-bottom: 7px;
    margin-top: -20px;
}


.form-tabs-content .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    padding-bottom: 3px !important;
    padding-top: 3px;
}

.form-tabs-content .select2-container--default .select2-selection--multiple > ul {
    margin-bottom: 10px;
}

.form-tabs-content.form-container .btn {
    height: 38px;
}

.form-tabs-content .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: -10px;
}

.form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0;
}

.form-tabs-content .select2-container--default .select2-search--inline .select2-search__field {
    margin-bottom: -15px;
}

.form-tabs-content .select2-container--default .select2-search--inline .select2-search__field {
    line-height: 20px;
}

.form-tabs-content textarea::placeholder {
    font-size: 15px;
}

.form-tabs-content {
    background-color: rgba(170, 29, 14, 0.1);
    padding: 10px 20px;
    box-shadow: none;
}

.form-tabs-content .select2-selection {
    border: 1px solid var(--xpertly-brand, #AA1D0E);
}

.form-tabs-content .btn {
    background-color: var(--xpertly-brand, #AA1D0E);
}

    .form-tabs-content .btn:hover {
        background-color: var(--xpertly-brand-hover, #922917);
    }


/* Focused input fields / selects */
    .form-tabs-content .select2-container--default.select2-container--focus .select2-selection--multiple,
    .sign-up-bar-section form input:focus,
    .form-tabs-content input.form-control:focus {
        border: 3px solid rgba(170, 29, 14, 0.4);
    }

/* Placeholder text */
.form-tabs-content .select2-container--default textarea::placeholder,
.form-tabs-content .form-container input::placeholder {
    color: rgba(170, 29, 14, 0.4);
}

/* Pill appearance */
.form-tabs-content .select2-selection__choice {
    background: #FFFFFF;
    color: #000000 !important;
    margin-bottom: 6px;
    border: none;
}

/* Pill hover */
    .form-tabs-content .select2-selection__choice:hover {
        background: #CCCCCC !important;
        color: #000000 !important;
    }


/* Pills border spacing */
.form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid #911A0D;
}

/* Clear all button in Select2 */
.form-tabs-content .select2-container .select2-selection--multiple .select2-selection__clear {
    color: #AA1D0E;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {

    background-color: #FFFFFF !important;
}


    /* =========================
         Results table/cards
   ========================= */

/* App brand (forms, legacy) + calm results UI (slate / teal — minimal red) */
:root {
    --xpertly-brand: #AA1D0E;
    --xpertly-brand-hover: #922917;
    --results-bg-header: #f1f5f9;
    --results-bg-row-hover: #f8fafc;
    --results-bg-avatar: #e2e8f0;
    --results-border: rgba(15, 23, 42, 0.09);
    --results-border-strong: rgba(15, 23, 42, 0.14);
    --results-text: #0f172a;
    --results-text-muted: #64748b;
    --results-accent: #0f766e;
    --results-accent-hover: #115e59;
    --results-accent-soft: rgba(15, 118, 110, 0.14);
    --results-link: #0e7490;
    --results-link-hover: #155e75;
    --results-cta-bg: #1e293b;
    --results-cta-hover: #0f172a;
    --results-favourite-line: #14b8a6;
    --results-heart: #e11d48;
    --results-icon-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Match Find Experts / case-modal primary — role-aware via --app-accent */
.xpertly-results-cta {
    background: linear-gradient(135deg, var(--app-accent, #ee402b) 0%, var(--app-accent-hover, #d63a26) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px var(--app-glow, rgba(238, 64, 43, 0.22));
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
    filter: none;
    transition: filter 0.15s ease, box-shadow 0.2s ease;
}

.xpertly-results-cta:hover,
.xpertly-results-cta:focus {
    color: #fff !important;
    filter: brightness(1.06);
    box-shadow: 0 8px 28px var(--app-glow, rgba(238, 64, 43, 0.28));
    text-shadow: none;
}

/* Public / unscoped results (no app shell): keep readable CTA if vars absent */
body:not(.app-logged-in) .xpertly-results-cta {
    box-shadow: 0 6px 22px rgba(var(--app-accent-rgb, 238, 64, 43), 0.22);
}

/* ── Assessment-company results (Find Experts) ───────────────────────────────
   The AC viewer gets a green "Connect" CTA (distinct from the red Send
   Request), a brand-aligned "Connected" pill under the expert's name, and
   equal-height rows so a lone Connect button reads at the same height as a
   connected expert's Send Request / Book Now stack. */
.ac-connect-cta,
.ac-accept-cta,
.ac-decline-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-image: none !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.ac-connect-cta {
    background-color: rgba(5, 150, 105, 0.1) !important;
    color: #047857 !important;
    border-color: rgba(5, 150, 105, 0.28) !important;
}

.ac-connect-cta .fa-user-plus {
    font-size: 0.9em;
    opacity: 0.9;
}

.ac-connect-cta:hover {
    background-color: rgba(5, 150, 105, 0.16) !important;
    color: #065f46 !important;
    border-color: rgba(5, 150, 105, 0.38) !important;
}

.ac-connect-cta:active {
    transform: translateY(1px);
}

.ac-connect-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.22) !important;
}

/* Accept / Decline for an incoming request — same soft tint language as the
   status pills (not solid fills). Accept is blue; Decline is red. */
.ac-accept-cta {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.ac-accept-cta .fa-check {
    font-size: 0.9em;
    opacity: 0.9;
}

.ac-accept-cta:hover {
    background-color: rgba(59, 130, 246, 0.16) !important;
    color: #1e40af !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

.ac-accept-cta:active {
    transform: translateY(1px);
}

.ac-accept-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important;
}

.ac-decline-cta {
    background-color: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
}

.ac-decline-cta .fa-xmark {
    font-size: 0.9em;
    opacity: 0.9;
}

.ac-decline-cta:hover {
    background-color: rgba(220, 38, 38, 0.14) !important;
    color: #991b1b !important;
    border-color: rgba(220, 38, 38, 0.38) !important;
}

.ac-decline-cta:active {
    transform: translateY(1px);
}

.ac-decline-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

/* Connection status pills (Connected / Request pending / Wants to connect).
   Forced to a new line under the expert's name so longer labels like
   "Wants to connect" never sit beside the name in the narrow Name column. */
.ac-connection-status {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border-radius: 999px;
    white-space: nowrap;
}

.ac-connection-status--connected {
    color: #047857;
    background: rgba(5, 150, 105, 0.12);
    border: 1px solid rgba(5, 150, 105, 0.28);
}

.ac-connection-status--connected .bi {
    font-size: 0.85rem;
    line-height: 1;
}

.ac-connection-status--pending {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.ac-connection-status--pending .bi {
    font-size: 0.85rem;
    line-height: 1;
}

.ac-connection-status--incoming {
    /* Slightly more right padding — the longer label + letter-spacing made the
       trailing edge feel tighter than Connected / Request pending. */
    padding: 0.2rem 0.75rem 0.2rem 0.55rem;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.ac-connection-status--incoming .bi {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Equal-height rows: floor every AC result row at the same minimum height so
   not-yet-connected experts (single Connect button) don't render thinner than
   connected experts (Send Request + Book Now stack). */
.results-table--ac tbody tr.expert-card {
    min-height: 120px;
}

/* Connected AC fav/block icons — larger than the client trio so a two-button
   row doesn't look sparse next to the CTA stack. */
.results-table--ac .results-action-icon-row--ac {
    gap: 0.55rem !important;
}

.results-table--ac .results-action-icon-row--ac > form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.results-table--ac .results-action-icon-row--ac .results-row-action-icon--ac {
    width: 3.35rem;
    height: 3.35rem;
    min-width: 3.35rem;
    min-height: 3.35rem;
}

.results-table--ac .results-action-icon-row--ac .results-row-action-icon--ac i {
    font-size: 1.45rem;
}

.dashboard-find-expert-page .results-table--ac .action-buttons {
    /* 3 × 3.35rem + 2 × 0.55rem gap */
    --find-expert-cta-row-width: 11.15rem;
}

.dashboard-find-expert-page .results-table--ac .action-buttons .results-action-icon-row--ac .results-row-action-icon--ac {
    width: 3.35rem;
    height: 3.35rem;
    min-width: 3.35rem;
    min-height: 3.35rem;
}

.dashboard-find-expert-page .results-table--ac .action-buttons .results-action-icon-row--ac .results-row-action-icon--ac i {
    font-size: 1.45rem;
}

    .results-cards {
    display: none;
}

.results-table {
    display: flex;
}

    .results-table thead {
        background-color: var(--results-bg-header);
        border-radius: 0.35rem 0.35rem 0 0;
        border-bottom: 1px solid var(--results-border);
    }

.results-table thead th {
    color: var(--results-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.results-table thead th:last-child {
    text-align: right;
}

.results-table tbody tr.expert-card {
    border-bottom: 1px solid var(--results-border);
}

.results-table .earliest-available-line__hint {
    display: block;
    max-width: 100%;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

/* Brief, brand-aligned pulse when a row is freshly favourited and reordered
   to the top. Replaces the old inline `#fff3cd` (Bootstrap warning yellow)
   highlight, which clashed with the page palette. */
@keyframes expertCardFavPulse {
    0%   { background-color: rgba(225, 29, 72, 0.14); box-shadow: inset 4px 0 0 var(--results-favourite-line, #14b8a6); }
    60%  { background-color: rgba(225, 29, 72, 0.06); }
    100% { background-color: transparent;             box-shadow: inset 4px 0 0 var(--results-favourite-line, #14b8a6); }
}

.expert-card.expert-card--just-favourited {
    animation: expertCardFavPulse 1.2s ease-out;
}

/* The .find-expert-toast component used to live here. Favourite/share
   feedback now flows through the unified in-app alert system
   (window.showAppAlert, see wwwroot/js/site.js) so every toast on the site
   shares one look. */

/* ── Share CV modal extras ───────────────────────────────────────────────────
   The Share CV modal reuses the case-modal__* skin (header/body/footer/inputs)
   from case-index.css and adds two small helpers here for the "Sharing CV for…"
   subtitle and the conditional "examinee name" sub-panel. */
.case-modal__subtitle {
    font-family: "DM Sans", "Mulish", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-slate-900, #0f172a);
    margin: 0 0 1rem;
    padding: 0.55rem 0.85rem;
    background: var(--app-slate-50, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
}

/* Soft panel for inline expansion (e.g. examinee field for a brand-new case) */
.case-modal__sub-panel {
    padding: 0.85rem;
    background: var(--app-slate-50, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}

/* Make Select2 inside the share modal match case-modal__input height/styling
   so the "Recipient" dropdown and "Case" picker visually agree with the
   plain-text Examinee input below them. */
#shareModal .select2-container--default .select2-selection--single {
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    height: calc(0.5rem * 2 + 0.9rem * 1.5);
    padding: 0.25rem 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#shareModal .select2-container--default.select2-container--focus .select2-selection--single,
#shareModal .select2-container--default .select2-selection--single:focus {
    border-color: var(--app-accent, #ee402b);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb, 238, 64, 43), 0.10);
    outline: none;
}
#shareModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.6;
    color: var(--app-slate-900, #0f172a);
    padding-left: 0.25rem;
}

/* Spinner shown inside the primary submit button while sharing is in flight. */
.case-modal__btn .case-modal__btn-spinner {
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: caseModalBtnSpin 0.75s linear infinite;
}
@keyframes caseModalBtnSpin { to { transform: rotate(360deg); } }

.results-table tbody tr:hover {
    background-color: var(--results-bg-row-hover);
    
}

.results-table .initials-placeholder, .results-cards .initials-placeholder {
    background-color: var(--results-bg-avatar);
    border-radius: 50%;
    border: 1px solid var(--results-border-strong);
    color: var(--results-text);
    width: 50px;
    height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.card-color {
    height: 50px;
    background-color: var(--results-bg-header);
    border-radius: 4px 4px 0 0;
}

.card-content {
    margin-top: -50px;
}

.results-cards .initials-placeholder {
    margin: auto;
    width: 60px;
    height: 60px;
    font-size: 22px;
}

.results-cards .col-12 {
    width: 45%;
}

.results-cards h5 {
    margin-top: 15px;
    font-weight: bold;
    font-size: 18px;
}

.results-cards .dropdown-menu button {
    background-color: var(--results-cta-bg);
    color: #fff;
    border: none;
}

.results-cards .button-container a, .results-cards .button-container button {
    background-color: var(--results-cta-bg);
    color: white;
    border: none;
    border-radius: 10px;
}

.action-buttons .fa-solid.fa-heart {
    color: var(--results-heart);
}

.action-buttons .fa-regular.fa-heart {
    color: var(--results-text-muted);
}

.action-buttons button {
    background-color: #fff;
    color: #475569;
    border: 1px solid var(--results-border-strong);
    box-shadow: var(--results-icon-shadow);
    border-radius: 10px;
}

.action-buttons button:hover {
    background-color: var(--results-bg-row-hover);
    color: var(--results-text);
    border-color: rgba(15, 23, 42, 0.22);
}

/* Icon row: fixed square targets — Bootstrap col-* was shrinking SVGs */
.results-action-icon-row .results-row-action-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.results-action-icon-row .results-row-action-icon i {
    font-size: 1.125rem;
    line-height: 1;
}

/* View CV / Share CV — same tile as favourites (inherits .action-buttons button); sized SVGs */
.results-action-icon-row svg.results-doc-svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
    min-width: 1.375rem;
    min-height: 1.375rem;
    display: block;
    flex-shrink: 0;
}

.action-buttons button svg,
.popup-btns button svg {
    fill: currentColor;
}

.action-buttons a {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

/* Legacy rows without .results-action-icon-row */
.action-buttons > div:not(.results-action-icon-row) > button {
    width: 40px;
    display: flex;
    justify-content: center;
    padding: 5px;
}

.action-buttons > button {
   min-width: 125px;
}

.results-table .table-header-icon {
    margin-top: -3px;
}


.results-table .addresses .address-line span, .results-cards .addresses .address-line span {
    padding-bottom: 10px;
    padding-top: 10px;
}

.results-table .addresses-block {
    margin-top: -10px;
}


    .results-table .additional-addresses-block .address-line span, .results-table .addresses-block .address-line:not(:first-child) span, .results-cards .additional-addresses-block .address-line span, .results-cards .addresses-block .address-line:not(:first-child) span {
        border-top: 1px solid lightgrey;
        width: 100%;
    }


.results-table .primary-address {
    margin-left: -25px;
}

.results-table .additional-addresses-block, .results-cards .additional-addresses-block {
    display: none;
}

.results-table .primary-address {
    align-items: flex-start;
}

.results-cards .primary-address {
    align-items: flex-start;
    justify-content: center;
}

.results-table .primary-address svg {
    width: 19px;
    height: auto;
    padding-top: 12px;
    flex-shrink: 0
}

.results-cards .primary-address svg {
    width: 15px;
    height: auto;
    margin-top: 11px;
}


.results-table .primary-address svg {
    margin-right: 5px;
}

.results-table .addresses a, .results-cards .addresses a {
    color: var(--results-link);
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
    text-decoration: none;
}

.results-table .addresses a:hover {
    color: var(--results-link-hover);
    text-decoration: underline;
}

.results-table td:has(.initials-placeholder) {
    justify-content: flex-start;
    align-items: flex-start !important;
}

.expert-selector {
    margin-top: 19px;
}


.open-map-btn {
    background-color: transparent;
    border: none;
}

.send-request-btn {
    background-color: var(--results-cta-bg);
    color: white;
}

.results-cards .card {
    max-width: 275px;
}

.filters .badge {
    background-color: #475569;
    font-weight: 600;
}

.results-cards .filters-container {
    border-top: 1px solid lightgrey;
    margin-right: -1.5rem;
    margin-left: -1.5rem;
}

.filters-container {
    display: none;
}


.popup-btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.35rem;
    background-color: #fff;
    color: #475569;
    border: 1px solid var(--results-border-strong);
    border-radius: 10px;
    box-shadow: var(--results-icon-shadow);
}

.popup-btns button:hover {
    background-color: var(--results-bg-row-hover);
    color: var(--results-text);
    border-color: rgba(15, 23, 42, 0.22);
}

/* Toolbar text action — same height band as icon buttons */
.popup-btns .clear-results-toolbar {
    min-width: auto;
    min-height: 2.5rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--results-text-muted, #64748b);
    background-color: #fff;
    border: 1px solid var(--results-border-strong);
    border-radius: 10px;
    box-shadow: var(--results-icon-shadow);
}

.popup-btns .clear-results-toolbar:hover {
    color: var(--results-text, #0f172a);
    background-color: var(--results-bg-row-hover, #f1f5f9);
    border-color: rgba(15, 23, 42, 0.22);
}

.search-info {
    justify-content: space-between;
    align-items: flex-end;
}

/* Toolbar: message | bulk CTA | filter icons — outer columns flex equally so CTA sits centered */
.search-info-toolbar {
    justify-content: flex-start !important;
    align-items: center !important;
}

.search-info-message {
    flex: 1 1 0;
    min-width: min(100%, 10rem);
}

.search-info-bulk {
    flex: 0 0 auto;
}

.search-info-actions {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
}

.search-info #dynamicResultMessage,
.search-info #staticResultMessage {
    color: var(--results-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.search-info-bulk #requestSelectedBtn {
    white-space: nowrap;
    max-width: 100%;
}

.clear-btn {
    padding: 0.5rem;
    width: 120px;

}


.clear-btn-container {
    transform: translate3d(-120px, 0px, 0px) !important;
}


.clear-btn-container ul {
   width: 130px !important; 
}

.find-expert-modal-portal#filterModal .results-filters .keyword-filter-item,
.find-expert-modal-portal#filterModal .results-filters .language-filter-item {
    border-radius: 10px;
}

#keyword-filter-container .keyword-filter-item {
    border-color: #5B5B5B;
    color: #5B5B5B;
    border-radius: 5px;
}

#keyword-filter-container .keyword-filter-item:hover {
    background-color: var(--results-bg-row-hover);
}

#keyword-filter-container .keyword-filter-item.active {
    border-color: var(--results-accent);
    background-color: var(--results-accent-soft);
    color: var(--results-text);
    font-weight: bold;
}

#distanceFilterContainer .irs-single {
    background: var(--results-accent);
}

#distanceFilterContainer .irs-bar {
    background: linear-gradient(to bottom, #ffffff 0%, var(--results-accent) 45%, var(--results-accent-hover) 100%);
    border-color: var(--results-accent);
}

/* =========================
         Media Queries
   ========================= */
@media (max-width: 1300px) {
    .send-request-btn {
        font-size: 14px;
    }
}

@media (max-width: 1275px) {
    /* Keep .results-row-action-icon at fixed size; 30% was shrinking View/Share SVGs */
    .action-buttons > div:not(.results-action-icon-row) > button {
        width: 30%;
    }
}

@media (max-width:1200px) {
    .container {
        padding-right: 30px;
        padding-left: 30px;
    }

}

@media (min-width:1101px) {

    /* Hide the legacy kebab "..." dropdown on wide screens (the icon row
       takes its place). The Book Directly dropdown also uses `.dropdown`
       as its wrapper class, so exclude it explicitly — without this it
       was being collateral-hidden along with the kebab. */
    .results-table .action-buttons .dropdown:not(.find-expert-book-directly-dropdown) {
        display: none;
    }


}

    


    @media (max-width:1100px) {
       #resultsContainer {
           margin-top: 20px;
       }

       .search-info {
           align-items: flex-start;
       }
        
        .results-cards {
            display: flex;
        }

        .results-table {
            margin-top: 40px;
            background: none;
            box-shadow: none;
        }

            .results-table thead {
                display: none !important;
            }

            .results-table tbody {
                display: flex;
                gap: 30px;
                justify-content: center;
                flex-wrap: wrap;
                row-gap: 50px;
            }

            #requestSelectedBtn {
                margin-bottom: 50px;
            }

            .results-table .filters:has(.badge) {
                border-top: 1px solid lightgrey;
                padding-top: 20px;
                padding-bottom: 25px;
            }

            .results-table tr {
                display: flex;
                flex-direction: column;
                background: white;
                border-radius: 7px;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                text-align: center;
                width: 270px;
                box-sizing: border-box;

            }

            .results-table tbody tr:hover {
                background-color: #FFFFFF;
            }


            .results-table .action-buttons .dropdown {
                display: flex;
            }

            .results-table .action-buttons > div > button {
                display: none;
            }

            .results-table .action-buttons {
                display: flex;
                flex-direction: row-reverse;
                justify-content: center;
                gap: 5px;
            }

                .results-table .action-buttons a {
                    max-width: 130px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .results-table .action-buttons a, .results-table .action-buttons button {
                    height: 40px;
                }

                /* The Book Now dropdown's location rows are <a> tags, so the
                   generic mobile rules above (max-width:130px, fixed 40px
                   height, centered) were squashing each item's two stacked
                   text lines onto one another. Restore the item's natural
                   multi-line column layout inside the menu. */
                .results-table .action-buttons .find-expert-book-directly-menu .find-expert-book-directly-item {
                    max-width: none;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                }

                /* Keep the popup menu within the narrow card and let it size to
                   its content rather than overflowing the card edges. */
                .results-table .find-expert-book-directly-menu {
                    min-width: 12rem;
                    max-width: calc(100vw - 3rem);
                }


            .results-table tr > td {
                width: 100%;
                padding-right: 30px;
                padding-left: 30px;
            }

            .results-table td {
                border: none;
            }

                .results-table td:has(.initials-placeholder) {
                    position: relative;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--results-bg-header);
                    width: 100%;
                    border-radius: 7px 7px 0 0;
                    height: 55px;
 
                }

                /* Pin the row's select checkbox to the top-right corner of the
                   card header instead of the old negative-margin hack, which
                   flung it outside the card on narrow viewports. */
                .results-table td:has(.initials-placeholder) input {
                    position: absolute;
                    top: 10px;
                    right: 12px;
                    margin: 0;
                    width: 18px;
                    height: 18px;
                }

                .results-table .initials-placeholder {
                    width: 60px;
                    height: 60px;
                    font-size: 22px;
                    margin: 0 0 -50px 0;
                }

            .results-table .name {
                margin-top: 25px;
                font-weight: bold;
                font-size: 18px;
                color: #000000;
                padding-bottom: 3px;
            }

            .results-table .specialty {
                color: #000000;
                padding-top: 0;
                padding-bottom: 5px;
            }

            .results-table .primary-address {
                margin-left: 0;
            }


    }

    @media (min-width:768px) {
        .results-cards .col-md-4 {
            width: 30%;
        }
    }

    @media (max-width:767px) {
        .form-container {
            padding-right: 2.5rem;
            padding-left: 2.5rem;
        }

            #searchResults, .form-container .alert {
                margin-left: 5px;
                margin-right: 5px;
            }
    }


    @media (min-width:576px) and (max-width:767px) {
        .results-cards .col-sm-6 {
            width: 45%;
        }
    }


    @media (max-width:470px) {
        .results-cards .col-12 {
            width: 100%;
        }
    }


/* Dashboard /FindExpert — page scope: CTA tokens + modals match results shell */
.dashboard-find-expert-page {
    --results-cta-bg: #334155;
    --results-cta-hover: #1e293b;
    /* Pin the page wrapper to its own low-numbered stacking context so the
       hero/search card (gradient bg + box-shadow) can never paint above the
       body-portaled `.find-expert-modal-portal` modals during fade-in or
       any other transition where `body.modal-open` is briefly missing. */
    position: relative;
    z-index: 0;
}

/* Table is `display:flex` for layout; tbody must stretch full width so wide “next opening” bleed isn’t clipped. */
.dashboard-find-expert-page .results-table > tbody {
    width: 100%;
}

/* "Next opening" sits in Address(es) but is pinned to the bottom of the shared row height
   and extends left across checkbox/name/specialty (same Bootstrap col fractions: 5/12 overflow from a 4/12-wide cell → -125% / 300%). */
@media (min-width: 1101px) {
    .dashboard-find-expert-page .results-table tbody tr.expert-card.row {
        align-items: stretch;
    }

    .dashboard-find-expert-page .results-table tbody tr.expert-card td.find-expert-addresses-rail {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        min-height: 0;
        overflow: visible;
    }

    .dashboard-find-expert-page .results-table tbody tr.expert-card td.find-expert-addresses-rail > .addresses-rail__main {
        flex: 1 1 auto;
    }

    .dashboard-find-expert-page .results-table tbody tr.expert-card td.find-expert-addresses-rail > .find-expert-next-opening {
        flex: 0 0 auto;
        margin-top: auto;
        padding-top: 0.35rem;
        margin-bottom: 0;
        border-top: none;
        box-sizing: border-box;
        margin-left: -125%;
        width: 300%;
        max-width: none;
    }
}

@media (max-width: 1100px) {
    .dashboard-find-expert-page .results-table tbody tr.expert-card td.find-expert-addresses-rail > .find-expert-next-opening {
        margin-top: 0.6rem;
        padding-top: 0;
        border-top: none;
    }
}

/* Portaled to document.body — use .find-expert-modal-portal (not .dashboard-find-expert-page descendants).
   Extra specificity beats app-shell `body.app-logged-in .main .modal-content` while still nested under .main. */
body.app-logged-in .main .modal.find-expert-modal-portal .modal-content:not(.case-modal),
.find-expert-modal-portal .modal-content:not(.case-modal) {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 42%, #f1f5f9 100%);
    /* Single shadow; app-shell also styles .main .modal-content — avoid double heavy drop shadow */
    box-shadow:
        0 20px 50px -32px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
    overflow: visible;
}

.find-expert-modal-portal .modal-content:not(.case-modal) .modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: transparent;
    padding: 1.25rem 1.5rem;
}

.find-expert-modal-portal .modal-content:not(.case-modal) .modal-body {
    padding: 1.25rem 1.5rem;
}

.find-expert-modal-portal .modal-content:not(.case-modal) .modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1rem 1.5rem 1.25rem;
    background: rgba(248, 250, 252, 0.65);
}

.find-expert-modal-portal .modal-content:not(.case-modal) .modal-title,
.find-expert-modal-portal .modal-content:not(.case-modal) .modal-body > h5 {
    color: var(--results-text);
    font-weight: 600;
}

.find-expert-modal-portal .modal .btn-close {
    opacity: 0.55;
}

.find-expert-modal-portal .modal .btn-close:hover {
    opacity: 0.92;
}

.find-expert-modal-portal .modal .btn-secondary {
    color: var(--results-text-muted);
    border-color: var(--results-border-strong);
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.find-expert-modal-portal .modal .btn-secondary:hover {
    background-color: var(--results-bg-row-hover);
    color: var(--results-text);
    border-color: rgba(15, 23, 42, 0.22);
}

.find-expert-modal-portal .modal .btn-primary {
    background-color: var(--results-cta-bg);
    border-color: var(--results-cta-bg);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.find-expert-modal-portal .modal .btn-primary:hover,
.find-expert-modal-portal .modal .btn-primary:focus {
    background-color: var(--results-cta-hover);
    border-color: var(--results-cta-hover);
    color: #fff;
}

.find-expert-modal-portal .modal .form-control,
.find-expert-modal-portal .modal .form-select {
    border-radius: 12px;
    border: 1.5px solid rgba(15, 23, 42, 0.12);
}

.find-expert-modal-portal .modal .form-control:focus,
.find-expert-modal-portal .modal .form-select:focus {
    border-color: rgba(15, 23, 42, 0.28);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

/* Success modal — body-only content */
.find-expert-modal-portal .dashboard-find-expert-success-modal-inner {
    padding: 1.75rem 1.75rem 2rem !important;
}

.find-expert-modal-portal .dashboard-find-expert-success-modal-inner h5 {
    color: var(--results-text);
    font-weight: 600;
}

/* Map modal — edge-to-edge map, shell around header/footer */
.find-expert-modal-portal#mapModal .modal-body {
    padding: 0;
    background: #e2e8f0;
}

.find-expert-modal-portal#mapModal .modal-body gmp-map {
    display: block;
    min-height: 500px;
}

/* Scrollable filter dialog: constrain height; scroll body so footer stays visible */
.find-expert-modal-portal#filterModal .modal-dialog.modal-dialog-scrollable .modal-content {
    max-height: min(90vh, 720px);
    overflow: hidden;
}

.find-expert-modal-portal#filterModal .modal-dialog.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

/* Dashboard Find Expert — card-style shell around search results (toolbar + table) */
.find-expert-page-inner #resultsContainer.find-expert-results-shell {
    margin-top: 1.75rem;
    padding: 1.5rem clamp(1rem, 2.5vw, 1.85rem) 2rem;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 42%, #f1f5f9 100%);
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow:
        0 24px 60px -28px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

.find-expert-page-inner #resultsContainer.find-expert-results-shell .search-info {
    width: 100%;
}

.find-expert-page-inner #resultsContainer.find-expert-results-shell .results-table.card {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
}

/* Round the outer corners of the results table so they read like a card
   nested inside the 20px shell. The Book Now dropup must still be able
   to escape the table (see the overflow:visible block near the bottom
   of this file), so instead of clipping the whole card we round each
   painted layer individually:
     • thead owns its own grey fill — round its top corners and clip its
       inner content. The header tr uses Bootstrap's .row class, which
       applies negative gutter margins that otherwise let the tr paint
       past the thead's rounded corners.
     • The last expert row's own hover background was painting square
       corners at the bottom; rounding the row itself makes the hover
       fill curve into the bottom corners. The row's border-bottom is
       cleared so the Bootstrap .card border defines a clean bottom edge. */
.find-expert-page-inner #resultsContainer.find-expert-results-shell .results-table.card > thead {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.find-expert-page-inner #resultsContainer.find-expert-results-shell .results-table.card > tbody > tr.expert-card:last-child {
    border-bottom: none;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* Bootstrap's .table puts border-bottom:1px on every <td>, which paints
   a hairline divider just above the rounded bottom corners of the last
   row even after we strip the <tr>'s own border-bottom. Drop the cell
   borders on the last row so the bottom of the table reads clean. */
.find-expert-page-inner #resultsContainer.find-expert-results-shell .results-table.card > tbody > tr.expert-card:last-child > td {
    border-bottom: 0;
}

.find-expert-page-inner #resultsContainer.find-expert-results-shell .text-center {
    align-self: center;
}

.find-expert-page-inner #resultsContainer.find-expert-results-shell > img.w-100 {
    align-self: center;
}

/* =========================
   Find Expert (/Dashboard/FindExpert) — larger hero search
   Scoped to .dashboard-find-expert-search (full SearchForm component)
   ========================= */

.dashboard-find-expert-search {
    margin-top: 0;
    padding-top: 1.25rem;
}

@media (min-width: 992px) {
    .dashboard-find-expert-search {
        padding-top: 1.75rem;
    }
}

.dashboard-find-expert-search #searchPills {
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
}

.dashboard-find-expert-search .find-expert-submit-row {
    margin-top: 0.125rem;
}

/* Search-mode toggle: In-person Assessment / Virtual Assessment / File Review */
.dashboard-find-expert-search .find-expert-mode-toggle {
    font-size: 1.02rem;
    color: #334155;
    font-family: "Mulish", "DM Sans", system-ui, sans-serif;
}

.dashboard-find-expert-search .find-expert-mode-toggle .form-check-input,
.dashboard-find-expert-search .find-expert-mode-toggle .form-check-label {
    cursor: pointer;
}

.dashboard-find-expert-search .find-expert-mode-toggle .form-check-input:checked {
    background-color: var(--app-accent, #ee402b);
    border-color: var(--app-accent, #ee402b);
}

/* Neutral placeholders (global .form-tabs-content uses red-tinted placeholder color) */
.dashboard-find-expert-search .form-tabs-content .select2-container--default textarea::placeholder,
.dashboard-find-expert-search .form-tabs-content .form-container input::placeholder,
.dashboard-find-expert-search .form-tabs-content .select2-search__field::placeholder {
    color: rgba(51, 65, 85, 0.45) !important;
}

/* Multi-select: hide placeholder while focused or dropdown is open; it returns on blur when empty */
.dashboard-find-expert-search .form-tabs-content .select2-container--default.select2-container--focus .select2-search--inline .select2-search__field::placeholder,
.dashboard-find-expert-search .form-tabs-content .select2-container--default.select2-container--open .select2-search--inline .select2-search__field::placeholder,
.dashboard-find-expert-search .form-tabs-content .select2-container--default.select2-container--focus .select2-search--inline textarea.select2-search__field::placeholder,
.dashboard-find-expert-search .form-tabs-content .select2-container--default.select2-container--open .select2-search--inline textarea.select2-search__field::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.dashboard-find-expert-search .form-tabs-content {
    padding: 1.75rem clamp(1rem, 3vw, 2.25rem) 2rem;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 42%, #f1f5f9 100%);
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow:
        0 24px 60px -28px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    min-height: 4.25rem !important;
    padding: 0.45rem 1rem 0.75rem !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
    background-color: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-find-expert-search .form-tabs-content .select2-container .select2-selection--multiple .select2-selection__clear {
    color: rgba(51, 65, 85, 0.5) !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container .select2-selection--multiple .select2-selection__clear:hover {
    color: rgba(30, 41, 59, 0.85) !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: rgba(15, 23, 42, 0.28) !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

/* Select2 4.1 pins __remove position:absolute;left:0 — padding-left on the chip reserves label space */
.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    align-self: flex-start !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 0.35rem 0.45rem !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-search--inline {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: flex-start !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-search--inline .select2-search__field {
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 0.28rem 0.2rem 0.55rem 0.2rem !important;
    height: 2.5rem !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
    font-size: 1.08rem !important;
    font-family: "Mulish", "DM Sans", system-ui, sans-serif !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice {
    position: relative !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
    margin-right: 0.35rem;
    margin-left: 0 !important;
    padding: 0.35rem 0.7rem 0.35rem 2.45rem !important;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.055) !important;
    color: #1c1917 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: rgba(15, 23, 42, 0.09) !important;
    color: #0c0a09 !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0.2rem !important;
    padding-right: 0.1rem !important;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    border: none !important;
    border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 999px 0 0 999px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: rgba(51, 65, 85, 0.65) !important;
    background-color: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.dashboard-find-expert-search .form-tabs-content .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: rgba(15, 23, 42, 0.07) !important;
    color: rgba(30, 41, 59, 0.95) !important;
}

/* Brighter accent gradient (app-shell --app-accent); icon + type scaled up */
.dashboard-find-expert-search .form-tabs-content.form-container .btn.find-expert-search-submit,
.dashboard-find-expert-search .form-tabs-content .btn.find-expert-search-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    height: auto !important;
    min-height: 4.25rem !important;
    border-radius: 16px !important;
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, var(--app-accent, #ee402b) 0%, var(--app-accent-hover, #d63a26) 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 8px 28px var(--app-glow, rgba(238, 64, 43, 0.2)) !important;
    transition: filter 0.15s ease, box-shadow 0.2s ease;
}

.dashboard-find-expert-search .form-tabs-content .btn.find-expert-search-submit .fa-solid {
    font-size: 1.05em !important;
    opacity: 0.95;
}

.dashboard-find-expert-search .form-tabs-content .btn.find-expert-search-submit:hover {
    filter: brightness(1.05);
    color: #fff !important;
    box-shadow: 0 8px 28px var(--app-glow, rgba(238, 64, 43, 0.2)) !important;
}

.dashboard-find-expert-search .form-tabs-content .btn.find-expert-search-submit--below {
    min-height: 3.5rem !important;
    width: 100%;
    max-width: min(100%, 22rem);
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

/* Select2: AttachBody wraps the menu in a span that copies container classes; only that node has .select2-dropdown--below / --above. Round it so the panel isn’t a sharp rectangle. */
.dashboard-find-expert-search > span.select2-container.select2-dropdown--below,
.dashboard-find-expert-search > span.select2-container.select2-dropdown--above {
    z-index: 1060 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin-top: 0.35rem !important;
    box-shadow:
        0 28px 70px -34px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.92) inset !important;
}

/* Public / body-parent fallback when dropdown isn’t under .dashboard-find-expert-search */
body > span.select2-container.select2-dropdown--below,
body > span.select2-container.select2-dropdown--above {
    z-index: 2051 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow:
        0 28px 70px -34px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.92) inset !important;
}

/* Select2 attaches the results panel to body by default — use dropdownParent in SearchForm.js. Inner .select2-dropdown + .find-expert-select2-dropdown covers list styling. */
.dashboard-find-expert-search .select2-container--default.select2-container--open:not(.select2-dropdown--below):not(.select2-dropdown--above) {
    z-index: 1060 !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown,
.select2-dropdown.find-expert-select2-dropdown {
    border-radius: 18px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
    box-shadow:
        0 22px 50px -20px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.85) inset !important;
    overflow: hidden !important;
    margin-top: 0 !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-search--dropdown,
.select2-dropdown.find-expert-select2-dropdown .select2-search--dropdown {
    padding: 0.45rem 0.55rem 0.35rem !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-search--dropdown .select2-search__field,
.select2-dropdown.find-expert-select2-dropdown .select2-search--dropdown .select2-search__field {
    border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 12px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.95rem !important;
    font-family: "Mulish", "DM Sans", system-ui, sans-serif !important;
    color: #1c1917 !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) inset;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.select2-dropdown.find-expert-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(15, 23, 42, 0.28) !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results,
.select2-dropdown.find-expert-select2-dropdown .select2-results {
    padding: 0 !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results > .select2-results__options,
.select2-dropdown.find-expert-select2-dropdown .select2-results > .select2-results__options {
    max-height: 280px !important;
    padding: 0.5rem 0.35rem 0.55rem 0.45rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f8fafc 100%) !important;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(51, 65, 85, 0.35) rgba(15, 23, 42, 0.06);
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__options::-webkit-scrollbar,
.select2-dropdown.find-expert-select2-dropdown .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__options::-webkit-scrollbar-track,
.select2-dropdown.find-expert-select2-dropdown .select2-results__options::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.04);
    border-radius: 10px;
    margin: 6px 0;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb,
.select2-dropdown.find-expert-select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(51, 65, 85, 0.22);
    border-radius: 10px;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover,
.select2-dropdown.find-expert-select2-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: rgba(51, 65, 85, 0.32);
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option {
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    font-family: "Mulish", "DM Sans", system-ui, sans-serif !important;
    padding: 0.58rem 0.95rem !important;
    margin: 0.1rem 0.18rem !important;
    line-height: 1.45 !important;
    color: #292524 !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.01em;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option--selectable,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option--selectable {
    cursor: pointer;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable,
.dashboard-find-expert-search span.select2-dropdown--below .select2-results__option--highlighted.select2-results__option--selectable,
.dashboard-find-expert-search span.select2-dropdown--above .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.09) 0%, rgba(15, 23, 42, 0.04) 100%) !important;
    color: #0c0a09 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset !important;
}

body > span.select2-dropdown--below .select2-results__option--highlighted.select2-results__option--selectable,
body > span.select2-dropdown--above .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.09) 0%, rgba(15, 23, 42, 0.04) 100%) !important;
    color: #0c0a09 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable:active,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable:active {
    background: rgba(15, 23, 42, 0.12) !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option--selected,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option--selected,
.dashboard-find-expert-search span.select2-dropdown--below .select2-results__option--selected,
.dashboard-find-expert-search span.select2-dropdown--above .select2-results__option--selected {
    background-color: rgba(15, 23, 42, 0.065) !important;
    color: #1c1917 !important;
    font-weight: 600 !important;
    border-color: rgba(15, 23, 42, 0.09) !important;
}

body > span.select2-dropdown--below .select2-results__option--selected,
body > span.select2-dropdown--above .select2-results__option--selected {
    background-color: rgba(15, 23, 42, 0.065) !important;
    color: #1c1917 !important;
    font-weight: 600 !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option--selected.select2-results__option--highlighted {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.11) 0%, rgba(15, 23, 42, 0.06) 100%) !important;
    color: #0c0a09 !important;
}

.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__message,
.select2-dropdown.find-expert-select2-dropdown .select2-results__message,
.dashboard-find-expert-search .select2-container--default .select2-dropdown .select2-results__option--disabled,
.select2-dropdown.find-expert-select2-dropdown .select2-results__option--disabled {
    color: rgba(41, 37, 36, 0.55) !important;
    font-weight: 400 !important;
    padding: 0.65rem 1rem !important;
    border: none !important;
}

    /* STYLES FOR A HALF-SIZE SEARCH FORM - ADD PARENT CONTAINER WITH .half-form CLASS */

    .half-form #searchForm {
        display: flex;
        flex-direction: column;
    }

        .half-form #searchForm > div {
            width: auto;
        }

    .half-form .form-container {
        padding: 40px 30px;
    }

    .half-form .alert {
        text-align: center;
        margin: 0 5px;
        width: 100%;
    }


/* =========================
   Find Expert — page hero (logo + heading) lives INSIDE the search card.
   The hero + the SearchForm component are wrapped in `.find-expert-search-card`,
   which now owns the card-chrome (gradient bg, radius, shadow). The inner
   `.form-tabs-content` is stripped of its own chrome so the two elements
   visually read as a single panel.
   ========================= */
.dashboard-find-expert-page .find-expert-search-card {
    margin-top: 1rem;
    padding: 1.75rem clamp(1rem, 3vw, 2.25rem) 1.5rem;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 42%, #f1f5f9 100%);
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow:
        0 24px 60px -28px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

/* Make the inner search component transparent so the card chrome above is the
   only visible panel. Overrides the chrome that .dashboard-find-expert-search
   defines further down in this file (specificity matches with the parent class). */
.dashboard-find-expert-page .find-expert-search-card .dashboard-find-expert-search {
    padding-top: 0.5rem;
}

.dashboard-find-expert-page .find-expert-search-card .dashboard-find-expert-search .form-tabs-content {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.dashboard-find-expert-page .find-expert-hero {
    margin: 0 auto 1rem;
    max-width: 720px;
}

.dashboard-find-expert-page .find-expert-hero__logo {
    height: 56px;
    width: auto;
    max-width: 220px;
    margin: 0 auto 0.85rem;
    display: block;
}

.dashboard-find-expert-page .find-expert-hero__title {
    font-family: "DM Sans", "Mulish", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--results-text, #0f172a);
    margin: 0 0 0.4rem;
}

.dashboard-find-expert-page .find-expert-hero__subtitle {
    font-family: "Mulish", "DM Sans", sans-serif;
    font-size: 1rem;
    color: var(--results-text-muted, #64748b);
    line-height: 1.5;
}

@media (min-width: 992px) {
    .dashboard-find-expert-page .find-expert-search-card {
        margin-top: 1.25rem;
        padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 1.75rem;
    }

    .dashboard-find-expert-page .find-expert-hero__logo {
        height: 64px;
    }
}

/* =========================
   Find Expert — inline collapsible Filters panel (top search card)
   Replaces the old results-area filter modal so filters are discoverable
   and can be set before/with the initial search.
   ========================= */
.dashboard-find-expert-page .find-expert-filters {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Compact pill control (was a full-width input-looking bar). Centered under
   the search CTA, with an accent-tinted icon chip and a count badge. */
.dashboard-find-expert-page .find-expert-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: auto;
    padding: 0.4rem 1.05rem 0.4rem 0.45rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    background: linear-gradient(145deg, #ffffff 0%, #f6f8fb 100%);
    color: var(--results-text, #0f172a);
    font-family: "DM Sans", "Mulish", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease, background-color 0.15s ease;
}

.dashboard-find-expert-page .find-expert-filters__toggle:hover {
    border-color: rgba(15, 23, 42, 0.16);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.dashboard-find-expert-page .find-expert-filters__toggle:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.dashboard-find-expert-page .find-expert-filters__toggle:focus-visible {
    outline: none;
    border-color: var(--app-accent, #ee402b);
    box-shadow: 0 0 0 3px var(--app-accent-soft, rgba(238, 64, 43, 0.18));
}

.dashboard-find-expert-page .find-expert-filters__toggle.is-open {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.16);
}

.dashboard-find-expert-page .find-expert-filters__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--app-accent-soft, rgba(238, 64, 43, 0.12));
    color: var(--app-accent, #ee402b);
}

.dashboard-find-expert-page .find-expert-filters__toggle-text {
    line-height: 1;
}

.dashboard-find-expert-page .find-expert-filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--app-accent, #ee402b) 0%, var(--app-accent-hover, #d63a26) 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px var(--app-glow, rgba(238, 64, 43, 0.28));
}

.dashboard-find-expert-page .find-expert-filters__count[hidden] {
    display: none;
}

.dashboard-find-expert-page .find-expert-filters__chevron {
    flex: 0 0 auto;
    margin-left: 0.1rem;
    color: var(--results-text-muted, #64748b);
    transition: transform 0.2s ease;
}

.dashboard-find-expert-page .find-expert-filters__toggle.is-open .find-expert-filters__chevron {
    transform: rotate(180deg);
}

.dashboard-find-expert-page .find-expert-filters__panel {
    align-self: stretch;
    margin-top: 1rem;
    padding: 1.4rem clamp(1rem, 2.2vw, 1.6rem) 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 18px;
    background: linear-gradient(155deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%);
    box-shadow:
        0 14px 40px -28px rgba(15, 23, 42, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.dashboard-find-expert-page .find-expert-filters__panel[hidden] {
    display: none;
}

/* Slightly more generous vertical rhythm between filter groups. */
.dashboard-find-expert-page .find-expert-filters__panel .results-filters {
    --bs-gutter-y: 1.15rem;
}

.dashboard-find-expert-page .find-expert-filters__label {
    display: block;
    font-family: "DM Sans", "Mulish", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--results-text-muted, #64748b);
    margin-bottom: 0.4rem;
}

.dashboard-find-expert-page .find-expert-filters__input {
    height: 2.85rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 12px;
    border: 1.5px solid rgba(15, 23, 42, 0.12);
    background-color: #fff;
    color: var(--results-text, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-find-expert-page .find-expert-filters__input:focus {
    border-color: var(--app-accent, #ee402b);
    box-shadow: 0 0 0 3px var(--app-accent-soft, rgba(238, 64, 43, 0.14));
    outline: none;
}

/* Checkboxes presented as bordered toggle chips so they read as tappable
   filter controls rather than bare form checkboxes. The whole chip is the
   click target (label wraps the input). */
.dashboard-find-expert-page .find-expert-filters .form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.85rem;
    margin: 0;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dashboard-find-expert-page .find-expert-filters .form-check:hover {
    border-color: rgba(15, 23, 42, 0.2);
    background: var(--results-bg-row-hover, #f8fafc);
}

.dashboard-find-expert-page .find-expert-filters .form-check:has(.form-check-input:checked) {
    border-color: var(--app-accent, #ee402b);
    background: var(--app-accent-soft, rgba(238, 64, 43, 0.07));
}

.dashboard-find-expert-page .find-expert-filters .form-check .form-check-input {
    float: none;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.dashboard-find-expert-page .find-expert-filters .form-check .form-check-label {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--results-text, #0f172a);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.dashboard-find-expert-page .find-expert-filters .form-check-input:checked {
    background-color: var(--app-accent, #ee402b);
    border-color: var(--app-accent, #ee402b);
}

.dashboard-find-expert-page .find-expert-filters .form-check-input:focus {
    border-color: var(--app-accent, #ee402b);
    box-shadow: 0 0 0 3px var(--app-accent-soft, rgba(238, 64, 43, 0.18));
}

.dashboard-find-expert-page .find-expert-filters__dynamic[hidden] {
    display: none;
}

/* Keyword / language chips inside the inline panel. Scoped with the container
   ids so these win over the older `#keyword-filter-container` rule and both
   chip types read as a consistent pill set. */
.dashboard-find-expert-page .find-expert-filters #keyword-filter-container .keyword-filter-item,
.dashboard-find-expert-page .find-expert-filters #language-filter-container .language-filter-item {
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.dashboard-find-expert-page .find-expert-filters__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.dashboard-find-expert-page .find-expert-filters__reset {
    border: 1px solid var(--results-border-strong, rgba(15, 23, 42, 0.14));
    background: #fff;
    color: var(--results-text-muted, #64748b);
    border-radius: 12px;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dashboard-find-expert-page .find-expert-filters__reset:hover {
    color: var(--results-text, #0f172a);
    background: var(--results-bg-row-hover, #f1f5f9);
    border-color: rgba(15, 23, 42, 0.22);
}

/* The ion range slider inside the panel needs a touch of top spacing so the
   "big" skin handle isn't clipped by the label above it. */
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer {
    padding-top: 0.25rem;
}

/* Recolor the green (teal `--results-accent`) bits inside the filters panel to
   the brand red so the distance slider + active keyword chips match the rest
   of the Find Expert page. Scoped overrides only — the global token still
   drives the calmer teal accents in the results table. */
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-single,
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-from,
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-to {
    background: var(--app-accent, #ee402b);
}

.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-bar {
    background: linear-gradient(to bottom, #ffffff 0%, var(--app-accent, #ee402b) 45%, var(--app-accent-hover, #d63a26) 100%);
    border-color: var(--app-accent, #ee402b);
}

/* The "big" skin draws the bubble's down-arrow as a pseudo-element border. */
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-single:before,
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-from:before,
.dashboard-find-expert-page .find-expert-filters #distanceFilterContainer .irs-to:before {
    border-top-color: var(--app-accent, #ee402b);
}

.dashboard-find-expert-page .find-expert-filters #keyword-filter-container .keyword-filter-item.active {
    border-color: var(--app-accent, #ee402b);
    background-color: var(--app-accent-soft, rgba(238, 64, 43, 0.12));
    color: var(--results-text, #0f172a);
}

/* =========================
   Find Expert — results row CTAs (Book Directly + Send Request)
   The action column stacks two equal-width CTAs vertically so both
   actions stay reachable when the row collapses to a card on narrow
   viewports. Spacing here is intentionally tight so adding the Book
   Directly CTA does not noticeably grow the row height vs. the
   single-CTA layout.
   ========================= */
.results-table .action-buttons .results-cta-stack {
    width: 100%;
}

/* Pin both CTAs to a single explicit height so the slate "Book Directly"
   button and the red "Send Request" button visually align as a balanced
   pair regardless of whether one is a <button> (with inline icons) and
   the other an <a>. Flex-centering the content prevents the icons inside
   the Book Directly trigger from nudging its measured height. */
.results-table .action-buttons .results-cta-stack > .btn,
.results-table .action-buttons .results-cta-stack > form > .btn,
.results-table .action-buttons .results-cta-stack > .dropup > .btn,
.results-table .action-buttons .results-cta-stack > .dropdown > .btn {
    width: 100%;
    min-width: 0;
    height: 2.4rem;
    padding: 0 0.7rem;
    font-size: 0.85rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.results-table .action-buttons .results-cta-stack > .dropup,
.results-table .action-buttons .results-cta-stack > .dropdown,
.results-table .action-buttons .results-cta-stack > form {
    width: 100%;
}

/* Brand-aligned "primary" direct-booking CTA. Uses the same slate token
   the dashboard scope sets for --results-cta-bg so it visually
   complements (but doesn't duplicate) the red Send Request button. */
.find-expert-book-directly-cta {
    background: linear-gradient(135deg, var(--results-cta-bg, #334155) 0%, var(--results-cta-hover, #1e293b) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    letter-spacing: 0.02em;
    transition: filter 0.15s ease, box-shadow 0.2s ease;
}

.find-expert-book-directly-cta:hover,
.find-expert-book-directly-cta:focus {
    color: #fff !important;
    filter: brightness(1.08);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
}

/* Applied by the inline JS in _SearchResultsPartial.cshtml when an expert's
   Google Calendar returns no openings inside the 6-month search window.
   The CTA stays in the DOM (so the tooltip on hover can explain why) but
   visually reads as inactive and ignores clicks. We deliberately keep
   `pointer-events: auto` so the Bootstrap tooltip still fires; the JS
   neutralizes click + dropdown-toggle behavior. */
.find-expert-book-directly-cta--unavailable,
.find-expert-book-directly-cta--unavailable:hover,
.find-expert-book-directly-cta--unavailable:focus,
.find-expert-book-directly-cta--unavailable:active {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%) !important;
    color: #f8fafc !important;
    cursor: not-allowed !important;
    opacity: 0.85;
    filter: none !important;
    box-shadow: none !important;
    pointer-events: auto;
}

/* Dropdown picker rendered when the expert has multiple direct-booking
   locations. Rendered via Bootstrap's `.dropup` so the menu opens
   upward (the action cell can clip a downward menu on long lists).
   Wider than Bootstrap's default so a typical address line like
   "55 Avenue Rd, Toronto, ON" fits on one line. */
.find-expert-book-directly-menu {
    min-width: 14rem;
    max-width: 20rem;
    padding: 0.25rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow:
        0 18px 40px -16px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.find-expert-book-directly-menu .dropdown-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-accent);
    padding: 0.35rem 0.7rem 0.3rem;
}

.find-expert-book-directly-item {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    color: var(--results-text, #0f172a);
    white-space: normal;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.find-expert-book-directly-item + .find-expert-book-directly-item {
    margin-top: 0.1rem;
}

.find-expert-book-directly-item:hover,
.find-expert-book-directly-item:focus {
    background-color: var(--results-bg-row-hover, #f1f5f9);
    color: var(--results-text, #0f172a);
}

/* Applied by the inline JS in _SearchResultsPartial.cshtml when a specific
   dropdown location has no openings inside the 6-month search window. The
   row stays in the menu so the tooltip can explain why; the JS strips href,
   suppresses click, and shows the no-availability copy on hover/focus.
   `pointer-events: auto` keeps Bootstrap tooltips firing — the disabled
   look comes from the muted palette + cursor instead. */
.find-expert-book-directly-item--unavailable,
.find-expert-book-directly-item--unavailable:hover,
.find-expert-book-directly-item--unavailable:focus,
.find-expert-book-directly-item--unavailable:active {
    color: var(--results-text-muted, #94a3b8) !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.65;
    pointer-events: auto;
}

.find-expert-book-directly-item--unavailable .find-expert-book-directly-item__location,
.find-expert-book-directly-item--unavailable .find-expert-book-directly-item__address {
    color: inherit !important;
}

.find-expert-book-directly-item__location {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.25;
}

.find-expert-book-directly-item__address {
    font-size: 0.76rem;
    color: var(--results-text-muted, #64748b);
    line-height: 1.3;
    margin-top: 0.05rem;
}

/* Reset the legacy `.action-buttons a { box-shadow }` for items inside the
   direct-booking dropdown so menu rows render flat instead of looking
   like clickable buttons in a dropdown. */
.results-table .action-buttons .find-expert-book-directly-menu .find-expert-book-directly-item {
    box-shadow: none !important;
}

/* The icons row used to be the last row in the action cell. Now that the
   CTA stack lives below it, drop the bottom margin so the spacing is
   driven by the CTA stack's gap and the cell padding alone. */
.results-table .action-buttons .results-action-icon-row {
    margin-bottom: 0.5rem !important;
}

/* When the actions column was col-2, `justify-content: space-between`
   produced a tight icon row. With col-3 the icons are flung apart, which
   reads as visual noise. Right-align the trio on the Find Expert page
   with a fixed gap so they sit horizontally over the CTA stack below,
   matching where the "ACTIONS" column header lives. */
.dashboard-find-expert-page .results-table .action-buttons .results-action-icon-row {
    justify-content: flex-end !important;
    gap: 0.4rem !important;
}

/* Bigger icon buttons on the Find Expert page now that the actions
   column is wider (col-3). The base rule pins them to 2.5rem squares —
   here we bump to 2.9rem with slightly larger glyphs so the trio feels
   substantial rather than floating in extra whitespace.
   --find-expert-cta-row-width below is derived from this trio
   (3 × 2.9rem + 2 × 0.4rem gap = 9.5rem) so the Book Directly /
   Send Request stack lines up exactly with the icon row above. */
.dashboard-find-expert-page .results-table .action-buttons {
    --find-expert-cta-row-width: 9.5rem;
}

.dashboard-find-expert-page .results-table .action-buttons .results-action-icon-row .results-row-action-icon {
    width: 2.9rem;
    height: 2.5rem;
    min-width: 2.9rem;
    min-height: 2.5rem;
}

.dashboard-find-expert-page .results-table .action-buttons .results-action-icon-row .results-row-action-icon i {
    font-size: 1.2rem;
}

.dashboard-find-expert-page .results-table .action-buttons .results-action-icon-row svg.results-doc-svg {
    width: 1.45rem !important;
    height: 1.45rem !important;
    min-width: 1.45rem;
    min-height: 1.45rem;
}

/* Constrain the CTA stack to the same width as the right-aligned icon
   row above (3 icon buttons + 2 gaps) and push it to the right edge of
   the action cell so the entire action column reads as a single
   right-aligned block. The CTAs themselves stay 100%-wide of the stack
   so they visually mirror the icon trio's footprint. */
.dashboard-find-expert-page .results-table .action-buttons .results-cta-stack {
    width: var(--find-expert-cta-row-width);
    margin-left: auto;
    margin-right: 0;
}

/* Drop the CTA text size and tighten horizontal padding so "Book Directly"
   (with its calendar + caret icons) and "Send Request" both fit on a
   single line inside the narrower CTA stack. */
.dashboard-find-expert-page .results-table .action-buttons .results-cta-stack > .btn,
.dashboard-find-expert-page .results-table .action-buttons .results-cta-stack > form > .btn,
.dashboard-find-expert-page .results-table .action-buttons .results-cta-stack > .dropup > .btn,
.dashboard-find-expert-page .results-table .action-buttons .results-cta-stack > .dropdown > .btn {
    font-size: 0.78rem;
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* Trim the cell's own vertical padding so the action column doesn't
   inflate the row height once the CTA stack is added. The address
   column still drives the minimum row height in practice. */
.results-table .action-buttons {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

/* The Book Directly dropup renders its menu inside the action-buttons
   `<td>`. Several ancestors (the table card, tbody, tr, td) inherit
   some form of overflow clipping from the page's app-shell / framework
   CSS which clips the menu when it grows beyond the row height. Force
   every ancestor between the menu and the page-level scroller to allow
   the menu to escape vertically. Scoped to the Find Expert page so the
   public search results layout is untouched. */
.dashboard-find-expert-page #resultsContainer.find-expert-results-shell,
.dashboard-find-expert-page .results-table,
.dashboard-find-expert-page .results-table > tbody,
.dashboard-find-expert-page .results-table > tbody > tr,
.dashboard-find-expert-page .results-table .action-buttons,
.dashboard-find-expert-page .results-table .results-cta-stack,
.dashboard-find-expert-page .results-table .find-expert-book-directly-dropdown {
    overflow: visible !important;
}

/* Lift the open menu above sibling rows / search-info toolbar. Bootstrap
   defaults dropdown-menu to z-index 1000; nudge it well above sticky bars. */
.dashboard-find-expert-page .find-expert-book-directly-menu.show {
    z-index: 1080 !important;
}

/* Avatar column was tightened from col-2 to col-1 so the actions column
   could take that width. The avatar td is `d-flex`, which means the
   checkbox + initials bubble are flex items and default to flex-shrink:1
   — i.e. they get squeezed when the cell is narrow, which on col-1 turns
   the round 50×50 avatar into an oval. Pin both children to their
   declared sizes so the avatar stays a circle. Scoped to the Find Expert
   page so we don't accidentally affect other search-results layouts. */
.dashboard-find-expert-page .results-table td:has(.initials-placeholder) {
    overflow: visible;
}

.dashboard-find-expert-page .results-table .expert-selector,
.dashboard-find-expert-page .results-table .initials-placeholder {
    flex: 0 0 auto;
}

.dashboard-find-expert-page .results-table .initials-placeholder {
    /* Slightly smaller avatar so checkbox + gap + bubble fit inside the
       narrower col-1 cell without overflowing or being squished. */
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
}

/* On narrow viewports the table row becomes a card and `.action-buttons`
   flips to flex-direction: row-reverse. Stop the CTA stack from being
   crushed against the kebab dropdown by keeping it column-wide and
   forcing the two CTAs onto their own row below the kebab. */
@media (max-width: 1100px) {
    .results-table .action-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem;
    }

    .results-table .action-buttons .results-cta-stack {
        width: 100%;
    }

    .results-table .action-buttons .results-cta-stack > .btn,
    .results-table .action-buttons .results-cta-stack > form > .btn,
    .results-table .action-buttons .results-cta-stack > .dropup > .btn,
    .results-table .action-buttons .results-cta-stack > .dropdown > .btn {
        max-width: none;
        width: 100%;
    }
}

/* === Find Expert — mobile card polish (≤1100px) =========================
   The desktop icon trio (Favourite / View CV / Share CV) is forced visible
   via `display: inline-flex !important`, so the legacy mobile design that
   replaced it with a "…" kebab ended up showing BOTH — the kebab just
   duplicated actions already on screen. Drop the redundant kebab on the card
   and centre the icon trio. Also restore real top/bottom breathing room in
   the results shell now that the table header is hidden. */
@media (max-width: 1100px) {
    .dashboard-find-expert-page .results-table .action-buttons .dropdown:not(.find-expert-book-directly-dropdown) {
        display: none !important;
    }

    .dashboard-find-expert-page .results-table .action-buttons .results-action-icon-row {
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.85rem !important;
    }

    /* Centre the Send Request / Book Now CTA stack in the card and keep it to
       a comfortable width instead of stretching edge to edge. */
    .dashboard-find-expert-page .results-table .action-buttons .results-cta-stack {
        width: 100%;
        max-width: 13rem;
        margin-left: auto;
        margin-right: auto;
        align-items: stretch;
    }

    .dashboard-find-expert-page #resultsContainer.find-expert-results-shell {
        padding-top: 1.75rem;
        padding-bottom: 2rem;
    }

    /* The 40px top margin used to clear the (now hidden) table header; it
       only adds dead space above the first card now. */
    .dashboard-find-expert-page .results-table {
        margin-top: 0;
    }
}