/* ───────── static/css/search_results.css ───────── */

/* Ask Clara seam timing — matches homepage */
:root {
    --ai-glow-cycle: 6.8s;
}

@keyframes ai-glow-spin {
    to {
        --aiGlowAngle: 360deg;
    }
}

/* ───────── PAGE WRAPPER (full-page white background, no “card” look) ───────── */
.search-results-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 0 32px;
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* Fallback first: older Safari uses vh; modern browsers use dvh */
    min-height: calc(100vh - var(--site-header-h, 56px));
}

@supports (height: 100dvh) {
    .search-results-page {
        min-height: calc(100dvh - var(--site-header-h, 56px));
    }
}


/* If the site <main> is flex on your theme, allow the page to grow */
main.site-main>.search-results-page {
    flex: 1 1 auto;
}


/* ── FLEX LAYOUT BOOSTER (search-results page parity with AI chat) ── */
main.site-main.search-active {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--site-header-h, 56px));
}

@supports (height: 100dvh) {
    main.site-main.search-active {
        min-height: calc(100dvh - var(--site-header-h, 56px));
    }
}

/* Allow the page shell to actually fill the flex height */
main.site-main.search-active>.search-results-page {
    flex: 1 1 auto;
    min-height: 0;
    /* prevents children from forcing extra page growth */
}

/* Neutralize any page-level gaps so white background “touches” the footer, like AI chat */
body.search-page .homepage-nav,
body.search-page .homepage-header,
body.search-page .site-header {
    margin-bottom: 0 !important;
}

body.search-page .homepage-footer {
    margin-top: 0 !important;
}

/* Keep things tidy horizontally on this page only */
body.search-page,
body.search-page main.site-main {
    overflow-x: hidden;
}


/* ── Legacy vertical filter panel is now retired ── */
.left-column {
    display: none !important;
}



/* Container for Filters, Search Results, and Provider Insights */
.results-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* Aligns the top edges of all columns */
    gap: 20px;
    flex-wrap: nowrap;
    /* Prevent columns from wrapping */
    overflow-x: auto;
    /* Allow horizontal scrolling if viewport is too narrow */
    min-width: 960px;
    /* Force a minimum width to keep three columns side-by-side */
}



/* Style for the Search Bar at the Top */
.results-search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    /* doubled from 20px to separate from the overview */
}


/* ── Search-Bar Styling (match pre_search) ── */
.results-search-bar .search-form {
    width: 100%;
    max-width: 960px;
    /* wider */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Row for AI Assisted + Ask Clara buttons */
.results-search-bar .action-row {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    flex-wrap: wrap;
    /* graceful on narrow widths */
}

/* Remove the auto-centering margin the search button had when stacked */
.results-search-bar .action-row .search-btn {
    margin: 0;
}

/* Slightly lower the search input from the global header */
.results-search-bar {
    margin-top: clamp(10px, 2.0vh, 22px);
}


.results-search-bar .search-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* ── Clara overview paragraph & colored heading spacing ── */
.clara-overview .overview-content p {
    margin-bottom: 1em;
    line-height: 1.6;
}

.clara-overview .overview-content h3,
.clara-overview .overview-content h4 {
    margin: 1em 0 0.5em;
    color: #000000;
    /* distinct blue to stand out from the title */
}


/* ── Ensure the outer wrapper spans full width so child percentages resolve ── */
.results-search-bar .search-box-container {
    width: 100%;
    max-width: 960px;
    /* match .search-form */
    margin: 0 auto;
}

/* (Optional) if you ever need it, you can also explicitly stack the container vertically */
/*
.results-search-bar {
    flex-direction: column;
}
*/


/* ── Search-Bar Styling (match pre_search) ── */
.results-search-bar .search-box {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 56px 16px 18px;
    /* room for mic */
    min-height: 56px;
    border: 1px solid #e5e7eb;
    /* neutral */
    border-radius: 999px;
    /* fully rounded */
    font-size: 1.05rem;
    box-sizing: border-box;
    background: #ffffff;
    color: #0f172a;
    resize: none;
    text-align: left;
    /* modern: left align */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .04),
        0 8px 20px rgba(0, 0, 0, .06);
}

.results-search-bar .search-box:focus {
    border-color: #60a5fa;
    outline: none;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .15),
        0 8px 22px rgba(0, 0, 0, .08);
}

.results-search-bar .search-box::placeholder {
    text-align: left;
    color: #64748b;
    opacity: .9;
}


.results-search-bar .search-box:focus {
    border-color: #0051a8;
    outline: none;
}


.results-search-bar .search-box::placeholder {
    text-align: center;
    color: #999;
}

/* Ensure wrapper positioning matches homepage so the mic overlays correctly */
.results-search-bar .input-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* wider */
    margin: 0 auto;
}


/* Mic icon sits inside the right edge of the input */
.results-search-bar .input-wrapper .mic-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .25s, filter .25s;
}

.results-search-bar .input-wrapper .mic-icon:hover {
    opacity: 1;
}

.results-search-bar .input-wrapper .mic-icon.listening {
    opacity: 1;
    filter: drop-shadow(0 0 4px #007BFF);
}

/* Keep the AI Assisted button centered under the input on every viewport */
.results-search-bar .search-form {
    align-items: center;
    /* center the button under the input */
}

.results-search-bar .search-btn {
    margin: 0 auto;
    /* belt and suspenders */
}

/* Clickable affordance + parity hover/focus with homepage */
.results-search-bar .search-btn {
    cursor: pointer;
    pointer-events: auto;
}

.results-search-bar .search-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 14px 28px rgba(0, 86, 179, .28),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

.results-search-bar .search-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .30),
        0 12px 28px rgba(0, 86, 179, .30),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}


/* --- RESULTS PAGE – wider AI Assisted | Search button --- */
.results-search-bar .search-btn {
    position: relative;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: radial-gradient(120% 160% at 0% 0%, #1a66cc 0%, #0056b3 42%, #004a9b 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow:
        0 10px 24px rgba(0, 86, 179, .22),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .12s ease, box-shadow .25s ease, filter .25s ease;
    margin: 0 auto;
    /* keep centered under input */
}

.results-search-bar .search-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 6px 18px rgba(0, 86, 179, .22),
        inset 0 0 0 rgba(255, 255, 255, 0);
}

/* match homepage button internals */
.results-search-bar .btn-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.results-search-bar .divider {
    display: none !important;
}

.results-search-bar .ai-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    font-weight: 700;
    letter-spacing: .02em;
}

.results-search-bar .btn-text {
    font-weight: 800;
}


.results-search-bar .search-btn .btn-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-search-bar .divider {
    width: 1px;
    height: 1em;
    background: #c2ccdb;
}

.results-search-bar .ai-tag {
    font-weight: 600;
    color: #e0f0ff;
}

.results-search-bar .btn-text {
    font-weight: 600;
}

/* Slightly larger “Search” label inside the AI Assisted button only */
.results-search-bar .search-btn .btn-text {
    font-size: 1.06rem;
    /* subtle bump */
    line-height: 1;
}


/* === Ask Clara CTA (results page) ===================================== */
.ask-clara-cta {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ask-clara-btn {
    --clara-h: 52px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--clara-h);
    padding: 0 20px;
    border-radius: 999px;
    position: relative;
    /* needed for glow seam */
    isolation: isolate;
    /* keep seam layers under content */

    /* Requested visual changes only (animation layers remain unchanged below) */
    background: #ffffff;
    /* white pill */
    color: #0056b3;
    /* blue label */
    border: 2px solid #0056b3;
    /* dark-blue outline */

    box-shadow:
        0 10px 24px rgba(0, 86, 179, .10),
        inset 0 1px 0 rgba(255, 255, 255, .00);
    transition: transform .12s ease, box-shadow .25s ease, filter .25s ease;
    font-weight: 800;
    letter-spacing: .02em;
}


.ask-clara-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 14px 28px rgba(0, 86, 179, .26),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ask-clara-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 6px 18px rgba(0, 86, 179, .18),
        inset 0 0 0 rgba(255, 255, 255, 0);
}

.ask-clara-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .30),
        0 12px 28px rgba(0, 86, 179, .30),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Ask Clara anchor: remove underline (override any global <a> rules) */
.ask-clara-btn,
.ask-clara-btn:hover,
.ask-clara-btn:focus,
.ask-clara-btn:active,
.ask-clara-btn:visited {
    text-decoration: none !important;
}

.ask-clara-btn .ask-clara-label {
    text-decoration: none;
    /* ensure the inner label doesn't inherit any underline */
    border: 0;
    /* guard against any border-based underline styles */
}

/* Ask Clara — AI glow seam (homepage parity) */
.ask-clara-btn {
    isolation: isolate;
}

/* keep effects outside content */
.ask-clara-btn>* {
    position: relative;
    z-index: 1;
}

/* Layer 1: CRISP rotating seam (thin stroke) */
.ask-clara-btn.ai-glow::before {
    content: "";
    position: absolute;
    inset: -1.75px;
    padding: 1.75px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background:
        conic-gradient(from var(--aiGlowAngle, 0deg),
            rgba(1, 238, 252, 0.00) 0%,
            rgba(1, 238, 252, 0.85) 7.5%,
            rgba(0, 17, 227, 0.95) 11.5%,
            rgba(1, 238, 252, 0.55) 16%,
            rgba(1, 238, 252, 0.00) 22%,
            rgba(1, 238, 252, 0.00) 100%);

    /* Hollow ring mask (stroke only) — homepage parity */
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    /* modern */
    -webkit-mask-composite: xor;
    /* Safari fallback */

    animation: ai-glow-spin var(--ai-glow-cycle) linear infinite;
}


/* Layer 2: SOFT halo outside the seam (blurred) */
.ask-clara-btn.ai-glow::after {
    content: "";
    position: absolute;
    inset: -8px;
    padding: 8px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background:
        conic-gradient(from var(--aiGlowAngle, 0deg),
            rgba(1, 238, 252, 0.00) 0%,
            rgba(1, 238, 252, 0.55) 8%,
            rgba(0, 17, 227, 0.45) 12%,
            rgba(1, 238, 252, 0.35) 16%,
            rgba(1, 238, 252, 0.00) 22%,
            rgba(1, 238, 252, 0.00) 100%);

    /* Keep the halo ring-shaped — homepage parity */
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    /* modern */
    -webkit-mask-composite: xor;
    /* Safari fallback */

    filter: blur(10px);
    opacity: .65;
    animation: ai-glow-spin var(--ai-glow-cycle) linear infinite;
}


/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {

    .ask-clara-btn.ai-glow::before,
    .ask-clara-btn.ai-glow::after {
        animation: none;
    }
}


.ask-clara-icon {
    width: 24px;
    /* slightly larger, more visible */
    height: 24px;
    object-fit: contain;
    display: block;
    flex: 0 0 24px;
}

.ask-clara-label {
    line-height: 1;
    font-size: 0.96rem;
    /* prevent oversized text */
    white-space: nowrap;
}



/* Mobile: span full width for comfort */
@media (max-width: 900px) {
    .ask-clara-btn {
        width: 100%;
        justify-content: center;
    }
}




/* AI Insight container – modern outline (no heavy overlay card feel) */
.clara-overview {
    margin: 16px auto;
    max-width: 960px;

    /* gradient outline without a loud fill; keeps page feeling “native” */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #cfe0ff, #e6f2ff) border-box;
    border: 1.5px solid transparent;
    border-radius: 14px;

    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(0, 84, 166, .08);
}

/* Header + pill treatment on “Insight” */
.clara-overview .overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Unified, modern header: AI + Insight share one soft container */
.clara-overview .overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.clara-overview .overview-icon {
    width: 22px;
    /* aligns visually with new title scale */
    height: 22px;
    margin-right: 8px;
}

.clara-overview .overview-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.12rem;
    /* not oversized */
    font-weight: 800;
    color: #0056b3;
    line-height: 1;
    padding: 6px 10px 6px 10px;
    border-radius: 999px;
    background: rgba(0, 86, 179, .06);
    /* shared container */
    border: 1px solid #cfe0ff;
    letter-spacing: .01em;
}

/* “Insight” stands out with a clear border, no heavy fill */
.clara-overview .overview-title .insight-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(#ffffff, #ffffff);
    /* subtle white chip */
    border: 1.5px solid #0056b3;
    color: #0056b3;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
}


.clara-overview .overview-title .insight-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0011e3, #01eefc);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1;
}

/* Blue accent on expand state retained */
.clara-overview .overview-content:not(.collapsed) {
    border-left: 4px solid #007BFF;
    padding-left: 16px;
}



.clara-overview .overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clara-overview .overview-icon {
    width: 24px;
    height: auto;
    margin-right: 8px;
}

.clara-overview .overview-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}

.clara-overview .overview-content.collapsed {
    max-height: 220px;
    /* more comfortable snippet height */
    overflow: hidden;
}

/* Secondary expand/collapse slider under the disclaimer */
.overview-toggle-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 800px;
    margin: 8px auto 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 40%);
    border: 1px solid #d4deef;
    border-radius: 8px;
    color: #0056b3;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.overview-toggle-strip:hover {
    background: linear-gradient(180deg, rgba(230, 242, 255, 0), #f7fbff 40%);
}

.overview-toggle-strip .chevron {
    transition: transform .2s ease;
}

.overview-toggle-strip.open .chevron {
    transform: rotate(180deg);
}



/* ── Blue accent border when Clara’s Overview is expanded ─────────────── */
.clara-overview .overview-content:not(.collapsed) {
    border-left: 4px solid #007BFF;
    /* same blue as the search box */
    padding-left: 16px;
    /* keeps text from touching the line */
}




/* === Blog Matches Scroller (search page) — production safe === */

.blog-matches {
    margin: 12px auto 8px;
    max-width: 960px;
  }
  
  .blog-matches .blog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  
  .blog-matches .blog-scroll-hint {
    font-size: 0.9rem;
    color: #6b7a90;
    user-select: none;
  }
  
  .blog-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 4px 2px 8px;
  }
  
  .blog-scroller:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
    border-radius: 10px;
  }
  
  .blog-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 260px;
    max-width: 360px;
    border-radius: 14px;
    border: 1px solid #e8eef9;
    background: #ffffff;
    padding: 12px 14px;
    box-shadow: 0 8px 18px rgba(0, 84, 166, .06);
  }
  
  .blog-card-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
  }
  
  .blog-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef5ff;
    border: 1px solid #cfe0ff;
    font-weight: 700;
    font-size: 12px;
    color: #0d4cac;
    white-space: nowrap;
  }
  
  .blog-title {
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    color: #0b3d91;
  }
  
  .blog-title:hover,
  .blog-open:hover {
    text-decoration: underline;
  }
  
  .blog-teaser {
    color: #445;
    font-size: .95rem;
    margin: 6px 0 10px;
  }
  
  .blog-open {
    display: inline-block;
    font-weight: 800;
    color: #0056b3;
    text-decoration: none;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    padding: 6px 12px;
    background: linear-gradient(#ffffff, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 86, 179, .06);
  }
  
/* ─────────── Modern Filter Panel (Left Column) ─────────── */
.filter-panel {
    width: 100%;
    background: #f9fafb;
    /* Light gray‐white background */
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
    /* Subtle border */
    transition: transform 0.2s, box-shadow 0.2s;
}

.filter-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.filter-panel-header {
    background-color: #0056b3;
    /* Changed to the new blue */
    color: #ffffff;
    padding: 12px 16px;
    text-align: center;
}

.filter-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}


.filter-panel-body {
    padding: 16px;
}

.filter-group {
    margin-bottom: 16px;
}

.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #e0e7ff;
    /* Very light blue */
    padding: 12px 14px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.filter-group-header:hover {
    background-color: #dbeafe;
    /* Slightly darker on hover */
}

.filter-group-header label {
    font-weight: 500;
    color: #1e3a8a;
    /* Navy‐blue text */
}

.toggle-icon {
    font-weight: 700;
    color: #1e3a8a;
}

.filter-options {
    margin-top: 8px;
    margin-left: 12px;
    max-height: 0;
    /* Collapsed by default */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.filter-options.expanded {
    max-height: 400px;
    /* Enough for checkboxes */
}

.filter-options input {
    margin-right: 6px;
    accent-color: #1e40af;
    /* Modern checkbox color */
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.reset-button,
.apply-button {
    flex: 1;
    padding: 10px 14px;
    font-size: 0.9rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.reset-button {
    background-color: #e5e7eb;
    color: #374151;
}

.reset-button:hover {
    background-color: #d1d5db;
    transform: translateY(-1px);
}

.apply-button {
    background-color: #1e40af;
    color: #ffffff;
}

.apply-button:hover {
    background-color: #1e3a8a;
    transform: translateY(-1px);
}

/* --- Search Results Styles --- */
.search-results {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    box-sizing: border-box;
}

.results-count {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #004aab;
    margin: 0 0 12px 0;
}

/* Light gray strip for the filter area between dividers */
.filter-strip {
    background: #f9fafb;
    /* natural page gray */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    max-width: 960px;
    /* align with search width */
    margin: 8px auto 8px;
    /* centered between the two dividers */
}

/* ===== Optimised result-item layout (no overlap) ===== */
.result-item {
    position: relative;
    padding: 14px 120px 14px 16px;
    /* slightly tighter for density */
    border: 1px solid #e6edf8;
    /* soft card edge */
    border-radius: 10px;
    background: #fff;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    margin-bottom: 10px;
    /* card spacing between rows */
}

.result-item:hover {
    background: #f8fbff;
    border-color: #d2e2ff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* Title link = the only interactive element in the row */
.result-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.result-title-link {
    color: #0056b3;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.result-title-link:hover,
.result-title-link:focus {
    text-decoration: underline;
    border-color: #b6d3ff;
    outline: none;
}


.icons-container {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Views icon is decorative only */
.view-icon {
    cursor: default !important;
    pointer-events: none !important;
    opacity: .8;
}


.icons-container img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.view-count {
    font-size: .85rem;
    color: #555;
}

/* Heart icon — match forum behavior; no hue “sweep” */
.heart-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    cursor: pointer;
    opacity: .6;
    /* Remove filter animation to stop rainbow/pink flash */
    transition: opacity .18s ease, transform .18s ease;
    mix-blend-mode: normal;
    /* prevent background bleed */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.heart-icon:hover,
.heart-icon.favorited {
    opacity: 1;
    /* Lock to the forum’s blue tint instantly (no animated hue) */
    filter: brightness(0) saturate(100%) invert(36%) sepia(97%) saturate(2578%) hue-rotate(194deg) brightness(96%) contrast(106%);
}

.heart-icon:hover {
    transform: translateY(-1px);
}



.result-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: #0056b3;
}

.result-summary {
    margin: 0 0 4px;
    font-size: .95rem;
    line-height: 1.45;
    color: #374151;
}

.result-meta {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: #6b7280;
}

.result-meta .meta-item {
    margin-right: 8px;
}


.result-title {
    margin: 0 0 5px 0;
    color: #007BFF;
}

.result-summary {
    margin: 0;
    color: #555;
}

/* Collapse filter options by default */
.filter-options {
    display: block;
}

/* Left Column: Contains Insurers Section and Filter Panel */
.left-column {
    flex: 0 0 340px;
    /* was 300px – gives long titles room */
    box-sizing: border-box;
    margin-right: 10px;
}



/* Middle Column: Search Results */
.middle-column {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    /* Added to contain absolute children */
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

/* Pagination Links */
.pagination a,
.pagination span.current {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #007BFF;
    border-radius: 4px;
    text-decoration: none;
    color: #007BFF;
}

.pagination span.current {
    background-color: #007BFF;
    color: #fff;
}


/* Highlight Selected Search Result */
.selected-result {
    background-color: #f8f9fa;
    border-left: 5px solid #007BFF;
    padding: 10px;
    transition: all 0.3s ease-in-out;
}

/* Right Column: Provider Insights & Updates */
.right-column {
    flex: 0 0 300px;
    /* Fixed width of 300px */
    box-sizing: border-box;
}

/* ─────────── Modern Provider Insights Panel (Right Column) ─────────── */
.provider-insights-panel {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    margin-top: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.provider-insights-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.provider-insights-header {
    background-color: #0056b3;
    /* New header blue */
    color: #ffffff;
    padding: 12px 16px;
    text-align: center;
}

.provider-insights-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}


.provider-insights-body {
    max-height: 380px;
    /* Fixed height with scroll */
    overflow-y: auto;
    padding: 16px;
}

.insight-topic {
    background: #f0f4ff;
    /* Very light blue */
    border: 1px solid #dde6fc;
    /* Subtle border */
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.insight-topic:hover {
    background-color: #e3ecff;
    /* Slightly deeper blue on hover */
    border-color: #1e3a8a;
    transform: translateY(-1px);
}

.insight-title {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 500;
    color: #1e40af;
}

.insight-snippet {
    margin: 0 0 6px 0;
    font-size: 0. nine rem;
    color: #334155;
    line-height: 1.4;
}

.insight-date {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
}

/* Modal container (background) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal content box */
.modal-content {
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
}

/* Close button */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* --- PDF Header Container: Fixed Header --- */
.pdf-header {
    position: sticky;
    /* Fixed positioning so it always stays at the very top */
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    /* Header height (20px top row + 50px bottom row) */
    background-color: #ffffff;
    /* Solid white background */
    z-index: 1110;
    /* Ensure header is above PDF content */
    border-bottom: 2px solid #007BFF;
    display: flex;
    flex-direction: column;
    /* Stack the two rows vertically */
}

.pdf-header-top {
    height: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px 0 10px;
    /* Added 20px right padding */
}

.pdf-header-bottom {
    height: 50px;
    /* Allocate 50px for the toolbar row */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
}

/* Custom toolbar inside PDF header-bottom (no changes needed) */
.pdf-header-bottom .custom-toolbar {
    display: inline-flex;
    gap: 10px;
    margin: 0;
    /* Ensures no extra spacing */
    justify-content: flex-start;
    text-align: left;
    margin-left: 10px;
    /* New: Shift toolbar buttons slightly to the right */
}

/* Retain your close button styling (remove any order or margin rules previously applied) */
#close-pdf-viewer {
    font-size: 16px;
    border: none;
    background: #007BFF;
    color: white;
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 5px;
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out, background 0.3s ease-in-out;
    align-self: flex-start;
    /* This aligns only the close button to the top */
}

#close-pdf-viewer:hover {
    background: #0056b3;
    opacity: 1;
}


.toolbar-btn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.toolbar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Make the PDF search box sticky so it stays at the top as the user scrolls */
#custom-search-box {
    position: sticky;
    top: 80px;
    z-index: 1120;
    margin: 10px 0;
    /* You can keep or adjust the margin as needed */
    text-align: center;
    /* This retains the centering */
}

/* Style the "Go" button inside the PDF search box for a smaller, modern look */
#custom-search-box button {
    padding: 5px 10px;
    /* Reduced padding for a more compact button */
    font-size: 1em;
    /* Slightly smaller font size */
    border: none;
    background-color: #007BFF;
    /* Primary blue color */
    color: white;
    cursor: pointer;
    border-radius: 4px;
    /* Rounded corners for a modern look */
    transition: background-color 0.3s ease;
}

#custom-search-box button:hover {
    background-color: #0056b3;
    /* Darker blue on hover */
}

/* Share Modal Styles */
#shareModal .modal-content {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
}

#shareModal .share-icons a {
    margin: 0 5px;
}



.panel-divider {
    border: none;
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(90deg,
            transparent,
            #c5d1e4 30%,
            #c5d1e4 70%,
            transparent);
}



/* glow keyframes */
@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 8px #0064d2;
    }

    50% {
        box-shadow: 0 0 16px #0064d2;
    }
}

.btn-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.divider {
    width: 1px;
    height: 1em;
    background: #c2ccdb;
}

.ai-tag {
    font-weight: 600;
    color: #e0f0ff;
}

.btn-text {
    font-weight: 600;
}

/* --- Clara tagline --- */
.clara-tagline {
    text-align: center;
    color: #666;
    font-size: 0.85em;
    margin-top: 12px;
}

.clara-tagline .clara-link {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

/* ── Preview Container (replaces PDF viewer) ── */
.preview-container {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #e0e7f1;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    margin-bottom: 20px;
}

.preview-container.hidden {
    display: none;
}

.close-preview-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1001;
}

.preview-iframe {
    width: 100%;
    height: 75vh;
    border: none;
}


/* ───────── Preview overlay + AI panel  (REV 2 – 2025-05-31) ───────── */
#previewOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#previewOverlay.hidden {
    display: none !important;
}

.preview-window {
    position: relative;
    width: 90vw;
    max-width: 1280px;
    height: 85vh;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
}

.close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1rem;
}

.close-btn:hover {
    background: #c0392b;
}

.preview-content {
    flex: 1;
    display: flex;
    gap: 24px;
    padding: 60px 32px 32px 32px;
    box-sizing: border-box;
    overflow: hidden;
}

.preview-content iframe {
    flex: 2.8;
    border: none;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}


.ai-assistance-preview {
    flex: 1;
    max-width: 340px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f7fcff, #e6f2ff);
    border: 1px solid #e0e7f1;
    border-radius: 6px;
    padding: 16px;
    overflow-y: auto;
}


.ai-assistance-preview .btn-tertiary {
    text-align: left;
    padding: 6px 12px;
    font-size: .9rem;
    background: #fff;
    border: 1px solid #c2ccdb;
    margin-bottom: 6px;
}

.ai-assistance-preview .btn-tertiary:hover {
    background: #cfe1ff;
    border-color: #0064d2;
}

.ai-assistance-preview .panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    color: #0064d2;
    margin-bottom: 12px;
}

.ai-assistance-preview .vertical-divider {
    width: 1px;
    height: 1em;
    background: #c2ccdb;
}

.ai-assistance-preview .ai-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ai-assistance-preview .ai-prompt-text {
    font-size: .95rem;
    color: #304562;
    margin-bottom: 12px;
}

.ai-chat-log {
    margin-top: 12px;
}

.chat-bubble {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .92rem;
    line-height: 1.45;
}

.chat-bubble.user {
    background: #eef5ff;
    border: 1px solid #c6d8ff;
}

.chat-bubble.ai {
    background: #f7fcff;
    border: 1px solid #dce9f9;
}

.clara-name {
    color: #0064d2;
    font-weight: 700;
    margin-right: 6px;
}

.typing {
    display: inline-block;
    height: 12px;
    margin-left: 4px;
}

.typing span {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 1px;
    border-radius: 50%;
    background: #99b4d7;
    animation: blink 1s infinite ease-in-out;
}

.typing span:nth-child(2) {
    animation-delay: .2s;
}

.typing span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes blink {

    0%,
    80% {
        opacity: .2;
    }

    40% {
        opacity: 1;
    }
}

/* ─── AI-assistance prompt list & back button ───────────────────────── */
.ai-prompts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ai-assistance-preview .btn-tertiary {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px 12px;
    font-size: .9rem;
    background: #fff;
    border: 1px solid #c2ccdb;
    border-radius: 4px;
    transition: background .25s, border-color .25s;
}

.ai-assistance-preview .btn-tertiary:hover {
    background: #cfe1ff;
    border-color: #0064d2;
}

.back-btn {
    align-self: flex-start;
    margin: 8px 0 12px 0;
    padding: 4px 10px;
    background: #0064d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .25s;
}

.back-btn:hover {
    background: #004aab;
}

/* ─── AI panel fixes – REV 4 (2025-06-01) ───────────────────────── */
.hidden {
    display: none !important;
}

/* universal helper  */

.back-btn {
    /* stretch full-width like prompt buttons     */
    width: 100%;
    align-self: stretch;
}

.ai-custom-input {
    /* modern input directly under prompt list    */
    width: 100%;
    margin: 8px 0 12px 0;
}

.ai-custom-input input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #007BFF;
    border-radius: 6px;
    font-size: .95rem;
    box-sizing: border-box;
    transition: border-color .25s;
}

.ai-custom-input input:focus {
    border-color: #0051a8;
    outline: none;
}

/* ─── Clara overview heading scaling  (REV 2025-06-02) ───────────── */
.clara-overview .overview-content h1,
.clara-overview .overview-content h2 {
    font-size: 1rem;
    /* smaller than page H2 “Clara Overview”   */
    line-height: 1.35;
    margin: 1em 0 .5em;
}

.clara-overview .overview-content h3,
.clara-overview .overview-content h4,
.clara-overview .overview-content h5,
.clara-overview .overview-content h6 {
    font-size: .95rem;
    /* keeps sub-headings unobtrusive          */
    line-height: 1.35;
    margin: 1em 0 .5em;
}


/* ─── Share button inside preview window ─────────────────────── */
.share-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #0064d2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: .9;
    transition: background .25s, opacity .25s;
}

.share-btn:hover {
    background: #004aab;
    opacity: 1;
}

.share-btn .share-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}


/* ─── Generic modal shell (re-uses existing .modal/.modal-content) ─── */
.modal.hidden {
    display: none !important;
}

/* ─── Fix 1A: prevent top-edge hover cut-off ───────────────────────── */
.search-results {
    /* adds slight breathing-room above first card */
    padding-top: 4px;
}

/* ─── Fix 2A: better Share-modal layout & inline confirmation ─────── */
#shareModal input#shareLink {
    /* perfectly centered, equal gutters */
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin: 0;
    font-size: .9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ─── Share-modal modern look (REV 2025-06-05) ─── */
.modal-title {
    margin: 0 0 16px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0064d2;
    text-align: center;
}

.share-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: .9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.copy-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: #0064d2;
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 4px;
    font-size: .95rem;
    cursor: pointer;
    transition: background .25s, transform .25s;
}

.copy-btn:hover {
    background: #004aab;
    transform: translateY(-2px);
}

/* success notice */
.copy-msg {
    display: block;
    font-size: .9rem;
    color: #27ae60;
    margin-top: 8px;
    opacity: 0;
    transition: opacity .25s;
}

.copy-msg.show {
    opacity: 1;
}

/* ─── Added 2025-06-05 ───────────────────────────────────────────── */

/* 1) long category names wrap cleanly */
.wrap-label {
    display: inline-block;
    max-width: 300px;
    /* fits new 340 px panel */
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
    margin-bottom: 6px;
    /* ← even spacing */
}


/* 2) divider above filter buttons */
.filter-divider {
    border: none;
    height: 2px;
    background: #d4deef;
    margin: 12px 0 16px 0;
}

/* Modern white Visit Clarity Connect button */
.visit-cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #ffffff;
    color: #007BFF !important;
    border: 1px solid #007BFF;
    border-radius: 4px;
    font-size: .9rem;
    text-decoration: none;
    transition: background .25s, color .25s, transform .25s;
}

.visit-cc-btn:hover {
    background: #e9f3ff;
    transform: translateY(-2px);
}

.visit-cc-btn .btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}


/* 4) focus style for QA-panel inputs (matches main search) */
.qa-submit-search-container input:focus,
.qa-submit textarea:focus,
.qa-submit-payer-dropdown select:focus {
    border-color: #0051a8;
    outline: none;
}

.qa-submit-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.qa-submit-buttons button,
.qa-submit-buttons .visit-cc-btn {
    flex: 1 1 auto;
}

/* Provider Insights list – modern look */
.insight-topic {
    padding: 6px 8px;
    margin-bottom: 6px;
    background: #f7fcff;
    border: 1px solid #d4deef;
    border-radius: 4px;
    font-size: .9rem;
    cursor: pointer;
    transition: background .25s, border-color .25s;
}

.insight-topic:hover {
    background: #e6f2ff;
    border-color: #007BFF;
}

/* === MIC WRAPPER – 2025-06-11 (inside-field alignment fix) ============== */
.input-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    /* keeps wrapper same width as the input */
    margin: 0 auto;
    /* centres the whole wrapper */
    display: block;
}

.input-wrapper .search-box {
    padding-right: 52px;
    /* room for the mic */
    margin: 0;
    /* wrapper handles centring now */
}

.input-wrapper .mic-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .25s, filter .25s;
}

.input-wrapper .mic-icon:hover {
    opacity: 1;
}

.input-wrapper .mic-icon.listening {
    opacity: 1;
    filter: drop-shadow(0 0 4px #007BFF);
}

/* ───────── PAGE HEADER (icon + title) ───────── */
.page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
}

/* ─── Keep this page-level header below the global nav/dropdowns ─── */
.page-header {
    position: relative;
    z-index: 1500;
    /* lower than the 7000 site-header */
}

/* ─── NAV DROPDOWNS (search-results page) ─── */
#userDropdown,
#locationDropdown {
    z-index: 7100;
    /* sits cleanly above everything on the page */
}


.page-header .page-icon {
    width: 36px;
    height: auto;
}

.page-header .page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0056b3;
    margin: 0;
}

/* ───────── HORIZONTAL FILTER BAR (REV 2025-06-18) ───────── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 0 4px;
    /* ↓ tighter padding-bottom */
    margin: 8px auto 8px;
    /* ↓ smaller gap under bar  */
    background: transparent;
    /* no white panel           */
}


.filter-item {
    position: relative;
}

.filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #f0f4ff;
    border: 1px solid #c2ccdb;
    border-radius: 20px;
    /* modern pill */
    font-size: .85rem;
    font-weight: 600;
    color: #004aab;
    cursor: pointer;
    transition: background .25s, border-color .25s, transform .2s;
}

/* Instant touch response on mobile */
.filter-label {
    touch-action: manipulation;
}


.filter-label:hover,
.filter-label:focus {
    background: #e1e9ff;
    border-color: #0056b3;
    transform: translateY(-2px);
}

.filter-menu {
    position: absolute;
    top: 100%;
    /* ⬅ removes 4 px gap so cursor never “falls through” */
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #c2ccdb;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    padding: 10px;
    display: none;
    z-index: 900;
}

/* Allow JS to open menus explicitly (works with desktop hover too) */
.filter-item.open .filter-menu {
    display: block;
}


/* Desktop-only hover/focus open (mobile uses JS-controlled .open) */
@media (min-width: 901px) {

    .filter-item:hover .filter-menu,
    .filter-item:focus-within .filter-menu,
    .filter-menu:hover {
        display: block;
    }
}


/* ─── divider directly under filter bar ─── */
.filter-bar+.panel-divider {
    margin-top: 8px;
    /*  match 8 px spacing used above   */
}

/* ─── tighten divider under Clara Overview (spacing now 8 px) ─── */
.clara-overview+.panel-divider {
    margin: 8px 0;
}


/* Smooth scroll for any scrollable panels that users interact with */
.qa-policy-dropdown,
.provider-insights-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


.filter-menu label {
    display: block;
    font-size: .85rem;
    padding: 6px 4px;
    color: #304562;
}

.filter-menu input {
    margin-right: 6px;
    accent-color: #1e40af;
}

/* action buttons */
.filter-action {
    padding: 8px 20px;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background .25s, transform .2s;
}

.filter-action.reset {
    background: #eff1f5;
    color: #374151;
}

.filter-action.reset:hover {
    background: #dfe3e9;
    transform: translateY(-2px);
}

.filter-action.apply {
    background: #0056b3;
    color: #ffffff;
}

.filter-action.apply:hover {
    background: #003f7f;
    transform: translateY(-2px);
}



/* --- USER + LOCATION DROPDOWN SHELLS -------------------------------- */
#userDropdown,
#locationDropdown {
    position: absolute;
    top: 100%;
    /* flush to the bottom of the trigger    */
    left: 0;
    width: max-content;
    min-width: 160px;
    max-height: 260px;
    overflow-y: auto;
    border: none;
    border-radius: 4px;
    padding: 4px 0;
    margin: 0;
    /* no extra gap = no hover “glitch”       */

    /* Restored light-blue gradient (identical to forum / policy pages) */
    background: linear-gradient(135deg,
            rgba(0, 123, 255, 0.10),
            rgba(0, 123, 255, 0.05)),
        #ffffff;

    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    list-style: none;
    pointer-events: auto;
    /* dropdown remains clickable             */
}

/* --- LIST ITEMS ----------------------------------------------------- */
#userDropdown li,
#locationDropdown li {
    padding: 2px 8px;
    margin: 0;
    line-height: 1.2;
    font-size: 0.9em;
    color: #1f3a93;
    /* default nav-blue                      */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

#userDropdown li:hover,
#locationDropdown li:hover {
    background-color: #d0eaff;
    /* same hover tone everywhere            */
    color: #007BFF;
}

/* Anchor tags inside the user menu inherit the same look */
#userDropdown li a {
    display: block;
    width: 100%;
    padding: 0;
    text-decoration: none;
    color: inherit;
    font-weight: normal;
}

/* Hide helpers (used by the existing JS) */
#userDropdown.hidden,
#locationDropdown.hidden {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* === Toast notifications (search & forum unified) ===================== */
.notification-modern.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 320px;
    background: #0056b3;
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    z-index: 9999;
    opacity: 1;
    transition: opacity .4s ease;
}

.notification-modern.toast .view-link {
    display: inline-block;
    margin-left: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Results header: full logo + "| Search" (homepage font & color) ===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px auto 16px;
    font-family: 'Inter', sans-serif;
}

.page-header .page-logo {
    height: 60px;
    width: auto;
    display: block;
}

.page-header .page-suffix {
    font-weight: 800;
    font-size: 1.25rem;
    color: #0056b3;
    line-height: 1;
}

@media (max-width:768px) {
    .page-header .page-logo {
        height: 48px;
    }

    .page-header .page-suffix {
        font-size: 1.05rem;
    }
}

/* === Mobile fixes for Search Results layout (2025-08-10) ============== */
@media (max-width: 900px) {

    /* Stack columns and remove the wide desktop canvas */
    .results-content {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        min-width: auto;
        /* override 960px */
        overflow-x: visible;
        /* no horizontal scroll on mobile */
    }

    /* Make both columns full-width on mobile */
    .middle-column,
    .right-column {
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ensure the results container fits the viewport */
    .search-results {
        max-width: 100%;
        margin: 0;
        /* remove desktop centering that pushes content */
        padding: 0 12px;
        /* light side padding for small screens */
        box-sizing: border-box;
    }

    /* Empty state: always visible and wrapped */
    .no-results,
    .search-results>p {
        width: 100%;
        text-align: center;
        margin: 10px 0 6px;
        padding: 8px 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Result cards: tighten right padding so icons don’t force overflow */
    .result-item {
        padding: 12px 56px 12px 12px;
        /* was 16px 120px 16px 16px */
    }

    .icons-container {
        right: 12px;
        top: 12px;
        gap: 6px;
    }

    /* Wrap long titles/summaries instead of pushing layout horizontally */
    .result-title,
    .result-summary {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Meta row: let it wrap instead of stretching edge-to-edge */
    .result-meta {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Filter bar: keep pills left-aligned and comfortable on mobile */
    .filter-bar {
        justify-content: flex-start;
        padding: 0 12px;
        gap: 8px;
    }

    /* === Mobile inline filter dropdowns (no bottom sheet) ============== */

    /* Keep pills comfortable on mobile (already present above) */
    /* .filter-bar { justify-content: flex-start; padding: 0 12px; gap: 8px; } */

    .filter-menu {
        position: absolute;
        /* inline anchored by default */
        max-width: calc(100vw - 24px);
        max-height: 60vh;
        overflow-x: hidden;
        overflow-y: auto;
        will-change: transform, opacity;
        -webkit-overflow-scrolling: touch;
        /* buttery iOS scroll */
        overscroll-behavior: contain;
        /* prevent page scroll bleed-through */
    }

    /* When JS needs to anchor to the viewport (for perfect clamping),
   we temporarily switch to `position: fixed` with measured left/top. */
    .filter-menu.mobile-pop {
        position: fixed;
        left: 8px;
        /* JS will set exact left/top */
        top: 8px;
        min-width: 220px;
        max-width: min(92vw, 480px);
        max-height: 70vh;
        z-index: 7200;
    }

    /* Mobile override: do NOT keep menus open via hover/focus */
    .filter-item:hover .filter-menu,
    .filter-item:focus-within .filter-menu,
    .filter-menu:hover {
        display: none !important;
    }

    /* Only the explicit .open state shows the menu on mobile */
    .filter-item.open .filter-menu {
        display: block !important;
    }

    /* Subtle open animation */
    .filter-item.open .filter-menu {
        animation: ch-drop-in 140ms ease-out both;
    }

    @keyframes ch-drop-in {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Active pill feedback */
    .filter-item.open .filter-label {
        background: #e1e9ff;
        border-color: #0056b3;
    }

    /* Make sure the results area never clips the floating menu */
    .results-content,
    .search-results {
        overflow: visible;
    }

    /* Page header: ensure logo + suffix stay within the viewport */
    .page-header {
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Provider insights panel stacks below results and fits width */
    .provider-insights-panel {
        margin: 0 12px 12px;
    }
}

/* === Provider Insights: Horizontal News Scroller (providers only) === */
.provider-ticker {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #f7fcff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 0;
    margin: 8px auto 12px;
}

.provider-ticker-track {
    display: inline-flex;
    /* width grows with content */
    gap: 24px;
    white-space: nowrap;
    will-change: transform;
    animation: provider-ticker-scroll 40s linear infinite;
    padding: 0 12px;
}

.provider-ticker:hover .provider-ticker-track,
.provider-ticker:focus-within .provider-ticker-track {
    animation-play-state: paused;
    /* pause on hover/focus */
}

@keyframes provider-ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* content is duplicated in HTML */
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d4deef;
    text-decoration: none;
    color: #1e3a8a;
    line-height: 1;
    transition: background .25s, border-color .25s, transform .2s;
}

.ticker-item:hover {
    background: #e6f2ff;
    border-color: #007BFF;
    transform: translateY(-1px);
}

.ticker-payer {
    font-weight: 700;
    color: #0056b3;
}

.ticker-sep {
    opacity: .6;
}

.ticker-title {
    font-weight: 500;
}

.ticker-date {
    font-size: .8rem;
    color: #64748b;
    margin-left: 4px;
}

.ticker-empty {
    display: inline-block;
    padding: 4px 12px;
    color: #64748b;
}

/* Mobile: reduce gaps to fit narrow screens */
@media (max-width: 900px) {
    .provider-ticker-track {
        gap: 16px;
    }

    .ticker-item {
        padding: 6px 10px;
    }
}