/* CCCWale Frontend Styles - System Font Stack for Performance */
:root {
    --primary-color: #2271b1;
    --success-color: #00a32a;
    --danger-color: #d63638;
    --warning-color: #dba617;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ═══════════════════════════════════════════════════════════════
   CCCWale — "Buy Book" Button — Instagram Gradient + Zoom + Sale Badge
   ═══════════════════════════════════════════════════════════════
   PEHLE wali CSS isliye kaam nahi kar rahi thi kyunki plugin ke andar
   hi ek <style> block hai (.pkg-sc-btn ki styling) jo isi specificity
   ke saath, lekin BAAD me load hoti hai — isliye wahi jeet jaati thi.
   Is baar har rule ke saath !important laga diya hai, taaki guaranteed
   override ho, chahe plugin ka apna CSS kuch bhi ho.

   YE turant kaam karegi (kisi plugin update ki zaroorat nahi):
     → Packages page ka "Buy Karo" book button
       (selector: button[data-pkg-type="book"])

   YE tab kaam karegi jab aap pichla wala plugin-update (v5) install
   kar chuke ho (jisme maine class="ccc-buy-book-btn" add ki thi):
     → Result page ka "📕 Buy Book"
     → Review page ka "📕 Buy Book"
   ═══════════════════════════════════════════════════════════════ */

/* ── Selectors: dono tareeke se target karte hain, jo bhi match ho ── */
button.pkg-sc-btn[data-pkg-type="book"]:not(.current),
a.pkg-sc-btn.ccc-buy-book-btn,
.ccc-buy-book-btn {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    background: linear-gradient(
        135deg,
        #4f5bd5 0%,
        #962fbf 25%,
        #d62976 50%,
        #fa7e1e 75%,
        #feda75 100%
    ) !important;
    background-size: 300% 300% !important;

    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(214, 41, 118, 0.45) !important;

    animation:
        cccBuyBookGradient 4s ease infinite,
        cccBuyBookZoom 1.6s ease-in-out infinite !important;
}

/* Shimmer streak */
button.pkg-sc-btn[data-pkg-type="book"]:not(.current)::before,
.ccc-buy-book-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%) !important;
    transform: skewX(-20deg) !important;
    animation: cccBuyBookShimmer 2.6s ease-in-out infinite !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Sale badge — top-right corner, apni alag animation ke saath */
button.pkg-sc-btn[data-pkg-type="book"]:not(.current)::after,
.ccc-buy-book-btn::after {
    content: "🔥 SALE" !important;
    position: absolute !important;
    top: -12px !important;
    right: -10px !important;
    background: #FFD600 !important;
    color: #7a1a00 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
    z-index: 2 !important;
    animation: cccBadgeBounce 1.4s ease-in-out infinite !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

button.pkg-sc-btn[data-pkg-type="book"]:not(.current):hover,
.ccc-buy-book-btn:hover,
.ccc-buy-book-btn:focus {
    box-shadow: 0 10px 26px rgba(150, 47, 191, 0.6) !important;
    color: #fff !important;
}

/* ── Animations ── */

/* Poora button zoom-in / zoom-out karta rahega */
@keyframes cccBuyBookZoom {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@keyframes cccBuyBookGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes cccBuyBookShimmer {
    0%   { left: -60%; }
    100% { left: 130%; }
}

/* Badge bounce/wiggle */
@keyframes cccBadgeBounce {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-4px) rotate(6deg); }
}

/* Result/Review page ka pill-style variant (chhota button) */
.ccc-buy-book-btn-pill {
    padding: 8px 18px !important;
    font-size: 13px !important;
}

@media (max-width: 480px) {
    button.pkg-sc-btn[data-pkg-type="book"]:not(.current),
    .ccc-buy-book-btn {
        font-size: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    button.pkg-sc-btn[data-pkg-type="book"]:not(.current),
    button.pkg-sc-btn[data-pkg-type="book"]:not(.current)::before,
    button.pkg-sc-btn[data-pkg-type="book"]:not(.current)::after,
    .ccc-buy-book-btn,
    .ccc-buy-book-btn::before,
    .ccc-buy-book-btn::after {
        animation: none !important;
    }
}

.cccwale-test-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.cccwale-question-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cccwale-option {
    background: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cccwale-option:hover {
    border-color: var(--primary-color);
    background: #e9f5ff;
}

.cccwale-option.selected {
    background: var(--primary-color);
    color: white;
}

.cccwale-timer {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 24px;
    font-weight: bold;
    z-index: 1000;
}

.cccwale-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 15px 20px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    z-index: 999;
}

.cccwale-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.cccwale-btn-primary {
    background: var(--primary-color);
    color: white;
}

@media (max-width: 768px) {
    .cccwale-test-container {
        padding: 10px;
    }
    .cccwale-action-bar {
        flex-direction: column;
        gap: 10px;
    }
}