/*==================================================
    DAILY QUIZ
==================================================*/

.gjp-daily-quiz{

    width:100%;

    height:100%;

    padding-right:20px;

    box-sizing:border-box;

}

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

.gjp-quiz-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    width:100%;

    height:100%;

    min-height:100%;

    padding:20px;

    background:linear-gradient(180deg,#fcfbff 0%,#f5f0ff 100%);

    border:1px solid #ece8ff;

    border-radius:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.04);

    overflow:hidden;

}

/*==================================================
    HEADER
==================================================*/

.gjp-quiz-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

}

/*==================================================
    ICON
==================================================*/

.gjp-quiz-header-icon{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:#ffffff;

    border:2px solid #6d28d9;

    color:#6d28d9;

    font-size:18px;

    font-weight:700;

    line-height:1;

}

/*==================================================
    TITLE
==================================================*/

.gjp-quiz-title{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#1f2937;

    line-height:1.2;

}

/*==================================================
    DESCRIPTION
==================================================*/

.gjp-quiz-description{

    margin:0 0 18px 48px;

    font-size:14px;

    line-height:1.7;

    color:#6b7280;

}
/*==================================================
    START QUIZ BUTTON
==================================================*/

.gjp-quiz-button{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:calc(100% - 32px);

    height:46px;

    margin:0 auto;

    padding:0 18px;

    background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);

    border-radius:8px;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:all .30s ease;

}

.gjp-quiz-button:hover{

    background:linear-gradient(135deg,#6d28d9 0%,#4c1d95 100%);

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(109,40,217,.20);

}

.gjp-btn-text{

    flex:1;

    text-align:center;

    letter-spacing:.2px;

}

.gjp-btn-arrow{

    font-size:20px;

    font-weight:700;

    line-height:1;

    transition:transform .30s ease;

}

.gjp-quiz-button:hover .gjp-btn-arrow{

    transform:translateX(5px);

}

/*==================================================
    STATS SECTION
==================================================*/

.gjp-quiz-stats{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-top:16px;

    padding-top:14px;

    border-top:1px solid #ebe7ff;

}

.gjp-quiz-stat{

    display:flex;

    flex-direction:column;

    flex:1;

}

.gjp-quiz-stat:last-child{

    align-items:flex-end;

    text-align:right;

}

/*==================================================
    LABEL
==================================================*/

.gjp-stat-label{

    margin-bottom:4px;

    font-size:12px;

    font-weight:500;

    color:#6b7280;

}

/*==================================================
    VALUE
==================================================*/

.gjp-stat-value{

    font-size:15px;

    font-weight:700;

    color:#111827;

    line-height:1.3;

}
/*==================================================
    SPACER
==================================================*/

.gjp-quiz-spacer{

    display:none;

}

/*==================================================
    CARD HOVER
==================================================*/

.gjp-quiz-card{

    transition:border-color .30s ease,
               box-shadow .30s ease,
               transform .30s ease;

}

.gjp-quiz-card:hover{

    border-color:#d8ccff;

    box-shadow:0 12px 28px rgba(124,58,237,.10);

    transform:translateY(-2px);

}

/*==================================================
    EQUAL HEIGHT SUPPORT
==================================================*/

.gjp-daily-quiz,
.gjp-quiz-card{

    height:100%;

}

/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .gjp-quiz-card{

        padding:18px;

    }

    .gjp-quiz-title{

        font-size:20px;

    }

}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .gjp-quiz-card{

        height:auto;

    }

    .gjp-quiz-description{

        margin-left:0;

    }

    .gjp-quiz-button{

        height:44px;

    }

    .gjp-quiz-stats{

        flex-direction:column;

        gap:14px;

        align-items:flex-start;

    }

    .gjp-quiz-stat:last-child{

        align-items:flex-start;

        text-align:left;

    }

    .gjp-quiz-spacer{

        display:none;

    }

}

/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .gjp-quiz-card{

        padding:16px;

        border-radius:10px;

    }

    .gjp-quiz-title{

        font-size:18px;

    }

    .gjp-quiz-description{

        font-size:13px;

        line-height:1.6;

    }

    .gjp-quiz-button{

        font-size:14px;

        padding:0 16px;

    }

    .gjp-btn-arrow{

        font-size:18px;

    }

    .gjp-stat-label{

        font-size:11px;

    }

    .gjp-stat-value{

        font-size:14px;

    }

}