/**
 * Clinical Library - Speaker & Course pages
 * Dark editorial skin matching the /library/ bookshelf.
 * Loaded only on single dla_speaker and dla_online_course pages.
 */

.dla-speaker-profile,
.dla-single-course{
    --lib-acc:#b59458;
    --lib-acc-2:#cdac6c;
    --lib-acc-rgb:181,148,88;
    --lib-ink:#f1ece1;
    --lib-muted:#aebfb4;
    --lib-line:rgba(181,148,88,.18);
    --lib-panel:rgba(255,255,255,.035);
    --lib-ease:cubic-bezier(.22,.61,.36,1);

    width:100vw !important;
    max-width:100vw !important;
    box-sizing:border-box;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0;
    padding-right:0;
    overflow:visible;
    position:relative;
    background:radial-gradient(130% 130% at 50% 0%,#13241d,#0a1712 45%,#050d0a 100%) !important;
    color:var(--lib-ink);
    font-family:'DM Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
}

/* Typography ------------------------------------------------------------ */
.dla-speaker-profile h1,.dla-speaker-profile h2,.dla-speaker-profile h3,
.dla-single-course h1,.dla-single-course h2,.dla-single-course h3{
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    color:var(--lib-ink) !important;
    letter-spacing:.02em;
    text-shadow:none !important;
}
.dla-speaker-profile h1,.dla-single-course h1{
    text-transform:uppercase;
    letter-spacing:.05em;
    font-weight:600 !important;
}
.dla-speaker-profile p,.dla-single-course p,
.dla-speaker-profile li,.dla-single-course li{
    color:var(--lib-muted);
    font-weight:300;
    line-height:1.85;
}
.dla-speaker-profile a,.dla-single-course a{color:var(--lib-acc-2);}
.dla-speaker-profile strong,.dla-single-course strong{color:var(--lib-ink);}

/* Panels: anything that used to be a white card ------------------------- */
.dla-speaker-profile .dla-sp-section,
.dla-speaker-profile .dla-sp-card,
.dla-single-course .dla-course-description,
.dla-single-course .dla-course-documents,
.dla-single-course .dla-course-sidebar,
.dla-single-course .dla-quiz-section,
.dla-single-course .dla-course-speaker-strip{
    background:var(--lib-panel) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:6px !important;
    box-shadow:none !important;
    color:var(--lib-ink);
}

/* Banners --------------------------------------------------------------- */
.dla-speaker-profile .dla-sp-banner,
.dla-single-course .dla-course-banner{
    position:relative;
    border-bottom:1px solid var(--lib-line);
}
.dla-speaker-profile .dla-sp-banner::after,
.dla-single-course .dla-course-banner::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(5,13,10,.45),rgba(5,13,10,.82) 70%,#050d0a);
}
.dla-speaker-profile .dla-sp-banner > *,
.dla-single-course .dla-course-banner > *{position:relative;z-index:2;}
.dla-single-course .dla-banner-overlay{background:none !important;}
.dla-single-course .dla-course-header-simple{
    background:none !important;
    border-bottom:1px solid var(--lib-line);
    padding:46px 24px 30px;
}

/* Speaker photo --------------------------------------------------------- */
.dla-speaker-profile .dla-sp-photo{
    background:linear-gradient(180deg,#1a2c24,#0d1a14) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:4px 8px 8px 4px !important;
    padding:6px !important;
    box-shadow:0 26px 40px -22px rgba(0,0,0,.85) !important;
}
.dla-speaker-profile .dla-sp-photo img{border-radius:3px;}

/* Sticky bar ------------------------------------------------------------ */
.dla-speaker-profile .dla-speaker-sticky-bar,
.dla-single-course #dla-price-sticky{
    background:rgba(6,16,12,.92) !important;
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--lib-line) !important;
    box-shadow:0 10px 30px -18px rgba(0,0,0,.9) !important;
}
.dla-speaker-profile .dla-speaker-sticky-bar *{color:var(--lib-ink) !important;}

/* Buttons --------------------------------------------------------------- */
.dla-speaker-profile .dla-btn,.dla-single-course .dla-btn,
.dla-single-course .dla-buy-course,
.dla-single-course .dla-course-sidebar a[href],
.dla-single-course button.dla-btn-primary{
    font:500 11.5px 'DM Sans',sans-serif !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    border-radius:6px !important;
    transition:transform .3s var(--lib-ease),background .3s var(--lib-ease);
}
.dla-single-course .dla-btn-primary,
.dla-single-course .dla-buy-course{
    background:var(--lib-acc) !important;
    border:1px solid var(--lib-acc) !important;
    color:#04100c !important;
}
.dla-single-course .dla-btn-primary:hover,
.dla-single-course .dla-buy-course:hover{
    background:var(--lib-acc-2) !important;
    transform:translateY(-2px);
}
.dla-single-course .dla-btn-secondary{
    background:transparent !important;
    border:1px solid var(--lib-acc) !important;
    color:var(--lib-acc) !important;
}
.dla-single-course .dla-btn-secondary:hover{background:rgba(var(--lib-acc-rgb),.12) !important;}

/* Video ----------------------------------------------------------------- */
.dla-single-course .dla-video-container{
    border:1px solid var(--lib-line);
    border-radius:6px;
    overflow:hidden;
    background:#020805;
    box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
.dla-single-course .dla-video-locked,
.dla-single-course .dla-locked-overlay{
    background:linear-gradient(180deg,rgba(10,23,18,.72),rgba(5,13,10,.94)) !important;
    color:var(--lib-ink) !important;
}

/* Price ----------------------------------------------------------------- */
.dla-single-course .dla-price,
.dla-single-course .dla-course-price{
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    color:var(--lib-ink) !important;
}
.dla-single-course .dla-price-old,
.dla-single-course del{color:#7d8f84 !important;}

/* Documents / resources -------------------------------------------------- */
.dla-single-course .dla-course-documents a{color:var(--lib-acc-2) !important;}
.dla-single-course .dla-doc-item{
    background:rgba(255,255,255,.02) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:5px;
}

/* Course cards on the speaker page --------------------------------------- */
.dla-speaker-profile .dla-ac-card,
.dla-speaker-profile .mc-card{
    background:rgba(255,255,255,.03) !important;
    border:1px solid rgba(241,236,225,.1) !important;
    border-radius:6px !important;
    box-shadow:none !important;
    transition:transform .35s var(--lib-ease),border-color .35s var(--lib-ease);
}
.dla-speaker-profile .dla-ac-card:hover,
.dla-speaker-profile .mc-card:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--lib-acc-rgb),.4) !important;
    box-shadow:0 18px 30px -18px rgba(0,0,0,.7) !important;
}
.dla-speaker-profile .dla-ac-card h3,
.dla-speaker-profile .mc-card h3{font-size:19px !important;}

/* Section headings ------------------------------------------------------- */
.dla-speaker-profile .dla-sp-section-title,
.dla-single-course .dla-section-title{
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    font-weight:500 !important;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:13px !important;
    color:var(--lib-acc) !important;
    display:flex;align-items:center;gap:16px;
}
.dla-speaker-profile .dla-sp-section-title::after,
.dla-single-course .dla-section-title::after{
    content:"";flex:1;height:1px;background:var(--lib-line);
}

/* Social icons ----------------------------------------------------------- */
.dla-speaker-profile a[href^="mailto"],
.dla-speaker-profile a[href*="linkedin"],
.dla-speaker-profile a[href*="facebook"],
.dla-speaker-profile a[href*="instagram"]{
    border:1px solid var(--lib-line) !important;
    background:rgba(255,255,255,.03) !important;
    color:var(--lib-acc) !important;
}

/* Modals ----------------------------------------------------------------- */
.dla-single-course .dla-modal-content,
.dla-single-course #dla-quiz-container,
.dla-single-course #dla-feedback-modal .dla-modal-content{
    background:#0b1a14 !important;
    border:1px solid var(--lib-line) !important;
    color:var(--lib-ink) !important;
}

/* Tables / meta rows ------------------------------------------------------ */
.dla-speaker-profile table,.dla-single-course table{color:var(--lib-muted);}
.dla-speaker-profile hr,.dla-single-course hr{border-color:var(--lib-line);}

/* Inline overrides left in the markup ------------------------------------- */
.dla-speaker-profile [style*="background:#fff"],
.dla-single-course [style*="background:#fff"],
.dla-speaker-profile [style*="background: #fff"],
.dla-single-course [style*="background: #fff"]{background:var(--lib-panel) !important;}

/* Mobile ------------------------------------------------------------------ */
@media (max-width:860px){
    .dla-speaker-profile .dla-sp-profile-header{margin-top:-90px !important;}
    .dla-speaker-profile .dla-sp-photo{width:150px !important;height:150px !important;}
    .dla-single-course .dla-course-layout{display:block !important;}
    .dla-single-course .dla-course-sidebar{margin-top:24px;}
}
@media (max-width:640px){
    .dla-speaker-profile h1,.dla-single-course h1{font-size:24px !important;}
    .dla-speaker-profile .dla-sp-banner{height:200px !important;}
    .dla-single-course .dla-course-header-simple{padding:32px 16px 22px;}
}

/* ---- Contrast rescue -----------------------------------------------------
   Cards, stats and prices are produced by shared renderers that hardcode the
   old light-theme colours inline. Nothing readable may stay navy on dark. */
.dla-speaker-profile [style*="color:#1a365d"],
.dla-speaker-profile [style*="color:#1c3a62"],
.dla-speaker-profile [style*="color:#1e293b"],
.dla-speaker-profile [style*="color:#0f172a"],
.dla-speaker-profile [style*="color: #1a365d"],
.dla-single-course [style*="color:#1a365d"],
.dla-single-course [style*="color:#1c3a62"],
.dla-single-course [style*="color:#1e293b"],
.dla-single-course [style*="color:#0f172a"]{color:var(--lib-ink) !important;}

.dla-speaker-profile .dla-ac-card h3,
.dla-speaker-profile .dla-ac-card h3 a,
.dla-speaker-profile .dla-ac-card a,
.dla-speaker-profile .mc-card h3,
.dla-speaker-profile .mc-card a{color:var(--lib-ink) !important;}
.dla-speaker-profile .dla-ac-card h3 a:hover,
.dla-speaker-profile .mc-card a:hover{color:var(--lib-acc-2) !important;}

/* Prices */
.dla-speaker-profile .dla-ac-price,
.dla-speaker-profile [class*="price"]:not(del):not(s),
.dla-single-course [class*="price"]:not(del):not(s){color:var(--lib-ink) !important;}
.dla-speaker-profile del,.dla-speaker-profile s,
.dla-single-course del,.dla-single-course s{color:#7d8f84 !important;}

/* Stat blocks (courses / events counters) */
.dla-speaker-profile .dla-sp-stat,
.dla-speaker-profile .dla-sp-stats > div{
    background:var(--lib-panel) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:6px !important;
}
.dla-speaker-profile .dla-sp-stat-num,
.dla-speaker-profile .dla-sp-stats > div > *:first-child{
    color:var(--lib-acc) !important;
    font-family:'Marcellus','Cormorant Garamond',serif !important;
}
.dla-speaker-profile .dla-sp-stats > div > *:last-child{
    color:var(--lib-muted) !important;
    letter-spacing:.18em;
}

/* Arrows and small glyphs that inherited the old accent */
.dla-speaker-profile svg[fill]:not([fill="none"]),
.dla-speaker-profile .dla-ac-arrow{fill:var(--lib-acc) !important;}
.dla-speaker-profile .dla-ac-arrow,
.dla-speaker-profile .dla-ac-card svg{color:var(--lib-acc) !important;stroke:var(--lib-acc) !important;}

/* Section headings rendered as plain h2 inside the profile */
.dla-speaker-profile h2{
    font-size:15px !important;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--lib-acc) !important;
    font-weight:500 !important;
}

/* Theme brand navy (#202c46) injected inline by shared card renderers */
.dla-speaker-profile [style*="#202c46"],
.dla-single-course [style*="#202c46"]{color:var(--lib-acc) !important;}
.dla-speaker-profile [style*="background:#202c46"],
.dla-single-course [style*="background:#202c46"]{background:var(--lib-panel) !important;}
.dla-speaker-profile svg,.dla-single-course svg{color:var(--lib-acc);}

/* ---- Theme page-title band --------------------------------------------
   The theme prints its own navy title header above our content. Our pages
   carry their own heading, so the band is redundant. */
/* The theme's page-title band is hidden from PHP (DLA_Frontend::hide_title_band)
   so it can never reach the Elementor editor and blank the canvas. */

/* ---- Course title, now under the player ------------------------------- */
.dla-single-course .dla-course-header-empty{display:none !important;}
.dla-single-course .dla-course-title-below{
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    font-size:32px !important;
    font-weight:600 !important;
    line-height:1.15 !important;
    letter-spacing:.03em;
    text-transform:none !important;
    color:var(--lib-ink) !important;
    margin:26px 0 4px !important;
    padding:0 !important;
    text-shadow:none !important;
}
.dla-single-course .dla-course-title-below::after{
    content:"";display:block;width:54px;height:1px;
    background:var(--lib-acc);opacity:.7;margin-top:16px;
}

/* ---- Instructors panel ------------------------------------------------- */
.dla-single-course .dla-speakers-card{
    background:var(--lib-panel) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:6px !important;
    box-shadow:none !important;
    padding:20px !important;
}
.dla-single-course .dla-speakers-card h4{
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    font-size:13px !important;
    font-weight:500 !important;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--lib-acc) !important;
    margin:0 0 14px !important;
}
/* The card body comes from speaker_card() with inline light styling */
.dla-single-course .dla-speakers-card > div{
    position:relative;
    background:rgba(255,255,255,.03) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:5px;
    transition:border-color .3s var(--lib-ease),transform .3s var(--lib-ease);
}
.dla-single-course .dla-speakers-card > div:hover{
    border-color:rgba(var(--lib-acc-rgb),.45) !important;
    transform:translateY(-2px);
}
.dla-single-course .dla-speakers-card > div + div{margin-top:10px;}
.dla-single-course .dla-speakers-card a{color:var(--lib-ink) !important;}
.dla-single-course .dla-speakers-card a:hover{color:var(--lib-acc-2) !important;}
.dla-single-course .dla-speakers-card p{color:var(--lib-muted) !important;}
.dla-single-course .dla-speakers-card svg{stroke:var(--lib-acc) !important;}
/* Make the whole row clickable, not just the name */
.dla-single-course .dla-speakers-card > div > div > a:first-child::after{
    content:"";position:absolute;inset:0;z-index:1;
}
.dla-single-course .dla-speakers-card > div > a{position:relative;z-index:2;}


/* ---- Free enrollment mode --------------------------------------------
   Prices and purchase CTAs are hidden site-wide; enrollment replaces them. */
body.dla-free-enroll #dla-price-sticky,
body.dla-free-enroll .dla-subscribe-btn,
body.dla-free-enroll .dla-buy-course{display:none !important;}
body.dla-free-enroll .lib-price-old,
body.dla-free-enroll .lib-price-now{display:none !important;}
body.dla-free-enroll .lib-price-incl{display:inline !important;}

/* ---- Sidebar alignment ------------------------------------------------
   The theme wraps the page in a transformed smooth-scroll container, which
   makes position:sticky resolve against that ancestor: the 100px offset is
   applied straight away, so the card sits 100px below the player instead of
   level with it. Pin the column to the normal flow so both columns start
   at the same line. */
.dla-single-course .dla-course-sidebar{
    position:static !important;
    top:auto !important;
    align-self:start;
    margin-top:0 !important;
}
.dla-single-course .dla-course-sidebar > *:first-child{margin-top:0 !important;}
/* The pinning itself is done in JS (enroll-modal.js), by translating this
   column; transforms are the one thing the theme's wrapper cannot distort. */
.dla-single-course .dla-course-sidebar{will-change:transform;transition:none !important;}


/* ---- Wide screens ------------------------------------------------------
   On 2K/4K the grid would stretch the player across the whole desk. Cap the
   reading width and centre it; the sidebar keeps its 350px column. */
.dla-single-course .dla-course-layout{
    max-width:1520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
.dla-single-course .dla-course-layout.dla-no-sidebar{max-width:1180px !important;}
.dla-single-course .dla-video-container,
.dla-single-course .dla-playlist-player{margin-left:auto;margin-right:auto;}

/* ---- Sidebar matches the player ---------------------------------------
   Height is set in JS from the actual player box; these rules share that
   height between the panels so the column ends level with the video. */
@media (min-width:1024px){
    .dla-single-course .dla-course-sidebar{
        display:flex;
        flex-direction:column;
        gap:16px;
        box-sizing:border-box;
    }
    .dla-single-course .dla-course-sidebar > *{box-sizing:border-box;}
    .dla-single-course .dla-course-sidebar > *{margin-bottom:0 !important;}
    .dla-single-course .dla-course-sidebar > *:first-child{
        flex:1 1 auto;
        display:flex;
        flex-direction:column;
        justify-content:center;
        min-height:0;
    }
    .dla-single-course .dla-course-sidebar > *:not(:first-child){flex:0 0 auto;}
}

/* =======================================================================
   Dashboard — Clinical Library skin
   ======================================================================= */
.mag-wrap{
    /* No viewport-width tricks here: the dashboard sits inside the theme's
       own container, and 100vw + negative margins tore the layout apart. */
    width:auto;
    max-width:100%;
    --lib-acc:#b59458; --lib-acc-2:#cdac6c; --lib-acc-rgb:181,148,88;
    --lib-ink:#f1ece1; --lib-muted:#aebfb4; --lib-line:rgba(181,148,88,.2);
    --lib-panel:rgba(255,255,255,.035);
    --lib-ease:cubic-bezier(.22,.61,.36,1);
    box-sizing:border-box;
    padding:46px 26px 80px !important;
    background:radial-gradient(130% 130% at 50% 0%,#13241d,#0a1712 45%,#050d0a 100%) !important;
    color:var(--lib-ink) !important;
    font-family:'DM Sans',sans-serif;
}
.mag-wrap h1,.mag-wrap h2,.mag-wrap h3,.mag-wrap h4{
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    color:var(--lib-ink) !important;
    letter-spacing:.02em;
}
.mag-wrap p,.mag-wrap li{color:var(--lib-muted);font-weight:300;}
.mag-wrap a{color:var(--lib-acc-2);}

/* Panels */
.mag-wrap .mag-account-card,
.mag-wrap .mag-course,
.mag-wrap .mag-cert-card,
.mag-wrap .mag-quick-card,
.mag-wrap .mag-doc,
.mag-wrap .mag-hero{
    background:var(--lib-panel) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:6px !important;
    box-shadow:none !important;
    color:var(--lib-ink);
    transition:transform .35s var(--lib-ease),border-color .35s var(--lib-ease);
}
.mag-wrap .mag-course:hover,
.mag-wrap .mag-cert-card:hover,
.mag-wrap .mag-quick-card:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--lib-acc-rgb),.42) !important;
}

/* Tabs */
.mag-wrap .mag-tabs{border-bottom:1px solid var(--lib-line) !important;}
.mag-wrap .mag-tab{
    background:transparent !important;border:none !important;
    color:var(--lib-muted) !important;
    font:500 11px 'DM Sans',sans-serif !important;
    letter-spacing:.16em !important;text-transform:uppercase !important;
    border-radius:0 !important;box-shadow:none !important;
}
.mag-wrap .mag-tab.active{
    color:var(--lib-acc) !important;
    border-bottom:2px solid var(--lib-acc) !important;
}

/* Buttons */
.mag-wrap .mag-hero-btn,
.mag-wrap .mag-course-btn,
.mag-wrap .mag-cert-dl{
    background:var(--lib-acc) !important;border:1px solid var(--lib-acc) !important;
    color:#04100c !important;border-radius:6px !important;
    font:500 11px 'DM Sans',sans-serif !important;
    letter-spacing:.16em !important;text-transform:uppercase !important;
    box-shadow:none !important;
    transition:transform .3s var(--lib-ease),background .3s var(--lib-ease);
}
.mag-wrap .mag-hero-btn:hover,
.mag-wrap .mag-course-btn:hover,
.mag-wrap .mag-cert-dl:hover{background:var(--lib-acc-2) !important;transform:translateY(-2px);}

/* Progress bars */
.mag-wrap .mag-course-pbar{background:rgba(241,236,225,.12) !important;}
.mag-wrap .mag-course-pfill{background:var(--lib-acc) !important;}
.mag-wrap .mag-course-pct{color:var(--lib-acc) !important;}

/* Inputs */
.mag-wrap input,.mag-wrap select,.mag-wrap textarea{
    background:rgba(255,255,255,.03) !important;
    border:1px solid rgba(241,236,225,.14) !important;
    color:var(--lib-ink) !important;border-radius:5px !important;
}
.mag-wrap input:focus,.mag-wrap select:focus{
    outline:none;border-color:rgba(var(--lib-acc-rgb),.75) !important;
}
.mag-wrap label{color:var(--lib-muted) !important;}

/* Avatar + medals keep the gold ring */
.mag-wrap .mag-avatar{border:1px solid var(--lib-line) !important;}
.mag-wrap .mag-cert-medal{color:var(--lib-acc) !important;}

/* Anything still carrying the old light inline values */
.mag-wrap [style*="background:#fff"],
.mag-wrap [style*="background: #fff"]{background:var(--lib-panel) !important;}
.mag-wrap [style*="#202c46"],
.mag-wrap [style*="#1a365d"]{color:var(--lib-ink) !important;}

@media (max-width:640px){
    .mag-wrap{padding:32px 16px 60px !important;}
}


/* Dashboard tab panels + card contrast (mirrors the dashboard's own block) */
.mag-wrap .dla-dash-tab-content{background:transparent !important;color:var(--lib-ink) !important;}
.mag-wrap .mag-courses-grid{background:transparent !important;}
.mag-wrap .mag-course{background:#0d1b15 !important;}
.mag-wrap .mag-course-title,
.mag-wrap .mag-course h3,
.mag-wrap .mag-course h4,
.mag-wrap .mag-course a{color:var(--lib-ink) !important;}
.mag-wrap .mag-course-meta,
.mag-wrap .mag-course-speaker,
.mag-wrap .mag-course-status{color:var(--lib-muted) !important;}
.mag-wrap .mag-quick-title{color:var(--lib-ink) !important;}
.mag-wrap .mag-quick-sub{color:var(--lib-muted) !important;}


/* =======================================================================
   No white gutters behind the dark skin
   -----------------------------------------------------------------------
   This used to paint `body` dark and make every wrapper transparent. That
   worked, but the theme's footer has no background of its own — it simply
   sat on the page colour — so darkening the body repainted the footer too.
   The footer is the theme's, not ours, and we leave it alone.
   Instead, a small script walks up from our own container and paints only
   the ancestors that do NOT contain the header or footer. See
   DLA_Frontend::dark_skin_backdrop(). All that remains here is the overflow
   guard for the 100vw full-bleed blocks.
   ======================================================================= */
html body.dla-dark-skin{
    /* The dashboard and course pages go full-bleed with width:100vw, which
       counts the scrollbar and pushes the document a few px wider than the
       viewport — that sliver is the white band down the right. Clip it. */
    overflow-x:hidden !important;
}
body.dla-dark-skin .dla-dark-fill{
    background:#050d0a !important;
    background-color:#050d0a !important;
    background-image:none !important;
}
/* Menu links inside the darkened header. Buttons keep their own styling —
   only plain nav links are re-inked, so the CTA stays as the theme drew it. */
body.dla-dark-skin .dla-dark-head .menu-item > a,
body.dla-dark-skin .dla-dark-head .nav-link,
body.dla-dark-skin .dla-dark-head li > a:not([class*="btn"]):not([class*="button"]){
    color:#f1ece1 !important;
}
body.dla-dark-skin .dla-dark-head .menu-item > a:hover,
body.dla-dark-skin .dla-dark-head li > a:not([class*="btn"]):not([class*="button"]):hover{
    color:#cdac6c !important;
}

/* -----------------------------------------------------------------------
   Dashboard: the last light patches
   The theme styles bare <button> elements, and its rules outrank the
   dashboard's own single-class selectors — that is why the course filter
   pills and the brand tabs still came out white. Anchor on `html body`.
   ----------------------------------------------------------------------- */
html body .mag-wrap .mag-filter-btn,
html body .mag-wrap .mag-brand-btn,
html body .mag-wrap .dla-filter-btn,
html body .mag-wrap .mag-tab{
    background:rgba(255,255,255,.05) !important;
    background-color:rgba(255,255,255,.05) !important;
    background-image:none !important;
    color:var(--lib-muted) !important;
    border:1px solid var(--lib-line) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    text-shadow:none !important;
}
html body .mag-wrap .mag-filter-btn:hover,
html body .mag-wrap .mag-brand-btn:hover,
html body .mag-wrap .dla-filter-btn:hover,
html body .mag-wrap .mag-tab:hover{
    background:rgba(var(--lib-acc-rgb),.14) !important;
    color:var(--lib-ink) !important;
    border-color:rgba(var(--lib-acc-rgb),.55) !important;
}
html body .mag-wrap .mag-filter-btn.active,
html body .mag-wrap .mag-brand-btn.active,
html body .mag-wrap .dla-filter-btn.active,
html body .mag-wrap .mag-tab.active{
    background:var(--lib-acc) !important;
    background-color:var(--lib-acc) !important;
    color:#04100c !important;
    border-color:var(--lib-acc) !important;
}
/* The avatar ring sat on a pale grey plate. */
html body .mag-wrap .mag-avatar{
    background:rgba(255,255,255,.06) !important;
    border-color:var(--lib-acc) !important;
    color:var(--lib-ink) !important;
}
/* Catch-all: anything inside the dashboard still carrying a light inline
   background. Cards and media keep their own art. */
html body .mag-wrap [style*="background:#fff"],
html body .mag-wrap [style*="background: #fff"],
html body .mag-wrap [style*="background:#ffffff"],
html body .mag-wrap [style*="background:white"],
html body .mag-wrap [style*="background:#f8fafc"],
html body .mag-wrap [style*="background:#f1f5f9"],
html body .mag-wrap [style*="background:#e2e8f0"]{
    background:var(--lib-panel) !important;
    color:var(--lib-ink) !important;
}


/* -----------------------------------------------------------------------
   The white dashboard theme vs the dark library skin
   -----------------------------------------------------------------------
   DL Academy → Themes can put the dashboard in "white" mode, which sets
   `.dla-white-theme .dla-dash-tab-content{background:#f8fafc !important}`.
   That is the white slab behind the course grid and the reason the filter
   pills looked washed out — they were dark-on-dark rules sitting on a white
   plate. On a page wearing the dark skin, the dark skin wins.
   ----------------------------------------------------------------------- */
html body.dla-dark-skin .dla-white-theme,
html body.dla-dark-skin .dla-dashboard,
html body.dla-dark-skin .dla-white-theme .dla-dash-tab-content,
html body.dla-dark-skin .dla-dash-tab-content,
html body.dla-dark-skin .mag-wrap .dla-dash-tab-content,
html body.dla-dark-skin .mag-wrap .mag-courses-grid,
html body.dla-dark-skin .mag-wrap .mag-controls,
html body.dla-dark-skin .mag-wrap #dla-brand-hl,
html body.dla-dark-skin .mag-wrap #dla-brand-dif{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
}
/* Headings and empty-state copy that the white theme forced to near-black. */
html body.dla-dark-skin .dla-white-theme h1,
html body.dla-dark-skin .dla-white-theme h2,
html body.dla-dark-skin .dla-white-theme h3,
html body.dla-dark-skin .dla-white-theme h4,
html body.dla-dark-skin .dla-white-theme h5{color:var(--lib-ink,#f1ece1) !important;}
html body.dla-dark-skin .mag-wrap .mag-empty,
html body.dla-dark-skin .mag-wrap .dla-dash-empty{color:var(--lib-muted,#aebfb4) !important;}

/* The white theme also repaints the tab strip. */
html body.dla-dark-skin .dla-white-theme .dla-dash-tab{
    background:rgba(255,255,255,.05) !important;
    color:var(--lib-muted,#aebfb4) !important;
    border:1px solid var(--lib-line,rgba(181,148,88,.2)) !important;
}
html body.dla-dark-skin .dla-white-theme .dla-dash-tab.active{
    background:var(--lib-acc,#b59458) !important;
    color:#04100c !important;
    border-color:var(--lib-acc,#b59458) !important;
}

/* -----------------------------------------------------------------------
   Buttons: readable in both states
   Inactive pills were pale-on-pale. Give them a real border and ink.
   ----------------------------------------------------------------------- */
html body .mag-wrap .mag-filter-btn,
html body .mag-wrap .mag-brand-btn,
html body .mag-wrap .dla-filter-btn,
html body .mag-wrap .dla-brand-tab{
    background:rgba(255,255,255,.06) !important;
    color:var(--lib-ink,#f1ece1) !important;
    border:1px solid rgba(181,148,88,.35) !important;
    font-weight:500 !important;
    opacity:1 !important;
}
html body .mag-wrap .mag-filter-btn.active,
html body .mag-wrap .mag-brand-btn.active,
html body .mag-wrap .dla-filter-btn.active,
html body .mag-wrap .dla-brand-tab.active{
    background:var(--lib-acc,#b59458) !important;
    color:#04100c !important;
    border-color:var(--lib-acc,#b59458) !important;
    font-weight:600 !important;
}


/* -----------------------------------------------------------------------
   Notification bell
   Its own rule is a translucent circle, but the theme styles bare <button>
   elements and repaints it as a navy square — the block showing through in
   the dashboard header. Pin the button, and take the panel onto the same
   palette so opening it does not flash a white card over the dark page.
   ----------------------------------------------------------------------- */
html body .dla-bell-wrap .dla-bell-btn,
html body .mag-wrap .dla-bell-btn,
html body button.dla-bell-btn{
    background:rgba(255,255,255,.07) !important;
    background-color:rgba(255,255,255,.07) !important;
    background-image:none !important;
    border:1px solid rgba(181,148,88,.45) !important;
    border-radius:50% !important;
    color:var(--lib-acc-2,#cdac6c) !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    min-width:0 !important;
    box-shadow:none !important;
    text-shadow:none !important;
}
html body .dla-bell-wrap .dla-bell-btn:hover,
html body button.dla-bell-btn:hover{
    background:rgba(181,148,88,.18) !important;
    border-color:var(--lib-acc,#b59458) !important;
    color:var(--lib-ink,#f1ece1) !important;
}
html body .dla-bell-wrap .dla-bell-btn svg{stroke:currentColor !important;}
html body .dla-bell-badge{border-color:#0a1712 !important;}

/* The panel itself */
html body .dla-bell-drop{
    background:#0b1a14 !important;
    border:1px solid rgba(181,148,88,.28) !important;
    border-radius:8px !important;
    box-shadow:0 24px 60px rgba(0,0,0,.6) !important;
}
html body .dla-bell-head{
    background:#0b1a14 !important;
    color:var(--lib-ink,#f1ece1) !important;
    border-bottom:1px solid rgba(181,148,88,.22) !important;
}
html body .dla-bell-close{color:var(--lib-muted,#aebfb4) !important;}
html body .dla-bell-close:hover{color:var(--lib-acc-2,#cdac6c) !important;}
html body .dla-bell-item{border-bottom:1px solid rgba(241,236,225,.08) !important;}
html body .dla-bell-item.unread{background:rgba(181,148,88,.10) !important;}
html body .dla-bell-item-title{color:var(--lib-ink,#f1ece1) !important;}
html body .dla-bell-item-msg{color:var(--lib-muted,#aebfb4) !important;}
html body .dla-bell-item-date{color:rgba(174,191,180,.65) !important;}
html body .dla-bell-item-mc{color:var(--lib-acc-2,#cdac6c) !important;}
html body .dla-bell-thumb{background:rgba(255,255,255,.06) !important;}
html body .dla-bell-empty{color:var(--lib-muted,#aebfb4) !important;}
html body .dla-bell-foot{
    background:#0b1a14 !important;
    border-top:1px solid rgba(181,148,88,.22) !important;
}
html body .dla-bell-test{
    background:var(--lib-acc,#b59458) !important;
    color:#04100c !important;
    border:1px solid var(--lib-acc,#b59458) !important;
    border-radius:6px !important;
}
html body .dla-bell-test:hover{background:var(--lib-acc-2,#cdac6c) !important;}
html body .dla-bell-test-out{color:var(--lib-muted,#aebfb4) !important;}


/* -----------------------------------------------------------------------
   Playlist panel on the dark course page
   frontend.css gives .dla-playlist-list `background: var(--dla-white)`, so
   the lesson list rendered as a white card while the dark skin was tinting
   its text light — pale ink on a white plate, effectively invisible.
   Concrete colours here rather than var() so nothing depends on a custom
   property resolving in this subtree.
   ----------------------------------------------------------------------- */
html body .dla-single-course .dla-playlist-list,
html body .dla-single-course .dla-playlist-items{
    background:#0b1a14 !important;
    background-color:#0b1a14 !important;
    background-image:none !important;
    border:1px solid rgba(181,148,88,.22) !important;
    border-radius:8px !important;
    box-shadow:none !important;
}
html body .dla-single-course .dla-playlist-items{
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
}
html body .dla-single-course .dla-playlist-list h4{
    color:#f1ece1 !important;
    font-family:'Marcellus','Cormorant Garamond',serif !important;
    font-weight:600 !important;
}
html body .dla-single-course .dla-playlist-list h4 span{color:#aebfb4 !important;}

html body .dla-single-course .dla-playlist-item{
    background:transparent !important;
    border-bottom:1px solid rgba(18,33,27,.08) !important;
    border-radius:0 !important;
}
html body .dla-single-course .dla-playlist-item:hover{
    background:rgba(29,64,52,.07) !important;
}
html body .dla-single-course .dla-playlist-item.active{
    background:rgba(29,64,52,.10) !important;
}
html body .dla-single-course .dla-item-title{
    color:#12211b !important;
    font-size:15px !important;
    line-height:1.5 !important;
}
html body .dla-single-course .dla-playlist-item:hover .dla-item-title,
html body .dla-single-course .dla-playlist-item.active .dla-item-title{
    color:#1d4034 !important;
}
html body .dla-single-course .dla-item-number{
    background:rgba(18,33,27,.07) !important;
    color:#5c6b63 !important;
    border:1px solid rgba(18,33,27,.12) !important;
    border-radius:50% !important;
    flex:0 0 30px !important;
}
html body .dla-single-course .dla-playlist-item.active .dla-item-number{
    background:#b59458 !important;
    color:#04100c !important;
    border-color:#b59458 !important;
}
/* "Show all N lessons" carries its own inline pale-blue styling. */
html body .dla-single-course .dla-playlist-toggle{
    background:transparent !important;
    color:#cdac6c !important;
    border:1px dashed rgba(181,148,88,.45) !important;
    font-size:15px !important;
}
html body .dla-single-course .dla-playlist-toggle:hover{
    background:rgba(181,148,88,.12) !important;
    color:#f1ece1 !important;
}

/* The membership strip under the player, pinned to real values too. */
html body .dla-single-course .dla-member-strip{
    background:#0b1a14 !important;
    border:1px solid rgba(181,148,88,.22) !important;
}
html body .dla-single-course .dla-member-strip > div{
    color:#aebfb4 !important;
    font-size:15px !important;
}
html body .dla-single-course .dla-member-strip strong{color:#f1ece1 !important;}
html body .dla-single-course .dla-member-strip .dla-share-cta{
    color:#cdac6c !important;
    border:1px solid rgba(181,148,88,.45) !important;
}

@media (max-width:640px){
    html body .dla-single-course .dla-item-title{font-size:16px !important;}
    html body .dla-single-course .dla-playlist-toggle{font-size:16px !important;}
    html body .dla-single-course .dla-member-strip > div{font-size:16px !important;}
}

/* ---- Course CTAs: the site's own button language ----------------------
   Dark by default; on hover a lighter panel sweeps in from the bottom-right
   corner, the way a page turns. The folded corner stays visible throughout. */
.dla-single-course .dla-enroll-cta,
.dla-single-course .dla-share-cta{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    padding:16px 26px !important;
    border-radius:0 !important;
    border:1px solid #2f5d4d !important;
    background:#1d4034 !important;
    color:#f1ece1 !important;
    font:500 11.5px 'DM Sans',sans-serif !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    text-align:center;
    box-shadow:none !important;
    transition:color .35s var(--lib-ease),border-color .45s var(--lib-ease);
}
/* the sweeping panel */
.dla-single-course .dla-enroll-cta::after,
.dla-single-course .dla-share-cta::after{
    content:"";
    position:absolute;
    inset:0;
    background:#7fa898;
    /* a degenerate triangle pinned to the bottom-right corner */
    clip-path:polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    transition:clip-path .55s var(--lib-ease);
    z-index:-1;
}
/* the corner unfolds diagonally across the face, like a turning page */
.dla-single-course .dla-enroll-cta:hover::after,
.dla-single-course .dla-share-cta:hover::after{
    clip-path:polygon(-120% 100%, 100% -120%, 100% 100%, -120% 100%);
}
.dla-single-course .dla-enroll-cta:hover,
.dla-single-course .dla-share-cta:hover{
    color:#0d2019 !important;
    border-color:#7fa898 !important;
    transform:none;
}
/* the folded page corner */
.dla-single-course .dla-enroll-cta::before,
.dla-single-course .dla-share-cta::before{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:0;
    height:0;
    border-style:solid;
    border-width:0 0 15px 15px;
    border-color:transparent transparent rgba(241,236,225,.22) transparent;
    z-index:1;
    transition:border-color .45s var(--lib-ease);
}
.dla-single-course .dla-enroll-cta:hover::before,
.dla-single-course .dla-share-cta:hover::before{
    border-color:transparent transparent rgba(13,32,25,.3) transparent;
}
/* the second button reads as the quieter of the pair */
.dla-single-course .dla-share-cta{
    background:transparent !important;
    border-color:rgba(181,148,88,.55) !important;
    color:var(--lib-acc) !important;
    margin-top:12px;
}
.dla-single-course .dla-share-cta::after{background:var(--lib-acc);}
.dla-single-course .dla-share-cta:hover{color:#04100c !important;border-color:var(--lib-acc) !important;}
.dla-single-course .dla-enroll-cta svg,
.dla-single-course .dla-share-cta svg{position:relative;z-index:2;}

/* ---- No dead dark band above the shelf ------------------------------- */
.dla-lib{padding-top:0 !important;}
.dla-lib .lib-stage > .lib-composition{padding-top:34px;}
.dla-lib::before,
.dla-lib .lib-shelf::before{display:none !important;}

/* =======================================================================
   Course page — light edition
   Mostly white, with the site's green and blue as accents. Declared last so
   it wins over the dark rules above; the palette is redefined rather than
   rewritten rule by rule.
   ======================================================================= */
.dla-single-course{
    --lib-acc:#1d4034;          /* green */
    --lib-acc-2:#2f5d4d;
    --lib-acc-rgb:29,64,52;
    --lib-blue:#12335c;         /* blue */
    --lib-ink:#12211b;
    --lib-muted:#5c6b63;
    --lib-line:rgba(18,33,27,.12);
    --lib-panel:#fff;
    background:#fff !important;
    color:var(--lib-ink) !important;
}
.dla-single-course h1,.dla-single-course h2,
.dla-single-course h3,.dla-single-course h4{color:var(--lib-ink) !important;}
.dla-single-course p,.dla-single-course li,.dla-single-course td{color:var(--lib-muted) !important;}
.dla-single-course strong{color:var(--lib-ink) !important;}
.dla-single-course a{color:var(--lib-blue) !important;}

/* Panels turn into quiet cards on white */
.dla-single-course .dla-course-description,
.dla-single-course .dla-course-documents,
.dla-single-course .dla-course-sidebar,
.dla-single-course .dla-quiz-section,
.dla-single-course .dla-course-speaker-strip,
.dla-single-course .dla-speakers-card,
.dla-single-course .dla-member-strip{
    background:#fff !important;
    border:1px solid var(--lib-line) !important;
    box-shadow:0 2px 14px rgba(18,33,27,.06) !important;
    color:var(--lib-ink) !important;
}
.dla-single-course .dla-speakers-card > div{
    background:#fbfbf9 !important;
    border:1px solid var(--lib-line) !important;
}
.dla-single-course .dla-speakers-card h4{color:var(--lib-acc) !important;}
.dla-single-course .dla-speakers-card svg{stroke:var(--lib-acc) !important;}

/* Title under the player */
.dla-single-course .dla-course-title-below{color:var(--lib-ink) !important;}
.dla-single-course .dla-course-title-below::after{background:var(--lib-acc);opacity:1;}
.dla-single-course .dla-section-title,
.dla-single-course .dla-sp-section-title{color:var(--lib-acc) !important;}
.dla-single-course .dla-section-title::after{background:var(--lib-line);}

/* Player keeps a dark frame — that part should stay dark */
.dla-single-course .dla-video-container{
    background:#050d0a;
    border:1px solid var(--lib-line);
    box-shadow:0 14px 34px -22px rgba(18,33,27,.45);
}
.dla-single-course .dla-course-header-simple{border-bottom:1px solid var(--lib-line);}

/* Free badge and helper copy */
.dla-single-course .dla-course-sidebar [style*="Cormorant"]{color:var(--lib-ink) !important;}

/* Buttons: one shape, one behaviour, no gold */
.dla-single-course .dla-enroll-cta,
.dla-single-course .dla-share-cta{
    background:var(--lib-acc) !important;
    border:1px solid var(--lib-acc) !important;
    color:#fff !important;
    line-height:1.5;
}
.dla-single-course .dla-share-cta{
    background:#fff !important;
    border-color:rgba(29,64,52,.5) !important;
    color:var(--lib-acc) !important;
}
.dla-single-course .dla-enroll-cta::after,
.dla-single-course .dla-share-cta::after{background:#7fa898;}
.dla-single-course .dla-enroll-cta:hover,
.dla-single-course .dla-share-cta:hover{color:#0d2019 !important;border-color:#7fa898 !important;}
.dla-single-course .dla-enroll-cta::before{border-color:transparent transparent rgba(255,255,255,.28) transparent;}
.dla-single-course .dla-share-cta::before{border-color:transparent transparent rgba(29,64,52,.25) transparent;}

/* Blue as the second accent, where the eye needs a change of key */
.dla-single-course .dla-course-title-below{border-left:0;}
.dla-single-course .dla-btn-primary,
.dla-single-course .dla-buy-course{
    background:var(--lib-blue) !important;border-color:var(--lib-blue) !important;color:#fff !important;
}
.dla-single-course .dla-course-documents a,
.dla-single-course .dla-doc-item{color:var(--lib-blue) !important;}
.dla-single-course .dla-doc-item{background:#fbfbf9 !important;border:1px solid var(--lib-line) !important;}
.dla-single-course .dla-course-pfill,
.dla-single-course .dla-progress-fill{background:var(--lib-acc) !important;}

/* Anything the old dark skin left behind */
.dla-single-course [style*="color:var(--lib-ink)"]{color:var(--lib-ink) !important;}
.dla-single-course .dla-banner-overlay,
.dla-single-course .dla-course-banner::after{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85) 78%,#fff) !important;}

/* The dark ground sits on wrappers above .dla-single-course, so it has to be
   cleared from the body down — otherwise only the panels turn white. */
body.single-dla_online_course,
body.single-dla_online_course #smooth-wrapper,
body.single-dla_online_course #smooth-content,
body.single-dla_online_course .site-content,
body.single-dla_online_course .container,
body.single-dla_online_course main{background:#fff !important;}

body.single-dla_online_course .dla-single-course,
body.single-dla_online_course .dla-course-layout,
body.single-dla_online_course .dla-course-main,
body.single-dla_online_course .dla-video-section,
body.single-dla_online_course .dla-course-header-simple,
body.single-dla_online_course .dla-course-content,
body.single-dla_online_course .dla-course-body{
    background:#fff !important;
    background-image:none !important;
}

/* Preview strip under the player */
body.single-dla_online_course .dla-video-locked,
body.single-dla_online_course .dla-locked-overlay,
body.single-dla_online_course .dla-preview-bar{
    background:#fff !important;
    background-image:none !important;
    color:#5c6b63 !important;
}
body.single-dla_online_course .dla-video-locked p,
body.single-dla_online_course .dla-preview-bar p{color:#5c6b63 !important;}

/* Course title under the player, now on white */
body.single-dla_online_course .dla-course-title-below{color:#12211b !important;}
body.single-dla_online_course .dla-course-title-below::after{background:#1d4034 !important;opacity:1;}

/* The single "Enroll" button in the preview strip follows the same language */
body.single-dla_online_course .dla-preview-bar .dla-btn,
body.single-dla_online_course .dla-video-locked .dla-btn,
body.single-dla_online_course .dla-btn-primary{
    background:#1d4034 !important;
    border:1px solid #1d4034 !important;
    color:#fff !important;
    border-radius:0 !important;
    letter-spacing:.14em;
    text-transform:uppercase;
}
body.single-dla_online_course .dla-preview-bar .dla-btn:hover,
body.single-dla_online_course .dla-video-locked .dla-btn:hover,
body.single-dla_online_course .dla-btn-primary:hover{
    background:#7fa898 !important;border-color:#7fa898 !important;color:#0d2019 !important;
}

/* Description and any remaining panel */
body.single-dla_online_course .dla-course-description,
body.single-dla_online_course .dla-course-description *{color:#5c6b63 !important;}
body.single-dla_online_course .dla-course-description h2,
body.single-dla_online_course .dla-course-description h3{color:#12211b !important;}

/* Panels need breathing room: the skin gave them a frame, the theme never
   gave them padding, so the copy sat flush against the border. */
body.single-dla_online_course .dla-course-description,
body.single-dla_online_course .dla-course-documents,
body.single-dla_online_course .dla-quiz-section,
body.single-dla_online_course .dla-course-speaker-strip{
    padding:34px 38px 38px !important;
    border-radius:4px;
}
body.single-dla_online_course .dla-course-description h2{
    font-size:26px !important;
    margin:0 0 20px !important;
    letter-spacing:.01em;
}
body.single-dla_online_course .dla-course-description h3{font-size:20px !important;margin:26px 0 12px !important;}
body.single-dla_online_course .dla-course-description p{
    margin:0 0 16px !important;
    line-height:1.85 !important;
    font-size:15px !important;
}
body.single-dla_online_course .dla-course-description ul,
body.single-dla_online_course .dla-course-description ol{margin:0 0 18px !important;padding-left:22px !important;}
body.single-dla_online_course .dla-course-description li{margin-bottom:8px !important;line-height:1.8 !important;}
body.single-dla_online_course .dla-course-description > *:last-child{margin-bottom:0 !important;}

@media (max-width:640px){
    body.single-dla_online_course .dla-course-description,
    body.single-dla_online_course .dla-course-documents,
    body.single-dla_online_course .dla-quiz-section,
    body.single-dla_online_course .dla-course-speaker-strip{padding:24px 20px 26px !important;}
    body.single-dla_online_course .dla-course-description h2{font-size:22px !important;}
    body.single-dla_online_course .dla-course-description p{font-size:14.5px !important;}
}

/* ---- Phones: the CTAs belong right under the clip ---------------------
   The sidebar stacks below the description on narrow screens, which buries
   them. This pair sits under the player and takes over there. */
.dla-single-course .dla-mobile-cta{display:none;}
@media (max-width:860px){
    .dla-single-course .dla-mobile-cta{
        display:flex;
        flex-direction:column;
        gap:10px;
        margin:18px 0 4px;
    }
    /* and the sidebar copy of them steps aside */
    .dla-single-course .dla-course-sidebar .dla-enroll-cta,
    .dla-single-course .dla-course-sidebar .dla-share-cta{display:none !important;}
}


/* ---- Course CTAs: identical to the library's .lib-btn -----------------
   Same size, same weight, same spacing — the pair on a course page must be
   indistinguishable from the pair under a course card in the library. */
body.single-dla_online_course .dla-enroll-cta,
body.single-dla_online_course .dla-share-cta,
.dla-single-course .dla-mobile-cta .dla-enroll-cta,
.dla-single-course .dla-mobile-cta .dla-share-cta{
    padding:13px 16px !important;
    font:500 10.5px 'DM Sans',sans-serif !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    border-radius:0 !important;
    line-height:1.5 !important;
    gap:8px;
}
body.single-dla_online_course .dla-enroll-cta{
    background:#1d4034 !important;border:1px solid #2f5d4d !important;color:#f1ece1 !important;
}
body.single-dla_online_course .dla-share-cta{
    background:transparent !important;border:1px solid rgba(29,64,52,.45) !important;color:#1d4034 !important;
    margin-top:9px;
}
body.single-dla_online_course .dla-enroll-cta::after,
body.single-dla_online_course .dla-share-cta::after{background:#7fa898 !important;}
body.single-dla_online_course .dla-enroll-cta:hover,
body.single-dla_online_course .dla-share-cta:hover{color:#0d2019 !important;border-color:#7fa898 !important;}
body.single-dla_online_course .dla-enroll-cta::before{
    border-width:0 0 13px 13px !important;
    border-color:transparent transparent rgba(241,236,225,.22) transparent !important;
}
body.single-dla_online_course .dla-share-cta::before{
    border-width:0 0 13px 13px !important;
    border-color:transparent transparent rgba(29,64,52,.25) transparent !important;
}
/* the arrow the library buttons do not carry */
body.single-dla_online_course .dla-enroll-cta svg{display:none;}


/* `overflow-x:hidden` makes the browser compute overflow-y as auto, which put
   a scrollbar inside the section. Nothing here needs clipping. */
.dla-speaker-profile,
.dla-single-course,
.mag-wrap{overflow:visible !important;}

/* Belt and braces: even if a stale cached script still paints them, the
   wrappers around the library and the course page stay light. */
body.page .dla-lib ~ .dla-dark-fill,
body:has(.dla-lib) .dla-dark-fill:not(.dla-lib):not(.dla-dark-head),
body:has(.dla-single-course) .dla-dark-fill:not(.dla-dark-head){
    background:transparent !important;
}

/* ---- Member strip under the player, on white ------------------------- */
body.single-dla_online_course .dla-member-strip{
    background:#f4f6f4 !important;
    border:1px solid rgba(29,64,52,.16) !important;
    box-shadow:none !important;
    color:#12211b !important;
    border-radius:4px;
}
body.single-dla_online_course .dla-member-strip *{color:#5c6b63 !important;}
body.single-dla_online_course .dla-member-strip strong{color:#12211b !important;}
body.single-dla_online_course .dla-member-strip .dla-share-cta{
    width:auto !important;
    margin-top:0 !important;
    background:transparent !important;
    border:1px solid rgba(29,64,52,.45) !important;
    color:#1d4034 !important;
}
body.single-dla_online_course .dla-member-strip .dla-share-cta:hover{
    color:#0d2019 !important;border-color:#7fa898 !important;
}

/* =======================================================================
   Dashboard — light edition, same accents and buttons as everywhere else
   ======================================================================= */
.mag-wrap{
    --lib-acc:#1d4034;
    --lib-acc-2:#2f5d4d;
    --lib-acc-rgb:29,64,52;
    --lib-blue:#12335c;
    --lib-ink:#12211b;
    --lib-muted:#5c6b63;
    --lib-line:rgba(18,33,27,.12);
    --lib-panel:#fff;
    background:#fff !important;
    color:var(--lib-ink) !important;
}
body.page .mag-wrap,
body .mag-wrap{background:#fff !important;background-image:none !important;}
.mag-wrap h1,.mag-wrap h2,.mag-wrap h3,.mag-wrap h4{color:var(--lib-ink) !important;}
.mag-wrap p,.mag-wrap li,.mag-wrap span{color:var(--lib-muted);}
.mag-wrap a{color:var(--lib-blue) !important;}

/* Cards */
.mag-wrap .mag-account-card,
.mag-wrap .mag-course,
.mag-wrap .mag-cert-card,
.mag-wrap .mag-quick-card,
.mag-wrap .mag-doc{
    background:#fff !important;
    border:1px solid var(--lib-line) !important;
    box-shadow:0 2px 14px rgba(18,33,27,.06) !important;
    color:var(--lib-ink) !important;
}
.mag-wrap .mag-course *,
.mag-wrap .mag-quick-card *{color:var(--lib-muted) !important;}
.mag-wrap .mag-course-title,
.mag-wrap .mag-course h3,.mag-wrap .mag-course h4,
.mag-wrap .mag-quick-title,
.mag-wrap .mag-cert-course{color:var(--lib-ink) !important;}

/* Hero keeps a dark plate — a cover image sits behind it */
.mag-wrap .mag-hero-card{background:#0d1a14 !important;border:1px solid var(--lib-line) !important;}
.mag-wrap .mag-hero-card *{color:#f1ece1 !important;}

/* Tabs and filters */
.mag-wrap .mag-tabs{border-bottom:1px solid var(--lib-line) !important;}
.mag-wrap .mag-tab{color:var(--lib-muted) !important;}
.mag-wrap .mag-tab.active{color:var(--lib-acc) !important;border-bottom:2px solid var(--lib-acc) !important;}
.mag-wrap .mag-brand-btn,
.mag-wrap .mag-filter-btn{
    background:#fff !important;border:1px solid var(--lib-line) !important;color:var(--lib-muted) !important;
}
.mag-wrap .mag-brand-btn.active,
.mag-wrap .mag-filter-btn.active{
    background:var(--lib-acc) !important;border-color:var(--lib-acc) !important;color:#fff !important;
}

/* Buttons: the same language as the library and the course page */
.mag-wrap .mag-hero-btn,
.mag-wrap .mag-course-btn,
.mag-wrap .mag-cert-dl,
.mag-wrap .mag-member-btn{
    position:relative;overflow:hidden;isolation:isolate;
    background:#1d4034 !important;border:1px solid #2f5d4d !important;color:#fff !important;
    border-radius:0 !important;box-shadow:none !important;
    font:500 10.5px 'DM Sans',sans-serif !important;
    letter-spacing:.14em !important;text-transform:uppercase !important;
}
.mag-wrap .mag-hero-btn::after,
.mag-wrap .mag-course-btn::after,
.mag-wrap .mag-cert-dl::after,
.mag-wrap .mag-member-btn::after{
    content:"";position:absolute;inset:0;background:#7fa898;
    clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%);
    transition:clip-path .55s cubic-bezier(.22,.61,.36,1);z-index:-1;
}
.mag-wrap .mag-hero-btn:hover::after,
.mag-wrap .mag-course-btn:hover::after,
.mag-wrap .mag-cert-dl:hover::after,
.mag-wrap .mag-member-btn:hover::after{clip-path:polygon(-120% 100%,100% -120%,100% 100%,-120% 100%);}
.mag-wrap .mag-hero-btn:hover,
.mag-wrap .mag-course-btn:hover,
.mag-wrap .mag-cert-dl:hover,
.mag-wrap .mag-member-btn:hover{color:#0d2019 !important;border-color:#7fa898 !important;}
.mag-wrap .mag-hero-btn::before,
.mag-wrap .mag-course-btn::before,
.mag-wrap .mag-cert-dl::before,
.mag-wrap .mag-member-btn::before{
    content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid;
    border-width:0 0 13px 13px;border-color:transparent transparent rgba(255,255,255,.28) transparent;z-index:1;
}

/* Membership strip */
.mag-wrap .mag-member-strip{
    background:#f4f6f4 !important;border:1px solid rgba(29,64,52,.16) !important;
}
.mag-wrap .mag-member-head{color:var(--lib-ink) !important;}
.mag-wrap .mag-member-sub,.mag-wrap .mag-member-reach{color:var(--lib-muted) !important;}
.mag-wrap .mag-member-sub strong{color:var(--lib-acc) !important;}

/* Progress, inputs, avatar */
.mag-wrap .mag-course-pbar{background:rgba(18,33,27,.1) !important;}
.mag-wrap .mag-course-pfill{background:var(--lib-acc) !important;}
.mag-wrap .mag-course-pct{color:var(--lib-acc) !important;}
.mag-wrap input,.mag-wrap select,.mag-wrap textarea{
    background:#fff !important;border:1px solid var(--lib-line) !important;color:var(--lib-ink) !important;
}
.mag-wrap label{color:var(--lib-muted) !important;}
.mag-wrap .mag-avatar{border:1px solid var(--lib-line) !important;}
.mag-wrap .dla-dash-tab-content{background:transparent !important;color:var(--lib-ink) !important;}

/* ---- Course content list (playlist), on white ------------------------ */
body.single-dla_online_course .dla-playlist-list,
body.single-dla_online_course .dla-playlist-player{
    background:#fff !important;
    border:1px solid var(--lib-line) !important;
    box-shadow:0 2px 14px rgba(18,33,27,.06) !important;
    border-radius:4px;
    color:var(--lib-ink) !important;
}
body.single-dla_online_course .dla-playlist-list h4{color:var(--lib-ink) !important;}
body.single-dla_online_course .dla-playlist-list h4 span{color:var(--lib-muted) !important;}

body.single-dla_online_course .dla-playlist-items{background:transparent !important;}
body.single-dla_online_course .dla-playlist-item,
body.single-dla_online_course .dla-playlist-items > *{
    background:transparent !important;
    border-bottom:1px solid rgba(18,33,27,.08) !important;
    color:var(--lib-ink) !important;
}
body.single-dla_online_course .dla-item-title{color:var(--lib-ink) !important;}
body.single-dla_online_course .dla-playlist-item:hover{background:rgba(29,64,52,.05) !important;}

/* the lesson being played */
body.single-dla_online_course .dla-playlist-item.active,
body.single-dla_online_course .dla-playlist-item.is-active,
body.single-dla_online_course .dla-playlist-item.playing{
    background:rgba(29,64,52,.09) !important;
}
body.single-dla_online_course .dla-playlist-item.active .dla-item-title,
body.single-dla_online_course .dla-playlist-item.is-active .dla-item-title{
    color:var(--lib-acc) !important;font-weight:600;
}

/* numbered discs */
body.single-dla_online_course .dla-item-number{
    background:rgba(18,33,27,.07) !important;
    color:var(--lib-muted) !important;
    border:1px solid rgba(18,33,27,.1) !important;
}
body.single-dla_online_course .dla-playlist-item.active .dla-item-number,
body.single-dla_online_course .dla-playlist-item.is-active .dla-item-number{
    background:var(--lib-acc) !important;color:#fff !important;border-color:var(--lib-acc) !important;
}

/* "Show all lessons" */
body.single-dla_online_course .dla-playlist-toggle{
    background:#fff !important;
    border:1px solid rgba(29,64,52,.35) !important;
    color:var(--lib-acc) !important;
    border-radius:0 !important;
}
body.single-dla_online_course .dla-playlist-toggle:hover{background:rgba(29,64,52,.07) !important;}

/* Dashboard sits on white now, so its wrappers must not be painted dark. */
body:has(.mag-wrap) .dla-dark-fill:not(.dla-dark-head){background:#fff !important;}

/* Button labels: the generic span rule above was tinting them dark, so the
   text vanished into the green. Anything inside a filled button is light. */
.mag-wrap .mag-hero-btn,.mag-wrap .mag-hero-btn *,
.mag-wrap .mag-course-btn,.mag-wrap .mag-course-btn *,
.mag-wrap .mag-cert-dl,.mag-wrap .mag-cert-dl *,
.mag-wrap .mag-member-btn,.mag-wrap .mag-member-btn *,
.mag-wrap .mag-brand-btn.active,.mag-wrap .mag-brand-btn.active *,
.mag-wrap .mag-filter-btn.active,.mag-wrap .mag-filter-btn.active *,
.mag-wrap .mag-tab.active,.mag-wrap .mag-tab.active *{
    color:#fff !important;
}
.mag-wrap .mag-hero-btn:hover,.mag-wrap .mag-hero-btn:hover *,
.mag-wrap .mag-course-btn:hover,.mag-wrap .mag-course-btn:hover *,
.mag-wrap .mag-cert-dl:hover,.mag-wrap .mag-cert-dl:hover *,
.mag-wrap .mag-member-btn:hover,.mag-wrap .mag-member-btn:hover *{color:#0d2019 !important;}

/* Outline buttons keep dark-on-white */
.mag-wrap .mag-brand-btn:not(.active),.mag-wrap .mag-brand-btn:not(.active) *,
.mag-wrap .mag-filter-btn:not(.active),.mag-wrap .mag-filter-btn:not(.active) *,
.mag-wrap .mag-tab:not(.active),.mag-wrap .mag-tab:not(.active) *{color:#5c6b63 !important;}

/* The hero plate is dark, so everything on it stays light */
.mag-wrap .mag-hero-card,.mag-wrap .mag-hero-card *{color:#f1ece1 !important;}
.mag-wrap .mag-hero-card .mag-hero-btn,
.mag-wrap .mag-hero-card .mag-hero-btn *{color:#fff !important;}

/* ---- Final word on the light pages ------------------------------------
   The palette module was pushing its dark variables into these two, which is
   why the playlist and the member strip stayed dark while the panels around
   them turned white. Declared last, and at body scope, so nothing outranks it. */
body.single-dla_online_course .dla-single-course,
body.single-dla_online_course .dla-single-course *{
    --dla-white:#fff;
    --dla-panel:#fff;
    --dla-page:#fff;
    --dla-ink:#12211b;
    --dla-muted:#5c6b63;
    --lib-panel:#fff;
    --lib-ink:#12211b;
    --lib-muted:#5c6b63;
    --lib-acc:#1d4034;
    --lib-acc-2:#2f5d4d;
    --lib-acc-rgb:29,64,52;
    --lib-line:rgba(18,33,27,.12);
}
html body.single-dla_online_course .dla-playlist-list,
html body.single-dla_online_course .dla-playlist-items,
html body.single-dla_online_course .dla-playlist-item,
html body.single-dla_online_course .dla-member-strip{
    background-color:#fff !important;
    background-image:none !important;
}
html body.single-dla_online_course .dla-member-strip{background-color:#f4f6f4 !important;border-color:rgba(29,64,52,.16) !important;}
html body.single-dla_online_course .dla-playlist-item.active{background-color:rgba(29,64,52,.09) !important;}
html body.single-dla_online_course .dla-playlist-list *,
html body.single-dla_online_course .dla-member-strip *{color:#12211b !important;}
html body.single-dla_online_course .dla-item-title{color:#12211b !important;}
html body.single-dla_online_course .dla-playlist-item.active .dla-item-title{color:#1d4034 !important;}
html body.single-dla_online_course .dla-playlist-item:hover{background-color:rgba(29,64,52,.05) !important;}
html body.single-dla_online_course .dla-member-strip .dla-share-cta,
html body.single-dla_online_course .dla-playlist-toggle{color:#1d4034 !important;}
html body.single-dla_online_course .dla-item-number{background:rgba(18,33,27,.07) !important;color:#5c6b63 !important;}
html body.single-dla_online_course .dla-playlist-item.active .dla-item-number{background:#1d4034 !important;color:#fff !important;}

/* Type at the site's own size, not the smaller scale I had set. */
body.single-dla_online_course .dla-course-description p,
body.single-dla_online_course .dla-course-description li{font-size:17px !important;line-height:1.9 !important;}
body.single-dla_online_course .dla-course-description h2{font-size:30px !important;}
body.single-dla_online_course .dla-item-title{font-size:16px !important;}
body.single-dla_online_course .dla-member-strip{font-size:15px !important;}
.mag-wrap{font-size:16px;}
.mag-wrap .mag-course-name,.mag-wrap .mag-course h3{font-size:19px !important;}

/* The playlist heading takes its colour from frontend.css, which still points
   at the dark palette — name it explicitly. */
html body.single-dla_online_course .dla-playlist-list h4,
html body.single-dla_online_course .dla-playlist-list h4 *{color:#12211b !important;}
html body.single-dla_online_course .dla-playlist-list h4 span{color:#5c6b63 !important;}

/* ---- Legibility pass --------------------------------------------------- */

/* Instructor cards: the copy was too small and too pale to read. */
html body.single-dla_online_course .dla-speakers-card > div{padding:16px 18px !important;}
html body.single-dla_online_course .dla-speakers-card a{
    font-size:15px !important;font-weight:600 !important;color:#12211b !important;letter-spacing:.01em;
}
html body.single-dla_online_course .dla-speakers-card p{
    font-size:14px !important;line-height:1.7 !important;color:#5c6b63 !important;margin-top:4px !important;
}
html body.single-dla_online_course .dla-speakers-card img{width:56px !important;height:56px !important;}

/* Member strip: grey on grey, and the day count was gold on cream. */
html body.single-dla_online_course .dla-member-strip,
html body.single-dla_online_course .dla-member-strip div{
    font-size:15px !important;color:#3a4a42 !important;line-height:1.7 !important;
}
html body.single-dla_online_course .dla-member-strip strong{
    color:#1d4034 !important;font-weight:700 !important;
}

/* ---- Dashboard header band -------------------------------------------- */
html body .mag-wrap .mag-header,
html body .mag-wrap .mag-topbar,
html body .mag-wrap .mag-hero-head,
html body .mag-wrap .mag-welcome{
    background:#0a1f33 !important;
    color:#fff !important;
    padding:26px 28px !important;
    border-radius:4px;
    margin-bottom:22px;
}
html body .mag-wrap .mag-header *,
html body .mag-wrap .mag-topbar *,
html body .mag-wrap .mag-welcome *{color:#fff !important;}
html body .mag-wrap .mag-welcome-label,
html body .mag-wrap .mag-eyebrow{
    color:#cdac6c !important;letter-spacing:.24em !important;font-size:11px !important;
}
html body .mag-wrap .mag-avatar{
    border:2px solid rgba(255,255,255,.35) !important;
    box-shadow:0 0 0 4px rgba(10,31,51,.35);
}
/* the bell sits on the blue now */
html body .mag-wrap .mag-bell,
html body .mag-wrap .dla-bell-btn{
    border:1px solid rgba(255,255,255,.35) !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
}
html body .mag-wrap .dla-bell-btn svg{stroke:#fff !important;}

/* Instructor card: it was a thin strip, out of proportion with the page. */
html body.single-dla_online_course .dla-speakers-card{padding:24px 24px 22px !important;}
html body.single-dla_online_course .dla-speakers-card h4{
    font-size:12px !important;letter-spacing:.22em !important;margin-bottom:16px !important;
}
html body.single-dla_online_course .dla-speakers-card > div{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
    padding:20px 22px !important;
    min-height:104px;
    border-radius:4px;
}
html body.single-dla_online_course .dla-speakers-card > div + div{margin-top:14px !important;}
html body.single-dla_online_course .dla-speakers-card img{
    width:76px !important;height:76px !important;flex:0 0 76px !important;
    border-radius:3px !important;object-fit:cover !important;object-position:center top !important;
}
html body.single-dla_online_course .dla-speakers-card a{font-size:16px !important;}
html body.single-dla_online_course .dla-speakers-card p{font-size:14.5px !important;}

/* The whole dashboard header block, whichever wrapper the theme gives it */
html body .mag-wrap .mag-header{
    background:#0a1f33 !important;
    padding:34px 30px 34px !important;
    margin-bottom:24px;
}
html body .mag-wrap .mag-header *{color:#fff !important;}
html body .mag-wrap .mag-header .mag-welcome-label,
html body .mag-wrap .mag-header .mag-eyebrow{color:#cdac6c !important;}


/* -----------------------------------------------------------------------
   Sidebar buttons that flatten on some courses
   -----------------------------------------------------------------------
   .dla-enroll-cta never declares a height, so the theme's own rule for
   link-buttons applies one. A label that fits on a single line looks fine;
   one that wraps to two is squeezed inside that fixed height and spills.
   Labels differ per course (share-gate copy vs the default), which is why
   only some of them looked wrong.

   Height is handed back to the content, and the buttons are told not to
   shrink in case a parent ever constrains them.
   ----------------------------------------------------------------------- */
body.single-dla_online_course .dla-enroll-cta,
body.single-dla_online_course .dla-share-cta,
body.single-dla_online_course .dla-mobile-cta .dla-enroll-cta{
    height:auto !important;
    min-height:54px !important;
    max-height:none !important;
    line-height:1.4 !important;
    padding-top:15px !important;
    padding-bottom:15px !important;
    box-sizing:border-box !important;
    white-space:normal !important;
    text-align:center !important;
    flex:0 0 auto !important;
    align-self:stretch !important;
    overflow:visible !important;
}
/* The card itself must grow with its contents, never clip them. */
body.single-dla_online_course .dla-course-sidebar,
body.single-dla_online_course .dla-course-sidebar > div{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}
@media (max-width:640px){
    body.single-dla_online_course .dla-enroll-cta,
    body.single-dla_online_course .dla-share-cta{min-height:58px !important;}
}


/* -----------------------------------------------------------------------
   Speaker stat boxes (dark skin)
   They sit across the banner edge, so a transparent fill left the numbers
   and labels reading against two different surfaces.
   ----------------------------------------------------------------------- */
.dla-speaker-profile .dla-sp-stat{
    background:rgba(11,26,20,.88) !important;
    backdrop-filter:blur(3px);
    border:1px solid rgba(181,148,88,.28) !important;
    box-shadow:0 10px 26px -14px rgba(0,0,0,.6) !important;
}
.dla-speaker-profile .dla-sp-stat-l{color:var(--lib-muted,#aebfb4) !important;}
@media (max-width:640px){
    .dla-speaker-profile .dla-sp-stat{padding:13px 20px !important;}
    .dla-speaker-profile .dla-sp-stat-l{font-size:16px !important;}
}


/* -----------------------------------------------------------------------
   Body copy weight on the course page
   Paragraphs and list items sit at 300 — the lightest weight Montserrat
   loads. That reads as elegant on a dark panel and as faint on a white one,
   which is where these pages ended up. One step up to 400.
   ----------------------------------------------------------------------- */
body.single-dla_online_course .dla-course-description,
body.single-dla_online_course .dla-course-description p,
body.single-dla_online_course .dla-course-description li,
body.single-dla_online_course .dla-lead,
body.single-dla_online_course .dla-course-documents p,
body.single-dla_online_course .dla-course-documents li{
    font-weight:400 !important;
}

/* -----------------------------------------------------------------------
   The price card on phones
   Its type was sized for the desktop sidebar, where the card is narrow and
   sits beside the video. Alone on a phone the same sizes read small.
   ----------------------------------------------------------------------- */
@media (max-width:640px){
    body.single-dla_online_course .dla-course-sidebar{padding:24px 20px !important;}
    body.single-dla_online_course .dla-sidebar-kicker{
        font-size:14px !important;letter-spacing:.14em !important;
    }
    body.single-dla_online_course .dla-sidebar-note{
        font-size:16px !important;line-height:1.6 !important;
    }
    body.single-dla_online_course .dla-course-sidebar li,
    body.single-dla_online_course .dla-course-sidebar p,
    body.single-dla_online_course .dla-course-sidebar span:not(.dla-sidebar-kicker){
        font-size:16px !important;font-weight:400 !important;
    }
    /* "Free" — the headline of the card */
    body.single-dla_online_course .dla-course-sidebar div[style*="Cormorant"]{
        font-size:38px !important;
    }
    body.single-dla_online_course .dla-course-description p,
    body.single-dla_online_course .dla-course-description li{
        font-size:16px !important;line-height:1.75 !important;
    }
}

/* Bell panel: pin the two buttons the theme repaints as big navy/serif
   blocks (close ×, admin test), and put the panel on the site's type. */
html body .dla-bell-drop,html body .dla-bell-drop *{font-family:'DM Sans',sans-serif !important;}
html body .dla-bell-head{padding:14px 16px !important;font:600 11px/1 'DM Sans',sans-serif !important;letter-spacing:.2em !important;text-transform:uppercase !important;}
html body .dla-bell-head > span{color:#cdac6c !important;}
html body .dla-bell-drop button.dla-bell-close{
    all:unset !important;cursor:pointer !important;
    width:30px !important;height:30px !important;line-height:28px !important;text-align:center !important;
    border:1px solid rgba(181,148,88,.35) !important;border-radius:50% !important;
    color:#aebfb4 !important;font:400 20px/28px 'DM Sans',sans-serif !important;
    box-sizing:border-box !important;
}
html body .dla-bell-drop button.dla-bell-close:hover{color:#cdac6c !important;border-color:#cdac6c !important;}
html body .dla-bell-item-title{font-family:'Marcellus','Cormorant Garamond',serif !important;font-size:18px !important;font-weight:400 !important;line-height:1.2 !important;}
html body .dla-bell-item-msg{font-size:13px !important;}
html body .dla-bell-item-mc{font-size:10px !important;letter-spacing:.18em !important;}
html body .dla-bell-item-date{font-size:11px !important;}
html body .dla-bell-empty{padding:32px 18px !important;font-size:13px !important;}
html body .dla-bell-foot{padding:12px 16px !important;}
html body .dla-bell-drop button.dla-bell-test{
    all:unset !important;cursor:pointer !important;box-sizing:border-box !important;
    display:inline-block !important;padding:9px 14px !important;border-radius:4px !important;
    background:#b59458 !important;color:#04100c !important;border:1px solid #b59458 !important;
    font:600 10px/1 'DM Sans',sans-serif !important;letter-spacing:.16em !important;text-transform:uppercase !important;
}
html body .dla-bell-drop button.dla-bell-test:hover{background:#cdac6c !important;border-color:#cdac6c !important;}
html body .dla-bell-test-out{font-size:12px !important;}
