/* Start custom CSS */#mg-career-test-wrapper,
    #mg-career-test-wrapper * {
        box-sizing: border-box;
    }

    #mg-career-test-wrapper {
        max-width: 700px;
        margin: 30px auto;
        padding: 25px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        font-family: iranyekan, tahoma, sans-serif;
        direction: rtl;
        text-align: right;
        color: #333;
    }

    #mg-career-test-wrapper .mg-hidden {
        display: none !important;
    }

    #mg-career-test-wrapper h2 {
        margin: 0 0 15px;
        padding-bottom: 12px;
        color: #002244;
        border-bottom: 2px solid #e9ecef;
        font-size: 21px;
        line-height: 1.7;
    }

    #mg-career-test-wrapper .mg-description {
        margin: 0 0 24px;
        color: #666;
        font-size: 14px;
        line-height: 1.9;
    }

    #mg-career-test-wrapper .mg-field {
        margin-bottom: 17px;
    }

    #mg-career-test-wrapper .mg-field label {
        display: block;
        margin-bottom: 7px;
        color: #333;
        font-size: 14px;
        font-weight: 700;
    }

    #mg-career-test-wrapper input,
    #mg-career-test-wrapper select {
        display: block;
        width: 100%;
        height: 46px;
        padding: 9px 12px;
        color: #333;
        background: #fff;
        border: 1px solid #cfd4da;
        border-radius: 7px;
        outline: none;
        font-family: inherit;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    #mg-career-test-wrapper input:focus,
    #mg-career-test-wrapper select:focus {
        border-color: #002244;
        box-shadow: 0 0 0 3px rgba(0, 34, 68, 0.12);
    }

    #mg-career-test-wrapper input.mg-invalid {
        border-color: #d9534f;
        box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.12);
    }

    #mg-career-test-wrapper .mg-error {
        margin: 0 0 15px;
        padding: 11px 13px;
        color: #a12622;
        background: #fff1f0;
        border: 1px solid #ffc9c6;
        border-radius: 7px;
        font-size: 13px;
        line-height: 1.8;
    }

    #mg-career-test-wrapper button {
        font-family: inherit;
    }

    #mg-career-test-wrapper .mg-primary-button {
        line-height: 5px;
        width: 100%;
        padding: 15px 20px;
        color: #fff;
        background: #002244;
        border: 0;
        border-radius: 7px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 700;
        transition: background 0.2s, transform 0.2s;
    }

    #mg-career-test-wrapper .mg-primary-button:hover {
        background: #00386e;
        transform: translateY(-1px);
    }

    #mg-career-test-wrapper .mg-primary-button:disabled {
        cursor: wait;
        opacity: 0.65;
        transform: none;
    }

    #mg-progress-bar-container {
        margin-bottom: 24px;
    }

    #mg-career-test-wrapper .mg-progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        color: #58616a;
        font-size: 12px;
        font-weight: 700;
    }

    #mg-career-test-wrapper .mg-progress-track {
        width: 100%;
        height: 9px;
        overflow: hidden;
        background: #e9ecef;
        border-radius: 10px;
    }

    #mg-progress-bar {
        width: 0;
        height: 100%;
        background: #002244;
        border-radius: 10px;
        transition: width 0.3s ease;
    }

    #mg-question-title {
        margin: 0 0 22px;
        color: #002244;
        font-size: 18px;
        line-height: 1.9;
    }

    #mg-career-test-wrapper .mg-option-button {
        display: block;
        width: 100%;
        min-height: 50px;
        margin-bottom: 12px;
        padding: 12px 15px;
        color: #333;
        background: #f8f9fa;
        border: 1px solid #d9dde1;
        border-radius: 8px;
        cursor: pointer;
        text-align: right;
        font-size: 14px;
        line-height: 1.8;
        transition: color 0.2s, background 0.2s, border-color 0.2s;
    }

    #mg-career-test-wrapper .mg-option-button:hover,
    #mg-career-test-wrapper .mg-option-button:focus {
        color: #fff;
        background: #002244;
        border-color: #002244;
        outline: none;
    }

    #mg-career-test-wrapper .mg-option-button:disabled {
        cursor: default;
        opacity: 0.7;
    }

    #mg-step-loading {
        padding: 45px 10px;
        text-align: center;
    }

    #mg-step-loading p {
        color: #555;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.9;
    }

    #mg-career-test-wrapper .mg-spinner {
        width: 44px;
        height: 44px;
        margin: 0 auto 20px;
        border: 4px solid #e7e7e7;
        border-top-color: #002244;
        border-radius: 50%;
        animation: mg-spin 0.85s linear infinite;
    }

    #mg-step-result {
        text-align: center;
    }

    #mg-career-test-wrapper .mg-result-icon {
        margin-bottom: 10px;
        font-size: 52px;
    }

    #mg-step-result h2 {
        border-bottom: 0;
    }

    #mg-best-match {
        display: block;
        margin-top: 8px;
        color: #d9534f;
    }

    #mg-career-test-wrapper .mg-result-description {
        max-width: 550px;
        margin: 15px auto;
        color: #555;
        font-size: 15px;
        line-height: 1.9;
    }

    #mg-career-test-wrapper .mg-secondary-result {
        margin: 22px 0;
        padding: 17px;
        background: #f8f9fa;
        border: 1px solid #e3e7ea;
        border-radius: 9px;
    }

    #mg-career-test-wrapper .mg-secondary-result p {
        margin: 0 0 7px;
        font-size: 14px;
        font-weight: 700;
    }

    #mg-sub-matches {
        color: #59636d;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.9;
    }

    #mg-career-test-wrapper .mg-contact-message {
        color: #777;
        font-size: 13px;
        line-height: 1.9;
    }

    #mg-career-test-wrapper .mg-secondary-button {
            line-height: 5px;
        margin-top: 13px;
        padding: 10px 20px;
        color: #002244;
        background: #fff;
        border: 1px solid #002244;
        border-radius: 7px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
    }

    @keyframes mg-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 600px) {
        #mg-career-test-wrapper {
            margin: 15px 8px;
            padding: 19px 15px;
        }

        #mg-career-test-wrapper h2 {
            font-size: 18px;
        }

        #mg-question-title {
            font-size: 16px;
        }

        #mg-career-test-wrapper .mg-option-button {
            padding: 11px 12px;
            font-size: 13px;
        }
    }/* End custom CSS */