/* ============================================================
   MCP Resource Library
   Tweak the CSS variables below to match your brand.
   ============================================================ */
:root {
    --mcp-primary:       #0089af;
    --mcp-primary-dark:  #2f7396;
    --mcp-primary-tint:  #f4fafc;
    --mcp-video:         #FF0033;
    --mcp-video-dark:    #CC0029;
    --mcp-text:          #6d6e71;
    --mcp-muted:         #999;
    --mcp-border:        #ededed;
    --mcp-surface:       #e5f3f6;
    --mcp-card:          #ffffff;
    --mcp-sidebar-w:     260px;
    --mcp-radius:        5px;
    --mcp-shadow:        0px 0px   #00000070;
    --mcp-shadow-hover:  0px 0px   #00000080;
}
 
/* ---- Root layout ---- */
.mcp-resource-library {
    display: grid;
    grid-template-columns: var(--mcp-sidebar-w) 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 2rem;
    align-items: start;
    font-family: inherit;
    color: var(--mcp-text);
    width: 100%;
    max-width: 1220px;
    padding-bottom: 2rem;
}
 
.mcp-rl-header {
    grid-column: 1 / -1;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.mcp-rl-page-title {
    margin: 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.mcp-rl-sidebar {
    position: sticky;
    top: 2rem;
    background: var(--mcp-surface);
    border-radius: calc(var(--mcp-radius) * 2);
    overflow: hidden;
    border: 1px solid var(--mcp-border);
}
 
.mcp-rl-search-wrap {
    position: relative;
    padding: .875rem .875rem .75rem;
    border-bottom: 1px solid var(--mcp-border);
}
.mcp-rl-search-icon {
    position: absolute;
    left: 1.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    color: var(--mcp-muted);
    pointer-events: none;
}
.mcp-rl-search {
    width: 100%;
    box-sizing: border-box;
    padding: .5625rem .75rem .5625rem 2.25rem;
    font-size: .875rem;
    border: 1px solid var(--mcp-border);
    border-radius: 6px;
    background: #fff;
    color: var(--mcp-text);
    transition: border-color .2s, box-shadow .2s;
}
.mcp-rl-search:focus {
    outline: none;
    border-color: var(--mcp-primary);
    box-shadow: 0 0 0 3px rgba(0,91,170,.1);
}
 
/* Active filter chips */
.mcp-rl-sidebar-active {
    padding: 0 .875rem;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.mcp-rl-sidebar-active:empty { display: none; }
.mcp-active-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .75rem 0 0;
    width: 100%;
}
.mcp-active-filter-tags:empty {
    padding: unset;
}
.mcp-active-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .5rem .2rem .625rem;
    font-size: .6875rem;
    font-weight: 500;
    background: var(--mcp-primary-tint);
    border: 1px solid rgba(0,91,170,.2);
    color: var(--mcp-primary);
    border-radius: 100px;
    max-width: 100%;
}
.mcp-active-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-active-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mcp-primary);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    opacity: .65;
    flex-shrink: 0;
}
.mcp-active-chip button:hover { opacity: 1; }
.mcp-rl-clear-all {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    color: var(--mcp-muted);
    text-decoration: underline;
    padding: .375rem 0 .75rem;
    width: 100%;
    text-align: left;
}
.mcp-rl-clear-all:hover { color: var(--mcp-primary); }
 
/* Filter groups */
.mcp-rl-filters { /*padding: .5rem 0;*/ }
.mcp-filter-group { border-bottom: 1px solid var(--mcp-border); padding: 1rem 0; }
.mcp-filter-group:last-child { border-bottom: none; }
 
.mcp-filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mcp-text);
    text-align: left;
    transition: background .15s;
}
.mcp-filter-group-header:hover { background: var(--mcp-primary-tint); }
.mcp-chevron {
    flex-shrink: 0;
    transition: transform .2s ease;
    color: var(--mcp-primary);
}
.mcp-filter-group--collapsed .mcp-chevron { transform: rotate(-90deg); }
 
.mcp-filter-body {
    overflow: hidden;
    transition: max-height .25s ease;
}
.mcp-filter-group--collapsed .mcp-filter-body { max-height: 0 !important; }
 
.mcp-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 5px 15px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    color: var(--mcp-muted);
    text-align: left;
    transition: background .12s, color .12s;
    position: relative;
    gap: .5rem;

    text-transform: uppercase;
    color: var(--mcp-primary-dark);
    font-size: 12px;
    line-height: 15.6px;
}
/*.mcp-filter-item::before {
    content: '';
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--mcp-border);
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
}*/
.mcp-filter-item:hover { background: var(--mcp-primary-tint); color: var(--mcp-primary); }
.mcp-filter-item:hover::before { border-color: var(--mcp-primary); }
.mcp-filter-item--active { color: var(--mcp-primary); }
/*.mcp-filter-item--active::before { border-color: var(--mcp-primary); }*/

/* Prevent layout shift — bold text reserved via pseudo, visible text stays normal weight */
.mcp-filter-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
}
.mcp-filter-item-label::after {
    content: attr(data-label);
    font-weight: 600;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
}
.mcp-filter-item--active .mcp-filter-item-label { font-weight: 600; }


.mcp-filter-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-filter-item-count {
    font-size: .6875rem;
    color: var(--mcp-muted);
    flex-shrink: 0;
    background: rgba(0,0,0,.06);
    padding: .0625rem .375rem;
    border-radius: 100px;
}
.mcp-filter-item--active .mcp-filter-item-count { background: rgba(0,91,170,.12); color: var(--mcp-primary); }
 
/* ============================================================
   MAIN
   ============================================================ */
.mcp-rl-main { min-width: 0; }
 
.mcp-rl-mobile-toggle { display: none; }
 
.mcp-rl-results-bar {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    min-height: 2rem;
}
.mcp-rl-count-wrap { font-size: .875rem; color: var(--mcp-muted); }
.mcp-rl-count-wrap strong { color: var(--mcp-text); }
 
.mcp-rl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.125rem;
}
 
/* ============================================================
   CARD
   ============================================================ */
.mcp-card {
    background: var(--mcp-card);
    border: 1px solid var(--mcp-border);
    border-radius: var(--mcp-radius);
    box-shadow: var(--mcp-shadow);
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
    overflow: hidden;
}
.mcp-card:hover { box-shadow: var(--mcp-shadow-hover); /*transform: translateY(-2px);*/ }
.mcp-card.mcp-hidden { display: none !important; }

.mcp-card__image-wrap {
    position: relative;
}

/*.mcp-card__meta {
    position: absolute;
    bottom: .625rem;
    left: .625rem;
    right: .625rem;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    z-index: 1;
}
*/
.mcp-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    width: 100%;
    position: relative;
}
.mcp-card__image::after {
    content: "";
    height: 1px;
    background: white;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.mcp-card__image a {
    display: block;
    width: 100%;
    height: 100%;
}
.mcp-card__image a img,
.mcp-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
}

.mcp-card__image--video {
    position: relative;
}

.mcp-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    color: #fff;
    transition: background .2s;
    border: 1px solid #fff;
    border-radius: 100px;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    top: 50%;
    margin-top: -23px;
}

.mcp-card:hover .mcp-card__play {
    background: rgba(0,0,0,.5);
}

.mcp-card__image--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcp-surface);
    color: var(--mcp-primary);
}
 
.mcp-card__meta { display: flex; flex-wrap: wrap; gap: .375rem; padding: .75rem 1rem 0; }
 
.mcp-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 .5625rem;
    border-radius: 50px;
    border: 1px solid;
}
.mcp-type-badge--instructions-for-use, .mcp-type-badge--ifu { background:#fce7f3; color:#831843; border-color:#fce7f3; }
.mcp-type-badge--quick-start-guide, .mcp-type-badge--guide-de-demarrage-rapide { background:#fef3c7; color:#92400e; border-color:#fef3c7; }
.mcp-type-badge--size-guide, .mcp-type-badge--guide-des-tailles { background:#ede9fe; color:#4c1d95; border-color:#ede9fe; }
.mcp-type-badge--info-sheet, .mcp-type-badge--fiche-dinformation { background:#dbeafe; color:#1e40af; border-color:#dbeafe; }
.mcp-type-badge--checklist, .mcp-type-badge--liste-de-controle { background:#d1fae5; color:#065f46; border-color:#d1fae5; }
.mcp-type-badge--brochure, .mcp-type-badge--brochure-fr { background:#ffedd5; color:#9a3412; border-color:#ffedd5; }
.mcp-type-badge--clinical-reference, .mcp-type-badge--reference-clinique { background:#f0fdf4; color:#14532d; border-color:#f0fdf4; }
.mcp-type-badge--video, .mcp-type-badge--video-fr { background:#fee2e2; color:#991b1b; border-color:#fee2e2; }
.mcp-type-badge--document, .mcp-type-badge--document { background:var(--mcp-surface); color:var(--mcp-muted); border-color:var(--mcp-surface); }
 
.mcp-brand-badge {
    font-size: .625rem;
    font-weight: 500;
    padding: .25rem .5625rem;
    border-radius: 50px;
    background: var(--mcp-surface);
    color: var(--mcp-muted);
    border: 2px solid var(--mcp-border);
}
 
.mcp-card__body { flex: 1; padding: .875rem 1rem; }
.mcp-card__title { font-size: .9375rem; font-weight: 600; color: var(--mcp-text); margin: 0 0 .5rem; line-height: 1.4; }
.mcp-card__cats { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.mcp-cat-pill { font-size: .6875rem; padding: .125rem .5rem; border: 1px solid var(--mcp-border); border-radius: 100px; color: var(--mcp-muted); }
.mcp-card__desc { font-size: .8125rem; color: var(--mcp-muted); line-height: 1.55; margin: 0; }
 
.mcp-card__footer { padding: .75rem 1rem; /*border-top: 1px solid var(--mcp-border); background: var(--mcp-surface);*/ }
.mcp-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0.5em 0.7em;
    font-size: .875rem;
    font-weight: 400;
    border-radius: 50px;
    text-decoration: none !important;
    transition: background .15s;
    cursor: pointer;
    border: 1px solid var(--mcp-primary);
    line-height: 1.15;
    color: var(--mcp-primary);
}
.mcp-btn:hover {
    opacity: .8;
}
/*.mcp-btn--download       { color: var(--mcp-primary) !important; border-color: var(--mcp-primary); }
.mcp-btn--download:hover { opacity: .8; }
.mcp-btn--video          { color: var(--mcp-video); border-color: var(--mcp-video); }
.mcp-btn--video:hover    { opacity: .8; }*/
.mcp-btn--unavailable    { font-size: .8125rem; color: var(--mcp-muted); font-style: italic; border-color: transparent; }
 
/* Empty state */
.mcp-rl-empty { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3.5rem 1rem; color: var(--mcp-muted); text-align: center; }
.mcp-rl-empty svg { opacity: .3; }
.mcp-rl-empty p { margin: 0; font-size: .9375rem; }
.mcp-rl-clear-all-empty {
    padding: .5rem 1.25rem;
    border: 2px solid var(--mcp-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: .875rem;
    color: var(--mcp-text);
    transition: border-color .15s;
}
.mcp-rl-clear-all-empty:hover { border-color: var(--mcp-primary); color: var(--mcp-primary); }
 
/* Mobile backdrop */
.mcp-rl-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
.mcp-rl-backdrop--visible { display: block; }
 
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
 
    .mcp-resource-library { grid-template-columns: 1fr; }
 
    .mcp-rl-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: 100;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(-110%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        border: none;
        border-right: 2px solid var(--mcp-border);
        box-shadow: 4px 0 20px rgba(0,0,0,.12);
    }
    .mcp-rl-sidebar--open { transform: translateX(0); }
 
    .mcp-rl-mobile-toggle {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 1rem;
        margin-bottom: 1rem;
        font-size: .875rem;
        font-weight: 500;
        border: 2px solid var(--mcp-border);
        border-radius: 6px;
        background: #fff;
        cursor: pointer;
        color: var(--mcp-text);
        transition: border-color .15s;
    }
    .mcp-rl-mobile-toggle:hover { border-color: var(--mcp-primary); color: var(--mcp-primary); }
 
    .mcp-mobile-filter-count {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 .3rem;
        background: var(--mcp-primary);
        color: #fff;
        font-size: .6875rem;
        font-weight: 700;
        border-radius: 100px;
    }
 
    .mcp-rl-sidebar::before {
        content: '✕  Close Filters';
        display: block;
        padding: 1rem .875rem;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--mcp-muted);
        border-bottom: 2px solid var(--mcp-border);
        cursor: pointer;
    }
 
    .mcp-rl-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
 
@media (max-width: 480px) {
    .mcp-rl-grid { grid-template-columns: 1fr; }
}

.glightbox-clean .gslide-title {
    margin-bottom: 0;
}

/* No Filter Sidebar */
.mcp-resource-library--no-filters {
    grid-template-columns: 1fr;
}

.mcp-resource-library--no-filters .mcp-rl-main {
    margin-left: 0;
    width: 100%;
}

.mcp-resource-library--no-header .mcp-rl-main {
    padding-top: 0;
}