/* ============================================================
   FreeStenoHub — Shorthand Dictation Listing
   NEW UI / V4
   Works with the existing PHP/HTML unchanged
   ============================================================ */

:root{
    --sd-navy:#19243A;
    --sd-navy-2:#202C45;
    --sd-purple:#4F329A;
    --sd-purple-2:#6948BE;
    --sd-pink:#E72D76;
    --sd-pink-soft:#FCEAF2;
    --sd-lav:#F0E5ED;
    --sd-bg:#F9F8FA;
    --sd-surface:#FFFFFF;
    --sd-surface-2:#FCFBFD;
    --sd-text:#747490;
    --sd-text-dark:#313A50;
    --sd-border:#E7E5EE;
    --sd-success:#1F9D68;
    --sd-warning:#C67C12;
    --sd-shadow:0 18px 50px rgba(25,36,58,.08);
    --sd-shadow-hover:0 26px 60px rgba(25,36,58,.15);
}

/* ---------- page reset ---------- */
main{
    overflow-x:clip;
    background:
        radial-gradient(circle at 8% 18%, rgba(79,50,154,.07), transparent 24%),
        radial-gradient(circle at 90% 8%, rgba(231,45,118,.06), transparent 22%),
        var(--sd-bg);
}

main *,
main *::before,
main *::after{
    box-sizing:border-box;
}

main a{
    text-decoration:none;
}

main .container{
    position:relative;
    z-index:2;
}

.h2-heading{
    color:var(--sd-navy);
    font-size:clamp(26px,4vw,44px);
    font-weight:900;
    letter-spacing:-1px;
    line-height:1.12;
    margin:0;
}

.h4-heading{
    color:var(--sd-navy)!important;
    font-size:18px;
    font-weight:850;
    line-height:1.4;
    margin:0;
}

.h5-heading{
    color:var(--sd-navy);
    font-weight:900;
}

.h6-heading{
    color:var(--sd-navy);
    font-size:16px;
    font-weight:850;
    line-height:1.4;
    margin:0;
}

.p-lg{
    max-width:720px;
    margin:14px auto 0;
    color:var(--sd-text);
    font-size:15.5px;
    line-height:1.75;
}

.p-para{
    color:var(--sd-text);
    line-height:1.65;
}

/* ============================================================
   COMPACT BREADCRUMB / CONTEXT BAR
   ============================================================ */
.fshbreadcrumb{
    position:relative;
    padding:22px 0;
    background:var(--sd-navy);
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.fshbreadcrumb::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    right:-150px;
    top:-230px;
    background:radial-gradient(circle, rgba(231,45,118,.32), transparent 68%);
}

.fshbreadcrumb::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    left:-120px;
    bottom:-210px;
    background:radial-gradient(circle, rgba(79,50,154,.55), transparent 70%);
}

.fshbreadcrumb .h2-heading{
    color:#fff;
    font-size:clamp(22px,3vw,31px);
    letter-spacing:-.4px;
}

.fshbreadcrumb .breadcrumb{
    margin:0;
    padding:0;
    background:transparent;
}

.fshbreadcrumb .breadcrumb-item,
.fshbreadcrumb .breadcrumb-item a{
    color:rgba(255,255,255,.72);
    font-size:13px;
    font-weight:700;
}

.fshbreadcrumb .breadcrumb-item a:hover{
    color:#fff;
}

.fshbreadcrumb .breadcrumb-item.active{
    color:#fff;
}

.fshbreadcrumb .breadcrumb-item + .breadcrumb-item::before{
    color:rgba(255,255,255,.32);
}

/* ============================================================
   MAIN LIBRARY SECTION
   ============================================================ */
.fshdictation-list-section{
    position:relative;
    padding:76px 0 88px;
    background:transparent;
}

.fshdictation-list-section::before{
    content:"AUDIO LIBRARY";
    position:absolute;
    left:50%;
    top:24px;
    transform:translateX(-50%);
    color:rgba(79,50,154,.035);
    font-size:clamp(56px,11vw,150px);
    font-weight:950;
    letter-spacing:-5px;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}

.fshsection-header{
    position:relative;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:8px;
}

.header-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--sd-lav);
    color:var(--sd-purple);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.header-tag i{
    color:var(--sd-pink);
}

/* make the heading feel editorial, not old generic section */
.fshsection-header .h2-heading{
    max-width:680px;
    margin-inline:auto;
}

.fshsection-header .p-lg{
    max-width:650px;
}

/* ============================================================
   SEARCH / FILTER — NEW TOOLBAR
   ============================================================ */

/* target the existing Bootstrap wrapper without changing PHP */
.fshdictation-list-section > .container > .row.mb-5{
    margin-top:34px!important;
    margin-bottom:38px!important;
}

.fshdictation-list-section > .container > .row.mb-5 > .col-lg-8{
    width:100%;
    max-width:980px;
}

.fshdictation-list-section > .container > .row.mb-5 .card{
    position:relative;
    padding:10px!important;
    border-radius:22px!important;
    background:#fff!important;
    border:1px solid var(--sd-border)!important;
    box-shadow:0 14px 38px rgba(25,36,58,.07)!important;
}

.fshdictation-list-section > .container > .row.mb-5 .card::before{
    content:"Find your next practice";
    position:absolute;
    left:20px;
    top:-27px;
    color:var(--sd-text);
    font-size:11px;
    font-weight:850;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.fshdictation-list-section .input-group{
    height:50px;
    border-radius:15px;
    background:var(--sd-bg);
    border:1px solid transparent;
    transition:.25s ease;
    overflow:hidden;
}

.fshdictation-list-section .input-group:focus-within{
    background:#fff;
    border-color:rgba(79,50,154,.34);
    box-shadow:0 0 0 4px rgba(79,50,154,.07);
}

.fshdictation-list-section .input-group-text{
    width:48px;
    justify-content:center;
    border:0!important;
    background:transparent!important;
    color:var(--sd-purple)!important;
    border-radius:0!important;
}



#accessFilterSelect{
    height:50px!important;
    border:1px solid var(--sd-border)!important;
    border-radius:15px!important;
    background-color:var(--sd-bg);
    color:var(--sd-navy);
    font-size:13px;
    font-weight:750;
    box-shadow:none!important;
    cursor:pointer;
    padding-left:16px;
}

#accessFilterSelect:focus{
    background-color:#fff;
    border-color:rgba(79,50,154,.38)!important;
    box-shadow:0 0 0 4px rgba(79,50,154,.07)!important;
}

/* ============================================================
   DICTATION GRID
   ============================================================ */
.fshdictation-list-section > .container > .row.g-4{
    --bs-gutter-x:22px;
    --bs-gutter-y:22px;
}

.filterable-card{
    display:flex;
}

/* ============================================================
   COMPLETELY NEW AUDIO SESSION CARD
   ============================================================ */
.fshdictation-card{
    position:relative;
    width:100%;
    min-height:318px;
    padding:22px;
    overflow:hidden;
    border-radius:24px;
    background:
        linear-gradient(180deg,#fff 0%,#fff 72%,#FCFAFD 100%);
    border:1px solid var(--sd-border);
    box-shadow:0 12px 34px rgba(25,36,58,.055);
    display:flex;
    flex-direction:column;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
    isolation:isolate;
}

.fshdictation-card::before{
    content:"";
    position:absolute;
    width:155px;
    height:155px;
    right:-68px;
    top:-74px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(79,50,154,.13),rgba(231,45,118,.11));
    z-index:-1;
}

.fshdictation-card::after{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    top:79px;
    height:26px;
    opacity:.12;
    background:
      linear-gradient(90deg,
        transparent 0 2%,
        var(--sd-purple) 2% 3%,
        transparent 3% 7%,
        var(--sd-purple) 7% 8%,
        transparent 8% 11%,
        var(--sd-purple) 11% 13%,
        transparent 13% 17%,
        var(--sd-purple) 17% 18%,
        transparent 18% 22%,
        var(--sd-purple) 22% 24%,
        transparent 24% 30%,
        var(--sd-purple) 30% 31%,
        transparent 31% 35%,
        var(--sd-purple) 35% 38%,
        transparent 38% 43%,
        var(--sd-purple) 43% 44%,
        transparent 44% 49%,
        var(--sd-purple) 49% 51%,
        transparent 51% 56%,
        var(--sd-purple) 56% 58%,
        transparent 58% 62%,
        var(--sd-purple) 62% 63%,
        transparent 63% 69%,
        var(--sd-purple) 69% 72%,
        transparent 72% 78%,
        var(--sd-purple) 78% 80%,
        transparent 80% 86%,
        var(--sd-purple) 86% 87%,
        transparent 87% 92%,
        var(--sd-purple) 92% 95%,
        transparent 95% 100%);
    mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    pointer-events:none;
}

.fshdictation-card:hover{
    transform:translateY(-7px);
    border-color:rgba(79,50,154,.28);
    box-shadow:var(--sd-shadow-hover);
}

.fshcard-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:40px;
    margin-bottom:62px;
}

.fshcard-category{
    display:inline-flex;
    align-items:center;
    gap:7px;
    max-width:100%;
    padding:8px 11px;
    border-radius:12px;
    background:var(--sd-navy);
    color:#fff!important;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.fshcard-category i{
    color:#F3B8D0;
}

/* Title */
.fshdictation-card .card-title-text{
    position:relative;
    z-index:2;
    min-height:52px;
    margin:0 0 18px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    color:var(--sd-navy)!important;
    font-size:18px;
    font-weight:900;
    line-height:1.45;
    letter-spacing:-.15px;
}

/* meta chips */
.fshcard-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0!important;
}

.fshcard-meta + .fshcard-meta{
    margin-top:9px!important;
}

.fshcard-meta span,
.fshcard-meta b{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:31px;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid var(--sd-border);
    background:#FAF9FB;
    color:var(--sd-text-dark);
    font-size:11px;
    font-weight:800;
    line-height:1.2;
}

.fshcard-meta i{
    color:var(--sd-purple);
}

/* access badge */
.fshcard-meta .free,
.fshcard-meta .doz-free{
    border-color:rgba(31,157,104,.16);
    background:#EEF9F4;
    color:var(--sd-success)!important;
}

.fshcard-meta .paid{
    border-color:rgba(231,45,118,.15);
    background:var(--sd-pink-soft);
    color:#BB2560!important;
}

.fshcard-meta .paid i{
    color:var(--sd-pink);
}

/* Start Practice as a footer action, not old generic pill */
.fshdictation-card .site-btn{
    position:relative;
    z-index:2;
    width:100%;
    min-height:48px;
    margin-top:auto!important;
    padding:12px 15px;
    border:0;
    border-radius:14px;
    background:var(--sd-navy);
    color:#fff!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
    font-weight:900;
    box-shadow:none;
    transition:.25s ease;
}

.fshdictation-card .site-btn::before{
    content:"Listen • Write • Transcribe";
    color:rgba(255,255,255,.58);
    font-size:9px;
    font-weight:750;
    letter-spacing:.3px;
    position:absolute;
    left:15px;
    bottom:5px;
    opacity:0;
    transform:translateY(4px);
    transition:.25s ease;
}

.fshdictation-card .site-btn:hover{
    padding-bottom:20px;
    background:linear-gradient(135deg,var(--sd-purple),var(--sd-navy));
    color:#fff!important;
    transform:none;
}

.fshdictation-card .site-btn:hover::before{
    opacity:1;
    transform:translateY(0);
}

.fshdictation-card .site-btn i{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:rgba(255,255,255,.10);
    color:#fff;
    margin-left:auto!important;
}

/* ============================================================
   EMPTY STATE — NEW PANEL
   ============================================================ */
.fshdictation-list-section .alert{
    position:relative;
    overflow:hidden;
    max-width:760px;
    margin:10px auto 0;
    padding:56px 30px!important;
    border:1px solid var(--sd-border)!important;
    border-radius:28px!important;
    background:#fff!important;
    box-shadow:var(--sd-shadow)!important;
}

.fshdictation-list-section .alert::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-100px;
    top:-120px;
    border-radius:50%;
    background:var(--sd-lav);
}

.fshdictation-list-section .alert .fa-4x{
    position:relative;
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    border-radius:22px;
    background:var(--sd-navy);
    color:#fff!important;
    font-size:26px!important;
}

.fshdictation-list-section .alert .btn-primary{
    min-height:45px;
    padding:11px 20px;
    border:0;
    border-radius:13px;
    background:var(--sd-purple);
    font-size:13px;
    font-weight:850;
}

/* ============================================================
   FALLBACK CATEGORY SECTION
   ============================================================ */
.typing-cat-list{
    position:relative;
    padding:78px 0 90px;
    background:#fff;
    border-top:1px solid var(--sd-border);
}

.typing-header-tag{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 13px;
    margin-bottom:14px;
    border-radius:999px;
    background:var(--sd-pink-soft);
    color:var(--sd-pink);
    font-size:11px;
    font-weight:900;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.typing-cat-list .row.justify-content-center:last-child{
    margin-top:36px;
}

.dc-feature-card{
    position:relative;
    height:100%;
    padding:10px;
    border:1px solid var(--sd-border);
    border-radius:22px;
    background:var(--sd-surface-2);
    overflow:hidden;
    transition:.28s ease;
    display:flex;
    flex-direction:column;
}

.dc-feature-card:hover{
    transform:translateY(-6px);
    background:#fff;
    border-color:rgba(79,50,154,.24);
    box-shadow:var(--sd-shadow);
}

.dc-image-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:16px;
    background:var(--sd-lav);
}

.dc-image-wrapper::after{
    content:"Practice Track";
    position:absolute;
    left:10px;
    bottom:10px;
    padding:6px 9px;
    border-radius:9px;
    background:rgba(25,36,58,.84);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.dc-image-wrapper img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .4s ease;
}

.dc-feature-card:hover img{
    transform:scale(1.05);
}

.dc-feature-card .h6-heading{
    margin:16px 4px 13px;
    min-height:44px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.dc-feature-card .site-btn{
    margin-top:auto;
    min-height:44px;
    padding:10px 14px;
    border-radius:13px;
    background:var(--sd-navy);
    color:#fff!important;
    font-size:12px;
    font-weight:850;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    box-shadow:none;
}

.dc-feature-card .site-btn:hover{
    background:var(--sd-purple);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1200px){
    .fshdictation-list-section .col-xl-3{
        width:33.333333%;
    }
}

@media (max-width:991.98px){
    .fshdictation-list-section{
        padding:62px 0 72px;
    }

    .fshdictation-list-section::before{
        font-size:90px;
        top:32px;
    }

    .fshbreadcrumb{
        padding:20px 0;
    }

    .fshbreadcrumb nav{
        margin-top:10px;
    }

    .fshdictation-card{
        min-height:305px;
    }
}

@media (max-width:767.98px){
    .fshdictation-list-section{
        padding:54px 0 64px;
    }

    .fshdictation-list-section::before{
        display:none;
    }

    .fshsection-header{
        margin-bottom:36px!important;
    }

    .fshdictation-list-section > .container > .row.mb-5 .card{
        padding:9px!important;
    }

    .fshdictation-list-section > .container > .row.mb-5 .card::before{
        display:none;
    }

    .fshdictation-list-section > .container > .row.mb-5{
        margin-top:0!important;
        margin-bottom:28px!important;
    }

    .fshdictation-card{
        min-height:295px;
    }

    .typing-cat-list{
        padding:58px 0 68px;
    }
}

@media (max-width:575.98px){
    .fshbreadcrumb .d-lg-flex{
        display:flex;
        flex-direction:column;
        align-items:flex-start!important;
        gap:8px;
    }

    .fshbreadcrumb .breadcrumb{
        justify-content:flex-start!important;
    }

    .fshsection-header .h2-heading{
        font-size:30px;
    }

    .p-lg{
        font-size:14px;
    }

    .fshdictation-card{
        padding:18px;
        min-height:288px;
        border-radius:20px;
    }

    .fshcard-top{
        margin-bottom:58px;
    }

    .fshdictation-card::after{
        left:18px;
        right:18px;
    }

    .fshdictation-card .card-title-text{
        font-size:17px;
    }

    .fshdictation-card .site-btn{
        border-radius:12px;
    }
}

/* ============================================================
   OVERRIDE OLD GLOBAL SITE CSS SAFELY
   ============================================================ */
.fshdictation-list-section .fshdictation-card,
.fshdictation-list-section .fshdictation-card:hover{
    color:var(--sd-navy);
}

.fshdictation-list-section .fshdictation-card .site-btn,
.fshdictation-list-section .fshdictation-card .site-btn:hover,
.fshdictation-list-section .fshdictation-card .site-btn:focus{
    color:#fff!important;
    text-decoration:none!important;
}

.typing-cat-list .dc-feature-card .site-btn,
.typing-cat-list .dc-feature-card .site-btn:hover,
.typing-cat-list .dc-feature-card .site-btn:focus{
    color:#fff!important;
    text-decoration:none!important;
}