/* practice.css
   Extracted and refined styles for practice.php
*/

:root{
    --primary-blue: #0d6efd;
    --light-blue-bg: #f7fcff;
    --grid-line-color: rgba(13,110,253,0.03);
    --navbar-border-color: #a0e9ff;
    --text-dark: #212529;
    --text-muted-light: #6c757d;
}

body.practice-page {
    background-color: var(--light-blue-bg);
    background-image: linear-gradient(var(--grid-line-color) 1px, transparent 1px),
                      linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px);
    background-size: 3rem 3rem;
}

/* Hero */
.hero-section{
    padding: 3.5rem 0;
}

.hero-section h1{
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.08;
}

.hero-section .lead{
    color: var(--text-muted-light);
    max-width: 760px;
    margin: .75rem auto 0;
}

/* Filters */
.filter-section{padding-bottom:0.75rem}
.filter-group{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.filter-group .btn{border-radius:999px;font-weight:600;padding:.45rem .95rem}
.btn-outline-custom{background:#fff;border-color:var(--primary-blue);color:var(--primary-blue)}
.btn-outline-custom.active,.btn-outline-custom:hover{background:var(--primary-blue);color:#fff}

/* Practice cards */
.practice-sets .practice-card{background:#fff;border:1px solid #e9eef7;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform .22s ease,box-shadow .22s ease}
.practice-sets .practice-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(16,24,40,0.06)}
.practice-sets .card-body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column}
.practice-sets .card-title{font-size:1.05rem;margin-bottom:.35rem}
.practice-sets .card-text{color:var(--text-muted-light);flex:1}
.practice-sets .btn{margin-top:1rem}

/* Review result styling */
.question-card .form-check-label.text-success {
    background-color: #e6f4ea;
    display: block;
    padding: .6rem .75rem;
    border-radius: 6px;
}
.question-card .form-check-label.text-danger {
    background-color: #fdecea;
    display: block;
    padding: .6rem .75rem;
    border-radius: 6px;
}

/* Layout tweaks */
main.container{max-width:1100px}

/* Footer spacing */
.footer{margin-top:4.5rem;padding:1.5rem 0}

/* Ensure main content sits above animated grid overlay */
.main-content{
    position: relative;
    z-index: 2;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Responsive */
@media (max-width:767.98px){
    .hero-section{padding:2rem 0}
    .hero-section h1{font-size:1.75rem}
    .filter-group .btn{padding:.4rem .7rem;font-size:.95rem}
}