/* ==========================================================
   Exam List – Page Styles
   ========================================================== */
:root { --font-jakarta-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; }

body {
    background-color: #f8f9fa;
    overflow-x: hidden;
    font-family: var(--font-jakarta-sans);
}

html { scroll-behavior: smooth; }
.page-content-wrapper { width: 100%; padding-bottom: 85px; }
.single-product-card { border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: all 0.2s ease; overflow: visible; }

/* Hide Scrollbar for Tabs */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Tab hover */
.tab-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; }

/* Load More */
.btn-load-more {
    background-color: #f8f9fa; color: #4361ee;
    border: 2px solid #e2e8f0; border-radius: 5px;
    padding: 8px 24px; font-size: 0.9rem; font-weight: 700;
    font-family: var(--font-jakarta-sans);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer; outline: none;
}
.btn-load-more:hover, .btn-load-more:active {
    background-color: #4361ee; color: white;
    border-color: #4361ee; transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(67, 97, 238, 0.2);
}
.btn-load-more .badge {
    background-color: #e2e8f0; color: #4361ee;
    border-radius: 5px; padding: 4px 8px;
    font-size: 0.75rem; margin-left: 6px; transition: all 0.3s ease;
}
.btn-load-more:hover .badge, .btn-load-more:active .badge { background-color: white; }

/* Share Buttons */
#shareWhatsappBtn:hover {
    background-color: #1ebe57 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3) !important;
}
.card-share-btn-modern {
    position: absolute; bottom: 12px; right: 12px;
    width: 28px; height: 28px;
    background: rgba(67, 97, 238, 0.08); border: none; color: #4361ee;
    border-radius: 5px; display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; cursor: pointer; transition: all 0.2s; z-index: 5;
}
.card-share-btn-modern:hover { background: #4361ee; color: white; transform: scale(1.1); }

/* Read More */
.read-more-btn { transition: all 0.2s ease; }
.read-more-btn:hover { color: #3651d4 !important; text-decoration: underline !important; }

/* Floating Share */
.floating-share-btn {
    position: fixed; bottom: 85px; right: 20px;
    width: 52px; height: 52px; background-color: #4361ee; color: white;
    border-radius: 5px; border: none; display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; z-index: 1000; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-share-btn:hover { transform: scale(1.1) translateY(-5px); background-color: #3651d4; }

/* Completion Badge */
.completion-badge-btn {
    background: transparent; border: 1px solid #ced4da; color: #6c757d;
    border-radius: 5px; padding: 2px 8px; font-size: 0.65rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.completion-badge-btn.completed { background: #e6f4ea; border-color: #198754; color: #198754; }

/* Action Buttons */
.btn-youtube { background-color: #ff0000; color: #fff; border: none; }
.action-btn { flex: 0 0 auto; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; }
.action-btn.icon-btn { width: 32px !important; height: 28px !important; padding: 0 !important; }

/* YouTube Video Container */
.yt-video-wrapper {
    background: #000; margin: 12px -8px -8px -8px;
    border-radius: 0 0 8px 8px; overflow: hidden;
    position: relative; z-index: 2;
}
.ratio-container { position: relative; width: 100%; }
.ratio-16x9 { padding-bottom: 56.25%; }
.ratio-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Weakness Strip */
.weakness-strip {
    background: linear-gradient(135deg, #fff3f3 0%, #ffe6e6 100%);
    border-radius: 6px; border-left: 3px solid #dc3545; transition: transform 0.2s;
}
.weakness-strip:hover { transform: translateY(-2px); }
.weakness-icon { display: flex; align-items: center; justify-content: center; background-color: #dc3545; flex-shrink: 0; }
.weakness-title { font-weight: 800; color: #b02a37; line-height: 1.2; }
.weakness-subtitle { font-weight: 600; color: #6c757d; }
.weakness-badge { font-weight: 700; box-shadow: 0 2px 4px rgba(220,53,69,0.3); }