/* _content/mentalease.blazor/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-7k5hclupox] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-7k5hclupox] {
    flex: 1;
}

.sidebar[b-7k5hclupox] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-7k5hclupox] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-7k5hclupox]  a, .top-row[b-7k5hclupox]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-7k5hclupox]  a:hover, .top-row[b-7k5hclupox]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-7k5hclupox]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-7k5hclupox] {
        justify-content: space-between;
    }

    .top-row[b-7k5hclupox]  a, .top-row[b-7k5hclupox]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-7k5hclupox] {
        flex-direction: row;
    }

    .sidebar[b-7k5hclupox] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-7k5hclupox] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-7k5hclupox]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-7k5hclupox], article[b-7k5hclupox] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-7k5hclupox] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-7k5hclupox] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/mentalease.blazor/Components/Pages/Home.razor.rz.scp.css */
/* Wrapper only fades */
.reveal[b-kikqjcmlf7] {
    opacity: 0;
    transition: opacity .6s ease;
}

/* The thing we slide (no transforms) */
.reveal-inner[b-kikqjcmlf7] {
    position: relative; /* enables top/left animation */
    transition: top .6s ease, left .6s ease;
    will-change: top, left;
}

/* Offsets while hidden */
.reveal.from-left:not(.in) > .reveal-inner[b-kikqjcmlf7] {
    left: -48px;
}

.reveal.from-top:not(.in) > .reveal-inner[b-kikqjcmlf7] {
    top: -48px;
}

.reveal.from-bottom:not(.in) > .reveal-inner[b-kikqjcmlf7] {
    top: 48px;
}

/* When revealed */
.reveal.in[b-kikqjcmlf7] {
    opacity: 1;
}

    .reveal.in > .reveal-inner[b-kikqjcmlf7] {
        top: 0;
        left: 0;
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal[b-kikqjcmlf7], .reveal.in[b-kikqjcmlf7] {
        transition: none;
        opacity: 1 !important;
    }

    .reveal-inner[b-kikqjcmlf7] {
        transition: none !important;
        top: 0 !important;
        left: 0 !important;
    }
}


/* ===============================
   Proof of Concept Disclaimer
   =============================== */
.disclaimer-overlay[b-kikqjcmlf7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-kikqjcmlf7 0.4s ease forwards;
}

.disclaimer-modal[b-kikqjcmlf7] {
    background: #fff;
    color: #111;
    border-radius: 16px;
    padding: 2rem 2.2rem;
    max-width: 520px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: slideUp-b-kikqjcmlf7 0.45s ease forwards;
}

    .disclaimer-modal h2[b-kikqjcmlf7] {
        margin-top: 0;
        font-weight: 800;
        color: var(--green, #22c55e);
    }

    .disclaimer-modal p[b-kikqjcmlf7] {
        margin: 0.8rem 0;
        line-height: 1.55;
    }

    .disclaimer-modal .btn[b-kikqjcmlf7] {
        margin-top: 1.2rem;
        background: var(--green, #22c55e);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 0.6rem 1.2rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .disclaimer-modal .btn:hover[b-kikqjcmlf7] {
            background: hsl(147.63deg 72.38% 35%);
        }

/* Animations */
@keyframes fadeIn-b-kikqjcmlf7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-kikqjcmlf7 {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

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


@media (max-width: 600px) {
    .disclaimer-modal[b-kikqjcmlf7] {
        margin: 0 1rem; /* Adds small padding on sides */
        width: calc(100% - 2rem);
        padding: 1.5rem 1.6rem; /* Slightly tighter padding for small screens */
    }
}
/* _content/mentalease.blazor/Components/Pages/Sections/ArticlesCarousel.razor.rz.scp.css */
/* ===== Stage ===== */
.carousel[b-t9ksg2nk8n] {
    position: relative;
    overflow: hidden;
    height: clamp(360px, 45vw, 520px);
    padding-bottom: 44px;
}

/* Slides */
.slide[b-t9ksg2nk8n] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .8s ease, opacity .8s ease;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

    .slide.active[b-t9ksg2nk8n] {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        z-index: 2;
    }

    .slide.leave-to-left[b-t9ksg2nk8n] {
        opacity: 0;
        transform: translateX(-100%);
    }

.first-load[b-t9ksg2nk8n] {
    animation: slideInRight-b-t9ksg2nk8n .8s ease forwards;
}

@keyframes slideInRight-b-t9ksg2nk8n {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ===== Article card ===== */
.article-card[b-t9ksg2nk8n] {
    background: var(--green);
    color: #fff;
    border-radius: var(--radius);
    padding: clamp(1rem, 2.4vw, 1.75rem);
    box-shadow: 0 10px 35px rgba(0,0,0,.12);
    height: 100%;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.article-inner[b-t9ksg2nk8n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: center;
    height: 100%;
}

/* LEFT image */
.img-wrap[b-t9ksg2nk8n] {
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

    .img-wrap img[b-t9ksg2nk8n] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
        transition: transform .8s ease, opacity .8s ease;
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
        background: #eaf6f0;
    }

/* RIGHT text */
.text-wrap[b-t9ksg2nk8n] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
}

.title-row[b-t9ksg2nk8n] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}

.article-title[b-t9ksg2nk8n] {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    margin: 0;
    font-weight: 800;
}

.badge-inline[b-t9ksg2nk8n] {
    font-size: .85rem;
    background: #ffffff26;
    border: 1px solid #ffffff3a;
    color: #fff;
    border-radius: 999px;
    padding: .22rem .6rem;
    white-space: nowrap;
}

.article-snippet[b-t9ksg2nk8n] {
    opacity: .98;
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.55;
    margin: .6rem 0 1rem;
}

.actions .btn[b-t9ksg2nk8n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--green);
    border: 0;
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

    .actions .btn:hover[b-t9ksg2nk8n] {
        background: #f3f3f3;
    }

.slide.active .img-wrap img[b-t9ksg2nk8n] {
    transform: scale(1.0);
}

.slide.active .text-wrap[b-t9ksg2nk8n] {
    animation: textIn-b-t9ksg2nk8n .6s ease both;
}

@keyframes textIn-b-t9ksg2nk8n {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Clamp helpers */
.clamp-2[b-t9ksg2nk8n], .clamp-3[b-t9ksg2nk8n] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2[b-t9ksg2nk8n] {
    -webkit-line-clamp: 2;
}

.clamp-3[b-t9ksg2nk8n] {
    -webkit-line-clamp: 3;
}

/* ===== Dots ===== */
.dots[b-t9ksg2nk8n] {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .4rem;
    z-index: 10;
    pointer-events: auto;
}

.dot[b-t9ksg2nk8n] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d7e7df;
    border: 2px solid #cfe8db;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

    .dot.active[b-t9ksg2nk8n] {
        background: #fff;
        border-color: #fff;
        box-shadow: 0 0 0 3px rgba(0,0,0,.06);
        transform: scale(1.12);
    }

/* ===== Arrows ===== */
.nav-btn[b-t9ksg2nk8n] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.55);
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
    color: hsl(147.63deg 72.38% 34%);
    box-shadow: 0 8px 20px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.6);
    backdrop-filter: saturate(1.2) blur(4px);
    cursor: pointer;
    z-index: 12;
    opacity: .96;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-prev[b-t9ksg2nk8n] {
    left: 18px;
}

.nav-next[b-t9ksg2nk8n] {
    right: 18px;
}

.nav-btn .chev[b-t9ksg2nk8n] {
    width: 22px;
    height: 22px;
    display: block;
}

.nav-btn:hover[b-t9ksg2nk8n] {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.75);
}

.nav-btn:active[b-t9ksg2nk8n] {
    transform: translateY(-50%) scale(.97);
}

.nav-btn:focus-visible[b-t9ksg2nk8n] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(0,0,0,.18);
}

@media (hover:hover) {
    .nav-btn[b-t9ksg2nk8n] {
        opacity: 0;
        pointer-events: none;
    }

    .carousel:hover .nav-btn[b-t9ksg2nk8n] {
        opacity: .96;
        pointer-events: auto;
    }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .article-inner[b-t9ksg2nk8n] {
        grid-template-columns: 1fr;
    }

    .img-wrap[b-t9ksg2nk8n] {
        height: clamp(180px, 40vw, 280px);
    }

        .img-wrap img[b-t9ksg2nk8n] {
            -webkit-mask-image: none;
            mask-image: none;
        }

    .nav-btn[b-t9ksg2nk8n] {
        width: 56px;
        height: 56px;
        top: 50%;
        transform: translateY(-50%);
        opacity: .98;
    }

    .nav-prev[b-t9ksg2nk8n] {
        left: 12px;
    }

    .nav-next[b-t9ksg2nk8n] {
        right: 12px;
    }

    .article-title[b-t9ksg2nk8n] {
        font-size: clamp(1.45rem, 7vw, 1.9rem);
    }

    .article-snippet[b-t9ksg2nk8n] {
        font-size: clamp(.98rem, 3.6vw, 1.06rem);
        margin: .5rem 0 .9rem;
    }

    .carousel[b-t9ksg2nk8n] {
        height: clamp(560px, 82vh, 740px);
        padding-bottom: 56px;
    }

    .img-wrap[b-t9ksg2nk8n] {
        height: clamp(220px, 38vh, 320px);
    }
}

@media (max-width: 600px) {
    .article-card[b-t9ksg2nk8n] {
        width: min(100% - 24px, var(--mobile-card-max, 560px));
        margin-inline: auto;
    }

    .nav-prev[b-t9ksg2nk8n] {
        left: calc(50% - min(var(--mobile-card-max,560px), 100% - 24px)/2 + 8px);
    }

    .nav-next[b-t9ksg2nk8n] {
        right: calc(50% - min(var(--mobile-card-max,560px), 100% - 24px)/2 + 8px);
    }

    .dots[b-t9ksg2nk8n] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(100% - 24px, var(--mobile-card-max,560px));
    }
}

/* ===== iOS safe-area helper ===== */
.nav-btn[b-t9ksg2nk8n] {
    top: 50%;
    transform: translateY(calc(-50% - env(safe-area-inset-top, 0px) / 2));
}

/* =========================
   SKELETON STYLES (scoped)
   ========================= */
@keyframes shimmer-b-t9ksg2nk8n {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.placeholder-wave[b-t9ksg2nk8n] {
    background: linear-gradient(90deg, #eaf3ee 25%, #dbe8e1 50%, #eaf3ee 75%);
    background-size: 200% 100%;
    animation: shimmer-b-t9ksg2nk8n 1.2s linear infinite;
}

/* Image skeleton fills the img area */
.skeleton .img-wrap[b-t9ksg2nk8n] {
    background: none;
}

.img-skeleton[b-t9ksg2nk8n] {
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* Title/badge/desc/button skeletons */
.title-skel[b-t9ksg2nk8n] {
    display: block;
    height: 2.2rem;
    width: 70%;
    border-radius: 8px;
}

.badge-skel[b-t9ksg2nk8n] {
    display: inline-block;
    height: 1.2rem;
    width: 130px;
    border-radius: 999px;
}

.desc-skel[b-t9ksg2nk8n] {
    margin: .6rem 0 1rem;
}

.line-skel[b-t9ksg2nk8n] {
    display: block;
    height: 1rem;
    border-radius: 6px;
    margin-top: .5rem;
}

    .line-skel.line-1[b-t9ksg2nk8n] {
        width: 95%;
    }

    .line-skel.line-2[b-t9ksg2nk8n] {
        width: 88%;
    }

    .line-skel.line-3[b-t9ksg2nk8n] {
        width: 62%;
    }

.btn-skel[b-t9ksg2nk8n] {
    display: inline-block;
    width: 170px;
    height: 42px;
    border-radius: 12px;
}

/* Keep dots/arrows hidden while loading to reduce UI shift */
.hero .carousel:has(.skeleton) .dots[b-t9ksg2nk8n],
.hero .carousel:has(.skeleton) .nav-btn[b-t9ksg2nk8n] {
    display: none;
}


/* ============================================
   HERO full-width fix (remove side gradient gaps)
   ============================================ */

/* Remove the container's max-width/padding for the hero only */
.hero .carousel.container[b-t9ksg2nk8n] {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Force hero background to match the card */
.hero[b-t9ksg2nk8n] {
    background: var(--green); /* or #fff if you want white */
}

    /* Make the card itself fill edge-to-edge */
    .hero .article-card[b-t9ksg2nk8n] {
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Image also flush */
    .hero .img-wrap[b-t9ksg2nk8n] {
        border-radius: 0 !important;
    }



/* Desktop-only: make hero articles taller */
@media (min-width: 901px) {
    .hero .carousel[b-t9ksg2nk8n] {
        /* was: clamp(360px, 45vw, 520px) */
        height: clamp(520px, 44vw, 680px);
    }

    /* optional: keep the left image feeling substantial */
    .hero .img-wrap[b-t9ksg2nk8n] {
        min-height: 360px;
    }
}

/* === ALIGN HERO WITH OTHER SECTIONS (tablet/desktop only) === */
@media (min-width: 768px) {
  /* Stop the full-bleed background strip on larger screens */
  .hero[b-t9ksg2nk8n] { background: transparent; }

  /* Give the hero the same container bounds as the rest */
  .hero .carousel.container[b-t9ksg2nk8n] {
    /* use your site's container; fallback to 1200px with 92vw clamp */
    max-width: var(--container-max, 1200px) !important;
    width: min(var(--container-max, 1200px), 92vw) !important;
    margin-inline: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Restore the rounded card look so edges line up visually */
  .hero .article-card[b-t9ksg2nk8n] {
    border-radius: var(--radius, 18px) !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.12) !important;
    margin: 0 !important;
  }

  .hero .img-wrap[b-t9ksg2nk8n] { border-radius: 14px !important; }

  /* Nudge arrows so they sit just inside the same padding */
  .hero .nav-prev[b-t9ksg2nk8n]  { left: calc(1rem + 8px); }
  .hero .nav-next[b-t9ksg2nk8n]  { right: calc(1rem + 8px); }

  /* Dots centered across the container width */
  .hero .dots[b-t9ksg2nk8n] {
    left: 0; right: 0; transform: none; width: auto;
  }
}
/* === keep your existing mobile rules untouched === */
/* _content/mentalease.blazor/Components/Pages/Sections/CommunityInteractions.razor.rz.scp.css */
:root[b-e6fdwwprz1] {
    --comm-bg: #f5fbf7;
    --card-bg: #fff;
    --accent: #2e7d50;
    --accent-2: #7cc7a1;
    --muted: #5f6b6b;
    --text: #20302b;
    --chip: #edf7f1;
    --chip-active: #cfeee0;
    --chip-border: #bde3d1;
    --ring: rgba(46,125,80,.18);
    --shadow: 0 8px 24px rgba(0,0,0,.06);
    /* Mint panel (match Free Therapy) */
    --mint-75: #ecfaf3;
    --mint-300: #cfeee0;
    /* Tag chips (yellow/brown) */
    --tag-yellow: #fff4bf;
    --tag-yellow-border: #f2dc7a;
    --tag-brown: #5a3e00;
}

/* Section */
.community.section[b-e6fdwwprz1] {
    background: var(--comm-bg);
    padding: clamp(1.25rem,3vw,2rem) 0 clamp(2rem,5vw,3rem);
}

.community .section-head[b-e6fdwwprz1] {
    margin-bottom: .75rem;
}

.community .section-title[b-e6fdwwprz1] {
    margin: 0 0 .25rem;
    font-size: clamp(1.4rem,2.6vw,1.9rem);
    font-weight: 800;
    color: var(--text);
}

.community .section-sub[b-e6fdwwprz1] {
    margin: 0;
    color: var(--muted);
}

/* ========= Mint wrapper ========= */
.community .community-mintwrap[b-e6fdwwprz1] {
    background: var(--mint-75);
    border: 1px solid var(--mint-300);
    border-radius: 22px;
    padding: 14px 16px 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    overflow: hidden;
}

/* Filters row */
.community .filters[b-e6fdwwprz1] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .75rem 0 1.1rem;
    align-items: center;
}

.community .chips[b-e6fdwwprz1] {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.community .chip[b-e6fdwwprz1] {
    appearance: none;
    border: 1px solid var(--chip-border);
    background: var(--chip);
    color: var(--text);
    font-weight: 700;
    padding: .5rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .18s ease, background-color .2s ease, border-color .2s ease;
    box-shadow: 0 0 0 0 rgba(124,199,161,0);
}

    .community .chip:hover[b-e6fdwwprz1] {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(124,199,161,.28), 0 0 0 3px rgba(124,199,161,.18);
    }

    .community .chip:active[b-e6fdwwprz1] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(124,199,161,.3);
    }

    .community .chip.active[b-e6fdwwprz1] {
        background: var(--chip-active);
        border-color: var(--accent-2);
        box-shadow: 0 0 0 3px rgba(124,199,161,.22), 0 8px 22px rgba(124,199,161,.25);
    }

/* Spacer pushes compose to right on desktop */
.community .filters-spacer[b-e6fdwwprz1] {
    flex: 1 1 auto;
}

/* Compose button */
.community .compose .compose-btn[b-e6fdwwprz1] {
    appearance: none;
    border: 1px solid var(--accent-2);
    background: linear-gradient(180deg,#f4fbf7,#e8f7ef);
    padding: .55rem .9rem;
    border-radius: 999px;
    font-weight: 800;
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 3px 0 #b9e4ce;
    transition: transform .06s ease, box-shadow .06s ease;
}

    .community .compose .compose-btn:hover[b-e6fdwwprz1] {
        transform: translateY(-1px);
    }

    .community .compose .compose-btn:active[b-e6fdwwprz1] {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #b9e4ce;
    }

/* Mobile:
   - Put "+ New post" ABOVE filters (first row)
   - Left-align it
*/
@media (max-width: 700px) {
    .community .filters[b-e6fdwwprz1] {
        align-items: flex-start;
    }

    .community .compose[b-e6fdwwprz1] {
        order: -1;
        flex-basis: 100%;
    }

    .community .filters-spacer[b-e6fdwwprz1] {
        order: 0;
        flex-basis: 100%;
        width: 100%;
        height: 0;
    }
}

/* Grid */
.community .post-grid[b-e6fdwwprz1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width:900px) {
    .community .post-grid[b-e6fdwwprz1] {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
    }
}

/* Card */
.community .post-card[b-e6fdwwprz1] {
    background: var(--card-bg);
    border: 1px solid #e7efe9;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.community .post-head[b-e6fdwwprz1] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: .7rem;
    align-items: center;
}

.community .avatar[b-e6fdwwprz1] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #eaf6f0;
    display: grid;
    place-items: center;
    border: 1px solid #d5e9de;
}

    .community .avatar img[b-e6fdwwprz1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.community .avatar-fallback[b-e6fdwwprz1] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--accent);
}

.community .meta .title[b-e6fdwwprz1] {
    margin: 0;
    font-size: clamp(1rem,2.2vw,1.1rem);
    color: var(--text);
    font-weight: 800;
}

.community .byline[b-e6fdwwprz1] {
    color: var(--muted);
    display: flex;
    gap: .35rem;
    align-items: center;
    font-size: .9rem;
}

/* Body (flex-grow so footer sticks to bottom) */
.community .post-body[b-e6fdwwprz1] {
    flex: 1 1 auto;
}

    .community .post-body p[b-e6fdwwprz1] {
        margin: 0;
        color: #243832;
        line-height: 1.5;
    }

.community .moreless[b-e6fdwwprz1] {
    margin-top: .4rem;
    background: transparent;
    border: none;
    color: var(--accent);
    font-weight: 800;
    cursor: pointer;
    padding: 0;
}

    .community .moreless:hover[b-e6fdwwprz1] {
        text-decoration: underline;
    }

/* Footer (pin to bottom of card) */
.community .post-foot[b-e6fdwwprz1] {
    margin-top: auto; /* ensures bottom stick */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: .5rem;
}

.community .stats[b-e6fdwwprz1] {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.community .stat[b-e6fdwwprz1] {
    appearance: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #eef7f2;
    border: 1px solid #d6ecdf;
    font-weight: 700;
    color: #264f3b;
    transition: background .15s ease,border-color .15s ease,transform .06s ease;
}

    .community .stat.as-button[b-e6fdwwprz1] {
        cursor: pointer;
    }

        .community .stat.as-button:hover[b-e6fdwwprz1] {
            background: #e0f2e8;
        }

    .community .stat .icon[b-e6fdwwprz1] {
        width: 18px;
        height: 18px;
        display: block;
    }

        .community .stat .icon path[b-e6fdwwprz1] {
            fill: currentColor !important;
            stroke: none;
        }

    /* Heart outline -> solid when liked */
    .community .stat.like:not(.is-liked) .heart[b-e6fdwwprz1],
    .modal-stats .stat.like:not(.is-liked) .heart[b-e6fdwwprz1] {
        fill: none !important;
        stroke: #2e7d50 !important;
        stroke-width: 2.4px !important;
    }

    .community .stat.like.is-liked .heart[b-e6fdwwprz1],
    .modal-stats .stat.like.is-liked .heart[b-e6fdwwprz1] {
        fill: #2e7d50 !important;
        stroke: #2e7d50 !important;
        stroke-width: 2.4px !important;
        transform: scale(1.06);
    }

/* Tags */
.community .tags[b-e6fdwwprz1] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.community .tag[b-e6fdwwprz1] {
    font-size: .85rem;
    color: #2d5f47;
    background: #eaf6f0;
    border: 1px solid #d5e9de;
    border-radius: 8px;
    padding: .15rem .4rem;
}

/* +more */
.community .more-wrap[b-e6fdwwprz1] {
    display: grid;
    place-items: center;
    margin-top: .9rem;
}

.community .more-btn[b-e6fdwwprz1] {
    appearance: none;
    border: 1px solid var(--accent-2);
    background: linear-gradient(180deg,#f4fbf7,#e8f7ef);
    padding: .6rem 1rem;
    border-radius: 999px;
    font-weight: 800;
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 3px 0 #b9e4ce;
    transition: transform .06s ease,box-shadow .06s ease;
}

    .community .more-btn:hover[b-e6fdwwprz1] {
        transform: translateY(-1px);
    }

    .community .more-btn:active[b-e6fdwwprz1] {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #b9e4ce;
    }

/* Empty */
.community .empty[b-e6fdwwprz1] {
    background: #f1faf5;
    border: 1px dashed #cfeee0;
    padding: 1rem;
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

    .community .empty.small[b-e6fdwwprz1] {
        font-size: .95rem;
        padding: .75rem;
    }

/* Post Modal */
.modal-overlay[b-e6fdwwprz1] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal[b-e6fdwwprz1] {
    width: min(900px,94vw);
    max-height: 88vh;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.24);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10001;
}

.modal-close[b-e6fdwwprz1] {
    position: absolute;
    top: .6rem;
    right: .8rem;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
    color: #285b43;
}

.modal-post-head[b-e6fdwwprz1] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #ecf4ef;
}

.avatar.lg[b-e6fdwwprz1] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #eaf6f0;
    display: grid;
    place-items: center;
    border: 1px solid #d5e9de;
}

.modal-body[b-e6fdwwprz1] {
    padding: 1rem;
    color: #233a30;
    line-height: 1.6;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Modal stats */
.modal-stats[b-e6fdwwprz1] {
    display: flex;
    gap: .6rem;
    align-items: center;
    border-top: 1px solid #ecf4ef;
    border-bottom: 1px solid #ecf4ef;
    padding: .75rem 1rem;
    background: #f7fbf9;
    position: relative;
    z-index: 2;
}

    .modal-stats .stat[b-e6fdwwprz1] {
        appearance: none;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .35rem .8rem;
        border-radius: 999px;
        background: #eef7f2;
        border: 1px solid #d6ecdf;
        font-weight: 700;
        color: #264f3b;
        cursor: pointer;
    }

        .modal-stats .stat.read[b-e6fdwwprz1] {
            cursor: default;
        }

/* Comments */
.comments[b-e6fdwwprz1] {
    padding: .6rem 1rem 1rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.comment[b-e6fdwwprz1] {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: .6rem;
    border-bottom: 1px solid #f0f4f2;
    padding-bottom: .6rem;
}

    .comment:last-child[b-e6fdwwprz1] {
        border-bottom: none;
    }

    .comment .c-meta[b-e6fdwwprz1] {
        font-weight: 600;
        font-size: .9rem;
        color: #375c4b;
        margin-bottom: .1rem;
    }

    .comment .c-body p[b-e6fdwwprz1] {
        margin: 0;
        line-height: 1.4;
        color: #244136;
    }

.avatar.sm[b-e6fdwwprz1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #eaf6f0;
    display: grid;
    place-items: center;
    border: 1px solid #d5e9de;
}

.comment-compose[b-e6fdwwprz1] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: end;
    margin-top: .6rem;
}

    .comment-compose textarea[b-e6fdwwprz1] {
        resize: vertical;
        min-height: 2.6rem;
        padding: .6rem .7rem;
        border-radius: 12px;
        border: 1px solid #d6ecdf;
        background: #f8fdfb;
        font-family: inherit;
        color: #20302b;
    }

    .comment-compose .send[b-e6fdwwprz1] {
        padding: .55rem .9rem;
        border-radius: 999px;
        border: 1px solid var(--accent-2);
        background: linear-gradient(180deg,#f4fbf7,#e8f7ef);
        font-weight: 800;
        color: var(--accent);
        cursor: pointer;
    }

        .comment-compose .send:disabled[b-e6fdwwprz1] {
            opacity: .5;
            cursor: not-allowed;
        }

/* +more inside comments */
.comments .more-wrap[b-e6fdwwprz1] {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.3rem;
}

.comments .more-btn[b-e6fdwwprz1] {
    appearance: none;
    border: 1px solid var(--accent-2);
    background: linear-gradient(180deg, #f4fbf7, #e8f7ef);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 3px 0 #b9e4ce;
    transition: transform .08s, box-shadow .08s;
}

    .comments .more-btn:hover[b-e6fdwwprz1] {
        transform: translateY(-1px);
    }

    .comments .more-btn:active[b-e6fdwwprz1] {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #b9e4ce;
    }

.comments .icon[b-e6fdwwprz1], .comments .icon path[b-e6fdwwprz1] {
    width: 18px;
    height: 18px;
    fill: currentColor !important;
    stroke: none !important;
}

.modal-stats .stat .icon[b-e6fdwwprz1] {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
}

    .modal-stats .stat .icon path[b-e6fdwwprz1] {
        fill: currentColor !important;
        stroke: none !important;
    }

/* ========================= */
/* Compose slide-over (RIGHT)*/
/* ========================= */
.compose-overlay[b-e6fdwwprz1] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 10010;
}

.compose-panel[b-e6fdwwprz1] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(480px, 96vw);
    background: #ffffff;
    border-left: 1px solid #e7efe9;
    box-shadow: -24px 0 64px rgba(0,0,0,.18);
    z-index: 10011;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    animation: slideInRight-b-e6fdwwprz1 .18s ease-out both;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

@keyframes slideInRight-b-e6fdwwprz1 {
    from {
        transform: translateX(12px);
        opacity: 0;
    }

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

.compose-head[b-e6fdwwprz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid #ecf4ef;
    background: #f7fbf9;
}

    .compose-head h3[b-e6fdwwprz1] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--text);
    }

.compose-close[b-e6fdwwprz1] {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #285b43;
}

.compose-body[b-e6fdwwprz1] {
    padding: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

    .compose-body .field[b-e6fdwwprz1] {
        display: flex;
        flex-direction: column;
        gap: .4rem;
    }

    .compose-body label[b-e6fdwwprz1] {
        font-weight: 700;
        color: #234236;
    }

    .compose-body input[b-e6fdwwprz1], .compose-body textarea[b-e6fdwwprz1] {
        appearance: none;
        border: 1px solid #d6ecdf;
        background: #f8fdfb;
        padding: .6rem .7rem;
        border-radius: 12px;
        font: inherit;
        color: var(--text);
        outline: none;
        transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
    }

        .compose-body input:focus[b-e6fdwwprz1], .compose-body textarea:focus[b-e6fdwwprz1] {
            border-color: var(--accent-2);
            box-shadow: 0 0 0 3px rgba(124,199,161,.22), 0 2px 10px rgba(0,0,0,.06);
            background: #ffffff;
        }

    .compose-body .hint[b-e6fdwwprz1] {
        font-size: .85rem;
        color: var(--muted);
    }

    .compose-body .twocol[b-e6fdwwprz1] {
        display: grid;
        grid-template-columns: 1fr;
        gap: .7rem;
    }

@media (min-width: 720px) {
    .compose-body .twocol[b-e6fdwwprz1] {
        grid-template-columns: 1fr 1fr;
    }
}

.compose-foot[b-e6fdwwprz1] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .8rem 1rem 1rem;
    border-top: 1px solid #ecf4ef;
    background: #fafdfb;
}

    .compose-foot .btn[b-e6fdwwprz1] {
        appearance: none;
        border-radius: 999px;
        padding: .55rem 1rem;
        font-weight: 800;
        cursor: pointer;
        transition: transform .06s ease, box-shadow .06s ease, background .12s ease, border-color .12s ease;
    }

        .compose-foot .btn.primary[b-e6fdwwprz1] {
            border: 1px solid var(--accent-2);
            background: linear-gradient(180deg,#f4fbf7,#e8f7ef);
            color: var(--accent);
            box-shadow: 0 3px 0 #b9e4ce;
        }

            .compose-foot .btn.primary:hover[b-e6fdwwprz1] {
                transform: translateY(-1px);
            }

            .compose-foot .btn.primary:active[b-e6fdwwprz1] {
                transform: translateY(1px);
                box-shadow: 0 1px 0 #b9e4ce;
            }

        .compose-foot .btn.ghost[b-e6fdwwprz1] {
            border: 1px solid #d6ecdf;
            background: #ffffff;
            color: #2c4b3d;
        }

        .compose-foot .btn[disabled][b-e6fdwwprz1] {
            opacity: .6;
            cursor: not-allowed;
        }

/* ========================== */
/* Tags: add button + chips   */
/* ========================== */
.compose-body .chip-input[b-e6fdwwprz1] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.compose-body .chip-bag[b-e6fdwwprz1] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.compose-body .chip-yellow[b-e6fdwwprz1] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--tag-yellow);
    color: var(--tag-brown);
    border: 1px solid var(--tag-yellow-border);
    border-radius: 999px;
    padding: .3rem .6rem;
    font-weight: 700;
}

    .compose-body .chip-yellow .chip-x[b-e6fdwwprz1] {
        appearance: none;
        border: none;
        background: transparent;
        cursor: pointer;
        font-weight: 900;
        color: var(--tag-brown);
        line-height: 1;
        padding: 0 .1rem;
        font-size: 1rem;
    }

.compose-body .chip-input-row[b-e6fdwwprz1] {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}

.compose-body .chip-input__field[b-e6fdwwprz1] {
    min-width: 140px;
    flex: 1 1 auto;
    background: #fff;
}

.compose-body .chip-add[b-e6fdwwprz1] {
    appearance: none;
    border: 1px solid var(--accent-2);
    background: linear-gradient(180deg,#f4fbf7,#e8f7ef);
    padding: .5rem .8rem;
    border-radius: 999px;
    font-weight: 800;
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 3px 0 #b9e4ce;
    transition: transform .06s ease, box-shadow .06s ease;
}

    .compose-body .chip-add:hover[b-e6fdwwprz1] {
        transform: translateY(-1px);
    }

    .compose-body .chip-add:active[b-e6fdwwprz1] {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #b9e4ce;
    }

    .compose-body .chip-add:disabled[b-e6fdwwprz1] {
        opacity: .5;
        cursor: not-allowed;
    }

/* ===== Fix double scroll: make modal the only scroller ===== */
.modal[b-e6fdwwprz1] {
    overflow-y: auto; /* was hidden; now modal scrolls */
    -webkit-overflow-scrolling: touch; /* smooth iOS */
}

/* Let content inside flow (no inner scrollbars) */
.modal-body[b-e6fdwwprz1] {
    overflow: visible; /* stop inner scroller */
    flex: 0 0 auto; /* don’t consume remaining height */
}

.comments[b-e6fdwwprz1] {
    overflow: visible; /* stop inner scroller */
    flex: 0 0 auto; /* let it flow after stats */
}

/* ===== Mobile: Comment button on its own line ===== */
@media (max-width: 700px) {
    .comment-compose[b-e6fdwwprz1] {
        grid-template-columns: 1fr; /* textarea first row */
    }

        .comment-compose .send[b-e6fdwwprz1] {
            width: 100%; /* button full width on next row */
            justify-self: start; /* align left */
        }
}
/* _content/mentalease.blazor/Components/Pages/Sections/FreeTherapy.razor.rz.scp.css */
/* ================================
   Free Therapy — full stylesheet
   ================================ */

:root[b-mujumpehtx] {
    --green: hsl(147.63deg 72.38% 41.18%);
    --mint-50: #f4fbf7;
    --mint-75: #ecfaf3;
    --mint-100: #e9f7ef;
    --mint-200: #dff3e8;
    --mint-300: #cfeee0;
    --ink-900: #20302b;
    --ink-800: #1f2f2a;
}

/* Section header */
.therapy.section[b-mujumpehtx] {
    background: var(--mint-50);
    padding: clamp(1.25rem,3vw,2rem) 0 clamp(2rem,5vw,3rem);
}

.therapy .section-head[b-mujumpehtx] {
    margin-bottom: .75rem;
}

.therapy .section-title[b-mujumpehtx] {
    margin: 0 0 .25rem;
    font-size: clamp(1.5rem,2.8vw,2rem);
    font-weight: 900;
    color: var(--ink-900);
}

.therapy .section-sub[b-mujumpehtx] {
    margin: 0;
    color: #54645f;
}

/* ================= Panel wrapper ================= */
.therapy .therapy-mintwrap[b-mujumpehtx] {
    background: var(--mint-75);
    border: 1px solid var(--mint-300);
    border-radius: 22px;
    padding: 14px 16px 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* ================= Filters ================= */
.therapy .filters[b-mujumpehtx] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .6rem 0 1.1rem;
    align-items: center;
    max-width: 100%;
}

/* ================= Language dropdown ================= */
.therapy .langpicker[b-mujumpehtx] {
    position: relative;
    z-index: 5;
}

.therapy .langpicker-toggle[b-mujumpehtx] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: #fff;
    color: var(--ink-900);
    font-weight: 800;
    border: 1px solid var(--mint-300);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    cursor: pointer;
    line-height: 1;
}

    .therapy .langpicker-toggle:hover[b-mujumpehtx] {
        border-color: #bfead2;
        background: #f9fefb;
    }

    .therapy .langpicker-toggle:focus-visible[b-mujumpehtx] {
        outline: none;
        box-shadow: 0 0 0 3px #bfead2, 0 0 0 6px rgba(124,199,161,.25);
    }

    .therapy .langpicker-toggle .flag[b-mujumpehtx] {
        width: 18px;
        height: 14px;
        display: inline-grid;
        place-items: center;
    }

        .therapy .langpicker-toggle .flag img[b-mujumpehtx] {
            width: 18px;
            height: 14px;
            border-radius: 2px;
            box-shadow: 0 0 0 1px rgba(0,0,0,.06);
        }

    .therapy .langpicker-toggle .chev[b-mujumpehtx] {
        width: 16px;
        height: 16px;
        margin-left: .25rem;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2px;
        opacity: .75;
        transition: transform .18s ease;
    }

.therapy .langpicker[data-open="1"] .chev[b-mujumpehtx] {
    transform: rotate(180deg);
}

/* Dropdown list */
.therapy .langpicker-list[b-mujumpehtx] {
    position: absolute;
    inset-inline-start: 0;
    margin-top: .4rem;
    min-width: 220px;
    max-width: min(92vw, 380px);
    max-height: 320px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--mint-300);
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(0,0,0,.1);
    padding: .35rem;
    list-style: none;
    z-index: 6;
}

    .therapy .langpicker-list li[b-mujumpehtx] {
        margin: 0;
    }

    .therapy .langpicker-list .lang-opt[b-mujumpehtx] {
        appearance: none;
        display: grid;
        grid-template-columns: 18px 1fr;
        align-items: center;
        gap: .6rem;
        width: 100%;
        padding: .5rem .6rem;
        background: transparent;
        border: none;
        border-radius: 10px;
        color: var(--ink-900);
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

        .therapy .langpicker-list .lang-opt:hover[b-mujumpehtx] {
            background: var(--mint-100);
        }

        .therapy .langpicker-list .lang-opt.active[b-mujumpehtx] {
            background: var(--mint-200);
            border: 1px solid #bfead2;
        }

/* ================= Chips ================= */
.therapy .chips[b-mujumpehtx] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 100%;
}

    .therapy .chips .chip[b-mujumpehtx] {
        appearance: none;
        background: #edf7f1;
        color: var(--ink-800);
        font-weight: 800;
        padding: .52rem .8rem;
        border-radius: 999px;
        border: 1px solid var(--mint-300);
        cursor: pointer;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        flex: 0 1 auto;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
        transition: transform .08s, background .18s, border-color .18s, box-shadow .18s;
    }

        .therapy .chips .chip:hover[b-mujumpehtx] {
            transform: translateY(-1px);
            background: var(--mint-200);
            border-color: #bfead2;
            box-shadow: 0 6px 16px rgba(0,0,0,.08);
        }

        .therapy .chips .chip:focus-visible[b-mujumpehtx] {
            outline: none;
            box-shadow: 0 0 0 3px #bfead2, 0 0 0 6px rgba(124,199,161,.25);
        }

        .therapy .chips .chip.active[b-mujumpehtx] {
            background: #fff;
            border-color: var(--mint-300);
            color: var(--green);
            box-shadow: 0 3px 10px rgba(0,0,0,.05);
        }

        .therapy .chips .chip.more[b-mujumpehtx] {
            background: #fff7ec;
            border-color: #ffd7a8;
            color: #8a4b00;
        }

/* ================= Grid ================= */
.therapy .grid[b-mujumpehtx] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width:820px) {
    .therapy .grid[b-mujumpehtx] {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (min-width:1200px) {
    .therapy .grid[b-mujumpehtx] {
        grid-template-columns: repeat(3,1fr);
    }
}

/* ================= Cards ================= */
.therapy .card.square[b-mujumpehtx] {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 20px;
    background: var(--green);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

    .therapy .card.square[b-mujumpehtx]::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 20px;
        background: radial-gradient(120% 80% at -10% -10%, rgba(255,255,255,.22), transparent 45%), radial-gradient(80% 60% at 102% 0%, rgba(255,255,255,.14), transparent 60%);
        pointer-events: none;
    }

.therapy .card .card-body[b-mujumpehtx] {
    position: absolute;
    inset: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Head */
.therapy .head[b-mujumpehtx] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: .75rem;
    align-items: center;
}

.therapy .avatar[b-mujumpehtx] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: #eaf6f0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
}

    .therapy .avatar img[b-mujumpehtx] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.therapy .avatar-fallback[b-mujumpehtx] {
    font-weight: 900;
    color: #fff;
    opacity: .95;
}

.therapy .name-row[b-mujumpehtx] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.therapy .name[b-mujumpehtx] {
    margin: 0;
    font-size: clamp(1.02rem,2.2vw,1.15rem);
    font-weight: 900;
    color: #fff;
}

.therapy .line.small[b-mujumpehtx] {
    font-size: .92rem;
    color: #f0fff8;
    opacity: .92;
}

.therapy .meta .dot[b-mujumpehtx] {
    opacity: .6;
    color: #fff;
}

/* Verified tag */
.therapy .tag.verify[b-mujumpehtx] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.32);
    color: #fff;
    font-weight: 800;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
}

/* Content on green */
.therapy .bio[b-mujumpehtx] {
    margin: .1rem 0 .2rem;
    color: #fff;
    line-height: 1.45;
    opacity: .98;
}

.therapy .tags[b-mujumpehtx] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.therapy .tag[b-mujumpehtx] {
    font-size: .85rem;
    color: #fff;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 9px;
    padding: .16rem .5rem;
}

/* Facts */
.therapy .facts[b-mujumpehtx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
}

    .therapy .facts div[b-mujumpehtx] {
        display: flex;
        gap: .4rem;
        align-items: baseline;
    }

    .therapy .facts dt[b-mujumpehtx], .therapy .facts dd[b-mujumpehtx] {
        margin: 0;
        color: #fff;
        opacity: .95;
    }

    .therapy .facts dd[b-mujumpehtx] {
        font-weight: 400;
    }

/* Actions on cards */
.therapy .actions[b-mujumpehtx] {
    margin-top: auto;
    display: flex;
    gap: .5rem;
}

.therapy .btn[b-mujumpehtx] {
    appearance: none;
    cursor: pointer;
    font-weight: 800;
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.38);
    padding: .52rem .8rem;
    transition: transform .06s, background .12s, box-shadow .12s;
}

    .therapy .btn:hover[b-mujumpehtx] {
        transform: translateY(-1px);
        background: rgba(255,255,255,.24);
    }

    .therapy .btn:active[b-mujumpehtx] {
        transform: translateY(1px);
    }

/* Empty & More */
.therapy .empty[b-mujumpehtx] {
    background: #f0fbf5;
    border: 1px dashed var(--mint-300);
    padding: 1rem;
    border-radius: 16px;
    color: #5f6b6b;
    text-align: center;
}

.therapy .more-wrap[b-mujumpehtx] {
    display: grid;
    place-items: center;
    margin-top: 1rem;
}

.therapy .more-btn[b-mujumpehtx] {
    appearance: none;
    border: 1px solid #a9e3c7;
    background: linear-gradient(180deg,#f4fbf7,#e8f7ef);
    padding: .6rem 1rem;
    border-radius: 999px;
    font-weight: 900;
    color: #274a3d;
    cursor: pointer;
    box-shadow: 0 3px 0 #b9e4ce;
    transition: transform .06s, box-shadow .06s;
}

    .therapy .more-btn:hover[b-mujumpehtx] {
        transform: translateY(-1px);
    }

    .therapy .more-btn:active[b-mujumpehtx] {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #b9e4ce;
    }

/* ---------- Mobile fix ---------- */
@media (max-width: 640px) {
    .therapy .card.square[b-mujumpehtx] {
        aspect-ratio: auto;
        min-height: 0;
    }

        .therapy .card.square .card-body[b-mujumpehtx] {
            position: static;
            padding: 0.9rem;
        }

    .therapy .bio[b-mujumpehtx], .therapy .facts dd[b-mujumpehtx], .therapy .facts dt[b-mujumpehtx], .therapy .name[b-mujumpehtx], .therapy .line.small[b-mujumpehtx] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .therapy .tags[b-mujumpehtx], .therapy .actions[b-mujumpehtx] {
        flex-wrap: wrap;
    }
}

/* Keep term on one line; let the value wrap */
.therapy .facts div[b-mujumpehtx] {
    display: flex;
    gap: .4rem;
    align-items: baseline;
}

.therapy .facts dt[b-mujumpehtx] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.therapy .facts dd[b-mujumpehtx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===== Add button placement ===== */
.therapy .filters[b-mujumpehtx] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.therapy .filters-spacer[b-mujumpehtx] {
    flex: 1 1 auto;
    min-width: 0;
}

.therapy .add-therapist-btn[b-mujumpehtx] {
    appearance: none;
    background: #fff7ec;
    color: #8a4b00;
    border: 1px solid #ffd7a8;
    border-radius: 12px;
    padding: .55rem .9rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    white-space: nowrap;
}

    .therapy .add-therapist-btn:hover[b-mujumpehtx] {
        background: #fff3e0;
    }

/* ===== Modal ===== */
.therapy .nt-backdrop[b-mujumpehtx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1100;
}

.therapy .nt-modal[b-mujumpehtx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(860px, 96vw);
    background: #fff;
    color: var(--ink-900);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    z-index: 1110;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: auto;
}

.therapy .nt-head[b-mujumpehtx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .therapy .nt-head h3[b-mujumpehtx] {
        margin: 0;
        font-weight: 900;
        color: #0a0a0a;
    }

.therapy .nt-close[b-mujumpehtx] {
    border: 0;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
}

    .therapy .nt-close:hover[b-mujumpehtx] {
        background: rgba(0,0,0,.05);
    }

/* Form layout */
.therapy .nt-grid[b-mujumpehtx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem .85rem;
    padding: 1rem 1.25rem 1.25rem;
}

.therapy .nt-field[b-mujumpehtx] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .therapy .nt-field.nt-colspan[b-mujumpehtx] {
        grid-column: 1 / -1;
    }

    /* Modernized inputs */
    .therapy .nt-field > label[b-mujumpehtx] {
        font-weight: 800;
        color: var(--ink-800);
        letter-spacing: .01em;
        transition: color .18s, transform .18s;
    }

.therapy .nt-input[b-mujumpehtx] {
    width: 100%;
    background: #fff;
    border: 1px solid #e2efe7;
    border-radius: 14px;
    padding: .75rem 1rem;
    line-height: 1.45;
    color: var(--ink-900);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,.04);
    transition: border-color .18s, box-shadow .18s, background .18s, transform .12s;
}

    .therapy .nt-input:hover[b-mujumpehtx] {
        background: #fbfdfa;
        border-color: #cfeee0;
    }

    .therapy .nt-input:focus[b-mujumpehtx] {
        outline: none;
        border-color: var(--green);
        box-shadow: 0 0 0 3px rgba(34,197,94,.22), 0 2px 10px rgba(0,0,0,.06);
        transform: translateY(-1px);
    }

    .therapy .nt-input[b-mujumpehtx]::placeholder {
        color: #a3b2aa;
    }

.therapy .nt-field:focus-within > label[b-mujumpehtx] {
    color: var(--green);
    transform: translateY(-1px);
}

.therapy select.nt-input[b-mujumpehtx] {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%2320302b' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
    padding-right: 2.2rem;
}

.therapy textarea.nt-input[b-mujumpehtx] {
    resize: vertical;
    min-height: 120px;
}

.therapy .nt-input[type="number"][b-mujumpehtx]::-webkit-outer-spin-button,
.therapy .nt-input[type="number"][b-mujumpehtx]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.therapy .nt-input[type="number"][b-mujumpehtx] {
    -moz-appearance: textfield;
}

.therapy .nt-check input[type="checkbox"][b-mujumpehtx] {
    accent-color: var(--green);
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.therapy .nt-input:required:invalid[b-mujumpehtx] {
    border-color: #f6d3d3;
}

    .therapy .nt-input:required:invalid:focus[b-mujumpehtx] {
        box-shadow: 0 0 0 3px rgba(239,68,68,.18), 0 2px 10px rgba(0,0,0,.06);
    }

/* ===== Actions row (RESTORED) ===== */
.therapy .nt-actions[b-mujumpehtx] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,.04);
    background: #fff;
    position: sticky;
    bottom: 0; /* keeps buttons visible while scrolling long forms */
}

    .therapy .nt-actions .btn[b-mujumpehtx] {
        background: var(--green);
        color: #fff;
        border: 0;
        border-radius: 12px;
        padding: .55rem .9rem;
        font-weight: 900;
        cursor: pointer;
    }

        .therapy .nt-actions .btn.ghost[b-mujumpehtx] {
            background: #eef6f2;
            color: #1f2f2a;
        }

        .therapy .nt-actions .btn:hover[b-mujumpehtx] {
            filter: brightness(.96);
        }

/* Mobile tweaks */
@media (max-width: 640px) {
    .therapy .nt-grid[b-mujumpehtx] {
        grid-template-columns: 1fr;
    }

    .therapy .nt-modal[b-mujumpehtx] {
        width: min(96vw, 560px);
    }

    .therapy .nt-input[b-mujumpehtx] {
        border-radius: 16px;
        padding: .8rem 1rem;
    }
}

/* ===== Thank-you modal ===== */
.therapy .nt-modal.thankyou[b-mujumpehtx] {
    text-align: center;
    max-width: 480px;
    padding-bottom: 1rem;
}

    .therapy .nt-modal.thankyou .nt-head[b-mujumpehtx] {
        border-bottom: none;
    }

    .therapy .nt-modal.thankyou .nt-body[b-mujumpehtx] {
        padding: 0 1.25rem 1rem;
        font-size: 1.05rem;
        color: var(--ink-900);
        line-height: 1.6;
    }

    .therapy .nt-modal.thankyou strong[b-mujumpehtx] {
        color: var(--green);
    }

    .therapy .nt-modal.thankyou .btn[b-mujumpehtx] {
        margin-top: .75rem;
        background: var(--green);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: .6rem 1rem;
        font-weight: 800;
        cursor: pointer;
        transition: filter .15s ease;
    }

        .therapy .nt-modal.thankyou .btn:hover[b-mujumpehtx] {
            filter: brightness(.95);
        }

/* ===== Chips inside input (tags-input) ===== */
.therapy .chip-input[b-mujumpehtx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    min-height: 44px;
    padding: .45rem .6rem;
    background: #fff;
    border: 1px solid #e2efe7;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,.04);
}

    .therapy .chip-input:focus-within[b-mujumpehtx] {
        outline: none;
        border-color: var(--green);
        box-shadow: 0 0 0 3px rgba(34,197,94,.22), 0 2px 10px rgba(0,0,0,.06);
    }

.therapy .chip-input__field[b-mujumpehtx] {
    appearance: none;
    border: 0;
    background: transparent;
    outline: none;
    min-width: 140px;
    padding: .25rem 0;
    font: inherit;
    color: inherit;
}

/* group: field + button */
.therapy .chip-input-group[b-mujumpehtx] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .45rem;
    align-items: center;
}

.therapy .chip-add[b-mujumpehtx] {
    appearance: none;
    border: 1px solid transparent;
    font-weight: 900;
    cursor: pointer;
    padding: .55rem .9rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.therapy .chip-add--lang[b-mujumpehtx] {
    background: #ffef9e;
    border-color: #f1d670;
    color: #5b3b00;
}

.therapy .chip-add--spec[b-mujumpehtx] {
    background: #ffe2e7;
    border-color: #ffb5c1;
    color: #a3122a;
}

.therapy .chip-add--mod[b-mujumpehtx] {
    background: #e3f0ff;
    border-color: #b7d1ff;
    color: #0b3d91;
}

.therapy .chip-add:hover[b-mujumpehtx] {
    filter: brightness(.97);
}

/* chip base + close */
.therapy .chip-input .chip[b-mujumpehtx] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .9rem;
    line-height: 1;
    border: 1px solid transparent;
}

.therapy .chip-x[b-mujumpehtx] {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 .1rem;
    line-height: 1;
    font-weight: 900;
    opacity: .8;
}

    .therapy .chip-x:hover[b-mujumpehtx] {
        opacity: 1;
    }

/* requested color themes (chips) */
.therapy .chip--lang[b-mujumpehtx] {
    background: #ffef9e;
    border-color: #f1d670;
    color: #5b3b00;
}

.therapy .chip--mod[b-mujumpehtx] {
    background: #e3f0ff;
    border-color: #b7d1ff;
    color: #0b3d91;
}

.therapy .chip--spec[b-mujumpehtx] {
    background: #ffe2e7;
    border-color: #ffb5c1;
    color: #a3122a;
}

/* ===== Disclaimer (your fix) ===== */
.therapy .nt-disclaimer[b-mujumpehtx] {
    margin: .5rem 1.25rem 0;
    background: #fff7d1;
    border: 1px solid #f5d75a;
    color: #5f4a00;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 1rem;

}

/* ===== Inline +more link (your fix) ===== */
.therapy .more-link-inline[b-mujumpehtx] {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 0.3rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .therapy .more-link-inline:hover[b-mujumpehtx] {
        opacity: 0.8;
    }

/* View modals */
.therapy .nt-modal.view[b-mujumpehtx] {
    width: min(720px, 96vw);
    max-height: 80vh;
}

.therapy .nt-modal .view-body[b-mujumpehtx] {
    padding: 1rem 1.25rem 0;
}

.therapy .nt-modal.view .pill-wrap[b-mujumpehtx] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.therapy .nt-modal.view .pill[b-mujumpehtx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--green);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    padding: .25rem .6rem;
    border-radius: 999px;
    font-weight: 800;
    margin-bottom: 1rem
}




/* ===== Compact override: match chip-input to nt-input size ===== */
.therapy .chip-input[b-mujumpehtx] {
    min-height: 36px; /* smaller height (~half) */
    padding: .35rem .55rem; /* reduced padding to match compact inputs */
    border-radius: 10px; /* same corner radius as compact nt-input */
}

.therapy .chip-input__field[b-mujumpehtx] {
    padding: .2rem 0; /* less padding inside the field */
    font-size: 0.9rem; /* match smaller input text */
    line-height: 1.3;
}

.therapy .chip-add[b-mujumpehtx] {
    height: 36px; /* align Add button height */
    padding: 0 .75rem;
    font-size: 0.9rem;
    border-radius: 10px;
}
/* _content/mentalease.blazor/Components/Pages/Sections/ResourcesGrid.razor.rz.scp.css */
/* ================= Headings ================= */

:root[b-drf2m2gh01] {
    --green: hsl(147.63deg 72.38% 41.18%);
    --mint-50: #f4fbf7;
    --mint-75: #ecfaf3;
    --mint-100: #e9f7ef;
    --mint-200: #dff3e8;
    --mint-300: #cfeee0;
    --ink-900: #20302b;
    --ink-800: #1f2f2a;
}
.resources .section-head[b-drf2m2gh01] {
    margin-bottom: .5rem;
}

.resources .section-title[b-drf2m2gh01] {
    margin: 0 0 .25rem;
    font-size: clamp(1.4rem,2.6vw,1.9rem);
    font-weight: 800;
}

.resources .section-sub[b-drf2m2gh01] {
    margin: 0;
    color: var(--muted,#5f6b6b);
}

/* ========= Mint wrapper (matches Community/Free Therapy) ========= */
.resources .resources-mintwrap[b-drf2m2gh01] {
    background: var(--mint-75);
    border: 1px solid var(--mint-300);
    border-radius: 22px;
    padding: 14px 16px 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* ================= Filters ================= */
.resources .filters[b-drf2m2gh01] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .75rem 0 1.1rem;
}

.resources .filter-group[b-drf2m2gh01] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.resources .filter-label[b-drf2m2gh01] {
    font-weight: 700;
    color: var(--text);
}

.resources .chips[b-drf2m2gh01] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Chips */
.resources .chip[b-drf2m2gh01] {
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: var(--text);
    padding: .40rem .70rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s;
}

    .resources .chip:hover[b-drf2m2gh01] {
        background: #f6f6f6;
        transform: translateY(-1px);
    }

    .resources .chip:focus-visible[b-drf2m2gh01] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,0,0,.08),0 0 0 6px rgba(14,165,102,.25);
    }

    .resources .chip.active[b-drf2m2gh01] {
        background: linear-gradient(135deg,hsl(147.63 72.38% 44%),hsl(147.63 72.38% 36%));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
    }

/* ================= Grid ================= */
.resources .grid[b-drf2m2gh01] {
    --cols: 3;
    display: grid;
    gap: clamp(.8rem,2vw,1rem);
    grid-template-columns: repeat(var(--cols),minmax(0,1fr));
}

@media (max-width:1024px) {
    .resources .grid[b-drf2m2gh01] {
        --cols: 2;
    }
}

@media (max-width:640px) {
    .resources .grid[b-drf2m2gh01] {
        --cols: 2;
    }
}

@media (max-width:420px) {
    .resources .grid[b-drf2m2gh01] {
        --cols: 1;
    }
}

/* ================= Cards ================= */
.resources .r-card[b-drf2m2gh01] {
    background: var(--green);
    color: #fff;
    border-radius: var(--radius,18px);
    padding: clamp(1rem,2vw,1.25rem);
    box-shadow: 0 10px 35px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 200px;
}

/* Type badge */
.resources .r-type[b-drf2m2gh01] {
    align-self: flex-start;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .25rem .7rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg,#ffffff33,#ffffff14);
    border: 1px solid #ffffff4d;
    box-shadow: 0 2px 8px rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.25);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

    .resources .r-type.book[b-drf2m2gh01] {
        background: linear-gradient(135deg,#cffeea,#00a86b);
        border-color: transparent;
    }

    .resources .r-type.video[b-drf2m2gh01] {
        background: linear-gradient(135deg,#1e90ff,#0c6adf);
        border-color: transparent;
    }

    .resources .r-type.both[b-drf2m2gh01] {
        background: linear-gradient(135deg,#ffb703,#f28b00);
        border-color: transparent;
    }

/* Titles (2 lines fixed) */
.resources .r-title[b-drf2m2gh01] {
    --title-lines: 2;
    margin: .1rem 0 0;
    font-weight: 800;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--title-lines);
    overflow: hidden;
    min-height: calc(1em * 1.2 * var(--title-lines));
}

/* Body/desc */
.resources .r-desc[b-drf2m2gh01] {
    margin: 0;
    opacity: .98;
}

.resources .r-body[b-drf2m2gh01] {
    --desc-lines: 4;
    display: flex;
    flex-direction: column;
    min-height: calc(1em * 1.55 * var(--desc-lines) + 2rem);
    max-height: calc(1em * 1.55 * var(--desc-lines) + 2rem);
}

.resources .clamp-2[b-drf2m2gh01], .resources .clamp-4[b-drf2m2gh01] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resources .clamp-2[b-drf2m2gh01] {
    -webkit-line-clamp: 2;
}

.resources .clamp-4[b-drf2m2gh01] {
    -webkit-line-clamp: 4;
}

/* +More */
.resources .more-link[b-drf2m2gh01] {
    align-self: flex-start;
    margin-top: .35rem;
    padding: .2rem .5rem;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,.45);
    background: #ffffff1a;
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .02em;
    cursor: pointer;
}

    .resources .more-link:hover[b-drf2m2gh01] {
        background: #ffffff26;
    }

    .resources .more-link:focus[b-drf2m2gh01], .resources .more-link:active[b-drf2m2gh01] {
        outline: none;
        background: #ffffff26;
        color: #fff;
    }

/* Tags */
.resources .r-tags[b-drf2m2gh01] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.resources .tag[b-drf2m2gh01] {
    background: linear-gradient(135deg,#ffffff22,#ffffff0f);
    border: 1px solid #ffffff44;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .20rem .55rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .15s, box-shadow .15s;
}

    .resources .tag:hover[b-drf2m2gh01] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.22);
    }
    /* quick color accents */
    .resources .tag[data-topic*="Trauma"][b-drf2m2gh01] {
        background: #ff6b6b;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Anxiety"][b-drf2m2gh01] {
        background: #1e90ff;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Sleep"][b-drf2m2gh01] {
        background: #826aed;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Mindfulness"][b-drf2m2gh01] {
        background: #ffa0d6;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Relationships"][b-drf2m2gh01] {
        background: #ffb703;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Stress"][b-drf2m2gh01] {
        background: #f97316;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Self-care"][b-drf2m2gh01] {
        background: #a3e635;
        border-color: transparent;
    }

    .resources .tag[data-topic*="CBT"][b-drf2m2gh01] {
        background: #38bdf8;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Body"][b-drf2m2gh01] {
        background: #c06d00;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Lifestyle"][b-drf2m2gh01] {
        background: #10b981;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Breathing"][b-drf2m2gh01] {
        background: #0ae7e6;
        border-color: transparent;
    }
    .resources .tag[data-topic*="Crisis"][b-drf2m2gh01] {
        background: #a56868;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Support"][b-drf2m2gh01] {
        background: #a3e635;
        border-color: transparent;
    }
    .resources .tag[data-topic*="Families"][b-drf2m2gh01] {
        background: #9699ec;
        border-color: transparent;
    }
    .resources .tag[data-topic*="Youth"][b-drf2m2gh01] {
        background: #96ecea;
        border-color: transparent;
    }
    .resources .tag[data-topic*="Calm"][b-drf2m2gh01] {
        background: #96ecea;
        border-color: transparent;
    }

    .resources .tag[data-topic*="Resilience"][b-drf2m2gh01] {
        background: #ccc600;
        border-color: transparent;
    }

/* Actions */
.resources .r-actions[b-drf2m2gh01] {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.resources .btn[b-drf2m2gh01] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--green);
    border: 0;
    border-radius: 12px;
    padding: .55rem .8rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transition: transform .1s, box-shadow .1s, background .1s;
}

    .resources .btn:hover[b-drf2m2gh01] {
        background: #f3f3f3;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.16);
    }

    .resources .btn.ghost[b-drf2m2gh01] {
        background: transparent;
        color: #fff;
        border: 1px solid #ffffff80;
        box-shadow: none;
    }

        .resources .btn.ghost:hover[b-drf2m2gh01] {
            background: #ffffff14;
        }

/* Show more */
.resources .more-wrap[b-drf2m2gh01] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.resources .more-btn[b-drf2m2gh01] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: var(--text);
    border-radius: 12px;
    padding: .6rem .9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

    .resources .more-btn:hover[b-drf2m2gh01] {
        background: #f6f6f6;
    }

/* ================= Modal ================= */
.resources .modal-backdrop[b-drf2m2gh01] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
}

.resources .modal[b-drf2m2gh01] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(900px,96vw);
    background: #fff;
    color: var(--text);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: auto;
}

.resources .modal-head[b-drf2m2gh01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    gap: .75rem;
}

.resources .modal-titlebar[b-drf2m2gh01] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.resources .modal-head h3[b-drf2m2gh01] {
    margin: 0;
    font-weight: 800;
}

.resources .modal-titlebar .r-type[b-drf2m2gh01] {
    padding: .22rem .6rem;
    font-size: .78rem;
    transform: translateY(-1px);
}

.resources .modal-tabs.inline[b-drf2m2gh01] {
    display: inline-flex;
    gap: .5rem;
    padding: 0;
    border: 0;
}

    .resources .modal-tabs.inline .tab[b-drf2m2gh01] {
        padding: .38rem .8rem;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        font-weight: 800;
        cursor: pointer;
        line-height: 1;
        white-space: nowrap;
    }

        .resources .modal-tabs.inline .tab.active[b-drf2m2gh01] {
            background: linear-gradient(135deg,hsl(147.63 72.38% 44%),hsl(147.63 72.38% 36%));
            color: #fff;
            border-color: transparent;
            box-shadow: 0 6px 18px rgba(0,0,0,.18);
        }

.resources .modal-close[b-drf2m2gh01] {
    border: 0;
    background: transparent;
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
}

    .resources .modal-close:hover[b-drf2m2gh01] {
        background: rgba(0,0,0,.05);
    }

/* Base grid */
.resources .modal-content[b-drf2m2gh01] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    padding: 1rem 1.25rem 1.25rem;
    width: 100%;
    justify-items: center;
    align-items: start;
    margin-inline: auto;
}
/* Tablet tighten */
@media (max-width:1200px) {
    .resources .modal[b-drf2m2gh01] {
        width: min(825px,96vw);
    }

    .resources .modal-content[b-drf2m2gh01] {
        gap: .75rem;
    }
}

@media (max-width:980px) {
    .resources .modal[b-drf2m2gh01] {
        width: min(735px,96vw);
    }

    .resources .modal-content[b-drf2m2gh01] {
        grid-template-columns: 1fr;
    }
}

/* Media blocks */
.resources .modal-media[b-drf2m2gh01] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.resources .media-card[b-drf2m2gh01] {
    background: #f7faf8;
    border: 1px solid #e7efe9;
    border-radius: 12px;
    padding: .5rem;
    width: min(100%,304px);
}

    .resources .media-card img[b-drf2m2gh01] {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

    .resources .media-card figcaption[b-drf2m2gh01] {
        font-size: .85rem;
        color: #5f6b6b;
        margin-top: .35rem;
    }

.resources .play-thumb[b-drf2m2gh01] {
    position: relative;
    cursor: pointer;
    border: 0;
    text-align: left;
}

    .resources .play-thumb .play-icon[b-drf2m2gh01] {
        position: absolute;
        inset: auto 0 40% 0;
        margin: auto;
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        color: #000;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
    }

    .resources .play-thumb:hover img[b-drf2m2gh01] {
        opacity: .95;
    }

/* Details */
.resources .modal-body[b-drf2m2gh01] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.resources .modal-badges[b-drf2m2gh01] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.resources .modal-desc[b-drf2m2gh01] {
    margin: .25rem 0 0;
    line-height: 1.6;
}

.resources .modal-actions[b-drf2m2gh01] {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

    .resources .modal-actions .btn[b-drf2m2gh01] {
        box-shadow: none;
    }

/* Wrapping */
.resources .r-desc[b-drf2m2gh01] {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* ================= Big Player Overlay ================= */
.resources .player-backdrop[b-drf2m2gh01] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1100;
}

.resources .player-modal[b-drf2m2gh01] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1110;
    padding: 2vw;
}

.resources .player-aspect[b-drf2m2gh01] {
    width: min(96vw,1200px);
    height: min(90vh,68vw);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

    .resources .player-aspect iframe[b-drf2m2gh01] {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

.resources .player-close[b-drf2m2gh01] {
    position: fixed;
    top: 12px;
    right: 12px;
    border: 0;
    background: #fff;
    color: #111;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

    .resources .player-close:hover[b-drf2m2gh01] {
        background: #f2f2f2;
    }

/* ====== VARIANTS ====== */
.resources .modal-content.is-video-only[b-drf2m2gh01] {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    row-gap: 1rem;
}

    .resources .modal-content.is-video-only .modal-body[b-drf2m2gh01] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .resources .modal-content.is-video-only .modal-badges[b-drf2m2gh01] {
        justify-content: center;
    }

    .resources .modal-content.is-video-only .modal-media[b-drf2m2gh01] {
        width: 100%;
        display: grid;
        place-items: center;
    }

    .resources .modal-content.is-video-only .media-card[b-drf2m2gh01] {
        width: min(820px,100%);
        padding: .5rem;
    }

        .resources .modal-content.is-video-only .media-card img[b-drf2m2gh01] {
            aspect-ratio: 16/9;
            object-fit: cover;
            border-radius: 10px;
        }

    .resources .modal-content.is-video-only .modal-desc[b-drf2m2gh01],
    .resources .modal-content.is-video-only .modal-actions[b-drf2m2gh01] {
        max-width: min(820px,100%);
    }

/* BOOK ONLY mobile layout */
@media (max-width:980px) {
    .resources .modal-content.is-book-only[b-drf2m2gh01] {
        grid-template-columns: 1fr;
        row-gap: 1rem;
        justify-items: center;
        align-items: start;
    }

        .resources .modal-content.is-book-only .modal-media[b-drf2m2gh01] {
            order: 0;
            width: 100%;
            display: grid;
            place-items: center;
        }

        .resources .modal-content.is-book-only .modal-body[b-drf2m2gh01] {
            order: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .resources .modal-content.is-book-only .media-card[b-drf2m2gh01] {
            width: min(384px,100%);
            padding: .5rem;
        }

            .resources .modal-content.is-book-only .media-card img[b-drf2m2gh01] {
                aspect-ratio: 3/4;
                object-fit: cover;
                border-radius: 10px;
            }

        .resources .modal-content.is-book-only .modal-desc[b-drf2m2gh01],
        .resources .modal-content.is-book-only .modal-actions[b-drf2m2gh01],
        .resources .modal-content.is-book-only .modal-badges[b-drf2m2gh01] {
            max-width: min(640px,92vw);
        }

        .resources .modal-content.is-book-only .modal-badges[b-drf2m2gh01] {
            justify-content: center;
        }
}

/* Large desktop comfort width */
@media (min-width:1400px) {
    .resources .modal[b-drf2m2gh01] {
        width: min(945px,96vw);
    }
}

/* Mobile: slightly smaller chip text */
@media (max-width: 640px) {
    .resources .filter-label[b-drf2m2gh01],
    .resources .chip[b-drf2m2gh01] {
        font-size: 90%;
    }
}


/* Override global modal close styles ONLY for Resources section */
.resources .modal-close[b-drf2m2gh01] {
    all: unset; /* Remove every inherited property (resets from global styles) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    color: var(--text, #1a1a1a);
    cursor: pointer;
    transition: background 0.2s ease;
}

    .resources .modal-close:hover[b-drf2m2gh01] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text, #1a1a1a);
    }


/* Keep the header content from colliding with the close button */
.resources .modal-head[b-drf2m2gh01] {
    position: relative;
    padding-right: 64px; /* space reserved for the close button */
}

/* Close button: absolute in header, 1.25 × height, comfortably tappable */
.resources .modal-close[b-drf2m2gh01] {
    all: unset;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 1.25 × height */
    width: 50px; /* 1.25 × 40 */
    height: 40px;
    border-radius: 12px;
    background: #f3f5f4; /* soft neutral so it doesn't compete with tabs */
    color: var(--ink-800, #1f2f2a);
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.10);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .resources .modal-close:hover[b-drf2m2gh01] {
        background: #eceeed;
        transform: translateY(-50%) scale(1.03);
        box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.14);
    }

    /* Make sure the icon scales nicely */
    .resources .modal-close svg[b-drf2m2gh01] {
        width: 20px;
        height: 20px;
    }

/* Touch devices: ensure ≥44px tap target while keeping 1.25× ratio */
@media (hover: none) and (pointer: coarse) {
    .resources .modal-close[b-drf2m2gh01] {
        width: 56px; /* 1.25 × 45-ish */
        height: 45px;
        border-radius: 14px;
    }
}



/* _content/mentalease.blazor/Components/Shared/Language.razor.rz.scp.css */
/* --- Visibility rules (the fix) --- */

/* By default, show desktop variant and hide mobile variant */
.lang-dd[data-dd="desktop"][b-hc8rdwbqux] {
    display: inline-block;
}

.lang-dd[data-dd="mobile"][b-hc8rdwbqux] {
    display: none;
}

/* On small screens, swap visibility */
@media (max-width: 900px) {
    .lang-dd[data-dd="desktop"][b-hc8rdwbqux] {
        display: none;
    }

    .lang-dd[data-dd="mobile"][b-hc8rdwbqux] {
        display: block;
    }
}

/* --- Existing styles below (keep your current ones) --- */

/* keep it above surrounding content by default */
.lang-dd[b-hc8rdwbqux] {
    position: relative;
    z-index: 7000;
    display: inline-block;
}

.notranslate[b-hc8rdwbqux] {
    unicode-bidi: plaintext;
}

.lang-dd .lang-btn[b-hc8rdwbqux] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: var(--card,#fff);
    color: var(--text,#111);
    min-width: 260px;
    cursor: pointer;
}

    .lang-dd .lang-btn:focus[b-hc8rdwbqux] {
        outline: none;
        border-color: rgba(0,120,255,.45);
        box-shadow: 0 0 0 4px rgba(0,120,255,.15);
    }

.lang-dd .lang-flag[b-hc8rdwbqux] {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
}

.lang-dd .chev[b-hc8rdwbqux] {
    width: 16px;
    height: 16px;
    margin-left: auto;
    fill: currentColor;
    opacity: .6;
}

.lang-dd.open .chev[b-hc8rdwbqux] {
    transform: rotate(180deg);
}

.lang-dd .lang-list[b-hc8rdwbqux] {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    left: 0;
    width: 100%;
    max-height: min(60vh, 420px);
    overflow: auto;
    background: var(--card,#fff);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    padding: .35rem;
    margin: 0;
    list-style: none;
    display: none;
}

.lang-dd.open .lang-list[b-hc8rdwbqux] {
    display: block;
}

.lang-dd .lang-list li[b-hc8rdwbqux] {
    margin: 0;
    padding: 0;
}

.lang-dd .lang-list button[b-hc8rdwbqux] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: .55rem .5rem;
    cursor: pointer;
    text-align: left;
    color: var(--text,#111);
}

    .lang-dd .lang-list button:hover[b-hc8rdwbqux],
    .lang-dd .lang-list button:focus[b-hc8rdwbqux] {
        background: rgba(0,0,0,.05);
        outline: none;
    }

.lang-dd .lang-list img[b-hc8rdwbqux] {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
}

/* Mobile spacing tweak when used inside the drawer */
.lang-dd[data-dd="mobile"][b-hc8rdwbqux] {
    padding: .75rem 1rem 1rem;
}

/* Visually-hidden helper (if not in app.css) */
.visually-hidden[b-hc8rdwbqux] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* _content/mentalease.blazor/Components/Shared/SiteHeader.razor.rz.scp.css */
/* Layout */
.site-header[b-0832q8malb] {
    position: relative; /* so z-index applies */
    z-index: 5000; /* keep header above sections */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 0;
}

.brand[b-0832q8malb] {
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
}

.header-right[b-0832q8malb] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Desktop nav */
.site-nav.desktop[b-0832q8malb] {
    display: inline-flex;
    gap: .5rem;
}

    .site-nav.desktop a[b-0832q8malb] {
        color: var(--text);
        text-decoration: none;
        padding: .35rem .6rem;
        border-radius: 8px;
    }

        .site-nav.desktop a:hover[b-0832q8malb] {
            background: rgba(0,0,0,.05);
        }

/* Hamburger */
.hamburger[b-0832q8malb] {
    display: none;
    border: 0;
    background: transparent;
    color: var(--text);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    cursor: pointer;
}

    .hamburger:hover[b-0832q8malb] {
        background: rgba(0,0,0,.05);
    }

/* Breakpoint */
@media (max-width: 900px) {
    .site-nav.desktop[b-0832q8malb] {
        display: none;
    }

    .hamburger[b-0832q8malb] {
        display: grid;
        place-items: center;
    }
}

/* Backdrop */
.drawer-backdrop[b-0832q8malb] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, background .25s ease;
    z-index: 40;
}

    .drawer-backdrop.show[b-0832q8malb] {
        background: rgba(0,0,0,.38);
        opacity: 1;
        pointer-events: auto;
    }

/* Drawer */
.mobile-nav[b-0832q8malb] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--card,#fff);
    box-shadow: -20px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: visible; /* allow dropdown to extend */
}

    .mobile-nav.open[b-0832q8malb] {
        transform: translateX(0);
    }

.mobile-nav-header[b-0832q8malb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.mobile-nav .brand[b-0832q8malb] {
    font-weight: 800;
}

.mobile-nav .close[b-0832q8malb] {
    border: 0;
    background: transparent;
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
}

    .mobile-nav .close:hover[b-0832q8malb] {
        background: rgba(0,0,0,.05);
    }

.mobile-list[b-0832q8malb] {
    list-style: none;
    margin: 0;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .mobile-list a[b-0832q8malb] {
        display: block;
        padding: .85rem 1rem;
        border-radius: 12px;
        color: var(--text);
        text-decoration: none;
    }

        .mobile-list a:hover[b-0832q8malb] {
            background: rgba(0,0,0,.05);
        }

.brand[b-0832q8malb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--green, #22c55e);
    text-decoration: none;
}

.brand-icon[b-0832q8malb] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}

.mobile-nav-header .brand[b-0832q8malb] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 800;
    font-size: 1.25rem;
}

.mobile-nav-header .brand-icon[b-0832q8malb] {
    width: 26px;
    height: 26px;
}