.sp-folder-card{
    cursor: pointer;
}

/* ======================================================
   GLOBAL RESET
====================================================== */
*,
*::before,
*::after{
    box-sizing: border-box;
}

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* ======================================================
   BASE LAYOUT
====================================================== */
.sp-exam-layout{
    width: 100%;
    min-height: 100vh;
    background: #ffffff;      /* #f8fafc */
}

/* Sidebar permanently disabled */
.sp-exam-sidebar{
    display: none !important;
}

/* ======================================================
   MAIN CONTENT
====================================================== */
.sp-exam-content{
    width: 100%;
    margin: 0;
    padding: 32px 0;
}

/* ======================================================
   CENTERED GRID
====================================================== */
.sp-test-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;

    max-width: 1600px;
    margin: 10px auto;
    padding: 0 16px;
}

/* ======================================================
   📁 FOLDER CARD
====================================================== */
.sp-folder-card{
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;

    display: flex;
    align-items: center;
    gap: 8px;

    font-weight: 600;
    color: #111827;
    text-decoration: none;

    box-shadow: 0 8px 22px rgba(15,23,42,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sp-folder-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15,23,42,.15);
}

/* ======================================================
   🧪 TEST CARD
====================================================== */
.sp-test-card{
    position: relative;

background:
    linear-gradient(
        180deg,
        rgba(147, 51, 234, 0.2) 0%,   /* 💜 soft purple (top) */
        rgba(34, 197, 94, 0.04) 45%,   /* 💚 light green (middle) */
        rgba(255, 255, 255, 0.95) 100% /* 🤍 white (bottom) */
    ),
    #ffffff;

    border-radius: 18px;
    padding: 22px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    box-shadow: 0 12px 30px rgba(15,23,42,.08);
    cursor: pointer;

    transition: transform .25s ease, box-shadow .25s ease;
}

.sp-test-card:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 45px rgba(15,23,42,.18);
}


/*======================================= no card selection ================= */
.sp-test-card,
.sp-test-card *{
  user-select:none;
}







/* ======================================================
   🎨 CARD BACKGROUND COLORS (STATE BASED)
   PURPOSE:
   - User instantly understands test state
   - Buy / Renew / Free / Active clearly separated
====================================================== */


/* ======================================================
   🟢 FREE TEST CARD
   - Fresh & friendly
   - No pressure, welcoming
====================================================== */
.card-free{
    background:
        linear-gradient(
            180deg,
            rgba(34,197,94,0.12),   /* soft green top */
            rgba(255,255,255,0.96) /* clean white bottom */
        ),
        #ffffff;
}


/* ======================================================
   🟠 BUY NOW CARD (PAID BUT NOT PURCHASED)
   - Warm & attention grabbing
   - Encourages conversion
====================================================== */
.card-buy{
    background:
        linear-gradient(
            180deg,
            rgba(245,158,11,0.14),  /* soft orange top */
            rgba(255,255,255,0.96) /* white bottom */
        ),
        #ffffff;
}


/* ======================================================
   🟣 RENEW CARD
   - Premium & important
   - Indicates previous ownership
====================================================== */
.card-renew{
    background:
        linear-gradient(
            180deg,
            rgba(147,51,234,0.16),  /* premium purple top */
            rgba(255,255,255,0.96) /* white bottom */
        ),
        #ffffff;
}


/* ======================================================
   🟢 ACTIVE / PURCHASED CARD
   - Calm success state
   - User has access
====================================================== */
.card-active{
    background:
        linear-gradient(
            180deg,
            rgba(34,197,94,0.08),   /* subtle green top */
            rgba(255,255,255,0.96) /* white bottom */
        ),
        #ffffff;
}



/* ======================================================
    EXPIRED CARD
====================================================== */

.card-expired{
    background:
        linear-gradient(
            180deg,
            rgba(220,38,38,0.12),
            rgba(255,255,255,0.96)
        ),
        #ffffff;
    opacity: 0.85;
}


/* ======================================================
   🔁 RENEW BUTTON (PURPLE – CONSISTENT WITH CARD)
====================================================== */
.sp-card-btn.renew-btn{
    background: linear-gradient(135deg,#7c3aed,#9333ea);
    color: #ffffff;
}

.sp-card-btn.renew-btn:hover{
    background: linear-gradient(135deg,#6d28d9,#7e22ce);
}


/* ======================================================
   🟢 PAID START BUTTON (LIGHT GREEN)
====================================================== */
.sp-card-btn.start-paid{
    background: linear-gradient(135deg,#22c55e,#16a34a);
}

.sp-card-btn.start-paid:hover{
    background: linear-gradient(135deg,#16a34a,#15803d);
}







/* ======================================================
   CARD TEXT
====================================================== */
.sp-card-title{
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.sp-card-meta{
    font-size: 14px;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-card-badges{
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ======================================================
   BADGES
====================================================== */
.sp-badge{
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.sp-badge.free{
    background: #dcfce7;
    color: #166534;
}

.sp-badge.paid{
    background: #fee2e2;
    color: #991b1b;
}

.sp-badge.attempt{
    background: #f1f5f9;
    color: #334155;
}

/* ======================================================
   BUTTONS
====================================================== */
.sp-card-btn{
    margin-top: auto;
    padding: 12px;
    border-radius: 10px;
    text-align: center;

    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;

    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sp-card-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37,99,235,.35);
    background: #1d4ed8;
}

/* renew */
.sp-card-btn.renew-btn{
    background: linear-gradient(135deg,#7c3aed,#9333ea);
}

.sp-card-btn.renew-btn:hover{
    background: linear-gradient(135deg,#6d28d9,#7e22ce);
}








/* CARD LAYOUT FIX */

.sp-test-card{
    display:flex;
    flex-direction:column;
}

/* meta section grow করবে */
.sp-card-meta{
    flex-grow:1;
}

/* button section always bottom */
.sp-card-btn,
.sp-test-card > div:last-child{
    margin-top:auto;
}




/* ======================================================
   ⭐ STAR BUTTON (HOLLOW → SOLID)
====================================================== */
.sp-star-btn{
    position: absolute;
    top: 14px;
    right: 14px;

    width: 36px;
    height: 36px;

    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 5;

    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.sp-star-btn .star-icon{
    font-size: 20px;
    color: #9ca3af;
    transition: color .15s ease;
}

.sp-star-btn:hover{
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.sp-star-btn:hover .star-icon{
    color: #6366f1;
}

.sp-star-btn.active{
    border-color: #facc15;
    box-shadow: 0 0 0 4px rgba(250,204,21,.22);
}

.sp-star-btn.active .star-icon{
    color: #facc15;
}

.sp-star-btn:active{
    transform: scale(.92);
}



/* ======================================================
   ⭐ STAR CLICK REACTION (INSTANT FEEL)
====================================================== */

/* click animation */
@keyframes star-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* apply on click */
.sp-star-btn.react {
    animation: star-pop 0.35s ease;
}

/* active glow */
.sp-star-btn.active{
    border-color: #facc15;
    box-shadow: 0 0 0 6px rgba(250,204,21,.25);
}





/* ======================================================
   EMPTY STATE MESSAGE
====================================================== */
.sp-empty-message{
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
}

/* icon feel */
.sp-empty-message::before{
    content: "☆";
    display: block;
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 10px;
}



/* ===============================
   NOTIFICATION HIGHLIGHT
=============================== */

.sp-highlight-test{
    border:3px solid #facc15;
    box-shadow:0 0 0 6px rgba(250,204,21,.25);
    animation:spHighlight 0.8s ease;
}

@keyframes spHighlight{
    0%{transform:scale(.96)}
    50%{transform:scale(1.02)}
    100%{transform:scale(1)}
}



/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 768px){

    .sp-exam-content{
        padding-bottom: 96px;
    }

    .sp-test-grid{
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px auto;
    }

    .sp-test-card:hover{
        transform: none;
        box-shadow: 0 12px 30px rgba(15,23,42,.08);
    }
}

/* ======================================================
   MOBILE FOOTER
====================================================== */
/* ======================================================
   📱 MOBILE FOOTER — CLICK SAFE + STABLE
   PURPOSE:
   - Filter buttons always clickable
   - Card hover / overlay block করবে না
====================================================== */

.sp-mobile-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    gap: 8px;
    padding: 6px 12px;

    background: linear-gradient(
        180deg,
        #f3f4f6 0%,
        #eef0f4 100%
    );

    border-top: 1px solid #dbe0e6;
    box-shadow: 0 -4px 12px rgba(15,23,42,.08);

    z-index: 9999;          /* 🔥 ABOVE ALL CARDS */
    pointer-events: auto;   /* 🔥 CLICK ENABLE */
}

/* ===============================
   FILTER BUTTONS
=============================== */
.sp-mobile-footer .sp-filter-btn{
    flex: 1;
    padding: 6px 0;

    background: #ffffff;
    color: #1f2937;

    border: 1px solid #d1d5db;
    border-radius: 999px;

    font-weight: 600;
    font-size: 12.5px;

    cursor: pointer;

    pointer-events: auto;   /* 🔥 MUST */
    z-index: 10000;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
}

/* ===============================
   ACTIVE STATE
=============================== */
.sp-mobile-footer .sp-filter-btn.active{
    background: #fdebd3;
    color: #7c2d12;

    border-color: #facc15;
    box-shadow: 0 2px 6px rgba(250,204,21,.35);
}

/* ===============================
   CLICK FEEDBACK
=============================== */
.sp-mobile-footer .sp-filter-btn:active{
    transform: scale(.95);
}