/* ============================================================
   MedAptly Search v1.5 — improved mobile layout
   ============================================================ */
.ma-search-wrapper, .ma-results-page {
    --accent: #00bcd4; --accent-hover: #22e6ff; --accent-dark: #0097a7;
    --navy: #0f172a; --text: #475569; --text-heading: #0f172a;
    --text-light: #64748b; --text-muted: #a3aab4;
    --bg: #ffffff; --bg-alt: #f8fafc; --bg-hover: #f1f5f9;
    --border: #e2e8f0; --border-heavy: #CACCD6;
    --success: #216E2F; --success-bg: #F0F8F1; --error: #E75725;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 12px 0 rgba(0,0,0,0.15);
    --serif: 'Libre Baskerville', Georgia, serif;
    --sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── SEARCH BAR ────────────────────────────── */
.ma-search-wrapper { position: relative; max-width: 600px; margin: 0 auto; font-family: var(--sans); }
.ma-search-bar {
    display: flex; align-items: center; border: 1.5px solid var(--border);
    border-radius: 100px; background: var(--bg); height: 48px; padding: 0 10px; transition: all 200ms ease;
}
.ma-search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,188,212,0.12); }
.ma-search-icon { background: none; border: none; padding: 10px; cursor: pointer; color: var(--accent); display: flex; align-items: center; }
.ma-search-input { flex: 1; border: none; outline: none; font-family: var(--sans); font-size: 16px; color: var(--text-heading); background: transparent; padding: 8px 0; min-width: 0; }
.ma-search-input::placeholder { color: var(--text-muted); font-size: 15px; }
.ma-search-clear { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 10px; }
.ma-results-header { position: relative; max-width: 700px; margin: 0 auto 28px; }

/* ── AUTOCOMPLETE ──────────────────────────── */
.ma-autocomplete { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 9999; max-height: 420px; overflow-y: auto; }
.ma-ac-list { list-style: none; margin: 0; padding: 6px 0; }
.ma-ac-list li { margin: 0; padding: 0; }
.ma-ac-link { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; color: var(--text-heading); text-decoration: none; font-family: var(--sans); font-size: 15px; transition: background 150ms; }
.ma-ac-link:hover { background: var(--bg-hover); color: var(--text-heading); text-decoration: none; }
.ma-ac-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 4px; margin-left: 12px; white-space: nowrap; background: var(--bg-alt); color: var(--text-light); }
.ma-type-articles .ma-ac-type { background: #e8f4fd; color: #0052B4; }
.ma-type-news .ma-ac-type { background: #fce8e6; color: #c5221f; }
.ma-type-research .ma-ac-type { background: var(--success-bg); color: var(--success); }
.ma-type-guidelines .ma-ac-type { background: #fef7e0; color: #b05a00; }
.ma-type-presentations .ma-ac-type { background: #f3e8fd; color: #7627bb; }
.ma-type-cases .ma-ac-type { background: #e0f2f1; color: #00695c; }
.ma-type-specialty .ma-ac-type { background: #e0f7fa; color: var(--accent-dark); }

/* ── RESULTS PAGE ──────────────────────────── */
.ma-results-page { max-width: 1200px; margin: 0 auto; padding: 32px 16px; font-family: var(--sans); color: var(--text); }
.ma-results-summary { padding: 16px 0; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.ma-results-summary strong { color: var(--text-heading); font-weight: 600; }
.ma-sum-rng { color: var(--text-light); }
.ma-results-layout { display: flex; gap: 32px; }

/* ── FILTER SIDEBAR ────────────────────────── */
.ma-filters { flex: 0 0 240px; min-width: 240px; }
.ma-fhead { display: none; }
.ma-ftoggle { display: none; }
.ma-fbg { display: none; }

.ma-fgroup { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ma-fgroup:last-child { border-bottom: none; }

.ma-flabel {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--text-light) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ── FILTER ITEMS — black text, proper spacing ── */
.ma-flist { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ma-fi { margin: 0 !important; padding: 0 !important; list-style: none !important; }

.ma-fi a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    color: var(--text-heading) !important;
    text-decoration: none !important;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
    transition: background 200ms ease !important;
    gap: 8px !important;
}

.ma-fi a:hover {
    background: var(--bg-hover) !important;
    color: var(--text-heading) !important;
    text-decoration: none !important;
}

/* Active filter — light teal bg, teal text */
.ma-fi-active a {
    background: #e0f7fa !important;
    color: var(--accent-dark) !important;
    font-weight: 600 !important;
}

/* Filter name — takes remaining space */
.ma-fi-name {
    flex: 1 !important;
    color: inherit !important;
}

/* Count pill — pushed to the right, subtle grey */
.ma-fi-count {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--text-light) !important;
    background: var(--bg-hover) !important;
    padding: 2px 9px !important;
    border-radius: 10px !important;
    min-width: 24px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.ma-fi-active .ma-fi-count {
    background: rgba(0,188,212,0.15) !important;
    color: var(--accent-dark) !important;
}

/* ── RESULTS ───────────────────────────────── */
.ma-results-main { flex: 1; min-width: 0; }
.ma-result-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.ma-result-thumb { flex: 0 0 110px; }
.ma-result-thumb img { width: 110px; height: 82px; object-fit: cover; border-radius: 4px; }
.ma-result-content { flex: 1; min-width: 0; }

.ma-result-type {
    display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
    padding: 3px 10px; border-radius: 4px;
}
.ma-badge-articles { background: #e8f4fd; color: #0052B4; }
.ma-badge-news { background: #fce8e6; color: #c5221f; }
.ma-badge-research { background: var(--success-bg); color: var(--success); }
.ma-badge-guidelines { background: #fef7e0; color: #b05a00; }
.ma-badge-presentations { background: #f3e8fd; color: #7627bb; }
.ma-badge-cases { background: #e0f2f1; color: #00695c; }
.ma-badge-post { background: var(--bg-hover); color: var(--text-light); }

.ma-result-title {
    font-family: var(--serif) !important; font-size: 18px !important; font-weight: 400 !important;
    line-height: 1.35 !important; margin: 0 0 8px !important; padding: 0 !important; color: var(--text-heading) !important;
}
.ma-result-title a { color: var(--text-heading) !important; text-decoration: none !important; }
.ma-result-title a:hover { color: var(--accent) !important; }

.ma-result-excerpt { font-family: var(--sans); font-size: 14px; color: var(--text); line-height: 1.5; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
mark.ma-hl { background: transparent; font-weight: 700; color: var(--accent-dark); }
.ma-result-meta { font-family: var(--sans); font-size: 13px; color: var(--text-light); display: flex; gap: 6px; flex-wrap: wrap; }
.ma-result-meta span + span::before { content: '\00b7'; margin-right: 6px; color: var(--border-heavy); }
.ma-meta-specs { color: var(--accent-dark); }

/* ── PAGINATION ────────────────────────────── */
.ma-pagination { display: flex; justify-content: center; gap: 6px; padding: 32px 0; }
.ma-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); text-decoration: none; font-family: var(--sans); font-size: 14px; transition: all 200ms; }
.ma-pg:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent-dark); text-decoration: none; }
.ma-pg-on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.ma-pg-on:hover { background: var(--accent-dark); color: #fff; }

/* ── LOADING ───────────────────────────────── */
.ma-loading { text-align: center; padding: 48px; color: var(--text-light); font-family: var(--sans); }
.ma-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ma-spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
.ma-no-results { text-align: center; padding: 64px 24px; color: var(--text-light); }
.ma-no-results h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--text-heading); margin: 0 0 8px; }
.ma-no-results p { font-family: var(--sans); font-size: 15px; margin: 0; }
.ma-error { text-align: center; padding: 48px; color: var(--error); }

/* ── DESKTOP ───────────────────────────────── */
@media (min-width: 769px) {
    .ma-search-input { font-size: 18px; }
    .ma-result-title { font-size: 20px !important; }
    .ma-result-excerpt { font-size: 15px; }
    .ma-ftoggle { display: none !important; }
    .ma-fbg { display: none !important; }
    .ma-fhead { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤ 768px) — refreshed v1.5
   All rules use !important to defeat theme overrides.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Page — tighter horizontal padding, breathing room at top */
    .ma-results-page {
        padding: 18px 14px 32px !important;
        max-width: 100% !important;
    }

    /* ── Search bar — taller, rounder, clearer ── */
    .ma-results-header {
        margin: 0 0 18px !important;
        max-width: 100% !important;
    }
    .ma-search-bar {
        height: 52px !important;
        padding: 0 8px 0 4px !important;
        border-radius: 14px !important;
        border-width: 1.5px !important;
        background: var(--bg-alt) !important;
    }
    .ma-search-bar:focus-within {
        background: var(--bg) !important;
    }
    .ma-search-icon {
        padding: 12px !important;
        flex-shrink: 0 !important;
    }
    .ma-search-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    .ma-search-input {
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 10px 4px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    /* Layout — filter becomes a drawer, results stack below header */
    .ma-results-layout { flex-direction: column !important; gap: 0 !important; }

    /* Summary — tighter, smaller */
    .ma-results-summary {
        padding: 10px 0 14px !important;
        font-size: 14px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .ma-sum-rng {
        display: block !important;
        margin-top: 2px !important;
        font-size: 13px !important;
    }

    /* Filters button — full-width, prominent */
    .ma-ftoggle {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 13px 20px !important;
        border: 1.5px solid var(--border) !important;
        border-radius: 12px !important;
        background: var(--bg) !important;
        color: var(--text-heading) !important;
        font-family: var(--sans) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        margin: 0 0 18px !important;
    }
    .ma-ftoggle:hover,
    .ma-ftoggle:active { border-color: var(--accent) !important; background: var(--bg-alt) !important; }
    .ma-ftoggle svg { color: var(--accent) !important; width: 18px !important; height: 18px !important; }
    .ma-fbadge {
        display: none !important;
        background: var(--accent) !important;
        color: #fff !important;
        font-size: 11px !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        margin-left: 4px !important;
    }
    .ma-fbadge:not(:empty) { display: inline-flex !important; align-items: center !important; }

    /* Filter drawer — slide in from right */
    .ma-filters {
        position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 320px !important; max-width: 88vw !important;
        background: var(--bg) !important; z-index: 100001 !important;
        overflow-y: auto !important; padding: 0 18px 32px !important;
        box-shadow: -4px 0 24px rgba(0,0,0,0.15) !important;
        transform: translateX(100%) !important;
        transition: transform 300ms ease !important;
        flex: none !important; min-width: 0 !important;
    }
    .ma-filters.ma-f-open { transform: translateX(0) !important; }

    .ma-fhead {
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        padding: 18px 0 14px !important; border-bottom: 1px solid var(--border) !important;
        margin-bottom: 18px !important;
        position: sticky !important; top: 0 !important; background: var(--bg) !important; z-index: 1 !important;
    }
    .ma-fhead span { font-family: var(--serif) !important; font-size: 20px !important; color: var(--text-heading) !important; }
    .ma-fhead button {
        background: none !important; border: none !important;
        font-size: 32px !important; line-height: 1 !important;
        color: var(--text-light) !important; cursor: pointer !important;
        padding: 0 8px !important;
    }

    .ma-fbg {
        display: none;
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        background: rgba(0,0,0,0.45) !important; z-index: 100000 !important;
    }
    .ma-fbg.ma-fbg-on { display: block !important; }

    /* ── Result items — compact, image on left ── */
    .ma-result-item {
        display: flex !important;
        flex-direction: row !important;
        gap: 14px !important;
        padding: 18px 0 !important;
        align-items: flex-start !important;
    }

    /* Thumbnail — forced small square, theme cannot override */
    .ma-result-thumb {
        flex: 0 0 84px !important;
        width: 84px !important;
        max-width: 84px !important;
    }
    .ma-result-thumb a { display: block !important; width: 84px !important; height: 84px !important; }
    .ma-result-thumb img {
        width: 84px !important;
        height: 84px !important;
        max-width: 84px !important;
        max-height: 84px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        display: block !important;
    }

    /* Content column */
    .ma-result-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .ma-result-type {
        font-size: 10px !important;
        padding: 2px 7px !important;
        margin-bottom: 6px !important;
        letter-spacing: 0.4px !important;
    }
    .ma-result-title {
        font-size: 15.5px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
    }
    .ma-result-excerpt {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 0 0 8px !important;
        -webkit-line-clamp: 2 !important; /* 2 lines on mobile */
    }
    .ma-result-meta {
        font-size: 12px !important;
        gap: 4px !important;
    }

    /* Pagination — tighter */
    .ma-pagination { gap: 4px !important; padding: 24px 0 !important; }
    .ma-pg { min-width: 36px !important; height: 36px !important; padding: 0 10px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 420px) — stack meta on its own line
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .ma-results-page { padding: 14px 12px 28px !important; }

    .ma-result-thumb,
    .ma-result-thumb a,
    .ma-result-thumb img {
        flex: 0 0 72px !important;
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }
    .ma-result-item { gap: 12px !important; padding: 16px 0 !important; }
    .ma-result-title { font-size: 15px !important; }

    .ma-result-meta {
        flex-direction: column !important;
        gap: 2px !important;
    }
    .ma-result-meta span + span::before { content: '' !important; margin: 0 !important; }

    .ma-search-bar { height: 48px !important; }
    .ma-filters { width: 290px !important; }
}