/* Test interface styles */

/* Desktop styles */
.test_text {
    font-size: 33px;
    line-height: 41px;
}

.add-btns,
.answ-btn {
    width: 180px;
    height: 90px;
    font-size: 25px !important;
    line-height: 29px;
}

.answ-btn .fs-4 {
    font-size: 25px !important;
}

.answ-btn-back {
    font-size: 23px;
}

/* Mobile devices (less than 768px) */
@media screen and (max-width: 767px) {
    /* Hide main navigation */
    .navbar {
        display: none !important;
    }

    /* Hide instructions header on mobile */
    .card-header {
        display: none !important;
    }

    /* Compact mobile layout */
    .container-fluid {
        padding: 0.5rem !important;
    }

    main {
        margin: 0 0.5rem 0.5rem 0.5rem !important;
    }

    .card {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .card-body {
        padding: 0.25rem !important;
    }

    /* Compact question header */
    .d-flex.justify-content-between.align-items-center {
        margin-bottom: 0.25rem !important;
    }

    .d-flex.justify-content-between.align-items-center h5 {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .d-flex.justify-content-between.align-items-center small {
        font-size: 12px !important;
    }

    /* Compact progress bar */
    .progress {
        height: 4px !important;
        margin-bottom: 0.25rem !important;
    }

    /* Question text */
    .test_text {
        font-size: 16px !important;
        line-height: 20px !important;
        margin-bottom: 0.75rem !important;
    }

    /* Answer buttons in 2x5 grid on mobile using CSS Grid */
    .row.g-2.mb-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(5, 1fr) !important;
        gap: 0.25rem !important;
        margin: 0 0 0.5rem 0 !important;
    }

    .row.g-2.mb-4 > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
    }

    .answ-btn {
        height: 65px !important;
        font-size: 14px !important;
        padding: 0.25rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .answ-btn .fs-4 {
        font-size: 14px !important;
    }

    /* Scale explanation */
    .d-flex.justify-content-between.mt-4 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .d-flex.justify-content-between.mt-4 .badge {
        font-size: 10px !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Action buttons - Next button full width, Skip button below */
    .row.g-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        margin: 0.25rem 0 0 0 !important;
    }

    .row.g-3 > div {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide "К пропущенным" button completely on mobile */
    .row.g-3 .col-12.col-md-4:nth-child(2) {
        display: none !important;
    }

    /* Next button first (full width) */
    .row.g-3 .col-12.col-md-4:last-child {
        order: 1 !important;
    }

    /* Skip button second (full width, under Next) */
    .row.g-3 .col-12.col-md-4:first-child {
        order: 2 !important;
    }

    .answ-btn-next {
        height: 44px !important;
        font-size: 14px !important;
        padding: 0.5rem 0.75rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .answ-btn-skip {
        height: 44px !important;
        font-size: 14px !important;
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .answ-btn-skip svg,
    .answ-btn-next svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 0.25rem !important;
        flex-shrink: 0 !important;
    }
}

/* Very small devices (less than 400px) */
@media screen and (max-width: 399px) {
    .answ-btn {
        height: 38px !important;
        font-size: 12px !important;
    }

    .answ-btn .fs-4 {
        font-size: 12px !important;
    }

    .test_text {
        font-size: 15px !important;
        line-height: 18px !important;
    }

    .answ-btn-next {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0.5rem 0.5rem !important;
    }

    .answ-btn-skip {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0.75rem 0.75rem !important;
    }

    .answ-btn-skip svg,
    .answ-btn-next svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Small devices and up (tablets, 576px and up) */
@media screen and (min-width: 576px) {
    .test_text {
        font-size: 33px;
        line-height: 41px;
    }

    .add-btns,
    .answ-btn {
        width: 180px;
        height: 90px;
        font-size: 25px !important;
        line-height: 29px;
    }

    .answ-btn .fs-4 {
        font-size: 25px !important;
    }

    .answ-btn-back {
        font-size: 23px;
    }
}

/* Utility classes */
.h-divider {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    width: 100%;
    border-top: 1px solid grey;
}