/*  Save-for-later heart + the Saved courses page.
 *  Shared by the student area and the public v3 listings, so everything here is
 *  scoped to its own class names and never restyles a card it sits inside. */

.course-save-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #6b6b6b;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease, background .15s ease;
}
.course-save-btn svg{
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill .15s ease;
}
.course-save-btn:hover{
    color: #e2566f;
    transform: scale(1.08);
}
.course-save-btn:focus-visible{
    outline: 2px solid #3c8dbc;
    outline-offset: 2px;
}
.course-save-btn.is-saved{
    color: #e2566f;
}
.course-save-btn.is-saved svg{
    fill: currentColor;
}
.course-save-btn.is-busy{
    opacity: .55;
    pointer-events: none;
}

/* On a card the heart floats over the artwork, above the full-card <a> cover.
   Bottom-right rather than top-right on purpose: every card style in the app
   already puts something in the top corners — "new"/gift top-left, bestseller or
   the student count top-right — and the bottom of the artwork is always clear. */
.course-save-btn.on-card{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 6;
}

/* Labelled variant — course detail, under the buy buttons. Full width so it lines
   up with the two CTAs above it, and quiet enough not to compete with them. */
.course-save-btn.has-label{
    width: 100%;
    height: auto;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}
.course-save-btn.has-label:hover{
    background: rgba(226, 86, 111, 0.07);
    transform: none;
}

/* ---- Saved courses page ---- */

.courses-card.saved-card{
    position: relative;
    transition: opacity .18s ease, transform .18s ease;
}
.courses-card.is-leaving{
    opacity: 0;
    transform: scale(.96);
}

.courses-owned-badge{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eaf4ea;
    color: #3f7742;
    font-size: 12px;
    font-weight: 600;
}

.saved-empty{
    max-width: 460px;
    margin: 48px auto;
    text-align: center;
}
.saved-empty-title{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.saved-empty-hint{
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b6b;
    margin-bottom: 20px;
}

/* Revealed by JS only when the last saved card is removed without a reload. */
.saved-empty-live{
    display: none;
}
.saved-empty-live.is-visible{
    display: block;
}

/* Sidebar / tab counter, hidden while the student has nothing saved. */
[data-saved_count].is-zero{
    display: none;
}

@media (max-width: 767px){
    .course-save-btn{
        width: 32px;
        height: 32px;
    }
    .course-save-btn svg{
        width: 18px;
        height: 18px;
    }
}