/*
 * ScoreDoc v2 search - component styles ONLY.
 *
 * Loaded solely by /v2 and /v2/search, via ViewData["IncludeSearchV2CSS"].
 *
 * Scoped to the search feature's own class families: .search-*, .suggest-*, .geo-*, .result-banner*,
 * .results-*, .filter*, .drawer-*, .sort-*, .doctor-card*, .rating-*, .stars, .tag*, .empty-state*,
 * .distance-chip, .radius-pill, #pageProgress (plus .active/.open chained onto those).
 *
 * It deliberately contains NO page chrome. The prototype these came from had no theme of its own, so
 * its stylesheets also styled .container, .btn, .navbar, .nav-link, .form-control, .pagination,
 * .hero-*, bare h2/h3/p/span and the footer - importing those broke the header and the grid. The
 * ScoreDoc theme owns all of that and nothing here may redefine it. Bootstrap already provides
 * .visually-hidden, so that is not redefined either.
 *
 * Order matters: the base layer is emitted first and the v2 layer second, matching the order the
 * source loaded them. Reversing it lets base rules override their v2 overrides.
 *
 * Every `rem` became `px` (x16) because this theme sets html { font-size: 62.5% } while the source
 * assumed the 16px default. Left as rem, the whole surface renders at 62.5% scale.
 *
 * When adding a rule, use one of the class families above. A rule targeting a shared class or a bare
 * element is a bug, not a shortcut.
 */

/* Design tokens for the search components, kept under their original names because the rules below
   reference 22 of them. None is read or defined by the ScoreDoc theme, and none collides with --bs-*.
   --primary / --secondary already carry the ScoreDoc brand colours. */
:root {
    --primary: #253863;
    --primary-dark: #1c2a4d;
    --primary-light: #eef0f5;
    --secondary: #469a4d;
    --accent: #469a4d;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --bg: #f0f4f8;
    --bg-card: #ffffff;
    --surface: #f8fafc;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --border: #e2e8f0;
    --border-hover: #cbd5e1;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
    --shadow-primary: 0 4px 20px rgba(37,56,99,.25);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --transition: 0.2s cubic-bezier(.4,0,.2,1);
    --transition-slow: 0.35s cubic-bezier(.4,0,.2,1);
}

/* ---- base component layer ---- */

.search-surface {
    position: relative;
}
.search-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    padding: 10.4px 22.4px;
    font-size: 14.4px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.search-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}
.search-btn:active { transform: none;
}
.search-assist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 0 4px;
    color: rgba(255,255,255,.78);
    font-size: 12.8px;
}
.search-assist-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6.4px;
}
.search-assist-pill {
    display: inline-flex;
    align-items: center;
    padding: 3.2px 10.4px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    letter-spacing: 0.01em;
}
.search-assist-text {
    color: rgba(255,255,255,.66);
    text-align: right;
}
.suggest-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    z-index: 1000;
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}
.suggest-dropdown-inline {
    top: calc(100% + 8px);
}
.suggest-dropdown::-webkit-scrollbar { width: 4px;
}
.suggest-dropdown::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px;
}
.suggest-panel {
    padding: 5.6px 0;
}
.suggest-header {
    padding: 8.8px 16px 5.6px 18.4px;
    font-size: 11.2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(248,250,252,0) 100%);
}
.suggest-item {
    display: flex;
    align-items: center;
    gap: 10.4px;
    padding: 11.2px 16px 11.2px 20px;
    cursor: pointer;
    font-size: 14.4px;
    font-weight: 400;
    color: var(--text-primary);
    background: #fff;
    border: none;
    width: 100%;
    text-align: left;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border);
}
.suggest-item:last-child { border-bottom: none;
}
.suggest-item:hover, .suggest-item.active {
    background: linear-gradient(90deg, var(--primary-light) 0%, #f7fbff 100%);
    color: var(--primary);
}
.suggest-item .suggest-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.suggest-icon-doctor {
    background: #eef0f5;
    color: var(--primary);
}
.suggest-icon-specialty {
    background: #f0fdf4;
    color: var(--success);
}
.suggest-icon-location {
    background: #eff6ff;
    color: #2563eb;
}
.suggest-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.6px;
}
.suggest-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    line-height: 1.2;
}
.suggest-title mark {
    background: rgba(70,154,77,.16);
    color: inherit;
    padding: 0 1.6px;
    border-radius: 3px;
}
.suggest-subtitle {
    font-size: 11.84px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest-meta {
    font-size: 11.52px;
    color: var(--text-muted);
    flex-shrink: 0;
    padding-left: 8px;
}
.suggest-loading {
    display: flex;
    align-items: center;
    gap: 10.4px;
    padding: 13.6px 18.4px 16px;
    color: var(--text-secondary);
    font-size: 14.08px;
}
.suggest-loading-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 14px 0 0 rgba(37,56,99,.35), 28px 0 0 rgba(37,56,99,.18);
    animation: pulse-dot 0.9s ease-in-out infinite;
}
.suggest-footer-action {
    width: calc(100% - 12.8px);
    margin: 6.4px auto 1.6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    padding: 12.8px 15.2px;
    text-align: left;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.suggest-footer-action:hover {
    background: #eef6ff;
    border-color: #bfd5f3;
    transform: translateY(-1px);
}
.suggest-footer-action-empty {
    margin-top: 2.4px;
}
.suggest-footer-label {
    font-size: 12.48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.suggest-footer-query {
    font-size: 14.4px;
    font-weight: 600;
    color: var(--primary);
}
.doctor-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 21.6px;
    text-decoration: none;
    display: block;
    height: 100%;
    position: relative;
    transition: all var(--transition-slow);
    overflow: hidden;
    min-height: calc(100% - 20px);
    margin-bottom: 20px;
}
.doctor-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
    border-radius: 4px 0 0 4px;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition-slow);
}
.doctor-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(37,56,99,.1);
    transform: translateY(-3px);
}
.doctor-card:hover::before {
    transform: scaleY(1);
}
.doctor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17.6px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    border: 2px solid rgba(37,56,99,.15);
}
.doctor-card-header {
    display: flex;
    align-items: flex-start;
    gap: 13.6px;
    margin-bottom: 13.6px;
}
.doctor-card-info { min-width: 0;
}
.doctor-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doctor-credential {
    font-size: 12.48px;
    color: var(--text-muted);
    font-weight: 500;
}
.doctor-specialty-primary {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    font-size: 11.52px;
    font-weight: 600;
    padding: 4px 11.2px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.doctor-specialty-secondary {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-size: 11.2px;
    font-weight: 500;
    padding: 3.2px 9.6px;
    border-radius: var(--radius-full);
    margin: 2.4px 2.4px 2.4px 0;
}
.doctor-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    font-size: 12.8px;
    color: var(--text-secondary);
}
.doctor-meta-item {
    display: flex;
    align-items: center;
    gap: 4.8px;
}
.doctor-meta-item svg {
    flex-shrink: 0;
    opacity: .6;
}
.doctor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5.6px;
    margin-top: 12px;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.2px;
    font-weight: 600;
    padding: 3.2px 8.8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tag-telehealth { background: #d1fae5; color: #065f46;
}
.tag-medicare { background: #dbeafe; color: #1e40af;
}
.tag-clinic { background: #f3e8ff; color: #6b21a8;
}
.results-header {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.results-search-bar {
    flex: 1;
    min-width: 280px;
}
.results-search-chip {
    display: inline-flex;
    align-items: center;
    padding: 4.48px 12.48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 12.48px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
}
.results-search-chip:hover {
    color: var(--primary);
    border-color: #bdd0f0;
    background: #f6faff;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6.4px;
    color: var(--text-secondary);
    font-size: 14.08px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 20px;
    transition: color var(--transition);
}
.back-link:hover { color: var(--primary);
}
.empty-state {
    text-align: center;
    padding: 64px 32px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}
.empty-state-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: .5;
}
.empty-state-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.empty-state-text {
    color: var(--text-secondary);
    font-size: 15.2px;
    margin-bottom: 24px;
}
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .results-header { flex-direction: column; align-items: stretch;
    }
    .search-assist { flex-direction: column; align-items: flex-start;
    }
    .search-assist-text { text-align: left;
    }
}
@media (max-width: 576px) {
    .search-btn { padding: 9.6px 16px; font-size: 13.12px;
    }
    .suggest-item {
        padding-left: 16px;
        padding-right: 13.6px;
    }
    .suggest-meta {
        display: none;
    }
}

@keyframes pulse-dot {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(2px); opacity: .75; }
}

/* ---- v2 layer: overrides the base, so it must come last ---- */

.results-header { position: relative; z-index: 30;
}
.suggest-dropdown { z-index: 1200;
}
.stars {
    display: inline-block;
    position: relative;
    font-family: Arial, sans-serif;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
}
.stars::before { content: "\2605\2605\2605\2605\2605"; color: #e2e8f0;
}
.stars::after {
    content: "\2605\2605\2605\2605\2605"; color: #f59e0b;
    position: absolute; left: 0; top: 0;
    width: calc(var(--rating, 0) / 5 * 100%);
    overflow: hidden; white-space: nowrap;
}
.rating-inline { display: inline-flex; align-items: center; gap: 7.2px; flex-wrap: wrap;
}
.rating-score { font-weight: 700; color: #b45309; font-size: 14.4px;
}
.rating-count { color: var(--text-muted); font-size: 12.8px; font-weight: 500;
}
.rating-badge {
    display: inline-flex; align-items: center; gap: 4.8px;
    background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
    padding: 3.2px 8.8px; border-radius: var(--radius-full);
    font-weight: 700; font-size: 13.12px;
}
.rating-badge .stars { font-size: 11.52px;
}
.rating-none { font-size: 12.48px; color: var(--text-muted);
}
.results-layout { display: grid; grid-template-columns: 264px 1fr; gap: 24px; align-items: start;
}
.filters-sidebar {
    position: sticky; top: 84px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18.4px 20px; box-shadow: var(--shadow-sm);
}
.filters-sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.filters-sidebar-head h3 { font-size: 16px; margin: 0;
}
.filters-clear { font-size: 12.48px; color: var(--danger); text-decoration: none; font-weight: 600;
}
.filter-group { border-top: 1px solid var(--border); padding: 14.4px 0;
}
.filter-group:last-child { padding-bottom: 0;
}
.filter-group-title { font-weight: 700; font-size: 11.84px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 9.6px;
}
.filter-options { display: flex; flex-direction: column; gap: 4.8px;
}
.filter-option {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 14.08px; color: var(--text-secondary); text-decoration: none;
    padding: 4.8px 8px; border-radius: var(--radius-sm); transition: all var(--transition);
}
.filter-option:hover { background: var(--primary-light); color: var(--primary);
}
.filter-option.active { background: var(--primary-light); color: var(--primary); font-weight: 600;
}
.filter-option .fo-count { color: var(--text-muted); font-size: 12.16px;
}
.filter-option.active .fo-count { color: var(--primary);
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 6.4px;
}
.filter-pill {
    font-size: 13.12px; padding: 5.12px 11.2px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
    text-decoration: none; transition: all var(--transition);
}
.filter-pill:hover { border-color: var(--primary); color: var(--primary);
}
.filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary);
}
.sort-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.sort-bar-count { font-size: 15.2px; color: var(--text-secondary);
}
.sort-bar-count strong { color: var(--text-primary);
}
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center;
}
.alternative-results-heading {
    display: flex; align-items: center; gap: 10.4px; flex-wrap: wrap;
    margin: 3.2px 0 16px; padding: 11.2px 14.4px;
    border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
    border-radius: var(--radius-sm); background: #fffbeb;
    color: #78350f; font-size: 13.44px;
}
.alternative-results-kicker {
    color: #92400e; font-size: 12.16px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.matched-location-label {
    display: inline-flex; padding: 1.28px 5.6px;
    border-radius: 999px; background: var(--primary-light);
    color: var(--primary); font-size: 10.56px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
}
.doctor-card-rating { display: flex; align-items: center; gap: 8px; margin: 1.6px 0 5.6px;
}
.doctor-card-footer {
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.doctor-card-cta { font-size: 13.44px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 4.8px;
}
.doctor-card:hover .doctor-card-cta { gap: 8px;
}
.rep-badge {
    display: inline-flex; align-items: center; gap: 4.8px; font-size: 11.84px; font-weight: 700;
    color: var(--secondary); background: #ecfdf5; border: 1px solid #a7f3d0;
    padding: 1.92px 8px; border-radius: var(--radius-full);
}
.filters-toggle { display: none;
}
.rating-summary { display: flex; align-items: center; gap: 16px;
}
.rating-summary-score { font-size: 40px; font-weight: 800; line-height: 1; color: #b45309;
}
.rating-summary-meta .stars { font-size: 17.6px;
}
.satisfaction-bar { height: 8px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; margin-top: 5.6px;
}
.satisfaction-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--success)); border-radius: var(--radius-full);
}
@media (max-width: 860px) {
    .results-layout { grid-template-columns: 1fr;
    }
    .filters-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; margin: 0;
        width: min(340px, 86vw); max-width: none;
        border-radius: 0; border-top: 0; border-bottom: 0; border-left: 0;
        z-index: 1950; overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        display: flex; flex-direction: column;
        padding-bottom: 0;
    }
    .filters-sidebar.open { transform: none; box-shadow: var(--shadow-lg);
    }
    .filters-sidebar .drawer-close { display: inline-flex;
    }
    .filters-sidebar .drawer-footer {
        display: block; position: sticky; bottom: 0; margin-top: auto;
        background: var(--bg-card); border-top: 1px solid var(--border);
        padding: 13.6px 0 16px;
    }
    .filters-toggle {
        display: inline-flex; align-items: center; gap: 6.4px; cursor: pointer;
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
        padding: 8px 14.4px; font-weight: 600; font-size: 14.08px; color: var(--text-primary);
    }
}
.search-duo {
    display: flex; align-items: stretch; gap: 0;
    background: #fff; border-radius: var(--radius-xl);
    transition: box-shadow var(--transition);
}
.search-duo-hero {
    padding: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.search-duo-hero:focus-within {
    box-shadow: 0 8px 40px rgba(0,0,0,.3), 0 0 0 3px rgba(37,56,99,.3);
}
.search-duo-inline {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 4px; box-shadow: var(--shadow-xs);
}
.search-duo-inline:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,56,99,.12);
}
.search-duo-field {
    position: relative; display: flex; align-items: center; gap: 8px;
    flex: 1 1 0; min-width: 0; padding: 0 8px 0 13.6px;
}
.search-duo-what { flex: 1.35 1 0;
}
.search-duo-icon { color: var(--text-muted); flex-shrink: 0; display: flex;
}
.search-duo-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400;
    color: var(--text-primary); padding: 8.8px 0;
}
.search-duo-inline .search-duo-input { font-size: 14.4px; padding: 6.4px 0;
}
.search-duo-input::placeholder { color: var(--text-muted);
}
.search-duo-divider { width: 1px; align-self: stretch; margin: 7.2px 0; background: var(--border); flex-shrink: 0;
}
.search-duo-submit { align-self: center; display: inline-flex; align-items: center; gap: 5.6px;
}
.search-duo-inline .search-duo-submit { padding: 8px 16px; font-size: 13.44px; border-radius: var(--radius-sm);
}
.geo-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all var(--transition);
}
.geo-btn:hover { background: var(--primary-light); color: var(--primary);
}
.geo-btn.geo-btn-busy { animation: geo-spin 1s linear infinite; pointer-events: none;
}
.geo-msg {
    position: absolute; top: calc(100% + 4px); left: 8px; right: 0;
    font-size: 11.84px; color: #b45309; z-index: 5;
}
.search-duo-hero + .search-assist { margin-top: 12px;
}
.search-surface-hero .geo-msg {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm);
    padding: 4px 8.8px; box-shadow: var(--shadow-sm);
}
.results-search-bar .search-surface { flex: 1; min-width: 0;
}
@media (max-width: 640px) {
    .search-duo { flex-direction: column; align-items: stretch; gap: 4px;
    }
    .search-duo-field { padding: 0 8px;
    }
    .search-duo-divider { width: auto; height: 1px; margin: 0 8px; align-self: auto;
    }
    .search-duo-submit { align-self: stretch; justify-content: center; padding: 10.4px 16px;
    }
    .geo-msg { position: static; margin: 0 0 4px;
    }
}
.suggest-item { cursor: pointer;
}
.suggest-icon-recent { background: var(--surface); color: var(--text-muted);
}
.suggest-icon-condition { background: #fef2f2; color: #dc2626;
}
.suggest-icon-symptom { background: #fff7ed; color: #ea580c;
}
.suggest-icon-procedure { background: #f5f3ff; color: #7c3aed;
}
.suggest-title-muted { color: var(--text-muted); font-weight: 500;
}
.suggest-item-clear:hover, .suggest-item-clear.active { color: var(--danger);
}
.result-banner {
    display: flex; align-items: flex-start; gap: 9.6px;
    padding: 11.2px 16px; margin: 5.6px 0 12px;
    border-radius: var(--radius-md); font-size: 14.08px;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
}
.result-banner svg { flex-shrink: 0; margin-top: 2.88px;
}
.result-banner-info {
    background: var(--primary-light); border-color: #c7d2e4; color: var(--primary);
}
.result-banner-warn {
    background: #fffbeb; border-color: #fde68a; color: #92400e;
}
.result-banner-didyoumean {
    background: var(--bg-card); border-style: dashed;
}
.didyoumean-link { color: var(--primary); text-decoration: underline;
}
.didyoumean-link:hover { color: var(--primary-dark);
}
.radius-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 6.4px; margin-bottom: 13.6px;
}
.radius-pills-label { font-size: 13.12px; font-weight: 600; color: var(--text-muted);
}
.doctor-card mark {
    background: rgba(245, 158, 11, .28);
    color: inherit;
    padding: 0;                 
    border-radius: 2px;
}
.distance-chip {
    display: inline-flex; align-items: center; gap: 4.8px;
    font-size: 12.16px; font-weight: 700; color: #2563eb;
    background: #eff6ff; border: 1px solid #bfdbfe;
    padding: 1.92px 8px; border-radius: var(--radius-full);
    white-space: nowrap;
}
#pageProgress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 2050; display: none; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--secondary) 50%, var(--primary) 70%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: page-progress 1.1s linear infinite;
}
#pageProgress.active { display: block;
}
.drawer-close, .drawer-footer { display: none;
}
.drawer-close {
    align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: var(--surface); color: var(--text-secondary);
    cursor: pointer; transition: all var(--transition);
}
.drawer-close:hover { background: var(--primary-light); color: var(--primary);
}
.drawer-backdrop {
    position: fixed; inset: 0; z-index: 1940;
    background: rgba(15, 23, 42, .45);
}
body.drawer-lock { overflow: hidden;
}
.suggest-footer-action[aria-selected="true"] { background: rgba(37, 56, 99, .08);
}

@keyframes geo-spin { to { transform: rotate(360deg); }
}
@keyframes page-progress {
    from { background-position-x: -40%; }
    to   { background-position-x: 140%; }
}


/* ---- autocomplete dropdown must escape the banner's carousel ----
 *
 * Bootstrap sets `.carousel-inner { overflow: hidden }`, and the v2 banner nests the search surface
 * inside the same carousel markup the v1 pages use. The dropdown is position:absolute, so that
 * overflow was clipping it at the banner's bottom edge.
 *
 * These are the only rules here that touch shared classes, and they are keyed on `.sd-search-banner`
 * — a marker class that exists solely on the two v2 banners. v1 carousels keep clipping, which they
 * need for their slide transitions. The v2 banners hold a single, non-sliding item, so making them
 * visible costs nothing.
 */
.sd-search-banner .carousel,
.sd-search-banner .carousel-inner,
.sd-search-banner .carousel-item,
.sd-search-banner .home-slider {
    overflow: visible;
}

/* Above the banner artwork and the section that follows, but below the site header (z-index 99). */
.sd-search-banner .carousel-caption {
    z-index: 5;
}

.sd-search-banner .search-surface {
    position: relative;
    z-index: 20;
}

.suggest-dropdown {
    z-index: 30;
}


/* =====================================================================
   Result-card corrections. Last block in the file, so these win.
   ===================================================================== */

/* ---- 1. Stop stretching cards to equal height ----
 *
 * Bootstrap stretches flex items, so every card in a row grew to match the tallest one, and
 * `.doctor-card-footer { margin-top: auto }` then shoved the footer to that bottom — leaving a large
 * hole inside a sparse card sitting beside a dense one.
 *
 * Cards now size to their own content. Scoped to `.results-main`, which is ours, so no other .row on
 * the site is affected.
 */
.results-main .row {
    align-items: flex-start;
}

.doctor-card-footer {
    margin-top: 12px;
}

/* ---- 2. Specialty pills in the ScoreDoc palette ----
 *
 * The primary pill was a navy-to-green gradient with white text — the heaviest element on an
 * otherwise light card, and unlike anything else in the theme, whose cards are `1px solid #eee` on
 * white. Both pills are now light chips: the primary tinted with the brand navy, the secondary
 * neutral, matching the site's badge language.
 */
.doctor-specialty-primary {
    background: #f0f7ff;
    color: #253863;
    border: 1px solid rgba(37, 56, 99, .18);
    font-weight: 600;
}

.doctor-specialty-secondary {
    background: #fff;
    color: #475569;
    border: 1px solid #e6e9ef;
    font-weight: 500;
}


/* ---- 3. Keep the search hint clear of the banner artwork ----
 *
 * `justify-content: space-between` pushed the hint to the far right of the banner, which is exactly
 * where the theme's floating doctor-rating badges sit — the semi-transparent white text landed on top
 * of them and became unreadable.
 *
 * It now sits immediately after the pills on the left, where the banner is plain, and at a contrast
 * that survives the blue-to-green gradient.
 */
.search-assist {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.search-assist-text {
    text-align: left;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 991px) {
    /* Below the pills once there is no longer room beside them. */
    .search-assist-text {
        flex: 1 0 100%;
    }
}


/* ---- 4. Report link in the card footer ----
 *
 * Replaces the "Reputation: top N%" line. Styled as a quiet secondary action so the primary
 * "View profile" affordance on the right still reads as the main one, in the site's brand green.
 */
.doctor-card-report {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #469a4d;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}

.doctor-card-report:hover,
.doctor-card-report:focus {
    color: #34773a;
    border-bottom-color: #34773a;
}

.doctor-card-report svg {
    flex-shrink: 0;
}


/* ---- 5. Whole-card click target without nesting anchors ----
 *
 * The card was an <a> wrapping everything, which silently broke when the footer gained a "View
 * report" link: HTML forbids an <a> inside an <a>, so the parser closed the card before the footer and
 * the footer rendered outside the card border.
 *
 * The card is now a div with an absolutely-positioned overlay anchor for the profile. Real links in
 * the footer sit above the overlay and work normally.
 */
.doctor-card {
    position: relative;
}

.doctor-card-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* No visual of its own — the card's own hover styling still applies. */
    border-radius: inherit;
}

/* Anything interactive in the card has to sit above the overlay. */
.doctor-card-report,
.doctor-card-footer {
    position: relative;
    z-index: 2;
}

/* The footer is above the overlay, so restore the pass-through for its non-link areas: a click on
   the footer's empty space should still open the profile. */
.doctor-card-footer {
    pointer-events: none;
}

.doctor-card-footer a,
.doctor-card-footer .doctor-card-cta {
    pointer-events: auto;
}