/* Glass Folder Component */
.glass-folder-wrapper {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 180px;
    z-index: 20;
    pointer-events: none;
    background: transparent !important;
    /* Force transparent */
    backdrop-filter: none !important;
    /* Force no filter on wrapper */
    /* Force no filter on wrapper */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.premium-card:hover .glass-folder-wrapper {
    /* Only lift if NOT playing, or handle lift gracefully */
    transform: translateY(-8px);
}

/* Override hover lift when playing to keep it stable */
.premium-card:hover .glass-folder-wrapper.folder-playing {
    transform: none;
}

.glass-folder-shape {
    position: absolute;
    inset: 0;
    /* User requested specific lighter grey, but maintaining glass effect requiring opacity */
    background: linear-gradient(180deg, rgba(70, 70, 82, 0.4) 0%, rgba(14, 14, 26, 0.85) 100%);

    /* Glassmorphism removed */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    z-index: 10;
    /* Shape and Border Trick */
    border-radius: 30px;
    border-bottom-left-radius: 38px;
    border-bottom-right-radius: 38px;

    /* Hybrid Clip Path: covers top curve, extends down to let border-radius handle bottom */
    clip-path: polygon(0% 0%,
            85px 0%,
            95px 2px,
            105px 8px,
            115px 18px,
            125px 30px,
            135px 42px,
            148px 50px,
            165px 54px,
            calc(100% - 30px) 54px,
            calc(100% - 24.8px) 54.5px,
            calc(100% - 19.8px) 55.8px,
            calc(100% - 15px) 58px,
            calc(100% - 10.7px) 61px,
            calc(100% - 7px) 64.7px,
            calc(100% - 4px) 69px,
            calc(100% - 1.8px) 73.8px,
            calc(100% - 0.5px) 78.8px,
            100% 84px,
            100% 200%,
            0% 200%);

    /* Drop shadow creates the "Border" on the clipped shape */
    filter: drop-shadow(0px 1px 0px rgba(20, 20, 35, 0.95)) drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.3));
    transition: background 0.4s ease;
}

.premium-card:hover .glass-folder-shape {
    background: linear-gradient(180deg, rgba(50, 50, 70, 0.7) 0%, rgba(20, 20, 35, 0.95) 100%);
}

.glass-folder-content {
    position: relative;
    z-index: 20;
    height: 100%;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: auto;
}

/* Position the play button in the 'Tab' area */
.glass-folder-play-btn {
    position: absolute;
    top: 14px;
    left: 18px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
    border: none;
    /* Reset */
    z-index: 50;
}

.glass-folder-play-btn:hover {
    transform: scale(1.15) rotate(5deg);
    background: white;
}

.glass-folder-play-btn.playing {
    background: #8035C3;
    color: white;
    box-shadow: 0 0 25px rgba(128, 53, 195, 0.6);
}

/* Text Container */
.glass-folder-text {
    margin-top: 55px;
    /* Clear the button/tab height */
    padding-bottom: 8px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.premium-card:hover .glass-folder-text {
    transform: translateY(-2px);
}

.glass-folder-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    /* Reduced from 1.6rem */
    font-weight: 500;
    color: white;
    margin-bottom: 4px;
    /* Reduced from 6px */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
    transition: font-size 0.4s ease;
}

.glass-folder-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    /* Reduced from 0.9rem */
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.35;
    /* Slightly tighter line height */
    font-weight: 300;
    transition: font-size 0.4s ease, opacity 0.4s ease;
}

/* PLAYING STATE: height becomes low, text scales down */
.glass-folder-wrapper.folder-playing {
    height: 130px !important;
    /* Physically reduce height instead of pushing down */
    transform: none !important;
}

.glass-folder-wrapper.folder-playing .glass-folder-title {
    font-size: 0.9rem;
    /* Adjusted to fit nicely */
    margin-bottom: 0;
}

.glass-folder-wrapper.folder-playing .glass-folder-desc {
    display: none;
    /* Hide all description text */
}