/**
 * Shared mobile layout for all training, CEP, and exam forms
 * Gives input fields more breathing room - prevents cramped feel on small screens
 * Extra left/right padding so inputs don't touch the container edges
 *
 * Also prevents horizontal overflow: multi-step labels use white-space:nowrap in
 * form pages, which forces the steps row wider than the viewport; regForm uses
 * content-box width + padding + min-width:300px, which can exceed narrow screens.
 */
@media (max-width: 600px) {
    #regForm {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /* ~margin keeps prior visual inset without blowing past viewport */
        width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 15px 30px 15px 24px !important;
    }

    .tab {
        padding: 15px 28px 15px 24px !important;
    }

    .individual-option {
        padding: 12px 24px 12px 20px !important;
    }

    .participant-block {
        padding: 20px 40px 20px 24px !important;
    }

    .steps-wrapper {
        padding: 0 24px 0 20px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .steps-track {
        min-width: 0;
    }

    .step-item {
        min-width: 0;
    }

    .step-label {
        white-space: normal !important;
        font-size: 11px;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .steps-track::before {
        left: 18px;
        right: 18px;
    }
}