/* ==========================================
   QUIZ DETAILS - MASTER CORE & RESPONSIVE STYLING
   ========================================== */

:root {
    --primary-color: #0d6efd;
    --success-gradient: linear-gradient(135deg, #28a745, #20c997);
    --border-radius-custom: 14px;
    --transition-smooth: all 0.25s ease;
}

/* 1. Base Container & Navigation Components */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.custom-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.custom-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 30px;
    border: 2px solid #eaeaea;
    background: #fff;
    color: #495057;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
}

    .custom-btn:hover, .custom-btn.active {
        background-color: #f8fbff;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .custom-btn.active {
        background-color: var(--primary-color) !important;
        color: #fff !important;
        border-color: var(--primary-color) !important;
    }

.disabled-btn {
    background: #f5f5f5;
    color: #bcbcbc;
    border-color: #e0e0e0;
    cursor: not-allowed;
}

/* 2. Quiz Item Containers */
.quiz-item {
    background: #fff;
    border: 1px solid #eef2f5;
    margin-bottom: 1.5rem;
    transition: var(--transition-smooth);
}

/* 3. Options Configuration & Structure Layouts */
.options-group {
    max-width: 100% !important; /* Forces flexible mobile width overriding inline element limits */
    margin-left: 0 !important; /* Aligns properly on compact Viewports */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius-custom);
    border: 2px solid #eaeaea;
    background: #fff;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
    box-sizing: border-box;
}

    .option-item:hover {
        transform: translateY(-2px);
        border-color: var(--primary-color);
        background: #f8fbff;
    }

    .option-item input {
        transform: scale(1.3);
        cursor: pointer;
        margin: 0;
        flex-shrink: 0;
    }

    .option-item label {
        cursor: pointer;
        margin: 0;
        width: 100%;
        font-size: 0.95rem;
        line-height: 1.4;
        word-break: break-word;
    }

/* Validation System Visual States */
.correct-selection {
    background: #e6f7ee !important;
    border-color: #198754 !important;
    color: #0f5132 !important;
    font-weight: 600;
}

.wrong-selection {
    background: #fdecec !important;
    border-color: #dc3545 !important;
    color: #842029 !important;
}

/* 4. Submission Element Blocks */
.d-flex.justify-content-end.mt-3 {
    margin-left: 0 !important; /* Breaks rigid structural alignment down on mobile screens */
    justify-content: flex-start !important;
    width: 100%;
}

.btn-check-answer {
    background: var(--success-gradient);
    color: #fff;
    border-radius: 30px;
    font-weight: 600;
    border: none;
    box-shadow: 0 6px 15px rgba(40,167,69,.35);
    transition: var(--transition-smooth);
    width: 100%;
    text-align: center;
    padding: 12px !important;
}

    .btn-check-answer:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(40,167,69,.5);
        color: white;
    }

.result-box {
    border-left: 6px solid #198754;
    border-radius: var(--border-radius-custom);
    background: #f9f9f9;
}

/* 5. Fluid Responsive Framework Handling (Widescreen Elements) */
@media (min-width: 768px) {
    .custom-btn-group {
        width: auto;
    }

        .custom-btn-group .custom-btn {
            flex: 0 1 auto;
        }

    .options-group {
        max-width: 75% !important; /* Applies cleaner readability frame on computers */
        margin-left: 4% !important;
    }

    .d-flex.justify-content-end.mt-3 {
        justify-content: flex-end !important; /* Floats submission tools back right safely */
    }

    .btn-check-answer {
        width: auto !important;
        padding: 10px 24px !important;
    }
}

@media (min-width: 992px) {
    .options-group {
        max-width: 65% !important;
        margin-left: 6% !important;
    }
}