/* ─── LearnFlow Account Widget ───────────────────────────────────────── */

.lfw-wrap { position: relative; overflow: hidden; }

.lfw-wrap::after {
    content: '';
    position: absolute; top: -20%; left: -10%;
    width: 60%; height: 60%;
    background: radial-gradient(ellipse, rgba(232,201,126,.06) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

.lfw-inner { position: relative; z-index: 1; padding: 3rem 2rem 5rem; }

/* ── Greeting ── */
.lfw-greeting-sub {
    font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; margin-bottom: .5rem;
    text-align: center;
    animation: lfw-fadeUp .6s ease both;
}
.lfw-greeting-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.12;
    margin: 0 0 .8rem;
    animation: lfw-fadeUp .6s .05s ease both;
}
.lfw-greeting-name em { font-style: normal; }
.lfw-greeting-desc {
    font-size: .95rem; line-height: 1.7;
    max-width: 480px; margin: 0 0 2.5rem;
    animation: lfw-fadeUp .6s .1s ease both;
}

/* ── Stats bar ── */
.lfw-stats-row {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 1px; border: none; border-radius: 0;
    overflow: hidden; margin-bottom: 3rem;
    animation: lfw-fadeUp .6s .15s ease both;
}
.lfw-stat-card { padding: 1.6rem 1.2rem; text-align: center; transition: background .2s; }
.lfw-stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem; font-weight: 700; line-height: 1;
}
.lfw-stat-label {
    font-size: .72rem; margin-top: .4rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
}

/* ── Section heading ── */
.lfw-section-heading {
    display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.2rem;
    animation: lfw-fadeUp .6s .2s ease both;
}
.lfw-section-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem; font-weight: 400; margin: 0;
}
.lfw-section-heading span { font-size: .8rem; font-weight: 500; }

/* ── Courses grid ── */
.lfw-courses-grid { display: grid; gap: .9rem; }

.lfw-course-card {
    border-radius: 0;
    padding: 0 1.8rem 0 0;
    display: grid;
    /* thumb width is a % of the card set via --lfw-thumb-pct (default 20%) */
    grid-template-columns: var(--lfw-thumb-pct, 20%) 1fr auto;
    gap: 1.4rem;
    align-items: stretch;
    transition: all .25s ease; cursor: default;
    position: relative;
    background: transparent; border: none;
    animation: lfw-fadeUp .6s ease both;
    overflow: hidden;
}
.lfw-course-card:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── Course image thumbnail ──────────────────────────────────────────
   • aspect-ratio: 4/5  →  portrait 4:5 box
   • align-self: stretch →  box height = card height (drives the card height)
   • width is auto so the browser solves: height = card, width = height * (4/5)
   • object-fit: cover   →  image fills the entire 4:5 box, no letterboxing
──────────────────────────────────────────────────────────────────── */
.lfw-course-thumb {
    /* width = % of card set by grid column — height stretches to full card */
    align-self: stretch;
    overflow: hidden;
    background: rgba(232,201,126,.06);
    display: block;
}
.lfw-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* fills the 4:5 box completely */
    object-position: center center;
    display: block;
}
.lfw-course-thumb .lfw-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    color: rgba(232,201,126,.4);
}

/* ── Course info — vertically centred inside stretched grid cell ── */
.lfw-course-info {
    padding: 1.4rem 0;
    display: flex; flex-direction: column; justify-content: center;
}
.lfw-course-info h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; }
.lfw-course-meta {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: .5rem .8rem; margin-bottom: .7rem;
}
.lfw-meta-item { font-size: .78rem; }
.lfw-dot { font-size: .45rem; opacity: .35; vertical-align: middle; }

/* Score tag inherits progress bar colour via CSS custom property set on the card */
.lfw-score-tag {
    font-size: .73rem; font-weight: 600; border-radius: 0;
    background: var(--lfw-bar-color, #4ade80);
    color: #ffffff;
    padding: .12rem .6rem;
    border: none;
}

/* ── Progress ── */
.lfw-progress-bg { height: 5px; border-radius: 0; overflow: hidden; margin-bottom: .3rem; }
.lfw-progress-fill {
    height: 100%; border-radius: 0;
    background: var(--lfw-bar-color, #e8c97e);
    animation: lfw-growBar 1.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lfw-growBar { from { width: 0; } to { width: var(--lfw-progress); } }
.lfw-progress-label { font-size: .73rem; font-weight: 500; }

/* ── Actions column — fixed width, all children same width & centred ── */
.lfw-course-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* children fill the column width */
    justify-content: center;
    gap: .6rem;
    flex-shrink: 0;
    width: 156px;           /* 130px × 1.2 = 156px (20% wider, grows left via grid) */
    padding: 1.4rem 0;
}

.lfw-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .4rem .75rem; border-radius: 0;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap;
    border: none;
    width: 100%; box-sizing: border-box;
    text-align: center;
}

/* completed badge — no hover */
.lfw-badge.completed          { background: #2163AE; color: #ffffff; }
.lfw-badge.completed:hover    { background: #2163AE; color: #ffffff; }

/* in-progress badge — no hover */
.lfw-badge.in-progress        { background: #ffffff; color: #2163AE; }
.lfw-badge.in-progress:hover  { background: #ffffff; color: #2163AE; }

/* not-started — unchanged */
.lfw-badge.not-started        { background: rgba(107,114,128,.1); color: #6b7280; }

.lfw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .9rem; border-radius: 0;
    font-size: .78rem; font-weight: 600; font-family: 'DM Sans', sans-serif;
    cursor: pointer; transition: background .2s, color .2s; white-space: nowrap;
    text-decoration: none; border: none;
    width: 100%; box-sizing: border-box;
    text-align: center;
}

/* cert button (link) + cert trigger (popup button) — same colours */
.lfw-btn-cert,
button.lfw-cert-trigger        { background: #2163AE; color: #ffffff; }
.lfw-btn-cert:hover,
button.lfw-cert-trigger:hover  { background: #2163AE; color: #EC9F2B; }

/* in-progress continue button */
.lfw-btn-primary               { background: #ffffff; color: #EC9F2B; }
.lfw-btn-primary:hover         { background: #EC9F2B; color: #ffffff; }

/* not-started ghost button */
.lfw-btn-ghost                 { background: transparent; color: #f0ece3; border: 1px solid rgba(255,255,255,.12); }
.lfw-btn-ghost:hover           { border-color: rgba(255,255,255,.3); }

/* ── Stagger ── */
.lfw-course-card:nth-child(1) { animation-delay: .2s; }
.lfw-course-card:nth-child(2) { animation-delay: .3s; }
.lfw-course-card:nth-child(3) { animation-delay: .4s; }
.lfw-course-card:nth-child(4) { animation-delay: .5s; }
.lfw-course-card:nth-child(5) { animation-delay: .6s; }
.lfw-course-card:nth-child(6) { animation-delay: .7s; }

@keyframes lfw-fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ── Responsive ── */
@media (max-width: 680px) {
    .lfw-inner { padding: 2rem 1.2rem 4rem; }
    .lfw-stats-row { grid-template-columns: 1fr; }
    .lfw-course-card {
        grid-template-columns: 70px 1fr;
        padding-right: 1.2rem;
    }
    .lfw-course-actions {
        flex-direction: row; flex-wrap: wrap;
        justify-content: flex-start;
        grid-column: 1 / -1;
        width: 100%; padding: 0 1.2rem 1.2rem;
    }
    .lfw-course-actions .lfw-badge,
    .lfw-course-actions .lfw-btn { width: auto; }
    .lfw-greeting-name { font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════════════
   Certificate Lightbox
══════════════════════════════════════════════════════════════ */

/* Trigger button — inherits all .lfw-btn styles, just remove default border behaviour */
button.lfw-cert-trigger {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}

/* Overlay */
.lfw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.lfw-lightbox[hidden] { display: none; }

/* Backdrop */
.lfw-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: lfw-lb-in .2s ease both;
}

/* Frame */
.lfw-lightbox-frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: min(90vw, 860px);
    max-height: 90vh;
    animation: lfw-lb-scale .25s cubic-bezier(.16,1,.3,1) both;
}

/* Certificate image */
.lfw-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 80px); /* leave room for download button */
    object-fit: contain;
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}

/* Close button */
.lfw-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(20, 23, 32, .9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    z-index: 2;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}
.lfw-lightbox-close:hover {
    background: rgba(208,59,47,.85);
    border-color: rgba(208,59,47,.6);
}
.lfw-lightbox-close:focus-visible {
    outline: 2px solid #e8c97e;
    outline-offset: 2px;
}

/* Download link */
.lfw-lightbox-download {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.1rem;
    background: #ffffff;
    color: #EC9F2B;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s, color .2s;
    border-radius: 0;
    border: none;
}
.lfw-lightbox-download:hover {
    background: #EC9F2B;
    color: #ffffff;
}

/* Animations */
@keyframes lfw-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lfw-lb-scale {
    from { opacity: 0; transform: scale(.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}